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/components-dark.scss ADDED
@@ -0,0 +1,212 @@
1
+ @import './new-tokens.scss';
2
+
3
+ @layer base {
4
+ .dark {
5
+
6
+ // Colors Component_colors_icon
7
+ --Component-Colors-Icon-Featured-icon-fg-info: var(--Lake-Blue-70);
8
+ --Component-Colors-Icon-Featured-icon-fg-success: var(--Teal-70);
9
+ --Component-Colors-Icon-Featured-icon-fg-warning: var(--Khaki-70);
10
+ --Component-Colors-Icon-Featured-icon-fg-error: var(--Terracotta-70);
11
+
12
+ // Colors Component_colors_button_brand
13
+ --Component-Colors-Button-Brand-fg-default: var(--Pure-Mauve-99);
14
+ --Component-Colors-Button-Brand-fg-alt: var(--Neutral-Variant-40);
15
+ --Component-Colors-Button-Brand-bg-default: var(--Pure-Mauve-50);
16
+ --Component-Colors-Button-Brand-bg-hover: var(--Pure-Mauve-30);
17
+ --Component-Colors-Button-Brand-bg-active: var(--Pure-Mauve-20);
18
+ --Component-Colors-Button-Brand-bg-disabled: var(--Neutral-Variant-20);
19
+
20
+ // Colors Component_colors_button_primary
21
+ --Component-Colors-Button-Primary-fg-default: var(--Neutral-Variant-5);
22
+ --Component-Colors-Button-Primary-fg-alt: var(--Neutral-Variant-40);
23
+ --Component-Colors-Button-Primary-bg-default: var(--Neutral-Variant-100);
24
+ --Component-Colors-Button-Primary-bg-hover: var(--Neutral-Variant-90);
25
+ --Component-Colors-Button-Primary-bg-active: var(--Neutral-Variant-80);
26
+ --Component-Colors-Button-Primary-bg-disabled: var(--Neutral-Variant-20);
27
+ --Component-Colors-Button-Primary-bg-default-2: var(--Neutral-Variant-100);
28
+
29
+
30
+ // Colors Component_colors_button_secondary
31
+ --Component-Colors-Button-Secondary-fg-default: var(--Neutral-Variant-100);
32
+ --Component-Colors-Button-Secondary-fg-alt: var(--Neutral-Variant-40);
33
+ --Component-Colors-Button-Secondary-bg-default: var(--Basic-None);
34
+ --Component-Colors-Button-Secondary-bg-hover: var(--Opacity-White-16);
35
+ --Component-Colors-Button-Secondary-bg-active: var(--Opacity-White-20);
36
+ --Component-Colors-Button-Secondary-border-default: var(--Neutral-Variant-100);
37
+ --Component-Colors-Button-Secondary-border-disabled: var(--Opacity-White-16);
38
+
39
+ // Colors Component_colors_button_tertiary
40
+ --Component-Colors-Button-Tertiary-fg-default: var(--Neutral-Variant-100);
41
+ --Component-Colors-Button-Tertiary-fg-alt: var(--Opacity-White-30);
42
+ --Component-Colors-Button-Tertiary-bg-default: var(--Opacity-White-8);
43
+ --Component-Colors-Button-Tertiary-bg-hover: var(--Opacity-White-16);
44
+ --Component-Colors-Button-Tertiary-bg-active: var(--Opacity-White-20);
45
+ --Component-Colors-Button-Tertiary-border: var(--Opacity-White-16);
46
+ --Component-Colors-Button-Tertiary-border-alt: var(--Opacity-White-30);
47
+
48
+ // Colors Component_colors_button_plain
49
+ --Component-Colors-Button-Plain-fg-default: var(--Neutral-Variant-100);
50
+ --Component-Colors-Button-Plain-fg-alt: var(--Neutral-Variant-40);
51
+ --Component-Colors-Button-Plain-bg-default: var(--Basic-None);
52
+ --Component-Colors-Button-Plain-bg-hover: var(--Opacity-White-16);
53
+ --Component-Colors-Button-Plain-bg-active: var(--Opacity-White-20);
54
+
55
+ // Colors Component_colors_button_plain_brand
56
+ --Component-Colors-Button-Plain-Brand-fg-default: var(--Pure-Mauve-70);
57
+ --Component-Colors-Button-Plain-Brand-fg-alt: var(--Neutral-Variant-40);
58
+ --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
59
+ --Component-Colors-Button-Plain-Brand-bg-hover: var(--Opacity-White-16);
60
+ --Component-Colors-Button-Plain-Brand-bg-active: var(--Opacity-White-20);
61
+
62
+ // Colors Component_colors_button_error_primary
63
+ --Component-Colors-Button-Error-Primary-fg-default: var(--Terracotta-95);
64
+ --Component-Colors-Button-Error-Primary-fg-alt: var(--Neutral-Variant-40);
65
+ --Component-Colors-Button-Error-Primary-bg-default: var(--Terracotta-40);
66
+ --Component-Colors-Button-Error-Primary-bg-hover: var(--Terracotta-30);
67
+ --Component-Colors-Button-Error-Primary-bg-active: var(--Terracotta-20);
68
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Neutral-Variant-20);
69
+ --Component-Colors-Button-Error-Primary-bg-loading: var(--Terracotta-40);
70
+
71
+ // Colors Component_colors_button_error_secondary
72
+ --Component-Colors-Button-Error-Secondary-fg-default: var(--Terracotta-95);
73
+ --Component-Colors-Button-Error-Secondary-fg-alt: var(--Neutral-Variant-40);
74
+ --Component-Colors-Button-Error-Secondary-bg-default: var(--Terracotta-5);
75
+ --Component-Colors-Button-Error-Secondary-bg-hover: var(--Terracotta-20);
76
+ --Component-Colors-Button-Error-Secondary-bg-active: var(--Terracotta-30);
77
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Basic-None);
78
+ --Component-Colors-Button-Error-Secondary-border-default: var(--Terracotta-40);
79
+ --Component-Colors-Button-Error-Secondary-border-disabled: var(--Opacity-White-16);
80
+
81
+ // Colors Component_colors_button_static
82
+ --Component-Colors-Button-Static-fg-default: var(--Neutral-Variant-5);
83
+ --Component-Colors-Button-Static-fg-alt: var(--Neutral-Variant-40);
84
+ --Component-Colors-Button-Static-bg-default: var(--Neutral-Variant-99);
85
+ --Component-Colors-Button-Static-bg-hover: var(--Neutral-Variant-95);
86
+ --Component-Colors-Button-Static-bg-active: var(--Neutral-Variant-90);
87
+ --Component-Colors-Button-Static-border: var(--Opacity-White-16);
88
+ --Component-Colors-Button-Static-border-alt: var(--Opacity-White-30);
89
+
90
+ // Colors Component_colors_button_solid
91
+ --Component-Colors-Button-Solid-fg-default: var(--Neutral-Variant-100);
92
+ --Component-Colors-Button-Solid-fg-alt: var(--Neutral-Variant-40);
93
+ --Component-Colors-Button-Solid-bg-default: var(--Neutral-Variant-10);
94
+ --Component-Colors-Button-Solid-bg-hover: var(--Neutral-Variant-20);
95
+ --Component-Colors-Button-Solid-bg-active: var(--Neutral-Variant-30);
96
+ --Component-Colors-Button-Solid-border: var(--Opacity-White-16);
97
+ --Component-Colors-Button-Solid-border-alt: var(--Opacity-White-30);
98
+
99
+ // Colors Component_colors_icon_button
100
+ --Component-Colors-Icon-Button-Brand-fg-default: var(--Pure-Mauve-99);
101
+ --Component-Colors-Icon-Button-Brand-fg-alt: var(--Neutral-Variant-40);
102
+ --Component-Colors-Icon-Button-Brand-bg-default: var(--Pure-Mauve-50);
103
+ --Component-Colors-Icon-Button-Brand-bg-hover: var(--Pure-Mauve-30);
104
+ --Component-Colors-Icon-Button-Brand-bg-active: var(--Pure-Mauve-20);
105
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Neutral-Variant-20);
106
+
107
+ --Component-Colors-Icon-Button-Plain-fg-default: var(--Neutral-Variant-100);
108
+ --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Neutral-Variant-80);
109
+
110
+ // Colors Component_colors_link_button_primary
111
+ --Component-Colors-Link-Button-Primary-fg-default: var(--Pure-Mauve-70);
112
+ --Component-Colors-Link-Button-Primary-fg-hover: var(--Pure-Mauve-80);
113
+ --Component-Colors-Link-Button-Primary-fg-active: var(--Pure-Mauve-80);
114
+ --Component-Colors-Link-Button-Primary-fg-disabled: var(--Neutral-Variant-40);
115
+ --Component-Colors-Link-Button-Primary-bg-default: var(--Basic-None);
116
+
117
+ // Colors Component_colors_link_button_secondary
118
+ --Component-Colors-Link-Button-Secondary-fg-default: var(--Neutral-Variant-100);
119
+ --Component-Colors-Link-Button-Secondary-fg-hover: var(--Neutral-Variant-80);
120
+ --Component-Colors-Link-Button-Secondary-fg-active: var(--Neutral-Variant-60);
121
+ --Component-Colors-Link-Button-Secondary-fg-disabled: var(--Neutral-Variant-40);
122
+ --Component-Colors-Link-Button-Secondary-bg-default: var(--Basic-None);
123
+
124
+ // Colors Component_colors_tooltip
125
+ --Component-Colors-Tooltip-fg-default: var(--Neutral-Variant-100);
126
+ --Component-Colors-Tooltip-fg-subtle: var(--Neutral-Variant-80);
127
+ --Component-Colors-Tooltip-bg-default: var(--Neutral-Variant-10);
128
+ --Component-Colors-Tooltip-border-default: var(--Neutral-Variant-20);
129
+
130
+ // Colors Component_colors_tabbar
131
+ --Component-Colors-Tabbar-fg-default: var(--Neutral-Variant-70);
132
+ --Component-Colors-Tabbar-fg-alt: var(--Neutral-Variant-50);
133
+ --Component-Colors-Tabbar-fg-bolder: var(--Neutral-Variant-100);
134
+ --Component-Colors-Tabbar-fg-disabled: var(--Neutral-Variant-30);
135
+ --Component-Colors-Tabbar-bg-default: var(--Opacity-White-5);
136
+ --Component-Colors-Tabbar-bg-select: var(--Neutral-Variant-20);
137
+ --Component-Colors-Tabbar-border-default: var(--Neutral-Variant-100);
138
+ --Component-Colors-Tabbar-border-disabled: var(--Neutral-Variant-20);
139
+
140
+ // Colors Component_colors_energy
141
+ --Component-Colors-Energy-fg-default: var(--Khaki-90);
142
+ --Component-Colors-Energy-bg-default: var(--Khaki-10);
143
+ --Component-Colors-Energy-bg-alt: var(--Khaki-20);
144
+ --Component-Colors-Energy-bg-on: var(--Khaki-60);
145
+ --Component-Colors-Energy-border-default: var(--Khaki-90);
146
+
147
+ // Colors Component_colors_input
148
+ --Component-Colors-Input-bg-default: var(--Opacity-White-5);
149
+ --Component-Colors-Input-bg-hover: var(--Opacity-White-12);
150
+ --Component-Colors-Input-bg-disabled: var(--Opacity-White-8);
151
+ --Component-Colors-Input-border-default: var(--Opacity-White-12);
152
+
153
+ // Colors Component_colors_search_bar
154
+ --Component-Colors-Search-Bar-bg-default: var(--Opacity-White-5);
155
+ --Component-Colors-Search-Bar-bg-hover: var(--Opacity-White-12);
156
+ --Component-Colors-Search-Bar-border-default: var(--Opacity-White-12);
157
+
158
+ // Colors Component_colors_shadow
159
+ --Component-Colors-Shadows-Surface-Default: var(--Opacity-White-5);
160
+ --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-White-3);
161
+ --Component-Colors-Shadows-Modal-Default: var(--Opacity-Black-40);
162
+ --Component-Colors-Shadows-Modal-Bolder: var(--Opacity-Black-40);
163
+ --Component-Colors-Shadows-Button-Primary-1:var(--Alpha-White-8);
164
+
165
+ // Colors Component_colors_focus_rings
166
+ --Component-Colors-Focus-Rings-Brand: var(--Opacity-White-40);
167
+ --Component-Colors-Focus-Rings-Error: var(--Terracotta-60);
168
+
169
+ // Colors Component_colors_chat_tips
170
+ --Component-Colors-Chat-Tips-fg-info: var(--Pure-Mauve-70);
171
+ --Component-Colors-Chat-Tips-bg-info: var(--Pure-Mauve-10);
172
+ --Component-Colors-Chat-Tips-border-info: var(--Pure-Mauve-30);
173
+ --Component-Colors-Chat-Tips-fg-alert: var(--Khaki-70);
174
+ --Component-Colors-Chat-Tips-bg-alert: var(--Khaki-10);
175
+ --Component-Colors-Chat-Tips-button-alert: var(--Khaki-40);
176
+ --Component-Colors-Chat-Tips-border-alert: var(--Khaki-30);
177
+ --Component-Colors-Chat-Tips-fg-error: var(--Terracotta-70);
178
+ --Component-Colors-Chat-Tips-bg-error: var(--Terracotta-10);
179
+ --Component-Colors-Chat-Tips-border-error: var(--Terracotta-30);
180
+
181
+ // Colors Component_colors_check_box
182
+ --Component-Colors-Check-Box-fg-default: var(--Neutral-Variant-5);
183
+ --Component-Colors-Check-Box-fg-alt: var(--Neutral-Variant-50);
184
+ --Component-Colors-Check-Box-border-default: var(--Neutral-Variant-30);
185
+ --Component-Colors-Check-Box-border-hover: var(--Neutral-Variant-40);
186
+ --Component-Colors-Check-Box-border-disabled: var(--Neutral-Variant-20);
187
+ --Component-Colors-Check-Box-bg-default: var(--Neutral-Variant-100);
188
+ --Component-Colors-Check-Box-bg-hover: var(--Neutral-Variant-90);
189
+ --Component-Colors-Check-Box-bg-disabled: var(--Neutral-Variant-20);
190
+
191
+ // Colors Component_colors_switch
192
+ --Component-Colors-Switch-fg-default: var(--Neutral-Variant-100);
193
+ --Component-Colors-Switch-fg-on: var(--Neutral-Variant-100);
194
+ --Component-Colors-Switch-fg-disabled: var(--Opacity-White-30);
195
+ --Component-Colors-Switch-bg-default: var(--Neutral-Variant-20);
196
+ --Component-Colors-Switch-bg-on: var(--Pure-Mauve-60);
197
+ --Component-Colors-Switch-bg-disabled: var(--Neutral-Variant-20);
198
+
199
+ // Colors Component_colors_tag
200
+ --Component-Colors-Tag-bg-default: var(--Opacity-White-12);
201
+
202
+ // Colors Component_colors_chips
203
+ --Component-Colors-Chips-Primary-bg-default: var(--Opacity-White-5);
204
+ --Component-Colors-Chips-Primary-bg-hover: var(--Opacity-White-12);
205
+ --Component-Colors-Chips-Primary-bg-disabled: var(--Opacity-White-8);
206
+ --Component-Colors-Chips-Primary-border: var(--Opacity-White-12);
207
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Neutral-Variant-30);
208
+ --Component-Colors-Chips-Primary-bg-select: var(--Neutral-Variant-100);
209
+
210
+ }
211
+ }
212
+
package/src/styles/components-light.scss ADDED
@@ -0,0 +1,210 @@
1
+ @import './new-tokens.scss';
2
+
3
+ @layer base {
4
+ :root {
5
+
6
+ // Colors Component_colors_icon
7
+ --Component-Colors-Icon-Featured-icon-fg-info: var(--Lake-Blue-50);
8
+ --Component-Colors-Icon-Featured-icon-fg-success: var(--Teal-50);
9
+ --Component-Colors-Icon-Featured-icon-fg-warning: var(--Khaki-50);
10
+ --Component-Colors-Icon-Featured-icon-fg-error: var(--Terracotta-50);
11
+
12
+ // Colors Component_colors_button_brand
13
+ --Component-Colors-Button-Brand-fg-default: var(--Pure-Mauve-50);
14
+ --Component-Colors-Button-Brand-fg-alt: var(--Neutral-70);
15
+ --Component-Colors-Button-Brand-bg-default: var(--Pure-Mauve-95);
16
+ --Component-Colors-Button-Brand-bg-hover: var(--Pure-Mauve-80);
17
+ --Component-Colors-Button-Brand-bg-active: var(--Pure-Mauve-70);
18
+ --Component-Colors-Button-Brand-bg-disabled: var(--Neutral-95);
19
+
20
+ // Colors Component_colors_button_primary
21
+ --Component-Colors-Button-Primary-fg-default: var(--Neutral-100);
22
+ --Component-Colors-Button-Primary-fg-alt: var(--Opacity-White-90);
23
+ --Component-Colors-Button-Primary-bg-default: var(--Neutral-5);
24
+ --Component-Colors-Button-Primary-bg-hover: var(--Neutral-20);
25
+ --Component-Colors-Button-Primary-bg-active: var(--Neutral-40);
26
+ --Component-Colors-Button-Primary-bg-disabled: var(--Opacity-Black-30);
27
+ --Component-Colors-Button-Primary-bg-default-2: var(--Neutral-5);
28
+
29
+ // Colors Component_colors_button_secondary
30
+ --Component-Colors-Button-Secondary-fg-default: var(--Neutral-5);
31
+ --Component-Colors-Button-Secondary-fg-alt: var(--Neutral-70);
32
+ --Component-Colors-Button-Secondary-bg-default: var(--Basic-None);
33
+ --Component-Colors-Button-Secondary-bg-hover: var(--Opacity-On-Surface-20);
34
+ --Component-Colors-Button-Secondary-bg-active: var(--Opacity-On-Surface-30);
35
+ --Component-Colors-Button-Secondary-border-default: var(--Neutral-5);
36
+ --Component-Colors-Button-Secondary-border-disabled: var(--Opacity-On-Surface-40);
37
+
38
+ // Colors Component_colors_button_tertiary
39
+ --Component-Colors-Button-Tertiary-fg-default: var(--Neutral-5);
40
+ --Component-Colors-Button-Tertiary-fg-alt: var(--Neutral-70);
41
+ --Component-Colors-Button-Tertiary-bg-default: var(--Opacity-On-Surface-10);
42
+ --Component-Colors-Button-Tertiary-bg-hover: var(--Opacity-On-Surface-20);
43
+ --Component-Colors-Button-Tertiary-bg-active: var(--Opacity-On-Surface-30);
44
+ --Component-Colors-Button-Tertiary-border-default: var(--Opacity-On-Surface-40);
45
+ --Component-Colors-Button-Tertiary-border-alt: var(--Opacity-On-Surface-40);
46
+
47
+ // Colors Component_colors_button_plain
48
+ --Component-Colors-Button-Plain-fg-default: var(--Neutral-5);
49
+ --Component-Colors-Button-Plain-fg-alt: var(--Neutral-70);
50
+ --Component-Colors-Button-Plain-bg-default: var(--Basic-None);
51
+ --Component-Colors-Button-Plain-bg-hover: var(--Opacity-On-Surface-20);
52
+ --Component-Colors-Button-Plain-bg-active: var(--Opacity-On-Surface-30);
53
+
54
+ // Colors Component_colors_button_plain_brand
55
+ --Component-Colors-Button-Plain-Brand-fg-default: var(--Pure-Mauve-50);
56
+ --Component-Colors-Button-Plain-Brand-fg-alt: var(--Neutral-70);
57
+ --Component-Colors-Button-Plain-Brand-bg-default: var(--Basic-None);
58
+ --Component-Colors-Button-Plain-Brand-bg-hover: var(--Opacity-On-Surface-20);
59
+ --Component-Colors-Button-Plain-Brand-bg-active: var(--Opacity-On-Surface-30);
60
+
61
+ // Colors Component_colors_button_error
62
+ --Component-Colors-Button-Error-Primary-fg-default: var(--Terracotta-100);
63
+ --Component-Colors-Button-Error-Primary-fg-alt: var(--Neutral-70);
64
+ --Component-Colors-Button-Error-Primary-bg-default: var(--Terracotta-50);
65
+ --Component-Colors-Button-Error-Primary-bg-hover: var(--Terracotta-40);
66
+ --Component-Colors-Button-Error-Primary-bg-active: var(--Terracotta-30);
67
+ --Component-Colors-Button-Error-Primary-bg-disabled: var(--Neutral-95);
68
+ --Component-Colors-Button-Error-Primary-bg-loading: var(--Terracotta-90);
69
+
70
+ // Colors Component_colors_button_error_secondary
71
+ --Component-Colors-Button-Error-Secondary-fg-default: var(--Terracotta-50);
72
+ --Component-Colors-Button-Error-Secondary-fg-alt: var(--Neutral-70);
73
+ --Component-Colors-Button-Error-Secondary-bg-default: var(--Terracotta-98);
74
+ --Component-Colors-Button-Error-Secondary-bg-hover: var(--Terracotta-90);
75
+ --Component-Colors-Button-Error-Secondary-bg-active: var(--Terracotta-80);
76
+ --Component-Colors-Button-Error-Secondary-bg-disabled: var(--Terracotta-100);
77
+ --Component-Colors-Button-Error-Secondary-border-default: var(--Terracotta-50);
78
+ --Component-Colors-Button-Error-Secondary-border-disabled: var(--Opacity-On-Surface-40);
79
+
80
+ // Colors Component_colors_button_static
81
+ --Component-Colors-Button-Static-fg-default: var(--Neutral-5);
82
+ --Component-Colors-Button-Static-fg-alt: var(--Neutral-70);
83
+ --Component-Colors-Button-Static-bg-default: var(--Opacity-On-Surface-10);
84
+ --Component-Colors-Button-Static-bg-hover: var(--Opacity-On-Surface-20);
85
+ --Component-Colors-Button-Static-bg-active: var(--Opacity-On-Surface-30);
86
+ --Component-Colors-Button-Static-border-default: var(--Opacity-On-Surface-40);
87
+ --Component-Colors-Button-Static-border-alt: var(--Opacity-On-Surface-40);
88
+
89
+ // Colors Component_colors_button_solid
90
+ --Component-Colors-Button-Solid-fg-default: var(--Neutral-5);
91
+ --Component-Colors-Button-Solid-fg-alt: var(--Neutral-70);
92
+ --Component-Colors-Button-Solid-bg-default: var(--Neutral-100);
93
+ --Component-Colors-Button-Solid-bg-hover: var(--Neutral-98);
94
+ --Component-Colors-Button-Solid-bg-active: var(--Neutral-95);
95
+ --Component-Colors-Button-Solid-border-default: var(--Opacity-On-Surface-40);
96
+ --Component-Colors-Button-Solid-border-alt: var(--Opacity-On-Surface-40);
97
+
98
+ // Colors Component_colors_icon_button
99
+ --Component-Colors-Icon-Button-Brand-fg-default: var(--Pure-Mauve-5);
100
+ --Component-Colors-Icon-Button-Brand-fg-alt: var(--Neutral-70);
101
+ --Component-Colors-Icon-Button-Brand-bg-default: var(--Pure-Mauve-95);
102
+ --Component-Colors-Icon-Button-Brand-bg-hover: var(--Pure-Mauve-80);
103
+ --Component-Colors-Icon-Button-Brand-bg-active: var(--Pure-Mauve-70);
104
+ --Component-Colors-Icon-Button-Brand-bg-disabled: var(--Neutral-95);
105
+
106
+ --Component-Colors-Icon-Button-Plain-fg-default: var(--Neutral-5);
107
+ --Component-Colors-Icon-Button-Plain-Gray-fg-default: var(--Neutral-40);
108
+
109
+ // Colors Component_colors_link_button_primary
110
+ --Component-Colors-Link-Button-Primary-fg-default: var(--Pure-Mauve-50);
111
+ --Component-Colors-Link-Button-Primary-fg-hover: var(--Pure-Mauve-40);
112
+ --Component-Colors-Link-Button-Primary-fg-active: var(--Pure-Mauve-30);
113
+ --Component-Colors-Link-Button-Primary-fg-disabled: var(--Neutral-Variant-80);
114
+ --Component-Colors-Link-Button-Primary-bg-default: var(--Basic-None);
115
+
116
+ // Colors Component_colors_link_button_secondary
117
+ --Component-Colors-Link-Button-Secondary-fg-default: var(--Neutral-Variant-30);
118
+ --Component-Colors-Link-Button-Secondary-fg-hover: var(--Neutral-Variant-50);
119
+ --Component-Colors-Link-Button-Secondary-fg-active: var(--Neutral-Variant-70);
120
+ --Component-Colors-Link-Button-Secondary-fg-disabled: var(--Neutral-Variant-80);
121
+ --Component-Colors-Link-Button-Secondary-bg-default: var(--Basic-None);
122
+
123
+ // Colors Component_colors_tooltip
124
+ --Component-Colors-Tooltip-fg-default: var(--Neutral-Variant-100);
125
+ --Component-Colors-Tooltip-fg-subtle: var(--Neutral-Variant-80);
126
+ --Component-Colors-Tooltip-bg-default: var(--Neutral-Variant-10);
127
+ --Component-Colors-Tooltip-border-default: var(--Basic-None);
128
+
129
+ // Colors Component_colors_tabbar
130
+ --Component-Colors-Tabbar-fg-default: var(--Neutral-60);
131
+ --Component-Colors-Tabbar-fg-alt: var(--Neutral-70);
132
+ --Component-Colors-Tabbar-fg-bolder: var(--Neutral-5);
133
+ --Component-Colors-Tabbar-fg-disabled: var(--Neutral-90);
134
+ --Component-Colors-Tabbar-bg-default: var(--Opacity-On-Surface-10);
135
+ --Component-Colors-Tabbar-bg-select: var(--Neutral-100);
136
+ --Component-Colors-Tabbar-border-default: var(--Neutral-5);
137
+ --Component-Colors-Tabbar-border-disabled: var(--Neutral-95);
138
+
139
+ // Colors Component_colors_energy
140
+ --Component-Colors-Energy-fg-default: var(--Khaki-40);
141
+ --Component-Colors-Energy-bg-default: var(--Khaki-99);
142
+ --Component-Colors-Energy-bg-alt: var(--Khaki-95);
143
+ --Component-Colors-Energy-bg-on: var(--Khaki-90);
144
+ --Component-Colors-Energy-border-default: var(--Khaki-80);
145
+
146
+ // Colors Component_colors_input
147
+ --Component-Colors-Input-bg-default: var(--Opacity-On-Surface-10);
148
+ --Component-Colors-Input-bg-hover: var(--Opacity-On-Surface-20);
149
+ --Component-Colors-Input-bg-disabled: var(--Opacity-On-Surface-10);
150
+ --Component-Colors-Input-border-default: var(--Opacity-On-Surface-40);
151
+
152
+ // Colors Component_colors_search_bar
153
+ --Component-Colors-Search-Bar-bg-default: var(--Opacity-On-Surface-10);
154
+ --Component-Colors-Search-Bar-bg-hover: var(--Opacity-On-Surface-20);
155
+ --Component-Colors-Search-Bar-border-default: var(--Opacity-On-Surface-40);
156
+
157
+ // Colors Component_colors_shadow
158
+ --Component-Colors-Shadows-Surface-Default: var(--Opacity-Black-12);
159
+ --Component-Colors-Shadows-Surface-Bolder: var(--Opacity-Black-3);
160
+ --Component-Colors-Shadows-Modal-Default: var(--Opacity-Black-12);
161
+ --Component-Colors-Shadows-Modal-Bolder: var(--Opacity-Black-12);
162
+ --Component-Colors-Shadows-Button-Primary-1:var(--Alpha-White-8);
163
+
164
+ // Colors Component_colors_focus_rings
165
+ --Component-Colors-Focus-Rings-Brand: var(--Neutral-90);
166
+ --Component-Colors-Focus-Rings-Error: var(--Terracotta-50);
167
+
168
+ // Colors Component_colors_chat_tips
169
+ --Component-Colors-Chat-Tips-fg-info: var(--Pure-Mauve-50);
170
+ --Component-Colors-Chat-Tips-bg-info: var(--Pure-Mauve-99);
171
+ --Component-Colors-Chat-Tips-border-info: var(--Pure-Mauve-90);
172
+ --Component-Colors-Chat-Tips-fg-alert: var(--Khaki-70);
173
+ --Component-Colors-Chat-Tips-bg-alert: var(--Khaki-98);
174
+ --Component-Colors-Chat-Tips-button-alert: var(--Khaki-90);
175
+ --Component-Colors-Chat-Tips-border-alert: var(--Khaki-90);
176
+ --Component-Colors-Chat-Tips-fg-error: var(--Terracotta-50);
177
+ --Component-Colors-Chat-Tips-bg-error: var(--Terracotta-98);
178
+ --Component-Colors-Chat-Tips-border-error: var(--Terracotta-90);
179
+
180
+ // Colors Component_colors_check_box
181
+ --Component-Colors-Check-Box-fg-default: var(--Neutral-100);
182
+ --Component-Colors-Check-Box-fg-alt: var(--Neutral-90);
183
+ --Component-Colors-Check-Box-border-default: var(--Neutral-90);
184
+ --Component-Colors-Check-Box-border-hover: var(--Neutral-80);
185
+ --Component-Colors-Check-Box-border-disabled: var(--Neutral-98);
186
+ --Component-Colors-Check-Box-bg-default: var(--Neutral-5);
187
+ --Component-Colors-Check-Box-bg-hover: var(--Neutral-30);
188
+ --Component-Colors-Check-Box-bg-disabled: var(--Neutral-98);
189
+
190
+ // Colors Component_colors_switch
191
+ --Component-Colors-Switch-fg-default: var(--Neutral-Variant-100);
192
+ --Component-Colors-Switch-fg-on: var(--Neutral-Variant-100);
193
+ --Component-Colors-Switch-fg-disabled: var(--Opacity-White-60);
194
+ --Component-Colors-Switch-bg-default: var(--Neutral-Variant-90);
195
+ --Component-Colors-Switch-bg-on: var(--Neutral-Variant-5);
196
+ --Component-Colors-Switch-bg-disabled: var(--Neutral-Variant-98);
197
+
198
+ // Colors Component_colors_tag
199
+ --Component-Colors-Tag-bg-default: var(--Opacity-On-Surface-20);
200
+
201
+ // Colors Component_colors_chips
202
+ --Component-Colors-Chips-Primary-bg-default: var(--Opacity-On-Surface-10);
203
+ --Component-Colors-Chips-Primary-bg-hover: var(--Opacity-On-Surface-20);
204
+ --Component-Colors-Chips-Primary-bg-disabled: var(--Opacity-On-Surface-10);
205
+ --Component-Colors-Chips-Primary-border-default: var(--Opacity-On-Surface-40);
206
+ --Component-Colors-Chips-Primary-bg-select-disabled: var(--Neutral-90);
207
+ --Component-Colors-Chips-Primary-bg-select: var(--Neutral-5);
208
+ }
209
+ }
210
+