@novi-ui/flatlay 0.1.0

package/dist/flatlay.css

@@ -0,0 +1,381 @@
+/* 自動生成。編集しないこと。src/tokens/flatlay-tokens.ts と color-set.ts を変更して再生成する。 */
+
+@layer novi.base {
+  @keyframes novi-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  :root {
+    --novi-radius-none: 0px;
+    --novi-radius-sm: 2px;
+    --novi-radius-md: 2px;
+    --novi-radius-lg: 4px;
+    --novi-radius-full: 9999px;
+    --novi-shadow-none: 0 0 #0000;
+    --novi-shadow-sm: 0 0 #0000;
+    --novi-shadow-md: 0 0 #0000;
+    --novi-shadow-lg: 0 0 #0000;
+    --novi-text-xs: 11px;
+    --novi-text-sm: 13px;
+    --novi-text-base: 16px;
+    --novi-text-lg: 18px;
+    --novi-text-xl: 22px;
+    --novi-text-2xl: 26px;
+    --novi-text-3xl: 32px;
+    --novi-font-sans: system-ui, sans-serif;
+    --novi-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+    --novi-duration-fast: 100ms;
+    --novi-duration-base: 100ms;
+    --novi-duration-slow: 100ms;
+    --novi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --novi-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --novi-hue: 172;
+    --novi-color-bg: oklch(98.8% 0 0);
+    --novi-color-subtle: oklch(95.5% 0 0);
+    --novi-color-surface: oklch(98.8% 0 0);
+    --novi-color-overlay: oklch(98.8% 0 0);
+    --novi-color-fg: oklch(22% 0 0);
+    --novi-color-muted: oklch(46% 0 0);
+    --novi-color-default: oklch(95.5% 0 0);
+    --novi-color-default-fg: oklch(22% 0 0);
+    --novi-color-border: oklch(88% 0.025 172);
+    --novi-color-border-strong: oklch(58% 0.03 172);
+    --novi-color-primary: oklch(47% 0.07 172);
+    --novi-color-primary-fg: oklch(98.5% 0.004 172);
+    --novi-color-secondary: oklch(47% 0.07 352);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 352);
+    --novi-color-success: oklch(47% 0.13 155);
+    --novi-color-success-fg: oklch(98.5% 0.004 155);
+    --novi-color-warning: oklch(47% 0.12 62);
+    --novi-color-warning-fg: oklch(98.5% 0.004 62);
+    --novi-color-danger: oklch(47% 0.17 27);
+    --novi-color-danger-fg: oklch(98.5% 0.004 27);
+    --novi-swatch-fieldbook: oklch(47% 0.07 172);
+    --novi-swatch-fieldbook-fg: oklch(98.5% 0.004 172);
+    --novi-swatch-blueprint: oklch(47% 0.07 215);
+    --novi-swatch-blueprint-fg: oklch(98.5% 0.004 215);
+    --novi-swatch-carbon: oklch(47% 0.07 288);
+    --novi-swatch-carbon-fg: oklch(98.5% 0.004 288);
+    --novi-swatch-ribbon: oklch(47% 0.07 330);
+    --novi-swatch-ribbon-fg: oklch(98.5% 0.004 330);
+    --novi-swatch-eraser: oklch(47% 0.07 352);
+    --novi-swatch-eraser-fg: oklch(98.5% 0.004 352);
+    --novi-swatch-manila: oklch(47% 0.07 58);
+    --novi-swatch-manila-fg: oklch(98.5% 0.004 58);
+    --novi-swatch-legalpad: oklch(47% 0.07 98);
+    --novi-swatch-legalpad-fg: oklch(98.5% 0.004 98);
+    --novi-swatch-pencil: oklch(47% 0.02 240);
+    --novi-swatch-pencil-fg: oklch(98.5% 0.004 240);
+  }
+
+  [data-novi-scheme='dark'] {
+    --novi-color-bg: oklch(15% 0 0);
+    --novi-color-subtle: oklch(20% 0 0);
+    --novi-color-surface: oklch(15% 0 0);
+    --novi-color-overlay: oklch(15% 0 0);
+    --novi-color-fg: oklch(94% 0 0);
+    --novi-color-muted: oklch(70% 0 0);
+    --novi-color-default: oklch(20% 0 0);
+    --novi-color-default-fg: oklch(94% 0 0);
+    --novi-color-border: oklch(32% 0.022 172);
+    --novi-color-border-strong: oklch(55% 0.03 172);
+    --novi-color-primary: oklch(75% 0.06 172);
+    --novi-color-primary-fg: oklch(18% 0.02 172);
+    --novi-color-secondary: oklch(75% 0.06 352);
+    --novi-color-secondary-fg: oklch(18% 0.02 352);
+    --novi-color-success: oklch(75% 0.13 155);
+    --novi-color-success-fg: oklch(18% 0.02 155);
+    --novi-color-warning: oklch(75% 0.13 65);
+    --novi-color-warning-fg: oklch(18% 0.02 65);
+    --novi-color-danger: oklch(75% 0.15 27);
+    --novi-color-danger-fg: oklch(18% 0.02 27);
+    --novi-swatch-fieldbook: oklch(75% 0.06 172);
+    --novi-swatch-fieldbook-fg: oklch(18% 0.02 172);
+    --novi-swatch-blueprint: oklch(75% 0.06 215);
+    --novi-swatch-blueprint-fg: oklch(18% 0.02 215);
+    --novi-swatch-carbon: oklch(75% 0.06 288);
+    --novi-swatch-carbon-fg: oklch(18% 0.02 288);
+    --novi-swatch-ribbon: oklch(75% 0.06 330);
+    --novi-swatch-ribbon-fg: oklch(18% 0.02 330);
+    --novi-swatch-eraser: oklch(75% 0.06 352);
+    --novi-swatch-eraser-fg: oklch(18% 0.02 352);
+    --novi-swatch-manila: oklch(75% 0.06 58);
+    --novi-swatch-manila-fg: oklch(18% 0.02 58);
+    --novi-swatch-legalpad: oklch(75% 0.06 98);
+    --novi-swatch-legalpad-fg: oklch(18% 0.02 98);
+    --novi-swatch-pencil: oklch(75% 0.017 240);
+    --novi-swatch-pencil-fg: oklch(18% 0.02 240);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-novi-scheme='light']) {
+      --novi-color-bg: oklch(15% 0 0);
+      --novi-color-subtle: oklch(20% 0 0);
+      --novi-color-surface: oklch(15% 0 0);
+      --novi-color-overlay: oklch(15% 0 0);
+      --novi-color-fg: oklch(94% 0 0);
+      --novi-color-muted: oklch(70% 0 0);
+      --novi-color-default: oklch(20% 0 0);
+      --novi-color-default-fg: oklch(94% 0 0);
+      --novi-color-border: oklch(32% 0.022 172);
+      --novi-color-border-strong: oklch(55% 0.03 172);
+      --novi-color-primary: oklch(75% 0.06 172);
+      --novi-color-primary-fg: oklch(18% 0.02 172);
+      --novi-color-secondary: oklch(75% 0.06 352);
+      --novi-color-secondary-fg: oklch(18% 0.02 352);
+      --novi-color-success: oklch(75% 0.13 155);
+      --novi-color-success-fg: oklch(18% 0.02 155);
+      --novi-color-warning: oklch(75% 0.13 65);
+      --novi-color-warning-fg: oklch(18% 0.02 65);
+      --novi-color-danger: oklch(75% 0.15 27);
+      --novi-color-danger-fg: oklch(18% 0.02 27);
+      --novi-swatch-fieldbook: oklch(75% 0.06 172);
+      --novi-swatch-fieldbook-fg: oklch(18% 0.02 172);
+      --novi-swatch-blueprint: oklch(75% 0.06 215);
+      --novi-swatch-blueprint-fg: oklch(18% 0.02 215);
+      --novi-swatch-carbon: oklch(75% 0.06 288);
+      --novi-swatch-carbon-fg: oklch(18% 0.02 288);
+      --novi-swatch-ribbon: oklch(75% 0.06 330);
+      --novi-swatch-ribbon-fg: oklch(18% 0.02 330);
+      --novi-swatch-eraser: oklch(75% 0.06 352);
+      --novi-swatch-eraser-fg: oklch(18% 0.02 352);
+      --novi-swatch-manila: oklch(75% 0.06 58);
+      --novi-swatch-manila-fg: oklch(18% 0.02 58);
+      --novi-swatch-legalpad: oklch(75% 0.06 98);
+      --novi-swatch-legalpad-fg: oklch(18% 0.02 98);
+      --novi-swatch-pencil: oklch(75% 0.017 240);
+      --novi-swatch-pencil-fg: oklch(18% 0.02 240);
+    }
+  }
+
+  /* ── カラーセット Stationery（specs/07-theme-flatlay） ──
+     data-novi-color は data-novi-theme と同じ要素（テーマルート）に置く。
+     未知の色名はどれにも一致せず、既定色 Fieldbook のまま描画される。
+     Flatlay は染まらない紙なので、差し替わるのは罫線と primary / secondary だけ。 */
+  [data-novi-color='fieldbook'] {
+    --novi-hue: 172;
+    --novi-color-border: oklch(88% 0.025 172);
+    --novi-color-border-strong: oklch(58% 0.03 172);
+    --novi-color-primary: oklch(47% 0.07 172);
+    --novi-color-primary-fg: oklch(98.5% 0.004 172);
+    --novi-color-secondary: oklch(47% 0.07 352);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 352);
+  }
+
+  [data-novi-color='blueprint'] {
+    --novi-hue: 215;
+    --novi-color-border: oklch(88% 0.025 215);
+    --novi-color-border-strong: oklch(58% 0.03 215);
+    --novi-color-primary: oklch(47% 0.07 215);
+    --novi-color-primary-fg: oklch(98.5% 0.004 215);
+    --novi-color-secondary: oklch(47% 0.07 58);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 58);
+  }
+
+  [data-novi-color='carbon'] {
+    --novi-hue: 288;
+    --novi-color-border: oklch(88% 0.025 288);
+    --novi-color-border-strong: oklch(58% 0.03 288);
+    --novi-color-primary: oklch(47% 0.07 288);
+    --novi-color-primary-fg: oklch(98.5% 0.004 288);
+    --novi-color-secondary: oklch(47% 0.07 98);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 98);
+  }
+
+  [data-novi-color='ribbon'] {
+    --novi-hue: 330;
+    --novi-color-border: oklch(88% 0.025 330);
+    --novi-color-border-strong: oklch(58% 0.03 330);
+    --novi-color-primary: oklch(47% 0.07 330);
+    --novi-color-primary-fg: oklch(98.5% 0.004 330);
+    --novi-color-secondary: oklch(47% 0.07 172);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 172);
+  }
+
+  [data-novi-color='eraser'] {
+    --novi-hue: 352;
+    --novi-color-border: oklch(88% 0.025 352);
+    --novi-color-border-strong: oklch(58% 0.03 352);
+    --novi-color-primary: oklch(47% 0.07 352);
+    --novi-color-primary-fg: oklch(98.5% 0.004 352);
+    --novi-color-secondary: oklch(47% 0.02 240);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 240);
+  }
+
+  [data-novi-color='manila'] {
+    --novi-hue: 58;
+    --novi-color-border: oklch(88% 0.025 58);
+    --novi-color-border-strong: oklch(58% 0.03 58);
+    --novi-color-primary: oklch(47% 0.07 58);
+    --novi-color-primary-fg: oklch(98.5% 0.004 58);
+    --novi-color-secondary: oklch(47% 0.07 215);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 215);
+  }
+
+  [data-novi-color='legalpad'] {
+    --novi-hue: 98;
+    --novi-color-border: oklch(88% 0.025 98);
+    --novi-color-border-strong: oklch(58% 0.03 98);
+    --novi-color-primary: oklch(47% 0.07 98);
+    --novi-color-primary-fg: oklch(98.5% 0.004 98);
+    --novi-color-secondary: oklch(47% 0.07 288);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 288);
+  }
+
+  [data-novi-color='pencil'] {
+    --novi-hue: 240;
+    --novi-color-border: oklch(88% 0.025 240);
+    --novi-color-border-strong: oklch(58% 0.03 240);
+    --novi-color-primary: oklch(47% 0.02 240);
+    --novi-color-primary-fg: oklch(98.5% 0.004 240);
+    --novi-color-secondary: oklch(47% 0.07 352);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 352);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='fieldbook'] {
+    --novi-color-border: oklch(32% 0.022 172);
+    --novi-color-border-strong: oklch(55% 0.03 172);
+    --novi-color-primary: oklch(75% 0.06 172);
+    --novi-color-primary-fg: oklch(18% 0.02 172);
+    --novi-color-secondary: oklch(75% 0.06 352);
+    --novi-color-secondary-fg: oklch(18% 0.02 352);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='blueprint'] {
+    --novi-color-border: oklch(32% 0.022 215);
+    --novi-color-border-strong: oklch(55% 0.03 215);
+    --novi-color-primary: oklch(75% 0.06 215);
+    --novi-color-primary-fg: oklch(18% 0.02 215);
+    --novi-color-secondary: oklch(75% 0.06 58);
+    --novi-color-secondary-fg: oklch(18% 0.02 58);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='carbon'] {
+    --novi-color-border: oklch(32% 0.022 288);
+    --novi-color-border-strong: oklch(55% 0.03 288);
+    --novi-color-primary: oklch(75% 0.06 288);
+    --novi-color-primary-fg: oklch(18% 0.02 288);
+    --novi-color-secondary: oklch(75% 0.06 98);
+    --novi-color-secondary-fg: oklch(18% 0.02 98);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='ribbon'] {
+    --novi-color-border: oklch(32% 0.022 330);
+    --novi-color-border-strong: oklch(55% 0.03 330);
+    --novi-color-primary: oklch(75% 0.06 330);
+    --novi-color-primary-fg: oklch(18% 0.02 330);
+    --novi-color-secondary: oklch(75% 0.06 172);
+    --novi-color-secondary-fg: oklch(18% 0.02 172);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='eraser'] {
+    --novi-color-border: oklch(32% 0.022 352);
+    --novi-color-border-strong: oklch(55% 0.03 352);
+    --novi-color-primary: oklch(75% 0.06 352);
+    --novi-color-primary-fg: oklch(18% 0.02 352);
+    --novi-color-secondary: oklch(75% 0.017 240);
+    --novi-color-secondary-fg: oklch(18% 0.02 240);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='manila'] {
+    --novi-color-border: oklch(32% 0.022 58);
+    --novi-color-border-strong: oklch(55% 0.03 58);
+    --novi-color-primary: oklch(75% 0.06 58);
+    --novi-color-primary-fg: oklch(18% 0.02 58);
+    --novi-color-secondary: oklch(75% 0.06 215);
+    --novi-color-secondary-fg: oklch(18% 0.02 215);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='legalpad'] {
+    --novi-color-border: oklch(32% 0.022 98);
+    --novi-color-border-strong: oklch(55% 0.03 98);
+    --novi-color-primary: oklch(75% 0.06 98);
+    --novi-color-primary-fg: oklch(18% 0.02 98);
+    --novi-color-secondary: oklch(75% 0.06 288);
+    --novi-color-secondary-fg: oklch(18% 0.02 288);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='pencil'] {
+    --novi-color-border: oklch(32% 0.022 240);
+    --novi-color-border-strong: oklch(55% 0.03 240);
+    --novi-color-primary: oklch(75% 0.017 240);
+    --novi-color-primary-fg: oklch(18% 0.02 240);
+    --novi-color-secondary: oklch(75% 0.06 352);
+    --novi-color-secondary-fg: oklch(18% 0.02 352);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-novi-scheme='light'])[data-novi-color='fieldbook'] {
+      --novi-color-border: oklch(32% 0.022 172);
+      --novi-color-border-strong: oklch(55% 0.03 172);
+      --novi-color-primary: oklch(75% 0.06 172);
+      --novi-color-primary-fg: oklch(18% 0.02 172);
+      --novi-color-secondary: oklch(75% 0.06 352);
+      --novi-color-secondary-fg: oklch(18% 0.02 352);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='blueprint'] {
+      --novi-color-border: oklch(32% 0.022 215);
+      --novi-color-border-strong: oklch(55% 0.03 215);
+      --novi-color-primary: oklch(75% 0.06 215);
+      --novi-color-primary-fg: oklch(18% 0.02 215);
+      --novi-color-secondary: oklch(75% 0.06 58);
+      --novi-color-secondary-fg: oklch(18% 0.02 58);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='carbon'] {
+      --novi-color-border: oklch(32% 0.022 288);
+      --novi-color-border-strong: oklch(55% 0.03 288);
+      --novi-color-primary: oklch(75% 0.06 288);
+      --novi-color-primary-fg: oklch(18% 0.02 288);
+      --novi-color-secondary: oklch(75% 0.06 98);
+      --novi-color-secondary-fg: oklch(18% 0.02 98);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='ribbon'] {
+      --novi-color-border: oklch(32% 0.022 330);
+      --novi-color-border-strong: oklch(55% 0.03 330);
+      --novi-color-primary: oklch(75% 0.06 330);
+      --novi-color-primary-fg: oklch(18% 0.02 330);
+      --novi-color-secondary: oklch(75% 0.06 172);
+      --novi-color-secondary-fg: oklch(18% 0.02 172);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='eraser'] {
+      --novi-color-border: oklch(32% 0.022 352);
+      --novi-color-border-strong: oklch(55% 0.03 352);
+      --novi-color-primary: oklch(75% 0.06 352);
+      --novi-color-primary-fg: oklch(18% 0.02 352);
+      --novi-color-secondary: oklch(75% 0.017 240);
+      --novi-color-secondary-fg: oklch(18% 0.02 240);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='manila'] {
+      --novi-color-border: oklch(32% 0.022 58);
+      --novi-color-border-strong: oklch(55% 0.03 58);
+      --novi-color-primary: oklch(75% 0.06 58);
+      --novi-color-primary-fg: oklch(18% 0.02 58);
+      --novi-color-secondary: oklch(75% 0.06 215);
+      --novi-color-secondary-fg: oklch(18% 0.02 215);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='legalpad'] {
+      --novi-color-border: oklch(32% 0.022 98);
+      --novi-color-border-strong: oklch(55% 0.03 98);
+      --novi-color-primary: oklch(75% 0.06 98);
+      --novi-color-primary-fg: oklch(18% 0.02 98);
+      --novi-color-secondary: oklch(75% 0.06 288);
+      --novi-color-secondary-fg: oklch(18% 0.02 288);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='pencil'] {
+      --novi-color-border: oklch(32% 0.022 240);
+      --novi-color-border-strong: oklch(55% 0.03 240);
+      --novi-color-primary: oklch(75% 0.017 240);
+      --novi-color-primary-fg: oklch(18% 0.02 240);
+      --novi-color-secondary: oklch(75% 0.06 352);
+      --novi-color-secondary-fg: oklch(18% 0.02 352);
+    }
+  }
+}