@snack-uikit/toggles 0.9.5 → 0.9.6

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 +12 -12
  3. package/dist/components/Favorite/styles.module.css +8 -8
  4. package/dist/components/Radio/styles.module.css +8 -8
  5. package/dist/components/Switch/styles.module.css +12 -12
  6. package/dist/components/TogglePrivate/styles.module.css +1 -1
  7. package/package.json +2 -2
  8. package/src/components/styles.module.scss +1 -1
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.9.6 (2024-02-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.9.5 (2024-02-05)
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, #f9f9f9);
31
- border-color:var(--sys-neutral-decor-default, #dedede);
30
+ background-color:var(--sys-neutral-background1-level, #fafafc);
31
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
32
32
  border-style:solid;
33
33
  }
34
34
  .box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
35
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
36
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
35
+ background-color:var(--sys-neutral-background2-level, #ffffff);
36
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
37
37
  }
38
38
  .box[data-checked=false][data-disabled=true]{
39
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
40
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
39
+ background-color:var(--sys-neutral-background1-level, #fafafc);
40
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
41
41
  }
42
42
  .box[data-indeterminate=true], .box[data-checked=true]{
43
43
  background-color:var(--sys-primary-accent-default, #794ed3);
@@ -48,8 +48,8 @@
48
48
  border-color:var(--sys-primary-accent-hovered, #6851a6);
49
49
  }
50
50
  .box[data-indeterminate=true][data-disabled=true], .box[data-checked=true][data-disabled=true]{
51
- background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
52
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
51
+ background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
52
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
53
53
  }
54
54
  .box[data-size=s]{
55
55
  width:var(--size-toggles-s-container, 16px);
@@ -58,8 +58,8 @@
58
58
  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
59
59
  }
60
60
  .box[data-size=s] svg{
61
- width:var(--dimension-2m, 16px) !important;
62
- height:var(--dimension-2m, 16px) !important;
61
+ width:var(--size-icon-container-xs, 16px) !important;
62
+ height:var(--size-icon-container-xs, 16px) !important;
63
63
  }
64
64
  .box[data-size=m]{
65
65
  width:var(--size-toggles-m-box-checkbox, 20px);
@@ -68,8 +68,8 @@
68
68
  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
69
69
  }
70
70
  .box[data-size=m] svg{
71
- width:var(--dimension-3m, 24px) !important;
72
- height:var(--dimension-3m, 24px) !important;
71
+ width:var(--size-icon-container-s, 24px) !important;
72
+ height:var(--size-icon-container-s, 24px) !important;
73
73
  }
74
74
 
75
75
  .icon{
package/dist/components/Favorite/styles.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  align-items:center;
4
4
  justify-content:center;
5
5
  box-sizing:border-box;
6
- outline-color:var(--sys-available-complementary, #131313);
6
+ outline-color:var(--sys-available-complementary, #141415);
7
7
  }
8
8
  .container[data-size=s]{
9
9
  width:var(--size-toggles-s-container, 16px);
@@ -24,24 +24,24 @@
24
24
  outline-offset:var(--border-width-state-focus-s, 2px);
25
25
  }
26
26
  .container[data-checked=true]{
27
- outline-color:var(--sys-available-complementary, #131313);
27
+ outline-color:var(--sys-available-complementary, #141415);
28
28
  }
29
29
 
30
30
  .icon{
31
- color:var(--sys-neutral-text-light, #898989);
31
+ color:var(--sys-neutral-text-light, #868892);
32
32
  }
33
33
  .icon[data-hover=true]{
34
- color:var(--sys-neutral-text-support, #565656);
34
+ color:var(--sys-neutral-text-support, #656771);
35
35
  }
36
36
  .icon[data-icon=star][data-checked=true]{
37
- color:var(--sys-yellow-accent-default, #feb528);
37
+ color:var(--sys-yellow-accent-default, #fdca46);
38
38
  }
39
39
  .icon[data-icon=star][data-checked=true][data-focusvisible=true], .icon[data-icon=star][data-checked=true][data-hover=true]{
40
- color:var(--sys-yellow-accent-hovered, #d69542);
40
+ color:var(--sys-yellow-accent-hovered, #edb835);
41
41
  }
42
42
  .icon[data-icon=heart][data-checked=true]{
43
- color:var(--sys-red-accent-default, #d93f2f);
43
+ color:var(--sys-red-accent-default, #cd3c3c);
44
44
  }
45
45
  .icon[data-icon=heart][data-checked=true][data-focusvisible=true], .icon[data-icon=heart][data-checked=true][data-hover=true]{
46
- color:var(--sys-red-accent-hovered, #b9443a);
46
+ color:var(--sys-red-accent-hovered, #bb3c3a);
47
47
  }
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, #f9f9f9);
32
- border-color:var(--sys-neutral-decor-default, #dedede);
31
+ background-color:var(--sys-neutral-background1-level, #fafafc);
32
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
33
33
  border-style:solid;
34
34
  }
35
35
  .box[data-size=s]{
@@ -45,12 +45,12 @@
45
45
  border-radius:var(--radius-toggles-m-box-radio, 16px);
46
46
  }
47
47
  .box[data-focusvisible=true], .box[data-hover=true]{
48
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
49
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
48
+ background-color:var(--sys-neutral-background2-level, #ffffff);
49
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
50
50
  }
51
51
  .box[data-disabled=true]{
52
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
53
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
52
+ background-color:var(--sys-neutral-background1-level, #fafafc);
53
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
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, #e7e7e7);
62
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
63
63
  }
64
64
 
65
65
  .flag{
@@ -73,7 +73,7 @@
73
73
  background-color:var(--sys-primary-accent-hovered, #6851a6);
74
74
  }
75
75
  .flag[data-disabled=true]{
76
- background-color:var(--sys-neutral-text-disabled, #9e9e9e);
76
+ background-color:var(--sys-neutral-text-disabled, #b3b6bf);
77
77
  }
78
78
  .flag[data-checked=false]{
79
79
  display:none;
package/dist/components/Switch/styles.module.css CHANGED
@@ -25,7 +25,7 @@
25
25
 
26
26
  .box{
27
27
  position:relative;
28
- background-color:var(--sys-neutral-decor-activated, #b8b8b8);
28
+ background-color:var(--sys-neutral-decor-activated, #bfc2cc);
29
29
  }
30
30
  .box[data-size=s]{
31
31
  width:var(--size-toggles-s-box-switch-width, 24px);
@@ -38,10 +38,10 @@
38
38
  border-radius:var(--radius-toggles-m-box-switch, 16px);
39
39
  }
40
40
  .box[data-hover=true]{
41
- background-color:var(--sys-neutral-accent-hovered, #666666);
41
+ background-color:var(--sys-neutral-accent-hovered, #6a6c75);
42
42
  }
43
43
  .box[data-disabled=true]{
44
- background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
44
+ background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
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, #e7e7e7);
53
+ background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
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, #fdfdfd);
82
+ background-color:var(--sys-neutral-on-accent, #ffffff);
83
83
  }
84
84
  .flag[data-size=s]{
85
85
  border-radius:var(--radius-toggles-s-box-switch, 16px);
@@ -92,7 +92,7 @@
92
92
  height:var(--size-toggles-m-flag-switch, 16px);
93
93
  }
94
94
  .flag[data-disabled=true]{
95
- background-color:var(--sys-neutral-text-disabled, #9e9e9e);
95
+ background-color:var(--sys-neutral-text-disabled, #b3b6bf);
96
96
  }
97
97
 
98
98
  .flag_icon_off{
@@ -101,13 +101,13 @@
101
101
  left:50%;
102
102
  transform:translate(-50%, -50%);
103
103
  display:flex;
104
- color:var(--sys-neutral-text-disabled, #9e9e9e);
104
+ color:var(--sys-neutral-text-disabled, #b3b6bf);
105
105
  fill:transparent;
106
106
  transition:opacity 0.1s linear;
107
107
  opacity:1;
108
108
  }
109
109
  .flag_icon_off[data-hover=true]{
110
- color:var(--sys-neutral-accent-hovered, #666666);
110
+ color:var(--sys-neutral-accent-hovered, #6a6c75);
111
111
  }
112
112
  .flag_icon_off[data-checked=true]{
113
113
  color:var(--sys-primary-accent-default, #794ed3);
@@ -116,7 +116,7 @@
116
116
  color:var(--sys-primary-accent-hovered, #6851a6);
117
117
  }
118
118
  .flag_icon_off[data-disabled=true]{
119
- color:var(--sys-neutral-on-accent, #fdfdfd);
119
+ color:var(--sys-neutral-on-accent, #ffffff);
120
120
  }
121
121
  .flag_icon_off[data-checked=true]{
122
122
  opacity:0;
@@ -128,13 +128,13 @@
128
128
  left:50%;
129
129
  transform:translate(-50%, -50%);
130
130
  display:flex;
131
- color:var(--sys-neutral-text-disabled, #9e9e9e);
131
+ color:var(--sys-neutral-text-disabled, #b3b6bf);
132
132
  fill:transparent;
133
133
  transition:opacity 0.1s linear;
134
134
  opacity:0;
135
135
  }
136
136
  .flag_icon_on[data-hover=true]{
137
- color:var(--sys-neutral-accent-hovered, #666666);
137
+ color:var(--sys-neutral-accent-hovered, #6a6c75);
138
138
  }
139
139
  .flag_icon_on[data-checked=true]{
140
140
  color:var(--sys-primary-accent-default, #794ed3);
@@ -143,7 +143,7 @@
143
143
  color:var(--sys-primary-accent-hovered, #6851a6);
144
144
  }
145
145
  .flag_icon_on[data-disabled=true]{
146
- color:var(--sys-neutral-on-accent, #fdfdfd);
146
+ color:var(--sys-neutral-on-accent, #ffffff);
147
147
  }
148
148
  .flag_icon_on[data-checked=true]{
149
149
  opacity:1;
package/dist/components/TogglePrivate/styles.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
  .toggleLayout[data-disabled=true]{
11
11
  cursor:not-allowed;
12
- color:var(--sys-neutral-text-disabled, #9e9e9e);
12
+ color:var(--sys-neutral-text-disabled, #b3b6bf);
13
13
  }
14
14
 
15
15
  .togglePrivate{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toggles",
7
- "version": "0.9.5",
7
+ "version": "0.9.6",
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": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
41
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
42
42
  }
package/src/components/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
2
1
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
+ @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
3
3
 
4
4
  $sizes: 's', 'm';
5
5