@mc-markets/ui 1.0.90 → 1.0.92

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 (68) hide show
  1. package/README.md +243 -40
  2. package/USAGE_GUIDE.md +339 -0
  3. package/dist/404.html +22 -22
  4. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  5. package/dist/index.cjs +1 -1
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.mjs +10 -11
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/resolver.d.ts +26 -0
  10. package/dist/resolver.d.ts.map +1 -0
  11. package/dist/style.css +1 -1
  12. package/package.json +8 -5
  13. package/packages/components/Alert/Alert.vue +139 -139
  14. package/packages/components/Banner/Banner.vue +299 -299
  15. package/packages/components/Breadcrumb/Breadcrumb.vue +113 -113
  16. package/packages/components/Breadcrumb/BreadcrumbSeparator.vue +31 -31
  17. package/packages/components/Button/Button.vue +17 -17
  18. package/packages/components/DatePicker/DatePicker.vue +85 -85
  19. package/packages/components/Dialog/Dialog.vue +61 -61
  20. package/packages/components/Empty/Empty.vue +73 -73
  21. package/packages/components/Form/Form.vue +30 -30
  22. package/packages/components/FormItem/FormItem.vue +19 -19
  23. package/packages/components/Icon/Icon.vue +210 -210
  24. package/packages/components/Input/Input.vue +15 -15
  25. package/packages/components/Message/Message.vue +503 -503
  26. package/packages/components/NotifiMessage/NotifiMessage.vue +293 -293
  27. package/packages/components/Notification/Notification.vue +19 -19
  28. package/packages/components/Option/Option.vue +13 -13
  29. package/packages/components/OptionGroup/OptionGroup.vue +13 -13
  30. package/packages/components/Pagination/Pagination.vue +61 -61
  31. package/packages/components/Radio/Radio.vue +67 -67
  32. package/packages/components/RadioButton/RadioButton.vue +110 -110
  33. package/packages/components/RadioGroup/RadioGroup.vue +155 -155
  34. package/packages/components/Select/Select.vue +22 -22
  35. package/packages/components/Switch/Switch.vue +47 -47
  36. package/packages/components/TabCard/TabCard.vue +107 -107
  37. package/packages/components/TabCard/TabCardItem.vue +105 -105
  38. package/packages/components/Table/Table.vue +17 -17
  39. package/packages/components/Table/TableColumn.vue +20 -20
  40. package/packages/components/Tabs/TabPane.vue +79 -79
  41. package/packages/components/Tabs/Tabs.vue +267 -267
  42. package/packages/components/Tag/Tag.vue +208 -211
  43. package/packages/components/Tooltip/Tooltip.vue +58 -58
  44. package/packages/hooks/useClassName.js +23 -23
  45. package/packages/resolver.js +179 -0
  46. package/packages/styles/README.md +129 -129
  47. package/packages/styles/colorfont/iconfont.css +1 -0
  48. package/packages/styles/components/button.scss +121 -121
  49. package/packages/styles/components/checkbox.scss +18 -18
  50. package/packages/styles/components/dialog.scss +47 -47
  51. package/packages/styles/components/form.scss +18 -18
  52. package/packages/styles/components/input.scss +14 -14
  53. package/packages/styles/components/select.scss +62 -62
  54. package/packages/styles/components/table.scss +37 -37
  55. package/packages/styles/components/tabs.scss +76 -76
  56. package/packages/styles/components/tag.scss +142 -142
  57. package/packages/styles/font/iconfont.scss +363 -363
  58. package/packages/styles/index.scss +94 -94
  59. package/packages/styles/variables/border-mode.css +6 -6
  60. package/packages/styles/variables/color-modes-dark.css +143 -143
  61. package/packages/styles/variables/index.scss +5 -5
  62. package/packages/styles/variables/primitives-style.css +112 -112
  63. package/packages/styles/variables/radius-mode.css +14 -14
  64. package/packages/styles/variables/spacing-mode.css +20 -20
  65. package/packages/styles/variables/typography-desktop.css +40 -40
  66. package/packages/styles/variables/typography-mobile.css +40 -40
  67. package/packages/utils/classNames.js +23 -23
  68. package/packages/utils/styleUtils.js +105 -105
