@3dsource/source-ui-native 3.2.1 → 3.2.4

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 (34) hide show
  1. package/fesm2022/3dsource-source-ui-native.mjs +10 -10
  2. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/elements/_src-badge.scss +116 -0
  5. package/styles/elements/_src-banner.scss +101 -0
  6. package/styles/elements/_src-button.scss +1 -1
  7. package/styles/elements/_src-checkbox.scss +16 -5
  8. package/styles/elements/_src-divider.scss +14 -0
  9. package/styles/elements/_src-form.scss +2 -2
  10. package/styles/elements/_src-hint.scss +37 -0
  11. package/styles/elements/_src-icon-button.scss +1 -1
  12. package/styles/elements/_src-input.scss +1 -1
  13. package/styles/elements/_src-label.scss +1 -1
  14. package/styles/elements/_src-list.scss +2 -2
  15. package/styles/elements/_src-modal.scss +5 -5
  16. package/styles/elements/_src-popover.scss +5 -5
  17. package/styles/elements/_src-radio.scss +9 -2
  18. package/styles/elements/_src-select.scss +1 -1
  19. package/styles/elements/_src-textarea.scss +3 -3
  20. package/styles/elements/elements.scss +4 -0
  21. package/styles/source-ui-native.css +444 -182
  22. package/styles/source-ui-native.css.map +1 -1
  23. package/styles/source-ui-native.min.css +1 -1
  24. package/styles/variables/color/dark.scss +31 -30
  25. package/styles/variables/color/light.scss +31 -30
  26. package/styles/variables/layout/_lg.scss +17 -20
  27. package/styles/variables/layout/_md.scss +16 -19
  28. package/styles/variables/layout/_sm.scss +17 -20
  29. package/styles/variables/layout/_xl.scss +16 -19
  30. package/styles/variables/primitives/primitives.scss +33 -22
  31. package/styles/variables/ui/_lg.scss +7 -7
  32. package/styles/variables/ui/_md.scss +7 -7
  33. package/styles/variables/ui/_sm.scss +7 -7
  34. package/styles/variables/ui/_xl.scss +7 -7
