@semcore/tag 4.2.9 → 4.3.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 (6) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/lib/cjs/Tag.js +22 -22
  3. package/lib/cjs/style/tag.shadow.css +25 -27
  4. package/lib/es6/Tag.js +22 -22
  5. package/lib/es6/style/tag.shadow.css +25 -27
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [4.2.9] - 2022-11-30
5
+ ## [4.3.0] - 2022-12-12
6
6
 
7
- ### Changed
7
+ ### Added
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/utils` [3.41.0 ~> 3.42.0], `@semcore/icon` [3.3.1 ~> 3.3.2], `@semcore/flex-box` [4.6.4 ~> 4.6.5]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [4.2.7] - 2022-11-15
12
12
 
package/lib/cjs/Tag.js CHANGED
@@ -52,31 +52,31 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___STag_wpwb3_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_wpwb3);color:var(--colorText_wpwb3);border-color:var(--colorBorder_wpwb3)}.___STag_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:var(--colorBgHover_wpwb3)}.___STag_wpwb3_gg_.__disabled_wpwb3_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_wpwb3_gg_.__interactive_wpwb3_gg_{cursor:pointer}.___STag_wpwb3_gg_._size_m_wpwb3_gg_{height:20px;min-width:20px}.___STag_wpwb3_gg_._size_m_wpwb3_gg_ .___SCircle_wpwb3_gg_:first-child{margin-left:-2px}.___STag_wpwb3_gg_._size_m_wpwb3_gg_ .___SCircle_wpwb3_gg_:last-child{margin-right:-2px}.___STag_wpwb3_gg_._size_m_wpwb3_gg_ .___SText_wpwb3_gg_{font-size:12px;line-height:1.33}.___STag_wpwb3_gg_._size_l_wpwb3_gg_{height:28px;min-width:28px}.___STag_wpwb3_gg_._size_l_wpwb3_gg_ .___SText_wpwb3_gg_{font-size:14px;line-height:1.42}.___STag_wpwb3_gg_._size_xl_wpwb3_gg_{height:40px;min-width:40px}.___STag_wpwb3_gg_._size_xl_wpwb3_gg_ .___SText_wpwb3_gg_{font-size:16px;line-height:1.5}.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_{background-color:var(--colorBg_wpwb3);border-color:var(--colorBg_wpwb3);color:var(--colorText_wpwb3)}.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:var(--colorBgHover_wpwb3)}.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_.__interactive_wpwb3_gg_:hover,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_wpwb3_gg_._theme_additional_wpwb3_gg_{border-style:dashed}.___SText_wpwb3_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_wpwb3_gg_:not(:only-child):first-child{padding-right:0}.___SText_wpwb3_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_wpwb3_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_wpwb3_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_wpwb3_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_wpwb3_gg_:first-child{margin-left:0}.___SCircle_wpwb3_gg_:last-child{margin-right:0}.___SCircle_wpwb3_gg_._size_m_wpwb3_gg_{width:16px;height:16px}.___SCircle_wpwb3_gg_._size_l_wpwb3_gg_{width:20px;height:20px}.___SCircle_wpwb3_gg_._size_xl_wpwb3_gg_{width:20px;height:20px}.___SClose_wpwb3_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px;opacity:.5}.___SClose_wpwb3_gg_:hover{opacity:1}"
55
+ ".___STag_109t3_gg_{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n vertical-align:middle;\n box-sizing:border-box;\n border-width:1px;\n border-style:solid;\n border-color:transparent;\n border-radius:var(--intergalactic-rounded-extra-large, 24px);\n padding-left:var(--intergalactic-spacing-1x, 4px);\n padding-right:var(--intergalactic-spacing-1x, 4px);\n font-weight:var(--intergalactic-medium, 500);\n background-color:var(--colorBg_109t3);\n color:var(--colorText_109t3);\n border-color:var(--colorBorder_109t3)\n}\n\n.___STag_109t3_gg_.__active_109t3_gg_,.___STag_109t3_gg_.__interactive_109t3_gg_:active,.___STag_109t3_gg_.__interactive_109t3_gg_:hover{\n background-color:var(--colorBgHover_109t3);\n }\n\n.___STag_109t3_gg_.__disabled_109t3_gg_{\n opacity:var(--intergalactic-disabled-opacity, .3);\n cursor:default;\n pointer-events:none;\n}\n\n.___STag_109t3_gg_.__interactive_109t3_gg_{\n cursor:pointer;\n}\n\n.___STag_109t3_gg_._size_m_109t3_gg_{\n height:20px;\n min-width:20px\n}\n\n.___STag_109t3_gg_._size_m_109t3_gg_ .___SCircle_109t3_gg_:first-child{\n margin-left:calc(var(--intergalactic-spacing-05x, 2px)*-1);\n }\n\n.___STag_109t3_gg_._size_m_109t3_gg_ .___SCircle_109t3_gg_:last-child{\n margin-right:calc(var(--intergalactic-spacing-05x, 2px)*-1);\n }\n\n.___STag_109t3_gg_._size_m_109t3_gg_ .___SText_109t3_gg_{\n font-size:var(--intergalactic-fs-100, 12px);\n line-height:var(--intergalactic-lh-100, 133%);\n }\n\n.___STag_109t3_gg_._size_l_109t3_gg_{\n height:28px;\n min-width:28px\n}\n\n.___STag_109t3_gg_._size_l_109t3_gg_ .___SText_109t3_gg_{\n font-size:var(--intergalactic-fs-200, 14px);\n line-height:var(--intergalactic-lh-200, 142%);\n }\n\n.___STag_109t3_gg_._size_xl_109t3_gg_{\n height:40px;\n min-width:40px\n}\n\n.___STag_109t3_gg_._size_xl_109t3_gg_ .___SText_109t3_gg_{\n font-size:var(--intergalactic-fs-300, 16px);\n line-height:var(--intergalactic-lh-300, 150%);\n }\n\n.___STag_109t3_gg_._theme_primary_109t3_gg_{\n background-color:var(--colorBg_109t3);\n border-color:var(--colorBg_109t3);\n color:var(--colorText_109t3)\n}\n\n.___STag_109t3_gg_._theme_primary_109t3_gg_.__active_109t3_gg_,.___STag_109t3_gg_._theme_primary_109t3_gg_.__interactive_109t3_gg_:active,.___STag_109t3_gg_._theme_primary_109t3_gg_.__interactive_109t3_gg_:hover{\n background-color:var(--colorBgHover_109t3);\n }\n\n.___STag_109t3_gg_._theme_primary-invert_109t3_gg_{\n background-color:var(--intergalactic-tag-primary-white-normal, hsla(0, 0%, 100%, .15));\n color:var(--intergalactic-text-primary-invert, #fff)\n}\n\n.___STag_109t3_gg_._theme_primary-invert_109t3_gg_.__active_109t3_gg_,.___STag_109t3_gg_._theme_primary-invert_109t3_gg_.__interactive_109t3_gg_:active,.___STag_109t3_gg_._theme_primary-invert_109t3_gg_.__interactive_109t3_gg_:hover{\n background-color:var(--intergalactic-tag-primary-white-hover-active, hsla(0, 0%, 100%, .3));\n }\n\n.___STag_109t3_gg_._theme_additional-invert_109t3_gg_,.___STag_109t3_gg_._theme_secondary-invert_109t3_gg_{\n color:var(--intergalactic-text-primary-invert, #fff);\n border-color: var(\\--intergalactic-border-secondary-invert)\n\n &.__interactive_109t3_gg_:hover,\n &.__interactive_109t3_gg_:active,\n &.__active_109t3_gg_{\n background-color:var(--intergalactic-tag-secondary-hover-active, #f4f5f9);\n }\n}\n\n.___STag_109t3_gg_._theme_additional_109t3_gg_{\n border-style:dashed;\n}\n\n.___SText_109t3_gg_{\n display:inline-block;\n padding-left:var(--intergalactic-spacing-1x, 4px);\n padding-right:var(--intergalactic-spacing-1x, 4px);\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n}\n\n.___SText_109t3_gg_:not(:only-child):first-child{\n padding-right:0;\n}\n\n.___SText_109t3_gg_:not(:first-child):not(:last-child){\n padding-left:0;\n padding-right:0;\n}\n\n.___SText_109t3_gg_:not(:only-child):last-child{\n padding-left:0;\n}\n\n.___SAddon_109t3_gg_{\n display:inline-flex;\n flex-shrink:0;\n align-items:center;\n justify-content:center;\n padding-left:var(--intergalactic-spacing-1x, 4px);\n padding-right:var(--intergalactic-spacing-1x, 4px);\n}\n\n.___SCircle_109t3_gg_{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n overflow:hidden;\n border-radius:50%;\n margin:0 var(--intergalactic-spacing-1x, 4px)\n}\n\n.___SCircle_109t3_gg_:first-child{\n margin-left:0;\n }\n\n.___SCircle_109t3_gg_:last-child{\n margin-right:0;\n }\n\n.___SCircle_109t3_gg_._size_m_109t3_gg_{\n width:16px;\n height:16px;\n}\n\n.___SCircle_109t3_gg_._size_l_109t3_gg_{\n width:20px;\n height:20px;\n}\n\n.___SCircle_109t3_gg_._size_xl_109t3_gg_{\n width:20px;\n height:20px;\n}\n\n.___SClose_109t3_gg_{\n cursor:pointer;\n display:inline-flex;\n flex-shrink:0;\n align-items:center;\n justify-content:center;\n padding:var(--intergalactic-spacing-1x, 4px);\n opacity:.5\n}\n\n.___SClose_109t3_gg_:hover{\n opacity:1;\n }\n"
56
56
  /*__inner_css_end__*/
57
- , "wpwb3_gg_")
57
+ , "109t3_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__STag": "___STag_wpwb3_gg_",
61
- "--colorBg": "--colorBg_wpwb3",
62
- "--colorText": "--colorText_wpwb3",
63
- "--colorBorder": "--colorBorder_wpwb3",
64
- "_active": "__active_wpwb3_gg_",
65
- "_interactive": "__interactive_wpwb3_gg_",
66
- "--colorBgHover": "--colorBgHover_wpwb3",
67
- "_disabled": "__disabled_wpwb3_gg_",
68
- "_size_m": "_size_m_wpwb3_gg_",
69
- "__SCircle": "___SCircle_wpwb3_gg_",
70
- "__SText": "___SText_wpwb3_gg_",
71
- "_size_l": "_size_l_wpwb3_gg_",
72
- "_size_xl": "_size_xl_wpwb3_gg_",
73
- "_theme_primary": "_theme_primary_wpwb3_gg_",
74
- "_theme_primary-invert": "_theme_primary-invert_wpwb3_gg_",
75
- "_theme_additional-invert": "_theme_additional-invert_wpwb3_gg_",
76
- "_theme_secondary-invert": "_theme_secondary-invert_wpwb3_gg_",
77
- "_theme_additional": "_theme_additional_wpwb3_gg_",
78
- "__SAddon": "___SAddon_wpwb3_gg_",
79
- "__SClose": "___SClose_wpwb3_gg_"
60
+ "__STag": "___STag_109t3_gg_",
61
+ "--colorBg": "--colorBg_109t3",
62
+ "--colorText": "--colorText_109t3",
63
+ "--colorBorder": "--colorBorder_109t3",
64
+ "_active": "__active_109t3_gg_",
65
+ "_interactive": "__interactive_109t3_gg_",
66
+ "--colorBgHover": "--colorBgHover_109t3",
67
+ "_disabled": "__disabled_109t3_gg_",
68
+ "_size_m": "_size_m_109t3_gg_",
69
+ "__SCircle": "___SCircle_109t3_gg_",
70
+ "__SText": "___SText_109t3_gg_",
71
+ "_size_l": "_size_l_109t3_gg_",
72
+ "_size_xl": "_size_xl_109t3_gg_",
73
+ "_theme_primary": "_theme_primary_109t3_gg_",
74
+ "_theme_primary-invert": "_theme_primary-invert_109t3_gg_",
75
+ "_theme_additional-invert": "_theme_additional-invert_109t3_gg_",
76
+ "_theme_secondary-invert": "_theme_secondary-invert_109t3_gg_",
77
+ "_theme_additional": "_theme_additional_109t3_gg_",
78
+ "__SAddon": "___SAddon_109t3_gg_",
79
+ "__SClose": "___SClose_109t3_gg_"
80
80
  });
81
81
  var textColorToBgColor = {
82
82
  'gray-500': 'gray-100',
package/lib/cjs/style/tag.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  STag {
4
2
  display: inline-flex;
5
3
  align-items: center;
@@ -9,10 +7,10 @@ STag {
9
7
  border-width: 1px;
10
8
  border-style: solid;
11
9
  border-color: transparent;
12
- border-radius: 24px;
13
- padding-left: 4px;
14
- padding-right: 4px;
15
- font-weight: 500;
10
+ border-radius: var(--intergalactic-rounded-extra-large, 24px);
11
+ padding-left: var(--intergalactic-spacing-1x, 4px);
12
+ padding-right: var(--intergalactic-spacing-1x, 4px);
13
+ font-weight: var(--intergalactic-medium, 500);
16
14
  background-color: var(--colorBg);
17
15
  color: var(--colorText);
18
16
  border-color: var(--colorBorder);
@@ -25,7 +23,7 @@ STag {
25
23
  }
26
24
 
27
25
  STag[disabled] {
28
- opacity: var(--disabled-opacity);
26
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
29
27
  cursor: default;
30
28
  pointer-events: none; /* Disable link interactions */
31
29
  }
@@ -39,16 +37,16 @@ STag[size='m'] {
39
37
  min-width: 20px;
40
38
 
41
39
  & SCircle:first-child {
42
- margin-left: -2px;
40
+ margin-left: calc(-1 * var(--intergalactic-spacing-05x, 2px));
43
41
  }
44
42
 
45
43
  & SCircle:last-child {
46
- margin-right: -2px;
44
+ margin-right: calc(-1 * var(--intergalactic-spacing-05x, 2px));
47
45
  }
48
46
 
49
47
  & SText {
50
- font-size: var(--fs-100);
51
- line-height: var(--lh-100);
48
+ font-size: var(--intergalactic-fs-100, 12px);
49
+ line-height: var(--intergalactic-lh-100, 133%);
52
50
  }
53
51
  }
54
52
 
@@ -57,8 +55,8 @@ STag[size='l'] {
57
55
  min-width: 28px;
58
56
 
59
57
  & SText {
60
- font-size: var(--fs-200);
61
- line-height: var(--lh-200);
58
+ font-size: var(--intergalactic-fs-200, 14px);
59
+ line-height: var(--intergalactic-lh-200, 142%);
62
60
  }
63
61
  }
64
62
 
@@ -67,8 +65,8 @@ STag[size='xl'] {
67
65
  min-width: 40px;
68
66
 
69
67
  & SText {
70
- font-size: var(--fs-300);
71
- line-height: var(--lh-300);
68
+ font-size: var(--intergalactic-fs-300, 16px);
69
+ line-height: var(--intergalactic-lh-300, 150%);
72
70
  }
73
71
  }
74
72
 
@@ -85,24 +83,24 @@ STag[theme='primary'] {
85
83
  }
86
84
 
87
85
  STag[theme='primary-invert'] {
88
- background-color: rgba(255, 255, 255, 0.15);
89
- color: var(--white);
86
+ background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
87
+ color: var(--intergalactic-text-primary-invert, #ffffff);
90
88
 
91
89
  &[interactive]:hover,
92
90
  &[interactive]:active,
93
91
  &[active] {
94
- background-color: rgba(255, 255, 255, 0.3);
92
+ background-color: var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3));
95
93
  }
96
94
  }
97
95
  STag[theme='secondary-invert'],
98
96
  STag[theme='additional-invert'] {
99
- color: var(--white);
100
- border-color: color-mod(var(--white) a(30%));
97
+ color: var(--intergalactic-text-primary-invert, #ffffff);
98
+ border-color: var(--intergalactic-border-secondary-invert)
101
99
 
102
100
  &[interactive]:hover,
103
101
  &[interactive]:active,
104
102
  &[active] {
105
- background-color: rgba(255, 255, 255, 0.1);
103
+ background-color: var(--intergalactic-tag-secondary-hover-active, #f4f5f9);
106
104
  }
107
105
  }
108
106
 
@@ -112,8 +110,8 @@ STag[theme='additional'] {
112
110
 
113
111
  SText {
114
112
  display: inline-block;
115
- padding-left: 4px;
116
- padding-right: 4px;
113
+ padding-left: var(--intergalactic-spacing-1x, 4px);
114
+ padding-right: var(--intergalactic-spacing-1x, 4px);
117
115
  white-space: nowrap;
118
116
  overflow: hidden;
119
117
  text-overflow: ellipsis;
@@ -137,8 +135,8 @@ SAddon {
137
135
  flex-shrink: 0;
138
136
  align-items: center;
139
137
  justify-content: center;
140
- padding-left: 4px;
141
- padding-right: 4px;
138
+ padding-left: var(--intergalactic-spacing-1x, 4px);
139
+ padding-right: var(--intergalactic-spacing-1x, 4px);
142
140
  }
143
141
 
144
142
  SCircle {
@@ -147,7 +145,7 @@ SCircle {
147
145
  justify-content: center;
148
146
  overflow: hidden;
149
147
  border-radius: 50%;
150
- margin: 0 4px;
148
+ margin: 0 var(--intergalactic-spacing-1x, 4px);
151
149
 
152
150
  &:first-child {
153
151
  margin-left: 0;
@@ -179,7 +177,7 @@ SClose {
179
177
  flex-shrink: 0;
180
178
  align-items: center;
181
179
  justify-content: center;
182
- padding: 4px;
180
+ padding: var(--intergalactic-spacing-1x, 4px);
183
181
  opacity: 0.5;
184
182
 
185
183
  &:hover {
package/lib/es6/Tag.js CHANGED
@@ -32,31 +32,31 @@ var style = (
32
32
  /*__reshadow_css_start__*/
33
33
  _sstyled.insert(
34
34
  /*__inner_css_start__*/
35
- ".___STag_wpwb3_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_wpwb3);color:var(--colorText_wpwb3);border-color:var(--colorBorder_wpwb3)}.___STag_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:var(--colorBgHover_wpwb3)}.___STag_wpwb3_gg_.__disabled_wpwb3_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_wpwb3_gg_.__interactive_wpwb3_gg_{cursor:pointer}.___STag_wpwb3_gg_._size_m_wpwb3_gg_{height:20px;min-width:20px}.___STag_wpwb3_gg_._size_m_wpwb3_gg_ .___SCircle_wpwb3_gg_:first-child{margin-left:-2px}.___STag_wpwb3_gg_._size_m_wpwb3_gg_ .___SCircle_wpwb3_gg_:last-child{margin-right:-2px}.___STag_wpwb3_gg_._size_m_wpwb3_gg_ .___SText_wpwb3_gg_{font-size:12px;line-height:1.33}.___STag_wpwb3_gg_._size_l_wpwb3_gg_{height:28px;min-width:28px}.___STag_wpwb3_gg_._size_l_wpwb3_gg_ .___SText_wpwb3_gg_{font-size:14px;line-height:1.42}.___STag_wpwb3_gg_._size_xl_wpwb3_gg_{height:40px;min-width:40px}.___STag_wpwb3_gg_._size_xl_wpwb3_gg_ .___SText_wpwb3_gg_{font-size:16px;line-height:1.5}.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_{background-color:var(--colorBg_wpwb3);border-color:var(--colorBg_wpwb3);color:var(--colorText_wpwb3)}.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_primary_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:var(--colorBgHover_wpwb3)}.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_primary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_additional-invert_wpwb3_gg_.__interactive_wpwb3_gg_:hover,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_.__active_wpwb3_gg_,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:active,.___STag_wpwb3_gg_._theme_secondary-invert_wpwb3_gg_.__interactive_wpwb3_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_wpwb3_gg_._theme_additional_wpwb3_gg_{border-style:dashed}.___SText_wpwb3_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_wpwb3_gg_:not(:only-child):first-child{padding-right:0}.___SText_wpwb3_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_wpwb3_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_wpwb3_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_wpwb3_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_wpwb3_gg_:first-child{margin-left:0}.___SCircle_wpwb3_gg_:last-child{margin-right:0}.___SCircle_wpwb3_gg_._size_m_wpwb3_gg_{width:16px;height:16px}.___SCircle_wpwb3_gg_._size_l_wpwb3_gg_{width:20px;height:20px}.___SCircle_wpwb3_gg_._size_xl_wpwb3_gg_{width:20px;height:20px}.___SClose_wpwb3_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px;opacity:.5}.___SClose_wpwb3_gg_:hover{opacity:1}"
35
+ ".___STag_109t3_gg_{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n vertical-align:middle;\n box-sizing:border-box;\n border-width:1px;\n border-style:solid;\n border-color:transparent;\n border-radius:var(--intergalactic-rounded-extra-large, 24px);\n padding-left:var(--intergalactic-spacing-1x, 4px);\n padding-right:var(--intergalactic-spacing-1x, 4px);\n font-weight:var(--intergalactic-medium, 500);\n background-color:var(--colorBg_109t3);\n color:var(--colorText_109t3);\n border-color:var(--colorBorder_109t3)\n}\n\n.___STag_109t3_gg_.__active_109t3_gg_,.___STag_109t3_gg_.__interactive_109t3_gg_:active,.___STag_109t3_gg_.__interactive_109t3_gg_:hover{\n background-color:var(--colorBgHover_109t3);\n }\n\n.___STag_109t3_gg_.__disabled_109t3_gg_{\n opacity:var(--intergalactic-disabled-opacity, .3);\n cursor:default;\n pointer-events:none;\n}\n\n.___STag_109t3_gg_.__interactive_109t3_gg_{\n cursor:pointer;\n}\n\n.___STag_109t3_gg_._size_m_109t3_gg_{\n height:20px;\n min-width:20px\n}\n\n.___STag_109t3_gg_._size_m_109t3_gg_ .___SCircle_109t3_gg_:first-child{\n margin-left:calc(var(--intergalactic-spacing-05x, 2px)*-1);\n }\n\n.___STag_109t3_gg_._size_m_109t3_gg_ .___SCircle_109t3_gg_:last-child{\n margin-right:calc(var(--intergalactic-spacing-05x, 2px)*-1);\n }\n\n.___STag_109t3_gg_._size_m_109t3_gg_ .___SText_109t3_gg_{\n font-size:var(--intergalactic-fs-100, 12px);\n line-height:var(--intergalactic-lh-100, 133%);\n }\n\n.___STag_109t3_gg_._size_l_109t3_gg_{\n height:28px;\n min-width:28px\n}\n\n.___STag_109t3_gg_._size_l_109t3_gg_ .___SText_109t3_gg_{\n font-size:var(--intergalactic-fs-200, 14px);\n line-height:var(--intergalactic-lh-200, 142%);\n }\n\n.___STag_109t3_gg_._size_xl_109t3_gg_{\n height:40px;\n min-width:40px\n}\n\n.___STag_109t3_gg_._size_xl_109t3_gg_ .___SText_109t3_gg_{\n font-size:var(--intergalactic-fs-300, 16px);\n line-height:var(--intergalactic-lh-300, 150%);\n }\n\n.___STag_109t3_gg_._theme_primary_109t3_gg_{\n background-color:var(--colorBg_109t3);\n border-color:var(--colorBg_109t3);\n color:var(--colorText_109t3)\n}\n\n.___STag_109t3_gg_._theme_primary_109t3_gg_.__active_109t3_gg_,.___STag_109t3_gg_._theme_primary_109t3_gg_.__interactive_109t3_gg_:active,.___STag_109t3_gg_._theme_primary_109t3_gg_.__interactive_109t3_gg_:hover{\n background-color:var(--colorBgHover_109t3);\n }\n\n.___STag_109t3_gg_._theme_primary-invert_109t3_gg_{\n background-color:var(--intergalactic-tag-primary-white-normal, hsla(0, 0%, 100%, .15));\n color:var(--intergalactic-text-primary-invert, #fff)\n}\n\n.___STag_109t3_gg_._theme_primary-invert_109t3_gg_.__active_109t3_gg_,.___STag_109t3_gg_._theme_primary-invert_109t3_gg_.__interactive_109t3_gg_:active,.___STag_109t3_gg_._theme_primary-invert_109t3_gg_.__interactive_109t3_gg_:hover{\n background-color:var(--intergalactic-tag-primary-white-hover-active, hsla(0, 0%, 100%, .3));\n }\n\n.___STag_109t3_gg_._theme_additional-invert_109t3_gg_,.___STag_109t3_gg_._theme_secondary-invert_109t3_gg_{\n color:var(--intergalactic-text-primary-invert, #fff);\n border-color: var(\\--intergalactic-border-secondary-invert)\n\n &.__interactive_109t3_gg_:hover,\n &.__interactive_109t3_gg_:active,\n &.__active_109t3_gg_{\n background-color:var(--intergalactic-tag-secondary-hover-active, #f4f5f9);\n }\n}\n\n.___STag_109t3_gg_._theme_additional_109t3_gg_{\n border-style:dashed;\n}\n\n.___SText_109t3_gg_{\n display:inline-block;\n padding-left:var(--intergalactic-spacing-1x, 4px);\n padding-right:var(--intergalactic-spacing-1x, 4px);\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n}\n\n.___SText_109t3_gg_:not(:only-child):first-child{\n padding-right:0;\n}\n\n.___SText_109t3_gg_:not(:first-child):not(:last-child){\n padding-left:0;\n padding-right:0;\n}\n\n.___SText_109t3_gg_:not(:only-child):last-child{\n padding-left:0;\n}\n\n.___SAddon_109t3_gg_{\n display:inline-flex;\n flex-shrink:0;\n align-items:center;\n justify-content:center;\n padding-left:var(--intergalactic-spacing-1x, 4px);\n padding-right:var(--intergalactic-spacing-1x, 4px);\n}\n\n.___SCircle_109t3_gg_{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n overflow:hidden;\n border-radius:50%;\n margin:0 var(--intergalactic-spacing-1x, 4px)\n}\n\n.___SCircle_109t3_gg_:first-child{\n margin-left:0;\n }\n\n.___SCircle_109t3_gg_:last-child{\n margin-right:0;\n }\n\n.___SCircle_109t3_gg_._size_m_109t3_gg_{\n width:16px;\n height:16px;\n}\n\n.___SCircle_109t3_gg_._size_l_109t3_gg_{\n width:20px;\n height:20px;\n}\n\n.___SCircle_109t3_gg_._size_xl_109t3_gg_{\n width:20px;\n height:20px;\n}\n\n.___SClose_109t3_gg_{\n cursor:pointer;\n display:inline-flex;\n flex-shrink:0;\n align-items:center;\n justify-content:center;\n padding:var(--intergalactic-spacing-1x, 4px);\n opacity:.5\n}\n\n.___SClose_109t3_gg_:hover{\n opacity:1;\n }\n"
36
36
  /*__inner_css_end__*/
37
- , "wpwb3_gg_")
37
+ , "109t3_gg_")
38
38
  /*__reshadow_css_end__*/
39
39
  , {
40
- "__STag": "___STag_wpwb3_gg_",
41
- "--colorBg": "--colorBg_wpwb3",
42
- "--colorText": "--colorText_wpwb3",
43
- "--colorBorder": "--colorBorder_wpwb3",
44
- "_active": "__active_wpwb3_gg_",
45
- "_interactive": "__interactive_wpwb3_gg_",
46
- "--colorBgHover": "--colorBgHover_wpwb3",
47
- "_disabled": "__disabled_wpwb3_gg_",
48
- "_size_m": "_size_m_wpwb3_gg_",
49
- "__SCircle": "___SCircle_wpwb3_gg_",
50
- "__SText": "___SText_wpwb3_gg_",
51
- "_size_l": "_size_l_wpwb3_gg_",
52
- "_size_xl": "_size_xl_wpwb3_gg_",
53
- "_theme_primary": "_theme_primary_wpwb3_gg_",
54
- "_theme_primary-invert": "_theme_primary-invert_wpwb3_gg_",
55
- "_theme_additional-invert": "_theme_additional-invert_wpwb3_gg_",
56
- "_theme_secondary-invert": "_theme_secondary-invert_wpwb3_gg_",
57
- "_theme_additional": "_theme_additional_wpwb3_gg_",
58
- "__SAddon": "___SAddon_wpwb3_gg_",
59
- "__SClose": "___SClose_wpwb3_gg_"
40
+ "__STag": "___STag_109t3_gg_",
41
+ "--colorBg": "--colorBg_109t3",
42
+ "--colorText": "--colorText_109t3",
43
+ "--colorBorder": "--colorBorder_109t3",
44
+ "_active": "__active_109t3_gg_",
45
+ "_interactive": "__interactive_109t3_gg_",
46
+ "--colorBgHover": "--colorBgHover_109t3",
47
+ "_disabled": "__disabled_109t3_gg_",
48
+ "_size_m": "_size_m_109t3_gg_",
49
+ "__SCircle": "___SCircle_109t3_gg_",
50
+ "__SText": "___SText_109t3_gg_",
51
+ "_size_l": "_size_l_109t3_gg_",
52
+ "_size_xl": "_size_xl_109t3_gg_",
53
+ "_theme_primary": "_theme_primary_109t3_gg_",
54
+ "_theme_primary-invert": "_theme_primary-invert_109t3_gg_",
55
+ "_theme_additional-invert": "_theme_additional-invert_109t3_gg_",
56
+ "_theme_secondary-invert": "_theme_secondary-invert_109t3_gg_",
57
+ "_theme_additional": "_theme_additional_109t3_gg_",
58
+ "__SAddon": "___SAddon_109t3_gg_",
59
+ "__SClose": "___SClose_109t3_gg_"
60
60
  });
61
61
  var textColorToBgColor = {
62
62
  'gray-500': 'gray-100',
package/lib/es6/style/tag.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  STag {
4
2
  display: inline-flex;
5
3
  align-items: center;
@@ -9,10 +7,10 @@ STag {
9
7
  border-width: 1px;
10
8
  border-style: solid;
11
9
  border-color: transparent;
12
- border-radius: 24px;
13
- padding-left: 4px;
14
- padding-right: 4px;
15
- font-weight: 500;
10
+ border-radius: var(--intergalactic-rounded-extra-large, 24px);
11
+ padding-left: var(--intergalactic-spacing-1x, 4px);
12
+ padding-right: var(--intergalactic-spacing-1x, 4px);
13
+ font-weight: var(--intergalactic-medium, 500);
16
14
  background-color: var(--colorBg);
17
15
  color: var(--colorText);
18
16
  border-color: var(--colorBorder);
@@ -25,7 +23,7 @@ STag {
25
23
  }
26
24
 
27
25
  STag[disabled] {
28
- opacity: var(--disabled-opacity);
26
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
29
27
  cursor: default;
30
28
  pointer-events: none; /* Disable link interactions */
31
29
  }
@@ -39,16 +37,16 @@ STag[size='m'] {
39
37
  min-width: 20px;
40
38
 
41
39
  & SCircle:first-child {
42
- margin-left: -2px;
40
+ margin-left: calc(-1 * var(--intergalactic-spacing-05x, 2px));
43
41
  }
44
42
 
45
43
  & SCircle:last-child {
46
- margin-right: -2px;
44
+ margin-right: calc(-1 * var(--intergalactic-spacing-05x, 2px));
47
45
  }
48
46
 
49
47
  & SText {
50
- font-size: var(--fs-100);
51
- line-height: var(--lh-100);
48
+ font-size: var(--intergalactic-fs-100, 12px);
49
+ line-height: var(--intergalactic-lh-100, 133%);
52
50
  }
53
51
  }
54
52
 
@@ -57,8 +55,8 @@ STag[size='l'] {
57
55
  min-width: 28px;
58
56
 
59
57
  & SText {
60
- font-size: var(--fs-200);
61
- line-height: var(--lh-200);
58
+ font-size: var(--intergalactic-fs-200, 14px);
59
+ line-height: var(--intergalactic-lh-200, 142%);
62
60
  }
63
61
  }
64
62
 
@@ -67,8 +65,8 @@ STag[size='xl'] {
67
65
  min-width: 40px;
68
66
 
69
67
  & SText {
70
- font-size: var(--fs-300);
71
- line-height: var(--lh-300);
68
+ font-size: var(--intergalactic-fs-300, 16px);
69
+ line-height: var(--intergalactic-lh-300, 150%);
72
70
  }
73
71
  }
74
72
 
@@ -85,24 +83,24 @@ STag[theme='primary'] {
85
83
  }
86
84
 
87
85
  STag[theme='primary-invert'] {
88
- background-color: rgba(255, 255, 255, 0.15);
89
- color: var(--white);
86
+ background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
87
+ color: var(--intergalactic-text-primary-invert, #ffffff);
90
88
 
91
89
  &[interactive]:hover,
92
90
  &[interactive]:active,
93
91
  &[active] {
94
- background-color: rgba(255, 255, 255, 0.3);
92
+ background-color: var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3));
95
93
  }
96
94
  }
97
95
  STag[theme='secondary-invert'],
98
96
  STag[theme='additional-invert'] {
99
- color: var(--white);
100
- border-color: color-mod(var(--white) a(30%));
97
+ color: var(--intergalactic-text-primary-invert, #ffffff);
98
+ border-color: var(--intergalactic-border-secondary-invert)
101
99
 
102
100
  &[interactive]:hover,
103
101
  &[interactive]:active,
104
102
  &[active] {
105
- background-color: rgba(255, 255, 255, 0.1);
103
+ background-color: var(--intergalactic-tag-secondary-hover-active, #f4f5f9);
106
104
  }
107
105
  }
108
106
 
@@ -112,8 +110,8 @@ STag[theme='additional'] {
112
110
 
113
111
  SText {
114
112
  display: inline-block;
115
- padding-left: 4px;
116
- padding-right: 4px;
113
+ padding-left: var(--intergalactic-spacing-1x, 4px);
114
+ padding-right: var(--intergalactic-spacing-1x, 4px);
117
115
  white-space: nowrap;
118
116
  overflow: hidden;
119
117
  text-overflow: ellipsis;
@@ -137,8 +135,8 @@ SAddon {
137
135
  flex-shrink: 0;
138
136
  align-items: center;
139
137
  justify-content: center;
140
- padding-left: 4px;
141
- padding-right: 4px;
138
+ padding-left: var(--intergalactic-spacing-1x, 4px);
139
+ padding-right: var(--intergalactic-spacing-1x, 4px);
142
140
  }
143
141
 
144
142
  SCircle {
@@ -147,7 +145,7 @@ SCircle {
147
145
  justify-content: center;
148
146
  overflow: hidden;
149
147
  border-radius: 50%;
150
- margin: 0 4px;
148
+ margin: 0 var(--intergalactic-spacing-1x, 4px);
151
149
 
152
150
  &:first-child {
153
151
  margin-left: 0;
@@ -179,7 +177,7 @@ SClose {
179
177
  flex-shrink: 0;
180
178
  align-items: center;
181
179
  justify-content: center;
182
- padding: 4px;
180
+ padding: var(--intergalactic-spacing-1x, 4px);
183
181
  opacity: 0.5;
184
182
 
185
183
  &:hover {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/tag",
3
3
  "description": "Semrush Tag Component",
4
- "version": "4.2.9",
4
+ "version": "4.3.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",