Skip to content

Commit 8746f1c

Browse files
SharonStratsSharonStrats
committed
update dev css
1 parent ef0b0c9 commit 8746f1c

4 files changed

Lines changed: 804 additions & 157 deletions

File tree

‎dev/dev-light.css‎

Lines changed: 136 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,66 @@
88
*/
99

1010
:root {
11+
/* New Design: Colors (possibly change to primary secondary etc for now add here */
12+
/* Adding used for comment so we can decide later */
13+
--gray-50: #F9FAFB; /* Used for: background of dialog buttons */
14+
--gray-100: #F3F4F6;
15+
--gray-200: #E5E7EB; /* Used for: border of sections */
16+
--gray-300: #D1D5DC; /* Used for: text */
17+
--gray-400: #99A1AF; /* Used for: input borders */
18+
--gray-500: #6A7282; /* Used for: text */
19+
--gray-600: #4A5565; /* Used for: text */
20+
--gray-700: #364153; /* Used for: text */
21+
--gray-800: #1E2939; /* Used for: text */
22+
--gray-900: #101828; /* Used for: text */
23+
--purple-500: #AD46FF;
24+
--red-600: #B00020; /* Used for: error text */
25+
--slate-50: #F8FAFC;
26+
--slate-200: #E2E8F0; /* Used for: border of sections */
27+
--slate-400: #90A1B9; /* Used for: edit dialog cancel */
28+
--slate-500: #62748E; /* Used for: text */
29+
--slate-700: #314158; /* Used for: side menu bar text */
30+
--slate-800: #1D293D; /* Used for: text and top header background */
31+
--slate-900: #0F172B; /* Used for: text */
32+
--utility-colours-body-grey: #666; /* used in header drop down behind the picture */
33+
--lavender-200: #E4DBFE; /* background of Follow button and side menu active button */
34+
--lavender-300: #e6dcff;
35+
--lavender-400: #cbb9ff;
36+
--lavender-500: #b295ff;
37+
--lavender-700: #9672ff;
38+
--lavender-900: #7c4cff;
39+
--grey-purple-200: #d8d6db;
40+
--grey-purple-300: #b1acb7;
41+
--grey-purple-500: #878192;
42+
--grey-purple-700: #5e546d;
43+
--grey-purple-900: #332746; /* Used for: header background */
44+
--orange-200: #ffefdd;
45+
--orange-300: #ffdeba;
46+
--orange-400: #ffce97;
47+
--orange-500: #ffbd74;
48+
--orange-600: #ffad4f;
49+
--pink-500: #ffdde6;
50+
--pink-600: #ffbbcd;
51+
--pink-700: #ff98b3;
52+
--pink-800: #ff769a;
53+
--pink-900: #ff5180;
54+
--yellow-700: #A65F00;
55+
--black: #000; /* Used for: text heading */
56+
--white: #FFF;
57+
1158
/* Background and Text */
12-
--color-background: white;
13-
--color-text: #1A1A1A;
14-
--color-text-secondary: #666;
59+
--color-background-old: #FFFFFF; /* White */
60+
--color-background: #F8F9FB; /* Light grey for overall background */
61+
--color-background-row-default: white;
62+
--color-background-row-alternate: #f0f0f0;
63+
--color-text: #1A1A1A; /* Used in login button */
64+
--color-text-primary: var(--gray-700, #364153); /* new design */
65+
--color-text-secondary-old: #666;
66+
--color-text-secondary: var(--gray-600, #4A5565);
67+
--color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
68+
--color-text-subheading: var(--gray-900, #101828); /* new design */
69+
--color-text-strong: var(--slate-900, #0F172B); /* new design */
70+
--color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
1571
--color-text-light: #aaa;
1672
--color-text-link: #3B5998;
1773
--color-text-link-visited: #3B5998;
@@ -23,10 +79,22 @@
2379
--color-text-blue: #004;
2480
--color-text-brown: #440;
2581

82+
/* Header */
83+
--color-header-row-bg: var(--grey-purple-900, #332746);
84+
--color-header-text: var(--white, #fff);
85+
--color-header-menu-separator-line: var(--slate-200, #E2E8F0);
86+
--color-header-menu-item-hover: var(--lavender-300, #e6dcff);
87+
--color-header-menu-item-selected: var(--lavender-400, #cbb9ff);
88+
--color-header-menu-loggedin-bg: var(--grey-purple-700, #5e546d);
89+
--color-header-button-text: var(--slate-900, #0F172B);
90+
--color-header-button-detail-text: var(--gray-400, #99A1AF);
91+
--color-header-shadow: 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19);
92+
2693
/* Borders */
27-
--color-border: #ccc;
94+
--color-border: var(--gray-200, #E5E7EB); /* Used in login button */
95+
--color-border-lighter: var(--slate-200, #E2E8F0);
2896
--color-border-dark: #777;
29-
--color-border-darker: #444;
97+
--color-border-darker: var(--gray-600, #4A5565); /* old #444 */
3098
--color-border-light: #aaa;
3199
--color-border-pale: #eee;
32100
--color-border-accent: #88c;
@@ -98,7 +166,7 @@
98166
/* Menu and Tab Colors */
99167
--color-menu-bg: #FFFFFF;
100168
--color-menu-item-text: #654d6c;
101-
--color-menu-item-active: #D1C6DA;
169+
--color-menu-item-active: #D1C6DA; /* can be replaced with --color-header-menu-item-selected? */
102170
--color-view-tab-bg: #fff;
103171
--color-view-window-bg: #ccc;
104172
--color-query-select-bg: #ccc;
@@ -124,60 +192,94 @@
124192
/* Typography */
125193
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
126194
--font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
127-
--font-size-base: 100%;
195+
--font-size-base-old: 100%;
196+
--font-size-base: 1rem; /* 16px */
128197
--font-size-strong: 120%;
129198
--font-weight-normal: normal;
130-
--font-weight-bold: bold;
199+
--font-weight-md: 500; /* New design uses 500 for body text was normal */
200+
--font-weight-bold-old: bold;
201+
--font-weight-bold: 600; /* New design uses 600 for headings was 700 */
202+
--font-weight-xbold: 700; /* New design uses 700 for strong text was bold */
131203
--line-height-base: 1.5;
132204
--line-height-tight: 1.4;
133205
--line-height-loose: 1.6;
134206
--letter-spacing-wide: 0.025em;
135-
--font-size-sm: 0.875rem;
136-
--font-size-lg: 1.125rem;
137-
--font-size-xl: 1.25rem;
138-
207+
--font-size-xxs: 0.75rem; /* 12px */
208+
--font-size-xs: 0.813rem; /* 13px */
209+
--font-size-sm: 0.875rem; /* 14px */
210+
--font-size-md: 1rem; /* 16px */
211+
--font-size-lg: 1.125rem; /* 18px */
212+
--font-size-xl-old: 1.25rem; /* 20px */
213+
--font-size-xl: 1.375rem; /* 22px */
214+
--font-size-xxl: 1.75rem; /* 28px */
215+
139216
/* Spacing and Sizing */
140217
--spacing-tiny: 0.05em;
141218
--spacing-small: 0.1em;
142-
--spacing-xxxs: 0.2em;
143-
--spacing-xxs: 0.3em;
144-
--spacing-xs: 0.5rem;
145-
--spacing-sm: 0.75em;
146-
--spacing-btn: 0.7em;
147-
--spacing-base: 0.5em;
148-
--spacing-md: 1em;
149-
--spacing-lg: 1.5em;
150-
--spacing-xl: 2em;
151-
--spacing-2xl: 3em;
152-
--border-width-xthin: 0.05em;
153-
--border-width-sm: 0.1em;
154-
--border-width-thin: 1px;
219+
--spacing-xxxs: 0.2rem; /* was em */
220+
--spacing-xxs-old: 0.3rem; /* was em */
221+
--spacing-xxs: 0.3125rem; /* 5px */
222+
--spacing-2xs: 0.625rem; /* 10px new design uses this */
223+
--spacing-xs-old: 0.5rem;
224+
--spacing-xs: 0.75rem; /* 12px new design uses this */
225+
--spacing-sm-old: 0.75rem; /* was em */
226+
--spacing-sm: 0.938rem; /* 15px new design uses this */
227+
--spacing-btn: 0.7rem; /* was em */
228+
--spacing-base: 0.5rem; /* was em */
229+
--spacing-md-old: 1rem; /* was em */
230+
--spacing-md: 1.25rem; /* 20px new design uses this */
231+
--spacing-lg-old: 1.5rem; /* was em */
232+
--spacing-lg: 1.5625rem; /* 25px new design uses this */
233+
--spacing-xl: 2rem; /* was em */
234+
--spacing-1xl: 2.5rem; /* 40px new design uses this */
235+
--spacing-2xl: 3rem; /* was em */
236+
--border-width-xthin: 0.05rem; /* was em */
237+
--border-width-thin-old: 1px;
238+
--border-width-thin: 0.1rem; /* changed from 1px */
239+
--border-width-sm: 0.1rem; /* was em */
155240
--border-width-medium: 2px;
156241
--border-width-bold: 5px;
157-
--border-radius-xs: 0.1em;
158-
--border-radius-sm: 0.2em;
159-
--border-radius-base: 0.5em;
160-
--border-radius-lg: 0.75em;
161-
--border-radius-full: 1em;
242+
243+
244+
--border-radius-xs: 0.1rem; /* 2px Extra small border radius was em */
245+
--border-radius-sm: 0.2rem; /* 4px Small border radius was em */
246+
--border-radius-base-old: 0.5em;
247+
--border-radius-base: 0.3125rem; /* 5px Base border radius */
248+
--border-radius-md: 0.5rem; /* 8px Medium border radius */
249+
--border-radius-lg: 0.75rem; /* 12px Large border radius was em */
250+
--border-radius-full-old: 1em;
251+
--border-radius-full: 0.625rem; /* 10px */
252+
162253

254+
/* icons */
255+
--icon-xxxs: 0.75rem; /* 12px new design uses this */
256+
--icon-xxs: 1rem; /* 16px new design uses this */
257+
--icon-xs: 1.5rem; /* 24px new design uses this */
258+
--icon-sm: 1.8rem; /* 28px new design uses this */
259+
--icon-base: 2rem; /* 32px new design uses this */
260+
--icon-md: 2.5rem; /* 40px new design uses this */
261+
--icon-xl: 3.1rem; /* 50px new design uses this */
262+
163263
/* Primary/Accent Colors */
164264
--color-primary: #7C4DFF;
165265
--color-primary-alpha: rgba(124, 77, 255, 0.25);
166266
--color-primary-alpha-light: rgba(124, 77, 255, 0.1);
167267
--color-secondary: #0077B6;
168268
--color-accent: #FFD600;
169-
--color-error: #B00020;
269+
--color-error: #B00020; /* USed in login button */
170270
--color-success: #00C853;
171271

172272
/* Card/Section Backgrounds */
173-
--color-card-bg: #FFFFFF;
174-
--color-section-bg: #F5F5F5;
273+
--color-section-bg-old: #F5F5F5; /* Light grey for outer sections */
274+
--color-section-bg: #FFFFFF; /* White for outer sections to match new design */
275+
276+
--color-card-bg: #FFFFFF; /* White for inner cards */
175277
--color-zebra-stripe: rgba(0, 0, 0, 0.02);
176278
--color-hover-bg: rgba(0, 0, 0, 0.05);
177279

178280
/* Shadows */
179281
--box-shadow: 0 2px 8px rgba(124,77,255,0.08);
180-
--box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
282+
--box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
181283
--box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
182284
--box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
183285
--box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);

0 commit comments

Comments
 (0)