package/styles/variables/color/dark.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  /* color - dark */
2
2
  :root {
3
3
  --src-surface-background: var(--src-color-grey-900);
4
- --src-ui-accent-default: var(--src-color-accent-400);
5
- --src-ui-accent-default-hover: var(--src-color-accent-500);
4
+ --src-surface-background-inverse: var(--src-color-grey-800);
5
+ --src-ui-accent-default: var(--src-color-primary-400);
6
+ --src-ui-accent-default-hover: var(--src-color-primary-500);
6
7
  --src-ui-accent-disabled: var(--src-color-alpha-white-100);
7
8
  --src-ui-accent-success: var(--src-color-green-600);
8
9
  --src-ui-accent-success-hover: var(--src-color-green-500);
@@ -20,7 +21,7 @@
20
21
  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
21
22
  --src-ui-secondary-error: var(--src-color-alpha-destruct-200);
22
23
  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
23
- --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
24
+ --src-ui-secondary-progress: var(--color-alpha-progress-10);
24
25
  --src-ui-input-default: var(--src-color-alpha-white-10);
25
26
  --src-ui-input-secondary: var(--src-color-alpha-default-200);
26
27
  --src-ui-input-hover: var(--src-color-alpha-default-200);
@@ -37,8 +38,8 @@
37
38
  --src-border-control-hover: var(--src-color-neutral-100);
38
39
  --src-border-button-basic: var(--src-color-grey-600);
39
40
  --src-border-button-basic-hover: var(--src-color-grey-500);
40
- --src-border-button-info: var(--src-color-accent-500);
41
- --src-border-button-info-hover: var(--src-color-accent-400);
41
+ --src-border-button-info: var(--src-color-primary-500);
42
+ --src-border-button-info-hover: var(--src-color-primary-400);
42
43
  --src-border-button-success: var(--src-color-green-700);
43
44
  --src-border-button-success-hover: var(--src-color-green-600);
44
45
  --src-border-button-error: var(--src-color-red-500);
@@ -47,7 +48,7 @@
47
48
  --src-border-input-basic: var(--src-color-grey-700);
48
49
  --src-border-input-hover: var(--src-color-grey-500);
49
50
  --src-border-input-filled: var(--src-color-grey-700);
50
- --src-border-input-active: var(--src-color-accent-500);
51
+ --src-border-input-active: var(--src-color-primary-500);
51
52
  --src-border-input-success: var(--src-color-green-600);
52
53
  --src-border-input-success-hover: var(--src-color-green-400);
53
54
  --src-border-input-error: var(--src-color-red-700);
@@ -55,7 +56,7 @@
55
56
  --src-border-container-basic: var(--src-color-grey-800);
56
57
  --src-border-container-hover: var(--src-color-grey-600);
57
58
  --src-border-container-light: var(--src-color-alpha-white-50);
58
- --src-border-container-active: var(--src-color-accent-500);
59
+ --src-border-container-active: var(--src-color-primary-500);
59
60
  --src-border-container-success: var(--src-color-green-800);
60
61
  --src-border-container-error: var(--src-color-red-800);
61
62
  --src-text-body-main: var(--src-color-grey-50);
@@ -72,26 +73,26 @@
72
73
  --src-icon-disabled: var(--src-color-grey-600);
73
74
  --src-icon-main-invert: var(--src-light);
74
75
  --src-icon-secondary-invert: var(--src-color-grey-200);
75
- --src-icon-info: var(--src-color-accent-500);
76
- --src-icon-info-hover: var(--src-color-accent-400);
76
+ --src-icon-info: var(--src-color-primary-500);
77
+ --src-icon-info-hover: var(--src-color-primary-400);
77
78
  --src-icon-success: var(--src-color-green-500);
78
79
  --src-icon-success-hover: var(--src-color-green-400);
79
80
  --src-icon-error: var(--src-color-red-400);
80
81
  --src-icon-error-hover: var(--src-color-red-300);
81
- --src-icon-warning: var(--src-color-orange-400);
82
- --src-icon-warning-hover: var(--src-color-orange-300);
82
+ --src-icon-warning: var(--src-color-tertiary-400);
83
+ --src-icon-warning-hover: var(--src-color-tertiary-300);
83
84
  --src-icon-attention: var(--src-color-yellow-400);
84
85
  --src-icon-attention-hover: var(--src-color-yellow-600);
85
- --src-graphics-positive: var(--src-color-green-400);
86
+ --src-graphics-positive: var(--color-green-400);
86
87
  --src-graphics-negative: var(--src-color-red-400);
87
- --src-graphics-accent: var(--src-color-accent-500);
88
+ --src-graphics-accent: var(--src-color-primary-500);
88
89
  --src-graphics-dark-grey: var(--src-color-grey-400);
89
90
  --src-graphics-orange: #ffb92dff;
90
91
  --src-graphics-yellow: #f0e442ff;
91
92
  --src-graphics-turquoise: #00ced1ff;
92
93
  --src-graphics-brown: #8b4513ff;
93
94
  --src-graphics-black: var(--src-color-grey-200);
94
- --src-text-body-accent: var(--src-color-accent-400);
95
+ --src-text-body-accent: var(--src-color-primary-400);
95
96
  --src-text-body-success: var(--src-color-green-400);
96
97
  --src-text-body-destruct: var(--src-color-red-400);
97
98
  --src-text-ui-primary-main: var(--src-light);
@@ -113,36 +114,36 @@
113
114
  --src-shadow-success-hover: var(--src-color-alpha-success-50);
114
115
  --src-shadow-error: var(--src-color-alpha-destruct-200);
115
116
  --src-shadow-error-hover: var(--src-color-alpha-destruct-100);
116
- --src-text-ui-accent-main: var(--src-color-accent-400);
117
- --src-text-ui-accent-hover: var(--src-color-accent-300);
117
+ --src-text-ui-accent-main: var(--src-color-primary-400);
118
+ --src-text-ui-accent-hover: var(--src-color-primary-300);
118
119
  --src-text-ui-success-main: var(--src-color-green-400);
119
120
  --src-text-ui-success-hover: var(--src-color-green-300);
120
121
  --src-text-ui-distruct-main: var(--src-color-red-400);
121
122
  --src-text-ui-distruct-hover: var(--src-color-red-300);
122
123
  --src-surface-container-main: var(--src-color-grey-800);
123
124
  --src-surface-container-on-top: var(--src-color-alpha-white-10);
124
- --src-surface-container-secondary: var(--src-color-basic-black);
125
- --src-surface-container-info: var(--src-color-blue-950);
125
+ --src-surface-container-secondary: var(--color-basic-black);
126
+ --src-surface-container-info: var(--color-blue-950);
126
127
  --src-surface-container-success: var(--src-color-green-950);
127
128
  --src-surface-container-error: var(--src-color-red-950);
128
129
  --src-surface-toast-basic: var(--src-color-alpha-default-200);
129
- --src-surface-toast-info: var(--src-color-accent-400);
130
+ --src-surface-toast-info: var(--src-color-primary-400);
130
131
  --src-surface-toast-success: var(--src-color-green-400);
131
132
  --src-surface-toast-error: var(--src-color-red-400);
132
133
  --src-border-infoPrompt-basic: var(--src-color-grey-800);
133
134
  --src-border-infoPrompt-light: var(--src-color-alpha-white-50);
134
- --src-border-infoPrompt-info: var(--src-color-accent-800);
135
+ --src-border-infoPrompt-info: var(--src-color-primary-800);
135
136
  --src-border-infoPrompt-success: var(--src-color-green-800);
136
137
  --src-border-infoPrompt-error: var(--src-color-red-800);
137
138
  --src-gradient-light-start: var(--src-color-alpha-dark-200);
138
139
  --src-gradient-light-end: var(--src-color-alpha-dark-100);
139
140
  --src-gradient-accent-light: var(--src-color-alpha-accent-300);
140
141
  --src-gradient-accent-hard: var(--src-color-alpha-accent-400);
141
- --src-gradient-success: var(--src-color-alpha-success-200);
142
- --src-gradient-success-hover: var(--src-color-alpha-success-50);
143
- --src-gradient-error: var(--src-color-alpha-destruct-200);
144
- --src-gradient-error-hover: var(--src-color-alpha-destruct-100);
145
- --src-tech-sticker: var(--src-color-orange-800);
142
+ --src-gradient-success: var(--color-alpha-success-200);
143
+ --src-gradient-success-hover: var(--color-alpha-success-50);
144
+ --src-gradient-error: var(--color-alpha-destruct-200);
145
+ --src-gradient-error-hover: var(--color-alpha-destruct-100);
146
+ --src-tech-sticker: var(--src-color-tertiary-800);
146
147
  --wireframe-main: var(--src-color-neutral-300);
147
148
  --wireframe-secondary: var(--src-color-neutral-400);
148
149
  --wireframe-light: var(--src-color-neutral-500);
@@ -150,7 +151,7 @@
150
151
  --wireframe-surface-secondary: var(--src-color-alpha-white-50);
151
152
  --wireframe-border: var(--src-color-alpha-white-100);
152
153
  --wireframe-invert: var(--src-dark);
153
- --src-tech-description: var(--src-color-orange-50);
154
+ --src-tech-description: var(--src-color-tertiary-50);
154
155
  --src-light: #ffffffff;
155
156
  --src-dark: #ffffffff;
156
157
  --src-ui-status-basic-neutral: var(--src-color-alpha-white-100);
@@ -177,8 +178,8 @@
177
178
  --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-200);
