mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-01 16:44:23 +08:00
282 lines
11 KiB
Plaintext
282 lines
11 KiB
Plaintext
// out: false
|
|
// Private LESS primitives: only semantic token declarations consume these values.
|
|
// Components consume semantic roles rather than the private sRGB primitives.
|
|
@neutral-0: #fff;
|
|
@neutral-50: #f9f9f9;
|
|
@neutral-100: #f6f9fc;
|
|
@neutral-150: #f4f5f7;
|
|
@neutral-200: #eee;
|
|
@neutral-250: #e9ecef;
|
|
@neutral-275: #e6e6e6;
|
|
@neutral-300: #ddd;
|
|
@neutral-350: #ccc;
|
|
@neutral-400: #adb5bd;
|
|
@neutral-500: #8898aa;
|
|
@neutral-550: #808080;
|
|
@neutral-600: #666;
|
|
@neutral-650: #5b5b5b;
|
|
@neutral-700: #515151;
|
|
@neutral-750: #3c3c3c;
|
|
@neutral-800: #333;
|
|
@neutral-825: #2d2d2d;
|
|
@neutral-850: #252526;
|
|
@neutral-900: #1e1e1e;
|
|
@neutral-950: #181819;
|
|
@neutral-1000: #000;
|
|
@red-500: #f5365c;
|
|
@red-300: #ffa9ae;
|
|
@red-600: #c73850;
|
|
@orange-500: #fb6340;
|
|
@amber-300: #f6c177;
|
|
@amber-700: #906521;
|
|
@green-500: #2dce89;
|
|
@green-700: #028453;
|
|
@cyan-500: #11cdef;
|
|
@blue-300: #85adff;
|
|
@green-300: #64d9a3;
|
|
@orange-300: #ffb789;
|
|
|
|
// Each role is declared once: light, dark. A single value applies to both.
|
|
// Keep different roles separate even when they currently share a primitive.
|
|
@theme-palette: {
|
|
// Accent and status
|
|
primary: var(--light-primary), var(--dark-primary);
|
|
success: @green-500;
|
|
info: @cyan-500;
|
|
warning: @orange-500, @amber-300;
|
|
danger: @red-500, @red-300;
|
|
error-text: #ffd600, var(--danger);
|
|
strength-weak-text: #b42318, #ffb4ab;
|
|
strength-medium-text: #805600, #f5c24b;
|
|
strength-strong-text: #166534, #86efac;
|
|
|
|
// Text roles
|
|
text-strong: #32325d, @neutral-275;
|
|
text-color: #525f7f, @neutral-350;
|
|
muted-text: #626f80, @neutral-400;
|
|
control-text: var(--text-color);
|
|
soft-text: #ced4da, @neutral-350;
|
|
text-on-accent: @neutral-0;
|
|
accent-text: var(--text-on-accent), var(--dark-on-primary);
|
|
accent-border: var(--primary), var(--dark-link-color);
|
|
accent-shadow-color: rgba(94, 114, 228, .1), var(--dark-accent-shadow);
|
|
neutral-action-text: var(--text-on-accent), var(--accent-text);
|
|
notice-text: var(--text-on-accent), var(--accent-text);
|
|
text-inverse: @neutral-0;
|
|
placeholder-color: #626f80, @neutral-400;
|
|
focus-ring: #3446ab, var(--dark-focus-ring);
|
|
control-focus: var(--primary), var(--dark-control-focus);
|
|
link-color: var(--primary), var(--dark-link-color);
|
|
help-text: var(--primary), var(--dark-link-color);
|
|
code-text: #212529, @neutral-350;
|
|
data-token-text: #0069d6, var(--link-color);
|
|
log-text: #242424, @neutral-350;
|
|
overlay-text: #172b4d, @neutral-400;
|
|
|
|
// Surfaces
|
|
background-color: @neutral-150, @neutral-950;
|
|
main-bg: transparent, var(--background-color);
|
|
surface-color: @neutral-0, @neutral-850;
|
|
surface-raised: @neutral-0, @neutral-800;
|
|
surface-panel: @neutral-0, @neutral-825;
|
|
surface-muted: @neutral-100, @neutral-825;
|
|
surface-inset: @neutral-150, @neutral-900;
|
|
surface-active: #e4e9ee, @neutral-750;
|
|
surface-contrast: @neutral-250, @neutral-750;
|
|
row-color: #f4f4f4, var(--surface-color);
|
|
row-alt: @neutral-50, @neutral-825;
|
|
media-bg: @neutral-1000;
|
|
|
|
// Borders and separators
|
|
border-color: #dee2e6, @neutral-750;
|
|
control-border: var(--border-color), @neutral-550;
|
|
control-subtle-border: var(--border-muted), var(--control-border);
|
|
border-subtle: @neutral-300, @neutral-850;
|
|
border-muted: @neutral-250, @neutral-750;
|
|
border-strong: #cbd5e1, @neutral-700;
|
|
border-emphasis: @neutral-500, @neutral-400;
|
|
border-inverse: @neutral-0;
|
|
separator-color: @neutral-150, @neutral-900;
|
|
table-border: thin solid var(--border-subtle), 0;
|
|
overlay-focus: #172b4d, @neutral-400;
|
|
|
|
// Intentional component variants
|
|
header-bg: var(--primary), @neutral-900;
|
|
menu-color: #5f6368, @neutral-350;
|
|
main-menu-color: #202124, @neutral-350;
|
|
sidebar-brand-color: var(--primary), @neutral-350;
|
|
invalid-bg: #fce6e6, @neutral-900;
|
|
command-bg: @neutral-200, @neutral-850;
|
|
input-bg: @neutral-0, @neutral-900;
|
|
select-bg: var(--surface-color), var(--input-bg);
|
|
dropdown-control-bg: transparent, var(--input-bg);
|
|
neutral-button-bg: #f0f0f0, var(--primary);
|
|
neutral-action-bg: @neutral-500, var(--primary);
|
|
action-muted-solid: @neutral-500, @neutral-650;
|
|
status-neutral-bg: #32325d;
|
|
plain-button-bg: #f0f0f0, #707070;
|
|
plain-button-text: @neutral-500, @neutral-0;
|
|
tab-color: var(--primary), var(--link-color);
|
|
tab-item-bg: #dce3e9, @neutral-825;
|
|
tab-inactive-color: #404040, @neutral-350;
|
|
progress-bg: @neutral-250, var(--surface-inset);
|
|
progress-fill: var(--primary), var(--dark-progress-fill);
|
|
chart-series-1: #0000ff, @blue-300;
|
|
chart-series-2: #008000, @green-300;
|
|
chart-series-3: #ff0000, @red-300;
|
|
chart-series-4: #ff6600, @orange-300;
|
|
chart-series-5: #ffaa00, @amber-300;
|
|
chart-area-opacity: .4, .18;
|
|
iface-bg: @neutral-50, transparent;
|
|
iface-head-bg: @neutral-200, @neutral-600;
|
|
iface-head-text: var(--text-strong), @neutral-0;
|
|
iface-body-bg: transparent, @neutral-800;
|
|
iface-border: 0, 1px solid var(--separator-color);
|
|
badge-bg: @neutral-200, @neutral-800;
|
|
label-bg: #bfbfbf, @neutral-650;
|
|
dropdown-text: var(--text-strong);
|
|
dropdown-selected-text: var(--text-strong);
|
|
dropdown-selected-bg: #e8ecff, var(--dark-selected-bg);
|
|
dropdown-hover-bg: var(--surface-active);
|
|
sidebar-scrollbar: @neutral-100, @neutral-850;
|
|
login-panel-rgb: ~"244, 245, 247", ~"0, 0, 0";
|
|
login-text: #101828, @neutral-400;
|
|
login-input-border: @neutral-0, @neutral-400;
|
|
|
|
// Feedback and pending changes
|
|
positive-bg: var(--primary);
|
|
danger-bg: var(--danger), @red-600;
|
|
success-bg: var(--success), @green-700;
|
|
feedback-text: inherit, var(--text-on-accent);
|
|
negative-bg: var(--danger), var(--danger-bg);
|
|
reset-bg: #f0ad4e, var(--warning-bg);
|
|
reset-border: #eea236, var(--warning-bg);
|
|
reset-action-bg: var(--danger), var(--reset-bg);
|
|
success-action-bg: #5cb85c, var(--success-bg);
|
|
success-action-border: #4cae4c, var(--success-bg);
|
|
warning-action-bg: var(--warning), var(--warning-bg);
|
|
warning-badge-bg: #f0ad4e, var(--warning-bg);
|
|
notice-bg: var(--info), var(--primary);
|
|
warning-bg: var(--warning), @amber-700;
|
|
error-bg: @orange-500, #49252d;
|
|
warning-heading-bg: transparent, #784f00;
|
|
warning-heading-color: #8c6900, var(--warning);
|
|
feedback-heading-bg: var(--warning-heading-bg), transparent;
|
|
feedback-heading-text: var(--warning-heading-color), inherit;
|
|
change-added-bg: #cfc, #1f3e30;
|
|
change-added-border: #0f0, var(--success);
|
|
change-removed-bg: #fcc, #49252d;
|
|
change-removed-border: #f00, var(--danger);
|
|
change-modified-bg: @neutral-200, @neutral-800;
|
|
change-modified-border: @neutral-350, @neutral-600;
|
|
|
|
// Plugin contracts: VLAN roles, zone RGB values and legacy adapters
|
|
plugin-card-bg: @neutral-0, @neutral-750;
|
|
vlan-text-muted: #626b7a, @neutral-400;
|
|
vlan-selected-bg: #e8ecff, var(--dark-selected-bg);
|
|
vlan-selected-hover-bg: #dfe4ff, var(--dark-selected-hover-bg);
|
|
vlan-selected-border: var(--primary), var(--link-color);
|
|
vlan-selected-ring: rgba(94, 114, 228, .28), var(--dark-accent-ring);
|
|
checkmark-icon: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e'), var(--dark-checkmark-icon);
|
|
vlan-tagged-rgb: ~"140, 72, 0", ~"251, 191, 36";
|
|
vlan-untagged-rgb: ~"6, 104, 95", ~"45, 212, 191";
|
|
vlan-checked-text: @neutral-0, @neutral-900;
|
|
zone-positive-rgb: ~"144, 240, 144", ~"73, 126, 73";
|
|
zone-negative-rgb: ~"240, 144, 144", ~"156, 79, 79";
|
|
zone-neutral-rgb: ~"238, 238, 238", ~"112, 112, 112";
|
|
zone-label-color: @neutral-800, @neutral-0;
|
|
plugin-text-muted: @neutral-500, #a1a1aa;
|
|
plugin-neutral: @neutral-500, @neutral-650;
|
|
plugin-scrollbar: @neutral-100, @neutral-650;
|
|
|
|
// Appearance effects
|
|
command-shadow: ~"inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05)", ~"inset 0 1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(255, 255, 255, .05)";
|
|
section-shadow: 0 0 1rem rgba(136, 152, 170, .15), 0 0 .5rem rgba(0, 0, 0, .35);
|
|
sidebar-shadow: rgba(0, 0, 0, .75) 0 0 15px -5px, 0 0 .5rem rgba(0, 0, 0, .15);
|
|
dropdown-shadow: ~"0 4px 8px rgba(0, 0, 0, .06), 0 12px 24px rgba(0, 0, 0, .12)", ~"0 4px 8px rgba(0, 0, 0, .2), 0 12px 24px rgba(0, 0, 0, .32)";
|
|
button-hover-shadow: ~"0 2px 4px rgba(0, 0, 0, .16), 0 4px 12px var(--accent-shadow-color)", ~"0 2px 4px rgba(0, 0, 0, .5), 0 4px 12px var(--accent-shadow-color)";
|
|
control-focus-shadow: ~"0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px var(--accent-shadow-color)", ~"0 0 0 2px var(--dark-control-ring)";
|
|
file-icon-filter: none, invert(.7);
|
|
image-filter: none, invert(.9);
|
|
};
|
|
|
|
// Emit only changed values in dark mode. Both mode selectors use this map.
|
|
.theme-palette(@mode) {
|
|
each(@theme-palette, {
|
|
@light: extract(@value, 1);
|
|
@dark: if(length(@value) > 1, extract(@value, 2), @light);
|
|
// Compare CSS text: LESS otherwise treats different var() calls as equal.
|
|
@light-css: ~"@{light}";
|
|
@dark-css: ~"@{dark}";
|
|
.emit() when (@mode = light) { --@{key}: @light; }
|
|
.emit() when (@mode = dark) and not (@light-css = @dark-css) { --@{key}: @dark; }
|
|
.emit();
|
|
});
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
// Runtime settings injected by LuCI; names are part of the configuration API.
|
|
--light-primary: #5e72e4;
|
|
// Fallbacks generated by luci.argon-palette from the default light seed.
|
|
--dark-primary: #5a6cc5;
|
|
--dark-on-primary: #ffffff;
|
|
--dark-link-color: #b0c1ff;
|
|
--dark-focus-ring: #d3ddff;
|
|
--dark-control-focus: #7a91ff;
|
|
--dark-progress-fill: #8fa4ff;
|
|
--dark-control-ring: rgba(122, 145, 255, .18);
|
|
--dark-selected-bg: #262e4f;
|
|
--dark-selected-hover-bg: #333d64;
|
|
--dark-accent-ring: rgba(176, 193, 255, .28);
|
|
--dark-accent-shadow: rgba(176, 193, 255, .1);
|
|
--dark-checkmark-icon: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e');
|
|
--blur-radius-light: 10px;
|
|
--blur-opacity-light: .5;
|
|
--blur-radius-dark: 10px;
|
|
--blur-opacity-dark: .5;
|
|
--blur-radius: var(--blur-radius-light);
|
|
--blur-opacity: var(--blur-opacity-light);
|
|
.theme-palette(light);
|
|
|
|
// Legacy LuCI colour API. New component rules use semantic tokens only.
|
|
--header-color: var(--text-on-accent);
|
|
--menu-bg-color: var(--surface-raised);
|
|
--red: var(--danger);
|
|
--orange: @orange-500;
|
|
--yellow: var(--error-text);
|
|
--green: var(--success);
|
|
--teal: var(--info);
|
|
--white: @neutral-0;
|
|
--gray: var(--muted-text);
|
|
--gray-dark: var(--text-strong);
|
|
--lighter: var(--surface-contrast);
|
|
--light: @neutral-400;
|
|
--dark: var(--code-text);
|
|
--default: var(--overlay-text);
|
|
--darker: var(--media-bg);
|
|
|
|
// Non-colour resources are shared between appearances.
|
|
--font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
|
|
--chevron-down-icon: url("../icon/chevron-down.svg");
|
|
--chevron-right-icon: url("../icon/chevron-right.svg");
|
|
--dropdown-arrow-icon: var(--chevron-down-icon);
|
|
}
|
|
|
|
.dark-palette() {
|
|
color-scheme: dark;
|
|
.theme-palette(dark);
|
|
--blur-radius: var(--blur-radius-dark);
|
|
--blur-opacity: var(--blur-opacity-dark);
|
|
}
|
|
|
|
:root[data-argon-mode="dark"] {
|
|
.dark-palette();
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-argon-mode="light"]):not([data-argon-mode="dark"]) {
|
|
.dark-palette();
|
|
}
|
|
}
|