@kazamitte/design-token 0.0.0-stage → 0.4.0

package/tailwind/base/style/shadow.css

@@ -0,0 +1,86 @@
+/**
+ * Shadow primitives.
+ *
+ * Scale
+ * └─ 2xs / xs / sm / md / lg / xl / 2xl
+ *
+ * The `--shadow-*` 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 (flat / raised / floating / overlay).
+ *
+ * Only `--shadow-*` is pinned; the sibling namespaces
+ * (`--inset-shadow-*`, `--drop-shadow-*`, `--text-shadow-*`) stay on
+ * the Tailwind defaults.
+ *
+ * Light and dark share one scale: every step is built from
+ * `var(--shadow-color-*)` for the cast and `var(--shadow-rim-color)`
+ * for the 1px rim, and only those colors flip by mode. A preset picks
+ * one step per role and is correct in both modes.
+ *
+ * These are raw steps with no semantic meaning; consume them through
+ * the style presets in `theme/style/` instead of referencing them
+ * directly.
+ */
+
+/**
+ * Shadow colors.
+ *
+ * Cast
+ * └─ subtle / (default) / strong — black in both modes, far more
+ *    opaque in dark because the surface it falls on is already dark.
+ *
+ * Rim
+ * └─ the 1px hairline every step carries. Nearly invisible black on a
+ *    light surface, white on a dark one, where it — not the cast — is
+ *    what separates a panel from its background.
+ *
+ * Plain custom properties rather than `@theme` values: they are
+ * building blocks for the scale, not utilities.
+ */
+:root {
+  --shadow-color-subtle: oklch(0% 0 0 / 0.05);
+  --shadow-color: oklch(0% 0 0 / 0.1);
+  --shadow-color-strong: oklch(0% 0 0 / 0.25);
+
+  --shadow-rim-color: oklch(0% 0 0 / 0.07);
+}
+
+[data-mode='dark'] {
+  --shadow-color-subtle: oklch(0% 0 0 / 0.35);
+  --shadow-color: oklch(0% 0 0 / 0.5);
+  --shadow-color-strong: oklch(0% 0 0 / 0.7);
+
+  --shadow-rim-color: oklch(100% 0 0 / 0.12);
+}
+
+/**
+ * The scale.
+ *
+ * Tailwind's default geometry, with two changes:
+ *
+ * - every step opens with the 1px rim, so the edge is drawn at any
+ *   elevation;
+ * - `2xs` is the rim alone — an edge with no elevation, which is what
+ *   the flat presets are made of.
+ */
+@theme {
+  --shadow-2xs: 0 0 0 1px var(--shadow-rim-color);
+  --shadow-xs:
+    0 0 0 1px var(--shadow-rim-color), 0 1px 2px 0 var(--shadow-color-subtle);
+  --shadow-sm:
+    0 0 0 1px var(--shadow-rim-color), 0 1px 3px 0 var(--shadow-color),
+    0 1px 2px -1px var(--shadow-color);
+  --shadow-md:
+    0 0 0 1px var(--shadow-rim-color), 0 4px 6px -1px var(--shadow-color),
+    0 2px 4px -2px var(--shadow-color);
+  --shadow-lg:
+    0 0 0 1px var(--shadow-rim-color), 0 10px 15px -3px var(--shadow-color),
+    0 4px 6px -4px var(--shadow-color);
+  --shadow-xl:
+    0 0 0 1px var(--shadow-rim-color), 0 20px 25px -5px var(--shadow-color),
+    0 8px 10px -6px var(--shadow-color);
+  --shadow-2xl:
+    0 0 0 1px var(--shadow-rim-color),
+    0 25px 50px -12px var(--shadow-color-strong);
+}

package/tailwind/base/style/z-index.css

