@equinor/cpl-top-bar-react 0.0.1 → 0.1.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 (3) hide show
  1. package/dist/index.js +51 -27
  2. package/dist/index.mjs +53 -29
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -39,6 +39,7 @@ module.exports = __toCommonJS(src_exports);
39
39
  var import_eds_core_react = require("@equinor/eds-core-react");
40
40
  var import_eds_icons = require("@equinor/eds-icons");
41
41
  var import_styled_components = __toESM(require("styled-components"));
42
+ var import_eds_tokens = require("@equinor/eds-tokens");
42
43
  var import_jsx_runtime = require("react/jsx-runtime");
43
44
  function TopBar({
44
45
  appName,
@@ -65,10 +66,12 @@ function TopBar({
65
66
  ] });
66
67
  }
67
68
  var StyledEDSTopBar = (0, import_styled_components.default)(import_eds_core_react.TopBar)`
68
- background-color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
69
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
70
69
  border-color: rgba(255, 255, 255, 0.16);
71
70
  gap: 0;
71
+ ${({ $darkMode }) => $darkMode ? import_styled_components.css`
72
+ background: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
73
+ color: #fff;
74
+ ` : ""}
72
75
  `;
73
76
  var AppNameContainer = import_styled_components.default.div`
74
77
  display: flex;
@@ -77,24 +80,31 @@ var AppNameContainer = import_styled_components.default.div`
77
80
  `;
78
81
  var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
79
82
  font-weight: 300;
80
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
83
+ ${({ $darkMode }) => $darkMode ? import_styled_components.css`
84
+ color: #fff;
85
+ ` : ""}
81
86
  `;
82
87
  var DocumentationDiv = import_styled_components.default.div`
83
88
  text-decoration: none;
84
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
85
89
  display: flex;
86
90
  gap: 0.3rem;
87
91
  font-weight: 300;
88
92
  a {
89
93
  text-decoration: none;
90
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
94
+ color: inherit;
91
95
  }
96
+ ${({ $darkMode }) => $darkMode ? import_styled_components.css`
97
+ color: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
98
+ a {
99
+ color: #fff;
100
+ }
101
+ ` : ""}
92
102
  `;
93
103
 
94
104
  // src/UserMenu/UserMenu.tsx
95
105
  var import_eds_core_react2 = require("@equinor/eds-core-react");
96
106
  var import_eds_icons2 = require("@equinor/eds-icons");
97
- var import_eds_tokens = require("@equinor/eds-tokens");
107
+ var import_eds_tokens2 = require("@equinor/eds-tokens");
98
108
  var import_react = require("react");
99
109
  var import_styled_components2 = __toESM(require("styled-components"));
