zabi-components 5.0.22 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/README.md +139 -1478
  2. package/THEME.md +473 -0
  3. package/THEMING.md +248 -0
  4. package/dist/atoms/ActionPanel.svelte +116 -0
  5. package/dist/atoms/ActionPanel.svelte.d.ts +19 -0
  6. package/dist/atoms/Badge.svelte +1 -1
  7. package/dist/atoms/Badge.svelte.d.ts +1 -1
  8. package/dist/atoms/Button.svelte +35 -16
  9. package/dist/atoms/Button.svelte.d.ts +3 -1
  10. package/dist/atoms/Card.svelte +49 -67
  11. package/dist/atoms/Card.svelte.d.ts +4 -4
  12. package/dist/atoms/CardHeader.svelte +15 -2
  13. package/dist/atoms/CardHeader.svelte.d.ts +5 -0
  14. package/dist/atoms/Checkbox.svelte +50 -76
  15. package/dist/atoms/Checkbox.svelte.d.ts +7 -2
  16. package/dist/atoms/CodeBlock.svelte +20 -34
  17. package/dist/atoms/CodeBlock.svelte.d.ts +1 -0
  18. package/dist/atoms/ColorPicker.svelte +3 -7
  19. package/dist/atoms/Container.svelte +41 -0
  20. package/dist/atoms/Container.svelte.d.ts +12 -0
  21. package/dist/atoms/Divider.svelte +68 -0
  22. package/dist/atoms/Divider.svelte.d.ts +13 -0
  23. package/dist/atoms/FeatureCard.svelte +35 -50
  24. package/dist/atoms/FeatureCard.svelte.d.ts +9 -4
  25. package/dist/atoms/IconButton.svelte +33 -24
  26. package/dist/atoms/IconButton.svelte.d.ts +4 -8
  27. package/dist/atoms/Input.svelte +58 -26
  28. package/dist/atoms/Input.svelte.d.ts +6 -1
  29. package/dist/atoms/List.svelte +2 -7
  30. package/dist/atoms/List.svelte.d.ts +1 -6
  31. package/dist/atoms/ListItem.svelte +54 -65
  32. package/dist/atoms/ListItem.svelte.d.ts +7 -13
  33. package/dist/atoms/ListItemLeading.svelte +19 -0
  34. package/dist/atoms/ListItemLeading.svelte.d.ts +9 -0
  35. package/dist/atoms/Progress.svelte +2 -2
  36. package/dist/atoms/Radio.svelte +51 -0
  37. package/dist/atoms/Radio.svelte.d.ts +14 -0
  38. package/dist/atoms/Select.svelte +28 -33
  39. package/dist/atoms/Select.svelte.d.ts +0 -10
  40. package/dist/atoms/SelectionControl.svelte +98 -0
  41. package/dist/atoms/SelectionControl.svelte.d.ts +26 -0
  42. package/dist/atoms/Skeleton.svelte +39 -15
  43. package/dist/atoms/Skeleton.svelte.d.ts +7 -3
  44. package/dist/atoms/Table.svelte +27 -0
  45. package/dist/atoms/Table.svelte.d.ts +10 -0
  46. package/dist/atoms/Text.svelte +46 -0
  47. package/dist/atoms/Text.svelte.d.ts +13 -0
  48. package/dist/atoms/Textarea.svelte +74 -53
  49. package/dist/atoms/Textarea.svelte.d.ts +6 -2
  50. package/dist/atoms/ThemeToggle.svelte +35 -24
  51. package/dist/atoms/ThemeToggle.svelte.d.ts +1 -0
  52. package/dist/atoms/Toast.svelte +55 -31
  53. package/dist/atoms/Toast.svelte.d.ts +4 -1
  54. package/dist/atoms/Toggle.svelte +37 -22
  55. package/dist/atoms/Toggle.svelte.d.ts +2 -1
  56. package/dist/atoms/Tooltip.svelte +90 -11
  57. package/dist/atoms/index.d.ts +6 -0
  58. package/dist/atoms/index.js +6 -0
  59. package/dist/atoms/selection-control.styles.d.ts +25 -0
  60. package/dist/atoms/selection-control.styles.js +30 -0
  61. package/dist/components/atoms/index.d.ts +6 -0
  62. package/dist/components/atoms/index.d.ts.map +1 -1
  63. package/dist/components/atoms/selection-control.styles.d.ts +26 -0
  64. package/dist/components/atoms/selection-control.styles.d.ts.map +1 -0
  65. package/dist/components/index.d.ts +42 -7
  66. package/dist/components/index.d.ts.map +1 -1
  67. package/dist/components/molecules/index.d.ts +10 -0
  68. package/dist/components/molecules/index.d.ts.map +1 -1
  69. package/dist/components/molecules/navigation-menu-context.d.ts +11 -0
  70. package/dist/components/molecules/navigation-menu-context.d.ts.map +1 -1
  71. package/dist/components/molecules/toast-store.d.ts +39 -0
  72. package/dist/components/molecules/toast-store.d.ts.map +1 -0
  73. package/dist/components/organisms/index.d.ts +3 -3
  74. package/dist/components/organisms/index.d.ts.map +1 -1
  75. package/dist/components/types/page.types.d.ts +69 -0
  76. package/dist/components/types/page.types.d.ts.map +1 -0
  77. package/dist/components/types/page.types.js +1 -0
  78. package/dist/components/types/variants.d.ts +64 -0
  79. package/dist/components/types/variants.d.ts.map +1 -0
  80. package/dist/components/types/variants.js +44 -0
  81. package/dist/components/util/fixed-sidebar-flyout.d.ts +23 -0
  82. package/dist/components/util/fixed-sidebar-flyout.d.ts.map +1 -0
  83. package/dist/components/util/focus-utils.d.ts +12 -0
  84. package/dist/components/util/focus-utils.d.ts.map +1 -0
  85. package/dist/components/util/ssr-safe.d.ts +17 -0
  86. package/dist/components/util/ssr-safe.d.ts.map +1 -0
  87. package/dist/index.d.ts +42 -7
  88. package/dist/index.js +45 -10
  89. package/dist/lib/layout-width-tokens.d.ts +17 -0
  90. package/dist/lib/layout-width-tokens.d.ts.map +1 -0
  91. package/dist/lib/showcase/component-docs/Button.d.ts +3 -0
  92. package/dist/lib/showcase/component-docs/Button.d.ts.map +1 -0
  93. package/dist/lib/showcase/component-docs/Input.d.ts +3 -0
  94. package/dist/lib/showcase/component-docs/Input.d.ts.map +1 -0
  95. package/dist/lib/showcase/component-docs/List.d.ts +3 -0
  96. package/dist/lib/showcase/component-docs/List.d.ts.map +1 -0
  97. package/dist/lib/showcase/component-docs/Modal.d.ts +3 -0
  98. package/dist/lib/showcase/component-docs/Modal.d.ts.map +1 -0
  99. package/dist/lib/showcase/component-docs/Radio.d.ts +3 -0
  100. package/dist/lib/showcase/component-docs/Radio.d.ts.map +1 -0
  101. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts +3 -0
  102. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts.map +1 -0
  103. package/dist/lib/showcase/component-docs/Skeleton.d.ts +3 -0
  104. package/dist/lib/showcase/component-docs/Skeleton.d.ts.map +1 -0
  105. package/dist/lib/showcase/component-docs/_shared.d.ts +12 -0
  106. package/dist/lib/showcase/component-docs/_shared.d.ts.map +1 -0
  107. package/dist/lib/showcase/component-docs/index.d.ts +4 -0
  108. package/dist/lib/showcase/component-docs/index.d.ts.map +1 -0
  109. package/dist/lib/showcase/components-catalog.d.ts +3 -0
  110. package/dist/lib/showcase/components-catalog.d.ts.map +1 -0
  111. package/dist/lib/showcase/components-showcase-constants.d.ts +89 -0
  112. package/dist/lib/showcase/components-showcase-constants.d.ts.map +1 -0
  113. package/dist/lib/showcase/docs-sidebar-helpers.d.ts +15 -0
  114. package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map +1 -0
  115. package/dist/molecules/Alert.svelte +50 -23
  116. package/dist/molecules/Alert.svelte.d.ts +1 -1
  117. package/dist/molecules/ComponentDemo.svelte +54 -51
  118. package/dist/molecules/ContactForm.svelte +70 -65
  119. package/dist/molecules/Dropdown.svelte +99 -108
  120. package/dist/molecules/Dropdown.svelte.d.ts +12 -6
  121. package/dist/molecules/EmptyState.svelte +44 -0
  122. package/dist/molecules/EmptyState.svelte.d.ts +11 -0
  123. package/dist/molecules/FormField.svelte +89 -0
  124. package/dist/molecules/FormField.svelte.d.ts +23 -0
  125. package/dist/molecules/Header.svelte +41 -0
  126. package/dist/molecules/Header.svelte.d.ts +10 -0
  127. package/dist/molecules/ImageUpload.svelte +1 -1
  128. package/dist/molecules/Modal.svelte +39 -26
  129. package/dist/molecules/Modal.svelte.d.ts +4 -2
  130. package/dist/molecules/NavigationMenu.svelte +16 -0
  131. package/dist/molecules/NavigationMenu.svelte.d.ts +2 -0
  132. package/dist/molecules/NavigationMenuContent.svelte +9 -1
  133. package/dist/molecules/NavigationMenuLink.svelte +1 -1
  134. package/dist/molecules/NavigationMenuTrigger.svelte +9 -4
  135. package/dist/molecules/Page.svelte +16 -0
  136. package/dist/molecules/Page.svelte.d.ts +8 -0
  137. package/dist/molecules/PropsTable.svelte +61 -0
  138. package/dist/molecules/PropsTable.svelte.d.ts +8 -0
  139. package/dist/molecules/RadioGroup.svelte +197 -0
  140. package/dist/molecules/RadioGroup.svelte.d.ts +20 -0
  141. package/dist/molecules/Section.svelte +14 -23
  142. package/dist/molecules/Section.svelte.d.ts +2 -11
  143. package/dist/molecules/SidebarBrandHeader.svelte +68 -0
  144. package/dist/molecules/SidebarBrandHeader.svelte.d.ts +10 -0
  145. package/dist/molecules/SidebarFooter.svelte +119 -0
  146. package/dist/molecules/SidebarFooter.svelte.d.ts +23 -0
  147. package/dist/molecules/SidebarNavSection.svelte +49 -0
  148. package/dist/molecules/SidebarNavSection.svelte.d.ts +14 -0
  149. package/dist/molecules/SlideUp.svelte +21 -16
  150. package/dist/molecules/SlideUp.svelte.d.ts +1 -1
  151. package/dist/molecules/Tabs.svelte +6 -11
  152. package/dist/molecules/Toaster.svelte +21 -0
  153. package/dist/molecules/Toaster.svelte.d.ts +6 -0
  154. package/dist/molecules/ToasterToast.svelte +217 -0
  155. package/dist/molecules/ToasterToast.svelte.d.ts +7 -0
  156. package/dist/molecules/index.d.ts +10 -0
  157. package/dist/molecules/index.js +10 -0
  158. package/dist/molecules/navigation-menu-context.d.ts +11 -0
  159. package/dist/molecules/navigation-menu-context.js +18 -0
  160. package/dist/molecules/toast-store.d.ts +38 -0
  161. package/dist/molecules/toast-store.js +34 -0
  162. package/dist/organisms/SidebarAccountPanel.svelte +118 -0
  163. package/dist/organisms/SidebarAccountPanel.svelte.d.ts +20 -0
  164. package/dist/organisms/SidebarNavigation.svelte +286 -212
  165. package/dist/organisms/SidebarNavigation.svelte.d.ts +22 -1
  166. package/dist/organisms/{SidebarProjectPanel.svelte → SidebarPanel.svelte} +67 -34
  167. package/dist/organisms/{SidebarProjectPanel.svelte.d.ts → SidebarPanel.svelte.d.ts} +9 -6
  168. package/dist/organisms/TopNavbar.svelte +214 -0
  169. package/dist/organisms/TopNavbar.svelte.d.ts +35 -0
  170. package/dist/organisms/index.d.ts +3 -3
  171. package/dist/organisms/index.js +3 -3
  172. package/dist/routes/lib/focus-utils.d.ts +7 -18
  173. package/dist/routes/lib/focus-utils.ts +32 -34
  174. package/dist/routes/lib/ssr-safe.ts +5 -4
  175. package/dist/routes/lib/variant-utils.ts +48 -39
  176. package/dist/types/components.d.ts +187 -0
  177. package/dist/types/components.d.ts.map +1 -0
  178. package/dist/types/events.d.ts +200 -0
  179. package/dist/types/events.d.ts.map +1 -0
  180. package/dist/types/index.d.ts +171 -0
  181. package/dist/types/index.d.ts.map +1 -0
  182. package/dist/types/page.types.d.ts +3 -0
  183. package/dist/types/page.types.d.ts.map +1 -0
  184. package/dist/types/page.types.js +1 -0
  185. package/dist/types/page.types.ts +79 -0
  186. package/dist/types/variants.d.ts +3 -0
  187. package/dist/types/variants.d.ts.map +1 -0
  188. package/dist/types/variants.js +1 -0
  189. package/dist/types/variants.ts +75 -0
  190. package/dist/util/fixed-sidebar-flyout.d.ts +22 -0
  191. package/dist/util/fixed-sidebar-flyout.js +148 -0
  192. package/dist/util/focus-utils.d.ts +11 -0
  193. package/dist/util/focus-utils.js +94 -0
  194. package/dist/util/ssr-safe.d.ts +16 -0
  195. package/dist/util/ssr-safe.js +48 -0
  196. package/dist/zabi-components-colors.css +360 -324
  197. package/dist/zabi-components-theme-dark-only.css +164 -151
  198. package/dist/zabi-components-theme-dark.css +164 -151
  199. package/dist/zabi-components-theme-only.css +253 -230
  200. package/dist/zabi-components-theme.css +253 -230
  201. package/dist/zabi-components.css +1262 -241
  202. package/docs/theme-imports.md +112 -0
  203. package/package.json +32 -10
  204. package/dist/organisms/Navbar.svelte +0 -92
  205. package/dist/organisms/Navbar.svelte.d.ts +0 -14
  206. package/dist/organisms/Navigation.svelte +0 -119
  207. package/dist/organisms/Navigation.svelte.d.ts +0 -21
