@novi-ui/tactile 0.1.0

package/dist/tabs/tabs.styles.mjs

@@ -0,0 +1,92 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/tabs/tabs.styles.ts
+/**
+* Tactile の Tabs は**セグメンテッドコントロール**（Raster は下線1本）。
+*
+* 構造差の要点:
+* - `list` が**塗られたトラック**になる（Raster は下辺の罫線だけ）
+* - `indicator` が**実体を持つ塗り面**として選択中のタブに重なる（Raster は描画しない）
+* - タブは「線の上の文字」ではなく「トラックに沈んだ区画」になる
+*
+* 指で切り替える前提なので、どこが押せる範囲かが面で分かる必要がある。
+* 下線1本は視線には十分でも、指には「どこまでが自分の区画か」を伝えない。
+*/
+const slots = {
+	root: "flex flex-col gap-4",
+	list: [
+		"flex gap-1 w-fit",
+		"bg-[var(--novi-color-subtle)]",
+		"rounded-[var(--novi-radius-md)]",
+		"p-1"
+	].join(" "),
+	tab: [
+		"relative isolate cursor-pointer outline-none whitespace-nowrap",
+		"flex items-center justify-center",
+		"text-[var(--novi-color-muted)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"transition-[color,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100",
+		"hover:text-[var(--novi-color-fg)]",
+		"data-[selected]:text-[var(--novi-color-fg)]",
+		"data-[selected]:font-bold",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		focusRing
+	].join(" "),
+	indicator: [
+		"absolute inset-0 -z-10",
+		"bg-[var(--novi-color-surface)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"shadow-[var(--novi-shadow-sm)]"
+	].join(" "),
+	panel: "outline-none text-[var(--novi-color-fg)]"
+};
+/**
+* Tabs のスタイル定義。
+*
+* @example
+* import { tabsStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myTabs = tv({ extend: tabsStyles, slots: { list: 'w-full' } })
+*/
+const tabsStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: { tab: "h-10 px-4 text-[length:var(--novi-text-sm)]" },
+			md: { tab: "h-12 px-5 text-[length:var(--novi-text-base)]" },
+			lg: { tab: "h-14 px-6 text-[length:var(--novi-text-base)]" }
+		},
+		variant: {
+			solid: {
+				list: "bg-[var(--novi-color-subtle)]",
+				indicator: ""
+			},
+			outline: {
+				list: "bg-transparent ring-1 ring-[var(--novi-color-border)]",
+				indicator: "shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]"
+			},
+			soft: {
+				list: "bg-[var(--novi-color-subtle)]",
+				indicator: "shadow-[var(--novi-shadow-none)]"
+			},
+			ghost: {
+				list: "bg-transparent p-0 gap-2",
+				indicator: "bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]"
+			},
+			plain: {
+				list: "bg-transparent p-0 gap-4",
+				indicator: "bg-transparent shadow-[var(--novi-shadow-none)]"
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "solid"
+	}
+});
+//#endregion
+export { tabsStyles };
+
+//# sourceMappingURL=tabs.styles.mjs.map