178
179
  --src-ui-status-light-attention: var(--src-color-alpha-attention-300);
179
180
  --src-ui-status-light-attention-hover: var(--src-color-alpha-attention-200);
180
- --src-text-ui-warning-main: var(--src-color-orange-400);
181
- --src-text-ui-warning-hover: var(--src-color-orange-500);
182
- --src-text-ui-attention-main: var(--src-color-orange-200);
183
- --src-text-ui-attention-hover: var(--src-color-orange-100);
181
+ --src-text-ui-warning-main: var(--src-color-tertiary-400);
182
+ --src-text-ui-warning-hover: var(--src-color-tertiary-500);
183
+ --src-text-ui-attention-main: var(--src-color-tertiary-200);
184
+ --src-text-ui-attention-hover: var(--src-color-tertiary-100);
184
185
  }
package/styles/variables/color/light.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  /* color - light */
2
2
  :root {
3
3
  --src-surface-background: var(--src-color-grey-50);
4
- --src-ui-accent-default: var(--src-color-accent-500);
5
- --src-ui-accent-default-hover: var(--src-color-accent-600);
4
+ --src-surface-background-inverse: var(--src-color-grey-800);
5
+ --src-ui-accent-default: var(--src-color-primary-500);
6
+ --src-ui-accent-default-hover: var(--src-color-primary-600);
6
7
  --src-ui-accent-disabled: var(--src-color-alpha-test-200);
7
8
  --src-ui-accent-success: var(--src-color-green-500);
8
9
  --src-ui-accent-success-hover: var(--src-color-green-600);
@@ -20,7 +21,7 @@
20
21
  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
21
22
  --src-ui-secondary-error: var(--src-color-alpha-destruct-10);
22
23
  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
23
- --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
24
+ --src-ui-secondary-progress: var(--color-alpha-progress-10);
24
25
  --src-ui-input-default: var(--src-color-alpha-white-10);
25
26
  --src-ui-input-secondary: var(--src-color-alpha-default-10);
26
27
  --src-ui-input-hover: var(--src-color-alpha-accent-10);
@@ -37,8 +38,8 @@
37
38
  --src-border-control-hover: var(--src-color-neutral-500);
38
39
  --src-border-button-basic: var(--src-color-grey-200);
39
40
  --src-border-button-basic-hover: var(--src-color-grey-400);
40
- --src-border-button-info: var(--src-color-accent-300);
41
- --src-border-button-info-hover: var(--src-color-accent-500);
41
+ --src-border-button-info: var(--src-color-primary-300);
42
+ --src-border-button-info-hover: var(--src-color-primary-500);
42
43
  --src-border-button-success: var(--src-color-green-400);
43
44
  --src-border-button-success-hover: var(--src-color-green-500);
44
45
  --src-border-button-error: var(--src-color-red-300);
@@ -47,7 +48,7 @@
47
48
  --src-border-input-basic: var(--src-color-grey-300);
48
49
  --src-border-input-hover: var(--src-color-grey-400);
49
50
  --src-border-input-filled: var(--src-color-grey-300);
50
- --src-border-input-active: var(--src-color-accent-500);
51
+ --src-border-input-active: var(--src-color-primary-500);
51
52
  --src-border-input-success: var(--src-color-green-500);
52
53
  --src-border-input-success-hover: var(--src-color-green-600);
53
54
  --src-border-input-error: var(--src-color-red-500);
@@ -55,7 +56,7 @@
55
56
  --src-border-container-basic: var(--src-color-grey-300);
56
57
  --src-border-container-hover: var(--src-color-grey-400);
57
58
  --src-border-container-light: var(--src-color-alpha-default-50);
58
- --src-border-container-active: var(--src-color-accent-400);
59
+ --src-border-container-active: var(--src-color-primary-400);
59
60
  --src-border-container-success: var(--src-color-green-200);
60
61
  --src-border-container-error: var(--src-color-red-200);
61
62
  --src-text-body-main: var(--src-color-grey-900);
@@ -72,26 +73,26 @@
72
73
  --src-icon-disabled: var(--src-color-grey-400);
73
74
  --src-icon-main-invert: var(--src-light);
74
75
  --src-icon-secondary-invert: var(--src-color-grey-200);
75
- --src-icon-info: var(--src-color-accent-500);
76
- --src-icon-info-hover: var(--src-color-accent-600);
76
+ --src-icon-info: var(--src-color-primary-500);
77
+ --src-icon-info-hover: var(--src-color-primary-600);
77
78
  --src-icon-success: var(--src-color-green-600);
78
79
  --src-icon-success-hover: var(--src-color-green-700);
79
80
  --src-icon-error: var(--src-color-red-500);
80
81
  --src-icon-error-hover: var(--src-color-red-600);
81
- --src-icon-warning: var(--src-color-orange-600);
82
- --src-icon-warning-hover: var(--src-color-orange-700);
82
+ --src-icon-warning: var(--src-color-tertiary-600);
83
+ --src-icon-warning-hover: var(--src-color-tertiary-700);
83
84
  --src-icon-attention: var(--src-color-yellow-800);
84
85
  --src-icon-attention-hover: var(--src-color-yellow-900);
85
86
  --src-graphics-positive: var(--src-color-green-500);
86
87
  --src-graphics-negative: var(--src-color-red-500);
87
- --src-graphics-accent: var(--src-color-accent-500);
88
+ --src-graphics-accent: var(--src-color-primary-500);
88
89
  --src-graphics-dark-grey: var(--src-color-grey-500);
89
90
  --src-graphics-orange: #f5a80fff;
90
91
  --src-graphics-yellow: #f0e442ff;
91
92
  --src-graphics-turquoise: #00ced1ff;
92
93
  --src-graphics-brown: #8b4513ff;
93
94
  --src-graphics-black: var(--src-color-grey-700);
94
- --src-text-body-accent: var(--src-color-accent-600);
95
+ --src-text-body-accent: var(--src-color-primary-600);
95
96
  --src-text-body-success: var(--src-color-green-600);
96
97
  --src-text-body-destruct: var(--src-color-red-600);
97
98
  --src-text-ui-primary-main: var(--src-light);
@@ -113,8 +114,8 @@
113
114
  --src-shadow-success-hover: var(--src-color-alpha-success-200);
114
115
  --src-shadow-error: var(--src-color-alpha-destruct-100);
115
116
  --src-shadow-error-hover: var(--src-color-alpha-destruct-200);
116
- --src-text-ui-accent-main: var(--src-color-accent-600);
117
- --src-text-ui-accent-hover: var(--src-color-accent-700);
117
+ --src-text-ui-accent-main: var(--src-color-primary-600);
118
+ --src-text-ui-accent-hover: var(--src-color-primary-700);
118
119
  --src-text-ui-success-main: var(--src-color-green-600);
119
120
  --src-text-ui-success-hover: var(--src-color-green-700);
120
121
  --src-text-ui-distruct-main: var(--src-color-red-500);
@@ -122,27 +123,27 @@
122
123
  --src-surface-container-main: var(--src-light);
123
124
  --src-surface-container-on-top: var(--src-color-alpha-default-10);
124
125
  --src-surface-container-secondary: var(--src-color-grey-50);
125
- --src-surface-container-info: var(--src-color-accent-50);
126
+ --src-surface-container-info: var(--src-color-primary-50);
126
127
  --src-surface-container-success: var(--src-color-green-50);
127
128
  --src-surface-container-error: var(--src-color-red-50);
128
129
  --src-surface-toast-basic: var(--src-color-alpha-default-50);
129
- --src-surface-toast-info: var(--src-color-accent-600);
130
+ --src-surface-toast-info: var(--src-color-primary-600);
130
131
  --src-surface-toast-success: var(--src-color-green-600);
131
132
  --src-surface-toast-error: var(--src-color-red-500);
132
133
  --src-border-infoPrompt-basic: var(--src-color-grey-300);
133
134
  --src-border-infoPrompt-light: var(--src-color-alpha-default-50);
134
- --src-border-infoPrompt-info: var(--src-color-accent-200);
135
+ --src-border-infoPrompt-info: var(--src-color-primary-200);
135
136
  --src-border-infoPrompt-success: var(--src-color-green-200);
136
137
  --src-border-infoPrompt-error: var(--src-color-red-200);
137
138
  --src-gradient-light-start: var(--src-color-alpha-test-100);
138
139
  --src-gradient-light-end: var(--src-color-alpha-default-10);
139
140
  --src-gradient-accent-light: var(--src-color-alpha-accent-10);
140
141
  --src-gradient-accent-hard: var(--src-color-alpha-accent-50);
141
- --src-gradient-success: var(--src-color-alpha-success-50);
142
- --src-gradient-success-hover: var(--src-color-alpha-success-200);
143
- --src-gradient-error: var(--src-color-alpha-destruct-100);
144
- --src-gradient-error-hover: var(--src-color-alpha-destruct-200);
145
- --src-tech-sticker: var(--src-color-orange-100);
142
+ --src-gradient-success: var(--color-alpha-success-50);
143
+ --src-gradient-success-hover: var(--color-alpha-success-200);
144
+ --src-gradient-error: var(--color-alpha-destruct-100);
145
+ --src-gradient-error-hover: var(--color-alpha-destruct-200);
146
+ --src-tech-sticker: var(--src-color-tertiary-100);
146
147
  --wireframe-main: var(--src-color-neutral-600);
147
148
  --wireframe-secondary: var(--src-color-neutral-500);
148
149
  --wireframe-light: var(--src-color-neutral-300);
@@ -150,19 +151,19 @@
150
151
  --wireframe-surface-secondary: var(--src-color-alpha-default-50);
151
152
  --wireframe-border: var(--src-color-alpha-default-200);
152
153
  --wireframe-invert: var(--src-light);
153
- --src-tech-description: var(--src-color-orange-900);
154
+ --src-tech-description: var(--src-color-tertiary-900);
154
155
  --src-light: #ffffffff;
155
156
  --src-dark: #000000ff;
156
157
  --src-ui-status-basic-neutral: var(--src-color-grey-500);
157
158
  --src-ui-status-basic-neutral-hover: var(--src-color-grey-600);
158
159
  --src-ui-status-basic-critical: var(--src-color-red-500);
159
160
  --src-ui-status-basic-critical-hover: var(--src-color-red-600);
160
- --src-ui-status-basic-info: var(--src-color-accent-500);
161
- --src-ui-status-basic-info-hover: var(--src-color-accent-600);
161
+ --src-ui-status-basic-info: var(--src-color-primary-500);
162
+ --src-ui-status-basic-info-hover: var(--src-color-primary-600);
162
163
  --src-ui-status-basic-success: var(--src-color-green-500);
163
164
  --src-ui-status-basic-success-hover: var(--src-color-green-500);
164
- --src-ui-status-basic-warning: var(--src-color-orange-500);
165
- --src-ui-status-basic-warning-hover: var(--src-color-orange-600);
165
+ --src-ui-status-basic-warning: var(--src-color-tertiary-500);
166
+ --src-ui-status-basic-warning-hover: var(--src-color-tertiary-600);
166
167
  --src-ui-status-basic-attention: var(--src-color-yellow-500);
167
168
  --src-ui-status-basic-attention-hover: var(--src-color-yellow-600);
168
169
  --src-ui-status-light-neutral: var(--src-color-alpha-default-100);
@@ -177,8 +178,8 @@
177
178
  --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-300);
