@3dsource/source-ui-native 2.0.2 → 2.0.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 (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 +3396 -0
  10. package/styles/source-ui-native.css.map +1 -0
  11. package/styles/source-ui-native.min.css +1 -0
  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/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);
package/styles/variables/primitives/primitives.scss CHANGED
@@ -35,113 +35,139 @@
35
35
  --src-space-72: 288px;
36
36
  --src-space-80: 320px;
37
37
  --src-space-96: 384px;
38
- --src-color-neutral-50: rgba(250, 250, 250, 1);
39
- --src-color-accent-50: rgba(241, 246, 255, 1);
40
- --src-color-accent-100: rgba(214, 233, 255, 1);
41
- --src-color-accent-200: rgba(173, 212, 255, 1);
42
- --src-color-accent-300: rgba(125, 187, 255, 1);
43
- --src-color-accent-400: rgba(78, 164, 255, 1);
44
- --src-color-accent-500: rgba(1, 123, 255, 1);
45
- --src-color-accent-600: rgba(1, 111, 230, 1);
46
- --src-color-accent-700: rgba(1, 98, 204, 1);
47
- --src-color-accent-800: rgba(1, 76, 163, 1);
48
- --src-color-accent-900: rgba(0, 58, 122, 1);
49
- --src-color-accent-950: rgba(0, 36, 77, 1);
50
- --src-color-neutral-100: rgba(245, 245, 245, 1);
51
- --src-color-neutral-200: rgba(229, 229, 229, 1);
52
- --src-color-neutral-300: rgba(212, 212, 212, 1);
53
- --src-color-neutral-400: rgba(163, 163, 163, 1);
54
- --src-color-neutral-500: rgba(115, 115, 115, 1);
55
- --src-color-neutral-600: rgba(82, 82, 82, 1);
56
- --src-color-neutral-700: rgba(64, 64, 64, 1);
57
- --src-color-neutral-800: rgba(38, 38, 38, 1);
58
- --src-color-neutral-900: rgba(23, 23, 23, 1);
59
- --src-color-neutral-950: rgba(10, 10, 10, 1);
60
- --src-color-grey-50: rgba(249, 250, 251, 1);
61
- --src-color-grey-100: rgba(243, 244, 246, 1);
62
- --src-color-grey-200: rgba(229, 231, 235, 1);
63
- --src-color-grey-300: rgba(209, 213, 219, 1);
64
- --src-color-grey-400: rgba(156, 163, 175, 1);
65
- --src-color-grey-500: rgba(107, 114, 128, 1);
66
- --src-color-grey-600: rgba(75, 85, 99, 1);
67
- --src-color-grey-700: rgba(55, 65, 81, 1);
68
- --src-color-grey-800: rgba(31, 41, 55, 1);
69
- --src-color-grey-900: rgba(17, 24, 39, 1);
70
- --src-color-grey-950: rgba(3, 7, 18, 1);
71
- --src-color-green-50: rgba(240, 253, 244, 1);
72
- --src-color-green-100: rgba(220, 252, 231, 1);
73
- --src-color-green-200: rgba(187, 247, 208, 1);
74
- --src-color-green-300: rgba(134, 239, 172, 1);
75
- --src-color-green-400: rgba(74, 222, 128, 1);
76
- --src-color-green-500: rgba(34, 197, 94, 1);
77
- --src-color-green-600: rgba(22, 163, 74, 1);
78
- --src-color-green-700: rgba(21, 128, 61, 1);
79
- --src-color-green-800: rgba(22, 101, 52, 1);
80
- --src-color-green-900: rgba(20, 83, 45, 1);
81
- --src-color-green-950: rgba(5, 46, 22, 1);
82
- --src-color-red-50: rgba(254, 243, 241, 1);
83
- --src-color-red-100: rgba(253, 226, 221, 1);
84
- --src-color-red-200: rgba(251, 197, 188, 1);
85
- --src-color-red-300: rgba(247, 148, 130, 1);
86
- --src-color-red-400: rgba(245, 107, 82, 1);
87
- --src-color-red-500: rgba(242, 65, 34, 1);
88
- --src-color-red-600: rgba(197, 40, 12, 1);
89
- --src-color-red-700: rgba(159, 32, 10, 1);
90
- --src-color-red-800: rgba(115, 24, 7, 1);
91
- --src-color-red-900: rgba(67, 14, 4, 1);
92
- --src-color-red-950: rgba(69, 10, 10, 1);
93
- --src-color-blue-50: rgba(240, 245, 253, 1);
94
- --src-color-blue-100: rgba(232, 240, 253, 1);
95
- --src-color-blue-200: rgba(187, 212, 247, 1);
96
- --src-color-blue-300: rgba(147, 186, 241, 1);
97
- --src-color-blue-400: rgba(102, 153, 225, 1);
98
- --src-color-blue-500: rgba(62, 125, 213, 1);
99
- --src-color-blue-600: rgba(36, 99, 188, 1);
100
- --src-color-blue-700: rgba(20, 73, 149, 1);
101
- --src-color-blue-800: rgba(14, 53, 108, 1);
102
- --src-color-blue-900: rgba(16, 41, 76, 1);
103
- --src-color-blue-950: rgba(5, 17, 35, 1);
104
- --src-color-orange-50: rgba(255, 248, 230, 1);
105
- --src-color-orange-100: rgba(254, 239, 197, 1);
106
- --src-color-orange-200: rgba(253, 216, 141, 1);
107
- --src-color-orange-300: rgba(252, 193, 93, 1);
108
- --src-color-orange-400: rgba(248, 170, 53, 1);
109
- --src-color-orange-500: rgba(245, 155, 24, 1);
110
- --src-color-orange-600: rgba(245, 168, 15, 1);
111
- --src-color-orange-700: rgba(217, 143, 12, 1);
112
- --src-color-orange-800: rgba(184, 117, 10, 1);
113
- --src-color-orange-900: rgba(114, 73, 9, 1);
114
- --src-color-orange-950: rgba(67, 41, 3, 1);
115
- --src-color-alpha-default-10: rgba(148, 163, 184, 0.08);
116
- --src-color-alpha-default-50: rgba(148, 163, 184, 0.16);
117
- --src-color-alpha-default-100: rgba(148, 163, 184, 0.24);
118
- --src-color-alpha-default-200: rgba(71, 85, 105, 0.24);
119
- --src-color-alpha-default-600: rgba(71, 85, 105, 0.64);
120
- --src-color-alpha-white-10: rgba(255, 255, 255, 0.04);
121
- --src-color-alpha-white-50: rgba(255, 255, 255, 0.12);
122
- --src-color-alpha-white-100: rgba(255, 255, 255, 0.16);
123
- --src-color-alpha-dark-10: rgba(0, 0, 0, 0.04);
124
- --src-color-alpha-dark-50: rgba(0, 0, 0, 0.08);
125
- --src-color-alpha-dark-100: rgba(0, 0, 0, 0.16);
126
- --src-color-alpha-dark-200: rgba(0, 0, 0, 0.24);
127
- --src-color-alpha-dark-600: rgba(0, 0, 0, 0.64);
128
- --src-color-alpha-test-10: rgba(148, 163, 184, 0.08);
129
- --src-color-alpha-test-50: rgba(148, 163, 184, 0.16);
130
- --src-color-alpha-test-100: rgba(148, 163, 184, 0.24);
131
- --src-color-alpha-test-200: rgba(71, 85, 105, 0.24);
132
- --src-color-alpha-test-600: rgba(71, 85, 105, 0.64);
133
- --src-color-alpha-accent-10: rgba(1, 123, 255, 0.08);
134
- --src-color-alpha-accent-50: rgba(1, 123, 255, 0.12);
135
- --src-color-alpha-accent-100: rgba(1, 123, 255, 0.16);
136
- --src-color-alpha-success-10: rgba(22, 163, 74, 0.08);
137
- --src-color-alpha-accent-200: rgba(1, 123, 255, 0.24);
138
- --src-color-alpha-accent-300: rgba(1, 123, 255, 0.32);
139
- --src-color-alpha-accent-400: rgba(1, 123, 255, 0.36);
140
- --src-color-alpha-destruct-10: rgba(239, 68, 68, 0.08);
141
- --src-color-alpha-success-50: rgba(22, 163, 74, 0.12);
142
- --src-color-alpha-success-100: rgba(22, 163, 74, 0.24);
143
- --src-color-alpha-success-200: rgba(22, 163, 74, 0.32);
144
- --src-color-alpha-destruct-50: rgba(239, 68, 68, 0.12);
145
- --src-color-alpha-destruct-100: rgba(239, 68, 68, 0.16);
146
- --src-color-alpha-destruct-200: rgba(239, 68, 68, 0.24);
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;
50
+ --src-color-neutral-100: #f5f5f5ff;
51
+ --src-color-neutral-200: #e5e5e5ff;
52
+ --src-color-neutral-300: #d4d4d4ff;
53
+ --src-color-neutral-400: #a3a3a3ff;
54
+ --src-color-neutral-500: #737373ff;
55
+ --src-color-neutral-600: #525252ff;
56
+ --src-color-neutral-700: #404040ff;
57
+ --src-color-neutral-800: #262626ff;
58
+ --src-color-neutral-900: #171717ff;
59
+ --src-color-neutral-950: #0a0a0aff;
60
+ --src-color-grey-50: #f9fafbff;
61
+ --src-color-grey-100: #f3f4f6ff;
62
+ --src-color-grey-200: #e5e7ebff;
63
+ --src-color-grey-300: #d1d5dbff;
64
+ --src-color-grey-400: #9ca3afff;
65
+ --src-color-grey-500: #6b7280ff;
66
+ --src-color-grey-600: #4b5563ff;
67
+ --src-color-grey-700: #374151ff;
68
+ --src-color-grey-800: #1f2937ff;
69
+ --src-color-grey-900: #111827ff;
70
+ --src-color-grey-950: #030712ff;
71
+ --src-color-green-50: #f0fdf4ff;
72
+ --src-color-green-100: #dcfce7ff;
73
+ --src-color-green-200: #bbf7d0ff;
74
+ --src-color-green-300: #86efacff;
75
+ --src-color-green-400: #4ade80ff;
76
+ --src-color-green-500: #22c55eff;
77
+ --src-color-green-600: #16a34aff;
78
+ --src-color-green-700: #15803dff;
79
+ --src-color-green-800: #166534ff;
80
+ --src-color-green-900: #14532dff;
81
+ --src-color-green-950: #052e16ff;
82
+ --src-color-red-50: #fef3f1ff;
83
+ --src-color-red-100: #fde2ddff;
84
+ --src-color-red-200: #fbc5bcff;
85
+ --src-color-red-300: #f79482ff;
86
+ --src-color-red-400: #f56b52ff;
87
+ --src-color-red-500: #f24122ff;
88
+ --src-color-red-600: #c5280cff;
89
+ --src-color-red-700: #9f200aff;
90
+ --src-color-red-800: #731807ff;
91
+ --src-color-red-900: #430e04ff;
92
+ --src-color-red-950: #450a0aff;
93
+ --src-color-blue-50: #f0f5fdff;
94
+ --src-color-blue-100: #e8f0fdff;
95
+ --src-color-blue-200: #bbd4f7ff;
96
+ --src-color-blue-300: #93baf1ff;
97
+ --src-color-blue-400: #6699e1ff;
98
+ --src-color-blue-500: #3e7dd5ff;
99
+ --src-color-blue-600: #2463bcff;
100
+ --src-color-blue-700: #144995ff;
101
+ --src-color-blue-800: #0e356cff;
102
+ --src-color-blue-900: #10294cff;
103
+ --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
+ --src-color-yellow-50: #fefdf0ff;
116
+ --src-color-yellow-100: #fdfbe5ff;
117
+ --src-color-yellow-200: #fbf7caff;
118
+ --src-color-yellow-300: #f9f4b3ff;
119
+ --src-color-yellow-400: #f7f097ff;
120
+ --src-color-yellow-500: #f0e442ff;
121
+ --src-color-yellow-600: #d3c93aff;
122
+ --src-color-yellow-700: #bbb233ff;
123
+ --src-color-yellow-800: #9e962cff;
124
+ --src-color-yellow-900: #787221ff;
125
+ --src-color-yellow-950: #605b1aff;
126
+ --src-color-alpha-default-10: #94a3b814;
127
+ --src-color-alpha-default-50: #94a3b829;
128
+ --src-color-alpha-default-100: #94a3b83d;
129
+ --src-color-alpha-default-200: #4755693d;
130
+ --src-color-alpha-default-600: #475569a3;
131
+ --src-color-alpha-white-10: #ffffff0a;
132
+ --src-color-alpha-white-50: #ffffff1f;
133
+ --src-color-alpha-white-100: #ffffff29;
134
+ --src-color-alpha-white-600: #ffffff70;
135
+ --src-color-alpha-dark-10: #0000000a;
136
+ --src-color-alpha-dark-50: #00000014;
137
+ --src-color-alpha-dark-100: #00000029;
138
+ --src-color-alpha-dark-200: #0000003d;
139
+ --src-color-alpha-dark-600: #000000a3;
140
+ --src-color-alpha-test-10: #94a3b814;
141
+ --src-color-alpha-test-50: #94a3b829;
142
+ --src-color-alpha-test-100: #94a3b83d;
143
+ --src-color-alpha-test-200: #4755693d;
144
+ --src-color-alpha-test-600: #475569a3;
145
+ --src-color-alpha-accent-10: #017bff14;
146
+ --src-color-alpha-accent-50: #017bff1f;
147
+ --src-color-alpha-accent-100: #017bff29;
148
+ --src-color-alpha-warning-10: #f5a80f14;
149
+ --src-color-alpha-warning-50: #f5a80f1f;
150
+ --src-color-alpha-warning-100: #f5a80f29;
151
+ --src-color-alpha-warning-200: #f5a80f3d;
152
+ --src-color-alpha-warning-300: #f5a80f52;
153
+ --src-color-alpha-warning-400: #f5a80f5c;
154
+ --src-color-alpha-success-10: #16a34a14;
155
+ --src-color-alpha-accent-200: #017bff3d;
156
+ --src-color-alpha-accent-300: #017bff52;
157
+ --src-color-alpha-accent-400: #017bff5c;
158
+ --src-color-alpha-destruct-10: #ef444414;
159
+ --src-color-alpha-success-50: #16a34a1f;
160
+ --src-color-alpha-success-100: #16a34a29;
161
+ --src-color-alpha-success-200: #16a34a3d;
162
+ --src-color-alpha-success-300: #16a34a5c;
163
+ --src-color-alpha-success-400: #16a34a70;
164
+ --src-color-alpha-destruct-50: #ef44441f;
165
+ --src-color-alpha-destruct-100: #ef444429;
166
+ --src-color-alpha-destruct-200: #ef44443d;
167
+ --src-color-alpha-attention-10: #f0e44214;
168
+ --src-color-alpha-attention-50: #f0e4421f;
169
+ --src-color-alpha-attention-100: #f0e44229;
170
+ --src-color-alpha-attention-200: #f0e4423d;
171
+ --src-color-alpha-attention-300: #f0e44252;
172
+ --src-color-alpha-attention-400: #f0e4425c;
147
173
  }