package/dist/tabs/tabs.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.mjs","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"sourcesContent":["import type {\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  tabsRequiredSlots,\n  tabsSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Tabs は**セグメンテッドコントロール**（Raster は下線1本）。\n *\n * 構造差の要点:\n * - `list` が**塗られたトラック**になる（Raster は下辺の罫線だけ）\n * - `indicator` が**実体を持つ塗り面**として選択中のタブに重なる（Raster は描画しない）\n * - タブは「線の上の文字」ではなく「トラックに沈んだ区画」になる\n *\n * 指で切り替える前提なので、どこが押せる範囲かが面で分かる必要がある。\n * 下線1本は視線には十分でも、指には「どこまでが自分の区画か」を伝えない。\n */\nconst slots = {\n  root: 'flex flex-col gap-4',\n  list: [\n    'flex gap-1 w-fit',\n    'bg-[var(--novi-color-subtle)]',\n    'rounded-[var(--novi-radius-md)]',\n    'p-1',\n  ].join(' '),\n  tab: [\n    // indicator を内側に置くため、位置の基準を作る\n    'relative isolate cursor-pointer outline-none whitespace-nowrap',\n    'flex items-center justify-center',\n    'text-[var(--novi-color-muted)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'transition-[color,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100',\n    'hover:text-[var(--novi-color-fg)]',\n    'data-[selected]:text-[var(--novi-color-fg)]',\n    'data-[selected]:font-bold',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    focusRing,\n  ].join(' '),\n  // 選択中のタブの内側に敷かれる面。トラックから1段持ち上がって見える\n  indicator: [\n    'absolute inset-0 -z-10',\n    'bg-[var(--novi-color-surface)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'shadow-[var(--novi-shadow-sm)]',\n  ].join(' '),\n  panel: 'outline-none text-[var(--novi-color-fg)]',\n} satisfies SlotMap<typeof tabsSlots, (typeof tabsRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { list: string; indicator: string }> = {\n  solid: { list: 'bg-[var(--novi-color-subtle)]', indicator: '' },\n  outline: {\n    list: 'bg-transparent ring-1 ring-[var(--novi-color-border)]',\n    indicator: 'shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n  },\n  soft: { list: 'bg-[var(--novi-color-subtle)]', indicator: 'shadow-[var(--novi-shadow-none)]' },\n  ghost: {\n    list: 'bg-transparent p-0 gap-2',\n    indicator: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]',\n  },\n  plain: {\n    list: 'bg-transparent p-0 gap-4',\n    indicator: 'bg-transparent shadow-[var(--novi-shadow-none)]',\n  },\n}\n\n/** どの段でもタップ下限を割らない。トラックの内側なので上下の余白も確保する。 */\nconst size: VariantMap<NoviSize, { tab: string }> = {\n  sm: { tab: 'h-10 px-4 text-[length:var(--novi-text-sm)]' },\n  md: { tab: 'h-12 px-5 text-[length:var(--novi-text-base)]' },\n  lg: { tab: 'h-14 px-6 text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Tabs のスタイル定義。\n *\n * @example\n * import { tabsStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myTabs = tv({ extend: tabsStyles, slots: { list: 'w-full' } })\n */\nexport const tabsStyles = tv({\n  slots,\n  variants: { size, variant },\n  defaultVariants: { size: 'md', variant: 'solid' },\n})\n\nexport type TabsStyleProps = Parameters<typeof tabsStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,KAAK;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;EACT;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;AACT;;;;;;;;;;AAmCA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EAAE;GAhBZ,IAAI,EAAE,KAAK,8CAA8C;GACzD,IAAI,EAAE,KAAK,gDAAgD;GAC3D,IAAI,EAAE,KAAK,gDAAgD;EAc/C;EAAM;GAlClB,OAAO;IAAE,MAAM;IAAiC,WAAW;GAAG;GAC9D,SAAS;IACP,MAAM;IACN,WAAW;GACb;GACA,MAAM;IAAE,MAAM;IAAiC,WAAW;GAAmC;GAC7F,OAAO;IACL,MAAM;IACN,WAAW;GACb;GACA,OAAO;IACL,MAAM;IACN,WAAW;GACb;EAqBkB;CAAQ;CAC1B,iBAAiB;EAAE,MAAM;EAAM,SAAS;CAAQ;AAClD,CAAC"}

package/dist/tactile.css