178
179
  --src-ui-status-light-attention: var(--src-color-alpha-attention-200);
179
180
  --src-ui-status-light-attention-hover: var(--src-color-alpha-attention-300);
180
- --src-text-ui-warning-main: var(--src-color-orange-600);
181
- --src-text-ui-warning-hover: var(--src-color-orange-700);
181
+ --src-text-ui-warning-main: var(--src-color-tertiary-600);
182
+ --src-text-ui-warning-hover: var(--src-color-tertiary-700);
182
183
  --src-text-ui-attention-main: var(--src-color-yellow-800);
183
184
  --src-text-ui-attention-hover: var(--src-color-yellow-900);
184
185
  }
package/styles/variables/layout/_lg.scss CHANGED
@@ -42,10 +42,10 @@
42
42
  --src-layout-radius-rounded-none: 0px;
43
43
  --src-layout-border-border: 2px;
44
44
  --src-layout-table-height: var(--src-space-20);
45
- --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
45
+ --src-layout-radius-const-rounded-sm: var(--space-1, 5);
46
46
  --src-layout-radius-const-rounded: var(--src-space-2);
47
47
  --src-layout-radius-const-rounded-md: var(--src-space-3);
48
- --src-layout-radius-const-rounded-lg: var(--src-space-4);
48
+ --src-layout-radius-const-rounded-lg: var(--space-4);
49
49
  --src-layout-radius-const-rounded-xl: var(--src-space-6);
