components-test-pb 0.1.6 → 0.1.8

package/dist/components/Button/src/useButtonStyles.styles.js

@@ -1,15 +1,51 @@
 import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
+import { tokens } from '../../../theme';
 export const buttonClassNames = {
     root: 'c-button'
 };
-const useResetStyles = makeResetStyles({});
+const useResetStyles = makeResetStyles({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
+    margin: 0,
+    overflow: 'hidden',
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    fontFamily: tokens.fontFamilyBase,
+    outlineStyle: 'none',
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        borderColor: tokens.colorNeutralStroke1Hover,
+        color: tokens.colorNeutralForeground1Hover,
+        cursor: 'pointer',
+    },
+    ':hover:active,:active:focus-visible': {
+        backgroundColor: tokens.colorNeutralBackground1Pressed,
+        borderColor: tokens.colorNeutralStroke1Pressed,
+        color: tokens.colorNeutralForeground1Pressed,
+        outlineStyle: 'none',
+    },
+    padding: `5px ${tokens.spacingHorizontalM}`,
+    minWidth: '96px',
+    borderRadius: tokens.borderRadiusMedium,
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: tokens.lineHeightBase300,
+    transitionDuration: tokens.durationFaster,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: tokens.curveEasyEase
+});
 const useVariationStyles = makeStyles({
     primary: {},
     secondary: {},
     ghost: {},
-    square: {},
+    square: { borderRadius: 0 },
     rounded: {},
-    circular: {},
+    circular: { borderRadius: '9999px' },
     small: {},
     medium: {},
     large: {}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { assertSlots, slot, useARIAButtonProps } from './utilities';
+export { tokens, defaultTheme, themeToCSS } from './theme';
+export type { Theme } from './theme';
 export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';
 export type { ButtonSlots, ButtonAppearance, ButtonShape, ButtonSize, ButtonProps, ButtonState, } from './components';
 export type { JSXIntrinsicElementKeys, JSXIntrinsicElement, SlotRenderFunction, SlotPropsRecord, SlotShorthandValue, UnknownSlotProps, WithSlotRenderFunction, WithoutSlotRenderFunction, IsSingleton, AsIntrinsicElement, Slot, ExtractSlotProps, ComponentProps, ComponentState, SlotClassNames, EventData, EventHandler, DistributiveOmit, UnionToIntersection, ARIAButtonType, ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonAlteredProps, ARIAButtonResultProps, } from './utilities';

package/dist/index.js

@@ -1,2 +1,3 @@
 export { assertSlots, slot, useARIAButtonProps } from './utilities';
+export { tokens, defaultTheme, themeToCSS } from './theme';
 export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const defaultTheme: Theme;

package/dist/theme/defaultTheme.js

@@ -0,0 +1,131 @@
+export const defaultTheme = {
+    // Colors — Brand
+    colorBrandBackground: '#0f6cbd',
+    colorBrandBackgroundHover: '#115ea3',
+    colorBrandBackgroundPressed: '#0c3b5e',
+    colorBrandBackgroundSelected: '#0f548c',
+    colorBrandForeground: '#115ea3',
+    colorBrandForegroundHover: '#0f548c',
+    colorBrandForegroundPressed: '#0c3b5e',
+    colorBrandStroke: '#0f6cbd',
+    // Colors — Neutral Foreground
+    colorNeutralForeground1: '#242424',
+    colorNeutralForeground1Hover: '#242424',
+    colorNeutralForeground1Pressed: '#242424',
+    colorNeutralForeground2: '#424242',
+    colorNeutralForeground2Hover: '#242424',
+    colorNeutralForeground2Pressed: '#242424',
+    colorNeutralForeground3: '#616161',
+    colorNeutralForegroundDisabled: '#bdbdbd',
+    // Colors — Neutral Background
+    colorNeutralBackground1: '#ffffff',
+    colorNeutralBackground1Hover: '#f5f5f5',
+    colorNeutralBackground1Pressed: '#e0e0e0',
+    colorNeutralBackground1Selected: '#ebebeb',
+    colorNeutralBackground2: '#fafafa',
+    colorNeutralBackground3: '#f5f5f5',
+    colorNeutralBackgroundDisabled: '#f0f0f0',
+    // Colors — Neutral Stroke
+    colorNeutralStroke1: '#d1d1d1',
+    colorNeutralStroke1Hover: '#c7c7c7',
+    colorNeutralStroke1Pressed: '#b3b3b3',
+    colorNeutralStroke2: '#e0e0e0',
+    colorNeutralStrokeDisabled: '#e0e0e0',
+    // Colors — Subtle
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: '#f5f5f5',
+    colorSubtleBackgroundPressed: '#e0e0e0',
+    colorSubtleBackgroundSelected: '#ebebeb',
+    colorSubtleForeground: '#424242',
+    // Colors — Status
+    colorStatusDangerBackground: '#fdf3f4',
+    colorStatusDangerForeground: '#c4314b',
+    colorStatusDangerStroke: '#c4314b',
+    colorStatusSuccessBackground: '#f1faf1',
+    colorStatusSuccessForeground: '#0e700e',
+    colorStatusSuccessStroke: '#0e700e',
+    colorStatusWarningBackground: '#fff9f5',
+    colorStatusWarningForeground: '#f7630c',
+    colorStatusWarningStroke: '#f7630c',
+    // Spacing — Horizontal
+    spacingHorizontalXXS: '2px',
+    spacingHorizontalXS: '4px',
+    spacingHorizontalSNudge: '6px',
+    spacingHorizontalS: '8px',
+    spacingHorizontalMNudge: '10px',
+    spacingHorizontalM: '12px',
+    spacingHorizontalL: '16px',
+    spacingHorizontalXL: '20px',
+    spacingHorizontalXXL: '24px',
+    spacingHorizontalXXXL: '32px',
+    // Spacing — Vertical
+    spacingVerticalXXS: '2px',
+    spacingVerticalXS: '4px',
+    spacingVerticalSNudge: '6px',
+    spacingVerticalS: '8px',
+    spacingVerticalMNudge: '10px',
+    spacingVerticalM: '12px',
+    spacingVerticalL: '16px',
+    spacingVerticalXL: '20px',
+    spacingVerticalXXL: '24px',
+    spacingVerticalXXXL: '32px',
+    // Border Radius
+    borderRadiusNone: '0',
+    borderRadiusSmall: '2px',
+    borderRadiusMedium: '4px',
+    borderRadiusLarge: '6px',
+    borderRadiusXLarge: '8px',
+    borderRadiusCircular: '10000px',
+    // Font Family
+    fontFamilyBase: "Neue Montreal",
+    fontFamilyMonospace: "Consolas, 'Courier New', Courier, monospace",
+    fontFamilyNumeric: "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+    // Font Size
+    fontSizeBase100: '10px',
+    fontSizeBase200: '12px',
+    fontSizeBase300: '14px',
+    fontSizeBase400: '16px',
+    fontSizeBase500: '20px',
+    fontSizeBase600: '24px',
+    // Font Weight
+    fontWeightRegular: '400',
+    fontWeightMedium: '500',
+    fontWeightSemibold: '600',
+    fontWeightBold: '700',
+    // Line Height
+    lineHeightBase100: '14px',
+    lineHeightBase200: '16px',
+    lineHeightBase300: '20px',
+    lineHeightBase400: '22px',
+    lineHeightBase500: '28px',
+    lineHeightBase600: '32px',
+    // Shadows
+    shadow2: '0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14)',
+    shadow4: '0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14)',
+    shadow8: '0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14)',
+    shadow16: '0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14)',
+    shadow28: '0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14)',
+    shadow64: '0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14)',
+    // Stroke Width
+    strokeWidthThin: '1px',
+    strokeWidthThick: '2px',
+    strokeWidthThicker: '3px',
+    strokeWidthThickest: '4px',
+    // Duration
+    durationUltraFast: '50ms',
+    durationFaster: '100ms',
+    durationFast: '150ms',
+    durationNormal: '200ms',
+    durationGentle: '250ms',
+    durationSlow: '300ms',
+    durationSlower: '400ms',
+    // Easing
+    curveAccelerateMax: 'cubic-bezier(1, 0, 1, 1)',
+    curveAccelerateMid: 'cubic-bezier(0.7, 0, 1, 0.5)',
+    curveAccelerateMin: 'cubic-bezier(0.8, 0, 1, 1)',
+    curveDecelerateMax: 'cubic-bezier(0, 0, 0, 1)',
+    curveDecelerateMid: 'cubic-bezier(0.1, 0.9, 0.2, 1)',
+    curveDecelerateMin: 'cubic-bezier(0.33, 0, 0.1, 1)',
+    curveEasyEase: 'cubic-bezier(0.33, 0, 0.67, 1)',
+    curveLinear: 'cubic-bezier(0, 0, 1, 1)',
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { tokens } from './tokens';
+export { defaultTheme } from './defaultTheme';
+export { themeToCSS } from './themeToCSS';
+export type { Theme } from './types';

package/dist/theme/index.js

@@ -0,0 +1,3 @@
+export { tokens } from './tokens';
+export { defaultTheme } from './defaultTheme';
+export { themeToCSS } from './themeToCSS';

package/dist/theme/themeToCSS.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare function themeToCSS(theme: Theme): string;

package/dist/theme/themeToCSS.js

@@ -0,0 +1,5 @@
+export function themeToCSS(theme) {
+    return Object.keys(theme)
+        .map((key) => `--${key}: ${theme[key]};`)
+        .join(' ');
+}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const tokens: Record<keyof Theme, string>;

package/dist/theme/tokens.js

@@ -0,0 +1,2 @@
+import { defaultTheme } from './defaultTheme';
+export const tokens = Object.fromEntries(Object.keys(defaultTheme).map((key) => [key, `var(--${key})`]));

package/dist/theme/types.d.ts

@@ -0,0 +1,114 @@
+export interface Theme {
+    colorBrandBackground: string;
+    colorBrandBackgroundHover: string;
+    colorBrandBackgroundPressed: string;
+    colorBrandBackgroundSelected: string;
+    colorBrandForeground: string;
+    colorBrandForegroundHover: string;
+    colorBrandForegroundPressed: string;
+    colorBrandStroke: string;
+    colorNeutralForeground1: string;
+    colorNeutralForeground1Hover: string;
+    colorNeutralForeground1Pressed: string;
+    colorNeutralForeground2: string;
+    colorNeutralForeground2Hover: string;
+    colorNeutralForeground2Pressed: string;
+    colorNeutralForeground3: string;
+    colorNeutralForegroundDisabled: string;
+    colorNeutralBackground1: string;
+    colorNeutralBackground1Hover: string;
+    colorNeutralBackground1Pressed: string;
+    colorNeutralBackground1Selected: string;
+    colorNeutralBackground2: string;
+    colorNeutralBackground3: string;
+    colorNeutralBackgroundDisabled: string;
+    colorNeutralStroke1: string;
+    colorNeutralStroke1Hover: string;
+    colorNeutralStroke1Pressed: string;
+    colorNeutralStroke2: string;
+    colorNeutralStrokeDisabled: string;
+    colorSubtleBackground: string;
+    colorSubtleBackgroundHover: string;
+    colorSubtleBackgroundPressed: string;
+    colorSubtleBackgroundSelected: string;
+    colorSubtleForeground: string;
+    colorStatusDangerBackground: string;
+    colorStatusDangerForeground: string;
+    colorStatusDangerStroke: string;
+    colorStatusSuccessBackground: string;
+    colorStatusSuccessForeground: string;
+    colorStatusSuccessStroke: string;
+    colorStatusWarningBackground: string;
+    colorStatusWarningForeground: string;
+    colorStatusWarningStroke: string;
+    spacingHorizontalXXS: string;
+    spacingHorizontalXS: string;
+    spacingHorizontalSNudge: string;
+    spacingHorizontalS: string;
+    spacingHorizontalMNudge: string;
+    spacingHorizontalM: string;
+    spacingHorizontalL: string;
+    spacingHorizontalXL: string;
+    spacingHorizontalXXL: string;
+    spacingHorizontalXXXL: string;
+    spacingVerticalXXS: string;
+    spacingVerticalXS: string;
+    spacingVerticalSNudge: string;
+    spacingVerticalS: string;
+    spacingVerticalMNudge: string;
+    spacingVerticalM: string;
+    spacingVerticalL: string;
+    spacingVerticalXL: string;
+    spacingVerticalXXL: string;
+    spacingVerticalXXXL: string;
+    borderRadiusNone: string;
+    borderRadiusSmall: string;
+    borderRadiusMedium: string;
+    borderRadiusLarge: string;
+    borderRadiusXLarge: string;
+    borderRadiusCircular: string;
+    fontFamilyBase: string;
+    fontFamilyMonospace: string;
+    fontFamilyNumeric: string;
+    fontSizeBase100: string;
+    fontSizeBase200: string;
+    fontSizeBase300: string;
+    fontSizeBase400: string;
+    fontSizeBase500: string;
+    fontSizeBase600: string;
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightSemibold: string;
+    fontWeightBold: string;
+    lineHeightBase100: string;
+    lineHeightBase200: string;
+    lineHeightBase300: string;
+    lineHeightBase400: string;
+    lineHeightBase500: string;
+    lineHeightBase600: string;
+    shadow2: string;
+    shadow4: string;
+    shadow8: string;
+    shadow16: string;
+    shadow28: string;
+    shadow64: string;
+    strokeWidthThin: string;
+    strokeWidthThick: string;
+    strokeWidthThicker: string;
+    strokeWidthThickest: string;
+    durationUltraFast: string;
+    durationFaster: string;
+    durationFast: string;
+    durationNormal: string;
+    durationGentle: string;
+    durationSlow: string;
+    durationSlower: string;
+    curveAccelerateMax: string;
+    curveAccelerateMid: string;
+    curveAccelerateMin: string;
+    curveDecelerateMax: string;
+    curveDecelerateMid: string;
+    curveDecelerateMin: string;
+    curveEasyEase: string;
+    curveLinear: string;
+}

package/dist/theme/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-test-pb",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/Button/src/useButtonStyles.styles.ts

@@ -1,13 +1,57 @@
 import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
 import { SlotClassNames } from '../../../utilities';
 import { ButtonSlots, ButtonState } from './Button.types';
+import { tokens } from '../../../theme';
 
 export const buttonClassNames: SlotClassNames<ButtonSlots> = {
     root: 'c-button'
 };
 
 const useResetStyles = makeResetStyles({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
 
+    margin: 0,
+    overflow: 'hidden',
+
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+
+    fontFamily: tokens.fontFamilyBase,
+    outlineStyle: 'none',
+
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        borderColor: tokens.colorNeutralStroke1Hover,
+        color: tokens.colorNeutralForeground1Hover,
+
+        cursor: 'pointer',
+    },
+
+    ':hover:active,:active:focus-visible': {
+        backgroundColor: tokens.colorNeutralBackground1Pressed,
+        borderColor: tokens.colorNeutralStroke1Pressed,
+        color: tokens.colorNeutralForeground1Pressed,
+
+        outlineStyle: 'none',
+    },
+
+    padding: `5px ${tokens.spacingHorizontalM}`,
+    minWidth: '96px',
+    borderRadius: tokens.borderRadiusMedium,
+
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: tokens.lineHeightBase300,
+
+    transitionDuration: tokens.durationFaster,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: tokens.curveEasyEase
 });
 
 const useVariationStyles = makeStyles({
@@ -21,9 +65,9 @@ const useVariationStyles = makeStyles({
 
     },
 
-    square: {},
+    square: { borderRadius: 0 },
     rounded: {},
-    circular: {},
+    circular: { borderRadius: '9999px' },
 
     small: {
 

package/src/index.ts

@@ -1,5 +1,8 @@
 export { assertSlots, slot, useARIAButtonProps } from './utilities';
 
+export { tokens, defaultTheme, themeToCSS } from './theme';
+export type { Theme } from './theme';
+
 export {
     Button,
     useButton,

package/src/theme/defaultTheme.ts

@@ -0,0 +1,149 @@
+import type { Theme } from './types';
+
+export const defaultTheme: Theme = {
+    // Colors — Brand
+    colorBrandBackground: '#0f6cbd',
+    colorBrandBackgroundHover: '#115ea3',
+    colorBrandBackgroundPressed: '#0c3b5e',
+    colorBrandBackgroundSelected: '#0f548c',
+    colorBrandForeground: '#115ea3',
+    colorBrandForegroundHover: '#0f548c',
+    colorBrandForegroundPressed: '#0c3b5e',
+    colorBrandStroke: '#0f6cbd',
+
+    // Colors — Neutral Foreground
+    colorNeutralForeground1: '#242424',
+    colorNeutralForeground1Hover: '#242424',
+    colorNeutralForeground1Pressed: '#242424',
+    colorNeutralForeground2: '#424242',
+    colorNeutralForeground2Hover: '#242424',
+    colorNeutralForeground2Pressed: '#242424',
+    colorNeutralForeground3: '#616161',
+    colorNeutralForegroundDisabled: '#bdbdbd',
+
+    // Colors — Neutral Background
+    colorNeutralBackground1: '#ffffff',
+    colorNeutralBackground1Hover: '#f5f5f5',
+    colorNeutralBackground1Pressed: '#e0e0e0',
+    colorNeutralBackground1Selected: '#ebebeb',
+    colorNeutralBackground2: '#fafafa',
+    colorNeutralBackground3: '#f5f5f5',
+    colorNeutralBackgroundDisabled: '#f0f0f0',
+
+    // Colors — Neutral Stroke
+    colorNeutralStroke1: '#d1d1d1',
+    colorNeutralStroke1Hover: '#c7c7c7',
+    colorNeutralStroke1Pressed: '#b3b3b3',
+    colorNeutralStroke2: '#e0e0e0',
+    colorNeutralStrokeDisabled: '#e0e0e0',
+
+    // Colors — Subtle
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: '#f5f5f5',
+    colorSubtleBackgroundPressed: '#e0e0e0',
+    colorSubtleBackgroundSelected: '#ebebeb',
+    colorSubtleForeground: '#424242',
+
+    // Colors — Status
+    colorStatusDangerBackground: '#fdf3f4',
+    colorStatusDangerForeground: '#c4314b',
+    colorStatusDangerStroke: '#c4314b',
+    colorStatusSuccessBackground: '#f1faf1',
+    colorStatusSuccessForeground: '#0e700e',
+    colorStatusSuccessStroke: '#0e700e',
+    colorStatusWarningBackground: '#fff9f5',
+    colorStatusWarningForeground: '#f7630c',
+    colorStatusWarningStroke: '#f7630c',
+
+    // Spacing — Horizontal
+    spacingHorizontalXXS: '2px',
+    spacingHorizontalXS: '4px',
+    spacingHorizontalSNudge: '6px',
+    spacingHorizontalS: '8px',
+    spacingHorizontalMNudge: '10px',
+    spacingHorizontalM: '12px',
+    spacingHorizontalL: '16px',
+    spacingHorizontalXL: '20px',
+    spacingHorizontalXXL: '24px',
+    spacingHorizontalXXXL: '32px',
+
+    // Spacing — Vertical
+    spacingVerticalXXS: '2px',
+    spacingVerticalXS: '4px',
+    spacingVerticalSNudge: '6px',
+    spacingVerticalS: '8px',
+    spacingVerticalMNudge: '10px',
+    spacingVerticalM: '12px',
+    spacingVerticalL: '16px',
+    spacingVerticalXL: '20px',
+    spacingVerticalXXL: '24px',
+    spacingVerticalXXXL: '32px',
+
+    // Border Radius
+    borderRadiusNone: '0',
+    borderRadiusSmall: '2px',
+    borderRadiusMedium: '4px',
+    borderRadiusLarge: '6px',
+    borderRadiusXLarge: '8px',
+    borderRadiusCircular: '10000px',
+
+    // Font Family
+    fontFamilyBase: "Neue Montreal",
+    fontFamilyMonospace: "Consolas, 'Courier New', Courier, monospace",
+    fontFamilyNumeric: "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+
+    // Font Size
+    fontSizeBase100: '10px',
+    fontSizeBase200: '12px',
+    fontSizeBase300: '14px',
+    fontSizeBase400: '16px',
+    fontSizeBase500: '20px',
+    fontSizeBase600: '24px',
+
+    // Font Weight
+    fontWeightRegular: '400',
+    fontWeightMedium: '500',
+    fontWeightSemibold: '600',
+    fontWeightBold: '700',
+
+    // Line Height
+    lineHeightBase100: '14px',
+    lineHeightBase200: '16px',
+    lineHeightBase300: '20px',
+    lineHeightBase400: '22px',
+    lineHeightBase500: '28px',
+    lineHeightBase600: '32px',
+
+    // Shadows
+    shadow2: '0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14)',
+    shadow4: '0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14)',
+    shadow8: '0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14)',
+    shadow16: '0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14)',
+    shadow28: '0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14)',
+    shadow64: '0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14)',
+
+    // Stroke Width
+    strokeWidthThin: '1px',
+    strokeWidthThick: '2px',
+    strokeWidthThicker: '3px',
+    strokeWidthThickest: '4px',
+
+    // Duration
+    durationUltraFast: '50ms',
+    durationFaster: '100ms',
+    durationFast: '150ms',
+    durationNormal: '200ms',
+    durationGentle: '250ms',
+    durationSlow: '300ms',
+    durationSlower: '400ms',
+
+    // Easing
+    curveAccelerateMax: 'cubic-bezier(1, 0, 1, 1)',
+    curveAccelerateMid: 'cubic-bezier(0.7, 0, 1, 0.5)',
+    curveAccelerateMin: 'cubic-bezier(0.8, 0, 1, 1)',
+    curveDecelerateMax: 'cubic-bezier(0, 0, 0, 1)',
+    curveDecelerateMid: 'cubic-bezier(0.1, 0.9, 0.2, 1)',
+    curveDecelerateMin: 'cubic-bezier(0.33, 0, 0.1, 1)',
+    curveEasyEase: 'cubic-bezier(0.33, 0, 0.67, 1)',
+    curveLinear: 'cubic-bezier(0, 0, 1, 1)',
+};

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { tokens } from './tokens';
+export { defaultTheme } from './defaultTheme';
+export { themeToCSS } from './themeToCSS';
+export type { Theme } from './types';

package/src/theme/themeToCSS.ts

@@ -0,0 +1,7 @@
+import type { Theme } from './types';
+
+export function themeToCSS(theme: Theme): string {
+    return (Object.keys(theme) as (keyof Theme)[])
+        .map((key) => `--${key}: ${theme[key]};`)
+        .join(' ');
+}

package/src/theme/tokens.ts

@@ -0,0 +1,6 @@
+import type { Theme } from './types';
+import { defaultTheme } from './defaultTheme';
+
+export const tokens: Record<keyof Theme, string> = Object.fromEntries(
+    (Object.keys(defaultTheme) as (keyof Theme)[]).map((key) => [key, `var(--${key})`]),
+) as Record<keyof Theme, string>;

package/src/theme/types.ts

@@ -0,0 +1,147 @@
+export interface Theme {
+    // Colors — Brand
+    colorBrandBackground: string;
+    colorBrandBackgroundHover: string;
+    colorBrandBackgroundPressed: string;
+    colorBrandBackgroundSelected: string;
+    colorBrandForeground: string;
+    colorBrandForegroundHover: string;
+    colorBrandForegroundPressed: string;
+    colorBrandStroke: string;
+
+    // Colors — Neutral Foreground
+    colorNeutralForeground1: string;
+    colorNeutralForeground1Hover: string;
+    colorNeutralForeground1Pressed: string;
+    colorNeutralForeground2: string;
+    colorNeutralForeground2Hover: string;
+    colorNeutralForeground2Pressed: string;
+    colorNeutralForeground3: string;
+    colorNeutralForegroundDisabled: string;
+
+    // Colors — Neutral Background
+    colorNeutralBackground1: string;
+    colorNeutralBackground1Hover: string;
+    colorNeutralBackground1Pressed: string;
+    colorNeutralBackground1Selected: string;
+    colorNeutralBackground2: string;
+    colorNeutralBackground3: string;
+    colorNeutralBackgroundDisabled: string;
+
+    // Colors — Neutral Stroke
+    colorNeutralStroke1: string;
+    colorNeutralStroke1Hover: string;
+    colorNeutralStroke1Pressed: string;
+    colorNeutralStroke2: string;
+    colorNeutralStrokeDisabled: string;
+
+    // Colors — Subtle
+    colorSubtleBackground: string;
+    colorSubtleBackgroundHover: string;
+    colorSubtleBackgroundPressed: string;
+    colorSubtleBackgroundSelected: string;
+    colorSubtleForeground: string;
+
+    // Colors — Status
+    colorStatusDangerBackground: string;
+    colorStatusDangerForeground: string;
+    colorStatusDangerStroke: string;
+    colorStatusSuccessBackground: string;
+    colorStatusSuccessForeground: string;
+    colorStatusSuccessStroke: string;
+    colorStatusWarningBackground: string;
+    colorStatusWarningForeground: string;
+    colorStatusWarningStroke: string;
+
+    // Spacing — Horizontal
+    spacingHorizontalXXS: string;
+    spacingHorizontalXS: string;
+    spacingHorizontalSNudge: string;
+    spacingHorizontalS: string;
+    spacingHorizontalMNudge: string;
+    spacingHorizontalM: string;
+    spacingHorizontalL: string;
+    spacingHorizontalXL: string;
+    spacingHorizontalXXL: string;
+    spacingHorizontalXXXL: string;
+
+    // Spacing — Vertical
+    spacingVerticalXXS: string;
+    spacingVerticalXS: string;
+    spacingVerticalSNudge: string;
+    spacingVerticalS: string;
+    spacingVerticalMNudge: string;
+    spacingVerticalM: string;
+    spacingVerticalL: string;
+    spacingVerticalXL: string;
+    spacingVerticalXXL: string;
+    spacingVerticalXXXL: string;
+
+    // Border Radius
+    borderRadiusNone: string;
+    borderRadiusSmall: string;
+    borderRadiusMedium: string;
+    borderRadiusLarge: string;
+    borderRadiusXLarge: string;
+    borderRadiusCircular: string;
+
+    // Font Family
+    fontFamilyBase: string;
+    fontFamilyMonospace: string;
+    fontFamilyNumeric: string;
+
+    // Font Size
+    fontSizeBase100: string;
+    fontSizeBase200: string;
+    fontSizeBase300: string;
+    fontSizeBase400: string;
+    fontSizeBase500: string;
+    fontSizeBase600: string;
+
+    // Font Weight
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightSemibold: string;
+    fontWeightBold: string;
+
+    // Line Height
+    lineHeightBase100: string;
+    lineHeightBase200: string;
+    lineHeightBase300: string;
+    lineHeightBase400: string;
+    lineHeightBase500: string;
+    lineHeightBase600: string;
+
+    // Shadows
+    shadow2: string;
+    shadow4: string;
+    shadow8: string;
+    shadow16: string;
+    shadow28: string;
+    shadow64: string;
+
+    // Stroke Width
+    strokeWidthThin: string;
+    strokeWidthThick: string;
+    strokeWidthThicker: string;
+    strokeWidthThickest: string;
+
+    // Duration
+    durationUltraFast: string;
+    durationFaster: string;
+    durationFast: string;
+    durationNormal: string;
+    durationGentle: string;
+    durationSlow: string;
+    durationSlower: string;
+
+    // Easing
+    curveAccelerateMax: string;
+    curveAccelerateMid: string;
+    curveAccelerateMin: string;
+    curveDecelerateMax: string;
+    curveDecelerateMid: string;
+    curveDecelerateMin: string;
+    curveEasyEase: string;
+    curveLinear: string;
+}