@3dsource/source-ui-native 2.0.3 → 2.2.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 (24) hide show
  1. package/fesm2022/3dsource-source-ui-native.mjs +131 -55
  2. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  3. package/index.d.ts +67 -31
  4. package/package.json +1 -1
  5. package/styles/elements/_src-icon-button.scss +96 -0
  6. package/styles/elements/_src-list.scss +17 -8
  7. package/styles/elements/_src-modal.scss +83 -13
  8. package/styles/mixins/button.scss +2 -0
  9. package/styles/source-ui-native.css +476 -239
  10. package/styles/source-ui-native.css.map +1 -1
  11. package/styles/source-ui-native.min.css +1 -1
  12. package/styles/variables/color/dark.scss +58 -17
  13. package/styles/variables/color/light.scss +59 -18
  14. package/styles/variables/index.scss +1 -3
  15. package/styles/variables/layout/_lg.scss +15 -14
  16. package/styles/variables/layout/_md.scss +14 -13
  17. package/styles/variables/layout/_sm.scss +16 -15
  18. package/styles/variables/layout/_xl.scss +15 -14
  19. package/styles/variables/primitives/primitives.scss +135 -109
  20. package/styles/variables/typeface/web.scss +4 -4
  21. package/styles/variables/ui/_lg.scss +8 -6
  22. package/styles/variables/ui/_md.scss +10 -7
  23. package/styles/variables/ui/_sm.scss +8 -6
  24. package/styles/variables/ui/_xl.scss +10 -8
package/styles/variables/color/dark.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  --src-surface-background: var(--src-color-grey-900);
4
4
  --src-ui-accent-default: var(--src-color-accent-400);
5
5
  --src-ui-accent-default-hover: var(--src-color-accent-500);
6
- --src-ui-accent-disabled: var(--src-color-alpha-white-50);
6
+ --src-ui-accent-disabled: var(--src-color-alpha-white-100);
7
7
  --src-ui-accent-success: var(--src-color-green-600);
8
8
  --src-ui-accent-success-hover: var(--src-color-green-500);
9
9
  --src-ui-accent-error: var(--src-color-red-600);
@@ -20,7 +20,7 @@
20
20
  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
21
21
  --src-ui-secondary-error: var(--src-color-alpha-destruct-200);
22
22
  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
23
- --src-ui-secondary-progress: var(--color-alpha-progress-10);
23
+ --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
24
24
  --src-ui-input-default: var(--src-color-alpha-white-10);
25
25
  --src-ui-input-secondary: var(--src-color-alpha-default-200);
26
26
  --src-ui-input-hover: var(--src-color-alpha-default-200);
@@ -30,7 +30,11 @@
30
30
  --src-ui-input-error: var(--src-color-alpha-white-10);
31
31
  --src-ui-input-error-hover: var(--src-color-alpha-destruct-50);
32
32
  --src-surface-curtain: var(--src-color-alpha-default-600);
33
+ --src-surface-fade: var(--src-color-alpha-default-200);
33
34
  --src-surface-bg: var(--src-color-alpha-white-50);
35
+ --src-ui-light: var(--src-dark);
36
+ --src-border-control-default: var(--src-color-neutral-300);
37
+ --src-border-control-hover: var(--src-color-neutral-100);
34
38
  --src-border-button-basic: var(--src-color-grey-600);
35
39
  --src-border-button-basic-hover: var(--src-color-grey-500);
36
40
  --src-border-button-info: var(--src-color-accent-500);
@@ -74,20 +78,22 @@
74
78
  --src-icon-success-hover: var(--src-color-green-400);
75
79
  --src-icon-error: var(--src-color-red-400);
76
80
  --src-icon-error-hover: var(--src-color-red-300);
77
- --src-icon-progress: var(--src-color-orange-400);
78
- --src-graphics-positive: var(--color-green-400);
81
+ --src-icon-warning: var(--src-color-orange-400);
82
+ --src-icon-warning-hover: var(--src-color-orange-300);
83
+ --src-icon-attention: var(--src-color-yellow-400);
84
+ --src-icon-attention-hover: var(--src-color-yellow-600);
85
+ --src-graphics-positive: var(--src-color-green-400);
79
86
  --src-graphics-negative: var(--src-color-red-400);
