@sats-group/ui-lib 88.3.1 → 88.4.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 (14) hide show
  1. package/package.json +1 -1
  2. package/react/segmented-controller/segmented-controller.scss +0 -4
  3. package/react/tag/tag.d.ts +2 -1
  4. package/react/tag/tag.js +1 -1
  5. package/react/tag/tag.js.map +3 -3
  6. package/react/tag/tag.scss +105 -9
  7. package/react/tag/tag.types.d.ts +5 -0
  8. package/react/tag/tag.types.js +1 -1
  9. package/react/tag/tag.types.js.map +3 -3
  10. package/tokens/dark.scss +9 -0
  11. package/tokens/darkmode.css +9 -0
  12. package/tokens/default-colours.css +9 -0
  13. package/tokens/light.scss +9 -0
  14. package/tokens/lightmode.css +9 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sats-group/ui-lib",
3
- "version": "88.3.1",
3
+ "version": "88.4.0",
4
4
  "description": "SATS web user interface library",
5
5
  "author": "developer@sats.no",
6
6
  "license": "UNLICENSED",
package/react/segmented-controller/segmented-controller.scss CHANGED
@@ -79,10 +79,6 @@
79
79
  position: relative;
80
80
  z-index: 1;
81
81
 
82
- &:focus {
83
- outline: none;
84
- }
85
-
86
82
  &:hover {
87
83
  background-color: var(--surface-primary-hover);
88
84
  color: var(--on-surface-primary-hover);
package/react/tag/tag.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- import { Tag as Props, variants, sizes } from './tag.types';
2
+ import { Tag as Props, variants, sizes, themes } from './tag.types';
3
3
  declare const Tag: React.FunctionComponent<Props> & {
4
4
  sizes: typeof sizes;
5
+ themes: typeof themes;
5
6
  variants: typeof variants;
6
7
  };
7
8
  export default Tag;
package/react/tag/tag.js CHANGED
@@ -1,2 +1,2 @@
1
- import p from"react";import n from"../text";import{variants as r,sizes as o}from"./tag.types";import f from"classnames";const t=({text:e,icon:a,border:i,size:m=o.m,variant:s=r.primary})=>p.createElement(n,{size:m,tight:!0,className:f("tag",`tag--variant-${s}`,{[`tag--variant-${s}-border`]:i})},a||null,e);t.sizes=o,t.variants=r;var T=t;export{T as default};
1
+ import f from"react";import g from"../text";import{variants as r,sizes as o,themes as m}from"./tag.types";import h from"classnames";const t=({text:i,icon:s,border:p,size:n=o.m,theme:e=m.light,variant:a=r.primary})=>f.createElement(g,{size:n,tight:!0,className:h("tag",{[`tag--variant-${a}`]:a,[`tag--theme-${e}`]:e,"tag--border":p})},s||null,i);t.sizes=o,t.themes=m,t.variants=r;var T=t;export{T as default};
2
2
  //# sourceMappingURL=tag.js.map
package/react/tag/tag.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../react/tag/tag.tsx"],
4
- "sourcesContent": ["import React from 'react';\n\nimport Text from '../text';\n\nimport { Tag as Props, variants, sizes } from './tag.types';\nimport classNames from 'classnames';\n\nconst Tag: React.FunctionComponent<Props> & {\n sizes: typeof sizes;\n variants: typeof variants;\n} = ({ text, icon, border, size = sizes.m, variant = variants.primary }) => (\n <Text\n size={size}\n tight\n className={classNames('tag', `tag--variant-${variant}`, {\n [`tag--variant-${variant}-border`]: border,\n })}\n >\n {icon ? icon : null}\n {text}\n </Text>\n);\n\nTag.sizes = sizes;\nTag.variants = variants;\nexport default Tag;\n"],
5
- "mappings": "AAAA,OAAOA,MAAW,QAElB,OAAOC,MAAU,UAEjB,OAAuB,YAAAC,EAAU,SAAAC,MAAa,cAC9C,OAAOC,MAAgB,aAEvB,MAAMC,EAGF,CAAC,CAAE,KAAAC,EAAM,KAAAC,EAAM,OAAAC,EAAQ,KAAAC,EAAON,EAAM,EAAG,QAAAO,EAAUR,EAAS,OAAQ,IACpEF,EAAA,cAACC,EAAA,CACC,KAAMQ,EACN,MAAK,GACL,UAAWL,EAAW,MAAO,gBAAgBM,CAAO,GAAI,CACtD,CAAC,gBAAgBA,CAAO,SAAS,EAAGF,CACtC,CAAC,GAEAD,GAAc,KACdD,CACH,EAGFD,EAAI,MAAQF,EACZE,EAAI,SAAWH,EACf,IAAOS,EAAQN",
6
- "names": ["React", "Text", "variants", "sizes", "classNames", "Tag", "text", "icon", "border", "size", "variant", "tag_default"]
4
+ "sourcesContent": ["import React from 'react';\n\nimport Text from '../text';\n\nimport { Tag as Props, variants, sizes, themes } from './tag.types';\nimport classNames from 'classnames';\n\nconst Tag: React.FunctionComponent<Props> & {\n sizes: typeof sizes;\n themes: typeof themes;\n variants: typeof variants;\n} = ({\n text,\n icon,\n border,\n size = sizes.m,\n theme = themes.light,\n variant = variants.primary,\n}) => (\n <Text\n size={size}\n tight\n className={classNames('tag', {\n [`tag--variant-${variant}`]: variant,\n [`tag--theme-${theme}`]: theme,\n 'tag--border': border,\n })}\n >\n {icon ? icon : null}\n {text}\n </Text>\n);\n\nTag.sizes = sizes;\nTag.themes = themes;\nTag.variants = variants;\nexport default Tag;\n"],
5
+ "mappings": "AAAA,OAAOA,MAAW,QAElB,OAAOC,MAAU,UAEjB,OAAuB,YAAAC,EAAU,SAAAC,EAAO,UAAAC,MAAc,cACtD,OAAOC,MAAgB,aAEvB,MAAMC,EAIF,CAAC,CACH,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EAAOP,EAAM,EACb,MAAAQ,EAAQP,EAAO,MACf,QAAAQ,EAAUV,EAAS,OACrB,IACEF,EAAA,cAACC,EAAA,CACC,KAAMS,EACN,MAAK,GACL,UAAWL,EAAW,MAAO,CAC3B,CAAC,gBAAgBO,CAAO,EAAE,EAAGA,EAC7B,CAAC,cAAcD,CAAK,EAAE,EAAGA,EACzB,cAAeF,CACjB,CAAC,GAEAD,GAAc,KACdD,CACH,EAGFD,EAAI,MAAQH,EACZG,EAAI,OAASF,EACbE,EAAI,SAAWJ,EACf,IAAOW,EAAQP",
6
+ "names": ["React", "Text", "variants", "sizes", "themes", "classNames", "Tag", "text", "icon", "border", "size", "theme", "variant", "tag_default"]
7
7
  }
