@snack-uikit/tag 0.15.7 → 0.15.8

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/TagBase/styles.module.css +13 -13
  3. package/dist/cjs/components/TagLink/styles.module.css +8 -8
  4. package/dist/cjs/helperComponents/TagMore/styles.module.css +7 -7
  5. package/dist/cjs/helperComponents/TagRowSimple/styles.module.css +2 -2
  6. package/dist/cjs/helperComponents/TagRowTruncated/styles.module.css +6 -6
  7. package/dist/esm/components/TagBase/styles.module.css +13 -13
  8. package/dist/esm/components/TagLink/styles.module.css +8 -8
  9. package/dist/esm/helperComponents/TagMore/styles.module.css +7 -7
  10. package/dist/esm/helperComponents/TagRowSimple/styles.module.css +2 -2
  11. package/dist/esm/helperComponents/TagRowTruncated/styles.module.css +6 -6
  12. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.15.8 (2025-08-26)
7
+
8
+ **Note:** Version bump only for package @snack-uikit/tag
9
+
10
+
11
+
12
+
13
+
6
14
  ## 0.15.7 (2025-07-16)
7
15
 
8
16
  ### Only dependencies have been changed
package/dist/cjs/components/TagBase/styles.module.css CHANGED
@@ -55,16 +55,16 @@
55
55
  width:var(--size-tag-xs, 24px);
56
56
  }
57
57
  .tag[data-size=s]{
58
- padding-left:var(--space-tag-s-from-label, 16px);
59
- padding-right:var(--space-tag-s-from-label, 16px);
58
+ padding-left:var(--space-tag-s-from-label, 8px);
59
+ padding-right:var(--space-tag-s-from-label, 8px);
60
60
  height:var(--size-tag-s, 32px);
61
- border-radius:var(--radius-tag-s, 8px);
61
+ border-radius:var(--radius-tag-s, 4px);
62
62
  }
63
63
  .tag[data-size=s][data-removable=true]{
64
- padding-left:var(--space-tag-s-from-label, 16px);
64
+ padding-left:var(--space-tag-s-from-label, 8px);
65
65
  padding-right:var(--space-tag-s-from-button, 0px);
66
66
  height:var(--size-tag-s, 32px);
67
- border-radius:var(--radius-tag-s, 8px);
67
+ border-radius:var(--radius-tag-s, 4px);
68
68
  gap:var(--space-tag-s-gap, 2px);
69
69
  }
70
70
  .tag[data-size=s] .label{
@@ -76,7 +76,7 @@
76
76
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
77
77
  }
78
78
  .tag[data-size=s] .tagButton{
79
- border-radius:var(--radius-tag-s, 8px);
79
+ border-radius:var(--radius-tag-s, 4px);
80
80
  height:var(--size-tag-s, 32px);
81
81
  width:var(--size-tag-s, 32px);
82
82
  }
@@ -99,28 +99,28 @@
99
99
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
100
100
  }
