@withlayers/components.select-control 0.1.1 → 0.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 (4) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/mixins.css +72 -128
  3. package/package.json +4 -5
  4. package/dist/tokens.json +0 -317
package/dist/index.css CHANGED
@@ -1 +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)}
1
+ .select-control{--color--background: var(--l--theme--color--input--background--on-default--rest);--color--border: var(--l--theme--color--input--border--on-default--rest);--color--content: var(--l--theme--color--input--content--on-default--rest)}.select-control select{font-family:var(--l--theme--typography--text-control--font-family--md);font-size:var(--l--theme--typography--text-control--font-size--md);font-style:var(--l--theme--typography--text-control--font-style--md);font-variant-caps:var(--l--theme--typography--text-control--font-variant-caps--md);font-weight:var(--l--theme--typography--text-control--font-weight--md);letter-spacing:var(--l--theme--typography--text-control--letter-spacing--md);line-height:var(--l--theme--typography--text-control--line-height--md);text-transform:var(--l--theme--typography--text-control--text-transform--md);border-radius:var(--l--theme--border--text-control--radius--md);border-width:var(--l--theme--border--text-control--width--md);padding-block:var(--l--theme--space--text-control--inset--block--md);padding-inline-end:calc(var(--l--theme--space--text-control--inset--inline--md) + var(--l--theme--size--icon--md));padding-inline-start:var(--l--theme--space--text-control--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--space--text-control--inset--inline--md)}.select-control{position:relative}.select-control:after{background-color:var(--color--content);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{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color--background);border-color:var(--color--border);border-style:var(--l--theme--border--text-control--style);color:var(--color--content)}.select-control:has(select:focus-visible){--color--background: var(--l--theme--color--input--background--on-default--focus);--color--border: var(--l--theme--color--input--border--on-default--focus);--color--content: var(--l--theme--color--input--content--on-default--focus)}.select-control:has(select:hover){--color--background: var(--l--theme--color--input--background--on-default--hover);--color--border: var(--l--theme--color--input--border--on-default--hover);--color--content: var(--l--theme--color--input--content--on-default--hover)}.select-control:has(select[aria-invalid=true]){--color--background: var(--l--theme--color--input--background--on-default--invalid--rest);--color--border: var(--l--theme--color--input--border--on-default--invalid--rest);--color--content: var(--l--theme--color--input--content--on-default--invalid--rest)}.select-control:has(select[aria-invalid=true]:focus-visible){--color--background: var(--l--theme--color--input--background--on-default--invalid--focus);--color--border: var(--l--theme--color--input--border--on-default--invalid--focus);--color--content: var(--l--theme--color--input--content--on-default--invalid--focus)}.select-control:has(select[aria-invalid=true]:hover){--color--background: var(--l--theme--color--input--background--on-default--invalid--hover);--color--border: var(--l--theme--color--input--border--on-default--invalid--hover);--color--content: var(--l--theme--color--input--content--on-default--invalid--hover)}.select-control:has(select:disabled,select[disabled]:hover){--color--background: var(--l--theme--color--input--background--on-default--disabled);--color--border: var(--l--theme--color--input--border--on-default--disabled);--color--content: var(--l--theme--color--input--content--on-default--disabled)}.select-control--xs select{font-family:var(--l--theme--typography--text-control--font-family--xs);font-size:var(--l--theme--typography--text-control--font-size--xs);font-style:var(--l--theme--typography--text-control--font-style--xs);font-variant-caps:var(--l--theme--typography--text-control--font-variant-caps--xs);font-weight:var(--l--theme--typography--text-control--font-weight--xs);letter-spacing:var(--l--theme--typography--text-control--letter-spacing--xs);line-height:var(--l--theme--typography--text-control--line-height--xs);text-transform:var(--l--theme--typography--text-control--text-transform--xs);border-radius:var(--l--theme--border--text-control--radius--xs);border-width:var(--l--theme--border--text-control--width--xs);padding-block:var(--l--theme--space--text-control--inset--block--xs);padding-inline-end:calc(var(--l--theme--space--text-control--inset--inline--xs) + var(--l--theme--size--icon--xs));padding-inline-start:var(--l--theme--space--text-control--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--space--text-control--inset--inline--xs)}.select-control--sm select{font-family:var(--l--theme--typography--text-control--font-family--sm);font-size:var(--l--theme--typography--text-control--font-size--sm);font-style:var(--l--theme--typography--text-control--font-style--sm);font-variant-caps:var(--l--theme--typography--text-control--font-variant-caps--sm);font-weight:var(--l--theme--typography--text-control--font-weight--sm);letter-spacing:var(--l--theme--typography--text-control--letter-spacing--sm);line-height:var(--l--theme--typography--text-control--line-height--sm);text-transform:var(--l--theme--typography--text-control--text-transform--sm);border-radius:var(--l--theme--border--text-control--radius--sm);border-width:var(--l--theme--border--text-control--width--sm);padding-block:var(--l--theme--space--text-control--inset--block--sm);padding-inline-end:calc(var(--l--theme--space--text-control--inset--inline--sm) + var(--l--theme--size--icon--sm));padding-inline-start:var(--l--theme--space--text-control--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--space--text-control--inset--inline--sm)}.select-control--md select{font-family:var(--l--theme--typography--text-control--font-family--md);font-size:var(--l--theme--typography--text-control--font-size--md);font-style:var(--l--theme--typography--text-control--font-style--md);font-variant-caps:var(--l--theme--typography--text-control--font-variant-caps--md);font-weight:var(--l--theme--typography--text-control--font-weight--md);letter-spacing:var(--l--theme--typography--text-control--letter-spacing--md);line-height:var(--l--theme--typography--text-control--line-height--md);text-transform:var(--l--theme--typography--text-control--text-transform--md);border-radius:var(--l--theme--border--text-control--radius--md);border-width:var(--l--theme--border--text-control--width--md);padding-block:var(--l--theme--space--text-control--inset--block--md);padding-inline-end:calc(var(--l--theme--space--text-control--inset--inline--md) + var(--l--theme--size--icon--md));padding-inline-start:var(--l--theme--space--text-control--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--space--text-control--inset--inline--md)}.select-control--lg select{font-family:var(--l--theme--typography--text-control--font-family--md);font-size:var(--l--theme--typography--text-control--font-size--md);font-style:var(--l--theme--typography--text-control--font-style--md);font-variant-caps:var(--l--theme--typography--text-control--font-variant-caps--md);font-weight:var(--l--theme--typography--text-control--font-weight--md);letter-spacing:var(--l--theme--typography--text-control--letter-spacing--md);line-height:var(--l--theme--typography--text-control--line-height--md);text-transform:var(--l--theme--typography--text-control--text-transform--md);border-radius:var(--l--theme--border--text-control--radius--lg);border-width:var(--l--theme--border--text-control--width--lg);padding-block:var(--l--theme--space--text-control--inset--block--lg);padding-inline-end:calc(var(--l--theme--space--text-control--inset--inline--lg) + var(--l--theme--size--icon--lg));padding-inline-start:var(--l--theme--space--text-control--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--space--text-control--inset--inline--lg)}
package/dist/mixins.css CHANGED
@@ -1,198 +1,142 @@
1
- @define-mixin select-control-core {
2
- position: relative;
1
+ @import url('@withlayers/mixins/dist/index.css');
3
2
 
4
- & select {
5
- appearance: none;
6
- border-style: var(--l--theme--select-control--border--style);
7
- }
3
+ @define-mixin select-control {
4
+ --color--background: var(--l--theme--color--input--background--on-default--rest);
5
+ --color--border: var(--l--theme--color--input--border--on-default--rest);
6
+ --color--content: var(--l--theme--color--input--content--on-default--rest);
7
+
8
+ @mixin select-control--md;
9
+
10
+ position: relative;
8
11
 
9
12
  &::after {
13
+ background-color: var(--color--content);
10
14
  clip-path: polygon(50% 66.67%, 29.17% 45.83%, 70.83% 45.83%);
11
15
  content: '';
12
16
  inset-block-start: 50%;
13
17
  position: absolute;
14
18
  transform: translateY(-50%);
15
19
  }
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
20
 
23
21
  & select {
22
+ appearance: none;
24
23
  background-color: var(--color--background);
25
24
  border-color: var(--color--border);
25
+ border-style: var(--l--theme--border--text-control--style);
26
26
  color: var(--color--content);
27
27
  }
28
28
 
29
- &::after {
30
- background-color: var(--color--content);
31
- }
32
-
33
29
  /* Focus */
34
30
  &: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);
31
+ --color--background: var(--l--theme--color--input--background--on-default--focus);
32
+ --color--border: var(--l--theme--color--input--border--on-default--focus);
33
+ --color--content: var(--l--theme--color--input--content--on-default--focus);
38
34
  }
