kaze-design-system 0.1.0 → 0.2.0

package/components.css

@@ -3719,6 +3719,51 @@
   margin: var(--space-1) 0;
 }
 
+/* ── FilterPill ──────────────────────────────────────────── */
+.filter-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+  color: var(--color-fg-secondary);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  transition: background-color var(--duration-normal) var(--ease-default),
+              border-color var(--duration-normal) var(--ease-default),
+              color var(--duration-normal) var(--ease-default);
+}
+
+.filter-pill:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.filter-pill:focus-visible {
+  outline: var(--ring-width) solid var(--ring-color);
+  outline-offset: var(--ring-offset);
+}
+
+.filter-pill--active {
+  border-color: var(--filter-pill-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--filter-pill-color, var(--color-primary)) 8%, transparent);
+  color: var(--filter-pill-color, var(--color-fg));
+}
+
+.filter-pill__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--filter-pill-color, currentColor);
+  flex-shrink: 0;
+}
+
 /* ── Command Palette (additions) ────────────────────────── */
 
 .command-palette__group {

package/dist/components/FilterPill/FilterPill.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const FilterPill = forwardRef(
+  ({ active, color, dot, className, style, children, ...rest }, ref) => {
+    const pillStyle = color ? { ...style, "--filter-pill-color": color } : style;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "filter-pill",
+          active && "filter-pill--active",
+          className
+        ),
+        style: pillStyle,
+        "aria-pressed": active,
+        ...rest,
+        children: [
+          dot && /* @__PURE__ */ jsx("span", { className: "filter-pill__dot", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+FilterPill.displayName = "FilterPill";
+export {
+  FilterPill
+};

package/dist/hooks/useTheme.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useMemo, useContext, createContext } from "react";
 const STORAGE_KEY = "kaze-theme";
+const PALETTE_STORAGE_KEY = "kaze-palette";
 const ThemeContext = createContext(void 0);
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
@@ -19,11 +20,26 @@ function resolveTheme(theme) {
   if (theme === "system") return getSystemTheme();
   return theme;
 }
+function getStoredPalette() {
+  if (typeof window === "undefined") return "warm";
+  const stored = localStorage.getItem(PALETTE_STORAGE_KEY);
+  if (stored === "warm" || stored === "cool") return stored;
+  return "warm";
+}
+function applyPalette(palette) {
+  if (typeof document === "undefined") return;
+  if (palette === "cool") {
+    document.documentElement.setAttribute("data-palette", "cool");
+  } else {
+    document.documentElement.removeAttribute("data-palette");
+  }
+}
 function ThemeProvider({
   children,
   defaultTheme
 }) {
   const [theme, setThemeState] = useState(defaultTheme ?? "light");
+  const [palette, setPaletteState] = useState("warm");
   const [resolvedTheme, setResolvedTheme] = useState(
     defaultTheme === "dark" ? "dark" : "light"
   );
@@ -46,12 +62,22 @@ function ThemeProvider({
   const toggleTheme = useCallback(() => {
     setTheme(resolvedTheme === "light" ? "dark" : "light");
   }, [resolvedTheme, setTheme]);
+  const setPalette = useCallback((newPalette) => {
+    setPaletteState(newPalette);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(PALETTE_STORAGE_KEY, newPalette);
+    }
+    applyPalette(newPalette);
+  }, []);
   useEffect(() => {
     const stored = getStoredTheme();
     if (stored !== (defaultTheme ?? "light")) {
       setThemeState(stored);
     }
     applyTheme(resolveTheme(stored));
+    const storedPalette = getStoredPalette();
+    setPaletteState(storedPalette);
+    applyPalette(storedPalette);
   }, []);
   useEffect(() => {
     applyTheme(resolveTheme(theme));
@@ -66,8 +92,8 @@ function ThemeProvider({
     return () => mql.removeEventListener("change", handler);
   }, [theme, applyTheme]);
   const value = useMemo(
-    () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
-    [theme, resolvedTheme, setTheme, toggleTheme]
+    () => ({ theme, resolvedTheme, setTheme, toggleTheme, palette, setPalette }),
+    [theme, resolvedTheme, setTheme, toggleTheme, palette, setPalette]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }

package/dist/index.js

@@ -21,6 +21,7 @@ import { EmptyState } from "./components/EmptyState/EmptyState.js";
 import { FAB } from "./components/FAB/FAB.js";
 import { FAQ, FAQItem } from "./components/FAQ/FAQ.js";
 import { FeatureCard, FeatureGrid } from "./components/FeatureGrid/FeatureGrid.js";
+import { FilterPill } from "./components/FilterPill/FilterPill.js";
 import { FormField } from "./components/FormField/FormField.js";
 import { Grid } from "./components/Grid/Grid.js";
 import { Heading } from "./components/Heading/Heading.js";
@@ -97,6 +98,7 @@ export {
   FAQItem,
   FeatureCard,
   FeatureGrid,
+  FilterPill,
   FormField,
   Grid,
   Heading,

package/dist/lib/chartColors.js

@@ -4,7 +4,13 @@ const CHART_COLORS = [
   "var(--chart-purple)",
   "var(--chart-amber)",
   "var(--chart-red)",
-  "var(--chart-cyan)"
+  "var(--chart-cyan)",
+  "var(--chart-lime)",
+  "var(--chart-pink)",
+  "var(--chart-orange)",
+  "var(--chart-teal)",
+  "var(--chart-yellow)",
+  "var(--chart-green)"
 ];
 export {
   CHART_COLORS

package/dist/tokens.js

@@ -28,7 +28,13 @@ const color = {
   warningFg: "var(--color-warning-fg)",
   info: "var(--color-info)",
   infoLight: "var(--color-info-light)",
-  infoFg: "var(--color-info-fg)"
+  infoFg: "var(--color-info-fg)",
+  accentA: "var(--color-accent-a)",
+  accentALight: "var(--color-accent-a-light)",
+  accentAFg: "var(--color-accent-a-fg)",
+  accentB: "var(--color-accent-b)",
+  accentBLight: "var(--color-accent-b-light)",
+  accentBFg: "var(--color-accent-b-fg)"
 };
 const chart = {
   emerald: "var(--chart-emerald)",
@@ -36,7 +42,13 @@ const chart = {
   purple: "var(--chart-purple)",
   amber: "var(--chart-amber)",
   red: "var(--chart-red)",
-  cyan: "var(--chart-cyan)"
+  cyan: "var(--chart-cyan)",
+  lime: "var(--chart-lime)",
+  pink: "var(--chart-pink)",
+  orange: "var(--chart-orange)",
+  teal: "var(--chart-teal)",
+  yellow: "var(--chart-yellow)",
+  green: "var(--chart-green)"
 };
 const space = {
   0: "var(--space-0)",
@@ -58,6 +70,7 @@ const space = {
   24: "var(--space-24)"
 };
 const radius = {
+  sharp: "var(--radius-sharp)",
   sm: "var(--radius-sm)",
   md: "var(--radius-md)",
   lg: "var(--radius-lg)",

package/dist/types/components/FilterPill/FilterPill.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonHTMLAttributes } from "react";
+export interface FilterPillProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether the pill is in an active/selected state */
+    active?: boolean;
+    /** Dynamic accent color (CSS color value). Applied via --filter-pill-color custom property */
+    color?: string;
+    /** Show a colored dot indicator before the label */
+    dot?: boolean;
+}
+export declare const FilterPill: import("react").ForwardRefExoticComponent<FilterPillProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FilterPill/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterPill } from "./FilterPill";
+export type { FilterPillProps } from "./FilterPill";

package/dist/types/components/index.d.ts

@@ -6,6 +6,8 @@ export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } f
 export type { CardProps, CardVariant, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardBodyProps, CardFooterProps, } from "./Card";
 export { Badge } from "./Badge";
 export type { BadgeProps, BadgeVariant } from "./Badge";
+export { FilterPill } from "./FilterPill";
+export type { FilterPillProps } from "./FilterPill";
 export { Input } from "./Input";
 export type { InputProps } from "./Input";
 export { Select } from "./Select";

package/dist/types/hooks/useTheme.d.ts

@@ -1,10 +1,13 @@
 import { type ReactNode } from "react";
 export type Theme = "light" | "dark" | "system";
+export type Palette = "warm" | "cool";
 export interface ThemeContextValue {
     theme: Theme;
     resolvedTheme: "light" | "dark";
     setTheme: (theme: Theme) => void;
     toggleTheme: () => void;
+    palette: Palette;
+    setPalette: (palette: Palette) => void;
 }
 export interface ThemeProviderProps {
     children: ReactNode;

package/dist/types/lib/chartColors.d.ts

@@ -1,2 +1,2 @@
 /** Shared chart color palette using CSS custom properties */
-export declare const CHART_COLORS: readonly ["var(--chart-emerald)", "var(--chart-blue)", "var(--chart-purple)", "var(--chart-amber)", "var(--chart-red)", "var(--chart-cyan)"];
+export declare const CHART_COLORS: readonly ["var(--chart-emerald)", "var(--chart-blue)", "var(--chart-purple)", "var(--chart-amber)", "var(--chart-red)", "var(--chart-cyan)", "var(--chart-lime)", "var(--chart-pink)", "var(--chart-orange)", "var(--chart-teal)", "var(--chart-yellow)", "var(--chart-green)"];

package/dist/types/tokens/tokens.d.ts

@@ -33,6 +33,12 @@ export declare const color: {
     readonly info: "var(--color-info)";
     readonly infoLight: "var(--color-info-light)";
     readonly infoFg: "var(--color-info-fg)";
+    readonly accentA: "var(--color-accent-a)";
+    readonly accentALight: "var(--color-accent-a-light)";
+    readonly accentAFg: "var(--color-accent-a-fg)";
+    readonly accentB: "var(--color-accent-b)";
+    readonly accentBLight: "var(--color-accent-b-light)";
+    readonly accentBFg: "var(--color-accent-b-fg)";
 };
 export declare const chart: {
     readonly emerald: "var(--chart-emerald)";
@@ -41,6 +47,12 @@ export declare const chart: {
     readonly amber: "var(--chart-amber)";
     readonly red: "var(--chart-red)";
     readonly cyan: "var(--chart-cyan)";
+    readonly lime: "var(--chart-lime)";
+    readonly pink: "var(--chart-pink)";
+    readonly orange: "var(--chart-orange)";
+    readonly teal: "var(--chart-teal)";
+    readonly yellow: "var(--chart-yellow)";
+    readonly green: "var(--chart-green)";
 };
 export declare const space: {
     readonly 0: "var(--space-0)";
@@ -62,6 +74,7 @@ export declare const space: {
     readonly 24: "var(--space-24)";
 };
 export declare const radius: {
+    readonly sharp: "var(--radius-sharp)";
     readonly sm: "var(--radius-sm)";
     readonly md: "var(--radius-md)";
     readonly lg: "var(--radius-lg)";
@@ -70,3 +83,4 @@ export declare const radius: {
     readonly full: "var(--radius-full)";
 };
 export type Theme = "light" | "dark";
+export type Palette = "warm" | "cool";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "license": "MIT",

package/tokens.css

@@ -18,6 +18,19 @@
   --zinc-900: #1c1917;
   --zinc-950: #0c0a09;
 
+  /* ── Color: Cool Slate Scale (purple-tinted) ─────────── */
+  --slate-50:  #f8f8fa;
+  --slate-100: #f0eff4;
+  --slate-200: #e0dfe8;
+  --slate-300: #cccad8;
+  --slate-400: #6b6880;
+  --slate-500: #56536b;
+  --slate-600: #423f57;
+  --slate-700: #302e40;
+  --slate-800: #211f2c;
+  --slate-900: #16141f;
+  --slate-950: #0f0e16;
+
   /* ── Color: Palette (12 hues × 10 shades) ─────────────── */
 
   --red-50:  #fef2f2;  --red-100: #fee2e2;  --red-200: #fecaca;
@@ -80,6 +93,14 @@
   --pink-600: #db2777;  --pink-700: #be185d;  --pink-800: #9d174d;
   --pink-900: #831843;
 
+  /* ── Color: Accent (dual-accent for category tagging) ── */
+  --color-accent-a:     var(--blue-500);
+  --color-accent-a-light: var(--blue-50);
+  --color-accent-a-fg:  var(--blue-600);
+  --color-accent-b:     var(--red-500);
+  --color-accent-b-light: var(--red-50);
+  --color-accent-b-fg:  var(--red-600);
+
   /* ── Color: Semantic ───────────────────────────────────── */
   --color-bg:            #ffffff;
   --color-bg-secondary:  var(--zinc-50);
@@ -153,6 +174,20 @@
   --chart-yellow:   var(--yellow-500);
   --chart-green:    var(--green-500);
 
+  /* Numbered aliases for programmatic access */
+  --chart-1:  var(--chart-blue);
+  --chart-2:  var(--chart-emerald);
+  --chart-3:  var(--chart-amber);
+  --chart-4:  var(--chart-pink);
+  --chart-5:  var(--chart-cyan);
+  --chart-6:  var(--chart-red);
+  --chart-7:  var(--chart-lime);
+  --chart-8:  var(--chart-purple);
+  --chart-9:  var(--chart-orange);
+  --chart-10: var(--chart-teal);
+  --chart-11: var(--chart-yellow);
+  --chart-12: var(--chart-green);
+
   /* ── Typography ────────────────────────────────────────── */
   --font-sans: var(--font-montserrat, "Montserrat"), var(--font-noto-sans-jp, "Noto Sans JP"), -apple-system, BlinkMacSystemFont,
     "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
@@ -211,6 +246,7 @@
 
   /* ── Border Radius ─────────────────────────────────────── */
   --radius-none: 0;
+  --radius-sharp: 0px;      /* deliberate zero radius — typographic / tool UI */
   --radius-sm:   0.375rem;  /* 6px */
   --radius-md:   0.5rem;    /* 8px */
   --radius-lg:   0.625rem;  /* 10px — default card */
@@ -218,10 +254,11 @@
   --radius-2xl:  1rem;      /* 16px */
   --radius-full: 9999px;
 
-  /* 3-tier semantic radius (inspired by DaisyUI) */
-  --radius-box:      var(--radius-lg);   /* Card, Modal, Panel */
-  --radius-field:    var(--radius-md);   /* Input, Button, Select */
-  --radius-selector: var(--radius-sm);   /* Checkbox, Toggle, Badge */
+  /* 4-tier semantic radius (inspired by DaisyUI) */
+  --radius-box:      var(--radius-lg);     /* Card, Modal, Panel */
+  --radius-field:    var(--radius-md);     /* Input, Button, Select */
+  --radius-selector: var(--radius-sm);     /* Checkbox, Toggle, Badge */
+  /* --radius-sharp: available for deliberate zero-radius design decisions */
 
   /* ── Shadows — Minimal ─────────────────────────────────── */
   --shadow-none: none;
@@ -322,6 +359,13 @@
   --color-info-fg:        var(--blue-400);      /* Brighter blue for dark bg readability */
   --color-info-strong:    var(--blue-500);
 
+  --color-accent-a:     var(--blue-400);
+  --color-accent-a-light: rgba(59, 130, 246, 0.1);
+  --color-accent-a-fg:  var(--blue-400);
+  --color-accent-b:     var(--red-400);
+  --color-accent-b-light: rgba(239, 68, 68, 0.1);
+  --color-accent-b-fg:  var(--red-400);
+
   --color-overlay:        rgba(0, 0, 0, 0.7);
 
   --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
@@ -333,6 +377,72 @@
   --ring-color:  rgba(168, 162, 158, 0.3);
 }
 
+/* ── Cool Palette (slate-based, purple-tinted) ────────────── */
+/* Switch from warm zinc to cool slate via data-palette="cool".
+   Composable with data-theme: works for both light and dark. */
+[data-palette="cool"] {
+  --color-bg:            #ffffff;
+  --color-bg-secondary:  var(--slate-50);
+  --color-bg-tertiary:   var(--slate-100);
+  --color-bg-inverse:    var(--slate-950);
+
+  --color-fg:            var(--slate-950);
+  --color-fg-secondary:  var(--slate-500);
+  --color-fg-tertiary:   var(--slate-400);
+  --color-fg-inverse:    #ffffff;
+  --color-fg-muted:      var(--slate-600);
+
+  --color-border:        var(--slate-200);
+  --color-border-strong: var(--slate-300);
+  --color-border-subtle: var(--slate-100);
+
+  --color-surface:       #ffffff;
+  --color-surface-hover: var(--slate-50);
+  --color-surface-active: var(--slate-100);
+
+  --color-primary:       var(--slate-950);
+  --color-primary-fg:    #ffffff;
+  --color-primary-hover: var(--slate-800);
+
+  --color-secondary:     var(--slate-100);
+  --color-secondary-fg:  var(--slate-900);
+  --color-secondary-hover: var(--slate-200);
+
+  --ring-color:  rgba(107, 104, 128, 0.3);
+}
+
+/* Cool palette × Dark theme */
+[data-palette="cool"][data-theme="dark"] {
+  --color-bg:            var(--slate-950);
+  --color-bg-secondary:  var(--slate-900);
+  --color-bg-tertiary:   var(--slate-800);
+  --color-bg-inverse:    #ffffff;
+
+  --color-fg:            var(--slate-50);
+  --color-fg-secondary:  var(--slate-400);
+  --color-fg-tertiary:   var(--slate-400);
+  --color-fg-inverse:    var(--slate-950);
+  --color-fg-muted:      var(--slate-400);
+
+  --color-border:        var(--slate-800);
+  --color-border-strong: var(--slate-700);
+  --color-border-subtle: var(--slate-900);
+
+  --color-surface:       var(--slate-900);
+  --color-surface-hover: var(--slate-800);
+  --color-surface-active: var(--slate-700);
+
+  --color-primary:       #ffffff;
+  --color-primary-fg:    var(--slate-950);
+  --color-primary-hover: var(--slate-200);
+
+  --color-secondary:     var(--slate-800);
+  --color-secondary-fg:  var(--slate-100);
+  --color-secondary-hover: var(--slate-700);
+
+  --ring-color:  rgba(204, 202, 216, 0.3);
+}
+
 /* ── Dark Theme Fallback (JS-disabled) ────────────────────── */
 /* When JS is unavailable, respect OS dark mode preference.
    If JS sets data-theme="light", this will NOT apply (thanks to :not()).
@@ -387,6 +497,13 @@
     --color-info-fg:        var(--blue-400);
     --color-info-strong:    var(--blue-500);
 
+    --color-accent-a:     var(--blue-400);
+    --color-accent-a-light: rgba(59, 130, 246, 0.1);
+    --color-accent-a-fg:  var(--blue-400);
+    --color-accent-b:     var(--red-400);
+    --color-accent-b-light: rgba(239, 68, 68, 0.1);
+    --color-accent-b-fg:  var(--red-400);
+
     --color-overlay:        rgba(0, 0, 0, 0.7);
 
     --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);

package/utilities.css

@@ -164,6 +164,36 @@
 .tabular-nums { font-variant-numeric: tabular-nums; }
 .font-mono    { font-family: var(--font-mono); }
 
+/* ── Grid Presets ────────────────────────────────────────── */
+.grid--2-col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+.grid--3-col {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+.grid--auto {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--space-4);
+}
+
+@media (max-width: 767px) {
+  .grid--2-col,
+  .grid--3-col {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Text Helpers ────────────────────────────────────────── */
+.text--secondary {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-secondary);
+}
+
 /* ── Background Colors ───────────────────────────────────── */
 .bg-primary     { background-color: var(--color-bg); }
 .bg-secondary   { background-color: var(--color-bg-secondary); }