sparkdesign 0.3.0 → 0.3.2

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

@@ -0,0 +1,132 @@
+/* ============================================
+ * Theme: Dark Parchment (羊皮纸暗色)
+ * 复制此文件作为自定义主题模板
+ * ============================================ */
+
+[data-theme="dark-parchment"] {
+  color-scheme: dark;
+  /* --- Primary --- */
+  --color-primary: #C4B8A8;
+  --color-primary-hover: #D4C9BC;
+  --color-primary-active: #A89888;
+  --color-primary-bg: #2D2A22;
+  --color-primary-bg-hover: #363228;
+  --color-primary-border: #4A463C;
+  --color-primary-border-hover: #5B564C;
+  --color-primary-text: #FAF9F6;
+  --color-primary-text-hover: #D4C9BC;
+  --color-primary-text-active: #C4B8A8;
+  --color-text-on-primary: #1A1814;
+
+  /* --- Text --- */
+  --color-text: #FAF9F6;
+  --color-text-secondary: #C9C4B8;
+  --color-text-tertiary: #A8A296;
+  --color-text-quaternary: #8A857A;
+  --color-text-base: #F0EDE7;
+
+  /* --- Border --- */
+  --color-border: #4A463C;
+  --color-border-secondary: #3D3930;
+  --color-border-tertiary: #2D2A22;
+
+  /* --- Fill --- */
+  --color-fill: #3D3930;
+  --color-fill-secondary: #363228;
+  --color-fill-tertiary: #252220;
+  --color-fill-quaternary: #1E1C18;
+  --color-fill-disable: #4A463C;
+
+  /* --- Background --- */
+  --color-bg-container: #1E1C18;
+  --color-bg-elevated: #252220;
+  --color-bg-layout: #1A1814;
+  --color-bg-spotlight: #252220;
+  --color-bg-mask: rgba(0, 0, 0, 0.6);
+  --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: #1A1814;
+  --color-bg-highlight: #C9C4B8;
+  --color-bg-highlight-hover: #D4C9BC;
+
+  /* --- Semantic Colors --- */
+  --color-link: #C4B8A8;
+  --color-error: #FF6B6B;
+  --color-error-hover: #FF8787;
+  --color-error-bg: #4A2A2A;
+  --color-error-bg-hover: #5C3535;
+  --color-error-border: #663338;
+  --color-info: #5EBCFF;
+  --color-info-hover: #7EC9FF;
+  --color-info-bg: #1A2838;
+  --color-info-bg-hover: #223244;
+  --color-info-border: #2A4050;
+  --color-success: #6B8F71;
+  --color-success-hover: #7FA385;
+  --color-success-bg: #1C2A1E;
+  --color-success-bg-hover: #243224;
+  --color-success-border: #3D4A3C;
+  --color-warning: #E5A814;
+  --color-warning-hover: #F5C024;
+  --color-warning-bg: #4A4019;
+  --color-warning-bg-hover: #5C4E1F;
+  --color-warning-border: #664D19;
+
+  /* --- Accent Colors --- */
+  --color-pink: #EC4899;
+  --color-pink-bg: #4A2A38;
+  --color-pink-bg-hover: #5C3540;
+  --color-purple: #8B7BED;
+  --color-purple-bg: #2A2238;
+  --color-purple-bg-hover: #362E44;
+  --color-yellow: #E5C04A;
+  --color-yellow-bg: #4A4030;
+  --color-yellow-bg-hover: #5C5040;
+  --color-orange: #E07830;
+  --color-orange-bg: #4A3020;
+  --color-orange-bg-hover: #5C3A28;
+  --color-teal: #14B8A6;
+  --color-teal-bg: #1A3230;
+  --color-teal-bg-hover: #243A38;
+  --color-blue: #0090FF;
+  --color-blue-bg: #1A2838;
+  --color-blue-bg-hover: #223244;
+  --color-mauve: #9C9AA8;
+  --color-mauve-bg: #2A2830;
+  --color-mauve-bg-hover: #363438;
+  --color-slate: #5C5A52;
+  --color-slate-bg: #2D2A22;
+  --color-slate-bg-hover: #363228;
+  --color-lavender: #B99DFF;
+  --color-lavender-bg: #2A2238;
+  --color-lavender-bg-hover: #362E44;
+  --color-sage: #6BB394;
+  --color-sage-bg: #1C2A24;
+  --color-sage-bg-hover: #243228;
+
+  /* --- 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: #6B8F71;
+  --color-diff-insert-bg: #1C2A1E;
+  --color-diff-remove: #FC6B83;
+  --color-diff-remove-bg: #2A1C1E;
+}
+
+/* SendButton: dark-parchment 模式下 normal 状态使用 success 色 */
+[data-theme="dark-parchment"] .SendButton-send {
+  background-color: var(--color-success);
+}
+[data-theme="dark-parchment"] .SendButton-send:hover:not(:disabled) {
+  background-color: var(--color-success-hover);
+}

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

@@ -0,0 +1,132 @@
+/* ============================================
+ * 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-parchment.css

@@ -0,0 +1,123 @@
+/* ============================================
+ * Theme: Light Parchment (羊皮纸亮色)
+ * 复制此文件作为自定义主题模板
+ * ============================================ */
+
+[data-theme="light-parchment"] {
+  /* --- Primary --- */
+  --color-primary: #202116;
+  --color-primary-hover: #3D3930;
+  --color-primary-active: #3D3930;
+  --color-primary-bg: #F0EDE7;
+  --color-primary-bg-hover: #E8E4DC;
+  --color-primary-border: #D4CFC6;
+  --color-primary-border-hover: #C4BEB4;
+  --color-primary-text: #202116;
+  --color-primary-text-hover: #3D3930;
+  --color-primary-text-active: #3D3930;
+  --color-text-on-primary: #FAF9F6;
+
+  /* --- Text --- */
+  --color-text: #202116;
+  --color-text-secondary: #4A463C;
+  --color-text-tertiary: #6B665C;
+  --color-text-quaternary: #8A857A;
+  --color-text-base: #202116;
+
+  /* --- Border --- */
+  --color-border: #D4CFC6;
+  --color-border-secondary: #E5E1D9;
+  --color-border-tertiary: #EDE9E2;
+
+  /* --- Fill --- */
+  --color-fill: #F5F0E7;
+  --color-fill-secondary: #EDE8E0;
+  --color-fill-tertiary: #F7F4EF;
+  --color-fill-quaternary: #FAF9F6;
+  --color-fill-disable: #E0DCD4;
+
+  /* --- Background --- */
+  --color-bg-container: #FAF9F6;
+  --color-bg-elevated: #F7F4EF;
+  --color-bg-layout: #FDFCFA;
+  --color-bg-spotlight: #FAF9F6;
+  --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: #202116;
+  --color-bg-highlight-hover: #2D2A22;
+
+  /* --- Semantic Colors --- */
+  --color-link: #5B4A3A;
+  --color-error: #FF4D4F;
+  --color-error-hover: #FF7875;
+  --color-error-bg: #FFF2F0;
+  --color-error-bg-hover: #FFF1F0;
+  --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: #5A7A5E;
+  --color-success-hover: #6B8F71;
+  --color-success-bg: #EEF2ED;
+  --color-success-bg-hover: #E4EBE2;
+  --color-success-border: #C5D4C4;
+  --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: #1E293B;
+  --color-slate-bg: #E2E8F0;
+  --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;
+}

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

@@ -0,0 +1,131 @@
+/* ============================================
+ * 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;
+}