@k8ordo/ui 1.0.0

package/dist/styles/tailwind.css

@@ -0,0 +1,22 @@
+/**
+ * Entry stylesheet for `@k8ordo/ui`.
+ *
+ * Composes the design system from focused partials:
+ *   - base.css       静的なベースレイヤーとカスタムバリアント
+ *   - tokens.css     デザイントークン（:root / .dark / @theme inline）
+ *   - utilities.css  カスタムユーティリティ
+ *
+ * This file together with its imports is the single source of truth for
+ * design tokens. `tailwind-token-extractor` reads it and writes
+ * `tokens.generated.ts` — run `pnpm generate:tokens` after editing any partial.
+ */
+
+@import 'tailwindcss';
+@import './base.css';
+@import './tokens.css';
+@import './utilities.css';
+@source '../components';
+/* The json-render / openui integrations' renderers emit utility classes too
+   (e.g. card padding), so they must be scanned alongside components — else a
+   class only used in a renderer (not in any component) is never generated. */
+@source '../integrations';

package/dist/styles/tokens.css

@@ -0,0 +1,380 @@
+/**
+ * Design tokens — raw palette, semantic mappings, and Tailwind theme.
+ *
+ * Imported by `index.css`. This file is the source of truth consumed by
+ * `tailwind-token-extractor` — run `pnpm generate:tokens` after editing.
+ */
+
+:root {
+  --white: oklch(1 0 0);
+
+  /* Gray — H: 235 (sky blue tint), minimal chroma for branded neutral.
+     100/200 はライトモードの地・ホバーに使うため、視認できる最小限の濃さに留める */
+  --gray-50: oklch(0.975 0.001 235);
+  --gray-100: oklch(0.955 0.0015 235);
+  --gray-200: oklch(0.925 0.003 235);
+  --gray-300: oklch(0.84 0.004 235);
+  --gray-400: oklch(0.75 0.005 235);
+  --gray-500: oklch(0.66 0.006 235);
+  --gray-600: oklch(0.52 0.006 235);
+  --gray-700: oklch(0.42 0.003 235);
+  --gray-800: oklch(0.3 0.002 235);
+  --gray-900: oklch(0.25 0.0015 235);
+  --gray-950: oklch(0.18 0.001 235);
+
+  /* Red — H: 25 */
+  --red-50: oklch(0.975 0.016 25);
+  --red-100: oklch(0.945 0.042 25);
+  --red-200: oklch(0.9 0.084 25);
+  --red-300: oklch(0.84 0.15 25);
+  --red-400: oklch(0.75 0.225 25);
+  --red-500: oklch(0.66 0.27 25);
+  --red-600: oklch(0.575 0.255 25);
+  --red-700: oklch(0.49 0.22 25);
+  --red-800: oklch(0.41 0.18 25);
+  --red-900: oklch(0.37 0.14 25);
+  --red-950: oklch(0.18 0.1 25);
+
+  /* Pink — H: 350 */
+  --pink-50: oklch(0.975 0.016 350);
+  --pink-100: oklch(0.945 0.038 350);
+  --pink-200: oklch(0.9 0.078 350);
+  --pink-300: oklch(0.84 0.145 350);
+  --pink-400: oklch(0.75 0.225 350);
+  --pink-500: oklch(0.66 0.27 350);
+  --pink-600: oklch(0.575 0.26 350);
+  --pink-700: oklch(0.49 0.23 350);
+  --pink-800: oklch(0.41 0.19 350);
+  --pink-900: oklch(0.37 0.15 350);
+  --pink-950: oklch(0.18 0.108 350);
+
+  /* Purple — H: 305 */
+  --purple-50: oklch(0.975 0.018 305);
+  --purple-100: oklch(0.945 0.042 305);
+  --purple-200: oklch(0.9 0.082 305);
+  --purple-300: oklch(0.84 0.155 305);
+  --purple-400: oklch(0.75 0.24 305);
+  --purple-500: oklch(0.66 0.29 305);
+  --purple-600: oklch(0.575 0.295 305);
+  --purple-700: oklch(0.49 0.265 305);
+  --purple-800: oklch(0.41 0.22 305);
+  --purple-900: oklch(0.37 0.175 305);
+  --purple-950: oklch(0.18 0.125 305);
+
+  /* Cyan — H: 210 (Secondary). 100 はライトのホバー地なので彩度を抑える */
+  --cyan-50: oklch(0.975 0.022 210);
+  --cyan-100: oklch(0.955 0.04 210);
+  --cyan-200: oklch(0.9 0.098 210);
+  --cyan-300: oklch(0.84 0.155 210);
+  --cyan-400: oklch(0.75 0.18 210);
+  --cyan-500: oklch(0.66 0.17 210);
+  --cyan-600: oklch(0.575 0.15 210);
+  --cyan-700: oklch(0.49 0.128 210);
+  --cyan-800: oklch(0.41 0.105 210);
+  --cyan-900: oklch(0.37 0.082 210);
+  --cyan-950: oklch(0.18 0.058 210);
+
+  /* Blue — H: 260 */
+  --blue-50: oklch(0.975 0.016 260);
+  --blue-100: oklch(0.945 0.04 260);
+  --blue-200: oklch(0.9 0.078 260);
+  --blue-300: oklch(0.84 0.145 260);
+  --blue-400: oklch(0.75 0.21 260);
+  --blue-500: oklch(0.66 0.255 260);
+  --blue-600: oklch(0.575 0.275 260);
+  --blue-700: oklch(0.49 0.26 260);
+  --blue-800: oklch(0.41 0.215 260);
+  --blue-900: oklch(0.37 0.165 260);
+  --blue-950: oklch(0.18 0.118 260);
+
+  /* Teal — H: 180 (Primary). 100 はライトのホバー地なので彩度を抑える */
+  --teal-50: oklch(0.975 0.02 180);
+  --teal-100: oklch(0.955 0.042 180);
+  --teal-200: oklch(0.9 0.11 180);
+  --teal-300: oklch(0.84 0.16 180);
+  --teal-400: oklch(0.75 0.175 180);
+  --teal-500: oklch(0.66 0.165 180);
+  --teal-600: oklch(0.575 0.145 180);
+  --teal-700: oklch(0.49 0.12 180);
+  --teal-800: oklch(0.41 0.098 180);
+  --teal-900: oklch(0.37 0.078 180);
+  --teal-950: oklch(0.18 0.055 180);
+
+  /* Green — H: 150 */
+  --green-50: oklch(0.975 0.02 150);
+  --green-100: oklch(0.945 0.052 150);
+  --green-200: oklch(0.9 0.1 150);
+  --green-300: oklch(0.84 0.175 150);
+  --green-400: oklch(0.75 0.235 150);
+  --green-500: oklch(0.66 0.245 150);
+  --green-600: oklch(0.575 0.22 150);
+  --green-700: oklch(0.49 0.18 150);
+  --green-800: oklch(0.41 0.14 150);
+  --green-900: oklch(0.37 0.108 150);
+  --green-950: oklch(0.18 0.075 150);
+
+  /* Yellow — H: 90 */
+  --yellow-50: oklch(0.975 0.03 90);
+  --yellow-100: oklch(0.945 0.08 90);
+  --yellow-200: oklch(0.9 0.148 90);
+  --yellow-300: oklch(0.84 0.2 90);
+  --yellow-400: oklch(0.75 0.2 90);
+  --yellow-500: oklch(0.66 0.18 90);
+  --yellow-600: oklch(0.575 0.158 90);
+  --yellow-700: oklch(0.49 0.135 90);
+  --yellow-800: oklch(0.41 0.11 90);
+  --yellow-900: oklch(0.37 0.085 90);
+  --yellow-950: oklch(0.18 0.06 90);
+
+  /* Orange — H: 55 */
+  --orange-50: oklch(0.975 0.02 55);
+  --orange-100: oklch(0.945 0.05 55);
+  --orange-200: oklch(0.9 0.098 55);
+  --orange-300: oklch(0.84 0.165 55);
+  --orange-400: oklch(0.75 0.22 55);
+  --orange-500: oklch(0.66 0.24 55);
+  --orange-600: oklch(0.575 0.235 55);
+  --orange-700: oklch(0.49 0.2 55);
+  --orange-800: oklch(0.41 0.165 55);
+  --orange-900: oklch(0.37 0.128 55);
+  --orange-950: oklch(0.18 0.09 55);
+
+  --fg-base: var(--gray-900);
+  --fg-subtle: var(--gray-600);
+  --fg-mute: var(--gray-700);
+  --fg-inverse: var(--gray-50);
+  --fg-info: var(--blue-800);
+  --fg-success: var(--green-800);
+  --fg-warning: var(--yellow-800);
+  --fg-error: var(--red-800);
+
+  --bg-base: var(--white);
+  --bg-raised: var(--white);
+  --bg-surface: var(--gray-50);
+  --bg-subtle: var(--gray-100);
+  --bg-mute: var(--gray-200);
+  --bg-emphasize: var(--gray-300);
+  --bg-inverse: var(--gray-900);
+  --bg-info: var(--blue-100);
+  --bg-success: var(--green-100);
+  --bg-warning: var(--yellow-100);
+  --bg-error: var(--red-100);
+
+  --border-base: var(--gray-400);
+  --border-subtle: var(--gray-100);
+  --border-mute: var(--gray-200);
+  --border-emphasize: var(--gray-500);
+  --border-inverse: var(--gray-700);
+  --border-info: var(--blue-500);
+  --border-success: var(--green-500);
+  --border-warning: var(--yellow-500);
+  --border-error: var(--red-500);
+
+  --primary-fg: var(--teal-800);
+  --primary-bg: var(--teal-200);
+  --primary-bg-subtle: var(--teal-50);
+  --primary-bg-mute: var(--teal-100);
+  --primary-bg-emphasize: var(--teal-300);
+  --primary-border: var(--teal-500);
+
+  --secondary-fg: var(--cyan-800);
+  --secondary-bg: var(--cyan-200);
+  --secondary-bg-subtle: var(--cyan-50);
+  --secondary-bg-mute: var(--cyan-100);
+  --secondary-bg-emphasize: var(--cyan-300);
+  --secondary-border: var(--cyan-500);
+
+  --back-drop: rgb(0, 0, 0, 0.5);
+
+  --z-overlay: 1000;
+  --z-modal: 1300;
+  --z-toast: 1500;
+
+  /* TODO: 上の変数の一環として使えるようにする */
+  --group-primary: var(--teal-800);
+  --group-secondary: var(--cyan-800);
+  --group-tertiary: var(--pink-800);
+  --group-quaternary: var(--purple-800);
+}
+
+.dark {
+  --fg-base: var(--gray-50);
+  --fg-subtle: var(--gray-400);
+  --fg-mute: var(--gray-300);
+  --fg-inverse: var(--gray-900);
+  --fg-info: var(--blue-200);
+  --fg-success: var(--green-200);
+  --fg-warning: var(--yellow-200);
+  --fg-error: var(--red-200);
+
+  --bg-base: var(--gray-800);
+  --bg-raised: var(--gray-800);
+  --bg-surface: var(--gray-950);
+  --bg-subtle: var(--gray-900);
+  --bg-mute: var(--gray-700);
+  --bg-emphasize: var(--gray-600);
+  --bg-inverse: var(--white);
+  --bg-info: var(--blue-900);
+  --bg-success: var(--green-900);
+  --bg-warning: var(--yellow-900);
+  --bg-error: var(--red-900);
+
+  --border-base: var(--gray-600);
+  --border-subtle: var(--gray-700);
+  --border-mute: var(--gray-600);
+  --border-emphasize: var(--gray-500);
+  --border-inverse: var(--gray-300);
+  --border-info: var(--blue-400);
+  --border-success: var(--green-400);
+  --border-warning: var(--yellow-400);
+  --border-error: var(--red-400);
+
+  --primary-fg: var(--teal-300);
+  --primary-bg: var(--teal-800);
+  --primary-bg-subtle: var(--teal-950);
+  --primary-bg-mute: var(--teal-900);
+  --primary-bg-emphasize: var(--teal-700);
+  --primary-border: var(--teal-500);
+
+  --secondary-fg: var(--cyan-300);
+  --secondary-bg: var(--cyan-800);
+  --secondary-bg-subtle: var(--cyan-950);
+  --secondary-bg-mute: var(--cyan-900);
+  --secondary-bg-emphasize: var(--cyan-700);
+  --secondary-border: var(--cyan-500);
+
+  /* TODO: 上の変数の一環として使えるようにする */
+  --group-primary: var(--teal-200);
+  --group-secondary: var(--cyan-200);
+  --group-tertiary: var(--pink-200);
+  --group-quaternary: var(--purple-200);
+}
+
+@theme inline {
+  --color-*: initial;
+  --color-fg-base: var(--fg-base);
+  --color-fg-subtle: var(--fg-subtle);
+  --color-fg-mute: var(--fg-mute);
+  --color-fg-inverse: var(--fg-inverse);
+  --color-fg-info: var(--fg-info);
+  --color-fg-success: var(--fg-success);
+  --color-fg-warning: var(--fg-warning);
+  --color-fg-error: var(--fg-error);
+
+  --color-bg-base: var(--bg-base);
+  --color-bg-raised: var(--bg-raised);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-bg-mute: var(--bg-mute);
+  --color-bg-emphasize: var(--bg-emphasize);
+  --color-bg-inverse: var(--bg-inverse);
+  --color-bg-info: var(--bg-info);
+  --color-bg-success: var(--bg-success);
+  --color-bg-warning: var(--bg-warning);
+  --color-bg-error: var(--bg-error);
+
+  --color-border-base: var(--border-base);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-mute: var(--border-mute);
+  --color-border-emphasize: var(--border-emphasize);
+  --color-border-inverse: var(--border-inverse);
+  --color-border-info: var(--border-info);
+  --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-error: var(--border-error);
+
+  --color-primary-fg: var(--primary-fg);
+  --color-primary-bg: var(--primary-bg);
+  --color-primary-bg-subtle: var(--primary-bg-subtle);
+  --color-primary-bg-mute: var(--primary-bg-mute);
+  --color-primary-bg-emphasize: var(--primary-bg-emphasize);
+  --color-primary-border: var(--primary-border);
+
+  --color-secondary-fg: var(--secondary-fg);
+  --color-secondary-bg: var(--secondary-bg);
+  --color-secondary-bg-subtle: var(--secondary-bg-subtle);
+  --color-secondary-bg-mute: var(--secondary-bg-mute);
+  --color-secondary-bg-emphasize: var(--secondary-bg-emphasize);
+  --color-secondary-border: var(--secondary-border);
+
+  --color-transparent: transparent;
+  --color-back-drop: var(--back-drop);
+
+  --color-group-primary: var(--group-primary);
+  --color-group-secondary: var(--group-secondary);
+  --color-group-tertiary: var(--group-tertiary);
+  --color-group-quaternary: var(--group-quaternary);
+
+  --radius-*: initial;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+
+  --font-*: initial;
+  --font-noto-sans-jp: var(--font-noto-sans-jp);
+  --font-m-plus-2: var(--font-m-plus-2);
+
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-md: 1rem;
+  --text-md--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-emphasize: 3rem;
+  --text-emphasize--line-height: 1;
+  --text-highlight: 6rem;
+  --text-highlight--line-height: 1;
+
+  --font-weight-*: initial;
+  --font-weight-medium: 450;
+  --font-weight-bold: 700;
+
+  --tracking-*: initial;
+  --tracking-none: 0em;
+  --tracking-normal: 0.025em;
+
+  --leading-*: initial;
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  --shadow-*: initial;
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --inset-shadow-*: initial;
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  --spacing: 0.25rem;
+
+  --breakpoint-*: initial;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+}

package/dist/styles/tokens.d.mts

@@ -0,0 +1,2 @@
+import { AnimateToken, AspectToken, BlurToken, BreakpointToken, ColorToken, ContainerToken, DefaultToken, DropShadowToken, EaseToken, FontToken, FontWeightToken, InsetShadowToken, LeadingToken, MaxWidthToken, PerspectiveToken, RadiusToken, RefName, ShadowToken, TextShadowToken, TextToken, ThemeNamespace, TrackingToken, VarName, meta, tokens } from "./tokens.generated.mjs";
+export { AnimateToken, AspectToken, BlurToken, BreakpointToken, ColorToken, ContainerToken, DefaultToken, DropShadowToken, EaseToken, FontToken, FontWeightToken, InsetShadowToken, LeadingToken, MaxWidthToken, PerspectiveToken, RadiusToken, RefName, ShadowToken, TextShadowToken, TextToken, ThemeNamespace, TrackingToken, VarName, meta, tokens };