package/react/tag/tag.scss CHANGED
@@ -15,10 +15,22 @@
15
15
  border-color: var(--ge-tags-primary);
16
16
  color: var(--on-ge-on-tags-primary-default);
17
17
 
18
- &-border {
18
+ &.tag--border {
19
19
  background: transparent;
20
20
  color: var(--ge-tags-primary);
21
21
  }
22
+
23
+ &.tag--theme-fixed {
24
+ background: var(--ge-fixed-tags-primary);
25
+ border-color: var(--ge-fixed-tags-primary);
26
+ color: var(--on-ge-on-fixed-tags-primary-default);
27
+
28
+ &.tag--border {
29
+ background: transparent;
30
+ border-color: var(--ge-fixed-tags-primary);
31
+ color: var(--on-ge-on-fixed-tags-primary-alternate);
32
+ }
33
+ }
22
34
  }
23
35
 
24
36
  &--variant-secondary {
@@ -26,11 +38,23 @@
26
38
  border-color: var(--ge-tags-secondary);
27
39
  color: var(--on-ge-on-tags-secondary-default);
28
40
 
29
- &-border {
41
+ &.tag--border {
30
42
  background: transparent;
31
43
  border-color: var(--ge-tags-secondary);
32
44
  color: var(--on-ge-on-tags-secondary-default);
33
45
  }
46
+
47
+ &.tag--theme-fixed {
48
+ background: var(--ge-fixed-tags-secondary);
49
+ border-color: var(--ge-fixed-tags-secondary);
50
+ color: var(--on-ge-on-fixed-tags-secondary-default);
51
+
52
+ &.tag--border {
53
+ background: transparent;
54
+ border-color: var(--ge-fixed-tags-secondary);
55
+ color: var(--on-ge-on-fixed-tags-secondary-alternate);
56
+ }
57
+ }
34
58
  }
35
59
 
36
60
  &--variant-tertiary {
@@ -38,11 +62,23 @@
38
62
  border-color: var(--ge-tags-featured);
39
63
  color: var(--on-ge-on-tags-featured-default);
40
64
 
41
- &-border {
65
+ &.tag--border {
42
66
  background: transparent;
43
67
  border-color: var(--ge-tags-featured);
44
68
  color: var(--ge-tags-featured);
45
69
  }
70
+
71
+ &.tag--theme-fixed {
72
+ background: var(--ge-fixed-tags-featured);
73
+ border-color: var(--ge-fixed-tags-featured);
74
+ color: var(--on-ge-on-fixed-tags-featured-default);
75
+
76
+ &.tag--border {
77
+ background: transparent;
78
+ border-color: var(--ge-fixed-tags-featured);
79
+ color: var(--on-ge-on-fixed-tags-featured-alternate);
80
+ }
81
+ }
46
82
  }
47
83
 
48
84
  &--variant-positive {
@@ -50,9 +86,19 @@
50
86
  border-color: var(--ge-indicator-tags-positive-alternate);
51
87
  color: var(--on-ge-on-indicator-tags-positive-alternate);
52
88
 
53
- &-border {
89
+ &.tag--border {
54
90
  border-color: var(--on-ge-on-indicator-tags-positive-alternate);
55
91
  }
92
+
93
+ &.tag--theme-fixed {
94
+ background: var(--ge-fixed-indicator-tags-positive);
95
+ border-color: var(--ge-fixed-indicator-tags-positive);
96
+ color: var(--on-ge-on-fixed-indicator-tags-positive);
97
+
98
+ &.tag--border {
99
+ border-color: var(--on-ge-on-fixed-indicator-tags-positive);
100
+ }
101
+ }
56
102
  }
57
103
 
58
104
  &--variant-attention {
@@ -60,9 +106,19 @@
60
106
  border-color: var(--ge-indicator-tags-attention-alternate);
61
107
  color: var(--on-ge-on-indicator-tags-attention-alternate);
62
108
 
63
- &-border {
109
+ &.tag--border {
64
110
  border-color: var(--on-ge-on-indicator-tags-attention-alternate);
65
111
  }
112
+
113
+ &.tag--theme-fixed {
114
+ background: var(--ge-fixed-indicator-tags-attention);
115
+ border-color: var(--ge-fixed-indicator-tags-attention);
116
+ color: var(--on-ge-on-fixed-indicator-tags-attention);
117
+
118
+ &.tag--border {
119
+ border-color: var(--on-ge-on-fixed-indicator-tags-attention);
120
+ }
121
+ }
66
122
  }
67
123
 
68
124
  &--variant-negative {
@@ -70,9 +126,19 @@
70
126
  border-color: var(--ge-indicator-tags-negative-alternate);
71
127
  color: var(--on-ge-on-indicator-tags-negative-alternate);
72
128
 
73
- &-border {
129
+ &.tag--border {
74
130
  border-color: var(--on-ge-on-indicator-tags-negative-alternate);
75
131
  }
132
+
133
+ &.tag--theme-fixed {
134
+ background: var(--ge-fixed-indicator-tags-negative);
135
+ border-color: var(--ge-fixed-indicator-tags-negative);
136
+ color: var(--on-ge-on-fixed-indicator-tags-negative);
137
+
138
+ &.tag--border {
139
+ border-color: var(--on-ge-on-fixed-indicator-tags-negative);
140
+ }
141
+ }
76
142
  }
77
143
 
78
144
  &--variant-neutral {
@@ -80,9 +146,19 @@
80
146
  border-color: var(--ge-indicator-tags-neutral-alternate);
81
147
  color: var(--on-ge-on-indicator-tags-neutral-alternate);
82
148
 
83
- &-border {
149
+ &.tag--border {
84
150
  border-color: var(--on-ge-on-indicator-tags-neutral-alternate);
85
151
  }
152
+
153
+ &.tag--theme-fixed {
154
+ background: var(--ge-fixed-indicator-tags-neutral);
155
+ border-color: var(--ge-fixed-indicator-tags-neutral);
156
+ color: var(--on-ge-on-fixed-indicator-tags-neutral);
157
+
158
+ &.tag--border {
159
+ border-color: var(--on-ge-on-fixed-indicator-tags-neutral);
160
+ }
161
+ }
86
162
  }
87
163
 
88
164
  &--variant-information {
@@ -90,9 +166,19 @@
90
166
  border-color: var(--ge-indicator-tags-information-alternate);
91
167
  color: var(--on-ge-on-indicator-tags-information-alternate);
92
168
 
93
- &-border {
169
+ &.tag--border {
94
170
  border-color: var(--on-ge-on-indicator-tags-information-alternate);
95
171
  }
172
+
173
+ &.tag--theme-fixed {
174
+ background: var(--ge-fixed-indicator-tags-information);
175
+ border-color: var(--ge-fixed-indicator-tags-information);
176
+ color: var(--on-ge-on-fixed-indicator-tags-information);
177
+
178
+ &.tag--border {
179
+ border-color: var(--on-ge-on-fixed-indicator-tags-information);
180
+ }
181
+ }
96
182
  }
97
183
 
98
184
  &--variant-featured {
@@ -100,8 +186,18 @@
100
186
  border-color: var(--ge-indicator-tags-featured-alternate);
101
187
  color: var(--on-ge-on-indicator-tags-featured-alternate);
102
188
 
103
- &-border {
189
+ &.tag--border {
104
190
  border-color: var(--on-ge-on-indicator-tags-featured-alternate);
105
191
  }
192
+
193
+ &.tag--theme-fixed {
194
+ background: var(--ge-fixed-indicator-tags-featured);
195
+ border-color: var(--ge-fixed-indicator-tags-featured);
196
+ color: var(--on-ge-on-fixed-indicator-tags-featured);
197
+
198
+ &.tag--border {
199
+ border-color: var(--on-ge-on-fixed-indicator-tags-featured);
200
+ }
201
+ }
106
202
  }
107
203
  }
package/react/tag/tag.types.d.ts CHANGED
@@ -6,6 +6,10 @@ export declare const sizes: {
6
6
  readonly m: "basic";
7
7
  readonly l: "large";
8
8
  };
9
+ export declare const themes: {
10
+ readonly fixed: "fixed";
11
+ readonly light: "light";
12
+ };
9
13
  export declare const variants: {
10
14
  readonly primary: "primary";
11
15
  readonly secondary: "secondary";
@@ -21,6 +25,7 @@ export type Tag = {
21
25
  text: string;
22
26
  border?: boolean;
23
27
  size?: ObjectValues<typeof sizes>;
28
+ theme?: ObjectValues<typeof themes>;
24
29
  variant?: ObjectValues<typeof variants>;
25
30
  icon?: ReactElement;
26
31
  };
package/react/tag/tag.types.js CHANGED
@@ -1,2 +1,2 @@
1
- import{sizes as e}from"../text/text.types";const s={xs:e.interface,s:e.small,m:e.basic,l:e.large},n={primary:"primary",secondary:"secondary",tertiary:"tertiary",positive:"positive",attention:"attention",negative:"negative",neutral:"neutral",information:"information",featured:"featured"};export{s as sizes,n as variants};
1
+ import{sizes as e}from"../text/text.types";const o={xs:e.interface,s:e.small,m:e.basic,l:e.large},n={fixed:"fixed",light:"light"},c={primary:"primary",secondary:"secondary",tertiary:"tertiary",positive:"positive",attention:"attention",negative:"negative",neutral:"neutral",information:"information",featured:"featured"};export{o as sizes,n as themes,c as variants};
2
2
  //# sourceMappingURL=tag.types.js.map
package/react/tag/tag.types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../react/tag/tag.types.ts"],
4
- "sourcesContent": ["import { ObjectValues } from '../types';\nimport { sizes as TextSizes } from '../text/text.types';\nimport { ReactElement } from 'react';\n\nexport const sizes = {\n xs: TextSizes.interface,\n s: TextSizes.small,\n m: TextSizes.basic,\n l: TextSizes.large,\n} as const;\n\nexport const variants = {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'tertiary',\n positive: 'positive',\n attention: 'attention',\n negative: 'negative',\n neutral: 'neutral',\n information: 'information',\n featured: 'featured',\n} as const;\n\nexport type Tag = {\n text: string;\n border?: boolean;\n size?: ObjectValues<typeof sizes>;\n variant?: ObjectValues<typeof variants>;\n icon?: ReactElement;\n};\n"],
5
- "mappings": "AACA,OAAS,SAASA,MAAiB,qBAG5B,MAAMC,EAAQ,CACnB,GAAID,EAAU,UACd,EAAGA,EAAU,MACb,EAAGA,EAAU,MACb,EAAGA,EAAU,KACf,EAEaE,EAAW,CACtB,QAAS,UACT,UAAW,YACX,SAAU,WACV,SAAU,WACV,UAAW,YACX,SAAU,WACV,QAAS,UACT,YAAa,cACb,SAAU,UACZ",
6
- "names": ["TextSizes", "sizes", "variants"]
4
+ "sourcesContent": ["import { ObjectValues } from '../types';\nimport { sizes as TextSizes } from '../text/text.types';\nimport { ReactElement } from 'react';\n\nexport const sizes = {\n xs: TextSizes.interface,\n s: TextSizes.small,\n m: TextSizes.basic,\n l: TextSizes.large,\n} as const;\n\nexport const themes = {\n fixed: 'fixed',\n light: 'light',\n} as const;\n\nexport const variants = {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'tertiary',\n positive: 'positive',\n attention: 'attention',\n negative: 'negative',\n neutral: 'neutral',\n information: 'information',\n featured: 'featured',\n} as const;\n\nexport type Tag = {\n text: string;\n border?: boolean;\n size?: ObjectValues<typeof sizes>;\n theme?: ObjectValues<typeof themes>;\n variant?: ObjectValues<typeof variants>;\n icon?: ReactElement;\n};\n"],
5
+ "mappings": "AACA,OAAS,SAASA,MAAiB,qBAG5B,MAAMC,EAAQ,CACnB,GAAID,EAAU,UACd,EAAGA,EAAU,MACb,EAAGA,EAAU,MACb,EAAGA,EAAU,KACf,EAEaE,EAAS,CACpB,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,QAAS,UACT,UAAW,YACX,SAAU,WACV,SAAU,WACV,UAAW,YACX,SAAU,WACV,QAAS,UACT,YAAa,cACb,SAAU,UACZ",
6
+ "names": ["TextSizes", "sizes", "themes", "variants"]
7
7
  }
package/tokens/dark.scss CHANGED
@@ -121,6 +121,9 @@ $ge-fixed-tabs-selected-hover: primitives.$coral-120;
121
121
  $ge-fixed-tabs-unselected-default: primitives.$white-20;
122
122
  $ge-fixed-tabs-unselected-disabled: primitives.$white-10;
123
123
  $ge-fixed-tabs-unselected-hover: primitives.$white-40;
124
+ $ge-fixed-tags-featured: primitives.$coral-120;
125
+ $ge-fixed-tags-primary: primitives.$blue-5;
126
+ $ge-fixed-tags-secondary: primitives.$white-60;
124
127
  $ge-graphs-bar-primary: primitives.$coral-90;
125
128
  $ge-graphs-bar-secondary: primitives.$blue-40;
126
129
  $ge-graphs-bar-background-primary: primitives.$black-80;
@@ -291,6 +294,12 @@ $on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
291
294
  $on-ge-on-fixed-selector-unselected-disabled: primitives.$white-50;
292
295
  $on-ge-on-fixed-tabs-default: primitives.$white-100;
293
296
  $on-ge-on-fixed-tabs-disabled: primitives.$white-50;
297
+ $on-ge-on-fixed-tags-featured-alternate: primitives.$coral-120;
298
+ $on-ge-on-fixed-tags-featured-default: primitives.$white-100;
299
+ $on-ge-on-fixed-tags-primary-alternate: primitives.$blue-5;
300
+ $on-ge-on-fixed-tags-primary-default: primitives.$blue-100;
301
+ $on-ge-on-fixed-tags-secondary-alternate: primitives.$white-60;
302
+ $on-ge-on-fixed-tags-secondary-default: primitives.$blue-5;
294
303
  $on-ge-on-indicator-tags-attention-alternate: primitives.$gold-30;
295
304
  $on-ge-on-indicator-tags-attention-default: primitives.$gold-170;
296
305
  $on-ge-on-indicator-tags-featured-alternate: primitives.$coral-40;
package/tokens/darkmode.css CHANGED
@@ -120,6 +120,9 @@
120
120
  --ge-fixed-tabs-unselected-default: #ffffff33;
121
121
  --ge-fixed-tabs-unselected-disabled: #ffffff1a;
122
122
  --ge-fixed-tabs-unselected-hover: #ffffff66;
123
+ --ge-fixed-tags-featured: #c84229;
124
+ --ge-fixed-tags-primary: #f3f4f5;
125
+ --ge-fixed-tags-secondary: #ffffff99;
123
126
  --ge-graphs-bar-primary: #fb6447;
124
127
  --ge-graphs-bar-secondary: #9ea6ae;
125
128
  --ge-graphs-bar-background-primary: #333333;
@@ -290,6 +293,12 @@
290
293
  --on-ge-on-fixed-selector-unselected-disabled: #ffffff80;
291
294
  --on-ge-on-fixed-tabs-default: #ffffff;
292
295
  --on-ge-on-fixed-tabs-disabled: #ffffff80;
296
+ --on-ge-on-fixed-tags-featured-alternate: #c84229;
297
+ --on-ge-on-fixed-tags-featured-default: #ffffff;
298
+ --on-ge-on-fixed-tags-primary-alternate: #f3f4f5;
299
+ --on-ge-on-fixed-tags-primary-default: #0d2134;
300
+ --on-ge-on-fixed-tags-secondary-alternate: #ffffff99;
301
+ --on-ge-on-fixed-tags-secondary-default: #f3f4f5;
293
302
  --on-ge-on-indicator-tags-attention-alternate: #f3e6c5;
294
303
  --on-ge-on-indicator-tags-attention-default: #443716;
295
304
  --on-ge-on-indicator-tags-featured-alternate: #fdbaad;
package/tokens/default-colours.css CHANGED
@@ -120,6 +120,9 @@ html:not([data-theme]) {
120
120
  --ge-fixed-tabs-unselected-default: #ffffff33;
121
121
  --ge-fixed-tabs-unselected-disabled: #ffffff1a;
122
122
  --ge-fixed-tabs-unselected-hover: #ffffff66;
123
+ --ge-fixed-tags-featured: #c84229;
124
+ --ge-fixed-tags-primary: #f3f4f5;
125
+ --ge-fixed-tags-secondary: #ffffff99;
123
126
  --ge-graphs-bar-primary: #fa5333;
124
127
  --ge-graphs-bar-secondary: #9ea6ae;
125
128
  --ge-graphs-bar-background-primary: #dcdee0;
@@ -290,6 +293,12 @@ html:not([data-theme]) {
290
293
  --on-ge-on-fixed-selector-unselected-disabled: #ffffff80;
291
294
  --on-ge-on-fixed-tabs-default: #ffffff;
292
295
  --on-ge-on-fixed-tabs-disabled: #ffffff80;
296
+ --on-ge-on-fixed-tags-featured-alternate: #c84229;
297
+ --on-ge-on-fixed-tags-featured-default: #ffffff;
298
+ --on-ge-on-fixed-tags-primary-alternate: #f3f4f5;
299
+ --on-ge-on-fixed-tags-primary-default: #0d2134;
300
+ --on-ge-on-fixed-tags-secondary-alternate: #ffffff99;
301
+ --on-ge-on-fixed-tags-secondary-default: #f3f4f5;
293
302
  --on-ge-on-indicator-tags-attention-alternate: #866c2a;
294
303
  --on-ge-on-indicator-tags-attention-default: #443716;
295
304
  --on-ge-on-indicator-tags-featured-alternate: #c84229;
package/tokens/light.scss CHANGED
@@ -121,6 +121,9 @@ $ge-fixed-tabs-selected-hover: primitives.$coral-120;
121
121
  $ge-fixed-tabs-unselected-default: primitives.$white-20;
122
122
  $ge-fixed-tabs-unselected-disabled: primitives.$white-10;
123
123
  $ge-fixed-tabs-unselected-hover: primitives.$white-40;
124
+ $ge-fixed-tags-featured: primitives.$coral-120;
125
+ $ge-fixed-tags-primary: primitives.$blue-5;
126
+ $ge-fixed-tags-secondary: primitives.$white-60;
124
127
  $ge-graphs-bar-primary: primitives.$coral-100;
125
128
  $ge-graphs-bar-secondary: primitives.$blue-40;
126
129
  $ge-graphs-bar-background-primary: primitives.$light-grey-15;
@@ -291,6 +294,12 @@ $on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
291
294
  $on-ge-on-fixed-selector-unselected-disabled: primitives.$white-50;
292
295
  $on-ge-on-fixed-tabs-default: primitives.$white-100;
293
296
  $on-ge-on-fixed-tabs-disabled: primitives.$white-50;
297
+ $on-ge-on-fixed-tags-featured-alternate: primitives.$coral-120;
298
+ $on-ge-on-fixed-tags-featured-default: primitives.$white-100;
299
+ $on-ge-on-fixed-tags-primary-alternate: primitives.$blue-5;
300
+ $on-ge-on-fixed-tags-primary-default: primitives.$blue-100;
301
+ $on-ge-on-fixed-tags-secondary-alternate: primitives.$white-60;
302
+ $on-ge-on-fixed-tags-secondary-default: primitives.$blue-5;
294
303
  $on-ge-on-indicator-tags-attention-alternate: primitives.$gold-140;
295
304
  $on-ge-on-indicator-tags-attention-default: primitives.$gold-170;
296
305
  $on-ge-on-indicator-tags-featured-alternate: primitives.$coral-120;
package/tokens/lightmode.css CHANGED
@@ -120,6 +120,9 @@
120
120
  --ge-fixed-tabs-unselected-default: #ffffff33;
121
121
  --ge-fixed-tabs-unselected-disabled: #ffffff1a;
122
122
  --ge-fixed-tabs-unselected-hover: #ffffff66;
123
+ --ge-fixed-tags-featured: #c84229;
124
+ --ge-fixed-tags-primary: #f3f4f5;
125
+ --ge-fixed-tags-secondary: #ffffff99;
123
126
  --ge-graphs-bar-primary: #fa5333;
124
127
  --ge-graphs-bar-secondary: #9ea6ae;
125
128
  --ge-graphs-bar-background-primary: #dcdee0;
@@ -290,6 +293,12 @@
290
293
  --on-ge-on-fixed-selector-unselected-disabled: #ffffff80;
291
294
  --on-ge-on-fixed-tabs-default: #ffffff;
292
295
  --on-ge-on-fixed-tabs-disabled: #ffffff80;
296
+ --on-ge-on-fixed-tags-featured-alternate: #c84229;
297
+ --on-ge-on-fixed-tags-featured-default: #ffffff;
298
+ --on-ge-on-fixed-tags-primary-alternate: #f3f4f5;
299
+ --on-ge-on-fixed-tags-primary-default: #0d2134;
300
+ --on-ge-on-fixed-tags-secondary-alternate: #ffffff99;
301
+ --on-ge-on-fixed-tags-secondary-default: #f3f4f5;
293
302
  --on-ge-on-indicator-tags-attention-alternate: #866c2a;
294
303
  --on-ge-on-indicator-tags-attention-default: #443716;
295
304
  --on-ge-on-indicator-tags-featured-alternate: #c84229;