@medway-ui/native 1.0.4 → 1.1.1

package/setup/tokens.native.css

@@ -0,0 +1,873 @@
+:root {
+  /* === White colors === */
+  --color-white: rgba(255, 255, 255, 1);
+  --color-white-80: rgba(255, 255, 255, 0.8);
+  --color-white-48: rgba(255, 255, 255, 0.48);
+  --color-white-24: rgba(255, 255, 255, 0.24);
+  --color-white-16: rgba(255, 255, 255, 0.16);
+  --color-white-12: rgba(255, 255, 255, 0.12);
+  --color-white-8: rgba(255, 255, 255, 0.08);
+  --color-white-6: rgba(255, 255, 255, 0.06);
+  --color-white-4: rgba(255, 255, 255, 0.04);
+  --color-white-0: rgba(255, 255, 255, 0);
+
+  /* === Black colors === */
+  --color-black: rgba(0, 0, 0, 1);
+  --color-black-80: rgba(0, 0, 0, 0.8);
+  --color-black-48: rgba(0, 0, 0, 0.48);
+  --color-black-24: rgba(0, 0, 0, 0.24);
+  --color-black-16: rgba(0, 0, 0, 0.16);
+  --color-black-12: rgba(0, 0, 0, 0.12);
+  --color-black-8: rgba(0, 0, 0, 0.08);
+  --color-black-6: rgba(0, 0, 0, 0.06);
+  --color-black-4: rgba(0, 0, 0, 0.04);
+  --color-black-0: rgba(0, 0, 0, 0);
+
+  /* === Gray colors === */
+  --color-gray-950: rgba(8, 10, 12, 1);
+  --color-gray-900: rgba(12, 14, 18, 1);
+  --color-gray-850: rgba(16, 19, 24, 1);
+  --color-gray-800: rgba(24, 29, 37, 1);
+  --color-gray-700: rgba(33, 38, 49, 1);
+  --color-gray-600: rgba(49, 57, 73, 1);
+  --color-gray-500: rgba(73, 86, 110, 1);
+  --color-gray-450: rgba(90, 105, 135, 1);
+  --color-gray-400: rgba(98, 114, 147, 1);
+  --color-gray-300: rgba(133, 146, 173, 1);
+  --color-gray-200: rgba(169, 179, 198, 1);
+  --color-gray-150: rgba(206, 211, 222, 1);
+  --color-gray-100: rgba(231, 233, 239, 1);
+  --color-gray-70: rgba(240, 241, 245, 1);
+  --color-gray-50: rgba(246, 247, 249, 1);
+  --color-gray-30: rgba(249, 250, 251, 1);
+  --color-gray-10: rgba(252, 252, 253, 1);
+  --color-gray-0: rgba(252, 252, 253, 0);
+
+  /* === Green colors === */
+  --color-green: rgba(12, 187, 102, 1);
+  --color-green-darken-1: rgba(16, 152, 86, 1);
+  --color-green-darken-2: rgba(17, 120, 71, 1);
+  --color-green-darken-3: rgba(16, 91, 55, 1);
+  --color-green-darken-4: rgba(14, 63, 39, 1);
+  --color-green-darken-5: rgba(9, 37, 23, 1);
+  --color-green-darken-6: rgba(3, 12, 8, 1);
+  --color-green-lighten-1: rgba(22, 208, 118, 1);
+  --color-green-lighten-2: rgba(36, 224, 133, 1);
+  --color-green-lighten-3: rgba(69, 222, 148, 1);
+  --color-green-lighten-4: rgba(100, 221, 163, 1);
+  --color-green-lighten-5: rgba(129, 223, 178, 1);
+  --color-green-lighten-6: rgba(156, 226, 192, 1);
+  --color-green-80: rgba(12, 187, 102, 0.8);
+  --color-green-64: rgba(12, 187, 102, 0.64);
+  --color-green-48: rgba(12, 187, 102, 0.48);
+  --color-green-24: rgba(12, 187, 102, 0.24);
+  --color-green-16: rgba(12, 187, 102, 0.16);
+  --color-green-12: rgba(12, 187, 102, 0.12);
+  --color-green-8: rgba(12, 187, 102, 0.08);
+  --color-green-6: rgba(12, 187, 102, 0.06);
+  --color-green-4: rgba(12, 187, 102, 0.04);
+  --color-green-0: rgba(12, 187, 102, 0);
+
+  /* === Red colors === */
+  --color-red: rgba(238, 32, 56, 1);
+  --color-red-darken-1: rgba(216, 24, 46, 1);
+  --color-red-darken-2: rgba(182, 27, 45, 1);
+  --color-red-darken-3: rgba(150, 29, 43, 1);
+  --color-red-darken-4: rgba(121, 27, 38, 1);
+  --color-red-darken-5: rgba(93, 25, 33, 1);
+  --color-red-darken-6: rgba(67, 20, 25, 1);
+  --color-red-darken-7: rgba(42, 14, 17, 1);
+  --color-red-lighten-1: rgba(234, 67, 86, 1);
+  --color-red-lighten-2: rgba(232, 100, 115, 1);
+  --color-red-lighten-3: rgba(231, 131, 142, 1);
+  --color-red-lighten-4: rgba(233, 159, 168, 1);
+  --color-red-lighten-5: rgba(237, 187, 192, 1);
+  --color-red-lighten-6: rgba(242, 212, 215, 1);
+  --color-red-80: rgba(238, 32, 56, 0.8);
+  --color-red-64: rgba(238, 32, 56, 0.64);
+  --color-red-48: rgba(238, 32, 56, 0.48);
+  --color-red-24: rgba(238, 32, 56, 0.24);
+  --color-red-16: rgba(238, 32, 56, 0.16);
+  --color-red-12: rgba(238, 32, 56, 0.12);
+  --color-red-8: rgba(238, 32, 56, 0.08);
+  --color-red-6: rgba(238, 32, 56, 0.06);
+  --color-red-4: rgba(238, 32, 56, 0.04);
+  --color-red-0: rgba(238, 32, 56, 0);
+
+  /* === Yellow colors === */
+  --color-yellow: rgba(241, 194, 4, 1);
+  --color-yellow-darken-1: rgba(203, 165, 11, 1);
+  --color-yellow-darken-2: rgba(168, 138, 16, 1);
+  --color-yellow-darken-3: rgba(135, 112, 18, 1);
+  --color-yellow-darken-4: rgba(105, 87, 18, 1);
+  --color-yellow-darken-5: rgba(76, 64, 16, 1);
+  --color-yellow-darken-6: rgba(49, 42, 12, 1);
+  --color-yellow-lighten-1: rgba(243, 201, 32, 1);
+  --color-yellow-lighten-2: rgba(238, 204, 68, 1);
+  --color-yellow-lighten-3: rgba(235, 208, 102, 1);
+  --color-yellow-lighten-4: rgba(234, 214, 133, 1);
+  --color-yellow-lighten-5: rgba(236, 221, 162, 1);
+  --color-yellow-lighten-6: rgba(239, 229, 189, 1);
+  --color-yellow-80: rgba(241, 194, 4, 0.8);
+  --color-yellow-64: rgba(241, 194, 4, 0.64);
+  --color-yellow-48: rgba(241, 194, 4, 0.48);
+  --color-yellow-24: rgba(241, 194, 4, 0.24);
+  --color-yellow-16: rgba(241, 194, 4, 0.16);
+  --color-yellow-12: rgba(241, 194, 4, 0.12);
+  --color-yellow-8: rgba(241, 194, 4, 0.08);
+  --color-yellow-6: rgba(241, 194, 4, 0.06);
+  --color-yellow-4: rgba(241, 194, 4, 0.04);
+  --color-yellow-0: rgba(241, 194, 4, 0);
+
+  /* === Cm colors === */
+  --color-cm: rgba(64, 126, 201, 1);
+  --color-cm-darken-1: rgba(56, 112, 178, 1);
+  --color-cm-darken-2: rgba(53, 97, 151, 1);
+  --color-cm-darken-3: rgba(49, 83, 125, 1);
+  --color-cm-darken-4: rgba(42, 69, 101, 1);
+  --color-cm-darken-5: rgba(35, 54, 77, 1);
+  --color-cm-darken-6: rgba(27, 39, 55, 1);
+  --color-cm-lighten-1: rgba(92, 143, 204, 1);
+  --color-cm-lighten-2: rgba(119, 159, 207, 1);
+  --color-cm-lighten-3: rgba(145, 175, 212, 1);
+  --color-cm-lighten-4: rgba(169, 191, 219, 1);
+  --color-cm-lighten-5: rgba(192, 207, 227, 1);
+  --color-cm-lighten-6: rgba(214, 223, 235, 1);
+  --color-cm-80: rgba(64, 126, 201, 0.8);
+  --color-cm-64: rgba(64, 126, 201, 0.64);
+  --color-cm-48: rgba(64, 126, 201, 0.48);
+  --color-cm-24: rgba(64, 126, 201, 0.24);
+  --color-cm-16: rgba(64, 126, 201, 0.16);
+  --color-cm-12: rgba(64, 126, 201, 0.12);
+  --color-cm-8: rgba(64, 126, 201, 0.08);
+  --color-cm-6: rgba(64, 126, 201, 0.06);
+  --color-cm-4: rgba(64, 126, 201, 0.04);
+  --color-cm-0: rgba(64, 126, 201, 0);
+
+  /* === Go colors === */
+  --color-go: rgba(172, 20, 90, 1);
+  --color-go-darken-1: rgba(141, 22, 77, 1);
+  --color-go-darken-2: rgba(111, 21, 63, 1);
+  --color-go-darken-3: rgba(83, 19, 48, 1);
+  --color-go-darken-4: rgba(56, 15, 34, 1);
+  --color-go-darken-5: rgba(31, 10, 20, 1);
+  --color-go-darken-6: rgba(8, 3, 5, 1);
+  --color-go-lighten-1: rgba(194, 30, 106, 1);
+  --color-go-lighten-2: rgba(214, 41, 121, 1);
+  --color-go-lighten-3: rgba(213, 72, 137, 1);
+  --color-go-lighten-4: rgba(214, 102, 154, 1);
+  --color-go-lighten-5: rgba(217, 130, 170, 1);
+  --color-go-lighten-6: rgba(221, 156, 186, 1);
+  --color-go-80: rgba(172, 20, 90, 0.8);
+  --color-go-64: rgba(172, 20, 90, 0.64);
+  --color-go-48: rgba(172, 20, 90, 0.48);
+  --color-go-24: rgba(172, 20, 90, 0.24);
+  --color-go-16: rgba(172, 20, 90, 0.16);
+  --color-go-12: rgba(172, 20, 90, 0.12);
+  --color-go-8: rgba(172, 20, 90, 0.08);
+  --color-go-6: rgba(172, 20, 90, 0.06);
+  --color-go-4: rgba(172, 20, 90, 0.04);
+  --color-go-0: rgba(172, 20, 90, 0);
+
+  /* === Cir colors === */
+  --color-cir: rgba(0, 239, 200, 1);
+  --color-cir-darken-1: rgba(7, 202, 170, 1);
+  --color-cir-darken-2: rgba(12, 166, 141, 1);
+  --color-cir-darken-3: rgba(16, 132, 113, 1);
+  --color-cir-darken-4: rgba(16, 101, 87, 1);
+  --color-cir-darken-5: rgba(14, 73, 63, 1);
+  --color-cir-darken-6: rgba(10, 46, 40, 1);
+  --color-cir-lighten-1: rgba(24, 247, 210, 1);
+  --color-cir-lighten-2: rgba(61, 240, 211, 1);
+  --color-cir-lighten-3: rgba(95, 236, 213, 1);
+  --color-cir-lighten-4: rgba(127, 235, 217, 1);
+  --color-cir-lighten-5: rgba(156, 236, 223, 1);
+  --color-cir-lighten-6: rgba(184, 239, 230, 1);
+  --color-cir-80: rgba(0, 239, 200, 0.8);
+  --color-cir-64: rgba(0, 239, 200, 0.64);
+  --color-cir-48: rgba(0, 239, 200, 0.48);
+  --color-cir-24: rgba(0, 239, 200, 0.24);
+  --color-cir-16: rgba(0, 239, 200, 0.16);
+  --color-cir-12: rgba(0, 239, 200, 0.12);
+  --color-cir-8: rgba(0, 239, 200, 0.08);
+  --color-cir-6: rgba(0, 239, 200, 0.06);
+  --color-cir-4: rgba(0, 239, 200, 0.04);
+  --color-cir-0: rgba(0, 239, 200, 0);
+
+  /* === Ped colors === */
+  --color-ped: rgba(255, 198, 73, 1);
+  --color-ped-darken-1: rgba(248, 185, 48, 1);
+  --color-ped-darken-2: rgba(238, 172, 27, 1);
+  --color-ped-darken-3: rgba(210, 152, 25, 1);
+  --color-ped-darken-4: rgba(176, 130, 28, 1);
+  --color-ped-darken-5: rgba(146, 109, 28, 1);
+  --color-ped-darken-6: rgba(116, 88, 26, 1);
+  --color-ped-darken-7: rgba(89, 68, 24, 1);
+  --color-ped-lighten-1: rgba(250, 205, 107, 1);
+  --color-ped-lighten-2: rgba(246, 213, 141, 1);
+  --color-ped-lighten-3: rgba(245, 223, 173, 1);
+  --color-ped-lighten-4: rgba(247, 233, 202, 1);
+  --color-ped-lighten-5: rgba(250, 244, 229, 1);
+  --color-ped-lighten-6: rgba(255, 255, 255, 1);
+  --color-ped-80: rgba(255, 198, 73, 0.8);
+  --color-ped-64: rgba(255, 198, 73, 0.64);
+  --color-ped-48: rgba(255, 198, 73, 0.48);
+  --color-ped-24: rgba(255, 198, 73, 0.24);
+  --color-ped-16: rgba(255, 198, 73, 0.16);
+  --color-ped-12: rgba(255, 198, 73, 0.12);
+  --color-ped-8: rgba(255, 198, 73, 0.08);
+  --color-ped-6: rgba(255, 198, 73, 0.06);
+  --color-ped-4: rgba(255, 198, 73, 0.04);
+  --color-ped-0: rgba(255, 198, 73, 0);
+
+  /* === Prev colors === */
+  --color-prev: rgba(59, 63, 182, 1);
+  --color-prev-darken-1: rgba(55, 59, 154, 1);
+  --color-prev-darken-2: rgba(50, 53, 129, 1);
+  --color-prev-darken-3: rgba(44, 46, 104, 1);
+  --color-prev-darken-4: rgba(37, 38, 80, 1);
+  --color-prev-darken-5: rgba(28, 29, 59, 1);
+  --color-prev-darken-6: rgba(19, 20, 37, 1);
+  --color-prev-lighten-1: rgba(79, 82, 191, 1);
+  --color-prev-lighten-2: rgba(104, 107, 196, 1);
+  --color-prev-lighten-3: rgba(130, 132, 201, 1);
+  --color-prev-lighten-4: rgba(154, 155, 208, 1);
+  --color-prev-lighten-5: rgba(176, 177, 217, 1);
+  --color-prev-lighten-6: rgba(198, 199, 226, 1);
+  --color-prev-80: rgba(59, 63, 182, 0.8);
+  --color-prev-64: rgba(59, 63, 182, 0.64);
+  --color-prev-48: rgba(59, 63, 182, 0.48);
+  --color-prev-24: rgba(59, 63, 182, 0.24);
+  --color-prev-16: rgba(59, 63, 182, 0.16);
+  --color-prev-12: rgba(59, 63, 182, 0.12);
+  --color-prev-8: rgba(59, 63, 182, 0.08);
+  --color-prev-6: rgba(59, 63, 182, 0.06);
+  --color-prev-4: rgba(59, 63, 182, 0.04);
+  --color-prev-0: rgba(59, 63, 182, 0);
+
+  /* === Brand Primary colors === */
+  --color-primary: rgba(0, 32, 91, 1);
+  --color-primary-darken-1: rgba(2, 22, 59, 1);
+  --color-primary-darken-2: rgba(2, 11, 28, 1);
+  --color-primary-lighten-1: rgba(4, 44, 118, 1);
+  --color-primary-lighten-2: rgba(11, 57, 142, 1);
+  --color-primary-lighten-3: rgba(19, 70, 164, 1);
+  --color-primary-lighten-4: rgba(29, 80, 185, 1);
+  --color-primary-lighten-5: rgba(39, 94, 206, 1);
+  --color-primary-lighten-6: rgba(64, 112, 212, 1);
+  --color-primary-80: rgba(0, 32, 91, 0.8);
+  --color-primary-64: rgba(0, 32, 91, 0.64);
+  --color-primary-48: rgba(0, 32, 91, 0.48);
+  --color-primary-24: rgba(0, 32, 91, 0.24);
+  --color-primary-16: rgba(0, 32, 91, 0.16);
+  --color-primary-12: rgba(0, 32, 91, 0.12);
+  --color-primary-8: rgba(0, 32, 91, 0.08);
+  --color-primary-6: rgba(0, 32, 91, 0.06);
+  --color-primary-4: rgba(0, 32, 91, 0.04);
+  --color-primary-0: rgba(0, 32, 91, 0);
+
+  /* === Brand Secondary colors === */
+  --color-secondary: rgba(1, 208, 180, 1);
+  --color-secondary-darken-1: rgba(7, 171, 149, 1);
+  --color-secondary-darken-2: rgba(11, 137, 120, 1);
+  --color-secondary-darken-3: rgba(13, 104, 92, 1);
+  --color-secondary-darken-4: rgba(12, 75, 66, 1);
+  --color-secondary-darken-5: rgba(9, 47, 42, 1);
+  --color-secondary-darken-6: rgba(5, 21, 19, 1);
+  --color-secondary-lighten-1: rgba(10, 230, 201, 1);
+  --color-secondary-lighten-2: rgba(33, 237, 210, 1);
+  --color-secondary-lighten-3: rgba(69, 232, 210, 1);
+  --color-secondary-lighten-4: rgba(101, 230, 213, 1);
+  --color-secondary-lighten-5: rgba(132, 231, 217, 1);
+  --color-secondary-lighten-6: rgba(160, 233, 223, 1);
+  --color-secondary-80: rgba(1, 208, 180, 0.8);
+  --color-secondary-64: rgba(1, 208, 180, 0.64);
+  --color-secondary-48: rgba(1, 208, 180, 0.48);
+  --color-secondary-24: rgba(1, 208, 180, 0.24);
+  --color-secondary-16: rgba(1, 208, 180, 0.16);
+  --color-secondary-12: rgba(1, 208, 180, 0.12);
+  --color-secondary-8: rgba(1, 208, 180, 0.08);
+  --color-secondary-6: rgba(1, 208, 180, 0.06);
+  --color-secondary-4: rgba(1, 208, 180, 0.04);
+  --color-secondary-0: rgba(1, 208, 180, 0);
+
+  /* === Base drop-shadow colors === */
+  --color-drop-shadow-layer-a: rgba(33, 38, 49, 0.16);
+  --color-drop-shadow-layer-b: rgba(73, 85, 110, 0.16);
+
+  /* === Base colors === */
+  --color-background: var(--color-white);
+  --color-foreground: var(--color-gray-700);
+  --color-ring: var(--color-gray-150);
+
+  /* === Base content colors === */
+  --color-content-title: var(--color-primary);
+  --color-content-paragraph: var(--color-gray-600);
+  --color-content-link: var(--color-secondary-darken-2);
+
+  /* === Base state colors === */
+  --color-state-hover: var(--color-gray-50);
+  --color-state-focus: var(--color-gray-70);
+  --color-state-active: var(--color-primary-16);
+  --color-state-error: var(--color-red-16);
+
+  /* === Base feedback success colors === */
+  --color-feedback-success-foreground: var(--color-green-darken-3);
+  --color-feedback-success-foreground-emphasis: var(--color-green-darken-4);
+  --color-feedback-success-foreground-onfill: var(--color-white);
+  --color-feedback-success-stroke: var(--color-green);
+  --color-feedback-success-stroke-emphasis: var(--color-green-darken-2);
+  --color-feedback-success-background-fill: var(--color-green-darken-2);
+  --color-feedback-success-background-fill-emphasis: var(
+    --color-green-darken-3
+  );
+  --color-feedback-success-background-soft: var(--color-green-16);
+  --color-feedback-success-background-soft-emphasis: var(--color-green-12);
+  --color-feedback-success-background-soft-muted: var(--color-green-6);
+
+  /* === Base feedback error colors === */
+  --color-feedback-error-foreground: var(--color-red-darken-2);
+  --color-feedback-error-foreground-emphasis: var(--color-red-darken-3);
+  --color-feedback-error-foreground-onfill: var(--color-white);
+  --color-feedback-error-stroke: var(--color-red);
+  --color-feedback-error-stroke-emphasis: var(--color-red-darken-1);
+  --color-feedback-error-background-fill: var(--color-red-darken-1);
+  --color-feedback-error-background-fill-emphasis: var(--color-red-darken-2);
+  --color-feedback-error-background-soft: var(--color-red-12);
+  --color-feedback-error-background-soft-emphasis: var(--color-red-8);
+  --color-feedback-error-background-soft-muted: var(--color-red-4);
+
+  /* === Base feedback warning colors === */
+  --color-feedback-warning-foreground: var(--color-yellow-darken-4);
+  --color-feedback-warning-foreground-emphasis: var(--color-yellow-darken-5);
+  --color-feedback-warning-foreground-onfill: var(--color-yellow-darken-5);
+  --color-feedback-warning-stroke: var(--color-yellow-lighten-1);
+  --color-feedback-warning-stroke-emphasis: var(--color-yellow);
+  --color-feedback-warning-background-fill: var(--color-yellow-lighten-2);
+  --color-feedback-warning-background-fill-emphasis: var(--color-yellow);
+  --color-feedback-warning-background-soft: var(--color-yellow-24);
+  --color-feedback-warning-background-soft-emphasis: var(--color-yellow-16);
+  --color-feedback-warning-background-soft-muted: var(--color-yellow-8);
+
+  /* === Base surfacecolors === */
+  --color-surface-elevated: var(--color-white);
+  --color-surface-card: var(--color-white);
+  --color-surface-navigation: var(--color-white);
+  --color-surface-section: var(--color-white);
+  --color-surface-page: var(--color-gray-30);
+  --color-surface-disable: var(--color-white-8);
+  --color-surface-settings-on: var(--color-white-80);
+  --color-surface-settings-off: var(--color-white-48);
+
+  /* === Base gray colors === */
+  --color-gray-foreground: var(--color-gray-600);
+  --color-gray-foreground-emphasis: var(--color-gray-700);
+  --color-gray-foreground-muted: var(--color-gray-450);
+  --color-gray-foreground-onfill: var(--color-white);
+  --color-gray-stroke: var(--color-gray-150);
+  --color-gray-stroke-emphasis: var(--color-gray-200);
+  --color-gray-stroke-muted: var(--color-gray-100);
+  --color-gray-background-fill: var(--color-gray-700);
+  --color-gray-background-fill-emphasis: var(--color-gray-850);
+  --color-gray-background-fill-muted: var(--color-gray-400);
+  --color-gray-background-soft: var(--color-gray-70);
+  --color-gray-background-soft-emphasis: var(--color-gray-50);
+  --color-gray-background-soft-muted: var(--color-gray-30);
+
+  /* === Base green colors === */
+  --color-green-foreground: var(--color-green-darken-3);
+  --color-green-foreground-emphasis: var(--color-green-darken-4);
+  --color-green-foreground-onfill: var(--color-white);
+  --color-green-stroke: var(--color-green);
+  --color-green-stroke-emphasis: var(--color-green-darken-2);
+  --color-green-background-fill: var(--color-green-darken-2);
+  --color-green-background-fill-emphasis: var(--color-green-darken-3);
+  --color-green-background-soft: var(--color-green-16);
+  --color-green-background-soft-emphasis: var(--color-green-12);
+  --color-green-background-soft-muted: var(--color-green-6);
+
+  /* === Base red colors === */
+  --color-red-foreground: var(--color-red-darken-2);
+  --color-red-foreground-emphasis: var(--color-red-darken-3);
+  --color-red-foreground-onfill: var(--color-white);
+  --color-red-stroke: var(--color-red);
+  --color-red-stroke-emphasis: var(--color-red-darken-1);
+  --color-red-background-fill: var(--color-red-darken-1);
+  --color-red-background-fill-emphasis: var(--color-red-darken-2);
+  --color-red-background-soft: var(--color-red-12);
+  --color-red-background-soft-emphasis: var(--color-red-8);
+  --color-red-background-soft-muted: var(--color-red-4);
+
+  /* === Base yellow colors === */
+  --color-yellow-foreground: var(--color-yellow-darken-4);
+  --color-yellow-foreground-emphasis: var(--color-yellow-darken-5);
+  --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
+  --color-yellow-stroke: var(--color-yellow-lighten-1);
+  --color-yellow-stroke-emphasis: var(--color-yellow);
+  --color-yellow-background-fill: var(--color-yellow-lighten-2);
+  --color-yellow-background-fill-emphasis: var(--color-yellow);
+  --color-yellow-background-soft: var(--color-yellow-24);
+  --color-yellow-background-soft-emphasis: var(--color-yellow-16);
+  --color-yellow-background-soft-muted: var(--color-yellow-8);
+
+  /* === Base cm colors === */
+  --color-cm-foreground: var(--color-cm-darken-2);
+  --color-cm-foreground-emphasis: var(--color-cm-darken-4);
+  --color-cm-foreground-onfill: var(--color-white);
+  --color-cm-background-fill: var(--color-cm-darken-1);
+  --color-cm-background-fill-emphasis: var(--color-cm-darken-3);
+  --color-cm-background-soft: var(--color-cm-8);
+  --color-cm-background-soft-emphasis: var(--color-cm-4);
+
+  /* === Base go colors === */
+  --color-go-foreground: var(--color-go-darken-1);
+  --color-go-foreground-emphasis: var(--color-go-darken-3);
+  --color-go-foreground-onfill: var(--color-white);
+  --color-go-background-fill: var(--color-go);
+  --color-go-background-fill-emphasis: var(--color-go-darken-1);
+  --color-go-background-soft: var(--color-go-8);
+  --color-go-background-soft-emphasis: var(--color-go-4);
+
+  /* === Base cir colors === */
+  --color-cir-foreground: var(--color-cir-darken-4);
+  --color-cir-foreground-emphasis: var(--color-cir-darken-5);
+  --color-cir-foreground-onfill: var(--color-cir-darken-6);
+  --color-cir-background-fill: var(--color-cir);
+  --color-cir-background-fill-emphasis: var(--color-cir-darken-1);
+  --color-cir-background-soft: var(--color-cir-16);
+  --color-cir-background-soft-emphasis: var(--color-cir-8);
+
+  /* === Base ped colors === */
+  --color-ped-foreground: var(--color-ped-darken-6);
+  --color-ped-foreground-emphasis: var(--color-ped-darken-7);
+  --color-ped-foreground-onfill: var(--color-ped-darken-7);
+  --color-ped-background-fill: var(--color-ped-lighten-1);
+  --color-ped-background-fill-emphasis: var(--color-ped);
+  --color-ped-background-soft: var(--color-ped-16);
+  --color-ped-background-soft-emphasis: var(--color-ped-8);
+
+  /* === Base prev colors === */
+  --color-prev-foreground: var(--color-prev);
+  --color-prev-foreground-emphasis: var(--color-prev-darken-2);
+  --color-prev-foreground-onfill: var(--color-white);
+  --color-prev-background-fill: var(--color-prev);
+  --color-prev-background-fill-emphasis: var(--color-prev-darken-2);
+  --color-prev-background-soft: var(--color-prev-8);
+  --color-prev-background-soft-emphasis: var(--color-prev-4);
+
+  /* === Base primary colors === */
+  --color-primary-foreground: var(--color-primary);
+  --color-primary-foreground-emphasis: var(--color-primary-darken-1);
+  --color-primary-foreground-muted: var(--color-primary-64);
+  --color-primary-foreground-onfill: var(--color-white);
+  --color-primary-stroke: var(--color-primary);
+  --color-primary-stroke-emphasis: var(--color-primary-darken-1);
+  --color-primary-background-fill: var(--color-primary);
+  --color-primary-background-fill-emphasis: var(--color-primary-darken-1);
+  --color-primary-background-soft: var(--color-primary-8);
+  --color-primary-background-soft-emphasis: var(--color-primary-6);
+  --color-primary-background-soft-muted: var(--color-primary-4);
+
+  /* === Base secondary colors === */
+  --color-secondary-foreground: var(--color-secondary-darken-3);
+  --color-secondary-foreground-emphasis: var(--color-secondary-darken-4);
+  --color-secondary-foreground-muted: var(--color-secondary-darken-2);
+  --color-secondary-foreground-onfill: var(--color-white);
+  --color-secondary-stroke: var(--color-secondary);
+  --color-secondary-stroke-emphasis: var(--color-secondary-darken-1);
+  --color-secondary-background-fill: var(--color-secondary-darken-2);
+  --color-secondary-background-fill-emphasis: var(--color-secondary-darken-3);
+  --color-secondary-background-soft: var(--color-secondary-12);
+  --color-secondary-background-soft-emphasis: var(--color-secondary-8);
+  --color-secondary-background-soft-muted: var(--color-secondary-6);
+
+  /* === Base gradient base === */
+  --color-gradient-base-blur-1: var(--color-primary-lighten-6);
+  --color-gradient-base-blur-2: var(--color-secondary-lighten-3);
+  --color-gradient-base-blur-3: var(--color-secondary-lighten-6);
+  --color-gradient-base-bg-1: var(--color-gray-50);
+  --color-gradient-base-bg-2: var(--color-gray-10);
+
+  /* === Base gradient cir === */
+  --color-gradient-cir-blur-1: var(--color-cir-lighten-3);
+  --color-gradient-cir-blur-2: var(--color-secondary-lighten-1);
+  --color-gradient-cir-blur-3: var(--color-cir-darken-1);
+  --color-gradient-cir-bg-1: var(--color-cir-lighten-6);
+  --color-gradient-cir-bg-2: var(--color-gray-10);
+
+  /* === Base gradient cm === */
+  --color-gradient-cm-blur-1: var(--color-cm-lighten-4);
+  --color-gradient-cm-blur-2: var(--color-cm-lighten-2);
+  --color-gradient-cm-blur-3: var(--color-cm);
+  --color-gradient-cm-bg-1: var(--color-cm-lighten-6);
+  --color-gradient-cm-bg-2: var(--color-gray-10);
+
+  /* === Base gradient go === */
+  --color-gradient-go-blur-1: var(--color-go-lighten-6);
+  --color-gradient-go-blur-2: var(--color-go-lighten-4);
+  --color-gradient-go-blur-3: var(--color-go-lighten-2);
+  --color-gradient-go-bg-1: var(--color-go-lighten-6);
+  --color-gradient-go-bg-2: var(--color-gray-10);
+
+  /* === Base gradient ped === */
+  --color-gradient-ped-blur-1: var(--color-ped-lighten-4);
+  --color-gradient-ped-blur-2: var(--color-ped-lighten-2);
+  --color-gradient-ped-blur-3: var(--color-ped);
+  --color-gradient-ped-bg-1: var(--color-ped-lighten-5);
+  --color-gradient-ped-bg-2: var(--color-gray-10);
+
+  /* === Base gradient prev === */
+  --color-gradient-prev-blur-1: var(--color-prev-lighten-5);
+  --color-gradient-prev-blur-2: var(--color-prev-lighten-3);
+  --color-gradient-prev-blur-3: var(--color-prev);
+  --color-gradient-prev-bg-1: var(--color-prev-lighten-6);
+  --color-gradient-prev-bg-2: var(--color-gray-10);
+
+  /* === Base gradient r1 === */
+  --color-gradient-r1-blur-1: var(--color-secondary);
+  --color-gradient-r1-blur-2: var(--color-primary-lighten-3);
+  --color-gradient-r1-blur-3: var(--color-primary-lighten-5);
+  --color-gradient-r1-bg-1: var(--color-primary);
+  --color-gradient-r1-bg-2: var(--color-primary-lighten-1);
+
+  /* === Base gradient rplus === */
+  --color-gradient-rplus-blur-1: var(--color-primary-lighten-1);
+  --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
+  --color-gradient-rplus-blur-3: var(--color-primary-lighten-5);
+  --color-gradient-rplus-bg-1: var(--color-primary-lighten-1);
+  --color-gradient-rplus-bg-2: var(--color-primary);
+
+  /* === Base gradient pt === */
+  --color-gradient-pt-blur-1: var(--color-secondary);
+  --color-gradient-pt-blur-2: var(--color-secondary-darken-2);
+  --color-gradient-pt-blur-3: var(--color-secondary-darken-4);
+  --color-gradient-pt-bg-1: var(--color-gray-600);
+  --color-gradient-pt-bg-2: var(--color-gray-450);
+
+  /* === Typography fontfamily === */
+  --font-sans:
+    "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* === Typography weight === */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 900;
+
+  /* === Typography size === */
+  --text-xxs: 10px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 15px;
+  --text-md: 16px;
+  --text-lg: 18px;
+  --text-title-xs: 20px;
+  --text-title-sm: 24px;
+  --text-title-md: 28px;
+  --text-title-lg: 32px;
+  --text-title-xl: 36px;
+  --text-title-xxl: 40px;
+  --text-display-sm: 46px;
+  --text-display-md: 52px;
+  --text-display-lg: 58px;
+
+  /* === Line Height === */
+  --leading-xxs: 12px;
+  --leading-xs: 16px;
+  --leading-sm: 20px;
+  --leading-md: 24px;
+  --leading-lg: 28px;
+  --leading-title-xs: 28px;
+  --leading-title-sm: 32px;
+  --leading-title-md: 36px;
+  --leading-title-lg: 40px;
+  --leading-title-xl: 44px;
+  --leading-title-xxl: 52px;
+  --leading-display-sm: 62px;
+  --leading-display-md: 70px;
+  --leading-display-lg: 78px;
+
+  /* === Radius === */
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-pill: 320px;
+  --radius-circular: 1600px;
+  --radius-full: 9999px;
+
+  /* === Breakpoints === */
+  --breakpoint-tv: 1920px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-tablet: 600px;
+  --breakpoint-mobile: 320px;
+
+  /* === Container === */
+  --container-tv: 1288px;
+  --container-desktop: 1288px;
+  --container-tablet: 768px;
+  --container-mobile: 480px;
+
+  /* === Sidebar === */
+  --sidebar-width: 256px;
+  --sidebar-width-mobile: 256px;
+  --sidebar-width-icon: 72px;
+}
+.dark {
+  /* === Dark base colors === */
+  --color-background: var(--color-gray-850);
+  --color-foreground: var(--color-white);
+  --color-ring: var(--color-gray-500);
+
+  /* === Dark state colors === */
+  --color-state-hover: var(--color-gray-800);
+  --color-state-focus: var(--color-gray-700);
+  --color-state-active: var(--color-white-16);
+  --color-state-error: var(--color-red-16);
+
+  /* === Base feedback success colors === */
+  --color-feedback-success-foreground: var(--color-green-lighten-4);
+  --color-feedback-success-foreground-emphasis: var(--color-green-lighten-6);
+  --color-feedback-success-foreground-onfill: var(--color-white);
+  --color-feedback-success-stroke: var(--color-green-darken-2);
+  --color-feedback-success-stroke-emphasis: var(--color-green);
+  --color-feedback-success-background-fill: var(--color-green-darken-3);
+  --color-feedback-success-background-fill-emphasis: var(
+    --color-green-darken-2
+  );
+  --color-feedback-success-background-soft: var(--color-green-8);
+  --color-feedback-success-background-soft-emphasis: var(--color-green-24);
+  --color-feedback-success-background-soft-muted: var(--color-green-16);
+
+  /* === Base feedback error colors === */
+  --color-feedback-error-foreground: var(--color-red-lighten-3);
+  --color-feedback-error-foreground-emphasis: var(--color-red-lighten-4);
+  --color-feedback-error-foreground-onfill: var(--color-white);
+  --color-feedback-error-stroke: var(--color-red-darken-1);
+  --color-feedback-error-stroke-emphasis: var(--color-red);
+  --color-feedback-error-background-fill: var(--color-red-darken-2);
+  --color-feedback-error-background-fill-emphasis: var(--color-red-darken-1);
+  --color-feedback-error-background-soft: var(--color-red-12);
+  --color-feedback-error-background-soft-emphasis: var(--color-red-24);
+  --color-feedback-error-background-soft-muted: var(--color-red-16);
+
+  /* === Base feedback warning colors === */
+  --color-feedback-warning-foreground: var(--color-yellow-lighten-2);
+  --color-feedback-warning-foreground-emphasis: var(--color-yellow-lighten-4);
+  --color-feedback-warning-foreground-onfill: var(--color-yellow-darken-5);
+  --color-feedback-warning-stroke: var(--color-yellow);
+  --color-feedback-warning-stroke-emphasis: var(--color-yellow-lighten-1);
+  --color-feedback-warning-background-fill: var(--color-yellow);
+  --color-feedback-warning-background-fill-emphasis: var(
+    --color-yellow-lighten-2
+  );
+  --color-feedback-warning-background-soft: var(--color-yellow-8);
+  --color-feedback-warning-background-soft-emphasis: var(--color-yellow-24);
+  --color-feedback-warning-background-soft-muted: var(--color-yellow-16);
+
+  /* === Base content colors === */
+  --color-content-title: var(--color-white);
+  --color-content-paragraph: var(--color-gray-150);
+  --color-content-link: var(--color-secondary);
+
+  /* === Dark surface colors === */
+  --color-surface-elevated: var(--color-gray-800);
+  --color-surface-card: var(--color-gray-850);
+  --color-surface-navigation: var(--color-gray-850);
+  --color-surface-section: var(--color-gray-900);
+  --color-surface-page: var(--color-gray-950);
+  --color-surface-disable: var(--color-black-8);
+  --color-surface-settings-on: var(--color-black-48);
+  --color-surface-settings-off: var(--color-gray-950);
+
+  /* === Dark drop-shadow colors === */
+  --color-drop-shadow-layer-a: var(--color-black-24);
+  --color-drop-shadow-layer-b: var(--color-black-16);
+
+  /* === Dark gray colors === */
+  --color-gray-foreground: var(--color-gray-100);
+  --color-gray-foreground-emphasis: var(--color-white);
+  --color-gray-foreground-muted: var(--color-gray-150);
+  --color-gray-foreground-onfill: var(--color-gray-700);
+  --color-gray-stroke: var(--color-gray-600);
+  --color-gray-stroke-emphasis: var(--color-gray-500);
+  --color-gray-stroke-muted: var(--color-gray-700);
+  --color-gray-background-fill: var(--color-gray-100);
+  --color-gray-background-fill-emphasis: var(--color-gray-30);
+  --color-gray-background-fill-muted: var(--color-gray-300);
+  --color-gray-background-soft: var(--color-gray-800);
+  --color-gray-background-soft-emphasis: var(--color-gray-600);
+  --color-gray-background-soft-muted: var(--color-gray-700);
+
+  /* === Dark green colors === */
+  --color-green-foreground: var(--color-green-lighten-4);
+  --color-green-foreground-emphasis: var(--color-green-lighten-6);
+  --color-green-foreground-onfill: var(--color-white);
+  --color-green-stroke: var(--color-green-darken-2);
+  --color-green-stroke-emphasis: var(--color-green);
+  --color-green-background-fill: var(--color-green-darken-3);
+  --color-green-background-fill-emphasis: var(--color-green-darken-2);
+  --color-green-background-soft: var(--color-green-8);
+  --color-green-background-soft-emphasis: var(--color-green-24);
+  --color-green-background-soft-muted: var(--color-green-16);
+
+  /* === Dark red colors === */
+  --color-red-foreground: var(--color-red-lighten-3);
+  --color-red-foreground-emphasis: var(--color-red-lighten-4);
+  --color-red-foreground-onfill: var(--color-white);
+  --color-red-stroke: var(--color-red-darken-1);
+  --color-red-stroke-emphasis: var(--color-red);
+  --color-red-background-fill: var(--color-red-darken-2);
+  --color-red-background-fill-emphasis: var(--color-red-darken-1);
+  --color-red-background-soft: var(--color-red-12);
+  --color-red-background-soft-emphasis: var(--color-red-24);
+  --color-red-background-soft-muted: var(--color-red-16);
+
+  /* === Dark yellow colors === */
+  --color-yellow-foreground: var(--color-yellow-lighten-2);
+  --color-yellow-foreground-emphasis: var(--color-yellow-lighten-4);
+  --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
+  --color-yellow-stroke: var(--color-yellow);
+  --color-yellow-stroke-emphasis: var(--color-yellow-lighten-1);
+  --color-yellow-background-fill: var(--color-yellow);
+  --color-yellow-background-fill-emphasis: var(--color-yellow-lighten-2);
+  --color-yellow-background-soft: var(--color-yellow-8);
+  --color-yellow-background-soft-emphasis: var(--color-yellow-24);
+  --color-yellow-background-soft-muted: var(--color-yellow-16);
+
+  /* === Dark cm colors === */
+  --color-cm-foreground: var(--color-cm-lighten-4);
+  --color-cm-foreground-emphasis: var(--color-cm-lighten-6);
+  --color-cm-foreground-onfill: var(--color-white);
+  --color-cm-background-fill: var(--color-cm-darken-2);
+  --color-cm-background-fill-emphasis: var(--color-cm);
+  --color-cm-background-soft: var(--color-cm-12);
+  --color-cm-background-soft-emphasis: var(--color-cm-24);
+
+  /* === Dark go colors === */
+  --color-go-foreground: var(--color-go-lighten-5);
+  --color-go-foreground-emphasis: var(--color-go-lighten-6);
+  --color-go-foreground-onfill: var(--color-white);
+  --color-go-background-fill: var(--color-go-darken-1);
+  --color-go-background-fill-emphasis: var(--color-go);
+  --color-go-background-soft: var(--color-go-16);
+  --color-go-background-soft-emphasis: var(--color-go-24);
+
+  /* === Dark cir colors === */
+  --color-cir-foreground: var(--color-cir);
+  --color-cir-foreground-emphasis: var(--color-cir-lighten-3);
+  --color-cir-foreground-onfill: var(--color-cir-darken-6);
+  --color-cir-background-fill: var(--color-cir-darken-1);
+  --color-cir-background-fill-emphasis: var(--color-cir);
+  --color-cir-background-soft: var(--color-cir-8);
+  --color-cir-background-soft-emphasis: var(--color-cir-16);
+
+  /* === Dark ped colors === */
+  --color-ped-foreground: var(--color-ped);
+  --color-ped-foreground-emphasis: var(--color-ped-lighten-1);
+  --color-ped-foreground-onfill: var(--color-ped-darken-7);
+  --color-ped-background-fill: var(--color-ped);
+  --color-ped-background-fill-emphasis: var(--color-ped-lighten-1);
+  --color-ped-background-soft: var(--color-ped-8);
+  --color-ped-background-soft-emphasis: var(--color-ped-16);
+
+  /* === Dark prev colors === */
+  --color-prev-foreground: var(--color-prev-lighten-5);
+  --color-prev-foreground-emphasis: var(--color-prev-lighten-6);
+  --color-prev-foreground-onfill: var(--color-white);
+  --color-prev-background-fill: var(--color-prev-darken-1);
+  --color-prev-background-fill-emphasis: var(--color-prev);
+  --color-prev-background-soft: var(--color-prev-24);
+  --color-prev-background-soft-emphasis: var(--color-prev-48);
+
+  /* === Dark primary colors === */
+  --color-primary-foreground: var(--color-gray-100);
+  --color-primary-foreground-emphasis: var(--color-white);
+  --color-primary-foreground-muted: var(--color-gray-200);
+  --color-primary-foreground-onfill: var(--color-primary);
+  --color-primary-stroke: var(--color-gray-100);
+  --color-primary-stroke-emphasis: var(--color-white);
+  --color-primary-background-fill: var(--color-gray-70);
+  --color-primary-background-fill-emphasis: var(--color-white);
+  --color-primary-background-soft: var(--color-white-8);
+  --color-primary-background-soft-emphasis: var(--color-white-16);
+  --color-primary-background-soft-muted: var(--color-white-12);
+
+  /* === Dark secondary colors === */
+  --color-secondary-foreground: var(--color-secondary-lighten-1);
+  --color-secondary-foreground-emphasis: var(--color-secondary-lighten-2);
+  --color-secondary-foreground-muted: var(--color-secondary);
+  --color-secondary-foreground-onfill: var(--color-secondary-darken-6);
+  --color-secondary-stroke: var(--color-secondary-darken-1);
+  --color-secondary-stroke-emphasis: var(--color-secondary);
+  --color-secondary-background-fill: var(--color-secondary-darken-1);
+  --color-secondary-background-fill-emphasis: var(--color-secondary);
+  --color-secondary-background-soft: var(--color-secondary-8);
+  --color-secondary-background-soft-emphasis: var(--color-secondary-24);
+  --color-secondary-background-soft-muted: var(--color-secondary-12);
+
+  /* === Dark gradient base === */
+  --color-gradient-base-blur-1: var(--color-primary-lighten-3);
+  --color-gradient-base-blur-2: var(--color-secondary-darken-1);
+  --color-gradient-base-blur-3: var(--color-secondary);
+  --color-gradient-base-bg-1: var(--color-primary-darken-1);
+  --color-gradient-base-bg-2: var(--color-primary-darken-2);
+
+  /* === Dark gradient cir === */
+  --color-gradient-cir-blur-1: var(--color-cir-darken-1);
+  --color-gradient-cir-blur-2: var(--color-cir-darken-2);
+  --color-gradient-cir-blur-3: var(--color-cir-darken-3);
+  --color-gradient-cir-bg-1: var(--color-cir-darken-5);
+  --color-gradient-cir-bg-2: var(--color-cir-darken-6);
+
+  /* === Dark gradient cm === */
+  --color-gradient-cm-blur-1: var(--color-cm);
+  --color-gradient-cm-blur-2: var(--color-cm-darken-1);
+  --color-gradient-cm-blur-3: var(--color-cm-darken-2);
+  --color-gradient-cm-bg-1: var(--color-cm-darken-4);
+  --color-gradient-cm-bg-2: var(--color-cm-darken-6);
+
+  /* === Dark gradient go === */
+  --color-gradient-go-blur-1: var(--color-go-lighten-2);
+  --color-gradient-go-blur-2: var(--color-go);
+  --color-gradient-go-blur-3: var(--color-go-darken-2);
+  --color-gradient-go-bg-1: var(--color-go-darken-3);
+  --color-gradient-go-bg-2: var(--color-go-darken-5);
+
+  /* === Dark gradient ped === */
+  --color-gradient-ped-blur-1: var(--color-ped);
+  --color-gradient-ped-blur-2: var(--color-ped-darken-3);
+  --color-gradient-ped-blur-3: var(--color-ped-darken-5);
+  --color-gradient-ped-bg-1: var(--color-ped-darken-4);
+  --color-gradient-ped-bg-2: var(--color-yellow-darken-6);
+
+  /* === Dark gradient prev === */
+  --color-gradient-prev-blur-1: var(--color-prev-lighten-1);
+  --color-gradient-prev-blur-2: var(--color-prev);
+  --color-gradient-prev-blur-3: var(--color-prev-darken-1);
+  --color-gradient-prev-bg-1: var(--color-prev-darken-2);
+  --color-gradient-prev-bg-2: var(--color-prev-darken-4);
+
+  /* === Dark gradient r1 === */
+  --color-gradient-r1-blur-1: var(--color-secondary);
+  --color-gradient-r1-blur-2: var(--color-primary-lighten-1);
+  --color-gradient-r1-blur-3: var(--color-primary-lighten-2);
+  --color-gradient-r1-bg-1: var(--color-primary);
+  --color-gradient-r1-bg-2: var(--color-primary-darken-2);
+
+  /* === Dark gradient rplus === */
+  --color-gradient-rplus-blur-1: var(--color-primary-lighten-5);
+  --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
+  --color-gradient-rplus-blur-3: var(--color-primary-lighten-1);
+  --color-gradient-rplus-bg-1: var(--color-primary);
+  --color-gradient-rplus-bg-2: var(--color-primary-darken-2);
+
+  /* === Dark gradient pt === */
+  --color-gradient-pt-blur-1: var(--color-secondary);
+  --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
+  --color-gradient-pt-blur-3: var(--color-secondary-darken-3);
+  --color-gradient-pt-bg-1: var(--color-gray-800);
+  --color-gradient-pt-bg-2: var(--color-gray-900);
+}