80
87
  --src-graphics-accent: var(--src-color-accent-500);
81
88
  --src-graphics-dark-grey: var(--src-color-grey-400);
82
- --src-graphics-orange: rgba(255, 185, 45, 1);
83
- --src-graphics-yellow: rgba(240, 228, 66, 1);
84
- --src-graphics-turquoise: rgba(0, 206, 209, 1);
85
- --src-graphics-brown: rgba(139, 69, 19, 1);
89
+ --src-graphics-orange: #ffb92dff;
90
+ --src-graphics-yellow: #f0e442ff;
91
+ --src-graphics-turquoise: #00ced1ff;
92
+ --src-graphics-brown: #8b4513ff;
86
93
  --src-graphics-black: var(--src-color-grey-200);
87
94
  --src-text-body-accent: var(--src-color-accent-400);
88
95
  --src-text-body-success: var(--src-color-green-400);
89
96
  --src-text-body-destruct: var(--src-color-red-400);
90
- --src-text-body-progress: var(--src-color-orange-400);
91
97
  --src-text-ui-primary-main: var(--src-light);
92
98
  --src-text-ui-primary-secondary: var(--src-color-grey-200);
93
99
  --src-text-ui-primary-disabled: var(--src-color-grey-400);
@@ -115,8 +121,8 @@
115
121
  --src-text-ui-distruct-hover: var(--src-color-red-300);
116
122
  --src-surface-container-main: var(--src-color-grey-800);
117
123
  --src-surface-container-on-top: var(--src-color-alpha-white-10);
118
- --src-surface-container-secondary: var(--color-basic-black);
119
- --src-surface-container-info: var(--color-blue-950);
124
+ --src-surface-container-secondary: var(--src-color-basic-black);
125
+ --src-surface-container-info: var(--src-color-blue-950);
120
126
  --src-surface-container-success: var(--src-color-green-950);
121
127
  --src-surface-container-error: var(--src-color-red-950);
122
128
  --src-surface-toast-basic: var(--src-color-alpha-default-200);
@@ -132,12 +138,47 @@
132
138
  --src-gradient-light-end: var(--src-color-alpha-dark-100);
133
139
  --src-gradient-accent-light: var(--src-color-alpha-accent-300);
134
140
  --src-gradient-accent-hard: var(--src-color-alpha-accent-400);
135
- --src-gradient-success: var(--color-alpha-success-200);
136
- --src-gradient-success-hover: var(--color-alpha-success-50);
137
- --src-gradient-error: var(--color-alpha-destruct-200);
138
- --src-gradient-error-hover: var(--color-alpha-destruct-100);
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);
139
145
  --src-tech-sticker: var(--src-color-orange-800);
146
+ --wireframe-main: var(--src-color-neutral-300);
147
+ --wireframe-secondary: var(--src-color-neutral-400);
148
+ --wireframe-light: var(--src-color-neutral-500);
149
+ --wireframe-surface-primary: var(--src-dark);
150
+ --wireframe-surface-secondary: var(--src-color-alpha-white-50);
151
+ --wireframe-border: var(--src-color-alpha-white-100);
152
+ --wireframe-invert: var(--src-dark);
140
153
  --src-tech-description: var(--src-color-orange-50);
