sparkdesign 0.4.5 → 0.4.7

package/registry/tokens/ontology.json

@@ -0,0 +1,404 @@
+{
+  "schemaVersion": "0.1.0",
+  "library": "sparkdesign",
+  "purpose": "Machine-readable design token ontology for AI agents choosing semantic styling without reading CSS internals first.",
+  "axes": {
+    "theme": {
+      "attribute": "data-theme",
+      "intent": "Controls color palette independently from layout density or geometry.",
+      "knownValues": [
+        "light",
+        "dark",
+        "light-parchment",
+        "dark-parchment"
+      ],
+      "rules": [
+        "Do not infer layout density from data-theme.",
+        "Custom themes should define --token-color-* values and rely on theme-base.css mappings.",
+        "Components should consume --color-* semantic tokens rather than raw --token-color-* internals."
+      ]
+    },
+    "style": {
+      "attribute": "data-style",
+      "intent": "Controls spacing, radius, and typography rhythm independently from color.",
+      "knownValues": [
+        "neutral",
+        "compact",
+        "soft",
+        "sharp",
+        "dense"
+      ],
+      "rules": [
+        "Use neutral when no product density preference is known.",
+        "Use compact for efficiency-oriented workspaces that need tighter controls without becoming spreadsheet-dense.",
+        "Use dense for data-heavy UI where text-sm, line-height, spacing, and radius all need compression.",
+        "Use soft for airy, approachable, reading-friendly surfaces with larger radius and more breathing room.",
+        "Use sharp when square geometry and mono-like precision are a deliberate product direction."
+      ]
+    }
+  },
+  "families": {
+    "color.primary": {
+      "tokens": [
+        "--color-primary",
+        "--color-primary-hover",
+        "--color-primary-active",
+        "--color-primary-bg",
+        "--color-primary-bg-hover",
+        "--color-primary-border",
+        "--color-primary-border-hover",
+        "--color-primary-text",
+        "--color-primary-text-hover",
+        "--color-primary-text-active",
+        "--color-text-on-primary"
+      ],
+      "intent": "Brand and primary action emphasis.",
+      "useFor": [
+        "Primary action buttons",
+        "Selected controls",
+        "Active navigation accents",
+        "Focused brand emphasis"
+      ],
+      "avoidFor": [
+        "Large page backgrounds",
+        "Destructive actions",
+        "Neutral metadata",
+        "Multiple competing actions in the same group"
+      ],
+      "agentRules": [
+        "Use only one primary action per decision surface.",
+        "Use --color-text-on-primary for text placed directly on --color-primary."
+      ]
+    },
+    "color.text": {
+      "tokens": [
+        "--color-text",
+        "--color-text-secondary",
+        "--color-text-tertiary",
+        "--color-text-quaternary",
+        "--color-text-base"
+      ],
+      "intent": "Readable hierarchy for foreground content.",
+      "useFor": [
+        "Body copy",
+        "Headings",
+        "Metadata",
+        "Disabled-looking low-emphasis support text"
+      ],
+      "avoidFor": [
+        "Status semantics that need success, warning, error, or info color",
+        "Decorative accents"
+      ],
+      "agentRules": [
+        "Use --color-text for primary readable content.",
+        "Use secondary and tertiary text only after hierarchy is established."
+      ]
+    },
+    "color.background": {
+      "tokens": [
+        "--color-bg-base",
+        "--color-bg-container",
+        "--color-bg-elevated",
+        "--color-bg-layout",
+        "--color-bg-spotlight",
+        "--color-bg-mask",
+        "--color-bg-highlight",
+        "--color-bg-highlight-hover"
+      ],
+      "intent": "Page, container, elevation, overlay, and spotlight surfaces.",
+      "useFor": [
+        "Application background",
+        "Cards and panels",
+        "Popover and modal surfaces",
+        "Overlay masks",
+        "Temporary highlight surfaces"
+      ],
+      "avoidFor": [
+        "Text foreground",
+        "Status messages without semantic color",
+        "Arbitrary decorative blocks"
+      ],
+      "agentRules": [
+        "Use --color-bg-layout for app-level backgrounds.",
+        "Use --color-bg-container or --color-bg-base for content surfaces.",
+        "Use --color-bg-mask only for modal, drawer, dialog, and popover overlays."
+      ]
+    },
+    "color.border": {
+      "tokens": [
+        "--color-border",
+        "--color-border-secondary",
+        "--color-border-tertiary",
+        "--color-input",
+        "--color-ring"
+      ],
+      "intent": "Separation, input affordance, and keyboard focus indication.",
+      "useFor": [
+        "Card and panel boundaries",
+        "Dividers",
+        "Input borders",
+        "Focus rings"
+      ],
+      "avoidFor": [
+        "Primary semantic emphasis",
+        "Replacing spacing as the only separator"
+      ],
+      "agentRules": [
+        "Use --color-ring for focus indication.",
+        "Prefer border-secondary or border-tertiary for low-emphasis separators."
+      ]
+    },
+    "color.fill": {
+      "tokens": [
+        "--color-fill",
+        "--color-fill-secondary",
+        "--color-fill-tertiary",
+        "--color-fill-quaternary",
+        "--color-fill-disable",
+        "--color-accent",
+        "--color-muted"
+      ],
+      "intent": "Subtle non-surface fills for controls, hover areas, muted chips, and disabled states.",
+      "useFor": [
+        "Hover backgrounds",
+        "Secondary controls",
+        "Muted chips",
+        "Disabled fill areas"
+      ],
+      "avoidFor": [
+        "Primary page background",
+        "High-risk status feedback",
+        "Readable foreground text"
+      ],
+      "agentRules": [
+        "Use fill tokens to support interaction affordance without adding new brand colors.",
+        "Use --color-fill-disable only when disabled semantics are explicit."
+      ]
+    },
+    "color.semantic": {
+      "tokens": [
+        "--color-link",
+        "--color-error",
+        "--color-error-hover",
+        "--color-error-bg",
+        "--color-error-bg-hover",
+        "--color-error-border",
+        "--color-info",
+        "--color-info-hover",
+        "--color-info-bg",
+        "--color-info-bg-hover",
+        "--color-info-border",
+        "--color-success",
+        "--color-success-hover",
+        "--color-success-bg",
+        "--color-success-bg-hover",
+        "--color-success-border",
+        "--color-warning",
+        "--color-warning-hover",
+        "--color-warning-bg",
+        "--color-warning-bg-hover",
+        "--color-warning-border"
+      ],
+      "intent": "Meaningful status communication.",
+      "useFor": [
+        "Validation errors",
+        "Warnings",
+        "Success confirmations",
+        "Informational callouts",
+        "Links"
+      ],
+      "avoidFor": [
+        "Pure decoration",
+        "Brand emphasis",
+        "Dense rainbow categorization without labels"
+      ],
+      "agentRules": [
+        "Do not rely on color alone; pair semantic color with text or icon labels.",
+        "Use background and border companions for Alert-like surfaces."
+      ]
+    },
+    "color.accent": {
+      "tokens": [
+        "--color-pink",
+        "--color-pink-bg",
+        "--color-pink-bg-hover",
+        "--color-purple",
+        "--color-purple-bg",
+        "--color-purple-bg-hover",
+        "--color-yellow",
+        "--color-yellow-bg",
+        "--color-yellow-bg-hover",
+        "--color-orange",
+        "--color-orange-bg",
+        "--color-orange-bg-hover",
+        "--color-teal",
+        "--color-teal-bg",
+        "--color-teal-bg-hover",
+        "--color-blue",
+        "--color-blue-bg",
+        "--color-blue-bg-hover",
+        "--color-mauve",
+        "--color-mauve-bg",
+        "--color-mauve-bg-hover",
+        "--color-slate",
+        "--color-slate-bg",
+        "--color-slate-bg-hover",
+        "--color-lavender",
+        "--color-lavender-bg",
+        "--color-lavender-bg-hover",
+        "--color-sage",
+        "--color-sage-bg",
+        "--color-sage-bg-hover"
+      ],
+      "intent": "Categorical accents for tags, files, generated artifacts, or non-status grouping.",
+      "useFor": [
+        "Category tags",
+        "File type accents",
+        "Non-critical visual grouping",
+        "Generated artifact previews"
+      ],
+      "avoidFor": [
+        "Primary actions",
+        "Error, warning, success, or info status",
+        "Long-form text"
+      ],
+      "agentRules": [
+        "Use accents sparingly and label categories explicitly.",
+        "Do not invent new accent colors in generated UI."
+      ]
+    },
+    "spacing": {
+      "tokens": [
+        "--spacing-0",
+        "--spacing-px",
+        "--spacing-0.5",
+        "--spacing-1",
+        "--spacing-1.5",
+        "--spacing-2",
+        "--spacing-2.5",
+        "--spacing-3",
+        "--spacing-3.5",
+        "--spacing-4",
+        "--spacing-5",
+        "--spacing-6",
+        "--spacing-8",
+        "--spacing-10",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-24"
+      ],
+      "intent": "Rhythm and density controlled by data-style.",
+      "useFor": [
+        "Component padding",
+        "Stack gaps",
+        "Grid gutters",
+        "Inline icon-label spacing"
+      ],
+      "avoidFor": [
+        "One-off pixel nudges",
+        "Encoding visual hierarchy only through whitespace",
+        "Breaking sibling rhythm without a reason"
+      ],
+      "agentRules": [
+        "Prefer existing Tailwind spacing utilities mapped to Spark tokens.",
+        "Use larger spacing for section rhythm and smaller spacing for control internals."
+      ]
+    },
+    "radius": {
+      "tokens": [
+        "--radius-none",
+        "--radius-sm",
+        "--radius-md",
+        "--radius-lg",
+        "--radius-xl",
+        "--radius-2xl",
+        "--radius-3xl",
+        "--radius-full"
+      ],
+      "intent": "Geometry and softness controlled by data-style.",
+      "useFor": [
+        "Buttons",
+        "Cards",
+        "Inputs",
+        "Pills",
+        "Panels"
+      ],
+      "avoidFor": [
+        "Mixing unrelated radii in a single component",
+        "Using full radius for large rectangular panels",
+        "Overriding sharp or dense styles with arbitrary rounded values"
+      ],
+      "agentRules": [
+        "Let data-style drive geometry unless a component has a documented exception.",
+        "Use --radius-full only for pills, avatars, and circular controls."
+      ]
+    },
+    "typography": {
+      "tokens": [
+        "--font-size-xs",
+        "--font-size-sm",
+        "--font-size-base",
+        "--font-size-lg",
+        "--font-size-xl",
+        "--font-size-2xl",
+        "--font-size-3xl",
+        "--font-size-4xl",
+        "--font-size-5xl",
+        "--font-size-6xl",
+        "--font-size-7xl",
+        "--font-size-8xl",
+        "--font-size-9xl"
+      ],
+      "intent": "Readable type hierarchy controlled by data-style.",
+      "useFor": [
+        "Body text",
+        "Labels",
+        "Section headings",
+        "Display headings"
+      ],
+      "avoidFor": [
+        "Decorative scale jumps without information hierarchy",
+        "Tiny text for required content",
+        "Long paragraphs above base size without layout reason"
+      ],
+      "agentRules": [
+        "Use base or sm for dense application text.",
+        "Use larger sizes to express hierarchy, not decoration."
+      ]
+    },
+    "motion": {
+      "tokens": [
+        "--motion-duration-fast",
+        "--motion-duration-base",
+        "--motion-duration-slow",
+        "--motion-ease-standard",
+        "--motion-ease-emphasized",
+        "--motion-ease-out"
+      ],
+      "intent": "Purposeful feedback and state transition timing.",
+      "useFor": [
+        "Hover and press feedback",
+        "Disclosure transitions",
+        "Modal and popover entry/exit",
+        "Streaming or generation state changes"
+      ],
+      "avoidFor": [
+        "Purely decorative delay",
+        "Animating large layout shifts without user benefit",
+        "Long-running loops that distract from task work"
+      ],
+      "agentRules": [
+        "Use fast durations for control feedback.",
+        "Use base or slow only for surface transitions that clarify spatial change."
+      ]
+    }
+  },
+  "forbiddenPatterns": [
+    "Hard-coded hex colors in component className or style props.",
+    "Raw rgba overlays when --color-bg-mask or a semantic token exists.",
+    "Arbitrary radius values that fight data-style.",
+    "One-off spacing values that break sibling rhythm.",
+    "Using accent colors to communicate status without labels."
+  ]
+}

