css-tags 0.1.0

package/core/mixins.css

@@ -0,0 +1,376 @@
+/**
+ * mixins.css
+ *
+ * A library of reusable CSS Functions and Mixins.
+ * ------------------------------------------------------------------------------
+ * This file contains a collection of helpful utilities based on the proposed
+ * CSS @function and @mixin specification.
+ *
+ * ==============================================================================
+ * ⚠️ IMPORTANT: PROGRESSIVE ENHANCEMENT NOTICE ⚠️
+ * Custom @function support is available in Chromium 139+, but is not yet a
+ * cross-browser baseline. @mixin remains an actively changing draft feature.
+ * Keep standard declarations as fallbacks for production output.
+ * ==============================================================================
+ */
+
+/* --- FUNCTIONS (return single values) --- */
+
+/** @function --rem: Converts pixels to rems. */
+@function --rem(--px type(*), --base type(*): 16) returns type(*) {
+  result: calc(var(--px) / var(--base) * 1rem);
+}
+
+/** @function --fluid: Creates a fluid value that scales with the viewport. */
+@function --fluid(
+  --min-val type(*),
+  --max-val type(*),
+  --min-vp type(*): 375px,
+  --max-vp type(*): 1280px
+) returns type(*) {
+  --slope: calc((var(--max-val) - var(--min-val)) / (var(--max-vp) - var(--min-vp)));
+  --intercept: calc(var(--min-val) - var(--slope) * var(--min-vp));
+  --preferred-val: calc(var(--slope) * 100vw + var(--intercept));
+  result: clamp(var(--min-val), var(--preferred-val), var(--max-val));
+}
+
+/** @function --contrast-color: Calculates black or white for best contrast. */
+@function --contrast-color(
+  --bg-color type(*),
+  --threshold type(*): 0.65
+) returns type(*) {
+  --l-result: clamp(0, (l / var(--threshold) - 1) * -infinity, 1);
+  result: oklch(from var(--bg-color) var(--l-result) 0 h);
+}
+
+/** @function --palette-color: Builds one OKLCH palette stop from token values. */
+@function --palette-color(
+  --lightness type(*),
+  --chroma type(*),
+  --hue type(*)
+) returns type(*) {
+  result: oklch(var(--lightness) var(--chroma) var(--hue));
+}
+
+/** @function --palette-clamped-color: Builds a gamut-limited OKLCH stop. */
+@function --palette-clamped-color(
+  --lightness type(*),
+  --chroma type(*),
+  --max-chroma type(*),
+  --hue type(*)
+) returns type(*) {
+  result: oklch(var(--lightness) min(var(--chroma), var(--max-chroma)) var(--hue));
+}
+
+/** @function --palette-seed-color: Rebuilds a stop while preserving a seed color's hue. */
+@function --palette-seed-color(
+  --seed type(*),
+  --lightness type(*),
+  --chroma type(*),
+  --max-chroma type(*)
+) returns type(*) {
+  result: oklch(from var(--seed) var(--lightness) min(var(--chroma), var(--max-chroma)) h);
+}
+
+/** @function --palette-alpha: Applies an alpha token without changing OKLCH channels. */
+@function --palette-alpha(--color type(*), --alpha type(*)) returns type(*) {
+  result: oklch(from var(--color) l c h / var(--alpha));
+}
+
+/** @function --palette-mix: Mixes two colors perceptually in OKLCH. */
+@function --palette-mix(
+  --from type(*),
+  --to type(*),
+  --amount type(*): 50%
+) returns type(*) {
+  result: color-mix(in oklch, var(--from) calc(100% - var(--amount)), var(--to) var(--amount));
+}
+
+/* --- MIXINS (apply blocks of declarations) --- */
+
+/**
+ * @mixin --palette-scale: Builds generic --palette-step-0..12 output tokens.
+ * Set --palette-chroma-0..12 on the target before applying the mixin.
+ */
+@mixin --palette-scale(--hue type(*)) {
+  @result {
+    --palette-step-0: --palette-color(var(--scale-l-0), var(--palette-chroma-0), var(--hue));
+    --palette-step-1: --palette-color(var(--scale-l-1), var(--palette-chroma-1), var(--hue));
+    --palette-step-2: --palette-color(var(--scale-l-2), var(--palette-chroma-2), var(--hue));
+    --palette-step-3: --palette-color(var(--scale-l-3), var(--palette-chroma-3), var(--hue));
+    --palette-step-4: --palette-color(var(--scale-l-4), var(--palette-chroma-4), var(--hue));
+    --palette-step-5: --palette-color(var(--scale-l-5), var(--palette-chroma-5), var(--hue));
+    --palette-step-6: --palette-color(var(--scale-l-6), var(--palette-chroma-6), var(--hue));
+    --palette-step-7: --palette-color(var(--scale-l-7), var(--palette-chroma-7), var(--hue));
+    --palette-step-8: --palette-color(var(--scale-l-8), var(--palette-chroma-8), var(--hue));
+    --palette-step-9: --palette-color(var(--scale-l-9), var(--palette-chroma-9), var(--hue));
+    --palette-step-10: --palette-color(var(--scale-l-10), var(--palette-chroma-10), var(--hue));
+    --palette-step-11: --palette-color(var(--scale-l-11), var(--palette-chroma-11), var(--hue));
+    --palette-step-12: --palette-color(var(--scale-l-12), var(--palette-chroma-12), var(--hue));
+  }
+}
+
+/** @mixin --palette-clamped-scale: Generates a complete shared-curve palette from a hue. */
+@mixin --palette-clamped-scale(--hue type(*)) {
+  @result {
+    --palette-step-0: --palette-clamped-color(var(--scale-l-0), var(--scale-c-1), var(--clamp-max-c-0), var(--hue));
+    --palette-step-1: --palette-clamped-color(var(--scale-l-1), var(--scale-c-2), var(--clamp-max-c-0), var(--hue));
+    --palette-step-2: --palette-clamped-color(var(--scale-l-2), var(--scale-c-3), var(--clamp-max-c-1), var(--hue));
+    --palette-step-3: --palette-clamped-color(var(--scale-l-3), var(--scale-c-4), var(--clamp-max-c-1), var(--hue));
+    --palette-step-4: --palette-clamped-color(var(--scale-l-4), var(--scale-c-5), var(--clamp-max-c-2), var(--hue));
+    --palette-step-5: --palette-clamped-color(var(--scale-l-5), var(--scale-c-7), var(--clamp-max-c-2), var(--hue));
+    --palette-step-6: --palette-clamped-color(var(--scale-l-6), var(--scale-c-8), var(--clamp-max-c-3), var(--hue));
+    --palette-step-7: --palette-clamped-color(var(--scale-l-7), var(--scale-c-9), var(--clamp-max-c-3), var(--hue));
+    --palette-step-8: --palette-clamped-color(var(--scale-l-8), var(--scale-c-8), var(--clamp-max-c-4), var(--hue));
+    --palette-step-9: --palette-clamped-color(var(--scale-l-9), var(--scale-c-7), var(--clamp-max-c-4), var(--hue));
+    --palette-step-10: --palette-clamped-color(var(--scale-l-10), var(--scale-c-5), var(--clamp-max-c-5), var(--hue));
+    --palette-step-11: --palette-clamped-color(var(--scale-l-11), var(--scale-c-4), var(--clamp-max-c-5), var(--hue));
+    --palette-step-12: --palette-clamped-color(var(--scale-l-12), var(--scale-c-3), var(--clamp-max-c-6), var(--hue));
+  }
+}
+
+/** @mixin --palette-seed-scale: Generates a complete palette while preserving a seed color's hue. */
+@mixin --palette-seed-scale(--seed type(*)) {
+  @result {
+    --palette-step-0: --palette-seed-color(var(--seed), var(--scale-l-0), var(--scale-c-1), var(--clamp-max-c-0));
+    --palette-step-1: --palette-seed-color(var(--seed), var(--scale-l-1), var(--scale-c-2), var(--clamp-max-c-0));
+    --palette-step-2: --palette-seed-color(var(--seed), var(--scale-l-2), var(--scale-c-3), var(--clamp-max-c-1));
+    --palette-step-3: --palette-seed-color(var(--seed), var(--scale-l-3), var(--scale-c-4), var(--clamp-max-c-1));
+    --palette-step-4: --palette-seed-color(var(--seed), var(--scale-l-4), var(--scale-c-5), var(--clamp-max-c-2));
+    --palette-step-5: --palette-seed-color(var(--seed), var(--scale-l-5), var(--scale-c-7), var(--clamp-max-c-2));
+    --palette-step-6: --palette-seed-color(var(--seed), var(--scale-l-6), var(--scale-c-8), var(--clamp-max-c-3));
+    --palette-step-7: --palette-seed-color(var(--seed), var(--scale-l-7), var(--scale-c-9), var(--clamp-max-c-3));
+    --palette-step-8: --palette-seed-color(var(--seed), var(--scale-l-8), var(--scale-c-8), var(--clamp-max-c-4));
+    --palette-step-9: --palette-seed-color(var(--seed), var(--scale-l-9), var(--scale-c-7), var(--clamp-max-c-4));
+    --palette-step-10: --palette-seed-color(var(--seed), var(--scale-l-10), var(--scale-c-5), var(--clamp-max-c-5));
+    --palette-step-11: --palette-seed-color(var(--seed), var(--scale-l-11), var(--scale-c-4), var(--clamp-max-c-5));
+    --palette-step-12: --palette-seed-color(var(--seed), var(--scale-l-12), var(--scale-c-3), var(--clamp-max-c-6));
+  }
+}
+
+/** @mixin --palette-alpha-scale: Generates transparent variants of one palette color. */
+@mixin --palette-alpha-scale(--color type(*)) {
+  @result {
+    --palette-alpha-0: --palette-alpha(var(--color), var(--alpha-0));
+    --palette-alpha-1: --palette-alpha(var(--color), var(--alpha-1));
+    --palette-alpha-2: --palette-alpha(var(--color), var(--alpha-2));
+    --palette-alpha-3: --palette-alpha(var(--color), var(--alpha-3));
+    --palette-alpha-4: --palette-alpha(var(--color), var(--alpha-4));
+    --palette-alpha-5: --palette-alpha(var(--color), var(--alpha-5));
+    --palette-alpha-6: --palette-alpha(var(--color), var(--alpha-6));
+    --palette-alpha-7: --palette-alpha(var(--color), var(--alpha-7));
+    --palette-alpha-8: --palette-alpha(var(--color), var(--alpha-8));
+  }
+}
+
+/** @mixin --palette-roles: Adds convenient aliases without making contrast guarantees. */
+@mixin --palette-roles {
+  @result {
+    --palette-lightest: var(--palette-step-0);
+    --palette-subtle: var(--palette-step-2);
+    --palette-light: var(--palette-step-4);
+    --palette-mid: var(--palette-step-7);
+    --palette-dark: var(--palette-step-9);
+    --palette-strong: var(--palette-step-11);
+    --palette-darkest: var(--palette-step-12);
+  }
+}
+
+
+
+/** @mixin --center-grid: Centers content using grid. */
+@mixin --center-grid {
+  display: grid;
+  place-content: center;
+}
+
+/** @mixin --elevation: Applies a consistent box-shadow from a scale. */
+@mixin --elevation(--level type(*)) {
+  --shadow-1: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  @when (var(--level) = 1) { box-shadow: var(--shadow-1); }
+  @when (var(--level) = 2) { box-shadow: var(--shadow-2); }
+  @when (var(--level) = 3) { box-shadow: var(--shadow-3); }
+}
+
+/** @mixin --visually-hidden: For accessibility. */
+@mixin --visually-hidden {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0);
+  white-space: nowrap; border-width: 0;
+}
+
+/** @mixin --contrast-text: Applies accessible text color with fallbacks. */
+@mixin --contrast-text(--bg-color, --threshold: 0.65) {
+  @property --bg-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
+  color: white;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  @supports (color: oklch(from red l c h)) {
+    --l-result: clamp(0, (l / var(--threshold) - 1) * -infinity, 1);
+    color: oklch(from var(--bg-color) var(--l-result) 0 h);
+    text-shadow: none;
+  }
+  @supports (color: contrast-color(red)) {
+    color: contrast-color(var(--bg-color) to black or white);
+    text-shadow: none;
+  }
+}
+
+/** @mixin --stack: A one-dimensional block layout with adjustable rhythm. */
+@mixin --stack(
+  --gap type(*): var(--space-md, 1rem),
+  --align type(*): stretch
+) {
+  display: grid;
+  gap: var(--gap);
+  align-items: var(--align);
+  min-inline-size: 0;
+}
+
+/** @mixin --cluster: A wrapping inline group for actions, tags, and metadata. */
+@mixin --cluster(
+  --gap type(*): var(--space-sm, 0.75rem),
+  --align type(*): center,
+  --justify type(*): flex-start
+) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--align);
+  justify-content: var(--justify);
+  gap: var(--gap);
+  min-inline-size: 0;
+}
+
+/** @mixin --surface-frame: A token-driven bordered surface recipe. */
+@mixin --surface-frame(
+  --background type(*): var(--surface-default),
+  --color type(*): var(--text-default),
+  --border-color type(*): var(--outline-subtle),
+  --radius type(*): var(--radius-lg, 0.75rem),
+  --padding type(*): var(--space-md, 1rem),
+  --shadow type(*): none
+) {
+  padding: var(--padding);
+  border: var(--border-width, 1px) solid var(--border-color);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--color);
+  box-shadow: var(--shadow);
+  min-inline-size: 0;
+}
+
+/** @mixin --content-region-rhythm: Compact rhythm inside composed UI regions. */
+@mixin --content-region-rhythm(--gap type(*): var(--space-xs, 0.5rem)) {
+  display: grid;
+  gap: var(--gap);
+  min-inline-size: 0;
+
+  & > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl) {
+    margin-block: 0;
+  }
+}
+
+/** @mixin --focus-ring: The library's visible keyboard-focus contract. */
+@mixin --focus-ring(
+  --color type(*): var(--outline-focus),
+  --width type(*): var(--border-width-thick, 2px),
+  --offset type(*): 2px
+) {
+  outline: var(--width) solid var(--color);
+  outline-offset: var(--offset);
+}
+/* Theme mixins: property-driven role system */
+
+@mixin --surface-role(--role type(*)) {
+  @when (var(--role) = muted) {
+    --bg: var(--surface-muted);
+    --border: var(--outline-subtle);
+    --text: var(--text-default);
+  }
+  @when (var(--role) = subtle) {
+    --bg: var(--surface-subtle);
+    --border: var(--outline-subtle);
+    --text: var(--text-default);
+  }
+  @when (var(--role) = default) {
+    --bg: var(--surface-default);
+    --border: var(--outline-default);
+    --text: var(--text-default);
+  }
+  @when (var(--role) = overt) {
+    --bg: var(--surface-overt-dark);
+    --border: var(--outline-overt);
+    --text: var(--text-overt);
+  }
+}
+@mixin --state-adjust {
+  transition: background-color var(--transition-duration, 150ms) var(--transition-timing, ease-out),
+              border-color var(--transition-duration, 150ms) var(--transition-timing, ease-out),
+              color var(--transition-duration, 150ms) var(--transition-timing, ease-out),
+              box-shadow var(--transition-duration, 150ms) var(--transition-timing, ease-out);
+  &:hover:not([disabled]) {
+    --bg: oklch(from var(--bg) calc(l + var(--l-delta-1)) c h);
+    --border: oklch(from var(--border) calc(l + var(--l-delta-1)) c h);
+  }
+  &:active:not([disabled]) {
+    --bg: oklch(from var(--bg) calc(l + var(--l-delta-1-down)) c h);
+    --border: oklch(from var(--border) calc(c + var(--c-delta-1)) l h);
+  }
+  &:focus-visible {
+    outline: var(--border-width-thick, 2px) solid var(--outline-focus);
+    outline-offset: 2px;
+  }
+}
+
+@mixin --contrast-text-for-bg {
+  --auto-contrast-text: oklch(from var(--bg, currentColor) clamp(0.1, (var(--l-threshold, 0.65) / l - 1) * 999, 0.98) min(c, var(--c-threshold, 0.08)) h);
+
+  color: var(--auto-contrast-text, oklch(
+    from var(--bg, currentColor)
+    clamp(0.1, (var(--l-threshold, 0.65) / l - 1) * 999, 0.98)
+    min(c, var(--c-threshold, 0.08))
+    h
+  ));
+}
+
+@mixin --button-role(--role: default, --accent-color: var(--accent)) {
+  @mixin --surface-role(var(--role));
+  background-color: var(--bg);
+  border: var(--border-width, 1px) solid var(--border);
+  @mixin --contrast-text-for-bg;
+  @apply --state-adjust;
+}
+
+@mixin --input-role(--role: subtle) {
+  @mixin --surface-role(var(--role));
+  background-color: var(--bg);
+  border: var(--border-width, 1px) solid var(--border);
+  color: var(--text);
+  @apply --state-adjust;
+}
+
+@mixin --feedback-role(--kind type(*)) {
+  @when (var(--kind) = success) {
+    --bg: var(--surface-success);
+    --border: var(--outline-success);
+    --text: var(--text-success);
+  }
+  @when (var(--kind) = warning) {
+    --bg: var(--surface-warning);
+    --border: var(--outline-warning);
+    --text: var(--text-warning);
+  }
+  @when (var(--kind) = error) {
+    --bg: var(--surface-error);
+    --border: var(--outline-error);
+    --text: var(--text-error);
+  }
+  @when (var(--kind) = info) {
+    --bg: var(--surface-info);
+    --border: var(--outline-info);
+    --text: var(--text-info);
+  }
+}

