@withlayers/components.select-control 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.css +1 -0
  2. package/dist/mixins.css +198 -0
  3. package/dist/tokens.json +317 -0
  4. package/package.json +32 -0
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ .select-control{--color--background: var(--l--theme--color--interactive--background--on-default--rest);--color--border: var(--l--theme--color--interactive--border--on-default--rest);--color--content: var(--l--theme--color--interactive--content--on-default--rest)}.select-control select{background-color:var(--color--background);border-color:var(--color--border);color:var(--color--content)}.select-control:after{background-color:var(--color--content)}.select-control:has(select:focus-visible){--color--background: var(--l--theme--color--interactive--background--on-default--focus);--color--border: var(--l--theme--color--interactive--border--on-default--focus);--color--content: var(--l--theme--color--interactive--content--on-default--focus)}.select-control:has(select:hover){--color--background: var(--l--theme--color--interactive--background--on-default--hover);--color--border: var(--l--theme--color--interactive--border--on-default--hover);--color--content: var(--l--theme--color--interactive--content--on-default--hover)}.select-control:has(select[aria-invalid=true]){--color--background: var(--l--theme--color--interactive--background--on-default--invalid--rest);--color--border: var(--l--theme--color--interactive--border--on-default--invalid--rest);--color--content: var(--l--theme--color--interactive--content--on-default--invalid--rest)}.select-control:has(select[aria-invalid=true]:focus-visible){--color--background: var(--l--theme--color--interactive--background--on-default--invalid--focus);--color--border: var(--l--theme--color--interactive--border--on-default--invalid--focus);--color--content: var(--l--theme--color--interactive--content--on-default--invalid--focus)}.select-control:has(select[aria-invalid=true]:hover){--color--background: var(--l--theme--color--interactive--background--on-default--invalid--hover);--color--border: var(--l--theme--color--interactive--border--on-default--invalid--hover);--color--content: var(--l--theme--color--interactive--content--on-default--invalid--hover)}.select-control:has(select:disabled){--color--background: var(--l--theme--color--interactive--background--on-default--disabled);--color--border: var(--l--theme--color--interactive--border--on-default--disabled);--color--content: var(--l--theme--color--interactive--content--on-default--disabled)}.select-control{position:relative}.select-control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:var(--l--theme--select-control--border--style)}.select-control:after{clip-path:polygon(50% 66.67%,29.17% 45.83%,70.83% 45.83%);content:"";inset-block-start:50%;position:absolute;transform:translateY(-50%)}.select-control select{border-radius:var(--l--theme--select-control--border--radius--md);border-width:var(--l--theme--select-control--border--width--md);padding-block:var(--l--theme--select-control--space--inset--block--md);padding-inline-end:calc(var(--l--theme--select-control--space--inset--inline--md) + var(--l--theme--size--icon--md));padding-inline-start:var(--l--theme--select-control--space--inset--inline--md)}.select-control:after{block-size:var(--l--theme--size--icon--md);inline-size:var(--l--theme--size--icon--md);inset-inline-end:var(--l--theme--select-control--space--inset--inline--md)}.select-control select{font-family:var(--l--theme--select-control--typography--font-family--md);font-size:var(--l--theme--select-control--typography--font-size--md);font-style:var(--l--theme--select-control--typography--font-style--md);font-variant-caps:var(--l--theme--select-control--typography--font-variant-caps--md);font-weight:var(--l--theme--select-control--typography--font-weight--md);letter-spacing:var(--l--theme--select-control--typography--letter-spacing--md);line-height:var(--l--theme--select-control--typography--line-height--md);text-transform:var(--l--theme--select-control--typography--text-transform--md)}.select-control--xs select{border-radius:var(--l--theme--select-control--border--radius--xs);border-width:var(--l--theme--select-control--border--width--xs);padding-block:var(--l--theme--select-control--space--inset--block--xs);padding-inline-end:calc(var(--l--theme--select-control--space--inset--inline--xs) + var(--l--theme--size--icon--xs));padding-inline-start:var(--l--theme--select-control--space--inset--inline--xs)}.select-control--xs:after{block-size:var(--l--theme--size--icon--xs);inline-size:var(--l--theme--size--icon--xs);inset-inline-end:var(--l--theme--select-control--space--inset--inline--sm)}.select-control--xs select{font-family:var(--l--theme--select-control--typography--font-family--xs);font-size:var(--l--theme--select-control--typography--font-size--xs);font-style:var(--l--theme--select-control--typography--font-style--xs);font-variant-caps:var(--l--theme--select-control--typography--font-variant-caps--xs);font-weight:var(--l--theme--select-control--typography--font-weight--xs);letter-spacing:var(--l--theme--select-control--typography--letter-spacing--xs);line-height:var(--l--theme--select-control--typography--line-height--xs);text-transform:var(--l--theme--select-control--typography--text-transform--xs)}.select-control--sm select{border-radius:var(--l--theme--select-control--border--radius--sm);border-width:var(--l--theme--select-control--border--width--sm);padding-block:var(--l--theme--select-control--space--inset--block--sm);padding-inline-end:calc(var(--l--theme--select-control--space--inset--inline--sm) + var(--l--theme--size--icon--sm));padding-inline-start:var(--l--theme--select-control--space--inset--inline--sm)}.select-control--sm:after{block-size:var(--l--theme--size--icon--sm);inline-size:var(--l--theme--size--icon--sm);inset-inline-end:var(--l--theme--select-control--space--inset--inline--sm)}.select-control--sm select{font-family:var(--l--theme--select-control--typography--font-family--sm);font-size:var(--l--theme--select-control--typography--font-size--sm);font-style:var(--l--theme--select-control--typography--font-style--sm);font-variant-caps:var(--l--theme--select-control--typography--font-variant-caps--sm);font-weight:var(--l--theme--select-control--typography--font-weight--sm);letter-spacing:var(--l--theme--select-control--typography--letter-spacing--sm);line-height:var(--l--theme--select-control--typography--line-height--sm);text-transform:var(--l--theme--select-control--typography--text-transform--sm)}.select-control--md select{border-radius:var(--l--theme--select-control--border--radius--md);border-width:var(--l--theme--select-control--border--width--md);padding-block:var(--l--theme--select-control--space--inset--block--md);padding-inline-end:calc(var(--l--theme--select-control--space--inset--inline--md) + var(--l--theme--size--icon--md));padding-inline-start:var(--l--theme--select-control--space--inset--inline--md)}.select-control--md:after{block-size:var(--l--theme--size--icon--md);inline-size:var(--l--theme--size--icon--md);inset-inline-end:var(--l--theme--select-control--space--inset--inline--md)}.select-control--md select{font-family:var(--l--theme--select-control--typography--font-family--md);font-size:var(--l--theme--select-control--typography--font-size--md);font-style:var(--l--theme--select-control--typography--font-style--md);font-variant-caps:var(--l--theme--select-control--typography--font-variant-caps--md);font-weight:var(--l--theme--select-control--typography--font-weight--md);letter-spacing:var(--l--theme--select-control--typography--letter-spacing--md);line-height:var(--l--theme--select-control--typography--line-height--md);text-transform:var(--l--theme--select-control--typography--text-transform--md)}.select-control--lg select{border-radius:var(--l--theme--select-control--border--radius--lg);border-width:var(--l--theme--select-control--border--width--lg);padding-block:var(--l--theme--select-control--space--inset--block--lg);padding-inline-end:calc(var(--l--theme--select-control--space--inset--inline--lg) + var(--l--theme--size--icon--lg));padding-inline-start:var(--l--theme--select-control--space--inset--inline--lg)}.select-control--lg:after{block-size:var(--l--theme--size--icon--lg);inline-size:var(--l--theme--size--icon--lg);inset-inline-end:var(--l--theme--select-control--space--inset--inline--lg)}.select-control--lg select{font-family:var(--l--theme--select-control--typography--font-family--lg);font-size:var(--l--theme--select-control--typography--font-size--lg);font-style:var(--l--theme--select-control--typography--font-style--lg);font-variant-caps:var(--l--theme--select-control--typography--font-variant-caps--lg);font-weight:var(--l--theme--select-control--typography--font-weight--lg);letter-spacing:var(--l--theme--select-control--typography--letter-spacing--lg);line-height:var(--l--theme--select-control--typography--line-height--lg);text-transform:var(--l--theme--select-control--typography--text-transform--lg)}
package/dist/mixins.css ADDED
@@ -0,0 +1,198 @@
1
+ @define-mixin select-control-core {
2
+ position: relative;
3
+
4
+ & select {
5
+ appearance: none;
6
+ border-style: var(--l--theme--select-control--border--style);
7
+ }
8
+
9
+ &::after {
10
+ clip-path: polygon(50% 66.67%, 29.17% 45.83%, 70.83% 45.83%);
11
+ content: '';
12
+ inset-block-start: 50%;
13
+ position: absolute;
14
+ transform: translateY(-50%);
15
+ }
16
+ }
17
+
18
+ @define-mixin select-control-color {
19
+ --color--background: var(--l--theme--color--interactive--background--on-default--rest);
20
+ --color--border: var(--l--theme--color--interactive--border--on-default--rest);
21
+ --color--content: var(--l--theme--color--interactive--content--on-default--rest);
22
+
23
+ & select {
24
+ background-color: var(--color--background);
25
+ border-color: var(--color--border);
26
+ color: var(--color--content);
27
+ }
28
+
29
+ &::after {
30
+ background-color: var(--color--content);
31
+ }
32
+
33
+ /* Focus */
34
+ &:has(select:focus-visible) {
35
+ --color--background: var(--l--theme--color--interactive--background--on-default--focus);
36
+ --color--border: var(--l--theme--color--interactive--border--on-default--focus);
37
+ --color--content: var(--l--theme--color--interactive--content--on-default--focus);
38
+ }
39
+
40
+ /* Hover */
41
+ &:has(select:hover) {
42
+ --color--background: var(--l--theme--color--interactive--background--on-default--hover);
43
+ --color--border: var(--l--theme--color--interactive--border--on-default--hover);
44
+ --color--content: var(--l--theme--color--interactive--content--on-default--hover);
45
+ }
46
+
47
+ /* Invalid: Rest */
48
+ &:has(select[aria-invalid='true']) {
49
+ --color--background: var(--l--theme--color--interactive--background--on-default--invalid--rest);
50
+ --color--border: var(--l--theme--color--interactive--border--on-default--invalid--rest);
51
+ --color--content: var(--l--theme--color--interactive--content--on-default--invalid--rest);
52
+ }
53
+
54
+ /* Invalid: Focus */
55
+ &:has(select[aria-invalid='true']:focus-visible) {
56
+ --color--background: var(--l--theme--color--interactive--background--on-default--invalid--focus);
57
+ --color--border: var(--l--theme--color--interactive--border--on-default--invalid--focus);
58
+ --color--content: var(--l--theme--color--interactive--content--on-default--invalid--focus);
59
+ }
60
+
61
+ /* Invalid: Hover */
62
+ &:has(select[aria-invalid='true']:hover) {
63
+ --color--background: var(--l--theme--color--interactive--background--on-default--invalid--hover);
64
+ --color--border: var(--l--theme--color--interactive--border--on-default--invalid--hover);
65
+ --color--content: var(--l--theme--color--interactive--content--on-default--invalid--hover);
66
+ }
67
+
68
+ /* Disabled */
69
+ &:has(select:disabled) {
70
+ --color--background: var(--l--theme--color--interactive--background--on-default--disabled);
71
+ --color--border: var(--l--theme--color--interactive--border--on-default--disabled);
72
+ --color--content: var(--l--theme--color--interactive--content--on-default--disabled);
73
+ }
74
+ }
75
+
76
+ @define-mixin select-control-shape-xs {
77
+ & select {
78
+ border-radius: var(--l--theme--select-control--border--radius--xs);
79
+ border-width: var(--l--theme--select-control--border--width--xs);
80
+ padding-block: var(--l--theme--select-control--space--inset--block--xs);
81
+ padding-inline-end: calc(
82
+ var(--l--theme--select-control--space--inset--inline--xs) + var(--l--theme--size--icon--xs)
83
+ );
84
+ padding-inline-start: var(--l--theme--select-control--space--inset--inline--xs);
85
+ }
86
+
87
+ &::after {
88
+ block-size: var(--l--theme--size--icon--xs);
89
+ inline-size: var(--l--theme--size--icon--xs);
90
+ inset-inline-end: var(--l--theme--select-control--space--inset--inline--sm);
91
+ }
92
+ }
93
+
94
+ @define-mixin select-control-shape-sm {
95
+ & select {
96
+ border-radius: var(--l--theme--select-control--border--radius--sm);
97
+ border-width: var(--l--theme--select-control--border--width--sm);
98
+ padding-block: var(--l--theme--select-control--space--inset--block--sm);
99
+ padding-inline-end: calc(
100
+ var(--l--theme--select-control--space--inset--inline--sm) + var(--l--theme--size--icon--sm)
101
+ );
102
+ padding-inline-start: var(--l--theme--select-control--space--inset--inline--sm);
103
+ }
104
+
105
+ &::after {
106
+ block-size: var(--l--theme--size--icon--sm);
107
+ inline-size: var(--l--theme--size--icon--sm);
108
+ inset-inline-end: var(--l--theme--select-control--space--inset--inline--sm);
109
+ }
110
+ }
111
+
112
+ @define-mixin select-control-shape-md {
113
+ & select {
114
+ border-radius: var(--l--theme--select-control--border--radius--md);
115
+ border-width: var(--l--theme--select-control--border--width--md);
116
+ padding-block: var(--l--theme--select-control--space--inset--block--md);
117
+ padding-inline-end: calc(
118
+ var(--l--theme--select-control--space--inset--inline--md) + var(--l--theme--size--icon--md)
119
+ );
120
+ padding-inline-start: var(--l--theme--select-control--space--inset--inline--md);
121
+ }
122
+
123
+ &::after {
124
+ block-size: var(--l--theme--size--icon--md);
125
+ inline-size: var(--l--theme--size--icon--md);
126
+ inset-inline-end: var(--l--theme--select-control--space--inset--inline--md);
127
+ }
128
+ }
129
+
130
+ @define-mixin select-control-shape-lg {
131
+ & select {
132
+ border-radius: var(--l--theme--select-control--border--radius--lg);
133
+ border-width: var(--l--theme--select-control--border--width--lg);
134
+ padding-block: var(--l--theme--select-control--space--inset--block--lg);
135
+ padding-inline-end: calc(
136
+ var(--l--theme--select-control--space--inset--inline--lg) + var(--l--theme--size--icon--lg)
137
+ );
138
+ padding-inline-start: var(--l--theme--select-control--space--inset--inline--lg);
139
+ }
140
+
141
+ &::after {
142
+ block-size: var(--l--theme--size--icon--lg);
143
+ inline-size: var(--l--theme--size--icon--lg);
144
+ inset-inline-end: var(--l--theme--select-control--space--inset--inline--lg);
145
+ }
146
+ }
147
+
148
+ @define-mixin select-control-typography-xs {
149
+ & select {
150
+ font-family: var(--l--theme--select-control--typography--font-family--xs);
151
+ font-size: var(--l--theme--select-control--typography--font-size--xs);
152
+ font-style: var(--l--theme--select-control--typography--font-style--xs);
153
+ font-variant-caps: var(--l--theme--select-control--typography--font-variant-caps--xs);
154
+ font-weight: var(--l--theme--select-control--typography--font-weight--xs);
155
+ letter-spacing: var(--l--theme--select-control--typography--letter-spacing--xs);
156
+ line-height: var(--l--theme--select-control--typography--line-height--xs);
157
+ text-transform: var(--l--theme--select-control--typography--text-transform--xs);
158
+ }
159
+ }
160
+
161
+ @define-mixin select-control-typography-sm {
162
+ & select {
163
+ font-family: var(--l--theme--select-control--typography--font-family--sm);
164
+ font-size: var(--l--theme--select-control--typography--font-size--sm);
165
+ font-style: var(--l--theme--select-control--typography--font-style--sm);
166
+ font-variant-caps: var(--l--theme--select-control--typography--font-variant-caps--sm);
167
+ font-weight: var(--l--theme--select-control--typography--font-weight--sm);
168
+ letter-spacing: var(--l--theme--select-control--typography--letter-spacing--sm);
169
+ line-height: var(--l--theme--select-control--typography--line-height--sm);
170
+ text-transform: var(--l--theme--select-control--typography--text-transform--sm);
171
+ }
172
+ }
173
+
174
+ @define-mixin select-control-typography-md {
175
+ & select {
176
+ font-family: var(--l--theme--select-control--typography--font-family--md);
177
+ font-size: var(--l--theme--select-control--typography--font-size--md);
178
+ font-style: var(--l--theme--select-control--typography--font-style--md);
179
+ font-variant-caps: var(--l--theme--select-control--typography--font-variant-caps--md);
180
+ font-weight: var(--l--theme--select-control--typography--font-weight--md);
181
+ letter-spacing: var(--l--theme--select-control--typography--letter-spacing--md);
182
+ line-height: var(--l--theme--select-control--typography--line-height--md);
183
+ text-transform: var(--l--theme--select-control--typography--text-transform--md);
184
+ }
185
+ }
186
+
187
+ @define-mixin select-control-typography-lg {
188
+ & select {
189
+ font-family: var(--l--theme--select-control--typography--font-family--lg);
190
+ font-size: var(--l--theme--select-control--typography--font-size--lg);
191
+ font-style: var(--l--theme--select-control--typography--font-style--lg);
192
+ font-variant-caps: var(--l--theme--select-control--typography--font-variant-caps--lg);
193
+ font-weight: var(--l--theme--select-control--typography--font-weight--lg);
194
+ letter-spacing: var(--l--theme--select-control--typography--letter-spacing--lg);
195
+ line-height: var(--l--theme--select-control--typography--line-height--lg);
196
+ text-transform: var(--l--theme--select-control--typography--text-transform--lg);
197
+ }
198
+ }
package/dist/tokens.json ADDED
@@ -0,0 +1,317 @@
1
+ {
2
+ "select-control": {
3
+ "$level": "component",
4
+ "border": {
5
+ "$level": "category",
6
+ "style": {
7
+ "$level": "property",
8
+ "value": "{border.style.solid}"
9
+ },
10
+ "width": {
11
+ "$level": "property",
12
+ "xs": {
13
+ "$level": "scale",
14
+ "value": "{border.width.sm}"
15
+ },
16
+ "sm": {
17
+ "$level": "scale",
18
+ "value": "{border.width.sm}"
19
+ },
20
+ "md": {
21
+ "$level": "scale",
22
+ "value": "{border.width.sm}"
23
+ },
24
+ "lg": {
25
+ "$level": "scale",
26
+ "value": "{border.width.sm}"
27
+ }
28
+ },
29
+ "radius": {
30
+ "$level": "property",
31
+ "xs": {
32
+ "$level": "scale",
33
+ "value": "{border.radius.md}"
34
+ },
35
+ "sm": {
36
+ "$level": "scale",
37
+ "value": "{border.radius.md}"
38
+ },
39
+ "md": {
40
+ "$level": "scale",
41
+ "value": "{border.radius.md}"
42
+ },
43
+ "lg": {
44
+ "$level": "scale",
45
+ "value": "{border.radius.md}"
46
+ }
47
+ }
48
+ },
49
+ "space": {
50
+ "$level": "category",
51
+ "inset": {
52
+ "$level": "property",
53
+ "block": {
54
+ "$level": "subproperty",
55
+ "xs": {
56
+ "$level": "scale",
57
+ "value": "{space.20}"
58
+ },
59
+ "sm": {
60
+ "$level": "scale",
61
+ "value": "{space.30}"
62
+ },
63
+ "md": {
64
+ "$level": "scale",
65
+ "value": "{space.40}"
66
+ },
67
+ "lg": {
68
+ "$level": "scale",
69
+ "value": "{space.50}"
70
+ }
71
+ },
72
+ "inline": {
73
+ "$level": "subproperty",
74
+ "xs": {
75
+ "$level": "scale",
76
+ "value": "{space.30}"
77
+ },
78
+ "sm": {
79
+ "$level": "scale",
80
+ "value": "{space.40}"
81
+ },
82
+ "md": {
83
+ "$level": "scale",
84
+ "value": "{space.50}"
85
+ },
86
+ "lg": {
87
+ "$level": "scale",
88
+ "value": "{space.60}"
89
+ }
90
+ }
91
+ }
92
+ },
93
+ "typography": {
94
+ "$level": "category",
95
+ "font-family": {
96
+ "$level": "property",
97
+ "xs": {
98
+ "$level": "scale",
99
+ "value": "{typography.font-family.secondary}"
100
+ },
101
+ "sm": {
102
+ "$level": "scale",
103
+ "value": "{typography.font-family.secondary}"
104
+ },
105
+ "md": {
106
+ "$level": "scale",
107
+ "value": "{typography.font-family.secondary}"
108
+ },
109
+ "lg": {
110
+ "$level": "scale",
111
+ "value": "{typography.font-family.secondary}"
112
+ }
113
+ },
114
+ "font-size": {
115
+ "$level": "property",
116
+ "xs": {
117
+ "$level": "scale",
118
+ "value": {
119
+ "type": "fluid",
120
+ "min": {
121
+ "value": "{typography.font-size.12}",
122
+ "breakpoint": {
123
+ "value": "{breakpoint.xs}"
124
+ }
125
+ },
126
+ "max": {
127
+ "value": "{typography.font-size.14}",
128
+ "breakpoint": {
129
+ "value": "{breakpoint.xl}"
130
+ }
131
+ },
132
+ "root": {
133
+ "value": "{typography.font-size.root}"
134
+ }
135
+ }
136
+ },
137
+ "sm": {
138
+ "$level": "scale",
139
+ "value": {
140
+ "type": "fluid",
141
+ "min": {
142
+ "value": "{typography.font-size.12}",
143
+ "breakpoint": {
144
+ "value": "{breakpoint.xs}"
145
+ }
146
+ },
147
+ "max": {
148
+ "value": "{typography.font-size.14}",
149
+ "breakpoint": {
150
+ "value": "{breakpoint.xl}"
151
+ }
152
+ },
153
+ "root": {
154
+ "value": "{typography.font-size.root}"
155
+ }
156
+ }
157
+ },
158
+ "md": {
159
+ "$level": "scale",
160
+ "value": {
161
+ "type": "fluid",
162
+ "min": {
163
+ "value": "{typography.font-size.14}",
164
+ "breakpoint": {
165
+ "value": "{breakpoint.xs}"
166
+ }
167
+ },
168
+ "max": {
169
+ "value": "{typography.font-size.16}",
170
+ "breakpoint": {
171
+ "value": "{breakpoint.xl}"
172
+ }
173
+ },
174
+ "root": {
175
+ "value": "{typography.font-size.root}"
176
+ }
177
+ }
178
+ },
179
+ "lg": {
180
+ "$level": "scale",
181
+ "value": {
182
+ "type": "fluid",
183
+ "min": {
184
+ "value": "{typography.font-size.16}",
185
+ "breakpoint": {
186
+ "value": "{breakpoint.xs}"
187
+ }
188
+ },
189
+ "max": {
190
+ "value": "{typography.font-size.18}",
191
+ "breakpoint": {
192
+ "value": "{breakpoint.xl}"
193
+ }
194
+ },
195
+ "root": {
196
+ "value": "{typography.font-size.root}"
197
+ }
198
+ }
199
+ }
200
+ },
201
+ "font-style": {
202
+ "$level": "property",
203
+ "xs": {
204
+ "$level": "scale",
205
+ "value": "{typography.font-style.normal}"
206
+ },
207
+ "sm": {
208
+ "$level": "scale",
209
+ "value": "{typography.font-style.normal}"
210
+ },
211
+ "md": {
212
+ "$level": "scale",
213
+ "value": "{typography.font-style.normal}"
214
+ },
215
+ "lg": {
216
+ "$level": "scale",
217
+ "value": "{typography.font-style.normal}"
218
+ }
219
+ },
220
+ "font-variant-caps": {
221
+ "$level": "property",
222
+ "xs": {
223
+ "$level": "scale",
224
+ "value": "{typography.font-variant-caps.normal}"
225
+ },
226
+ "sm": {
227
+ "$level": "scale",
228
+ "value": "{typography.font-variant-caps.normal}"
229
+ },
230
+ "md": {
231
+ "$level": "scale",
232
+ "value": "{typography.font-variant-caps.normal}"
233
+ },
234
+ "lg": {
235
+ "$level": "scale",
236
+ "value": "{typography.font-variant-caps.normal}"
237
+ }
238
+ },
239
+ "font-weight": {
240
+ "$level": "property",
241
+ "xs": {
242
+ "$level": "scale",
243
+ "value": "{typography.font-weight.medium}"
244
+ },
245
+ "sm": {
246
+ "$level": "scale",
247
+ "value": "{typography.font-weight.medium}"
248
+ },
249
+ "md": {
250
+ "$level": "scale",
251
+ "value": "{typography.font-weight.medium}"
252
+ },
253
+ "lg": {
254
+ "$level": "scale",
255
+ "value": "{typography.font-weight.medium}"
256
+ }
257
+ },
258
+ "letter-spacing": {
259
+ "$level": "property",
260
+ "xs": {
261
+ "$level": "scale",
262
+ "value": "{typography.letter-spacing.normal}"
263
+ },
264
+ "sm": {
265
+ "$level": "scale",
266
+ "value": "{typography.letter-spacing.normal}"
267
+ },
268
+ "md": {
269
+ "$level": "scale",
270
+ "value": "{typography.letter-spacing.normal}"
271
+ },
272
+ "lg": {
273
+ "$level": "scale",
274
+ "value": "{typography.letter-spacing.normal}"
275
+ }
276
+ },
277
+ "line-height": {
278
+ "$level": "property",
279
+ "xs": {
280
+ "$level": "scale",
281
+ "value": "{typography.line-height.1250}"
282
+ },
283
+ "sm": {
284
+ "$level": "scale",
285
+ "value": "{typography.line-height.1250}"
286
+ },
287
+ "md": {
288
+ "$level": "scale",
289
+ "value": "{typography.line-height.1375}"
290
+ },
291
+ "lg": {
292
+ "$level": "scale",
293
+ "value": "{typography.line-height.1500}"
294
+ }
295
+ },
296
+ "text-transform": {
297
+ "$level": "property",
298
+ "xs": {
299
+ "$level": "scale",
300
+ "value": "{typography.text-transform.none}"
301
+ },
302
+ "sm": {
303
+ "$level": "scale",
304
+ "value": "{typography.text-transform.none}"
305
+ },
306
+ "md": {
307
+ "$level": "scale",
308
+ "value": "{typography.text-transform.none}"
309
+ },
310
+ "lg": {
311
+ "$level": "scale",
312
+ "value": "{typography.text-transform.none}"
313
+ }
314
+ }
315
+ }
316
+ }
317
+ }
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@withlayers/components.select-control",
3
+ "version": "0.1.0",
4
+ "description": "Select control component",
5
+ "license": "MIT",
6
+ "author": "Dmitry Mayorov",
7
+ "type": "module",
8
+ "main": "dist/index.css",
9
+ "exports": {
10
+ ".": "./dist/index.css",
11
+ "./mixins": "./dist/mixins.css",
12
+ "./tokens": "./dist/tokens.json"
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "build": "vite build",
19
+ "dev": "vite build --watch",
20
+ "lint:css": "stylelint \"src/**/*.css\"",
21
+ "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
22
+ },
23
+ "dependencies": {
24
+ "@withlayers/mixins": "0.13.2",
25
+ "@withlayers/tokens": "0.20.0"
26
+ },
27
+ "devDependencies": {
28
+ "clsx": "^2.1.1",
29
+ "postcss-mixins": "^11.0.3",
30
+ "postcss-nested": "^7.0.2"
31
+ }
32
+ }