myshell-react-lib 0.1.5 → 0.1.7

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 (147) hide show
  1. package/dist/index.cjs +50 -2
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +1 -2
  4. package/dist/index.d.ts +1 -2
  5. package/dist/index.js +6 -1
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -2
  8. package/src/common/assets/audio-playing.json +0 -3657
  9. package/src/common/constants/constants.ts +0 -24
  10. package/src/common/constants/types/common.ts +0 -10
  11. package/src/common/hooks/useAudioPlayer.tsx +0 -198
  12. package/src/common/hooks/useDevice.ts +0 -26
  13. package/src/common/hooks/useNativeBridge.ts +0 -42
  14. package/src/common/hooks/useNotification.tsx +0 -179
  15. package/src/common/hooks/useWindowWidth.ts +0 -19
  16. package/src/common/utils/common-helper.ts +0 -81
  17. package/src/components/ItemDemo.tsx +0 -15
  18. package/src/components/accordion.tsx +0 -126
  19. package/src/components/alert-dialog.tsx +0 -148
  20. package/src/components/alert.tsx +0 -65
  21. package/src/components/aspect-ratio.tsx +0 -7
  22. package/src/components/audio-player.tsx +0 -60
  23. package/src/components/audio-playing.tsx +0 -33
  24. package/src/components/avatar.tsx +0 -133
  25. package/src/components/badge.tsx +0 -67
  26. package/src/components/button/button.styles.ts +0 -258
  27. package/src/components/button/button.tsx +0 -215
  28. package/src/components/button/icon-button.styles.ts +0 -103
  29. package/src/components/button/icon-button.tsx +0 -100
  30. package/src/components/button/index.tsx +0 -3
  31. package/src/components/button/link-button.tsx +0 -184
  32. package/src/components/cascader.tsx +0 -175
  33. package/src/components/checkbox.tsx +0 -135
  34. package/src/components/command.tsx +0 -155
  35. package/src/components/context-menu.tsx +0 -198
  36. package/src/components/count-down.tsx +0 -83
  37. package/src/components/custom-notification.tsx +0 -95
  38. package/src/components/dialog.tsx +0 -158
  39. package/src/components/drawer.tsx +0 -116
  40. package/src/components/dropdown-menu.tsx +0 -196
  41. package/src/components/energy-progress.tsx +0 -55
  42. package/src/components/form.tsx +0 -201
  43. package/src/components/group.tsx +0 -9
  44. package/src/components/guide.tsx +0 -243
  45. package/src/components/icon.tsx +0 -96
  46. package/src/components/icons/index.tsx +0 -13
  47. package/src/components/icons/outline/ArrowLeftIcon.tsx +0 -28
  48. package/src/components/icons/outline/ArrowUpTrayIcon.tsx +0 -28
  49. package/src/components/icons/outline/CheckCircleIcon.tsx +0 -27
  50. package/src/components/icons/outline/ConfigIcon.tsx +0 -42
  51. package/src/components/icons/outline/DownIcon.tsx +0 -18
  52. package/src/components/icons/outline/FilterIcon.tsx +0 -20
  53. package/src/components/icons/outline/PencilSquareIcon.tsx +0 -28
  54. package/src/components/icons/outline/WindowIcon.tsx +0 -26
  55. package/src/components/icons/solid/CaretDownIcon.tsx +0 -22
  56. package/src/components/icons/solid/CodeIcon.tsx +0 -25
  57. package/src/components/icons/solid/DragIcon.tsx +0 -24
  58. package/src/components/icons/solid/PhoneIcon.tsx +0 -29
  59. package/src/components/icons/solid/RectangleGroupIcon.tsx +0 -26
  60. package/src/components/image.tsx +0 -152
  61. package/src/components/input.tsx +0 -118
  62. package/src/components/label.tsx +0 -26
  63. package/src/components/link.tsx +0 -123
  64. package/src/components/marquee/index.css +0 -15
  65. package/src/components/marquee/marquee.tsx +0 -220
  66. package/src/components/masonry.tsx +0 -138
  67. package/src/components/menubar.tsx +0 -234
  68. package/src/components/mobile/m-tooltip.tsx +0 -34
  69. package/src/components/modal.tsx +0 -561
  70. package/src/components/navigation-bar.tsx +0 -100
  71. package/src/components/number-input.tsx +0 -143
  72. package/src/components/page-content.tsx +0 -16
  73. package/src/components/popover.tsx +0 -191
  74. package/src/components/progress.tsx +0 -80
  75. package/src/components/radio-group.tsx +0 -44
  76. package/src/components/scroll-area.tsx +0 -49
  77. package/src/components/search-bar.tsx +0 -140
  78. package/src/components/secondary-navigation-bar.tsx +0 -328
  79. package/src/components/select.tsx +0 -273
  80. package/src/components/separator.tsx +0 -31
  81. package/src/components/sheet.tsx +0 -143
  82. package/src/components/skeleton.tsx +0 -20
  83. package/src/components/slider.tsx +0 -160
  84. package/src/components/spinner.tsx +0 -50
  85. package/src/components/swiper/index.module.scss +0 -88
  86. package/src/components/swiper/index.tsx +0 -319
  87. package/src/components/switch.tsx +0 -67
  88. package/src/components/tabs.tsx +0 -325
  89. package/src/components/textarea.tsx +0 -71
  90. package/src/components/toast/toast.tsx +0 -182
  91. package/src/components/toast/toaster.tsx +0 -160
  92. package/src/components/toast/use-toast.tsx +0 -248
  93. package/src/components/toggle-group.tsx +0 -64
  94. package/src/components/toggle.tsx +0 -46
  95. package/src/components/tooltip.tsx +0 -283
  96. package/src/components/typography.tsx +0 -437
  97. package/src/index.ts +0 -70
  98. package/src/lib/utils.ts +0 -62
  99. package/src/stories/Accordion.stories.tsx +0 -64
  100. package/src/stories/AccordionItem.stories.tsx +0 -48
  101. package/src/stories/Avatar.stories.ts +0 -58
  102. package/src/stories/Badge.stories.tsx +0 -40
  103. package/src/stories/BannerSwiper.stories.tsx +0 -102
  104. package/src/stories/Button.stories.tsx +0 -543
  105. package/src/stories/Checkbox.stories.tsx +0 -161
  106. package/src/stories/Configure.mdx +0 -341
  107. package/src/stories/CssProperties.mdx +0 -30
  108. package/src/stories/Description.stories.ts +0 -70
  109. package/src/stories/Display.stories.ts +0 -64
  110. package/src/stories/FeaturedSwiper.stories.tsx +0 -6978
  111. package/src/stories/GridSwiper.stories.tsx +0 -1407
  112. package/src/stories/Guide.stories.tsx +0 -247
  113. package/src/stories/Heading.stories.ts +0 -89
  114. package/src/stories/Icon.stories.ts +0 -77
  115. package/src/stories/IconButton.stories.tsx +0 -301
  116. package/src/stories/IconTextButton.stories.ts +0 -59
  117. package/src/stories/Image.stories.ts +0 -55
  118. package/src/stories/Input.stories.tsx +0 -203
  119. package/src/stories/Modal.stories.tsx +0 -144
  120. package/src/stories/NavigationBar.stories.tsx +0 -81
  121. package/src/stories/Notification.stories.tsx +0 -276
  122. package/src/stories/Popover.stories.tsx +0 -100
  123. package/src/stories/SearchBar.stories.ts +0 -43
  124. package/src/stories/SecondaryNavigationBar.stories.tsx +0 -199
  125. package/src/stories/Select.stories.tsx +0 -107
  126. package/src/stories/Separator.stories.tsx +0 -49
  127. package/src/stories/Spinner.stories.tsx +0 -48
  128. package/src/stories/SubHeading.stories.ts +0 -64
  129. package/src/stories/Swich.stories.tsx +0 -69
  130. package/src/stories/Tabs.stories.tsx +0 -90
  131. package/src/stories/Text.stories.ts +0 -78
  132. package/src/stories/Textarea.stories.tsx +0 -155
  133. package/src/stories/Toast.stories.tsx +0 -424
  134. package/src/stories/Tooltip.stories.tsx +0 -244
  135. package/src/stories/ViewAutoSwiper.stories.tsx +0 -1408
  136. package/src/styles/components-dark.scss +0 -212
  137. package/src/styles/components-light.scss +0 -210
  138. package/src/styles/design-dark.scss +0 -330
  139. package/src/styles/design-light.scss +0 -345
  140. package/src/styles/design2-dark.scss +0 -319
  141. package/src/styles/design2-light.scss +0 -364
  142. package/src/styles/font.css +0 -19
  143. package/src/styles/global.scss +0 -251
  144. package/src/styles/md-viewer.scss +0 -155
  145. package/src/styles/new-tokens.scss +0 -255
  146. package/src/styles/tokens.scss +0 -401
  147. package/src/types/scss.d.ts +0 -24
