@withlayers/components.radio-control 0.6.2 → 0.7.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 +36 -50
  3. package/package.json +3 -5
  4. package/dist/tokens.json +0 -41
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .radio-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: transparent;background-color:var(--color--background)}.radio-control input[type=radio]{border-color:var(--color--border)}.radio-control:after{background-color:var(--color--content)}.radio-control:has(input[type=radio]:focus-visible){--color--background: var(--l--theme--color--interactive--background--on-default--focus);--color--border: var(--l--theme--color--interactive--border--on-default--focus)}.radio-control:has(input[type=radio]:hover){--color--background: var(--l--theme--color--interactive--background--on-default--hover);--color--border: var(--l--theme--color--interactive--border--on-default--hover)}.radio-control:has(input[type=radio]:checked){--color--background: var(--l--theme--color--interactive--background--on-default--checked--rest);--color--border: var(--l--theme--color--interactive--border--on-default--checked--rest);--color--content: var(--l--theme--color--interactive--content--on-default--checked--rest)}.radio-control:has(input[type=radio]:focus-visible:checked){--color--background: var(--l--theme--color--interactive--background--on-default--checked--focus);--color--border: var(--l--theme--color--interactive--border--on-default--checked--focus);--color--content: var(--l--theme--color--interactive--content--on-default--checked--focus)}.radio-control:has(input[type=radio]:hover:checked){--color--background: var(--l--theme--color--interactive--background--on-default--checked--hover);--color--border: var(--l--theme--color--interactive--border--on-default--checked--hover);--color--content: var(--l--theme--color--interactive--content--on-default--checked--hover)}.radio-control:has(input[type=radio]:disabled,input[type=radio]:disabled:checked){--color--background: var(--l--theme--color--interactive--background--on-default--disabled);--color--border: var(--l--theme--color--interactive--border--on-default--disabled)}.radio-control:has(input[type=radio]:disabled:checked){--color--content: var(--l--theme--color--interactive--content--on-default--disabled)}.radio-control input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.radio-control{block-size:var(--l--theme--radio-control--size);border-radius:var(--l--theme--radio-control--border--radius);display:grid;inline-size:var(--l--theme--radio-control--size)}.radio-control input[type=radio]{block-size:var(--l--theme--radio-control--size);border-radius:var(--l--theme--radio-control--border--radius);border-style:var(--l--theme--radio-control--border--style);border-width:var(--l--theme--radio-control--border--width);grid-area:1 / 1;inline-size:var(--l--theme--radio-control--size)}.radio-control:after{block-size:var(--l--theme--radio-control--size);border-radius:var(--l--theme--radio-control--border--radius);clip-path:circle(20.83% at 50% 50%);content:"";grid-area:1 / 1;inline-size:var(--l--theme--radio-control--size);pointer-events:none}
1
+ .radio-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: transparent;background-color:var(--color--background);block-size:var(--l--theme--size--mark-control);border-radius:var(--l--theme--border--radius--full);display:grid;inline-size:var(--l--theme--size--mark-control)}.radio-control input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;block-size:var(--l--theme--size--mark-control);border-color:var(--color--border);border-radius:var(--l--theme--border--radius--full);border-style:var(--l--theme--border--mark-control--style);border-width:var(--l--theme--border--mark-control--width);grid-area:1 / 1;inline-size:var(--l--theme--size--mark-control)}.radio-control:after{background-color:var(--color--content);block-size:var(--l--theme--size--mark-control);border-radius:var(--l--theme--border--radius--full);clip-path:circle(20.83% at 50% 50%);content:"";grid-area:1 / 1;inline-size:var(--l--theme--size--mark-control);pointer-events:none}.radio-control:has(input[type=radio]:focus-visible){--color--background: var(--l--theme--color--input--background--on-default--focus);--color--border: var(--l--theme--color--input--border--on-default--focus)}.radio-control:has(input[type=radio]:hover){--color--background: var(--l--theme--color--input--background--on-default--hover);--color--border: var(--l--theme--color--input--border--on-default--hover)}.radio-control:has(input[type=radio]:checked){--color--background: var(--l--theme--color--input--background--on-default--checked--rest);--color--border: var(--l--theme--color--input--border--on-default--checked--rest);--color--content: var(--l--theme--color--input--content--on-default--checked--rest)}.radio-control:has(input[type=radio]:focus-visible:checked){--color--background: var(--l--theme--color--input--background--on-default--checked--focus);--color--border: var(--l--theme--color--input--border--on-default--checked--focus);--color--content: var(--l--theme--color--input--content--on-default--checked--focus)}.radio-control:has(input[type=radio]:hover:checked){--color--background: var(--l--theme--color--input--background--on-default--checked--hover);--color--border: var(--l--theme--color--input--border--on-default--checked--hover);--color--content: var(--l--theme--color--input--content--on-default--checked--hover)}.radio-control:has(input[type=radio]:disabled,input[type=radio]:disabled:checked){--color--background: var(--l--theme--color--input--background--on-default--disabled);--color--border: var(--l--theme--color--input--border--on-default--disabled)}.radio-control:has(input[type=radio]:disabled:checked){--color--content: var(--l--theme--color--input--content--on-default--disabled)}
package/dist/mixins.css CHANGED
@@ -1,82 +1,68 @@
1
- @define-mixin radio-core {
2
- & input[type='radio'] {
3
- appearance: none;
4
- }
5
- }
1
+ @define-mixin radio-control {
2
+ --color--background: var(--l--theme--color--input--background--on-default--rest);
3
+ --color--border: var(--l--theme--color--input--border--on-default--rest);
4
+ --color--content: transparent;
6
5
 
7
- @define-mixin radio-shape {
8
- block-size: var(--l--theme--radio-control--size);
9
- border-radius: var(--l--theme--radio-control--border--radius);
6
+ /* Rest */
7
+ background-color: var(--color--background);
8
+ block-size: var(--l--theme--size--mark-control);
9
+ border-radius: var(--l--theme--border--radius--full);
10
10
  display: grid;
11
- inline-size: var(--l--theme--radio-control--size);
11
+ inline-size: var(--l--theme--size--mark-control);
12
12
 
13
13
  & input[type='radio'] {
14
- block-size: var(--l--theme--radio-control--size);
15
- border-radius: var(--l--theme--radio-control--border--radius);
16
- border-style: var(--l--theme--radio-control--border--style);
17
- border-width: var(--l--theme--radio-control--border--width);
14
+ appearance: none;
15
+ block-size: var(--l--theme--size--mark-control);
16
+ border-color: var(--color--border);
17
+ border-radius: var(--l--theme--border--radius--full);
18
+ border-style: var(--l--theme--border--mark-control--style);
19
+ border-width: var(--l--theme--border--mark-control--width);
18
20
  grid-area: 1 / 1;
19
- inline-size: var(--l--theme--radio-control--size);
21
+ inline-size: var(--l--theme--size--mark-control);
20
22
  }
21
23
 
22
24
  &::after {
23
- block-size: var(--l--theme--radio-control--size);
24
- border-radius: var(--l--theme--radio-control--border--radius);
25
+ background-color: var(--color--content);
26
+ block-size: var(--l--theme--size--mark-control);
27
+ border-radius: var(--l--theme--border--radius--full);
25
28
  clip-path: circle(20.83% at 50% 50%);
26
29
  content: '';
27
30
  grid-area: 1 / 1;
28
- inline-size: var(--l--theme--radio-control--size);
31
+ inline-size: var(--l--theme--size--mark-control);
29
32
  pointer-events: none;
30
33
  }
31
- }
32
-
33
- @define-mixin radio-color {
34
- --color--background: var(--l--theme--color--interactive--background--on-default--rest);
35
- --color--border: var(--l--theme--color--interactive--border--on-default--rest);
36
- --color--content: transparent;
37
-
38
- /* Rest */
39
- background-color: var(--color--background);
40
-
41
- & input[type='radio'] {
42
- border-color: var(--color--border);
43
- }
44
-
45
- &::after {
46
- background-color: var(--color--content);
47
- }
48
34
 
49
35
  /* Focus */
50
36
  &:has(input[type='radio']:focus-visible) {
51
- --color--background: var(--l--theme--color--interactive--background--on-default--focus);
52
- --color--border: var(--l--theme--color--interactive--border--on-default--focus);
37
+ --color--background: var(--l--theme--color--input--background--on-default--focus);
38
+ --color--border: var(--l--theme--color--input--border--on-default--focus);
53
39
  }
54
40
 
55
41
  /* Hover */
56
42
  &:has(input[type='radio']:hover) {
57
- --color--background: var(--l--theme--color--interactive--background--on-default--hover);
58
- --color--border: var(--l--theme--color--interactive--border--on-default--hover);
43
+ --color--background: var(--l--theme--color--input--background--on-default--hover);
44
+ --color--border: var(--l--theme--color--input--border--on-default--hover);
59
45
  }
60
46
 
61
47
  /* Checked: Rest */
62
48
  &:has(input[type='radio']:checked) {
63
- --color--background: var(--l--theme--color--interactive--background--on-default--checked--rest);
64
- --color--border: var(--l--theme--color--interactive--border--on-default--checked--rest);
65
- --color--content: var(--l--theme--color--interactive--content--on-default--checked--rest);
49
+ --color--background: var(--l--theme--color--input--background--on-default--checked--rest);
50
+ --color--border: var(--l--theme--color--input--border--on-default--checked--rest);
51
+ --color--content: var(--l--theme--color--input--content--on-default--checked--rest);
66
52
  }
67
53
 
68
54
  /* Checked: Focus */
69
55
  &:has(input[type='radio']:focus-visible:checked) {
70
- --color--background: var(--l--theme--color--interactive--background--on-default--checked--focus);
71
- --color--border: var(--l--theme--color--interactive--border--on-default--checked--focus);
72
- --color--content: var(--l--theme--color--interactive--content--on-default--checked--focus);
56
+ --color--background: var(--l--theme--color--input--background--on-default--checked--focus);
57
+ --color--border: var(--l--theme--color--input--border--on-default--checked--focus);
58
+ --color--content: var(--l--theme--color--input--content--on-default--checked--focus);
73
59
  }
74
60
 
75
61
  /* Checked: Hover */
76
62
  &:has(input[type='radio']:hover:checked) {
77
- --color--background: var(--l--theme--color--interactive--background--on-default--checked--hover);
78
- --color--border: var(--l--theme--color--interactive--border--on-default--checked--hover);
79
- --color--content: var(--l--theme--color--interactive--content--on-default--checked--hover);
63
+ --color--background: var(--l--theme--color--input--background--on-default--checked--hover);
64
+ --color--border: var(--l--theme--color--input--border--on-default--checked--hover);
65
+ --color--content: var(--l--theme--color--input--content--on-default--checked--hover);
80
66
  }
81
67
 
82
68
  /* Disabled */
@@ -84,11 +70,11 @@
84
70
  input[type='radio']:disabled,
85
71
  input[type='radio']:disabled:checked
86
72
  ) {
87
- --color--background: var(--l--theme--color--interactive--background--on-default--disabled);
88
- --color--border: var(--l--theme--color--interactive--border--on-default--disabled);
73
+ --color--background: var(--l--theme--color--input--background--on-default--disabled);
74
+ --color--border: var(--l--theme--color--input--border--on-default--disabled);
89
75
  }
90
76
 
91
77
  &:has(input[type='radio']:disabled:checked) {
92
- --color--content: var(--l--theme--color--interactive--content--on-default--disabled);
78
+ --color--content: var(--l--theme--color--input--content--on-default--disabled);
93
79
  }
94
80
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/components.radio-control",
3
- "version": "0.6.2",
3
+ "version": "0.7.0",
4
4
  "description": "Radio 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,7 @@
21
20
  "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
22
21
  },
23
22
  "dependencies": {
24
- "@withlayers/mixins": "0.14.1",
25
- "@withlayers/tokens": "0.22.0"
23
+ "@withlayers/tokens": "0.23.0"
26
24
  },
27
25
  "devDependencies": {
28
26
  "postcss-mixins": "^11.0.3",
package/dist/tokens.json DELETED
@@ -1,41 +0,0 @@
1
- {
2
- "radio-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
- "value": "{border.width.sm}"
13
- },
14
- "radius": {
15
- "$level": "property",
16
- "value": "{border.radius.full}"
17
- }
18
- },
19
- "size": {
20
- "$level": "property",
21
- "value": {
22
- "type": "fluid",
23
- "min": {
24
- "value": "1.3125rem",
25
- "breakpoint": {
26
- "value": "{breakpoint.xs}"
27
- }
28
- },
29
- "max": {
30
- "value": "{units.24}",
31
- "breakpoint": {
32
- "value": "{breakpoint.xl}"
33
- }
34
- },
35
- "root": {
36
- "value": "{typography.font-size.root}"
37
- }
38
- }
39
- }
40
- }
41
- }