@citizenplane/pimp 10.0.7 → 10.1.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 (64) hide show
  1. package/dist/pimp.es.js +1305 -1303
  2. package/dist/pimp.umd.js +22 -22
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/assets/css/base.css +16 -1
  6. package/src/assets/css/colors.css +111 -110
  7. package/src/assets/css/dimensions.css +36 -35
  8. package/src/assets/css/easings.css +2 -1
  9. package/src/assets/css/shadows.css +67 -65
  10. package/src/assets/css/tokens.css +355 -386
  11. package/src/assets/css/typography.css +109 -0
  12. package/src/assets/main.css +1 -1
  13. package/src/assets/styles/helpers/_functions.scss +2 -2
  14. package/src/assets/styles/helpers/_mixins.scss +1 -1
  15. package/src/assets/styles/utilities/_index.scss +26 -5
  16. package/src/components/BaseInputLabel.vue +23 -21
  17. package/src/components/BaseSelectClearButton.vue +15 -9
  18. package/src/components/CpAirlineLogo.vue +1 -1
  19. package/src/components/CpAlert.vue +16 -16
  20. package/src/components/CpBadge.vue +149 -29
  21. package/src/components/CpButton.vue +135 -110
  22. package/src/components/CpButtonGroup.vue +3 -3
  23. package/src/components/CpCalendar.vue +32 -32
  24. package/src/components/CpCheckbox.vue +43 -33
  25. package/src/components/CpContextualMenu.vue +6 -9
  26. package/src/components/CpDate.vue +53 -40
  27. package/src/components/CpDatepicker.vue +3 -3
  28. package/src/components/CpDialog.vue +19 -19
  29. package/src/components/CpHeading.vue +23 -23
  30. package/src/components/CpInput.vue +71 -52
  31. package/src/components/CpItemActions.vue +4 -4
  32. package/src/components/CpLoader.vue +14 -7
  33. package/src/components/CpMenuItem.vue +23 -17
  34. package/src/components/CpMultiselect.vue +84 -58
  35. package/src/components/CpPartnerBadge.vue +13 -13
  36. package/src/components/CpRadio.vue +32 -24
  37. package/src/components/CpSelect.vue +43 -30
  38. package/src/components/CpSelectMenu.vue +39 -39
  39. package/src/components/CpSwitch.vue +51 -40
  40. package/src/components/CpTable.vue +241 -90
  41. package/src/components/CpTableColumnEditor.vue +18 -16
  42. package/src/components/CpTableEmptyState.vue +9 -9
  43. package/src/components/CpTabs.vue +17 -36
  44. package/src/components/CpTelInput.vue +76 -70
  45. package/src/components/CpTextarea.vue +27 -17
  46. package/src/components/CpToast.vue +49 -49
  47. package/src/components/CpTooltip.vue +6 -6
  48. package/src/components/CpTransitionDialog.vue +1 -1
  49. package/src/constants/Sizes.ts +5 -0
  50. package/src/constants/colors/Colors.ts +15 -5
  51. package/src/constants/colors/ToggleColors.ts +2 -1
  52. package/src/libs/CoreDatepicker.vue +21 -18
  53. package/src/stories/CpBadge.stories.ts +25 -17
  54. package/src/stories/CpButton.stories.ts +6 -5
  55. package/src/stories/CpCheckbox.stories.ts +4 -4
  56. package/src/stories/CpContextualMenu.stories.ts +3 -2
  57. package/src/stories/CpLoader.stories.ts +2 -2
  58. package/src/stories/CpMenuItem.stories.ts +104 -0
  59. package/src/stories/CpRadio.stories.ts +29 -2
  60. package/src/stories/CpSwitch.stories.ts +27 -0
  61. package/src/stories/CpTable.stories.ts +94 -0
  62. package/src/assets/css/spacing.css +0 -43
  63. package/src/assets/styles/helpers/_keyframes.scss +0 -48
  64. package/src/assets/styles/variables/_sizing.scss +0 -4
package/src/assets/css/tokens.css CHANGED
@@ -3,417 +3,386 @@
3
3
  * COLORS
4
4
  */
5
5
 
