@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/tokens.css

@@ -0,0 +1,654 @@
+/* @galaxy-io/dls tokens — generated by scripts/build-tokens.ts from src/theme/tokens/. Do not edit. */
+
+:root {
+  --gx-space-0: 0px;
+  --gx-space-2: 2px;
+  --gx-space-4: 4px;
+  --gx-space-8: 8px;
+  --gx-space-12: 12px;
+  --gx-space-16: 16px;
+  --gx-space-24: 24px;
+  --gx-space-32: 32px;
+  --gx-space-48: 48px;
+  --gx-radius-sm: 2px;
+  --gx-radius-md: 2px;
+  --gx-radius-lg: 4px;
+  --gx-radius-pill: 999px;
+  --gx-duration-fast: 75ms;
+  --gx-duration-base: 150ms;
+  --gx-z-dropdown: 1000;
+  --gx-z-drawer: 1100;
+  --gx-z-modal: 1200;
+  --gx-z-toast: 1300;
+  --gx-z-tooltip: 1400;
+  --gx-size-control-x-small: 20px;
+  --gx-size-control-small: 24px;
+  --gx-size-control-medium: 32px;
+  --gx-size-control-large: 36px;
+  --gx-size-control-x-large: 40px;
+  --gx-palette-red-100: #fef2f2;
+  --gx-palette-red-300: #fecaca;
+  --gx-palette-red-500: #ef4444;
+  --gx-palette-red-700: #991b1b;
+  --gx-palette-red-900: #450a0a;
+  --gx-palette-orange-100: #fff7ed;
+  --gx-palette-orange-300: #fed7aa;
+  --gx-palette-orange-500: #f97316;
+  --gx-palette-orange-700: #9a3412;
+  --gx-palette-orange-900: #431407;
+  --gx-palette-amber-100: #fffbeb;
+  --gx-palette-amber-300: #fde68a;
+  --gx-palette-amber-500: #f59e0b;
+  --gx-palette-amber-700: #92400e;
+  --gx-palette-amber-900: #451a03;
+  --gx-palette-yellow-100: #fefce8;
+  --gx-palette-yellow-300: #fef08a;
+  --gx-palette-yellow-500: #eab308;
+  --gx-palette-yellow-700: #854d0e;
+  --gx-palette-yellow-900: #422006;
+  --gx-palette-lime-100: #f7fee7;
+  --gx-palette-lime-300: #d9f99d;
+  --gx-palette-lime-500: #84cc16;
+  --gx-palette-lime-700: #3f6212;
+  --gx-palette-lime-900: #1a2e05;
+  --gx-palette-green-100: #f0fdf4;
+  --gx-palette-green-300: #bbf7d0;
+  --gx-palette-green-500: #22c55e;
+  --gx-palette-green-700: #166534;
+  --gx-palette-green-900: #052e16;
+  --gx-palette-emerald-100: #ecfdf5;
+  --gx-palette-emerald-300: #a7f3d0;
+  --gx-palette-emerald-500: #10b981;
+  --gx-palette-emerald-700: #065f46;
+  --gx-palette-emerald-900: #022c22;
+  --gx-palette-teal-100: #f0fdfa;
+  --gx-palette-teal-300: #99f6e4;
+  --gx-palette-teal-500: #14b8a6;
+  --gx-palette-teal-700: #115e59;
+  --gx-palette-teal-900: #042f2e;
+  --gx-palette-cyan-100: #ecfeff;
+  --gx-palette-cyan-300: #a5f3fc;
+  --gx-palette-cyan-500: #06b6d4;
+  --gx-palette-cyan-700: #155e75;
+  --gx-palette-cyan-900: #083344;
+  --gx-palette-sky-100: #f0f9ff;
+  --gx-palette-sky-300: #bae6fd;
+  --gx-palette-sky-500: #0ea5e9;
+  --gx-palette-sky-700: #075985;
+  --gx-palette-sky-900: #082f49;
+  --gx-palette-blue-100: #eff6ff;
+  --gx-palette-blue-300: #bfdbfe;
+  --gx-palette-blue-500: #3b82f6;
+  --gx-palette-blue-700: #1e40af;
+  --gx-palette-blue-900: #172554;
+  --gx-palette-indigo-100: #eef2ff;
+  --gx-palette-indigo-300: #c7d2fe;
+  --gx-palette-indigo-500: #6366f1;
+  --gx-palette-indigo-700: #3730a3;
+  --gx-palette-indigo-900: #1e1b4b;
+  --gx-palette-violet-100: #f5f3ff;
+  --gx-palette-violet-300: #ddd6fe;
+  --gx-palette-violet-500: #8b5cf6;
+  --gx-palette-violet-700: #5b21b6;
+  --gx-palette-violet-900: #2e1065;
+  --gx-palette-purple-100: #faf5ff;
+  --gx-palette-purple-300: #e9d5ff;
+  --gx-palette-purple-500: #a855f7;
+  --gx-palette-purple-700: #6b21a8;
+  --gx-palette-purple-900: #3b0764;
+  --gx-palette-fuchsia-100: #fdf4ff;
+  --gx-palette-fuchsia-300: #f5d0fe;
+  --gx-palette-fuchsia-500: #d946ef;
+  --gx-palette-fuchsia-700: #86198f;
+  --gx-palette-fuchsia-900: #4a044e;
+  --gx-palette-pink-100: #fdf2f8;
+  --gx-palette-pink-300: #fbcfe8;
+  --gx-palette-pink-500: #ec4899;
+  --gx-palette-pink-700: #9d174d;
+  --gx-palette-pink-900: #500724;
+  --gx-palette-rose-100: #fff1f2;
+  --gx-palette-rose-300: #fecdd3;
+  --gx-palette-rose-500: #f43f5e;
+  --gx-palette-rose-700: #9f1239;
+  --gx-palette-rose-900: #4c0519;
+}
+
+[data-gx-theme="dark"] {
+  --gx-color-background-base: #141415;
+  --gx-color-background-primary: #161617;
+  --gx-color-background-secondary: #1c1c1d;
+  --gx-color-background-tertiary: #222223;
+  --gx-color-background-hovered: #1d1d1e;
+  --gx-color-background-pressed: #242425;
+  --gx-color-background-selected: #303031;
+  --gx-color-background-disabled: #1c1c1d;
+  --gx-color-background-success: #142f23;
+  --gx-color-background-warning: #392c19;
+  --gx-color-background-error: #35131a;
+  --gx-color-background-red: #371c1d;
+  --gx-color-background-orange: #392315;
+  --gx-color-background-amber: #382a13;
+  --gx-color-background-yellow: #362d13;
+  --gx-color-background-lime: #263115;
+  --gx-color-background-green: #163021;
+  --gx-color-background-emerald: #132e26;
+  --gx-color-background-teal: #142e2c;
+  --gx-color-background-cyan: #122e34;
+  --gx-color-background-sky: #132b37;
+  --gx-color-background-blue: #1a2639;
+  --gx-color-background-indigo: #212138;
+  --gx-color-background-violet: #272039;
+  --gx-color-background-purple: #2c1e39;
+  --gx-color-background-fuchsia: #341c38;
+  --gx-color-background-pink: #371c2a;
+  --gx-color-background-rose: #381b21;
+  --gx-color-text-primary: #ffffff;
+  --gx-color-text-secondary: #bdbdbd;
+  --gx-color-text-tertiary: #9a9a9a;
+  --gx-color-text-disabled: #4d4d4d;
+  --gx-color-text-success: #19e184;
+  --gx-color-text-warning: #febc6c;
+  --gx-color-text-error: #fd6b6d;
+  --gx-color-text-red: #fe7f7e;
+  --gx-color-text-orange: #fe9b4e;
+  --gx-color-text-amber: #fec14f;
+  --gx-color-text-yellow: #fadb31;
+  --gx-color-text-lime: #acf043;
+  --gx-color-text-green: #56e889;
+  --gx-color-text-emerald: #43dda2;
+  --gx-color-text-teal: #3ddec9;
+  --gx-color-text-cyan: #36ddf8;
+  --gx-color-text-sky: #52c6fe;
+  --gx-color-text-blue: #6dadfd;
+  --gx-color-text-indigo: #8b97fd;
+  --gx-color-text-violet: #ae95fd;
+  --gx-color-text-purple: #c58dfd;
+  --gx-color-text-fuchsia: #ee88fe;
+  --gx-color-text-pink: #fe7dbf;
+  --gx-color-text-rose: #fe7c8d;
+  --gx-color-border-primary: #2b2b2c;
+  --gx-color-border-secondary: #39393a;
+  --gx-color-border-tertiary: #49494a;
+  --gx-color-border-hovered: #787879;
+  --gx-color-border-focused: #9a9a9b;
+  --gx-color-border-disabled: #2b2b2c;
+  --gx-color-border-success: #259057;
+  --gx-color-border-warning: #c48228;
+  --gx-color-border-error: #db293d;
+  --gx-color-border-red: #8c2e2f;
+  --gx-color-border-orange: #924816;
+  --gx-color-border-amber: #90600f;
+  --gx-color-border-yellow: #8a6b0e;
+  --gx-color-border-lime: #527916;
+  --gx-color-border-green: #1c753d;
+  --gx-color-border-emerald: #126f50;
+  --gx-color-border-teal: #146e65;
+  --gx-color-border-cyan: #0c6d7e;
+  --gx-color-border-sky: #11648a;
+  --gx-color-border-blue: #295091;
+  --gx-color-border-indigo: #3f418e;
+  --gx-color-border-violet: #553c91;
+  --gx-color-border-purple: #653891;
+  --gx-color-border-fuchsia: #80308d;
+  --gx-color-border-pink: #8b315e;
+  --gx-color-border-rose: #8f2c3d;
+  --gx-color-solid-primary-background: #ffffff;
+  --gx-color-solid-primary-text: #141415;
+  --gx-color-solid-primary-hovered: #e3e3e3;
+  --gx-color-solid-primary-pressed: #c7c7c7;
+  --gx-color-solid-neutral-background: #1c1c1d;
+  --gx-color-solid-neutral-text: #ffffff;
+  --gx-color-solid-neutral-hovered: #222223;
+  --gx-color-solid-neutral-pressed: #303031;
+  --gx-color-solid-success-background: #13bc6e;
+  --gx-color-solid-success-text: #000000;
+  --gx-color-solid-success-hovered: #15cb76;
+  --gx-color-solid-success-pressed: #18d97f;
+  --gx-color-solid-warning-background: #fea931;
+  --gx-color-solid-warning-text: #000000;
+  --gx-color-solid-warning-hovered: #febc6c;
+  --gx-color-solid-warning-pressed: #fece96;
+  --gx-color-solid-error-background: #e50f36;
+  --gx-color-solid-error-text: #ffffff;
+  --gx-color-solid-error-hovered: #ce0c30;
+  --gx-color-solid-error-pressed: #b70929;
+  --gx-color-solid-red-background: #d83939;
+  --gx-color-solid-red-text: #ffffff;
+  --gx-color-solid-red-hovered: #ce3434;
+  --gx-color-solid-red-pressed: #c3302f;
+  --gx-color-solid-orange-background: #f97316;
+  --gx-color-solid-orange-text: #000000;
+  --gx-color-solid-orange-hovered: #fb8a3a;
+  --gx-color-solid-orange-pressed: #fc9f56;
+  --gx-color-solid-amber-background: #f59e0b;
+  --gx-color-solid-amber-text: #000000;
+  --gx-color-solid-amber-hovered: #f7ad31;
+  --gx-color-solid-amber-pressed: #f8bc49;
+  --gx-color-solid-yellow-background: #eab308;
+  --gx-color-solid-yellow-text: #000000;
+  --gx-color-solid-yellow-hovered: #eec035;
+  --gx-color-solid-yellow-pressed: #f2cc4e;
+  --gx-color-solid-lime-background: #84cc16;
+  --gx-color-solid-lime-text: #000000;
+  --gx-color-solid-lime-hovered: #97d53e;
+  --gx-color-solid-lime-pressed: #a8de59;
+  --gx-color-solid-green-background: #22c55e;
+  --gx-color-solid-green-text: #000000;
+  --gx-color-solid-green-hovered: #4dd077;
+  --gx-color-solid-green-pressed: #6cda8f;
+  --gx-color-solid-emerald-background: #10b981;
+  --gx-color-solid-emerald-text: #000000;
+  --gx-color-solid-emerald-hovered: #42c591;
+  --gx-color-solid-emerald-pressed: #60d0a0;
+  --gx-color-solid-teal-background: #14b8a6;
+  --gx-color-solid-teal-text: #000000;
+  --gx-color-solid-teal-hovered: #3ec4b2;
+  --gx-color-solid-teal-pressed: #59d1be;
+  --gx-color-solid-cyan-background: #06b6d4;
+  --gx-color-solid-cyan-text: #000000;
+  --gx-color-solid-cyan-hovered: #3fc2db;
+  --gx-color-solid-cyan-pressed: #5dcfe3;
+  --gx-color-solid-sky-background: #0ea5e9;
+  --gx-color-solid-sky-text: #000000;
+  --gx-color-solid-sky-hovered: #45b3ed;
+  --gx-color-solid-sky-pressed: #67c0f1;
+  --gx-color-solid-blue-background: #3270e3;
+  --gx-color-solid-blue-text: #ffffff;
+  --gx-color-solid-blue-hovered: #2f68da;
+  --gx-color-solid-blue-pressed: #2b60d2;
+  --gx-color-solid-indigo-background: #6163ed;
+  --gx-color-solid-indigo-text: #ffffff;
+  --gx-color-solid-indigo-hovered: #5b5de3;
+  --gx-color-solid-indigo-pressed: #5656da;
+  --gx-color-solid-violet-background: #8555ee;
+  --gx-color-solid-violet-text: #ffffff;
+  --gx-color-solid-violet-hovered: #7f4fe6;
+  --gx-color-solid-violet-pressed: #7948df;
+  --gx-color-solid-purple-background: #9b4be7;
+  --gx-color-solid-purple-text: #ffffff;
+  --gx-color-solid-purple-hovered: #9445dd;
+  --gx-color-solid-purple-pressed: #8d3fd4;
+  --gx-color-solid-fuchsia-background: #bb36cc;
+  --gx-color-solid-fuchsia-text: #ffffff;
+  --gx-color-solid-fuchsia-hovered: #b131c0;
+  --gx-color-solid-fuchsia-pressed: #a72bb5;
+  --gx-color-solid-pink-background: #d0377d;
+  --gx-color-solid-pink-text: #ffffff;
+  --gx-color-solid-pink-hovered: #c73173;
+  --gx-color-solid-pink-pressed: #bd2c6a;
+  --gx-color-solid-rose-background: #da3253;
+  --gx-color-solid-rose-text: #ffffff;
+  --gx-color-solid-rose-hovered: #d02d4e;
+  --gx-color-solid-rose-pressed: #c5284a;
+  --gx-color-opacity-bg4: rgba(0, 0, 0, 0.04);
+  --gx-color-opacity-bg8: rgba(0, 0, 0, 0.08);
+  --gx-color-opacity-bg12: rgba(0, 0, 0, 0.12);
+  --gx-color-opacity-bg16: rgba(0, 0, 0, 0.16);
+  --gx-color-opacity-bg24: rgba(0, 0, 0, 0.24);
+  --gx-color-opacity-bg32: rgba(0, 0, 0, 0.32);
+  --gx-color-opacity-bg48: rgba(0, 0, 0, 0.48);
+  --gx-color-opacity-bg64: rgba(0, 0, 0, 0.64);
+  --gx-color-opacity-bg80: rgba(0, 0, 0, 0.8);
+  --gx-color-opacity-bg100: rgba(0, 0, 0, 1);
+  --gx-color-opacity-fg4: rgba(255, 255, 255, 0.04);
+  --gx-color-opacity-fg8: rgba(255, 255, 255, 0.08);
+  --gx-color-opacity-fg12: rgba(255, 255, 255, 0.12);
+  --gx-color-opacity-fg16: rgba(255, 255, 255, 0.16);
+  --gx-color-opacity-fg24: rgba(255, 255, 255, 0.24);
+  --gx-color-opacity-fg32: rgba(255, 255, 255, 0.32);
+  --gx-color-opacity-fg48: rgba(255, 255, 255, 0.48);
+  --gx-color-opacity-fg64: rgba(255, 255, 255, 0.64);
+  --gx-color-opacity-fg80: rgba(255, 255, 255, 0.8);
+  --gx-color-opacity-fg100: rgba(255, 255, 255, 1);
+  --gx-font-sans-family: "ABC Diatype", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --gx-font-sans-weight-regular: 400;
+  --gx-font-sans-weight-medium: 500;
+  --gx-font-sans-size-caption: 10px;
+  --gx-font-sans-size-body-sm: 12px;
+  --gx-font-sans-size-body-md: 13px;
+  --gx-font-sans-size-body-lg: 14px;
+  --gx-font-sans-size-heading-sm: 16px;
+  --gx-font-sans-size-heading-md: 20px;
+  --gx-font-sans-size-heading-lg: 24px;
+  --gx-font-sans-size-display-sm: 32px;
+  --gx-font-sans-size-display-lg: 40px;
+  --gx-font-sans-height-caption: 12px;
+  --gx-font-sans-height-body-sm: 16px;
+  --gx-font-sans-height-body-md: 16px;
+  --gx-font-sans-height-body-lg: 20px;
+  --gx-font-sans-height-heading-sm: 20px;
+  --gx-font-sans-height-heading-md: 24px;
+  --gx-font-sans-height-heading-lg: 28px;
+  --gx-font-sans-height-display-sm: 40px;
+  --gx-font-sans-height-display-lg: 48px;
+  --gx-font-sans-spacing-caption: 0.1px;
+  --gx-font-sans-spacing-body-sm: 0.12px;
+  --gx-font-sans-spacing-body-md: 0.13px;
+  --gx-font-sans-spacing-body-lg: 0.14px;
+  --gx-font-sans-spacing-heading-sm: 0.16px;
+  --gx-font-sans-spacing-heading-md: 0.20px;
+  --gx-font-sans-spacing-heading-lg: 0.24px;
+  --gx-font-sans-spacing-display-sm: 0.32px;
+  --gx-font-sans-spacing-display-lg: 0.40px;
+  --gx-font-mono-family: "Berkeley Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --gx-font-mono-weight-regular: 400;
+  --gx-font-mono-weight-medium: 500;
+  --gx-font-mono-size-caption: 9px;
+  --gx-font-mono-size-body-sm: 11px;
+  --gx-font-mono-size-body-md: 12px;
+  --gx-font-mono-size-body-lg: 13px;
+  --gx-font-mono-size-heading-sm: 15px;
+  --gx-font-mono-size-heading-md: 18px;
+  --gx-font-mono-size-heading-lg: 22px;
+  --gx-font-mono-size-display-sm: 29px;
+  --gx-font-mono-size-display-lg: 37px;
+  --gx-font-mono-height-caption: 12px;
+  --gx-font-mono-height-body-sm: 16px;
+  --gx-font-mono-height-body-md: 16px;
+  --gx-font-mono-height-body-lg: 20px;
+  --gx-font-mono-height-heading-sm: 20px;
+  --gx-font-mono-height-heading-md: 24px;
+  --gx-font-mono-height-heading-lg: 28px;
+  --gx-font-mono-height-display-sm: 40px;
+  --gx-font-mono-height-display-lg: 48px;
+  --gx-font-mono-spacing-caption: 0.1px;
+  --gx-font-mono-spacing-body-sm: 0.12px;
+  --gx-font-mono-spacing-body-md: 0.13px;
+  --gx-font-mono-spacing-body-lg: 0.14px;
+  --gx-font-mono-spacing-heading-sm: 0.16px;
+  --gx-font-mono-spacing-heading-md: 0.20px;
+  --gx-font-mono-spacing-heading-lg: 0.24px;
+  --gx-font-mono-spacing-display-sm: 0.32px;
+  --gx-font-mono-spacing-display-lg: 0.40px;
+  --gx-font-serif-family: "Cardo", Georgia, "Times New Roman", serif;
+  --gx-font-serif-weight-regular: 400;
+  --gx-font-serif-weight-medium: 500;
+  --gx-font-serif-size-body-lg: 14px;
+  --gx-font-serif-size-heading-sm: 16px;
+  --gx-font-serif-size-heading-md: 20px;
+  --gx-font-serif-size-heading-lg: 24px;
+  --gx-font-serif-size-display-sm: 32px;
+  --gx-font-serif-size-display-lg: 40px;
+  --gx-font-serif-height-body-lg: 20px;
+  --gx-font-serif-height-heading-sm: 20px;
+  --gx-font-serif-height-heading-md: 28px;
+  --gx-font-serif-height-heading-lg: 32px;
+  --gx-font-serif-height-display-sm: 40px;
+  --gx-font-serif-height-display-lg: 52px;
+  --gx-font-serif-spacing-body-lg: 0px;
+  --gx-font-serif-spacing-heading-sm: 0px;
+  --gx-font-serif-spacing-heading-md: 0px;
+  --gx-font-serif-spacing-heading-lg: 0px;
+  --gx-font-serif-spacing-display-sm: 0px;
+  --gx-font-serif-spacing-display-lg: 0px;
+}
+
+[data-gx-theme="light"] {
+  --gx-color-background-base: #ffffff;
+  --gx-color-background-primary: #fafafb;
+  --gx-color-background-secondary: #f1f1f2;
+  --gx-color-background-tertiary: #ededee;
+  --gx-color-background-hovered: #f5f5f5;
+  --gx-color-background-pressed: #eeeeee;
+  --gx-color-background-selected: #e2e2e2;
+  --gx-color-background-disabled: #f1f1f2;
+  --gx-color-background-success: #ecfcf0;
+  --gx-color-background-warning: #fff8eb;
+  --gx-color-background-error: #fff2f2;
+  --gx-color-background-red: #fef2f2;
+  --gx-color-background-orange: #fff7ed;
+  --gx-color-background-amber: #fffbeb;
+  --gx-color-background-yellow: #fefce8;
+  --gx-color-background-lime: #f7fee7;
+  --gx-color-background-green: #f0fdf4;
+  --gx-color-background-emerald: #ecfdf5;
+  --gx-color-background-teal: #f0fdfa;
+  --gx-color-background-cyan: #ecfeff;
+  --gx-color-background-sky: #f0f9ff;
+  --gx-color-background-blue: #eff6ff;
+  --gx-color-background-indigo: #eef2ff;
+  --gx-color-background-violet: #f5f3ff;
+  --gx-color-background-purple: #faf5ff;
+  --gx-color-background-fuchsia: #fdf4ff;
+  --gx-color-background-pink: #fdf2f8;
+  --gx-color-background-rose: #fff1f2;
+  --gx-color-text-primary: #101010;
+  --gx-color-text-secondary: #4d4d4d;
+  --gx-color-text-tertiary: #6b6b6b;
+  --gx-color-text-disabled: #b8b8b8;
+  --gx-color-text-success: #087a45;
+  --gx-color-text-warning: #ab5007;
+  --gx-color-text-error: #d40d31;
+  --gx-color-text-red: #d40d24;
+  --gx-color-text-orange: #b74507;
+  --gx-color-text-amber: #9d5a07;
+  --gx-color-text-yellow: #7d6907;
+  --gx-color-text-lime: #4a7607;
+  --gx-color-text-green: #087b36;
+  --gx-color-text-emerald: #087953;
+  --gx-color-text-teal: #08776b;
+  --gx-color-text-cyan: #087488;
+  --gx-color-text-sky: #0871a2;
+  --gx-color-text-blue: #0662e4;
+  --gx-color-text-indigo: #584dfc;
+  --gx-color-text-violet: #8237fc;
+  --gx-color-text-purple: #9d10fa;
+  --gx-color-text-fuchsia: #b50dcb;
+  --gx-color-text-pink: #cb0c7b;
+  --gx-color-text-rose: #d20c43;
+  --gx-color-border-primary: #d2d2d4;
+  --gx-color-border-secondary: #c4c4c7;
+  --gx-color-border-tertiary: #b4b4b7;
+  --gx-color-border-hovered: #a8a8ab;
+  --gx-color-border-focused: #87878a;
+  --gx-color-border-disabled: #d2d2d4;
+  --gx-color-border-success: #0d9a59;
+  --gx-color-border-warning: #d6660b;
+  --gx-color-border-error: #fd3348;
+  --gx-color-border-red: #f87977;
+  --gx-color-border-orange: #fc9a4f;
+  --gx-color-border-amber: #f8b943;
+  --gx-color-border-yellow: #f1c948;
+  --gx-color-border-lime: #a4dc53;
+  --gx-color-border-green: #65d789;
+  --gx-color-border-emerald: #59cd9c;
+  --gx-color-border-teal: #53cdbb;
+  --gx-color-border-cyan: #56cce1;
+  --gx-color-border-sky: #5fbdf0;
+  --gx-color-border-blue: #68a3fa;
+  --gx-color-border-indigo: #818ff8;
+  --gx-color-border-violet: #a58afb;
+  --gx-color-border-purple: #bf86fb;
+  --gx-color-border-fuchsia: #e47ff7;
+  --gx-color-border-pink: #f47db8;
+  --gx-color-border-rose: #fb7989;
+  --gx-color-solid-primary-background: #101010;
+  --gx-color-solid-primary-text: #ffffff;
+  --gx-color-solid-primary-hovered: #2d2d2d;
+  --gx-color-solid-primary-pressed: #494949;
+  --gx-color-solid-neutral-background: #f1f1f2;
+  --gx-color-solid-neutral-text: #101010;
+  --gx-color-solid-neutral-hovered: #e5e5e6;
+  --gx-color-solid-neutral-pressed: #dcdcdd;
+  --gx-color-solid-success-background: #13bc6e;
+  --gx-color-solid-success-text: #000000;
+  --gx-color-solid-success-hovered: #15cb76;
+  --gx-color-solid-success-pressed: #18d97f;
+  --gx-color-solid-warning-background: #fea931;
+  --gx-color-solid-warning-text: #000000;
+  --gx-color-solid-warning-hovered: #febc6c;
+  --gx-color-solid-warning-pressed: #fece96;
+  --gx-color-solid-error-background: #e50f36;
+  --gx-color-solid-error-text: #ffffff;
+  --gx-color-solid-error-hovered: #ce0c30;
+  --gx-color-solid-error-pressed: #b70929;
+  --gx-color-solid-red-background: #d83939;
+  --gx-color-solid-red-text: #ffffff;
+  --gx-color-solid-red-hovered: #ce3434;
+  --gx-color-solid-red-pressed: #c3302f;
+  --gx-color-solid-orange-background: #f97316;
+  --gx-color-solid-orange-text: #000000;
+  --gx-color-solid-orange-hovered: #fb8a3a;
+  --gx-color-solid-orange-pressed: #fc9f56;
+  --gx-color-solid-amber-background: #f59e0b;
+  --gx-color-solid-amber-text: #000000;
+  --gx-color-solid-amber-hovered: #f7ad31;
+  --gx-color-solid-amber-pressed: #f8bc49;
+  --gx-color-solid-yellow-background: #eab308;
+  --gx-color-solid-yellow-text: #000000;
+  --gx-color-solid-yellow-hovered: #eec035;
+  --gx-color-solid-yellow-pressed: #f2cc4e;
+  --gx-color-solid-lime-background: #84cc16;
+  --gx-color-solid-lime-text: #000000;
+  --gx-color-solid-lime-hovered: #97d53e;
+  --gx-color-solid-lime-pressed: #a8de59;
+  --gx-color-solid-green-background: #22c55e;
+  --gx-color-solid-green-text: #000000;
+  --gx-color-solid-green-hovered: #4dd077;
+  --gx-color-solid-green-pressed: #6cda8f;
+  --gx-color-solid-emerald-background: #10b981;
+  --gx-color-solid-emerald-text: #000000;
+  --gx-color-solid-emerald-hovered: #42c591;
+  --gx-color-solid-emerald-pressed: #60d0a0;
+  --gx-color-solid-teal-background: #14b8a6;
+  --gx-color-solid-teal-text: #000000;
+  --gx-color-solid-teal-hovered: #3ec4b2;
+  --gx-color-solid-teal-pressed: #59d1be;
+  --gx-color-solid-cyan-background: #06b6d4;
+  --gx-color-solid-cyan-text: #000000;
+  --gx-color-solid-cyan-hovered: #3fc2db;
+  --gx-color-solid-cyan-pressed: #5dcfe3;
+  --gx-color-solid-sky-background: #0ea5e9;
+  --gx-color-solid-sky-text: #000000;
+  --gx-color-solid-sky-hovered: #45b3ed;
+  --gx-color-solid-sky-pressed: #67c0f1;
+  --gx-color-solid-blue-background: #3270e3;
+  --gx-color-solid-blue-text: #ffffff;
+  --gx-color-solid-blue-hovered: #2f68da;
+  --gx-color-solid-blue-pressed: #2b60d2;
+  --gx-color-solid-indigo-background: #6163ed;
+  --gx-color-solid-indigo-text: #ffffff;
+  --gx-color-solid-indigo-hovered: #5b5de3;
+  --gx-color-solid-indigo-pressed: #5656da;
+  --gx-color-solid-violet-background: #8555ee;
+  --gx-color-solid-violet-text: #ffffff;
+  --gx-color-solid-violet-hovered: #7f4fe6;
+  --gx-color-solid-violet-pressed: #7948df;
+  --gx-color-solid-purple-background: #9b4be7;
+  --gx-color-solid-purple-text: #ffffff;
+  --gx-color-solid-purple-hovered: #9445dd;
+  --gx-color-solid-purple-pressed: #8d3fd4;
+  --gx-color-solid-fuchsia-background: #bb36cc;
+  --gx-color-solid-fuchsia-text: #ffffff;
+  --gx-color-solid-fuchsia-hovered: #b131c0;
+  --gx-color-solid-fuchsia-pressed: #a72bb5;
+  --gx-color-solid-pink-background: #d0377d;
+  --gx-color-solid-pink-text: #ffffff;
+  --gx-color-solid-pink-hovered: #c73173;
+  --gx-color-solid-pink-pressed: #bd2c6a;
+  --gx-color-solid-rose-background: #da3253;
+  --gx-color-solid-rose-text: #ffffff;
+  --gx-color-solid-rose-hovered: #d02d4e;
+  --gx-color-solid-rose-pressed: #c5284a;
+  --gx-color-opacity-bg4: rgba(255, 255, 255, 0.04);
+  --gx-color-opacity-bg8: rgba(255, 255, 255, 0.08);
+  --gx-color-opacity-bg12: rgba(255, 255, 255, 0.12);
+  --gx-color-opacity-bg16: rgba(255, 255, 255, 0.16);
+  --gx-color-opacity-bg24: rgba(255, 255, 255, 0.24);
+  --gx-color-opacity-bg32: rgba(255, 255, 255, 0.32);
+  --gx-color-opacity-bg48: rgba(255, 255, 255, 0.48);
+  --gx-color-opacity-bg64: rgba(255, 255, 255, 0.64);
+  --gx-color-opacity-bg80: rgba(255, 255, 255, 0.8);
+  --gx-color-opacity-bg100: rgba(255, 255, 255, 1);
+  --gx-color-opacity-fg4: rgba(0, 0, 0, 0.04);
+  --gx-color-opacity-fg8: rgba(0, 0, 0, 0.08);
+  --gx-color-opacity-fg12: rgba(0, 0, 0, 0.12);
+  --gx-color-opacity-fg16: rgba(0, 0, 0, 0.16);
+  --gx-color-opacity-fg24: rgba(0, 0, 0, 0.24);
+  --gx-color-opacity-fg32: rgba(0, 0, 0, 0.32);
+  --gx-color-opacity-fg48: rgba(0, 0, 0, 0.48);
+  --gx-color-opacity-fg64: rgba(0, 0, 0, 0.64);
+  --gx-color-opacity-fg80: rgba(0, 0, 0, 0.8);
+  --gx-color-opacity-fg100: rgba(0, 0, 0, 1);
+  --gx-font-sans-family: "ABC Diatype", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --gx-font-sans-weight-regular: 400;
+  --gx-font-sans-weight-medium: 500;
+  --gx-font-sans-size-caption: 10px;
+  --gx-font-sans-size-body-sm: 12px;
+  --gx-font-sans-size-body-md: 13px;
+  --gx-font-sans-size-body-lg: 14px;
+  --gx-font-sans-size-heading-sm: 16px;
+  --gx-font-sans-size-heading-md: 20px;
+  --gx-font-sans-size-heading-lg: 24px;
+  --gx-font-sans-size-display-sm: 32px;
+  --gx-font-sans-size-display-lg: 40px;
+  --gx-font-sans-height-caption: 12px;
+  --gx-font-sans-height-body-sm: 16px;
+  --gx-font-sans-height-body-md: 16px;
+  --gx-font-sans-height-body-lg: 20px;
+  --gx-font-sans-height-heading-sm: 20px;
+  --gx-font-sans-height-heading-md: 24px;
+  --gx-font-sans-height-heading-lg: 28px;
+  --gx-font-sans-height-display-sm: 40px;
+  --gx-font-sans-height-display-lg: 48px;
+  --gx-font-sans-spacing-caption: 0.1px;
+  --gx-font-sans-spacing-body-sm: 0.12px;
+  --gx-font-sans-spacing-body-md: 0.13px;
+  --gx-font-sans-spacing-body-lg: 0.14px;
+  --gx-font-sans-spacing-heading-sm: 0.16px;
+  --gx-font-sans-spacing-heading-md: 0.20px;
+  --gx-font-sans-spacing-heading-lg: 0.24px;
+  --gx-font-sans-spacing-display-sm: 0.32px;
+  --gx-font-sans-spacing-display-lg: 0.40px;
+  --gx-font-mono-family: "Berkeley Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --gx-font-mono-weight-regular: 400;
+  --gx-font-mono-weight-medium: 500;
+  --gx-font-mono-size-caption: 9px;
+  --gx-font-mono-size-body-sm: 11px;
+  --gx-font-mono-size-body-md: 12px;
+  --gx-font-mono-size-body-lg: 13px;
+  --gx-font-mono-size-heading-sm: 15px;
+  --gx-font-mono-size-heading-md: 18px;
+  --gx-font-mono-size-heading-lg: 22px;
+  --gx-font-mono-size-display-sm: 29px;
+  --gx-font-mono-size-display-lg: 37px;
+  --gx-font-mono-height-caption: 12px;
+  --gx-font-mono-height-body-sm: 16px;
+  --gx-font-mono-height-body-md: 16px;
+  --gx-font-mono-height-body-lg: 20px;
+  --gx-font-mono-height-heading-sm: 20px;
+  --gx-font-mono-height-heading-md: 24px;
+  --gx-font-mono-height-heading-lg: 28px;
+  --gx-font-mono-height-display-sm: 40px;
+  --gx-font-mono-height-display-lg: 48px;
+  --gx-font-mono-spacing-caption: 0.1px;
+  --gx-font-mono-spacing-body-sm: 0.12px;
+  --gx-font-mono-spacing-body-md: 0.13px;
+  --gx-font-mono-spacing-body-lg: 0.14px;
+  --gx-font-mono-spacing-heading-sm: 0.16px;
+  --gx-font-mono-spacing-heading-md: 0.20px;
+  --gx-font-mono-spacing-heading-lg: 0.24px;
+  --gx-font-mono-spacing-display-sm: 0.32px;
+  --gx-font-mono-spacing-display-lg: 0.40px;
+  --gx-font-serif-family: "Cardo", Georgia, "Times New Roman", serif;
+  --gx-font-serif-weight-regular: 400;
+  --gx-font-serif-weight-medium: 500;
+  --gx-font-serif-size-body-lg: 14px;
+  --gx-font-serif-size-heading-sm: 16px;
+  --gx-font-serif-size-heading-md: 20px;
+  --gx-font-serif-size-heading-lg: 24px;
+  --gx-font-serif-size-display-sm: 32px;
+  --gx-font-serif-size-display-lg: 40px;
+  --gx-font-serif-height-body-lg: 20px;
+  --gx-font-serif-height-heading-sm: 20px;
+  --gx-font-serif-height-heading-md: 28px;
+  --gx-font-serif-height-heading-lg: 32px;
+  --gx-font-serif-height-display-sm: 40px;
+  --gx-font-serif-height-display-lg: 52px;
+  --gx-font-serif-spacing-body-lg: 0px;
+  --gx-font-serif-spacing-heading-sm: 0px;
+  --gx-font-serif-spacing-heading-md: 0px;
+  --gx-font-serif-spacing-heading-lg: 0px;
+  --gx-font-serif-spacing-display-sm: 0px;
+  --gx-font-serif-spacing-display-lg: 0px;
+}