css-tags 0.1.0

package/core/tokens.css

@@ -0,0 +1,488 @@
+/* ================================================ */
+/* ==               @layer tokens                == */
+/* ================================================ */
+/* Register CSS Custom Properties */
+@property --color-h {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 250;
+}
+
+@property --color-c {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.1;
+}
+
+@property --color-l {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 50%;
+}
+
+@property --color-a {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --l-threshold {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.65;
+}
+
+@property --c-threshold {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.08;
+}
+
+/* --bg is intentionally NOT registered via @property.
+   As a regular custom property it inherits naturally, accepts any value
+   (colors, gradients, etc.), and var(--bg, <fallback>) works when unset. */
+
+@property --fg {
+  syntax: '*';
+  inherits: true;
+  initial-value: currentColor;
+}
+
+@property --l-delta {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 0%;
+}
+
+@property --c-delta {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 0%;
+}
+
+:root {
+  /* ========== COLOR SCALES ========== */
+  /* Lightness Scale (0-14) */
+  --scale-l-0: 99%;
+  --scale-l-1: 95%;
+  --scale-l-2: 90%;
+  --scale-l-3: 82%;
+  --scale-l-4: 74%;
+  --scale-l-5: 66%;
+  --scale-l-6: 58%;
+  --scale-l-7: 50%;
+  --scale-l-8: 42%;
+  --scale-l-9: 34%;
+  --scale-l-10: 26%;
+  --scale-l-11: 18%;
+  --scale-l-12: 10%;
+  --scale-l-13: 5%;
+  --scale-l-14: 1%;
+
+  /* Chroma Scale (0-12) */
+  --scale-c-0: 0;
+  --scale-c-1: 0.02;
+  --scale-c-2: 0.04;
+  --scale-c-3: 0.06;
+  --scale-c-4: 0.08;
+  --scale-c-5: 0.1;
+  --scale-c-6: 0.12;
+  --scale-c-7: 0.15;
+  --scale-c-8: 0.18;
+  --scale-c-9: 0.22;
+  --scale-c-10: 0.26;
+  --scale-c-11: 0.3;
+  --scale-c-12: 0.37;
+
+  /* Alpha Scale (0-8) */
+  --alpha-0: 0;
+  --alpha-1: 0.05;
+  --alpha-2: 0.1;
+  --alpha-3: 0.2;
+  --alpha-4: 0.4;
+  --alpha-5: 0.6;
+  --alpha-6: 0.75;
+  --alpha-7: 0.9;
+  --alpha-8: 1;
+
+  /* Contrast Ratios */
+  --contrast-ratio-low: 3;
+  --contrast-ratio-medium: 4.5;
+  --contrast-ratio-high: 7;
+
+  /* Max Chroma per Lightness Band */
+  --max-chroma-0: 0.04;
+  --max-chroma-1: 0.08;
+  --max-chroma-2: 0.15;
+  --max-chroma-3: 0.22;
+  --max-chroma-4: 0.18;
+  --max-chroma-5: 0.12;
+  --max-chroma-6: 0.06;
+
+  /* Base Hue Definitions for Palette */
+  --hue-gray: 250;
+  --hue-slate: 255;
+  --hue-red: 25;
+  --hue-orange: 55;
+  --hue-amber: 75;
+  --hue-yellow: 100;
+  --hue-lime: 120;
+  --hue-green: 145;
+  --hue-emerald: 160;
+  --hue-teal: 180;
+  --hue-cyan: 195;
+  --hue-sky: 210;
+  --hue-blue: 245;
+  --hue-indigo: 265;
+  --hue-violet: 285;
+  --hue-purple: 300;
+  --hue-fuchsia: 320;
+  --hue-pink: 340;
+  --hue-rose: 355;
+
+  /* ========== SHADOW SYSTEM ========== */
+  /* Shadow color base using HSL format for easier adjustments */
+  --shadow-color-base: 220 10% 10%;
+  --shadow-color-dark: 220 20% 90%;
+
+  /* Light mode shadows */
+  --shadow-sm: 0 1px 2px oklch(from hsl(var(--shadow-color-base)) l c h / 7%);
+  --shadow-md: 0 4px 6px -1px oklch(from hsl(var(--shadow-color-base)) l c h / 10%),
+    0 2px 4px -2px oklch(from hsl(var(--shadow-color-base)) l c h / 10%);
+  --shadow-lg: 0 10px 15px -3px oklch(from hsl(var(--shadow-color-base)) l c h / 10%),
+    0 4px 6px -4px oklch(from hsl(var(--shadow-color-base)) l c h / 10%);
+  --shadow-xl: 0 20px 25px -5px oklch(from hsl(var(--shadow-color-base)) l c h / 10%),
+    0 8px 10px -6px oklch(from hsl(var(--shadow-color-base)) l c h / 10%);
+  --shadow-inner: inset 0 2px 4px 0 oklch(from hsl(var(--shadow-color-base)) l c h / 5%);
+
+  /* Semantic shadow assignments */
+  --shadow-button: none;
+  --shadow-button-hover: none;
+  --shadow-button-active: var(--shadow-inner);
+  --shadow-card: none;
+  --shadow-dropdown: var(--shadow-lg);
+  --shadow-modal: var(--shadow-xl);
+  --transform-button-hover: none;
+  --transform-button-active: none;
+
+  /* ========== SPACING SYSTEM ========== */
+  /* Spacing Scale */
+  --spacing-0: 0;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 2.5rem;
+  --spacing-3xl: 3rem;
+
+  /* ========== TYPOGRAPHY SYSTEM ========== */
+  /* Contextual font families */
+  --font-family-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-heading: var(--font-family-body);
+  --font-family-ui: var(--font-family-body);
+  --font-family-code: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+
+  /* Step Scale: stable body sizes, fluid display sizes */
+  --font-size-step--2: 0.75rem;
+  --font-size-step--1: 0.875rem;
+  --font-size-step-0: 1rem;
+  --font-size-step-1-min: 1.0625rem;
+  --font-size-step-1-preferred: calc(1.02rem + 0.22vw);
+  --font-size-step-1-max: 1.125rem;
+  --font-size-step-1: clamp(var(--font-size-step-1-min), var(--font-size-step-1-preferred), var(--font-size-step-1-max));
+  --font-size-step-2-min: 1.1875rem;
+  --font-size-step-2-preferred: calc(1.11rem + 0.4vw);
+  --font-size-step-2-max: 1.25rem;
+  --font-size-step-2: clamp(var(--font-size-step-2-min), var(--font-size-step-2-preferred), var(--font-size-step-2-max));
+  --font-size-step-3-min: 1.375rem;
+  --font-size-step-3-preferred: calc(1.22rem + 0.75vw);
+  --font-size-step-3-max: 1.5rem;
+  --font-size-step-3: clamp(var(--font-size-step-3-min), var(--font-size-step-3-preferred), var(--font-size-step-3-max));
+  --font-size-step-4-min: 1.625rem;
+  --font-size-step-4-preferred: calc(1.32rem + 1.25vw);
+  --font-size-step-4-max: 1.875rem;
+  --font-size-step-4: clamp(var(--font-size-step-4-min), var(--font-size-step-4-preferred), var(--font-size-step-4-max));
+  --font-size-step-5-min: 2rem;
+  --font-size-step-5-preferred: calc(1.5rem + 1.9vw);
+  --font-size-step-5-max: 2.5rem;
+  --font-size-step-5: clamp(var(--font-size-step-5-min), var(--font-size-step-5-preferred), var(--font-size-step-5-max));
+  --font-size-step-6-min: 2.5rem;
+  --font-size-step-6-preferred: calc(1.8rem + 2.8vw);
+  --font-size-step-6-max: 3.25rem;
+  --font-size-step-6: clamp(var(--font-size-step-6-min), var(--font-size-step-6-preferred), var(--font-size-step-6-max));
+  --font-size-step-7-min: 3rem;
+  --font-size-step-7-preferred: calc(2.1rem + 3.6vw);
+  --font-size-step-7-max: 4.25rem;
+  --font-size-step-7: clamp(var(--font-size-step-7-min), var(--font-size-step-7-preferred), var(--font-size-step-7-max));
+
+  /* Public Size Aliases */
+  --font-size-xs: var(--font-size-step--2);
+  --font-size-sm: var(--font-size-step--1);
+  --font-size-base: var(--font-size-step-0);
+  --font-size-lg: var(--font-size-step-1);
+  --font-size-xl: var(--font-size-step-2);
+  --font-size-2xl: var(--font-size-step-3);
+  --font-size-3xl: var(--font-size-step-4);
+  --font-size-4xl: var(--font-size-step-5);
+  --font-size-5xl: var(--font-size-step-6);
+  --font-size-6xl: var(--font-size-step-7);
+
+  /* Semantic Typography Tokens */
+  --font-size-body-sm: var(--font-size-sm);
+  --font-size-body: var(--font-size-base);
+  --font-size-body-lg: var(--font-size-lg);
+  --font-size-lead: var(--font-size-xl);
+  --font-size-small: var(--font-size-sm);
+  --font-size-caption: var(--font-size-sm);
+  --font-size-code: 0.9em;
+
+  /* Contextual typography inputs. These can be themed independently. */
+  --font-size-prose: 1rem;
+  --line-height-prose: 1.6;
+  --measure-prose: 68ch;
+  --font-size-ui: 0.875rem;
+  --line-height-ui: 1.375;
+  --font-weight-ui: 500;
+  --letter-spacing-ui: 0;
+  --font-size-control: 1rem;
+  --line-height-control: 1.5;
+  --font-size-navigation: 0.875rem;
+  --line-height-navigation: 1.375;
+  --font-size-card-title: 1.25rem;
+  --line-height-card-title: 1.2;
+  --font-size-meta: 0.875rem;
+  --line-height-meta: 1.375;
+  --font-weight-heading: 600;
+  --letter-spacing-heading: -0.015em;
+
+  --font-size-h1: var(--font-size-6xl);
+  --font-size-h2: var(--font-size-5xl);
+  --font-size-h3: var(--font-size-4xl);
+  --font-size-h4: var(--font-size-3xl);
+  --font-size-h5: var(--font-size-2xl);
+  --font-size-h6: var(--font-size-lg);
+
+  /* Font Weight Scale */
+  --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;
+
+  /* Line Height Scale */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Semantic Line Heights */
+  --line-height-body: 1.6;
+  --line-height-lead: 1.5;
+  --line-height-heading: 1.15;
+  --line-height-h1: 1.05;
+  --line-height-h2: 1.1;
+  --line-height-h3: 1.15;
+  --line-height-h4: 1.2;
+  --line-height-h5: 1.25;
+  --line-height-h6: 1.3;
+
+  /* Letter Spacing Scale */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Typography Measure Tokens */
+  --measure-body: 68ch;
+  --measure-heading: 18ch;
+  --measure-code: 80ch;
+  --measure-wide: 80ch;
+
+  /* Rich-content rhythm */
+  --space-flow: 1em;
+  --space-heading-top: 1.8em;
+  --space-heading-bottom: 0.65em;
+  --space-eyebrow-bottom: 0.5rem;
+  --space-rich-block: 1.5em;
+  --space-figure-caption-top: 0.5rem;
+  --space-callout-pad-x: 1rem;
+  --space-callout-pad-y: 1rem;
+  --letter-spacing-eyebrow: var(--letter-spacing-widest);
+  --prose-heading-scroll-margin: calc(var(--site-header-min-height, 0px) + var(--space-lg, 2rem));
+  --prose-link-wrap: anywhere;
+  --prose-task-gap: 0.6em;
+  --prose-task-marker-offset: 1.5em;
+  --prose-definition-gap: 0.35em;
+  --prose-footnotes-gap: 0.75em;
+  --prose-footnotes-padding-block-start: 1.5em;
+  --prose-footnotes-border: var(--border-width, 1px) solid var(--outline-subtle);
+  --prose-footnotes-font-size: var(--font-size-sm);
+  --prose-footnote-target-background: var(--highlight-bg-subtle);
+  --prose-heading-anchor-gap: 0.35em;
+  --prose-heading-anchor-opacity: 0;
+  --prose-heading-anchor-visible-opacity: 0.75;
+  --prose-quote-cite-gap: 0.75em;
+  --prose-embed-min-height: 18rem;
+
+  /* Dividers */
+  --divider-color-muted: var(--outline-muted);
+  --divider-color-subtle: var(--outline-subtle);
+  --divider-color-default: var(--outline-default, var(--outline));
+  --divider-color-overt: var(--outline-overt);
+  --divider-color-accent: var(--accent);
+  --divider-size: var(--border-width, 1px);
+  --divider-style: solid;
+  --divider-gap: var(--space-md, 1rem);
+  --divider-min-length: 1.5rem;
+  --hr-color: var(--divider-color-subtle);
+
+  /* Breadcrumbs */
+  --breadcrumbs-gap: var(--space-xs, 0.5rem);
+  --breadcrumbs-separator: "/";
+  --breadcrumbs-color: var(--text-subtle);
+  --breadcrumbs-hover-color: var(--text-overt);
+  --breadcrumbs-current-color: var(--text-default);
+  --breadcrumbs-font-size: var(--font-size-navigation, var(--font-size-sm));
+
+  /* Pagination */
+  --pagination-gap: var(--space-xs, 0.5rem);
+  --pagination-target-size: 2.75rem;
+  --pagination-padding-inline: var(--space-sm, 0.75rem);
+  --pagination-radius: var(--radius-md, 0.5rem);
+  --pagination-color: var(--text-default);
+  --pagination-background: transparent;
+  --pagination-hover-background: var(--surface-subtle);
+  --pagination-current-background: var(--accent);
+  --pagination-current-color: var(--on-accent, white);
+  --pagination-disabled-opacity: 0.5;
+
+  /* Site shell */
+  --site-header-min-height: 4rem;
+  --site-header-compact-min-height: 3rem;
+  --site-header-padding-block: var(--space-sm, 0.75rem);
+  --site-header-padding-inline: var(--space-md, 1rem);
+  --site-header-compact-padding-block: var(--space-xs, 0.5rem);
+  --site-header-gap: var(--space-lg, 1.5rem);
+  --site-header-compact-gap: var(--space-sm, 0.75rem);
+  --site-header-actions-gap: var(--space-xs, 0.5rem);
+  --site-header-brand-gap: var(--space-sm, 0.75rem);
+  --site-header-brand-font-size: var(--font-size-lg, 1.125rem);
+  --site-header-brand-font-weight: var(--font-weight-bold, 700);
+  --site-header-background: var(--surface-default);
+  --site-header-color: var(--text-default);
+  --site-header-brand-color: var(--text-overt);
+  --site-header-border: 1px solid var(--outline-subtle);
+  --site-header-shadow: var(--shadow-md, 0 0.25rem 0.75rem rgb(0 0 0 / 0.12));
+  --site-header-sticky-offset: 0;
+  --site-header-z-index: var(--z-index-50, 50);
+
+  --site-footer-padding-block: var(--space-2xl, 2.5rem);
+  --site-footer-compact-padding-block: var(--space-lg, 1.5rem);
+  --site-footer-padding-inline: var(--space-md, 1rem);
+  --site-footer-gap: var(--space-xl, 2rem);
+  --site-footer-compact-gap: var(--space-md, 1rem);
+  --site-footer-grid-gap: var(--space-xl, 2rem);
+  --site-footer-column-min: 12rem;
+  --site-footer-meta-gap: var(--space-md, 1rem);
+  --site-footer-meta-padding-block-start: var(--space-lg, 1.5rem);
+  --site-footer-background: var(--surface-subtle);
+  --site-footer-color: var(--text-default);
+  --site-footer-meta-color: var(--text-subtle);
+  --site-footer-meta-font-size: var(--font-size-meta, var(--font-size-sm, 0.875rem));
+  --site-footer-border: 1px solid var(--outline-subtle);
+  --site-footer-meta-border: 1px solid var(--outline-subtle);
+
+  /* Text Box Progressive Enhancement */
+  --text-box: normal;
+  --text-box-trim: initial;
+  --text-box-edge: auto;
+
+  --text-box-ui: trim-both cap alphabetic;
+  --text-box-trim-ui: trim-both;
+  --text-box-edge-ui: cap alphabetic;
+
+  --text-box-button: var(--text-box-ui);
+  --text-box-trim-button: var(--text-box-trim-ui);
+  --text-box-edge-button: var(--text-box-edge-ui);
+
+  --text-box-badge: var(--text-box-ui);
+  --text-box-trim-badge: var(--text-box-trim-ui);
+  --text-box-edge-badge: var(--text-box-edge-ui);
+
+  --text-box-chip: var(--text-box-ui);
+  --text-box-trim-chip: var(--text-box-trim-ui);
+  --text-box-edge-chip: var(--text-box-edge-ui);
+
+  --text-box-eyebrow: var(--text-box-ui);
+  --text-box-trim-eyebrow: var(--text-box-trim-ui);
+  --text-box-edge-eyebrow: var(--text-box-edge-ui);
+
+  --text-box-heading: normal;
+  --text-box-trim-heading: initial;
+  --text-box-edge-heading: auto;
+
+  --text-box-caption: normal;
+  --text-box-trim-caption: initial;
+  --text-box-edge-caption: auto;
+
+  /* ========== POSITIONING & LAYOUT SYSTEM ========== */
+  /* Positioning Scale */
+  --inset-0: 0;
+  --inset-xs: 0.25rem;
+  --inset-sm: 0.5rem;
+  --inset-md: 1rem;
+
+  /* Space Scale */
+  --density-factor: 1;
+  --space-xs: calc(0.5rem * var(--density-factor));
+  --space-sm: calc(0.75rem * var(--density-factor));
+  --space-md: calc(1.5rem * var(--density-factor));
+  --space-lg: calc(2rem * var(--density-factor));
+  --space-xl: calc(3rem * var(--density-factor));
+
+  /* Z-Index Scale */
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-auto: auto;
+
+  /* Flex Values */
+  --flex-1: 1 1 0%;
+  --flex-auto: 1 1 auto;
+  --flex-initial: 0 1 auto;
+  --flex-none: none;
+
+  /* Grid Template Sizes */
+  --grid-cols-1: repeat(1, minmax(0, 1fr));
+  --grid-cols-2: repeat(2, minmax(0, 1fr));
+  --grid-cols-3: repeat(3, minmax(0, 1fr));
+  --grid-cols-4: repeat(4, minmax(0, 1fr));
+  --grid-cols-6: repeat(6, minmax(0, 1fr));
+  --grid-cols-12: repeat(12, minmax(0, 1fr));
+
+  /* Container Query Breakpoints */
+  --cq-bp-xs: 20em;
+  /* ~320px */
+  --cq-bp-sm: 30em;
+  /* ~480px */
+  --cq-bp-md: 45em;
+  /* ~720px */
+  --cq-bp-lg: 60em;
+  /* ~960px */
+  --cq-bp-xl: 80em;
+  /* ~1280px */
+  --cq-bp-2xl: 96em;
+  /* ~1536px */
+}