@snack-uikit/toggles 0.10.1 → 0.10.2

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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/Checkbox/styles.module.css +9 -6
  3. package/dist/components/Radio/styles.module.css +6 -6
  4. package/dist/components/Switch/styles.module.css +11 -8
  5. package/package.json +2 -2
  6. package/src/components/Checkbox/styles.module.scss +13 -6
  7. package/src/components/Radio/styles.module.scss +8 -6
  8. package/src/components/Switch/styles.module.scss +14 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.10.2 (2024-07-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-00:** change checkbox, radio & switch colors ([9164c5a](https://github.com/cloud-ru-tech/snack-uikit/commit/9164c5a4d03b3777dd9c11f42c9fd43f6624b036))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.10.1 (2024-07-19)
7
18
 
8
19
  ### Only dependencies have been changed
package/dist/components/Checkbox/styles.module.css CHANGED
@@ -27,17 +27,17 @@
27
27
 
28
28
  .box{
29
29
  box-sizing:border-box;
30
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
31
- border-color:var(--sys-neutral-decor-default, #dde0ea);
30
+ background-color:var(--sys-neutral-background2-level, #ffffff);
31
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
32
32
  border-style:solid;
33
33
  }
34
34
  .box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
35
35
  background-color:var(--sys-neutral-background2-level, #ffffff);
36
- border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
36
+ border-color:var(--sys-neutral-accent-hovered, #6d707f);
37
37
  }
38
38
  .box[data-checked=false][data-disabled=true]{
39
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
40
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
39
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
40
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
41
41
  }
42
42
  .box[data-indeterminate=true], .box[data-checked=true]{
43
43
  background-color:var(--sys-primary-accent-default, #794ed3);
@@ -49,7 +49,7 @@
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-decor-disabled, #e6e8ef);
52
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
52
+ border-color:var(--sys-neutral-text-disabled, #aaaebd);
53
53
  }
54
54
  .box[data-size=s]{
55
55
  width:var(--size-toggles-s-container, 16px);
@@ -83,4 +83,7 @@
83
83
  }
84
84
  .icon[data-indeterminate=true], .icon[data-checked=true]{
85
85
  display:block;
86
+ }
87
+ .icon[data-disabled=true]{
88
+ color:var(--sys-neutral-decor-disabled, #e6e8ef);
86
89
  }
package/dist/components/Radio/styles.module.css CHANGED
@@ -28,8 +28,8 @@
28
28
  .box{
29
29
  position:relative;
30
30
  box-sizing:border-box;
31
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
32
- border-color:var(--sys-neutral-decor-default, #dde0ea);
31
+ background-color:var(--sys-neutral-background2-level, #ffffff);
32
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
33
33
  border-style:solid;
34
34
  }
35
35
  .box[data-size=s]{
@@ -46,11 +46,11 @@
46
46
  }
47
47
  .box[data-focusvisible=true], .box[data-hover=true]{
48
48
  background-color:var(--sys-neutral-background2-level, #ffffff);
49
- border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
49
+ border-color:var(--sys-neutral-accent-hovered, #6d707f);
50
50
  }
51
51
  .box[data-disabled=true]{
52
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
53
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
52
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
53
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
54
54
  }
55
55
  .box[data-checked=true]{
56
56
  border-color:var(--sys-primary-accent-default, #794ed3);
@@ -59,7 +59,7 @@
59
59
  border-color:var(--sys-primary-accent-hovered, #6851a6);
60
60
  }
61
61
  .box[data-checked=true][data-disabled=true]{
62
- border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
62
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
63
63
  }
64
64
 
65
65
  .flag{
package/dist/components/Switch/styles.module.css CHANGED
@@ -41,7 +41,7 @@
41
41
  background-color:var(--sys-neutral-accent-hovered, #6d707f);
42
42
  }
43
43
  .box[data-disabled=true]{
44
- background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
44
+ background-color:var(--sys-neutral-decor-default, #dde0ea);
45
45
  }
46
46
  .box[data-checked=true]{
47
47
  background-color:var(--sys-primary-accent-default, #794ed3);
@@ -50,7 +50,7 @@
50
50
  background-color:var(--sys-primary-accent-hovered, #6851a6);
51
51
  }
52
52
  .box[data-checked=true][data-disabled=true]{
53
- background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
53
+ background-color:var(--sys-neutral-decor-default, #dde0ea);
54
54
  }
55
55
 
56
56
  .containerFlag{
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  .flag{
82
- background-color:var(--sys-neutral-on-accent, #ffffff);
82
+ background-color:var(--sys-neutral-background2-level, #ffffff);
83
83
  }
84
84
  .flag[data-size=s]{
85
85
  border-radius:var(--radius-toggles-s-box-switch, 16px);
@@ -91,8 +91,11 @@
91
91
  width:var(--size-toggles-m-flag-switch, 16px);
92
92
  height:var(--size-toggles-m-flag-switch, 16px);
93
93
  }
94
+ .flag[data-focusvisible=true], .flag[data-hover=true]{
95
+ background-color:var(--sys-neutral-on-accent, #ffffff);
96
+ }
94
97
  .flag[data-disabled=true]{
95
- background-color:var(--sys-neutral-text-disabled, #aaaebd);
98
+ background-color:var(--sys-neutral-background2-level, #ffffff);
96
99
  }
97
100
 
98
101
  .flag_icon_off{
@@ -116,10 +119,10 @@
116
119
  color:var(--sys-primary-accent-hovered, #6851a6);
117
120
  }
118
121
  .flag_icon_off[data-disabled=true]{
119
- color:var(--sys-neutral-on-accent, #ffffff);
122
+ color:var(--sys-neutral-text-disabled, #aaaebd);
120
123
  }
121
124
  .flag_icon_off[data-disabled=true][data-hover=true]{
122
- color:var(--sys-neutral-on-accent, #ffffff);
125
+ color:var(--sys-neutral-text-disabled, #aaaebd);
123
126
  }
124
127
  .flag_icon_off[data-checked=true]{
125
128
  opacity:0;
@@ -146,10 +149,10 @@
146
149
  color:var(--sys-primary-accent-hovered, #6851a6);
147
150
  }
148
151
  .flag_icon_on[data-disabled=true]{
149
- color:var(--sys-neutral-on-accent, #ffffff);
152
+ color:var(--sys-neutral-text-disabled, #aaaebd);
150
153
  }
151
154
  .flag_icon_on[data-disabled=true][data-hover=true]{
152
- color:var(--sys-neutral-on-accent, #ffffff);
155
+ color:var(--sys-neutral-text-disabled, #aaaebd);
153
156
  }
154
157
  .flag_icon_on[data-checked=true]{
155
158
  opacity:1;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toggles",
7
- "version": "0.10.1",
7
+ "version": "0.10.2",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -38,5 +38,5 @@
38
38
  "merge-refs": "1.2.1",
39
39
  "uncontrollable": "8.0.0"
40
40
  },
41
- "gitHead": "4c153b54a2902cf20883d85b4dc753344313c6cb"
41
+ "gitHead": "d1b1ac720c6ea300a6c8cc3b4765609899200af7"
42
42
  }
package/src/components/Checkbox/styles.module.scss CHANGED
@@ -15,19 +15,20 @@ $icon-sizes: (
15
15
 
16
16
  .box {
17
17
  box-sizing: border-box;
18
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
19
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
18
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
19
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
20
20
  border-style: solid; // это наверное должно быть в композитном токене box
21
21
 
22
22
  &[data-checked=false] {
23
23
  &[data-focusvisible=true],
24
24
  &[data-hover=true] {
25
25
  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
26
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
26
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
27
27
  }
28
+
28
29
  &[data-disabled=true] {
29
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
30
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
30
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
31
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
31
32
  }
32
33
  }
33
34
 
@@ -35,14 +36,16 @@ $icon-sizes: (
35
36
  &[data-checked=true] {
36
37
  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
37
38
  border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
39
+
38
40
  &[data-focusvisible=true],
39
41
  &[data-hover=true] {
40
42
  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
41
43
  border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
42
44
  }
45
+
43
46
  &[data-disabled=true] {
44
47
  background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
45
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
48
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
46
49
  }
47
50
  }
48
51
 
@@ -74,4 +77,8 @@ $icon-sizes: (
74
77
  &[data-checked=true] {
75
78
  display: block;
76
79
  }
80
+
81
+ &[data-disabled=true] {
82
+ color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
83
+ }
77
84
  }
package/src/components/Radio/styles.module.scss CHANGED
@@ -13,8 +13,8 @@ $sizes: 's', 'm';
13
13
 
14
14
  box-sizing: border-box;
15
15
 
16
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
17
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
16
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
17
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
18
18
  border-style: solid; // это наверное должно быть в композитном токене box
19
19
 
20
20
  @each $size in $sizes {
@@ -26,22 +26,24 @@ $sizes: 's', 'm';
26
26
  &[data-focusvisible=true],
27
27
  &[data-hover=true] {
28
28
  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
29
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
29
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
30
30
  }
31
31
 
32
32
  &[data-disabled=true] {
33
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
34
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
33
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
34
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
35
35
  }
36
36
 
37
37
  &[data-checked=true] {
38
38
  border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
39
+
39
40
  &[data-focusvisible=true],
40
41
  &[data-hover=true] {
41
42
  border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
42
43
  }
44
+
43
45
  &[data-disabled=true] {
44
- border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
46
+ border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
45
47
  }
46
48
  }
47
49
  }
package/src/components/Switch/styles.module.scss CHANGED
@@ -24,16 +24,18 @@ $switchAnimationDuration: 0.1s;
24
24
  }
25
25
 
26
26
  &[data-disabled='true'] {
27
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
27
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
28
28
  }
29
29
 
30
30
  &[data-checked='true'] {
31
31
  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
32
+
32
33
  &[data-hover='true'] {
33
34
  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
34
35
  }
36
+
35
37
  &[data-disabled='true'] {
36
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
38
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
37
39
  }
38
40
  }
39
41
  }
@@ -61,7 +63,7 @@ $switchAnimationDuration: 0.1s;
61
63
  }
62
64
 
63
65
  .flag {
64
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
66
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
65
67
 
66
68
  @each $size in $sizes {
67
69
  &[data-size='#{$size}'] {
@@ -69,8 +71,13 @@ $switchAnimationDuration: 0.1s;
69
71
  }
70
72
  }
71
73
 
74
+ &[data-focusvisible=true],
75
+ &[data-hover=true] {
76
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
77
+ }
78
+
72
79
  &[data-disabled='true'] {
73
- background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
80
+ background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
74
81
  }
75
82
  }
76
83
 
@@ -94,16 +101,17 @@ $switchAnimationDuration: 0.1s;
94
101
 
95
102
  &[data-checked='true'] {
96
103
  color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
104
+
97
105
  &[data-hover='true'] {
98
106
  color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
99
107
  }
100
108
  }
101
109
 
102
110
  &[data-disabled='true'] {
103
- color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
111
+ color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
104
112
 
105
113
  &[data-hover='true'] {
106
- color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
114
+ color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
107
115
  }
108
116
  }
109
117
  }