add light theme

Author: SerhiiTsybulskyi

.storybook/preview-head.html

@@ -39,7 +39,7 @@
 
   .light .sb-show-main.sb-main-centered {
     color: #11111F;
-    background: #E6E6F0;
+    background: #F7F7FA;
   }
 
   .dark .sb-show-main.sb-main-centered {

src/form/Range/Range.story.tsx

@@ -4,14 +4,7 @@ import { RangeSingle } from './RangeSingle';
 
 export default {
   title: 'Components/Form/Range',
-  component: RangeSingle,
-  decorators: [
-    Story => (
-      <div className="bg-panel p-20">
-        <Story />
-      </div>
-    )
-  ]
+  component: RangeSingle
 };
 
 export const Single = () => {

src/form/Select/SelectInput/SelectInputTheme.ts

@@ -92,10 +92,9 @@ export const selectInputTheme: SelectInputTheme = {
   ...baseTheme,
   base: [
     baseTheme.base,
-    'bg-panel text-panel-content border-panel-accent border-solid hover:border-panel-accent',
-    // 'hover:after:bg-input-hover focus-within:after:bg-input-focus',
-    'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)]',
-    'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)]',
+    'bg-panel text-panel-content border-panel-accent border-solid hover:border-panel-accent light:hover:border-panel-accent',
+    'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]',
+    'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]',
     'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-[2] hover:after:rounded hover:after:-bottom-[0px] hover:after:inset-x-0.5',
     'focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-[2] focus-within:after:rounded focus-within:after:-bottom-[0px] focus-within:after:inset-x-0.5'
   ].join(' '),
@@ -105,9 +104,9 @@ export const selectInputTheme: SelectInputTheme = {
   ].join(' '),
   disabled: [
     baseTheme.disabled,
-    'text-panel-secondary-content/40 border-surface'
+    'text-panel-secondary-content/40 border-surface light:hover:border-surface'
   ].join(' '),
-  error: [baseTheme.error, 'border-error'].join(' '),
+  error: [baseTheme.error, 'border-error light:border-error/20'].join(' '),
   suffix: {
     ...baseTheme.suffix,
     button: [baseTheme.suffix.button, 'hover:cursor-pointer'].join(' ')

src/form/Select/SelectMenu/SelectMenuTheme.ts

@@ -67,14 +67,12 @@ export const selectMenuTheme: SelectMenuTheme = {
   option: {
     ...baseTheme.option,
     base: [baseTheme.option.base, 'text-panel-secondary-content '].join(' '),
-    hover: [baseTheme.option.hover, 'hover:bg-vulcan hover:text-mystic'].join(
-      ' '
-    ),
+    hover: [
+      baseTheme.option.hover,
+      'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-panel-secondary-content'
+    ].join(' '),
     active: [baseTheme.option.active, 'bg-vulcan hover:text-mystic'].join(' '),
-    selected: [
-      baseTheme.option.selected,
-      'text-primary-active light:bg-primary-active light:[&>div>span]:invert'
-    ].join(' ')
+    selected: [baseTheme.option.selected, 'text-primary-active'].join(' ')
   }
 };
 
@@ -84,7 +82,10 @@ export const cssVarsSelectMenuTheme: SelectMenuTheme = {
     baseTheme.base,
     'bg-[var(--select-menu-background)] [border:_var(--select-menu-border)] rounded-[var(--select-menu-border-radius)]'
   ].join(' '),
-  groupTitle: [baseTheme.groupTitle, 'text-gray-600'].join(' '),
+  groupItem: {
+    ...baseTheme.groupItem,
+    title: [baseTheme.groupItem.title, 'text-gray-600'].join(' ')
+  },
   option: {
     ...baseTheme.option,
     base: [

tailwind.config.ts

@@ -40,9 +40,7 @@ const config: Config = {
         'button-gradient-hover':
           'linear-gradient(283deg, #44F 0%, rgba(23, 23, 255, 0.10) 100%)',
         'button-gradient-focus':
-          'linear-gradient(283deg, #0D0DD2 0%, rgba(23, 23, 255, 0.10) 100%)',
-        'input-hover': 'radial-gradient(circle, #105EFF 0%, #105EFF 36%, #242433 100%)',
-        'input-focus': 'radial-gradient(circle, #93B6FF 0%, #105EFF 36%, #3D3D4D 90%, #242433 100%)'
+          'linear-gradient(283deg, #0D0DD2 0%, rgba(23, 23, 255, 0.10) 100%)'
       }
     }
   },