package/packages/styles/index.scss CHANGED
@@ -1,94 +1,94 @@
1
- /**
2
- * @mc-markets/ui - Element Plus 主题变量配置
3
- *
4
- * 基于 Element Plus 官方主题定制指南
5
- * @see https://element-plus.org/zh-CN/guide/theming.html
6
- */
7
-
8
- // 导入所有 Element Plus 样式
9
- @forward 'element-plus/theme-chalk/src/common/var.scss' with (
10
- // 自定义颜色变量
11
- $colors: (
12
- 'primary': (
13
- 'base': #FFD905,
14
- ),
15
- 'success': (
16
- 'base': #34A88B ,
17
- ),
18
- 'warning': (
19
- 'base': #FFA61F,
20
- ),
21
- 'danger': (
22
- 'base': #f14654,
23
- ),
24
- 'info': (
25
- 'base': #585660,
26
- ),
27
- ),
28
- $text-color: (
29
- 'primary': #303133,
30
- 'secondary': #909399,
31
- 'placeholder': #C0C4CC,
32
- ),
33
- // 自定义字体大小
34
- $font-size: (
35
- 'extra-large': 20px,
36
- 'large': 18px,
37
- 'medium': 16px,
38
- 'base': 14px,
39
- 'small': 12px,
40
- 'extra-small': 10px,
41
- ),
42
- // 自定义圆角
43
- $border-radius: (
44
- 'base': 8px,
45
- 'small': 4px,
46
- 'round': 20px,
47
- 'circle': 100%,
48
- ),
49
- $border-color-hover:var(--text-brand),
50
- // 自定义阴影
51
- $common-component-size: (
52
- 'large': 48px,
53
- 'default': 40px,
54
- 'small': 32px,
55
- )
56
- );
57
- @use "element-plus/theme-chalk/src/index.scss" as *;
58
- @use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
59
-
60
- // 导入项目变量
61
- @use './variables/border-mode.css';
62
- @use './variables/color-modes-dark.css';
63
- @use './variables/primitives-style.css';
64
- @use './variables/radius-mode.css';
65
- @use './variables/spacing-mode.css';
66
- @use './variables/typography-desktop.css';
67
-
68
- // 导入组件样式
69
- @use './components/select.scss';
70
- @use './components/checkbox.scss';
71
- @use './components/button.scss';
72
- @use './components/table.scss';
73
- @use './components/form.scss';
74
- @use './components/dialog.scss';
75
- @use './components/input.scss';
76
- @use './components/tag.scss';
77
-
78
-
79
-
80
- html.dark{
81
- --el-text-color-regular: var(--text-white);
82
- --el-disabled-border-color:rgba(255, 255, 255, 0);
83
- --el-border-color-light:var(--border-primary);
84
- --el-popover-border-radius:8px;
85
-
86
- --el-text-color-placeholder:var(--text-tertiary);
87
- --el-border-radius-base:8px;
88
- --el-border-color-hover:var(--text-brand);
89
-
90
- --el-component-size-large: 48px;
91
- --el-component-size: 40px;
92
- --el-component-size-small: 32px;
93
- --el-font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
94
- }
1
+ /**
2
+ * @mc-markets/ui - Element Plus 主题变量配置
3
+ *
4
+ * 基于 Element Plus 官方主题定制指南
5
+ * @see https://element-plus.org/zh-CN/guide/theming.html
6
+ */
7
+
8
+ // 导入所有 Element Plus 样式
9
+ @forward 'element-plus/theme-chalk/src/common/var.scss' with (
10
+ // 自定义颜色变量
11
+ $colors: (
12
+ 'primary': (
13
+ 'base': #FFD905,
14
+ ),
15
+ 'success': (
16
+ 'base': #34A88B ,
17
+ ),
18
+ 'warning': (
19
+ 'base': #FFA61F,
20
+ ),
21
+ 'danger': (
22
+ 'base': #f14654,
23
+ ),
24
+ 'info': (
25
+ 'base': #585660,
26
+ ),
27
+ ),
28
+ $text-color: (
29
+ 'primary': #303133,
30
+ 'secondary': #909399,
31
+ 'placeholder': #C0C4CC,
32
+ ),
33
+ // 自定义字体大小
34
+ $font-size: (
35
+ 'extra-large': 20px,
36
+ 'large': 18px,
37
+ 'medium': 16px,
38
+ 'base': 14px,
39
+ 'small': 12px,
40
+ 'extra-small': 10px,
41
+ ),
42
+ // 自定义圆角
43
+ $border-radius: (
44
+ 'base': 8px,
45
+ 'small': 4px,
46
+ 'round': 20px,
47
+ 'circle': 100%,
48
+ ),
49
+ $border-color-hover:var(--text-brand),
50
+ // 自定义阴影
51
+ $common-component-size: (
52
+ 'large': 48px,
53
+ 'default': 40px,
54
+ 'small': 32px,
55
+ )
56
+ );
57
+ @use "element-plus/theme-chalk/src/index.scss" as *;
58
+ @use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
59
+
60
+ // 导入项目变量
61
+ @use './variables/border-mode.css';
62
+ @use './variables/color-modes-dark.css';
63
+ @use './variables/primitives-style.css';
64
+ @use './variables/radius-mode.css';
65
+ @use './variables/spacing-mode.css';
66
+ @use './variables/typography-desktop.css';
67
+
68
+ // 导入组件样式
69
+ @use './components/select.scss';
70
+ @use './components/checkbox.scss';
71
+ @use './components/button.scss';
72
+ @use './components/table.scss';
73
+ @use './components/form.scss';
74
+ @use './components/dialog.scss';
75
+ @use './components/input.scss';
76
+ @use './components/tag.scss';
77
+
78
+
79
+
80
+ html.dark{
81
+ --el-text-color-regular: var(--text-white);
82
+ --el-disabled-border-color:rgba(255, 255, 255, 0);
83
+ --el-border-color-light:var(--border-primary);
84
+ --el-popover-border-radius:8px;
85
+
86
+ --el-text-color-placeholder:var(--text-tertiary);
87
+ --el-border-radius-base:8px;
88
+ --el-border-color-hover:var(--text-brand);
89
+
90
+ --el-component-size-large: 48px;
91
+ --el-component-size: 40px;
92
+ --el-component-size-small: 32px;
93
+ --el-font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
94
+ }
package/packages/styles/variables/border-mode.css CHANGED
@@ -1,6 +1,6 @@
1
- /* 3.-border-mode-1.css */
2
- :root {
3
- --none: 0px;
4
- --xs: 2px;
5
- --xxs: 1px;
6
- }
1
+ /* 3.-border-mode-1.css */
2
+ :root {
3
+ --none: 0px;
4
+ --xs: 2px;
5
+ --xxs: 1px;
6
+ }
package/packages/styles/variables/color-modes-dark.css CHANGED
@@ -1,143 +1,143 @@
1
- /* 1.-color-modes-dark.css */
2
- :root {
3
- --all-alphe-black-0: var(--colors-alpha-black-0);
4
- --all-alphe-black-10: var(--colors-alpha-black-10);
5
- --all-alphe-black-100: var(--colors-alpha-black-100);
6
- --all-alphe-black-2: var(--colors-alpha-black-2);
7
- --all-alphe-black-20: var(--colors-alpha-black-20);
8
- --all-alphe-black-30: var(--colors-alpha-black-30);
9
- --all-alphe-black-4: var(--colors-alpha-black-4);
10
- --all-alphe-black-40: var(--colors-alpha-black-40);
11
- --all-alphe-black-50: var(--colors-alpha-black-50);
12
- --all-alphe-black-6: var(--colors-alpha-black-6);
13
- --all-alphe-black-60: var(--colors-alpha-black-60);
14
- --all-alphe-black-70: var(--colors-alpha-black-70);
15
- --all-alphe-black-8: var(--colors-alpha-black-8);
16
- --all-alphe-black-80: var(--colors-alpha-black-80);
17
- --all-alphe-black-90: var(--colors-alpha-black-90);
18
- --all-alphe-white-0: var(--colors-alpha-white-0);
19
- --all-alphe-white-10: var(--colors-alpha-white-10);
20
- --all-alphe-white-100: var(--colors-alpha-white-100);
21
- --all-alphe-white-2: var(--colors-alpha-white-2);
22
- --all-alphe-white-20: var(--colors-alpha-white-20);
23
- --all-alphe-white-30: var(--colors-alpha-white-30);
24
- --all-alphe-white-4: var(--colors-alpha-white-4);
25
- --all-alphe-white-40: var(--colors-alpha-white-40);
26
- --all-alphe-white-50: var(--colors-alpha-white-50);
27
- --all-alphe-white-6: var(--colors-alpha-white-6);
28
- --all-alphe-white-60: var(--colors-alpha-white-60);
29
- --all-alphe-white-70: var(--colors-alpha-white-70);
30
- --all-alphe-white-8: var(--colors-alpha-white-8);
31
- --all-alphe-white-80: var(--colors-alpha-white-80);
32
- --all-alphe-white-90: var(--colors-alpha-white-90);
33
- --all-base-black: var(--colors-base-black);
34
- --all-base-white: var(--colors-base-white);
35
- --all-forest-1: var(--colors-forest-1);
36
- --all-forest-10: var(--colors-forest-10);
37
- --all-forest-2: var(--colors-forest-2);
38
- --all-forest-3: var(--colors-forest-3);
39
- --all-forest-4: var(--colors-forest-4);
40
- --all-forest-5: var(--colors-forest-5);
41
- --all-forest-6: var(--colors-forest-6);
42
- --all-forest-7: var(--colors-forest-7);
43
- --all-forest-8: var(--colors-forest-8);
44
- --all-forest-9: var(--colors-forest-9);
45
- --all-gray-1: var(--colors-gray-1);
46
- --all-gray-10: var(--colors-gray-10);
47
- --all-gray-2: var(--colors-gray-2);
48
- --all-gray-3: var(--colors-gray-3);
49
- --all-gray-4: var(--colors-gray-4);
50
- --all-gray-5: var(--colors-gray-5);
51
- --all-gray-6: var(--colors-gray-6);
52
- --all-gray-7: var(--colors-gray-7);
53
- --all-gray-8: var(--colors-gray-8);
54
- --all-gray-9: var(--colors-gray-9);
55
- --all-green-1: var(--colors-green-1);
56
- --all-green-10: var(--colors-green-10);
57
- --all-green-2: var(--colors-green-2);
58
- --all-green-3: var(--colors-green-3);
59
- --all-green-4: var(--colors-green-4);
60
- --all-green-5: var(--colors-green-5);
61
- --all-green-6: var(--colors-green-6);
62
- --all-green-7: var(--colors-green-7);
63
- --all-green-8: var(--colors-green-8);
64
- --all-green-9: var(--colors-green-9);
65
- --all-orange-1: var(--colors-orange-1);
66
- --all-orange-10: var(--colors-orange-10);
67
- --all-orange-2: var(--colors-orange-2);
68
- --all-orange-3: var(--colors-orange-3);
69
- --all-orange-4: var(--colors-orange-4);
70
- --all-orange-5: var(--colors-orange-5);
71
- --all-orange-6: var(--colors-orange-6);
72
- --all-orange-7: var(--colors-orange-7);
73
- --all-orange-8: var(--colors-orange-8);
74
- --all-orange-9: var(--colors-orange-9);
75
- --all-red-1: var(--colors-red-1);
76
- --all-red-10: var(--colors-red-10);
77
- --all-red-2: var(--colors-red-2);
78
- --all-red-3: var(--colors-red-3);
79
- --all-red-4: var(--colors-red-4);
80
- --all-red-5: var(--colors-red-5);
81
- --all-red-6: var(--colors-red-6);
82
- --all-red-7: var(--colors-red-7);
83
- --all-red-8: var(--colors-red-8);
84
- --all-red-9: var(--colors-red-9);
85
- --all-yellow-1: var(--colors-yellow-1);
86
- --all-yellow-10: var(--colors-yellow-10);
87
- --all-yellow-2: var(--colors-yellow-2);
88
- --all-yellow-3: var(--colors-yellow-3);
89
- --all-yellow-4: var(--colors-yellow-4);
90
- --all-yellow-5: var(--colors-yellow-5);
91
- --all-yellow-6: var(--colors-yellow-6);
92
- --all-yellow-7: var(--colors-yellow-7);
93
- --all-yellow-8: var(--colors-yellow-8);
94
- --all-yellow-9: var(--colors-yellow-9);
95
- --bg-black: var(--colors-base-black);
96
- --bg-brand: var(--colors-yellow-4);
97
- --bg-brand-hover: var(--colors-yellow-5);
98
- --bg-brand-secondary: var(--colors-yellow-10);
99
- --bg-error-primary: var(--colors-red-1);
100
- --bg-error-secondary: var(--colors-red-2);
101
- --bg-error-solid: var(--colors-red-7);
102
- --bg-primary: var(--colors-gray-10);
103
- --bg-tertiary-hover: var(--colors-gray-7);
104
- --bg-quaternary: var(--colors-gray-6);
105
- --bg-secondary: var(--colors-gray-9);
106
- --bg-success-primary: var(--colors-green-1);
107
- --bg-success-secondary: var(--colors-green-2);
108
- --bg-success-solid: var(--colors-green-7);
109
- --bg-tertiary: var(--colors-gray-8);
110
- --bg-warning-primary: var(--colors-orange-1);
111
- --bg-warning-secondary: var(--colors-orange-2);
112
- --bg-warning-solid: var(--colors-orange-7);
113
- --bg-white: var(--colors-base-white);
114
- --border-brand: var(--colors-yellow-4);
115
- --border-brand-hover: var(--colors-yellow-5);
116
- --border-error: var(--colors-red-5);
117
- --border-primary: var(--colors-gray-6);
118
- --border-secondary: var(--colors-gray-5);
119
- --border-tertiary: var(--colors-gray-3);
120
- --border-white: var(--colors-base-white);
121
- --button-brand: var(--colors-yellow-4);
122
- --button-brand-hover: var(--colors-yellow-5);
123
- --button-primary: var(--colors-gray-1);
124
- --button-primary---hover: var(--colors-gray-2);
125
- --button-white: var(--colors-base-white);
126
- --icon-brand: var(--colors-yellow-4);
127
- --icon-primary: var(--colors-gray-1);
128
- --icon-secondary: var(--colors-gray-3);
129
- --icon-tertiary: var(--colors-gray-4);
130
- --icon-tertiary-hover: var(--colors-gray-5);
131
- --icon-white: var(--colors-base-white);
132
- --text-brand: var(--colors-yellow-4);
133
- --text-brand-hover: var(--colors-yellow-5);
134
- --text-error-primary: var(--colors-red-5);
135
- --text-primary: var(--colors-gray-1);
136
- --text-quaternary: var(--colors-gray-7);
137
- --text-secondary: var(--colors-gray-2);
138
- --text-success-primary: var(--colors-green-5);
139
- --text-tertiary: var(--colors-gray-4);
140
- --text-tertiary-hover: var(--colors-gray-5);
141
- --text-warning-primary: var(--colors-orange-5);
142
- --text-white: var(--colors-base-white);
143
- }
1
+ /* 1.-color-modes-dark.css */
2
+ :root {
3
+ --all-alphe-black-0: var(--colors-alpha-black-0);
4
+ --all-alphe-black-10: var(--colors-alpha-black-10);
5
+ --all-alphe-black-100: var(--colors-alpha-black-100);
6
+ --all-alphe-black-2: var(--colors-alpha-black-2);
7
+ --all-alphe-black-20: var(--colors-alpha-black-20);
8
+ --all-alphe-black-30: var(--colors-alpha-black-30);
9
+ --all-alphe-black-4: var(--colors-alpha-black-4);
10
+ --all-alphe-black-40: var(--colors-alpha-black-40);
11
+ --all-alphe-black-50: var(--colors-alpha-black-50);
12
+ --all-alphe-black-6: var(--colors-alpha-black-6);
13
+ --all-alphe-black-60: var(--colors-alpha-black-60);
14
+ --all-alphe-black-70: var(--colors-alpha-black-70);
15
+ --all-alphe-black-8: var(--colors-alpha-black-8);
16
+ --all-alphe-black-80: var(--colors-alpha-black-80);
17
+ --all-alphe-black-90: var(--colors-alpha-black-90);
18
+ --all-alphe-white-0: var(--colors-alpha-white-0);
19
+ --all-alphe-white-10: var(--colors-alpha-white-10);
20
+ --all-alphe-white-100: var(--colors-alpha-white-100);
21
+ --all-alphe-white-2: var(--colors-alpha-white-2);
22
+ --all-alphe-white-20: var(--colors-alpha-white-20);
23
+ --all-alphe-white-30: var(--colors-alpha-white-30);
24
+ --all-alphe-white-4: var(--colors-alpha-white-4);
25
+ --all-alphe-white-40: var(--colors-alpha-white-40);
26
+ --all-alphe-white-50: var(--colors-alpha-white-50);
27
+ --all-alphe-white-6: var(--colors-alpha-white-6);
28
+ --all-alphe-white-60: var(--colors-alpha-white-60);
29
+ --all-alphe-white-70: var(--colors-alpha-white-70);
30
+ --all-alphe-white-8: var(--colors-alpha-white-8);
31
+ --all-alphe-white-80: var(--colors-alpha-white-80);
32
+ --all-alphe-white-90: var(--colors-alpha-white-90);
33
+ --all-base-black: var(--colors-base-black);
34
+ --all-base-white: var(--colors-base-white);
35
+ --all-forest-1: var(--colors-forest-1);
36
+ --all-forest-10: var(--colors-forest-10);
37
+ --all-forest-2: var(--colors-forest-2);
38
+ --all-forest-3: var(--colors-forest-3);
39
+ --all-forest-4: var(--colors-forest-4);
40
+ --all-forest-5: var(--colors-forest-5);
41
+ --all-forest-6: var(--colors-forest-6);
42
+ --all-forest-7: var(--colors-forest-7);
43
+ --all-forest-8: var(--colors-forest-8);
44
+ --all-forest-9: var(--colors-forest-9);
45
+ --all-gray-1: var(--colors-gray-1);
46
+ --all-gray-10: var(--colors-gray-10);
47
+ --all-gray-2: var(--colors-gray-2);
48
+ --all-gray-3: var(--colors-gray-3);
49
+ --all-gray-4: var(--colors-gray-4);
50
+ --all-gray-5: var(--colors-gray-5);
51
+ --all-gray-6: var(--colors-gray-6);
52
+ --all-gray-7: var(--colors-gray-7);
53
+ --all-gray-8: var(--colors-gray-8);
54
+ --all-gray-9: var(--colors-gray-9);
55
+ --all-green-1: var(--colors-green-1);
56
+ --all-green-10: var(--colors-green-10);
57
+ --all-green-2: var(--colors-green-2);
58
+ --all-green-3: var(--colors-green-3);
59
+ --all-green-4: var(--colors-green-4);
60
+ --all-green-5: var(--colors-green-5);
61
+ --all-green-6: var(--colors-green-6);
62
+ --all-green-7: var(--colors-green-7);
63
+ --all-green-8: var(--colors-green-8);
64
+ --all-green-9: var(--colors-green-9);
65
+ --all-orange-1: var(--colors-orange-1);
66
+ --all-orange-10: var(--colors-orange-10);
67
+ --all-orange-2: var(--colors-orange-2);
68
+ --all-orange-3: var(--colors-orange-3);
69
+ --all-orange-4: var(--colors-orange-4);
70
+ --all-orange-5: var(--colors-orange-5);
71
+ --all-orange-6: var(--colors-orange-6);
72
+ --all-orange-7: var(--colors-orange-7);
73
+ --all-orange-8: var(--colors-orange-8);
74
+ --all-orange-9: var(--colors-orange-9);
75
+ --all-red-1: var(--colors-red-1);
76
+ --all-red-10: var(--colors-red-10);
77
+ --all-red-2: var(--colors-red-2);
78
+ --all-red-3: var(--colors-red-3);
79
+ --all-red-4: var(--colors-red-4);
80
+ --all-red-5: var(--colors-red-5);
81
+ --all-red-6: var(--colors-red-6);
82
+ --all-red-7: var(--colors-red-7);
83
+ --all-red-8: var(--colors-red-8);
84
+ --all-red-9: var(--colors-red-9);
85
+ --all-yellow-1: var(--colors-yellow-1);
86
+ --all-yellow-10: var(--colors-yellow-10);
87
+ --all-yellow-2: var(--colors-yellow-2);
88
+ --all-yellow-3: var(--colors-yellow-3);
89
+ --all-yellow-4: var(--colors-yellow-4);
90
+ --all-yellow-5: var(--colors-yellow-5);
91
+ --all-yellow-6: var(--colors-yellow-6);
92
+ --all-yellow-7: var(--colors-yellow-7);
93
+ --all-yellow-8: var(--colors-yellow-8);
94
+ --all-yellow-9: var(--colors-yellow-9);
95
+ --bg-black: var(--colors-base-black);
96
+ --bg-brand: var(--colors-yellow-4);
97
+ --bg-brand-hover: var(--colors-yellow-5);
98
+ --bg-brand-secondary: var(--colors-yellow-10);
99
+ --bg-error-primary: var(--colors-red-1);
100
+ --bg-error-secondary: var(--colors-red-2);
101
+ --bg-error-solid: var(--colors-red-7);
102
+ --bg-primary: var(--colors-gray-10);
103
+ --bg-tertiary-hover: var(--colors-gray-7);
104
+ --bg-quaternary: var(--colors-gray-6);
105
+ --bg-secondary: var(--colors-gray-9);
106
+ --bg-success-primary: var(--colors-green-1);
107
+ --bg-success-secondary: var(--colors-green-2);
108
+ --bg-success-solid: var(--colors-green-7);
109
+ --bg-tertiary: var(--colors-gray-8);
110
+ --bg-warning-primary: var(--colors-orange-1);
111
+ --bg-warning-secondary: var(--colors-orange-2);
112
+ --bg-warning-solid: var(--colors-orange-7);
113
+ --bg-white: var(--colors-base-white);
114
+ --border-brand: var(--colors-yellow-4);
115
+ --border-brand-hover: var(--colors-yellow-5);
116
+ --border-error: var(--colors-red-5);
117
+ --border-primary: var(--colors-gray-6);
118
+ --border-secondary: var(--colors-gray-5);
119
+ --border-tertiary: var(--colors-gray-3);
120
+ --border-white: var(--colors-base-white);
121
+ --button-brand: var(--colors-yellow-4);
122
+ --button-brand-hover: var(--colors-yellow-5);
123
+ --button-primary: var(--colors-gray-1);
124
+ --button-primary---hover: var(--colors-gray-2);
125
+ --button-white: var(--colors-base-white);
126
+ --icon-brand: var(--colors-yellow-4);
127
+ --icon-primary: var(--colors-gray-1);
128
+ --icon-secondary: var(--colors-gray-3);
129
+ --icon-tertiary: var(--colors-gray-4);
130
+ --icon-tertiary-hover: var(--colors-gray-5);
131
+ --icon-white: var(--colors-base-white);
132
+ --text-brand: var(--colors-yellow-4);
133
+ --text-brand-hover: var(--colors-yellow-5);
134
+ --text-error-primary: var(--colors-red-5);
135
+ --text-primary: var(--colors-gray-1);
136
+ --text-quaternary: var(--colors-gray-7);
137
+ --text-secondary: var(--colors-gray-2);
138
+ --text-success-primary: var(--colors-green-5);
139
+ --text-tertiary: var(--colors-gray-4);
140
+ --text-tertiary-hover: var(--colors-gray-5);
141
+ --text-warning-primary: var(--colors-orange-5);
142
+ --text-white: var(--colors-base-white);
143
+ }
package/packages/styles/variables/index.scss CHANGED
@@ -1,6 +1,6 @@
1
- @use './variables/border-mode.css';
2
- @use './variables/color-modes-dark.css';
3
- @use './variables/primitives-style.css';
4
- @use './variables/radius-mode.css';
5
- @use './variables/spacing-mode.css';
1
+ @use './variables/border-mode.css';
2
+ @use './variables/color-modes-dark.css';
3
+ @use './variables/primitives-style.css';
4
+ @use './variables/radius-mode.css';
5
+ @use './variables/spacing-mode.css';
6
6
  @use './variables/typography-desktop.css';