feat: Light theme (#495)

.storybook/preview-head.html

@@ -77,6 +77,11 @@
     font-weight: 600;
   }
 </style>
+<script>
+  const key = 'theme-mode'
+  const theme = localStorage.getItem(key) || 'light'
+  document.documentElement.setAttribute('data-' + key, theme)
+</script>
 <script>
   window.global = window;
 </script>

.storybook/preview.ts

@@ -1,24 +1,45 @@
 import * as jest from 'jest-mock'
 
-import ThemeDecorator from '../src/ThemeDecorator'
+import { type Preview } from '@storybook/react'
+
+import themeDecorator from '../src/ThemeDecorator'
+import { COLOR_MODES, DEFAULT_COLOR_MODE } from '../src/theme'
 
 // @ts-expect-error
 window.jest = jest
 
-export const parameters = {
-  layout: 'fullscreen',
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        order: ['Semantic System', '*'],
+      },
     },
   },
-  options: {
-    storySort: {
-      order: ['Semantic System', '*'],
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: DEFAULT_COLOR_MODE,
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: COLOR_MODES,
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
     },
   },
+  decorators: [themeDecorator],
 }
 
-export const decorators = [ThemeDecorator]
+export default preview

package.json

@@ -30,6 +30,7 @@
     "@markdoc/markdoc": "0.3.0",
     "@monaco-editor/react": "4.5.1",
     "@react-aria/utils": "3.17.0",
+    "@react-hooks-library/core": "0.5.1",
     "@react-stately/utils": "3.6.0",
     "@react-types/shared": "3.18.1",
     "@tanstack/match-sorter-utils": "8.8.4",
@@ -58,6 +59,7 @@
     "rehype-raw": "6.1.1",
     "resize-observer-polyfill": "1.5.1",
     "styled-container-query": "1.3.5",
+    "type-fest": "3.11.1",
     "use-immer": "0.9.0",
     "usehooks-ts": "2.9.1"
   },

src/GlobalStyle.tsx

@@ -1,18 +1,26 @@
 import { createGlobalStyle } from 'styled-components'
 
-import { styledTheme as theme } from './theme'
+import {
+  COLOR_THEME_KEY,
+  type ColorMode,
+  DEFAULT_COLOR_MODE,
+  styledTheme as theme,
+} from './theme'
+import { getBoxShadows } from './theme/boxShadows'
+import { baseColors } from './theme/colors-base'
+import { semanticColorsDark } from './theme/colors-semantic-dark'
+import { semanticColorsLight } from './theme/colors-semantic-light'
 
 const {
   borderRadiuses,
   borders,
   borderStyles,
   borderWidths,
-  boxShadows,
   fontFamilies,
   spacing,
 } = theme
 
