fix: add color alias for surface-raised-active-text

tablecheck · May 29, 2024 · afecb9c · afecb9c
1 parent 172059c
commit afecb9c
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 111 deletions.
diff --git a/.github/workflows/pull_requests.yml b/.github/workflows/pull_requests.yml
@@ -177,7 +177,7 @@ jobs:
         run: npm ci
 
       - name: Build and Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: 'build'

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "packages": ["system/*", "website"],
+  "packages": ["system/*"],
   "version": "independent",
   "command": {
     "publish": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/system/core/scripts/updateFromFigma.mjs b/system/core/scripts/updateFromFigma.mjs
@@ -112,8 +112,23 @@ Object.keys(colorVars).forEach((groupKey) => {
       groupKey === 'light' ? textSecondary[1] : text[1]
     ]);
   }
+  if (groupKey === 'light') {
+    colorVars[groupKey].push([
+      'surface-raised-active-text',
+      'var(--brand-primary)'
+    ]);
+  }
+  if (groupKey === 'dark') {
+    colorVars[groupKey].push([
+      'surface-raised-active-text',
+      'var(--brand-primary-text)'
+    ]);
+  }
   colorVars[groupKey] = _.sortBy(colorVars[groupKey], '0').map(
-    ([name, value]) => [name, hexToRgba(value)]
+    ([name, value]) => [
+      name,
+      value.startsWith('var(') ? value : hexToRgba(value)
+    ]
   );
 });
 

diff --git a/system/core/src/themeVariables/theme.ts b/system/core/src/themeVariables/theme.ts
@@ -69,6 +69,7 @@ export const lightColors = css`
   --surface-low-hover-transparent: rgba(0, 0, 0, 0.03);
   --surface-raised: rgba(249, 249, 249, 1);
   --surface-raised-active: rgba(243, 242, 255, 1);
+  --surface-raised-active-text: var(--brand-primary);
   --surface-raised-hover: rgba(247, 247, 247, 1);
   --surface-raised-hover-transparent: rgba(0, 0, 0, 0.03);
   --surface-secondary: rgba(41, 41, 41, 1);
@@ -139,6 +140,7 @@ export const lightColorsObject = {
   'surface-low-hover-transparent': 'rgba(0, 0, 0, 0.03)',
   'surface-raised': 'rgba(249, 249, 249, 1)',
   'surface-raised-active': 'rgba(243, 242, 255, 1)',
+  'surface-raised-active-text': 'var(--brand-primary)',
   'surface-raised-hover': 'rgba(247, 247, 247, 1)',
   'surface-raised-hover-transparent': 'rgba(0, 0, 0, 0.03)',
   'surface-secondary': 'rgba(41, 41, 41, 1)',
@@ -210,6 +212,7 @@ export const darkColors = css`
   --surface-low-hover-transparent: rgba(255, 255, 255, 0.05);
   --surface-raised: rgba(41, 41, 41, 1);
   --surface-raised-active: rgba(76, 68, 92, 1);
+  --surface-raised-active-text: var(--brand-primary-text);
   --surface-raised-hover: rgba(75, 75, 75, 1);
   --surface-raised-hover-transparent: rgba(255, 255, 255, 0.2);
   --surface-secondary: rgba(75, 75, 75, 1);
