sesame-components-testing 2.0.1 → 2.0.2

package/dist/theme/sizes/dpiToRem.d.ts

@@ -0,0 +1,2 @@
+import type { Rem } from '../types';
+export declare const dpiToRem: (dpi: number, base?: number) => Rem;

package/dist/theme/sizes/dpiToRem.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dpiToRem = void 0;
+const BASE_SIZE = 16;
+const dpiToRem = (dpi, base) => {
+    base = base !== null && base !== void 0 ? base : BASE_SIZE;
+    return `${Math.round((dpi / base) * 1000) / 1000}rem`;
+};
+exports.dpiToRem = dpiToRem;

package/dist/theme/sizes/getSizedTheme.d.ts

@@ -0,0 +1,3 @@
+import type { Breakpoint, BreakpointSize, Theme } from '../types';
+export type UnsizedTheme = Omit<Theme, keyof Breakpoint>;
+export declare const getSizedTheme: (theme: Theme | UnsizedTheme, size?: BreakpointSize) => Theme;

package/dist/theme/sizes/getSizedTheme.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSizedTheme = void 0;
+const getSizedTheme = (theme, size) => {
+    const breakpoint = theme.breakpoints[size !== null && size !== void 0 ? size : 'large'];
+    return Object.assign(Object.assign({}, theme), breakpoint);
+};
+exports.getSizedTheme = getSizedTheme;

package/dist/theme/theme.d.ts

@@ -0,0 +1,7 @@
+import './reset.css';
+import '@fontsource/inter/400';
+import '@fontsource/inter/500';
+import '@fontsource/inter/600';
+import '@fontsource/inter/700';
+export declare const lightTheme: import("./types").Theme;
+export declare const darkTheme: import("./types").Theme;

package/dist/theme/theme.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkTheme = exports.lightTheme = void 0;
+require("./reset.css");
+require("@fontsource/inter/400");
+require("@fontsource/inter/500");
+require("@fontsource/inter/600");
+require("@fontsource/inter/700");
+const darkColors_1 = require("./colors/darkColors");
+const lightColors_1 = require("./colors/lightColors");
+const breakpoints_1 = require("./sizes/breakpoints");
+const getSizedTheme_1 = require("./sizes/getSizedTheme");
+const baseTheme = {
+    letterSpacing: {
+        normal: '-0.15px',
+    },
+    boxShadow: {
+        inset: {
+            s: '0px 4px 4px 0px rgba(0, 0, 0, 0.6) inset',
+            m: '2px 4px 4px 0px rgba(0, 0, 0, 0.6) inset',
+        },
+        dropdown: {
+            m: '4px 4px 24px 0px rgba(0, 0, 0, 0.25)',
+        },
+    },
+    transition: {
+        default: '0.2s ease',
+    },
+    breakpoints: breakpoints_1.breakpoints,
+};
+exports.lightTheme = (0, getSizedTheme_1.getSizedTheme)(Object.assign({ colors: lightColors_1.lightColors }, baseTheme), 'large');
+exports.darkTheme = (0, getSizedTheme_1.getSizedTheme)(Object.assign({ colors: darkColors_1.darkColors }, baseTheme), 'large');

package/dist/theme/types.d.ts