-const colorsToCSSVars: (colors: unknown) => any = (colors) => {
+export const colorsToCSSVars: (colors: unknown) => any = (colors) => {
   function inner(colors: unknown, prefix = '') {
     Object.entries(colors).forEach(([key, value]) => {
       if (typeof value === 'string') {
@@ -30,22 +38,33 @@ const colorsToCSSVars: (colors: unknown) => any = (colors) => {
   return cssVars
 }
 
-const fontsToCSSVars = Object.fromEntries(
+const semanticColorCSSVars = {
+  dark: colorsToCSSVars(semanticColorsDark),
+  light: colorsToCSSVars(semanticColorsLight),
+}
+
+const baseColorCSSVars = colorsToCSSVars(baseColors)
+
+const getSemanticColorCSSVars = ({ mode }: { mode: ColorMode }) =>
+  semanticColorCSSVars[mode] || semanticColorCSSVars[DEFAULT_COLOR_MODE]
+
+const fontCSSVars = Object.fromEntries(
   Object.entries(fontFamilies).map(([name, value]) => [`--font-${name}`, value])
 )
-const shadowsToCSSVars = Object.fromEntries(
-  Object.entries(boxShadows).map(([name, value]) => [
-    `--box-shadow-${name}`,
-    value,
-  ])
-)
-const spacingToCSSVars = Object.fromEntries(
+const getShadowCSSVars = ({ mode }: { mode: ColorMode }) =>
+  Object.fromEntries(
+    Object.entries(getBoxShadows({ mode })).map(([name, value]) => [
+      `--box-shadow-${name}`,
+      value,
+    ])
+  )
+const spacingCSSVars = Object.fromEntries(
   Object.entries(spacing).map(([name, value]) => [
     `--space-${name}`,
     `${value}px`,
   ])
 )
-const radiiToCSSVars = Object.fromEntries(
+const radiiCSSVars = Object.fromEntries(
   Object.entries(borderRadiuses).map(([name, value]) => [
     `--radius-${name}`,
     `${value}px`,
@@ -67,17 +86,43 @@ const bordersToCSSVars = Object.fromEntries(
   Object.entries(borders).map(([name, value]) => [`--border-${name}`, value])
 )
 
+function cssSwapper(selPrimary: string, otherSel: string, limit = 6) {
+  let str = selPrimary
+  const selectors = [selPrimary]
+
+  for (let i = 0; i < limit; ++i) {
+    str += ` ${otherSel} ${selPrimary}`
+    selectors.push(str)
+  }
+  const ret = selectors.join(',\n')
+
+  return ret
+}
+
 const GlobalStyle = createGlobalStyle(({ theme }) => ({
   ':root': {
-    ...(theme.colors ? colorsToCSSVars(theme.colors) : {}),
-    ...fontsToCSSVars,
-    ...shadowsToCSSVars,
-    ...spacingToCSSVars,
-    ...radiiToCSSVars,
+    ...baseColorCSSVars,
+    ...getSemanticColorCSSVars({ mode: theme.mode }),
+    ...fontCSSVars,
+    ...getShadowCSSVars({ mode: theme.mode }),
+    ...spacingCSSVars,
+    ...radiiCSSVars,
     ...borderStylesCSSVars,
     ...borderWidthsToToCSSVars,
     ...bordersToCSSVars,
   },
+  [cssSwapper(
+    `[data-${COLOR_THEME_KEY}=dark]`,
+    `[data-${COLOR_THEME_KEY}=light]`
+  )]: {
+    ...getSemanticColorCSSVars({ mode: 'dark' }),
+  },
+  [cssSwapper(
+    `[data-${COLOR_THEME_KEY}=light]`,
+    `[data-${COLOR_THEME_KEY}=dark]`
+  )]: {
+    ...getSemanticColorCSSVars({ mode: 'light' }),
+  },
   '*': theme.partials.scrollBar({ fillLevel: 0 }),
 }))
 

src/ThemeDecorator.tsx

@@ -1,19 +1,36 @@
 import { Grommet } from 'grommet'
-import { type ComponentType } from 'react'
+import { type ComponentType, useEffect } from 'react'
 import {
   CssBaseline,
   Div,
   ThemeProvider as HonorableThemeProvider,
 } from 'honorable'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 
-import theme, { styledTheme } from './theme'
+import {
+  honorableThemeDark,
+  honorableThemeLight,
+  setThemeColorMode,
+  styledThemeDark,
+  styledThemeLight,
+  useThemeColorMode,
+} from './theme'
 import StyledCss from './GlobalStyle'
 
-function ThemeDecorator(Story: ComponentType) {
+function ThemeDecorator(Story: ComponentType, context: any) {
+  const colorMode = useThemeColorMode()
+
+  useEffect(() => {
+    setThemeColorMode(context.globals.theme)
+  }, [context.globals.theme])
+
+  const honorableTheme =
+    colorMode === 'light' ? honorableThemeLight : honorableThemeDark
+  const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
+
   return (
     <Grommet plain>
-      <HonorableThemeProvider theme={theme}>
+      <HonorableThemeProvider theme={honorableTheme}>
         <StyledThemeProvider theme={styledTheme}>
           <CssBaseline />
           <StyledCss />

src/components/AppList.tsx

@@ -112,12 +112,14 @@ function AppListUnstyled({
   return (
     <div {...props}>
       {!isEmpty(apps) && (
-        <Input
-          prefix={<SearchIcon />}
-          placeholder="Filter applications"
-          value={filter}
-          onChange={({ target: { value } }) => setFilter(value)}
-        />
+        <div>
+          <Input
+            prefix={<SearchIcon />}
+            placeholder="Filter applications"
+            value={filter}
+            onChange={({ target: { value } }) => setFilter(value)}
+          />
+        </div>
       )}
 
       <div
@@ -309,7 +311,7 @@ function AppUnstyled({
               <Select
                 aria-label="moreMenu"
                 selectedKey={null}
-                onSelectionChange={(key) =>
+                onSelectionChange={(key: any) =>
                   actions.find((action) => action.label === key)?.onSelect()
                 }
                 isDisabled={!isAlive}

src/components/Highlight.tsx

@@ -26,7 +26,7 @@ const LineNumbers = styled(StyledPre)(({ theme }) => ({
 }))
 
 const StyledHighlight = styled.div(
-  (_) => `
+  ({ theme }) => `
 pre code.hljs {
   display: block;
   overflow-x: auto;
@@ -40,21 +40,21 @@ code.hljs {
 .hljs ::selection,
 .hljs::selection {
   background-color: #383a62;
-  color: #ebeff0;
+  color: ${theme.colors['code-block-light-grey']};
 }
 
 .hljs-comment {
-  color: #747b8b;
+  color: ${theme.colors['code-block-dark-grey']};
 }
 
 .hljs-tag {
-  color: #c5c9d3;
+  color: ${theme.colors['code-block-mid-grey']};
 }
 
 .hljs-operator,
 .hljs-punctuation,
 .hljs-subst {
-  color: #ebeff0;
+  color: ${theme.colors['code-block-light-grey']};
 }
 
 .hljs-operator {
@@ -67,7 +67,7 @@ code.hljs {
 .hljs-selector-tag,
 .hljs-template-variable,
 .hljs-variable {
-  color: #c5c9d3;
+  color: ${theme.colors['code-block-mid-grey']};
 }
 
 .hljs-attr,
@@ -77,45 +77,52 @@ code.hljs {
 .hljs-symbol,
 .hljs-variable.constant_ {
   color: #969af8;
+  color: ${theme.colors['code-block-purple']};
+
 }
 
 .hljs-class .hljs-title,
 .hljs-title,
 .hljs-title.class_ {
-  color: #7075f5;
+  color: ${theme.colors['code-block-dark-purple']};
+
 }
 
 .hljs-strong {
   font-weight: 700;
-  color: #7075f5;
+  color: ${theme.colors['code-block-dark-purple']};
+
 }
 .hljs-addition,
 .hljs-code,
 .hljs-string,
 .hljs-title.class_.inherited__ {
   color: #8fd6ff;
+  color: ${theme.colors['code-block-mid-blue']};
+
 }
 .hljs-built_in,
 .hljs-doctag,
 .hljs-keyword.hljs-atrule,
 .hljs-quote,
 .hljs-regexp {
-  color: #c2e9ff;
+  color: ${theme.colors['code-block-light-blue']};
 }
 
 .hljs-attribute,
 .hljs-function .hljs-title,
 .hljs-section,
 .hljs-title.function_,
 .ruby .hljs-property {
-  color: #3cecaf;
+  color: ${theme.colors[`code-block-dark-green`]};
 }
 
 .diff .hljs-meta,
 .hljs-keyword,
 .hljs-template-tag,
 .hljs-type {
   color: #fff48f;
+  color: ${theme.colors[`code-block-yellow`]};
 }
 
 .hljs-emphasis {
@@ -127,6 +134,7 @@ code.hljs {
 .hljs-meta .hljs-keyword,
 .hljs-meta .hljs-string {
   color: #99f5d5;
+  color: ${theme.colors[`code-block-light-green`]};
 }
 
 .hljs-meta .hljs-keyword,