50
50
  --src-layout-radius-const-rounded-2xl: var(--src-space-8);
51
51
  --src-layout-radius-rounded-ui-full: 9999px;
@@ -58,29 +58,26 @@
58
58
  --screen-width: 1024px;
59
59
  --card-width: 420px;
60
60
  --preview-width: 216px;
61
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-Medium);
63
61
  --src-typography-var-p-sm-fontSize: var(--src-font-size-base);
62
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
63
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
64
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-lg);
65
- --src-typography-var-p-md-weight: var(--src-font-weight-Medium);
66
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-lg);
65
+ --src-typography-var-p-md-weight: var(--src-font-weight-medium);
66
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-lg);
67
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
68
- --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
69
- --src-typography-var-h-sm-lineHeight: var(--font-line-height-xl);
68
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
69
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-xl);
70
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
71
- --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
72
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-2xl);
71
+ --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
72
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-2xl);
73
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
74
- --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
75
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
76
- --src-typography-var-h-xl-fontSize: 56px;
77
- --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
78
- --src-typography-var-h-xl-lineHeight: 56px;
74
+ --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
75
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
76
+ --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
78
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-4xl);
79
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
80
- --src-typography-var-p-lg-weight: var(--src-font-weight-Medium);
81
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-2xl);
82
- // --price: String value;
83
- // --price-data: String value;
84
- --src-layout-table-height-2: var(--src-space-20);
80
+ --src-typography-var-p-lg-weight: var(--src-font-weight-medium);
81
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-2xl);
85
82
  }
