@harnessio/ui 0.1.3 → 0.1.4

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 (48) hide show
  1. package/dist/styles.css +1 -1
  2. package/dist/themes/dark-deuteranopia.20e78263.css +5 -0
  3. package/dist/themes/dark-dimmer-deuteranopia.3e98b1a1.css +5 -0
  4. package/dist/themes/dark-dimmer-protanopia.0249231f.css +5 -0
  5. package/dist/themes/dark-dimmer-tritanopia.af89b54e.css +5 -0
  6. package/dist/themes/dark-dimmer.232c68a0.css +5 -0
  7. package/dist/themes/dark-high-contrast-deuteranopia.d3741b77.css +5 -0
  8. package/dist/themes/dark-high-contrast-protanopia.6dc78afc.css +5 -0
  9. package/dist/themes/dark-high-contrast-tritanopia.a32fda16.css +5 -0
  10. package/dist/themes/dark-high-contrast.4728a378.css +5 -0
  11. package/dist/themes/dark-protanopia.8676de6c.css +5 -0
  12. package/dist/themes/dark-tritanopia.a0cbda73.css +5 -0
  13. package/dist/themes/light-deuteranopia.01279de3.css +5 -0
  14. package/dist/themes/light-dimmer-deuteranopia.a9f191d4.css +5 -0
  15. package/dist/themes/light-dimmer-protanopia.db33b190.css +5 -0
  16. package/dist/themes/light-dimmer-tritanopia.b6738c2f.css +5 -0
  17. package/dist/themes/light-dimmer.f342a5f4.css +5 -0
  18. package/dist/themes/light-high-contrast-deuteranopia.6ee14a95.css +5 -0
  19. package/dist/themes/light-high-contrast-protanopia.24d13ac4.css +5 -0
  20. package/dist/themes/light-high-contrast-tritanopia.6b6d1921.css +5 -0
  21. package/dist/themes/light-high-contrast.63d5e727.css +5 -0
  22. package/dist/themes/light-protanopia.3594648d.css +5 -0
  23. package/dist/themes/light-tritanopia.ae30bc7e.css +5 -0
  24. package/dist/themes/theme-manifest.js +22 -22
  25. package/dist/themes/theme-manifest.json +22 -22
  26. package/package.json +3 -3
  27. package/dist/themes/dark-deuteranopia.2aa84913.css +0 -689
  28. package/dist/themes/dark-dimmer-deuteranopia.78c05e8e.css +0 -689
  29. package/dist/themes/dark-dimmer-protanopia.03925a8b.css +0 -689
  30. package/dist/themes/dark-dimmer-tritanopia.17728415.css +0 -689
  31. package/dist/themes/dark-dimmer.4f61c61c.css +0 -689
  32. package/dist/themes/dark-high-contrast-deuteranopia.73a6136a.css +0 -689
  33. package/dist/themes/dark-high-contrast-protanopia.d3da0609.css +0 -689
  34. package/dist/themes/dark-high-contrast-tritanopia.6cc9d2b6.css +0 -689
  35. package/dist/themes/dark-high-contrast.54cc283e.css +0 -689
  36. package/dist/themes/dark-protanopia.870f7b02.css +0 -689
  37. package/dist/themes/dark-tritanopia.7f778a36.css +0 -689
  38. package/dist/themes/light-deuteranopia.cfa3611c.css +0 -689
  39. package/dist/themes/light-dimmer-deuteranopia.e35e4866.css +0 -689
  40. package/dist/themes/light-dimmer-protanopia.1964e1d9.css +0 -689
  41. package/dist/themes/light-dimmer-tritanopia.12daabce.css +0 -689
  42. package/dist/themes/light-dimmer.ea39926e.css +0 -689
  43. package/dist/themes/light-high-contrast-deuteranopia.318145e9.css +0 -689
  44. package/dist/themes/light-high-contrast-protanopia.89e6ff2c.css +0 -689
  45. package/dist/themes/light-high-contrast-tritanopia.ae859638.css +0 -689
  46. package/dist/themes/light-high-contrast.924cbdea.css +0 -689
  47. package/dist/themes/light-protanopia.ba281683.css +0 -689
  48. package/dist/themes/light-tritanopia.8ca963f0.css +0 -689