package/styles/variables/typeface/web.scss CHANGED
@@ -16,17 +16,17 @@
16
16
  --src-font-size-xl: 28px;
17
17
  --src-font-size-2xl: 32px;
18
18
  --src-font-size-3xl: 40px;
19
- --src-font-size-4xl: 48px;
20
19
  --src-font-line-tech: 12px;
20
+ --src-font-size-4xl: 48px;
21
21
  --src-font-line-xs: 16px;
22
22
  --src-font-line-sm: 20px;
23
23
  --src-font-line-base: 24px;
24
24
  --src-font-line-md: 28px;
25
25
  --src-font-line-lg: 32px;
26
26
  --src-font-line-xl: 36px;
27
- --src-font-line-2xl: 40px;
28
- --src-font-line-3xl: 48px;
29
- --src-font-line-4xl: 52px;
27
+ --src-font-line-2xl: 44px;
28
+ --src-font-line-3xl: 52px;
29
+ --src-font-line-4xl: 56px;
30
30
  --src-font-spacing-tech: 1.2000000476837158px;
31
31
  --src-font-spacing-xl: -0.20000000298023224px;
32
32
  --src-font-spacing-2xl: -0.30000001192092896px;
package/styles/variables/ui/_lg.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  --src-padding-sm: var(--src-space-4);
6
6
  --src-padding-md: var(--src-space-5);