@@ -0,0 +1,33 @@
+/**
+ * Z-index primitives.
+ *
+ * Scale
+ * ├─ hide / base / docked
+ * ├─ dropdown / sticky / banner / overlay / modal / popover / skip-nav
+ * └─ toast / tooltip / max
+ *
+ * The steps and their values follow Chakra UI's z-index scale — note
+ * `popover` above `modal`, since a select opened inside a dialog has
+ * to clear it.
+ *
+ * Layering does not vary by preset, so unlike radius and shadow these
+ * steps already carry their meaning and are consumed directly.
+ *
+ * `<dialog>` and the Popover API render in the top layer, where
+ * z-index has no effect.
+ */
+@theme {
+  --z-index-hide: -1;
+  --z-index-base: 0;
+  --z-index-docked: 10;
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1100;
+  --z-index-banner: 1200;
+  --z-index-overlay: 1300;
+  --z-index-modal: 1400;
+  --z-index-popover: 1500;
+  --z-index-skip-nav: 1600;
+  --z-index-toast: 1700;
+  --z-index-tooltip: 1800;
+  --z-index-max: 2147483647;
+}

package/tailwind/base/typography/font.css

@@ -0,0 +1,15 @@
+@theme {
+  --font-sans:
+    "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", ui-sans-serif, system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-serif:
+    "Noto Serif JP", "Noto Serif CJK JP", "BIZ UDPMincho", ui-serif, Georgia,
+    Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  --font-weight-normal: 400;
+  --font-weight-bold: 700;
+}

package/tailwind/base/typography/utility.css

