@snack-uikit/card 0.17.0 → 0.17.1-preview-ef227a87.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 (7) hide show
  1. package/dist/cjs/components/Card/styles.module.css +7 -7
  2. package/dist/cjs/components/FunctionBadge/styles.module.css +1 -1
  3. package/dist/esm/components/Card/styles.module.css +7 -7
  4. package/dist/esm/components/FunctionBadge/styles.module.css +1 -1
  5. package/package.json +7 -7
  6. package/src/components/Card/styles.module.scss +5 -1
  7. package/src/components/FunctionBadge/styles.module.scss +3 -2
package/dist/cjs/components/Card/styles.module.css CHANGED
@@ -46,20 +46,20 @@
46
46
  outline-color:var(--sys-neutral-decor-default, #dde0ea);
47
47
  outline-width:var(--border-width-card-container, 1px);
48
48
  }
49
- .card:hover, .card:focus-visible{
49
+ .card:hover, .card:focus, .card:focus-visible{
50
50
  --snack-ui-card-background-color:var(--sys-neutral-background2-level, #ffffff);
51
51
  }
52
- .card:focus-visible{
52
+ .card:focus, .card:focus-visible{
53
53
  outline-width:var(--border-state-focus-l-border-width, 4px);
54
54
  outline-style:var(--border-state-focus-l-border-style, solid);
55
55
  outline-color:var(--border-state-focus-l-border-color, );
56
56
  background-color:var(--sys-neutral-background2-level, #ffffff);
57
57
  outline-color:var(--sys-primary-accent-default, #794ed3);
58
58
  }
59
- .card:focus-visible .functionBadgeWrapper{
59
+ .card:focus .functionBadgeWrapper, .card:focus-visible .functionBadgeWrapper{
60
60
  display:block;
61
61
  }
62
- .card:focus-visible .check{
62
+ .card:focus .check, .card:focus-visible .check{
63
63
  background-color:var(--sys-primary-accent-default, #794ed3);
64
64
  }
65
65
  .card:focus-within .functionBadgeWrapper{
@@ -90,13 +90,13 @@
90
90
  color:var(--sys-primary-on-accent, #fdfbff);
91
91
  background-color:var(--sys-primary-accent-default, #794ed3);
92
92
  }
93
- .card[data-checked]:focus-visible{
93
+ .card[data-checked]:focus-visible, .card[data-checked]:focus{
94
94
  outline-width:var(--border-state-focus-l-border-width, 4px);
95
95
  outline-style:var(--border-state-focus-l-border-style, solid);
96
96
  outline-color:var(--border-state-focus-l-border-color, );
97
97
  outline-color:var(--sys-primary-accent-default, #794ed3);
98
98
  }
99
- .card[data-checked]:focus-visible .check{
99
+ .card[data-checked]:focus-visible .check, .card[data-checked]:focus .check{
100
100
  color:var(--sys-primary-on-accent, #fdfbff);
101
101
  background-color:var(--sys-primary-accent-default, #794ed3);
102
102
  }
@@ -124,7 +124,7 @@
124
124
  outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
125
125
  box-shadow:none;
126
126
  }
127
- .card[data-pointer][data-outline]:focus-visible{
127
+ .card[data-pointer][data-outline]:focus, .card[data-pointer][data-outline]:focus-visible{
128
128
  outline-width:var(--border-state-focus-l-border-width, 4px);
129
129
  outline-style:var(--border-state-focus-l-border-style, solid);
130
130
  outline-color:var(--border-state-focus-l-border-color, );
package/dist/cjs/components/FunctionBadge/styles.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  .button:hover{
16
16
  color:var(--sys-neutral-text-support, #6d707f);
17
17
  }
18
- .button:focus-visible{
18
+ .button:focus, .button:focus-visible{
19
19
  outline-width:var(--border-state-focus-s-border-width, 2px);
20
20
  outline-style:var(--border-state-focus-s-border-style, solid);
21
21
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/Card/styles.module.css CHANGED
@@ -46,20 +46,20 @@
46
46
  outline-color:var(--sys-neutral-decor-default, #dde0ea);
47
47
  outline-width:var(--border-width-card-container, 1px);
48
48
  }
49
- .card:hover, .card:focus-visible{
49
+ .card:hover, .card:focus, .card:focus-visible{
50
50
  --snack-ui-card-background-color:var(--sys-neutral-background2-level, #ffffff);
51
51
  }
52
- .card:focus-visible{
52
+ .card:focus, .card:focus-visible{
53
53
  outline-width:var(--border-state-focus-l-border-width, 4px);
54
54
  outline-style:var(--border-state-focus-l-border-style, solid);
55
55
  outline-color:var(--border-state-focus-l-border-color, );
56
56
  background-color:var(--sys-neutral-background2-level, #ffffff);
57
57
  outline-color:var(--sys-primary-accent-default, #794ed3);
58
58
  }
59
- .card:focus-visible .functionBadgeWrapper{
59
+ .card:focus .functionBadgeWrapper, .card:focus-visible .functionBadgeWrapper{
60
60
  display:block;
61
61
  }
62
- .card:focus-visible .check{
62
+ .card:focus .check, .card:focus-visible .check{
63
63
  background-color:var(--sys-primary-accent-default, #794ed3);
64
64
  }
65
65
  .card:focus-within .functionBadgeWrapper{
@@ -90,13 +90,13 @@
90
90
  color:var(--sys-primary-on-accent, #fdfbff);
91
91
  background-color:var(--sys-primary-accent-default, #794ed3);
92
92
  }
93
- .card[data-checked]:focus-visible{
93
+ .card[data-checked]:focus-visible, .card[data-checked]:focus{
94
94
  outline-width:var(--border-state-focus-l-border-width, 4px);
95
95
  outline-style:var(--border-state-focus-l-border-style, solid);
96
96
  outline-color:var(--border-state-focus-l-border-color, );
97
97
  outline-color:var(--sys-primary-accent-default, #794ed3);
98
98
  }
99
- .card[data-checked]:focus-visible .check{
99
+ .card[data-checked]:focus-visible .check, .card[data-checked]:focus .check{
100
100
  color:var(--sys-primary-on-accent, #fdfbff);
101
101
  background-color:var(--sys-primary-accent-default, #794ed3);
102
102
  }
@@ -124,7 +124,7 @@
124
124
  outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
125
125
  box-shadow:none;
126
126
  }
127
- .card[data-pointer][data-outline]:focus-visible{
127
+ .card[data-pointer][data-outline]:focus, .card[data-pointer][data-outline]:focus-visible{
128
128
  outline-width:var(--border-state-focus-l-border-width, 4px);
129
129
  outline-style:var(--border-state-focus-l-border-style, solid);
130
130
  outline-color:var(--border-state-focus-l-border-color, );
package/dist/esm/components/FunctionBadge/styles.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  .button:hover{
16
16
  color:var(--sys-neutral-text-support, #6d707f);
17
17
  }
18
- .button:focus-visible{
18
+ .button:focus, .button:focus-visible{
19
19
  outline-width:var(--border-state-focus-s-border-width, 2px);
20
20
  outline-style:var(--border-state-focus-s-border-style, solid);
21
21
  outline-color:var(--border-state-focus-s-border-color, );
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Card",
7
- "version": "0.17.0",
7
+ "version": "0.17.1-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,17 +36,17 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.19.9",
39
+ "@snack-uikit/button": "0.19.10-preview-ef227a87.0",
40
40
  "@snack-uikit/icon-predefined": "0.7.5",
41
41
  "@snack-uikit/icons": "0.26.2",
42
- "@snack-uikit/list": "0.27.7",
43
- "@snack-uikit/promo-tag": "0.7.3",
44
- "@snack-uikit/tag": "0.13.0",
45
- "@snack-uikit/truncate-string": "0.6.18",
42
+ "@snack-uikit/list": "0.27.8-preview-ef227a87.0",
43
+ "@snack-uikit/promo-tag": "0.7.4-preview-ef227a87.0",
44
+ "@snack-uikit/tag": "0.13.1-preview-ef227a87.0",
45
+ "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
46
46
  "@snack-uikit/typography": "0.8.6",
47
47
  "@snack-uikit/utils": "3.8.1",
48
48
  "classnames": "2.5.1",
49
49
  "merge-refs": "1.3.0"
50
50
  },
51
- "gitHead": "f429c3e85872bce0e7a9b06054840b6f761a546c"
51
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
52
52
  }
package/src/components/Card/styles.module.scss CHANGED
@@ -64,10 +64,12 @@ $sizes: 's', 'm', 'l';
64
64
  }
65
65
 
66
66
  &:hover,
67
+ &:focus,
67
68
  &:focus-visible {
68
69
  --snack-ui-card-background-color: #{styles-tokens-card.$sys-neutral-background2-level};
69
70
  }
70
71
 
72
+ &:focus,
71
73
  &:focus-visible {
72
74
  @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
73
75
 
@@ -119,7 +121,8 @@ $sizes: 's', 'm', 'l';
119
121
  }
120
122
  }
121
123
 
122
- &[data-checked]:focus-visible {
124
+ &[data-checked]:focus-visible,
125
+ &[data-checked]:focus {
123
126
  @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
124
127
 
125
128
  outline-color: styles-tokens-card.$sys-primary-accent-default;
@@ -163,6 +166,7 @@ $sizes: 's', 'm', 'l';
163
166
  box-shadow: none;
164
167
  }
165
168
 
169
+ &:focus,
166
170
  &:focus-visible {
167
171
  @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);
168
172
 
package/src/components/FunctionBadge/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
2
- @use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .button {
5
5
  @include styles-tokens-card.composite-var(styles-tokens-card.$card-button);
@@ -22,6 +22,7 @@
22
22
  color: styles-tokens-card.$sys-neutral-text-support;
23
23
  }
24
24
 
25
+ &:focus,
25
26
  &:focus-visible {
26
27
  @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);
27
28
 
@@ -49,4 +50,4 @@
49
50
 
50
51
  li.item {
51
52
  width: max-content;
52
- }
53
+ }