package/core/palette-accent.css

@@ -0,0 +1,8 @@
+:root {
+ /* Accent Scale */
+ --accent-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--accent-h)); --accent-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--accent-h)); --accent-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--accent-h)); --accent-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--accent-h)); --accent-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--accent-h)); --accent-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--accent-h)); --accent-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--accent-h)); --accent-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--accent-h)); --accent-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--accent-h)); --accent-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--accent-h)); --accent-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--accent-h)); --accent-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--accent-h)); --accent-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--accent-h));
+ /* Secondary Scale */
+ --secondary-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--secondary-h)); --secondary-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--secondary-h)); --secondary-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--secondary-h)); --secondary-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--secondary-h)); --secondary-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--secondary-h)); --secondary-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--secondary-h)); --secondary-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--secondary-h)); --secondary-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--secondary-h)); --secondary-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--secondary-h)); --secondary-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--secondary-h)); --secondary-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--secondary-h)); --secondary-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--secondary-h)); --secondary-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--secondary-h));
+ /* Tertiary Scale */
+ --tertiary-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--tertiary-h)); --tertiary-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--tertiary-h)); --tertiary-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--tertiary-h)); --tertiary-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--tertiary-h)); --tertiary-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--tertiary-h)); --tertiary-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--tertiary-h)); --tertiary-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--tertiary-h)); --tertiary-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--tertiary-h)); --tertiary-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--tertiary-h)); --tertiary-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--tertiary-h)); --tertiary-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--tertiary-h)); --tertiary-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--tertiary-h)); --tertiary-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--tertiary-h));
+}