@@ -0,0 +1,169 @@
+export type Rem = `${number}rem`;
+export type Sizes<T extends string> = {
+    [K in T]: Rem;
+};
+export type SizeGroup<T extends string, V extends string> = {
+    [K in T]: Sizes<V>;
+};
+export type Rgba = `rgba(${number}, ${number}, ${number}, ${number})`;
+export type ColorValues<T extends string> = {
+    [K in T]: Rgba;
+};
+export type ColorValueGroup<T extends string, V extends string> = {
+    [K in T]: ColorValues<V>;
+};
+export interface TypographySizes<T extends string> {
+    size: Sizes<T>;
+    lineHeight: Sizes<T>;
+}
+export interface HeightConfig {
+    button: {
+        posButton: SizeGroup<'l' | 'm' | 's', 'min' | 'fixed' | 'max'>;
+        keypadButton: SizeGroup<'l', 'fixed'>;
+    };
+    badge: SizeGroup<'xl' | 'l' | 'm' | 's' | 'xs', 'fixed'>;
+    image: Sizes<'l' | 'm'>;
+    input: Sizes<'fixed'>;
+    keypad: {
+        panel: Sizes<'fixed'>;
+    };
+    list: {
+        listItemCart: {
+            caret: Sizes<'fixed'>;
+        };
+    };
+    page: {
+        pos: Sizes<'standard'>;
+    };
+    selection: {
+        checkbox: Sizes<'fixed'>;
+        radio: Sizes<'fixed'>;
+    };
+    tile: {
+        customizationTile: {
+            multiAddContent: Sizes<'fixed'>;
+            default: Sizes<'fixed'>;
+        };
+        selectionTile: Sizes<'fixed'>;
+        menuTile: {
+            default: Sizes<'fixed'>;
+            mealContent: Sizes<'fixed'>;
+            meal: Sizes<'fixed'>;
+        };
+    };
+    toggle: {
+        container: Sizes<'fixed'>;
+        handle: Sizes<'fixed'>;
+    };
+}
+export interface WidthConfig {
+    button: {
+        posButton: SizeGroup<'l', 'min'>;
+        keypadButton: SizeGroup<'l', 'fixed'>;
+    };
+    list: {
+        listItemCart: {
+            caret: Sizes<'fixed'>;
+        };
+    };
+    modal: Sizes<'fixed'>;
+    page: {
+        pos: Sizes<'standard'>;
+    };
+    panel: SizeGroup<'l' | 'm', 'fixed'>;
+    sidebar: Sizes<'fixed'>;
+    tile: {
+        customizationTile: Sizes<'imageContainer'>;
+        menuTile: Sizes<'imageContainer'>;
+    };
+    toggle: {
+        container: Sizes<'fixed'>;
+    };
+}
+export type BreakpointSize = 'large' | 'medium' | 'small';
+export interface Typography {
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    title: TypographySizes<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>;
+    body: TypographySizes<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl'>;
+    label: TypographySizes<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl'>;
+}
+export interface Breakpoint {
+    typography: Typography;
+    space: Sizes<'zero' | '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>;
+    border: Sizes<'zero' | 's' | 'm' | 'l' | 'xl' | '2xl'>;
+    radii: Sizes<'0' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'full'>;
+    icon: Sizes<'4xs' | '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl'>;
+    height: HeightConfig;
+    width: WidthConfig;
+}
+export type Breakpoints = {
+    [K in BreakpointSize]: Breakpoint;
+};
+export interface Colors {
+    fill: {
+        icon: {
+            common: ColorValues<'highEmphasis' | 'mediumEmphasis' | 'active' | 'disabled'>;
+            inverse: ColorValues<'highEmphasis' | 'mediumEmphasis' | 'disabled' | 'error'>;
+            constantDark: ColorValues<'highEmphasis' | 'mediumEmphasis' | 'disabled'>;
+            constantLight: ColorValues<'highEmphasis' | 'mediumEmphasis' | 'disabled'>;
+            constantColor: ColorValues<'purple' | 'red' | 'yellow' | 'green' | 'brown' | 'orange' | 'lightBlue' | 'lightGreen' | 'lightYellow' | 'lightPink' | 'lightGrey'>;
+            notification: ColorValues<'success' | 'info' | 'error' | 'warning'>;
+            link: ColorValues<'default' | 'hover' | 'pressed'>;
+        };
+        cta: ColorValueGroup<'primary' | 'secondary' | 'tertiary' | 'critical', 'default' | 'pressed' | 'disabled'> & {
+            ghost: ColorValues<'default' | 'pressed'>;
+            success: ColorValues<'default'>;
+        };
+        notification: ColorValues<'general' | 'success' | 'info' | 'error' | 'warning'>;
+        surface: ColorValues<'default' | 'raised' | 'sunken' | 'disabled' | 'highEmphasis' | 'overlay' | 'status' | 'success' | 'critical' | 'warning'> & {
+            brand: ColorValues<'gold' | 'red' | 'gray'>;
+            constant: ColorValues<'dark' | 'light'>;
+            constantColor: ColorValues<'blue' | 'red' | 'purple' | 'yellow' | 'green' | 'gold'>;
+        };
+    };
+    border: {
+        cta: ColorValueGroup<'primary' | 'secondary' | 'tertiary' | 'critical', 'default' | 'pressed' | 'disabled'> & {
+            success: ColorValues<'default'>;
+        };
+        fields: ColorValues<'default' | 'active' | 'filled' | 'disabled' | 'error' | 'success'>;
+        elements: {
+            divider: ColorValues<'highEmphasis' | 'mediumEmphasis'>;
+        };
+        states: ColorValues<'focus' | 'selected' | 'disabled'>;
+        container: ColorValues<'highEmphasis' | 'mediumEmphasis' | 'lowEmphasis' | 'inverseHigh' | 'inverseMedium' | 'constantLight' | 'constantDark'> & {
+            constantColor: ColorValues<'blue' | 'purple' | 'red' | 'yellow' | 'green' | 'gold'>;
+        };
+        common: ColorValues<'highEmphasis' | 'mediumEmphasis'>;
+    };
+    text: {
+        common: ColorValues<'highContrast' | 'highEmphasis' | 'mediumEmphasis' | 'disabled' | 'success' | 'info' | 'error' | 'warning'>;
+        inverse: ColorValues<'highContrast' | 'highEmphasis' | 'mediumEmphasis' | 'disabled'>;
+        constantDark: ColorValues<'highContrast' | 'highEmphasis' | 'mediumEmphasis' | 'disabled'>;
+        constantLight: ColorValues<'highContrast' | 'highEmphasis' | 'mediumEmphasis' | 'disabled'>;
+        link: ColorValues<'default' | 'hover' | 'pressed' | 'inactive'>;
+    };
+}
+export interface Theme extends Breakpoint {
+    colors: Colors;
+    letterSpacing: {
+        normal: string;
+    };
+    boxShadow: {
+        inset: {
+            s: string;
+            m: string;
+        };
+        dropdown: {
+            m: string;
+        };
+    };
+    transition: {
+        default: string;
+    };
+    breakpoints: Breakpoints;
+}

