jenkins/src/main/scss/abstracts/_theme.scss

382 lines
12 KiB
SCSS

@use "sass:color";
@use "../base/breakpoints";
$colors: (
"blue": oklch(55% 0.2308 256.91),
"brown": oklch(60% 0.0941 72.67),
"cyan": oklch(60% 0.1497 234.48),
"green": oklch(70% 0.2155 150),
"indigo": oklch(60% 0.191 278.34),
"orange": oklch(70% 0.2001 50.74),
"pink": oklch(60% 0.2601 12.28),
"purple": oklch(60% 0.2308 314.6),
"red": oklch(60% 0.2671 30),
"yellow": oklch(80% 0.17 76),
"teal": oklch(60% 0.1122 216.72),
"white": #fff,
"black": oklch(from var(--accent-color) 5% 0.075 h),
);
$semantics: (
"accent": var(--blue),
"text": var(--black),
"error": var(--red),
"warning": var(--orange),
"success": var(--green),
"skipped": var(--text-color-secondary),
"destructive": var(--red),
"build": var(--green),
"danger": var(--red),
"info": var(--blue),
);
:root,
.app-theme-picker__picker[data-theme="none"] {
// Font related properties
--font-family-sans:
system-ui, "Segoe UI", roboto, "Noto Sans", oxygen, ubuntu, cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-mono:
ui-monospace, sfmono-regular, sf mono, jetbrainsmono, consolas, monospace;
--font-size-base: 1rem; // 16px
--font-size-sm: 0.875rem; // 14px
--font-size-xs: 0.75rem; // 12px
--font-size-monospace: 1em;
--font-bold-weight: 450;
// Line height
--line-height-base: 1.5;
--line-height-heading: 1.2;
// Color palette
--very-light-grey: #f8f8f8;
--light-grey: hsl(240 20% 96.5%);
--medium-grey: #9ba7af;
--dark-grey: #4d545d;
// branding
--secondary: oklch(from var(--black) 60% c h);
--focus-input-border: var(--accent-color);
--focus-input-glow: color-mix(in sRGB, var(--accent-color) 15%, transparent);
// State colors
--primary-hover: var(--accent-color);
--primary-active: var(--accent-color);
// Status icon colors
--weather-icon-color: var(--accent-color);
--unstable-build-icon-color: var(--orange);
// Background colors
--background: var(--white);
// Header
--header-background: var(--background);
--header-border: var(--text-color-secondary);
--header-color: var(--text-color);
--header-height: 4.125rem;
// App bar
--bottom-app-bar-shadow: color-mix(
in sRGB,
var(--text-color-secondary) 7.5%,
transparent
);
// Alert call outs
--alert-success-text-color: var(--success-color);
--alert-success-bg-color: color-mix(
in sRGB,
var(--success-color) 10%,
transparent
);
--alert-success-border-color: color-mix(
in sRGB,
var(--success-color) 5%,
transparent
);
--alert-info-text-color: var(--blue);
--alert-info-bg-color: color-mix(in sRGB, var(--blue) 10%, transparent);
--alert-info-border-color: color-mix(in sRGB, var(--blue) 5%, transparent);
--alert-warning-text-color: color-mix(
in sRGB,
var(--warning-color) 80%,
var(--text-color)
);
--alert-warning-bg-color: color-mix(
in sRGB,
var(--warning-color) 10%,
transparent
);
--alert-warning-border-color: color-mix(
in sRGB,
var(--warning-color) 5%,
transparent
);
--alert-danger-text-color: var(--error-color);
--alert-danger-bg-color: color-mix(
in sRGB,
var(--error-color) 10%,
transparent
);
--alert-danger-border-color: color-mix(
in sRGB,
var(--error-color) 5%,
transparent
);
// Typography
--text-color-secondary: var(--secondary);
// Borders
--jenkins-border-width: 1.5px;
--jenkins-border-color: color-mix(
in sRGB,
var(--text-color-secondary) 15%,
var(--card-background)
);
--jenkins-border-color--subtle: color-mix(
in sRGB,
currentColor 1.5%,
transparent
);
/* This is a harsher border - for dividers, content blocks and more */
--jenkins-border: var(--jenkins-border-width) solid
var(--jenkins-border-color);
/* This is a subtle border - for increasing contrast on elements, such as buttons, menu and more */
--jenkins-border--subtle: var(--jenkins-border-width) solid
var(--jenkins-border-color--subtle);
--jenkins-border--subtle-shadow: 0 0 0 1.5px
var(--jenkins-border-color--subtle);
@media (resolution <= 1x) {
--jenkins-border-width: 2px;
}
@media (prefers-contrast: more) {
--header-border: var(--text-color);
--focus-input-border: var(--text-color);
--jenkins-border-color: var(--text-color);
--jenkins-border-color--subtle: var(--text-color);
}
// Table
--table-background: oklch(from var(--text-color-secondary) l c h / 0.075);
--table-header-foreground: var(--text-color);
--table-body-background: var(--background);
--table-body-foreground: var(--text-color);
--table-border-radius: 0.75rem;
--table-row-border-radius: 0.3125rem;
// Deprecated
--even-row-color: var(--very-light-grey);
--bigtable-border-width: var(--pane-border-width);
--bigtable-header-bg: var(--dark-grey);
--bigtable-header-font-weight: bold; // Does specifying this make sense
--bigtable-header-text-color: var(--white);
--bigtable-row-border-color: var(--medium-grey);
--bigtable-cell-padding-x: 0.75rem;
--bigtable-cell-padding-y: 0.5rem;
--table-parameters-bg--hover: var(--light-grey);
--table-striped-bg--hover: var(--light-grey);
// Link
--link-color: var(--accent-color);
--link-visited-color: var(--link-color);
--link-color--hover: var(--link-color);
--link-color--active: var(--link-color);
--link-text-decoration: none;
--link-text-decoration--hover: underline;
--link-text-decoration--active: underline;
--link-font-weight: var(--font-bold-weight);
// Command Palette
--command-palette-results-backdrop-filter: saturate(1.5) blur(5px);
--command-palette-inset-shadow:
inset 0 0 2px 2px rgb(255 255 255 / 0.1),
var(--jenkins-border--subtle-shadow),
0 5px 10px var(--jenkins-border-color--subtle);
::backdrop {
--command-palette-backdrop-background: color-mix(
in sRGB,
var(--black) 17.5%,
transparent
);
}
// Tooltips
--tooltip-backdrop-filter: contrast(1.1) saturate(2) blur(20px);
--tooltip-color: var(--text-color);
--tooltip-box-shadow:
0 0 8px 2px rgb(0 0 50 / 0.05), var(--jenkins-border--subtle-shadow),
0 10px 50px rgb(0 0 20 / 0.1), inset 0 -1px 2px rgb(255 255 255 / 0.025);
// Dropdowns
--dropdown-backdrop-filter: contrast(1.1) saturate(2) blur(20px);
--dropdown-box-shadow:
var(--jenkins-border--subtle-shadow), 0 10px 30px rgb(0 0 20 / 0.1),
0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
// Dialogs
::backdrop {
--dialog-backdrop-background: hsl(240 10% 20% / 0.8);
}
--dialog-box-shadow:
var(--jenkins-border--subtle-shadow), 0 10px 40px rgb(0 0 20 / 0.15),
0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
// Dark link
--link-dark-color: var(--text-color);
--link-dark-visited-color: var(--link-dark-color);
--link-dark-color--hover: var(--primary-hover);
--link-dark-color--active: var(--primary-active);
--link-dark-text-decoration: none;
--link-dark-text-decoration--hover: underline;
--link-dark-text-decoration--active: underline;
--link-dark-font-weight: var(--font-bold-weight);
// Pane
--pane-border-width: 1px;
--pane-header-text-color: var(--text-color);
--pane-header-bg: var(--light-grey);
--pane-header-border-color: var(--light-grey);
--pane-header-font-weight: bold;
--pane-border-color: var(--light-grey);
--pane-text-color: var(--text-color);
--pane-link-color: black;
--pane-link-color--visited: black;
// Cards
--card-background: var(--background);
--card-background--hover: transparent;
--card-background--active: transparent;
--card-border-color: oklch(from var(--text-color-secondary) l c h / 0.15);
--card-border-color--hover: oklch(
from var(--text-color-secondary) l c h / 0.3
);
--card-border-color--active: oklch(
from var(--text-color-secondary) l c h / 0.5
);
--card-border-width: var(--jenkins-border-width);
@media (prefers-contrast: more) {
--card-border-color: var(--text-color);
}
// Tab bar
--tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
--tabs-item-background: transparent;
--tabs-item-foreground: color-mix(
in sRGB,
var(--text-color-secondary),
var(--text-color)
);
--tabs-item-background--hover: rgb(0 0 0 / 0.05);
--tabs-item-foreground--hover: var(--text-color);
--tabs-item-background--active: rgb(0 0 0 / 0.1);
--tabs-item-foreground--active: var(--text-color);
--tabs-item-background--selected: white;
--tabs-item-foreground--selected: var(--link-color);
--tabs-border-radius: calc((10px + 34px) / 2);
// Side panel
--side-panel-width: 340px;
--panel-header-bg-color: var(--light-grey);
--panel-border-color: var(--light-grey);
// Form
--section-padding: 1.625rem;
--input-color: color-mix(
in sRGB,
var(--text-color-secondary) 1.5%,
var(--background)
);
--input-border: color-mix(
in sRGB,
var(--text-color-secondary) 25%,
transparent
);
--input-border-hover: color-mix(
in sRGB,
var(--text-color-secondary) 50%,
transparent
);
--form-item-max-width: min(65vw, 1600px);
--form-item-max-width--medium: min(50vw, 1400px);
--form-item-max-width--small: min(35vw, 1200px);
@media screen and (max-width: breakpoints.$tablet-breakpoint) {
--section-padding: 1.25rem;
--form-item-max-width: 100%;
--form-item-max-width--medium: 100%;
--form-item-max-width--small: 100%;
}
--form-label-font-weight: var(--font-bold-weight);
--form-input-padding: 0.5rem 0.625rem;
--form-input-border-radius: 0.625rem;
--form-input-glow: 0 0 0 0.5rem transparent;
--form-input-glow--focus: 0 0 0 0.25rem var(--focus-input-glow);
--pre-background: var(--button-background);
--pre-color: var(--text-color);
--selection-color: oklch(from var(--accent-color) l c h / 0.2);
@media (prefers-contrast: more) {
--input-border: var(--text-color) !important;
--input-border-hover: var(--text-color) !important;
--form-input-glow--focus: 0 0 0 4px
color-mix(in sRGB, var(--text-color), transparent);
}
// Animations
--standard-transition: 0.25s ease;
--elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
// Plugin manager
--plugin-manager-bg-color-already-upgraded: var(--light-grey);
// Default button
--button-background: oklch(from var(--text-color-secondary) l c h / 0.075);
--button-background--hover: oklch(
from var(--text-color-secondary) l c h / 0.125
);
--button-background--active: oklch(
from var(--text-color-secondary) l c h / 0.175
);
--button-box-shadow--focus: oklch(
from var(--text-color-secondary) l c h / 0.1
);
--button-color--primary: var(--background);
// Variables for sidebar items, card items
--item-background--hover: oklch(from var(--text-color-secondary) l c h / 0.1);
--item-background--active: oklch(
from var(--text-color-secondary) l c h / 0.15
);
--item-box-shadow--focus: oklch(from var(--text-color-secondary) l c h / 0.1);
// Deprecated
--primary: var(--accent-color); // Use var(--accent-color) instead
--success: var(--green); // Use var(--success-color) instead
--danger: var(--red); // Use var(--destructive-color) instead
--warning: var(--orange); // Use var(--warning-color) instead
// Colors
@each $key, $value in $colors {
--#{$key}: #{$value};
@if $key != "black" and $key != "white" {
--light-#{$key}: #{color.adjust($value, $lightness: 20%)};
--dark-#{$key}: #{color.adjust($value, $lightness: -20%)};
}
}
@each $key, $value in $semantics {
--#{$key}-color: #{$value};
}
}