@equinor/cpl-theme-react 0.0.7 → 0.0.9

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 (2) hide show
  1. package/dist/index.css +59 -28
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --eds_ui_background__info: rgba(213, 234, 244, 1);
13
13
  --eds_ui_background__warning: rgba(255, 231, 214, 1);
14
14
  --eds_ui_background__danger: rgba(255, 193, 193, 1);
15
+
15
16
  --eds_infographic_substitute__purple_berry: rgba(140, 17, 89, 1);
16
17
  --eds_infographic_substitute__pink_rose: rgba(226, 73, 115, 1);
17
18
  --eds_infographic_substitute__pink_salmon: rgba(255, 146, 168, 1);
@@ -36,6 +37,7 @@
36
37
  --eds_infographic_primary__spruce_wood: rgba(255, 231, 214, 1);
37
38
  --eds_infographic_primary__mist_blue: rgba(213, 234, 244, 1);
38
39
  --eds_infographic_primary__lichen_green: rgba(230, 250, 236, 1);
40
+
39
41
  --eds_logo__fill_positive: rgba(235, 0, 55, 1);
40
42
  --eds_logo__fill_negative: rgba(255, 255, 255, 1);
41
43
  --eds_interactive_primary__selected_highlight: rgba(230, 250, 236, 1);
@@ -76,7 +78,11 @@
76
78
  --eds_interactive__pressed_overlay_light: rgba(255, 255, 255, 0.2);
77
79
 
78
80
  /** Custom variables - not part of EDS */
79
- --ui-background-temporary-nav: #fff;
81
+ --cpl-ui-background-temporary-nav: #fff;
82
+ --cpl-divider-color: var(--eds_ui_background__medium);
83
+ --cpl-sidebar-border-color: var(--eds_ui_background__medium);
84
+ --cpl-sidebar-hover-color: var(--eds_ui_background__medium);
85
+ --cpl-background-color-env-metabar: rgb(251, 244, 180);
80
86
 
81
87
  /* Chart colors (1-22) */
82
88
  --chart-color-1: #00a3be;
@@ -124,6 +130,8 @@
124
130
  --eds_interactive_secondary__resting: rgba(222, 229, 231, 1);
125
131
  --eds_interactive_secondary__link_hover: rgba(255, 255, 255, 1);
126
132
 
133
+ --eds_paragraph__meta_color: rgb(216, 125, 125);
134
+
127
135
  /**
128
136
  * Note: colors have been programatically converted from light mode
129
137
  Need to verify colors
@@ -138,35 +146,36 @@
138
146
  --eds_ui_background__warning: rgba(0, 24, 41, 1);
139
147
  --eds_ui_background__danger: rgba(0, 62, 62, 1);
140
148
 
141
- --eds_infographic_substitute__purple_berry: rgba(115, 238, 166, 1);
142
- --eds_infographic_substitute__pink_rose: rgba(29, 182, 140, 1);
143
- --eds_infographic_substitute__pink_salmon: rgba(0, 109, 87, 1);
144
- --eds_infographic_substitute__green_cucumber: rgba(255, 160, 168, 1);
145
- --eds_infographic_substitute__green_succulent: rgba(255, 104, 132, 1);
146
- --eds_infographic_substitute__green_mint: rgba(191, 44, 112, 1);
147
- --eds_infographic_substitute__blue_ocean: rgba(255, 191, 119, 1);
148
- --eds_infographic_substitute__blue_overcast: rgba(255, 123, 59, 1);
149
- --eds_infographic_substitute__blue_sky: rgba(173, 63, 0, 1);
150
- --eds_infographic_primary__moss_green_100: rgba(255, 143, 134, 1);
151
- --eds_infographic_primary__moss_green_55: rgba(140, 78, 74, 1);
152
- --eds_infographic_primary__moss_green_34: rgba(87, 49, 46, 1);
153
- --eds_infographic_primary__moss_green_21: rgba(54, 31, 29, 1);
154
- --eds_infographic_primary__moss_green_13: rgba(33, 18, 17, 1);
155
- --eds_infographic_primary__energy_red_100: rgba(20, 255, 200, 1);
156
- --eds_infographic_primary__energy_red_55: rgba(0, 130, 103, 1);
157
- --eds_infographic_primary__energy_red_34: rgba(0, 81, 64, 1);
158
- --eds_infographic_primary__energy_red_21: rgba(0, 50, 40, 1);
159
- --eds_infographic_primary__energy_red_13: rgba(0, 31, 24, 1);
160
- --eds_infographic_primary__weathered_red: rgba(130, 255, 220, 1);
161
- --eds_infographic_primary__slate_blue: rgba(219, 200, 185, 1);
162
- --eds_infographic_primary__spruce_wood: rgba(0, 24, 41, 1);
163
- --eds_infographic_primary__mist_blue: rgba(42, 21, 11, 1);
164
- --eds_infographic_primary__lichen_green: rgba(25, 5, 19, 1);
149
+ /** keeping the infographic colors the same as light mode for now */
150
+ --eds_infographic_substitute__purple_berry: rgba(140, 17, 89, 1);
151
+ --eds_infographic_substitute__pink_rose: rgba(226, 73, 115, 1);
152
+ --eds_infographic_substitute__pink_salmon: rgba(255, 146, 168, 1);
153
+ --eds_infographic_substitute__green_cucumber: rgba(0, 95, 87, 1);
154
+ --eds_infographic_substitute__green_succulent: rgba(0, 151, 123, 1);
155
+ --eds_infographic_substitute__green_mint: rgba(64, 211, 143, 1);
156
+ --eds_infographic_substitute__blue_ocean: rgba(0, 64, 136, 1);
157
+ --eds_infographic_substitute__blue_overcast: rgba(0, 132, 196, 1);
158
+ --eds_infographic_substitute__blue_sky: rgba(82, 192, 255, 1);
159
+ --eds_infographic_primary__moss_green_100: rgba(0, 112, 121, 1);
160
+ --eds_infographic_primary__moss_green_55: rgba(115, 177, 181, 1);
161
+ --eds_infographic_primary__moss_green_34: rgba(168, 206, 209, 1);
162
+ --eds_infographic_primary__moss_green_21: rgba(201, 224, 226, 1);
163
+ --eds_infographic_primary__moss_green_13: rgba(222, 237, 238, 1);
164
+ --eds_infographic_primary__energy_red_100: rgba(235, 0, 55, 1);
165
+ --eds_infographic_primary__energy_red_55: rgba(255, 125, 152, 1);
166
+ --eds_infographic_primary__energy_red_34: rgba(255, 174, 191, 1);
167
+ --eds_infographic_primary__energy_red_21: rgba(255, 205, 215, 1);
168
+ --eds_infographic_primary__energy_red_13: rgba(255, 224, 231, 1);
169
+ --eds_infographic_primary__weathered_red: rgba(125, 0, 35, 1);
170
+ --eds_infographic_primary__slate_blue: rgba(36, 55, 70, 1);
171
+ --eds_infographic_primary__spruce_wood: rgba(255, 231, 214, 1);
172
+ --eds_infographic_primary__mist_blue: rgba(213, 234, 244, 1);
173
+ --eds_infographic_primary__lichen_green: rgba(230, 250, 236, 1);
165
174
 