package/dist/theme/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/theme/useBreakpointSize.d.ts

@@ -0,0 +1,3 @@
+type BreakpointSize = 'small' | 'medium' | 'large';
+export declare const useBreakpointSize: () => BreakpointSize;
+export {};

package/dist/theme/useBreakpointSize.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpointSize = void 0;
+const react_1 = require("react");
+const getBreakpointSize = (width) => {
+    if (width >= 1600)
+        return 'large';
+    if (width >= 1100)
+        return 'medium';
+    return 'small';
+};
+const useBreakpointSize = () => {
+    const [breakpointSize, setBreakpointSize] = (0, react_1.useState)(() => {
+        if (typeof window !== 'undefined') {
+            return getBreakpointSize(window.innerWidth);
+        }
+        return 'large';
+    });
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => {
+            const newBreakpoint = getBreakpointSize(window.innerWidth);
+            if (newBreakpoint !== breakpointSize) {
+                setBreakpointSize(newBreakpoint);
+            }
+        };
+        const initialBreakpoint = getBreakpointSize(window.innerWidth);
+        setBreakpointSize(initialBreakpoint);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [breakpointSize]);
+    return breakpointSize;
+};
+exports.useBreakpointSize = useBreakpointSize;

package/package.json

@@ -1,23 +1,18 @@
 {
   "name": "sesame-components-testing",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A reusable npm component package.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "vite build",
+    "build": "tsc",
     "test": "echo \"No tests yet\""
   },
   "author": "",
   "license": "MIT",