100
110
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -141,7 +151,7 @@ function UserMenu({
141
151
  anchorEl,
142
152
  style: { padding: 0, paddingBottom: 2 },
143
153
  children: [
144
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IconAndTextWrapper, { children: [
154
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IconAndTextWrapper, { $darkMode: darkMode, children: [
145
155
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LetterCircle, { $darkMode: darkMode, children: firstLetter }),
146
156
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
147
157
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
@@ -163,59 +173,69 @@ function UserMenu({
163
173
  ] });
164
174
  }
165
175
  var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react2.Menu)`
166
- background: ${(p) => p.$darkMode ? " #3E4F5C" : " #3a7e82"};
167
- border-radius: ${import_eds_tokens.tokens.shape.corners.borderRadius};
168
- margin-top: ${import_eds_tokens.tokens.spacings.comfortable.small};
169
- margin-bottom: -${import_eds_tokens.tokens.spacings.comfortable.small};
170
- padding-bottom: ${import_eds_tokens.tokens.spacings.comfortable.small};
176
+ border-radius: ${import_eds_tokens2.tokens.shape.corners.borderRadius};
177
+ margin-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
178
+ margin-bottom: -${import_eds_tokens2.tokens.spacings.comfortable.small};
179
+ padding-bottom: ${import_eds_tokens2.tokens.spacings.comfortable.small};
171
180
  padding-left: 0;
172
181
  padding-right: 0;
173
- padding-top: ${import_eds_tokens.tokens.spacings.comfortable.small};
182
+ padding-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
174
183
  width: 315px;
175
- color: white;
176
184
 
177
185
  .menu-item {
178
186
  align-items: center;
179
- background: transparent;
180
- color: white;
181
187
  display: flex;
182
- gap: ${import_eds_tokens.tokens.spacings.comfortable.medium};
188
+ gap: ${import_eds_tokens2.tokens.spacings.comfortable.medium};
183
189
  opacity: 0.85;
184
- padding: ${import_eds_tokens.tokens.spacings.comfortable.small} ${import_eds_tokens.tokens.spacings.comfortable.large};
190
+ padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
185
191
  svg {
186
192
  opacity: 0.7;
187
193
  }
188
194
  &:hover {
189
- background: #305c75;
190
195
  opacity: 1;
191
196
  svg {
192
197
  opacity: 1;
193
198
  }
194
199
  }
195
200
  }
201
+ ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
202
+ background: #3e4f5c;
203
+ color: #fff;
204
+ .menu-item {
205
+ color: #fff;
206
+ &:hover {
207
+ background: #305c75;
208
+ }
209
+ }
210
+ ` : ``}
196
211
  `;
197
212
  var LetterCircle = import_styled_components2.default.span`
198
213
  align-items: center;
199
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
200
214
  border-radius: 1000px;
201
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
202
215
  display: flex;
203
216
  flex-shrink: 0;
204
217
  font-weight: bold;
205
218
  height: 32px;
206
219
  justify-content: center;
207
220
  width: 32px;
221
+ ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
222
+ background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
223
+ color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
224
+ ` : ``}
208
225
  `;
209
226
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react2.Button)`
210
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
211
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
212
227
  margin: 10px 12px;
213
228
  font-weight: bold;
214
229
  width: 32px;
215
230
  height: 32px;
216
- &:hover {
217
- background: ${(p) => p.$darkMode ? "#fff" : "#132634"};
218
- }
231
+
232
+ ${({ $darkMode }) => $darkMode && import_styled_components2.css`
233
+ background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
234
+ color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
235
+ &:hover {
236
+ background: #fff;
237
+ }
238
+ `}
219
239
  `;
220
240
  var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react2.Menu.Item)`
221
241
  display: flex;
@@ -224,8 +244,12 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
224
244
  width: 315px;
225
245
  color: inherit;
226
246
  &:hover {
227
- background: #305c75;
228
247
  }
248
+ ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
249
+ &:hover {
250
+ background: #305c75; //TODO: get color from token in the future
251
+ }
252
+ ` : ""}
229
253
  `;
230
254
  // Annotate the CommonJS export names for ESM import in node:
231
255
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -1,7 +1,8 @@
1
1
  // src/TopBar/TopBar.tsx
2
2
  import { TopBar as EDSTopBar, Icon, Typography } from "@equinor/eds-core-react";
3
3
  import { external_link } from "@equinor/eds-icons";
4
- import styled from "styled-components";
4
+ import styled, { css } from "styled-components";
5
+ import { tokens } from "@equinor/eds-tokens";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  function TopBar({
7
8
  appName,
@@ -28,10 +29,12 @@ function TopBar({
28
29
  ] });
29
30
  }
30
31
  var StyledEDSTopBar = styled(EDSTopBar)`
31
- background-color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
32
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
33
32
  border-color: rgba(255, 255, 255, 0.16);
34
33
  gap: 0;
34
+ ${({ $darkMode }) => $darkMode ? css`
35
+ background: ${tokens.colors.interactive.table__cell__fill_resting.hex};
36
+ color: #fff;
37
+ ` : ""}
35
38
  `;
36
39
  var AppNameContainer = styled.div`
37
40
  display: flex;
@@ -40,26 +43,33 @@ var AppNameContainer = styled.div`
40
43
  `;
41
44
  var StyledTypography = styled(Typography)`
42
45
  font-weight: 300;
43
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
46
+ ${({ $darkMode }) => $darkMode ? css`
47
+ color: #fff;
48
+ ` : ""}
44
49
  `;
45
50
  var DocumentationDiv = styled.div`
46
51
  text-decoration: none;
47
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
48
52
  display: flex;
49
53
  gap: 0.3rem;
50
54
  font-weight: 300;
51
55
  a {
52
56
  text-decoration: none;
53
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
57
+ color: inherit;
54
58
  }
59
+ ${({ $darkMode }) => $darkMode ? css`
60
+ color: ${tokens.colors.interactive.table__cell__fill_resting.hex};
61
+ a {
62
+ color: #fff;
63
+ }
64
+ ` : ""}
55
65
  `;
56
66
 
57
67
  // src/UserMenu/UserMenu.tsx
58
68
  import { Button, Icon as Icon2, Menu } from "@equinor/eds-core-react";
59
69
  import { log_out, settings } from "@equinor/eds-icons";
60
- import { tokens } from "@equinor/eds-tokens";
70
+ import { tokens as tokens2 } from "@equinor/eds-tokens";
61
71
  import { useState } from "react";
62
- import styled2 from "styled-components";
72
+ import styled2, { css as css2 } from "styled-components";
63
73
  import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
