@ds-gn/tokens 0.0.0-stage → 0.5.0

package/dist/tokens.overrides.template.css

@@ -0,0 +1,201 @@
+/*
+ * Brand Overrides Template
+ *
+ * Copy this file to your project and uncomment the variables you want to override.
+ * Load this stylesheet AFTER tokens.public.css to override defaults.
+ */
+:root {
+  /* --accent-on-light: var(--color-orange-600); */
+  /* --accent-on-dark: var(--color-orange-500); */
+  /* --accent-text-on-light: var(--color-orange-700); */
+  /* --accent-text-on-dark: var(--color-orange-500); */
+
+  /* --badge-bg-on-light: var(--color-neutral-100); */
+  /* --badge-bg-on-dark: var(--color-blue-700); */
+  /* --badge-border-on-light: var(--color-neutral-200); */
+  /* --badge-border-on-dark: var(--color-blue-600); */
+  /* --badge-brand-text-on-light: var(--color-blue-700); */
+  /* --badge-brand-text-on-dark: var(--color-blue-100); */
+  /* --badge-error-text-on-light: #b91c1c; */
+  /* --badge-error-text-on-dark: #fecaca; */
+  /* --badge-text-on-light: var(--color-neutral-700); */
+  /* --badge-text-on-dark: var(--color-neutral-100); */
+  /* --badge-warning-text-on-light: var(--color-orange-900); */
+  /* --badge-warning-text-on-dark: var(--color-orange-100); */
+
+  /* --brand-on-light: var(--color-blue-500); */
+  /* --brand-on-dark: var(--color-blue-400); */
+  /* --brand-subtle-on-light: var(--color-blue-100); */
+  /* --brand-subtle-on-dark: var(--color-blue-800); */
+
+  /* --button-ghost-bg-on-light: transparent; */
+  /* --button-ghost-bg-on-dark: transparent; */
+  /* --button-ghost-bg-hover-on-light: var(--color-neutral-200); */
+  /* --button-ghost-bg-hover-on-dark: var(--color-neutral-300); */
+  /* --button-ghost-text-on-light: var(--color-neutral-900); */
+  /* --button-ghost-text-on-dark: var(--color-white); */
+  /* --button-ghost-text-hover-on-light: var(--color-neutral-900); */
+  /* --button-ghost-text-hover-on-dark: var(--color-neutral-900); */
+  /* --button-gradient-text-on-light: var(--color-white); */
+  /* --button-gradient-text-on-dark: var(--color-neutral-900); */
+  /* --button-inline-text-on-light: var(--color-neutral-900); */
+  /* --button-inline-text-on-dark: var(--color-white); */
+  /* --button-inline-text-hover-on-light: var(--color-orange-500); */
+  /* --button-inline-text-hover-on-dark: var(--color-orange-500); */
+  /* --button-link-text-on-light: var(--color-blue-700); */
+  /* --button-link-text-on-dark: var(--color-blue-400); */
+  /* --button-link-text-hover-on-light: var(--color-blue-800); */
+  /* --button-link-text-hover-on-dark: var(--color-blue-300); */
+  /* --button-mono-outline-bg-on-light: var(--color-transparent); */
+  /* --button-mono-outline-bg-on-dark: var(--color-transparent); */
+  /* --button-mono-outline-bg-hover-on-light: var(--color-neutral-900); */
+  /* --button-mono-outline-bg-hover-on-dark: var(--color-white); */
+  /* --button-mono-outline-outline-on-light: var(--color-neutral-900); */
+  /* --button-mono-outline-outline-on-dark: var(--color-neutral-100); */
+  /* --button-mono-outline-outline-hover-on-light: var(--color-neutral-700); */
+  /* --button-mono-outline-outline-hover-on-dark: var(--color-white); */
+  /* --button-mono-outline-text-on-light: var(--color-neutral-900); */
+  /* --button-mono-outline-text-on-dark: var(--color-neutral-100); */
+  /* --button-mono-outline-text-hover-on-light: var(--color-white); */
+  /* --button-mono-outline-text-hover-on-dark: var(--color-neutral-900); */
+  /* --button-mono-solid-bg-on-light: var(--color-neutral-900); */
+  /* --button-mono-solid-bg-on-dark: var(--color-white); */
+  /* --button-mono-solid-bg-hover-on-light: var(--color-neutral-700); */
+  /* --button-mono-solid-bg-hover-on-dark: var(--color-neutral-200); */
+  /* --button-mono-solid-text-on-light: var(--color-white); */
+  /* --button-mono-solid-text-on-dark: var(--color-neutral-900); */
+  /* --button-outline-bg-on-light: var(--color-transparent); */
+  /* --button-outline-bg-on-dark: var(--color-transparent); */
+  /* --button-outline-bg-hover-on-light: var(--color-orange-600); */
+  /* --button-outline-bg-hover-on-dark: var(--color-orange-500); */
+  /* --button-outline-outline-on-light: var(--color-orange-500); */
+  /* --button-outline-outline-on-dark: var(--color-orange-600); */
+  /* --button-outline-outline-hover-on-light: var(--color-orange-600); */
+  /* --button-outline-outline-hover-on-dark: var(--color-orange-500); */
+  /* --button-outline-text-on-light: var(--color-neutral-900); */
+  /* --button-outline-text-on-dark: var(--color-neutral-100); */
+  /* --button-outline-text-hover-on-light: var(--color-orange-600); */
+  /* --button-outline-text-hover-on-dark: var(--color-orange-500); */
+  /* --button-solid-bg-on-light: var(--color-orange-500); */
+  /* --button-solid-bg-on-dark: var(--color-orange-600); */
+  /* --button-solid-bg-hover-on-light: var(--color-orange-400); */
+  /* --button-solid-bg-hover-on-dark: var(--color-orange-500); */
+  /* --button-solid-text-on-light: var(--color-neutral-900); */
+  /* --button-solid-text-on-dark: var(--color-neutral-900); */
+
+  /* --card-bg-on-light: var(--color-white); */
+  /* --card-bg-on-dark: var(--color-blue-800); */
+  /* --card-border-on-light: var(--color-neutral-200); */
+  /* --card-border-on-dark: rgb(255 255 255 / 0.08); */
+
+  /* --disabled-on-light: var(--color-neutral-400); */
+  /* --disabled-on-dark: var(--color-neutral-600); */
+
+  /* --error-on-light: #ef4444; */
+  /* --error-on-dark: #f87171; */
+  /* --error-subtle-on-light: #fee2e2; */
+  /* --error-subtle-on-dark: #7f1d1d; */
+
+  /* --eyebrow-on-light: var(--color-orange-700); */
+  /* --eyebrow-on-dark: var(--color-orange-500); */
+
+  /* --focus-on-light: var(--color-blue-500); */
+  /* --focus-on-dark: var(--color-blue-400); */
+
+  /* --gradient-accent-bg-on-light: linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400)); */
+  /* --gradient-accent-bg-on-dark: linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400)); */
+  /* --gradient-accent-bg-hover-on-light: linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300)); */
+  /* --gradient-accent-bg-hover-on-dark: linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300)); */
+
+  /* --info-on-light: var(--color-blue-500); */
+  /* --info-on-dark: var(--color-blue-400); */
+  /* --info-subtle-on-light: var(--color-blue-100); */
+  /* --info-subtle-on-dark: var(--color-blue-900); */
+
+  /* --input-bg-on-light: var(--surface-default-on-light); */
+  /* --input-bg-on-dark: var(--surface-default-on-dark); */
+  /* --input-border-on-light: var(--color-neutral-300); */
+  /* --input-border-on-dark: var(--color-blue-600); */
+  /* --input-error-text-on-light: #b91c1c; */
+  /* --input-error-text-on-dark: #f87171; */
+  /* --input-focus-on-light: var(--color-blue-500); */
+  /* --input-focus-on-dark: var(--color-blue-400); */
+  /* --input-placeholder-on-light: var(--color-neutral-600); */
+  /* --input-placeholder-on-dark: var(--color-neutral-500); */
+  /* --input-text-on-light: var(--color-neutral-900); */
+  /* --input-text-on-dark: var(--color-neutral-100); */
+
+  /* --interactive-on-light: var(--color-blue-500); */
+  /* --interactive-on-dark: var(--color-blue-400); */
+  /* --interactive-active-on-light: var(--color-blue-700); */
+  /* --interactive-active-on-dark: var(--color-blue-500); */
+  /* --interactive-disabled-on-light: var(--color-neutral-300); */
+  /* --interactive-disabled-on-dark: var(--color-neutral-700); */
+  /* --interactive-hover-on-light: var(--color-blue-600); */
+  /* --interactive-hover-on-dark: var(--color-blue-300); */
+
+  /* --inverse-on-light: var(--color-white); */
+  /* --inverse-on-dark: var(--color-neutral-900); */
+
+  /* --nav-link-dropdown-text-hover-on-light: var(--color-orange-700); */
+  /* --nav-link-dropdown-text-hover-on-dark: var(--color-orange-200); */
+
+  /* --outline-on-light: var(--color-neutral-200); */
+  /* --outline-on-dark: oklch(24% 0.05 255); */
+  /* --outline-strong-on-light: var(--color-neutral-300); */
+  /* --outline-strong-on-dark: var(--color-blue-600); */
+  /* --outline-subtle-on-light: var(--color-neutral-100); */
+  /* --outline-subtle-on-dark: var(--color-blue-800); */
+
+  /* --page-on-light: oklch(97% 0.01 255); */
+  /* --page-on-dark: oklch(12% 0.05 255); */
+
+  /* --pattern-dot-on-light: oklch(70% 0.03 255); */
+  /* --pattern-dot-on-dark: oklch(40% 0.05 255); */
+
+  /* --success-on-light: #047857; */
+  /* --success-on-dark: #34d399; */
+  /* --success-subtle-on-light: #d1fae5; */
+  /* --success-subtle-on-dark: #064e3b; */
+
+  /* --surface-default-on-light: oklch(100% 0 0); */
+  /* --surface-default-on-dark: oklch(18% 0.06 255); */
+  /* --surface-elevated-on-light: oklch(96% 0.02 255); */
+  /* --surface-elevated-on-dark: oklch(0.22 0.08 255); */
+  /* --surface-subtle-on-light: oklch(94% 0.04 255); */
+  /* --surface-subtle-on-dark: oklch(30% 0.12 255); */
+
+  /* --terminal-bg: #09090b; */
+  /* --terminal-border: #1a1a1a; */
+  /* --terminal-dot-red: #ea580c; */
+  /* --terminal-dot-yellow: #fbbf24; */
+  /* --terminal-muted: #a1a1aa; */
+  /* --terminal-success: #34d399; */
+  /* --terminal-text: #e4e4e7; */
+  /* --terminal-titlebar: #0d0d0f; */
+
+  /* --text-primary-on-light: var(--color-neutral-900); */
+  /* --text-primary-on-dark: var(--color-neutral-50); */
+  /* --text-secondary-on-light: var(--color-neutral-600); */
+  /* --text-secondary-on-dark: var(--color-neutral-400); */
+  /* --text-tertiary-on-light: var(--color-neutral-600); */
+  /* --text-tertiary-on-dark: var(--color-neutral-400); */
+
+  /* --warning-on-light: var(--color-orange-500); */
+  /* --warning-on-dark: var(--color-orange-400); */
+  /* --warning-subtle-on-light: var(--color-orange-100); */
+  /* --warning-subtle-on-dark: var(--color-orange-900); */
+
+  /* --duration-moderate: 240ms; */
+  /* --duration-quick: 180ms; */
+
+  /* --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); */
+
+  /* --radius-button: calc(infinity * 1px); */
+  /* --radius-card: 1rem; */
+  /* --radius-input: 0.5rem; */
+  /* --radius-surface: 1rem; */
+
+  /* --shadow-card-on-light: 0 10px 30px rgb(15 23 42 / 0.08); */
+  /* --shadow-card-on-dark: 0 12px 32px rgb(2 6 23 / 0.35); */
+}

package/dist/tokens.properties.css

@@ -0,0 +1,358 @@
+/* ==========================================================================
+ * tokens.properties.css
+ *
+ * AUTO-GENERATED — do not edit manually.
+ * Extracted from compiled component CSS after Tailwind processing.
+ *
+ * Registers Tailwind v4 @property rules at the document level.
+ * Shadow DOM adopted stylesheets cannot register @property — the spec
+ * only honours @property in document-level stylesheets. Loading this
+ * file once on the document makes all Tailwind utilities that depend on
+ * registered custom properties (border, shadow, ring, etc.) work
+ * correctly inside shadow roots.
+ * ========================================================================== */
+
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}