-  "main": "./dist/sesame-components.cjs.js",
-  "module": "./dist/sesame-components.es.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/sesame-components.es.js",
-      "require": "./dist/sesame-components.cjs.js"
-    }
-  },
+  "files": [
+    "dist"
+  ],
   "keywords": [
     "component",
     "npm",

package/src/Button/Button.tsx

@@ -1,37 +0,0 @@
-import type { ButtonHTMLAttributes, FC, ReactNode } from 'react';
-import type { Theme } from '../theme';
-import { FlexCenter } from '../Common/FlexCenter';
-import { StyledButton } from './Button.styles';
-import React from 'react';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'error' | 'success' | 'keypad';
-
-export type ButtonSize = keyof Theme['height']['button']['posButton'];
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children: ReactNode;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  selected?: boolean;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-  stretch?: boolean;
-}
-
-export const Button: FC<ButtonProps> = ({
-  variant = 'primary',
-  size = 'm',
-  selected,
-  children,
-  leftIcon,
-  rightIcon,
-  stretch = false,
-  type = 'button',
-  ...rest
-}) => (
-  <StyledButton type={type} $variant={variant} $size={size} $selected={selected} $stretch={stretch} {...rest}>
-    {leftIcon && <FlexCenter>{leftIcon}</FlexCenter>}
-    <FlexCenter>{children}</FlexCenter>
-    {rightIcon && <FlexCenter>{rightIcon}</FlexCenter>}
-  </StyledButton>
-);

package/src/Common/FlexCenter.tsx

@@ -1,7 +0,0 @@
-import styled from '@emotion/styled';
-
-export const FlexCenter = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;

package/src/SesameComponent.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-export interface SesameComponentProps {
-  message?: string;
-}
-
-const StyledDiv = styled.div`
-    background-color: red;
-    font-weight: bold;
-    font-size: 33px;
-`;
-
-export const SesameComponent: React.FC<SesameComponentProps> = ({ message = "Hello, Sesame!" }) => {
-  return <StyledDiv>{message}</StyledDiv>;
-};

package/src/theme/ThemeProvider.tsx

@@ -1,23 +0,0 @@
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import { type FC, type ReactNode, useMemo } from 'react';
-import { getSizedTheme } from './sizes/getSizedTheme';
-import type { Theme } from './types';
-import { useBreakpointSize } from './useBreakpointSize';
-import React from 'react';
-
-export interface ThemeProviderProps {
-  theme: Theme;
-  children: ReactNode;
-}
-
-const useSizedTheme = (theme: Theme): Theme => {
-  const size = useBreakpointSize();
-  return useMemo(() => {
-    return getSizedTheme(theme, size);
-  }, [size, theme]);
-};
-
-export const ThemeProvider: FC<ThemeProviderProps> = ({ theme, children }) => {
-  const sizedTheme = useSizedTheme(theme);
-  return <EmotionThemeProvider theme={sizedTheme}>{children}</EmotionThemeProvider>;
-};

package/src/theme/colors/darkColors.ts

