@pgcorp/ui-kit 0.1.0

package/src/styles/tokens.css

@@ -0,0 +1,836 @@
+@theme {
+  --font-sans:
+    "IBM Plex Sans",
+    "Segoe UI",
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  --font-mono:
+    "IBM Plex Mono",
+    "SFMono-Regular",
+    Consolas,
+    "Liberation Mono",
+    monospace;
+
+  --radius-xs: 0.375rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14);
+  --shadow-xl: 0 30px 80px rgba(15, 23, 42, 0.18);
+
+  --color-primary: #3b82f6;
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  --color-primary-950: #172554;
+  --color-primary-contrast: #ffffff;
+
+  --color-surface-0: #ffffff;
+  --color-surface-50: #f8fafc;
+  --color-surface-100: #f1f5f9;
+  --color-surface-200: #e2e8f0;
+  --color-surface-300: #cbd5e1;
+  --color-surface-400: #94a3b8;
+  --color-surface-500: #64748b;
+  --color-surface-600: #475569;
+  --color-surface-700: #334155;
+  --color-surface-800: #1e293b;
+  --color-surface-850: #172033;
+  --color-surface-900: #0f172a;
+  --color-surface-950: #020617;
+
+  --color-success: #22c55e;
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+  --color-success-950: #052e16;
+
+  --color-info: #3b82f6;
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e40af;
+  --color-info-900: #1e3a8a;
+  --color-info-950: #172554;
+
+  --color-warn: #f97316;
+  --color-warn-50: #fff7ed;
+  --color-warn-100: #ffedd5;
+  --color-warn-200: #fed7aa;
+  --color-warn-300: #fdba74;
+  --color-warn-400: #fb923c;
+  --color-warn-500: #f97316;
+  --color-warn-600: #ea580c;
+  --color-warn-700: #c2410c;
+  --color-warn-800: #9a3412;
+  --color-warn-900: #7c2d12;
+  --color-warn-950: #431407;
+
+  --color-danger: #ef4444;
+  --color-danger-50: #fef2f2;
+  --color-danger-100: #fee2e2;
+  --color-danger-200: #fecaca;
+  --color-danger-300: #fca5a5;
+  --color-danger-400: #f87171;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-danger-700: #b91c1c;
+  --color-danger-800: #991b1b;
+  --color-danger-900: #7f1d1d;
+  --color-danger-950: #450a0a;
+}
+
+:root {
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+
+  /* Semantic interaction geometry */
+  --s-control-hitbox-xs: 1.5rem;
+  --s-control-hitbox-sm: 1.75rem;
+  --s-control-hitbox-md: 2.5rem;
+  --s-control-hitbox-lg: 3rem;
+  --s-control-indicator-size: 1.25rem;
+  --s-icon-size-2xs: 0.75rem;
+  --s-icon-size-xs: 1rem;
+  --s-icon-size-sm: 1.25rem;
+  --s-icon-size-md: 1.5rem;
+  --s-icon-size-lg: 2rem;
+
+  /* Semantic focus geometry */
+  --s-focus-ring-width: 2px;
+  --s-focus-ring-offset: 2px;
+  --s-focus-ring-inset-offset: -2px;
+  --s-focus-ring-color: var(--color-primary);
+  --s-focus-ring-strong-color: var(--color-primary-500);
+  --s-selection-invalid-outline-color: var(--color-danger-600);
+
+  /* Shared field-surface foundation */
+  --s-field-surface: var(--color-surface);
+  --s-field-surface-hover: var(--color-surface-muted);
+  --s-field-foreground: var(--color-text);
+  --s-field-placeholder-foreground: var(--color-text-muted);
+  --s-field-border: var(--color-border);
+  --s-field-border-focus: var(--s-focus-ring-strong-color);
+  --s-field-disabled-surface: var(--color-surface-muted);
+  --s-field-disabled-foreground: var(--color-text-muted);
+  --s-field-disabled-border: var(--color-border-subtle);
+  --s-field-invalid-border: var(--s-selection-invalid-outline-color);
+  --s-field-radius: var(--radius-md);
+  --s-field-shadow: var(--s-elevation-control);
+
+  /* Semantic density and spacing */
+  --s-density-row-compact: 2rem;
+  --s-density-row-default: 2.5rem;
+  --s-density-row-comfortable: 3rem;
+  --s-space-control-gap: 0.5rem;
+  --s-space-content-gap: 0.75rem;
+  --s-space-section-gap: 1rem;
+  --s-space-panel-gap: 1.5rem;
+
+  /* Semantic navigation surfaces */
+  --s-tab-overflow-mask-opaque: #000000;
+  --s-wizard-steps-surface: color-mix(in srgb, var(--color-surface-secondary) 86%, transparent);
+  --s-wizard-steps-padding: var(--s-space-control-gap);
+  --s-wizard-step-min-inline-size: 10rem;
+  --s-wizard-step-marker-size: var(--s-control-indicator-size);
+  --s-wizard-step-marker-border-width: 1px;
+  --s-wizard-step-marker-font-size: 0.75rem;
+
+  /* Semantic chrome surfaces */
+  --s-cloud-chrome-surface: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-surface) 82%, transparent) 0%,
+    color-mix(in srgb, var(--color-surface-muted) 70%, transparent) 100%
+  );
+  --s-cloud-chrome-hidden-surface: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-surface-muted) 76%, transparent) 0%,
+    color-mix(in srgb, var(--color-surface-secondary) 60%, transparent) 100%
+  );
+  --s-cloud-chrome-border: color-mix(in srgb, var(--color-border) 72%, transparent);
+  --s-cloud-chrome-hidden-border: color-mix(in srgb, var(--color-border-hover) 38%, transparent);
+  --s-cloud-chrome-shadow: var(--shadow-md);
+  --s-cloud-chrome-drag-shadow: var(--shadow-lg);
+  --s-cloud-chrome-row-surface: color-mix(in srgb, var(--color-surface) 62%, transparent);
+  --s-cloud-chrome-row-drag-surface: color-mix(in srgb, var(--color-surface) 86%, transparent);
+  --s-cloud-chrome-row-border: color-mix(in srgb, var(--color-border) 64%, transparent);
+  --s-cloud-chrome-row-divider: color-mix(in srgb, var(--color-border-hover) 22%, transparent);
+  --s-cloud-chrome-row-edge-divider: transparent;
+  --s-cloud-chrome-row-height: var(--s-density-row-default);
+  --s-cloud-chrome-drop-surface: color-mix(in srgb, var(--color-success-500) 9%, transparent);
+  --s-cloud-chrome-drop-border: color-mix(in srgb, var(--color-success-500) 42%, transparent);
+  --s-cloud-chrome-radius: var(--radius-xl);
+  --s-cloud-chrome-row-radius: var(--radius-lg);
+  --s-cloud-chrome-row-focus-shadow:
+    0 0 0 var(--s-focus-ring-width) color-mix(in srgb, var(--color-primary-500) 35%, transparent);
+  --s-cloud-chrome-empty-border-radius: var(--s-cloud-chrome-row-radius);
+  --s-cloud-chrome-empty-border-width: 1px;
+  --s-cloud-chrome-empty-border: var(--color-border-hover);
+  --s-cloud-chrome-empty-background: initial;
+  --s-cloud-chrome-backdrop-filter: blur(1.375rem) saturate(132%);
+  --s-app-shell-floating-shadow: var(--shadow-lg);
+  --s-app-shell-floating-radius: calc(var(--radius-xl) + 0.3rem);
+  --s-app-brand-icon-size: var(--s-control-hitbox-lg);
+  --s-app-brand-icon-radius: var(--radius-lg);
+  --s-code-search-panel-radius: var(--radius-xl);
+  --s-code-search-panel-shadow: var(--shadow-lg);
+  --s-code-search-panel-backdrop-filter: blur(0.875rem);
+  --s-radius-pill: 9999px;
+
+  /* Domain-specific semantic viewport geometry */
+  --s-scroll-viewport-max-block-size-sm: 12rem;
+  --s-scroll-viewport-max-block-size-md: 18rem;
+  --s-scroll-viewport-max-block-size-lg: 24rem;
+  --s-expanded-content-max-block-size-sm: 16rem;
+  --s-expanded-content-max-block-size-md: 24rem;
+  --s-expanded-content-max-block-size-lg: 28rem;
+  --s-table-inline-size-md: 32rem;
+  --s-table-inline-size-lg: 42rem;
+  --s-table-column-inline-size-xs: 6rem;
+  --s-table-column-inline-size-sm: 9rem;
+  --s-table-column-inline-size-md: 12rem;
+  --s-table-column-inline-size-lg: 16rem;
+  --s-table-column-inline-size-xl: 22rem;
+  --s-menu-inline-size-min: 12rem;
+  --s-menu-inline-size-max: min(24rem, calc(100vw - 1rem));
+  --s-menu-surface-width: auto;
+  --s-menu-surface-min-width: var(--s-menu-inline-size-min);
+  --s-menu-surface-max-width: var(--s-menu-inline-size-max);
+  --s-menu-item-inline-padding: 0.75rem;
+  --s-menu-item-inline-padding-compact: 0.5rem;
+  --s-menu-item-block-padding: 0.5rem;
+  --s-menu-item-block-padding-compact: 0.375rem;
+
+  /* Semantic feedback surfaces */
+  --s-feedback-surface: color-mix(in srgb, var(--color-surface) 88%, transparent);
+  --s-feedback-backdrop-blur: 1.5rem;
+  --s-floating-surface: var(--color-surface);
+  --s-floating-foreground: var(--color-text);
+  --s-floating-outline: color-mix(in srgb, var(--color-border) 44%, transparent);
+  --s-overlay-backdrop-surface: color-mix(in srgb, var(--color-surface-950) 42%, transparent);
+  --s-section-divider: var(--color-border-subtle);
+  --s-json-tree-surface: color-mix(in srgb, var(--color-surface-muted) 72%, transparent);
+  --s-json-tree-key-foreground: var(--color-warn-700);
+  --s-json-tree-value-foreground: var(--color-text);
+  --s-toast-shadow-info:
+    inset 0 1px 0 color-mix(in srgb, var(--color-surface-0) 40%, transparent),
+    0 18px 40px color-mix(in srgb, var(--color-info-500) 16%, transparent);
+  --s-toast-shadow-success:
+    inset 0 1px 0 color-mix(in srgb, var(--color-surface-0) 40%, transparent),
+    0 18px 40px color-mix(in srgb, var(--color-success-500) 16%, transparent);
+  --s-toast-shadow-warn:
+    inset 0 1px 0 color-mix(in srgb, var(--color-surface-0) 40%, transparent),
+    0 18px 40px color-mix(in srgb, var(--color-warn-500) 16%, transparent);
+  --s-toast-shadow-danger:
+    inset 0 1px 0 color-mix(in srgb, var(--color-surface-0) 40%, transparent),
+    0 18px 40px color-mix(in srgb, var(--color-danger-500) 18%, transparent);
+
+  /* Semantic motion */
+  --s-motion-instant: 75ms;
+  --s-motion-fast: 150ms;
+  --s-motion-standard: 200ms;
+  --s-motion-deliberate: 300ms;
+
+  /* Semantic CodeMirror viewport and generated-surface palette */
+  --s-code-editor-viewport-content-max: 50vh;
+  --s-code-editor-viewport-compact: 12rem;
+  --s-code-editor-viewport-standard: 20rem;
+  --s-code-editor-viewport-expanded: 32rem;
+  --s-code-editor-search-match-background: rgb(99 102 241 / 22%);
+  --s-code-editor-search-match-selected-background: rgb(16 185 129 / 35%);
+  --s-code-editor-search-match-selected-outline: rgb(16 185 129 / 55%);
+
+  /* Sanitized document presentation */
+  --s-document-code-surface: var(--color-surface-muted);
+  --s-document-code-foreground: var(--color-text);
+  --s-document-code-border: var(--color-border-subtle);
+  --s-document-code-radius: var(--radius-xs);
+  --s-document-code-inline-padding: 0.15rem 0.4rem;
+  --s-document-code-block-padding: 0.75rem 0.875rem;
+  --s-document-code-font-size: 0.85rem;
+
+  /* Semantic graph runtime and surface contract */
+  --s-graph-node-default-color: var(--color-surface-500);
+  --s-graph-edge-default-color: var(--color-surface-400);
+  --s-graph-label-color: var(--color-text);
+  --s-graph-label-font-family: var(--font-sans);
+  --s-graph-label-font-size: 12px;
+  --s-graph-label-font-weight: 650;
+  --s-graph-label-density: 0.07;
+  --s-graph-label-grid-cell-size: 180px;
+  --s-graph-label-rendered-size-threshold: 9px;
+  --s-graph-min-edge-thickness: 0.35px;
+  --s-graph-stage-padding: 24px;
+  --s-graph-camera-duration: var(--s-motion-standard);
+  --s-graph-camera-reset-duration: var(--s-motion-deliberate);
+  --s-graph-error-inset: 1rem;
+  --s-graph-error-border-width: 1px;
+  --s-graph-error-border: color-mix(in srgb, var(--color-danger-600) 24%, transparent);
+  --s-graph-error-radius: var(--radius-sm);
+  --s-graph-error-background: color-mix(in srgb, var(--color-surface) 88%, transparent);
+  --s-graph-error-color: var(--color-danger-900);
+  --s-graph-error-font-size: 0.8125rem;
+  --s-graph-error-font-weight: 700;
+  --s-graph-error-line-height: 1.35;
+  --s-graph-error-padding: 1.125rem;
+  --s-graph-surface-border-width: 1px;
+  --s-graph-surface-radius: var(--radius-sm);
+  --s-graph-grid-layer: 0;
+  --s-graph-renderer-layer: 1;
+  --s-graph-error-layer: 2;
+  --s-graph-inventory-layer: 3;
+  --s-graph-grid-background-position: 0 0, 0.875rem 1.25rem;
+  --s-graph-grid-background-size: 2.125rem 2.125rem, 3.25rem 3.25rem;
+  --s-graph-grid-opacity: 0.5;
+  --s-graph-inventory-offset: 0.75rem;
+  --s-graph-inventory-inline-size: 20rem;
+  --s-graph-inventory-border-width: 1px;
+  --s-graph-inventory-radius: var(--radius-sm);
+  --s-graph-inventory-padding: 0.5rem;
+  --s-graph-inventory-reveal-distance: 0.5rem;
+  --s-graph-inventory-shadow: var(--shadow-lg);
+
+  /* Semantic elevation */
+  --s-layer-content: 1;
+  --s-layer-focused-control: 1;
+  --s-layer-sticky: 10;
+  --s-layer-affordance: 20;
+  --s-layer-status: 25;
+  --s-layer-floating: 40;
+  --s-layer-toast: 50;
+  --s-layer-navigation: 50;
+  --s-layer-navigation-submenu: 49;
+  --s-layer-drag: 10000;
+  --s-layer-overlay-backdrop: 11000;
+  --s-layer-overlay-surface-offset: 10;
+  --s-layer-overlay-step: 20;
+  --s-layer-overlay-surface: calc(var(--s-layer-overlay-backdrop) + var(--s-layer-overlay-surface-offset));
+  --s-overlay-backdrop-blur: 2px;
+  --s-elevation-control: var(--shadow-sm);
+  --s-elevation-floating: var(--shadow-lg);
+  --s-elevation-overlay: var(--shadow-xl);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --s-motion-instant: 1ms;
+    --s-motion-fast: 1ms;
+    --s-motion-standard: 1ms;
+    --s-motion-deliberate: 1ms;
+    --s-graph-camera-duration: var(--s-motion-standard);
+    --s-graph-camera-reset-duration: var(--s-motion-deliberate);
+  }
+}
+
+:root,
+:root[data-theme="light"] {
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-soft: var(--color-primary-100);
+  --color-primary-ring: rgba(37, 99, 235, 0.24);
+
+  --color-bg: var(--color-surface-50);
+  --color-surface: var(--color-surface-0);
+  --color-surface-muted: var(--color-surface-100);
+  --color-surface-secondary: var(--color-surface-100);
+
+  --color-border-subtle: var(--color-surface-200);
+  --color-border: var(--color-surface-300);
+  --color-border-hover: var(--color-surface-400);
+
+  --color-text: var(--color-surface-900);
+  --color-text-muted: var(--color-surface-500);
+  --color-text-mute: var(--color-text-muted);
+  --color-text-secondary: var(--color-text-muted);
+  --color-text-on-primary: var(--color-primary-contrast);
+
+  --color-icon-primary: currentColor;
+  --color-icon-accent-theme: var(--color-primary-600);
+  --color-icon-accent: var(--color-icon-accent-theme);
+
+  --color-warning: var(--color-warn-500);
+}
+
+:root[data-theme="pink-light"] {
+  --color-primary: #f664af;
+  --color-primary-50: #fff1f7;
+  --color-primary-100: #ffd9ea;
+  --color-primary-200: #ffb0d3;
+  --color-primary-300: #ff7db7;
+  --color-primary-400: #f664af;
+  --color-primary-500: #f34a9e;
+  --color-primary-600: #dc2c84;
+  --color-primary-700: #b81f69;
+  --color-primary-800: #941d56;
+  --color-primary-900: #7b1d4b;
+  --color-primary-950: #490a29;
+  --color-primary-contrast: #ffffff;
+
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-soft: color-mix(in srgb, var(--color-primary-500) 10%, white);
+  --color-primary-ring: rgba(246, 100, 175, 0.26);
+
+  --color-bg: #fff6fb;
+  --color-surface: #fffafe;
+  --color-surface-muted: #fff1f7;
+  --color-surface-secondary: #ffeaf3;
+
+  --color-border-subtle: #f6d8e5;
+  --color-border: #efbfd4;
+  --color-border-hover: #df8fb1;
+
+  --color-text: #4a1735;
+  --color-text-muted: #8b5b73;
+  --color-text-mute: var(--color-text-muted);
+  --color-text-secondary: var(--color-text-muted);
+  --color-text-on-primary: var(--color-primary-contrast);
+
+  --color-icon-primary: currentColor;
+  --color-icon-accent-theme: var(--color-primary-600);
+  --color-icon-accent: var(--color-icon-accent-theme);
+
+  --color-warning: var(--color-warn-500);
+}
+
+:root[data-theme="green-light"] {
+  --color-primary: #21a038;
+  --color-primary-50: #eefbf3;
+  --color-primary-100: #d8f4df;
+  --color-primary-200: #b5e8c2;
+  --color-primary-300: #7dd691;
+  --color-primary-400: #49bf64;
+  --color-primary-500: #21a038;
+  --color-primary-600: #19872f;
+  --color-primary-700: #166d29;
+  --color-primary-800: #155724;
+  --color-primary-900: #12461e;
+  --color-primary-950: #06280e;
+  --color-primary-contrast: #ffffff;
+
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-soft: color-mix(in srgb, var(--color-primary-500) 10%, white);
+  --color-primary-ring: rgba(33, 160, 56, 0.24);
+
+  --color-bg: #f5fbf6;
+  --color-surface: #fbfefc;
+  --color-surface-muted: #edf7ef;
+  --color-surface-secondary: #e7f3e9;
+
+  --color-border-subtle: #d8e7dc;
+  --color-border: #bed7c4;
+  --color-border-hover: #87b593;
+
+  --color-text: #17311e;
+  --color-text-muted: #5a7663;
+  --color-text-mute: var(--color-text-muted);
+  --color-text-secondary: var(--color-text-muted);
+  --color-text-on-primary: var(--color-primary-contrast);
+
+  --color-icon-primary: currentColor;
+  --color-icon-accent-theme: var(--color-primary-600);
+  --color-icon-accent: var(--color-icon-accent-theme);
+
+  --color-warning: var(--color-warn-500);
+}
+
+:root[data-theme="dark"] {
+  --color-primary-hover: var(--color-primary-300);
+  --color-primary-soft: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
+  --color-primary-ring: rgba(96, 165, 250, 0.26);
+
+  --color-bg: var(--color-surface-950);
+  --color-surface: var(--color-surface-900);
+  --color-surface-muted: var(--color-surface-850);
+  --color-surface-secondary: var(--color-surface-850);
+
+  --color-border-subtle: var(--color-surface-700);
+  --color-border: var(--color-surface-600);
+  --color-border-hover: var(--color-surface-500);
+
+  --color-text: #e5e7eb;
+  --color-text-muted: #9ca3af;
+  --color-text-mute: var(--color-text-muted);
+  --color-text-secondary: var(--color-text-muted);
+  --color-text-on-primary: #0b1120;
+
+  --color-icon-primary: currentColor;
+  --color-icon-accent-theme: var(--color-primary-400);
+  --color-icon-accent: var(--color-icon-accent-theme);
+
+  --color-warning: var(--color-warn-400);
+}
+
+:root[data-theme="pink-dark"] {
+  --color-primary: #f664af;
+  --color-primary-50: #fff1f7;
+  --color-primary-100: #ffd9ea;
+  --color-primary-200: #ffb0d3;
+  --color-primary-300: #ff7db7;
+  --color-primary-400: #f664af;
+  --color-primary-500: #f34a9e;
+  --color-primary-600: #dc2c84;
+  --color-primary-700: #b81f69;
+  --color-primary-800: #941d56;
+  --color-primary-900: #7b1d4b;
+  --color-primary-950: #490a29;
+  --color-primary-contrast: #1f1020;
+
+  --color-primary-hover: var(--color-primary-300);
+  --color-primary-soft: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
+  --color-primary-ring: rgba(246, 100, 175, 0.28);
+
+  --color-bg: var(--color-surface-950);
+  --color-surface: var(--color-surface-900);
+  --color-surface-muted: var(--color-surface-850);
+  --color-surface-secondary: var(--color-surface-850);
+
+  --color-border-subtle: var(--color-surface-700);
+  --color-border: var(--color-surface-600);
+  --color-border-hover: var(--color-surface-500);
+
+  --color-text: #e5e7eb;
+  --color-text-muted: #9ca3af;
+  --color-text-mute: var(--color-text-muted);
+  --color-text-secondary: var(--color-text-muted);
+  --color-text-on-primary: var(--color-primary-contrast);
+
+  --color-icon-primary: currentColor;
+  --color-icon-accent-theme: var(--color-primary-400);
+  --color-icon-accent: var(--color-icon-accent-theme);
+
+  --color-warning: var(--color-warn-400);
+}
+
+:root[data-theme="green-dark"] {
+  --color-primary: #21a038;
+  --color-primary-50: #eefbf3;
+  --color-primary-100: #d8f4df;
+  --color-primary-200: #b5e8c2;
+  --color-primary-300: #7dd691;
+  --color-primary-400: #49bf64;
+  --color-primary-500: #21a038;
+  --color-primary-600: #19872f;
+  --color-primary-700: #166d29;
+  --color-primary-800: #155724;
+  --color-primary-900: #12461e;
+  --color-primary-950: #06280e;
+  --color-primary-contrast: #04120b;
+
+  --color-primary-hover: var(--color-primary-300);
+  --color-primary-soft: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
+  --color-primary-ring: rgba(125, 214, 145, 0.28);
+
+  --color-bg: #04120b;
+  --color-surface: #091a12;
+  --color-surface-muted: #0e2318;
+  --color-surface-secondary: #10281c;
+
+  --color-border-subtle: #1c4130;
+  --color-border: #275a41;
+  --color-border-hover: #36805b;
+
+  --color-text: #e7f5eb;
+  --color-text-muted: #8fada0;
+  --color-text-mute: var(--color-text-muted);
+  --color-text-secondary: var(--color-text-muted);
+  --color-text-on-primary: var(--color-primary-contrast);
+
+  --color-icon-primary: currentColor;
+  --color-icon-accent-theme: var(--color-primary-300);
+  --color-icon-accent: var(--color-icon-accent-theme);
+
+  --color-warning: var(--color-warn-400);
+}
+
+:root[data-sputnig-icon-color-mode="monochrome"] {
+  --color-icon-accent: var(--color-icon-primary);
+}
+
+:root[data-sputnig-icon-color-mode="duotone"] {
+  --color-icon-accent: var(--color-icon-accent-theme);
+}
+
+:root,
+:root[data-theme="light"],
+:root[data-theme="pink-light"],
+:root[data-theme="green-light"] {
+  --s-menu-item-foreground: var(--color-surface-700);
+  --s-menu-item-secondary-foreground: var(--color-text-muted);
+  --s-menu-item-state-background: var(--color-primary-50);
+  --s-menu-item-state-foreground: var(--color-primary-700);
+  --s-menu-item-indicator-foreground: var(--color-primary-600);
+  --s-menu-item-disabled-foreground: var(--color-surface-400);
+
+  --s-cloud-chrome-foreground: var(--color-surface-700);
+  --s-cloud-chrome-title-foreground: var(--color-surface-600);
+  --s-cloud-chrome-description-foreground: var(--color-surface-500);
+
+  --s-progress-bar-track-surface: var(--color-surface-200);
+  --s-progress-bar-label-foreground: var(--color-surface-0);
+  --s-progress-bar-fill-primary: var(--color-primary-500);
+  --s-progress-bar-fill-success: var(--color-success-500);
+  --s-progress-bar-fill-info: var(--color-info-500);
+  --s-progress-bar-fill-warn: var(--color-warn-500);
+  --s-progress-bar-fill-danger: var(--color-danger-500);
+  --s-progress-bar-fill-neutral: var(--color-surface-400);
+  --s-progress-bar-indeterminate-neutral-fill: var(--color-surface-500);
+
+  --s-progress-indicator-foreground-neutral: var(--color-text-muted);
+  --s-progress-indicator-foreground-info: var(--color-info-600);
+  --s-progress-indicator-foreground-success: var(--color-success-600);
+  --s-progress-indicator-foreground-warn: var(--color-warn-600);
+  --s-progress-indicator-foreground-danger: var(--color-danger-600);
+
+  --s-graph-node-tone-neutral-fill: var(--color-surface-50);
+  --s-graph-node-tone-neutral-border: var(--color-surface-500);
+  --s-graph-node-tone-neutral-label: var(--color-surface-900);
+  --s-graph-node-tone-primary-fill: var(--color-primary-100);
+  --s-graph-node-tone-primary-border: var(--color-primary-600);
+  --s-graph-node-tone-primary-label: var(--color-primary-900);
+  --s-graph-node-tone-info-fill: var(--color-info-100);
+  --s-graph-node-tone-info-border: var(--color-info-600);
+  --s-graph-node-tone-info-label: var(--color-info-900);
+  --s-graph-node-tone-success-fill: var(--color-success-100);
+  --s-graph-node-tone-success-border: var(--color-success-600);
+  --s-graph-node-tone-success-label: var(--color-success-900);
+  --s-graph-node-tone-warning-fill: var(--color-warn-100);
+  --s-graph-node-tone-warning-border: var(--color-warn-600);
+  --s-graph-node-tone-warning-label: var(--color-warn-900);
+  --s-graph-node-tone-danger-fill: var(--color-danger-100);
+  --s-graph-node-tone-danger-border: var(--color-danger-600);
+  --s-graph-node-tone-danger-label: var(--color-danger-900);
+  --s-graph-node-tone-accent-fill: #f3e8ff;
+  --s-graph-node-tone-accent-border: #9333ea;
+  --s-graph-node-tone-accent-label: #581c87;
+  --s-graph-edge-tone-neutral: var(--color-surface-500);
+  --s-graph-edge-tone-primary: var(--color-primary-600);
+  --s-graph-edge-tone-info: var(--color-info-500);
+  --s-graph-edge-tone-success: var(--color-success-600);
+  --s-graph-edge-tone-warning: var(--color-warn-500);
+  --s-graph-edge-tone-danger: var(--color-danger-600);
+  --s-graph-edge-tone-accent: #9333ea;
+  --s-graph-surface-border: var(--color-border);
+  --s-graph-surface-background:
+    radial-gradient(circle at 18% 18%, rgb(148 163 184 / 18%), transparent 24%),
+    radial-gradient(circle at 80% 22%, rgb(59 130 246 / 12%), transparent 20%),
+    radial-gradient(circle at 72% 78%, rgb(20 184 166 / 10%), transparent 26%),
+    linear-gradient(160deg, var(--color-surface-50) 0%, var(--color-primary-50) 46%, var(--color-surface-50) 100%);
+  --s-graph-grid-background-image:
+    radial-gradient(circle, rgb(15 23 42 / 10%) 0 1px, transparent 1.4px),
+    radial-gradient(circle, rgb(37 99 235 / 12%) 0 1px, transparent 1.4px);
+  --s-graph-inventory-border: var(--color-border);
+  --s-graph-inventory-background: var(--color-surface);
+
+  --s-button-primary-accent: var(--color-primary-500);
+  --s-button-primary-foreground: var(--color-primary-700);
+  --s-button-primary-solid-background: var(--color-primary-600);
+  --s-button-primary-solid-background-hover: var(--color-primary-700);
+  --s-button-primary-solid-background-active: var(--color-primary-800);
+  --s-button-primary-solid-foreground: var(--color-primary-contrast);
+
+  --s-button-secondary-accent: var(--color-surface-500);
+  --s-button-secondary-foreground: var(--color-surface-800);
+  --s-button-secondary-solid-background: var(--color-surface-100);
+  --s-button-secondary-solid-background-hover: var(--color-surface-200);
+  --s-button-secondary-solid-background-active: var(--color-surface-300);
+  --s-button-secondary-solid-foreground: var(--color-surface-800);
+
+  --s-button-success-accent: var(--color-success-500);
+  --s-button-success-foreground: var(--color-success-800);
+  --s-button-success-solid-background: var(--color-success-700);
+  --s-button-success-solid-background-hover: var(--color-success-800);
+  --s-button-success-solid-background-active: var(--color-success-900);
+  --s-button-success-solid-foreground: #ffffff;
+
+  --s-button-info-accent: var(--color-info-500);
+  --s-button-info-foreground: var(--color-info-700);
+  --s-button-info-solid-background: var(--color-info-600);
+  --s-button-info-solid-background-hover: var(--color-info-700);
+  --s-button-info-solid-background-active: var(--color-info-800);
+  --s-button-info-solid-foreground: #ffffff;
+
+  --s-button-warn-accent: var(--color-warn-500);
+  --s-button-warn-foreground: var(--color-warn-800);
+  --s-button-warn-solid-background: var(--color-warn-700);
+  --s-button-warn-solid-background-hover: var(--color-warn-800);
+  --s-button-warn-solid-background-active: var(--color-warn-900);
+  --s-button-warn-solid-foreground: #ffffff;
+
+  --s-button-danger-accent: var(--color-danger-500);
+  --s-button-danger-foreground: var(--color-danger-700);
+  --s-button-danger-solid-background: var(--color-danger-600);
+  --s-button-danger-solid-background-hover: var(--color-danger-700);
+  --s-button-danger-solid-background-active: var(--color-danger-800);
+  --s-button-danger-solid-foreground: #ffffff;
+
+  --s-button-contrast-accent: var(--color-surface-700);
+  --s-button-contrast-foreground: var(--color-surface-800);
+  --s-button-contrast-solid-background: var(--color-surface-800);
+  --s-button-contrast-solid-background-hover: var(--color-surface-900);
+  --s-button-contrast-solid-background-active: var(--color-surface-950);
+  --s-button-contrast-solid-foreground: #ffffff;
+
+  --s-button-disabled-background: var(--color-surface-200);
+  --s-button-disabled-foreground: var(--color-surface-600);
+}
+
+:root[data-theme="pink-light"] {
+  --s-button-primary-foreground: var(--color-primary-800);
+  --s-button-primary-solid-background: var(--color-primary-700);
+  --s-button-primary-solid-background-hover: var(--color-primary-800);
+  --s-button-primary-solid-background-active: var(--color-primary-900);
+}
+
+:root[data-theme="dark"],
+:root[data-theme="pink-dark"],
+:root[data-theme="green-dark"],
+.dark {
+  --s-field-disabled-foreground: var(--color-surface-300);
+
+  --s-menu-item-foreground: var(--color-surface-200);
+  --s-menu-item-secondary-foreground: var(--color-text-muted);
+  --s-menu-item-state-background: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
+  --s-menu-item-state-foreground: var(--color-primary-300);
+  --s-menu-item-indicator-foreground: var(--color-primary-300);
+  --s-menu-item-disabled-foreground: var(--color-surface-600);
+
+  --s-json-tree-key-foreground: var(--color-warn-300);
+  --s-wizard-steps-surface: color-mix(in srgb, var(--color-surface) 74%, transparent);
+  --s-cloud-chrome-foreground: var(--color-surface-200);
+  --s-cloud-chrome-title-foreground: var(--color-surface-300);
+  --s-cloud-chrome-description-foreground: var(--color-surface-400);
+
+  --s-progress-bar-track-surface: var(--color-surface-700);
+  --s-progress-bar-label-foreground: var(--color-surface-0);
+  --s-progress-bar-fill-primary: var(--color-primary-500);
+  --s-progress-bar-fill-success: var(--color-success-500);
+  --s-progress-bar-fill-info: var(--color-info-500);
+  --s-progress-bar-fill-warn: var(--color-warn-500);
+  --s-progress-bar-fill-danger: var(--color-danger-500);
+  --s-progress-bar-fill-neutral: var(--color-surface-500);
+  --s-progress-bar-indeterminate-neutral-fill: var(--color-surface-500);
+
+  --s-progress-indicator-foreground-neutral: var(--color-text-muted);
+  --s-progress-indicator-foreground-info: var(--color-info-300);
+  --s-progress-indicator-foreground-success: var(--color-success-300);
+  --s-progress-indicator-foreground-warn: var(--color-warn-300);
+  --s-progress-indicator-foreground-danger: var(--color-danger-300);
+
+  --s-graph-node-tone-neutral-fill: var(--color-surface-700);
+  --s-graph-node-tone-neutral-border: var(--color-surface-300);
+  --s-graph-node-tone-neutral-label: var(--color-surface-50);
+  --s-graph-node-tone-primary-fill: var(--color-primary-700);
+  --s-graph-node-tone-primary-border: var(--color-primary-300);
+  --s-graph-node-tone-primary-label: var(--color-surface-50);
+  --s-graph-node-tone-info-fill: var(--color-info-700);
+  --s-graph-node-tone-info-border: var(--color-info-300);
+  --s-graph-node-tone-info-label: var(--color-surface-50);
+  --s-graph-node-tone-success-fill: var(--color-success-700);
+  --s-graph-node-tone-success-border: var(--color-success-300);
+  --s-graph-node-tone-success-label: var(--color-surface-50);
+  --s-graph-node-tone-warning-fill: var(--color-warn-700);
+  --s-graph-node-tone-warning-border: var(--color-warn-300);
+  --s-graph-node-tone-warning-label: var(--color-surface-50);
+  --s-graph-node-tone-danger-fill: var(--color-danger-700);
+  --s-graph-node-tone-danger-border: var(--color-danger-300);
+  --s-graph-node-tone-danger-label: var(--color-surface-50);
+  --s-graph-node-tone-accent-fill: #6b21a8;
+  --s-graph-node-tone-accent-border: #d8b4fe;
+  --s-graph-node-tone-accent-label: #faf5ff;
+  --s-graph-edge-tone-neutral: var(--color-surface-300);
+  --s-graph-edge-tone-primary: var(--color-primary-300);
+  --s-graph-edge-tone-info: var(--color-info-300);
+  --s-graph-edge-tone-success: var(--color-success-300);
+  --s-graph-edge-tone-warning: var(--color-warn-300);
+  --s-graph-edge-tone-danger: var(--color-danger-300);
+  --s-graph-edge-tone-accent: #d8b4fe;
+  --s-graph-surface-border: var(--color-border);
+  --s-graph-surface-background:
+    radial-gradient(circle at 18% 18%, rgb(129 146 180 / 18%), transparent 24%),
+    radial-gradient(circle at 80% 22%, rgb(141 162 251 / 20%), transparent 20%),
+    radial-gradient(circle at 72% 78%, rgb(56 189 248 / 18%), transparent 26%),
+    linear-gradient(160deg, var(--color-surface-950) 0%, var(--color-surface) 46%, var(--color-surface-muted) 100%);
+  --s-graph-grid-background-image:
+    radial-gradient(circle, rgb(255 255 255 / 16%) 0 1px, transparent 1.4px),
+    radial-gradient(circle, rgb(141 162 251 / 14%) 0 1px, transparent 1.4px);
+  --s-graph-inventory-border: var(--color-border);
+  --s-graph-inventory-background: var(--color-surface);
+
+  --s-selection-invalid-outline-color: var(--color-danger-400);
+  --s-button-primary-accent: var(--color-primary-400);
+  --s-button-primary-foreground: var(--color-primary-300);
+  --s-button-primary-solid-background: var(--color-primary-400);
+  --s-button-primary-solid-background-hover: var(--color-primary-300);
+  --s-button-primary-solid-background-active: var(--color-primary-200);
+  --s-button-primary-solid-foreground: var(--color-text-on-primary);
+
+  --s-button-secondary-accent: var(--color-surface-400);
+  --s-button-secondary-foreground: var(--color-surface-200);
+  --s-button-secondary-solid-background: var(--color-surface-700);
+  --s-button-secondary-solid-background-hover: var(--color-surface-600);
+  --s-button-secondary-solid-background-active: var(--color-surface-500);
+  --s-button-secondary-solid-foreground: var(--color-surface-0);
+
+  --s-button-success-accent: var(--color-success-400);
+  --s-button-success-foreground: var(--color-success-300);
+  --s-button-success-solid-background: var(--color-success-400);
+  --s-button-success-solid-background-hover: var(--color-success-300);
+  --s-button-success-solid-background-active: var(--color-success-200);
+  --s-button-success-solid-foreground: var(--color-surface-950);
+
+  --s-button-info-accent: var(--color-info-400);
+  --s-button-info-foreground: var(--color-info-300);
+  --s-button-info-solid-background: var(--color-info-400);
+  --s-button-info-solid-background-hover: var(--color-info-300);
+  --s-button-info-solid-background-active: var(--color-info-200);
+  --s-button-info-solid-foreground: var(--color-surface-950);
+
+  --s-button-warn-accent: var(--color-warn-400);
+  --s-button-warn-foreground: var(--color-warn-300);
+  --s-button-warn-solid-background: var(--color-warn-300);
+  --s-button-warn-solid-background-hover: var(--color-warn-200);
+  --s-button-warn-solid-background-active: var(--color-warn-100);
+  --s-button-warn-solid-foreground: var(--color-surface-950);
+
+  --s-button-danger-accent: var(--color-danger-400);
+  --s-button-danger-foreground: var(--color-danger-300);
+  --s-button-danger-solid-background: var(--color-danger-400);
+  --s-button-danger-solid-background-hover: var(--color-danger-300);
+  --s-button-danger-solid-background-active: var(--color-danger-200);
+  --s-button-danger-solid-foreground: var(--color-surface-950);
+
+  --s-button-contrast-accent: var(--color-surface-300);
+  --s-button-contrast-foreground: var(--color-surface-200);
+  --s-button-contrast-solid-background: var(--color-surface-100);
+  --s-button-contrast-solid-background-hover: var(--color-surface-200);
+  --s-button-contrast-solid-background-active: var(--color-surface-300);
+  --s-button-contrast-solid-foreground: var(--color-surface-900);
+
+  --s-button-disabled-background: var(--color-surface-800);
+  --s-button-disabled-foreground: var(--color-surface-300);
+}