@@ -0,0 +1,528 @@
+/* 自動生成。編集しないこと。src/tokens/tactile-tokens.ts と color-set.ts を変更して再生成する。 */
+
+@layer novi.base {
+  @keyframes novi-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes novi-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  :root {
+    --novi-radius-none: 0px;
+    --novi-radius-sm: 8px;
+    --novi-radius-md: 14px;
+    --novi-radius-lg: 20px;
+    --novi-radius-full: 9999px;
+    --novi-shadow-none: none;
+    --novi-shadow-sm: 0 1px 3px oklch(20% 0.01 255 / 0.10), 0 1px 2px oklch(20% 0.01 255 / 0.06);
+    --novi-shadow-md: 0 6px 16px oklch(20% 0.01 255 / 0.14), 0 2px 4px oklch(20% 0.01 255 / 0.08);
+    --novi-shadow-lg: 0 -8px 32px oklch(20% 0.01 255 / 0.18), 0 -2px 8px oklch(20% 0.01 255 / 0.08);
+    --novi-text-xs: 13px;
+    --novi-text-sm: 15px;
+    --novi-text-base: 17px;
+    --novi-text-lg: 21px;
+    --novi-text-xl: 26px;
+    --novi-text-2xl: 32px;
+    --novi-text-3xl: 40px;
+    --novi-duration-fast: 120ms;
+    --novi-duration-base: 200ms;
+    --novi-duration-slow: 260ms;
+    --novi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --novi-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
+    --novi-hue: 255;
+    --novi-color-bg: oklch(97.6% 0.006 255);
+    --novi-color-subtle: oklch(94.5% 0.009 255);
+    --novi-color-fg: oklch(22% 0.015 255);
+    --novi-color-muted: oklch(47% 0.012 255);
+    --novi-color-border: oklch(90% 0.011 255);
+    --novi-color-border-strong: oklch(63% 0.013 255);
+    --novi-color-default: oklch(94.5% 0.009 255);
+    --novi-color-default-fg: oklch(22% 0.015 255);
+    --novi-color-overlay: oklch(20% 0.01 255 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 255);
+    --novi-color-primary: oklch(50% 0.08 255);
+    --novi-color-primary-fg: oklch(98.5% 0.004 255);
+    --novi-color-secondary: oklch(50% 0.08 78);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 78);
+    --novi-color-success: oklch(48% 0.12 155);
+    --novi-color-success-fg: oklch(98.5% 0.004 155);
+    --novi-color-warning: oklch(48% 0.12 62);
+    --novi-color-warning-fg: oklch(98.5% 0.004 62);
+    --novi-color-danger: oklch(50% 0.16 27);
+    --novi-color-danger-fg: oklch(98.5% 0.004 27);
+  }
+
+  [data-novi-scheme='dark'] {
+    --novi-color-bg: oklch(14% 0.012 255);
+    --novi-color-subtle: oklch(20% 0.014 255);
+    --novi-color-fg: oklch(94% 0.008 255);
+    --novi-color-muted: oklch(70% 0.012 255);
+    --novi-color-border: oklch(30% 0.015 255);
+    --novi-color-border-strong: oklch(55% 0.014 255);
+    --novi-color-default: oklch(20% 0.014 255);
+    --novi-color-default-fg: oklch(94% 0.008 255);
+    --novi-color-overlay: oklch(8% 0.01 255 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 255);
+    --novi-color-primary: oklch(76% 0.075 255);
+    --novi-color-primary-fg: oklch(18% 0.02 255);
+    --novi-color-secondary: oklch(76% 0.075 78);
+    --novi-color-secondary-fg: oklch(18% 0.02 78);
+    --novi-color-success: oklch(78% 0.12 155);
+    --novi-color-success-fg: oklch(18% 0.02 155);
+    --novi-color-warning: oklch(82% 0.12 65);
+    --novi-color-warning-fg: oklch(18% 0.02 65);
+    --novi-color-danger: oklch(74% 0.14 27);
+    --novi-color-danger-fg: oklch(18% 0.02 27);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-novi-scheme='light']) {
+      --novi-color-bg: oklch(14% 0.012 255);
+      --novi-color-subtle: oklch(20% 0.014 255);
+      --novi-color-fg: oklch(94% 0.008 255);
+      --novi-color-muted: oklch(70% 0.012 255);
+      --novi-color-border: oklch(30% 0.015 255);
+      --novi-color-border-strong: oklch(55% 0.014 255);
+      --novi-color-default: oklch(20% 0.014 255);
+      --novi-color-default-fg: oklch(94% 0.008 255);
+      --novi-color-overlay: oklch(8% 0.01 255 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 255);
+      --novi-color-primary: oklch(76% 0.075 255);
+      --novi-color-primary-fg: oklch(18% 0.02 255);
+      --novi-color-secondary: oklch(76% 0.075 78);
+      --novi-color-secondary-fg: oklch(18% 0.02 78);
+      --novi-color-success: oklch(78% 0.12 155);
+      --novi-color-success-fg: oklch(18% 0.02 155);
+      --novi-color-warning: oklch(82% 0.12 65);
+      --novi-color-warning-fg: oklch(18% 0.02 65);
+      --novi-color-danger: oklch(74% 0.14 27);
+      --novi-color-danger-fg: oklch(18% 0.02 27);
+    }
+  }
+
+  /* ── カラーセット Textile Dyes（specs/06-tones-and-colors） ──
+     data-novi-color は data-novi-theme と同じ要素（テーマルート）に置く。
+     未知の色名はどれにも一致せず、既定色 Indigo のまま描画される。
+     Tactile は染まる生地なので、中立色と surface も色ごとに差し替わる。 */
+  [data-novi-color='indigo'] {
+    --novi-hue: 255;
+    --novi-color-bg: oklch(97.6% 0.006 255);
+    --novi-color-subtle: oklch(94.5% 0.009 255);
+    --novi-color-fg: oklch(22% 0.015 255);
+    --novi-color-muted: oklch(47% 0.012 255);
+    --novi-color-border: oklch(90% 0.011 255);
+    --novi-color-border-strong: oklch(63% 0.013 255);
+    --novi-color-default: oklch(94.5% 0.009 255);
+    --novi-color-default-fg: oklch(22% 0.015 255);
+    --novi-color-overlay: oklch(20% 0.01 255 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 255);
+    --novi-color-primary: oklch(50% 0.08 255);
+    --novi-color-primary-fg: oklch(98.5% 0.004 255);
+    --novi-color-secondary: oklch(50% 0.08 78);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 78);
+  }
+
+  [data-novi-color='peacock'] {
+    --novi-hue: 200;
+    --novi-color-bg: oklch(97.6% 0.006 200);
+    --novi-color-subtle: oklch(94.5% 0.009 200);
+    --novi-color-fg: oklch(22% 0.015 200);
+    --novi-color-muted: oklch(47% 0.012 200);
+    --novi-color-border: oklch(90% 0.011 200);
+    --novi-color-border-strong: oklch(63% 0.013 200);
+    --novi-color-default: oklch(94.5% 0.009 200);
+    --novi-color-default-fg: oklch(22% 0.015 200);
+    --novi-color-overlay: oklch(20% 0.01 200 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 200);
+    --novi-color-primary: oklch(50% 0.08 200);
+    --novi-color-primary-fg: oklch(98.5% 0.004 200);
+    --novi-color-secondary: oklch(50% 0.08 28);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 28);
+  }
+
+  [data-novi-color='sage'] {
+    --novi-hue: 148;
+    --novi-color-bg: oklch(97.6% 0.006 148);
+    --novi-color-subtle: oklch(94.5% 0.009 148);
+    --novi-color-fg: oklch(22% 0.015 148);
+    --novi-color-muted: oklch(47% 0.012 148);
+    --novi-color-border: oklch(90% 0.011 148);
+    --novi-color-border-strong: oklch(63% 0.013 148);
+    --novi-color-default: oklch(94.5% 0.009 148);
+    --novi-color-default-fg: oklch(22% 0.015 148);
+    --novi-color-overlay: oklch(20% 0.01 148 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 148);
+    --novi-color-primary: oklch(50% 0.08 148);
+    --novi-color-primary-fg: oklch(98.5% 0.004 148);
+    --novi-color-secondary: oklch(50% 0.08 5);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 5);
+  }
+
+  [data-novi-color='saffron'] {
+    --novi-hue: 78;
+    --novi-color-bg: oklch(97.6% 0.006 78);
+    --novi-color-subtle: oklch(94.5% 0.009 78);
+    --novi-color-fg: oklch(22% 0.015 78);
+    --novi-color-muted: oklch(47% 0.012 78);
+    --novi-color-border: oklch(90% 0.011 78);
+    --novi-color-border-strong: oklch(63% 0.013 78);
+    --novi-color-default: oklch(94.5% 0.009 78);
+    --novi-color-default-fg: oklch(22% 0.015 78);
+    --novi-color-overlay: oklch(20% 0.01 78 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 78);
+    --novi-color-primary: oklch(50% 0.08 78);
+    --novi-color-primary-fg: oklch(98.5% 0.004 78);
+    --novi-color-secondary: oklch(50% 0.08 255);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 255);
+  }
+
+  [data-novi-color='madder'] {
+    --novi-hue: 28;
+    --novi-color-bg: oklch(97.6% 0.006 28);
+    --novi-color-subtle: oklch(94.5% 0.009 28);
+    --novi-color-fg: oklch(22% 0.015 28);
+    --novi-color-muted: oklch(47% 0.012 28);
+    --novi-color-border: oklch(90% 0.011 28);
+    --novi-color-border-strong: oklch(63% 0.013 28);
+    --novi-color-default: oklch(94.5% 0.009 28);
+    --novi-color-default-fg: oklch(22% 0.015 28);
+    --novi-color-overlay: oklch(20% 0.01 28 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 28);
+    --novi-color-primary: oklch(50% 0.08 28);
+    --novi-color-primary-fg: oklch(98.5% 0.004 28);
+    --novi-color-secondary: oklch(50% 0.08 200);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 200);
+  }
+
+  [data-novi-color='cochineal'] {
+    --novi-hue: 5;
+    --novi-color-bg: oklch(97.6% 0.006 5);
+    --novi-color-subtle: oklch(94.5% 0.009 5);
+    --novi-color-fg: oklch(22% 0.015 5);
+    --novi-color-muted: oklch(47% 0.012 5);
+    --novi-color-border: oklch(90% 0.011 5);
+    --novi-color-border-strong: oklch(63% 0.013 5);
+    --novi-color-default: oklch(94.5% 0.009 5);
+    --novi-color-default-fg: oklch(22% 0.015 5);
+    --novi-color-overlay: oklch(20% 0.01 5 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 5);
+    --novi-color-primary: oklch(50% 0.08 5);
+    --novi-color-primary-fg: oklch(98.5% 0.004 5);
+    --novi-color-secondary: oklch(50% 0.08 148);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 148);
+  }
+
+  [data-novi-color='mauve'] {
+    --novi-hue: 315;
+    --novi-color-bg: oklch(97.6% 0.006 315);
+    --novi-color-subtle: oklch(94.5% 0.009 315);
+    --novi-color-fg: oklch(22% 0.015 315);
+    --novi-color-muted: oklch(47% 0.012 315);
+    --novi-color-border: oklch(90% 0.011 315);
+    --novi-color-border-strong: oklch(63% 0.013 315);
+    --novi-color-default: oklch(94.5% 0.009 315);
+    --novi-color-default-fg: oklch(22% 0.015 315);
+    --novi-color-overlay: oklch(20% 0.01 315 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 315);
+    --novi-color-primary: oklch(50% 0.08 315);
+    --novi-color-primary-fg: oklch(98.5% 0.004 315);
+    --novi-color-secondary: oklch(50% 0.08 148);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 148);
+  }
+
+  [data-novi-color='greige'] {
+    --novi-hue: 80;
+    --novi-color-bg: oklch(97.6% 0.006 80);
+    --novi-color-subtle: oklch(94.5% 0.009 80);
+    --novi-color-fg: oklch(22% 0.015 80);
+    --novi-color-muted: oklch(47% 0.012 80);
+    --novi-color-border: oklch(90% 0.011 80);
+    --novi-color-border-strong: oklch(63% 0.013 80);
+    --novi-color-default: oklch(94.5% 0.009 80);
+    --novi-color-default-fg: oklch(22% 0.015 80);
+    --novi-color-overlay: oklch(20% 0.01 80 / 0.45);
+    --novi-color-surface: oklch(99.3% 0.004 80);
+    --novi-color-primary: oklch(50% 0.022 80);
+    --novi-color-primary-fg: oklch(98.5% 0.004 80);
+    --novi-color-secondary: oklch(50% 0.08 255);
+    --novi-color-secondary-fg: oklch(98.5% 0.004 255);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='indigo'] {
+    --novi-color-bg: oklch(14% 0.012 255);
+    --novi-color-subtle: oklch(20% 0.014 255);
+    --novi-color-fg: oklch(94% 0.008 255);
+    --novi-color-muted: oklch(70% 0.012 255);
+    --novi-color-border: oklch(30% 0.015 255);
+    --novi-color-border-strong: oklch(55% 0.014 255);
+    --novi-color-default: oklch(20% 0.014 255);
+    --novi-color-default-fg: oklch(94% 0.008 255);
+    --novi-color-overlay: oklch(8% 0.01 255 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 255);
+    --novi-color-primary: oklch(76% 0.075 255);
+    --novi-color-primary-fg: oklch(18% 0.02 255);
+    --novi-color-secondary: oklch(76% 0.075 78);
+    --novi-color-secondary-fg: oklch(18% 0.02 78);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='peacock'] {
+    --novi-color-bg: oklch(14% 0.012 200);
+    --novi-color-subtle: oklch(20% 0.014 200);
+    --novi-color-fg: oklch(94% 0.008 200);
+    --novi-color-muted: oklch(70% 0.012 200);
+    --novi-color-border: oklch(30% 0.015 200);
+    --novi-color-border-strong: oklch(55% 0.014 200);
+    --novi-color-default: oklch(20% 0.014 200);
+    --novi-color-default-fg: oklch(94% 0.008 200);
+    --novi-color-overlay: oklch(8% 0.01 200 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 200);
+    --novi-color-primary: oklch(76% 0.075 200);
+    --novi-color-primary-fg: oklch(18% 0.02 200);
+    --novi-color-secondary: oklch(76% 0.075 28);
+    --novi-color-secondary-fg: oklch(18% 0.02 28);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='sage'] {
+    --novi-color-bg: oklch(14% 0.012 148);
+    --novi-color-subtle: oklch(20% 0.014 148);
+    --novi-color-fg: oklch(94% 0.008 148);
+    --novi-color-muted: oklch(70% 0.012 148);
+    --novi-color-border: oklch(30% 0.015 148);
+    --novi-color-border-strong: oklch(55% 0.014 148);
+    --novi-color-default: oklch(20% 0.014 148);
+    --novi-color-default-fg: oklch(94% 0.008 148);
+    --novi-color-overlay: oklch(8% 0.01 148 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 148);
+    --novi-color-primary: oklch(76% 0.075 148);
+    --novi-color-primary-fg: oklch(18% 0.02 148);
+    --novi-color-secondary: oklch(76% 0.075 5);
+    --novi-color-secondary-fg: oklch(18% 0.02 5);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='saffron'] {
+    --novi-color-bg: oklch(14% 0.012 78);
+    --novi-color-subtle: oklch(20% 0.014 78);
+    --novi-color-fg: oklch(94% 0.008 78);
+    --novi-color-muted: oklch(70% 0.012 78);
+    --novi-color-border: oklch(30% 0.015 78);
+    --novi-color-border-strong: oklch(55% 0.014 78);
+    --novi-color-default: oklch(20% 0.014 78);
+    --novi-color-default-fg: oklch(94% 0.008 78);
+    --novi-color-overlay: oklch(8% 0.01 78 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 78);
+    --novi-color-primary: oklch(76% 0.075 78);
+    --novi-color-primary-fg: oklch(18% 0.02 78);
+    --novi-color-secondary: oklch(76% 0.075 255);
+    --novi-color-secondary-fg: oklch(18% 0.02 255);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='madder'] {
+    --novi-color-bg: oklch(14% 0.012 28);
+    --novi-color-subtle: oklch(20% 0.014 28);
+    --novi-color-fg: oklch(94% 0.008 28);
+    --novi-color-muted: oklch(70% 0.012 28);
+    --novi-color-border: oklch(30% 0.015 28);
+    --novi-color-border-strong: oklch(55% 0.014 28);
+    --novi-color-default: oklch(20% 0.014 28);
+    --novi-color-default-fg: oklch(94% 0.008 28);
+    --novi-color-overlay: oklch(8% 0.01 28 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 28);
+    --novi-color-primary: oklch(76% 0.075 28);
+    --novi-color-primary-fg: oklch(18% 0.02 28);
+    --novi-color-secondary: oklch(76% 0.075 200);
+    --novi-color-secondary-fg: oklch(18% 0.02 200);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='cochineal'] {
+    --novi-color-bg: oklch(14% 0.012 5);
+    --novi-color-subtle: oklch(20% 0.014 5);
+    --novi-color-fg: oklch(94% 0.008 5);
+    --novi-color-muted: oklch(70% 0.012 5);
+    --novi-color-border: oklch(30% 0.015 5);
+    --novi-color-border-strong: oklch(55% 0.014 5);
+    --novi-color-default: oklch(20% 0.014 5);
+    --novi-color-default-fg: oklch(94% 0.008 5);
+    --novi-color-overlay: oklch(8% 0.01 5 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 5);
+    --novi-color-primary: oklch(76% 0.075 5);
+    --novi-color-primary-fg: oklch(18% 0.02 5);
+    --novi-color-secondary: oklch(76% 0.075 148);
+    --novi-color-secondary-fg: oklch(18% 0.02 148);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='mauve'] {
+    --novi-color-bg: oklch(14% 0.012 315);
+    --novi-color-subtle: oklch(20% 0.014 315);
+    --novi-color-fg: oklch(94% 0.008 315);
+    --novi-color-muted: oklch(70% 0.012 315);
+    --novi-color-border: oklch(30% 0.015 315);
+    --novi-color-border-strong: oklch(55% 0.014 315);
+    --novi-color-default: oklch(20% 0.014 315);
+    --novi-color-default-fg: oklch(94% 0.008 315);
+    --novi-color-overlay: oklch(8% 0.01 315 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 315);
+    --novi-color-primary: oklch(76% 0.075 315);
+    --novi-color-primary-fg: oklch(18% 0.02 315);
+    --novi-color-secondary: oklch(76% 0.075 148);
+    --novi-color-secondary-fg: oklch(18% 0.02 148);
+  }
+
+  [data-novi-scheme='dark'][data-novi-color='greige'] {
+    --novi-color-bg: oklch(14% 0.012 80);
+    --novi-color-subtle: oklch(20% 0.014 80);
+    --novi-color-fg: oklch(94% 0.008 80);
+    --novi-color-muted: oklch(70% 0.012 80);
+    --novi-color-border: oklch(30% 0.015 80);
+    --novi-color-border-strong: oklch(55% 0.014 80);
+    --novi-color-default: oklch(20% 0.014 80);
+    --novi-color-default-fg: oklch(94% 0.008 80);
+    --novi-color-overlay: oklch(8% 0.01 80 / 0.6);
+    --novi-color-surface: oklch(24% 0.014 80);
+    --novi-color-primary: oklch(76% 0.018 80);
+    --novi-color-primary-fg: oklch(18% 0.02 80);
+    --novi-color-secondary: oklch(76% 0.075 255);
+    --novi-color-secondary-fg: oklch(18% 0.02 255);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-novi-scheme='light'])[data-novi-color='indigo'] {
+      --novi-color-bg: oklch(14% 0.012 255);
+      --novi-color-subtle: oklch(20% 0.014 255);
+      --novi-color-fg: oklch(94% 0.008 255);
+      --novi-color-muted: oklch(70% 0.012 255);
+      --novi-color-border: oklch(30% 0.015 255);
+      --novi-color-border-strong: oklch(55% 0.014 255);
+      --novi-color-default: oklch(20% 0.014 255);
+      --novi-color-default-fg: oklch(94% 0.008 255);
+      --novi-color-overlay: oklch(8% 0.01 255 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 255);
+      --novi-color-primary: oklch(76% 0.075 255);
+      --novi-color-primary-fg: oklch(18% 0.02 255);
+      --novi-color-secondary: oklch(76% 0.075 78);
+      --novi-color-secondary-fg: oklch(18% 0.02 78);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='peacock'] {
+      --novi-color-bg: oklch(14% 0.012 200);
+      --novi-color-subtle: oklch(20% 0.014 200);
+      --novi-color-fg: oklch(94% 0.008 200);
+      --novi-color-muted: oklch(70% 0.012 200);
+      --novi-color-border: oklch(30% 0.015 200);
+      --novi-color-border-strong: oklch(55% 0.014 200);
+      --novi-color-default: oklch(20% 0.014 200);
+      --novi-color-default-fg: oklch(94% 0.008 200);
+      --novi-color-overlay: oklch(8% 0.01 200 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 200);
+      --novi-color-primary: oklch(76% 0.075 200);
+      --novi-color-primary-fg: oklch(18% 0.02 200);
+      --novi-color-secondary: oklch(76% 0.075 28);
+      --novi-color-secondary-fg: oklch(18% 0.02 28);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='sage'] {
+      --novi-color-bg: oklch(14% 0.012 148);
+      --novi-color-subtle: oklch(20% 0.014 148);
+      --novi-color-fg: oklch(94% 0.008 148);
+      --novi-color-muted: oklch(70% 0.012 148);
+      --novi-color-border: oklch(30% 0.015 148);
+      --novi-color-border-strong: oklch(55% 0.014 148);
+      --novi-color-default: oklch(20% 0.014 148);
+      --novi-color-default-fg: oklch(94% 0.008 148);
+      --novi-color-overlay: oklch(8% 0.01 148 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 148);
+      --novi-color-primary: oklch(76% 0.075 148);
+      --novi-color-primary-fg: oklch(18% 0.02 148);
+      --novi-color-secondary: oklch(76% 0.075 5);
+      --novi-color-secondary-fg: oklch(18% 0.02 5);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='saffron'] {
+      --novi-color-bg: oklch(14% 0.012 78);
+      --novi-color-subtle: oklch(20% 0.014 78);
+      --novi-color-fg: oklch(94% 0.008 78);
+      --novi-color-muted: oklch(70% 0.012 78);
+      --novi-color-border: oklch(30% 0.015 78);
+      --novi-color-border-strong: oklch(55% 0.014 78);
+      --novi-color-default: oklch(20% 0.014 78);
+      --novi-color-default-fg: oklch(94% 0.008 78);
+      --novi-color-overlay: oklch(8% 0.01 78 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 78);
+      --novi-color-primary: oklch(76% 0.075 78);
+      --novi-color-primary-fg: oklch(18% 0.02 78);
+      --novi-color-secondary: oklch(76% 0.075 255);
+      --novi-color-secondary-fg: oklch(18% 0.02 255);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='madder'] {
+      --novi-color-bg: oklch(14% 0.012 28);
+      --novi-color-subtle: oklch(20% 0.014 28);
+      --novi-color-fg: oklch(94% 0.008 28);
+      --novi-color-muted: oklch(70% 0.012 28);
+      --novi-color-border: oklch(30% 0.015 28);
+      --novi-color-border-strong: oklch(55% 0.014 28);
+      --novi-color-default: oklch(20% 0.014 28);
+      --novi-color-default-fg: oklch(94% 0.008 28);
+      --novi-color-overlay: oklch(8% 0.01 28 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 28);
+      --novi-color-primary: oklch(76% 0.075 28);
+      --novi-color-primary-fg: oklch(18% 0.02 28);
+      --novi-color-secondary: oklch(76% 0.075 200);
+      --novi-color-secondary-fg: oklch(18% 0.02 200);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='cochineal'] {
+      --novi-color-bg: oklch(14% 0.012 5);
+      --novi-color-subtle: oklch(20% 0.014 5);
+      --novi-color-fg: oklch(94% 0.008 5);
+      --novi-color-muted: oklch(70% 0.012 5);
+      --novi-color-border: oklch(30% 0.015 5);
+      --novi-color-border-strong: oklch(55% 0.014 5);
+      --novi-color-default: oklch(20% 0.014 5);
+      --novi-color-default-fg: oklch(94% 0.008 5);
+      --novi-color-overlay: oklch(8% 0.01 5 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 5);
+      --novi-color-primary: oklch(76% 0.075 5);
+      --novi-color-primary-fg: oklch(18% 0.02 5);
+      --novi-color-secondary: oklch(76% 0.075 148);
+      --novi-color-secondary-fg: oklch(18% 0.02 148);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='mauve'] {
+      --novi-color-bg: oklch(14% 0.012 315);
+      --novi-color-subtle: oklch(20% 0.014 315);
+      --novi-color-fg: oklch(94% 0.008 315);
+      --novi-color-muted: oklch(70% 0.012 315);
+      --novi-color-border: oklch(30% 0.015 315);
+      --novi-color-border-strong: oklch(55% 0.014 315);
+      --novi-color-default: oklch(20% 0.014 315);
+      --novi-color-default-fg: oklch(94% 0.008 315);
+      --novi-color-overlay: oklch(8% 0.01 315 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 315);
+      --novi-color-primary: oklch(76% 0.075 315);
+      --novi-color-primary-fg: oklch(18% 0.02 315);
+      --novi-color-secondary: oklch(76% 0.075 148);
+      --novi-color-secondary-fg: oklch(18% 0.02 148);
+    }
+
+    :root:not([data-novi-scheme='light'])[data-novi-color='greige'] {
+      --novi-color-bg: oklch(14% 0.012 80);
+      --novi-color-subtle: oklch(20% 0.014 80);
+      --novi-color-fg: oklch(94% 0.008 80);
+      --novi-color-muted: oklch(70% 0.012 80);
+      --novi-color-border: oklch(30% 0.015 80);
+      --novi-color-border-strong: oklch(55% 0.014 80);
+      --novi-color-default: oklch(20% 0.014 80);
+      --novi-color-default-fg: oklch(94% 0.008 80);
+      --novi-color-overlay: oklch(8% 0.01 80 / 0.6);
+      --novi-color-surface: oklch(24% 0.014 80);
+      --novi-color-primary: oklch(76% 0.018 80);
+      --novi-color-primary-fg: oklch(18% 0.02 80);
+      --novi-color-secondary: oklch(76% 0.075 255);
+      --novi-color-secondary-fg: oklch(18% 0.02 255);
+    }
+  }
+}