package/dist/themes/dark-high-contrast.54cc283e.css DELETED
@@ -1,689 +0,0 @@
1
- /**
2
- * Harness Design System
3
- * Generated style tokens - DO NOT EDIT DIRECTLY
4
- * Copyright (c) Harness.
5
- */
6
-
7
- .dark-high-contrast, .dark-std-high {
8
- --cn-icon-stroke-width-2xs: 1.8px;
9
- --cn-icon-stroke-width-xs: 1.3px;
10
- --cn-icon-stroke-width-sm: 1.2px;
11
- --cn-icon-stroke-width-md: 1px;
12
- --cn-icon-stroke-width-lg: 1px;
13
- --cn-icon-stroke-width-xl: 1px;
14
- /**
15
- * Level 0 background - Foundational surface layer. Used for page navigation areas and as a container for elevated content (insets). Creates the base canvas that other elements sit upon.
16
- *
17
- * Common uses: Page headers, navigation bars, sidebar backgrounds, main content containers.
18
- */
19
- --cn-bg-0: var(--cn-pure-black);
20
- /**
21
- * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.
22
- *
23
- * Common uses: Application background, page base layer, lowest-level containers.
24
- */
25
- --cn-bg-1: var(--cn-gray-1000);
26
- /**
27
- * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.
28
- *
29
- * Common uses: Cards, containers, form fields, dropdown menus.
30
- */
31
- --cn-bg-2: var(--cn-gray-950);
32
- /**
33
- * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.
34
- *
35
- * Common uses: Popovers, tooltips, highlighted containers.
36
- */
37
- --cn-bg-3: var(--cn-gray-950);
38
- /**
39
- * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.
40
- *
41
- * Common uses: Headings, labels, emphasized text.
42
- */
43
- --cn-text-1: var(--cn-pure-white);
44
- /**
45
- * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.
46
- *
47
- * Common uses: Body text, primary content, default icons, form inputs.
48
- */
49
- --cn-text-2: var(--cn-gray-150);
50
- /**
51
- * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.
52
- *
53
- * Common uses: Supporting text, metadata, secondary information, placeholders.
54
- */
55
- --cn-text-3: var(--cn-gray-400);
56
- /**
57
- * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.
58
- *
59
- * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders.
60
- */
61
- --cn-text-4: var(--cn-gray-500);
62
- /**
63
- * Primary brand color for text and icons. Used to reinforce brand identity and create visual connection to the product.
64
- *
65
- * Common uses: Brand elements, primary links, brand-specific content, logo text.
66
- */
67
- --cn-text-brand: var(--cn-blue-300);
68
- /**
69
- * High-contrast neutral border color for interactive states and emphasis. Provides strong visual definition without brand association for general UI interactions.
70
- *
71
- * Common uses: Hover state borders, selected elements, interactive container outlines, emphasized dividers, modal boundaries.
72
- */
73
- --cn-border-1: var(--cn-gray-400);
74
- /**
75
- * Default border color for general UI elements. Provides balanced visual separation without overwhelming the interface. Optimized for readability and visual hierarchy.
76
- *
77
- * Common uses: Card borders, form field outlines, table borders, content dividers, modal boundaries, section separators, default form inputs.
78
- */
79
- --cn-border-2: var(--cn-gray-800);
80
- /**
81
- * Subtle border color for minimal visual separation. Creates gentle boundaries that organize content without adding visual weight. Ideal for maintaining clean, uncluttered interfaces.
82
- *
83
- * Common uses: Table row separators, grouped list items, subtle content dividers, secondary container outlines, background element borders.
84
- */
85
- --cn-border-3: var(--cn-gray-850);
86
- /**
87
- * Border color for success containers. Reinforces positive status through visual framing.
88
- *
89
- * Common uses: Success alert borders, confirmation boundaries, completed state indicators.
90
- */
91
- --cn-border-success: var(--cn-forest-400);
92
- /**
93
- * Border color for error containers. Emphasizes critical information through visual framing.
94
- *
95
- * Common uses: Error alert borders, validation boundaries, destructive action containers.
96
- */
97
- --cn-border-danger: var(--cn-red-500);
98
- /**
99
- * Border color for warning containers. Frames cautionary information with distinct boundary.
100
- *
101
- * Common uses: Warning alert borders, notice boundaries, attention-requiring elements.
102
- */
103
- --cn-border-warning: var(--cn-yellow-400);
104
- /**
105
- * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.
106
- *
107
- * Common uses: Button hover states, link hover states, soft interactions, menu items.
108
- */
109
- --cn-state-hover: lch(from var(--cn-gray-850) l c h / 0.36);
110
- /**
111
- * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.
112
- *
113
- * Common uses: Selected list items, active tabs, chosen options, current navigation item.
114
- */
115
- --cn-state-selected: lch(from var(--cn-gray-850) l c h / 0.4);
116
- --cn-set-brand-primary-text: var(--cn-pure-black); /* Text color for danger toast notifications. Ensures maximum readability for critical messages. */
117
- --cn-set-brand-primary-bg: var(--cn-blue-500); /* Background color for primary brand items with strong emphasis. */
118
- --cn-set-brand-primary-bg-hover: var(--cn-blue-300); /* Hover state background color for interactive brand surfaces. */
119
- --cn-set-brand-primary-bg-selected: var(--cn-blue-300); /* Selected state background color for active brand items. */
120
- --cn-set-brand-primary-ring: lch(from var(--cn-blue-500) l c h / 0.28); /* Ring color for brand primary focus and selection indicators. Semi-transparent brand color for accessible focus rings. */
121
- --cn-set-brand-secondary-text: var(--cn-blue-200); /* Text and icon color for primary subtle brand elements with maximum contrast. */
122
- --cn-set-brand-secondary-bg: var(--cn-blue-900); /* Background color for subdued gray surfaces. */
123
- --cn-set-brand-secondary-bg-hover: var(--cn-blue-850); /* Hover state background color for interactive brand subtle surfaces. */
124
- --cn-set-brand-secondary-bg-selected: var(--cn-blue-850); /* Selected state background color for active brand subtle items. */
125
- --cn-set-brand-outline-text: var(--cn-blue-200); /* Text and icon color for primary brand elements with minimum contrast. */
126
- --cn-set-brand-outline-bg: var(--cn-blue-1000); /* Background color for primary brand items with minimum emphasis. */
127
- --cn-set-brand-outline-border: var(--cn-blue-500); /* Border color for primary brand with minimum emphasis boundaries. */
128
- --cn-set-brand-outline-bg-hover: var(--cn-blue-950); /* Hover state background color for interactive brand with minimum emphasis surfaces. */
129
- --cn-set-brand-outline-bg-selected: var(--cn-blue-950); /* Selected state background color for active brand with minimum emphasis items. */
130
- --cn-set-ai-outline-text: var(--cn-pure-white); /* Primary text color for AI-related content with optimal readability. */
131
- --cn-set-ai-outline-inner: lch(from var(--cn-indigo-600) l c h / 0.35); /* Inner shadow color for AI-themed surfaces. Creates depth and dimension for AI-related elements. */
132
- --cn-set-gray-primary-text: var(--cn-pure-black); /* Text color for high-contrast gray surfaces. */
133
- --cn-set-gray-primary-bg: var(--cn-gray-400); /* Background color for prominent gray surfaces. */
134
- --cn-set-gray-primary-bg-hover: var(--cn-gray-300); /* Hover state background color for prominent gray surfaces. */
135
- --cn-set-gray-primary-bg-selected: var(--cn-gray-300); /* Selected state background color for prominent gray surfaces. */
136
- --cn-set-gray-secondary-bg: var(--cn-gray-850); /* Background color for subdued gray surfaces. */
137
- --cn-set-gray-secondary-bg-hover: var(--cn-gray-800); /* Hover state background color for interactive soft gray surfaces. */
138
- --cn-set-gray-secondary-bg-selected: var(--cn-gray-800); /* Selected state background color for active soft gray items. */
139
- --cn-set-gray-outline-bg-hover: var(--cn-gray-900); /* Hover state background color for interactive gray surfaces. */
140
- --cn-set-gray-outline-bg-selected: var(--cn-gray-900); /* Selected state background color for active gray items. */
141
- --cn-set-success-primary-text: var(--cn-pure-black); /* Text color for high-contrast green surfaces. */
142
- --cn-set-success-primary-bg: var(--cn-forest-300); /* Background color for prominent green surfaces. */
143
- --cn-set-success-primary-bg-hover: var(--cn-forest-150); /* Background color for prominent green surfaces. */
144
- --cn-set-success-primary-bg-selected: var(--cn-forest-150); /* Background color for prominent green surfaces. */
145
- --cn-set-success-secondary-text: var(--cn-forest-100); /* Text color for subtle green surfaces with good contrast. */
146
- --cn-set-success-secondary-bg: var(--cn-forest-850); /* Background color for subdued green surfaces. */
147
- --cn-set-success-secondary-bg-hover: var(--cn-forest-800); /* Background color for subdued green surfaces. */
148
- --cn-set-success-secondary-bg-selected: var(--cn-forest-800); /* Background color for subdued green surfaces. */
149
- --cn-set-success-outline-text: var(--cn-forest-150); /* Standard text color for green surfaces with balanced readability. */
150
- --cn-set-success-outline-bg: var(--cn-forest-1000); /* Base background color for green surfaces in default states. */
151
- --cn-set-success-outline-border: var(--cn-forest-700); /* Border color for standard green boundaries. */
152
- --cn-set-success-outline-bg-hover: var(--cn-forest-950); /* Hover state background color for interactive green surfaces. */
153
- --cn-set-success-outline-bg-selected: var(--cn-forest-950); /* Selected state background color for active green items. */
154
- --cn-set-danger-primary-text: var(--cn-pure-black); /* Text color for high-contrast red surfaces. */
155
- --cn-set-danger-primary-bg: var(--cn-red-400); /* Background color for prominent red surfaces. */
156
- --cn-set-danger-primary-bg-hover: var(--cn-red-200); /* Background color for prominent red surfaces. */
157
- --cn-set-danger-primary-bg-selected: var(--cn-red-200); /* Background color for prominent red surfaces. */
158
- --cn-set-danger-secondary-text: var(--cn-red-200); /* Text color for subtle red surfaces with good contrast. */
159
- --cn-set-danger-secondary-bg: var(--cn-red-950); /* Background color for subdued red surfaces. */
160
- --cn-set-danger-secondary-bg-hover: var(--cn-red-900); /* Hover state for background color for subdued red surfaces. */
161
- --cn-set-danger-secondary-bg-selected: var(--cn-red-900); /* Selected state for background color for subdued red surfaces. */
162
- --cn-set-danger-outline-text: var(--cn-red-400); /* Standard text color for red surfaces with balanced readability. */
163
- --cn-set-danger-outline-bg: var(--cn-red-1000); /* Base background color for red surfaces in default states. */
164
- --cn-set-danger-outline-border: var(--cn-red-700); /* Border color for standard red boundaries. */
165
- --cn-set-danger-outline-bg-hover: var(--cn-red-950); /* Hover state background color for interactive red surfaces. */
166
- --cn-set-danger-outline-bg-selected: var(--cn-red-950); /* Selected state background color for active red items. */
167
- --cn-set-warning-primary-text: var(--cn-pure-black); /* Text color for high-contrast yellow surfaces. */
168
- --cn-set-warning-primary-bg: var(--cn-yellow-150); /* Background color for prominent yellow surfaces. */
169
- --cn-set-warning-primary-bg-hover: var(--cn-yellow-200); /* Hover state background color for interactive primary warning surfaces. */
170
- --cn-set-warning-primary-bg-selected: var(--cn-yellow-200); /* Selected state background color for active primary warning items. */
171
- --cn-set-warning-secondary-text: var(--cn-yellow-150); /* Text color for subtle yellow surfaces with good contrast. */
172
- --cn-set-warning-secondary-bg: var(--cn-yellow-900); /* Background color for subdued yellow surfaces. */
173
- --cn-set-warning-secondary-bg-hover: var(--cn-yellow-850); /* Hover state for background color for subdued yellow surfaces. */
174
- --cn-set-warning-secondary-bg-selected: var(--cn-yellow-850); /* Selected state for background color for subdued yellow surfaces. */
175
- --cn-set-warning-outline-text: var(--cn-yellow-200); /* Standard text color for yellow surfaces with balanced readability. */
176
- --cn-set-warning-outline-bg: var(--cn-yellow-1000); /* Base background color for yellow surfaces in default states. */
177
- --cn-set-warning-outline-border: var(--cn-yellow-700); /* Border color for standard yellow boundaries. */
178
- --cn-set-warning-outline-bg-hover: var(--cn-yellow-950); /* Hover state background color for interactive yellow surfaces. */
179
- --cn-set-warning-outline-bg-selected: var(--cn-yellow-950); /* Selected state background color for active yellow items. */
180
- --cn-set-blue-primary-text: var(--cn-pure-black); /* Text color for high-contrast blue surfaces. */
181
- --cn-set-blue-primary-bg: var(--cn-blue-500); /* Background color for prominent blue surfaces. */
182
- --cn-set-blue-primary-bg-hover: var(--cn-blue-400); /* Hover state background color for interactive primary blue surfaces. */
183
- --cn-set-blue-primary-bg-selected: var(--cn-blue-400); /* Selected state background color for active primary blue items. */
184
- --cn-set-blue-secondary-text: var(--cn-blue-200); /* Text color for subtle blue surfaces with good contrast. */
185
- --cn-set-blue-secondary-bg: var(--cn-blue-900); /* Background color for subdued blue surfaces. */
186
- --cn-set-blue-secondary-bg-hover: var(--cn-blue-850); /* Hover background color for subdued blue surfaces. */
187
- --cn-set-blue-secondary-bg-selected: var(--cn-blue-850); /* Selected state background color for active secondary blue items. */
188
- --cn-set-blue-outline-text: var(--cn-blue-300); /* Standard text color for blue surfaces with balanced readability. */
189
- --cn-set-blue-outline-bg: var(--cn-blue-1000); /* Base background color for blue surfaces in default states. */
190
- --cn-set-blue-outline-border: var(--cn-blue-700); /* Border color for standard blue boundaries. */
191
- --cn-set-blue-outline-bg-hover: var(--cn-blue-950); /* Hover state background color for interactive blue surfaces. */
192
- --cn-set-blue-outline-bg-selected: var(--cn-blue-950); /* Selected state background color for active blue items. */
193
- --cn-set-purple-primary-text: var(--cn-pure-black); /* Text color for high-contrast purple surfaces. */
194
- --cn-set-purple-primary-bg: var(--cn-purple-500); /* Background color for prominent purple surfaces. */
195
- --cn-set-purple-primary-bg-hover: var(--cn-purple-400); /* Hover state background color for interactive primary purple surfaces. */
196
- --cn-set-purple-primary-bg-selected: var(--cn-purple-400); /* Selected state background color for active primary purple items. */
197
- --cn-set-purple-secondary-text: var(--cn-purple-150); /* Text color for subtle purple surfaces with good contrast. */
198
- --cn-set-purple-secondary-bg: var(--cn-purple-900); /* Background color for subdued purple surfaces. */
199
- --cn-set-purple-secondary-bg-hover: var(--cn-purple-850); /* Hover background color for subdued purple surfaces. */
200
- --cn-set-purple-secondary-bg-selected: var(--cn-purple-850); /* Hover background color for subdued purple surfaces. */
201
- --cn-set-purple-outline-text: var(--cn-purple-300); /* Standard text color for purple surfaces with balanced readability. */
202
- --cn-set-purple-outline-bg: var(--cn-purple-1000); /* Base background color for purple surfaces in default states. */
203
- --cn-set-purple-outline-border: var(--cn-purple-700); /* Border color for standard purple boundaries. */
204
- --cn-set-purple-outline-bg-hover: var(--cn-purple-950); /* Hover state background color for interactive purple surfaces. */
205
- --cn-set-purple-outline-bg-selected: var(--cn-purple-950); /* Selected state background color for active purple items. */
206
- --cn-set-brown-primary-text: var(--cn-brown-25); /* Text color for high-contrast brown surfaces. */
207
- --cn-set-brown-primary-bg: var(--cn-brown-700); /* Background color for prominent brown surfaces. */
208
- --cn-set-brown-primary-bg-hover: var(--cn-brown-600); /* Background color for prominent brown surfaces. */
209
- --cn-set-brown-secondary-text: var(--cn-brown-150); /* Text color for subtle brown surfaces with good contrast. */
210
- --cn-set-brown-secondary-bg: var(--cn-brown-900); /* Background color for subdued brown surfaces. */
211
- --cn-set-brown-secondary-bg-hover: var(--cn-brown-850); /* Hover background color for subdued brown surfaces. */
212
- --cn-set-brown-outline-text: var(--cn-brown-300); /* Standard text color for brown surfaces with balanced readability. */
213
- --cn-set-brown-outline-bg: var(--cn-brown-1000); /* Base background color for brown surfaces in default states. */
214
- --cn-set-brown-outline-border: var(--cn-brown-700); /* Border color for standard brown boundaries. */
215
- --cn-set-brown-outline-bg-hover: var(--cn-brown-950); /* Hover background color for brown surfaces. */
216
- --cn-set-cyan-primary-text: var(--cn-pure-black); /* Text color for high-contrast cyan surfaces. */
217
- --cn-set-cyan-primary-bg: var(--cn-cyan-300); /* Background color for prominent cyan surfaces. */
218
- --cn-set-cyan-primary-bg-hover: var(--cn-cyan-200); /* Background color for prominent cyan surfaces. */
219
- --cn-set-cyan-secondary-text: var(--cn-cyan-150); /* Text color for subtle cyan surfaces with good contrast. */
220
- --cn-set-cyan-secondary-bg: var(--cn-cyan-850); /* Background color for subdued cyan surfaces. */
221
- --cn-set-cyan-secondary-bg-hover: var(--cn-cyan-800); /* Hover background color for subdued cyan surfaces. */
222
- --cn-set-cyan-outline-text: var(--cn-cyan-200); /* Standard text color for cyan surfaces with balanced readability. */
223
- --cn-set-cyan-outline-bg: var(--cn-cyan-1000); /* Base background color for cyan surfaces in default states. */
224
- --cn-set-cyan-outline-border: var(--cn-cyan-700); /* Border color for standard cyan boundaries. */
225
- --cn-set-cyan-outline-bg-hover: var(--cn-cyan-950); /* Hover background color for cyan surfaces. */
226
- --cn-set-indigo-primary-text: var(--cn-pure-black); /* Text color for high-contrast indigo surfaces. */
227
- --cn-set-indigo-primary-bg: var(--cn-indigo-400); /* Background color for prominent indigo surfaces. */
228
- --cn-set-indigo-primary-bg-hover: var(--cn-indigo-300); /* Hover state background color for interactive primary indigo surfaces. */
229
- --cn-set-indigo-primary-bg-selected: var(--cn-indigo-300); /* Selected state background color for active primary indigo items. */
230
- --cn-set-indigo-secondary-text: var(--cn-indigo-200); /* Text color for subtle indigo surfaces with good contrast. */
231
- --cn-set-indigo-secondary-bg: var(--cn-indigo-900); /* Background color for subdued indigo surfaces. */
232
- --cn-set-indigo-secondary-bg-hover: var(--cn-indigo-850); /* Hover background color for subdued indigo surfaces. */
233
- --cn-set-indigo-secondary-bg-selected: var(--cn-indigo-850); /* Selected state background color for active secondary indigo items. */
234
- --cn-set-indigo-outline-text: var(--cn-indigo-300); /* Standard text color for indigo surfaces with balanced readability. */
235
- --cn-set-indigo-outline-bg: var(--cn-indigo-1000); /* Base background color for indigo surfaces in default states. */
236
- --cn-set-indigo-outline-border: var(--cn-indigo-700); /* Border color for standard indigo boundaries. */
237
- --cn-set-indigo-outline-bg-hover: var(--cn-indigo-950); /* Hover background color for indigo surfaces. */
238
- --cn-set-indigo-outline-bg-selected: var(--cn-indigo-950); /* Selected state background color for active indigo items. */
239
- --cn-set-forest-green-primary-text: var(--cn-pure-black); /* Text color for high-contrast forest-green surfaces. */
240
- --cn-set-forest-green-primary-bg: var(--cn-lime-200); /* Background color for prominent forest-green surfaces. */
241
- --cn-set-forest-green-primary-bg-hover: var(--cn-lime-150); /* Background color for prominent forest-green surfaces. */
242
- --cn-set-forest-green-secondary-text: var(--cn-lime-150); /* Text color for subtle forest-green surfaces with good contrast. */
243
- --cn-set-forest-green-secondary-bg: var(--cn-lime-900); /* Background color for subdued forest-green surfaces. */
244
- --cn-set-forest-green-secondary-bg-hover: var(--cn-lime-850); /* Hover background color for subdued forest-green surfaces. */
245
- --cn-set-forest-green-outline-text: var(--cn-lime-200); /* Standard text color for forest-green surfaces with balanced readability. */
246
- --cn-set-forest-green-outline-bg: var(--cn-lime-1000); /* Base background color for forest-green surfaces in default states. */
247
- --cn-set-forest-green-outline-border: var(--cn-lime-700); /* Border color for standard forest-green boundaries. */
248
- --cn-set-forest-green-outline-bg-hover: var(--cn-lime-950); /* Hover background color for forest-green surfaces. */
249
- --cn-set-mint-primary-text: var(--cn-pure-black); /* Text color for high-contrast mint surfaces. */
250
- --cn-set-mint-primary-bg: var(--cn-mint-300); /* Background color for prominent mint surfaces. */
251
- --cn-set-mint-primary-bg-hover: var(--cn-mint-200); /* Hover state background color for interactive primary mint surfaces. */
252
- --cn-set-mint-primary-bg-selected: var(--cn-mint-200); /* Selected state background color for active primary mint items. */
253
- --cn-set-mint-secondary-text: var(--cn-mint-150); /* Text color for subtle mint surfaces with good contrast. */
254
- --cn-set-mint-secondary-bg: var(--cn-mint-900); /* Background color for subdued mint surfaces. */
255
- --cn-set-mint-secondary-bg-hover: var(--cn-mint-850); /* Hover background color for subdued mint surfaces. */
256
- --cn-set-mint-secondary-bg-selected: var(--cn-mint-850); /* Selected state background color for active secondary mint items. */
257
- --cn-set-mint-outline-text: var(--cn-mint-300); /* Standard text color for mint surfaces with balanced readability. */
258
- --cn-set-mint-outline-bg: var(--cn-mint-1000); /* Base background color for mint surfaces in default states. */
259
- --cn-set-mint-outline-border: var(--cn-mint-700); /* Border color for standard mint boundaries. */
260
- --cn-set-mint-outline-bg-hover: var(--cn-mint-950); /* Hover background color for mint surfaces. */
261
- --cn-set-mint-outline-bg-selected: var(--cn-mint-950); /* Selected state background color for active mint items. */
262
- --cn-set-orange-primary-text: var(--cn-pure-black); /* Text color for solid orange surfaces with good contrast. */
263
- --cn-set-orange-primary-bg: var(--cn-orange-400); /* Background color for solid orange surfaces. */
264
- --cn-set-orange-primary-bg-hover: var(--cn-orange-300); /* Background color for solid orange surfaces. */
265
- --cn-set-orange-secondary-text: var(--cn-orange-200); /* Text color for subtle orange surfaces with good contrast. */
266
- --cn-set-orange-secondary-bg: var(--cn-orange-900); /* Background color for subdued orange surfaces. */
267
- --cn-set-orange-secondary-bg-hover: var(--cn-orange-850); /* Hover background color for subdued orange surfaces. */
268
- --cn-set-orange-outline-text: var(--cn-orange-400); /* Standard text color for orange surfaces with balanced readability. */
269
- --cn-set-orange-outline-bg: var(--cn-orange-1000); /* Base background color for orange surfaces in default states. */
270
- --cn-set-orange-outline-border: var(--cn-orange-700); /* Border color for standard orange boundaries. */
271
- --cn-set-orange-outline-bg-hover: var(--cn-orange-950); /* Hover background color for orange surfaces. */
272
- --cn-set-pink-primary-text: var(--cn-pure-black); /* Text color for high-contrast pink surfaces. */
273
- --cn-set-pink-primary-bg: var(--cn-pink-400); /* Background color for prominent pink surfaces. */
274
- --cn-set-pink-primary-bg-hover: var(--cn-pink-300); /* Hover state background color for interactive primary pink surfaces. */
275
- --cn-set-pink-primary-bg-selected: var(--cn-pink-300); /* Selected state background color for active primary pink items. */
276
- --cn-set-pink-secondary-text: var(--cn-pink-150); /* Text color for subtle pink surfaces with good contrast. */
277
- --cn-set-pink-secondary-bg: var(--cn-pink-900); /* Background color for subdued pink surfaces. */
278
- --cn-set-pink-secondary-bg-hover: var(--cn-pink-850); /* Hover background color for subdued pink surfaces. */
279
- --cn-set-pink-secondary-bg-selected: var(--cn-pink-850); /* Selected state background color for active secondary pink items. */
280
- --cn-set-pink-outline-text: var(--cn-pink-300); /* Standard text color for pink surfaces with balanced readability. */
281
- --cn-set-pink-outline-bg: var(--cn-pink-1000); /* Base background color for pink surfaces in default states. */
282
- --cn-set-pink-outline-border: var(--cn-pink-700); /* Border color for standard pink boundaries. */
283
- --cn-set-pink-outline-bg-hover: var(--cn-pink-950); /* Hover background color for pink surfaces. */
284
- --cn-set-pink-outline-bg-selected: var(--cn-pink-950); /* Selected state background color for active pink items. */
285
- --cn-set-violet-primary-text: var(--cn-pure-black); /* Text color for high-contrast violet surfaces. */
286
- --cn-set-violet-primary-bg: var(--cn-violet-500); /* Background color for prominent violet surfaces. */
287
- --cn-set-violet-primary-bg-hover: var(--cn-violet-400); /* Hover state background color for interactive primary violet surfaces. */
288
- --cn-set-violet-primary-bg-selected: var(--cn-violet-400); /* Selected state background color for active primary violet items. */
289
- --cn-set-violet-secondary-text: var(--cn-violet-200); /* Text color for subtle violet surfaces with good contrast. */
290
- --cn-set-violet-secondary-bg: var(--cn-violet-900); /* Background color for subdued violet surfaces. */
291
- --cn-set-violet-secondary-bg-hover: var(--cn-violet-850); /* Hover background color for subdued violet surfaces. */
292
- --cn-set-violet-secondary-bg-selected: var(--cn-violet-850); /* Selected state background color for active secondary violet items. */
293
- --cn-set-violet-outline-text: var(--cn-violet-300); /* Standard text color for violet surfaces with balanced readability. */
294
- --cn-set-violet-outline-bg: var(--cn-violet-1000); /* Base background color for violet surfaces in default states. */
295
- --cn-set-violet-outline-border: var(--cn-violet-700); /* Border color for standard violet boundaries. */
296
- --cn-set-violet-outline-bg-hover: var(--cn-violet-950); /* Hover background color for violet surfaces. */
297
- --cn-set-violet-outline-bg-selected: var(--cn-violet-950); /* Selected state background color for active violet items. */
298
- --cn-comp-avatar-shadow: lch(from var(--cn-gray-500) l c h / 0.24); /* Inset border color for avatars. Creates subtle definition inside the avatar element. */
299
- --cn-comp-dialog-backdrop: lch(from var(--cn-pure-black) l c h / 0.8); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */
300
- --cn-comp-dialog-backdrop-nested: lch(from var(--cn-pure-black) l c h / 0.45); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */
301
- --cn-comp-diff-plain-line-number-color: var(--cn-gray-200); /* Text color for unchanged line numbers, visually subdued compared to changed content. */
302
- --cn-comp-diff-empty-content: var(--cn-gray-1000); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */
303
- --cn-comp-diff-hunk-content: lch(from var(--cn-indigo-600) l c h / 0.15); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */
304
- --cn-comp-diff-hunk-line-number: lch(from var(--cn-indigo-600) l c h / 0.25); /* Background for line numbers in section headers. */
305
- --cn-comp-diff-hunk-content-color: var(--cn-gray-300); /* Text color for section header content showing file position information. */
306
- --cn-comp-diff-hljs: var(--cn-gray-150); /* Base text color for code. */
307
- --cn-comp-header-item-hover: lch(from var(--cn-gray-600) l c h / 0.18); /* Hover color for header items. Creates distinct visual identification of interactive header elements. */
308
- --cn-comp-header-item-selected: lch(from var(--cn-gray-600) l c h / 0.24); /* Selected color for header items. Creates distinct visual identification of interactive header elements. */
309
- --cn-comp-pipeline-dotes: var(--cn-gray-900); /* Refers to the dotted pattern visible in the background of the workspace. */
310
- --cn-comp-pipeline-card-footer: var(--cn-gray-1000);
311
- --cn-comp-pipeline-bg: var(--cn-pure-black);
312
- --cn-comp-sidebar-item-hover: lch(from var(--cn-gray-600) l c h / 0.18); /* Background color for sidebar items on hover. Provides subtle visual feedback for interactive elements. */
313
- --cn-comp-scrollbar-thumb: var(--cn-gray-700); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */
314
- --cn-comp-slider-track-base: var(--cn-gray-800); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */
315
- --cn-comp-slider-track-progress-stripes: lch(from var(--cn-pure-black) l c h / 0.35); /* Striped pattern overlay for slider progress track. Adds visual texture to indicate progress. */
316
- --cn-comp-toast-danger-bg: var(--cn-red-850); /* Background color for danger toast notifications. Provides visual context for error and critical messages. */
317
- --cn-comp-toast-danger-border: var(--cn-red-800); /* Border color for danger toast notifications. Creates definition and emphasis for critical messages. */
318
- --cn-comp-toast-danger-text: var(--cn-red-25); /* Text color for danger toast notifications. Ensures maximum readability for critical messages. */
319
- --cn-comp-toast-danger-transparent-btn-text: var(--cn-red-25); /* Text color for transparent buttons in danger toasts. Provides clear readability for secondary actions. */
320
- --cn-comp-toast-danger-transparent-btn-text-hover: var(--cn-red-50); /* Hover text color for transparent buttons in danger toasts. Provides visual feedback for interactive elements. */
321
- --cn-comp-toast-danger-transparent-btn-text-active: var(--cn-red-100); /* Active text color for transparent buttons in danger toasts. Indicates pressed state for interactive elements. */
322
- --cn-comp-toast-danger-action-btn-text: var(--cn-pure-black); /* Text color for action buttons in danger toasts. Provides high contrast for primary actions. */
323
- --cn-comp-toast-danger-action-btn-bg: var(--cn-red-25); /* Background color for action buttons in danger toasts. Creates strong contrast for primary actions. */
324
- --cn-comp-toast-danger-action-btn-bg-hover: var(--cn-red-50); /* Hover background color for action buttons in danger toasts. Provides visual feedback for interactive elements. */
325
- --cn-comp-toast-danger-action-btn-bg-selected: var(--cn-red-100); /* Selected background color for action buttons in danger toasts. Indicates pressed state for interactive elements. */
326
- --cn-comp-tooltip-bg: var(--cn-gray-25); /* Background color for tooltip components. Provides high contrast backdrop for tooltip content. */
327
- --cn-comp-tooltip-border: var(--cn-gray-25); /* Border color for tooltip components. Defines tooltip boundaries. */
328
- --cn-comp-tooltip-text: var(--cn-pure-black); /* Text color for tooltip content. Ensures maximum readability against tooltip background. */
329
- --cn-comp-data-viz-01-blue: var(--cn-blue-500); /* Primary data visualization color (1st in sequence). Use as the default first color in charts and graphs. */
330
- --cn-comp-data-viz-02-purple: var(--cn-purple-600); /* Secondary data visualization color (2nd in sequence). Use as the second color when multiple data series are needed. */
331
- --cn-comp-data-viz-03-pink: var(--cn-pink-500); /* Data visualization color (3rd in sequence). Use as the third color in multi-series visualizations. */
332
- --cn-comp-data-viz-04-green: var(--cn-forest-400); /* Data visualization color (4th in sequence). Use as the fourth color in multi-series visualizations. */
333
- --cn-comp-data-viz-05-indigo: var(--cn-indigo-500); /* Data visualization color (5th in sequence). Use as the fifth color in multi-series visualizations. */
334
- --cn-comp-data-viz-06-brown: var(--cn-brown-600); /* Data visualization color (6th in sequence). Use as the sixth color in multi-series visualizations. */
335
- --cn-comp-data-viz-07-cyan: var(--cn-cyan-400); /* Data visualization color (7th in sequence). Use as the seventh color in multi-series visualizations. */
336
- --cn-comp-data-viz-08-orange: var(--cn-orange-500); /* Data visualization color (8th in sequence). Use as the eighth color in multi-series visualizations. */
337
- --cn-comp-data-viz-09-forest: var(--cn-forest-700); /* Data visualization color (9th in sequence). Use as the ninth color in multi-series visualizations. */
338
- --cn-comp-data-viz-10-red: var(--cn-red-600); /* Data visualization color (10th in sequence). Use as the tenth color in multi-series visualizations. */
339
- --cn-comp-data-viz-11-yellow: var(--cn-yellow-300); /* Data visualization color (11th in sequence). Use as the eleventh color in multi-series visualizations. */
340
- --cn-comp-data-viz-12-gray: var(--cn-gray-500); /* Data visualization color (12th in sequence). Use last or for neutral/inactive data series. */
341
- --cn-comp-widget-test-intelligence-bg: linear-gradient(105deg, var(--cn-purple-1000) -18.5%, var(--cn-bg-1) 84%); /* Background gradient for test intelligence widget. */
342
- --cn-logo-icon: var(--cn-blue-500); /* Icon color for Logo in sidebar navigation. */
343
- --cn-shadow-color-0: lch(from var(--cn-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */
344
- --cn-shadow-color-1: lch(from var(--cn-pure-black) l c h / 0.6); /* Light shadow color. Creates subtle depth for small UI elements. */
345
- --cn-shadow-color-2: lch(from var(--cn-pure-black) l c h / 0.6); /* Medium shadow color. Provides balanced depth for common UI components. */
346
- --cn-shadow-color-3: lch(from var(--cn-pure-black) l c h / 0.5); /* Medium shadow color. Creates moderate depth for elevated components. */
347
- --cn-shadow-color-4: lch(from var(--cn-pure-black) l c h / 0.5); /* Deep shadow color. Provides significant depth for floating elements. */
348
- --cn-shadow-color-5: lch(from var(--cn-pure-black) l c h / 0.5); /* Very deep shadow color. Creates dramatic elevation for modal content. */
349
- --cn-shadow-color-6: lch(from var(--cn-pure-black) l c h / 0.6); /* Extremely deep shadow color. Provides maximum depth for highly elevated elements. */
350
- --cn-shadow-color-inner: lch(from var(--cn-pure-black) l c h / 0.6); /* Inner shadow color. Creates subtle inset depth for contained elements. */
351
- --cn-gradient-ai-stop-1: var(--cn-blue-400); /* First gradient stop for AI-themed gradients. */
352
- --cn-gradient-ai-stop-2: var(--cn-indigo-600); /* Second gradient stop for AI-themed gradients. */
353
- --cn-gradient-ai-stop-3: var(--cn-violet-600); /* Third gradient stop for AI-themed gradients. */
354
- --cn-gradient-ai-outline-bg-stop-1: var(--cn-gray-950); /* First gradient stop for AI outline backgrounds. */
355
- --cn-gradient-ai-outline-bg-stop-2: var(--cn-indigo-1000); /* Second gradient stop for AI outline backgrounds. */
356
- --cn-gradient-ai-outline-bg-stop-3: var(--cn-indigo-900); /* Third gradient stop for AI outline backgrounds. */
357
- --cn-gradient-ai-outline-bg-stop-4: var(--cn-indigo-850); /* Fourth gradient stop for AI outline backgrounds. */
358
- --cn-gradient-ai-chat-bubble-from: lch(from var(--cn-indigo-600) l c h / 0.45); /* Starting color for AI chat bubble gradients. */
359
- --cn-gradient-ai-chat-bubble-to: lch(from var(--cn-gray-600) l c h / 0.09); /* Ending color for AI chat bubble gradients. */
360
- --cn-gradient-skeleton-stop-1: var(--cn-gray-950); /* First gradient stop for skeleton shimmer animation. */
361
- --cn-gradient-skeleton-stop-2: var(--cn-gray-850); /* Second gradient stop for skeleton shimmer animation. */
362
- --cn-gradient-skeleton-stop-3: var(--cn-gray-950); /* Third gradient stop for skeleton shimmer animation. */
363
- --cn-gradient-skeleton-mask-from: var(--cn-pure-white); /* Starting color for skeleton mask gradient. */
364
- --cn-gradient-skeleton-mask-to: lch(from var(--cn-pure-white) l c h / 0); /* Ending color for skeleton mask gradient. */
365
- --cn-gradient-sidebar-selected-from: lch(from var(--cn-indigo-500) l c h / 0.25); /* Starting color for selected sidebar item gradients. */
366
- --cn-gradient-sidebar-selected-to: lch(from var(--cn-gray-600) l c h / 0.11); /* Ending color for selected sidebar item gradients. */
367
- --cn-gradient-img-empty-state-bg-stop-1: var(--cn-gray-600); /* First gradient stop for empty state background. */
368
- --cn-gradient-img-empty-state-bg-stop-2: var(--cn-gray-700); /* Second gradient stop for empty state background. */
369
- --cn-gradient-img-empty-state-bg-stop-3: var(--cn-gray-800); /* Third gradient stop for empty state background. */
370
- --cn-gradient-img-empty-state-bg-stop-4: var(--cn-gray-850); /* Fourth gradient stop for empty state background. */
371
- --cn-gradient-img-empty-state-bg-stop-5: var(--cn-gray-900); /* Fifth gradient stop for empty state background. */
372
- --cn-gradient-img-empty-state-bg-stop-6: var(--cn-gray-950); /* Sixth gradient stop for empty state background. */
373
- --cn-gradient-img-empty-state-border-from: lch(from var(--cn-pure-white) l c h / 0.12); /* Starting color for empty state border gradient. */
374
- --cn-gradient-img-empty-state-border-to: lch(from var(--cn-pure-white) l c h / 0.01); /* Ending color for empty state border gradient. */
375
- --cn-gradient-img-empty-state-icon-stop-1: var(--cn-gray-100); /* First gradient stop for empty state icon. */
376
- --cn-gradient-img-empty-state-icon-stop-2: var(--cn-gray-200); /* Second gradient stop for empty state icon. */
377
- --cn-gradient-img-empty-state-icon-stop-3: var(--cn-gray-500); /* Third gradient stop for empty state icon. */
378
- --cn-gradient-img-empty-state-lines-from: var(--cn-gray-850); /* Starting color for empty state decorative lines. */
379
- --cn-gradient-img-empty-state-lines-to: var(--cn-gray-950); /* Ending color for empty state decorative lines. */
380
- --cn-gradient-img-empty-state-logo-from: var(--cn-gray-25); /* Starting color for empty state logo gradient. */
381
- --cn-gradient-img-empty-state-logo-to: var(--cn-gray-400); /* Ending color for empty state logo gradient. */
382
- --cn-gradient-img-empty-state-bubble-t-bg-from: var(--cn-gray-850); /* Starting color for empty state top bubble background. */
383
- --cn-gradient-img-empty-state-bubble-t-bg-to: var(--cn-gray-950); /* Ending color for empty state top bubble background. */
384
- --cn-gradient-img-empty-state-bubble-t-icon-from: var(--cn-gray-800); /* Starting color for empty state top bubble icon. */
385
- --cn-gradient-img-empty-state-bubble-t-icon-to: var(--cn-gray-300); /* Ending color for empty state top bubble icon. */
386
- --cn-gradient-img-empty-state-bubble-b-bg-from: var(--cn-gray-950); /* Starting color for empty state bottom bubble background. */
387
- --cn-gradient-img-empty-state-bubble-b-bg-to: var(--cn-gray-850); /* Ending color for empty state bottom bubble background. */
388
- --cn-gradient-img-empty-state-bubble-b-icon-from: var(--cn-gray-300); /* Starting color for empty state bottom bubble icon. */
389
- --cn-gradient-img-empty-state-bubble-b-icon-to: var(--cn-gray-800); /* Ending color for empty state bottom bubble icon. */
390
- --cn-gradient-flow-onboard-img-color-bubble-default-from: lch(from var(--cn-blue-500) l c h / 0.6); /* Starting color for default onboarding color bubble. */
391
- --cn-gradient-flow-onboard-img-color-bubble-default-to: lch(from var(--cn-gray-850) l c h / 0); /* Ending color for default onboarding color bubble. */
392
- --cn-gradient-flow-onboard-img-color-bubble-danger-from: lch(from var(--cn-red-300) l c h / 0.6); /* Starting color for danger onboarding color bubble. */
393
- --cn-gradient-flow-onboard-img-color-bubble-danger-to: lch(from var(--cn-gray-850) l c h / 0); /* Ending color for danger onboarding color bubble. */
394
- --cn-gradient-flow-onboard-ellipse-t-1-default-from: lch(from var(--cn-blue-500) l c h / 0.06); /* Starting color for default onboarding top ellipse 1. */
395
- --cn-gradient-flow-onboard-ellipse-t-1-default-to: lch(from var(--cn-blue-500) l c h / 0); /* Ending color for default onboarding top ellipse 1. */
396
- --cn-gradient-flow-onboard-ellipse-t-1-danger-from: lch(from var(--cn-red-300) l c h / 0.06); /* Starting color for danger onboarding top ellipse 1. */
397
- --cn-gradient-flow-onboard-ellipse-t-1-danger-to: lch(from var(--cn-red-300) l c h / 0); /* Ending color for danger onboarding top ellipse 1. */
398
- --cn-gradient-flow-onboard-ellipse-t-2-default-from: lch(from var(--cn-blue-500) l c h / 0.08); /* Starting color for default onboarding top ellipse 2. */
399
- --cn-gradient-flow-onboard-ellipse-t-2-default-to: lch(from var(--cn-blue-500) l c h / 0); /* Ending color for default onboarding top ellipse 2. */
400
- --cn-gradient-flow-onboard-ellipse-t-2-danger-from: lch(from var(--cn-red-300) l c h / 0.08); /* Starting color for danger onboarding top ellipse 2. */
401
- --cn-gradient-flow-onboard-ellipse-t-2-danger-to: lch(from var(--cn-red-300) l c h / 0); /* Ending color for danger onboarding top ellipse 2. */
402
- --cn-gradient-flow-onboard-ellipse-b-default-from: lch(from var(--cn-blue-500) l c h / 0.08); /* Starting color for default onboarding bottom ellipse. */
403
- --cn-gradient-flow-onboard-ellipse-b-default-to: lch(from var(--cn-blue-500) l c h / 0); /* Ending color for default onboarding bottom ellipse. */
404
- --cn-gradient-flow-onboard-ellipse-b-danger-from: lch(from var(--cn-red-300) l c h / 0.08); /* Starting color for danger onboarding bottom ellipse. */
405
- --cn-gradient-flow-onboard-ellipse-b-danger-to: lch(from var(--cn-red-300) l c h / 0); /* Ending color for danger onboarding bottom ellipse. */
406
- --cn-gradient-pipeline-running-border-from: var(--cn-yellow-400); /* Starting color for running pipeline border gradients. */
407
- --cn-gradient-pipeline-running-border-to: lch(from var(--cn-yellow-300) l c h / 0); /* Ending color for running pipeline border gradients. */
408
- --cn-gradient-pipeline-running-glow-from: lch(from var(--cn-yellow-600) l c h / 0.7); /* Starting color for running pipeline glow gradients. */
409
- --cn-gradient-pipeline-running-glow-to: lch(from var(--cn-yellow-700) l c h / 0); /* Ending color for running pipeline glow gradients. */
410
- --cn-disabled-opacity: var(--cn-opacity-60); /* Opacity value for disabled interactive elements. Creates visual distinction for unavailable states. */
411
- --cn-icon-devops: var(--cn-mint-200); /* Brand color for DevOps category icons. Creates visual categorization. */
412
- --cn-icon-testing: var(--cn-orange-300); /* Brand color for Testing category icons. Creates visual categorization. */
413
- --cn-icon-security: var(--cn-blue-400); /* Brand color for Security category icons. Creates visual categorization. */
414
- --cn-icon-efficiency: var(--cn-cyan-200); /* Brand color for Efficiency category icons. Creates visual categorization. */
415
- --cn-icon-platform: var(--cn-purple-400); /* Brand color for Platform category icons. Creates visual categorization. */
416
- /**
417
- * Primary color for text and icons in success content. Communicates positive outcomes and completion states.
418
- *
419
- * Common uses: Success message text, completion text, positive indicators.
420
- */
421
- --cn-text-success: var(--cn-set-success-outline-text);
422
- /**
423
- * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.
424
- *
425
- * Common uses: Error message text, validation text, destructive action labels.
426
- */
427
- --cn-text-danger: var(--cn-set-danger-outline-text);
428
- /**
429
- * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.
430
- *
431
- * Common uses: Warning message text, alert text, important notifications.
432
- */
433
- --cn-text-warning: var(--cn-set-warning-outline-text);
434
- /**
435
- * Text color for merged content and pull request states. Provides distinct visual identity for merge-related information and completed integration states.
436
- *
437
- * Common uses: Merge commit messages, pull request merged status, integration completion indicators, merged branch labels.
438
- */
439
- --cn-text-merged: var(--cn-set-purple-outline-text);
440
- /**
441
- * Brand-colored border for active states and focus indicators. Provides branded visual feedback for user interactions and meets accessibility requirements for focus visibility.
442
- *
443
- * Common uses: Focus rings, active form field borders, primary button outlines, keyboard navigation highlights, selected interactive elements.
444
- */
445
- --cn-border-brand: var(--cn-set-brand-outline-border);
446
- --cn-set-ai-outline-border: linear-gradient(131deg, var(--cn-gradient-ai-stop-1) 0%, var(--cn-gradient-ai-stop-2) 50%, var(--cn-gradient-ai-stop-3) 100%); /* Distinctive gradient border for AI-related areas, using a multi-color pattern. */
447
- --cn-set-ai-outline-bg-gradient: linear-gradient(102deg, var(--cn-gradient-ai-outline-bg-stop-1) 8%, var(--cn-gradient-ai-outline-bg-stop-2) 35%, var(--cn-gradient-ai-outline-bg-stop-3) 65%, var(--cn-gradient-ai-outline-bg-stop-4) 87%); /* Hover state background color for interactive AI surfaces. */
448
- --cn-set-gray-secondary-text: var(--cn-text-1); /* Text color for subtle gray surfaces with good contrast. */
449
- --cn-set-gray-outline-text: var(--cn-text-2); /* Standard text color for gray surfaces with balanced readability. */
450
- --cn-set-gray-outline-bg: var(--cn-bg-2); /* Base background color for gray surfaces in default states. */
451
- --cn-set-gray-outline-border: var(--cn-border-2); /* Border color for standard gray boundaries. */
452
- --cn-comp-alert-fade-default: linear-gradient(0deg, var(--cn-set-gray-secondary-bg) 42%, var(--cn-gradient-alert-fade-default) 100%); /* Gradient fade for default alert backgrounds. Creates visual emphasis for notifications. */
453
- --cn-comp-alert-fade-danger: linear-gradient(0deg, var(--cn-set-danger-secondary-bg) 42%, var(--cn-gradient-alert-fade-danger) 100%); /* Gradient fade for danger alert backgrounds. Emphasizes critical messages. */
454
- --cn-comp-alert-fade-warning: linear-gradient(0deg, var(--cn-set-warning-secondary-bg) 42%, var(--cn-gradient-alert-fade-warning) 100%); /* Gradient fade for warning alert backgrounds. Highlights cautionary information. */
455
- --cn-comp-alert-fade-success: linear-gradient(0deg, var(--cn-set-success-secondary-bg) 42%, var(--cn-gradient-alert-fade-success) 100%); /* Gradient fade for success alert backgrounds. Celebrates positive outcomes. */
456
- --cn-comp-dialog-fade-end: linear-gradient(0deg, var(--cn-bg-2) 0%, var(--cn-gradient-dialog-fade) 100%); /* Gradient fade for dialog bottom edge. Creates smooth visual transition. */
457
- --cn-comp-diff-background: var(--cn-bg-0); /* Background color for the diff interface that allows code and difference highlights to remain visually prominent. */
458
- --cn-comp-diff-add-content: lch(from var(--cn-set-success-secondary-bg) l c h / 0.30); /* Green background highlighting newly added code lines while maintaining readability. */
459
- --cn-comp-diff-add-line-number: lch(from var(--cn-set-success-secondary-bg-hover) l c h / 0.50); /* Background for line numbers of added code, providing visual connection to added content. */
460
- --cn-comp-diff-add-content-highlight: lch(from var(--cn-set-success-secondary-bg-hover) l c h / 0.60); /* Stronger emphasis color for specific character changes within added lines. */
461
- --cn-comp-diff-add-widget: var(--cn-set-brand-primary-bg); /* Background for interactive UI elements related to added content. */
462
- --cn-comp-diff-add-widget-color: var(--cn-set-brand-primary-text); /* Text/icon color for add-related interactive elements, ensuring readability. */
463
- --cn-comp-diff-del-content: lch(from var(--cn-set-danger-secondary-bg) l c h / 0.50); /* Red background highlighting removed code lines without causing eye strain. */
464
- --cn-comp-diff-del-line-number: lch(from var(--cn-set-danger-secondary-bg-hover) l c h / 0.80); /* Background for line numbers of deleted code, connecting numbers to removed content. */
465
- --cn-comp-diff-del-content-highlight: lch(from var(--cn-set-danger-primary-bg) l c h / 0.18); /* Stronger emphasis color for specific character changes within deleted lines. */
466
- --cn-comp-diff-plain-content: var(--cn-bg-1); /* Neutral background for unchanged code that allows modified content to stand out. */
467
- --cn-comp-diff-plain-line-number: var(--cn-bg-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */
468
- --cn-comp-diff-hljs-comment: var(--cn-text-3); /* Color for code comments in syntax highlighting. Provides reduced emphasis to distinguish explanatory text from executable code. */
469
- --cn-comp-diff-hljs-keyword: var(--cn-set-purple-outline-text); /* Color for programming language keywords in syntax highlighting. Emphasizes reserved words and language constructs. */
470
- --cn-comp-diff-hljs-title-class: var(--cn-set-warning-outline-text); /* Color for class names and type definitions in syntax highlighting. Highlights object-oriented programming constructs and custom types. */
471
- --cn-comp-diff-hljs-string: var(--cn-set-success-outline-text); /* Color for string literals in syntax highlighting. Distinguishes text content and string values from other code elements. */
472
- --cn-comp-diff-hljs-title-function: var(--cn-set-blue-outline-text); /* Color for function names and method definitions in syntax highlighting. Emphasizes callable code blocks and procedures. */
473
- --cn-comp-diff-hljs-name: var(--cn-set-danger-outline-text); /* Color for HTML tag names and XML element names in syntax highlighting. Distinguishes markup structure from content. */
474
- --cn-comp-diff-hljs-literal: var(--cn-set-cyan-outline-text); /* Color for literal values like numbers, booleans, and constants in syntax highlighting. Emphasizes fixed data values. */
475
- --cn-comp-diff-hljs-attr: var(--cn-set-orange-outline-text); /* Color for HTML/XML attributes and object properties in syntax highlighting. Highlights configurable element properties. */
476
- --cn-comp-monaco-foreground: var(--cn-comp-diff-hljs); /* Default text color in Monaco Editor. */
477
- --cn-comp-monaco-cursor: var(--cn-text-1); /* Cursor color in Monaco Editor. */
478
- --cn-comp-monaco-whitespace: var(--cn-text-4); /* Color of whitespace characters in Monaco Editor. */
479
- --cn-comp-monaco-constant: var(--cn-set-orange-outline-text); /* Color for constants and other static values. */
480
- --cn-comp-monaco-invalid-bg: var(--cn-set-warning-outline-bg); /* Background color for invalid or error tokens. */
481
- --cn-comp-monaco-invalid-text: var(--cn-set-warning-outline-text); /* Text color for invalid or error tokens. */
482
- --cn-comp-monaco-diff-header-bg: var(--cn-set-brand-outline-bg); /* Background color for diff headers. */
483
- --cn-comp-monaco-diff-range: var(--cn-text-brand); /* Color for diff range indicators. */
484
- --cn-comp-monaco-line-number: var(--cn-text-4); /* Color for line numbers in Monaco Editor gutter. */
485
- --cn-comp-monaco-indent-guide: var(--cn-border-3); /* Color for indent guide lines in Monaco Editor. Shows code nesting levels. */
486
- --cn-comp-monaco-indent-guide-active: var(--cn-border-1); /* Color for active indent guide line in Monaco Editor. Highlights current code block. */
487
- --cn-comp-input-bg: var(--cn-bg-3); /* Background color for form input fields. Provides clear visual distinction from surrounding content while maintaining readability and accessibility standards. */
488
- --cn-comp-link-text: var(--cn-text-brand); /* Default color for text links. Creates distinct visual identification of interactive text elements. */
489
- --cn-comp-link-text-hover: lch(79.6 37.4 253); /* Hover color for text links. */
490
- --cn-comp-pipeline-running-border: linear-gradient(180deg, var(--cn-gradient-pipeline-running-border-from) 0%, var(--cn-gradient-pipeline-running-border-to) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */
491
- --cn-comp-pipeline-running-glow: linear-gradient(180deg, var(--cn-gradient-pipeline-running-glow-from) 0%, var(--cn-gradient-pipeline-running-glow-to) 100%); /* Gradient glow effect for running pipeline states. Provides visual indication of active processing. */
492
- --cn-comp-pipeline-stage-card-bg: lch(from var(--cn-bg-3) l c h / 0.65); /* Semi-transparent background for pipeline stage cards. Creates layered visual hierarchy. */
493
- --cn-comp-sidebar-bg: var(--cn-bg-0); /* Background color for the sidebar container. Provides foundational layer for navigation elements. */
494
- --cn-comp-sidebar-item-text: var(--cn-text-2); /* Default text color for sidebar navigation items. Provides optimal readability for menu labels. */
495
- --cn-comp-sidebar-item-text-hover: var(--cn-text-1); /* Text color for sidebar items on hover state. Creates higher contrast for interactive feedback. */
496
- --cn-comp-sidebar-item-text-selected: var(--cn-text-1); /* Text color for selected sidebar items. Emphasizes the current active navigation state. */
497
- --cn-comp-sidebar-item-text-subtle: var(--cn-text-3); /* Text color for sidebar. Provides reduced emphasis for section headers and categorization. */
498
- --cn-comp-sidebar-item-selected: linear-gradient(95deg, var(--cn-gradient-sidebar-selected-from) -13.12%, var(--cn-gradient-sidebar-selected-to) 84.9%);; /* Background color for selected sidebar items. Indicates the current active navigation state with stronger emphasis than hover. */
499
- --cn-comp-sidebar-item-bg-draggable: var(--cn-bg-2); /* Background color for draggable sidebar items. Provides visual feedback during drag operations. */
500
- --cn-comp-sidebar-separator: var(--cn-border-3); /* Color for separator lines between sidebar sections. Creates visual grouping and hierarchy. */
501
- --cn-comp-selection-unselected-item: var(--cn-text-2); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */
502
- --cn-comp-selection-unselected-item-hover: var(--cn-set-brand-primary-bg); /* Hover text color for unselected items in selection controls. */
503
- --cn-comp-selection-unselected-bg: var(--cn-bg-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */
504
- --cn-comp-selection-unselected-bg-hover: var(--cn-bg-2); /* Hover background color for unselected items in selection controls. */
505
- --cn-comp-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */
506
- --cn-comp-selection-selected-item: var(--cn-set-brand-primary-text); /* Color for selected items in selection controls. Creates high contrast against selected background state. */
507
- --cn-comp-selection-selected-bg: var(--cn-set-brand-primary-bg); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */
508
- --cn-comp-selection-selected-bg-hover: var(--cn-set-brand-primary-bg-hover); /* Hover background color for selected items in selection controls. */
509
- --cn-comp-selection-selected-border: var(--cn-set-brand-primary-bg); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */
510
- --cn-comp-selection-selected-border-hover: var(--cn-set-brand-primary-bg-hover); /* Hover border color for selected items in selection controls. */
511
- --cn-comp-skeleton-bg: linear-gradient(90deg, var(--cn-gradient-skeleton-stop-1) 0%, var(--cn-gradient-skeleton-stop-2) 50%, var(--cn-gradient-skeleton-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */
512
- --cn-comp-skeleton-mask: linear-gradient(180deg, var(--cn-gradient-skeleton-mask-from) 50%, var(--cn-gradient-skeleton-mask-to) 100%); /* Gradient mask for skeleton loading animations. Creates fade effect at edges. */
513
- --cn-comp-slider-track-progress: var(--cn-set-brand-primary-bg); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */
514
- --cn-comp-slider-track-warning: var(--cn-set-warning-primary-bg); /* Warning state color for slider tracks. Indicates caution range. */
515
- --cn-comp-slider-track-success: var(--cn-set-success-primary-bg); /* Success state color for slider tracks. Indicates optimal range. */
516
- --cn-comp-slider-track-danger: var(--cn-set-danger-primary-bg); /* Danger state color for slider tracks. Indicates critical range. */
517
- --cn-comp-slider-handle-bg: var(--cn-set-gray-primary-bg); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */
518
- --cn-comp-slider-handle-border: var(--cn-border-3); /* Border color for slider handles. Provides definition and contrast for the interactive control. */
519
- --cn-comp-slider-range-gradient: linear-gradient(90deg, var(--cn-set-gray-primary-bg) 15%, var(--cn-set-warning-primary-bg) 40%, var(--cn-set-orange-primary-bg) 60%, var(--cn-set-danger-primary-bg) 80%); /* Multi-stop gradient for slider range tracks. Visualizes severity or intensity progression from neutral through warning, orange, to danger. */
520
- --cn-comp-ai-chat-bubble: linear-gradient(95deg, var(--cn-gradient-sidebar-selected-from) -13.12%, var(--cn-gradient-sidebar-selected-to) 84.9%); /* Background gradient for AI chat message bubbles. Creates distinctive AI conversation styling. */
521
- --cn-comp-card-fade-default: linear-gradient(0deg, var(--cn-bg-1) 0%, var(--cn-gradient-card-fade-default) 100%); /* Gradient fade effect for default card backgrounds. Creates subtle visual depth. */
522
- --cn-comp-card-fade-selected: linear-gradient(0deg, var(--cn-set-brand-outline-bg) 0%, var(--cn-gradient-card-fade-selected) 100%); /* Gradient fade effect for selected card backgrounds. Emphasizes active selection state. */
523
- --cn-comp-data-viz-inactive-01-blue: lch(19.5 16.8 255); /* Inactive state of primary data visualization color (1st). Used for deselected or background data elements. */
524
- --cn-comp-data-viz-inactive-02-purple: lch(17.4 28.5 320); /* Inactive state of secondary data visualization color (2nd). Used for deselected or background data elements. */
525
- --cn-comp-data-viz-inactive-03-pink: lch(19.5 20.9 350); /* Inactive state of data visualization color (3rd). Used for deselected or background data elements. */
526
- --cn-comp-data-viz-inactive-04-green: lch(21.6 24 150); /* Inactive state of data visualization color (4th). Used for deselected or background data elements. */
527
- --cn-comp-data-viz-inactive-05-indigo: lch(19.2 18 280); /* Inactive state of data visualization color (5th). Used for deselected or background data elements. */
528
- --cn-comp-data-viz-inactive-06-brown: lch(16.8 13.8 38); /* Inactive state of data visualization color (6th). Used for deselected or background data elements. */
529
- --cn-comp-data-viz-inactive-07-cyan: lch(21.6 17.4 195); /* Inactive state of data visualization color (7th). Used for deselected or background data elements. */
530
- --cn-comp-data-viz-inactive-08-orange: lch(20.1 30 52); /* Inactive state of data visualization color (8th). Used for deselected or background data elements. */
531
- --cn-comp-data-viz-inactive-09-forest: lch(15 21 150); /* Inactive state of data visualization color (9th). Used for deselected or background data elements. */
532
- --cn-comp-data-viz-inactive-10-red: lch(18.3 23.4 32); /* Inactive state of data visualization color (10th). Used for deselected or background data elements. */
533
- --cn-comp-data-viz-inactive-11-yellow: lch(23.1 30 76); /* Inactive state of data visualization color (11th). Used for deselected or background data elements. */
534
- --cn-comp-data-viz-inactive-12-gray: lch(19.5 1.8 272); /* Inactive state of data visualization color (12th). Used for deselected or background data elements. */
535
- --cn-comp-data-viz-01-blue-shadow: rgb(0% 66.1% 99.9% / 0.26); /* Shadow color for 01-blue data visualization drop-shadow filter. */
536
- --cn-comp-data-viz-02-purple-shadow: rgb(85.1% 28.6% 97.6% / 0.26); /* Shadow color for 02-purple data visualization drop-shadow filter. */
537
- --cn-comp-data-viz-03-pink-shadow: rgb(100% 37.3% 71.4% / 0.26); /* Shadow color for 03-pink data visualization drop-shadow filter. */
538
- --cn-comp-data-viz-04-green-shadow: rgb(0% 80.6% 38.5% / 0.26); /* Shadow color for 04-green data visualization drop-shadow filter. */
539
- --cn-comp-data-viz-05-indigo-shadow: rgb(44.5% 59.8% 100% / 0.26); /* Shadow color for 05-indigo data visualization drop-shadow filter. */
540
- --cn-comp-data-viz-06-brown-shadow: rgb(78.3% 41.9% 34.2% / 0.26); /* Shadow color for 06-brown data visualization drop-shadow filter. */
541
- --cn-comp-data-viz-07-cyan-shadow: rgb(0% 78.5% 77.8% / 0.26); /* Shadow color for 07-cyan data visualization drop-shadow filter. */
542
- --cn-comp-data-viz-08-orange-shadow: rgb(100% 44.6% 8.16% / 0.26); /* Shadow color for 08-orange data visualization drop-shadow filter. */
543
- --cn-comp-data-viz-09-forest-shadow: rgb(0% 54.7% 24.9% / 0.26); /* Shadow color for 09-forest data visualization drop-shadow filter. */
544
- --cn-comp-data-viz-10-red-shadow: rgb(100% 32.6% 31.1% / 0.26); /* Shadow color for 10-red data visualization drop-shadow filter. */
545
- --cn-comp-data-viz-11-yellow-shadow: rgb(98.8% 67.9% 0% / 0.26); /* Shadow color for 11-yellow data visualization drop-shadow filter. */
546
- --cn-comp-data-viz-12-gray-shadow: rgb(60.4% 61.9% 66% / 0.26); /* Shadow color for 12-gray data visualization drop-shadow filter. */
547
- --cn-comp-widget-test-intelligence-gradient: linear-gradient(90deg, var(--cn-comp-data-viz-05-indigo) 0%, var(--cn-comp-data-viz-02-purple) 100%); /* Gradient background for test intelligence widget. */
548
- --cn-comp-widget-test-intelligence-text-gradient: linear-gradient(90deg, var(--cn-text-2) 3%, var(--cn-comp-data-viz-05-indigo) 75%, var(--cn-comp-data-viz-02-purple) 100%); /* Text gradient for test intelligence widget. */
549
- --cn-comp-shadow-avatar-inner: inset 0 0 0 0.6px var(--cn-comp-avatar-shadow); /* Inner shadow for avatar components. Creates subtle inset border effect. */
550
- --cn-comp-shadow-ai-inner: inset 0 6px 12px 0 var(--cn-set-ai-outline-inner); /* Inner shadow for AI-themed components. Adds depth to AI elements. */
551
- --cn-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */
552
- /**
553
- * No shadow.
554
- * Common uses: Flat designs, disabled states, removing shadows on mobile.
555
- */
556
- --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0);
557
- /**
558
- * Small shadow.
559
- * Common uses: Buttons in their rest state, form inputs, subtle UI elements.
560
- */
561
- --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1);
562
- /**
563
- * Default shadow.
564
- * Common uses: Cards, dropdowns, popovers in their default state.
565
- */
566
- --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2);
567
- /**
568
- * Medium shadow.
569
- * Common uses: Elevated cards, active buttons, interactive elements on hover.
570
- */
571
- --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3);
572
- /**
573
- * Large shadow.
574
- * Common uses: Modals, floating panels, navigation dropdowns.
575
- */
576
- --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4);
577
- /**
578
- * Extra large shadow.
579
- * Common uses: Large modals, sidebars, elevated content sections.
580
- */
581
- --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5);
582
- /**
583
- * Extra extra large shadow.
584
- * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.
585
- */
586
- --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6);
587
- /**
588
- * Inner shadow for subtle inset depth.
589
- * Common uses: Input fields, cards with inset appearance, contained sections.
590
- */
591
- --cn-shadow-inner: inset 0 0 4.5px 0 var(--cn-shadow-color-inner);
592
- --cn-ring-danger: 0 0 0 4px var(--cn-set-danger-secondary-bg); /* Focus ring style for danger states. Provides accessible focus indicator for error contexts. */
593
- --cn-ring-danger-hover: 0 0 0 4px var(--cn-set-danger-secondary-bg-hover); /* Focus ring style for danger hover states. Enhances focus visibility during interaction. */
594
- --cn-ring-selected: 0 0 0 4px var(--cn-set-brand-primary-ring); /* Focus ring style for selected states. Indicates active selection with accessible outline. */
595
- --cn-ring-success: 0 0 0 4px var(--cn-set-success-secondary-bg); /* Focus ring style for success states. Provides accessible focus indicator for positive contexts. */
596
- --cn-ring-success-hover: 0 0 0 4px var(--cn-set-success-secondary-bg-hover); /* Focus ring style for success hover states. Enhances focus visibility during interaction. */
597
- --cn-ring-warning: 0 0 0 4px var(--cn-set-warning-secondary-bg); /* Focus ring style for warning states. Provides accessible focus indicator for cautionary contexts. */
598
- --cn-ring-warning-hover: 0 0 0 4px var(--cn-set-warning-secondary-bg-hover); /* Focus ring style for warning hover states. Enhances focus visibility during interaction. */
599
- --cn-gradient-alert-fade-default: lch(from var(--cn-set-gray-secondary-bg) l c h / 0); /* Transparent fade color for default alerts. */
600
- --cn-gradient-alert-fade-danger: lch(from var(--cn-set-danger-secondary-bg) l c h / 0); /* Transparent fade color for danger alerts. */
601
- --cn-gradient-alert-fade-warning: lch(from var(--cn-set-warning-secondary-bg) l c h / 0); /* Transparent fade color for warning alerts. */
602
- --cn-gradient-alert-fade-success: lch(from var(--cn-set-success-secondary-bg) l c h / 0); /* Transparent fade color for success alerts. */
603
- --cn-gradient-dialog-fade: lch(from var(--cn-bg-2) l c h / 0); /* Transparent fade color for dialog edges. */
604
- --cn-gradient-toast-default-to: lch(from var(--cn-bg-3) l c h / 0); /* Ending color for default toast fade gradients. */
605
- --cn-gradient-toast-default-from: var(--cn-bg-3); /* Starting color for default toast fade gradients. */
606
- --cn-gradient-toast-danger-to: lch(from var(--cn-comp-toast-danger-bg) l c h / 0); /* Ending color for danger toast fade gradients. */
607
- --cn-gradient-toast-danger-from: var(--cn-comp-toast-danger-bg); /* Starting color for danger toast fade gradients. */
608
- --cn-gradient-card-fade-default: lch(from var(--cn-bg-1) l c h / 0); /* Transparent fade color for default card backgrounds. */
609
- --cn-gradient-card-fade-selected: lch(from var(--cn-set-brand-outline-bg) l c h / 0); /* Transparent fade color for selected card backgrounds. */
610
- --cn-img-empty-state-bg: radial-gradient(54% 83% at 50% 102%, var(--cn-gradient-img-empty-state-bg-stop-1) 0%, var(--cn-gradient-img-empty-state-bg-stop-2) 27%, var(--cn-gradient-img-empty-state-bg-stop-3) 46%, var(--cn-gradient-img-empty-state-bg-stop-4) 63%, var(--cn-gradient-img-empty-state-bg-stop-5) 84%, var(--cn-gradient-img-empty-state-bg-stop-6) 100%); /* Radial gradient background for empty state illustrations. Creates depth and visual interest. */
611
- --cn-img-empty-state-border: linear-gradient(180deg, var(--cn-gradient-img-empty-state-border-from) 0%, var(--cn-gradient-img-empty-state-border-to) 100%); /* Linear gradient border for empty state illustrations. Provides subtle framing. */
612
- --cn-img-empty-state-icon: radial-gradient(31.5% 52.5% at 50% 64%, var(--cn-gradient-img-empty-state-icon-stop-1) 0%, var(--cn-gradient-img-empty-state-icon-stop-2) 38%, var(--cn-gradient-img-empty-state-icon-stop-3) 100%); /* Radial gradient for empty state icon elements. Adds dimension to illustrations. */
613
- --cn-img-empty-state-lines: radial-gradient(60.84% 50% at 50% 50%, var(--cn-gradient-img-empty-state-lines-from) 0%, var(--cn-gradient-img-empty-state-lines-to) 100%); /* Radial gradient for empty state decorative lines. Creates visual texture. */
614
- --cn-img-empty-state-logo: radial-gradient(87.5% 87.5% at 50% 50%, var(--cn-gradient-img-empty-state-logo-from) 0%, var(--cn-gradient-img-empty-state-logo-to) 100%); /* Radial gradient for empty state logo elements. Emphasizes brand presence. */
615
- --cn-img-empty-state-bubble-t-bg: linear-gradient(44deg, var(--cn-gradient-img-empty-state-bubble-t-bg-from) 11%, var(--cn-gradient-img-empty-state-bubble-t-bg-to) 71%); /* Linear gradient for empty state top bubble background. Creates layered visual effect. */
616
- --cn-img-empty-state-bubble-t-icon: linear-gradient(225deg, var(--cn-gradient-img-empty-state-bubble-t-icon-from) 8%, var(--cn-gradient-img-empty-state-bubble-t-icon-to) 92%); /* Linear gradient for empty state top bubble icon. Adds visual interest. */
617
- --cn-img-empty-state-bubble-b-bg: linear-gradient(44deg, var(--cn-gradient-img-empty-state-bubble-b-bg-from) 11%, var(--cn-gradient-img-empty-state-bubble-b-bg-to) 71%); /* Linear gradient for empty state bottom bubble background. Creates layered visual effect. */
618
- --cn-img-empty-state-bubble-b-icon: linear-gradient(225deg, var(--cn-gradient-img-empty-state-bubble-b-icon-from) 8%, var(--cn-gradient-img-empty-state-bubble-b-icon-to) 92%); /* Linear gradient for empty state bottom bubble icon. Adds visual interest. */
619
- --cn-flow-onboard-img-color-bubble-default: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-img-color-bubble-default-from) 0%, var(--cn-gradient-flow-onboard-img-color-bubble-default-to) 100%); /* Radial gradient for default onboarding color bubble. Creates visual focal point. */
620
- --cn-flow-onboard-img-color-bubble-danger: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-img-color-bubble-danger-from) 0%, var(--cn-gradient-flow-onboard-img-color-bubble-danger-to) 100%); /* Radial gradient for danger onboarding color bubble. Emphasizes error states. */
621
- --cn-flow-onboard-ellipse-t-1-default: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-ellipse-t-1-default-from) 26%, var(--cn-gradient-flow-onboard-ellipse-t-1-default-to) 100%); /* Radial gradient for default onboarding top ellipse 1. Creates atmospheric background effect. */
622
- --cn-flow-onboard-ellipse-t-1-danger: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-ellipse-t-1-danger-from) 26%, var(--cn-gradient-flow-onboard-ellipse-t-1-danger-to) 100%); /* Radial gradient for danger onboarding top ellipse 1. Emphasizes error context. */
623
- --cn-flow-onboard-ellipse-t-2-default: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-ellipse-t-2-default-from) 26%, var(--cn-gradient-flow-onboard-ellipse-t-2-default-to) 100%); /* Radial gradient for default onboarding top ellipse 2. Creates layered atmospheric effect. */
624
- --cn-flow-onboard-ellipse-t-2-danger: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-ellipse-t-2-danger-from) 26%, var(--cn-gradient-flow-onboard-ellipse-t-2-danger-to) 100%); /* Radial gradient for danger onboarding top ellipse 2. Emphasizes error context. */
625
- --cn-flow-onboard-ellipse-b-default: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-ellipse-b-default-from) 26%, var(--cn-gradient-flow-onboard-ellipse-b-default-to) 100%); /* Radial gradient for default onboarding bottom ellipse. Creates depth in background. */
626
- --cn-flow-onboard-ellipse-b-danger: radial-gradient(50% 50% at 50% 50%, var(--cn-gradient-flow-onboard-ellipse-b-danger-from) 26%, var(--cn-gradient-flow-onboard-ellipse-b-danger-to) 100%); /* Radial gradient for danger onboarding bottom ellipse. Emphasizes error context. */
627
- --cn-comp-dialog-fade-start: linear-gradient(0deg, var(--cn-gradient-dialog-fade) 0%, var(--cn-bg-2) 100%); /* Gradient fade for dialog top edge. Creates smooth visual transition. */
628
- --cn-comp-diff-expand-content: var(--cn-comp-diff-background); /* Background for controls that expand/collapse code sections to show additional context. */
629
- --cn-comp-monaco-background: var(--cn-comp-diff-background); /* Background color of Monaco Editor. */
630
- --cn-comp-monaco-key: var(--cn-comp-diff-hljs-attr); /* Color for property keys and attributes. Highlights configuration keys and object property names. */
631
- --cn-comp-monaco-string: var(--cn-comp-diff-hljs-string); /* Color for string values. Distinguishes text content from keys and other value types. */
632
- --cn-comp-monaco-number: var(--cn-comp-diff-hljs-literal); /* Color for numeric values. Emphasizes numbers and numeric expressions. */
633
- --cn-comp-monaco-boolean: var(--cn-comp-diff-hljs-keyword); /* Color for keywords, boolean and null values. Highlights special language constants. */
634
- --cn-comp-monaco-comment: var(--cn-comp-diff-hljs-comment); /* Color for comments. Provides reduced emphasis to distinguish explanatory text from code. */
635
- --cn-comp-monaco-tag: var(--cn-comp-diff-hljs-title-class); /* Color for class names, type definitions and support types. */
636
- --cn-comp-monaco-delimiter: var(--cn-comp-diff-hljs-comment); /* Color for delimiters and operators. Provides subtle visual separation. */
637
- --cn-comp-monaco-anchor: var(--cn-comp-diff-hljs-name); /* Color for HTML/XML tags, variables and reference markers. */
638
- --cn-comp-monaco-function: var(--cn-comp-diff-hljs-title-function); /* Color for function names and method definitions. */
639
- --cn-comp-monaco-diff-inserted: var(--cn-text-success); /* Color for inserted content in diff view. */
640
- --cn-comp-monaco-diff-deleted: var(--cn-text-danger); /* Color for deleted content in diff view. */
641
- --cn-comp-monaco-line-number-active: var(--cn-comp-monaco-foreground); /* Color for the active line number in Monaco Editor gutter. */
642
- --cn-comp-sidebar-fade-end: linear-gradient(0deg, var(--cn-comp-sidebar-bg) 0%, var(--cn-gradient-sidebar-fade) 100%); /* Gradient fade effect for sidebar bottom edge. Creates smooth visual transition from background to sidebar content. */
643
- --cn-comp-selection-unselected-border-hover: var(--cn-border-brand); /* Hover border color for unselected items in selection controls. */
644
- --cn-comp-slider-handle-bg-selected: var(--cn-set-gray-outline-bg); /* Background color for selected slider handles. Indicates the active handle in multi-handle sliders. */
645
- --cn-comp-slider-handle-border-selected: var(--cn-border-brand); /* Border color for selected slider handles. Provides brand-colored emphasis on the active handle. */
646
- --cn-comp-toast-danger-fade: linear-gradient(0deg, var(--cn-gradient-toast-danger-from) 42%, var(--cn-gradient-toast-danger-to) 100%); /* Gradient fade effect for danger toast notifications. Creates visual depth and emphasis for critical messages. */
647
- --cn-comp-toast-fade: linear-gradient(0deg, var(--cn-gradient-toast-default-from) 42%, var(--cn-gradient-toast-default-to) 100%); /* Default gradient fade effect for toast notifications. Creates visual depth and subtle emphasis for general messages. */
648
- --cn-comp-data-viz-inactive-01-blue-shadow: rgb(9.72% 19.5% 27.7% / 0.26); /* Shadow color for inactive 01-blue data visualization drop-shadow filter. */
649
- --cn-comp-data-viz-inactive-02-purple-shadow: rgb(24.6% 11.7% 27.3% / 0.26); /* Shadow color for inactive 02-purple data visualization drop-shadow filter. */
650
- --cn-comp-data-viz-inactive-03-pink-shadow: rgb(28.6% 13.5% 20.9% / 0.26); /* Shadow color for inactive 03-pink data visualization drop-shadow filter. */
651
- --cn-comp-data-viz-inactive-04-green-shadow: rgb(6.7% 23.3% 12.9% / 0.26); /* Shadow color for inactive 04-green data visualization drop-shadow filter. */
652
- --cn-comp-data-viz-inactive-05-indigo-shadow: rgb(15.2% 18% 28.4% / 0.26); /* Shadow color for inactive 05-indigo data visualization drop-shadow filter. */
653
- --cn-comp-data-viz-inactive-06-brown-shadow: rgb(23% 13.8% 11.7% / 0.26); /* Shadow color for inactive 06-brown data visualization drop-shadow filter. */
654
- --cn-comp-data-viz-inactive-07-cyan-shadow: rgb(2.79% 23% 22.7% / 0.26); /* Shadow color for inactive 07-cyan data visualization drop-shadow filter. */
655
- --cn-comp-data-viz-inactive-08-orange-shadow: rgb(30.5% 14.3% 5.32% / 0.26); /* Shadow color for inactive 08-orange data visualization drop-shadow filter. */
656
- --cn-comp-data-viz-inactive-09-forest-shadow: rgb(2.99% 17.3% 8.59% / 0.26); /* Shadow color for inactive 09-forest data visualization drop-shadow filter. */
657
- --cn-comp-data-viz-inactive-10-red-shadow: rgb(28.7% 12.5% 10.9% / 0.26); /* Shadow color for inactive 10-red data visualization drop-shadow filter. */
658
- --cn-comp-data-viz-inactive-11-yellow-shadow: rgb(28.6% 19.8% 2.88% / 0.26); /* Shadow color for inactive 11-yellow data visualization drop-shadow filter. */
659
- --cn-comp-data-viz-inactive-12-gray-shadow: rgb(18.2% 18.5% 19.5% / 0.26); /* Shadow color for inactive 12-gray data visualization drop-shadow filter. */
660
- --cn-comp-shadow-data-viz-01-blue: 0 3px 5px var(--cn-comp-data-viz-01-blue-shadow); /* Drop shadow for 01-blue data visualization elements. */
661
- --cn-comp-shadow-data-viz-02-purple: 0 3px 5px var(--cn-comp-data-viz-02-purple-shadow); /* Drop shadow for 02-purple data visualization elements. */
662
- --cn-comp-shadow-data-viz-03-pink: 0 3px 5px var(--cn-comp-data-viz-03-pink-shadow); /* Drop shadow for 03-pink data visualization elements. */
663
- --cn-comp-shadow-data-viz-04-green: 0 3px 5px var(--cn-comp-data-viz-04-green-shadow); /* Drop shadow for 04-green data visualization elements. */
664
- --cn-comp-shadow-data-viz-05-indigo: 0 3px 5px var(--cn-comp-data-viz-05-indigo-shadow); /* Drop shadow for 05-indigo data visualization elements. */
665
- --cn-comp-shadow-data-viz-06-brown: 0 3px 5px var(--cn-comp-data-viz-06-brown-shadow); /* Drop shadow for 06-brown data visualization elements. */
666
- --cn-comp-shadow-data-viz-07-cyan: 0 3px 5px var(--cn-comp-data-viz-07-cyan-shadow); /* Drop shadow for 07-cyan data visualization elements. */
667
- --cn-comp-shadow-data-viz-08-orange: 0 3px 5px var(--cn-comp-data-viz-08-orange-shadow); /* Drop shadow for 08-orange data visualization elements. */
668
- --cn-comp-shadow-data-viz-09-forest: 0 3px 5px var(--cn-comp-data-viz-09-forest-shadow); /* Drop shadow for 09-forest data visualization elements. */
669
- --cn-comp-shadow-data-viz-10-red: 0 3px 5px var(--cn-comp-data-viz-10-red-shadow); /* Drop shadow for 10-red data visualization elements. */
670
- --cn-comp-shadow-data-viz-11-yellow: 0 3px 5px var(--cn-comp-data-viz-11-yellow-shadow); /* Drop shadow for 11-yellow data visualization elements. */
671
- --cn-comp-shadow-data-viz-12-gray: 0 3px 5px var(--cn-comp-data-viz-12-gray-shadow); /* Drop shadow for 12-gray data visualization elements. */
672
- --cn-gradient-sidebar-fade: lch(from var(--cn-comp-sidebar-bg) l c h / 0); /* Transparent fade color for sidebar edges. */
673
- --cn-focus: var(--cn-border-width-2) solid var(--cn-border-brand); /* Focus ring style for interactive elements. Provides accessible keyboard navigation indicator meeting WCAG requirements. */
674
- --cn-comp-monaco-selection: lch(20.2 1.26 270); /* Background color of selected text in Monaco Editor. */
675
- --cn-comp-monaco-line-highlight: lch(12.6 1.38 270); /* Background color of the current line highlight in Monaco Editor. */
676
- --cn-comp-sidebar-fade-start: linear-gradient(0deg, var(--cn-gradient-sidebar-fade) 0%, var(--cn-comp-sidebar-bg) 100%); /* Gradient fade effect for sidebar top edge. Creates smooth visual transition from sidebar content to background. */
677
- --cn-comp-shadow-data-viz-inactive-01-blue: 0 5px 10px var(--cn-comp-data-viz-inactive-01-blue-shadow); /* Drop shadow for inactive 01-blue data visualization elements. */
678
- --cn-comp-shadow-data-viz-inactive-02-purple: 0 5px 10px var(--cn-comp-data-viz-inactive-02-purple-shadow); /* Drop shadow for inactive 02-purple data visualization elements. */
679
- --cn-comp-shadow-data-viz-inactive-03-pink: 0 5px 10px var(--cn-comp-data-viz-inactive-03-pink-shadow); /* Drop shadow for inactive 03-pink data visualization elements. */
680
- --cn-comp-shadow-data-viz-inactive-04-green: 0 5px 10px var(--cn-comp-data-viz-inactive-04-green-shadow); /* Drop shadow for inactive 04-green data visualization elements. */
681
- --cn-comp-shadow-data-viz-inactive-05-indigo: 0 5px 10px var(--cn-comp-data-viz-inactive-05-indigo-shadow); /* Drop shadow for inactive 05-indigo data visualization elements. */
682
- --cn-comp-shadow-data-viz-inactive-06-brown: 0 5px 10px var(--cn-comp-data-viz-inactive-06-brown-shadow); /* Drop shadow for inactive 06-brown data visualization elements. */
683
- --cn-comp-shadow-data-viz-inactive-07-cyan: 0 5px 10px var(--cn-comp-data-viz-inactive-07-cyan-shadow); /* Drop shadow for inactive 07-cyan data visualization elements. */
684
- --cn-comp-shadow-data-viz-inactive-08-orange: 0 5px 10px var(--cn-comp-data-viz-inactive-08-orange-shadow); /* Drop shadow for inactive 08-orange data visualization elements. */
685
- --cn-comp-shadow-data-viz-inactive-09-forest: 0 5px 10px var(--cn-comp-data-viz-inactive-09-forest-shadow); /* Drop shadow for inactive 09-forest data visualization elements. */
686
- --cn-comp-shadow-data-viz-inactive-10-red: 0 5px 10px var(--cn-comp-data-viz-inactive-10-red-shadow); /* Drop shadow for inactive 10-red data visualization elements. */
687
- --cn-comp-shadow-data-viz-inactive-11-yellow: 0 5px 10px var(--cn-comp-data-viz-inactive-11-yellow-shadow); /* Drop shadow for inactive 11-yellow data visualization elements. */
688
- --cn-comp-shadow-data-viz-inactive-12-gray: 0 5px 10px var(--cn-comp-data-viz-inactive-12-gray-shadow); /* Drop shadow for inactive 12-gray data visualization elements. */
689
- }