64
74
  function UserMenu({
65
75
  user,
@@ -104,7 +114,7 @@ function UserMenu({
104
114
  anchorEl,
105
115
  style: { padding: 0, paddingBottom: 2 },
106
116
  children: [
107
- /* @__PURE__ */ jsxs2(IconAndTextWrapper, { children: [
117
+ /* @__PURE__ */ jsxs2(IconAndTextWrapper, { $darkMode: darkMode, children: [
108
118
  /* @__PURE__ */ jsx2(LetterCircle, { $darkMode: darkMode, children: firstLetter }),
109
119
  isOpen && /* @__PURE__ */ jsxs2("div", { children: [
110
120
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
@@ -126,59 +136,69 @@ function UserMenu({
126
136
  ] });
127
137
  }
128
138
  var MenuWrapper = styled2(Menu)`
129
- background: ${(p) => p.$darkMode ? " #3E4F5C" : " #3a7e82"};
130
- border-radius: ${tokens.shape.corners.borderRadius};
131
- margin-top: ${tokens.spacings.comfortable.small};
132
- margin-bottom: -${tokens.spacings.comfortable.small};
133
- padding-bottom: ${tokens.spacings.comfortable.small};
139
+ border-radius: ${tokens2.shape.corners.borderRadius};
140
+ margin-top: ${tokens2.spacings.comfortable.small};
141
+ margin-bottom: -${tokens2.spacings.comfortable.small};
142
+ padding-bottom: ${tokens2.spacings.comfortable.small};
134
143
  padding-left: 0;
135
144
  padding-right: 0;
136
- padding-top: ${tokens.spacings.comfortable.small};
145
+ padding-top: ${tokens2.spacings.comfortable.small};
137
146
  width: 315px;
138
- color: white;
139
147
 
140
148
  .menu-item {
141
149
  align-items: center;
142
- background: transparent;
143
- color: white;
144
150
  display: flex;
145
- gap: ${tokens.spacings.comfortable.medium};
151
+ gap: ${tokens2.spacings.comfortable.medium};
146
152
  opacity: 0.85;
147
- padding: ${tokens.spacings.comfortable.small} ${tokens.spacings.comfortable.large};
153
+ padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
148
154
  svg {
149
155
  opacity: 0.7;
150
156
  }
151
157
  &:hover {
152
- background: #305c75;
153
158
  opacity: 1;
154
159
  svg {
155
160
  opacity: 1;
156
161
  }
157
162
  }
158
163
  }
164
+ ${({ $darkMode }) => $darkMode ? css2`
165
+ background: #3e4f5c;
166
+ color: #fff;
167
+ .menu-item {
168
+ color: #fff;
169
+ &:hover {
170
+ background: #305c75;
171
+ }
172
+ }
173
+ ` : ``}
159
174
  `;
160
175
  var LetterCircle = styled2.span`
161
176
  align-items: center;
162
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
163
177
  border-radius: 1000px;
164
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
165
178
  display: flex;
166
179
  flex-shrink: 0;
167
180
  font-weight: bold;
168
181
  height: 32px;
169
182
  justify-content: center;
170
183
  width: 32px;
184
+ ${({ $darkMode }) => $darkMode ? css2`
185
+ background: ${tokens2.colors.interactive.link_in_snackbars.hex};
186
+ color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
187
+ ` : ``}
171
188
  `;
172
189
  var StyledUserButton = styled2(Button)`
173
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
174
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
175
190
  margin: 10px 12px;
176
191
  font-weight: bold;
177
192
  width: 32px;
178
193
  height: 32px;
179
- &:hover {
180
- background: ${(p) => p.$darkMode ? "#fff" : "#132634"};
181
- }
194
+
195
+ ${({ $darkMode }) => $darkMode && css2`
196
+ background: ${tokens2.colors.interactive.link_in_snackbars.hex};
197
+ color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
198
+ &:hover {
199
+ background: #fff;
200
+ }
201
+ `}
182
202
  `;
183
203
  var IconAndTextWrapper = styled2(Menu.Item)`
184
204
  display: flex;
@@ -187,8 +207,12 @@ var IconAndTextWrapper = styled2(Menu.Item)`
187
207
  width: 315px;
188
208
  color: inherit;
189
209
  &:hover {
190
- background: #305c75;
191
210
  }
211
+ ${({ $darkMode }) => $darkMode ? css2`
212
+ &:hover {
213
+ background: #305c75; //TODO: get color from token in the future
214
+ }
215
+ ` : ""}
192
216
  `;
193
217
  export {
194
218
  TopBar,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-top-bar-react",
3
- "version": "0.0.1",
3
+ "version": "0.1.0",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",