@@ -0,0 +1,171 @@
+/**
+ * Typography utilities based on the Digital Agency Design System.
+ *
+ * Typography
+ * ├─ Display
+ * │  └─ Decorative large text: 64 / 56 / 48 / 44
+ * ├─ Highlight
+ * │  └─ Headings and emphasized text: 36 / 32 / 28 / 26 / 24 / 22
+ * ├─ Body
+ * │  └─ Readable body text: 20 / 18 / 16
+ * ├─ Dense
+ * │  ├─ Compact UI text: 18 / 16 / 14
+ * │  └─ Compact variant: line-height 1.2
+ * ├─ Oneline
+ * │  └─ Single-line UI text: 18 / 16 / 14
+ * └─ Mono
+ *    └─ Monospaced text and code: 18 / 16 / 14
+ *
+ * Font weight is controlled separately with Tailwind utilities such as
+ * `font-normal` and `font-bold`.
+ */
+
+@utility text-display-64 {
+  font-size: 4rem;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+@utility text-display-56 {
+  font-size: 3.5rem;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+@utility text-display-48 {
+  font-size: 3rem;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+@utility text-display-44 {
+  font-size: 2.75rem;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+@utility text-highlight-36 {
+  font-size: 2.25rem;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+}
+
+@utility text-highlight-32 {
+  font-size: 2rem;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+}
+
+@utility text-highlight-28 {
+  font-size: 1.75rem;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+}
+
+@utility text-highlight-26 {
+  font-size: 1.625rem;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}
+
+@utility text-highlight-24 {
+  font-size: 1.5rem;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}
+
+@utility text-highlight-22 {
+  font-size: 1.375rem;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}
+
+@utility text-body-20 {
+  font-size: 1.25rem;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}
+
+@utility text-body-18 {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  letter-spacing: 0.02em;
+}
+
+@utility text-body-16 {
+  font-size: 1rem;
+  line-height: 1.7;
+  letter-spacing: 0.02em;
+}
+
+@utility text-dense-18 {
+  font-size: 1.125rem;
+  line-height: 1.3;
+  letter-spacing: 0;
+}
+
+@utility text-dense-16 {
+  font-size: 1rem;
+  line-height: 1.3;
+  letter-spacing: 0;
+}
+
+@utility text-dense-14 {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  letter-spacing: 0;
+}
+
+@utility text-dense-18-compact {
+  font-size: 1.125rem;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+@utility text-dense-16-compact {
+  font-size: 1rem;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+@utility text-dense-14-compact {
+  font-size: 0.875rem;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+@utility text-oneline-18 {
+  font-size: 1.125rem;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
+@utility text-oneline-16 {
+  font-size: 1rem;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
+@utility text-oneline-14 {
+  font-size: 0.875rem;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
+@utility text-mono-18 {
+  font-size: 1.125rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility text-mono-16 {
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility text-mono-14 {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}

package/tailwind/index.css

@@ -0,0 +1,32 @@
+@import "./base/initialize.css";
+@import "./base/color/palette.css";
+@import "./base/color/semantic.css";
+@import "./base/color/status.css";
+@import "./base/color/utility.css";
+@import "./base/typography/font.css";
+@import "./base/typography/utility.css";
+@import "./base/style/animation.css";
+@import "./base/style/radius.css";
+@import "./base/style/shadow.css";
+@import "./base/style/z-index.css";
+
+@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
+
+@utility duration-instant {
+  transition-duration: var(--duration-instant);
+}
+@utility duration-transition {
+  transition-duration: var(--duration-transition);
+}
+@utility duration-enter {
+  transition-duration: var(--duration-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 1ms;
+    --duration-transition: 1ms;
+    --duration-enter: 1ms;
+    --ease-emphasized: var(--ease-standard);
+  }
+}

package/tailwind/theme/color/default.css

@@ -0,0 +1,63 @@
+/*
+ * Theme Color
+ * ├─ Base       — Slate
+ * ├─ Primary    — Sky
+ * ├─ Secondary  — Lime
+ * └─ Link       — Indigo
+ */
+
+:root {
+  --r-base-bg: var(--c-slate-bg);
+  --r-base-bg-subtle: var(--c-slate-bg-subtle);
+  --r-base-bg-muted: var(--c-slate-bg-muted);
+  --r-base-bg-selected: var(--c-slate-bg-selected);
+  --r-base-bg-solid: var(--c-slate-bg-solid);
+  --r-base-border-subtle: var(--c-slate-border-subtle);
+  --r-base-border-muted: var(--c-slate-border-muted);
+  --r-base-border-selected: var(--c-slate-border-selected);
+  --r-base-border: var(--c-slate-border);
+  --r-base-border-solid: var(--c-slate-border-solid);
+  --r-base-fg-strong: var(--c-slate-fg-strong);
+  --r-base-fg: var(--c-slate-fg);
+  --r-base-fg-muted: var(--c-slate-fg-muted);
+  --r-base-fg-subtle: var(--c-slate-fg-subtle);
+  --r-base-fg-contrast: var(--c-slate-fg-contrast);
+  --r-base-focus-ring: var(--c-slate-focus-ring);
+
+  --r-primary-bg: var(--c-sky-bg);
+  --r-primary-bg-subtle: var(--c-sky-bg-subtle);
+  --r-primary-bg-muted: var(--c-sky-bg-muted);
+  --r-primary-bg-selected: var(--c-sky-bg-selected);
+  --r-primary-bg-solid: var(--c-sky-bg-solid);
+  --r-primary-border-subtle: var(--c-sky-border-subtle);
+  --r-primary-border-muted: var(--c-sky-border-muted);
+  --r-primary-border-selected: var(--c-sky-border-selected);
+  --r-primary-border: var(--c-sky-border);
+  --r-primary-border-solid: var(--c-sky-border-solid);
+  --r-primary-fg-strong: var(--c-sky-fg-strong);
+  --r-primary-fg: var(--c-sky-fg);
+  --r-primary-fg-muted: var(--c-sky-fg-muted);
+  --r-primary-fg-subtle: var(--c-sky-fg-subtle);
+  --r-primary-fg-contrast: var(--c-sky-fg-contrast);
+  --r-primary-focus-ring: var(--c-sky-focus-ring);
+
+  --r-secondary-bg: var(--c-lime-bg);
+  --r-secondary-bg-subtle: var(--c-lime-bg-subtle);
+  --r-secondary-bg-muted: var(--c-lime-bg-muted);
+  --r-secondary-bg-selected: var(--c-lime-bg-selected);
+  --r-secondary-bg-solid: var(--c-lime-bg-solid);
+  --r-secondary-border-subtle: var(--c-lime-border-subtle);
+  --r-secondary-border-muted: var(--c-lime-border-muted);
+  --r-secondary-border-selected: var(--c-lime-border-selected);
+  --r-secondary-border: var(--c-lime-border);
+  --r-secondary-border-solid: var(--c-lime-border-solid);
+  --r-secondary-fg-strong: var(--c-lime-fg-strong);
+  --r-secondary-fg: var(--c-lime-fg);
+  --r-secondary-fg-muted: var(--c-lime-fg-muted);
+  --r-secondary-fg-subtle: var(--c-lime-fg-subtle);
+  --r-secondary-fg-contrast: var(--c-lime-fg-contrast);
+  --r-secondary-focus-ring: var(--c-lime-focus-ring);
+
+  --r-link-fg: var(--c-indigo-fg-muted);
+  --r-link-fg-strong: var(--c-indigo-fg);
+}

package/tailwind/theme/style/dense.css

@@ -0,0 +1,44 @@
+/**
+ * Style preset: dense
+ * Minimal rounding and shallow elevation for information-dense interfaces.
+ *
+ * Preset
+ * ├─ Spacing
+ * │  └─ base step for the whole spacing scale
+ * ├─ Radius
+ * │  └─ tight / control / surface / overlay / pill
+ * ├─ Shadow — one step of the base scale per role, light and dark alike
+ * │  ├─ flat / raised / floating / overlay
+ * │  └─ hover variants for flat / raised / floating
+ * ├─ Easing
+ * │  └─ standard / emphasized
+ * └─ Duration
+ *    └─ instant / transition / enter
+ */
+@theme {
+  /* Tighter than the default so information-dense screens fit more. */
+  --spacing: 0.2rem;
+
+  --radius-tight: var(--radius-xs);
+  --radius-control: var(--radius-xs);
+  --radius-surface: var(--radius-sm);
+  --radius-overlay: var(--radius-md);
+  --radius-pill: var(--radius-full);
+
+  --shadow-flat: none;
+  --shadow-flat-hover: var(--shadow-xs);
+  --shadow-raised: var(--shadow-xs);
+  --shadow-raised-hover: var(--shadow-sm);
+  --shadow-floating: var(--shadow-sm);
+  --shadow-floating-hover: var(--shadow-md);
+  --shadow-overlay: var(--shadow-lg);
+
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@theme static {
+  --duration-instant: 100ms;
+  --duration-transition: 140ms;
+  --duration-enter: 200ms;
+}

package/tailwind/theme/style/editorial.css

@@ -0,0 +1,45 @@
+/**
+ * Style preset: editorial
+ * Sharp corners and the shallowest end of the scale. Hierarchy is
+ * expressed with hairline edges rather than elevation.
+ *
+ * Preset
+ * ├─ Spacing
+ * │  └─ base step for the whole spacing scale
+ * ├─ Radius
+ * │  └─ tight / control / surface / overlay / pill
+ * ├─ Shadow — one step of the base scale per role, light and dark alike
+ * │  ├─ flat / raised / floating / overlay
+ * │  └─ hover variants for flat / raised / floating
+ * ├─ Easing
+ * │  └─ standard / emphasized
+ * └─ Duration
+ *    └─ instant / transition / enter
+ */
+@theme {
+  /* Slightly airier, to give bordered blocks room to breathe. */
+  --spacing: 0.28rem;
+
+  --radius-tight: 0;
+  --radius-control: var(--radius-xs);
+  --radius-surface: 0;
+  --radius-overlay: var(--radius-xs);
+  --radius-pill: var(--radius-xs);
+
+  --shadow-flat: none;
+  --shadow-flat-hover: none;
+  --shadow-raised: none;
+  --shadow-raised-hover: var(--shadow-2xs);
+  --shadow-floating: var(--shadow-xs);
+  --shadow-floating-hover: var(--shadow-sm);
+  --shadow-overlay: var(--shadow-md);
+
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);
+}
+
+@theme static {
+  --duration-instant: 120ms;
+  --duration-transition: 160ms;
+  --duration-enter: 240ms;
+}

package/tailwind/theme/style/neutral.css

@@ -0,0 +1,45 @@
+/**
+ * Style preset: neutral
+ * A balanced default. Moderate rounding with a conventional elevation
+ * scale.
+ *
+ * Preset
+ * ├─ Spacing
+ * │  └─ base step for the whole spacing scale
+ * ├─ Radius
+ * │  └─ tight / control / surface / overlay / pill
+ * ├─ Shadow — one step of the base scale per role, light and dark alike
+ * │  ├─ flat / raised / floating / overlay
+ * │  └─ hover variants for flat / raised / floating
+ * ├─ Easing
+ * │  └─ standard / emphasized
+ * └─ Duration
+ *    └─ instant / transition / enter
+ */
+@theme {
+  /* The Tailwind default. */
+  --spacing: 0.25rem;
+
+  --radius-tight: var(--radius-xs);
+  --radius-control: var(--radius-sm);
+  --radius-surface: var(--radius-lg);
+  --radius-overlay: var(--radius-xl);
+  --radius-pill: var(--radius-full);
+
+  --shadow-flat: var(--shadow-xs);
+  --shadow-flat-hover: var(--shadow-sm);
+  --shadow-raised: var(--shadow-sm);
+  --shadow-raised-hover: var(--shadow-md);
+  --shadow-floating: var(--shadow-md);
+  --shadow-floating-hover: var(--shadow-lg);
+  --shadow-overlay: var(--shadow-xl);
+
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+}
+
+@theme static {
+  --duration-instant: 150ms;
+  --duration-transition: 200ms;
+  --duration-enter: 300ms;
+}

package/tailwind/theme/style/soft.css

@@ -0,0 +1,44 @@
+/**
+ * Style preset: soft
+ * Generous rounding and pronounced elevation.
+ *
+ * Preset
+ * ├─ Spacing
+ * │  └─ base step for the whole spacing scale
+ * ├─ Radius
+ * │  └─ tight / control / surface / overlay / pill
+ * ├─ Shadow — one step of the base scale per role, light and dark alike
+ * │  ├─ flat / raised / floating / overlay
+ * │  └─ hover variants for flat / raised / floating
+ * ├─ Easing
+ * │  └─ standard / emphasized
+ * └─ Duration
+ *    └─ instant / transition / enter
+ */
+@theme {
+  /* Airier still, matching the generous rounding. */
+  --spacing: 0.3rem;
+
+  --radius-tight: var(--radius-sm);
+  --radius-control: var(--radius-lg);
+  --radius-surface: var(--radius-2xl);
+  --radius-overlay: var(--radius-3xl);
+  --radius-pill: var(--radius-full);
+
+  --shadow-flat: var(--shadow-sm);
+  --shadow-flat-hover: var(--shadow-md);
+  --shadow-raised: var(--shadow-md);
+  --shadow-raised-hover: var(--shadow-lg);
+  --shadow-floating: var(--shadow-lg);
+  --shadow-floating-hover: var(--shadow-xl);
+  --shadow-overlay: var(--shadow-2xl);
+
+  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-emphasized: cubic-bezier(0.34, 1.2, 0.64, 1);
+}
+
+@theme static {
+  --duration-instant: 180ms;
+  --duration-transition: 250ms;
+  --duration-enter: 400ms;
+}