141
- --src-light: rgba(255, 255, 255, 1);
142
- --src-dark: rgba(255, 255, 255, 1);
154
+ --src-light: #ffffffff;
155
+ --src-dark: #ffffffff;
156
+ --src-ui-status-basic-neutral: var(--src-color-alpha-white-100);
157
+ --src-ui-status-basic-neutral-hover: var(--src-color-alpha-white-600);
158
+ --src-ui-status-basic-critical: var(--src-color-alpha-success-100);
159
+ --src-ui-status-basic-critical-hover: var(--src-color-alpha-success-50);
160
+ --src-ui-status-basic-info: var(--src-color-alpha-accent-300);
161
+ --src-ui-status-basic-info-hover: var(--src-color-alpha-accent-200);
162
+ --src-ui-status-basic-success: var(--src-color-alpha-success-200);
163
+ --src-ui-status-basic-success-hover: var(--src-color-alpha-success-100);
164
+ --src-ui-status-basic-warning: var(--src-color-alpha-warning-300);
165
+ --src-ui-status-basic-warning-hover: var(--src-color-alpha-warning-200);
166
+ --src-ui-status-basic-attention: var(--src-color-alpha-attention-300);
167
+ --src-ui-status-basic-attention-hover: var(--src-color-alpha-attention-200);
168
+ --src-ui-status-light-neutral: var(--src-color-alpha-white-100);
169
+ --src-ui-status-light-neutral-hover: var(--src-color-alpha-white-600);
170
+ --src-ui-status-light-critical: var(--src-color-alpha-success-100);
171
+ --src-ui-status-light-critical-hover: var(--src-color-alpha-success-50);
172
+ --src-ui-status-light-info: var(--src-color-alpha-accent-300);
173
+ --src-ui-status-light-info-hover: var(--src-color-alpha-accent-200);
174
+ --src-ui-status-light-success: var(--src-color-alpha-success-200);
175
+ --src-ui-status-light-success-hover: var(--src-color-alpha-success-100);
176
+ --src-ui-status-light-warning: var(--src-color-alpha-warning-300);
177
+ --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-200);
178
+ --src-ui-status-light-attention: var(--src-color-alpha-attention-300);
179
+ --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);
143
184
  }
package/styles/variables/color/light.scss CHANGED
@@ -3,15 +3,15 @@
3
3
  --src-surface-background: var(--src-color-grey-50);
4
4
  --src-ui-accent-default: var(--src-color-accent-500);
5
5
  --src-ui-accent-default-hover: var(--src-color-accent-600);
6
- --src-ui-accent-disabled: var(--src-color-alpha-test-100);
6
+ --src-ui-accent-disabled: var(--src-color-alpha-test-200);
7
7
  --src-ui-accent-success: var(--src-color-green-500);
8
8
  --src-ui-accent-success-hover: var(--src-color-green-600);
9
9
  --src-ui-accent-error: var(--src-color-red-500);
10
10
  --src-ui-accent-error-hover: var(--src-color-red-600);
11
11
  --src-ui-accent-active: var(--src-color-grey-700);
12
12
  --src-ui-accent-active-hover: var(--src-color-grey-900);
13
- --src-ui-secondary-default: var(--src-color-alpha-default-50);
14
- --src-ui-secondary-default-hover: var(--src-color-alpha-default-10);
13
+ --src-ui-secondary-default: var(--src-color-alpha-default-10);
14
+ --src-ui-secondary-default-hover: var(--src-color-alpha-default-50);
15
15
  --src-ui-secondary-disabled: var(--src-color-alpha-white-10);
16
16
  --src-ui-secondary-active: var(--src-color-alpha-accent-50);
17
17
  --src-ui-secondary-info: var(--src-color-alpha-accent-10);
@@ -20,7 +20,7 @@
20
20
  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
21
21
  --src-ui-secondary-error: var(--src-color-alpha-destruct-10);
22
22
  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
23
- --src-ui-secondary-progress: var(--color-alpha-progress-10);
23
+ --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
24
24
  --src-ui-input-default: var(--src-color-alpha-white-10);
25
25
  --src-ui-input-secondary: var(--src-color-alpha-default-10);
26
26
  --src-ui-input-hover: var(--src-color-alpha-accent-10);
@@ -30,7 +30,11 @@
30
30
  --src-ui-input-error: var(--src-color-alpha-white-10);
31
31
  --src-ui-input-error-hover: var(--src-color-alpha-destruct-10);
32
32
  --src-surface-curtain: var(--src-color-alpha-default-600);
33
+ --src-surface-fade: var(--src-color-alpha-white-600);
33
34
  --src-surface-bg: var(--src-color-alpha-default-200);
35
+ --src-ui-light: var(--src-light);
36
+ --src-border-control-default: var(--src-color-neutral-300);
37
+ --src-border-control-hover: var(--src-color-neutral-500);
34
38
  --src-border-button-basic: var(--src-color-grey-200);