86
83
  }
package/styles/variables/layout/_md.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
46
46
  --src-layout-radius-const-rounded: var(--src-space-2);
47
47
  --src-layout-radius-const-rounded-md: var(--src-space-3);
48
- --src-layout-radius-const-rounded-lg: var(--src-space-4);
48
+ --src-layout-radius-const-rounded-lg: var(--space-4);
49
49
  --src-layout-radius-const-rounded-xl: var(--src-space-6);
50
50
  --src-layout-radius-const-rounded-2xl: var(--src-space-8);
51
51
  --src-layout-radius-rounded-ui-full: 9999px;
@@ -58,29 +58,26 @@
58
58
  --screen-width: 768px;
59
59
  --card-width: 320px;
60
60
  --preview-width: 216px;
61
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
63
61
  --src-typography-var-p-sm-fontSize: var(--src-font-size-sm);
62
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
63
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-sm);
64
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-base);
65
- --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
66
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-base);
65
+ --src-typography-var-p-md-weight: var(--src-font-weight-regular);
66
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-base);
67
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-md);
68
- --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
69
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-md);
68
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
69
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-md);
70
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-lg);
71
- --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
72
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-lg);
71
+ --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
72
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-lg);
73
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
74
- --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
75
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-xl);
76
- --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
77
- --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
78
- --src-typography-var-h-xl-lineHeight: 48px;
74
+ --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
75
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-xl);
76
+ --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
78
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-3xl);
79
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-lg);
80
- --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
81
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-lg);
82
- // --price: String value;
83
- // --price-data: String value;
84
- --src-layout-table-height-2: var(--src-space-14);
80
+ --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
81
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-lg);
85
82
  }
86
83
  }
package/styles/variables/layout/_sm.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  --src-layout-gap-var-xl: var(--src-space-6);
29
29
  --src-layout-height-const-sm: var(--src-space-7);
