@snack-uikit/toggles 0.13.20 → 0.13.21-preview-05f26bf6.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.
@@ -7,13 +7,13 @@
7
7
  .container[data-size=s]{
8
8
  width:var(--size-toggles-s-container, 16px);
9
9
  height:var(--size-toggles-s-container, 16px);
10
- border-radius:var(--radius-toggles-s-box-checkbox, 6px);
10
+ border-radius:var(--radius-toggles-s-box-checkbox, 4px);
11
11
  border-width:var(--border-width-toggles-single, 2px);
12
12
  }
13
13
  .container[data-size=m]{
14
14
  width:var(--size-toggles-m-container, 24px);
15
15
  height:var(--size-toggles-m-container, 24px);
16
- border-radius:var(--radius-toggles-m-box-checkbox, 8px);
16
+ border-radius:var(--radius-toggles-m-box-checkbox, 4px);
17
17
  border-width:var(--border-width-toggles-single, 2px);
18
18
  }
19
19
  .container[data-focusvisible=true]{
@@ -28,7 +28,7 @@
28
28
  .box{
29
29
  box-sizing:border-box;
30
30
  background-color:var(--sys-neutral-background2-level, #ffffff);
31
- border-color:var(--sys-neutral-decor-activated, #bec2cf);
31
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
32
32
  border-style:solid;
33
33
  }
34
34
  .box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
@@ -40,12 +40,12 @@
40
40
  border-color:var(--sys-neutral-decor-default, #dde0ea);
41
41
  }
42
42
  .box[data-indeterminate=true], .box[data-checked=true]{
43
- background-color:var(--sys-primary-accent-default, #794ed3);
44
- border-color:var(--sys-primary-accent-default, #794ed3);
43
+ background-color:var(--sys-primary-accent-default, #389f74);
44
+ border-color:var(--sys-primary-accent-default, #389f74);
45
45
  }
46
46
  .box[data-indeterminate=true][data-focusvisible=true], .box[data-indeterminate=true][data-hover=true], .box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
47
- background-color:var(--sys-primary-accent-hovered, #6851a6);
48
- border-color:var(--sys-primary-accent-hovered, #6851a6);
47
+ background-color:var(--sys-primary-accent-hovered, #37946e);
48
+ border-color:var(--sys-primary-accent-hovered, #37946e);
49
49
  }
50
50
  .box[data-indeterminate=true][data-disabled=true], .box[data-checked=true][data-disabled=true]{
51
51
  background-color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -55,7 +55,7 @@
55
55
  width:var(--size-toggles-s-container, 16px);
56
56
  height:var(--size-toggles-s-container, 16px);
57
57
  border-width:var(--border-width-toggles-single, 2px);
58
- border-radius:var(--radius-toggles-s-box-checkbox, 6px);
58
+ border-radius:var(--radius-toggles-s-box-checkbox, 4px);
59
59
  }
60
60
  .box[data-size=s] svg{
61
61
  width:var(--size-icon-container-xs, 16px) !important;
@@ -65,7 +65,7 @@
65
65
  width:var(--size-toggles-m-box-checkbox, 20px);
66
66
  height:var(--size-toggles-m-box-checkbox, 20px);
67
67
  border-width:var(--border-width-toggles-single, 2px);
68
- border-radius:var(--radius-toggles-m-box-checkbox, 8px);
68
+ border-radius:var(--radius-toggles-m-box-checkbox, 4px);
69
69
  }
70
70
  .box[data-size=m] svg{
71
71
  width:var(--size-icon-container-s, 24px) !important;
@@ -79,7 +79,7 @@
79
79
  display:none;
80
80
  width:100%;
81
81
  height:100%;
82
- color:var(--sys-primary-on-accent, #fdfbff);
82
+ color:var(--sys-primary-on-accent, #fbfffc);
83
83
  }
84
84
  .icon[data-indeterminate=true], .icon[data-checked=true]{
85
85
  display:block;
@@ -8,12 +8,12 @@
8
8
  .container[data-size=s]{
9
9
  width:var(--size-toggles-s-container, 16px);
10
10
  height:var(--size-toggles-s-container, 16px);
11
- border-radius:var(--radius-toggles-s-box-checkbox, 6px);
11
+ border-radius:var(--radius-toggles-s-box-checkbox, 4px);
12
12
  }
13
13
  .container[data-size=m]{
14
14
  width:var(--size-toggles-m-container, 24px);
15
15
  height:var(--size-toggles-m-container, 24px);
16
- border-radius:var(--radius-toggles-m-box-checkbox, 8px);
16
+ border-radius:var(--radius-toggles-m-box-checkbox, 4px);
17
17
  }
18
18
  .container[data-focusvisible=true]{
19
19
  outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -29,7 +29,7 @@
29
29
  position:relative;
30
30
  box-sizing:border-box;
31
31
  background-color:var(--sys-neutral-background2-level, #ffffff);
32
- border-color:var(--sys-neutral-decor-activated, #bec2cf);
32
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
33
33
  border-style:solid;
34
34
  }
35
35
  .box[data-size=s]{
@@ -53,10 +53,10 @@
53
53
  border-color:var(--sys-neutral-decor-default, #dde0ea);
54
54
  }
55
55
  .box[data-checked=true]{
56
- border-color:var(--sys-primary-accent-default, #794ed3);
56
+ border-color:var(--sys-primary-accent-default, #389f74);
57
57
  }
58
58
  .box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
59
- border-color:var(--sys-primary-accent-hovered, #6851a6);
59
+ border-color:var(--sys-primary-accent-hovered, #37946e);
60
60
  }
61
61
  .box[data-checked=true][data-disabled=true]{
62
62
  border-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -67,10 +67,10 @@
67
67
  top:50%;
68
68
  left:50%;
69
69
  transform:translate(-50%, -50%);
70
- background-color:var(--sys-primary-accent-default, #794ed3);
70
+ background-color:var(--sys-primary-accent-default, #389f74);
71
71
  }
72
72
  .flag[data-hover=true]{
73
- background-color:var(--sys-primary-accent-hovered, #6851a6);
73
+ background-color:var(--sys-primary-accent-hovered, #37946e);
74
74
  }
75
75
  .flag[data-disabled=true]{
76
76
  background-color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -26,7 +26,7 @@
26
26
 
27
27
  .box{
28
28
  position:relative;
29
- background-color:var(--sys-neutral-decor-activated, #bec2cf);
29
+ background-color:var(--sys-neutral-decor-activated, #b6bac7);
30
30
  }
31
31
  .box[data-size=s]{
32
32
  width:var(--size-toggles-s-box-switch-width, 24px);
@@ -45,10 +45,10 @@
45
45
  background-color:var(--sys-neutral-decor-default, #dde0ea);
46
46
  }
47
47
  .box[data-checked=true]{
48
- background-color:var(--sys-primary-accent-default, #794ed3);
48
+ background-color:var(--sys-primary-accent-default, #389f74);
49
49
  }
50
50
  .box[data-checked=true][data-hover=true]{
51
- background-color:var(--sys-primary-accent-hovered, #6851a6);
51
+ background-color:var(--sys-primary-accent-hovered, #37946e);
52
52
  }
53
53
  .box[data-checked=true][data-disabled=true]{
54
54
  background-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -114,10 +114,10 @@
114
114
  color:var(--sys-neutral-accent-hovered, #6d707f);
115
115
  }
116
116
  .flag_icon_off[data-checked=true]{
117
- color:var(--sys-primary-accent-default, #794ed3);
117
+ color:var(--sys-primary-accent-default, #389f74);
118
118
  }
119
119
  .flag_icon_off[data-checked=true][data-hover=true]{
120
- color:var(--sys-primary-accent-hovered, #6851a6);
120
+ color:var(--sys-primary-accent-hovered, #37946e);
121
121
  }
122
122
  .flag_icon_off[data-disabled=true]{
123
123
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -144,10 +144,10 @@
144
144
  color:var(--sys-neutral-accent-hovered, #6d707f);
145
145
  }
146
146
  .flag_icon_on[data-checked=true]{
147
- color:var(--sys-primary-accent-default, #794ed3);
147
+ color:var(--sys-primary-accent-default, #389f74);
148
148
  }
149
149
  .flag_icon_on[data-checked=true][data-hover=true]{
150
- color:var(--sys-primary-accent-hovered, #6851a6);
150
+ color:var(--sys-primary-accent-hovered, #37946e);
151
151
  }
152
152
  .flag_icon_on[data-disabled=true]{
153
153
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -7,13 +7,13 @@
7
7
  .container[data-size=s]{
8
8
  width:var(--size-toggles-s-container, 16px);
9
9
  height:var(--size-toggles-s-container, 16px);
10
- border-radius:var(--radius-toggles-s-box-checkbox, 6px);
10
+ border-radius:var(--radius-toggles-s-box-checkbox, 4px);
11
11
  border-width:var(--border-width-toggles-single, 2px);
12
12
  }
13
13
  .container[data-size=m]{
14
14
  width:var(--size-toggles-m-container, 24px);
15
15
  height:var(--size-toggles-m-container, 24px);
16
- border-radius:var(--radius-toggles-m-box-checkbox, 8px);
16
+ border-radius:var(--radius-toggles-m-box-checkbox, 4px);
17
17
  border-width:var(--border-width-toggles-single, 2px);
18
18
  }
19
19
  .container[data-focusvisible=true]{
@@ -28,7 +28,7 @@
28
28
  .box{
29
29
  box-sizing:border-box;
30
30
  background-color:var(--sys-neutral-background2-level, #ffffff);
31
- border-color:var(--sys-neutral-decor-activated, #bec2cf);
31
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
32
32
  border-style:solid;
33
33
  }
34
34
  .box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
@@ -40,12 +40,12 @@
40
40
  border-color:var(--sys-neutral-decor-default, #dde0ea);
41
41
  }
42
42
  .box[data-indeterminate=true], .box[data-checked=true]{
43
- background-color:var(--sys-primary-accent-default, #794ed3);
44
- border-color:var(--sys-primary-accent-default, #794ed3);
43
+ background-color:var(--sys-primary-accent-default, #389f74);
44
+ border-color:var(--sys-primary-accent-default, #389f74);
45
45
  }
46
46
  .box[data-indeterminate=true][data-focusvisible=true], .box[data-indeterminate=true][data-hover=true], .box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
47
- background-color:var(--sys-primary-accent-hovered, #6851a6);
48
- border-color:var(--sys-primary-accent-hovered, #6851a6);
47
+ background-color:var(--sys-primary-accent-hovered, #37946e);
48
+ border-color:var(--sys-primary-accent-hovered, #37946e);
49
49
  }
50
50
  .box[data-indeterminate=true][data-disabled=true], .box[data-checked=true][data-disabled=true]{
51
51
  background-color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -55,7 +55,7 @@
55
55
  width:var(--size-toggles-s-container, 16px);
56
56
  height:var(--size-toggles-s-container, 16px);
57
57
  border-width:var(--border-width-toggles-single, 2px);
58
- border-radius:var(--radius-toggles-s-box-checkbox, 6px);
58
+ border-radius:var(--radius-toggles-s-box-checkbox, 4px);
59
59
  }
60
60
  .box[data-size=s] svg{
61
61
  width:var(--size-icon-container-xs, 16px) !important;
@@ -65,7 +65,7 @@
65
65
  width:var(--size-toggles-m-box-checkbox, 20px);
66
66
  height:var(--size-toggles-m-box-checkbox, 20px);
67
67
  border-width:var(--border-width-toggles-single, 2px);
68
- border-radius:var(--radius-toggles-m-box-checkbox, 8px);
68
+ border-radius:var(--radius-toggles-m-box-checkbox, 4px);
69
69
  }
70
70
  .box[data-size=m] svg{
71
71
  width:var(--size-icon-container-s, 24px) !important;
@@ -79,7 +79,7 @@
79
79
  display:none;
80
80
  width:100%;
81
81
  height:100%;
82
- color:var(--sys-primary-on-accent, #fdfbff);
82
+ color:var(--sys-primary-on-accent, #fbfffc);
83
83
  }
84
84
  .icon[data-indeterminate=true], .icon[data-checked=true]{
85
85
  display:block;
@@ -8,12 +8,12 @@
8
8
  .container[data-size=s]{
9
9
  width:var(--size-toggles-s-container, 16px);
10
10
  height:var(--size-toggles-s-container, 16px);
11
- border-radius:var(--radius-toggles-s-box-checkbox, 6px);
11
+ border-radius:var(--radius-toggles-s-box-checkbox, 4px);
12
12
  }
13
13
  .container[data-size=m]{
14
14
  width:var(--size-toggles-m-container, 24px);
15
15
  height:var(--size-toggles-m-container, 24px);
16
- border-radius:var(--radius-toggles-m-box-checkbox, 8px);
16
+ border-radius:var(--radius-toggles-m-box-checkbox, 4px);
17
17
  }
18
18
  .container[data-focusvisible=true]{
19
19
  outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -29,7 +29,7 @@
29
29
  position:relative;
30
30
  box-sizing:border-box;
31
31
  background-color:var(--sys-neutral-background2-level, #ffffff);
32
- border-color:var(--sys-neutral-decor-activated, #bec2cf);
32
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
33
33
  border-style:solid;
34
34
  }
35
35
  .box[data-size=s]{
@@ -53,10 +53,10 @@
53
53
  border-color:var(--sys-neutral-decor-default, #dde0ea);
54
54
  }
55
55
  .box[data-checked=true]{
56
- border-color:var(--sys-primary-accent-default, #794ed3);
56
+ border-color:var(--sys-primary-accent-default, #389f74);
57
57
  }
58
58
  .box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
59
- border-color:var(--sys-primary-accent-hovered, #6851a6);
59
+ border-color:var(--sys-primary-accent-hovered, #37946e);
60
60
  }
61
61
  .box[data-checked=true][data-disabled=true]{
62
62
  border-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -67,10 +67,10 @@
67
67
  top:50%;
68
68
  left:50%;
69
69
  transform:translate(-50%, -50%);
70
- background-color:var(--sys-primary-accent-default, #794ed3);
70
+ background-color:var(--sys-primary-accent-default, #389f74);
71
71
  }
72
72
  .flag[data-hover=true]{
73
- background-color:var(--sys-primary-accent-hovered, #6851a6);
73
+ background-color:var(--sys-primary-accent-hovered, #37946e);
74
74
  }
75
75
  .flag[data-disabled=true]{
76
76
  background-color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -26,7 +26,7 @@
26
26
 
27
27
  .box{
28
28
  position:relative;
29
- background-color:var(--sys-neutral-decor-activated, #bec2cf);
29
+ background-color:var(--sys-neutral-decor-activated, #b6bac7);
30
30
  }
31
31
  .box[data-size=s]{
32
32
  width:var(--size-toggles-s-box-switch-width, 24px);
@@ -45,10 +45,10 @@
45
45
  background-color:var(--sys-neutral-decor-default, #dde0ea);
46
46
  }
47
47
  .box[data-checked=true]{
48
- background-color:var(--sys-primary-accent-default, #794ed3);
48
+ background-color:var(--sys-primary-accent-default, #389f74);
49
49
  }
50
50
  .box[data-checked=true][data-hover=true]{
51
- background-color:var(--sys-primary-accent-hovered, #6851a6);
51
+ background-color:var(--sys-primary-accent-hovered, #37946e);
52
52
  }
53
53
  .box[data-checked=true][data-disabled=true]{
54
54
  background-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -114,10 +114,10 @@
114
114
  color:var(--sys-neutral-accent-hovered, #6d707f);
115
115
  }
116
116
  .flag_icon_off[data-checked=true]{
117
- color:var(--sys-primary-accent-default, #794ed3);
117
+ color:var(--sys-primary-accent-default, #389f74);
118
118
  }
119
119
  .flag_icon_off[data-checked=true][data-hover=true]{
120
- color:var(--sys-primary-accent-hovered, #6851a6);
120
+ color:var(--sys-primary-accent-hovered, #37946e);
121
121
  }
122
122
  .flag_icon_off[data-disabled=true]{
123
123
  color:var(--sys-neutral-text-disabled, #aaaebd);
@@ -144,10 +144,10 @@
144
144
  color:var(--sys-neutral-accent-hovered, #6d707f);
145
145
  }
146
146
  .flag_icon_on[data-checked=true]{
147
- color:var(--sys-primary-accent-default, #794ed3);
147
+ color:var(--sys-primary-accent-default, #389f74);
148
148
  }
149
149
  .flag_icon_on[data-checked=true][data-hover=true]{
150
- color:var(--sys-primary-accent-hovered, #6851a6);
150
+ color:var(--sys-primary-accent-hovered, #37946e);
151
151
  }
152
152
  .flag_icon_on[data-disabled=true]{
153
153
  color:var(--sys-neutral-text-disabled, #aaaebd);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toggles",
7
- "version": "0.13.20",
7
+ "version": "0.13.21-preview-05f26bf6.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,10 +37,10 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/icons": "0.27.2",
40
- "@snack-uikit/utils": "3.10.1",
40
+ "@snack-uikit/utils": "3.10.2-preview-05f26bf6.0",
41
41
  "classnames": "2.5.1",
42
42
  "merge-refs": "1.3.0",
43
43
  "uncontrollable": "8.0.4"
44
44
  },
45
- "gitHead": "2871794a46212ecbb3bc0002d7d8912310643332"
45
+ "gitHead": "6fee645f4608f0384f0e44df312a82b4120739ac"
46
46
  }