7
7
  --src-padding-lg: var(--src-space-6);
8
+ --src-padding-xl: var(--src-space-8);
8
9
  --src-height-xs: var(--src-space-5);
9
10
  --src-icon-size: var(--src-space-6);
10
11
  --src-icon-line-width: 1.6399999856948853px;
@@ -16,16 +17,17 @@
16
17
  --src-border-rounded-xs: var(--src-space-1-5);
17
18
  --src-border-rounded: var(--src-space-2);
18
19
  --src-border-rounded-parent: var(--src-space-3);
20
+ --src-border-rounded-lg: var(--src-space-5);
19
21
  --src-border-rounded-full: 9999px;
20
- --src-gap-lg: var(--src-space-4);
21
- --src-text-lineHeight: var(--src-font-line-base);
22
- --src-text-fontSize: var(--src-font-size-base);
23
- --src-text-weight-base: var(--src-font-weight-medium);
24
22
  --src-gap-none: 0px;
25
- --src-gap-xl: var(--src-space-5);
26
23
  --src-gap-md: var(--src-space-2);
24
+ --src-gap-lg: var(--src-space-3-5);
25
+ --src-text-weight-base: var(--src-font-weight-Medium);
26
+ --src-text-lineHeight: var(--src-font-line-base);
27
27
  --src-gap-sm: var(--src-space-1-5);