30
30
  --src-layout-height-const-md: var(--src-space-8);
31
- --src-layout-height-const-lg: var(--space-9);
31
+ --src-layout-height-const-lg: var(--src-space-9);
32
32
  --src-layout-height-const-h-xl: var(--src-space-10);
33
33
  --src-layout-height-const-h-2xl: var(--src-space-16);
34
34
  --src-layout-height-var-xs: var(--src-space-6);
@@ -58,29 +58,26 @@
58
58
  --screen-width: 640px;
59
59
  --card-width: 216px;
60
60
  --preview-width: 216px;
61
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xs);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
63
61
  --src-typography-var-p-sm-fontSize: var(--src-font-size-xs);
62
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
63
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-xs);
64
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-sm);
65
- --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
66
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-sm);
65
+ --src-typography-var-p-md-weight: var(--src-font-weight-regular);
66
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-sm);
67
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-base);
68
- --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
69
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-base);
68
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
69
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-base);
70
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-md);
71
- --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
72
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-md);
73
- --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
74
- --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
75
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-lg);
76
- --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
77
- --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
78
- --src-typography-var-h-xl-lineHeight: var(--src-font-line-height-3xl);
71
+ --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
72
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-md);
73
+ --src-typography-var-h-lg-fontSize: var(--src-font-size-lg);
74
+ --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
75
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-lg);
76
+ --src-typography-var-h-xl-fontSize: var(--src-font-size-2xl);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
78
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-2xl);
79
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-md);
80
- --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
81
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-md);
82
- // --price: String value;
83
- // --price-data: String value;
84
- --src-layout-table-height-2: var(--src-space-11);
80
+ --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
81
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-md);
85
82
  }
86
83
  }
package/styles/variables/layout/_xl.scss CHANGED
@@ -42,10 +42,10 @@
42
42
  --src-layout-radius-rounded-none: 0px;
43
43
  --src-layout-border-border: 2px;
44
44
  --src-layout-table-height: var(--src-space-24);
45
- --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
45
+ --src-layout-radius-const-rounded-sm: var(--space-1, 5);
46
46
  --src-layout-radius-const-rounded: var(--src-space-2);
47
47
  --src-layout-radius-const-rounded-md: var(--src-space-3);
48
- --src-layout-radius-const-rounded-lg: var(--src-space-4);
48
+ --src-layout-radius-const-rounded-lg: var(--space-4);
49
49
  --src-layout-radius-const-rounded-xl: var(--src-space-6);
50
50
  --src-layout-radius-const-rounded-2xl: var(--src-space-8);
51
51
  --src-layout-radius-rounded-ui-full: 9999px;
@@ -53,34 +53,31 @@
53
53
  --src-graphs-label: var(--src-space-2);
54
54
  --src-graphs-label-var: var(--src-space-3-5);
55
55
  --src-graphs-height-label-var: var(--src-space-10);
56
- --src-graphs-height-label-const: var(--src-spaces-20);
56
+ --src-graphs-height-label-const: var(--src-space-5);
57
57
  --src-graphs-height-s: var(--src-space-10);
58
58
  --screen-width: 1280px;
59
59
  --card-width: 480px;
60
60
  --preview-width: 216px;
61
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xl);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-Semi-Bold);
63
61
  --src-typography-var-p-sm-fontSize: var(--src-font-size-lg);
62
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
63
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-xl);
64
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-xl);
65
- --src-typography-var-p-md-weight: var(--src-font-weight-Semi-Bold);
66
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-xl);
65
+ --src-typography-var-p-md-weight: var(--src-font-weight-semiBold);
66
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-xl);
67
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-2xl);
68
- --src-typography-var-h-sm-weight: var(--src-font-weight-Bold);
69
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-2xl);
68
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
69
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-2xl);
70
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-3xl);
71
- --src-typography-var-h-md-weight: var(--src-font-weight-Bold);
72
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-3xl);
71
+ --src-typography-var-h-md-weight: var(--src-font-weight-bold);
72
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-3xl);
73
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-4xl);
74
- --src-typography-var-h-lg-weight: var(--src-font-weight-Bold);
75
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
74
+ --src-typography-var-h-lg-weight: var(--src-font-weight-bold);
75
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
76
76
  --src-typography-var-h-xl-fontSize: 64px;
77
- --src-typography-var-h-xl-weight: var(--src-font-weight-Bold);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-bold);
78
78
  --src-typography-var-h-xl-lineHeight: 64px;