package/dist/zabi-components-theme-dark-only.css CHANGED
@@ -1,158 +1,171 @@
1
1
  /* Dark Mode Theme - CSS Custom Properties */
2
2
  /* Import this file after the main theme to enable dark mode support */
3
3
  .dark {
4
+ /* Mirror @theme --zabi-base-* ramp (same physical hex; required for standalone dark import) */
5
+ --zabi-base-50: #fafafa
6
+ --zabi-base-75: #f7f7f7
7
+ --zabi-base-100: #f4f4f5
8
+ --zabi-base-150: #ececee
9
+ --zabi-base-200: #e4e4e7
10
+ --zabi-base-250: #dcdcdf
11
+ --zabi-base-300: #d4d4d8
12
+ --zabi-base-350: #babac1
13
+ --zabi-base-400: #a1a1aa
14
+ --zabi-base-450: #898992
15
+ --zabi-base-500: #71717a
16
+ --zabi-base-550: #61616a
17
+ --zabi-base-600: #52525b
18
+ --zabi-base-650: #484850
19
+ --zabi-base-700: #3f3f46
20
+ --zabi-base-750: #333338
21
+ --zabi-base-800: #27272a
22
+ --zabi-base-850: #1f1f22
23
+ --zabi-base-900: #18181b
24
+ --zabi-base-925: #101013
25
+ --zabi-base-950: #09090b
4
26
  /* Brand Color Scale - Dark mode variants */
5
- --color-brand-50: theme(colors.brand.950);
6
- --color-brand-100: theme(colors.brand.900);
7
- --color-brand-200: theme(colors.brand.800);
8
- --color-brand-300: theme(colors.brand.700);
9
- --color-brand-400: theme(colors.brand.600);
10
- --color-brand-500: theme(colors.brand.500);
11
- --color-brand-600: theme(colors.brand.400);
12
- --color-brand-700: theme(colors.brand.300);
13
- --color-brand-800: theme(colors.brand.200);
14
- --color-brand-900: theme(colors.brand.100);
15
- --color-brand-950: theme(colors.brand.50);
16
-
17
- /* Citron Color Scale - Dark mode variants */
18
- --color-citron-50: theme(colors.citron.950);
19
- --color-citron-100: theme(colors.citron.900);
20
- --color-citron-200: theme(colors.citron.800);
21
- --color-citron-300: theme(colors.citron.700);
22
- --color-citron-400: theme(colors.citron.600);
23
- --color-citron-500: theme(colors.citron.500);
24
- --color-citron-600: theme(colors.citron.400);
25
- --color-citron-700: theme(colors.citron.300);
26
- --color-citron-800: theme(colors.citron.200);
27
- --color-citron-900: theme(colors.citron.100);
28
- --color-citron-950: theme(colors.citron.50);
29
-
30
- /* Pine Color Scale - Dark mode variants */
31
- --color-pine-50: theme(colors.pine.950);
32
- --color-pine-100: theme(colors.pine.900);
33
- --color-pine-200: theme(colors.pine.800);
34
- --color-pine-300: theme(colors.pine.700);
35
- --color-pine-400: theme(colors.pine.600);
36
- --color-pine-500: theme(colors.pine.500);
37
- --color-pine-600: theme(colors.pine.400);
38
- --color-pine-700: theme(colors.pine.300);
39
- --color-pine-800: theme(colors.pine.200);
40
- --color-pine-900: theme(colors.pine.100);
41
- --color-pine-950: theme(colors.pine.50);
42
-
43
- /* Iris Color Scale - Dark mode variants */
44
- --color-iris-50: theme(colors.iris.950);
45
- --color-iris-100: theme(colors.iris.900);
46
- --color-iris-200: theme(colors.iris.800);
47
- --color-iris-300: theme(colors.iris.700);
48
- --color-iris-400: theme(colors.iris.600);
49
- --color-iris-500: theme(colors.iris.500);
50
- --color-iris-600: theme(colors.iris.400);
51
- --color-iris-700: theme(colors.iris.300);
52
- --color-iris-800: theme(colors.iris.200);
53
- --color-iris-900: theme(colors.iris.100);
54
- --color-iris-950: theme(colors.iris.50);
55
-
56
- /* Base Color Scale - Dark mode variants (inverted neutral palette) */
57
- --color-base-50: theme(colors.neutral.950);
58
- --color-base-100: theme(colors.neutral.900);
59
- --color-base-200: theme(colors.neutral.800);
60
- --color-base-300: theme(colors.neutral.700);
61
- --color-base-400: theme(colors.neutral.600);
62
- --color-base-500: theme(colors.neutral.500);
63
- --color-base-600: theme(colors.neutral.400);
64
- --color-base-700: theme(colors.neutral.300);
65
- --color-base-800: theme(colors.neutral.200);
66
- --color-base-900: theme(colors.neutral.100);
67
- --color-base-950: theme(colors.neutral.50);
68
-
69
- /* Background Colors - No dark mode overrides needed, base colors are already inverted */
70
-
71
- /* Page Colors - No dark mode overrides needed, base colors are already inverted */
72
-
73
- /* Card Colors */
74
- --color-card: var(--color-base-200);
75
- --color-card-hover: var(--color-base-300);
76
- --color-card-active: var(--color-base-400);
77
- --color-card-elevated: var(--color-base-200);
78
-
79
- /* Overlay Colors */
80
- --color-overlay: rgba(0, 0, 0, 0.7);
81
-
82
- /* Input Colors */
83
- --color-input: var(--color-base-300);
84
- --color-input-hover: var(--color-base-400);
85
- --color-input-focus: var(--color-base-300);
86
- --color-input-disabled: var(--color-base-400);
87
-
88
- /* Text Colors - No dark mode overrides needed, base colors are already inverted */
89
-
90
- /* Border Colors - No dark mode overrides needed, base colors are already inverted */
91
-
92
- /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
93
-
94
- /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
95
-
96
- /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
97
-
98
- /* Success Colors */
99
- --color-success: theme(colors.pine.400);
100
- --color-success-weak: theme(colors.pine.500);
101
- --color-success-medium: theme(colors.pine.300);
102
- --color-success-strong: theme(colors.pine.200);
103
-
104
- /* Warning Colors */
105
- --color-warning: theme(colors.amber.500);
106
- --color-warning-weak: theme(colors.amber.600);
107
- --color-warning-medium: theme(colors.amber.400);
108
- --color-warning-strong: theme(colors.amber.300);
109
-
110
- /* Error Colors */
111
- --color-error: theme(colors.red.500);
112
- --color-error-weak: theme(colors.red.600);
113
- --color-error-medium: theme(colors.red.400);
114
- --color-error-strong: theme(colors.red.300);
115
-
116
- /* Energetic Colors (Citron) */
117
- --color-energetic: theme(colors.citron.400);
118
- --color-energetic-weak: theme(colors.citron.500);
119
- --color-energetic-medium: theme(colors.citron.300);
120
- --color-energetic-strong: theme(colors.citron.200);
121
-
122
- /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
123
-
124
- /* Info Colors */
125
- --color-info: theme(colors.iris.500);
126
- --color-info-weak: theme(colors.iris.600);
127
- --color-info-active: theme(colors.iris.400);
128
- --color-info-medium: theme(colors.iris.400);
129
- --color-info-strong: theme(colors.iris.300);
130
- /* Text alias */
131
- --color-info-text: var(--color-info);
132
-
133
- /* ========================================
27
+ --color-brand-50: theme(colors.brand.950)
28
+ --color-brand-100: theme(colors.brand.900)
29
+ --color-brand-200: theme(colors.brand.800)
30
+ --color-brand-300: theme(colors.brand.700)
31
+ --color-brand-400: theme(colors.brand.600)
32
+ --color-brand-500: theme(colors.brand.500)
33
+ --color-brand-600: theme(colors.brand.400)
34
+ --color-brand-700: theme(colors.brand.300)
35
+ --color-brand-800: theme(colors.brand.200)
36
+ --color-brand-900: theme(colors.brand.100)
37
+ --color-brand-950: theme(colors.brand.50)
38
+ /* Citron Color Scale - Dark mode variants */
39
+ --color-citron-50: theme(colors.citron.950)
40
+ --color-citron-100: theme(colors.citron.900)
41
+ --color-citron-200: theme(colors.citron.800)
42
+ --color-citron-300: theme(colors.citron.700)
43
+ --color-citron-400: theme(colors.citron.600)
44
+ --color-citron-500: theme(colors.citron.500)
45
+ --color-citron-600: theme(colors.citron.400)
46
+ --color-citron-700: theme(colors.citron.300)
47
+ --color-citron-800: theme(colors.citron.200)
48
+ --color-citron-900: theme(colors.citron.100)
49
+ --color-citron-950: theme(colors.citron.50)
50
+ /* Pine Color Scale - Dark mode variants */
51
+ --color-pine-50: theme(colors.pine.950)
52
+ --color-pine-100: theme(colors.pine.900)
53
+ --color-pine-200: theme(colors.pine.800)
54
+ --color-pine-300: theme(colors.pine.700)
55
+ --color-pine-400: theme(colors.pine.600)
56
+ --color-pine-500: theme(colors.pine.500)
57
+ --color-pine-600: theme(colors.pine.400)
58
+ --color-pine-700: theme(colors.pine.300)
59
+ --color-pine-800: theme(colors.pine.200)
60
+ --color-pine-900: theme(colors.pine.100)
61
+ --color-pine-950: theme(colors.pine.50)
62
+ /* Iris Color Scale - Dark mode variants */
63
+ --color-iris-50: theme(colors.iris.950)
64
+ --color-iris-100: theme(colors.iris.900)
65
+ --color-iris-200: theme(colors.iris.800)
66
+ --color-iris-300: theme(colors.iris.700)
67
+ --color-iris-400: theme(colors.iris.600)
68
+ --color-iris-500: theme(colors.iris.500)
69
+ --color-iris-600: theme(colors.iris.400)
70
+ --color-iris-700: theme(colors.iris.300)
71
+ --color-iris-800: theme(colors.iris.200)
72
+ --color-iris-900: theme(colors.iris.100)
73
+ --color-iris-950: theme(colors.iris.50)
74
+ /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
75
+ --color-base-50: #09090b
76
+ --color-base-75: #101013
77
+ --color-base-100: #18181b
78
+ --color-base-150: #1f1f22
79
+ --color-base-200: #27272a
80
+ --color-base-250: #333338
81
+ --color-base-300: #3f3f46
82
+ --color-base-350: #484850
83
+ --color-base-400: #52525b
84
+ --color-base-450: #61616a
85
+ --color-base-500: #71717a
86
+ --color-base-550: #898992
87
+ --color-base-600: #a1a1aa
88
+ --color-base-650: #babac1
89
+ --color-base-700: #d4d4d8
90
+ --color-base-750: #dcdcdf
91
+ --color-base-800: #e4e4e7
92
+ --color-base-850: #ececee
93
+ --color-base-900: #f4f4f5
94
+ --color-base-925: #f7f7f7
95
+ --color-base-950: #fafafa
96
+ /* Background Colors - No dark mode overrides needed, base colors are already inverted */
97
+ /* Page Colors - No dark mode overrides needed, base colors are already inverted */
98
+ /* Card Colors */
99
+ --color-card: var(--color-base-200)
100
+ --color-card-hover: var(--color-base-300)
101
+ --color-card-active: var(--color-base-400)
102
+ --color-card-elevated: var(--color-base-200)
103
+ /* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
104
+ --color-surface-1: var(--color-base-250)
105
+ --color-surface-2: var(--color-base-300)
106
+ --color-surface-3: var(--color-base-350)
107
+ --color-surface-4: var(--color-base-400)
108
+ /* Overlay Colors */
109
+ --color-overlay: rgba(0, 0, 0, 0.7)
110
+ /* Input Colors */
111
+ --color-input: var(--color-base-250)
112
+ --color-input-border: var(--color-base-350)
113
+ --color-input-hover: var(--color-base-300)
114
+ --color-input-focus: var(--color-base-300)
115
+ --color-input-disabled: var(--color-base-300)
116
+ /* Text Colors - No dark mode overrides needed, base colors are already inverted */
117
+ /* Border Colors - No dark mode overrides needed, base colors are already inverted */
118
+ /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
119
+ /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
120
+ /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
121
+ /* Success Colors */
122
+ --color-success: theme(colors.pine.400)
123
+ --color-success-weak: theme(colors.pine.500)
124
+ --color-success-medium: theme(colors.pine.300)
125
+ --color-success-strong: theme(colors.pine.200)
126
+ /* Warning Colors */
127
+ --color-warning: theme(colors.amber.500)
128
+ --color-warning-weak: theme(colors.amber.600)
129
+ --color-warning-medium: theme(colors.amber.400)
130
+ --color-warning-strong: theme(colors.amber.300)
131
+ /* Error Colors */
132
+ --color-error: theme(colors.red.500)
133
+ --color-error-weak: theme(colors.red.600)
134
+ --color-error-medium: theme(colors.red.400)
135
+ --color-error-strong: theme(colors.red.300)
136
+ /* Energetic Colors (Citron) */
137
+ --color-energetic: theme(colors.citron.400)
138
+ --color-energetic-weak: theme(colors.citron.500)
139
+ --color-energetic-medium: theme(colors.citron.300)
140
+ --color-energetic-strong: theme(colors.citron.200)
141
+ /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
142
+ /* Info Colors */
143
+ --color-info: theme(colors.iris.500)
144
+ --color-info-weak: theme(colors.iris.600)
145
+ --color-info-active: theme(colors.iris.400)
146
+ --color-info-medium: theme(colors.iris.400)
147
+ --color-info-strong: theme(colors.iris.300)
148
+ /* Text alias */
149
+ --color-info-text: var(--color-info)
150
+ /* ========================================
134
151
  ACTION COLORS - Dark Mode Overrides
135
152
  ======================================== */
136
-
137
- /* Primary Actions - Background adapts automatically via brand color inversion */
138
- /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
139
- /* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
140
- --color-action-primary-text: var(--color-brand-50);
141
-
142
- /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
143
-
144
- /* Danger Actions */
145
- --color-action-danger: theme(colors.red.500);
146
- --color-action-danger-hover: theme(colors.red.600);
147
- --color-action-danger-active: theme(colors.red.700);
148
- --color-action-danger-disabled: theme(colors.red.700);
149
- --color-action-danger-subtle: theme(colors.red.950);
150
- --color-action-danger-subtle-hover: theme(colors.red.900);
151
-
152
- /* Shadow Colors */
153
- --shadow-opacity: 0.3;
154
- --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
155
- --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
156
- --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
157
- --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
153
+ /* Primary Actions - Background adapts automatically via brand color inversion */
154
+ /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
155
+ /* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
156
+ --color-action-primary-text: var(--color-brand-50)
157
+ /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
158
+ /* Danger Actions */
159
+ --color-action-danger: theme(colors.red.500)
160
+ --color-action-danger-hover: theme(colors.red.600)
161
+ --color-action-danger-active: theme(colors.red.700)
162
+ --color-action-danger-disabled: theme(colors.red.700)
163
+ --color-action-danger-subtle: theme(colors.red.950)
164
+ --color-action-danger-subtle-hover: theme(colors.red.900)
165
+ /* Shadow Colors */
166
+ --shadow-opacity: 0.3
167
+ --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))
168
+ --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity))
169
+ --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity))
170
+ --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity))
158
171
  }