@kazamitte/design-token 0.0.0-stage → 0.3.0

package/tailwind/base/color/status.css

@@ -0,0 +1,80 @@
+/**
+* Status role assignments.
+*
+* Error, warning, success, and info map to fixed hues. Unlike brand
+* roles, these are not generated and not configurable: their meaning
+* is carried by convention, and a product that recolors its errors
+* away from red is trading recognition for consistency.
+*
+* Status
+* ├─ Error   → red
+* ├─ Warning → amber
+* ├─ Success → green
+* └─ Info    → blue
+*/
+
+:root {
+  --r-error-bg: var(--c-red-bg);
+  --r-error-bg-subtle: var(--c-red-bg-subtle);
+  --r-error-bg-muted: var(--c-red-bg-muted);
+  --r-error-bg-selected: var(--c-red-bg-selected);
+  --r-error-bg-solid: var(--c-red-bg-solid);
+  --r-error-border-subtle: var(--c-red-border-subtle);
+  --r-error-border-muted: var(--c-red-border-muted);
+  --r-error-border-selected: var(--c-red-border-selected);
+  --r-error-border-solid: var(--c-red-border-solid);
+  --r-error-fg-strong: var(--c-red-fg-strong);
+  --r-error-fg: var(--c-red-fg);
+  --r-error-fg-muted: var(--c-red-fg-muted);
+  --r-error-fg-subtle: var(--c-red-fg-subtle);
+  --r-error-fg-contrast: var(--c-red-fg-contrast);
+  --r-error-focus-ring: var(--c-red-focus-ring);
+
+  --r-warning-bg: var(--c-amber-bg);
+  --r-warning-bg-subtle: var(--c-amber-bg-subtle);
+  --r-warning-bg-muted: var(--c-amber-bg-muted);
+  --r-warning-bg-selected: var(--c-amber-bg-selected);
+  --r-warning-bg-solid: var(--c-amber-bg-solid);
+  --r-warning-border-subtle: var(--c-amber-border-subtle);
+  --r-warning-border-muted: var(--c-amber-border-muted);
+  --r-warning-border-selected: var(--c-amber-border-selected);
+  --r-warning-border-solid: var(--c-amber-border-solid);
+  --r-warning-fg-strong: var(--c-amber-fg-strong);
+  --r-warning-fg: var(--c-amber-fg);
+  --r-warning-fg-muted: var(--c-amber-fg-muted);
+  --r-warning-fg-subtle: var(--c-amber-fg-subtle);
+  --r-warning-fg-contrast: var(--c-amber-fg-contrast);
+  --r-warning-focus-ring: var(--c-amber-focus-ring);
+
+  --r-success-bg: var(--c-green-bg);
+  --r-success-bg-subtle: var(--c-green-bg-subtle);
+  --r-success-bg-muted: var(--c-green-bg-muted);
+  --r-success-bg-selected: var(--c-green-bg-selected);
+  --r-success-bg-solid: var(--c-green-bg-solid);
+  --r-success-border-subtle: var(--c-green-border-subtle);
+  --r-success-border-muted: var(--c-green-border-muted);
+  --r-success-border-selected: var(--c-green-border-selected);
+  --r-success-border-solid: var(--c-green-border-solid);
+  --r-success-fg-strong: var(--c-green-fg-strong);
+  --r-success-fg: var(--c-green-fg);
+  --r-success-fg-muted: var(--c-green-fg-muted);
+  --r-success-fg-subtle: var(--c-green-fg-subtle);
+  --r-success-fg-contrast: var(--c-green-fg-contrast);
+  --r-success-focus-ring: var(--c-green-focus-ring);
+
+  --r-info-bg: var(--c-blue-bg);
+  --r-info-bg-subtle: var(--c-blue-bg-subtle);
+  --r-info-bg-muted: var(--c-blue-bg-muted);
+  --r-info-bg-selected: var(--c-blue-bg-selected);
+  --r-info-bg-solid: var(--c-blue-bg-solid);
+  --r-info-border-subtle: var(--c-blue-border-subtle);
+  --r-info-border-muted: var(--c-blue-border-muted);
+  --r-info-border-selected: var(--c-blue-border-selected);
+  --r-info-border-solid: var(--c-blue-border-solid);
+  --r-info-fg-strong: var(--c-blue-fg-strong);
+  --r-info-fg: var(--c-blue-fg);
+  --r-info-fg-muted: var(--c-blue-fg-muted);
+  --r-info-fg-subtle: var(--c-blue-fg-subtle);
+  --r-info-fg-contrast: var(--c-blue-fg-contrast);
+  --r-info-focus-ring: var(--c-blue-focus-ring);
+}

