@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/system/styles/tokens.css

@@ -0,0 +1,601 @@
+/* RuneGoblin design tokens. Component tokens live in component-configs/*. */
+/* @font-face rules live in fonts.css (copied verbatim). */
+
+/* Module font fallback. :where() = 0 specificity so components override. */
+:where(*:not([class*="fa-"])) {
+  font-family: var(--font-sans);
+}
+
+:root {
+  /* COLOR RAMPS — palette swatches 100–950. Editor overrides at runtime. */
+
+  /* Neutral */
+  --color-neutral-100: #dde6ec;
+  --color-neutral-200: #c4cdd3;
+  --color-neutral-300: #a8b1b7;
+  --color-neutral-400: #8b949a;
+  --color-neutral-500: #70787e;
+  --color-neutral-600: #555e63;
+  --color-neutral-700: #3c4449;
+  --color-neutral-800: #252c31;
+  --color-neutral-850: #0f161a;
+  --color-neutral-900: #020407;
+  --color-neutral-950: #000000;
+
+  /* Alternate */
+  --color-alternate-100: #e9e3e0;
+  --color-alternate-200: #d2ccc8;
+  --color-alternate-300: #b7b1ad;
+  --color-alternate-400: #9b9693;
+  --color-alternate-500: #817b78;
+  --color-alternate-600: #67625f;
+  --color-alternate-700: #4f4a47;
+  --color-alternate-800: #373330;
+  --color-alternate-850: #221d1b;
+  --color-alternate-900: #0e0b08;
+  --color-alternate-950: #030101;
+
+  /* Canvas */
+  --color-canvas-100: #cecfe5;
+  --color-canvas-200: #abacc2;
+  --color-canvas-300: #8d8da4;
+  --color-canvas-400: #727289;
+  --color-canvas-500: #5a5a72;
+  --color-canvas-600: #45455c;
+  --color-canvas-700: #33324a;
+  --color-canvas-800: #232239;
+  --color-canvas-850: #15142b;
+  --color-canvas-900: #0b081f;
+  --color-canvas-950: #040215;
+
+  /* Brand */
+  --color-brand-100: #ffbad3;
+  --color-brand-200: #ff7bb3;
+  --color-brand-300: #ec4495;
+  --color-brand-400: #cf0b7a;
+  --color-brand-500: #a80062;
+  --color-brand-600: #84004b;
+  --color-brand-700: #640038;
+  --color-brand-800: #490027;
+  --color-brand-850: #320019;
+  --color-brand-900: #1f000d;
+  --color-brand-950: #100005;
+
+  /* Accent */
+  --color-accent-100: #98e1dd;
+  --color-accent-200: #70beba;
+  --color-accent-300: #4ba09c;
+  --color-accent-400: #248582;
+  --color-accent-500: #006b69;
+  --color-accent-600: #005351;
+  --color-accent-700: #003e3d;
+  --color-accent-800: #002c2b;
+  --color-accent-850: #001d1c;
+  --color-accent-900: #00100f;
+  --color-accent-950: #000606;
+
+  /* Special */
+  --color-special-100: #d2c8ff;
+  --color-special-200: #b19cff;
+  --color-special-300: #9673f5;
+  --color-special-400: #7d54db;
+  --color-special-500: #6634c4;
+  --color-special-600: #5407af;
+  --color-special-700: #3f0088;
+  --color-special-800: #2d0064;
+  --color-special-850: #1d0046;
+  --color-special-900: #10002d;
+  --color-special-950: #060019;
+
+  /* Success */
+  --color-success-100: #92e9a3;
+  --color-success-200: #69c67e;
+  --color-success-300: #42a75d;
+  --color-success-400: #0e8c3f;
+  --color-success-500: #007030;
+  --color-success-600: #005723;
+  --color-success-700: #004119;
+  --color-success-800: #002f0f;
+  --color-success-850: #001e08;
+  --color-success-900: #001103;
+  --color-success-950: #000701;
+
+  /* Warning */
+  --color-warning-100: #ffc57d;
+  --color-warning-200: #e29f44;
+  --color-warning-300: #c47f03;
+  --color-warning-400: #a06600;
+  --color-warning-500: #805100;
+  --color-warning-600: #643e00;
+  --color-warning-700: #4c2e00;
+  --color-warning-800: #362000;
+  --color-warning-850: #241300;
+  --color-warning-900: #150900;
+  --color-warning-950: #090300;
+
+  /* Info */
+  --color-info-100: #b4d4ff;
+  --color-info-200: #76b0ff;
+  --color-info-300: #398efa;
+  --color-info-400: #0571e0;
+  --color-info-500: #0059b6;
+  --color-info-600: #00458f;
+  --color-info-700: #00336d;
+  --color-info-800: #002350;
+  --color-info-850: #001637;
+  --color-info-900: #000b23;
+  --color-info-950: #000413;
+
+  /* Danger */
+  --color-danger-100: #ffbeb8;
+  --color-danger-200: #ff847d;
+  --color-danger-300: #ec5552;
+  --color-danger-400: #d02d33;
+  --color-danger-500: #b0001c;
+  --color-danger-600: #8a0013;
+  --color-danger-700: #6a000c;
+  --color-danger-800: #4d0006;
+  --color-danger-850: #350003;
+  --color-danger-900: #210001;
+  --color-danger-950: #110000;
+
+  /* CSS keyword `transparent` for no-fill slots. */
+  --color-transparent: transparent;
+
+  /* Boolean visibility slot targets (e.g. --button-shimmer). */
+  --shimmer-on: block;
+  --shimmer-off: none;
+
+  /* PAGE BACKGROUND — canvas behind all UI. */
+  --page-bg: #15142b;
+  --page-bg-attachment: scroll;
+
+  /* SURFACES — 7-point scales, lowest → highest. */
+
+  /* Neutral */
+  --surface-neutral-lowest: #040c13;
+  --surface-neutral-lower: #162027;
+  --surface-neutral-low: #2c353c;
+  --surface-neutral: #434c52;
+  --surface-neutral-high: #5c6369;
+  --surface-neutral-higher: #767c81;
+  --surface-neutral-highest: #91969a;
+
+  /* Alternate surfaces */
+  --surface-alternate-lowest: #100907;
+  --surface-alternate-lower: #231d19;
+  --surface-alternate-low: #39322f;
+  --surface-alternate: #4f4946;
+  --surface-alternate-high: #66615e;
+  --surface-alternate-higher: #7f7a78;
+  --surface-alternate-highest: #989492;
+
+  /* Canvas */
+  --surface-canvas-lowest: #0a0523;
+  --surface-canvas-lower: #1c1a37;
+  --surface-canvas-low: #31304c;
+  --surface-canvas: #474761;
+  --surface-canvas-high: #5f6077;
+  --surface-canvas-higher: #79798e;
+  --surface-canvas-highest: #9393a5;
+
+  /* Brand */
+  --surface-brand-lowest: #1d000c;
+  --surface-brand-lower: #3e0020;
+  --surface-brand-low: #620037;
+  --surface-brand: #89004e;
+  --surface-brand-high: #b10067;
+  --surface-brand-higher: #cf3480;
+  --surface-brand-highest: #e0649a;
+
+  /* Accent */
+  --surface-accent-lowest: #000f0e;
+  --surface-accent-lower: #002423;
+  --surface-accent-low: #003c3b;
+  --surface-accent: #005654;
+  --surface-accent-high: #00716f;
+  --surface-accent-higher: #3b8a87;
+  --surface-accent-highest: #66a29f;
+
+  /* Special */
+  --surface-special-lowest: #0f002b;
+  --surface-special-lower: #250055;
+  --surface-special-low: #3d0084;
+  --surface-special: #5700b7;
+  --surface-special-high: #6c3bcb;
+  --surface-special-higher: #8161d8;
+  --surface-special-highest: #9983e4;
+
+  /* Success */
+  --surface-success-lowest: #001003;
+  --surface-success-lower: #00270b;
+  --surface-success-low: #004018;
+  --surface-success: #005a25;
+  --surface-success-high: #007733;
+  --surface-success-higher: #32914d;
+  --surface-success-highest: #61a870;
+
+  /* Warning */
+  --surface-warning-lowest: #140800;
+  --surface-warning-lower: #2d1a00;
+  --surface-warning-low: #4a2c00;
+  --surface-warning: #684100;
+  --surface-warning-high: #885600;
+  --surface-warning-higher: #a96c00;
+  --surface-warning-highest: #be8a46;
+
+  /* Info */
+  --surface-info-lowest: #000a21;
+  --surface-info-lower: #001d44;
+  --surface-info-low: #00316b;
+  --surface-info: #004894;
+  --surface-info-high: #36639f;
+  --surface-info-higher: #5d7da8;
+  --surface-info-highest: #8497b1;
+
+  /* Danger */
+  --surface-danger-lowest: #1f0001;
+  --surface-danger-lower: #410004;
+  --surface-danger-low: #67000b;
+  --surface-danger: #8f0014;
+  --surface-danger-high: #ba001e;
+  --surface-danger-higher: #cf4443;
+  --surface-danger-highest: #df6e68;
+
+  /* Overlays — 7-point semi-transparent scale. */
+  --overlay-lowest: rgba(20, 3, 0, 0.12);
+  --overlay-lower: rgba(20, 3, 0, 0.25);
+  --overlay-low: rgba(20, 3, 0, 0.38);
+  --overlay: rgba(20, 3, 0, 0.51);
+  --overlay-high: rgba(20, 3, 0, 0.64);
+  --overlay-higher: rgba(20, 3, 0, 0.77);
+  --overlay-highest: rgba(20, 3, 0, 0.9);
+
+  /* BORDERS — 5-point scales, faint → strong. */
+
+  /* Neutral */
+  --border-neutral-faint: #1c2327;
+  --border-neutral-subtle: #3a4146;
+  --border-neutral: #5a6267;
+  --border-neutral-medium: #7c848b;
+  --border-neutral-strong: #a0a9af;
+
+  /* Alternate */
+  --border-alternate-faint: #25201e;
+  --border-alternate-subtle: #443e3c;
+  --border-alternate: #655f5c;
+  --border-alternate-medium: #88827f;
+  --border-alternate-strong: #aca6a3;
+
+  /* Canvas */
+  --border-canvas-faint: #1f1f34;
+  --border-canvas-subtle: #3d3d54;
+  --border-canvas: #5d5e76;
+  --border-canvas-medium: #80809b;
+  --border-canvas-strong: #a4a5c0;
+
+  /* Brand */
+  --border-brand-faint: #430024;
+  --border-brand-subtle: #760043;
+  --border-brand: #ae0065;
+  --border-brand-medium: #e9008a;
+  --border-brand-strong: #ff6cad;
+
+  /* Accent */
+  --border-accent-faint: #002827;
+  --border-accent-subtle: #004a48;
+  --border-accent: #006f6d;
+  --border-accent-medium: #259592;
+  --border-accent-strong: #54bbb7;
+
+  /* Special */
+  --border-special-faint: #29005c;
+  --border-special-subtle: #4b009f;
+  --border-special: #6b34ce;
+  --border-special-medium: #8c5df8;
+  --border-special-strong: #ac93ff;
+
+  /* Success */
+  --border-success-faint: #002a0d;
+  --border-success-subtle: #004e1f;
+  --border-success: #007532;
+  --border-success-medium: #069e46;
+  --border-success-strong: #47c46b;
+
+  /* Warning */
+  --border-warning-faint: #321c00;
+  --border-warning-subtle: #5a3700;
+  --border-warning: #855400;
+  --border-warning-medium: #b37300;
+  --border-warning-strong: #e49400;
+
+  /* Info */
+  --border-info-faint: #00204a;
+  --border-info-subtle: #003d81;
+  --border-info: #005dbd;
+  --border-info-medium: #007efc;
+  --border-info-strong: #69a9ff;
+
+  /* Danger */
+  --border-danger-faint: #470005;
+  --border-danger-subtle: #7c0010;
+  --border-danger: #b6001d;
+  --border-danger-medium: #ea3039;
+  --border-danger-strong: #ff7872;
+
+  /* TEXT — 5-point hierarchy, primary → disabled. */
+
+  /* Neutral */
+  --text-primary: #ffffff;
+  --text-secondary: #c2cacf;
+  --text-tertiary: #7e8285;
+  --text-muted: #4e4f50;
+  --text-disabled: #383838;
+  --text-inverted: var(--color-neutral-900);
+
+  /* Canvas */
+  --text-canvas: #9595c6;
+  --text-canvas-secondary: #6b6b89;
+  --text-canvas-tertiary: #4e4f5e;
+  --text-canvas-muted: #3c3c41;
+  --text-canvas-disabled: #343435;
+
+  /* Brand */
+  --text-brand: #ff75b1;
+  --text-brand-secondary: #df2d88;
+  --text-brand-tertiary: #953b63;
+  --text-brand-muted: #5c3846;
+  --text-brand-disabled: #403337;
+
+  /* Accent */
+  --text-accent: #009d9a;
+  --text-accent-secondary: #1f7673;
+  --text-accent-tertiary: #2d5351;
+  --text-accent-muted: #2c3837;
+  --text-accent-disabled: #292a2a;
+
+  /* Special */
+  --text-special: #baa9ff;
+  --text-special-secondary: #8665e0;
+  --text-special-tertiary: #5c4e8b;
+  --text-special-muted: #3e3a4f;
+  --text-special-disabled: #303032;
+
+  /* Success */
+  --text-success: #88f2a0;
+  --text-success-secondary: #2f974e;
+  --text-success-tertiary: #31673e;
+  --text-success-muted: #2c4530;
+  --text-success-disabled: #263429;
+
+  /* Warning */
+  --text-warning: #ffd19a;
+  --text-warning-secondary: #dd9324;
+  --text-warning-tertiary: #967042;
+  --text-warning-muted: #605345;
+  --text-warning-disabled: #454442;
+
+  /* Info */
+  --text-info: #8fbeff;
+  --text-info-secondary: #2f81e8;
+  --text-info-tertiary: #365d90;
+  --text-info-muted: #344051;
+  --text-info-disabled: #303133;
+
+  /* Danger */
+  --text-danger: #ff635f;
+  --text-danger-secondary: #bb292f;
+  --text-danger-tertiary: #813b37;
+  --text-danger-muted: #543b39;
+  --text-danger-disabled: #3c3939;
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;    /* 2px */
+  --radius-md: 0.25rem;     /* 4px */
+  --radius-lg: 0.375rem;    /* 6px */
+  --radius-xl: 0.5rem;      /* 8px */
+  --radius-2xl: 0.625rem;   /* 10px */
+  --radius-3xl: 0.75rem;    /* 12px */
+  --radius-4xl: 1.25rem;    /* 20px */
+  --radius-full: 9999px;
+
+  /* Border Width */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-3: 3px;
+  --border-width-4: 4px;
+  --border-width-5: 5px;
+  --border-width-6: 6px;
+  --border-width-8: 8px;
+  --border-width-10: 10px;
+  --border-width-12: 12px;
+  --border-width-16: 16px;
+  --border-width-20: 20px;
+  --border-width-24: 24px;
+
+  /* Icon sizing (square) */
+  --size-icon-sm: 1rem;     /* 16px */
+  --size-icon-md: 1.25rem;  /* 20px */
+  --size-icon-lg: 1.5rem;   /* 24px */
+  --size-icon-xl: 2rem;     /* 32px */
+  --size-icon-2xl: 4rem;    /* 64px */
+  --size-icon-3xl: 6rem;    /* 96px */
+  --size-icon-4xl: 8rem;    /* 128px */
+
+  /* Spacing */
+  --space-0: 0;
+  --space-2: 0.125rem;    /* 2px */
+  --space-4: 0.25rem;     /* 4px */
+  --space-6: 0.375rem;    /* 6px */
+  --space-8: 0.5rem;      /* 8px */
+  --space-10: 0.625rem;   /* 10px */
+  --space-12: 0.75rem;    /* 12px */
+  --space-16: 1rem;       /* 16px */
+  --space-20: 1.25rem;    /* 20px */
+  --space-24: 1.5rem;     /* 24px */
+  --space-32: 2rem;       /* 32px */
+  --space-48: 3rem;       /* 48px */
+  --space-64: 4rem;       /* 64px */
+  --space-80: 5rem;       /* 80px */
+  --space-96: 6rem;       /* 96px */
+  --space-full: 100%;
+
+  /* Dot fill ratios — inner-dot as % of outer ring (radio/checkbox). */
+  --dot-size-0: 0%;
+  --dot-size-25: 25%;
+  --dot-size-50: 50%;
+  --dot-size-75: 75%;
+  --dot-size-100: 100%;
+
+  /* Backdrop blur radii (for backdrop-filter). */
+  --blur-none: 0;
+  --blur-sm: 4px;
+  --blur-md: 8px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 32px;
+
+  /* COLUMN LAYOUT — 12-col grid. Drives the dev overlay; consume via
+     grid-template-columns: repeat(var(--columns-count), 1fr) etc.
+     --columns-margin = side gutters (0 = flush). */
+  --columns-count: 12;
+  --columns-max-width: 1440px;
+  --columns-gutter: clamp(0.5rem, 1.5vw, 1.5rem);
+  --columns-margin: 0;
+
+  /* Font Families */
+  --font-display: "Arvo", serif;
+  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif;
+  --font-serif: "GFS Didot", serif;
+  --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
+
+  /* Font Sizes */
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-md: 1rem;      /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+  --font-size-2xl: 1.5rem;    /* 24px */
+  --font-size-3xl: 1.875rem;  /* 30px */
+  --font-size-4xl: 2.25rem;   /* 36px */
+  --font-size-5xl: 3rem;      /* 48px */
+  --font-size-6xl: 3.5rem;    /* 56px */
+  --font-size-7xl: 4.5rem;    /* 72px */
+
+  /* Icon glyph sizes — parallel to the type scale. */
+  --icon-size-xs: 0.875rem;    /* 14px */
+  --icon-size-sm: 1rem;        /* 16px */
+  --icon-size-md: 1.125rem;    /* 18px */
+  --icon-size-lg: 1.25rem;     /* 20px */
+  --icon-size-xl: 1.375rem;    /* 22px */
+  --icon-size-2xl: 1.625rem;   /* 26px */
+  --icon-size-3xl: 2rem;       /* 32px */
+  --icon-size-4xl: 2.5rem;     /* 40px */
+  --icon-size-5xl: 3rem;       /* 48px */
+  --icon-size-6xl: 3.5rem;     /* 56px */
+
+  /* Font Weights */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Gradients — fallbacks until the editor hydrates. Match
+     makeDefaultGradients(). */
+  --gradient-1: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
+  --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
+  --gradient-3: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-info-500) 100%);
+  --gradient-4: linear-gradient(45deg, var(--color-danger-500) 0%, var(--color-warning-500) 100%);
+
+  /* Gradient angle + stop primitives — aliasable like any other token. */
+  --gradient-angle-horizontal: 90deg;
+  --gradient-angle-diagonal: 135deg;
+  --gradient-angle-vertical: 180deg;
+  --gradient-stop-start: 0%;
+  --gradient-stop-mid: 50%;
+  --gradient-stop-end: 100%;
+
+  /* Shadows (elevation scale) */
+  --shadow-none: none;
+  --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+
+  /* Focus rings (box-shadow outline) */
+  --ring-focus-sm: 0 0 0 2px hsla(0, 78%, 60%, 0.1);
+  --ring-focus-md: 0 0 0 3px hsla(0, 78%, 60%, 0.1);
+  --ring-focus-lg: 0 0 0 4px hsla(0, 78%, 60%, 0.1);
+
+  /* Durations */
+  --duration-75: 75ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-750: 750ms;
+  --duration-1000: 1000ms;
+
+  /* Z-Index Layers */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 1000;
+  --z-modal: 1100;
+  --z-popover: 1200;
+  --z-tooltip: 1300;
+
+  /* Line Heights */
+  --line-height-xs: 1;
+  --line-height-sm: 1.25;
+  --line-height-md: 1.5;
+  --line-height-lg: 1.75;
+  --line-height-xl: 2;
+
+  /* Letter Spacing — 5-point, symmetric around normal (0). */
+  --letter-spacing-tighter: -0.04em;
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.04em;
+  --letter-spacing-wider: 0.08em;
+
+  /* Text alternate */
+  --text-alternate: #ffffff;
+  --text-alternate-secondary: #d6d0ce;
+  --text-alternate-tertiary: #8a8786;
+  --text-alternate-muted: #545352;
+  --text-alternate-disabled: #3b3b3b;
+}
+
+/* RESPONSIVE TYPE SCALE — display sizes (2xl–6xl) shrink on small
+   viewports; body sizes (xs–xl) stay constant. */
+
+@media (max-width: 768px) {
+  :root {
+    --font-size-2xl: 1.375rem;   /* 22px */
+    --font-size-3xl: 1.625rem;   /* 26px */
+    --font-size-4xl: 1.875rem;   /* 30px */
+    --font-size-5xl: 2.25rem;    /* 36px */
+    --font-size-6xl: 2.5rem;     /* 40px */
+    --font-size-7xl: 3rem;       /* 48px */
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --font-size-2xl: 1.25rem;    /* 20px */
+    --font-size-3xl: 1.5rem;     /* 24px */
+    --font-size-4xl: 1.75rem;    /* 28px */
+    --font-size-5xl: 2rem;       /* 32px */
+    --font-size-6xl: 2.25rem;    /* 36px */
+    --font-size-7xl: 2.625rem;   /* 42px */
+  }
+}