package/cli/registry/tokens/themes/dark-qoder.css

@@ -1,132 +0,0 @@
-/* ============================================
- * Theme: Dark (暗色模式)
- * 复制此文件作为自定义主题模板
- * ============================================ */
-
-[data-theme="dark"] {
-  color-scheme: dark;
-  /* --- Primary --- */
-  --color-primary: #8EE5A1;
-  --color-primary-hover: #9BE6B3;
-  --color-primary-active: #73CD94;
-  --color-primary-bg: #14261C;
-  --color-primary-bg-hover: #1A2E21;
-  --color-primary-border: #335942;
-  --color-primary-border-hover: #407354;
-  --color-primary-text: #8EE5A1;
-  --color-primary-text-hover: #9BE6B3;
-  --color-primary-text-active: #73CD94;
-  --color-text-on-primary: #0D0D0D;
-
-  /* --- Text --- */
-  --color-text: #FAF9F5;
-  --color-text-secondary: #9C9D9E;
-  --color-text-tertiary: #7C7D7F;
-  --color-text-quaternary: #717374;
-  --color-text-base: #F0F2F3;
-
-  /* --- Border --- */
-  --color-border: #404040;
-  --color-border-secondary: #2A2A2A;
-  --color-border-tertiary: #262626;
-
-  /* --- Fill --- */
-  --color-fill: #454545;
-  --color-fill-secondary: #363636;
-  --color-fill-tertiary: #1A1A1A;
-  --color-fill-quaternary: #1A1A1A;
-  --color-fill-disable: #525252;
-
-  /* --- Background --- */
-  --color-bg-container: #0D0D0D;
-  --color-bg-elevated: #080808;
-  --color-bg-layout: #050505;
-  --color-bg-spotlight: #080808;
-  --color-bg-mask: rgba(0, 0, 0, 0.7);
-  --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
-  --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
-  --color-mask-shimmer-full: rgba(0, 0, 0, 1);
-  --color-bg-base: #000000;
-  --color-bg-highlight: #d0d0d0;
-  --color-bg-highlight-hover: #e0e0e0;
-
-  /* --- Semantic Colors --- */
-  --color-link: #8EE5A1;
-  --color-error: #FF4D4F;
-  --color-error-hover: #FF7875;
-  --color-error-bg: #4A1A1B;
-  --color-error-bg-hover: #5C2224;
-  --color-error-border: #663338;
-  --color-info: #0B83F1;
-  --color-info-hover: #5EBCFF;
-  --color-info-bg: #19080E;
-  --color-info-bg-hover: #220A12;
-  --color-info-border: #4F1C0E;
-  --color-success: #73CD94;
-  --color-success-hover: #8EE5A1;
-  --color-success-bg: #14261C;
-  --color-success-bg-hover: #1A2E21;
-  --color-success-border: #335942;
-  --color-warning: #FAAD14;
-  --color-warning-hover: #FFD666;
-  --color-warning-bg: #4A4019;
-  --color-warning-bg-hover: #5C4E1F;
-  --color-warning-border: #664D19;
-
-  /* --- Accent Colors --- */
-  --color-pink: #EC4899;
-  --color-pink-bg: #4A1C31;
-  --color-pink-bg-hover: #5C2440;
-  --color-purple: #615CED;
-  --color-purple-bg: #14160E;
-  --color-purple-bg-hover: #1C1E14;
-  --color-yellow: #FAC414;
-  --color-yellow-bg: #4A4030;
-  --color-yellow-bg-hover: #5C5040;
-  --color-orange: #FA8125;
-  --color-orange-bg: #4A1021;
-  --color-orange-bg-hover: #5C1429;
-  --color-teal: #14B8A6;
-  --color-teal-bg: #21080E;
-  --color-teal-bg-hover: #2E0E14;
-  --color-blue: #0090FF;
-  --color-blue-bg: #21120E;
-  --color-blue-bg-hover: #2E1A14;
-  --color-mauve: #8E8C99;
-  --color-mauve-bg: #0E0D0C;
-  --color-mauve-bg-hover: #1A1818;
-  --color-slate: #363636;
-  --color-slate-bg: #1a1a1a;
-  --color-slate-bg-hover: #262626;
-  --color-lavender: #B99DFF;
-  --color-lavender-bg: #131B0E;
-  --color-lavender-bg-hover: #1C2614;
-  --color-sage: #6BB394;
-  --color-sage-bg: #100C0D;
-  --color-sage-bg-hover: #1A1418;
-
-  /* --- Component aliases --- */
-  --color-input: var(--color-border-tertiary);
-  --color-ring: var(--color-primary-border);
-  --color-popover: var(--color-bg-container);
-  --color-popover-foreground: var(--color-text);
-  --color-accent: var(--color-fill-secondary);
-  --color-accent-foreground: var(--color-text);
-  --color-muted: var(--color-fill-tertiary);
-  --color-muted-foreground: var(--color-text-secondary);
-  --color-background: var(--color-bg-base);
-
-  /* --- Diff --- */
-  --color-diff-insert: #73CD94;
-  --color-diff-insert-bg: #14261C;
-  --color-diff-remove: #FC6B83;
-  --color-diff-remove-bg: #1C2E2A;
-}
-
-/* SendButton: dark 模式下 normal 状态使用 success 色 */
-[data-theme="dark"] .SendButton-send {
-  background-color: var(--color-success);
-}
-[data-theme="dark"] .SendButton-send:hover:not(:disabled) {
-  background-color: var(--color-success-hover);
-}