166
175
  --eds_logo__fill_positive: rgba(20, 255, 200, 1);
167
176
  --eds_logo__fill_negative: rgba(0, 0, 0, 1);
168
177
 
169
- --eds_interactive_primary__selected_highlight: rgba(25, 5, 19, 1);
178
+ --eds_interactive_primary__selected_highlight: rgba(48, 92, 117, 1);
170
179
  --eds_interactive_primary__selected_hover: rgba(60, 12, 45, 1);
171
180
  --eds_interactive_danger__highlight: rgba(0, 62, 62, 1);
172
181
  --eds_interactive_danger__resting: rgba(20, 255, 255, 1);
@@ -192,7 +201,7 @@
192
201
  --eds_interactive__disabled__border: rgba(64, 84, 98, 1); /* updated*/
193
202
  --eds_interactive__disabled__fill: rgba(21, 21, 21, 1);
194
203
  --eds_interactive__link_on_interactive_colors: rgba(0, 0, 0, 1);
195
- --eds_interactive__icon_on_interactive_colors: rgba(0, 0, 0, 1);
204
+ --eds_interactive__icon_on_interactive_colors: rgba(255,255,255,1); /*updated*/
196
205
  --eds_interactive__link_in_snackbars: rgba(151, 202, 206, 1); /* updated */
197
206
  --eds_interactive__pressed_overlay_dark: rgba(255, 255, 255, 0.8);
198
207
  --eds_interactive__pressed_overlay_light: rgba(0, 0, 0, 0.8);
@@ -201,7 +210,12 @@
201
210
  * CUSTOM VARIABLES
202
211
  Have not been able to find a match for these
203
212
  **/
204
- --ui-background-temporary-nav: rgb(62, 79, 92);
213
+ --cpl-ui-background-temporary-nav: rgb(62, 79, 92);
214
+ --cpl-eds-color-text-static: rgba(166, 175, 181, 1);
215
+ --cpl-divider-color: rgba(255, 255, 255, 0.16);
216
+ --cpl-sidebar-border-color: transparent;
217
+ --cpl-sidebar-hover-color: var(--eds_interactive_primary__selected_highlight);
218
+ --cpl-background-color-env-metabar: rgb(251, 244, 180);
205
219
 
206
220
  /* Chart colors (1-22) */
207
221
  --chart-color-1: #2caffe;
@@ -228,11 +242,28 @@
228
242
  --chart-color-22: #544fc5;
229
243
  }
230
244
 
245
+ *,
246
+ *::before,
247
+ *::after {
248
+ box-sizing: border-box;
249
+ }
250
+
231
251
  body {
232
252
  background-color: var(--eds_ui_background__default);
233
253
  color: var(--eds_text__static_icons__default);
234
254
 
255
+
256
+
257
+ scrollbar-color: var(--cpl-eds-color-text-static) var(--eds_ui_background__default);
258
+
235
259
  a {
236
260
  color: var(--eds_text__static_icons__default);
261
+
262
+ &:focus-visible {
263
+ outline: 2px dashed var(--eds_interactive__focus);
264
+ outline-offset: 2px;
265
+ }
237
266
  }
267
+
268
+
238
269
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-theme-react",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",