@nebutra/theme 0.1.1 → 0.2.1

package/themes.css

@@ -1,386 +1,5 @@
 /**
- * @nebutra/theme — themes.generated.css
- * AUTO-GENERATED from packages/design/design-tokens/tokens/themes/*.json — DO NOT EDIT.
- *
- * Multi-theme engine — CSS-only:
- *   :root                         neon (default theme)
- *   [data-theme="gradient"]       Marketing/Growth
- *   [data-theme="dark-dense"]     DevOps Dashboard
- *   [data-theme="minimal"]        Blog/Portfolio
- *   [data-theme="vibrant"]        Creative UI/UX
- *   [data-theme="ocean"]          Community
- *
- * Integration:
- *   1. Import this file in each app's globals.css AFTER @import "tailwindcss"
- *   2. Configure next-themes with attribute="data-theme" defaultTheme="neon"
+ * @deprecated Import `@nebutra/theme/keyframes.css` instead.
+ * themes.css is a compatibility alias (keyframes only — no color moods).
  */
-
-/* ─── neon theme ─── */
-/**
- * @nebutra/design-tokens — generated from W3C DTCG tokens.
- * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
- */
-
-@theme {
-  --color-primary: oklch(0.452 0.313 264.1);
-  --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.715 0.143 215.2);
-  --color-secondary-foreground: oklch(1 0 0);
-  --color-accent: oklch(0.714 0.203 264.1);
-  --color-accent-foreground: oklch(0.141 0.005 285.9);
-  --color-background: oklch(0.141 0.005 285.9);
-  --color-foreground: oklch(0.985 0 0);
-  --color-card: oklch(0.212 0.006 285.9);
-  --color-card-foreground: oklch(0.985 0 0);
-  --color-popover: oklch(0.212 0.006 285.9);
-  --color-popover-foreground: oklch(0.985 0 0);
-  --color-muted: oklch(0.274 0.006 286);
-  --color-muted-foreground: oklch(0.705 0.015 286);
-  --color-border: oklch(0.274 0.006 286);
-  --color-input: oklch(0.274 0.006 286);
-  --color-ring: oklch(0.452 0.313 264.1);
-  --color-destructive: oklch(0.577 0.245 27.3);
-  --color-destructive-foreground: oklch(1 0 0);
-  --color-success: oklch(0.723 0.219 149.6);
-  --color-success-foreground: oklch(1 0 0);
-  --color-warning: oklch(0.769 0.189 70.1);
-  --color-warning-foreground: oklch(0.141 0.005 285.9);
-  --color-info: oklch(0.623 0.214 259.1);
-  --color-info-foreground: oklch(1 0 0);
-  --color-primary-hover: color-mix(in oklch, oklch(0.452 0.313 264.1), white 15%);
-  --color-primary-active: color-mix(in oklch, oklch(0.452 0.313 264.1), black 10%);
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-full: 9999px;
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
-  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);
-  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-/* ─── gradient theme ─── */
-/**
- * @nebutra/design-tokens — generated from W3C DTCG tokens.
- * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
- */
-
-[data-theme="gradient"] {
-  --color-primary: oklch(0.546 0.245 262.9);
-  --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.707 0.165 254.6);
-  --color-secondary-foreground: oklch(1 0 0);
-  --color-accent: oklch(0.623 0.214 259.1);
-  --color-accent-foreground: oklch(1 0 0);
-  --color-background: oklch(1 0 0);
-  --color-foreground: oklch(0.141 0.005 285.9);
-  --color-card: oklch(0.985 0 0);
-  --color-card-foreground: oklch(0.141 0.005 285.9);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.141 0.005 285.9);
-  --color-muted: oklch(0.967 0.001 286);
-  --color-muted-foreground: oklch(0.552 0.016 286);
-  --color-border: oklch(0.922 0.004 286);
-  --color-input: oklch(0.922 0.004 286);
-  --color-ring: oklch(0.546 0.245 262.9);
-  --color-primary-hover: color-mix(in oklch, oklch(0.546 0.245 262.9), black 10%);
-  --color-primary-active: color-mix(in oklch, oklch(0.546 0.245 262.9), black 20%);
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-}
-/* ─── dark-dense theme ─── */
-/**
- * @nebutra/design-tokens — generated from W3C DTCG tokens.
- * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
- */
-
-[data-theme="dark-dense"] {
-  --color-primary: oklch(0.696 0.17 162.5);
-  --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.527 0.154 163.2);
-  --color-secondary-foreground: oklch(1 0 0);
-  --color-accent: oklch(0.765 0.163 163.4);
-  --color-accent-foreground: oklch(0.141 0.005 285.9);
-  --color-background: oklch(0.112 0 0);
-  --color-foreground: oklch(0.985 0 0);
-  --color-card: oklch(0.162 0.004 285.9);
-  --color-card-foreground: oklch(0.985 0 0);
-  --color-popover: oklch(0.162 0.004 285.9);
-  --color-popover-foreground: oklch(0.985 0 0);
-  --color-muted: oklch(0.215 0.006 285.9);
-  --color-muted-foreground: oklch(0.705 0.015 286);
-  --color-border: oklch(0.215 0.006 285.9);
-  --color-input: oklch(0.215 0.006 285.9);
-  --color-ring: oklch(0.696 0.17 162.5);
-  --color-primary-hover: color-mix(in oklch, oklch(0.696 0.17 162.5), white 15%);
-  --color-primary-active: color-mix(in oklch, oklch(0.696 0.17 162.5), black 10%);
-  --radius-sm: 0.125rem;
-  --radius-md: 0.25rem;
-  --radius-lg: 0.25rem;
-  --radius-xl: 0.375rem;
-  --font-sans: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
-  --font-heading: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
-}
-/* ─── minimal theme ─── */
-/**
- * @nebutra/design-tokens — generated from W3C DTCG tokens.
- * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
- */
-
-[data-theme="minimal"] {
-  --color-primary: oklch(0.21 0.006 285.9);
-  --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.442 0.017 285.9);
-  --color-secondary-foreground: oklch(1 0 0);
-  --color-accent: oklch(0.552 0.016 286);
-  --color-accent-foreground: oklch(1 0 0);
-  --color-background: oklch(0.985 0 0);
-  --color-foreground: oklch(0.141 0.005 285.9);
-  --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.141 0.005 285.9);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.141 0.005 285.9);
-  --color-muted: oklch(0.967 0.001 286);
-  --color-muted-foreground: oklch(0.552 0.016 286);
-  --color-border: oklch(0.922 0.004 286);
-  --color-input: oklch(0.922 0.004 286);
-  --color-ring: oklch(0.21 0.006 285.9);
-  --color-primary-hover: color-mix(in oklch, oklch(0.21 0.006 285.9), white 20%);
-  --color-primary-active: color-mix(in oklch, oklch(0.21 0.006 285.9), white 10%);
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Playfair Display", ui-serif, Georgia, serif;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.07);
-}
-/* ─── vibrant theme ─── */
-/**
- * @nebutra/design-tokens — generated from W3C DTCG tokens.
- * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
- */
-
-[data-theme="vibrant"] {
-  --color-primary: oklch(0.705 0.213 47.6);
-  --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.769 0.189 70.1);
-  --color-secondary-foreground: oklch(0.141 0.005 285.9);
-  --color-accent: oklch(0.645 0.246 16.4);
-  --color-accent-foreground: oklch(1 0 0);
-  --color-background: oklch(0.991 0.015 95.3);
-  --color-foreground: oklch(0.141 0.005 285.9);
-  --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.141 0.005 285.9);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.141 0.005 285.9);
-  --color-muted: oklch(0.967 0.012 90);
-  --color-muted-foreground: oklch(0.552 0.016 286);
-  --color-border: oklch(0.922 0.008 80);
-  --color-input: oklch(0.922 0.008 80);
-  --color-ring: oklch(0.705 0.213 47.6);
-  --color-primary-hover: color-mix(in oklch, oklch(0.705 0.213 47.6), black 10%);
-  --color-primary-active: color-mix(in oklch, oklch(0.705 0.213 47.6), black 20%);
-  --radius-sm: 0.75rem;
-  --radius-md: 1rem;
-  --radius-lg: 1.5rem;
-  --radius-xl: 9999px;
-  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
-  --shadow-sm: 0 1px 3px 0 rgb(249 115 22 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(249 115 22 / 0.15);
-  --shadow-lg: 0 10px 15px -3px rgb(249 115 22 / 0.15);
-  --shadow-xl: 0 20px 25px -5px rgb(249 115 22 / 0.15);
-}
-/* ─── ocean theme ─── */
-/**
- * @nebutra/design-tokens — generated from W3C DTCG tokens.
- * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
- */
-
-[data-theme="ocean"] {
-  --color-primary: oklch(0.609 0.126 199.8);
-  --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.715 0.143 215.2);
-  --color-secondary-foreground: oklch(1 0 0);
-  --color-accent: oklch(0.777 0.152 181.9);
-  --color-accent-foreground: oklch(0.141 0.005 285.9);
-  --color-background: oklch(0.982 0.018 180.7);
-  --color-foreground: oklch(0.141 0.005 285.9);
-  --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.141 0.005 285.9);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.141 0.005 285.9);
-  --color-muted: oklch(0.953 0.024 184);
-  --color-muted-foreground: oklch(0.442 0.017 285.9);
-  --color-border: oklch(0.905 0.032 185);
-  --color-input: oklch(0.905 0.032 185);
-  --color-ring: oklch(0.609 0.126 199.8);
-  --color-primary-hover: color-mix(in oklch, oklch(0.609 0.126 199.8), black 10%);
-  --color-primary-active: color-mix(in oklch, oklch(0.609 0.126 199.8), black 20%);
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --shadow-sm: 0 1px 2px 0 rgb(8 145 178 / 0.08);
-  --shadow-md: 0 4px 6px -1px rgb(8 145 178 / 0.12);
-  --shadow-lg: 0 10px 15px -3px rgb(8 145 178 / 0.12);
-  --shadow-xl: 0 20px 25px -5px rgb(8 145 178 / 0.12);
-}
-/* ─── Shared Keyframe Animations ─── */
-/*
- * These keyframes are shared across all apps that import this file.
- * App-specific keyframes (marquee, shimmer-slide, accordion, etc.) stay in each app's globals.css.
- */
-
-@theme inline {
-  /* Loader / status animations */
-  @keyframes typing {
-    0%,
-    100% {
-      transform: translateY(0);
-      opacity: 0.5;
-    }
-    50% {
-      transform: translateY(-2px);
-      opacity: 1;
-    }
-  }
-  @keyframes loading-dots {
-    0%,
-    100% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-  }
-  @keyframes wave {
-    0%,
-    100% {
-      transform: scaleY(1);
-    }
-    50% {
-      transform: scaleY(0.6);
-    }
-  }
-  @keyframes blink {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0;
-    }
-  }
-  @keyframes text-blink {
-    0%,
-    100% {
-      color: var(--color-primary);
-    }
-    50% {
-      color: var(--color-muted-foreground);
-    }
-  }
-  @keyframes bounce-dots {
-    0%,
-    100% {
-      transform: scale(0.8);
-      opacity: 0.5;
-    }
-    50% {
-      transform: scale(1.2);
-      opacity: 1;
-    }
-  }
-  @keyframes thin-pulse {
-    0%,
-    100% {
-      transform: scale(0.95);
-      opacity: 0.8;
-    }
-    50% {
-      transform: scale(1.05);
-      opacity: 0.4;
-    }
-  }
-  @keyframes pulse-dot {
-    0%,
-    100% {
-      transform: scale(1);
-      opacity: 0.8;
-    }
-    50% {
-      transform: scale(1.5);
-      opacity: 1;
-    }
-  }
-  @keyframes wave-bars {
-    0%,
-    100% {
-      transform: scaleY(1);
-      opacity: 0.5;
-    }
-    50% {
-      transform: scaleY(0.6);
-      opacity: 1;
-    }
-  }
-  @keyframes shimmer {
-    0% {
-      background-position: 200% 50%;
-    }
-    100% {
-      background-position: -200% 50%;
-    }
-  }
-  @keyframes spinner-fade {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  /* SnippetStatus copy animations */
-  @keyframes snippet-fade-in {
-    from {
-      opacity: 0;
-      transform: scale(0.5);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  @keyframes snippet-fade-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.5);
-    }
-  }
-  --animate-snippet-fade-in: snippet-fade-in 0.2s ease-out forwards;
-  --animate-snippet-fade-out: snippet-fade-out 0.2s ease-out forwards;
-}
+@import "./keyframes.css";