package/tailwind/base/color/utility.css

@@ -0,0 +1,450 @@
+/*
+ * Color role utilities
+ *
+ * Class names mirror their variable names exactly:
+ *   {role}-{category}[-{step}] to var(--r-{role}-{category}[-{step}])
+ */
+
+/* base */
+
+@utility base-bg {
+  background-color: var(--r-base-bg);
+}
+
+@utility base-bg-subtle {
+  background-color: var(--r-base-bg-subtle);
+}
+
+@utility base-bg-muted {
+  background-color: var(--r-base-bg-muted);
+}
+
+@utility base-bg-selected {
+  background-color: var(--r-base-bg-selected);
+}
+
+@utility base-bg-solid {
+  background-color: var(--r-base-bg-solid);
+}
+
+@utility base-border-subtle {
+  border-color: var(--r-base-border-subtle);
+}
+
+@utility base-border-muted {
+  border-color: var(--r-base-border-muted);
+}
+
+@utility base-border-selected {
+  border-color: var(--r-base-border-selected);
+}
+
+@utility base-border-solid {
+  border-color: var(--r-base-border-solid);
+}
+
+@utility base-fg-strong {
+  color: var(--r-base-fg-strong);
+}
+
+@utility base-fg {
+  color: var(--r-base-fg);
+}
+
+@utility base-fg-muted {
+  color: var(--r-base-fg-muted);
+}
+
+@utility base-fg-subtle {
+  color: var(--r-base-fg-subtle);
+}
+
+@utility base-fg-contrast {
+  color: var(--r-base-fg-contrast);
+}
+
+@utility base-focus-ring {
+  outline-color: var(--r-base-focus-ring);
+}
+
+/* primary */
+
+@utility primary-bg {
+  background-color: var(--r-primary-bg);
+}
+
+@utility primary-bg-subtle {
+  background-color: var(--r-primary-bg-subtle);
+}
+
+@utility primary-bg-muted {
+  background-color: var(--r-primary-bg-muted);
+}
+
+@utility primary-bg-selected {
+  background-color: var(--r-primary-bg-selected);
+}
+
+@utility primary-bg-solid {
+  background-color: var(--r-primary-bg-solid);
+}
+
+@utility primary-border-subtle {
+  border-color: var(--r-primary-border-subtle);
+}
+
+@utility primary-border-muted {
+  border-color: var(--r-primary-border-muted);
+}
+
+@utility primary-border-selected {
+  border-color: var(--r-primary-border-selected);
+}
+
+@utility primary-border-solid {
+  border-color: var(--r-primary-border-solid);
+}
+
+@utility primary-fg-strong {
+  color: var(--r-primary-fg-strong);
+}
+
+@utility primary-fg {
+  color: var(--r-primary-fg);
+}
+
+@utility primary-fg-muted {
+  color: var(--r-primary-fg-muted);
+}
+
+@utility primary-fg-subtle {
+  color: var(--r-primary-fg-subtle);
+}
+
+@utility primary-fg-contrast {
+  color: var(--r-primary-fg-contrast);
+}
+
+@utility primary-focus-ring {
+  outline-color: var(--r-primary-focus-ring);
+}
+
+/* secondary */
+
+@utility secondary-bg {
+  background-color: var(--r-secondary-bg);
+}
+
+@utility secondary-bg-subtle {
+  background-color: var(--r-secondary-bg-subtle);
+}
+
+@utility secondary-bg-muted {
+  background-color: var(--r-secondary-bg-muted);
+}
+
+@utility secondary-bg-selected {
+  background-color: var(--r-secondary-bg-selected);
+}
+
+@utility secondary-bg-solid {
+  background-color: var(--r-secondary-bg-solid);
+}
+
+@utility secondary-border-subtle {
+  border-color: var(--r-secondary-border-subtle);
+}
+
+@utility secondary-border-muted {
+  border-color: var(--r-secondary-border-muted);
+}
+
+@utility secondary-border-selected {
+  border-color: var(--r-secondary-border-selected);
+}
+
+@utility secondary-border-solid {
+  border-color: var(--r-secondary-border-solid);
+}
+
+@utility secondary-fg-strong {
+  color: var(--r-secondary-fg-strong);
+}
+
+@utility secondary-fg {
+  color: var(--r-secondary-fg);
+}
+
+@utility secondary-fg-muted {
+  color: var(--r-secondary-fg-muted);
+}
+
+@utility secondary-fg-subtle {
+  color: var(--r-secondary-fg-subtle);
+}
+
+@utility secondary-fg-contrast {
+  color: var(--r-secondary-fg-contrast);
+}
+
+@utility secondary-focus-ring {
+  outline-color: var(--r-secondary-focus-ring);
+}
+
+/* error */
+
+@utility error-bg {
+  background-color: var(--r-error-bg);
+}
+
+@utility error-bg-subtle {
+  background-color: var(--r-error-bg-subtle);
+}
+
+@utility error-bg-muted {
+  background-color: var(--r-error-bg-muted);
+}
+
+@utility error-bg-selected {
+  background-color: var(--r-error-bg-selected);
+}
+
+@utility error-bg-solid {
+  background-color: var(--r-error-bg-solid);
+}
+
+@utility error-border-subtle {
+  border-color: var(--r-error-border-subtle);
+}
+
+@utility error-border-muted {
+  border-color: var(--r-error-border-muted);
+}
+
+@utility error-border-selected {
+  border-color: var(--r-error-border-selected);
+}
+
+@utility error-border-solid {
+  border-color: var(--r-error-border-solid);
+}
+
+@utility error-fg-strong {
+  color: var(--r-error-fg-strong);
+}
+
+@utility error-fg {
+  color: var(--r-error-fg);
+}
+
+@utility error-fg-muted {
+  color: var(--r-error-fg-muted);
+}
+
+@utility error-fg-subtle {
+  color: var(--r-error-fg-subtle);
+}
+
+@utility error-fg-contrast {
+  color: var(--r-error-fg-contrast);
+}
+
+@utility error-focus-ring {
+  outline-color: var(--r-error-focus-ring);
+}
+
+/* warning */
+
+@utility warning-bg {
+  background-color: var(--r-warning-bg);
+}
+
+@utility warning-bg-subtle {
+  background-color: var(--r-warning-bg-subtle);
+}
+
+@utility warning-bg-muted {
+  background-color: var(--r-warning-bg-muted);
+}
+
+@utility warning-bg-selected {
+  background-color: var(--r-warning-bg-selected);
+}
+
+@utility warning-bg-solid {
+  background-color: var(--r-warning-bg-solid);
+}
+
+@utility warning-border-subtle {
+  border-color: var(--r-warning-border-subtle);
+}
+
+@utility warning-border-muted {
+  border-color: var(--r-warning-border-muted);
+}
+
+@utility warning-border-selected {
+  border-color: var(--r-warning-border-selected);
+}
+
+@utility warning-border-solid {
+  border-color: var(--r-warning-border-solid);
+}
+
+@utility warning-fg-strong {
+  color: var(--r-warning-fg-strong);
+}
+
+@utility warning-fg {
+  color: var(--r-warning-fg);
+}
+
+@utility warning-fg-muted {
+  color: var(--r-warning-fg-muted);
+}
+
+@utility warning-fg-subtle {
+  color: var(--r-warning-fg-subtle);
+}
+
+@utility warning-fg-contrast {
+  color: var(--r-warning-fg-contrast);
+}
+
+@utility warning-focus-ring {
+  outline-color: var(--r-warning-focus-ring);
+}
+
+/*  success */
+
+@utility success-bg {
+  background-color: var(--r-success-bg);
+}
+
+@utility success-bg-subtle {
+  background-color: var(--r-success-bg-subtle);
+}
+
+@utility success-bg-muted {
+  background-color: var(--r-success-bg-muted);
+}
+
+@utility success-bg-selected {
+  background-color: var(--r-success-bg-selected);
+}
+
+@utility success-bg-solid {
+  background-color: var(--r-success-bg-solid);
+}
+
+@utility success-border-subtle {
+  border-color: var(--r-success-border-subtle);
+}
+
+@utility success-border-muted {
+  border-color: var(--r-success-border-muted);
+}
+
+@utility success-border-selected {
+  border-color: var(--r-success-border-selected);
+}
+
+@utility success-border-solid {
+  border-color: var(--r-success-border-solid);
+}
+
+@utility success-fg-strong {
+  color: var(--r-success-fg-strong);
+}
+
+@utility success-fg {
+  color: var(--r-success-fg);
+}
+
+@utility success-fg-muted {
+  color: var(--r-success-fg-muted);
+}
+
+@utility success-fg-subtle {
+  color: var(--r-success-fg-subtle);
+}
+
+@utility success-fg-contrast {
+  color: var(--r-success-fg-contrast);
+}
+
+@utility success-focus-ring {
+  outline-color: var(--r-success-focus-ring);
+}
+
+/*  info */
+
+@utility info-bg {
+  background-color: var(--r-info-bg);
+}
+
+@utility info-bg-subtle {
+  background-color: var(--r-info-bg-subtle);
+}
+
+@utility info-bg-muted {
+  background-color: var(--r-info-bg-muted);
+}
+
+@utility info-bg-selected {
+  background-color: var(--r-info-bg-selected);
+}
+
+@utility info-bg-solid {
+  background-color: var(--r-info-bg-solid);
+}
+
+@utility info-border-subtle {
+  border-color: var(--r-info-border-subtle);
+}
+
+@utility info-border-muted {
+  border-color: var(--r-info-border-muted);
+}
+
+@utility info-border-selected {
+  border-color: var(--r-info-border-selected);
+}
+
+@utility info-border-solid {
+  border-color: var(--r-info-border-solid);
+}
+
+@utility info-fg-strong {
+  color: var(--r-info-fg-strong);
+}
+
+@utility info-fg {
+  color: var(--r-info-fg);
+}
+
+@utility info-fg-muted {
+  color: var(--r-info-fg-muted);
+}
+
+@utility info-fg-subtle {
+  color: var(--r-info-fg-subtle);
+}
+
+@utility info-fg-contrast {
+  color: var(--r-info-fg-contrast);
+}
+
+@utility info-focus-ring {
+  outline-color: var(--r-info-focus-ring);
+}
+
+/*  link */
+
+@utility link-fg {
+  color: var(--r-link-fg);
+}
+
+@utility link-fg-strong {
+  color: var(--r-link-fg-strong);
+}