35
39
  --src-border-button-basic-hover: var(--src-color-grey-400);
36
40
  --src-border-button-info: var(--src-color-accent-300);
@@ -74,20 +78,22 @@
74
78
  --src-icon-success-hover: var(--src-color-green-700);
75
79
  --src-icon-error: var(--src-color-red-500);
76
80
  --src-icon-error-hover: var(--src-color-red-600);
77
- --src-icon-progress: var(--src-color-orange-700);
81
+ --src-icon-warning: var(--src-color-orange-600);
82
+ --src-icon-warning-hover: var(--src-color-orange-700);
83
+ --src-icon-attention: var(--src-color-yellow-800);
84
+ --src-icon-attention-hover: var(--src-color-yellow-900);
78
85
  --src-graphics-positive: var(--src-color-green-500);
79
86
  --src-graphics-negative: var(--src-color-red-500);
80
87
  --src-graphics-accent: var(--src-color-accent-500);
81
88
  --src-graphics-dark-grey: var(--src-color-grey-500);
82
- --src-graphics-orange: rgba(245, 168, 15, 1);
83
- --src-graphics-yellow: rgba(240, 228, 66, 1);
84
- --src-graphics-turquoise: rgba(0, 206, 209, 1);
85
- --src-graphics-brown: rgba(139, 69, 19, 1);
89
+ --src-graphics-orange: #f5a80fff;
90
+ --src-graphics-yellow: #f0e442ff;
91
+ --src-graphics-turquoise: #00ced1ff;
92
+ --src-graphics-brown: #8b4513ff;
86
93
  --src-graphics-black: var(--src-color-grey-700);
87
94
  --src-text-body-accent: var(--src-color-accent-600);
88
95
  --src-text-body-success: var(--src-color-green-600);
89
96
  --src-text-body-destruct: var(--src-color-red-600);
90
- --src-text-body-progress: var(--src-color-orange-700);
91
97
  --src-text-ui-primary-main: var(--src-light);
92
98
  --src-text-ui-primary-secondary: var(--src-color-grey-200);
93
99
  --src-text-ui-primary-disabled: var(--src-color-grey-400);
@@ -111,8 +117,8 @@
111
117
  --src-text-ui-accent-hover: var(--src-color-accent-700);
112
118
  --src-text-ui-success-main: var(--src-color-green-600);
113
119
  --src-text-ui-success-hover: var(--src-color-green-700);
114
- --src-text-ui-distruct-main: var(--src-color-red-600);
115
- --src-text-ui-distruct-hover: var(--src-color-red-700);
120
+ --src-text-ui-distruct-main: var(--src-color-red-500);
121
+ --src-text-ui-distruct-hover: var(--src-color-red-600);
116
122
  --src-surface-container-main: var(--src-light);
117
123
  --src-surface-container-on-top: var(--src-color-alpha-default-10);
118
124
  --src-surface-container-secondary: var(--src-color-grey-50);
@@ -132,12 +138,47 @@
132
138
  --src-gradient-light-end: var(--src-color-alpha-default-10);
133
139
  --src-gradient-accent-light: var(--src-color-alpha-accent-10);
134
140
  --src-gradient-accent-hard: var(--src-color-alpha-accent-50);
135
- --src-gradient-success: var(--color-alpha-success-50);
136
- --src-gradient-success-hover: var(--color-alpha-success-200);
137
- --src-gradient-error: var(--color-alpha-destruct-100);
138
- --src-gradient-error-hover: var(--color-alpha-destruct-200);
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);
139
145
  --src-tech-sticker: var(--src-color-orange-100);
146
+ --wireframe-main: var(--src-color-neutral-600);
147
+ --wireframe-secondary: var(--src-color-neutral-500);
148
+ --wireframe-light: var(--src-color-neutral-300);
149
+ --wireframe-surface-primary: var(--src-light);
150
+ --wireframe-surface-secondary: var(--src-color-alpha-default-50);
151
+ --wireframe-border: var(--src-color-alpha-default-200);
152
+ --wireframe-invert: var(--src-light);
140
153
  --src-tech-description: var(--src-color-orange-900);
