@equinor/cpl-top-bar-react 0.3.1 → 0.3.2

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 (3) hide show
  1. package/dist/index.js +12 -28
  2. package/dist/index.mjs +12 -28
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -91,8 +91,6 @@ var StyledEDSTopBar = (0, import_styled_components.default)(import_eds_core_reac
91
91
  gap: 0;
92
92
  padding: 0px 20px;
93
93
  margin: 0px;
94
- background: var(--background-default, rgba(255, 255, 255, 1));
95
- color: var(--color-text);
96
94
  `;
97
95
  var AppNameContainer = import_styled_components.default.div`
98
96
  display: flex;
@@ -100,7 +98,7 @@ var AppNameContainer = import_styled_components.default.div`
100
98
  align-items: center;
101
99
  `;
102
100
  var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
103
- color: var(--color-text);
101
+ color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
104
102
  `;
105
103
  var LinkContainer = import_styled_components.default.div`
106
104
  display: flex;
@@ -112,25 +110,16 @@ var StyledLink = import_styled_components.default.a`
112
110
  display: flex;
113
111
  align-items: center;
114
112
  gap: 0.3rem;
115
-
116
113
  text-decoration: none;
117
- color: var(--color-text);
114
+ color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
118
115
  `;
119
116
  var ThemedButton = (0, import_styled_components.default)(import_eds_core_react.Button)`
120
- background-color: transparent;
121
- color: var(--interactive-focus-border, ${import_eds_tokens.tokens.colors.interactive.primary__resting.hex});
122
-
123
- &:focus-visible {
124
- outline-color: var(--interactive-focus-border, ${import_eds_tokens.tokens.colors.interactive.focus.hex});
125
- }
126
-
127
117
  &:hover {
128
- background-color: var(
129
- --interactive-primary-hover-alt,
130
- ${import_eds_tokens.tokens.colors.interactive.primary__hover_alt.hex}
131
- );
132
- color: var(--interactive-secondary-hover, ${import_eds_tokens.tokens.colors.interactive.primary__resting.hex});
118
+ color: var(--button-hover);
133
119
  }
120
+
121
+
122
+
134
123
  `;
135
124
 
136
125
  // src/FeedbackLink/FeedbackLink.tsx
@@ -234,7 +223,7 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
234
223
  width: 315px;
235
224
 
236
225
  background: var(--ui-background-temporary-nav, #fff);
237
- color: var(--color-text);
226
+ color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
238
227
 
239
228
  .menu-item {
240
229
  align-items: center;
@@ -243,13 +232,13 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
243
232
  opacity: 0.85;
244
233
  padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
245
234
 
246
- color: var(--color-text);
247
235
  svg {
248
236
  opacity: 0.7;
249
237
  }
250
238
  &:hover {
251
239
  opacity: 1;
252
- background: var(--menu-item-hover-color);
240
+ background-color: transparent;
241
+
253
242
  svg {
254
243
  opacity: 1;
255
244
  }
@@ -265,22 +254,17 @@ var LetterCircle = import_styled_components2.default.span`
265
254
  height: 32px;
266
255
  justify-content: center;
267
256
  width: 32px;
268
- background-color: var(
269
- --interactive-focus-border,
270
- ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex}
271
- );
272
- color: var(--color-text-inverse, #fff);
257
+ background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.rgba};
258
+ color: ${import_eds_tokens2.tokens.colors.text.static_icons__primary_white.rgba};
273
259
  `;
274
260
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react3.Button)`
275
261
  margin-left: 12px;
276
262
  font-weight: bold;
277
263
  width: 32px;
278
264
  height: 32px;
279
- background: var(--interactive-focus-border, ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex});
280
- color: var(--color-text-inverse, #fff);
281
265
 
282
266
  &:hover {
283
- background-color: var(--color-text, rgba(0, 79, 85, 1));
267
+ background-color: var(--button-hover, rgba(0, 79, 85, 1));
284
268
  }
285
269
  `;
286
270
  var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react3.Menu.Item)`
package/dist/index.mjs CHANGED
@@ -52,8 +52,6 @@ var StyledEDSTopBar = styled(EDSTopBar)`
52
52
  gap: 0;
53
53
  padding: 0px 20px;
54
54
  margin: 0px;
55
- background: var(--background-default, rgba(255, 255, 255, 1));
56
- color: var(--color-text);
57
55
  `;
58
56
  var AppNameContainer = styled.div`
59
57
  display: flex;
@@ -61,7 +59,7 @@ var AppNameContainer = styled.div`
61
59
  align-items: center;
62
60
  `;
63
61
  var StyledTypography = styled(Typography)`
64
- color: var(--color-text);
62
+ color: ${tokens.colors.text.static_icons__default.rgba};
65
63
  `;
66
64
  var LinkContainer = styled.div`
67
65
  display: flex;
@@ -73,25 +71,16 @@ var StyledLink = styled.a`
73
71
  display: flex;
74
72
  align-items: center;
75
73
  gap: 0.3rem;
76
-
77
74
  text-decoration: none;
78
- color: var(--color-text);
75
+ color: ${tokens.colors.text.static_icons__default.rgba};
79
76
  `;
80
77
  var ThemedButton = styled(Button)`
81
- background-color: transparent;
82
- color: var(--interactive-focus-border, ${tokens.colors.interactive.primary__resting.hex});
83
-
84
- &:focus-visible {
85
- outline-color: var(--interactive-focus-border, ${tokens.colors.interactive.focus.hex});
86
- }
87
-
88
78
  &:hover {
89
- background-color: var(
90
- --interactive-primary-hover-alt,
91
- ${tokens.colors.interactive.primary__hover_alt.hex}
92
- );
93
- color: var(--interactive-secondary-hover, ${tokens.colors.interactive.primary__resting.hex});
79
+ color: var(--button-hover);
94
80
  }
81
+
82
+
83
+
95
84
  `;
96
85
 
97
86
  // src/FeedbackLink/FeedbackLink.tsx
@@ -195,7 +184,7 @@ var MenuWrapper = styled2(Menu)`
195
184
  width: 315px;
196
185
 
197
186
  background: var(--ui-background-temporary-nav, #fff);
198
- color: var(--color-text);
187
+ color: ${tokens2.colors.text.static_icons__default.rgba};
199
188
 
200
189
  .menu-item {
201
190
  align-items: center;
@@ -204,13 +193,13 @@ var MenuWrapper = styled2(Menu)`
204
193
  opacity: 0.85;
205
194
  padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
206
195
 
207
- color: var(--color-text);
208
196
  svg {
209
197
  opacity: 0.7;
210
198
  }
211
199
  &:hover {
212
200
  opacity: 1;
213
- background: var(--menu-item-hover-color);
201
+ background-color: transparent;
202
+
214
203
  svg {
215
204
  opacity: 1;
216
205
  }
@@ -226,22 +215,17 @@ var LetterCircle = styled2.span`
226
215
  height: 32px;
227
216
  justify-content: center;
228
217
  width: 32px;
229
- background-color: var(
230
- --interactive-focus-border,
231
- ${tokens2.colors.interactive.primary__resting.hex}
232
- );
233
- color: var(--color-text-inverse, #fff);
218
+ background-color: ${tokens2.colors.interactive.primary__resting.rgba};
219
+ color: ${tokens2.colors.text.static_icons__primary_white.rgba};
234
220
  `;
235
221
  var StyledUserButton = styled2(Button2)`
236
222
  margin-left: 12px;
237
223
  font-weight: bold;
238
224
  width: 32px;
239
225
  height: 32px;
240
- background: var(--interactive-focus-border, ${tokens2.colors.interactive.primary__resting.hex});
241
- color: var(--color-text-inverse, #fff);
242
226
 
243
227
  &:hover {
244
- background-color: var(--color-text, rgba(0, 79, 85, 1));
228
+ background-color: var(--button-hover, rgba(0, 79, 85, 1));
245
229
  }
246
230
  `;
247
231
  var IconAndTextWrapper = styled2(Menu.Item)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-top-bar-react",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",