package/core/palette-base.css

@@ -0,0 +1,107 @@
+:root {
+ /* Additional Hues */
+ --hue-brown: 55;
+ --hue-gold: 85;
+ --hue-olive: 95;
+ --hue-magenta: 320;
+ /* Max Chroma Clamps */
+ --clamp-max-c-0: var(--max-chroma-0); --clamp-max-c-1: var(--max-chroma-1);
+ --clamp-max-c-2: var(--max-chroma-2); --clamp-max-c-3: var(--max-chroma-3);
+ --clamp-max-c-4: var(--max-chroma-4); --clamp-max-c-5: var(--max-chroma-5);
+ --clamp-max-c-6: var(--max-chroma-6);
+ --clamp-error-max-c-2: calc(var(--max-chroma-2) * 1.1); --clamp-error-max-c-3: calc(var(--max-chroma-3) * 1.1); --clamp-error-max-c-4: calc(var(--max-chroma-4) * 1.1);
+ --clamp-orange-max-c-2: calc(var(--max-chroma-2) * 1.1); --clamp-orange-max-c-3: calc(var(--max-chroma-3) * 1.1); --clamp-orange-max-c-4: calc(var(--max-chroma-4) * 1.1);
+ --clamp-neutral-max-c-0: calc(var(--max-chroma-0) * 0.5); --clamp-neutral-max-c-1: calc(var(--max-chroma-1) * 0.5); --clamp-neutral-max-c-2: calc(var(--max-chroma-2) * 0.5);
+ --clamp-neutral-max-c-3: calc(var(--max-chroma-3) * 0.5); --clamp-neutral-max-c-4: calc(var(--max-chroma-4) * 0.5); --clamp-neutral-max-c-5: calc(var(--max-chroma-5) * 0.5); --clamp-neutral-max-c-6: calc(var(--max-chroma-6) * 0.5);
+
+ /* Perceptual chroma profiles for named color families. */
+ /* Brown */
+ --palette-brown-chroma-0: 0.011;
+ --palette-brown-chroma-1: 0.022;
+ --palette-brown-chroma-2: 0.033;
+ --palette-brown-chroma-3: 0.044;
+ --palette-brown-chroma-4: 0.055;
+ --palette-brown-chroma-5: 0.083;
+ --palette-brown-chroma-6: 0.099;
+ --palette-brown-chroma-7: 0.121;
+ --palette-brown-chroma-8: 0.099;
+ --palette-brown-chroma-9: 0.083;
+ --palette-brown-chroma-10: 0.055;
+ --palette-brown-chroma-11: 0.044;
+ --palette-brown-chroma-12: 0.033;
+ /* Gold */
+ --palette-gold-chroma-0: 0.022;
+ --palette-gold-chroma-1: 0.044;
+ --palette-gold-chroma-2: 0.066;
+ --palette-gold-chroma-3: 0.088;
+ --palette-gold-chroma-4: 0.11;
+ --palette-gold-chroma-5: 0.165;
+ --palette-gold-chroma-6: 0.198;
+ --palette-gold-chroma-7: 0.22;
+ --palette-gold-chroma-8: 0.18;
+ --palette-gold-chroma-9: 0.165;
+ --palette-gold-chroma-10: 0.11;
+ --palette-gold-chroma-11: 0.088;
+ --palette-gold-chroma-12: 0.06;
+ /* Orange */
+ --palette-orange-chroma-0: 0.023;
+ --palette-orange-chroma-1: 0.046;
+ --palette-orange-chroma-2: 0.069;
+ --palette-orange-chroma-3: 0.092;
+ --palette-orange-chroma-4: 0.115;
+ --palette-orange-chroma-5: 0.138;
+ --palette-orange-chroma-6: 0.207;
+ --palette-orange-chroma-7: 0.24;
+ --palette-orange-chroma-8: 0.2;
+ --palette-orange-chroma-9: 0.173;
+ --palette-orange-chroma-10: 0.115;
+ --palette-orange-chroma-11: 0.092;
+ --palette-orange-chroma-12: 0.06;
+ /* Yellow */
+ --palette-yellow-chroma-0: 0.028;
+ --palette-yellow-chroma-1: 0.056;
+ --palette-yellow-chroma-2: 0.084;
+ --palette-yellow-chroma-3: 0.112;
+ --palette-yellow-chroma-4: 0.14;
+ --palette-yellow-chroma-5: 0.168;
+ --palette-yellow-chroma-6: 0.21;
+ --palette-yellow-chroma-7: 0.24;
+ --palette-yellow-chroma-8: 0.2;
+ --palette-yellow-chroma-9: 0.168;
+ --palette-yellow-chroma-10: 0.13;
+ --palette-yellow-chroma-11: 0.112;
+ --palette-yellow-chroma-12: 0.065;
+ /* Cyan */
+ --palette-cyan-chroma-0: 0.022;
+ --palette-cyan-chroma-1: 0.04;
+ --palette-cyan-chroma-2: 0.066;
+ --palette-cyan-chroma-3: 0.08;
+ --palette-cyan-chroma-4: 0.11;
+ --palette-cyan-chroma-5: 0.132;
+ --palette-cyan-chroma-6: 0.165;
+ --palette-cyan-chroma-7: 0.198;
+ --palette-cyan-chroma-8: 0.165;
+ --palette-cyan-chroma-9: 0.132;
+ --palette-cyan-chroma-10: 0.11;
+ --palette-cyan-chroma-11: 0.088;
+ --palette-cyan-chroma-12: 0.06;
+ /* Slate */
+ --palette-slate-chroma-0: 0.006;
+ --palette-slate-chroma-1: 0.012;
+ --palette-slate-chroma-2: 0.018;
+ --palette-slate-chroma-3: 0.024;
+ --palette-slate-chroma-4: 0.03;
+ --palette-slate-chroma-5: 0.036;
+ --palette-slate-chroma-6: 0.045;
+ --palette-slate-chroma-7: 0.054;
+ --palette-slate-chroma-8: 0.045;
+ --palette-slate-chroma-9: 0.036;
+ --palette-slate-chroma-10: 0.03;
+ --palette-slate-chroma-11: 0.024;
+ --palette-slate-chroma-12: 0.018;
+
+ /* Gray Scale */
+ --gray-0: oklch(var(--scale-l-0) 0 0); --gray-1: oklch(var(--scale-l-1) 0 0); --gray-2: oklch(var(--scale-l-2) 0 0); --gray-3: oklch(var(--scale-l-3) 0 0); --gray-4: oklch(var(--scale-l-4) 0 0); --gray-5: oklch(var(--scale-l-5) 0 0); --gray-6: oklch(var(--scale-l-6) 0 0); --gray-7: oklch(var(--scale-l-7) 0 0); --gray-8: oklch(var(--scale-l-8) 0 0); --gray-9: oklch(var(--scale-l-9) 0 0); --gray-10: oklch(var(--scale-l-10) 0 0); --gray-11: oklch(var(--scale-l-11) 0 0); --gray-12: oklch(var(--scale-l-12) 0 0);
+ /* Neutral Scale */
+ --neutral-0: oklch(var(--scale-l-0) min(var(--scale-c-0), var(--clamp-neutral-max-c-0)) var(--neutral-h)); --neutral-1: oklch(var(--scale-l-1) min(var(--scale-c-1), var(--clamp-neutral-max-c-0)) var(--neutral-h)); --neutral-2: oklch(var(--scale-l-2) min(var(--scale-c-1), var(--clamp-neutral-max-c-1)) var(--neutral-h)); --neutral-3: oklch(var(--scale-l-3) min(var(--scale-c-1), var(--clamp-neutral-max-c-1)) var(--neutral-h)); --neutral-4: oklch(var(--scale-l-4) min(var(--scale-c-1), var(--clamp-neutral-max-c-2)) var(--neutral-h)); --neutral-5: oklch(var(--scale-l-5) min(var(--scale-c-2), var(--clamp-neutral-max-c-2)) var(--neutral-h)); --neutral-6: oklch(var(--scale-l-6) min(var(--scale-c-2), var(--clamp-neutral-max-c-3)) var(--neutral-h)); --neutral-7: oklch(var(--scale-l-7) min(var(--scale-c-2), var(--clamp-neutral-max-c-3)) var(--neutral-h)); --neutral-8: oklch(var(--scale-l-8) min(var(--scale-c-2), var(--clamp-neutral-max-c-4)) var(--neutral-h)); --neutral-9: oklch(var(--scale-l-9) min(var(--scale-c-2), var(--clamp-neutral-max-c-4)) var(--neutral-h)); --neutral-10: oklch(var(--scale-l-10) min(var(--scale-c-1), var(--clamp-neutral-max-c-5)) var(--neutral-h)); --neutral-11: oklch(var(--scale-l-11) min(var(--scale-c-1), var(--clamp-neutral-max-c-5)) var(--neutral-h)); --neutral-12: oklch(var(--scale-l-12) min(var(--scale-c-1), var(--clamp-neutral-max-c-6)) var(--neutral-h));
+}