79
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-3xl);
80
- --src-typography-var-p-lg-weight: var(--src-font-weight-Semi-Bold);
81
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-3xl);
82
- // --price: String value;
83
- // --price-data: String value;
84
- --src-layout-table-height-2: var(--src-space-24);
80
+ --src-typography-var-p-lg-weight: var(--src-font-weight-semiBold);
81
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-3xl);
85
82
  }
86
83
  }
package/styles/variables/primitives/primitives.scss CHANGED
@@ -36,17 +36,17 @@
36
36
  --src-space-80: 320px;
37
37
  --src-space-96: 384px;
38
38
  --src-color-neutral-50: #fafafaff;
39
- --src-color-accent-50: #f1f6ffff;
40
- --src-color-accent-100: #d6e9ffff;
41
- --src-color-accent-200: #add4ffff;
42
- --src-color-accent-300: #7dbbffff;
43
- --src-color-accent-400: #4ea4ffff;
44
- --src-color-accent-500: #017bffff;
45
- --src-color-accent-600: #016fe6ff;
46
- --src-color-accent-700: #0162ccff;
47
- --src-color-accent-800: #014ca3ff;
48
- --src-color-accent-900: #003a7aff;
49
- --src-color-accent-950: #00244dff;
39
+ --src-color-primary-50: #f1f6ffff;
40
+ --src-color-primary-100: #d6e9ffff;
41
+ --src-color-primary-200: #add4ffff;
42
+ --src-color-primary-300: #7dbbffff;
43
+ --src-color-primary-400: #4ea4ffff;
44
+ --src-color-primary-500: #017bffff;
45
+ --src-color-primary-600: #016fe6ff;
46
+ --src-color-primary-700: #0162ccff;
47
+ --src-color-primary-800: #014ca3ff;
48
+ --src-color-primary-900: #003a7aff;
49
+ --src-color-primary-950: #00244dff;
50
50
  --src-color-neutral-100: #f5f5f5ff;
51
51
  --src-color-neutral-200: #e5e5e5ff;
52
52
  --src-color-neutral-300: #d4d4d4ff;
@@ -57,6 +57,28 @@
57
57
  --src-color-neutral-800: #262626ff;
58
58
  --src-color-neutral-900: #171717ff;
59
59
  --src-color-neutral-950: #0a0a0aff;
60
+ --src-color-secondary-50: #f4fbf7ff;
61
+ --src-color-secondary-100: #e8f8eeff;
62
+ --src-color-secondary-200: #cdf0dbff;
63
+ --src-color-secondary-300: #ace9c6ff;
64
+ --src-color-secondary-400: #86e1afff;
65
+ --src-color-secondary-500: #28d88eff;
66
+ --src-color-secondary-600: #1ca76dff;
67
+ --src-color-secondary-700: #148556ff;
68
+ --src-color-secondary-800: #0f6c45ff;
69
+ --src-color-secondary-900: #0a5737ff;
70
+ --src-color-secondary-950: #043922ff;
71
+ --src-color-tertiary-50: #eeece8ff;
72
+ --src-color-tertiary-100: #f5e9c9ff;
73
+ --src-color-tertiary-200: #f1d99aff;
74
+ --src-color-tertiary-300: #efc96aff;
75
+ --src-color-tertiary-400: #efa81bff;
76
+ --src-color-tertiary-500: #d18f17ff;
77
+ --src-color-tertiary-600: #b07212ff;
78
+ --src-color-tertiary-700: #8f5a0eff;
79
+ --src-color-tertiary-800: #6f450aff;
80
+ --src-color-tertiary-900: #4f3006ff;
81
+ --src-color-tertiary-950: #2e1a02ff;
60
82
  --src-color-grey-50: #f9fafbff;
61
83
  --src-color-grey-100: #f3f4f6ff;
62
84
  --src-color-grey-200: #e5e7ebff;
@@ -101,17 +123,6 @@
101
123
  --src-color-blue-800: #0e356cff;
102
124
  --src-color-blue-900: #10294cff;
103
125
  --src-color-blue-950: #051123ff;
104
- --src-color-orange-50: #fffbebff;
105
- --src-color-orange-100: #fef3c7ff;
106
- --src-color-orange-200: #fde68aff;
107
- --src-color-orange-300: #fcd34dff;
108
- --src-color-orange-400: #fbbf24ff;
109
- --src-color-orange-500: #f59b18ff;
110
- --src-color-orange-600: #d97706ff;
111
- --src-color-orange-700: #b45309ff;
112
- --src-color-orange-800: #92400eff;
113
- --src-color-orange-900: #78350fff;
114
- --src-color-orange-950: #451a03ff;
115
126
  --src-color-yellow-50: #fefdf0ff;
116
127
  --src-color-yellow-100: #fdfbe5ff;
117
128
  --src-color-yellow-200: #fbf7caff;