28
- --src-text-weight-bold: var(--src-font-weight-bold);
28
+ --src-gap-xl: var(--src-space-4);
29
+ --src-text-fontSize: var(--src-font-size-base);
30
+ --src-text-weight-bold: var(--src-font-weight-Bold);
29
31
  --src-text-weight-medium: var(--src-font-weight-semiBold);
30
32
  --src-shadow-focused: var(--src-space-1-5);
31
33
  --src-shadow-ambient-inner: -2px;
package/styles/variables/ui/_md.scss CHANGED
@@ -1,10 +1,12 @@
1
- [class*='--size-md'] {
1
+ // default medium (md) variables
2
+ :root {
2
3
  --src-media-thumbnail: 48px;
3
4
  --src-media-preview: 1024px;
4
5
  --src-padding-xs: var(--src-space-2);
5
6
  --src-padding-sm: var(--src-space-3);
6
7
  --src-padding-md: var(--src-space-4);
7
8
  --src-padding-lg: var(--src-space-5);
9
+ --src-padding-xl: var(--src-space-7);
8
10
  --src-height-xs: var(--src-space-4);
9
11
  --src-icon-size: var(--src-space-5);
10
12
  --src-icon-line-width: 1.440000057220459px;
@@ -16,16 +18,17 @@
16
18
  --src-border-rounded-xs: var(--src-space-1);
17
19
  --src-border-rounded: var(--src-space-1-5);
18
20
  --src-border-rounded-parent: var(--src-space-2-5);
21
+ --src-border-rounded-lg: var(--src-space-4);
19
22
  --src-border-rounded-full: 9999px;
20
- --src-gap-lg: var(--src-space-3);
21
- --src-text-lineHeight: var(--src-font-line-sm);
22
- --src-text-fontSize: var(--src-font-size-sm);
23
- --src-text-weight-base: var(--src-font-weight-medium);
24
23
  --src-gap-none: 0px;
25
- --src-gap-xl: var(--src-space-4);
26
24
  --src-gap-md: var(--src-space-1-5);
25
+ --src-gap-lg: var(--src-space-2-5);
26
+ --src-text-weight-base: var(--src-font-weight-Medium);
27
+ --src-text-lineHeight: var(--src-font-line-sm);
27
28
  --src-gap-sm: var(--src-space-1);
28
- --src-text-weight-bold: var(--src-font-weight-bold);
29
+ --src-gap-xl: var(--src-space-3-5);
30
+ --src-text-fontSize: var(--src-font-size-sm);
31
+ --src-text-weight-bold: var(--src-font-weight-Bold);
29
32
  --src-text-weight-medium: var(--src-font-weight-semiBold);
30
33
  --src-shadow-focused: var(--src-space-1);
31
34
  --src-shadow-ambient-inner: -1px;
package/styles/variables/ui/_sm.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  --src-padding-sm: var(--src-space-2);
6
6
  --src-padding-md: var(--src-space-3);
7
7
  --src-padding-lg: var(--src-space-4);
8
+ --src-padding-xl: var(--src-space-6);
8
9
  --src-height-xs: var(--src-space-3);
9
10
  --src-icon-size: var(--src-space-4);
10
11
  --src-icon-line-width: 1.2400000095367432px;
@@ -16,16 +17,17 @@
16
17
  --src-border-rounded-xs: var(--src-space-0-5);
17
18
  --src-border-rounded: var(--src-space-1);
18
19
  --src-border-rounded-parent: var(--src-space-2);
20
+ --src-border-rounded-lg: var(--src-space-3);
19
21
  --src-border-rounded-full: 9999px;
20
- --src-gap-lg: var(--src-space-2);
21
- --src-text-lineHeight: var(--src-font-line-xs);
22
- --src-text-fontSize: var(--src-font-size-xs);
23
- --src-text-weight-base: var(--src-font-weight-medium);
24
22
  --src-gap-none: 0px;
25
- --src-gap-xl: var(--src-space-3);
26
23
  --src-gap-md: var(--src-space-1);
24
+ --src-gap-lg: var(--src-space-2);
25
+ --src-text-weight-base: var(--src-font-weight-medium);
26
+ --src-text-lineHeight: var(--src-font-line-xs);
27
27
  --src-gap-sm: var(--src-space-0-5);
28
- --src-text-weight-bold: var(--src-font-weight-bold);
28
+ --src-gap-xl: var(--src-space-3);
29
+ --src-text-fontSize: var(--src-font-size-xs);
30
+ --src-text-weight-bold: var(--src-font-weight-Bold);
29
31
  --src-text-weight-medium: var(--src-font-weight-semiBold);
30
32
  --src-shadow-focused: var(--src-space-1);
31
33
  --src-shadow-ambient-inner: -1px;
package/styles/variables/ui/_xl.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  --src-padding-sm: var(--src-space-5);
6
6
  --src-padding-md: var(--src-space-6);
7
7
  --src-padding-lg: var(--src-space-7);
8
+ --src-padding-xl: var(--src-space-9);
8
9
  --src-height-xs: var(--src-space-6);
9
10
  --src-icon-size: var(--src-space-7);
10
11
  --src-icon-line-width: 1.840000033378601px;
@@ -13,19 +14,20 @@
13
14
  --src-height-base: var(--src-space-14);
14
15
  --src-border-rounded-none: 0px;
15
16
  --src-height-lg: 76px;
16
- --src-border-rounded-xs: var(--src-space-2);
17
+ --src-border-rounded-xs: var(--src-space-1-5);
17
18
  --src-border-rounded: var(--src-space-2-5);
18
19
  --src-border-rounded-parent: var(--src-space-4);
20
+ --src-border-rounded-lg: var(--src-space-6);
19
21
  --src-border-rounded-full: 9999px;
20
- --src-gap-lg: var(--src-space-5);
21
- --src-text-lineHeight: var(--src-font-line-md);
22
- --src-text-fontSize: var(--src-font-size-md);
23
- --src-text-weight-base: var(--src-font-weight-medium);
24
22
  --src-gap-none: 0px;
25
- --src-gap-xl: var(--src-space-6);
26
- --src-gap-md: var(--src-space-2-5);
23
+ --src-gap-md: var(--src-space-2);
24
+ --src-gap-lg: var(--src-space-3-5);
25
+ --src-text-weight-base: var(--src-font-weight-Medium);
26
+ --src-text-lineHeight: var(--src-font-line-md);
27
27
  --src-gap-sm: var(--src-space-2);
28
- --src-text-weight-bold: var(--src-font-weight-bold);
28
+ --src-gap-xl: var(--src-space-4);
29
+ --src-text-fontSize: var(--src-font-size-md);
30
+ --src-text-weight-bold: var(--src-font-weight-Bold);
29
31
  --src-text-weight-medium: var(--src-font-weight-semiBold);
30
32
  --src-shadow-focused: var(--src-space-1-5);
31
33
  --src-shadow-ambient-inner: -3px;