tharaday 0.7.3 → 0.7.5

package/src/components/Tree/TreeItem.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useRef, useState } from 'react';
 import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import type { TreeItemProps } from './TreeItem.types';
@@ -185,7 +185,7 @@ export const TreeItem = ({
       aria-setsize={setSize}
       aria-posinset={posInSet}
       tabIndex={-1}
-      className={clsx(styles.item, hasChildren && styles.branch)}
+      className={classnames(styles.item, hasChildren && styles.branch)}
       onClick={handleClick}
       onFocus={handleFocus}
       onKeyDown={handleKeyDown}

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
@@ -12,7 +12,7 @@ export const AppLayout = ({
   maxWidth = '75rem',
 }: AppLayoutProps) => {
   return (
-    <div className={clsx(styles.root, className)}>
+    <div className={classnames(styles.root, className)}>
       {header}
       {navbar}
       <main className={styles.main}>

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './AuthLayout.module.css';
 import type { AuthLayoutProps } from './AuthLayout.types.tsx';
@@ -7,7 +7,7 @@ import { Text } from '../../components/Text/Text.tsx';
 
 export const AuthLayout = ({ logo, title, description, children, className }: AuthLayoutProps) => {
   return (
-    <Box className={clsx(styles.root, className)}>
+    <Box className={classnames(styles.root, className)}>
       <Box className={styles.card}>
         <Box className={styles.header}>
           {logo && <Box className={styles.logo}>{logo}</Box>}

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './DashboardLayout.module.css';
 import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
@@ -12,7 +12,7 @@ export const DashboardLayout = ({
   className,
 }: DashboardLayoutProps) => {
   return (
-    <div className={clsx(styles.root, className)}>
+    <div className={classnames(styles.root, className)}>
       {header}
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './SettingsLayout.module.css';
 import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
@@ -11,7 +11,7 @@ export const SettingsLayout = ({
   className,
 }: SettingsLayoutProps) => {
   return (
-    <div className={clsx(styles.root, className)}>
+    <div className={classnames(styles.root, className)}>
       {header}
       <main className={styles.main}>
         <div className={styles.container}>

package/src/styles/ds.css

@@ -1,12 +1,17 @@
-/* Layered Design Tokens (foundation -> theme refs -> semantics) */
-@import 'tokens.css';
-@import 'themes/light.css';
-@import 'themes/dark.css';
-@import 'themes/retro-light.css';
-@import 'themes/retro-dark.css';
-@import 'themes/sanzo-152-light.css';
-@import 'themes/sanzo-152-dark.css';
-@import 'semantic.css';
+/* Explicit layer order: tokens < theme */
+@layer ds.tokens, ds.theme;
+
+/* Design tokens: primitives (palette.css, tokens.css) → theme semantics (themes/*.css) */
+@import 'palette.css' layer(ds.tokens);
+@import 'tokens.css' layer(ds.tokens);
+@import 'themes/retro-palette.css' layer(ds.tokens);
+@import 'themes/sanzo-152-palette.css' layer(ds.tokens);
+@import 'themes/light.css' layer(ds.theme);
+@import 'themes/dark.css' layer(ds.theme);
+@import 'themes/retro-light.css' layer(ds.theme);
+@import 'themes/retro-dark.css' layer(ds.theme);
+@import 'themes/sanzo-152-light.css' layer(ds.theme);
+@import 'themes/sanzo-152-dark.css' layer(ds.theme);
 
 :root {
   font-family: var(--ds-font-family-base);

package/src/styles/palette.css

@@ -0,0 +1,71 @@
+:root {
+  /* Neutral */
+  --ds-p-neutral-0: #ffffff;
+  --ds-p-neutral-50: #fafafa;
+  --ds-p-neutral-100: #f5f5f5;
+  --ds-p-neutral-200: #eeeeee;
+  --ds-p-neutral-300: #e0e0e0;
+  --ds-p-neutral-400: #a5a5ae;
+  --ds-p-neutral-500: #7b7b85;
+  --ds-p-neutral-600: #63636e;
+  --ds-p-neutral-700: #424249;
+  --ds-p-neutral-800: #323237;
+  --ds-p-neutral-900: #242429;
+  --ds-p-neutral-950: #09090b;
+
+  /* Blue */
+  --ds-p-blue: #637ab3;
+  --ds-p-blue-50: color-mix(in srgb, var(--ds-p-blue) 10%, #ffffff);
+  --ds-p-blue-100: color-mix(in srgb, var(--ds-p-blue) 20%, #ffffff);
+  --ds-p-blue-200: color-mix(in srgb, var(--ds-p-blue) 35%, #ffffff);
+  --ds-p-blue-300: color-mix(in srgb, var(--ds-p-blue) 55%, #ffffff);
+  --ds-p-blue-400: color-mix(in srgb, var(--ds-p-blue) 75%, #ffffff);
+  --ds-p-blue-500: var(--ds-p-blue);
+  --ds-p-blue-600: color-mix(in srgb, var(--ds-p-blue) 85%, #000000);
+  --ds-p-blue-700: color-mix(in srgb, var(--ds-p-blue) 70%, #000000);
+  --ds-p-blue-800: color-mix(in srgb, var(--ds-p-blue) 55%, #000000);
+  --ds-p-blue-900: color-mix(in srgb, var(--ds-p-blue) 40%, #000000);
+  --ds-p-blue-950: color-mix(in srgb, var(--ds-p-blue) 25%, #000000);
+
+  /* Green */
+  --ds-p-green: #64af76;
+  --ds-p-green-50: color-mix(in srgb, var(--ds-p-green) 10%, #ffffff);
+  --ds-p-green-100: color-mix(in srgb, var(--ds-p-green) 20%, #ffffff);
+  --ds-p-green-200: color-mix(in srgb, var(--ds-p-green) 35%, #ffffff);
+  --ds-p-green-300: color-mix(in srgb, var(--ds-p-green) 55%, #ffffff);
+  --ds-p-green-400: color-mix(in srgb, var(--ds-p-green) 75%, #ffffff);
+  --ds-p-green-500: var(--ds-p-green);
+  --ds-p-green-600: color-mix(in srgb, var(--ds-p-green) 85%, #000000);
+  --ds-p-green-700: color-mix(in srgb, var(--ds-p-green) 70%, #000000);
+  --ds-p-green-800: color-mix(in srgb, var(--ds-p-green) 55%, #000000);
+  --ds-p-green-900: color-mix(in srgb, var(--ds-p-green) 40%, #000000);
+  --ds-p-green-950: color-mix(in srgb, var(--ds-p-green) 25%, #000000);
+
+  /* Red */
+  --ds-p-red: #d55a5a;
+  --ds-p-red-50: color-mix(in srgb, var(--ds-p-red) 10%, #ffffff);
+  --ds-p-red-100: color-mix(in srgb, var(--ds-p-red) 20%, #ffffff);
+  --ds-p-red-200: color-mix(in srgb, var(--ds-p-red) 35%, #ffffff);
+  --ds-p-red-300: color-mix(in srgb, var(--ds-p-red) 55%, #ffffff);
+  --ds-p-red-400: color-mix(in srgb, var(--ds-p-red) 75%, #ffffff);
+  --ds-p-red-500: var(--ds-p-red);
+  --ds-p-red-600: color-mix(in srgb, var(--ds-p-red) 85%, #000000);
+  --ds-p-red-700: color-mix(in srgb, var(--ds-p-red) 70%, #000000);
+  --ds-p-red-800: color-mix(in srgb, var(--ds-p-red) 55%, #000000);
+  --ds-p-red-900: color-mix(in srgb, var(--ds-p-red) 40%, #000000);
+  --ds-p-red-950: color-mix(in srgb, var(--ds-p-red) 25%, #000000);
+
+  /* Orange */
+  --ds-p-orange: #bf914f;
+  --ds-p-orange-50: color-mix(in srgb, var(--ds-p-orange) 10%, #ffffff);
+  --ds-p-orange-100: color-mix(in srgb, var(--ds-p-orange) 20%, #ffffff);
+  --ds-p-orange-200: color-mix(in srgb, var(--ds-p-orange) 35%, #ffffff);
+  --ds-p-orange-300: color-mix(in srgb, var(--ds-p-orange) 55%, #ffffff);
+  --ds-p-orange-400: color-mix(in srgb, var(--ds-p-orange) 75%, #ffffff);
+  --ds-p-orange-500: var(--ds-p-orange);
+  --ds-p-orange-600: color-mix(in srgb, var(--ds-p-orange) 85%, #000000);
+  --ds-p-orange-700: color-mix(in srgb, var(--ds-p-orange) 70%, #000000);
+  --ds-p-orange-800: color-mix(in srgb, var(--ds-p-orange) 55%, #000000);
+  --ds-p-orange-900: color-mix(in srgb, var(--ds-p-orange) 40%, #000000);
+  --ds-p-orange-950: color-mix(in srgb, var(--ds-p-orange) 25%, #000000);
+}

package/src/styles/themes/dark.css

@@ -2,57 +2,57 @@
   color-scheme: dark;
 
   /* Surfaces */
-  --ds-ref-surface-0: var(--neutral-950);
-  --ds-ref-surface-1: var(--neutral-900);
-  --ds-ref-surface-2: var(--neutral-800);
+  --ds-surface-0: var(--ds-p-neutral-950);
+  --ds-surface-1: var(--ds-p-neutral-900);
+  --ds-surface-2: var(--ds-p-neutral-800);
 
   /* Text */
-  --ds-ref-text-1: var(--neutral-0);
-  --ds-ref-text-2: var(--neutral-300);
-  --ds-ref-text-on-brand: var(--neutral-950);
+  --ds-text-1: var(--ds-p-neutral-0);
+  --ds-text-2: var(--ds-p-neutral-300);
+  --ds-text-on-brand: var(--ds-p-neutral-950);
+  --ds-text-disabled: var(--ds-p-neutral-500);
 
   /* Borders */
-  --ds-ref-border-1: var(--neutral-800);
-  --ds-ref-border-2: var(--neutral-900);
+  --ds-border-1: var(--ds-p-neutral-800);
+  --ds-border-2: var(--ds-p-neutral-900);
+  --ds-border-disabled: var(--ds-p-neutral-800);
 
   /* Focus */
-  --ds-ref-ring: var(--blue-400);
-  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+  --ds-ring: var(--ds-p-blue-400);
+  --ds-ring-offset: var(--ds-surface-0);
 
   /* Intents (base) */
-  --ds-ref-info: var(--blue-500);
-  --ds-ref-success: var(--green-500);
-  --ds-ref-warning: var(--orange-500);
-  --ds-ref-danger: var(--red-500);
-  --ds-ref-neutral: var(--neutral-500);
+  --ds-info: var(--ds-p-blue-500);
+  --ds-success: var(--ds-p-green-500);
+  --ds-warning: var(--ds-p-orange-500);
+  --ds-danger: var(--ds-p-red-500);
+  --ds-neutral: var(--ds-p-neutral-500);
 
   /* Intents (states) */
-  --ds-ref-info-hover: var(--blue-400);
-  --ds-ref-info-active: var(--blue-300);
-  --ds-ref-info-subtle: var(--blue-950);
+  --ds-info-hover: var(--ds-p-blue-400);
+  --ds-info-active: var(--ds-p-blue-300);
+  --ds-info-subtle: var(--ds-p-blue-950);
 
-  --ds-ref-success-hover: var(--green-400);
-  --ds-ref-success-active: var(--green-300);
-  --ds-ref-success-subtle: var(--green-950);
+  --ds-success-hover: var(--ds-p-green-400);
+  --ds-success-active: var(--ds-p-green-300);
+  --ds-success-subtle: var(--ds-p-green-950);
 
-  --ds-ref-warning-hover: var(--orange-400);
-  --ds-ref-warning-active: var(--orange-300);
-  --ds-ref-warning-subtle: var(--orange-950);
+  --ds-warning-hover: var(--ds-p-orange-400);
+  --ds-warning-active: var(--ds-p-orange-300);
+  --ds-warning-subtle: var(--ds-p-orange-950);
 
-  --ds-ref-danger-hover: var(--red-400);
-  --ds-ref-danger-active: var(--red-300);
-  --ds-ref-danger-subtle: var(--red-950);
+  --ds-danger-hover: var(--ds-p-red-400);
+  --ds-danger-active: var(--ds-p-red-300);
+  --ds-danger-subtle: var(--ds-p-red-950);
 
-  --ds-ref-neutral-hover: var(--neutral-400);
-  --ds-ref-neutral-active: var(--neutral-300);
-  --ds-ref-neutral-subtle: var(--neutral-900);
+  --ds-neutral-hover: var(--ds-p-neutral-400);
+  --ds-neutral-active: var(--ds-p-neutral-300);
+  --ds-neutral-subtle: var(--ds-p-neutral-900);
 
   /* Disabled */
-  --ds-ref-text-disabled: var(--neutral-500);
-  --ds-ref-surface-disabled: var(--neutral-900);
-  --ds-ref-border-disabled: var(--neutral-800);
+  --ds-surface-disabled: var(--ds-p-neutral-900);
 
   /* Skeleton */
-  --ds-ref-skeleton: var(--neutral-800);
-  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
+  --ds-skeleton: var(--ds-p-neutral-800);
+  --ds-skeleton-highlight: rgba(255, 255, 255, 0.08);
 }

package/src/styles/themes/light.css

@@ -2,57 +2,57 @@
   color-scheme: light;
 
   /* Surfaces */
-  --ds-ref-surface-0: var(--neutral-0);
-  --ds-ref-surface-1: var(--neutral-50);
-  --ds-ref-surface-2: var(--neutral-100);
+  --ds-surface-0: var(--ds-p-neutral-0);
+  --ds-surface-1: var(--ds-p-neutral-50);
+  --ds-surface-2: var(--ds-p-neutral-100);
 
   /* Text */
-  --ds-ref-text-1: var(--neutral-900);
-  --ds-ref-text-2: var(--neutral-600);
-  --ds-ref-text-on-brand: var(--neutral-0);
+  --ds-text-1: var(--ds-p-neutral-900);
+  --ds-text-2: var(--ds-p-neutral-600);
+  --ds-text-on-brand: var(--ds-p-neutral-0);
+  --ds-text-disabled: var(--ds-p-neutral-400);
 
   /* Borders */
-  --ds-ref-border-1: var(--neutral-200);
-  --ds-ref-border-2: var(--neutral-100);
+  --ds-border-1: var(--ds-p-neutral-200);
+  --ds-border-2: var(--ds-p-neutral-100);
+  --ds-border-disabled: var(--ds-p-neutral-200);
 
   /* Focus */
-  --ds-ref-ring: var(--blue-500);
-  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+  --ds-ring: var(--ds-p-blue-500);
+  --ds-ring-offset: var(--ds-surface-0);
 
   /* Intents (base) */
-  --ds-ref-info: var(--blue-500);
-  --ds-ref-success: var(--green-600);
-  --ds-ref-warning: var(--orange-500);
-  --ds-ref-danger: var(--red-500);
-  --ds-ref-neutral: var(--neutral-600);
+  --ds-info: var(--ds-p-blue-500);
+  --ds-success: var(--ds-p-green-600);
+  --ds-warning: var(--ds-p-orange-500);
+  --ds-danger: var(--ds-p-red-500);
+  --ds-neutral: var(--ds-p-neutral-600);
 
   /* Intents (states) */
-  --ds-ref-info-hover: var(--blue-600);
-  --ds-ref-info-active: var(--blue-700);
-  --ds-ref-info-subtle: var(--blue-50);
+  --ds-info-hover: var(--ds-p-blue-600);
+  --ds-info-active: var(--ds-p-blue-700);
+  --ds-info-subtle: var(--ds-p-blue-50);
 
-  --ds-ref-success-hover: var(--green-700);
-  --ds-ref-success-active: var(--green-800);
-  --ds-ref-success-subtle: var(--green-50);
+  --ds-success-hover: var(--ds-p-green-700);
+  --ds-success-active: var(--ds-p-green-800);
+  --ds-success-subtle: var(--ds-p-green-50);
 
-  --ds-ref-warning-hover: var(--orange-600);
-  --ds-ref-warning-active: var(--orange-700);
-  --ds-ref-warning-subtle: var(--orange-50);
+  --ds-warning-hover: var(--ds-p-orange-600);
+  --ds-warning-active: var(--ds-p-orange-700);
+  --ds-warning-subtle: var(--ds-p-orange-50);
 
-  --ds-ref-danger-hover: var(--red-600);
-  --ds-ref-danger-active: var(--red-700);
-  --ds-ref-danger-subtle: var(--red-50);
+  --ds-danger-hover: var(--ds-p-red-600);
+  --ds-danger-active: var(--ds-p-red-700);
+  --ds-danger-subtle: var(--ds-p-red-50);
 
-  --ds-ref-neutral-hover: var(--neutral-700);
-  --ds-ref-neutral-active: var(--neutral-800);
-  --ds-ref-neutral-subtle: var(--neutral-50);
+  --ds-neutral-hover: var(--ds-p-neutral-700);
+  --ds-neutral-active: var(--ds-p-neutral-800);
+  --ds-neutral-subtle: var(--ds-p-neutral-50);
 
   /* Disabled */
-  --ds-ref-text-disabled: var(--neutral-400);
-  --ds-ref-surface-disabled: var(--neutral-100);
-  --ds-ref-border-disabled: var(--neutral-200);
+  --ds-surface-disabled: var(--ds-p-neutral-100);
 
   /* Skeleton */
-  --ds-ref-skeleton: var(--neutral-200);
-  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
+  --ds-skeleton: var(--ds-p-neutral-200);
+  --ds-skeleton-highlight: rgba(255, 255, 255, 0.4);
 }

package/src/styles/themes/retro-dark.css

@@ -2,57 +2,57 @@
   color-scheme: dark;
 
   /* Surfaces */
-  --ds-ref-surface-0: var(--retro-brown-900);
-  --ds-ref-surface-1: var(--retro-brown-800);
-  --ds-ref-surface-2: var(--retro-brown-700);
+  --ds-surface-0: var(--retro-brown-900);
+  --ds-surface-1: var(--retro-brown-800);
+  --ds-surface-2: var(--retro-brown-700);
 
   /* Text */
-  --ds-ref-text-1: var(--retro-yellow-50);
-  --ds-ref-text-2: var(--retro-yellow-200);
-  --ds-ref-text-on-brand: var(--retro-brown-900);
+  --ds-text-1: var(--retro-yellow-50);
+  --ds-text-2: var(--retro-yellow-200);
+  --ds-text-on-brand: var(--retro-brown-900);
+  --ds-text-disabled: var(--retro-brown-600);
 
   /* Borders */
-  --ds-ref-border-1: var(--retro-brown-800);
-  --ds-ref-border-2: var(--retro-brown-700);
+  --ds-border-1: var(--retro-brown-800);
+  --ds-border-2: var(--retro-brown-700);
+  --ds-border-disabled: var(--retro-brown-800);
 
   /* Focus */
-  --ds-ref-ring: var(--retro-teal-400);
-  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+  --ds-ring: var(--retro-teal-400);
+  --ds-ring-offset: var(--ds-surface-0);
 
   /* Intents (base) */
-  --ds-ref-info: var(--retro-teal-400);
-  --ds-ref-success: var(--retro-green-400);
-  --ds-ref-warning: var(--retro-orange-400);
-  --ds-ref-danger: var(--retro-red-400);
-  --ds-ref-neutral: var(--retro-brown-300);
+  --ds-info: var(--retro-teal-400);
+  --ds-success: var(--retro-green-400);
+  --ds-warning: var(--retro-orange-400);
+  --ds-danger: var(--retro-red-400);
+  --ds-neutral: var(--retro-brown-300);
 
   /* Intents (states) */
-  --ds-ref-info-hover: var(--retro-teal-300);
-  --ds-ref-info-active: var(--retro-teal-200);
-  --ds-ref-info-subtle: color-mix(in srgb, var(--retro-teal-500) 18%, var(--retro-gray-900));
+  --ds-info-hover: var(--retro-teal-300);
+  --ds-info-active: var(--retro-teal-200);
+  --ds-info-subtle: color-mix(in srgb, var(--retro-teal-500) 18%, var(--retro-gray-900));
 
-  --ds-ref-success-hover: var(--retro-green-300);
-  --ds-ref-success-active: var(--retro-green-200);
-  --ds-ref-success-subtle: color-mix(in srgb, var(--retro-green-500) 18%, var(--retro-gray-900));
+  --ds-success-hover: var(--retro-green-300);
+  --ds-success-active: var(--retro-green-200);
+  --ds-success-subtle: color-mix(in srgb, var(--retro-green-500) 18%, var(--retro-gray-900));
 
-  --ds-ref-warning-hover: var(--retro-orange-300);
-  --ds-ref-warning-active: var(--retro-orange-200);
-  --ds-ref-warning-subtle: color-mix(in srgb, var(--retro-orange-500) 18%, var(--retro-gray-900));
+  --ds-warning-hover: var(--retro-orange-300);
+  --ds-warning-active: var(--retro-orange-200);
+  --ds-warning-subtle: color-mix(in srgb, var(--retro-orange-500) 18%, var(--retro-gray-900));
 
-  --ds-ref-danger-hover: var(--retro-red-300);
-  --ds-ref-danger-active: var(--retro-red-200);
-  --ds-ref-danger-subtle: color-mix(in srgb, var(--retro-red-500) 18%, var(--retro-gray-900));
+  --ds-danger-hover: var(--retro-red-300);
+  --ds-danger-active: var(--retro-red-200);
+  --ds-danger-subtle: color-mix(in srgb, var(--retro-red-500) 18%, var(--retro-gray-900));
 
-  --ds-ref-neutral-hover: var(--retro-brown-200);
-  --ds-ref-neutral-active: var(--retro-brown-100);
-  --ds-ref-neutral-subtle: var(--retro-brown-800);
+  --ds-neutral-hover: var(--retro-brown-200);
+  --ds-neutral-active: var(--retro-brown-100);
+  --ds-neutral-subtle: var(--retro-brown-800);
 
   /* Disabled */
-  --ds-ref-text-disabled: var(--retro-brown-600);
-  --ds-ref-surface-disabled: var(--retro-brown-800);
-  --ds-ref-border-disabled: var(--retro-brown-800);
+  --ds-surface-disabled: var(--retro-brown-800);
 
   /* Skeleton */
-  --ds-ref-skeleton: var(--retro-brown-800);
-  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
+  --ds-skeleton: var(--retro-brown-800);
+  --ds-skeleton-highlight: rgba(255, 255, 255, 0.08);
 }

package/src/styles/themes/retro-light.css

@@ -2,57 +2,57 @@
   color-scheme: light;
 
   /* Surfaces */
-  --ds-ref-surface-0: var(--retro-yellow-50);
-  --ds-ref-surface-1: var(--retro-yellow-100);
-  --ds-ref-surface-2: var(--retro-yellow-200);
+  --ds-surface-0: var(--retro-yellow-50);
+  --ds-surface-1: var(--retro-yellow-100);
+  --ds-surface-2: var(--retro-yellow-200);
 
   /* Text */
-  --ds-ref-text-1: var(--retro-brown-800);
-  --ds-ref-text-2: var(--retro-brown-600);
-  --ds-ref-text-on-brand: var(--retro-yellow-50);
+  --ds-text-1: var(--retro-brown-800);
+  --ds-text-2: var(--retro-brown-600);
+  --ds-text-on-brand: var(--retro-yellow-50);
+  --ds-text-disabled: var(--retro-brown-300);
 
   /* Borders */
-  --ds-ref-border-1: var(--retro-brown-200);
-  --ds-ref-border-2: var(--retro-brown-100);
+  --ds-border-1: var(--retro-brown-200);
+  --ds-border-2: var(--retro-brown-100);
+  --ds-border-disabled: var(--retro-brown-200);
 
   /* Focus */
-  --ds-ref-ring: var(--retro-teal-500);
-  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+  --ds-ring: var(--retro-teal-500);
+  --ds-ring-offset: var(--ds-surface-0);
 
   /* Intents (base) */
-  --ds-ref-info: var(--retro-teal-500);
-  --ds-ref-success: var(--retro-green-600);
-  --ds-ref-warning: var(--retro-orange-500);
-  --ds-ref-danger: var(--retro-red-600);
-  --ds-ref-neutral: var(--retro-brown-600);
+  --ds-info: var(--retro-teal-500);
+  --ds-success: var(--retro-green-600);
+  --ds-warning: var(--retro-orange-500);
+  --ds-danger: var(--retro-red-600);
+  --ds-neutral: var(--retro-brown-600);
 
   /* Intents (states) */
-  --ds-ref-info-hover: var(--retro-teal-600);
-  --ds-ref-info-active: var(--retro-teal-700);
-  --ds-ref-info-subtle: var(--retro-teal-100);
+  --ds-info-hover: var(--retro-teal-600);
+  --ds-info-active: var(--retro-teal-700);
+  --ds-info-subtle: var(--retro-teal-100);
 
-  --ds-ref-success-hover: var(--retro-green-700);
-  --ds-ref-success-active: var(--retro-green-800);
-  --ds-ref-success-subtle: var(--retro-green-100);
+  --ds-success-hover: var(--retro-green-700);
+  --ds-success-active: var(--retro-green-800);
+  --ds-success-subtle: var(--retro-green-100);
 
-  --ds-ref-warning-hover: var(--retro-orange-600);
-  --ds-ref-warning-active: var(--retro-orange-700);
-  --ds-ref-warning-subtle: var(--retro-orange-100);
+  --ds-warning-hover: var(--retro-orange-600);
+  --ds-warning-active: var(--retro-orange-700);
+  --ds-warning-subtle: var(--retro-orange-100);
 
-  --ds-ref-danger-hover: var(--retro-red-700);
-  --ds-ref-danger-active: var(--retro-red-800);
-  --ds-ref-danger-subtle: var(--retro-red-100);
+  --ds-danger-hover: var(--retro-red-700);
+  --ds-danger-active: var(--retro-red-800);
+  --ds-danger-subtle: var(--retro-red-100);
 
-  --ds-ref-neutral-hover: var(--retro-brown-700);
-  --ds-ref-neutral-active: var(--retro-brown-800);
-  --ds-ref-neutral-subtle: var(--retro-brown-100);
+  --ds-neutral-hover: var(--retro-brown-700);
+  --ds-neutral-active: var(--retro-brown-800);
+  --ds-neutral-subtle: var(--retro-brown-100);
 
   /* Disabled */
-  --ds-ref-text-disabled: var(--retro-brown-300);
-  --ds-ref-surface-disabled: var(--retro-yellow-100);
-  --ds-ref-border-disabled: var(--retro-brown-200);
+  --ds-surface-disabled: var(--retro-yellow-100);
 
   /* Skeleton */
-  --ds-ref-skeleton: var(--retro-yellow-100);
-  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
+  --ds-skeleton: var(--retro-yellow-100);
+  --ds-skeleton-highlight: rgba(255, 255, 255, 0.4);
 }

package/src/styles/themes/retro-palette.css

@@ -0,0 +1,85 @@
+:root {
+  --retro-yellow: #faca78;
+  --retro-orange: #f48028;
+  --retro-red: #dd5544;
+  --retro-brown: #7f5344;
+  --retro-teal: #68c7c1;
+  --retro-green: #787c54;
+
+  --retro-gray-50: #f7f7f5;
+  --retro-gray-100: #e3e3dc;
+  --retro-gray-200: #cfcfc5;
+  --retro-gray-300: #b9b9ae;
+  --retro-gray-400: #a3a398;
+  --retro-gray-500: #8d8d82;
+  --retro-gray-600: #717168;
+  --retro-gray-700: #56564f;
+  --retro-gray-800: #3c3c37;
+  --retro-gray-900: #21211e;
+
+  --retro-yellow-50: color-mix(in srgb, var(--retro-yellow) 10%, #ffffff);
+  --retro-yellow-100: color-mix(in srgb, var(--retro-yellow) 20%, #ffffff);
+  --retro-yellow-200: color-mix(in srgb, var(--retro-yellow) 35%, #ffffff);
+  --retro-yellow-300: color-mix(in srgb, var(--retro-yellow) 55%, #ffffff);
+  --retro-yellow-400: color-mix(in srgb, var(--retro-yellow) 75%, #ffffff);
+  --retro-yellow-500: var(--retro-yellow);
+  --retro-yellow-600: color-mix(in srgb, var(--retro-yellow) 85%, #000000);
+  --retro-yellow-700: color-mix(in srgb, var(--retro-yellow) 70%, #000000);
+  --retro-yellow-800: color-mix(in srgb, var(--retro-yellow) 55%, #000000);
+  --retro-yellow-900: color-mix(in srgb, var(--retro-yellow) 40%, #000000);
+
+  --retro-orange-50: color-mix(in srgb, var(--retro-orange) 10%, #ffffff);
+  --retro-orange-100: color-mix(in srgb, var(--retro-orange) 20%, #ffffff);
+  --retro-orange-200: color-mix(in srgb, var(--retro-orange) 35%, #ffffff);
+  --retro-orange-300: color-mix(in srgb, var(--retro-orange) 55%, #ffffff);
+  --retro-orange-400: color-mix(in srgb, var(--retro-orange) 75%, #ffffff);
+  --retro-orange-500: var(--retro-orange);
+  --retro-orange-600: color-mix(in srgb, var(--retro-orange) 85%, #000000);
+  --retro-orange-700: color-mix(in srgb, var(--retro-orange) 70%, #000000);
+  --retro-orange-800: color-mix(in srgb, var(--retro-orange) 55%, #000000);
+  --retro-orange-900: color-mix(in srgb, var(--retro-orange) 40%, #000000);
+
+  --retro-brown-50: color-mix(in srgb, var(--retro-brown) 10%, #ffffff);
+  --retro-brown-100: color-mix(in srgb, var(--retro-brown) 20%, #ffffff);
+  --retro-brown-200: color-mix(in srgb, var(--retro-brown) 35%, #ffffff);
+  --retro-brown-300: color-mix(in srgb, var(--retro-brown) 55%, #ffffff);
+  --retro-brown-400: color-mix(in srgb, var(--retro-brown) 75%, #ffffff);
+  --retro-brown-500: var(--retro-brown);
+  --retro-brown-600: color-mix(in srgb, var(--retro-brown) 85%, #000000);
+  --retro-brown-700: color-mix(in srgb, var(--retro-brown) 70%, #000000);
+  --retro-brown-800: color-mix(in srgb, var(--retro-brown) 55%, #000000);
+  --retro-brown-900: color-mix(in srgb, var(--retro-brown) 40%, #000000);
+
+  --retro-teal-50: color-mix(in srgb, var(--retro-teal) 10%, #ffffff);
+  --retro-teal-100: color-mix(in srgb, var(--retro-teal) 20%, #ffffff);
+  --retro-teal-200: color-mix(in srgb, var(--retro-teal) 35%, #ffffff);
+  --retro-teal-300: color-mix(in srgb, var(--retro-teal) 55%, #ffffff);
+  --retro-teal-400: color-mix(in srgb, var(--retro-teal) 75%, #ffffff);
+  --retro-teal-500: var(--retro-teal);
+  --retro-teal-600: color-mix(in srgb, var(--retro-teal) 85%, #000000);
+  --retro-teal-700: color-mix(in srgb, var(--retro-teal) 70%, #000000);
+  --retro-teal-800: color-mix(in srgb, var(--retro-teal) 55%, #000000);
+  --retro-teal-900: color-mix(in srgb, var(--retro-teal) 40%, #000000);
+
+  --retro-green-50: color-mix(in srgb, var(--retro-green) 10%, #ffffff);
+  --retro-green-100: color-mix(in srgb, var(--retro-green) 20%, #ffffff);
+  --retro-green-200: color-mix(in srgb, var(--retro-green) 35%, #ffffff);
+  --retro-green-300: color-mix(in srgb, var(--retro-green) 55%, #ffffff);
+  --retro-green-400: color-mix(in srgb, var(--retro-green) 75%, #ffffff);
+  --retro-green-500: var(--retro-green);
+  --retro-green-600: color-mix(in srgb, var(--retro-green) 85%, #000000);
+  --retro-green-700: color-mix(in srgb, var(--retro-green) 70%, #000000);
+  --retro-green-800: color-mix(in srgb, var(--retro-green) 55%, #000000);
+  --retro-green-900: color-mix(in srgb, var(--retro-green) 40%, #000000);
+
+  --retro-red-50: color-mix(in srgb, var(--retro-red) 10%, #ffffff);
+  --retro-red-100: color-mix(in srgb, var(--retro-red) 20%, #ffffff);
+  --retro-red-200: color-mix(in srgb, var(--retro-red) 35%, #ffffff);
+  --retro-red-300: color-mix(in srgb, var(--retro-red) 55%, #ffffff);
+  --retro-red-400: color-mix(in srgb, var(--retro-red) 75%, #ffffff);
+  --retro-red-500: var(--retro-red);
+  --retro-red-600: color-mix(in srgb, var(--retro-red) 85%, #000000);
+  --retro-red-700: color-mix(in srgb, var(--retro-red) 70%, #000000);
+  --retro-red-800: color-mix(in srgb, var(--retro-red) 55%, #000000);
+  --retro-red-900: color-mix(in srgb, var(--retro-red) 40%, #000000);
+}