package/cli/registry/tokens/themes/light-qoder.css

@@ -1,131 +0,0 @@
-/* ============================================
- * Theme: Light (亮色模式)
- * 复制此文件作为自定义主题模板
- * ============================================ */
-
-:root,
-[data-theme="light"] {
-  color-scheme: light;
-  /* --- Primary --- */
-  --color-primary: #8EE5A1;
-  --color-primary-hover: #73CD94;
-  --color-primary-active: #5CB870;
-  --color-primary-bg: #F1FAF3;
-  --color-primary-bg-hover: #E6F7EC;
-  --color-primary-border: #CDEFD9;
-  --color-primary-border-hover: #B3E6C7;
-  --color-primary-text: #141414;
-  --color-primary-text-hover: #73CD94;
-  --color-primary-text-active: #5CB870;
-  --color-text-on-primary: #FDFDFD;
-
-  /* --- Text --- */
-  --color-text: #141414;
-  --color-text-secondary: #636261;
-  --color-text-tertiary: #838280;
-  --color-text-quaternary: #8E8C8B;
-  --color-text-base: #0F0D0C;
-
-  /* --- Border --- */
-  --color-border: #BCBBBA;
-  --color-border-secondary: #DDDDDD;
-  --color-border-tertiary: #E6E6E6;
-
-  /* --- Fill --- */
-  --color-fill: #DFDFDF;
-  --color-fill-secondary: #EFEFEF;
-  --color-fill-tertiary: #F9F9F9;
-  --color-fill-quaternary: #FCFCFC;
-  --color-fill-disable: #DAD9D8;
-
-  /* --- Background --- */
-  --color-bg-container: #FFFFFF;
-  --color-bg-elevated: #F9F9F9;
-  --color-bg-layout: #FDFDFD;
-  --color-bg-spotlight: #FAFAFA;
-  --color-bg-mask: rgba(0, 0, 0, 0.5);
-  --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
-  --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
-  --color-mask-shimmer-full: rgba(0, 0, 0, 1);
-  --color-bg-base: #FFFFFF;
-  --color-bg-highlight: #080807;
-  --color-bg-highlight-hover: #1a1a1a;
-
-  /* --- Shadow --- */
-  --color-shadow-primary: rgba(0, 0, 0, 0.02);
-  --color-shadow-secondary: rgba(0, 0, 0, 0.035);
-  --color-shadow-tertiary: rgba(0, 0, 0, 0.055);
-  --color-shadow-quaternary: rgba(0, 0, 0, 0.075);
-
-  /* --- Semantic Colors --- */
-  --color-link: #5CB870;
-  --color-error: #FF4D4F;
-  --color-error-hover: #FF7875;
-  --color-error-bg: #FFF2F0;
-  --color-error-bg-hover: #FFE4E0;
-  --color-error-border: #FFCCC7;
-  --color-info: #0B83F1;
-  --color-info-hover: #5EBCFF;
-  --color-info-bg: #E6F7FF;
-  --color-info-bg-hover: #D0EFFF;
-  --color-info-border: #B0E3FF;
-  --color-success: #73CD94;
-  --color-success-hover: #8EE5A1;
-  --color-success-bg: #F1FAF3;
-  --color-success-bg-hover: #E6F7EC;
-  --color-success-border: #CDEFD9;
-  --color-warning: #FAAD14;
-  --color-warning-hover: #FFD666;
-  --color-warning-bg: #FFFBE6;
-  --color-warning-bg-hover: #FFF3CF;
-  --color-warning-border: #FFE5BF;
-
-  /* --- Accent Colors --- */
-  --color-pink: #EC4899;
-  --color-pink-bg: #F9E3F3;
-  --color-pink-bg-hover: #F5D4EB;
-  --color-purple: #615CED;
-  --color-purple-bg: #EBE9FF;
-  --color-purple-bg-hover: #DDDAFF;
-  --color-yellow: #FAC414;
-  --color-yellow-bg: #FFF3CF;
-  --color-yellow-bg-hover: #FFE9A8;
-  --color-orange: #FA8125;
-  --color-orange-bg: #FFEFDE;
-  --color-orange-bg-hover: #FFE3C7;
-  --color-teal: #14B8A6;
-  --color-teal-bg: #DEF7F1;
-  --color-teal-bg-hover: #CAF0E8;
-  --color-blue: #0090FF;
-  --color-blue-bg: #DEEDFF;
-  --color-blue-bg-hover: #C8E3FF;
-  --color-mauve: #8E8C99;
-  --color-mauve-bg: #F1F2F3;
-  --color-mauve-bg-hover: #E4E5E7;
-  --color-slate: #404040;
-  --color-slate-bg: #FAFAFA;
-  --color-slate-bg-hover: #EFEFEF;
-  --color-lavender: #B99DFF;
-  --color-lavender-bg: #ECE4FF;
-  --color-lavender-bg-hover: #E0D4FF;
-  --color-sage: #6BB394;
-  --color-sage-bg: #EFF3F2;
-  --color-sage-bg-hover: #E2EAE8;
-
-  /* --- Component aliases --- */
-  --color-input: var(--color-border-tertiary);
-  --color-ring: var(--color-primary-border);
-  --color-popover: var(--color-bg-container);
-  --color-popover-foreground: var(--color-text);
-  --color-accent: var(--color-fill-secondary);
-  --color-accent-foreground: var(--color-text);
-  --color-muted: var(--color-fill-tertiary);
-  --color-muted-foreground: var(--color-text-secondary);
-  --color-background: var(--color-bg-base);
-
-  /* --- Diff --- */
-  --color-diff-insert: #A6DCBA;
-  --color-diff-insert-bg: #D9EBE0;
-  --color-diff-remove: #FC6B83;
-  --color-diff-remove-bg: #E3D1D5;
-}