39
35
 
40
36
  /* Hover */
41
37
  &: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);
38
+ --color--background: var(--l--theme--color--input--background--on-default--hover);
39
+ --color--border: var(--l--theme--color--input--border--on-default--hover);
40
+ --color--content: var(--l--theme--color--input--content--on-default--hover);
45
41
  }
46
42
 
47
43
  /* Invalid: Rest */
48
44
  &: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);
45
+ --color--background: var(--l--theme--color--input--background--on-default--invalid--rest);
46
+ --color--border: var(--l--theme--color--input--border--on-default--invalid--rest);
47
+ --color--content: var(--l--theme--color--input--content--on-default--invalid--rest);
52
48
  }
53
49
 
54
50
  /* Invalid: Focus */
55
51
  &: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);
52
+ --color--background: var(--l--theme--color--input--background--on-default--invalid--focus);
53
+ --color--border: var(--l--theme--color--input--border--on-default--invalid--focus);
54
+ --color--content: var(--l--theme--color--input--content--on-default--invalid--focus);
59
55
  }
60
56
 
61
57
  /* Invalid: Hover */
62
58
  &: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);
59
+ --color--background: var(--l--theme--color--input--background--on-default--invalid--hover);
60
+ --color--border: var(--l--theme--color--input--border--on-default--invalid--hover);
61
+ --color--content: var(--l--theme--color--input--content--on-default--invalid--hover);
66
62
  }
