Add tokens to stylesheet

docs/public/static/components-gallery/base-theme.css

@@ -20,6 +20,72 @@
   --grey-700: #434d5b;
   --grey-800: #303740;
   --grey-900: #1c2025;
+
+  --background-surface-light-default: #fff;
+  --background-surface-light-soft: var(--grey-50);
+  --background-surface-light-hard: var(--grey-300);
+  --background-surface-light-highlight: var(--primary-500);
+  --background-surface-light-overlay: rgba(0,0,0,0.3);
+  --background-surface-dark-default: var(--grey-900);
+  --background-surface-dark-soft: var(--grey-800);
+  --background-surface-dark-hard: var(--grey-700);
+  --background-surface-dark-highlight: var(--primary-500);
+  --background-surface-dark-overlay: rgba(0,0,0,0.6);
+
+  --background-interactive-light-button-base: var(--primary-500);
+  --background-interactive-light-button-hover: var(--primary-600);
+  --background-interactive-light-button-active: var(--primary-700);
+  --background-interactive-light-button-disabled: var(--grey-200);
+  --background-interactive-dark-button-base: var(--primary-500);
+  --background-interactive-dark-button-hover: var(--primary-600);
+  --background-interactive-dark-button-active: var(--primary-700);
+  --background-interactive-dark-button-disabled: var(--grey-700);
+
+  --background-interactive-light-input-base: var(--grey-50);
+  --background-interactive-light-input-hover: var(--grey-100);
+  --background-interactive-light-input-active: var(--grey-200);
+  --background-interactive-light-input-disabled: var(--grey-100);
+  --background-interactive-dark-input-base: var(--grey-900);
+  --background-interactive-dark-input-hover: var(--grey-800);
+  --background-interactive-dark-input-active: var(--grey-700);
+  --background-interactive-dark-input-disabled: var(--grey-800);
+
+  --border-light-default: 1px solid var(--grey-200);
+  --border-light-soft: 1px solid var(--grey-300);
+  --border-light-hard: 1px solid var(--grey-500);
+  --border-light-interactive: 1px solid var(--primary-500);
+  --border-light-transparent: 1px solid rgba(0,0,0,0);
+  --border-dark-default: 1px solid var(--grey-700);
+  --border-dark-soft: 1px solid var(--grey-800);
+  --border-dark-hard: 1px solid var(--grey-600);
+  --border-dark-interactive: 1px solid var(--primary-500);
+  --border-dark-transparent: 1px solid rgba(0,0,0,0);
+
+  --shadow-elevation-light-level-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-light-level-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px -1px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-light-level-3: 0px 4px 16px -4px rgba(0, 0, 0, 0.25), 0px 1px 2px -1px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-light-level-4: 0px 8px 32px -4px rgba(0, 0, 0, 0.25), 0px 1px 2px -1px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-dark-level-1: 0px 2px 4px -0.5px rgba(0, 0, 0, 0.40);
+  --shadow-elevation-dark-level-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.30), 0px 2px 4px -0.5px rgba(0, 0, 0, 0.40);
+  --shadow-elevation-dark-level-3: 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
+  --shadow-elevation-dark-level-4: 0px 2px 24px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32);
+
+  --shadow-interactive-light-button: 0px -2px 1px 0px #094651 inset, 0px 1.5px 1px 0px #1F91A5 inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  --shadow-interactive-light-input: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
+  --shadow-interactive-light-switch-track: 0px 1px 1px 0px rgba(0, 0, 0, 0.05) inset;
+  --shadow-interactive-light-switch-thumb: 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+  --shadow-interactive-light-focus-visible: 0px 0px 0px 4px #99DAE5, 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
+  --shadow-interactive-dark-button: 0px -2px 1px 0px #094651 inset, 0px 1.5px 1px 0px #1F91A5 inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.50);
+  --shadow-interactive-dark-input: 0px 2px 2px 0px rgba(0, 0, 0, 0.35);
+  --shadow-interactive-dark-switch-track: 0px 1px 1px 0px rgba(0, 0, 0, 0.35) inset;
+  --shadow-interactive-dark-switch-thumb: 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+  --shadow-interactive-dark-focus-visible: 0px 0px 0px 4px #0D535F, 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
+
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  --border-radius-xl: 24px;
+  --border-radius-full: 999px;
 }
 
 .GalleryBadge {
@@ -50,8 +116,8 @@
   white-space: nowrap;
   text-align: center;
   border-radius: 12px;
-  background: var(--primary-500);
-  box-shadow: 0px 4px 8px var(--GalleryBadge-badge-boxShadow-color, var(--grey-300));
+  background: var(--background-surface-light-highlight);
+  box-shadow: var(--GalleryBadge-badge-boxShadow-color, var(--shadow-elevation-light-level-2));
   transform: translate(50%, -50%);
   transform-origin: 100% 0;
 }
@@ -60,15 +126,15 @@
   width: 40px;
   height: 40px;
   border-radius: 12px;
-  background: var(--GalleryBadge-content-background-color, var(--grey-300));
+  background: var(--GalleryBadge-content-background-color, var(--background-surface-light-hard));
   display: inline-block;
   vertical-align: middle;
 }
 
 @media (prefers-color-scheme: dark) {
   .GalleryBadge {
-    --GalleryBadge-badge-boxShadow-color: var(--grey-900);
-    --GalleryBadge-content-background-color: var(--grey-400);
+    --GalleryBadge-badge-boxShadow-color: var(--shadow-elevation-dark-level-2);
+    --GalleryBadge-content-background-color: var(--background-surface-dark-hard);
   }
 }