package/turbo.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["@nebutra/design-tokens#build", "@nebutra/tokens#build"],
+      "inputs": [
+        "$TURBO_EXTENDS$",
+        "scripts/sync-skins.mjs",
+        "scripts/sync-languages.mjs",
+        "src/languages.meta.json",
+        "../tokens/brands/**",
+        "../tokens/skins/**",
+        "../tokens/scripts/emit-skins.mjs",
+        "../tokens/scripts/emit-skins-run.ts"
+      ],
+      "outputs": [
+        "skins.css",
+        "keyframes.css",
+        "themes.css",
+        "src/languages.json",
+        "src/built-in-packages.generated.ts"
+      ]
+    }
+  }
+}

package/.turbo/turbo-test.log

@@ -1,14 +0,0 @@
-
-> @nebutra/theme@0.1.1 test /home/runner/work/Nebutra-Sailor/Nebutra-Sailor/packages/design/theme
-> vitest run
-
-
- RUN  v4.1.4 /home/runner/work/Nebutra-Sailor/Nebutra-Sailor/packages/design/theme
-
- ✓ src/__tests__/theme-registry.test.ts (4 tests) 44ms
-
- Test Files  1 passed (1)
-      Tests  4 passed (4)
-   Start at  08:14:47
-   Duration  1.07s (transform 268ms, setup 0ms, import 407ms, tests 44ms, environment 0ms)
-