141
- --src-light: rgba(255, 255, 255, 1);
142
- --src-dark: rgba(0, 0, 0, 1);
154
+ --src-light: #ffffffff;
155
+ --src-dark: #000000ff;
156
+ --src-ui-status-basic-neutral: var(--src-color-grey-500);
157
+ --src-ui-status-basic-neutral-hover: var(--src-color-grey-600);
158
+ --src-ui-status-basic-critical: var(--src-color-red-500);
159
+ --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);
162
+ --src-ui-status-basic-success: var(--src-color-green-500);
163
+ --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);
166
+ --src-ui-status-basic-attention: var(--src-color-yellow-500);
167
+ --src-ui-status-basic-attention-hover: var(--src-color-yellow-600);
168
+ --src-ui-status-light-neutral: var(--src-color-alpha-default-100);
169
+ --src-ui-status-light-neutral-hover: var(--src-color-alpha-default-200);
170
+ --src-ui-status-light-critical: var(--src-color-alpha-destruct-100);
171
+ --src-ui-status-light-critical-hover: var(--src-color-alpha-destruct-200);
172
+ --src-ui-status-light-info: var(--src-color-alpha-accent-200);
173
+ --src-ui-status-light-info-hover: var(--src-color-alpha-accent-300);
174
+ --src-ui-status-light-success: var(--src-color-alpha-success-100);
175
+ --src-ui-status-light-success-hover: var(--src-color-alpha-success-200);
176
+ --src-ui-status-light-warning: var(--src-color-alpha-warning-200);
177
+ --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-300);
178
+ --src-ui-status-light-attention: var(--src-color-alpha-attention-200);
179
+ --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);
182
+ --src-text-ui-attention-main: var(--src-color-yellow-800);
183
+ --src-text-ui-attention-hover: var(--src-color-yellow-900);
143
184
  }
package/styles/variables/index.scss CHANGED
@@ -12,9 +12,7 @@
12
12
  @use 'layout/lg.scss' as layout-lg;
13
13
  @use 'layout/xl.scss' as layout-xl;
14
14
  @use 'form-aliases.scss' as form-aliases;
15
- :root {
16
- --src-icon-size: var(--src-space-5);
17
- }
15
+
18
16
  // "primitives/primitives",
19
17
  // "color/light",
20
18
  // "color/dark",
package/styles/variables/layout/_lg.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /* layout - lg */
2
2
  :root {
3
- @media (min-width: 1024px) {
3
+ @media (min-width: 1440px) {
4
4
  --src-layout-padding-const-xs: var(--src-space-1);
5
5
  --src-layout-padding-const-sm: var(--src-space-2);
6
6
  --src-layout-padding-const-md: var(--src-space-3);
@@ -57,27 +57,28 @@
57
57
  --src-graphs-height-s: var(--src-space-9);
58
58
  --screen-width: 1024px;
59
59
  --card-width: 420px;
60
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
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);
61
63
  --src-typography-var-p-sm-fontSize: var(--src-font-size-base);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-medium);
63
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-lg);
64
- --src-typography-var-p-md-weight: var(--src-font-weight-medium);
65
- --src-typography-var-p-md-lineHeight: var(--src-font-line-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);
66
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
67
- --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
68
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-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);
69
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
70
- --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
71
- --src-typography-var-h-md-lineHeight: var(--src-font-line-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);
72
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
73
- --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
74
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-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);
75
76
  --src-typography-var-h-xl-fontSize: 56px;
76
- --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
77
78
  --src-typography-var-h-xl-lineHeight: 56px;
78
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
79
- --src-typography-var-p-lg-weight: var(--src-font-weight-medium);
80
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-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);
81
82
  // --price: String value;
82
83
  // --price-data: String value;
83
84
  --src-layout-table-height-2: var(--src-space-20);
package/styles/variables/layout/_md.scss CHANGED
@@ -57,27 +57,28 @@
57
57
  --src-graphs-height-s: var(--src-space-8);
58
58
  --screen-width: 768px;
59
59
  --card-width: 320px;
