myshell-react-lib 0.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 (151) hide show
  1. package/README.md +268 -0
  2. package/dist/assets/audio-playing.json +3657 -0
  3. package/dist/index.cjs +9654 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +1431 -0
  6. package/dist/index.d.ts +1431 -0
  7. package/dist/index.js +8788 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +140 -0
  10. package/src/common/assets/audio-playing.json +3657 -0
  11. package/src/common/constants/constants.ts +24 -0
  12. package/src/common/constants/types/common.ts +10 -0
  13. package/src/common/hooks/useAudioPlayer.tsx +198 -0
  14. package/src/common/hooks/useDevice.ts +26 -0
  15. package/src/common/hooks/useNativeBridge.ts +42 -0
  16. package/src/common/hooks/useNotification.tsx +179 -0
  17. package/src/common/hooks/useWindowWidth.ts +19 -0
  18. package/src/common/utils/common-helper.ts +81 -0
  19. package/src/components/ItemDemo.tsx +15 -0
  20. package/src/components/accordion.tsx +126 -0
  21. package/src/components/alert-dialog.tsx +148 -0
  22. package/src/components/alert.tsx +65 -0
  23. package/src/components/aspect-ratio.tsx +7 -0
  24. package/src/components/audio-player.tsx +58 -0
  25. package/src/components/avatar.tsx +133 -0
  26. package/src/components/badge.tsx +65 -0
  27. package/src/components/button/button.styles.ts +258 -0
  28. package/src/components/button/button.tsx +215 -0
  29. package/src/components/button/icon-button.styles.ts +101 -0
  30. package/src/components/button/icon-button.tsx +100 -0
  31. package/src/components/button/index.tsx +3 -0
  32. package/src/components/button/link-button.tsx +184 -0
  33. package/src/components/cascader.tsx +175 -0
  34. package/src/components/checkbox.tsx +135 -0
  35. package/src/components/command.tsx +155 -0
  36. package/src/components/context-menu.tsx +198 -0
  37. package/src/components/count-down.tsx +83 -0
  38. package/src/components/custom-notification.tsx +95 -0
  39. package/src/components/dialog.tsx +158 -0
  40. package/src/components/drawer.tsx +116 -0
  41. package/src/components/dropdown-menu.tsx +196 -0
  42. package/src/components/energy-progress.tsx +55 -0
  43. package/src/components/form.tsx +201 -0
  44. package/src/components/group.tsx +9 -0
  45. package/src/components/guide.tsx +243 -0
  46. package/src/components/icon.tsx +89 -0
  47. package/src/components/icons/outline/DownIcon.tsx +18 -0
  48. package/src/components/icons/outline/FilterIcon.tsx +21 -0
  49. package/src/components/icons/outline/arrow-left.tsx +16 -0
  50. package/src/components/icons/outline/arrow-up-tray.tsx +16 -0
  51. package/src/components/icons/outline/check-circle.tsx +17 -0
  52. package/src/components/icons/outline/config.tsx +42 -0
  53. package/src/components/icons/outline/pencil-square.tsx +16 -0
  54. package/src/components/icons/outline/trash.tsx +17 -0
  55. package/src/components/icons/outline/window.tsx +16 -0
  56. package/src/components/icons/outline/x-circle.tsx +17 -0
  57. package/src/components/icons/outline/x-mark.tsx +16 -0
  58. package/src/components/icons/solid/audio-playing.tsx +31 -0
  59. package/src/components/icons/solid/caret-down.tsx +14 -0
  60. package/src/components/icons/solid/code.tsx +18 -0
  61. package/src/components/icons/solid/drag.tsx +14 -0
  62. package/src/components/icons/solid/phone.tsx +23 -0
  63. package/src/components/icons/solid/rectangle-group.tsx +14 -0
  64. package/src/components/image.tsx +151 -0
  65. package/src/components/input.tsx +118 -0
  66. package/src/components/label.tsx +26 -0
  67. package/src/components/link.tsx +123 -0
  68. package/src/components/marquee/index.css +15 -0
  69. package/src/components/marquee/marquee.tsx +220 -0
  70. package/src/components/masonry.tsx +138 -0
  71. package/src/components/menubar.tsx +234 -0
  72. package/src/components/mobile/m-tooltip.tsx +34 -0
  73. package/src/components/modal.tsx +561 -0
  74. package/src/components/navigation-bar.tsx +100 -0
  75. package/src/components/number-input.tsx +143 -0
  76. package/src/components/page-content.tsx +16 -0
  77. package/src/components/popover.tsx +191 -0
  78. package/src/components/progress.tsx +80 -0
  79. package/src/components/radio-group.tsx +44 -0
  80. package/src/components/scroll-area.tsx +49 -0
  81. package/src/components/search-bar.tsx +140 -0
  82. package/src/components/secondary-navigation-bar.tsx +307 -0
  83. package/src/components/select.tsx +273 -0
  84. package/src/components/separator.tsx +31 -0
  85. package/src/components/sheet.tsx +143 -0
  86. package/src/components/skeleton.tsx +20 -0
  87. package/src/components/slider.tsx +160 -0
  88. package/src/components/spinner.tsx +48 -0
  89. package/src/components/swiper/index.module.scss +88 -0
  90. package/src/components/swiper/index.tsx +319 -0
  91. package/src/components/switch.tsx +67 -0
  92. package/src/components/tabs.tsx +325 -0
  93. package/src/components/textarea.tsx +71 -0
  94. package/src/components/toast/toast.tsx +182 -0
  95. package/src/components/toast/toaster.tsx +160 -0
  96. package/src/components/toast/use-toast.tsx +248 -0
  97. package/src/components/toggle-group.tsx +64 -0
  98. package/src/components/toggle.tsx +46 -0
  99. package/src/components/tooltip.tsx +283 -0
  100. package/src/components/typography.tsx +437 -0
  101. package/src/index.ts +66 -0
  102. package/src/lib/utils.ts +62 -0
  103. package/src/stories/Accordion.stories.tsx +64 -0
  104. package/src/stories/AccordionItem.stories.tsx +48 -0
  105. package/src/stories/Avatar.stories.ts +58 -0
  106. package/src/stories/Badge.stories.tsx +40 -0
  107. package/src/stories/BannerSwiper.stories.tsx +102 -0
  108. package/src/stories/Button.stories.tsx +543 -0
  109. package/src/stories/Checkbox.stories.tsx +161 -0
  110. package/src/stories/Configure.mdx +341 -0
  111. package/src/stories/CssProperties.mdx +30 -0
  112. package/src/stories/Description.stories.ts +70 -0
  113. package/src/stories/Display.stories.ts +64 -0
  114. package/src/stories/FeaturedSwiper.stories.tsx +6978 -0
  115. package/src/stories/GridSwiper.stories.tsx +1407 -0
  116. package/src/stories/Guide.stories.tsx +247 -0
  117. package/src/stories/Heading.stories.ts +89 -0
  118. package/src/stories/Icon.stories.ts +77 -0
  119. package/src/stories/IconButton.stories.tsx +301 -0
  120. package/src/stories/IconTextButton.stories.ts +59 -0
  121. package/src/stories/Image.stories.ts +55 -0
  122. package/src/stories/Input.stories.tsx +203 -0
  123. package/src/stories/Modal.stories.tsx +144 -0
  124. package/src/stories/NavigationBar.stories.tsx +81 -0
  125. package/src/stories/Notification.stories.tsx +276 -0
  126. package/src/stories/Popover.stories.tsx +100 -0
  127. package/src/stories/SearchBar.stories.ts +43 -0
  128. package/src/stories/SecondaryNavigationBar.stories.tsx +199 -0
  129. package/src/stories/Select.stories.tsx +107 -0
  130. package/src/stories/Separator.stories.tsx +49 -0
  131. package/src/stories/Spinner.stories.tsx +48 -0
  132. package/src/stories/SubHeading.stories.ts +64 -0
  133. package/src/stories/Swich.stories.tsx +69 -0
  134. package/src/stories/Tabs.stories.tsx +90 -0
  135. package/src/stories/Text.stories.ts +78 -0
  136. package/src/stories/Textarea.stories.tsx +155 -0
  137. package/src/stories/Toast.stories.tsx +424 -0
  138. package/src/stories/Tooltip.stories.tsx +244 -0
  139. package/src/stories/ViewAutoSwiper.stories.tsx +1408 -0
  140. package/src/styles/components-dark.scss +212 -0
  141. package/src/styles/components-light.scss +210 -0
  142. package/src/styles/design-dark.scss +330 -0
  143. package/src/styles/design-light.scss +345 -0
  144. package/src/styles/design2-dark.scss +319 -0
  145. package/src/styles/design2-light.scss +364 -0
  146. package/src/styles/font.css +19 -0
  147. package/src/styles/global.scss +251 -0
  148. package/src/styles/md-viewer.scss +155 -0
  149. package/src/styles/new-tokens.scss +255 -0
  150. package/src/styles/tokens.scss +401 -0
  151. package/src/types/scss.d.ts +24 -0
