@naeil/ui 0.2.0 → 0.3.0

package/src/styles/components.css

@@ -0,0 +1,276 @@
+@layer components {
+  .ui-textarea {
+    min-height: var(--ui-control-height);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    padding-block: var(--spacing-2-value);
+    transition:
+      color var(--ui-motion-fast),
+      background-color var(--ui-motion-fast),
+      border-color var(--ui-motion-fast);
+  }
+  .ui-textarea[aria-invalid="true"] {
+    border-color: var(--error);
+  }
+  .ui-textarea::placeholder {
+    color: var(--muted-foreground);
+    opacity: 1;
+  }
+  .ui-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3-value);
+  }
+  .ui-tabs[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+  .ui-tabs-list {
+    display: flex;
+    align-items: flex-start;
+    max-width: 100%;
+    min-width: 0;
+    gap: var(--spacing-2-value);
+    padding: var(--spacing-2-value);
+    overflow-x: auto;
+  }
+  .ui-tabs-list[aria-orientation="vertical"] {
+    flex-direction: column;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+  .ui-tabs-trigger {
+    color: var(--foreground);
+    border-bottom-color: transparent;
+  }
+  .ui-tabs-trigger:hover:not(:disabled) {
+    background-color: var(--surface-subtle);
+  }
+  .ui-tabs-trigger[data-state="active"] {
+    background-color: var(--surface-selected);
+    border-bottom-color: var(--primary);
+  }
+  .ui-focus:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+  }
+  .ui-control {
+    height: var(--ui-control-height);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    border-radius: var(--radius-md-value);
+    transition:
+      color var(--ui-motion-fast),
+      background-color var(--ui-motion-fast),
+      border-color var(--ui-motion-fast);
+  }
+  .ui-control[data-size="lg"],
+  .ui-control[data-size="icon-lg"] {
+    height: calc(var(--ui-control-height) + 4px);
+  }
+  .ui-control[data-size^="icon"] {
+    width: var(--ui-control-height);
+    padding: 0;
+  }
+  .ui-control[aria-invalid="true"] {
+    border-color: var(--error);
+  }
+  .ui-control::placeholder {
+    color: var(--muted-foreground);
+    opacity: 1;
+  }
+  [data-slot="button"][aria-busy="true"] {
+    cursor: progress;
+  }
+  .ui-menu {
+    background: var(--popover);
+    color: var(--popover-foreground);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md-value);
+    box-shadow: var(--shadow-md);
+  }
+  .ui-menu [role^="menuitem"],
+  .ui-menu [role="option"] {
+    min-height: var(--ui-control-height);
+    font-size: var(--text-base);
+  }
+  .ui-menu [data-highlighted] {
+    background: var(--surface-subtle);
+    outline: 1px solid var(--ring);
+    outline-offset: -2px;
+  }
+  .ui-popup[data-state="open"] {
+    animation: ui-reveal var(--ui-motion-fast) ease-out;
+  }
+  .ui-popup[data-state="closed"] {
+    animation: ui-hide var(--ui-motion-fast) ease-in;
+  }
+  [data-slot="dialog-content"],
+  [data-slot="dialog-overlay"] {
+    --ui-motion-fast: var(--ui-motion-standard);
+  }
+  [data-slot="card"] {
+    gap: var(--ui-field-gap);
+    padding-block: var(--ui-panel-padding);
+  }
+  [data-slot="card-header"],
+  [data-slot="card-content"],
+  [data-slot="card-footer"] {
+    padding-inline: var(--ui-panel-padding);
+  }
+  [data-ui-layout] {
+    width: 100%;
+    margin-inline: auto;
+  }
+  [data-ui-layout="reading"] {
+    max-width: var(--ui-width-reading);
+    line-height: var(--leading-relaxed);
+  }
+  [data-ui-layout="settings"] {
+    max-width: var(--ui-width-settings);
+  }
+  [data-ui-layout="list"] {
+    max-width: var(--ui-width-list);
+  }
+  [data-ui-layout="short-form"] {
+    max-width: var(--ui-width-short-form);
+  }
+  [data-ui-layout="fluid"] {
+    max-width: none;
+  }
+  .ui-choice {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .ui-choice:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .ui-choice::before {
+    content: "";
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  [data-slot="switch"] {
+    width: 36px;
+    height: 22px;
+    padding: 3px;
+    border-radius: 999px;
+    background: var(--border-strong);
+    transition: background-color var(--ui-motion-fast);
+  }
+  [data-slot="switch"][data-state="checked"] {
+    background: var(--primary);
+  }
+  [data-slot="switch-thumb"] {
+    width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    background: white;
+    transform: translateX(-7px);
+    transition: transform var(--ui-motion-standard);
+  }
+  [data-slot="switch-thumb"][data-state="checked"] {
+    background: var(--primary-foreground);
+    transform: translateX(7px);
+  }
+  [data-slot="checkbox"] {
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm-value);
+    background: var(--background);
+  }
+  [data-slot="checkbox"][data-state="checked"],
+  [data-slot="checkbox"][data-state="indeterminate"] {
+    color: var(--primary-foreground);
+    background: var(--primary);
+    border-color: var(--primary);
+  }
+  .ui-choice-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 44px;
+    cursor: pointer;
+  }
+  [data-sonner-toast] {
+    font-family: var(--font-sans);
+    --normal-bg: var(--popover);
+    --normal-text: var(--foreground);
+    --normal-border: var(--border-strong);
+    transition-duration: var(--ui-motion-standard);
+  }
+}
+
+@keyframes ui-reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes ui-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (max-width: 560px), (pointer: coarse) {
+  .ui-control,
+  .ui-textarea,
+  [data-slot="dialog-close"] {
+    min-height: 44px;
+  }
+  .ui-control[data-size^="icon"],
+  [data-slot="dialog-close"] {
+    min-width: 44px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot],
+  [data-slot] *,
+  [data-sonner-toast],
+  [data-sonner-toast] * {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Background-only switch tracks/thumbs both become Canvas under forced colors.
+   System colors preserve the control boundary, state and moving thumb. */
+@media (forced-colors: active) {
+  [data-slot="switch"] {
+    forced-color-adjust: none;
+    border: 1px solid ButtonText;
+    background: Canvas;
+  }
+  [data-slot="switch-thumb"] {
+    background: ButtonText;
+  }
+  [data-slot="switch"][data-state="checked"] {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  [data-slot="switch-thumb"][data-state="checked"] {
+    background: HighlightText;
+  }
+  [data-slot="switch"]:disabled {
+    opacity: 1;
+    background: Canvas;
+    border-color: GrayText;
+  }
+  [data-slot="switch"]:disabled [data-slot="switch-thumb"] {
+    background: GrayText;
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./theme.css";
+@import "./components.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground font-sans text-base leading-normal antialiased;
+  }
+  :lang(ja) {
+    font-family: "Noto Sans JP", var(--font-sans);
+  }
+}

package/src/styles/theme.css

@@ -1,8 +1,8 @@
+/* Generated from src/tokens — DO NOT EDIT. */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
-  --color-card-elevated: var(--card-elevated);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
@@ -35,6 +35,18 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-card-elevated: var(--card-elevated);
+  --color-primary-hover: var(--primary-hover);
+  --color-surface-selected: var(--surface-selected);
+  --color-border-strong: var(--border-strong);
+  --color-error: var(--error);
+  --color-error-bg: var(--error-bg);
+  --color-success: var(--success);
+  --color-success-bg: var(--success-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
 
   --color-project-cc: var(--project-cc);
   --color-project-sa: var(--project-sa);
@@ -42,9 +54,26 @@
   --color-project-naeilUi: var(--project-naeilUi);
   --color-project-baby: var(--project-baby);
 
-  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
+  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans JP', -apple-system, system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
 
+  --text-xs: 0.8125rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.25rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5625;
+  --leading-relaxed: 1.875;
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
   --radius-none: var(--radius-none-value);
   --radius-sm: var(--radius-sm-value);
   --radius-md: var(--radius-md-value);
@@ -64,43 +93,69 @@
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-elevated: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.970 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.970 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.970 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --border-subtle: oklch(0 0 0 / 6%);
-  --border-subtle-hover: oklch(0 0 0 / 12%);
-  --surface-subtle: oklch(0 0 0 / 2%);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --background: #f7f8fa;
+  --foreground: #202127;
+  --card: #ffffff;
+  --card-foreground: #202127;
+  --popover: #ffffff;
+  --popover-foreground: #202127;
+  --primary: #292929;
+  --primary-foreground: #ffffff;
+  --secondary: #ebebeb;
+  --secondary-foreground: #202127;
+  --muted: #f0f1f5;
+  --muted-foreground: #5f626e;
+  --accent: #ebebeb;
+  --accent-foreground: #202127;
+  --destructive: #b73a45;
+  --destructive-foreground: #ffffff;
+  --border: #e2e3e9;
+  --border-subtle: #e2e3e9;
+  --border-subtle-hover: #8c8f9b;
+  --surface-subtle: #f0f1f5;
+  --input: #8c8f9b;
+  --ring: #616161;
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.970 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: #ffffff;
+  --sidebar-foreground: #202127;
+  --sidebar-primary: #292929;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ebebeb;
+  --sidebar-accent-foreground: #202127;
+  --sidebar-border: #e2e3e9;
+  --sidebar-ring: #616161;
+  --card-elevated: #ffffff;
+  --primary-hover: #414141;
+  --surface-selected: #ebebeb;
+  --border-strong: #8c8f9b;
+  --error: #b73a45;
+  --error-bg: #fff0f1;
+  --success: #246a49;
+  --success-bg: #e9f5ee;
+  --warning: #865d17;
+  --warning-bg: #fff3da;
+  --info: #245ec7;
+  --info-bg: #edf3ff;
 
+  --ui-control-height: 40px;
+  --ui-control-height-compact: 36px;
+  --ui-touch-target: 44px;
+  --ui-row-height: 72px;
+  --ui-row-height-compact: 60px;
+  --ui-panel-padding: 24px;
+  --ui-panel-padding-compact: 20px;
+  --ui-field-gap: 24px;
+  --ui-field-gap-compact: 16px;
+  --ui-width-reading: 640px;
+  --ui-width-settings: 640px;
+  --ui-width-list: 1200px;
+  --ui-width-short-form: 480px;
+  --ui-motion-fast: 120ms;
+  --ui-motion-standard: 180ms;
   --project-cc: oklch(0.704 0.140 181);
   --project-sa: oklch(0.723 0.219 149);
   --project-pkm: oklch(0.627 0.265 303);
@@ -108,9 +163,9 @@
   --project-baby: oklch(0.769 0.188 70.08);
 
   --radius-none-value: 0px;
-  --radius-sm-value: 2px;
-  --radius-md-value: 4px;
-  --radius-lg-value: 8px;
+  --radius-sm-value: 4px;
+  --radius-md-value: 8px;
+  --radius-lg-value: 12px;
 
   --spacing-0-value: 0px;
   --spacing-1-value: 4px;
@@ -126,81 +181,113 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-elevated: oklch(0.18 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --border-subtle: oklch(1 0 0 / 6%);
-  --border-subtle-hover: oklch(1 0 0 / 12%);
-  --surface-subtle: oklch(1 0 0 / 3%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --background: #0b0c0e;
+  --foreground: #eff0f3;
+  --card: #111215;
+  --card-foreground: #eff0f3;
+  --popover: #191a1f;
+  --popover-foreground: #eff0f3;
+  --primary: #e5e5e5;
+  --primary-foreground: #171717;
+  --secondary: #262626;
+  --secondary-foreground: #eff0f3;
+  --muted: #202127;
+  --muted-foreground: #a4a6b0;
+  --accent: #262626;
+  --accent-foreground: #eff0f3;
+  --destructive: #b73a45;
+  --destructive-foreground: #ffffff;
+  --border: #292b33;
+  --border-subtle: #292b33;
+  --border-subtle-hover: #646773;
+  --surface-subtle: #202127;
+  --input: #646773;
+  --ring: #b5b5b5;
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar: #111215;
+  --sidebar-foreground: #eff0f3;
+  --sidebar-primary: #e5e5e5;
+  --sidebar-primary-foreground: #171717;
+  --sidebar-accent: #262626;
+  --sidebar-accent-foreground: #eff0f3;
+  --sidebar-border: #292b33;
+  --sidebar-ring: #b5b5b5;
+  --card-elevated: #191a1f;
+  --primary-hover: #cccccc;
+  --surface-selected: #262626;
+  --border-strong: #646773;
+  --error: #f0a0a0;
+  --error-bg: #342021;
+  --success: #87c9a6;
+  --success-bg: #182b23;
+  --warning: #e4bf78;
+  --warning-bg: #302819;
+  --info: #a2c2ff;
+  --info-bg: #18263f;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-elevated: oklch(0.18 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --border-subtle: oklch(1 0 0 / 6%);
-    --border-subtle-hover: oklch(1 0 0 / 12%);
-    --surface-subtle: oklch(1 0 0 / 3%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
+    --background: #0b0c0e;
+    --foreground: #eff0f3;
+    --card: #111215;
+    --card-foreground: #eff0f3;
+    --popover: #191a1f;
+    --popover-foreground: #eff0f3;
+    --primary: #e5e5e5;
+    --primary-foreground: #171717;
+    --secondary: #262626;
+    --secondary-foreground: #eff0f3;
+    --muted: #202127;
+    --muted-foreground: #a4a6b0;
+    --accent: #262626;
+    --accent-foreground: #eff0f3;
+    --destructive: #b73a45;
+    --destructive-foreground: #ffffff;
+    --border: #292b33;
+    --border-subtle: #292b33;
+    --border-subtle-hover: #646773;
+    --surface-subtle: #202127;
+    --input: #646773;
+    --ring: #b5b5b5;
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar: #111215;
+    --sidebar-foreground: #eff0f3;
+    --sidebar-primary: #e5e5e5;
+    --sidebar-primary-foreground: #171717;
+    --sidebar-accent: #262626;
+    --sidebar-accent-foreground: #eff0f3;
+    --sidebar-border: #292b33;
+    --sidebar-ring: #b5b5b5;
+    --card-elevated: #191a1f;
+    --primary-hover: #cccccc;
+    --surface-selected: #262626;
+    --border-strong: #646773;
+    --error: #f0a0a0;
+    --error-bg: #342021;
+    --success: #87c9a6;
+    --success-bg: #182b23;
+    --warning: #e4bf78;
+    --warning-bg: #302819;
+    --info: #a2c2ff;
+    --info-bg: #18263f;
   }
 }
+
+:root[data-ui-density="compact"] {
+  --ui-control-height: 36px;
+  --ui-row-height: 60px;
+  --ui-panel-padding: 20px;
+  --ui-field-gap: 16px;
+}
+@media (max-width: 560px), (pointer: coarse) {
+  :root, :root[data-ui-density="compact"] { --ui-control-height: var(--ui-touch-target); --ui-row-height: 72px; }
+}