@@ -280,6 +283,7 @@ export const darkColorsObject = {
   'surface-low-hover-transparent': 'rgba(255, 255, 255, 0.05)',
   'surface-raised': 'rgba(41, 41, 41, 1)',
   'surface-raised-active': 'rgba(76, 68, 92, 1)',
+  'surface-raised-active-text': 'var(--brand-primary-text)',
   'surface-raised-hover': 'rgba(75, 75, 75, 1)',
   'surface-raised-hover-transparent': 'rgba(255, 255, 255, 0.2)',
   'surface-secondary': 'rgba(75, 75, 75, 1)',

diff --git a/system/core/src/themeVariables/types.gen.ts b/system/core/src/themeVariables/types.gen.ts
@@ -53,6 +53,7 @@ export interface TableKitCSSProperties {
   '--surface-low-hover-transparent'?: string;
   '--surface-raised'?: string;
   '--surface-raised-active'?: string;
+  '--surface-raised-active-text'?: string;
   '--surface-raised-hover'?: string;
   '--surface-raised-hover-transparent'?: string;
   '--surface-secondary'?: string;

diff --git a/system/stories/package.json b/system/stories/package.json
@@ -27,12 +27,12 @@
     "@storybook/theming": "7.0.0-rc.4",
     "@tablecheck/babel-preset": "1.1.0",
     "@tablecheck/locales": "1.1.1",
-    "@tablecheck/tablekit-core": "^2",
-    "@tablecheck/tablekit-css": "^2",
-    "@tablecheck/tablekit-react": "^2",
-    "@tablecheck/tablekit-react-css": "^2",
-    "@tablecheck/tablekit-react-datepicker": "^2",
-    "@tablecheck/tablekit-react-select": "^2",
+    "@tablecheck/tablekit-core": "^3",
+    "@tablecheck/tablekit-css": "^3",
+    "@tablecheck/tablekit-react": "^3",
+    "@tablecheck/tablekit-react-css": "^3",
+    "@tablecheck/tablekit-react-datepicker": "^3",
+    "@tablecheck/tablekit-react-select": "^3",
     "@vitejs/plugin-react": "3.1.0",
     "chokidar": "3.5.3",
     "concurrently": "8.2.2",

diff --git a/system/stories/src/Theming.stories.tsx b/system/stories/src/Theming.stories.tsx
@@ -33,53 +33,121 @@ const PaletteWrapper = styled.button`
   }
 `;
 
-function PaletteColor({ color }: { color: string }) {
+const ColorPreview = styled.span`
+  width: 60px;
+  height: 60px;
+  border-top-left-radius: var(--border-radius-small);
+  border-bottom-left-radius: var(--border-radius-small);
+  border-right: 1px solid var(--border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ColorPreviewLabel = styled.span`
+  color: var(--info-text);
+  font-weight: bold;
+  display: inline-block;
+  width: 80px;
+  text-align: end;
+  padding-inline-end: var(--spacing-l2);
+`;
+
+function PaletteColor({
+  color,
+  background
+}: {
+  color: string;
+  background: string;
+}) {
+  const backgroundVar = `var(--${background})`;
+  const colorVar = `var(--${color})`;
   return (
     <PaletteWrapper
       type="button"
       onClick={(e) => {
         e.preventDefault();
-        navigator.clipboard.writeText(`var(--${color})`);
+        navigator.clipboard.writeText(colorVar);
       }}
     >
-      <span
+      <ColorPreview
         style={{
-          backgroundColor: `var(--${color})`,
-          width: '60px',
-          height: '60px',
-          borderTopLeftRadius: 'var(--border-radius-small)',
-          borderBottomLeftRadius: 'var(--border-radius-small)',
-          borderRight: '1px solid var(--border)'
+          backgroundColor: backgroundVar,
+          color: colorVar
         }}
-      />
+      >
+        Text
+      </ColorPreview>
       <span style={{ textAlign: 'start', whiteSpace: 'nowrap' }}>
-        var(--{color})
+        {backgroundVar === colorVar ? null : (
+          <small>
+            <ColorPreviewLabel>Text:</ColorPreviewLabel>
+          </small>
+        )}
+        {colorVar}
+        {backgroundVar === colorVar ? null : (
+          <>
+            <br />
+            <small>
+              <ColorPreviewLabel>Background:</ColorPreviewLabel> {backgroundVar}
+            </small>
+          </>
+        )}
       </span>
       <Copy size={getConfigDefault('iconSize')} />
     </PaletteWrapper>
   );
 }
 
+function getBackground(keys: string[], key: string) {
+  if (key === 'text-secondary') return 'surface-secondary';
+  if (key === 'primary-text') return 'primary';
+  if (key.startsWith('text')) return 'surface';
+  if (!key.endsWith('-text')) return key;
+  const surface = keys.find((k) => k === key.replace('-text', '-surface'));
+  const base = keys.find((k) => k === key.replace('-text', ''));
+  return surface || base || key;
+}
+
 export const Palette: StoryFn = () => (
   <>
     <h2>Themed Colors</h2>
     {Object.entries(
-      groupBy(Object.keys(lightColorsObject), (key) => key.split('-')[0])
+      groupBy(Object.keys(lightColorsObject), (key) => {
+        const [, rootKey] = key.match(/^(text|toggle)-?/) ?? [];
+        if (rootKey) return rootKey;
+        return key.replace(
+          /-(active|focus|text|transparent|hover|surface|disabled|visited)/gi,
+          ''
+        );
+      })
     ).map(([groupKey, keys]) => (
       <React.Fragment key={groupKey}>
-        <h4>{groupKey}</h4>
+        <h4>{groupKey.replace(/-/gi, ' ')}</h4>
         {keys.map((key) => (
-          <PaletteColor key={key} color={key} />
+          <PaletteColor
+            key={key}
+            color={key}
+            background={getBackground(keys, key)}
+          />
         ))}
       </React.Fragment>
     ))}
     <h2>Brand Colors</h2>
-    {Object.keys(brandColorsObject).map((key) => (
-      <PaletteColor key={key} color={key} />
+    {Object.keys(brandColorsObject).map((key, _, keys) => (
+      <PaletteColor
+        key={key}
+        color={key}
+        background={getBackground(keys, key)}
+      />
     ))}
     <h2>Utility Colors</h2>
-    {Object.keys(utilityColorsObject).map((key) => (
-      <PaletteColor key={key} color={key} />
+    {Object.keys(utilityColorsObject).map((key, _, keys) => (
+      <PaletteColor
+        key={key}
+        color={key}
+        background={getBackground(keys, key)}
+      />
     ))}
   </>
 );