6
- --pimp-background-accent-primary: var(--pimp-colors-violet-50);
7
- --pimp-background-accent-primary-hover: var(--pimp-colors-violet-100);
8
- --pimp-background-accent-secondary: var(--pimp-colors-violet-100);
9
- --pimp-background-accent-secondary-hover: var(--pimp-colors-violet-200);
10
- --pimp-background-accent-solid: var(--pimp-colors-violet-500);
11
- --pimp-background-accent-solid-hover: var(--pimp-colors-violet-600);
12
- --pimp-background-blue-primary: var(--pimp-colors-blue-50);
13
- --pimp-background-blue-primary-hover: var(--pimp-colors-blue-100);
14
- --pimp-background-blue-secondary: var(--pimp-colors-blue-100);
15
- --pimp-background-blue-secondary-hover: var(--pimp-colors-blue-200);
16
- --pimp-background-blue-solid: var(--pimp-colors-blue-500);
17
- --pimp-background-blue-solid-hover: var(--pimp-colors-blue-600);
18
- --pimp-background-disabled: var(--pimp-colors-grey-50);
19
- --pimp-background-error-primary: var(--pimp-colors-red-50);
20
- --pimp-background-error-primary-hover: var(--pimp-colors-red-100);
21
- --pimp-background-error-secondary: var(--pimp-colors-red-100);
22
- --pimp-background-error-secondary-hover: var(--pimp-colors-red-200);
23
- --pimp-background-error-solid: var(--pimp-colors-red-500);
24
- --pimp-background-error-solid-hover: var(--pimp-colors-red-600);
25
- --pimp-background-inverse-hover: rgba(255, 255, 255, 0.1);
26
- --pimp-background-magenta-primary: var(--pimp-colors-magenta-50);
27
- --pimp-background-magenta-primary-hover: var(--pimp-colors-magenta-100);
28
- --pimp-background-magenta-secondary: var(--pimp-colors-magenta-100);
29
- --pimp-background-magenta-secondary-hover: var(--pimp-colors-magenta-200);
30
- --pimp-background-magenta-solid: var(--pimp-colors-magenta-500);
31
- --pimp-background-magenta-solid-hover: var(--pimp-colors-magenta-600);
32
- --pimp-background-pink-primary: var(--pimp-colors-pink-50);
33
- --pimp-background-pink-primary-hover: var(--pimp-colors-pink-100);
34
- --pimp-background-pink-secondary: var(--pimp-colors-pink-100);
35
- --pimp-background-pink-secondary-hover: var(--pimp-colors-pink-200);
36
- --pimp-background-pink-solid: var(--pimp-colors-pink-500);
37
- --pimp-background-pink-solid-hover: var(--pimp-colors-pink-600);
38
- --pimp-background-primary: var(--pimp-colors-white);
39
- --pimp-background-primary-hover: var(--pimp-colors-grey-100);
40
- --pimp-background-primary-hover-alt: var(--pimp-colors-violet-100);
41
- --pimp-background-quaternary: var(--pimp-colors-grey-200);
42
- --pimp-background-quaternary-hover: var(--pimp-colors-grey-300);
43
- --pimp-background-secondary: var(--pimp-colors-grey-50);
44
- --pimp-background-secondary-hover: var(--pimp-colors-grey-100);
45
- --pimp-background-solid: var(--pimp-colors-grey-900);
46
- --pimp-background-success-primary: var(--pimp-colors-green-50);
47
- --pimp-background-success-primary-hover: var(--pimp-colors-green-100);
48
- --pimp-background-success-secondary: var(--pimp-colors-green-100);
49
- --pimp-background-success-secondary-hover: var(--pimp-colors-green-200);
50
- --pimp-background-success-solid: var(--pimp-colors-green-400);
51
- --pimp-background-success-solid-hover: var(--pimp-colors-green-500);
52
- --pimp-background-surface: var(--pimp-colors-white);
53
- --pimp-background-tertiary: var(--pimp-colors-grey-100);
54
- --pimp-background-tertiary-hover: var(--pimp-colors-grey-200);
55
- --pimp-background-warning-primary: var(--pimp-colors-orange-50);
56
- --pimp-background-warning-primary-hover: var(--pimp-colors-orange-100);
57
- --pimp-background-warning-secondary: var(--pimp-colors-orange-100);
58
- --pimp-background-warning-secondary-hover: var(--pimp-colors-orange-200);
59
- --pimp-background-warning-solid: var(--pimp-colors-orange-400);
60
- --pimp-background-warning-solid-hover: var(--pimp-colors-orange-500);
61
- --pimp-background-yellow-primary: var(--pimp-colors-yellow-50);
62
- --pimp-background-yellow-primary-hover: var(--pimp-colors-yellow-100);
63
- --pimp-background-yellow-secondary: var(--pimp-colors-yellow-100);
64
- --pimp-background-yellow-secondary-hover: var(--pimp-colors-yellow-200);
65
- --pimp-background-yellow-solid: var(--pimp-colors-yellow-300);
66
- --pimp-background-yellow-solid-hover: var(--pimp-colors-yellow-400);
67
-
68
- --pimp-border-accent-primary: var(--pimp-colors-violet-200);
69
- --pimp-border-accent-primary-hover: var(--pimp-colors-violet-300);
70
- --pimp-border-accent-solid: var(--pimp-colors-violet-500);
71
- --pimp-border-blue-primary: var(--pimp-colors-blue-200);
72
- --pimp-border-blue-solid: var(--pimp-colors-blue-500);
73
- --pimp-border-disabled: var(--pimp-colors-grey-100);
74
- --pimp-border-error-primary: var(--pimp-colors-red-200);
75
- --pimp-border-error-solid: var(--pimp-colors-red-500);
76
- --pimp-border-magenta-primary: var(--pimp-colors-magenta-200);
77
- --pimp-border-magenta-solid: var(--pimp-colors-magenta-500);
78
- --pimp-border-pink-primary: var(--pimp-colors-pink-200);
79
- --pimp-border-pink-solid: var(--pimp-colors-pink-500);
80
- --pimp-border-soft: var(--pimp-colors-grey-200);
81
- --pimp-border-soft-hover: var(--pimp-colors-grey-300);
82
- --pimp-border-solid: var(--pimp-colors-grey-800);
83
- --pimp-border-strong: var(--pimp-colors-grey-300);
84
- --pimp-border-strong-hover: var(--pimp-colors-grey-400);
85
- --pimp-border-success-primary: var(--pimp-colors-green-200);
86
- --pimp-border-success-solid: var(--pimp-colors-green-400);
87
- --pimp-border-warning-primary: var(--pimp-colors-orange-200);
88
- --pimp-border-warning-solid: var(--pimp-colors-orange-400);
89
- --pimp-border-yellow-primary: var(--pimp-colors-yellow-200);
90
- --pimp-border-yellow-solid: var(--pimp-colors-yellow-500);
91
-
92
- --pimp-foreground-accent-primary: var(--pimp-colors-violet-500);
93
- --pimp-foreground-accent-primary-hover: var(--pimp-colors-violet-600);
94
- --pimp-foreground-accent-secondary: var(--pimp-colors-violet-400);
95
- --pimp-foreground-accent-secondary-hover: var(--pimp-colors-violet-500);
96
- --pimp-foreground-blue-primary: var(--pimp-colors-blue-500);
97
- --pimp-foreground-blue-primary-hover: var(--pimp-colors-blue-600);
98
- --pimp-foreground-blue-secondary: var(--pimp-colors-blue-400);
99
- --pimp-foreground-blue-secondary-hover: var(--pimp-colors-blue-500);
100
- --pimp-foreground-disabled: var(--pimp-colors-grey-400);
101
- --pimp-foreground-error-primary: var(--pimp-colors-red-500);
102
- --pimp-foreground-error-primary-hover: var(--pimp-colors-red-600);
103
- --pimp-foreground-error-secondary: var(--pimp-colors-red-400);
104
- --pimp-foreground-error-secondary-hover: var(--pimp-colors-red-500);
105
- --pimp-foreground-magenta-primary: var(--pimp-colors-magenta-500);
106
- --pimp-foreground-magenta-primary-hover: var(--pimp-colors-magenta-600);
107
- --pimp-foreground-magenta-secondary: var(--pimp-colors-magenta-400);
108
- --pimp-foreground-magenta-secondary-hover: var(--pimp-colors-magenta-500);
109
- --pimp-foreground-pink-primary: var(--pimp-colors-pink-500);
110
- --pimp-foreground-pink-primary-hover: var(--pimp-colors-pink-600);
111
- --pimp-foreground-pink-secondary: var(--pimp-colors-pink-400);
112
- --pimp-foreground-pink-secondary-hover: var(--pimp-colors-pink-500);
113
- --pimp-foreground-placeholder: var(--pimp-colors-grey-500);
114
- --pimp-foreground-primary: var(--pimp-colors-grey-800);
115
- --pimp-foreground-quaternary: var(--pimp-colors-grey-300);
116
- --pimp-foreground-secondary: var(--pimp-colors-grey-600);
117
- --pimp-foreground-secondary-hover: var(--pimp-colors-grey-800);
118
- --pimp-foreground-success-primary: var(--pimp-colors-green-500);
119
- --pimp-foreground-success-primary-hover: var(--pimp-colors-green-600);
120
- --pimp-foreground-success-secondary: var(--pimp-colors-green-400);
121
- --pimp-foreground-success-secondary-hover: var(--pimp-colors-green-500);
122
- --pimp-foreground-tertiary: var(--pimp-colors-grey-500);
123
- --pimp-foreground-warning-primary: var(--pimp-colors-orange-500);
124
- --pimp-foreground-warning-primary-hover: var(--pimp-colors-orange-600);
125
- --pimp-foreground-warning-secondary: var(--pimp-colors-orange-400);
126
- --pimp-foreground-warning-secondary-hover: var(--pimp-colors-orange-500);
127
- --pimp-foreground-white: var(--pimp-colors-white);
128
- --pimp-foreground-yellow-primary: var(--pimp-colors-yellow-500);
129
- --pimp-foreground-yellow-primary-hover: var(--pimp-colors-yellow-600);
130
- --pimp-foreground-yellow-secondary: var(--pimp-colors-yellow-400);
131
- --pimp-foreground-yellow-secondary-hover: var(--pimp-colors-yellow-500);
132
-
133
- --pimp-text-accent-primary: var(--pimp-colors-violet-500);
134
- --pimp-text-accent-primary-hover: var(--pimp-colors-violet-600);
135
- --pimp-text-accent-secondary: var(--pimp-colors-violet-700);
136
- --pimp-text-accent-secondary-hover: var(--pimp-colors-violet-800);
137
- --pimp-text-blue-primary: var(--pimp-colors-blue-500);
138
- --pimp-text-blue-primary-hover: var(--pimp-colors-blue-600);
139
- --pimp-text-blue-secondary: var(--pimp-colors-blue-700);
140
- --pimp-text-blue-secondary-hover: var(--pimp-colors-blue-800);
141
- --pimp-text-disabled: var(--pimp-colors-grey-400);
142
- --pimp-text-error-primary: var(--pimp-colors-red-500);
143
- --pimp-text-error-primary-hover: var(--pimp-colors-red-600);
144
- --pimp-text-error-secondary: var(--pimp-colors-red-700);
145
- --pimp-text-error-secondary-hover: var(--pimp-colors-red-800);
146
- --pimp-text-magenta-primary: var(--pimp-colors-magenta-500);
147
- --pimp-text-magenta-primary-hover: var(--pimp-colors-magenta-600);
148
- --pimp-text-magenta-secondary: var(--pimp-colors-magenta-700);
149
- --pimp-text-magenta-secondary-hover: var(--pimp-colors-magenta-800);
150
- --pimp-text-pink-primary: var(--pimp-colors-pink-500);
151
- --pimp-text-pink-primary-hover: var(--pimp-colors-pink-600);
152
- --pimp-text-pink-secondary: var(--pimp-colors-pink-700);
153
- --pimp-text-pink-secondary-hover: var(--pimp-colors-pink-800);
154
- --pimp-text-placeholder: var(--pimp-colors-grey-500);
155
- --pimp-text-primary: var(--pimp-colors-grey-800);
156
- --pimp-text-secondary: var(--pimp-colors-grey-600);
157
- --pimp-text-secondary-hover: var(--pimp-colors-grey-800);
158
- --pimp-text-success-primary: var(--pimp-colors-green-500);
159
- --pimp-text-success-primary-hover: var(--pimp-colors-green-600);
160
- --pimp-text-success-secondary: var(--pimp-colors-green-700);
161
- --pimp-text-success-secondary-hover: var(--pimp-colors-green-800);
162
- --pimp-text-tertiary: var(--pimp-colors-grey-500);
163
- --pimp-text-warning-primary: var(--pimp-colors-orange-500);
164
- --pimp-text-warning-primary-hover: var(--pimp-colors-orange-600);
165
- --pimp-text-warning-secondary: var(--pimp-colors-orange-700);
166
- --pimp-text-warning-secondary-hover: var(--pimp-colors-orange-800);
167
- --pimp-text-white: var(--pimp-colors-white);
168
- --pimp-text-yellow-primary: var(--pimp-colors-yellow-500);
169
- --pimp-text-yellow-primary-hover: var(--pimp-colors-yellow-600);
170
- --pimp-text-yellow-secondary: var(--pimp-colors-yellow-700);
171
- --pimp-text-yellow-secondary-hover: var(--pimp-colors-yellow-800);
172
-
173
- --pimp-utility-accent-100: var(--pimp-colors-violet-100);
174
- --pimp-utility-accent-1000: var(--pimp-colors-violet-1000);
175
- --pimp-utility-accent-200: var(--pimp-colors-violet-200);
176
- --pimp-utility-accent-300: var(--pimp-colors-violet-300);
177
- --pimp-utility-accent-400: var(--pimp-colors-violet-400);
178
- --pimp-utility-accent-50: var(--pimp-colors-violet-50);
179
- --pimp-utility-accent-500: var(--pimp-colors-violet-500);
180
- --pimp-utility-accent-600: var(--pimp-colors-violet-600);
181
- --pimp-utility-accent-700: var(--pimp-colors-violet-700);
182
- --pimp-utility-accent-800: var(--pimp-colors-violet-800);
183
- --pimp-utility-accent-900: var(--pimp-colors-violet-900);
184
- --pimp-utility-blue-100: var(--pimp-colors-blue-100);
185
- --pimp-utility-blue-1000: var(--pimp-colors-blue-1000);
186
- --pimp-utility-blue-200: var(--pimp-colors-blue-200);
187
- --pimp-utility-blue-300: var(--pimp-colors-blue-300);
188
- --pimp-utility-blue-400: var(--pimp-colors-blue-400);
189
- --pimp-utility-blue-50: var(--pimp-colors-blue-50);
190
- --pimp-utility-blue-500: var(--pimp-colors-blue-500);
191
- --pimp-utility-blue-600: var(--pimp-colors-blue-600);
192
- --pimp-utility-blue-700: var(--pimp-colors-blue-700);
193
- --pimp-utility-blue-800: var(--pimp-colors-blue-800);
194
- --pimp-utility-blue-900: var(--pimp-colors-blue-900);
195
- --pimp-utility-error-100: var(--pimp-colors-red-100);
196
- --pimp-utility-error-1000: var(--pimp-colors-red-1000);
197
- --pimp-utility-error-200: var(--pimp-colors-red-200);
198
- --pimp-utility-error-300: var(--pimp-colors-red-300);
199
- --pimp-utility-error-400: var(--pimp-colors-red-400);
200
- --pimp-utility-error-50: var(--pimp-colors-red-50);
201
- --pimp-utility-error-500: var(--pimp-colors-red-500);
202
- --pimp-utility-error-600: var(--pimp-colors-red-600);
203
- --pimp-utility-error-700: var(--pimp-colors-red-700);
204
- --pimp-utility-error-800: var(--pimp-colors-red-800);
205
- --pimp-utility-error-900: var(--pimp-colors-red-900);
206
- --pimp-utility-magenta-100: var(--pimp-colors-magenta-100);
207
- --pimp-utility-magenta-1000: var(--pimp-colors-magenta-1000);
208
- --pimp-utility-magenta-200: var(--pimp-colors-magenta-200);
209
- --pimp-utility-magenta-300: var(--pimp-colors-magenta-300);
210
- --pimp-utility-magenta-400: var(--pimp-colors-magenta-400);
211
- --pimp-utility-magenta-50: var(--pimp-colors-magenta-50);
212
- --pimp-utility-magenta-500: var(--pimp-colors-magenta-500);
213
- --pimp-utility-magenta-600: var(--pimp-colors-magenta-600);
214
- --pimp-utility-magenta-700: var(--pimp-colors-magenta-700);
215
- --pimp-utility-magenta-800: var(--pimp-colors-magenta-800);
216
- --pimp-utility-magenta-900: var(--pimp-colors-magenta-900);
217
- --pimp-utility-neutral-100: var(--pimp-colors-grey-100);
218
- --pimp-utility-neutral-1000: var(--pimp-colors-grey-1000);
219
- --pimp-utility-neutral-200: var(--pimp-colors-grey-200);
220
- --pimp-utility-neutral-300: var(--pimp-colors-grey-300);
221
- --pimp-utility-neutral-400: var(--pimp-colors-grey-400);
222
- --pimp-utility-neutral-50: var(--pimp-colors-grey-50);
223
- --pimp-utility-neutral-500: var(--pimp-colors-grey-500);
224
- --pimp-utility-neutral-600: var(--pimp-colors-grey-600);
225
- --pimp-utility-neutral-700: var(--pimp-colors-grey-700);
226
- --pimp-utility-neutral-800: var(--pimp-colors-grey-800);
227
- --pimp-utility-neutral-900: var(--pimp-colors-grey-900);
228
- --pimp-utility-pink-100: var(--pimp-colors-pink-100);
229
- --pimp-utility-pink-1000: var(--pimp-colors-pink-1000);
230
- --pimp-utility-pink-200: var(--pimp-colors-pink-200);
231
- --pimp-utility-pink-300: var(--pimp-colors-pink-300);
232
- --pimp-utility-pink-400: var(--pimp-colors-pink-400);
233
- --pimp-utility-pink-50: var(--pimp-colors-pink-50);
234
- --pimp-utility-pink-500: var(--pimp-colors-pink-500);
235
- --pimp-utility-pink-600: var(--pimp-colors-pink-600);
236
- --pimp-utility-pink-700: var(--pimp-colors-pink-700);
237
- --pimp-utility-pink-800: var(--pimp-colors-pink-800);
238
- --pimp-utility-pink-900: var(--pimp-colors-pink-900);
239
- --pimp-utility-success-100: var(--pimp-colors-green-100);
240
- --pimp-utility-success-1000: var(--pimp-colors-green-1000);
241
- --pimp-utility-success-200: var(--pimp-colors-green-200);
242
- --pimp-utility-success-300: var(--pimp-colors-green-300);
243
- --pimp-utility-success-400: var(--pimp-colors-green-400);
244
- --pimp-utility-success-50: var(--pimp-colors-green-50);
245
- --pimp-utility-success-500: var(--pimp-colors-green-500);
246
- --pimp-utility-success-600: var(--pimp-colors-green-600);
247
- --pimp-utility-success-700: var(--pimp-colors-green-700);
248
- --pimp-utility-success-800: var(--pimp-colors-green-800);
249
- --pimp-utility-success-900: var(--pimp-colors-green-900);
250
- --pimp-utility-warning-100: var(--pimp-colors-orange-100);
251
- --pimp-utility-warning-1000: var(--pimp-colors-orange-1000);
252
- --pimp-utility-warning-200: var(--pimp-colors-orange-200);
253
- --pimp-utility-warning-300: var(--pimp-colors-orange-300);
254
- --pimp-utility-warning-400: var(--pimp-colors-orange-400);
255
- --pimp-utility-warning-50: var(--pimp-colors-orange-50);
256
- --pimp-utility-warning-500: var(--pimp-colors-orange-500);
257
- --pimp-utility-warning-600: var(--pimp-colors-orange-600);
258
- --pimp-utility-warning-700: var(--pimp-colors-orange-700);
259
- --pimp-utility-warning-800: var(--pimp-colors-orange-800);
260
- --pimp-utility-warning-900: var(--pimp-colors-orange-900);
261
- --pimp-utility-yellow-100: var(--pimp-colors-yellow-100);
262
- --pimp-utility-yellow-1000: var(--pimp-colors-yellow-1000);
263
- --pimp-utility-yellow-200: var(--pimp-colors-yellow-200);
264
- --pimp-utility-yellow-300: var(--pimp-colors-yellow-300);
265
- --pimp-utility-yellow-400: var(--pimp-colors-yellow-400);
266
- --pimp-utility-yellow-50: var(--pimp-colors-yellow-50);
267
- --pimp-utility-yellow-500: var(--pimp-colors-yellow-500);
268
- --pimp-utility-yellow-600: var(--pimp-colors-yellow-600);
269
- --pimp-utility-yellow-700: var(--pimp-colors-yellow-700);
270
- --pimp-utility-yellow-800: var(--pimp-colors-yellow-800);
271
- --pimp-utility-yellow-900: var(--pimp-colors-yellow-900);
6
+ --cp-background-surface: var(--cp-colors-white);
7
+ --cp-background-primary: var(--cp-colors-white);
8
+ --cp-background-primary-hover: var(--cp-colors-grey-100);
9
+ --cp-background-primary-hover-alt: var(--cp-colors-violet-100);
10
+ --cp-background-secondary: var(--cp-colors-grey-50);
11
+ --cp-background-secondary-hover: var(--cp-colors-grey-100);
12
+ --cp-background-tertiary: var(--cp-colors-grey-100);
13
+ --cp-background-tertiary-hover: var(--cp-colors-grey-200);
14
+ --cp-background-quaternary: var(--cp-colors-grey-200);
15
+ --cp-background-quaternary-hover: var(--cp-colors-grey-300);
16
+ --cp-background-inverse-hover: rgba(255, 255, 255, 0.1);
17
+ --cp-background-solid: var(--cp-colors-grey-900);
18
+ --cp-background-disabled: var(--cp-colors-grey-50);
19
+ --cp-background-overlay: rgba(#989bba, 0.5);
272
20
 
273
- /**
274
- * DIMENSIONS
275
- */
21
+ --cp-background-accent-primary: var(--cp-colors-violet-50);
22
+ --cp-background-accent-primary-hover: var(--cp-colors-violet-100);
23
+ --cp-background-accent-secondary: var(--cp-colors-violet-100);
24
+ --cp-background-accent-secondary-hover: var(--cp-colors-violet-200);
25
+ --cp-background-accent-solid: var(--cp-colors-violet-500);
26
+ --cp-background-accent-solid-hover: var(--cp-colors-violet-600);
276
27
 
277
- --pimp-breakpoint-2xl: var(--pimp-dimensions-384);
278
- --pimp-breakpoint-lg: var(--pimp-dimensions-256);
279
- --pimp-breakpoint-md: var(--pimp-dimensions-192);
280
- --pimp-breakpoint-sm: var(--pimp-dimensions-160);
281
- --pimp-breakpoint-xl: var(--pimp-dimensions-320);
282
-
283
- --pimp-radius-2xl: var(--pimp-dimensions-6);
284
- --pimp-radius-full: 10000;
285
- --pimp-radius-lg: var(--pimp-dimensions-3);
286
- --pimp-radius-md: var(--pimp-dimensions-2);
287
- --pimp-radius-md-lg: var(--pimp-dimensions-2_5);
288
- --pimp-radius-none: var(--pimp-dimensions-0);
289
- --pimp-radius-sm: var(--pimp-dimensions-1);
290
- --pimp-radius-sm-md: var(--pimp-dimensions-1_5);
291
- --pimp-radius-xl: var(--pimp-dimensions-4);
292
- --pimp-radius-xs: var(--pimp-dimensions-0_5);
293
- --pimp-spacing-2xl: var(--pimp-dimensions-6);
294
- --pimp-spacing-3xl: var(--pimp-dimensions-8);
295
- --pimp-spacing-4xl: var(--pimp-dimensions-10);
296
- --pimp-spacing-lg: var(--pimp-dimensions-3);
297
- --pimp-spacing-md: var(--pimp-dimensions-2);
298
- --pimp-spacing-none: var(--pimp-dimensions-0);
299
- --pimp-spacing-sm: var(--pimp-dimensions-1);
300
- --pimp-spacing-sm-md: var(--pimp-dimensions-1_5);
301
- --pimp-spacing-xl: var(--pimp-dimensions-4);
302
- --pimp-spacing-xs: var(--pimp-dimensions-0_5);
303
- --pimp-width-2xs: var(--pimp-dimensions-2);
304
- --pimp-width-lg: var(--pimp-dimensions-6);
305
- --pimp-width-md: var(--pimp-dimensions-5);
306
- --pimp-width-sm: var(--pimp-dimensions-4);
307
- --pimp-width-xl: var(--pimp-dimensions-8);
308
- --pimp-width-xs: var(--pimp-dimensions-3);
28
+ --cp-background-error-primary: var(--cp-colors-red-50);
29
+ --cp-background-error-primary-hover: var(--cp-colors-red-100);
30
+ --cp-background-error-secondary: var(--cp-colors-red-100);
31
+ --cp-background-error-secondary-hover: var(--cp-colors-red-200);
32
+ --cp-background-error-solid: var(--cp-colors-red-500);
33
+ --cp-background-error-solid-hover: var(--cp-colors-red-600);
309
34
 
310
- /**
311
- * TYPO
312
- */
35
+ --cp-background-warning-primary: var(--cp-colors-orange-50);
36
+ --cp-background-warning-primary-hover: var(--cp-colors-orange-100);
37
+ --cp-background-warning-secondary: var(--cp-colors-orange-100);
38
+ --cp-background-warning-secondary-hover: var(--cp-colors-orange-200);
39
+ --cp-background-warning-solid: var(--cp-colors-orange-400);
40
+ --cp-background-warning-solid-hover: var(--cp-colors-orange-500);
41
+
42
+ --cp-background-success-primary: var(--cp-colors-green-50);
43
+ --cp-background-success-primary-hover: var(--cp-colors-green-100);
44
+ --cp-background-success-secondary: var(--cp-colors-green-100);
45
+ --cp-background-success-secondary-hover: var(--cp-colors-green-200);
46
+ --cp-background-success-solid: var(--cp-colors-green-400);
47
+ --cp-background-success-solid-hover: var(--cp-colors-green-500);
48
+
49
+ --cp-background-blue-primary: var(--cp-colors-blue-50);
50
+ --cp-background-blue-primary-hover: var(--cp-colors-blue-100);
51
+ --cp-background-blue-secondary: var(--cp-colors-blue-100);
52
+ --cp-background-blue-secondary-hover: var(--cp-colors-blue-200);
53
+ --cp-background-blue-solid: var(--cp-colors-blue-500);
54
+ --cp-background-blue-solid-hover: var(--cp-colors-blue-600);
55
+
56
+ --cp-background-pink-primary: var(--cp-colors-pink-50);
57
+ --cp-background-pink-primary-hover: var(--cp-colors-pink-100);
58
+ --cp-background-pink-secondary: var(--cp-colors-pink-100);
59
+ --cp-background-pink-secondary-hover: var(--cp-colors-pink-200);
60
+ --cp-background-pink-solid: var(--cp-colors-pink-500);
61
+ --cp-background-pink-solid-hover: var(--cp-colors-pink-600);
62
+
63
+ --cp-background-magenta-primary: var(--cp-colors-magenta-50);
64
+ --cp-background-magenta-primary-hover: var(--cp-colors-magenta-100);
65
+ --cp-background-magenta-secondary: var(--cp-colors-magenta-100);
66
+ --cp-background-magenta-secondary-hover: var(--cp-colors-magenta-200);
67
+ --cp-background-magenta-solid: var(--cp-colors-magenta-500);
68
+ --cp-background-magenta-solid-hover: var(--cp-colors-magenta-600);
69
+
70
+ --cp-background-yellow-primary: var(--cp-colors-yellow-50);
71
+ --cp-background-yellow-primary-hover: var(--cp-colors-yellow-100);
72
+ --cp-background-yellow-secondary: var(--cp-colors-yellow-100);
73
+ --cp-background-yellow-secondary-hover: var(--cp-colors-yellow-200);
74
+ --cp-background-yellow-solid: var(--cp-colors-yellow-300);
75
+ --cp-background-yellow-solid-hover: var(--cp-colors-yellow-400);
76
+
77
+ --cp-border-soft: var(--cp-colors-grey-200);
78
+ --cp-border-soft-hover: var(--cp-colors-grey-300);
79
+ --cp-border-strong: var(--cp-colors-grey-300);
80
+ --cp-border-strong-hover: var(--cp-colors-grey-400);
81
+ --cp-border-disabled: var(--cp-colors-grey-100);
82
+ --cp-border-solid: var(--cp-colors-grey-800);
83
+
84
+ --cp-border-accent-primary: var(--cp-colors-violet-200);
85
+ --cp-border-accent-primary-hover: var(--cp-colors-violet-300);
86
+ --cp-border-accent-solid: var(--cp-colors-violet-500);
87
+
88
+ --cp-border-error-primary: var(--cp-colors-red-200);
89
+ --cp-border-error-solid: var(--cp-colors-red-500);
90
+
91
+ --cp-border-warning-primary: var(--cp-colors-orange-200);
92
+ --cp-border-warning-solid: var(--cp-colors-orange-400);
93
+
94
+ --cp-border-success-primary: var(--cp-colors-green-200);
95
+ --cp-border-success-solid: var(--cp-colors-green-400);
96
+
97
+ --cp-border-blue-primary: var(--cp-colors-blue-200);
98
+ --cp-border-blue-solid: var(--cp-colors-blue-500);
99
+
100
+ --cp-border-pink-primary: var(--cp-colors-pink-200);
101
+ --cp-border-pink-solid: var(--cp-colors-pink-500);
102
+
103
+ --cp-border-magenta-primary: var(--cp-colors-magenta-200);
104
+ --cp-border-magenta-solid: var(--cp-colors-magenta-500);
105
+
106
+ --cp-border-yellow-primary: var(--cp-colors-yellow-200);
107
+ --cp-border-yellow-solid: var(--cp-colors-yellow-500);
313
108
 
314
- --pimp-text-xs: var(--pimp-size-xs);
315
- --pimp-text-xs-line-height: var(--pimp-line-height-xs);
316
- --pimp-text-xs-letter-spacing: var(--pimp-letter-spacing-xs);
109
+ --cp-foreground-primary: var(--cp-colors-grey-800);
110
+ --cp-foreground-secondary: var(--cp-colors-grey-600);
111
+ --cp-foreground-secondary-hover: var(--cp-colors-grey-800);
112
+ --cp-foreground-tertiary: var(--cp-colors-grey-500);
113
+ --cp-foreground-quaternary: var(--cp-colors-grey-300);
114
+ --cp-foreground-disabled: var(--cp-colors-grey-400);
115
+ --cp-foreground-placeholder: var(--cp-colors-grey-500);
116
+ --cp-foreground-white: var(--cp-colors-white);
317
117
 
318
- --pimp-text-sm: var(--pimp-size-sm);
319
- --pimp-text-sm-line-height: var(--pimp-line-height-sm);
320
- --pimp-text-sm-letter-spacing: var(--pimp-letter-spacing-sm);
118
+ --cp-foreground-accent-primary: var(--cp-colors-violet-500);
119
+ --cp-foreground-accent-primary-hover: var(--cp-colors-violet-600);
120
+ --cp-foreground-accent-secondary: var(--cp-colors-violet-400);
121
+ --cp-foreground-accent-secondary-hover: var(--cp-colors-violet-500);
321
122
 
322
- --pimp-text-md: var(--pimp-size-md);
323
- --pimp-text-md-line-height: var(--pimp-line-height-md);
324
- --pimp-text-md-letter-spacing: var(--pimp-letter-spacing-md);
123
+ --cp-foreground-error-primary: var(--cp-colors-red-500);
124
+ --cp-foreground-error-primary-hover: var(--cp-colors-red-600);
125
+ --cp-foreground-error-secondary: var(--cp-colors-red-400);
126
+ --cp-foreground-error-secondary-hover: var(--cp-colors-red-500);
325
127
 
326
- --pimp-text-lg: var(--pimp-size-lg);
327
- --pimp-text-lg-line-height: var(--pimp-line-height-lg);
328
- --pimp-text-lg-letter-spacing: var(--pimp-letter-spacing-lg);
128
+ --cp-foreground-warning-primary: var(--cp-colors-orange-500);
129
+ --cp-foreground-warning-primary-hover: var(--cp-colors-orange-600);
130
+ --cp-foreground-warning-secondary: var(--cp-colors-orange-400);
131
+ --cp-foreground-warning-secondary-hover: var(--cp-colors-orange-500);
329
132
 
330
- --pimp-text-xl: var(--pimp-size-xl);
331
- --pimp-text-xl-line-height: var(--pimp-line-height-xl);
332
- --pimp-text-xl-letter-spacing: var(--pimp-letter-spacing-xl);
133
+ --cp-foreground-success-primary: var(--cp-colors-green-500);
134
+ --cp-foreground-success-primary-hover: var(--cp-colors-green-600);
135
+ --cp-foreground-success-secondary: var(--cp-colors-green-400);
136
+ --cp-foreground-success-secondary-hover: var(--cp-colors-green-500);
333
137
 
334
- --pimp-text-2xl: var(--pimp-size-2xl);
335
- --pimp-text-2xl-line-height: var(--pimp-line-height-2xl);
336
- --pimp-text-2xl-letter-spacing: var(--pimp-letter-spacing-2xl);
138
+ --cp-foreground-blue-primary: var(--cp-colors-blue-500);
139
+ --cp-foreground-blue-primary-hover: var(--cp-colors-blue-600);
140
+ --cp-foreground-blue-secondary: var(--cp-colors-blue-400);
141
+ --cp-foreground-blue-secondary-hover: var(--cp-colors-blue-500);
337
142
 
338
- --pimp-text-3xl: var(--pimp-size-3xl);
339
- --pimp-text-3xl-line-height: var(--pimp-line-height-3xl);
340
- --pimp-text-3xl-letter-spacing: var(--pimp-letter-spacing-3xl);
143
+ --cp-foreground-pink-primary: var(--cp-colors-pink-500);
144
+ --cp-foreground-pink-primary-hover: var(--cp-colors-pink-600);
145
+ --cp-foreground-pink-secondary: var(--cp-colors-pink-400);
146
+ --cp-foreground-pink-secondary-hover: var(--cp-colors-pink-500);
341
147
 
342
- --pimp-text-4xl: var(--pimp-size-4xl);
343
- --pimp-text-4xl-line-height: var(--pimp-line-height-4xl);
344
- --pimp-text-4xl-letter-spacing: var(--pimp-letter-spacing-4xl);
148
+ --cp-foreground-magenta-primary: var(--cp-colors-magenta-500);
149
+ --cp-foreground-magenta-primary-hover: var(--cp-colors-magenta-600);
150
+ --cp-foreground-magenta-secondary: var(--cp-colors-magenta-400);
151
+ --cp-foreground-magenta-secondary-hover: var(--cp-colors-magenta-500);
345
152
 
346
- --pimp-text-5xl: var(--pimp-size-5xl);
347
- --pimp-text-5xl-line-height: var(--pimp-line-height-5xl);
348
- --pimp-text-5xl-letter-spacing: var(--pimp-letter-spacing-5xl);
153
+ --cp-foreground-yellow-primary: var(--cp-colors-yellow-500);
154
+ --cp-foreground-yellow-primary-hover: var(--cp-colors-yellow-600);
155
+ --cp-foreground-yellow-secondary: var(--cp-colors-yellow-400);
156
+ --cp-foreground-yellow-secondary-hover: var(--cp-colors-yellow-500);
349
157
 
350
- --pimp-text-6xl: var(--pimp-size-6xl);
351
- --pimp-text-6xl-line-height: var(--pimp-line-height-6xl);
352
- --pimp-text-6xl-letter-spacing: var(--pimp-letter-spacing-6xl);
158
+ --cp-text-primary: var(--cp-colors-grey-800);
159
+ --cp-text-secondary: var(--cp-colors-grey-600);
160
+ --cp-text-secondary-hover: var(--cp-colors-grey-800);
161
+ --cp-text-tertiary: var(--cp-colors-grey-500);
162
+ --cp-text-disabled: var(--cp-colors-grey-400);
163
+ --cp-text-placeholder: var(--cp-colors-grey-500);
164
+ --cp-text-white: var(--cp-colors-white);
353
165
 
354
- --pimp-text-7xl: var(--pimp-size-7xl);
355
- --pimp-text-7xl-line-height: var(--pimp-line-height-7xl);
356
- --pimp-text-7xl-letter-spacing: var(--pimp-letter-spacing-7xl);
166
+ --cp-text-accent-primary: var(--cp-colors-violet-500);
167
+ --cp-text-accent-primary-hover: var(--cp-colors-violet-600);
168
+ --cp-text-accent-secondary: var(--cp-colors-violet-700);
169
+ --cp-text-accent-secondary-hover: var(--cp-colors-violet-800);
357
170
 
358
- --pimp-text-8xl: var(--pimp-size-8xl);
359
- --pimp-text-8xl-line-height: var(--pimp-line-height-8xl);
360
- --pimp-text-8xl-letter-spacing: var(--pimp-letter-spacing-8xl);
171
+ --cp-text-error-primary: var(--cp-colors-red-500);
172
+ --cp-text-error-primary-hover: var(--cp-colors-red-600);
173
+ --cp-text-error-secondary: var(--cp-colors-red-700);
174
+ --cp-text-error-secondary-hover: var(--cp-colors-red-800);
361
175
 
362
- --pimp-text-9xl: var(--pimp-size-9xl);
363
- --pimp-text-9xl-line-height: var(--pimp-line-height-9xl);
364
- --pimp-text-9xl-letter-spacing: var(--pimp-letter-spacing-9xl);
176
+ --cp-text-warning-primary: var(--cp-colors-orange-500);
177
+ --cp-text-warning-primary-hover: var(--cp-colors-orange-600);
178
+ --cp-text-warning-secondary: var(--cp-colors-orange-700);
179
+ --cp-text-warning-secondary-hover: var(--cp-colors-orange-800);
180
+
181
+ --cp-text-success-primary: var(--cp-colors-green-500);
182
+ --cp-text-success-primary-hover: var(--cp-colors-green-600);
183
+ --cp-text-success-secondary: var(--cp-colors-green-700);
184
+ --cp-text-success-secondary-hover: var(--cp-colors-green-800);
185
+
186
+ --cp-text-blue-primary: var(--cp-colors-blue-500);
187
+ --cp-text-blue-primary-hover: var(--cp-colors-blue-600);
188
+ --cp-text-blue-secondary: var(--cp-colors-blue-700);
189
+ --cp-text-blue-secondary-hover: var(--cp-colors-blue-800);
190
+
191
+ --cp-text-pink-primary: var(--cp-colors-pink-500);
192
+ --cp-text-pink-primary-hover: var(--cp-colors-pink-600);
193
+ --cp-text-pink-secondary: var(--cp-colors-pink-700);
194
+ --cp-text-pink-secondary-hover: var(--cp-colors-pink-800);
195
+
196
+ --cp-text-magenta-primary: var(--cp-colors-magenta-500);
197
+ --cp-text-magenta-primary-hover: var(--cp-colors-magenta-600);
198
+ --cp-text-magenta-secondary: var(--cp-colors-magenta-700);
199
+ --cp-text-magenta-secondary-hover: var(--cp-colors-magenta-800);
200
+
201
+ --cp-text-yellow-primary: var(--cp-colors-yellow-500);
202
+ --cp-text-yellow-primary-hover: var(--cp-colors-yellow-600);
203
+ --cp-text-yellow-secondary: var(--cp-colors-yellow-700);
204
+ --cp-text-yellow-secondary-hover: var(--cp-colors-yellow-800);
205
+
206
+ --cp-utility-accent-50: var(--cp-colors-violet-50);
207
+ --cp-utility-accent-100: var(--cp-colors-violet-100);
208
+ --cp-utility-accent-200: var(--cp-colors-violet-200);
209
+ --cp-utility-accent-300: var(--cp-colors-violet-300);
210
+ --cp-utility-accent-400: var(--cp-colors-violet-400);
211
+ --cp-utility-accent-500: var(--cp-colors-violet-500);
212
+ --cp-utility-accent-600: var(--cp-colors-violet-600);
213
+ --cp-utility-accent-700: var(--cp-colors-violet-700);
214
+ --cp-utility-accent-800: var(--cp-colors-violet-800);
215
+ --cp-utility-accent-900: var(--cp-colors-violet-900);
216
+ --cp-utility-accent-1000: var(--cp-colors-violet-1000);
217
+
218
+ --cp-utility-blue-50: var(--cp-colors-blue-50);
219
+ --cp-utility-blue-100: var(--cp-colors-blue-100);
220
+ --cp-utility-blue-200: var(--cp-colors-blue-200);
221
+ --cp-utility-blue-300: var(--cp-colors-blue-300);
222
+ --cp-utility-blue-400: var(--cp-colors-blue-400);
223
+ --cp-utility-blue-500: var(--cp-colors-blue-500);
224
+ --cp-utility-blue-600: var(--cp-colors-blue-600);
225
+ --cp-utility-blue-700: var(--cp-colors-blue-700);
226
+ --cp-utility-blue-800: var(--cp-colors-blue-800);
227
+ --cp-utility-blue-900: var(--cp-colors-blue-900);
228
+ --cp-utility-blue-1000: var(--cp-colors-blue-1000);
229
+
230
+ --cp-utility-error-50: var(--cp-colors-red-50);
231
+ --cp-utility-error-100: var(--cp-colors-red-100);
232
+ --cp-utility-error-200: var(--cp-colors-red-200);
233
+ --cp-utility-error-300: var(--cp-colors-red-300);
234
+ --cp-utility-error-400: var(--cp-colors-red-400);
235
+ --cp-utility-error-500: var(--cp-colors-red-500);
236
+ --cp-utility-error-600: var(--cp-colors-red-600);
237
+ --cp-utility-error-700: var(--cp-colors-red-700);
238
+ --cp-utility-error-800: var(--cp-colors-red-800);
239
+ --cp-utility-error-900: var(--cp-colors-red-900);
240
+ --cp-utility-error-1000: var(--cp-colors-red-1000);
241
+
242
+ --cp-utility-magenta-50: var(--cp-colors-magenta-50);
243
+ --cp-utility-magenta-100: var(--cp-colors-magenta-100);
244
+ --cp-utility-magenta-200: var(--cp-colors-magenta-200);
245
+ --cp-utility-magenta-300: var(--cp-colors-magenta-300);
246
+ --cp-utility-magenta-400: var(--cp-colors-magenta-400);
247
+ --cp-utility-magenta-500: var(--cp-colors-magenta-500);
248
+ --cp-utility-magenta-600: var(--cp-colors-magenta-600);
249
+ --cp-utility-magenta-700: var(--cp-colors-magenta-700);
250
+ --cp-utility-magenta-800: var(--cp-colors-magenta-800);
251
+ --cp-utility-magenta-900: var(--cp-colors-magenta-900);
252
+ --cp-utility-magenta-1000: var(--cp-colors-magenta-1000);
253
+
254
+ --cp-utility-neutral-50: var(--cp-colors-grey-50);
255
+ --cp-utility-neutral-100: var(--cp-colors-grey-100);
256
+ --cp-utility-neutral-200: var(--cp-colors-grey-200);
257
+ --cp-utility-neutral-300: var(--cp-colors-grey-300);
258
+ --cp-utility-neutral-400: var(--cp-colors-grey-400);
259
+ --cp-utility-neutral-500: var(--cp-colors-grey-500);
260
+ --cp-utility-neutral-600: var(--cp-colors-grey-600);
261
+ --cp-utility-neutral-700: var(--cp-colors-grey-700);
262
+ --cp-utility-neutral-800: var(--cp-colors-grey-800);
263
+ --cp-utility-neutral-900: var(--cp-colors-grey-900);
264
+ --cp-utility-neutral-1000: var(--cp-colors-grey-1000);
265
+
266
+ --cp-utility-pink-50: var(--cp-colors-pink-50);
267
+ --cp-utility-pink-100: var(--cp-colors-pink-100);
268
+ --cp-utility-pink-200: var(--cp-colors-pink-200);
269
+ --cp-utility-pink-300: var(--cp-colors-pink-300);
270
+ --cp-utility-pink-400: var(--cp-colors-pink-400);
271
+ --cp-utility-pink-500: var(--cp-colors-pink-500);
272
+ --cp-utility-pink-600: var(--cp-colors-pink-600);
273
+ --cp-utility-pink-700: var(--cp-colors-pink-700);
274
+ --cp-utility-pink-800: var(--cp-colors-pink-800);
275
+ --cp-utility-pink-900: var(--cp-colors-pink-900);
276
+ --cp-utility-pink-1000: var(--cp-colors-pink-1000);
277
+
278
+ --cp-utility-success-50: var(--cp-colors-green-50);
279
+ --cp-utility-success-100: var(--cp-colors-green-100);
280
+ --cp-utility-success-200: var(--cp-colors-green-200);
281
+ --cp-utility-success-300: var(--cp-colors-green-300);
282
+ --cp-utility-success-400: var(--cp-colors-green-400);
283
+ --cp-utility-success-500: var(--cp-colors-green-500);
284
+ --cp-utility-success-600: var(--cp-colors-green-600);
285
+ --cp-utility-success-700: var(--cp-colors-green-700);
286
+ --cp-utility-success-800: var(--cp-colors-green-800);
287
+ --cp-utility-success-900: var(--cp-colors-green-900);
288
+ --cp-utility-success-1000: var(--cp-colors-green-1000);
289
+
290
+ --cp-utility-warning-50: var(--cp-colors-orange-50);
291
+ --cp-utility-warning-100: var(--cp-colors-orange-100);
292
+ --cp-utility-warning-200: var(--cp-colors-orange-200);
293
+ --cp-utility-warning-300: var(--cp-colors-orange-300);
294
+ --cp-utility-warning-400: var(--cp-colors-orange-400);
295
+ --cp-utility-warning-500: var(--cp-colors-orange-500);
296
+ --cp-utility-warning-600: var(--cp-colors-orange-600);
297
+ --cp-utility-warning-700: var(--cp-colors-orange-700);
298
+ --cp-utility-warning-800: var(--cp-colors-orange-800);
299
+ --cp-utility-warning-900: var(--cp-colors-orange-900);
300
+ --cp-utility-warning-1000: var(--cp-colors-orange-1000);
301
+
302
+ --cp-utility-yellow-50: var(--cp-colors-yellow-50);
303
+ --cp-utility-yellow-100: var(--cp-colors-yellow-100);
304
+ --cp-utility-yellow-200: var(--cp-colors-yellow-200);
305
+ --cp-utility-yellow-300: var(--cp-colors-yellow-300);
306
+ --cp-utility-yellow-400: var(--cp-colors-yellow-400);
307
+ --cp-utility-yellow-500: var(--cp-colors-yellow-500);
308
+ --cp-utility-yellow-600: var(--cp-colors-yellow-600);
309
+ --cp-utility-yellow-700: var(--cp-colors-yellow-700);
310
+ --cp-utility-yellow-800: var(--cp-colors-yellow-800);
311
+ --cp-utility-yellow-900: var(--cp-colors-yellow-900);
312
+ --cp-utility-yellow-1000: var(--cp-colors-yellow-1000);
313
+
314
+ --cp-focus: var(--cp-utility-accent-500);
315
+
316
+ /**
317
+ * DIMENSIONS
318
+ */
365
319
 
366
- /* monospace text-size styles */
320
+ --cp-breakpoint-sm: var(--cp-dimensions-160);
321
+ --cp-breakpoint-md: var(--cp-dimensions-192);
322
+ --cp-breakpoint-lg: var(--cp-dimensions-256);
323
+ --cp-breakpoint-xl: var(--cp-dimensions-320);
324
+ --cp-breakpoint-2xl: var(--cp-dimensions-384);
367
325
 
368
- --pimp-monospace-xs: var(--pimp-size-xs);
369
- --pimp-monospace-xs-line-height: var(--pimp-line-height-xs);
370
- --pimp-monospace-xs-letter-spacing: var(--pimp-letter-spacing-xs);
326
+ --cp-radius-none: var(--cp-dimensions-0);
327
+ --cp-radius-xs: var(--cp-dimensions-0_5);
328
+ --cp-radius-sm: var(--cp-dimensions-1);
329
+ --cp-radius-sm-md: var(--cp-dimensions-1_5);
330
+ --cp-radius-md: var(--cp-dimensions-2);
331
+ --cp-radius-md-lg: var(--cp-dimensions-2_5);
332
+ --cp-radius-lg: var(--cp-dimensions-3);
333
+ --cp-radius-xl: var(--cp-dimensions-4);
334
+ --cp-radius-2xl: var(--cp-dimensions-6);
335
+ --cp-radius-full: 1000px;
371
336
 
372
- --pimp-monospace-sm-font-light: var(--pimp-size-sm);
373
- --pimp-monospace-sm-line-height: var(--pimp-line-height-sm);
374
- --pimp-monospace-sm-letter-spacing: var(--pimp-letter-spacing-sm);
337
+ --cp-spacing-none: var(--cp-dimensions-0);
338
+ --cp-spacing-xs: var(--cp-dimensions-0_5);
339
+ --cp-spacing-sm: var(--cp-dimensions-1);
340
+ --cp-spacing-sm-md: var(--cp-dimensions-1_5);
341
+ --cp-spacing-md: var(--cp-dimensions-2);
342
+ --cp-spacing-lg: var(--cp-dimensions-3);
343
+ --cp-spacing-xl: var(--cp-dimensions-4);
344
+ --cp-spacing-2xl: var(--cp-dimensions-6);
345
+ --cp-spacing-3xl: var(--cp-dimensions-8);
346
+ --cp-spacing-4xl: var(--cp-dimensions-10);
375
347
 
376
- --pimp-monospace-md-font-light: var(--pimp-size-md);
377
- --pimp-monospace-md-line-height: var(--pimp-line-height-md);
378
- --pimp-monospace-md-letter-spacing: var(--pimp-letter-spacing-md);
348
+ --cp-width-2xs: var(--cp-dimensions-2);
349
+ --cp-width-xs: var(--cp-dimensions-3);
350
+ --cp-width-sm: var(--cp-dimensions-4);
351
+ --cp-width-md: var(--cp-dimensions-5);
352
+ --cp-width-lg: var(--cp-dimensions-6);
353
+ --cp-width-xl: var(--cp-dimensions-8);
379
354
 
380
355
  /**
381
356
  * SHADOWS
382
357
  */
383
358
 
384
- --pimp-shadows-3xs: var(--pimp-drop-shadow-3xs-offset-x) var(--pimp-drop-shadow-3xs-offset-y)
385
- var(--pimp-drop-shadow-3xs-blur) var(--pimp-drop-shadow-3xs-spread) var(--pimp-drop-shadow-3xs-color);
386
- --pimp-shadows-2xs: var(--pimp-drop-shadow-2xs-offset-x) var(--pimp-drop-shadow-2xs-offset-y)
387
- var(--pimp-drop-shadow-2xs-blur) var(--pimp-drop-shadow-2xs-spread) var(--pimp-drop-shadow-2xs-color);
388
- --pimp-shadows-xs: var(--pimp-drop-shadow-xs-offset-x) var(--pimp-drop-shadow-xs-offset-y)
389
- var(--pimp-drop-shadow-xs-blur) var(--pimp-drop-shadow-xs-spread) var(--pimp-drop-shadow-xs-color);
390
- --pimp-shadows-sm: var(--pimp-drop-shadow-sm-offset-x) var(--pimp-drop-shadow-sm-offset-y)
391
- var(--pimp-drop-shadow-sm-blur) var(--pimp-drop-shadow-sm-spread) var(--pimp-drop-shadow-sm-color);
392
- --pimp-shadows-md: var(--pimp-drop-shadow-md-offset-x) var(--pimp-drop-shadow-md-offset-y)
393
- var(--pimp-drop-shadow-md-blur) var(--pimp-drop-shadow-md-spread) var(--pimp-drop-shadow-md-color);
394
- --pimp-shadows-lg: var(--pimp-drop-shadow-lg-offset-x) var(--pimp-drop-shadow-lg-offset-y)
395
- var(--pimp-drop-shadow-lg-blur) var(--pimp-drop-shadow-lg-spread) var(--pimp-drop-shadow-lg-color);
396
- --pimp-shadows-xl: var(--pimp-drop-shadow-xl-offset-x) var(--pimp-drop-shadow-xl-offset-y)
397
- var(--pimp-drop-shadow-xl-blur) var(--pimp-drop-shadow-xl-spread) var(--pimp-drop-shadow-xl-color);
398
- --pimp-shadows-side-panel: var(--pimp-drop-shadow-side-panel-offset-x) var(--pimp-drop-shadow-side-panel-offset-y)
399
- var(--pimp-drop-shadow-side-panel-blur) var(--pimp-drop-shadow-side-panel-spread)
400
- var(--pimp-drop-shadow-side-panel-color);
359
+ --cp-shadows-3xs: var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur)
360
+ var(--cp-drop-shadow-3xs-spread) var(--cp-drop-shadow-3xs-color);
361
+ --cp-shadows-2xs: var(--cp-drop-shadow-2xs-offset-x) var(--cp-drop-shadow-2xs-offset-y) var(--cp-drop-shadow-2xs-blur)
362
+ var(--cp-drop-shadow-2xs-spread) var(--cp-drop-shadow-2xs-color);
363
+ --cp-shadows-xs: var(--cp-drop-shadow-xs-offset-x) var(--cp-drop-shadow-xs-offset-y) var(--cp-drop-shadow-xs-blur)
364
+ var(--cp-drop-shadow-xs-spread) var(--cp-drop-shadow-xs-color);
365
+ --cp-shadows-sm: var(--cp-drop-shadow-sm-offset-x) var(--cp-drop-shadow-sm-offset-y) var(--cp-drop-shadow-sm-blur)
366
+ var(--cp-drop-shadow-sm-spread) var(--cp-drop-shadow-sm-color);
367
+ --cp-shadows-md: var(--cp-drop-shadow-md-offset-x) var(--cp-drop-shadow-md-offset-y) var(--cp-drop-shadow-md-blur)
368
+ var(--cp-drop-shadow-md-spread) var(--cp-drop-shadow-md-color);
369
+ --cp-shadows-lg: var(--cp-drop-shadow-lg-offset-x) var(--cp-drop-shadow-lg-offset-y) var(--cp-drop-shadow-lg-blur)
370
+ var(--cp-drop-shadow-lg-spread) var(--cp-drop-shadow-lg-color);
371
+ --cp-shadows-xl: var(--cp-drop-shadow-xl-offset-x) var(--cp-drop-shadow-xl-offset-y) var(--cp-drop-shadow-xl-blur)
372
+ var(--cp-drop-shadow-xl-spread) var(--cp-drop-shadow-xl-color);
373
+ --cp-shadows-side-panel: var(--cp-drop-shadow-side-panel-offset-x) var(--cp-drop-shadow-side-panel-offset-y)
374
+ var(--cp-drop-shadow-side-panel-blur) var(--cp-drop-shadow-side-panel-spread) var(--cp-drop-shadow-side-panel-color);
401
375
 