package/src/styles/design2-dark.scss ADDED
@@ -0,0 +1,319 @@
1
+ @import './new-tokens.scss';
2
+
3
+ @layer base {
4
+ .dark {
5
+ // Colors Background Normal Primary
6
+ --Colors-Background-Normal-Primary-Default: var(--Neutral-Variant-10);
7
+ --Colors-Background-Normal-Primary-Hover: var(--Neutral-Variant-20);
8
+ --Colors-Background-Normal-Primary-Active: var(--Neutral-Variant-30);
9
+
10
+ // Colors Background Normal Secondary
11
+ --Colors-Background-Normal-Secondary-Default: var(--Neutral-Variant-20);
12
+ --Colors-Background-Normal-Secondary-Alt: var(--Neutral-Variant-10);
13
+ --Colors-Background-Normal-Secondary-Hover: var(--Neutral-Variant-30);
14
+ --Colors-Background-Normal-Secondary-Active: var(--Neutral-Variant-40);
15
+
16
+ // Colors Background Normal Tertiary
17
+ --Colors-Background-Normal-Tertiary-Default: var(--Neutral-Variant-30);
18
+ --Colors-Background-Normal-Tertiary-Hover: var(--Neutral-Variant-40);
19
+ --Colors-Background-Normal-Tertiary-Active: var(--Neutral-Variant-50);
20
+
21
+ // Colors Background Neutral Primary
22
+ --Colors-Background-Neutral-Primary-Default: var(--Neutral-Variant-5);
23
+ --Colors-Background-Neutral-Primary-Hover: var(--Neutral-Variant-10);
24
+ --Colors-Background-Neutral-Primary-Active: var(--Neutral-Variant-20);
25
+
26
+ // Colors Background Neutral Secondary
27
+ --Colors-Background-Neutral-Secondary-Default: var(--Neutral-Variant-10);
28
+ --Colors-Background-Neutral-Secondary-Hover: var(--Neutral-Variant-20);
29
+ --Colors-Background-Neutral-Secondary-Active: var(--Neutral-Variant-30);
30
+
31
+ // Colors Background Neutral Tertiary
32
+ --Colors-Background-Neutral-Tertiary-Default: var(--Neutral-Variant-30);
33
+ --Colors-Background-Neutral-Tertiary-Hover: var(--Neutral-Variant-40);
34
+ --Colors-Background-Neutral-Tertiary-Active: var(--Neutral-Variant-50);
35
+
36
+ // Colors Background Neutral On Surface
37
+ --Colors-Background-Neutral-On-Surface-Default: var(--Opacity-White-5);
38
+ --Colors-Background-Neutral-On-Surface-Hover: var(--Opacity-White-12);
39
+ --Colors-Background-Neutral-On-Surface-Active: var(--Opacity-White-16);
40
+ --Colors-Background-Neutral-On-Surface-Disabled: var(--Opacity-White-12);
41
+ --Colors-Background-Neutral-On-Surface-Alt: var(--Opacity-White-12);
42
+
43
+ // Colors Background Utilities
44
+ --Colors-Background-Utilities-Bolder: var(--Neutral-Variant-99);
45
+ --Colors-Background-Utilities-None: var(--Basic-None);
46
+ --Colors-Background-Utilities-Overlay: var(--Opacity-Black-70);
47
+ --Colors-Background-Utilities-Static-White: var(--Neutral-Variant-99);
48
+ --Colors-Background-Utilities-Static-Black: var(--Neutral-Variant-5);
49
+
50
+ // Colors Background Brand
51
+ --Colors-Background-Brand-Default: var(--Pure-Mauve-20);
52
+ --Colors-Background-Brand-Alt: var(--Pure-Mauve-50);
53
+ --Colors-Background-Brand-Subtle: var(--Pure-Mauve-10);
54
+ --Colors-Background-Brand-Hover: var(--Pure-Mauve-30);
55
+ --Colors-Background-Brand-Active: var(--Pure-Mauve-40);
56
+ --Colors-Background-Brand-Bolder: var(--Pure-Mauve-80);
57
+
58
+ // Colors Background Critical
59
+ --Colors-Background-Critical-Default: var(--Terracotta-20);
60
+ --Colors-Background-Critical-Alt: var(--Terracotta-50);
61
+ --Colors-Background-Critical-Subtle: var(--Terracotta-10);
62
+ --Colors-Background-Critical-Hover: var(--Terracotta-30);
63
+ --Colors-Background-Critical-Active: var(--Terracotta-40);
64
+ --Colors-Background-Critical-Bolder: var(--Terracotta-80);
65
+
66
+ // Colors Background Warning
67
+ --Colors-Background-Warning-Default: var(--Khaki-20);
68
+ --Colors-Background-Warning-Alt: var(--Khaki-50);
69
+ --Colors-Background-Warning-Subtle: var(--Khaki-10);
70
+ --Colors-Background-Warning-Hover: var(--Khaki-30);
71
+ --Colors-Background-Warning-Active: var(--Khaki-40);
72
+ --Colors-Background-Warning-Bolder: var(--Khaki-80);
73
+
74
+ // Colors Background Success
75
+ --Colors-Background-Success-Default: var(--Teal-20);
76
+ --Colors-Background-Success-Alt: var(--Teal-50);
77
+ --Colors-Background-Success-Subtle: var(--Teal-10);
78
+ --Colors-Background-Success-Hover: var(--Teal-30);
79
+ --Colors-Background-Success-Active: var(--Teal-40);
80
+ --Colors-Background-Success-Bolder: var(--Teal-80);
81
+
82
+ // Colors Background Info
83
+ --Colors-Background-Info-Default: var(--Lake-Blue-20);
84
+ --Colors-Background-Info-Alt: var(--Lake-Blue-50);
85
+ --Colors-Background-Info-Subtle: var(--Lake-Blue-10);
86
+ --Colors-Background-Info-Hover: var(--Lake-Blue-30);
87
+ --Colors-Background-Info-Active: var(--Lake-Blue-40);
88
+ --Colors-Background-Info-Bolder: var(--Lake-Blue-80);
89
+
90
+ // Colors Text
91
+ --Colors-Text-Default: var(--Neutral-Variant-100);
92
+ --Colors-Text-Subtle: var(--Neutral-Variant-90);
93
+ --Colors-Text-Subtler: var(--Neutral-Variant-70);
94
+ --Colors-Text-Subtlest: var(--Neutral-Variant-50);
95
+ --Colors-Text-Disabled: var(--Neutral-Variant-30);
96
+ --Colors-Text-Bolder: var(--Neutral-Variant-5);
97
+
98
+ // Colors Text Static
99
+ --Colors-Text-Static-White: var(--Neutral-Variant-100);
100
+ --Colors-Text-Static-Black: var(--Neutral-Variant-5);
101
+
102
+ // Colors Text Brand
103
+ --Colors-Text-Brand-Subtle: var(--Pure-Mauve-30);
104
+ --Colors-Text-Brand-Default: var(--Pure-Mauve-70);
105
+ --Colors-Text-Brand-Bolder: var(--Pure-Mauve-90);
106
+
107
+ // Colors Text Critical
108
+ --Colors-Text-Critical-Subtle: var(--Terracotta-30);
109
+ --Colors-Text-Critical-Default: var(--Terracotta-70);
110
+ --Colors-Text-Critical-Bolder: var(--Terracotta-90);
111
+
112
+ // Colors Text Warning
113
+ --Colors-Text-Warning-Subtle: var(--Khaki-30);
114
+ --Colors-Text-Warning-Default: var(--Khaki-70);
115
+ --Colors-Text-Warning-Bolder: var(--Khaki-90);
116
+
117
+ // Colors Text Success
118
+ --Colors-Text-Success-Subtle: var(--Teal-30);
119
+ --Colors-Text-Success-Default: var(--Teal-70);
120
+ --Colors-Text-Success-Bolder: var(--Teal-90);
121
+
122
+ // Colors Foreground
123
+ --Colors-Foreground-Default: var(--Neutral-Variant-100);
124
+ --Colors-Foreground-Subtle: var(--Neutral-Variant-90);
125
+ --Colors-Foreground-Subtler: var(--Neutral-Variant-70);
126
+ --Colors-Foreground-Subtlest: var(--Neutral-Variant-50);
127
+ --Colors-Foreground-Disabled: var(--Neutral-Variant-30);
128
+ --Colors-Foreground-Bolder: var(--Neutral-Variant-5);
129
+
130
+ // Colors Foreground Static
131
+ --Colors-Foreground-Static-White: var(--Neutral-Variant-100);
132
+ --Colors-Foreground-Static-Black: var(--Neutral-Variant-5);
133
+
134
+ // Colors Foreground Brand
135
+ --Colors-Foreground-Brand-Subtle: var(--Pure-Mauve-30);
136
+ --Colors-Foreground-Brand-Default: var(--Pure-Mauve-70);
137
+ --Colors-Foreground-Brand-Bolder: var(--Pure-Mauve-90);
138
+
139
+ // Colors Foreground Critical
140
+ --Colors-Foreground-Critical-Subtle: var(--Terracotta-30);
141
+ --Colors-Foreground-Critical-Default: var(--Terracotta-60);
142
+ --Colors-Foreground-Critical-Bolder: var(--Terracotta-90);
143
+
144
+ // Colors Foreground Warning
145
+ --Colors-Foreground-Warning-Subtle: var(--Khaki-30);
146
+ --Colors-Foreground-Warning-Default: var(--Khaki-70);
147
+ --Colors-Foreground-Warning-Bolder: var(--Khaki-90);
148
+
149
+ // Colors Foreground Success
150
+ --Colors-Foreground-Success-Subtle: var(--Teal-30);
151
+ --Colors-Foreground-Success-Default: var(--Teal-70);
152
+ --Colors-Foreground-Success-Bolder: var(--Teal-90);
153
+
154
+ // Colors Border
155
+ --Colors-Border-Default: var(--Neutral-Variant-20);
156
+ --Colors-Border-Alt: var(--Neutral-Variant-30);
157
+ --Colors-Border-Hover: var(--Neutral-Variant-30);
158
+ --Colors-Border-Active: var(--Neutral-Variant-40);
159
+ --Colors-Border-Bolder: var(--Neutral-Variant-100);
160
+ --Colors-Border-Brand: var(--Pure-Mauve-60);
161
+ --Colors-Border-Brand_alt: var(--Pure-Mauve-40);
162
+ --Colors-Border-Critical: var(--Terracotta-60);
163
+ --Colors-Border-Success: var(--Teal-60);
164
+ --Colors-Border-Warning: var(--Khaki-60);
165
+ --Colors-Border-Opaque: var(--Opacity-White-8);
166
+ --Colors-Border-Static: var(--Neutral-Variant-95);
167
+
168
+ // Colors Alpha
169
+ --Colors-Alpha-White-1: var(--Opacity-Black-1);
170
+ --Colors-Alpha-White-3: var(--Opacity-Black-3);
171
+ --Colors-Alpha-White-5: var(--Opacity-Black-5);
172
+ --Colors-Alpha-White-8: var(--Opacity-Black-8);
173
+ --Colors-Alpha-White-12: var(--Opacity-Black-12);
174
+ --Colors-Alpha-White-16: var(--Opacity-Black-16);
175
+ --Colors-Alpha-White-20: var(--Opacity-Black-20);
176
+ --Colors-Alpha-White-30: var(--Opacity-Black-30);
177
+ --Colors-Alpha-White-40: var(--Opacity-Black-40);
178
+ --Colors-Alpha-White-50: var(--Opacity-Black-50);
179
+ --Colors-Alpha-White-60: var(--Opacity-Black-60);
180
+ --Colors-Alpha-White-70: var(--Opacity-Black-70);
181
+ --Colors-Alpha-White-80: var(--Opacity-Black-80);
182
+ --Colors-Alpha-White-90: var(--Opacity-Black-90);
183
+ --Colors-Alpha-White-95: var(--Opacity-Black-95);
184
+ --Colors-Alpha-White-100: var(--Opacity-Black-100);
185
+ --Colors-Alpha-Black-1: var(--Opacity-White-1);
186
+ --Colors-Alpha-Black-3: var(--Opacity-White-3);
187
+ --Colors-Alpha-Black-5: var(--Opacity-White-5);
188
+ --Colors-Alpha-Black-8: var(--Opacity-White-8);
189
+ --Colors-Alpha-Black-12: var(--Opacity-White-12);
190
+ --Colors-Alpha-Black-16: var(--Opacity-White-16);
191
+ --Colors-Alpha-Black-20: var(--Opacity-White-20);
192
+ --Colors-Alpha-Black-30: var(--Opacity-White-30);
193
+ --Colors-Alpha-Black-40: var(--Opacity-White-40);
194
+ --Colors-Alpha-Black-50: var(--Opacity-White-50);
195
+ --Colors-Alpha-Black-60: var(--Opacity-White-60);
196
+ --Colors-Alpha-Black-70: var(--Opacity-White-70);
197
+ --Colors-Alpha-Black-80: var(--Opacity-White-80);
198
+ --Colors-Alpha-Black-90: var(--Opacity-White-90);
199
+ --Colors-Alpha-Black-95: var(--Opacity-White-95);
200
+ --Colors-Alpha-Black-100: var(--Opacity-White-100);
201
+
202
+ // Colors beta (与亮色模式一套token值)
203
+
204
+ // Colors Utility Gray
205
+ --Colors-Utility-Gray-5: var(--Neutral-Variant-10);
206
+ --Colors-Utility-Gray-10: var(--Neutral-Variant-20);
207
+ --Colors-Utility-Gray-20: var(--Neutral-Variant-30);
208
+ --Colors-Utility-Gray-30: var(--Neutral-Variant-40);
209
+ --Colors-Utility-Gray-40: var(--Neutral-Variant-50);
210
+ --Colors-Utility-Gray-50: var(--Neutral-Variant-60);
211
+ --Colors-Utility-Gray-60: var(--Neutral-Variant-70);
212
+ --Colors-Utility-Gray-70: var(--Neutral-Variant-80);
213
+ --Colors-Utility-Gray-80: var(--Neutral-Variant-90);
214
+
215
+ // Colors Utility Olive
216
+ --Colors-Utility-Olive-5: var(--Olive-10);
217
+ --Colors-Utility-Olive-10: var(--Olive-20);
218
+ --Colors-Utility-Olive-20: var(--Olive-30);
219
+ --Colors-Utility-Olive-30: var(--Olive-40);
220
+ --Colors-Utility-Olive-40: var(--Olive-50);
221
+ --Colors-Utility-Olive-50: var(--Olive-60);
222
+ --Colors-Utility-Olive-60: var(--Olive-70);
223
+ --Colors-Utility-Olive-70: var(--Olive-80);
224
+ --Colors-Utility-Olive-80: var(--Olive-90);
225
+
226
+ // Colors Utility Teal
227
+ --Colors-Utility-Teal-5: var(--Teal-10);
228
+ --Colors-Utility-Teal-10: var(--Teal-20);
229
+ --Colors-Utility-Teal-20: var(--Teal-30);
230
+ --Colors-Utility-Teal-30: var(--Teal-40);
231
+ --Colors-Utility-Teal-40: var(--Teal-50);
232
+ --Colors-Utility-Teal-50: var(--Teal-60);
233
+ --Colors-Utility-Teal-60: var(--Teal-70);
234
+ --Colors-Utility-Teal-70: var(--Teal-80);
235
+ --Colors-Utility-Teal-80: var(--Teal-90);
236
+
237
+ // Colors Utility Lake Blue
238
+ --Colors-Utility-Lake-Blue-5: var(--Lake-Blue-10);
239
+ --Colors-Utility-Lake-Blue-10: var(--Lake-Blue-20);
240
+ --Colors-Utility-Lake-Blue-20: var(--Lake-Blue-30);
241
+ --Colors-Utility-Lake-Blue-30: var(--Lake-Blue-40);
242
+ --Colors-Utility-Lake-Blue-40: var(--Lake-Blue-50);
243
+ --Colors-Utility-Lake-Blue-50: var(--Lake-Blue-60);
244
+ --Colors-Utility-Lake-Blue-60: var(--Lake-Blue-70);
245
+ --Colors-Utility-Lake-Blue-70: var(--Lake-Blue-80);
246
+ --Colors-Utility-Lake-Blue-80: var(--Lake-Blue-90);
247
+
248
+ // Colors Utility Cobalt
249
+ --Colors-Utility-Cobalt-5: var(--Cobalt-10);
250
+ --Colors-Utility-Cobalt-10: var(--Cobalt-20);
251
+ --Colors-Utility-Cobalt-20: var(--Cobalt-30);
252
+ --Colors-Utility-Cobalt-30: var(--Cobalt-40);
253
+ --Colors-Utility-Cobalt-40: var(--Cobalt-50);
254
+ --Colors-Utility-Cobalt-50: var(--Cobalt-60);
255
+ --Colors-Utility-Cobalt-60: var(--Cobalt-70);
256
+ --Colors-Utility-Cobalt-70: var(--Cobalt-80);
257
+ --Colors-Utility-Cobalt-80: var(--Cobalt-90);
258
+
259
+ // Colors Utility Berry Pink
260
+ --Colors-Utility-Berry-Pink-5: var(--Berry-Pink-10);
261
+ --Colors-Utility-Berry-Pink-10: var(--Berry-Pink-20);
262
+ --Colors-Utility-Berry-Pink-20: var(--Berry-Pink-30);
263
+ --Colors-Utility-Berry-Pink-30: var(--Berry-Pink-40);
264
+ --Colors-Utility-Berry-Pink-40: var(--Berry-Pink-50);
265
+ --Colors-Utility-Berry-Pink-50: var(--Berry-Pink-60);
266
+ --Colors-Utility-Berry-Pink-60: var(--Berry-Pink-70);
267
+ --Colors-Utility-Berry-Pink-70: var(--Berry-Pink-80);
268
+ --Colors-Utility-Berry-Pink-80: var(--Berry-Pink-90);
269
+
270
+ // Colors Utility Terracotta
271
+ --Colors-Utility-Terracotta-5: var(--Terracotta-10);
272
+ --Colors-Utility-Terracotta-10: var(--Terracotta-20);
273
+ --Colors-Utility-Terracotta-20: var(--Terracotta-30);
274
+ --Colors-Utility-Terracotta-30: var(--Terracotta-40);
275
+ --Colors-Utility-Terracotta-40: var(--Terracotta-50);
276
+ --Colors-Utility-Terracotta-50: var(--Terracotta-60);
277
+ --Colors-Utility-Terracotta-60: var(--Terracotta-70);
278
+ --Colors-Utility-Terracotta-70: var(--Terracotta-80);
279
+ --Colors-Utility-Terracotta-80: var(--Terracotta-90);
280
+
281
+ // Colors Utility Ember
282
+ --Colors-Utility-Ember-5: var(--Ember-10);
283
+ --Colors-Utility-Ember-10: var(--Ember-20);
284
+ --Colors-Utility-Ember-20: var(--Ember-30);
285
+ --Colors-Utility-Ember-30: var(--Ember-40);
286
+ --Colors-Utility-Ember-40: var(--Ember-50);
287
+ --Colors-Utility-Ember-50: var(--Ember-60);
288
+ --Colors-Utility-Ember-60: var(--Ember-70);
289
+ --Colors-Utility-Ember-70: var(--Ember-80);
290
+ --Colors-Utility-Ember-80: var(--Ember-90);
291
+
292
+ // Colors Utility Purple
293
+ --Colors-Utility-Purple-5: var(--Pure-Mauve-10);
294
+ --Colors-Utility-Purple-10: var(--Pure-Mauve-20);
295
+ --Colors-Utility-Purple-20: var(--Pure-Mauve-30);
296
+ --Colors-Utility-Purple-30: var(--Pure-Mauve-40);
297
+ --Colors-Utility-Purple-40: var(--Pure-Mauve-50);
298
+ --Colors-Utility-Purple-50: var(--Pure-Mauve-60);
299
+ --Colors-Utility-Purple-60: var(--Pure-Mauve-70);
300
+ --Colors-Utility-Purple-70: var(--Pure-Mauve-80);
301
+ --Colors-Utility-Purple-80: var(--Pure-Mauve-90);
302
+
303
+ // Colors Utility Plum Purple
304
+ --Colors-Utility-Plum-Purple-5: var(--Plum-Purple-10);
305
+ --Colors-Utility-Plum-Purple-10: var(--Plum-Purple-20);
306
+ --Colors-Utility-Plum-Purple-20: var(--Plum-Purple-30);
307
+ --Colors-Utility-Plum-Purple-30: var(--Plum-Purple-40);
308
+ --Colors-Utility-Plum-Purple-40: var(--Plum-Purple-50);
309
+ --Colors-Utility-Plum-Purple-50: var(--Plum-Purple-60);
310
+ --Colors-Utility-Plum-Purple-60: var(--Plum-Purple-70);
311
+ --Colors-Utility-Plum-Purple-70: var(--Plum-Purple-80);
312
+ --Colors-Utility-Plum-Purple-80: var(--Plum-Purple-90);
313
+
314
+ --Colors-FaceTime-White: var(--Opacity-Black-20);
315
+ --Colors-FaceTime-Black: var(--Opacity-White-20);
316
+
317
+
318
+ }
319
+ }
package/src/styles/design2-light.scss ADDED
@@ -0,0 +1,364 @@
1
+ @import './new-tokens.scss';
2
+
3
+ @layer base {
4
+ :root {
5
+ // Colors Background Normal
6
+ --Colors-Background-Normal-Primary-Default: var(--Neutral-99);
7
+ --Colors-Background-Normal-Primary-Hover: var(--Neutral-98);
8
+ --Colors-Background-Normal-Primary-Active: var(--Neutral-90);
9
+
10
+ // Colors Background Normal Secondary
11
+ --Colors-Background-Normal-Secondary-Default: var(--Neutral-98);
12
+ --Colors-Background-Normal-Secondary-Alt: var(--Neutral-100);
13
+ --Colors-Background-Normal-Secondary-Hover: var(--Neutral-95);
14
+ --Colors-Background-Normal-Secondary-Active: var(--Neutral-90);
15
+
16
+ // Colors Background Normal Tertiary
17
+ --Colors-Background-Normal-Tertiary-Default: var(--Neutral-100);
18
+ --Colors-Background-Normal-Tertiary-Hover: var(--Neutral-98);
19
+ --Colors-Background-Normal-Tertiary-Active: var(--Neutral-95);
20
+
21
+ // Colors Background Neutral Primary
22
+ --Colors-Background-Neutral-Primary-Default: var(--Neutral-98);
23
+ --Colors-Background-Neutral-Primary-Hover: var(--Neutral-95);
24
+ --Colors-Background-Neutral-Primary-Active: var(--Neutral-90);
25
+
26
+ // Colors Background Neutral Secondary
27
+ --Colors-Background-Neutral-Secondary-Default: var(--Neutral-99);
28
+ --Colors-Background-Neutral-Secondary-Hover: var(--Neutral-98);
29
+ --Colors-Background-Neutral-Secondary-Active: var(--Neutral-95);
30
+
31
+ // Colors Background Neutral Tertiary
32
+ --Colors-Background-Neutral-Tertiary-Default: var(--Neutral-98);
33
+ --Colors-Background-Neutral-Tertiary-Hover: var(--Neutral-95);
34
+ --Colors-Background-Neutral-Tertiary-Active: var(--Neutral-90);
35
+
36
+ // Colors Background Neutral On Surface
37
+ --Colors-Background-Neutral-On-Surface-Default: var(--Opacity-On-Surface-10);
38
+ --Colors-Background-Neutral-On-Surface-Hover: var(--Opacity-On-Surface-20);
39
+ --Colors-Background-Neutral-On-Surface-Active: var(--Opacity-On-Surface-30);
40
+ --Colors-Background-Neutral-On-Surface-Disabled: var(--Opacity-On-Surface-10);
41
+ --Colors-Background-Neutral-On-Surface-Alt: var(--Opacity-On-Surface-40);
42
+
43
+ // Colors Background Utilities
44
+ --Colors-Background-Utilities-Bolder: var(--Neutral-5);
45
+ --Colors-Background-Utilities-None: var(--Basic-None);
46
+ --Colors-Background-Utilities-Overlay: var(--Opacity-Black-70);
47
+ --Colors-Background-Utilities-Static-White: var(--Neutral-99);
48
+ --Colors-Background-Utilities-Static-Black: var(--Neutral-5);
49
+
50
+ // Colors Background Brand
51
+ --Colors-Background-Brand-Default: var(--Pure-Mauve-95);
52
+ --Colors-Background-Brand-Alt: var(--Pure-Mauve-95);
53
+ --Colors-Background-Brand-Subtle: var(--Pure-Mauve-98);
54
+ --Colors-Background-Brand-Hover: var(--Pure-Mauve-90);
55
+ --Colors-Background-Brand-Active: var(--Pure-Mauve-80);
56
+ --Colors-Background-Brand-Bolder: var(--Pure-Mauve-30);
57
+
58
+ // Colors Background Critical
59
+ --Colors-Background-Critical-Default: var(--Terracotta-95);
60
+ --Colors-Background-Critical-Alt: var(--Terracotta-95);
61
+ --Colors-Background-Critical-Subtle: var(--Terracotta-98);
62
+ --Colors-Background-Critical-Hover: var(--Terracotta-90);
63
+ --Colors-Background-Critical-Active: var(--Terracotta-80);
64
+ --Colors-Background-Critical-Bolder: var(--Terracotta-30);
65
+
66
+ // Colors Background Warning
67
+ --Colors-Background-Warning-Default: var(--Khaki-95);
68
+ --Colors-Background-Warning-Alt: var(--Khaki-95);
69
+ --Colors-Background-Warning-Subtle: var(--Khaki-98);
70
+ --Colors-Background-Warning-Hover: var(--Khaki-90);
71
+ --Colors-Background-Warning-Active: var(--Khaki-80);
72
+ --Colors-Background-Warning-Bolder: var(--Khaki-30);
73
+
74
+ // Colors Background Success
75
+ --Colors-Background-Success-Default: var(--Teal-98);
76
+ --Colors-Background-Success-Alt: var(--Teal-98);
77
+ --Colors-Background-Success-Subtle: var(--Teal-99);
78
+ --Colors-Background-Success-Hover: var(--Teal-90);
79
+ --Colors-Background-Success-Active: var(--Teal-80);
80
+ --Colors-Background-Success-Bolder: var(--Teal-30);
81
+
82
+ // Colors Background Info
83
+ --Colors-Background-Info-Default: var(--Lake-Blue-95);
84
+ --Colors-Background-Info-Alt: var(--Lake-Blue-95);
85
+ --Colors-Background-Info-Subtle: var(--Lake-Blue-98);
86
+ --Colors-Background-Info-Hover: var(--Lake-Blue-90);
87
+ --Colors-Background-Info-Active: var(--Lake-Blue-80);
88
+ --Colors-Background-Info-Bolder: var(--Lake-Blue-30);
89
+
90
+ // Colors Text
91
+ --Colors-Text-Default: var(--Neutral-5);
92
+ --Colors-Text-Subtle: var(--Neutral-30);
93
+ --Colors-Text-Subtler: var(--Neutral-40);
94
+ --Colors-Text-Subtlest: var(--Neutral-50);
95
+ --Colors-Text-Disabled: var(--Neutral-80);
96
+ --Colors-Text-Bolder: var(--Neutral-100); //对应旧版inverse
97
+
98
+ // Colors Text Static
99
+ --Colors-Text-Static-White: var(--Neutral-100);
100
+ --Colors-Text-Static-Black: var(--Neutral-5);
101
+
102
+ // Colors Text Brand
103
+ --Colors-Text-Brand-Subtle: var(--Pure-Mauve-70);
104
+ --Colors-Text-Brand-Default: var(--Pure-Mauve-50);
105
+ --Colors-Text-Brand-Bolder: var(--Pure-Mauve-30);
106
+
107
+ // Colors Text Critical
108
+ --Colors-Text-Critical-Subtle: var(--Terracotta-70);
109
+ --Colors-Text-Critical-Default: var(--Terracotta-50);
110
+ --Colors-Text-Critical-Bolder: var(--Terracotta-30);
111
+
112
+ // Colors Text Warning
113
+ --Colors-Text-Warning-Subtle: var(--Khaki-80);
114
+ --Colors-Text-Warning-Default: var(--Khaki-60);
115
+ --Colors-Text-Warning-Bolder: var(--Khaki-30);
116
+
117
+ // Colors Text Success
118
+ --Colors-Text-Success-Subtle: var(--Teal-70);
119
+ --Colors-Text-Success-Default: var(--Teal-50);
120
+ --Colors-Text-Success-Bolder: var(--Teal-30);
121
+
122
+
123
+ // Colort Foreground
124
+ --Colors-Foreground-Default: var(--Neutral-5);
125
+ --Colors-Foreground-Subtle: var(--Neutral-30);
126
+ --Colors-Foreground-Subtler: var(--Neutral-40);
127
+ --Colors-Foreground-Subtlest: var(--Neutral-50);
128
+ --Colors-Foreground-Disabled: var(--Neutral-80);
129
+ --Colors-Foreground-Bolder: var(--Neutral-100);
130
+
131
+ // Colors Foreground Static
132
+ --Colors-Foreground-Static-White: var(--Neutral-100);
133
+ --Colors-Foreground-Static-Black: var(--Neutral-5);
134
+
135
+ // Colors Foreground Brand
136
+ --Colors-Foreground-Brand-Subtle: var(--Pure-Mauve-70);
137
+ --Colors-Foreground-Brand-Default: var(--Pure-Mauve-50);
138
+ --Colors-Foreground-Brand-Bolder: var(--Pure-Mauve-30);
139
+
140
+ // Colors Foreground Critical
141
+ --Colors-Foreground-Critical-Subtle: var(--Terracotta-70);
142
+ --Colors-Foreground-Critical-Default: var(--Terracotta-50);
143
+ --Colors-Foreground-Critical-Bolder: var(--Terracotta-30);
144
+
145
+ // Colors Foreground Warning
146
+ --Colors-Foreground-Warning-Subtle: var(--Khaki-80);
147
+ --Colors-Foreground-Warning-Default: var(--Khaki-60);
148
+ --Colors-Foreground-Warning-Bolder: var(--Khaki-30);
149
+
150
+ // Colors Foreground Success
151
+ --Colors-Foreground-Success-Subtle: var(--Teal-70);
152
+ --Colors-Foreground-Success-Default: var(--Teal-50);
153
+ --Colors-Foreground-Success-Bolder: var(--Teal-30);
154
+
155
+
156
+ // Colors Border
157
+ --Colors-Border-Default: var(--Neutral-95);
158
+ --Colors-Border-Alt: var(--Neutral-95);
159
+ --Colors-Border-Hover: var(--Neutral-90);
160
+ --Colors-Border-Active: var(--Neutral-80);
161
+ --Colors-Border-Bolder: var(--Neutral-5);
162
+ --Colors-Border-Brand: var(--Pure-Mauve-50);
163
+ --Colors-Border-Brand_alt: var(--Pure-Mauve-80);
164
+ --Colors-Border-Critical: var(--Terracotta-50);
165
+ --Colors-Border-Success: var(--Teal-50);
166
+ --Colors-Border-Warning: var(--Khaki-50);
167
+ --Colors-Border-Opaque: var(--Opacity-White-1);
168
+ --Colors-Border-Static: var(--Neutral-95);
169
+
170
+ // Colors Alpha
171
+ --Colors-Alpha-White-1: var(--Opacity-White-1);
172
+ --Colors-Alpha-White-3: var(--Opacity-White-3);
173
+ --Colors-Alpha-White-5: var(--Opacity-White-5);
174
+ --Colors-Alpha-White-8: var(--Opacity-White-8);
175
+ --Colors-Alpha-White-12: var(--Opacity-White-12);
176
+ --Colors-Alpha-White-16: var(--Opacity-White-16);
177
+ --Colors-Alpha-White-20: var(--Opacity-White-20);
178
+ --Colors-Alpha-White-30: var(--Opacity-White-30);
179
+ --Colors-Alpha-White-40: var(--Opacity-White-40);
180
+ --Colors-Alpha-White-50: var(--Opacity-White-50);
181
+ --Colors-Alpha-White-60: var(--Opacity-White-60);
182
+ --Colors-Alpha-White-70: var(--Opacity-White-70);
183
+ --Colors-Alpha-White-80: var(--Opacity-White-80);
184
+ --Colors-Alpha-White-90: var(--Opacity-White-90);
185
+ --Colors-Alpha-White-95: var(--Opacity-White-95);
186
+ --Colors-Alpha-White-100: var(--Opacity-White-100);
187
+ --Colors-Alpha-Black-1: var(--Opacity-Black-1);
188
+ --Colors-Alpha-Black-3: var(--Opacity-Black-3);
189
+ --Colors-Alpha-Black-5: var(--Opacity-Black-5);
190
+ --Colors-Alpha-Black-8: var(--Opacity-Black-8);
191
+ --Colors-Alpha-Black-12: var(--Opacity-Black-12);
192
+ --Colors-Alpha-Black-16: var(--Opacity-Black-16);
193
+ --Colors-Alpha-Black-20: var(--Opacity-Black-20);
194
+ --Colors-Alpha-Black-30: var(--Opacity-Black-30);
195
+ --Colors-Alpha-Black-40: var(--Opacity-Black-40);
196
+ --Colors-Alpha-Black-50: var(--Opacity-Black-50);
197
+ --Colors-Alpha-Black-60: var(--Opacity-Black-60);
198
+ --Colors-Alpha-Black-70: var(--Opacity-Black-70);
199
+ --Colors-Alpha-Black-80: var(--Opacity-Black-80);
200
+ --Colors-Alpha-Black-90: var(--Opacity-Black-90);
201
+ --Colors-Alpha-Black-95: var(--Opacity-Black-95);
202
+ --Colors-Alpha-Black-100: var(--Opacity-Black-100);
203
+
204
+ // Colors beta
205
+ --Colors-Beta-White-1: var(--Opacity-White-1);
206
+ --Colors-Beta-White-3: var(--Opacity-White-3);
207
+ --Colors-Beta-White-5: var(--Opacity-White-5);
208
+ --Colors-Beta-White-8: var(--Opacity-White-8);
209
+ --Colors-Beta-White-12: var(--Opacity-White-12);
210
+ --Colors-Beta-White-16: var(--Opacity-White-16);
211
+ --Colors-Beta-White-20: var(--Opacity-White-20);
212
+ --Colors-Beta-White-30: var(--Opacity-White-30);
213
+ --Colors-Beta-White-40: var(--Opacity-White-40);
214
+ --Colors-Beta-White-50: var(--Opacity-White-50);
215
+ --Colors-Beta-White-60: var(--Opacity-White-60);
216
+ --Colors-Beta-White-70: var(--Opacity-White-70);
217
+ --Colors-Beta-White-80: var(--Opacity-White-80);
218
+ --Colors-Beta-White-90: var(--Opacity-White-90);
219
+ --Colors-Beta-White-95: var(--Opacity-White-95);
220
+ --Colors-Beta-White-100: var(--Opacity-White-100);
221
+ --Colors-Beta-Black-1: var(--Opacity-Black-1);
222
+ --Colors-Beta-Black-3: var(--Opacity-Black-3);
223
+ --Colors-Beta-Black-5: var(--Opacity-Black-5);
224
+ --Colors-Beta-Black-8: var(--Opacity-Black-8);
225
+ --Colors-Beta-Black-12: var(--Opacity-Black-12);
226
+ --Colors-Beta-Black-16: var(--Opacity-Black-16);
227
+ --Colors-Beta-Black-20: var(--Opacity-Black-20);
228
+ --Colors-Beta-Black-30: var(--Opacity-Black-30);
229
+ --Colors-Beta-Black-40: var(--Opacity-Black-40);
230
+ --Colors-Beta-Black-50: var(--Opacity-Black-50);
231
+ --Colors-Beta-Black-60: var(--Opacity-Black-60);
232
+ --Colors-Beta-Black-70: var(--Opacity-Black-70);
233
+ --Colors-Beta-Black-80: var(--Opacity-Black-80);
234
+ --Colors-Beta-Black-90: var(--Opacity-Black-90);
235
+ --Colors-Beta-Black-95: var(--Opacity-Black-95);
236
+ --Colors-Beta-Black-100: var(--Opacity-Black-100);
237
+
238
+ // Colors Utility Gray
239
+ --Colors-Utility-Gray-5: var(--Neutral-Variant-98);
240
+ --Colors-Utility-Gray-10: var(--Neutral-Variant-95);
241
+ --Colors-Utility-Gray-20: var(--Neutral-Variant-90);
242
+ --Colors-Utility-Gray-30: var(--Neutral-Variant-80);
243
+ --Colors-Utility-Gray-40: var(--Neutral-Variant-70);
244
+ --Colors-Utility-Gray-50: var(--Neutral-Variant-60);
245
+ --Colors-Utility-Gray-60: var(--Neutral-Variant-50);
246
+ --Colors-Utility-Gray-70: var(--Neutral-Variant-40);
247
+ --Colors-Utility-Gray-80: var(--Neutral-Variant-30);
248
+
249
+ // Colors Utility Olive
250
+ --Colors-Utility-Olive-5: var(--Olive-98);
251
+ --Colors-Utility-Olive-10: var(--Olive-95);
252
+ --Colors-Utility-Olive-20: var(--Olive-90);
253
+ --Colors-Utility-Olive-30: var(--Olive-80);
254
+ --Colors-Utility-Olive-40: var(--Olive-70);
255
+ --Colors-Utility-Olive-50: var(--Olive-60);
256
+ --Colors-Utility-Olive-60: var(--Olive-50);
257
+ --Colors-Utility-Olive-70: var(--Olive-40);
258
+ --Colors-Utility-Olive-80: var(--Olive-30);
259
+
260
+ // Colors Utility Teal
261
+ --Colors-Utility-Teal-5: var(--Teal-98);
262
+ --Colors-Utility-Teal-10: var(--Teal-95);
263
+ --Colors-Utility-Teal-20: var(--Teal-90);
264
+ --Colors-Utility-Teal-30: var(--Teal-80);
265
+ --Colors-Utility-Teal-40: var(--Teal-70);
266
+ --Colors-Utility-Teal-50: var(--Teal-60);
267
+ --Colors-Utility-Teal-60: var(--Teal-50);
268
+ --Colors-Utility-Teal-70: var(--Teal-40);
269
+ --Colors-Utility-Teal-80: var(--Teal-30);
270
+
271
+ // Colors Utility Terracotta
272
+ --Colors-Utility-Lake-Blue-5: var(--Lake-Blue-98);
273
+ --Colors-Utility-Lake-Blue-10: var(--Lake-Blue-95);
274
+ --Colors-Utility-Lake-Blue-20: var(--Lake-Blue-90);
275
+ --Colors-Utility-Lake-Blue-30: var(--Lake-Blue-80);
276
+ --Colors-Utility-Lake-Blue-40: var(--Lake-Blue-70);
277
+ --Colors-Utility-Lake-Blue-50: var(--Lake-Blue-60);
278
+ --Colors-Utility-Lake-Blue-60: var(--Lake-Blue-50);
279
+ --Colors-Utility-Lake-Blue-70: var(--Lake-Blue-40);
280
+ --Colors-Utility-Lake-Blue-80: var(--Lake-Blue-30);
281
+
282
+ // Colors Utility Cobalt
283
+ --Colors-Utility-Cobalt-5: var(--Cobalt-98);
284
+ --Colors-Utility-Cobalt-10: var(--Cobalt-95);
285
+ --Colors-Utility-Cobalt-20: var(--Cobalt-90);
286
+ --Colors-Utility-Cobalt-30: var(--Cobalt-80);
287
+ --Colors-Utility-Cobalt-40: var(--Cobalt-70);
288
+ --Colors-Utility-Cobalt-50: var(--Cobalt-60);
289
+ --Colors-Utility-Cobalt-60: var(--Cobalt-50);
290
+ --Colors-Utility-Cobalt-70: var(--Cobalt-40);
291
+ --Colors-Utility-Cobalt-80: var(--Cobalt-30);
292
+
293
+ // Colors Utility Berry Pink
294
+ --Colors-Utility-Berry-Pink-5: var(--Berry-Pink-98);
295
+ --Colors-Utility-Berry-Pink-10: var(--Berry-Pink-95);
296
+ --Colors-Utility-Berry-Pink-20: var(--Berry-Pink-90);
297
+ --Colors-Utility-Berry-Pink-30: var(--Berry-Pink-80);
298
+ --Colors-Utility-Berry-Pink-40: var(--Berry-Pink-70);
299
+ --Colors-Utility-Berry-Pink-50: var(--Berry-Pink-60);
300
+ --Colors-Utility-Berry-Pink-60: var(--Berry-Pink-50);
301
+ --Colors-Utility-Berry-Pink-70: var(--Berry-Pink-40);
302
+ --Colors-Utility-Berry-Pink-80: var(--Berry-Pink-30);
303
+
304
+ // Colors Utility Terracotta
305
+ --Colors-Utility-Terracotta-5: var(--Terracotta-98);
306
+ --Colors-Utility-Terracotta-10: var(--Terracotta-95);
307
+ --Colors-Utility-Terracotta-20: var(--Terracotta-90);
308
+ --Colors-Utility-Terracotta-30: var(--Terracotta-80);
309
+ --Colors-Utility-Terracotta-40: var(--Terracotta-70);
310
+ --Colors-Utility-Terracotta-50: var(--Terracotta-60);
311
+ --Colors-Utility-Terracotta-60: var(--Terracotta-50);
312
+ --Colors-Utility-Terracotta-70: var(--Terracotta-40);
313
+ --Colors-Utility-Terracotta-80: var(--Terracotta-30);
314
+
315
+ // Colors Utility Ember
316
+ --Colors-Utility-Ember-5: var(--Ember-98);
317
+ --Colors-Utility-Ember-10: var(--Ember-95);
318
+ --Colors-Utility-Ember-20: var(--Ember-90);
319
+ --Colors-Utility-Ember-30: var(--Ember-80);
320
+ --Colors-Utility-Ember-40: var(--Ember-70);
321
+ --Colors-Utility-Ember-50: var(--Ember-60);
322
+ --Colors-Utility-Ember-60: var(--Ember-50);
323
+ --Colors-Utility-Ember-70: var(--Ember-40);
324
+ --Colors-Utility-Ember-80: var(--Ember-30);
325
+
326
+ // Colors Utility Khaki
327
+ --Colors-Utility-Khaki-5: var(--Khaki-98);
328
+ --Colors-Utility-Khaki-10: var(--Khaki-95);
329
+ --Colors-Utility-Khaki-20: var(--Khaki-90);
330
+ --Colors-Utility-Khaki-30: var(--Khaki-80);
331
+ --Colors-Utility-Khaki-40: var(--Khaki-70);
332
+ --Colors-Utility-Khaki-50: var(--Khaki-60);
333
+ --Colors-Utility-Khaki-60: var(--Khaki-50);
334
+ --Colors-Utility-Khaki-70: var(--Khaki-40);
335
+ --Colors-Utility-Khaki-80: var(--Khaki-30);
336
+
337
+ // Colors Utility Purple
338
+ --Colors-Utility-Purple-5: var(--Pure-Mauve-99);
339
+ --Colors-Utility-Purple-10: var(--Pure-Mauve-98);
340
+ --Colors-Utility-Purple-20: var(--Pure-Mauve-95);
341
+ --Colors-Utility-Purple-30: var(--Pure-Mauve-90);
342
+ --Colors-Utility-Purple-40: var(--Pure-Mauve-80);
343
+ --Colors-Utility-Purple-50: var(--Pure-Mauve-70);
344
+ --Colors-Utility-Purple-60: var(--Pure-Mauve-60);
345
+ --Colors-Utility-Purple-70: var(--Pure-Mauve-50);
346
+ --Colors-Utility-Purple-80: var(--Pure-Mauve-40);
347
+
348
+ // Colors Utility Plum Purple
349
+ --Colors-Utility-Plum-Purple-5: var(--Plum-Purple-98);
350
+ --Colors-Utility-Plum-Purple-10: var(--Plum-Purple-95);
351
+ --Colors-Utility-Plum-Purple-20: var(--Plum-Purple-90);
352
+ --Colors-Utility-Plum-Purple-30: var(--Plum-Purple-80);
353
+ --Colors-Utility-Plum-Purple-40: var(--Plum-Purple-70);
354
+ --Colors-Utility-Plum-Purple-50: var(--Plum-Purple-60);
355
+ --Colors-Utility-Plum-Purple-60: var(--Plum-Purple-50);
356
+ --Colors-Utility-Plum-Purple-70: var(--Plum-Purple-40);
357
+ --Colors-Utility-Plum-Purple-80: var(--Plum-Purple-30);
358
+
359
+ --Colors-FaceTime-White: var(--Opacity-White-20);
360
+ --Colors-FaceTime-Black: var(--Opacity-Black-20);
361
+
362
+ }
363
+ }
364
+