@@ -1,223 +0,0 @@
-import type { Colors } from '../types';
-import { primitiveColors } from './primitiveColors';
-
-export const darkColors: Colors = {
-  fill: {
-    icon: {
-      common: {
-        highEmphasis: primitiveColors.grayscale.neutral['02'],
-        mediumEmphasis: primitiveColors.grayscale.neutral['03'],
-        active: primitiveColors.solids.gold['500'],
-        disabled: 'rgba(238, 232, 224, 0.6)',
-      },
-      inverse: {
-        highEmphasis: primitiveColors.grayscale.neutral['08'],
-        mediumEmphasis: primitiveColors.grayscale.neutral['06'],
-        disabled: primitiveColors.transparencies.black['60%'],
-        error: primitiveColors.solids.red['600'],
-      },
-      constantDark: {
-        highEmphasis: primitiveColors.grayscale.neutral['08'],
-        mediumEmphasis: primitiveColors.grayscale.neutral['06'],
-        disabled: primitiveColors.transparencies.black['60%'],
-      },
-      constantLight: {
-        highEmphasis: primitiveColors.grayscale.neutral['02'],
-        mediumEmphasis: primitiveColors.grayscale.neutral['03'],
-        disabled: 'rgba(252, 250, 247, 0.8)',
-      },
-      constantColor: {
-        purple: primitiveColors.solids.purple['400'],
-        red: primitiveColors.solids.red['500'],
-        yellow: primitiveColors.solids.yellow['500'],
-        green: primitiveColors.solids.greenDark['600'],
-        brown: primitiveColors.solids.brownWarm['600'],
-        orange: primitiveColors.solids.orange['500'],
-        lightBlue: primitiveColors.solids.blue['100'],
-        lightGreen: primitiveColors.solids.yellowGreen['300'],
-        lightYellow: primitiveColors.solids.gold['400'],
-        lightPink: primitiveColors.solids.fuchsia['100'],
-        lightGrey: primitiveColors.grayscale.neutral['02'],
-      },
-      notification: {
-        success: primitiveColors.solids.green['200'],
-        info: primitiveColors.solids.cyan['200'],
-        error: primitiveColors.solids.red['200'],
-        warning: primitiveColors.solids.orange['200'],
-      },
-      link: {
-        default: primitiveColors.solids.blue['300'],
-        hover: primitiveColors.solids.blue['200'],
-        pressed: primitiveColors.solids.blue['500'],
-      },
-    },
-    cta: {
-      primary: {
-        default: primitiveColors.solids.gold['500'],
-        pressed: primitiveColors.solids.gold['600'],
-        disabled: 'rgba(214, 155, 0, 0.4)',
-      },
-      secondary: {
-        default: primitiveColors.grayscale.neutral['09'],
-        pressed: primitiveColors.grayscale.neutral['10'],
-        disabled: 'rgba(33, 29, 23, 0.8)',
-      },
-      tertiary: {
-        default: primitiveColors.grayscale.neutral['10'],
-        pressed: primitiveColors.grayscale.neutral['11'],
-        disabled: 'rgba(9, 9, 9, 0.9)',
-      },
-      ghost: {
-        default: primitiveColors.transparencies.white['0%'],
-        pressed: primitiveColors.grayscale.neutral['09'],
-      },
-      critical: {
-        default: primitiveColors.solids.red['500'],
-        pressed: primitiveColors.solids.red['700'],
-        disabled: 'rgba(219, 0, 7, 0.4)',
-      },
-      success: {
-        default: primitiveColors.solids.green['600'],
-      },
-    },
-    notification: {
-      general: 'rgba(238, 232, 224, 0.8)',
-      success: 'rgba(6, 143, 29, 0.8)',
-      info: 'rgba(27, 106, 136, 0.8)',
-      error: 'rgba(219, 0, 7, 0.8)',
-      warning: 'rgba(232, 114, 10, 0.8)',
-    },
-    surface: {
-      default: primitiveColors.grayscale.neutral['09'],
-      raised: primitiveColors.grayscale.neutral['08'],
-      sunken: primitiveColors.grayscale.neutral['10'],
-      disabled: 'rgba(33, 29, 23, 0.4)',
-      highEmphasis: primitiveColors.grayscale.neutral['02'],
-      overlay: 'rgba(33, 29, 23, 0.8)',
-      status: primitiveColors.solids.cyan['600'],
-      success: primitiveColors.solids.greenDark['600'],
-      critical: primitiveColors.solids.red['400'],
-      warning: primitiveColors.solids.gold['600'],
-      brand: {
-        gold: primitiveColors.solids.gold['500'],
-        red: primitiveColors.solids.red['500'],
-        gray: primitiveColors.grayscale.neutral['06'],
-      },
-      constant: {
-        dark: primitiveColors.grayscale.neutral['08'],
-        light: primitiveColors.grayscale.neutral['01'],
-      },
-      constantColor: {
-        blue: primitiveColors.solids.blueDark['400'],
-        red: primitiveColors.solids.red['600'],
-        purple: primitiveColors.solids.indigo['400'],
-        yellow: primitiveColors.solids.gold['600'],
-        green: primitiveColors.solids.yellowGreen['600'],
-        gold: primitiveColors.solids.gold['400'],
-      },
-    },
-  },
-  border: {
-    cta: {
-      primary: {
-        default: primitiveColors.solids.gold['400'],
-        pressed: primitiveColors.solids.gold['400'],
-        disabled: 'rgba(133, 96, 0, 0.4)',
-      },
-      secondary: {
-        default: primitiveColors.solids.grey['700'],
-        pressed: primitiveColors.grayscale.neutral['06'],
-        disabled: 'rgba(61, 61, 61, 0.8)',
-      },
-      tertiary: {
-        default: primitiveColors.solids.grey['600'],
-        pressed: primitiveColors.solids.grey['500'],
-        disabled: primitiveColors.solids.grey['700'],
-      },
-      critical: {
-        default: primitiveColors.solids.red['400'],
-        pressed: primitiveColors.solids.red['300'],
-        disabled: 'rgba(236, 49, 55, 0.4)',
-      },
-      success: {
-        default: primitiveColors.solids.greenDark['500'],
-      },
-    },
-    fields: {
-      default: primitiveColors.grayscale.neutral['05'],
-      active: primitiveColors.grayscale.neutral['04'],
-      filled: primitiveColors.grayscale.neutral['05'],
-      disabled: 'rgba(107, 98, 89, 0.5)',
-      error: primitiveColors.solids.red['500'],
-      success: primitiveColors.solids.green['200'],
-    },
-    elements: {
-      divider: {
-        highEmphasis: primitiveColors.grayscale.neutral['02'],
-        mediumEmphasis: primitiveColors.grayscale.neutral['07'],
-      },
-    },
-    states: {
-      focus: primitiveColors.grayscale.neutral['00'],
-      selected: primitiveColors.solids.gold['500'],
-      disabled: primitiveColors.grayscale.neutral['06'],
-    },
-    container: {
-      highEmphasis: primitiveColors.grayscale.neutral['02'],
-      mediumEmphasis: primitiveColors.solids.grey['700'],
-      lowEmphasis: primitiveColors.grayscale.neutral['08'],
-      inverseHigh: primitiveColors.grayscale.neutral['08'],
-      inverseMedium: primitiveColors.solids.tan['300'],
-      constantLight: primitiveColors.grayscale.neutral['02'],
-      constantDark: primitiveColors.grayscale.neutral['08'],
-      constantColor: {
-        blue: primitiveColors.solids.blueDark['500'],
-        purple: primitiveColors.solids.indigo['600'],
-        red: primitiveColors.solids.red['700'],
-        yellow: primitiveColors.solids.gold['700'],
-        green: primitiveColors.solids.yellowGreen['700'],
-        gold: primitiveColors.solids.gold['400'],
-      },
-    },
-    common: {
-      highEmphasis: primitiveColors.grayscale.neutral['04'],
-      mediumEmphasis: primitiveColors.grayscale.neutral['06'],
-    },
-  },
-  text: {
-    common: {
-      highContrast: primitiveColors.grayscale.neutral['00'],
-      highEmphasis: primitiveColors.grayscale.neutral['02'],
-      mediumEmphasis: primitiveColors.grayscale.neutral['03'],
-      disabled: 'rgba(238, 232, 224, 0.6)',
-      success: primitiveColors.solids.green['300'],
-      info: primitiveColors.solids.cyan['100'],
-      error: primitiveColors.solids.red['100'],
-      warning: primitiveColors.solids.orange['300'],
-    },
-    inverse: {
-      highContrast: primitiveColors.grayscale.neutral['11'],
-      highEmphasis: primitiveColors.grayscale.neutral['08'],
-      mediumEmphasis: primitiveColors.grayscale.neutral['07'],
-      disabled: 'rgba(13, 12, 12, 0.7)',
-    },
-    constantDark: {
-      highContrast: primitiveColors.grayscale.neutral['11'],
-      highEmphasis: primitiveColors.grayscale.neutral['08'],
-      mediumEmphasis: primitiveColors.grayscale.neutral['07'],
-      disabled: primitiveColors.transparencies.black['70%'],
-    },
-    constantLight: {
-      highContrast: primitiveColors.grayscale.neutral['00'],
-      highEmphasis: primitiveColors.grayscale.neutral['02'],
-      mediumEmphasis: primitiveColors.grayscale.neutral['03'],
-      disabled: 'rgba(252, 250, 247, 0.8)',
-    },
-    link: {
-      default: primitiveColors.solids.blue['300'],
-      hover: primitiveColors.solids.blue['200'],
-      pressed: primitiveColors.solids.blue['500'],
-      inactive: primitiveColors.grayscale.neutral['04'],
-    },
-  },
-};