402
376
  /* overlay shadows are multi-layered; keep linked to primitives */
403
- --pimp-shadows-overlay:
404
- var(--pimp-drop-shadow-overlay-1-offset-x) var(--pimp-drop-shadow-overlay-1-offset-y)
405
- var(--pimp-drop-shadow-overlay-1-blur) var(--pimp-drop-shadow-overlay-1-spread)
406
- var(--pimp-drop-shadow-overlay-1-color),
407
- var(--pimp-drop-shadow-overlay-2-offset-x) var(--pimp-drop-shadow-overlay-2-offset-y)
408
- var(--pimp-drop-shadow-overlay-2-blur) var(--pimp-drop-shadow-overlay-2-spread)
409
- var(--pimp-drop-shadow-overlay-2-color),
410
- var(--pimp-drop-shadow-overlay-3-offset-x) var(--pimp-drop-shadow-overlay-3-offset-y)
411
- var(--pimp-drop-shadow-overlay-3-blur) var(--pimp-drop-shadow-overlay-3-spread)
412
- var(--pimp-drop-shadow-overlay-3-color),
413
- var(--pimp-drop-shadow-overlay-4-offset-x) var(--pimp-drop-shadow-overlay-4-offset-y)
414
- var(--pimp-drop-shadow-overlay-4-blur) var(--pimp-drop-shadow-overlay-4-spread)
415
- var(--pimp-drop-shadow-overlay-4-color),
416
- var(--pimp-drop-shadow-overlay-5-offset-x) var(--pimp-drop-shadow-overlay-5-offset-y)
417
- var(--pimp-drop-shadow-overlay-5-blur) var(--pimp-drop-shadow-overlay-5-spread)
418
- var(--pimp-drop-shadow-overlay-5-color);
377
+ --cp-shadows-overlay:
378
+ var(--cp-drop-shadow-overlay-1-offset-x) var(--cp-drop-shadow-overlay-1-offset-y)
379
+ var(--cp-drop-shadow-overlay-1-blur) var(--cp-drop-shadow-overlay-1-spread) var(--cp-drop-shadow-overlay-1-color),
380
+ var(--cp-drop-shadow-overlay-2-offset-x) var(--cp-drop-shadow-overlay-2-offset-y)
381
+ var(--cp-drop-shadow-overlay-2-blur) var(--cp-drop-shadow-overlay-2-spread) var(--cp-drop-shadow-overlay-2-color),
382
+ var(--cp-drop-shadow-overlay-3-offset-x) var(--cp-drop-shadow-overlay-3-offset-y)
383
+ var(--cp-drop-shadow-overlay-3-blur) var(--cp-drop-shadow-overlay-3-spread) var(--cp-drop-shadow-overlay-3-color),
384
+ var(--cp-drop-shadow-overlay-4-offset-x) var(--cp-drop-shadow-overlay-4-offset-y)
385
+ var(--cp-drop-shadow-overlay-4-blur) var(--cp-drop-shadow-overlay-4-spread) var(--cp-drop-shadow-overlay-4-color),
386
+ var(--cp-drop-shadow-overlay-5-offset-x) var(--cp-drop-shadow-overlay-5-offset-y)
387
+ var(--cp-drop-shadow-overlay-5-blur) var(--cp-drop-shadow-overlay-5-spread) var(--cp-drop-shadow-overlay-5-color);
419
388
  }