101
101
  .tag[data-appearance=neutral] .tagButton:active{
102
- background-color:var(--sys-neutral-decor-activated, #bec2cf);
102
+ background-color:var(--sys-neutral-decor-activated, #b6bac7);
103
103
  }
104
104
  .tag[data-appearance=primary]{
105
- background-color:var(--sys-primary-decor-default, #ebdefd);
105
+ background-color:var(--sys-primary-decor-default, #caeadb);
106
106
  }
107
107
  .tag[data-appearance=primary] .label{
108
108
  overflow:hidden;
109
- color:var(--sys-primary-text-support, #5b4796);
109
+ color:var(--sys-primary-text-support, #358561);
110
110
  text-overflow:ellipsis;
111
111
  white-space:nowrap;
112
112
  }
113
113
  .tag[data-appearance=primary] .tagButton{
114
- color:var(--sys-primary-text-light, #997adc);
114
+ color:var(--sys-primary-text-light, #6aaf90);
115
115
  }
116
116
  .tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover, .tag[data-appearance=primary] .tagButton:active{
117
- color:var(--sys-primary-text-main, #382a62);
117
+ color:var(--sys-primary-text-main, #1b5840);
118
118
  }
119
119
  .tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover{
120
- background-color:var(--sys-primary-decor-hovered, #decdfb);
120
+ background-color:var(--sys-primary-decor-hovered, #b3deca);
121
121
  }
122
122
  .tag[data-appearance=primary] .tagButton:active{
123
- background-color:var(--sys-primary-decor-activated, #c5b2f1);
123
+ background-color:var(--sys-primary-decor-activated, #99d7ba);
124
124
  }
125
125
  .tag[data-appearance=red]{
126
126
  background-color:var(--sys-red-decor-default, #fdd6cd);
package/dist/cjs/components/TagLink/styles.module.css CHANGED
@@ -29,10 +29,10 @@
29
29
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
30
30
  }
31
31
  .tag[data-size=s]{
32
- padding-left:var(--space-tag-s-from-label, 16px);
33
- padding-right:var(--space-tag-s-from-label, 16px);
32
+ padding-left:var(--space-tag-s-from-label, 8px);
33
+ padding-right:var(--space-tag-s-from-label, 8px);
34
34
  height:var(--size-tag-s, 32px);
35
- border-radius:var(--radius-tag-s, 8px);
35
+ border-radius:var(--radius-tag-s, 4px);
36
36
  }
37
37
  .tag[data-size=s] .label{
38
38
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -55,22 +55,22 @@
55
55
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
56
56
  }
57
57
  .tag[data-appearance=neutral]:active{
58
- background-color:var(--sys-neutral-decor-activated, #bec2cf);
58
+ background-color:var(--sys-neutral-decor-activated, #b6bac7);
59
59
  }
60
60
  .tag[data-appearance=primary]{
61
- background-color:var(--sys-primary-decor-default, #ebdefd);
61
+ background-color:var(--sys-primary-decor-default, #caeadb);
62
62
  }
63
63
  .tag[data-appearance=primary] .label{
64
64
  overflow:hidden;
65
- color:var(--sys-primary-text-support, #5b4796);
65
+ color:var(--sys-primary-text-support, #358561);
66
66
  text-overflow:ellipsis;
67
67
  white-space:nowrap;
68
68
  }
69
69
  .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
70
- background-color:var(--sys-primary-decor-hovered, #decdfb);
70
+ background-color:var(--sys-primary-decor-hovered, #b3deca);
71
71
  }
72
72
  .tag[data-appearance=primary]:active{
73
- background-color:var(--sys-primary-decor-activated, #c5b2f1);
73
+ background-color:var(--sys-primary-decor-activated, #99d7ba);
74
74
  }
75
75
  .tag[data-appearance=red]{
76
76
  background-color:var(--sys-red-decor-default, #fdd6cd);
package/dist/cjs/helperComponents/TagMore/styles.module.css CHANGED
@@ -35,21 +35,21 @@
35
35
  border-width:var(--border-width-tag-more-single, 2px);
36
36
  }
37
37
  .button[data-size=s]{
38
- padding-left:var(--space-tag-more-s-from-label, 8px);
39
- padding-right:var(--space-tag-more-s-from-label, 8px);
38
+ padding-left:var(--space-tag-more-s-from-label, 4px);
39
+ padding-right:var(--space-tag-more-s-from-label, 4px);
40
40
  height:var(--size-tag-s, 32px);
41
- border-radius:var(--radius-tag-s, 8px);
41
+ border-radius:var(--radius-tag-s, 4px);
42
42
  border-width:var(--border-width-tag-more-single, 2px);
43
43
  }
44
44
 
45
45
  .tagRowDroplistContainer[data-size=xs]{
46
- padding-right:var(--radius-drop-list-container, 8px);
47
- padding-left:var(--radius-drop-list-container, 8px);
46
+ padding-right:var(--radius-drop-list-container, 4px);
47
+ padding-left:var(--radius-drop-list-container, 4px);
48
48
  max-width:var(--size-tag-list-max-width-xs, 256px);
49
49
  }
50
50
  .tagRowDroplistContainer[data-size=s]{
51
- padding-right:var(--radius-drop-list-container, 8px);
52
- padding-left:var(--radius-drop-list-container, 8px);
51
+ padding-right:var(--radius-drop-list-container, 4px);
52
+ padding-left:var(--radius-drop-list-container, 4px);
53
53
  max-width:var(--size-tag-list-max-width-s, 280px);
54
54
  }
55
55
 
package/dist/cjs/helperComponents/TagRowSimple/styles.module.css CHANGED
@@ -3,8 +3,8 @@
3
3
  flex-wrap:wrap;
4
4
  }
5
5
  .tagRowSimpleWrapper[data-size=xs]{
6
- gap:var(--space-tag-row-xs-gap, 2px);
6
+ gap:var(--space-tag-row-xs-gap, 4px);
7
7
  }
8
8
  .tagRowSimpleWrapper[data-size=s]{
9
- gap:var(--space-tag-row-s-gap, 2px);
9
+ gap:var(--space-tag-row-s-gap, 4px);
10
10
  }
package/dist/cjs/helperComponents/TagRowTruncated/styles.module.css CHANGED
@@ -7,10 +7,10 @@
7
7
  max-width:100%;
8
8
  }
9
9
  .wrapper[data-size=xs]{
10
- gap:var(--space-tag-row-xs-gap, 2px);
10
+ gap:var(--space-tag-row-xs-gap, 4px);
11
11
  }
12
12
  .wrapper[data-size=s]{
13
- gap:var(--space-tag-row-s-gap, 2px);
13
+ gap:var(--space-tag-row-s-gap, 4px);
14
14
  }
15
15
 
16
16
  .visibleRow{
@@ -19,10 +19,10 @@
19
19
  max-width:100%;
20
20
  }
21
21
  .visibleRow[data-size=xs]{
22
- gap:var(--space-tag-row-xs-gap, 2px);
22
+ gap:var(--space-tag-row-xs-gap, 4px);
23
23
  }
24
24
  .visibleRow[data-size=s]{
25
- gap:var(--space-tag-row-s-gap, 2px);
25
+ gap:var(--space-tag-row-s-gap, 4px);
26
26
  }
27
27
 
28
28
  .hiddenRow{
@@ -35,10 +35,10 @@
35
35
  visibility:hidden;
36
36
  }
37
37
  .hiddenRow[data-size=xs]{
38
- gap:var(--space-tag-row-xs-gap, 2px);
38
+ gap:var(--space-tag-row-xs-gap, 4px);
39
39
  }
40
40
  .hiddenRow[data-size=s]{
41
- gap:var(--space-tag-row-s-gap, 2px);
41
+ gap:var(--space-tag-row-s-gap, 4px);
42
42
  }
43
43
 
44
44
  .hiddenMoreButton{
package/dist/esm/components/TagBase/styles.module.css CHANGED
@@ -55,16 +55,16 @@
55
55
  width:var(--size-tag-xs, 24px);
56
56
  }
57
57
  .tag[data-size=s]{
58
- padding-left:var(--space-tag-s-from-label, 16px);
59
- padding-right:var(--space-tag-s-from-label, 16px);
58
+ padding-left:var(--space-tag-s-from-label, 8px);
59
+ padding-right:var(--space-tag-s-from-label, 8px);
60
60
  height:var(--size-tag-s, 32px);
61
- border-radius:var(--radius-tag-s, 8px);
61
+ border-radius:var(--radius-tag-s, 4px);
62
62
  }
63
63
  .tag[data-size=s][data-removable=true]{
64
- padding-left:var(--space-tag-s-from-label, 16px);
64
+ padding-left:var(--space-tag-s-from-label, 8px);
65
65
  padding-right:var(--space-tag-s-from-button, 0px);
66
66
  height:var(--size-tag-s, 32px);
67
- border-radius:var(--radius-tag-s, 8px);
67
+ border-radius:var(--radius-tag-s, 4px);
68
68
  gap:var(--space-tag-s-gap, 2px);
69
69
  }
70
70
  .tag[data-size=s] .label{
@@ -76,7 +76,7 @@
76
76
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
77
77
  }
78
78
  .tag[data-size=s] .tagButton{
79
- border-radius:var(--radius-tag-s, 8px);
79
+ border-radius:var(--radius-tag-s, 4px);
80
80
  height:var(--size-tag-s, 32px);
81
81
  width:var(--size-tag-s, 32px);
82
82
  }
@@ -99,28 +99,28 @@
99
99
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
100
100
  }
101
101
  .tag[data-appearance=neutral] .tagButton:active{
102
- background-color:var(--sys-neutral-decor-activated, #bec2cf);
102
+ background-color:var(--sys-neutral-decor-activated, #b6bac7);
103
103
  }
104
104
  .tag[data-appearance=primary]{
105
- background-color:var(--sys-primary-decor-default, #ebdefd);
105
+ background-color:var(--sys-primary-decor-default, #caeadb);
106
106
  }
107
107
  .tag[data-appearance=primary] .label{
108
108
  overflow:hidden;
109
- color:var(--sys-primary-text-support, #5b4796);
109
+ color:var(--sys-primary-text-support, #358561);
110
110
  text-overflow:ellipsis;
111
111
  white-space:nowrap;
112
112
  }
113
113
  .tag[data-appearance=primary] .tagButton{
114
- color:var(--sys-primary-text-light, #997adc);
114
+ color:var(--sys-primary-text-light, #6aaf90);
115
115
  }
116
116
  .tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover, .tag[data-appearance=primary] .tagButton:active{
117
- color:var(--sys-primary-text-main, #382a62);
117
+ color:var(--sys-primary-text-main, #1b5840);
118
118
  }
119
119
  .tag[data-appearance=primary] .tagButton:focus, .tag[data-appearance=primary] .tagButton:hover{
120
- background-color:var(--sys-primary-decor-hovered, #decdfb);
120
+ background-color:var(--sys-primary-decor-hovered, #b3deca);
121
121
  }
122
122
  .tag[data-appearance=primary] .tagButton:active{
123
- background-color:var(--sys-primary-decor-activated, #c5b2f1);
123
+ background-color:var(--sys-primary-decor-activated, #99d7ba);
124
124
  }
125
125
  .tag[data-appearance=red]{
126
126
  background-color:var(--sys-red-decor-default, #fdd6cd);
package/dist/esm/components/TagLink/styles.module.css CHANGED
@@ -29,10 +29,10 @@
29
29
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
30
30
  }
31
31
  .tag[data-size=s]{
32
- padding-left:var(--space-tag-s-from-label, 16px);
33
- padding-right:var(--space-tag-s-from-label, 16px);
32
+ padding-left:var(--space-tag-s-from-label, 8px);
33
+ padding-right:var(--space-tag-s-from-label, 8px);
34
34
  height:var(--size-tag-s, 32px);
35
- border-radius:var(--radius-tag-s, 8px);
35
+ border-radius:var(--radius-tag-s, 4px);
36
36
  }
37
37
  .tag[data-size=s] .label{
38
38
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -55,22 +55,22 @@
55
55
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
56
56
  }
57
57
  .tag[data-appearance=neutral]:active{
58
- background-color:var(--sys-neutral-decor-activated, #bec2cf);
58
+ background-color:var(--sys-neutral-decor-activated, #b6bac7);
59
59
  }
60
60
  .tag[data-appearance=primary]{
61
- background-color:var(--sys-primary-decor-default, #ebdefd);
61
+ background-color:var(--sys-primary-decor-default, #caeadb);
62
62
  }
63
63
  .tag[data-appearance=primary] .label{
64
64
  overflow:hidden;
65
- color:var(--sys-primary-text-support, #5b4796);
65
+ color:var(--sys-primary-text-support, #358561);
66
66
  text-overflow:ellipsis;
67
67
  white-space:nowrap;
68
68
  }
69
69
  .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
70
- background-color:var(--sys-primary-decor-hovered, #decdfb);
70
+ background-color:var(--sys-primary-decor-hovered, #b3deca);
71
71
  }
72
72
  .tag[data-appearance=primary]:active{
73
- background-color:var(--sys-primary-decor-activated, #c5b2f1);
73
+ background-color:var(--sys-primary-decor-activated, #99d7ba);
74
74
  }
75
75
  .tag[data-appearance=red]{
76
76
  background-color:var(--sys-red-decor-default, #fdd6cd);
package/dist/esm/helperComponents/TagMore/styles.module.css CHANGED
@@ -35,21 +35,21 @@
35
35
  border-width:var(--border-width-tag-more-single, 2px);
36
36
  }
37
37
  .button[data-size=s]{
38
- padding-left:var(--space-tag-more-s-from-label, 8px);
39
- padding-right:var(--space-tag-more-s-from-label, 8px);
38
+ padding-left:var(--space-tag-more-s-from-label, 4px);
39
+ padding-right:var(--space-tag-more-s-from-label, 4px);
40
40
  height:var(--size-tag-s, 32px);
41
- border-radius:var(--radius-tag-s, 8px);
41
+ border-radius:var(--radius-tag-s, 4px);
42
42
  border-width:var(--border-width-tag-more-single, 2px);
43
43
  }
44
44
 
45
45
  .tagRowDroplistContainer[data-size=xs]{
46
- padding-right:var(--radius-drop-list-container, 8px);
47
- padding-left:var(--radius-drop-list-container, 8px);
46
+ padding-right:var(--radius-drop-list-container, 4px);
47
+ padding-left:var(--radius-drop-list-container, 4px);
48
48
  max-width:var(--size-tag-list-max-width-xs, 256px);
49
49
  }
50
50
  .tagRowDroplistContainer[data-size=s]{
51
- padding-right:var(--radius-drop-list-container, 8px);
52
- padding-left:var(--radius-drop-list-container, 8px);
51
+ padding-right:var(--radius-drop-list-container, 4px);
52
+ padding-left:var(--radius-drop-list-container, 4px);
53
53
  max-width:var(--size-tag-list-max-width-s, 280px);
54
54
  }
55
55
 
package/dist/esm/helperComponents/TagRowSimple/styles.module.css CHANGED
@@ -3,8 +3,8 @@
3
3
  flex-wrap:wrap;
4
4
  }
5
5
  .tagRowSimpleWrapper[data-size=xs]{
6
- gap:var(--space-tag-row-xs-gap, 2px);
6
+ gap:var(--space-tag-row-xs-gap, 4px);
7
7
  }
8
8
  .tagRowSimpleWrapper[data-size=s]{
9
- gap:var(--space-tag-row-s-gap, 2px);
9
+ gap:var(--space-tag-row-s-gap, 4px);
10
10
  }
package/dist/esm/helperComponents/TagRowTruncated/styles.module.css CHANGED
@@ -7,10 +7,10 @@
7
7
  max-width:100%;
8
8
  }
9
9
  .wrapper[data-size=xs]{
10
- gap:var(--space-tag-row-xs-gap, 2px);
10
+ gap:var(--space-tag-row-xs-gap, 4px);
11
11
  }
12
12
  .wrapper[data-size=s]{
13
- gap:var(--space-tag-row-s-gap, 2px);
13
+ gap:var(--space-tag-row-s-gap, 4px);
14
14
  }
15
15
 
16
16
  .visibleRow{
@@ -19,10 +19,10 @@
19
19
  max-width:100%;
20
20
  }
21
21
  .visibleRow[data-size=xs]{
22
- gap:var(--space-tag-row-xs-gap, 2px);
22
+ gap:var(--space-tag-row-xs-gap, 4px);
23
23
  }
24
24
  .visibleRow[data-size=s]{
25
- gap:var(--space-tag-row-s-gap, 2px);
25
+ gap:var(--space-tag-row-s-gap, 4px);
26
26
  }
27
27
 
28
28
  .hiddenRow{
@@ -35,10 +35,10 @@
35
35
  visibility:hidden;
36
36
  }
37
37
  .hiddenRow[data-size=xs]{
38
- gap:var(--space-tag-row-xs-gap, 2px);
38
+ gap:var(--space-tag-row-xs-gap, 4px);
39
39
  }
40
40
  .hiddenRow[data-size=s]{
41
- gap:var(--space-tag-row-s-gap, 2px);
41
+ gap:var(--space-tag-row-s-gap, 4px);
42
42
  }
43
43
 
44
44
  .hiddenMoreButton{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tag",
7
- "version": "0.15.7",
7
+ "version": "0.15.8",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -43,5 +43,5 @@
43
43
  "@snack-uikit/utils": "3.10.1",
44
44
  "classnames": "2.5.1"
45
45
  },
46
- "gitHead": "2871794a46212ecbb3bc0002d7d8912310643332"
46
+ "gitHead": "dc42c636dae38b12a144f21188b1d489db637681"
47
47
  }