package/src/styles/design-dark.scss DELETED
@@ -1,330 +0,0 @@
1
- @import './tokens.scss';
2
-
3
- @layer base {
4
- .dark {
5
- .md-viewer code {
6
- background-color: #27282c !important;
7
- font-size: 14px !important;
8
- color: var(--white);
9
- }
10
- .page-view .md-viewer pre {
11
- padding: 12px;
12
- background-color: #27282c !important;
13
- color: var(--white);
14
- code {
15
- background-color: #27282c !important;
16
- color: var(--white);
17
- }
18
- }
19
-
20
- //utility-moss
21
- --utility-moss-50: var(--moss-950);
22
- --utility-moss-100: var(--moss-900);
23
- --utility-moss-200: var(--moss-800);
24
- --utility-moss-300: var(--moss-700);
25
- --utility-moss-400: var(--moss-600);
26
- --utility-moss-500: var(--moss-500);
27
- --utility-moss-600: var(--moss-400);
28
- --utility-moss-700: var(--moss-300);
29
-
30
- //utility-teal
31
- --utility-teal-50: var(--teal-950);
32
- --utility-teal-100: var(--teal-900);
33
- --utility-teal-200: var(--teal-800);
34
- --utility-teal-300: var(--teal-700);
35
- --utility-teal-400: var(--teal-600);
36
- --utility-teal-500: var(--teal-500);
37
- --utility-teal-600: var(--teal-400);
38
- --utility-teal-700: var(--teal-300);
39
-
40
- //utility-cyan
41
- --utility-cyan-50: var(--cyan-950);
42
- --utility-cyan-100: var(--cyan-900);
43
- --utility-cyan-200: var(--cyan-800);
44
- --utility-cyan-300: var(--cyan-700);
45
- --utility-cyan-400: var(--cyan-600);
46
- --utility-cyan-500: var(--cyan-500);
47
- --utility-cyan-600: var(--cyan-400);
48
- --utility-cyan-700: var(--cyan-300);
49
-
50
- //utility-cyan
51
- --utility-cyan-50: var(--cyan-950);
52
- --utility-cyan-100: var(--cyan-900);
53
- --utility-cyan-200: var(--cyan-800);
54
- --utility-cyan-300: var(--cyan-700);
55
- --utility-cyan-400: var(--cyan-600);
56
- --utility-cyan-500: var(--cyan-500);
57
- --utility-cyan-600: var(--cyan-400);
58
- --utility-cyan-700: var(--cyan-300);
59
-
60
- //utility-sky-blue
61
- --utility-sky-blue-50: var(--sky-blue-950);
62
- --utility-sky-blue-100: var(--sky-blue-900);
63
- --utility-sky-blue-200: var(--sky-blue-800);
64
- --utility-sky-blue-300: var(--sky-blue-700);
65
- --utility-sky-blue-400: var(--sky-blue-600);
66
- --utility-sky-blue-500: var(--sky-blue-500);
67
- --utility-sky-blue-600: var(--sky-blue-400);
68
- --utility-sky-blue-700: var(--sky-blue-300);
69
-
70
- //utility-indigo
71
- --utility-indigo-50: var(--indigo-950);
72
- --utility-indigo-100: var(--indigo-900);
73
- --utility-indigo-200: var(--indigo-800);
74
- --utility-indigo-300: var(--indigo-700);
75
- --utility-indigo-400: var(--indigo-600);
76
- --utility-indigo-500: var(--indigo-500);
77
- --utility-indigo-600: var(--indigo-400);
78
- --utility-indigo-700: var(--indigo-300);
79
-
80
- //utility-purple
81
- --utility-purple-50: var(--purple-950);
82
- --utility-purple-100: var(--purple-900);
83
- --utility-purple-200: var(--purple-800);
84
- --utility-purple-300: var(--purple-700);
85
- --utility-purple-400: var(--purple-600);
86
- --utility-purple-500: var(--purple-500);
87
- --utility-purple-600: var(--purple-400);
88
- --utility-purple-700: var(--purple-300);
89
-
90
- //utility-pink
91
- --utility-pink-50: var(--pink-950);
92
- --utility-pink-100: var(--pink-900);
93
- --utility-pink-200: var(--pink-800);
94
- --utility-pink-300: var(--pink-700);
95
- --utility-pink-400: var(--pink-600);
96
- --utility-pink-500: var(--pink-500);
97
- --utility-pink-600: var(--pink-400);
98
- --utility-pink-700: var(--pink-300);
99
-
100
- //utility-rose
101
- --utility-rose-50: var(--rose-950);
102
- --utility-rose-100: var(--rose-900);
103
- --utility-rose-200: var(--rose-800);
104
- --utility-rose-300: var(--rose-700);
105
- --utility-rose-400: var(--rose-600);
106
- --utility-rose-500: var(--rose-500);
107
- --utility-rose-600: var(--rose-400);
108
- --utility-rose-700: var(--rose-300);
109
-
110
- //utility-orange
111
- --utility-orange-50: var(--orange-950);
112
- --utility-orange-100: var(--orange-900);
113
- --utility-orange-200: var(--orange-800);
114
- --utility-orange-300: var(--orange-700);
115
- --utility-orange-400: var(--orange-600);
116
- --utility-orange-500: var(--orange-500);
117
- --utility-orange-600: var(--orange-400);
118
- --utility-orange-700: var(--orange-300);
119
-
120
- //utility-amber
121
- --utility-amber-50: var(--amber-950);
122
- --utility-amber-100: var(--amber-900);
123
- --utility-amber-200: var(--amber-800);
124
- --utility-amber-300: var(--amber-700);
125
- --utility-amber-400: var(--amber-600);
126
- --utility-amber-500: var(--amber-500);
127
- --utility-amber-600: var(--amber-400);
128
- --utility-amber-700: var(--amber-300);
129
-
130
- // text
131
- --text: var(--white);
132
- --text-subtle: var(--neutral-dark-85);
133
- --text-subtler: var(--neutral-dark-60);
134
- --text-subtlest: var(--neutral-dark-40);
135
- --text-disabled: var(--neutral-dark-30);
136
- --text-inverse: var(--neutral-10);
137
- --text-static: var(--white);
138
- --text-static-black: var(--neutral-10);
139
- --text-brand: var(--blue-40);
140
- --text-critical: var(--red-50);
141
- --text-critical-bolder: var(--red-70);
142
- --text-warning: var(--yellow-40);
143
- --text-warning-bolder: var(--yellow-70);
144
- --text-success-default: var(--green-25);
145
- --text-success-bolder: var(--green-70);
146
-
147
- // icon
148
- --icon: var(--neutral-dark-85);
149
- --icon-subtle: var(--neutral-dark-60);
150
- --icon-subtlest: var(--neutral-dark-40);
151
- --icon-disabled: var(--neutral-dark-30);
152
- --icon-inverse: var(--neutral-30);
153
- --icon-static: var(--white);
154
- --icon-static-black: var(--neutral-30);
155
- --icon-brand: var(--blue-40);
156
- --icon-critical: var(--red-50);
157
- --icon-warning: var(--yellow-40);
158
- --icon-success: var(--green-25);
159
-
160
- // surface
161
- --surface-default: var(--neutral-dark-special);
162
- --surface-subtle: var(--neutral-dark-special-5);
163
- --surface-hovered: var(--neutral-dark-special-10);
164
- --surface-pressed: var(--neutral-dark-special-20);
165
- --surface-disabled: var(--neutral-dark-special-5);
166
- --surface-search-field: var(--neutral-dark-special-5);
167
- --surface-inverse: var(--white);
168
- --surface-static: var(--white);
169
- --surface-static-black: var(--neutral);
170
- --surface-none: var(--none);
171
- --surface-accent-green-subtlest: var(--green-dark-10);
172
- --surface-accent-green-subtler: var(--green-dark-20);
173
- --surface-accent-green-subtle: var(--green-dark-30);
174
- --surface-accent-green-bolder: var(--green-25);
175
- --surface-accent-aqua-subtlest: var(--aqua-dark-10);
176
- --surface-accent-aqua-subtler: var(--aqua-dark-20);
177
- --surface-accent-aqua-subtle: var(--aqua-dark-30);
178
- --surface-accent-aqua-bolder: var(--aqua-25);
179
- --surface-accent-blue-subtlest: var(--blue-dark-10);
180
- --surface-accent-blue-subtler: var(--blue-dark-20);
181
- --surface-accent-blue-subtle: var(--blue-dark-30);
182
- --surface-accent-blue-bolder: var(--blue-15);
183
- --surface-accent-yellow-subtlest: var(--yellow-dark-10);
184
- --surface-accent-yellow-subtler: var(--yellow-dark-20);
185
- --surface-accent-yellow-subtle: var(--yellow-dark-30);
186
- --surface-accent-yellow-bolder: var(--yellow-15);
187
- --surface-accent-red-subtlest: var(--red-dark-10);
188
- --surface-accent-red-subtler: var(--red-dark-20);
189
- --surface-accent-red-subtle: var(--red-dark-30);
190
- --surface-accent-red-bolder: var(--red-25);
191
- --surface-accent-gray-subtlest: var(--neutral-dark-20);
192
- --surface-accent-gray-subtler: var(--neutral-dark-25);
193
- --surface-accent-gray-subtle: var(--neutral-dark-30);
194
- --surface-accent-gray-bolder: var(--neutral-dark-40);
195
- --surface-primary-default: var(--blue-40);
196
- --surface-primary-hovered: var(--blue-20);
197
- --surface-primary-pressed: var(--blue-10);
198
- --surface-primary-subtle-default: var(--blue-dark-30);
199
- --surface-primary-subtle-hovered: var(--blue-dark-40);
200
- --surface-primary-subtle-pressed: var(--blue-dark-50);
201
- --surface-container-default: var(--neutral-dark);
202
- --surface-container-hovered: var(--neutral-dark-10);
203
- --surface-container-pressed: var(--neutral-dark-15);
204
- --surface-container-selected-default: var(--neutral-dark-special-10);
205
- --surface-container-selected-hovered: var(--neutral-dark-special-30);
206
- --surface-container-selected-pressed: var(--neutral-dark-special-40);
207
- --surface-container-special-default: var(--neutral-dark-special-20);
208
- --surface-container-special-hovered: var(--neutral-dark-special-30);
209
- --surface-container-special-subtle: var(--neutral-dark-special-5);
210
- --surface-warning-default: var(--yellow-30);
211
- --surface-warning-hovered: var(--yellow-20);
212
- --surface-warning-pressed: var(--yellow-10);
213
- --surface-warning-subtle-default: var(--yellow-dark-10);
214
- --surface-warning-subtle-hovered: var(--yellow-dark-20);
215
- --surface-warning-subtle-pressed: var(--yellow-dark-30);
216
- --surface-success-default: var(--green-40);
217
- --surface-success-hovered: var(--green-30);
218
- --surface-success-pressed: var(--green-20);
219
- --surface-success-subtle-default: var(--green-dark-10);
220
- --surface-success-subtle-hovered: var(--green-dark-20);
221
- --surface-success-subtle-pressed: var(--green-dark-30);
222
- --surface-critical-default: var(--red-40);
223
- --surface-critical-hovered: var(--red-20);
224
- --surface-critical-pressed: var(--red-10);
225
- --surface-critical-subtle-default: var(--red-dark-10);
226
- --surface-critical-subtle-hovered: var(--red-dark-20);
227
- --surface-critical-subtle-pressed: var(--red-dark-30);
228
- --surface-info-default: var(--aqua-40);
229
- --surface-info-hovered: var(--aqua-30);
230
- --surface-info-pressed: var(--aqua-20);
231
- --surface-info-subtle-default: var(--aqua-dark-10);
232
- --surface-info-subtle-hovered: var(--aqua-dark-20);
233
- --surface-info-subtle-pressed: var(--aqua-dark-30);
234
- --surface-lemon-bold: var(--lemon-80);
235
- --surface-lemon-default: var(--lemon-50);
236
- --surface-lemon-subtle: var(--lemon-20);
237
- --surface-lemon-subtlest: var(--lemon);
238
- --alpha-facetime-white: var(--alpha-black-20);
239
- --alpha-facetime-black: var(--alpha-white-20);
240
- --alpha-facetime-static: var(--alpha-black-20);
241
- --alpha-mask-desktop: var(--alpha-black-75);
242
- --alpha-mask-mobile: var(--alpha-black-75);
243
-
244
- --alpha-1: var(--alpha-black-1);
245
- --alpha-3: var(--alpha-black-3);
246
- --alpha-5: var(--alpha-black-5);
247
- --alpha-8: var(--alpha-black-8);
248
- --alpha-10: var(--alpha-black-10);
249
- --alpha-20: var(--alpha-black-20);
250
- --alpha-30: var(--alpha-black-30);
251
- --alpha-40: var(--alpha-black-40);
252
- --alpha-50: var(--alpha-black-50);
253
- --alpha-60: var(--alpha-black-60);
254
- --alpha-70: var(--alpha-black-70);
255
- --alpha-80: var(--alpha-black-80);
256
- --alpha-90: var(--alpha-black-90);
257
- --alpha-100: var(--alpha-black-100);
258
-
259
- --alpha-1-black: var(--alpha-white-1);
260
- --alpha-3-black: var(--alpha-white-3);
261
- --alpha-5-black: var(--alpha-white-5);
262
- --alpha-8-black: var(--alpha-white-8);
263
- --alpha-10-black: var(--alpha-white-10);
264
- --alpha-20-black: var(--alpha-white-20);
265
- --alpha-30-black: var(--alpha-white-30);
266
- --alpha-40-black: var(--alpha-white-40);
267
- --alpha-50-black: var(--alpha-white-50);
268
- --alpha-60-black: var(--alpha-white-60);
269
- --alpha-70-black: var(--alpha-white-70);
270
- --alpha-80-black: var(--alpha-white-80);
271
- --alpha-90-black: var(--alpha-white-90);
272
- --alpha-100-black: var(--alpha-white-100);
273
-
274
- --white-1: var(--alpha-black-1);
275
- --white-3: var(--alpha-black-3);
276
- --white-5: var(--alpha-black-5);
277
- --white-8: var(--alpha-black-8);
278
- --white-10: var(--alpha-black-10);
279
- --white-20: var(--alpha-black-20);
280
- --white-30: var(--alpha-black-30);
281
- --white-40: var(--alpha-black-40);
282
- --white-50: var(--alpha-black-50);
283
- --white-60: var(--alpha-black-60);
284
- --white-70: var(--alpha-black-70);
285
- --white-80: var(--alpha-black-80);
286
- --white-90: var(--alpha-black-90);
287
- --white-100: var(--alpha-black-100);
288
- --black-1: var(--alpha-white-1);
289
- --black-3: var(--alpha-white-3);
290
- --black-5: var(--alpha-white-5);
291
- --black-8: var(--alpha-white-8);
292
- --black-10: var(--alpha-white-10);
293
- --black-20: var(--alpha-white-20);
294
- --black-30: var(--alpha-white-30);
295
- --black-40: var(--alpha-white-40);
296
- --black-50: var(--alpha-white-50);
297
- --black-60: var(--alpha-white-60);
298
- --black-70: var(--alpha-white-70);
299
- --black-80: var(--alpha-white-80);
300
- --black-90: var(--alpha-white-90);
301
- --black-100: var(--alpha-white-100);
302
-
303
- // border
304
- --border: var(--neutral-dark-15);
305
- --border-subtle: var(--neutral-dark-25);
306
- --border-hovered: var(--neutral-dark-25);
307
- --border-pressed: var(--neutral-dark-30);
308
- --border-depressed: var(--neutral-dark-40);
309
- --border-critical: var(--red-50);
310
- --border-success: var(--green-40);
311
- --border-brand: var(--blue-40);
312
- --border-opaque: var(--alpha-white-5);
313
- --border-warning: var(--yellow-10);
314
- --border-warning-subtle: var(--yellow-35);
315
-
316
- // shadow
317
- --shadow-background-default: var(--alpha-white-5);
318
- --shadow-background-bolder: var(--alpha-white-3);
319
- --shadow-modal-default: var(--alpha-white-1);
320
- --shadow-modal-bolder: var(--alpha-white-1);
321
- --shadow-button-basic: var(--alpha-white-5);
322
- --shadow-button-primary-1: var(--alpha-white-8);
323
- --shadow-button-primary-2: var(--alpha-white-20);
324
- --shadow-button-pressed: var(--alpha-white-10);
325
-
326
- // focus-ring
327
- --focus-ring-brand: var(--status-04-70);
328
- --focus-ring-error: var(--red-55);
329
- }
330
- }
package/src/styles/design-light.scss DELETED
@@ -1,345 +0,0 @@
1
- @import './tokens.scss';
2
-
3
- @layer base {
4
- :root {
5
-
6
-
7
- //utility
8
-
9
- //utility-moss
10
- --utility-moss-50: var(--moss-50);
11
- --utility-moss-100: var(--moss-100);
12
- --utility-moss-200: var(--moss-200);
13
- --utility-moss-300: var(--moss-300);
14
- --utility-moss-400: var(--moss-400);
15
- --utility-moss-500: var(--moss-500);
16
- --utility-moss-600: var(--moss-600);
17
- --utility-moss-700: var(--moss-700);
18
-
19
- //utility-teal
20
- --utility-teal-50: var(--teal-50);
21
- --utility-teal-100: var(--teal-100);
22
- --utility-teal-200: var(--teal-200);
23
- --utility-teal-300: var(--teal-300);
24
- --utility-teal-400: var(--teal-400);
25
- --utility-teal-500: var(--teal-500);
26
- --utility-teal-600: var(--teal-600);
27
- --utility-teal-700: var(--teal-700);
28
-
29
- //utility-cyan
30
- --utility-cyan-50: var(--cyan-50);
31
- --utility-cyan-100: var(--cyan-100);
32
- --utility-cyan-200: var(--cyan-200);
33
- --utility-cyan-300: var(--cyan-300);
34
- --utility-cyan-400: var(--cyan-400);
35
- --utility-cyan-500: var(--cyan-500);
36
- --utility-cyan-600: var(--cyan-600);
37
- --utility-cyan-700: var(--cyan-700);
38
-
39
- //utility-sky-blue
40
- --utility-sky-blue-50: var(--sky-blue-50);
41
- --utility-sky-blue-100: var(--sky-blue-100);
42
- --utility-sky-blue-200: var(--sky-blue-200);
43
- --utility-sky-blue-300: var(--sky-blue-300);
44
- --utility-sky-blue-400: var(--sky-blue-400);
45
- --utility-sky-blue-500: var(--sky-blue-500);
46
- --utility-sky-blue-600: var(--sky-blue-600);
47
- --utility-sky-blue-700: var(--sky-blue-700);
48
-
49
- //utility-indigo
50
- --utility-indigo-50: var(--indigo-50);
51
- --utility-indigo-100: var(--indigo-100);
52
- --utility-indigo-200: var(--indigo-200);
53
- --utility-indigo-300: var(--indigo-300);
54
- --utility-indigo-400: var(--indigo-400);
55
- --utility-indigo-500: var(--indigo-500);
56
- --utility-indigo-600: var(--indigo-600);
57
- --utility-indigo-700: var(--indigo-700);
58
-
59
- //utility-purple
60
- --utility-purple-50: var(--purple-50);
61
- --utility-purple-100: var(--purple-100);
62
- --utility-purple-200: var(--purple-200);
63
- --utility-purple-300: var(--purple-300);
64
- --utility-purple-400: var(--purple-400);
65
- --utility-purple-500: var(--purple-500);
66
- --utility-purple-600: var(--purple-600);
67
- --utility-purple-700: var(--purple-700);
68
-
69
- //utility-pink
70
- --utility-pink-50: var(--pink-50);
71
- --utility-pink-100: var(--pink-100);
72
- --utility-pink-200: var(--pink-200);
73
- --utility-pink-300: var(--pink-300);
74
- --utility-pink-400: var(--pink-400);
75
- --utility-pink-500: var(--pink-500);
76
- --utility-pink-600: var(--pink-600);
77
- --utility-pink-700: var(--pink-700);
78
-
79
- //utility-rose
80
- --utility-rose-50: var(--rose-50);
81
- --utility-rose-100: var(--rose-100);
82
- --utility-rose-200: var(--rose-200);
83
- --utility-rose-300: var(--rose-300);
84
- --utility-rose-400: var(--rose-400);
85
- --utility-rose-500: var(--rose-500);
86
- --utility-rose-600: var(--rose-600);
87
- --utility-rose-700: var(--rose-700);
88
-
89
- //utility-orange
90
- --utility-orange-50: var(--orange-50);
91
- --utility-orange-100: var(--orange-100);
92
- --utility-orange-200: var(--orange-200);
93
- --utility-orange-300: var(--orange-300);
94
- --utility-orange-400: var(--orange-400);
95
- --utility-orange-500: var(--orange-500);
96
- --utility-orange-600: var(--orange-600);
97
- --utility-orange-700: var(--orange-700);
98
-
99
- //utility-amber
100
- --utility-amber-50: var(--amber-50);
101
- --utility-amber-100: var(--amber-100);
102
- --utility-amber-200: var(--amber-200);
103
- --utility-amber-300: var(--amber-300);
104
- --utility-amber-400: var(--amber-400);
105
- --utility-amber-500: var(--amber-500);
106
- --utility-amber-600: var(--amber-600);
107
- --utility-amber-700: var(--amber-700);
108
-
109
- // text
110
- --text: var(--neutral-10);
111
- --text-subtle: var(--neutral-30);
112
- --text-subtler: var(--neutral-50);
113
- --text-subtlest: var(--neutral-60);
114
- --text-disabled: var(--neutral-70);
115
- --text-inverse: var(--white);
116
- --text-static: var(--white);
117
- --text-static-black: var(--neutral-10);
118
- --text-brand: var(--blue-30);
119
- --text-critical: var(--red-40);
120
- --text-critical-bolder: var(--red);
121
- --text-warning: var(--yellow-30);
122
- --text-warning-bolder: var(--yellow-5);
123
- --text-success-default: var(--green-20);
124
- --text-success-bolder: var(--green);
125
-
126
- // icon
127
- --icon: var(--neutral-30);
128
- --icon-subtle: var(--neutral-50);
129
- --icon-subtlest: var(--neutral-60);
130
- --icon-disabled: var(--neutral-70);
131
- --icon-inverse: var(--white);
132
- --icon-static: var(--white);
133
- --icon-static-black: var(--neutral-30);
134
- --icon-brand: var(--blue-30);
135
- --icon-critical: var(--red-40);
136
- --icon-warning: var(--yellow-30);
137
- --icon-success: var(--green-20);
138
-
139
- // surface
140
- --surface-default: var(--white);
141
- --surface-subtle: var(--neutral-99);
142
- --surface-hovered: var(--neutral-95);
143
- --surface-hovered-static: var(--neutral-95);
144
- --surface-pressed: var(--neutral-90);
145
- --surface-pressed-static: var(--neutral-90);
146
- --surface-disabled: var(--neutral-99);
147
- --surface-disabled-static: var(--neutral-99);
148
- --surface-search-field: var(--white);
149
- --surface-inverse: var(--neutral);
150
- --surface-static: var(--white);
151
- --surface-static-black: var(--neutral);
152
- --surface-none: var(--none);
153
- --surface-accent-green-subtlest: var(--green-90);
154
- --surface-accent-green-subtler: var(--green-80);
155
- --surface-accent-green-subtle: var(--green-70);
156
- --surface-accent-green-bolder: var(--green-20);
157
- --surface-accent-aqua-subtlest: var(--aqua-95);
158
- --surface-accent-aqua-subtler: var(--aqua-80);
159
- --surface-accent-aqua-subtle: var(--aqua-70);
160
- --surface-accent-aqua-bolder: var(--aqua-20);
161
- --surface-accent-blue-subtlest: var(--blue-95);
162
- --surface-accent-blue-subtler: var(--blue-80);
163
- --surface-accent-blue-subtle: var(--blue-70);
164
- --surface-accent-blue-bolder: var(--blue-20);
165
- --surface-accent-yellow-subtlest: var(--yellow-95);
166
- --surface-accent-yellow-subtler: var(--yellow-80);
167
- --surface-accent-yellow-subtle: var(--yellow-70);
168
- --surface-accent-yellow-bolder: var(--yellow-20);
169
- --surface-accent-red-subtlest: var(--red-95);
170
- --surface-accent-red-subtler: var(--red-80);
171
- --surface-accent-red-subtle: var(--red-70);
172
- --surface-accent-red-bolder: var(--red-20);
173
- --surface-accent-gray-subtlest: var(--neutral-95);
174
- --surface-accent-gray-subtler: var(--neutral-85);
175
- --surface-accent-gray-subtle: var(--neutral-75);
176
- --surface-accent-gray-bolder: var(--neutral-60);
177
- --surface-primary-default: var(--blue-30);
178
- --surface-primary-hovered: var(--blue-20);
179
- --surface-primary-pressed: var(--blue-10);
180
- --surface-primary-subtle-default: var(--blue-95);
181
- --surface-primary-subtle-hovered: var(--blue-90);
182
- --surface-primary-subtle-pressed: var(--blue-80);
183
- --surface-container-default: var(--neutral-variant-99);
184
- --surface-container-hovered: var(--neutral-variant-85);
185
- --surface-container-pressed: var(--neutral-variant-80);
186
- --surface-container-selected-default: var(--neutral-variant-95);
187
- --surface-container-selected-hovered: var(--neutral-variant-90);
188
- --surface-container-selected-pressed: var(--neutral-variant-88);
189
- --surface-container-special-default: var(--neutral-variant-85);
190
- --surface-container-special-hovered: var(--neutral-variant-80);
191
- --surface-container-special-subtle: var(--neutral-variant-99);
192
- --surface-warning-default: var(--yellow-30);
193
- --surface-warning-hovered: var(--yellow-20);
194
- --surface-warning-pressed: var(--yellow-10);
195
- --surface-warning-subtle-default: var(--yellow-95);
196
- --surface-warning-subtle-hovered: var(--yellow-90);
197
- --surface-warning-subtle-pressed: var(--yellow-80);
198
- --surface-success-default: var(--green-20);
199
- --surface-success-hovered: var(--green-30);
200
- --surface-success-pressed: var(--green-20);
201
- --surface-success-subtle-default: var(--green-95);
202
- --surface-success-subtle-hovered: var(--green-90);
203
- --surface-success-subtle-pressed: var(--green-80);
204
- --surface-critical-default: var(--red-40);
205
- --surface-critical-hovered: var(--red-20);
206
- --surface-critical-pressed: var(--red-10);
207
- --surface-critical-subtle-default: var(--red-95);
208
- --surface-critical-subtle-hovered: var(--red-90);
209
- --surface-critical-subtle-pressed: var(--red-80);
210
- --surface-info-default: var(--aqua-40);
211
- --surface-info-hovered: var(--aqua-30);
212
- --surface-info-pressed: var(--aqua-20);
213
- --surface-info-subtle-default: var(--aqua-95);
214
- --surface-info-subtle-hovered: var(--aqua-90);
215
- --surface-info-subtle-pressed: var(--aqua-80);
216
- --surface-lemon-bold: var(--yellow-5);
217
- --surface-lemon-default: var(--lemon-70);
218
- --surface-lemon-subtle: var(--lemon-90);
219
- --surface-lemon-subtlest: var(--white);
220
- --alpha-facetime-white: var(--alpha-white-20);
221
- --alpha-facetime-black: var(--alpha-black-20);
222
- --alpha-facetime-static: var(--alpha-black-20);
223
- --alpha-mask-desktop: var(--alpha-black-75);
224
- --alpha-mask-mobile: var(--alpha-black-75);
225
-
226
- --alpha-1: var(--alpha-white-1);
227
- --alpha-3: var(--alpha-white-3);
228
- --alpha-5: var(--alpha-white-5);
229
- --alpha-8: var(--alpha-white-8);
230
- --alpha-10: var(--alpha-white-10);
231
- --alpha-20: var(--alpha-white-20);
232
- --alpha-30: var(--alpha-white-30);
233
- --alpha-40: var(--alpha-white-40);
234
- --alpha-50: var(--alpha-white-50);
235
- --alpha-60: var(--alpha-white-60);
236
- --alpha-70: var(--alpha-white-70);
237
- --alpha-80: var(--alpha-white-80);
238
- --alpha-90: var(--alpha-white-90);
239
- --alpha-100: var(--alpha-white-100);
240
-
241
- --alpha-1-black: var(--alpha-black-1);
242
- --alpha-3-black: var(--alpha-black-3);
243
- --alpha-5-black: var(--alpha-black-5);
244
- --alpha-8-black: var(--alpha-black-8);
245
- --alpha-10-black: var(--alpha-black-10);
246
- --alpha-20-black: var(--alpha-black-20);
247
- --alpha-30-black: var(--alpha-black-30);
248
- --alpha-40-black: var(--alpha-black-40);
249
- --alpha-50-black: var(--alpha-black-50);
250
- --alpha-60-black: var(--alpha-black-60);
251
- --alpha-70-black: var(--alpha-black-70);
252
- --alpha-80-black: var(--alpha-black-80);
253
- --alpha-90-black: var(--alpha-black-90);
254
- --alpha-100-black: var(--alpha-black-100);
255
-
256
- --white-1: var(--alpha-white-1);
257
- --white-3: var(--alpha-white-3);
258
- --white-5: var(--alpha-white-5);
259
- --white-8: var(--alpha-white-8);
260
- --white-10: var(--alpha-white-10);
261
- --white-20: var(--alpha-white-20);
262
- --white-30: var(--alpha-white-30);
263
- --white-40: var(--alpha-white-40);
264
- --white-50: var(--alpha-white-50);
265
- --white-60: var(--alpha-white-60);
266
- --white-70: var(--alpha-white-70);
267
- --white-80: var(--alpha-white-80);
268
- --white-90: var(--alpha-white-90);
269
- --white-100: var(--alpha-white-100);
270
- --black-1: var(--alpha-black-1);
271
- --black-3: var(--alpha-black-3);
272
- --black-5: var(--alpha-black-5);
273
- --black-8: var(--alpha-black-8);
274
- --black-10: var(--alpha-black-10);
275
- --black-20: var(--alpha-black-20);
276
- --black-30: var(--alpha-black-30);
277
- --black-40: var(--alpha-black-40);
278
- --black-50: var(--alpha-black-50);
279
- --black-60: var(--alpha-black-60);
280
- --black-70: var(--alpha-black-70);
281
- --black-80: var(--alpha-black-80);
282
- --black-90: var(--alpha-black-90);
283
- --black-100: var(--alpha-black-100);
284
-
285
- --beta-white-1: var(--alpha-white-1);
286
- --beta-white-3: var(--alpha-white-3);
287
- --beta-white-5: var(--alpha-white-5);
288
- --beta-white-8: var(--alpha-white-8);
289
- --beta-white-10: var(--alpha-white-10);
290
- --beta-white-20: var(--alpha-white-20);
291
- --beta-white-30: var(--alpha-white-30);
292
- --beta-white-40: var(--alpha-white-40);
293
- --beta-white-50: var(--alpha-white-50);
294
- --beta-white-60: var(--alpha-white-60);
295
- --beta-white-70: var(--alpha-white-70);
296
- --beta-white-80: var(--alpha-white-80);
297
- --beta-white-90: var(--alpha-white-90);
298
- --beta-white-100: var(--alpha-white-100);
299
- --beta-black-1: var(--alpha-black-1);
300
- --beta-black-3: var(--alpha-black-3);
301
- --beta-black-5: var(--alpha-black-5);
302
- --beta-black-8: var(--alpha-black-8);
303
- --beta-black-10: var(--alpha-black-10);
304
- --beta-black-20: var(--alpha-black-20);
305
- --beta-black-30: var(--alpha-black-30);
306
- --beta-black-40: var(--alpha-black-40);
307
- --beta-black-50: var(--alpha-black-50);
308
- --beta-black-60: var(--alpha-black-60);
309
- --beta-black-70: var(--alpha-black-70);
310
- --beta-black-80: var(--alpha-black-80);
311
- --beta-black-90: var(--alpha-black-90);
312
- --beta-black-100: var(--alpha-black-100);
313
-
314
- // border
315
- --border: var(--neutral-variant-80);
316
- --border-static: var(--white);
317
- --border-subtle: var(--neutral-variant-70);
318
- --border-hovered: var(--neutral-variant-70);
319
- --border-pressed: var(--neutral-variant-60);
320
- --border-depressed: var(--neutral-variant-50);
321
- --border-critical: var(--red-30);
322
- --border-success: var(--green-40);
323
- --border-brand: var(--blue-30);
324
- --border-opaque: var(--alpha-white-5);
325
- --border-warning: var(--yellow-10);
326
- --border-warning-subtle: var(--yellow-35);
327
-
328
- // shadow
329
- --shadow-background-default: var(--alpha-black-10);
330
- --shadow-background-bolder: var(--alpha-black-3);
331
-
332
- --shadow-modal-default: var(--alpha-black-10);
333
- --shadow-modal-bolder: var(--alpha-black-10);
334
-
335
- --shadow-button-basic: var(--alpha-black-5);
336
- --shadow-button-primary-1: var(--alpha-black-8);
337
- --shadow-button-primary-2: var(--alpha-black-20);
338
- --shadow-button-pressed: var(--alpha-black-5);
339
-
340
- // focus-ring
341
- --focus-ring-brand: var(--status-04-70);
342
- --focus-ring-error: var(--red-55);
343
- --focus-ring-warning: var(--yellow-40);
344
- }
345
- }