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

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 +8 -36
  2. package/dist/index.mjs +8 -36
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -63,7 +63,7 @@ function TopBar({
63
63
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledEDSTopBar, { children: [
64
64
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, { style: { padding: 0 }, children: [
65
65
  hasSideMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
66
- ThemedButton,
66
+ import_eds_core_react.Button,
67
67
  {
68
68
  variant: "ghost_icon",
69
69
  "aria-label": "menu action",
@@ -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,8 @@ 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);
118
- `;
119
- 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
- &: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});
133
- }
114
+ color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
134
115
  `;
135
116
 
136
117
  // src/FeedbackLink/FeedbackLink.tsx
@@ -234,7 +215,7 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
234
215
  width: 315px;
235
216
 
236
217
  background: var(--ui-background-temporary-nav, #fff);
237
- color: var(--color-text);
218
+ color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
238
219
 
239
220
  .menu-item {
240
221
  align-items: center;
@@ -243,13 +224,13 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
243
224
  opacity: 0.85;
244
225
  padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
245
226
 
246
- color: var(--color-text);
247
227
  svg {
248
228
  opacity: 0.7;
249
229
  }
250
230
  &:hover {
251
231
  opacity: 1;
252
- background: var(--menu-item-hover-color);
232
+ background-color: transparent;
233
+
253
234
  svg {
254
235
  opacity: 1;
255
236
  }
@@ -265,23 +246,14 @@ var LetterCircle = import_styled_components2.default.span`
265
246
  height: 32px;
266
247
  justify-content: center;
267
248
  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);
249
+ background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.rgba};
250
+ color: ${import_eds_tokens2.tokens.colors.text.static_icons__primary_white.rgba};
273
251
  `;
274
252
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react3.Button)`
275
253
  margin-left: 12px;
276
254
  font-weight: bold;
277
255
  width: 32px;
278
256
  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
-
282
- &:hover {
283
- background-color: var(--color-text, rgba(0, 79, 85, 1));
284
- }
285
257
  `;
286
258
  var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react3.Menu.Item)`
287
259
  display: flex;
package/dist/index.mjs CHANGED
@@ -24,7 +24,7 @@ function TopBar({
24
24
  return /* @__PURE__ */ jsxs(StyledEDSTopBar, { children: [
25
25
  /* @__PURE__ */ jsxs(EDSTopBar.Header, { style: { padding: 0 }, children: [
26
26
  hasSideMenu && /* @__PURE__ */ jsx(
27
- ThemedButton,
27
+ Button,
28
28
  {
29
29
  variant: "ghost_icon",
30
30
  "aria-label": "menu action",
@@ -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,8 @@ 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);
79
- `;
80
- 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
- &: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});
94
- }
75
+ color: ${tokens.colors.text.static_icons__default.rgba};
95
76
  `;
96
77
 
97
78
  // src/FeedbackLink/FeedbackLink.tsx
@@ -195,7 +176,7 @@ var MenuWrapper = styled2(Menu)`
195
176
  width: 315px;
196
177
 
197
178
  background: var(--ui-background-temporary-nav, #fff);
198
- color: var(--color-text);
179
+ color: ${tokens2.colors.text.static_icons__default.rgba};
199
180
 
200
181
  .menu-item {
201
182
  align-items: center;
@@ -204,13 +185,13 @@ var MenuWrapper = styled2(Menu)`
204
185
  opacity: 0.85;
205
186
  padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
206
187
 
207
- color: var(--color-text);
208
188
  svg {
209
189
  opacity: 0.7;
210
190
  }
211
191
  &:hover {
212
192
  opacity: 1;
213
- background: var(--menu-item-hover-color);
193
+ background-color: transparent;
194
+
214
195
  svg {
215
196
  opacity: 1;
216
197
  }
@@ -226,23 +207,14 @@ var LetterCircle = styled2.span`
226
207
  height: 32px;
227
208
  justify-content: center;
228
209
  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);
210
+ background-color: ${tokens2.colors.interactive.primary__resting.rgba};
211
+ color: ${tokens2.colors.text.static_icons__primary_white.rgba};
234
212
  `;
235
213
  var StyledUserButton = styled2(Button2)`
236
214
  margin-left: 12px;
237
215
  font-weight: bold;
238
216
  width: 32px;
239
217
  height: 32px;
240
- background: var(--interactive-focus-border, ${tokens2.colors.interactive.primary__resting.hex});
241
- color: var(--color-text-inverse, #fff);
242
-
243
- &:hover {
244
- background-color: var(--color-text, rgba(0, 79, 85, 1));
245
- }
246
218
  `;
247
219
  var IconAndTextWrapper = styled2(Menu.Item)`
248
220
  display: flex;
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.3",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",