67
63
 
68
64
  /* 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);
65
+ &:has(select:disabled, select[disabled]:hover) {
66
+ --color--background: var(--l--theme--color--input--background--on-default--disabled);
67
+ --color--border: var(--l--theme--color--input--border--on-default--disabled);
68
+ --color--content: var(--l--theme--color--input--content--on-default--disabled);
73
69
  }
74
70
  }
75
71
 
76
- @define-mixin select-control-shape-xs {
72
+ @define-mixin select-control--lg {
77
73
  & 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
- }
74
+ @mixin is-typography-text-control-md;
86
75
 
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);
76
+ border-radius: var(--l--theme--border--text-control--radius--lg);
77
+ border-width: var(--l--theme--border--text-control--width--lg);
78
+ padding-block: var(--l--theme--space--text-control--inset--block--lg);
79
+ padding-inline-end: calc(var(--l--theme--space--text-control--inset--inline--lg) + var(--l--theme--size--icon--lg));
80
+ padding-inline-start: var(--l--theme--space--text-control--inset--inline--lg);
103
81
  }
104
82
 
105
83
  &::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);
84
+ block-size: var(--l--theme--size--icon--lg);
85
+ inline-size: var(--l--theme--size--icon--lg);
86
+ inset-inline-end: var(--l--theme--space--text-control--inset--inline--lg);
109
87
  }
110
88
  }
111
89
 
112
- @define-mixin select-control-shape-md {
90
+ @define-mixin select-control--md {
113
91
  & 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);
92
+ @mixin is-typography-text-control-md;
93
+
94
+ border-radius: var(--l--theme--border--text-control--radius--md);
95
+ border-width: var(--l--theme--border--text-control--width--md);
96
+ padding-block: var(--l--theme--space--text-control--inset--block--md);
97
+ padding-inline-end: calc(var(--l--theme--space--text-control--inset--inline--md) + var(--l--theme--size--icon--md));
98
+ padding-inline-start: var(--l--theme--space--text-control--inset--inline--md);
121
99
  }
122
100
 
123
101
  &::after {
124
102
  block-size: var(--l--theme--size--icon--md);
125
103
  inline-size: var(--l--theme--size--icon--md);
126
- inset-inline-end: var(--l--theme--select-control--space--inset--inline--md);
104
+ inset-inline-end: var(--l--theme--space--text-control--inset--inline--md);
127
105
  }
128
106
  }
129
107
 
130
- @define-mixin select-control-shape-lg {
108
+ @define-mixin select-control--sm {
131
109
  & 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
- }
110
+ @mixin is-typography-text-control-sm;
140
111
 
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);
112
+ border-radius: var(--l--theme--border--text-control--radius--sm);
113
+ border-width: var(--l--theme--border--text-control--width--sm);
114
+ padding-block: var(--l--theme--space--text-control--inset--block--sm);
115
+ padding-inline-end: calc(var(--l--theme--space--text-control--inset--inline--sm) + var(--l--theme--size--icon--sm));
116
+ padding-inline-start: var(--l--theme--space--text-control--inset--inline--sm);
145
117
  }
146
- }
147
118
 
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);
119
+ &::after {
120
+ block-size: var(--l--theme--size--icon--sm);
121
+ inline-size: var(--l--theme--size--icon--sm);
122
+ inset-inline-end: var(--l--theme--space--text-control--inset--inline--sm);
158
123
  }
159
124
  }
160
125
 
161
- @define-mixin select-control-typography-sm {
126
+ @define-mixin select-control--xs {
162
127
  & 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
- }
128
+ @mixin is-typography-text-control-xs;
173
129
 
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);
130
+ border-radius: var(--l--theme--border--text-control--radius--xs);
131
+ border-width: var(--l--theme--border--text-control--width--xs);
132
+ padding-block: var(--l--theme--space--text-control--inset--block--xs);
133
+ padding-inline-end: calc(var(--l--theme--space--text-control--inset--inline--xs) + var(--l--theme--size--icon--xs));
134
+ padding-inline-start: var(--l--theme--space--text-control--inset--inline--xs);
184
135
  }
185
- }
186
136
 
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);
137
+ &::after {
138
+ block-size: var(--l--theme--size--icon--xs);
139
+ inline-size: var(--l--theme--size--icon--xs);
140
+ inset-inline-end: var(--l--theme--space--text-control--inset--inline--xs);
197
141
  }
198
142
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/components.select-control",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Select control component",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
@@ -8,8 +8,7 @@
8
8
  "main": "dist/index.css",
9
9
  "exports": {
10
10
  ".": "./dist/index.css",
11
- "./mixins": "./dist/mixins.css",
12
- "./tokens": "./dist/tokens.json"
11
+ "./mixins": "./dist/mixins.css"
13
12
  },
14
13
  "files": [
15
14
  "dist"
@@ -21,8 +20,8 @@
21
20
  "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
22
21
  },
23
22
  "dependencies": {
24
- "@withlayers/mixins": "0.14.0",
25
- "@withlayers/tokens": "0.21.0"
23
+ "@withlayers/mixins": "0.15.0",
24
+ "@withlayers/tokens": "0.23.0"
26
25
  },
27
26
  "devDependencies": {
28
27
  "clsx": "^2.1.1",
package/dist/tokens.json DELETED
@@ -1,317 +0,0 @@
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
- }