Skip to content

Commit 232fdce

Browse files
uhafneruhafner
committed
Revert oklch usage in theme.scss.
1 parent 2b9d4d6 commit 232fdce

File tree

1 file changed

+121
-127
lines changed

1 file changed

+121
-127
lines changed

‎src/main/scss/abstracts/_theme.scss‎

Lines changed: 121 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
@use "../base/breakpoints";
33

44
$colors: (
5-
"blue": oklch(55% 0.2308 256.91),
6-
"brown": oklch(60% 0.0941 72.67),
7-
"cyan": oklch(60% 0.1497 234.48),
8-
"green": oklch(70% 0.2155 150),
9-
"indigo": oklch(60% 0.191 278.34),
10-
"orange": oklch(70% 0.2001 50.74),
11-
"pink": oklch(60% 0.2601 12.28),
12-
"purple": oklch(60% 0.2308 314.6),
13-
"red": oklch(60% 0.2671 30),
14-
"yellow": oklch(80% 0.17 76),
15-
"teal": oklch(60% 0.1122 216.72),
5+
"blue": #006fe6,
6+
"brown": #a2845e,
7+
"cyan": #32ade6,
8+
"green": #1ea64b,
9+
"indigo": #5856d6,
10+
"orange": #fe820a,
11+
"pink": #fb0f45,
12+
"purple": #af52de,
13+
"red": #e6001f,
14+
"yellow": #ffb31a,
1615
"white": #fff,
17-
"black": oklch(from var(--accent-color) 2% 0.075 h),
16+
"black": #14141f,
1817
);
18+
1919
$semantics: (
2020
"accent": var(--blue),
2121
"text": var(--black),
@@ -31,17 +31,15 @@ $semantics: (
3131
:root,
3232
.app-theme-picker__picker[data-theme="none"] {
3333
// Font related properties
34-
--font-family-sans:
35-
system-ui, "Segoe UI", roboto, "Noto Sans", oxygen, ubuntu, cantarell,
36-
"Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif,
37-
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
38-
--font-family-mono:
39-
ui-monospace, sfmono-regular, sf mono, jetbrainsmono, consolas, monospace;
34+
--font-family-sans: system-ui, "Segoe UI", roboto, "Noto Sans", oxygen,
35+
ubuntu, cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", arial,
36+
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
37+
--font-family-mono: ui-monospace, sfmono-regular, sf mono, jetbrainsmono,
38+
consolas, monospace;
4039
--font-size-base: 1rem; // 16px
4140
--font-size-sm: 0.875rem; // 14px
4241
--font-size-xs: 0.75rem; // 12px
4342
--font-size-monospace: 1em;
44-
--font-bold-weight: 450;
4543

4644
// Line height
4745
--line-height-base: 1.5;
@@ -54,13 +52,20 @@ $semantics: (
5452
--dark-grey: #4d545d;
5553

5654
// branding
57-
--secondary: oklch(from var(--black) 60% c h);
55+
--secondary: rgb(96 125 159);
5856
--focus-input-border: var(--accent-color);
5957
--focus-input-glow: color-mix(in sRGB, var(--accent-color) 15%, transparent);
6058

59+
// Deprecated
60+
--focus-btn-primary: #{color.change(#0b6aa2, $alpha: 0.5)};
61+
--focus-btn-secondary: #{color.change(#0b6aa2, $alpha: 0.5)};
62+
--focus-btn-danger: #{color.change(#cc0003, $alpha: 0.5)};
63+
6164
// State colors
62-
--primary-hover: var(--accent-color);
63-
--primary-active: var(--accent-color);
65+
--primary-hover: #0587d4;
66+
--primary-active: #095683;
67+
--danger-hover: #eb383b;
68+
--danger-active: #b50003;
6469

6570
// Status icon colors
6671
--weather-icon-color: var(--accent-color);
@@ -72,21 +77,19 @@ $semantics: (
7277
// Header
7378
--brand-link-color: var(--secondary);
7479
--header-link-color: var(--white);
75-
--header-bg-classic: var(--black);
80+
--header-link-color-active: #f5f5f5;
81+
--header-search-border: var(--white);
82+
--search-input-color: var(--brand-link-color);
83+
--search-bg: var(--white);
84+
--search-box-completion-bg: var(--primary-hover);
85+
--search-box-shadow: 0 1px 7px 0 rgb(0 0 0 / 0.3);
86+
--header-bg-classic: #000;
7687
--header-link-bg-classic-hover: #404040;
7788
--header-link-bg-classic-active: #404040;
89+
--header-item-border-radius: 4px;
7890

7991
// Breadcrumbs bar
80-
--breadcrumbs-bar-background: oklch(
81-
from var(--text-color) 96.8% 0.005 h / 0.8
82-
);
83-
84-
// App bar
85-
--bottom-app-bar-shadow: color-mix(
86-
in sRGB,
87-
var(--text-color-secondary) 7.5%,
88-
transparent
89-
);
92+
--breadcrumbs-bar-background: hsl(240 20% 96.5% / 0.8);
9093

9194
// Alert call outs
9295
--alert-success-text-color: var(--success-color);
@@ -133,41 +136,41 @@ $semantics: (
133136
// Typography
134137
--text-color-secondary: var(--secondary);
135138

136-
// Borders
137-
--jenkins-border-width: 1.5px;
138-
--jenkins-border-color: color-mix(
139-
in sRGB,
140-
var(--text-color-secondary) 12%,
141-
var(--card-background)
142-
);
143-
--jenkins-border-color--subtle: color-mix(
144-
in sRGB,
145-
currentColor 1.5%,
146-
transparent
147-
);
148-
149-
/* This is a harsher border - for dividers, content blocks and more */
150-
--jenkins-border: var(--jenkins-border-width) solid
151-
var(--jenkins-border-color);
152-
153-
/* This is a subtle border - for increasing contrast on elements, such as buttons, menu and more */
154-
--jenkins-border--subtle: var(--jenkins-border-width) solid
155-
var(--jenkins-border-color--subtle);
156-
--jenkins-border--subtle-shadow: 0 0 0 1.5px
157-
var(--jenkins-border-color--subtle);
158-
159-
@media (resolution <= 1x) {
160-
--jenkins-border-width: 2px;
161-
}
162-
163-
@media (prefers-contrast: more) {
164-
--focus-input-border: var(--text-color);
165-
--jenkins-border-color: var(--text-color);
166-
--jenkins-border-color--subtle: var(--text-color);
167-
}
139+
// Deprecated - Button generic
140+
--btn-font-weight: bold;
141+
--btn-text-color: var(--white);
142+
--btn-font-size: var(--font-size-xs);
143+
--btn-line-height: 1rem;
144+
--btn-large-font-size: var(--font-size-sm);
145+
--btn-large-line-height: 1.25rem;
146+
// Deprecated - Button primary
147+
--button-color--primary: var(--background);
148+
--btn-primary-bg: #063f61;
149+
--btn-primary-bg-hover: #{lighten(#063f61, 7.5%)};
150+
--btn-primary-bg-active: #{lighten(#063f61, 12%)};
151+
// Deprecated - Button primary
152+
--btn-secondary-color: var(--secondary);
153+
--btn-secondary-bg: var(--btn-text-color);
154+
--btn-secondary-border: var(--medium-grey);
155+
--btn-secondary-color--hover: var(--accent-color);
156+
--btn-secondary-bg--hover: var(--btn-secondary-bg);
157+
--btn-secondary-border--hover: var(--accent-color);
158+
--btn-secondary-color--focus: var(--accent-color);
159+
--btn-secondary-bg--focus: var(--btn-secondary-bg);
160+
--btn-secondary-border--focus: var(--accent-color);
161+
--btn-secondary-color--active: var(--primary-active);
162+
--btn-secondary-bg--active: var(--btn-secondary-bg);
163+
--btn-secondary-border--active: var(--primary-active);
164+
// Deprecated - Button link
165+
--btn-link-color: var(--accent-color);
166+
--btn-link-font-weight: var(--link-font-weight);
167+
--btn-link-color--hover: var(--primary-hover);
168+
--btn-link-bg--hover: var(--very-light-grey);
169+
--btn-link-color--active: var(--primary-active);
170+
--btn-link-bg--active: var(--light-grey);
168171

169172
// Table
170-
--table-background: oklch(from var(--text-color-secondary) l c h / 0.075);
173+
--table-background: var(--panel-header-bg-color);
171174
--table-header-foreground: var(--text-color);
172175
--table-body-background: var(--background);
173176
--table-body-foreground: var(--text-color);
@@ -194,14 +197,12 @@ $semantics: (
194197
--link-text-decoration: none;
195198
--link-text-decoration--hover: underline;
196199
--link-text-decoration--active: underline;
197-
--link-font-weight: var(--font-bold-weight);
200+
--link-font-weight: 450;
198201

199202
// Command Palette
200203
--command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5)
201204
saturate(1.4) blur(20px);
202-
--command-palette-inset-shadow:
203-
inset 0 0 2px 2px rgb(255 255 255 / 0.1),
204-
var(--jenkins-border--subtle-shadow);
205+
--command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1);
205206

206207
::backdrop {
207208
--command-palette-backdrop-background: radial-gradient(
@@ -214,23 +215,20 @@ $semantics: (
214215
// Tooltips
215216
--tooltip-backdrop-filter: saturate(2) blur(20px);
216217
--tooltip-color: var(--text-color);
217-
--tooltip-box-shadow:
218-
0 0 8px 2px rgb(0 0 50 / 0.05), var(--jenkins-border--subtle-shadow),
219-
0 10px 50px rgb(0 0 20 / 0.1);
218+
--tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05),
219+
0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15);
220220

221221
// Dropdowns
222222
--dropdown-backdrop-filter: saturate(1.5) blur(20px);
223-
--dropdown-box-shadow:
224-
var(--jenkins-border--subtle-shadow), 0 10px 30px rgb(0 0 20 / 0.1),
223+
--dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2),
225224
0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
226225

227226
// Dialogs
228227
::backdrop {
229228
--dialog-backdrop-background: hsl(240 10% 20% / 0.8);
230229
}
231230

232-
--dialog-box-shadow:
233-
var(--jenkins-border--subtle-shadow), 0 10px 40px rgb(0 0 20 / 0.15),
231+
--dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15),
234232
0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
235233

236234
// Dark link
@@ -241,7 +239,7 @@ $semantics: (
241239
--link-dark-text-decoration: none;
242240
--link-dark-text-decoration--hover: underline;
243241
--link-dark-text-decoration--active: underline;
244-
--link-dark-font-weight: var(--font-bold-weight);
242+
--link-dark-font-weight: 500;
245243

246244
// Pane
247245
--pane-border-width: 1px;
@@ -258,27 +256,15 @@ $semantics: (
258256
--card-background: var(--background);
259257
--card-background--hover: transparent;
260258
--card-background--active: transparent;
261-
--card-border-color: oklch(from var(--text-color-secondary) l c h / 0.15);
262-
--card-border-color--hover: oklch(
263-
from var(--text-color-secondary) l c h / 0.3
264-
);
265-
--card-border-color--active: oklch(
266-
from var(--text-color-secondary) l c h / 0.5
267-
);
268-
--card-border-width: var(--jenkins-border-width);
269-
270-
@media (prefers-contrast: more) {
271-
--card-border-color: var(--text-color);
272-
}
259+
--card-border-color: hsl(240 25% 75% / 0.25);
260+
--card-border-color--hover: hsl(240 25% 75% / 0.5);
261+
--card-border-color--active: hsl(240 25% 75% / 0.75);
262+
--card-border-width: 2px;
273263

274264
// Tab bar
275-
--tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
265+
--tabs-background: var(--panel-header-bg-color);
276266
--tabs-item-background: transparent;
277-
--tabs-item-foreground: color-mix(
278-
in sRGB,
279-
var(--text-color-secondary),
280-
var(--text-color)
281-
);
267+
--tabs-item-foreground: var(--text-color);
282268
--tabs-item-background--hover: rgb(0 0 0 / 0.05);
283269
--tabs-item-foreground--hover: var(--text-color);
284270
--tabs-item-background--active: rgb(0 0 0 / 0.1);
@@ -287,10 +273,18 @@ $semantics: (
287273
--tabs-item-foreground--selected: var(--link-color);
288274
--tabs-border-radius: calc((10px + 34px) / 2);
289275

276+
// Deprecated - Tabbar baseline
277+
--tab-baseline-width: 2px;
278+
--tab-baseline-color: var(--light-grey);
279+
--tab-baseline-default-display: none;
280+
290281
// Side panel
291282
--side-panel-width: 340px;
292283
--panel-header-bg-color: var(--light-grey);
293284
--panel-border-color: var(--light-grey);
285+
--side-panel-hover-color: var(--panel-border-color);
286+
--task-link-bg-color--active: var(--panel-border-color);
287+
--task-link-bg-color--hover: var(--very-light-grey);
294288

295289
// Form
296290
--section-padding: 1.625rem;
@@ -314,55 +308,55 @@ $semantics: (
314308
--form-item-max-width--medium: min(50vw, 1400px);
315309
--form-item-max-width--small: min(35vw, 1200px);
316310

311+
/* stylelint-disable-next-line media-query-no-invalid */
317312
@media screen and (max-width: breakpoints.$tablet-breakpoint) {
318313
--section-padding: 1.25rem;
319314
--form-item-max-width: 100%;
320315
--form-item-max-width--medium: 100%;
321316
--form-item-max-width--small: 100%;
322317
}
323318

324-
--form-label-font-weight: var(--font-bold-weight);
325-
--form-input-padding: 0.5rem 0.625rem;
319+
--form-label-font-weight: 450;
320+
--form-input-padding: 0.625rem;
326321
--form-input-border-radius: 0.625rem;
327-
--form-input-glow: 0 0 0 0.5rem transparent;
328-
--form-input-glow--focus: 0 0 0 0.25rem var(--focus-input-glow);
329-
--pre-background: var(--button-background);
322+
--form-input-glow: 0 0 0 10px transparent;
323+
--form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
324+
--pre-background: rgb(0 0 0 / 0.05);
330325
--pre-color: var(--text-color);
331-
--selection-color: oklch(from var(--accent-color) l c h / 0.2);
332-
333-
@media (prefers-contrast: more) {
334-
--input-border: var(--text-color) !important;
335-
--input-border-hover: var(--text-color) !important;
336-
--form-input-glow--focus: 0 0 0 4px
337-
color-mix(in sRGB, var(--text-color), transparent);
338-
}
326+
--selection-color: rgb(2 76 182 / 0.3);
339327

340328
// Animations
341329
--standard-transition: 0.3s ease;
342330
--elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
343331

332+
// Deprecated - Pop out menus
333+
--menu-text-color: black;
334+
--menu-bg-color: var(--white);
335+
--menu-selected-color: #b3d4ff;
336+
--menu-box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
337+
338+
// Deprecated - Add form widget / configure job
339+
--light-bg-color: #eee;
340+
--light-bg-color--hover: rgb(255 255 255 / 0.65);
341+
--add-item-btn-decorator-border-color: #acb;
342+
--add-item-btn-decorator-bg-color: rgb(245 249 239 / 0.75);
343+
344344
// Plugin manager
345345
--plugin-manager-bg-color-already-upgraded: var(--light-grey);
346346

347+
// Auto complete
348+
--auto-complete-bg-color--prehighlight: #b3d4ff;
349+
347350
// Default button
348-
--button-background: oklch(from var(--text-color-secondary) l c h / 0.075);
349-
--button-background--hover: oklch(
350-
from var(--text-color-secondary) l c h / 0.125
351-
);
352-
--button-background--active: oklch(
353-
from var(--text-color-secondary) l c h / 0.175
354-
);
355-
--button-box-shadow--focus: oklch(
356-
from var(--text-color-secondary) l c h / 0.1
357-
);
358-
--button-color--primary: var(--background);
351+
--button-background: hsl(240 25% 75% / 0.1);
352+
--button-background--hover: hsl(240 25% 75% / 0.175);
353+
--button-background--active: hsl(240 25% 75% / 0.25);
354+
--button-box-shadow--focus: hsl(240 25% 75% / 0.1);
359355

360356
// Variables for sidebar items, card items
361-
--item-background--hover: oklch(from var(--text-color-secondary) l c h / 0.1);
362-
--item-background--active: oklch(
363-
from var(--text-color-secondary) l c h / 0.15
364-
);
365-
--item-box-shadow--focus: oklch(from var(--text-color-secondary) l c h / 0.1);
357+
--item-background--hover: hsl(240 25% 75% / 0.15);
358+
--item-background--active: hsl(240 25% 75% / 0.225);
359+
--item-box-shadow--focus: hsl(240 25% 75% / 0.105);
366360

367361
// Deprecated
368362
--primary: var(--accent-color); // Use var(--accent-color) instead
@@ -375,8 +369,8 @@ $semantics: (
375369
--#{$key}: #{$value};
376370

377371
@if $key != "black" and $key != "white" {
378-
--light-#{$key}: #{color.adjust($value, $lightness: 20%)};
379-
--dark-#{$key}: #{color.adjust($value, $lightness: -20%)};
372+
--light-#{$key}: #{lighten($value, 20%)};
373+
--dark-#{$key}: #{darken($value, 20%)};
380374
}
381375
}
382376

0 commit comments

Comments
 (0)