60
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
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);
61
63
  --src-typography-var-p-sm-fontSize: var(--src-font-size-sm);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
63
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-base);
64
- --src-typography-var-p-md-weight: var(--src-font-weight-regular);
65
- --src-typography-var-p-md-lineHeight: var(--src-font-line-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);
66
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-md);
67
- --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
68
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-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);
69
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-lg);
70
- --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
71
- --src-typography-var-h-md-lineHeight: var(--src-font-line-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);
72
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
73
- --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
74
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-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);
75
76
  --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
76
- --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
77
78
  --src-typography-var-h-xl-lineHeight: 48px;
78
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-lg);
79
- --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
80
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-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);
81
82
  // --price: String value;
82
83
  // --price-data: String value;
83
84
  --src-layout-table-height-2: var(--src-space-14);
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(--src-space-9);
31
+ --src-layout-height-const-lg: var(--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);
@@ -57,27 +57,28 @@
57
57
  --src-graphs-height-s: var(--src-space-7);
58
58
  --screen-width: 640px;
59
59
  --card-width: 216px;
60
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-xs);
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);
61
63
  --src-typography-var-p-sm-fontSize: var(--src-font-size-xs);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
63
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-sm);
64
- --src-typography-var-p-md-weight: var(--src-font-weight-regular);
65
- --src-typography-var-p-md-lineHeight: var(--src-font-line-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);
66
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-base);
67
- --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
68
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-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);
69
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-md);
70
- --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
71
- --src-typography-var-h-md-lineHeight: var(--src-font-line-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);
72
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
73
- --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
74
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-lg);
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);
75
76
  --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
76
- --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
77
- --src-typography-var-h-xl-lineHeight: var(--src-font-line-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);
78
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-md);
79
- --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
80
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-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);
81
82
  // --price: String value;
82
83
  // --price-data: String value;
83
84
  --src-layout-table-height-2: var(--src-space-11);
package/styles/variables/layout/_xl.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /* layout - xl */
2
2
  :root {
3
- @media (min-width: 1280px) {
3
+ @media (min-width: 1920px) {
4
4
  --src-layout-padding-const-xs: var(--src-space-1);
5
5
  --src-layout-padding-const-sm: var(--src-space-2);
6
6
  --src-layout-padding-const-md: var(--src-space-3);
@@ -57,27 +57,28 @@
57
57
  --src-graphs-height-s: var(--src-space-10);
58
58
  --screen-width: 1280px;
59
59
  --card-width: 480px;
60
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-xl);
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);
61
63
  --src-typography-var-p-sm-fontSize: var(--src-font-size-lg);
62
- --src-typography-var-p-sm-weight: var(--src-font-weight-semiBold);
63
64
  --src-typography-var-p-md-fontSize: var(--src-font-size-xl);
64
- --src-typography-var-p-md-weight: var(--src-font-weight-semiBold);
65
- --src-typography-var-p-md-lineHeight: var(--src-font-line-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);
66
67
  --src-typography-var-h-sm-fontSize: var(--src-font-size-2xl);
67
- --src-typography-var-h-sm-weight: var(--src-font-weight-bold);
68
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-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);
69
70
  --src-typography-var-h-md-fontSize: var(--src-font-size-3xl);
70
- --src-typography-var-h-md-weight: var(--src-font-weight-bold);
71
- --src-typography-var-h-md-lineHeight: var(--src-font-line-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);
72
73
  --src-typography-var-h-lg-fontSize: var(--src-font-size-4xl);
73
- --src-typography-var-h-lg-weight: var(--src-font-weight-bold);
74
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
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);
75
76
  --src-typography-var-h-xl-fontSize: 64px;
76
- --src-typography-var-h-xl-weight: var(--src-font-weight-bold);
77
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Bold);
77
78
  --src-typography-var-h-xl-lineHeight: 64px;
78
79
  --src-typography-var-p-lg-fontSize: var(--src-font-size-3xl);
79
- --src-typography-var-p-lg-weight: var(--src-font-weight-semiBold);
80
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-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);
81
82
  // --price: String value;
82
83
  // --price-data: String value;
83
84
  --src-layout-table-height-2: var(--src-space-24);