package/src/registry.ts

@@ -1,56 +0,0 @@
-import registryJson from "./registry.json" with { type: "json" };
-
-export interface ThemeRegistryInstall {
-  command: string;
-  registryUrl: string;
-}
-
-export interface ThemeRegistryCompatibility {
-  tailwind: "4";
-  cssVariables: boolean;
-  figmaVariables: boolean;
-  shadcnRegistry: boolean;
-}
-
-export interface ThemeRegistryGovernance {
-  wcag: "AA" | "AAA";
-  requiredTokens: string[];
-  visualSuites: string[];
-}
-
-export interface ThemeRegistryEntry {
-  id: string;
-  name: string;
-  category: string;
-  mood: string;
-  tokenPath: string;
-  install: ThemeRegistryInstall;
-  compatibility: ThemeRegistryCompatibility;
-  governance: ThemeRegistryGovernance;
-}
-
-export interface ThemeRegistry {
-  $schema: string;
-  version: string;
-  defaultTheme: string;
-  themes: ThemeRegistryEntry[];
-}
-
-export const THEME_REGISTRY = registryJson as ThemeRegistry;
-export const THEME_IDS = THEME_REGISTRY.themes.map((theme) => theme.id);
-export const BUILT_IN_THEME_IDS = THEME_IDS;
-export const DEFAULT_THEME = THEME_REGISTRY.defaultTheme;
-
-export type ThemeId = string;
-
-export function isBuiltInThemeId(id: string): boolean {
-  return THEME_IDS.includes(id);
-}
-
-export function isThemeId(id: string): boolean {
-  return id === "custom" || isBuiltInThemeId(id);
-}
-
-export function getThemeById(id: string): ThemeRegistryEntry | undefined {
-  return THEME_REGISTRY.themes.find((theme) => theme.id === id);
-}