package/tailwind/base/initialize.css

@@ -0,0 +1,7 @@
+@theme {
+  --color-*: initial;
+  --font-*: initial;
+  --text-*: initial;
+  --tracking-*: initial;
+  --leading-*: initial;
+}

package/tailwind/base/style/animation.css

@@ -0,0 +1,123 @@
+/**
+ * Animation primitives.
+ *
+ * Enter / exit
+ * ├─ fade-in / fade-out
+ * ├─ scale-in / scale-out
+ * ├─ slide-in-from-top / -right / -bottom / -left
+ * └─ slide-out-to-top / -right / -bottom / -left
+ *
+ * Every step is composed from `var(--duration-*)` and `var(--ease-*)`,
+ * so it follows whichever style preset is loaded and collapses to 1ms
+ * under `prefers-reduced-motion` — no preset carries an animation
+ * override, the same arrangement the shadow scale uses for light and
+ * dark.
+ *
+ * The slide steps travel `--slide-distance`, the full size of the
+ * element unless the element narrows it — 100% is the drawer case,
+ * `[--slide-distance:1rem]` the toast case.
+ *
+ * Height-based collapse / expand is deliberately absent: it needs a
+ * measured height, which no keyframe can supply.
+ */
+@theme {
+  --animate-fade-in: fade-in var(--duration-enter) var(--ease-standard) both;
+  --animate-fade-out: fade-out var(--duration-transition) var(--ease-standard)
+    both;
+
+  --animate-scale-in: scale-in var(--duration-enter) var(--ease-emphasized) both;
+  --animate-scale-out: scale-out var(--duration-transition) var(--ease-standard)
+    both;
+
+  --animate-slide-in-from-top: slide-in-from-top var(--duration-enter)
+    var(--ease-emphasized) both;
+  --animate-slide-in-from-right: slide-in-from-right var(--duration-enter)
+    var(--ease-emphasized) both;
+  --animate-slide-in-from-bottom: slide-in-from-bottom var(--duration-enter)
+    var(--ease-emphasized) both;
+  --animate-slide-in-from-left: slide-in-from-left var(--duration-enter)
+    var(--ease-emphasized) both;
+
+  --animate-slide-out-to-top: slide-out-to-top var(--duration-transition)
+    var(--ease-standard) both;
+  --animate-slide-out-to-right: slide-out-to-right var(--duration-transition)
+    var(--ease-standard) both;
+  --animate-slide-out-to-bottom: slide-out-to-bottom var(--duration-transition)
+    var(--ease-standard) both;
+  --animate-slide-out-to-left: slide-out-to-left var(--duration-transition)
+    var(--ease-standard) both;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      scale: 0.96;
+    }
+  }
+  @keyframes scale-out {
+    to {
+      opacity: 0;
+      scale: 0.96;
+    }
+  }
+
+  @keyframes slide-in-from-top {
+    from {
+      opacity: 0;
+      translate: 0 calc(var(--slide-distance, 100%) * -1);
+    }
+  }
+  @keyframes slide-in-from-right {
+    from {
+      opacity: 0;
+      translate: var(--slide-distance, 100%) 0;
+    }
+  }
+  @keyframes slide-in-from-bottom {
+    from {
+      opacity: 0;
+      translate: 0 var(--slide-distance, 100%);
+    }
+  }
+  @keyframes slide-in-from-left {
+    from {
+      opacity: 0;
+      translate: calc(var(--slide-distance, 100%) * -1) 0;
+    }
+  }
+
+  @keyframes slide-out-to-top {
+    to {
+      opacity: 0;
+      translate: 0 calc(var(--slide-distance, 100%) * -1);
+    }
+  }
+  @keyframes slide-out-to-right {
+    to {
+      opacity: 0;
+      translate: var(--slide-distance, 100%) 0;
+    }
+  }
+  @keyframes slide-out-to-bottom {
+    to {
+      opacity: 0;
+      translate: 0 var(--slide-distance, 100%);
+    }
+  }
+  @keyframes slide-out-to-left {
+    to {
+      opacity: 0;
+      translate: calc(var(--slide-distance, 100%) * -1) 0;
+    }
+  }
+}

package/tailwind/base/style/radius.css

@@ -0,0 +1,29 @@
+/**
+ * Radius primitives.
+ *
+ * The `--radius-*` namespace is redefined here with literal values
+ * so that the scale the style presets build on stays identical
+ * across Tailwind versions. `theme/style/*.css` maps these steps to
+ * the semantic roles (tight / control / surface / overlay / pill),
+ * so a change to the underlying scale would silently reshape every
+ * preset.
+ *
+ * Scale
+ * ├─ xs / sm / md / lg / xl / 2xl / 3xl / 4xl
+ * └─ full
+ *
+ * These are raw steps with no semantic meaning; consume them through
+ * the style presets in `theme/style/` instead of referencing them
+ * directly.
+ */
+@theme {
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-full: calc(infinity * 1px);
+}