toolctrl-labs/Dashboard
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Dashboard/ui/theme.css
T
dejanandClaude Opus 5 b8bf987d0e feat(dashboard): Analytics-Dashboard als Gestaltungsvorlage zur Übergabe 
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen
SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung,
nicht der Produktivbetrieb.

Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten),
26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein
deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026).

Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner
(Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und
IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste
Abweichungen stehen in docs/HERKUNFT.md.

Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM,
KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in
HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
2026-08-29 17:25:20 +02:00

893 lines
37 KiB
CSS
Raw Permalink Blame History

@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* primitives-color-white */
--color-white-0: rgb(255 255 255 / 0);
--color-white-100: rgb(255 255 255 / 0.05);
--color-white-200: rgb(255 255 255 / 0.1);
--color-white-300: rgb(255 255 255 / 0.2);
--color-white-400: rgb(255 255 255 / 0.4);
--color-white-500: rgb(255 255 255 / 0.7);
--color-white-600: rgb(255 255 255 / 0.8);
--color-white-700: rgb(255 255 255 / 0.85);
--color-white-800: rgb(255 255 255 / 0.9);
--color-white-900: rgb(255 255 255 / 0.95);
--color-white-1000: rgb(255 255 255);
/* primitives-transparent-sky */
--color-primitives-transparent-sky-400: rgb(7 145 240 / 0.4);
--color-primitives-transparent-sky-600: rgb(7 145 240 / 0.6);
/* primitives-color-black */
--color-black-0: rgb(0 0 0 / 0);
--color-black-100: rgb(0 0 0 / 0.05);
--color-black-200: rgb(0 0 0 / 0.1);
--color-black-300: rgb(0 0 0 / 0.2);
--color-black-400: rgb(0 0 0 / 0.4);
--color-black-500: rgb(0 0 0 / 0.7);
--color-black-600: rgb(0 0 0 / 0.8);
--color-black-700: rgb(0 0 0 / 0.85);
--color-black-800: rgb(0 0 0 / 0.9);
--color-black-900: rgb(0 0 0 / 0.95);
--color-black-1000: rgb(0 0 0);
/* primitives-color-grey */
--color-grey-0: rgb(250 250 250);
--color-grey-50: rgb(245 244 244);
--color-grey-100: rgb(240 240 240);
--color-grey-200: rgb(229 229 229);
--color-grey-300: rgb(206 206 207);
--color-grey-400: rgb(181 181 183);
--color-grey-500: rgb(157 157 160);
--color-grey-600: rgb(133 133 137);
--color-grey-700: rgb(109 109 113);
--color-grey-800: rgb(80 80 87);
--color-grey-850: rgb(55 55 62);
--color-grey-900: rgb(36 36 43);
--color-grey-950: rgb(17 17 20);
--color-grey-1000: rgb(0 0 0);
/* primitives-color-red */
--color-red-50: rgb(254 242 242);
--color-red-100: rgb(254 226 226);
--color-red-200: rgb(253 203 203);
--color-red-300: rgb(251 166 166);
--color-red-400: rgb(246 115 115);
--color-red-500: rgb(237 70 70);
--color-red-600: rgb(218 40 40);
--color-red-700: rgb(197 32 32);
--color-red-800: rgb(152 28 28);
--color-red-900: rgb(126 30 30);
--color-red-1000: rgb(68 11 11);
/* primitives-color-orange */
--color-orange-50: rgb(255 244 237);
--color-orange-100: rgb(255 231 212);
--color-orange-200: rgb(255 202 168);
--color-orange-300: rgb(255 165 112);
--color-orange-400: rgb(255 116 55);
--color-orange-500: rgb(255 90 31);
--color-orange-600: rgb(240 52 6);
--color-orange-700: rgb(199 35 7);
--color-orange-800: rgb(158 29 14);
--color-orange-900: rgb(127 28 15);
--color-orange-1000: rgb(69 10 5);
/* primitives-color-yellow */
--color-yellow-50: rgb(253 251 233);
--color-yellow-100: rgb(252 246 197);
--color-yellow-200: rgb(250 235 142);
--color-yellow-300: rgb(246 216 78);
--color-yellow-400: rgb(241 194 27);
--color-yellow-500: rgb(225 171 17);
--color-yellow-600: rgb(194 132 12);
--color-yellow-700: rgb(155 94 13);
--color-yellow-800: rgb(128 75 19);
--color-yellow-900: rgb(109 61 22);
--color-yellow-1000: rgb(64 31 8);
/* primitives-brand */
--color-brand-0: rgb(255 254 247);
--color-brand-50: rgb(254 249 230);
--color-brand-100: rgb(253 240 192);
--color-brand-200: rgb(252 228 138);
--color-brand-300: rgb(248 213 90);
--color-brand-400: rgb(245 200 58);
--color-brand-500: rgb(243 188 44);
--color-brand-600: rgb(241 183 41);
--color-brand-700: rgb(204 147 24);
--color-brand-800: rgb(166 114 16);
--color-brand-900: rgb(122 83 11);
--color-brand-950: rgb(94 63 8);
--color-brand-1000: rgb(59 37 4);
/* primitives-color-pear */
--color-pear-50: rgb(253 253 232);
--color-pear-100: rgb(248 250 205);
--color-pear-200: rgb(239 244 162);
--color-pear-300: rgb(224 235 107);
--color-pear-400: rgb(208 223 73);
--color-pear-500: rgb(176 195 31);
--color-pear-600: rgb(137 155 21);
--color-pear-700: rgb(103 118 21);
--color-pear-800: rgb(82 94 22);
--color-pear-900: rgb(70 80 23);
--color-pear-1000: rgb(36 44 7);
/* primitives-color-lime */
--color-lime-50: rgb(247 254 231);
--color-lime-100: rgb(236 252 203);
--color-lime-200: rgb(217 249 157);
--color-lime-300: rgb(190 242 100);
--color-lime-400: rgb(163 230 53);
--color-lime-500: rgb(132 204 22);
--color-lime-600: rgb(101 163 13);
--color-lime-700: rgb(77 124 15);
--color-lime-800: rgb(63 98 18);
--color-lime-900: rgb(54 83 20);
--color-lime-1000: rgb(26 46 5);
/* primitives-color-green */
--color-green-50: rgb(240 253 243);
--color-green-100: rgb(220 252 228);
--color-green-200: rgb(186 248 203);
--color-green-300: rgb(133 240 163);
--color-green-400: rgb(72 224 115);
--color-green-500: rgb(32 197 79);
--color-green-600: rgb(21 164 62);
--color-green-700: rgb(20 129 52);
--color-green-800: rgb(21 102 45);
--color-green-900: rgb(19 84 40);
--color-green-1000: rgb(5 46 19);
/* primitives-color-teal */
--color-teal-50: rgb(239 254 252);
--color-teal-100: rgb(200 255 247);
--color-teal-200: rgb(144 255 238);
--color-teal-300: rgb(81 247 229);
--color-teal-400: rgb(29 228 213);
--color-teal-500: rgb(5 199 187);
--color-teal-600: rgb(0 161 154);
--color-teal-700: rgb(5 128 124);
--color-teal-800: rgb(10 101 99);
--color-teal-900: rgb(14 83 82);
--color-teal-1000: rgb(0 50 51);
/* primitives-color-ocean */
--color-ocean-50: rgb(240 250 255);
--color-ocean-100: rgb(225 244 253);
--color-ocean-200: rgb(188 234 251);
--color-ocean-300: rgb(129 219 248);
--color-ocean-400: rgb(66 201 242);
--color-ocean-500: rgb(21 177 226);
--color-ocean-600: rgb(8 144 193);
--color-ocean-700: rgb(8 115 156);
--color-ocean-800: rgb(11 97 129);
--color-ocean-900: rgb(15 80 107);
--color-ocean-1000: rgb(10 52 71);
/* primitives-color-sky */
--color-sky-50: rgb(239 247 255);
--color-sky-100: rgb(227 241 255);
--color-sky-200: rgb(184 224 255);
--color-sky-300: rgb(121 199 255);
--color-sky-400: rgb(50 171 254);
--color-sky-500: rgb(7 145 240);
--color-sky-600: rgb(0 113 206);
--color-sky-700: rgb(0 90 166);
--color-sky-800: rgb(3 77 137);
--color-sky-900: rgb(9 65 113);
--color-sky-1000: rgb(6 40 75);
/* primitives-color-blue */
--color-blue-50: rgb(232 247 255);
--color-blue-100: rgb(213 239 255);
--color-blue-200: rgb(179 223 255);
--color-blue-300: rgb(133 199 255);
--color-blue-400: rgb(86 160 255);
--color-blue-500: rgb(47 121 255);
--color-blue-600: rgb(12 75 255);
--color-blue-700: rgb(0 59 235);
--color-blue-800: rgb(6 59 205);
--color-blue-900: rgb(16 58 159);
--color-blue-1000: rgb(10 32 92);
/* primitives-color-indigo */
--color-indigo-50: rgb(245 244 255);
--color-indigo-100: rgb(232 233 255);
--color-indigo-200: rgb(213 217 255);
--color-indigo-300: rgb(179 184 255);
--color-indigo-400: rgb(136 139 253);
--color-indigo-500: rgb(102 102 255);
--color-indigo-600: rgb(72 53 242);
--color-indigo-700: rgb(57 35 222);
--color-indigo-800: rgb(47 29 186);
--color-indigo-900: rgb(41 26 152);
--color-indigo-1000: rgb(0 0 102);
/* primitives-color-violet */
--color-violet-50: rgb(249 245 255);
--color-violet-100: rgb(240 231 255);
--color-violet-200: rgb(228 212 255);
--color-violet-300: rgb(207 178 255);
--color-violet-400: rgb(177 128 255);
--color-violet-500: rgb(138 63 252);
--color-violet-600: rgb(124 45 240);
--color-violet-700: rgb(105 28 212);
--color-violet-800: rgb(90 29 172);
--color-violet-900: rgb(75 25 138);
--color-violet-1000: rgb(48 4 103);
/* primitives-color-fuchsia */
--color-fuchsia-50: rgb(253 244 255);
--color-fuchsia-100: rgb(250 232 255);
--color-fuchsia-200: rgb(245 208 254);
--color-fuchsia-300: rgb(240 171 252);
--color-fuchsia-400: rgb(232 121 249);
--color-fuchsia-500: rgb(217 70 239);
--color-fuchsia-600: rgb(192 38 211);
--color-fuchsia-700: rgb(162 28 175);
--color-fuchsia-800: rgb(134 25 143);
--color-fuchsia-900: rgb(112 26 117);
--color-fuchsia-1000: rgb(74 4 78);
/* primitives-color-pink */
--color-pink-50: rgb(253 242 248);
--color-pink-100: rgb(252 231 243);
--color-pink-200: rgb(251 207 232);
--color-pink-300: rgb(249 168 212);
--color-pink-400: rgb(244 114 182);
--color-pink-500: rgb(236 72 153);
--color-pink-600: rgb(219 39 119);
--color-pink-700: rgb(190 24 93);
--color-pink-800: rgb(157 23 77);
--color-pink-900: rgb(131 24 67);
--color-pink-1000: rgb(80 7 36);
/* primitives-color-sand */
--color-sand-50: rgb(248 246 244);
--color-sand-100: rgb(237 233 227);
--color-sand-200: rgb(222 214 202);
--color-sand-300: rgb(200 186 169);
--color-sand-400: rgb(177 155 134);
--color-sand-500: rgb(161 133 110);
--color-sand-600: rgb(148 117 98);
--color-sand-700: rgb(124 96 82);
--color-sand-800: rgb(102 79 70);
--color-sand-900: rgb(83 66 59);
--color-sand-1000: rgb(44 34 30);
/* primitives-color-brown */
--color-brown-50: rgb(247 244 239);
--color-brown-100: rgb(235 227 214);
--color-brown-200: rgb(217 200 175);
--color-brown-300: rgb(194 166 130);
--color-brown-400: rgb(176 137 95);
--color-brown-500: rgb(161 119 81);
--color-brown-600: rgb(138 95 68);
--color-brown-700: rgb(111 74 57);
--color-brown-800: rgb(95 63 52);
--color-brown-900: rgb(78 52 46);
--color-brown-1000: rgb(47 29 25);
/* color-roles-neutral */
--color-neutral-white: var(--color-grey-0);
--color-neutral-50: var(--color-grey-50);
--color-neutral-100: var(--color-grey-100);
--color-neutral-200: var(--color-grey-200);
--color-neutral-300: var(--color-grey-300);
--color-neutral-400: var(--color-grey-400);
--color-neutral-500: var(--color-grey-500);
--color-neutral-600: var(--color-grey-600);
--color-neutral-700: var(--color-grey-700);
--color-neutral-800: var(--color-grey-800);
--color-neutral-850: var(--color-grey-850);
--color-neutral-900: var(--color-grey-900);
--color-neutral-950: var(--color-grey-950);
--color-neutral-black: var(--color-grey-1000);
/* color-roles-transparent */
--color-transparent-black-0: var(--color-black-0);
--color-transparent-black-100: var(--color-black-100);
--color-transparent-black-200: var(--color-black-200);
--color-transparent-black-300: var(--color-black-300);
--color-transparent-black-400: var(--color-black-400);
--color-transparent-black-500: var(--color-black-500);
--color-transparent-black-600: var(--color-black-600);
--color-transparent-black-700: var(--color-black-700);
--color-transparent-black-800: var(--color-black-800);
--color-transparent-black-900: var(--color-black-900);
--color-transparent-white-0: var(--color-white-0);
--color-transparent-white-100: var(--color-white-100);
--color-transparent-white-200: var(--color-white-200);
--color-transparent-white-300: var(--color-white-300);
--color-transparent-white-400: var(--color-white-400);
--color-transparent-white-500: var(--color-white-500);
--color-transparent-white-600: var(--color-white-600);
--color-transparent-white-700: var(--color-white-700);
--color-transparent-white-800: var(--color-white-800);
--color-transparent-white-900: var(--color-white-900);
/* color-roles-feedback */
--color-feedback-information-50: var(--color-ocean-50);
--color-feedback-information-100: var(--color-ocean-100);
--color-feedback-information-200: var(--color-ocean-200);
--color-feedback-information-300: var(--color-ocean-300);
--color-feedback-information-400: var(--color-ocean-400);
--color-feedback-information-500: var(--color-ocean-500);
--color-feedback-information-600: var(--color-ocean-600);
--color-feedback-information-700: var(--color-ocean-700);
--color-feedback-information-800: var(--color-ocean-800);
--color-feedback-information-900: var(--color-ocean-900);
--color-feedback-information-1000: var(--color-ocean-1000);
--color-feedback-negative-50: var(--color-red-50);
--color-feedback-negative-100: var(--color-red-100);
--color-feedback-negative-200: var(--color-red-200);
--color-feedback-negative-300: var(--color-red-300);
--color-feedback-negative-400: var(--color-red-400);
--color-feedback-negative-500: var(--color-red-500);
--color-feedback-negative-600: var(--color-red-600);
--color-feedback-negative-700: var(--color-red-700);
--color-feedback-negative-800: var(--color-red-800);
--color-feedback-negative-900: var(--color-red-900);
--color-feedback-negative-1000: var(--color-red-1000);
--color-feedback-positive-50: var(--color-green-50);
--color-feedback-positive-100: var(--color-green-100);
--color-feedback-positive-200: var(--color-green-200);
--color-feedback-positive-300: var(--color-green-300);
--color-feedback-positive-400: var(--color-green-400);
--color-feedback-positive-500: var(--color-green-500);
--color-feedback-positive-600: var(--color-green-600);
--color-feedback-positive-700: var(--color-green-700);
--color-feedback-positive-800: var(--color-green-800);
--color-feedback-positive-900: var(--color-green-900);
--color-feedback-positive-1000: var(--color-green-1000);
--color-feedback-warning-50: var(--color-yellow-50);
--color-feedback-warning-100: var(--color-yellow-100);
--color-feedback-warning-200: var(--color-yellow-200);
--color-feedback-warning-300: var(--color-yellow-300);
--color-feedback-warning-400: var(--color-yellow-400);
--color-feedback-warning-500: var(--color-yellow-500);
--color-feedback-warning-600: var(--color-yellow-600);
--color-feedback-warning-700: var(--color-yellow-700);
--color-feedback-warning-800: var(--color-yellow-800);
--color-feedback-warning-900: var(--color-yellow-900);
--color-feedback-warning-1000: var(--color-yellow-1000);
/* color-roles-feedback-focus */
--color-feedback-focus-400: var(--color-primitives-transparent-sky-400);
--color-feedback-focus-600: var(--color-primitives-transparent-sky-600);
/* color-roles-brand */
--color-brand-primary-50: var(--color-grey-0);
--color-brand-primary-100: var(--color-grey-100);
--color-brand-primary-200: var(--color-grey-200);
--color-brand-primary-300: var(--color-grey-300);
--color-brand-primary-400: var(--color-grey-400);
--color-brand-primary-500: var(--color-grey-500);
--color-brand-primary-600: var(--color-grey-600);
--color-brand-primary-700: var(--color-grey-700);
--color-brand-primary-800: var(--color-grey-800);
--color-brand-primary-900: var(--color-grey-900);
--color-brand-primary-1000: var(--color-grey-1000);
--color-brand-secondary-50: var(--color-sky-50);
--color-brand-secondary-100: var(--color-sky-100);
--color-brand-secondary-200: var(--color-sky-200);
--color-brand-secondary-300: var(--color-sky-300);
--color-brand-secondary-400: var(--color-sky-400);
--color-brand-secondary-500: var(--color-sky-500);
--color-brand-secondary-600: var(--color-sky-600);
--color-brand-secondary-700: var(--color-sky-700);
--color-brand-secondary-800: var(--color-sky-800);
--color-brand-secondary-900: var(--color-sky-900);
--color-brand-secondary-1000: var(--color-sky-1000);
/* color-roles-ui */
--color-ui-blue-50: var(--color-blue-50);
--color-ui-blue-100: var(--color-blue-100);
--color-ui-blue-200: var(--color-blue-200);
--color-ui-blue-300: var(--color-blue-300);
--color-ui-blue-400: var(--color-blue-400);
--color-ui-blue-500: var(--color-blue-500);
--color-ui-blue-600: var(--color-blue-600);
--color-ui-blue-700: var(--color-blue-700);
--color-ui-blue-800: var(--color-blue-800);
--color-ui-blue-900: var(--color-blue-900);
--color-ui-blue-1000: var(--color-blue-1000);
--color-ui-green-50: var(--color-green-50);
--color-ui-green-100: var(--color-green-100);
--color-ui-green-200: var(--color-green-200);
--color-ui-green-300: var(--color-green-300);
--color-ui-green-400: var(--color-green-400);
--color-ui-green-500: var(--color-green-500);
--color-ui-green-600: var(--color-green-600);
--color-ui-green-700: var(--color-green-700);
--color-ui-green-800: var(--color-green-800);
--color-ui-green-900: var(--color-green-900);
--color-ui-green-1000: var(--color-green-1000);
--color-ui-purple-50: var(--color-violet-50);
--color-ui-purple-100: var(--color-violet-100);
--color-ui-purple-200: var(--color-violet-200);
--color-ui-purple-300: var(--color-violet-300);
--color-ui-purple-400: var(--color-violet-400);
--color-ui-purple-500: var(--color-violet-500);
--color-ui-purple-600: var(--color-violet-600);
--color-ui-purple-700: var(--color-violet-700);
--color-ui-purple-800: var(--color-violet-800);
--color-ui-purple-900: var(--color-violet-900);
--color-ui-purple-1000: var(--color-violet-1000);
--color-ui-red-50: var(--color-red-50);
--color-ui-red-100: var(--color-red-100);
--color-ui-red-200: var(--color-red-200);
--color-ui-red-300: var(--color-red-300);
--color-ui-red-400: var(--color-red-400);
--color-ui-red-500: var(--color-red-500);
--color-ui-red-600: var(--color-red-600);
--color-ui-red-700: var(--color-red-700);
--color-ui-red-800: var(--color-red-800);
--color-ui-red-900: var(--color-red-900);
--color-ui-red-1000: var(--color-red-1000);
--color-ui-yellow-50: var(--color-yellow-50);
--color-ui-yellow-100: var(--color-yellow-100);
--color-ui-yellow-200: var(--color-yellow-200);
--color-ui-yellow-300: var(--color-yellow-300);
--color-ui-yellow-400: var(--color-yellow-400);
--color-ui-yellow-500: var(--color-yellow-500);
--color-ui-yellow-600: var(--color-yellow-600);
--color-ui-yellow-700: var(--color-yellow-700);
--color-ui-yellow-800: var(--color-yellow-800);
--color-ui-yellow-900: var(--color-yellow-900);
--color-ui-yellow-1000: var(--color-yellow-1000);
/* themes-brand-solid */
--color-brand-solid-default: var(--color-brand-primary-900);
--color-brand-solid-hover: var(--color-brand-primary-700);
--color-brand-solid-active: var(--color-brand-primary-800);
--color-brand-secondary-solid-default: var(--color-brand-secondary-500);
--color-brand-secondary-solid-hover: var(--color-brand-secondary-400);
--color-brand-secondary-solid-active: var(--color-brand-secondary-600);
/* themes-toolctrl-subtle */
--color-brand-subtle-default: var(--color-brand-primary-200);
--color-brand-subtle-hover: var(--color-brand-primary-300);
--color-brand-subtle-active: var(--color-brand-primary-400);
--color-brand-secondary-subtle-default: var(--color-brand-secondary-100);
--color-brand-secondary-subtle-hover: var(--color-brand-secondary-200);
--color-brand-secondary-subtle-active: var(--color-brand-secondary-300);
/* theme-text-neutral */
--color-text-neutral-primary: var(--color-neutral-900);
--color-text-neutral-secondary: var(--color-neutral-800);
/* a11y: neutral-600 auf Weiss = 3,68:1 und damit unter WCAG AA.
neutral-700 (5,15:1) — identisch zum Zielsystem HiveGrid Cloud. */
--color-text-neutral-tertiary: var(--color-neutral-700);
--color-text-neutral-subtle: var(--color-neutral-300);
--color-text-neutral-disabled: var(--color-neutral-300);
--color-text-neutral-on-solid: var(--color-neutral-white);
--color-text-neutral-on-subtle: var(--color-neutral-900);
/* theme-text-feedback */
--color-text-feedback-neutral: var(--color-neutral-950);
--color-text-feedback-information: var(--color-feedback-information-700);
--color-text-feedback-warning: var(--color-feedback-warning-700);
--color-text-feedback-negative: var(--color-feedback-negative-700);
--color-text-feedback-positive: var(--color-feedback-positive-700);
--color-text-feedback-link-default: var(--color-feedback-information-700);
--color-text-feedback-link-hover: var(--color-feedback-information-700);
--color-text-feedback-link-active: var(--color-feedback-information-900);
/* theme-text-ui */
--color-text-ui-blue: var(--color-ui-blue-700);
--color-text-ui-yellow: var(--color-ui-yellow-700);
--color-text-ui-red: var(--color-ui-red-700);
--color-text-ui-green: var(--color-ui-green-700);
--color-text-ui-purple: var(--color-ui-purple-700);
/* theme-icon-neutral */
--color-icon-neutral-primary: var(--color-neutral-900);
--color-icon-neutral-secondary: var(--color-neutral-800);
--color-icon-neutral-tertiary: var(--color-neutral-600);
--color-icon-neutral-subtle: var(--color-neutral-300);
--color-icon-neutral-disabled: var(--color-neutral-300);
--color-icon-neutral-on-solid: var(--color-neutral-white);
--color-icon-neutral-on-subtle: var(--color-neutral-900);
/* theme-icon-feedback */
--color-icon-feedback-neutral: var(--color-neutral-900);
--color-icon-feedback-information: var(--color-feedback-information-700);
--color-icon-feedback-warning: var(--color-feedback-warning-700);
--color-icon-feedback-negative: var(--color-feedback-negative-700);
--color-icon-feedback-positive: var(--color-feedback-positive-700);
--color-icon-feedback-link-default: var(--color-feedback-information-600);
--color-icon-feedback-link-hover: var(--color-feedback-information-700);
--color-icon-feedback-link-active: var(--color-feedback-information-900);
/* theme-icon-ui */
--color-icon-ui-blue: var(--color-ui-blue-700);
--color-icon-ui-yellow: var(--color-ui-yellow-700);
--color-icon-ui-red: var(--color-ui-red-700);
--color-icon-ui-green: var(--color-ui-green-700);
--color-icon-ui-purple: var(--color-ui-purple-700);
/* theme-surface-neutral */
--color-surface-neutral-primary: var(--color-neutral-50);
--color-surface-neutral-secondary: var(--color-neutral-white);
--color-surface-neutral-tertiary: var(--color-neutral-100);
--color-surface-neutral-modal: var(--color-neutral-50);
--color-surface-neutral-overlay: var(--color-transparent-black-400);
--color-surface-neutral-disabled: var(--color-neutral-100);
/* theme-surface-feedback-solid */
--color-surface-feedback-solid-positive-default: var(
--color-feedback-positive-600
);
--color-surface-feedback-solid-positive-hover: var(
--color-feedback-positive-500
);
--color-surface-feedback-solid-positive-active: var(
--color-feedback-positive-700
);
--color-surface-feedback-solid-negative-default: var(
--color-feedback-negative-600
);
--color-surface-feedback-solid-negative-hover: var(
--color-feedback-negative-500
);
--color-surface-feedback-solid-negative-active: var(
--color-feedback-negative-700
);
--color-surface-feedback-solid-warning: var(--color-feedback-warning-600);
--color-surface-feedback-solid-warning-hover: var(
--color-feedback-warning-500
);
--color-surface-feedback-solid-warning-active: var(
--color-feedback-warning-700
);
--color-surface-feedback-solid-information: var(
--color-feedback-information-600
);
--color-surface-feedback-solid-information-hover: var(
--color-feedback-information-500
);
--color-surface-feedback-solid-information-active: var(
--color-feedback-information-700
);
--color-surface-feedback-solid-neutral: var(--color-neutral-800);
--color-surface-feedback-solid-neutral-hover: var(--color-neutral-700);
--color-surface-feedback-solid-neutral-active: var(--color-neutral-900);
/* theme-surface-feedback-subtle */
--color-surface-feedback-subtle-positive: var(--color-feedback-positive-100);
--color-surface-feedback-subtle-positive-hover: var(
--color-feedback-positive-200
);
--color-surface-feedback-subtle-positive-active: var(
--color-feedback-positive-200
);
--color-surface-feedback-subtle-negative: var(--color-feedback-negative-100);
--color-surface-feedback-subtle-negative-hover: var(
--color-feedback-negative-200
);
--color-surface-feedback-subtle-negative-active: var(
--color-feedback-negative-300
);
--color-surface-feedback-subtle-warning: var(--color-feedback-warning-100);
--color-surface-feedback-subtle-warning-hover: var(
--color-feedback-warning-200
);
--color-surface-feedback-subtle-warning-active: var(
--color-feedback-warning-300
);
--color-surface-feedback-subtle-information: var(
--color-feedback-information-100
);
--color-surface-feedback-subtle-information-hover: var(
--color-feedback-information-200
);
--color-surface-feedback-subtle-information-active: var(
--color-feedback-information-300
);
--color-surface-feedback-subtle-neutral: var(--color-neutral-100);
--color-surface-feedback-subtle-neutral-hover: var(--color-neutral-200);
--color-surface-feedback-subtle-neutral-active: var(--color-neutral-300);
/* theme-surface-ui-solid */
--color-surface-ui-solid-green-default: var(--color-ui-green-600);
--color-surface-ui-solid-green-hover: var(--color-ui-green-500);
--color-surface-ui-solid-green-active: var(--color-ui-green-700);
--color-surface-ui-solid-red-default: var(--color-ui-red-600);
--color-surface-ui-solid-red-hover: var(--color-ui-red-500);
--color-surface-ui-solid-red-active: var(--color-ui-red-700);
--color-surface-ui-solid-yellow-default: var(--color-ui-yellow-600);
--color-surface-ui-solid-yellow-hover: var(--color-ui-yellow-500);
--color-surface-ui-solid-yellow-active: var(--color-ui-yellow-700);
--color-surface-ui-solid-blue-default: var(--color-ui-blue-600);
--color-surface-ui-solid-blue-hover: var(--color-ui-blue-500);
--color-surface-ui-solid-blue-active: var(--color-ui-blue-700);
--color-surface-ui-solid-purple-default: var(--color-ui-purple-600);
--color-surface-ui-solid-purple-hover: var(--color-ui-purple-500);
--color-surface-ui-solid-purple-active: var(--color-ui-purple-700);
/* theme-surface-ui-subtle */
--color-surface-ui-subtle-green-default: var(--color-ui-green-100);
--color-surface-ui-subtle-green-hover: var(--color-ui-green-200);
--color-surface-ui-subtle-green-active: var(--color-ui-green-300);
--color-surface-ui-subtle-red-default: var(--color-ui-red-100);
--color-surface-ui-subtle-red-hover: var(--color-ui-red-200);
--color-surface-ui-subtle-red-active: var(--color-ui-red-300);
--color-surface-ui-subtle-yellow-default: var(--color-ui-yellow-100);
--color-surface-ui-subtle-yellow-hover: var(--color-ui-yellow-200);
--color-surface-ui-subtle-yellow-active: var(--color-ui-yellow-300);
--color-surface-ui-subtle-blue-default: var(--color-ui-blue-100);
--color-surface-ui-subtle-blue-hover: var(--color-ui-blue-200);
--color-surface-ui-subtle-blue-active: var(--color-ui-blue-300);
--color-surface-ui-subtle-purple-default: var(--color-ui-purple-100);
--color-surface-ui-subtle-purple-hover: var(--color-ui-purple-200);
--color-surface-ui-subtle-purple-active: var(--color-ui-purple-300);
/* theme-border-neutral */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-400);
--color-border-disabled: var(--color-neutral-200);
--color-border-on-primary: var(--color-neutral-white);
/* theme-border-solid */
--color-border-positive-solid: var(--color-feedback-positive-600);
--color-border-negative-solid: var(--color-feedback-negative-600);
--color-border-warning-solid: var(--color-feedback-warning-500);
--color-border-information-solid: var(--color-feedback-information-600);
/* theme-border-subtle */
--color-border-positive-subtle: var(--color-feedback-positive-200);
--color-border-negative-subtle: var(--color-feedback-negative-200);
--color-border-warning-subtle: var(--color-feedback-warning-200);
--color-border-information-subtle: var(--color-feedback-information-200);
/* brand-surface-solid */
--color-brand-brand-surface-solid-default: var(--color-brand-solid-default);
--color-brand-brand-surface-solid-hover: var(--color-brand-solid-hover);
--color-brand-brand-surface-solid-active: var(--color-brand-solid-active);
--color-brand-brand-secondary-surface-solid-default: var(
--color-brand-secondary-solid-default
);
--color-brand-brand-secondary-surface-solid-hover: var(
--color-brand-secondary-solid-hover
);
--color-brand-brand-secondary-surface-solid-active: var(
--color-brand-secondary-solid-active
);
/* brand-toolctrl-surface-subtle */
--color-brand-brand-surface-subtle-default: var(--color-brand-subtle-default);
--color-brand-brand-surface-subtle-hover: var(--color-brand-subtle-hover);
--color-brand-brand-surface-subtle-active: var(--color-brand-subtle-active);
--color-brand-brand-secondary-surface-subtle-default: var(
--color-brand-secondary-subtle-default
);
--color-brand-brand-secondary-surface-subtle-hover: var(
--color-brand-secondary-subtle-hover
);
--color-brand-brand-secondary-surface-subtle-active: var(
--color-brand-secondary-subtle-active
);
/* brand-toolctrl-border-solid */
--color-brand-brand-border-solid-default: var(--color-brand-solid-default);
--color-brand-brand-border-solid-hover: var(--color-brand-solid-hover);
--color-brand-brand-border-solid-active: var(--color-brand-solid-active);
--color-brand-brand-secondary-border-solid-default: var(
--color-brand-secondary-solid-default
);
--color-brand-brand-secondary-border-solid-hover: var(
--color-brand-secondary-solid-hover
);
--color-brand-brand-secondary-border-solid-active: var(
--color-brand-secondary-solid-active
);
/* brand-toolctrl-border-subtle */
--color-brand-brand-border-subtle-default: var(--color-brand-subtle-default);
--color-brand-brand-border-subtle-hover: var(--color-brand-subtle-hover);
--color-brand-brand-border-subtle-active: var(--color-brand-subtle-active);
--color-brand-brand-secondary-border-subtle-default: var(
--color-brand-secondary-subtle-default
);
--color-brand-brand-secondary-border-subtle-hover: var(
--color-brand-secondary-subtle-hover
);
--color-brand-brand-secondary-border-subtle-active: var(
--color-brand-secondary-subtle-active
);
/* Fonts */
--text-title-hero: 72px;
--text-title-hero--font-weight: 600;
--text-title-hero--letter-spacing: 0em;
--text-title-hero--line-height: 72px;
--text-title-page: 48px;
--text-title-page--font-weight: 600;
--text-title-page--letter-spacing: 0em;
--text-title-page--line-height: 56px;
--text-subtitle: 32px;
--text-subtitle--font-weight: 600;
--text-subtitle--letter-spacing: 0em;
--text-subtitle--line-height: 40px;
--text-heading-: 24px;
--text-heading---font-weight: 500;
--text-heading---letter-spacing: 0em;
--text-heading---line-height: 32px;
--text-body-extra-small-regular-150: 12px;
--text-body-extra-small-regular-150--font-weight: 400;
--text-body-extra-small-regular-150--letter-spacing: 0em;
--text-body-extra-small-regular-150--line-height: 18px;
--text-body-small-medium-150: 14px;
--text-body-small-medium-150--font-weight: 500;
--text-body-small-medium-150--letter-spacing: 0em;
--text-body-small-medium-150--line-height: 21px;
--text-body-default-medium-150: 16px;
--text-body-default-medium-150--font-weight: 500;
--text-body-default-medium-150--letter-spacing: 0em;
--text-body-default-medium-150--line-height: 24px;
--text-body-large: 20px;
--text-body-large--font-weight: 500;
--text-body-large--letter-spacing: 0em;
--text-body-large--line-height: 24px;
--text-body-small-regular-150: 14px;
--text-body-small-regular-150--font-weight: 400;
--text-body-small-regular-150--letter-spacing: 0em;
--text-body-small-regular-150--line-height: 21px;
--text-body-default-regular-150: 16px;
--text-body-default-regular-150--font-weight: 400;
--text-body-default-regular-150--letter-spacing: 0em;
--text-body-default-regular-150--line-height: 24px;
--text-body-extra-small-medium-150: 12px;
--text-body-extra-small-medium-150--font-weight: 500;
--text-body-extra-small-medium-150--letter-spacing: 0em;
--text-body-extra-small-medium-150--line-height: 18px;
--text-body-extra-small-semibold-150: 12px;
--text-body-extra-small-semibold-150--font-weight: 600;
--text-body-extra-small-semibold-150--letter-spacing: 0em;
--text-body-extra-small-semibold-150--line-height: 18px;
--text-body-small-semibold-150: 14px;
--text-body-small-semibold-150--font-weight: 600;
--text-body-small-semibold-150--letter-spacing: 0em;
--text-body-small-semibold-150--line-height: 21px;
--text-body-default-semibold-150: 16px;
--text-body-default-semibold-150--font-weight: 600;
--text-body-default-semibold-150--letter-spacing: 0em;
--text-body-default-semibold-150--line-height: 24px;
--text-body-small-medium-0: 14px;
--text-body-small-medium-0--font-weight: 500;
--text-body-small-medium-0--letter-spacing: 0em;
--text-body-small-medium-0--line-height: 15px;
--text-body-extra-small-semibold-0: 12px;
--text-body-extra-small-semibold-0--font-weight: 600;
--text-body-extra-small-semibold-0--letter-spacing: 0em;
--text-body-extra-small-semibold-0--line-height: 13px;
--text-body-extra-small-medium-0: 12px;
--text-body-extra-small-medium-0--font-weight: 500;
--text-body-extra-small-medium-0--letter-spacing: 0em;
--text-body-extra-small-medium-0--line-height: 13px;
--text-body-extra-small-regular-0: 12px;
--text-body-extra-small-regular-0--font-weight: 400;
--text-body-extra-small-regular-0--letter-spacing: 0em;
--text-body-extra-small-regular-0--line-height: 13px;
--text-body-small-regular-0: 14px;
--text-body-small-regular-0--font-weight: 400;
--text-body-small-regular-0--letter-spacing: 0em;
--text-body-small-regular-0--line-height: 15px;
--text-body-small-semibold-0: 14px;
--text-body-small-semibold-0--font-weight: 600;
--text-body-small-semibold-0--letter-spacing: 0em;
--text-body-small-semibold-0--line-height: 15px;
--text-body-default-regular-0: 16px;
--text-body-default-regular-0--font-weight: 400;
--text-body-default-regular-0--letter-spacing: 0em;
--text-body-default-regular-0--line-height: 17px;
--text-body-default-medium-0: 16px;
--text-body-default-medium-0--font-weight: 500;
--text-body-default-medium-0--letter-spacing: 0em;
--text-body-default-medium-0--line-height: 17px;
--text-body-default-semibold-0: 16px;
--text-body-default-semibold-0--font-weight: 600;
--text-body-default-semibold-0--letter-spacing: 0em;
--text-body-default-semibold-0--line-height: 17px;
--text-body-large-0: 20px;
--text-body-large-0--font-weight: 500;
--text-body-large-0--letter-spacing: 0em;
--text-body-large-0--line-height: 21px;
--text-subtitle-0: 32px;
--text-subtitle-0--font-weight: 600;
--text-subtitle-0--letter-spacing: 0em;
--text-subtitle-0--line-height: 33px;
--text-heading-0: 24px;
--text-heading-0--font-weight: 500;
--text-heading-0--letter-spacing: 0em;
--text-heading-0--line-height: 25px;
/* Font families */
--font-title-hero: "Instrument Sans";
--font-title-page: "Instrument Sans";
--font-subtitle: "Instrument Sans";
--font-heading-: "Instrument Sans";
--font-body-extra-small-regular-150: "Instrument Sans";
--font-body-small-medium-150: "Instrument Sans";
--font-body-default-medium-150: "Instrument Sans";
--font-body-large: "Instrument Sans";
--font-body-small-regular-150: "Instrument Sans";
--font-body-default-regular-150: "Instrument Sans";
--font-body-extra-small-medium-150: "Instrument Sans";
--font-body-extra-small-semibold-150: "Instrument Sans";
--font-body-small-semibold-150: "Instrument Sans";
--font-body-default-semibold-150: "Instrument Sans";
--font-body-small-medium-0: "Instrument Sans";
--font-body-extra-small-semibold-0: "Instrument Sans";
--font-body-extra-small-medium-0: "Instrument Sans";
--font-body-extra-small-regular-0: "Instrument Sans";
--font-body-small-regular-0: "Instrument Sans";
--font-body-small-semibold-0: "Instrument Sans";
--font-body-default-regular-0: "Instrument Sans";
--font-body-default-medium-0: "Instrument Sans";
--font-body-default-semibold-0: "Instrument Sans";
--font-body-large-0: "Instrument Sans";
--font-subtitle-0: "Instrument Sans";
--font-heading-0: "Instrument Sans";
/* Box shadows */
--shadow-sm: 0px 1px 2px 0px rgb(0 0 0 / 0.08);
--shadow-default: 0px 1px 2px 0px rgb(0 0 0 / 0.08);
--shadow-md: 0px 4px 16px -2px rgb(0 0 0 / 0.08),
0px 2px 4px -1px rgb(0 0 0 / 0.08);
--shadow-lg: 0px 12px 32px -4px rgb(0 0 0 / 0.08),
0px 4px 8px -2px rgb(0 0 0 / 0.08);
--shadow-overlay: 0px 12px 32px -4px rgb(0 0 0 / 0.08),
0px 4px 8px -2px rgb(0 0 0 / 0.08);
--shadow-focus: 0px 0px 0px 3px rgb(7 145 240 / 0.4);
/* Border radiuses */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-round: 9999px;
/* Spacing */
--spacing-112: 28rem;
--spacing-144: 36rem;
--spacing-192: 48rem;
--spacing-256: 64rem;
--spacing-320: 80rem;
}
/* Container */
@utility container {
padding-left: 16px;
padding-right: 16px;
@media (width >= theme(--breakpoint-sm)) {
padding-left: calc((100vw + 16px - 640px) / 2);
padding-right: calc((100vw + 16px - 640px) / 2);
}
@media (width >= theme(--breakpoint-md)) {
padding-left: calc((100vw + 16px - 768px) / 2);
padding-right: calc((100vw + 16px - 768px) / 2);
}
@media (width >= theme(--breakpoint-lg)) {
padding-left: calc((100vw + 16px - 1024px) / 2);
padding-right: calc((100vw + 16px - 1024px) / 2);
}
@media (width >= theme(--breakpoint-xl)) {
padding-left: calc((100vw + 16px - 1280px) / 2);
padding-right: calc((100vw + 16px - 1280px) / 2);
}
@media (width >= theme(--breakpoint-2xl)) {
padding-left: calc((100vw + 16px - 1536px) / 2);
padding-right: calc((100vw + 16px - 1536px) / 2);
}
}
@custom-variant mobile (@media (max-width: 767px));
Reference in new issue View Git Blame Copy Permalink