feat: create a BareColorsSchema and correct colors codemod types

src/codemods/__testfixtures__/colors-to-css-vars/color-as-type.output.tsx

@@ -1,7 +1,7 @@
-import { ReadCssColorVariable } from '@freenow/wave';
+import { ReadBareCssColorVariable } from '@freenow/wave';
 
 export interface LabelVariant {
-    color?: ReadCssColorVariable
-    backgroundColor?: ReadCssColorVariable
-    borderColor?: ReadCssColorVariable
+    color?: ReadBareCssColorVariable
+    backgroundColor?: ReadBareCssColorVariable
+    borderColor?: ReadBareCssColorVariable
 }

src/codemods/colors-to-css-vars.ts

@@ -35,7 +35,7 @@ const ColorsToCssVariablesMap = {
     NEGATIVE_ORANGE_50: 'var(--wave-b-color-orange-50)'
 };
 
-const CSS_COLORS_TYPE_NAME = 'ReadCssColorVariable';
+const CSS_COLORS_TYPE_NAME = 'ReadBareCssColorVariable';
 
 const replaceColorsForCssVarsInTemplateLiterals = (
     j: JSCodeshift,

src/components/InlineSpinner/InlineSpinner.tsx

@@ -3,15 +3,15 @@ import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { compose, margin, MarginProps, ResponsiveValue, variant } from 'styled-system';
 import { getSemanticValue } from '../../utils/cssVariables';
-import { ReadCssColorVariable } from '../../essentials/Colors/types';
+import { ReadSemanticCssColorVariable } from '../../essentials/Colors/types';
 
 interface InlineSpinnerProps extends MarginProps {
     /**
      * Override the color of the spinner
      */
     // the below is the hack to keep autocomplete showing semantic variables but allowing any string as well
     // eslint-disable-next-line @typescript-eslint/ban-types
-    color?: ReadCssColorVariable | (string & {});
+    color?: ReadSemanticCssColorVariable | (string & {});
     /**
      * Set the size of the component
      */

src/essentials/Colors/Colors.ts

@@ -1,4 +1,4 @@
-import { SemanticColorsSchema } from './types';
+import { BareColorsSchema, SemanticColorsSchema } from './types';
 
 // Bare Colors Tier (--wave-b-color-...)
 export const Colors = {
@@ -51,7 +51,7 @@ export const Colors = {
         50: 'hsl(21, 100%, 97%)'
     },
     transparent: 'transparent'
-} as const;
+} satisfies BareColorsSchema;
 
 // AUTHENTIC = primary now
 // ACTION = secondary now
@@ -108,7 +108,7 @@ export const SemanticColors = {
         element: {
             disabled: {
                 faded: Colors.blue.primary[50],
-                default: Colors.blue.primary[200],
+                default: Colors.blue.primary[200]
             },
             primary: {
                 default: Colors.blue.primary[900],
@@ -131,7 +131,7 @@ export const SemanticColors = {
                 default: Colors.green[50]
             },
             warning: {
-                default: Colors.yellow[50],
+                default: Colors.yellow[50]
             },
             danger: {
                 faded: Colors.orange[50],
@@ -179,7 +179,7 @@ export const SemanticColors = {
         },
         accent: {
             faded: Colors.blue.secondary[350],
-            default: Colors.blue.secondary[900],
+            default: Colors.blue.secondary[900]
         },
         focus: Colors.blue.secondary[900],
         disabled: Colors.blue.primary[200],
@@ -285,7 +285,7 @@ export const SemanticColorsDarkSchema = {
                 emphasized: Colors.white
             },
             success: {
-                default: Colors.green[50],
+                default: Colors.green[50]
             },
             warning: {
                 default: Colors.yellow[50]

src/essentials/Colors/types.ts

@@ -4,6 +4,58 @@ export type HSL = `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${
 
 export type Color = HSL | 'transparent';
 
+export type BareColorsSchema = {
+    white: HSL;
+    black: HSL;
+    blue: {
+        primary: {
+            '1100': HSL;
+            '900': HSL;
+            '750': HSL;
+            '550': HSL;
+            '350': HSL;
+            '200': HSL;
+            '50': HSL;
+        };
+        secondary: {
+            '1000': HSL;
+            '900': HSL;
+            '350': HSL;
+            '150': HSL;
+            '100': HSL;
+            '50': HSL;
+        };
+    };
+    red: {
+        '1000': HSL;
+        '900': HSL;
+    };
+    magenta: {
+        '1000': HSL;
+        '900': HSL;
+        '350': HSL;
+        '50': HSL;
+    };
+    green: {
+        '1000': HSL;
+        '900': HSL;
+        '350': HSL;
+        '50': HSL;
+    };
+    yellow: {
+        '900': HSL;
+        '350': HSL;
+        '50': HSL;
+    };
+    orange: {
+        '1000': HSL;
+        '900': HSL;
+        '350': HSL;
+        '50': HSL;
+    };
+    transparent: 'transparent';
+};
+
 export type SemanticColorsSchema = {
     transparent: 'transparent';
     white: Color;
@@ -163,20 +215,38 @@ export type SemanticColorsSchema = {
     };
 };
 
+// Bare Colors
+type BareColorToken = Join<Leaves<BareColorsSchema>, '-'>;
+type BareColorTokenCssVariable = `--wave-b-color-${BareColorToken}`;
+
+type BareHslComponentsToken = `${BareColorToken}-hsl`;
+type BareHslComponentsTokenCssVariable = `--wave-b-color-${BareHslComponentsToken}`;
+
+export type BareColorCssVariable = BareColorTokenCssVariable | BareHslComponentsTokenCssVariable;
+
+export type ReadBareCssColorVariable =
+    | `var(${BareColorTokenCssVariable})`
+    | `var(${BareColorTokenCssVariable}, ${string})`;
+
+export type ReadBareCssVariable = `var(${BareColorCssVariable})` | `var(${BareColorCssVariable}, ${string})`;
+
+// Semantic Colors
 type SemanticColorToken = Join<Leaves<SemanticColorsSchema>, '-'>;
 type SemanticColorTokenCssVariable = `--wave-s-color-${SemanticColorToken}`;
 
 type SemanticHslComponentsToken = `${SemanticColorToken}-hsl`;
-type HslComponentsTokenCssVariable = `--wave-s-color-${SemanticHslComponentsToken}`;
+type SemanticHslComponentsTokenCssVariable = `--wave-s-color-${SemanticHslComponentsToken}`;
 
 export type SemanticToken = SemanticColorToken | SemanticHslComponentsToken;
-export type SemanticColorCssVariable = SemanticColorTokenCssVariable | HslComponentsTokenCssVariable;
+export type SemanticColorCssVariable = SemanticColorTokenCssVariable | SemanticHslComponentsTokenCssVariable;
 
-export type ReadCssColorVariable =
+export type ReadSemanticCssColorVariable =
     | `var(${SemanticColorTokenCssVariable})`
     | `var(${SemanticColorTokenCssVariable}, ${string})`;
-export type ReadCssVariable = `var(${SemanticColorCssVariable})` | `var(${SemanticColorCssVariable}, ${string})`;
+export type ReadSemanticCssVariable =
+    | `var(${SemanticColorCssVariable})`
+    | `var(${SemanticColorCssVariable}, ${string})`;
 
 export type ComponentSemanticTokens = {
-    [key: string]: ReadCssVariable | ComponentSemanticTokens;
+    [key: string]: ReadSemanticCssVariable | ComponentSemanticTokens;
 };

src/essentials/index.ts

@@ -1,4 +1,9 @@
 export { Elevation } from './Elevation/Elevation';
 export { Spaces } from './Spaces/Spaces';
 export { Breakpoints, MediaQueries } from './Breakpoints/Breakpoints';
-export type { ReadCssColorVariable } from './Colors/types';
+export type {
+    ReadBareCssColorVariable,
+    ReadBareCssVariable,
+    ReadSemanticCssColorVariable,
+    ReadSemanticCssVariable
+} from './Colors/types';

src/icons/IconProps.ts

@@ -1,11 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { ReadCssColorVariable } from '../essentials/Colors/types';
+import { ReadSemanticCssColorVariable } from '../essentials/Colors/types';
 
 export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
     /**
      * Overrides the default color of the icon.
      */
-    color?: ReadCssColorVariable | 'inherit' | (string & {});
+    color?: ReadSemanticCssColorVariable | 'inherit' | (string & {});
     /**
      * Adjusts the size of the icon with defaults or the size in pixels.
      */

src/utils/cssVariables.ts

@@ -21,7 +21,7 @@
 // 3. Apply the design system prefix to the variable names.
 // 4. Concatenate entries to a valid CSS variables declaration.
 
-import { ReadCssVariable, SemanticToken } from '../essentials/Colors/types';
+import { ReadSemanticCssVariable, SemanticToken } from '../essentials/Colors/types';
 
 export const DS_PREFIX = 'wave';
 
@@ -78,8 +78,11 @@ const generateHslComponentsCssVariableEntries = (
         })
         .filter(entry => entry !== undefined);
 
-export const applyPrefix = <T extends string>(variableName: T, tier: 'b' | 's' | 'l', namespace: 'color' = 'color'): string =>
-    `--${DS_PREFIX}-${tier}-${namespace}-${variableName}`;
+export const applyPrefix = <T extends string>(
+    variableName: T,
+    tier: 'b' | 's' | 'l',
+    namespace: 'color' = 'color'
+): string => `--${DS_PREFIX}-${tier}-${namespace}-${variableName}`;
 
 export const generateCssVariables = (tokens: TokenObject, tier: 'b' | 's'): ReadonlyArray<string> => {
     const entries = generateCssVariableEntries(tokens);
@@ -96,4 +99,5 @@ export const generateBareTierCssVariables = (tokens: TokenObject): ReadonlyArray
 export const generateSemanticTierCssVariables = (tokens: TokenObject): ReadonlyArray<string> =>
     generateCssVariables(tokens, 's');
 
-export const getSemanticValue = (token: SemanticToken): ReadCssVariable => `var(--${DS_PREFIX}-s-color-${token})`;
+export const getSemanticValue = (token: SemanticToken): ReadSemanticCssVariable =>
+    `var(--${DS_PREFIX}-s-color-${token})`;