Refactor themes to use color scale
Color shades should be declared upfront without resorting to the dynamic brightness modification functions. All shades are also exposed as looked-up colors.
This commit is contained in:
mkpaz
parent
9cce26c4f0
commit
4e50660a8f
@ -4,25 +4,116 @@
|
|||||||
@use "../settings/icons";
|
@use "../settings/icons";
|
||||||
@use "../settings/utils";
|
@use "../settings/utils";
|
||||||
|
|
||||||
|
// ordinary
|
||||||
|
$color-bg: -color-bg-subtle !default;
|
||||||
|
$color-fg: -color-fg-default !default;
|
||||||
|
$color-border: -color-border-default !default;
|
||||||
|
|
||||||
|
$color-bg-hover: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default;
|
||||||
|
$color-fg-hover: -color-button-fg !default;
|
||||||
|
$color-border-hover: -color-button-border !default;
|
||||||
|
|
||||||
|
$color-bg-focused: -color-button-bg !default;
|
||||||
|
$color-fg-focused: -color-button-fg !default;
|
||||||
|
$color-border-focused: -color-accent-emphasis !default;
|
||||||
|
|
||||||
|
$color-bg-pressed: if(cfg.$darkMode, -color-gray-7, -color-gray-2) !default;
|
||||||
|
$color-fg-pressed: -color-button-fg !default;
|
||||||
|
$color-border-pressed: transparent !default;
|
||||||
|
|
||||||
|
// accent
|
||||||
|
$color-accent-bg: -color-accent-emphasis !default;
|
||||||
|
$color-accent-fg: -color-fg-emphasis !default;
|
||||||
|
$color-accent-border: -color-accent-emphasis !default;
|
||||||
|
|
||||||
|
$color-accent-bg-hover: -color-blue-6 !default;
|
||||||
|
$color-accent-fg-hover: -color-fg-emphasis !default;
|
||||||
|
$color-accent-border-hover: -color-accent-emphasis !default;
|
||||||
|
|
||||||
|
$color-accent-bg-focused: -color-accent-emphasis !default;
|
||||||
|
$color-accent-fg-focused: -color-fg-emphasis !default;
|
||||||
|
$color-accent-border-focused: -color-accent-emphasis !default;
|
||||||
|
|
||||||
|
$color-accent-bg-pressed: -color-blue-6 !default;
|
||||||
|
$color-accent-fg-pressed: -color-fg-emphasis !default;
|
||||||
|
$color-accent-border-pressed: transparent !default;
|
||||||
|
|
||||||
|
// success
|
||||||
|
$color-success-bg: -color-success-emphasis !default;
|
||||||
|
$color-success-fg: -color-fg-emphasis !default;
|
||||||
|
$color-success-border: -color-success-emphasis !default;
|
||||||
|
|
||||||
|
$color-success-bg-hover: -color-green-5 !default;
|
||||||
|
$color-success-fg-hover: -color-fg-emphasis !default;
|
||||||
|
$color-success-border-hover: -color-success-emphasis !default;
|
||||||
|
|
||||||
|
$color-success-bg-focused: -color-success-emphasis !default;
|
||||||
|
$color-success-fg-focused: -color-fg-emphasis !default;
|
||||||
|
$color-success-border-focused: -color-success-emphasis !default;
|
||||||
|
|
||||||
|
$color-success-bg-pressed: -color-green-5 !default;
|
||||||
|
$color-success-fg-pressed: -color-fg-emphasis !default;
|
||||||
|
$color-success-border-pressed: transparent !default;
|
||||||
|
|
||||||
|
// danger
|
||||||
|
$color-danger-bg: -color-danger-emphasis !default;
|
||||||
|
$color-danger-fg: -color-fg-emphasis !default;
|
||||||
|
$color-danger-border: -color-danger-emphasis !default;
|
||||||
|
|
||||||
|
$color-danger-bg-hover: -color-red-6 !default;
|
||||||
|
$color-danger-fg-hover: -color-fg-emphasis !default;
|
||||||
|
$color-danger-border-hover: -color-danger-emphasis !default;
|
||||||
|
|
||||||
|
$color-danger-bg-focused: -color-danger-emphasis !default;
|
||||||
|
$color-danger-fg-focused: -color-fg-emphasis !default;
|
||||||
|
$color-danger-border-focused: -color-danger-emphasis !default;
|
||||||
|
|
||||||
|
$color-danger-bg-pressed: -color-red-6 !default;
|
||||||
|
$color-danger-fg-pressed: -color-fg-emphasis !default;
|
||||||
|
$color-danger-border-pressed: transparent !default;
|
||||||
|
|
||||||
|
// flat
|
||||||
|
$color-flat-fg: -color-fg-default !default;
|
||||||
|
$color-flat-bg-hover: -color-bg-subtle !default;
|
||||||
|
|
||||||
|
$color-flat-accent-fg: -color-accent-fg !default;
|
||||||
|
$color-flat-accent-bg-hover: -color-accent-subtle !default;
|
||||||
|
|
||||||
|
$color-flat-success-fg: -color-success-fg !default;
|
||||||
|
$color-flat-success-bg-hover: -color-success-subtle !default;
|
||||||
|
|
||||||
|
$color-flat-danger-fg: -color-danger-fg !default;
|
||||||
|
$color-flat-danger-bg-hover: -color-danger-subtle !default;
|
||||||
|
|
||||||
|
// outlined
|
||||||
|
$color-accent-outlined-fg: -color-accent-fg !default;
|
||||||
|
$color-accent-outlined-bg-hover: -color-accent-emphasis !default;
|
||||||
|
|
||||||
|
$color-success-outlined-fg: -color-success-fg !default;
|
||||||
|
$color-success-outlined-bg-hover: -color-success-emphasis !default;
|
||||||
|
|
||||||
|
$color-danger-outlined-fg: -color-danger-fg !default;
|
||||||
|
$color-danger-outlined-bg-hover: -color-danger-emphasis !default;
|
||||||
|
|
||||||
// basic style is shared with Button, ToggleButton and MenuButton
|
// basic style is shared with Button, ToggleButton and MenuButton
|
||||||
@mixin base() {
|
@mixin base() {
|
||||||
|
|
||||||
// buttons can be configured via looked-up colors
|
// buttons can be configured via looked-up colors
|
||||||
-color-button-bg: -color-bg-subtle;
|
-color-button-bg: $color-bg;
|
||||||
-color-button-fg: -color-fg-default;
|
-color-button-fg: $color-fg;
|
||||||
-color-button-border: -color-border-default;
|
-color-button-border: $color-border;
|
||||||
|
|
||||||
-color-button-bg-hover: utils.saturate(-color-button-bg, cfg.$darkMode, cfg.$color-delta-hover);
|
-color-button-bg-hover: $color-bg-hover;
|
||||||
-color-button-fg-hover: -color-button-fg;
|
-color-button-fg-hover: $color-fg-hover;
|
||||||
-color-button-border-hover: -color-button-border;
|
-color-button-border-hover: $color-border-hover;
|
||||||
|
|
||||||
-color-button-bg-focused: -color-button-bg;
|
-color-button-bg-focused: $color-bg-focused;
|
||||||
-color-button-fg-focused: -color-button-fg;
|
-color-button-fg-focused: $color-fg-focused;
|
||||||
-color-button-border-focused: -color-accent-emphasis;
|
-color-button-border-focused: $color-border-focused;
|
||||||
|
|
||||||
-color-button-bg-pressed: utils.saturate(-color-button-bg, cfg.$darkMode, cfg.$color-delta-active);
|
-color-button-bg-pressed: $color-bg-pressed;
|
||||||
-color-button-fg-pressed: -color-button-fg;
|
-color-button-fg-pressed: $color-fg-pressed;
|
||||||
-color-button-border-pressed: -color-button-border;
|
-color-button-border-pressed: $color-border-pressed;
|
||||||
|
|
||||||
-fx-background-color: -color-button-border, -color-button-bg;
|
-fx-background-color: -color-button-border, -color-button-bg;
|
||||||
-fx-background-insets: 0, cfg.$border-width;
|
-fx-background-insets: 0, cfg.$border-width;
|
||||||
@ -105,94 +196,113 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin accent() {
|
@mixin accent() {
|
||||||
-color-button-bg: -color-accent-emphasis;
|
|
||||||
-color-button-fg: -color-fg-emphasis;
|
-color-button-bg: $color-accent-bg;
|
||||||
-color-button-border: -color-accent-emphasis;
|
-color-button-fg: $color-accent-fg;
|
||||||
-color-button-border-focused: -color-accent-emphasis;
|
-color-button-border: $color-accent-border;
|
||||||
|
|
||||||
|
-color-button-bg-hover: $color-accent-bg-hover;
|
||||||
|
-color-button-fg-hover: $color-accent-fg-hover;
|
||||||
|
-color-button-border-hover: $color-accent-border-hover;
|
||||||
|
|
||||||
|
-color-button-bg-focused: $color-accent-bg-focused;
|
||||||
|
-color-button-fg-focused: $color-accent-fg-focused;
|
||||||
|
-color-button-border-focused: $color-accent-border-focused;
|
||||||
|
|
||||||
|
-color-button-bg-pressed: $color-accent-bg-pressed;
|
||||||
|
-color-button-fg-pressed: $color-accent-fg-pressed;
|
||||||
|
-color-button-border-pressed: $color-accent-border-pressed;
|
||||||
|
|
||||||
&.button-outlined {
|
&.button-outlined {
|
||||||
-color-button-bg: -color-bg-default;
|
-color-button-bg: -color-bg-default;
|
||||||
-color-button-fg: -color-accent-fg;
|
-color-button-fg: $color-accent-outlined-fg;
|
||||||
|
-color-button-bg-hover: $color-accent-outlined-bg-hover;
|
||||||
-color-button-bg-hover: -color-accent-emphasis;
|
|
||||||
-color-button-fg-hover: -color-fg-emphasis;
|
-color-button-fg-hover: -color-fg-emphasis;
|
||||||
|
|
||||||
-color-button-bg-focused: -color-accent-emphasis;
|
|
||||||
-color-button-fg-focused: -color-fg-emphasis;
|
|
||||||
|
|
||||||
-color-button-bg-pressed: utils.saturate(-color-accent-emphasis, cfg.$darkMode, cfg.$color-delta-active);
|
|
||||||
-color-button-fg-pressed: -color-fg-emphasis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
-color-button-fg: -color-accent-emphasis;
|
-color-button-fg: $color-flat-accent-fg;
|
||||||
-color-button-bg-hover: -color-accent-subtle;
|
-color-button-bg-hover: $color-flat-accent-bg-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin success() {
|
@mixin success() {
|
||||||
-color-button-bg: -color-success-emphasis;
|
|
||||||
-color-button-fg: -color-fg-emphasis;
|
-color-button-bg: $color-success-bg;
|
||||||
-color-button-border: -color-success-emphasis;
|
-color-button-fg: $color-success-fg;
|
||||||
-color-button-border-focused: -color-success-emphasis;
|
-color-button-border: $color-success-border;
|
||||||
|
|
||||||
|
-color-button-bg-hover: $color-success-bg-hover;
|
||||||
|
-color-button-fg-hover: $color-success-fg-hover;
|
||||||
|
-color-button-border-hover: $color-success-border-hover;
|
||||||
|
|
||||||
|
-color-button-bg-focused: $color-success-bg-focused;
|
||||||
|
-color-button-fg-focused: $color-success-fg-focused;
|
||||||
|
-color-button-border-focused: $color-success-border-focused;
|
||||||
|
|
||||||
|
-color-button-bg-pressed: $color-success-bg-pressed;
|
||||||
|
-color-button-fg-pressed: $color-success-fg-pressed;
|
||||||
|
-color-button-border-pressed: $color-success-border-pressed;
|
||||||
|
|
||||||
&.button-outlined {
|
&.button-outlined {
|
||||||
-color-button-bg: -color-bg-default;
|
-color-button-bg: -color-bg-default;
|
||||||
-color-button-fg: -color-success-fg;
|
-color-button-fg: $color-success-outlined-fg;
|
||||||
|
-color-button-bg-hover: $color-success-outlined-bg-hover;
|
||||||
-color-button-bg-hover: -color-success-emphasis;
|
|
||||||
-color-button-fg-hover: -color-fg-emphasis;
|
-color-button-fg-hover: -color-fg-emphasis;
|
||||||
|
|
||||||
-color-button-bg-focused: -color-success-emphasis;
|
|
||||||
-color-button-fg-focused: -color-fg-emphasis;
|
|
||||||
|
|
||||||
-color-button-bg-pressed: utils.saturate(-color-success-emphasis, cfg.$darkMode, cfg.$color-delta-active);
|
|
||||||
-color-button-fg-pressed: -color-fg-emphasis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
-color-button-fg: -color-success-emphasis;
|
-color-button-fg: $color-flat-success-fg;
|
||||||
-color-button-bg-hover: -color-success-subtle;
|
-color-button-bg-hover: $color-flat-success-bg-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin danger() {
|
@mixin danger() {
|
||||||
-color-button-bg: -color-danger-emphasis;
|
|
||||||
-color-button-fg: -color-fg-emphasis;
|
-color-button-bg: $color-danger-bg;
|
||||||
-color-button-border: -color-danger-emphasis;
|
-color-button-fg: $color-danger-fg;
|
||||||
-color-button-border-focused: -color-danger-emphasis;
|
-color-button-border: $color-danger-border;
|
||||||
|
|
||||||
|
-color-button-bg-hover: $color-danger-bg-hover;
|
||||||
|
-color-button-fg-hover: $color-danger-fg-hover;
|
||||||
|
-color-button-border-hover: $color-danger-border-hover;
|
||||||
|
|
||||||
|
-color-button-bg-focused: $color-danger-bg-focused;
|
||||||
|
-color-button-fg-focused: $color-danger-fg-focused;
|
||||||
|
-color-button-border-focused: $color-danger-border-focused;
|
||||||
|
|
||||||
|
-color-button-bg-pressed: $color-danger-bg-pressed;
|
||||||
|
-color-button-fg-pressed: $color-danger-fg-pressed;
|
||||||
|
-color-button-border-pressed: $color-danger-border-pressed;
|
||||||
|
|
||||||
&.button-outlined {
|
&.button-outlined {
|
||||||
-color-button-bg: -color-bg-default;
|
-color-button-bg: -color-bg-default;
|
||||||
-color-button-fg: -color-danger-fg;
|
-color-button-fg: $color-danger-outlined-fg;
|
||||||
|
-color-button-bg-hover: $color-danger-outlined-bg-hover;
|
||||||
-color-button-bg-hover: -color-danger-emphasis;
|
|
||||||
-color-button-fg-hover: -color-fg-emphasis;
|
-color-button-fg-hover: -color-fg-emphasis;
|
||||||
|
|
||||||
-color-button-bg-focused: -color-danger-emphasis;
|
|
||||||
-color-button-fg-focused: -color-fg-emphasis;
|
|
||||||
|
|
||||||
-color-button-bg-pressed: utils.saturate(-color-danger-emphasis, cfg.$darkMode, cfg.$color-delta-active);
|
|
||||||
-color-button-fg-pressed: -color-fg-emphasis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
-color-button-fg: -color-danger-emphasis;
|
-color-button-fg: $color-flat-danger-fg;
|
||||||
-color-button-bg-hover: -color-danger-subtle;
|
-color-button-bg-hover: $color-flat-danger-bg-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin flat() {
|
@mixin flat() {
|
||||||
-color-button-bg: transparent;
|
-color-button-bg: transparent;
|
||||||
|
-color-button-fg: $color-flat-fg;
|
||||||
-color-button-border: transparent;
|
-color-button-border: transparent;
|
||||||
|
|
||||||
-color-button-bg-hover: -color-bg-subtle;
|
-color-button-bg-hover: $color-flat-bg-hover;
|
||||||
|
-color-button-fg-hover: -color-button-fg;
|
||||||
-color-button-border-hover: transparent;
|
-color-button-border-hover: transparent;
|
||||||
|
|
||||||
-color-button-bg-focused: transparent;
|
-color-button-bg-focused: -color-button-bg;
|
||||||
|
-color-button-fg-focused: -color-button-fg;
|
||||||
-color-button-border-focused: transparent;
|
-color-button-border-focused: transparent;
|
||||||
|
|
||||||
-color-button-bg-pressed: transparent;
|
-color-button-bg-pressed: -color-button-bg;
|
||||||
|
-color-button-fg-pressed: -color-button-fg;
|
||||||
-color-button-border-pressed: transparent;
|
-color-button-border-pressed: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -205,16 +315,16 @@
|
|||||||
-fx-background-color: -color-button-border-hover, -color-button-bg-hover;
|
-fx-background-color: -color-button-border-hover, -color-button-bg-hover;
|
||||||
-fx-text-fill: -color-button-fg-hover;
|
-fx-text-fill: -color-button-fg-hover;
|
||||||
|
|
||||||
|
&:focused {
|
||||||
|
-fx-background-color: -color-button-border-focused, -color-button-bg-hover;
|
||||||
|
}
|
||||||
|
|
||||||
#{cfg.$font-icon-selector} {
|
#{cfg.$font-icon-selector} {
|
||||||
-fx-icon-color: -color-button-fg-hover;
|
-fx-icon-color: -color-button-fg-hover;
|
||||||
-fx-fill: -color-button-fg-hover;
|
-fx-fill: -color-button-fg-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover:focused {
|
|
||||||
-fx-background-color: -color-button-border-focused, -color-button-bg-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focused {
|
&:focused {
|
||||||
-fx-background-color: -color-button-border-focused, -color-button-bg-focused;
|
-fx-background-color: -color-button-border-focused, -color-button-bg-focused;
|
||||||
-fx-text-fill: -color-button-fg-focused;
|
-fx-text-fill: -color-button-fg-focused;
|
||||||
@ -252,8 +362,7 @@
|
|||||||
&.flat {
|
&.flat {
|
||||||
@include flat();
|
@include flat();
|
||||||
|
|
||||||
&:armed,
|
&:hover {
|
||||||
&:focused:armed {
|
|
||||||
-fx-underline: true;
|
-fx-underline: true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,6 +5,10 @@
|
|||||||
@use "../settings/icons";
|
@use "../settings/icons";
|
||||||
@use "../settings/utils";
|
@use "../settings/utils";
|
||||||
|
|
||||||
|
$color-cell-bg: -color-bg-default !default;
|
||||||
|
$color-cell-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-0) !default;
|
||||||
|
$color-cell-bg-selected: -color-accent-subtle !default;
|
||||||
|
|
||||||
@mixin _arrow() {
|
@mixin _arrow() {
|
||||||
@include icons.get("arrow-drop-down", false);
|
@include icons.get("arrow-drop-down", false);
|
||||||
-fx-background-color: -color-fg-muted;
|
-fx-background-color: -color-fg-muted;
|
||||||
@ -122,7 +126,7 @@
|
|||||||
|
|
||||||
.combo-box-popup {
|
.combo-box-popup {
|
||||||
>.list-view {
|
>.list-view {
|
||||||
-fx-background-color: -color-border-default, -color-bg-default;
|
-fx-background-color: -color-border-default, $color-cell-bg;
|
||||||
-fx-background-insets: 0, 1;
|
-fx-background-insets: 0, 1;
|
||||||
-fx-background-radius: cfg.$border-radius;
|
-fx-background-radius: cfg.$border-radius;
|
||||||
|
|
||||||
@ -133,17 +137,17 @@
|
|||||||
// reset cell size, because height is set via paddings
|
// reset cell size, because height is set via paddings
|
||||||
// to use the same values as ChoiceBox
|
// to use the same values as ChoiceBox
|
||||||
-fx-cell-size: 0;
|
-fx-cell-size: 0;
|
||||||
-fx-background-color: -color-bg-default;
|
-fx-background-color: $color-cell-bg;
|
||||||
-fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x;
|
-fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x;
|
||||||
-fx-graphic-text-gap: cfg.$graphic-gap;
|
-fx-graphic-text-gap: cfg.$graphic-gap;
|
||||||
|
|
||||||
&:filled:hover {
|
&:filled:hover {
|
||||||
-fx-background-color: utils.saturate(-color-bg-default, cfg.$darkMode, cfg.$color-delta-hover);
|
-fx-background-color: $color-cell-bg-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:filled:selected,
|
&:filled:selected,
|
||||||
&:filled:selected:hover {
|
&:filled:selected:hover {
|
||||||
-fx-background-color: -color-accent-subtle;
|
-fx-background-color: $color-cell-bg-selected;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,8 @@
|
|||||||
@use "../settings/utils";
|
@use "../settings/utils";
|
||||||
@use "sass:math";
|
@use "sass:math";
|
||||||
|
|
||||||
$color-rect-size: 8px !default;
|
$color-picker-rect-size: 8px !default;
|
||||||
|
$color-button-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default;
|
||||||
|
|
||||||
.html-editor {
|
.html-editor {
|
||||||
-fx-background-color: -color-border-default, -color-bg-default;
|
-fx-background-color: -color-border-default, -color-bg-default;
|
||||||
@ -25,7 +26,7 @@ $color-rect-size: 8px !default;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toggle-button {
|
.toggle-button {
|
||||||
-color-button-bg-selected: utils.saturate(-color-button-bg, cfg.$darkMode, cfg.$color-delta-active);
|
-color-button-bg-selected: $color-button-bg-selected;
|
||||||
-color-button-border-focused: transparent;
|
-color-button-border-focused: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -33,17 +34,17 @@ $color-rect-size: 8px !default;
|
|||||||
.color-picker {
|
.color-picker {
|
||||||
&.html-editor-foreground {
|
&.html-editor-foreground {
|
||||||
-fx-color-rect-x: 0;
|
-fx-color-rect-x: 0;
|
||||||
-fx-color-rect-y: -#{math.div($color-rect-size, 2)};
|
-fx-color-rect-y: -#{math.div($color-picker-rect-size, 2)};
|
||||||
-fx-color-rect-width: $color-rect-size;
|
-fx-color-rect-width: $color-picker-rect-size;
|
||||||
-fx-color-rect-height: $color-rect-size;
|
-fx-color-rect-height: $color-picker-rect-size;
|
||||||
-fx-color-label-visible: false;
|
-fx-color-label-visible: false;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.html-editor-background {
|
&.html-editor-background {
|
||||||
-fx-color-rect-x: 0;
|
-fx-color-rect-x: 0;
|
||||||
-fx-color-rect-y: -#{math.div($color-rect-size, 2)};
|
-fx-color-rect-y: -#{math.div($color-picker-rect-size, 2)};
|
||||||
-fx-color-rect-width: $color-rect-size;
|
-fx-color-rect-width: $color-picker-rect-size;
|
||||||
-fx-color-rect-height: $color-rect-size;
|
-fx-color-rect-height: $color-picker-rect-size;
|
||||||
-fx-color-label-visible: false;
|
-fx-color-label-visible: false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -104,17 +104,6 @@ $separator-width: 0.75px !default;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flat {
|
|
||||||
@include button.flat();
|
|
||||||
|
|
||||||
&:armed,
|
|
||||||
&:focused:armed {
|
|
||||||
>.label {
|
|
||||||
-fx-underline: false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.accent {
|
&.accent {
|
||||||
@include button.accent();
|
@include button.accent();
|
||||||
}
|
}
|
||||||
@ -126,6 +115,10 @@ $separator-width: 0.75px !default;
|
|||||||
&.danger {
|
&.danger {
|
||||||
@include button.danger();
|
@include button.danger();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.flat {
|
||||||
|
@include button.flat();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-menu-button {
|
.split-menu-button {
|
||||||
|
|||||||
@ -10,9 +10,9 @@
|
|||||||
///////////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
$color-menubar-bg: -color-bg-subtle !default;
|
$color-menubar-bg: -color-bg-subtle !default;
|
||||||
$color-menubar-bg-hover: utils.saturate($color-menubar-bg, cfg.$darkMode, cfg.$color-delta-hover) !default;
|
$color-menubar-bg-hover: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default;
|
||||||
$color-menuitem-bg: -color-bg-default !default;
|
$color-menuitem-bg: -color-bg-default !default;
|
||||||
$color-menuitem-bg-hover: utils.saturate($color-menuitem-bg, cfg.$darkMode, cfg.$color-delta-hover) !default;
|
$color-menuitem-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default;
|
||||||
|
|
||||||
$separator-padding: map-get(cfg.$separators, "small") !default;
|
$separator-padding: map-get(cfg.$separators, "small") !default;
|
||||||
|
|
||||||
|
|||||||
@ -4,9 +4,9 @@
|
|||||||
@use "../settings/icons";
|
@use "../settings/icons";
|
||||||
@use "../settings/utils";
|
@use "../settings/utils";
|
||||||
|
|
||||||
$button-bg: -color-bg-subtle !default;
|
$color-button-bg: -color-bg-subtle !default;
|
||||||
$button-fg: -color-fg-default !default;
|
$color-button-fg: -color-fg-default !default;
|
||||||
$button-hover: utils.saturate($button-bg, cfg.$darkMode, cfg.$color-delta-hover) !default;
|
$color-button-hover: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default;
|
||||||
$icon-padding-x: 0.25em !default;
|
$icon-padding-x: 0.25em !default;
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
@ -26,17 +26,17 @@ $icon-padding-x: 0.25em !default;
|
|||||||
}
|
}
|
||||||
|
|
||||||
>.increment-arrow-button {
|
>.increment-arrow-button {
|
||||||
-fx-background-color: $button-bg;
|
-fx-background-color: $color-button-bg;
|
||||||
-fx-background-insets: 0;
|
-fx-background-insets: 0;
|
||||||
-fx-background-radius: 0 cfg.$border-radius 0 0;
|
-fx-background-radius: 0 cfg.$border-radius 0 0;
|
||||||
-fx-padding: 10px;
|
-fx-padding: 10px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
-fx-background-color: $button-hover;
|
-fx-background-color: $color-button-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.increment-arrow {
|
>.increment-arrow {
|
||||||
-fx-background-color: $button-fg;
|
-fx-background-color: $color-button-fg;
|
||||||
-fx-background-insets: 0;
|
-fx-background-insets: 0;
|
||||||
-fx-padding: 0 $icon-padding-x 0 $icon-padding-x;
|
-fx-padding: 0 $icon-padding-x 0 $icon-padding-x;
|
||||||
@include icons.get("arrow-drop-up", false);
|
@include icons.get("arrow-drop-up", false);
|
||||||
@ -44,17 +44,17 @@ $icon-padding-x: 0.25em !default;
|
|||||||
}
|
}
|
||||||
|
|
||||||
>.decrement-arrow-button {
|
>.decrement-arrow-button {
|
||||||
-fx-background-color: $button-bg;
|
-fx-background-color: $color-button-bg;
|
||||||
-fx-background-insets: -1 0 0 0;
|
-fx-background-insets: -1 0 0 0;
|
||||||
-fx-background-radius: 0 0 cfg.$border-radius 0;
|
-fx-background-radius: 0 0 cfg.$border-radius 0;
|
||||||
-fx-padding: 10px;
|
-fx-padding: 10px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
-fx-background-color: $button-hover;
|
-fx-background-color: $color-button-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.decrement-arrow {
|
>.decrement-arrow {
|
||||||
-fx-background-color: $button-fg;
|
-fx-background-color: $color-button-fg;
|
||||||
-fx-background-insets: 0;
|
-fx-background-insets: 0;
|
||||||
-fx-padding: 0 $icon-padding-x 0 $icon-padding-x;
|
-fx-padding: 0 $icon-padding-x 0 $icon-padding-x;
|
||||||
@include icons.get("arrow-drop-down", false);
|
@include icons.get("arrow-drop-down", false);
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
@use "../settings/utils";
|
@use "../settings/utils";
|
||||||
|
|
||||||
$color-bg: -color-bg-subtle !default;
|
$color-bg: -color-bg-subtle !default;
|
||||||
$color-bg-pressed: utils.saturate($color-bg, cfg.$darkMode, cfg.$color-delta-active) !default;
|
$color-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default;
|
||||||
|
|
||||||
$padding-x: cfg.$padding-x !default;
|
$padding-x: cfg.$padding-x !default;
|
||||||
$padding-y: 4px !default;
|
$padding-y: 4px !default;
|
||||||
@ -30,7 +30,7 @@ $border-width: cfg.$border-width !default;
|
|||||||
|
|
||||||
.toggle-button {
|
.toggle-button {
|
||||||
-color-button-bg: $color-bg;
|
-color-button-bg: $color-bg;
|
||||||
-color-button-bg-selected: $color-bg-pressed;
|
-color-button-bg-selected: $color-bg-selected;
|
||||||
-color-button-fg-selected: -color-fg-default;
|
-color-button-fg-selected: -color-fg-default;
|
||||||
-fx-background-insets: 0;
|
-fx-background-insets: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,75 +1,138 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
@use "../settings/config" as cfg;
|
@use "../settings/config" as cfg;
|
||||||
@use "../settings/palette" as palette;
|
@use "../settings/color-scale" as scale;
|
||||||
|
@use "../settings/color-vars" as vars;
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
|
|
||||||
-color-fg-default: palette.$fg-default;
|
// Color scale
|
||||||
-color-fg-muted: palette.$fg-muted;
|
|
||||||
-color-fg-subtle: palette.$fg-subtle;
|
|
||||||
-color-fg-emphasis: palette.$fg-onEmphasis;
|
|
||||||
|
|
||||||
-color-bg-default: palette.$canvas-default;
|
-color-black: scale.$black;
|
||||||
-color-bg-overlay: palette.$canvas-overlay;
|
-color-white: scale.$white;
|
||||||
-color-bg-subtle: palette.$canvas-subtle;
|
|
||||||
-color-bg-inset: palette.$canvas-inset;
|
|
||||||
|
|
||||||
-color-border-default: palette.$border-default;
|
-color-gray-0: scale.$gray-0;
|
||||||
-color-border-muted: palette.$border-muted;
|
-color-gray-1: scale.$gray-1;
|
||||||
-color-border-subtle: palette.$border-subtle;
|
-color-gray-2: scale.$gray-2;
|
||||||
|
-color-gray-3: scale.$gray-3;
|
||||||
|
-color-gray-4: scale.$gray-4;
|
||||||
|
-color-gray-5: scale.$gray-5;
|
||||||
|
-color-gray-6: scale.$gray-6;
|
||||||
|
-color-gray-7: scale.$gray-7;
|
||||||
|
-color-gray-8: scale.$gray-8;
|
||||||
|
-color-gray-9: scale.$gray-9;
|
||||||
|
|
||||||
-color-neutral-emphasis-plus: palette.$neutral-emphasisPlus;
|
-color-blue-0: scale.$blue-0;
|
||||||
-color-neutral-emphasis: palette.$neutral-emphasis;
|
-color-blue-1: scale.$blue-1;
|
||||||
-color-neutral-muted: palette.$neutral-muted;
|
-color-blue-2: scale.$blue-2;
|
||||||
-color-neutral-subtle: palette.$neutral-subtle;
|
-color-blue-3: scale.$blue-3;
|
||||||
|
-color-blue-4: scale.$blue-4;
|
||||||
|
-color-blue-5: scale.$blue-5;
|
||||||
|
-color-blue-6: scale.$blue-6;
|
||||||
|
-color-blue-7: scale.$blue-7;
|
||||||
|
-color-blue-8: scale.$blue-8;
|
||||||
|
-color-blue-9: scale.$blue-9;
|
||||||
|
|
||||||
-color-accent-fg: palette.$accent-fg;
|
-color-green-0: scale.$green-0;
|
||||||
-color-accent-emphasis: palette.$accent-emphasis;
|
-color-green-1: scale.$green-1;
|
||||||
-color-accent-muted: palette.$accent-muted;
|
-color-green-2: scale.$green-2;
|
||||||
-color-accent-subtle: palette.$accent-subtle;
|
-color-green-3: scale.$green-3;
|
||||||
|
-color-green-4: scale.$green-4;
|
||||||
|
-color-green-5: scale.$green-5;
|
||||||
|
-color-green-6: scale.$green-6;
|
||||||
|
-color-green-7: scale.$green-7;
|
||||||
|
-color-green-8: scale.$green-8;
|
||||||
|
-color-green-9: scale.$green-9;
|
||||||
|
|
||||||
-color-warning-fg: palette.$warning-fg;
|
-color-yellow-0: scale.$yellow-0;
|
||||||
-color-warning-emphasis: palette.$warning-emphasis;
|
-color-yellow-1: scale.$yellow-1;
|
||||||
-color-warning-muted: palette.$warning-muted;
|
-color-yellow-2: scale.$yellow-2;
|
||||||
-color-warning-subtle: palette.$warning-subtle;
|
-color-yellow-3: scale.$yellow-3;
|
||||||
|
-color-yellow-4: scale.$yellow-4;
|
||||||
|
-color-yellow-5: scale.$yellow-5;
|
||||||
|
-color-yellow-6: scale.$yellow-6;
|
||||||
|
-color-yellow-7: scale.$yellow-7;
|
||||||
|
-color-yellow-8: scale.$yellow-8;
|
||||||
|
-color-yellow-9: scale.$yellow-9;
|
||||||
|
|
||||||
-color-success-fg: palette.$success-fg;
|
-color-red-0: scale.$red-0;
|
||||||
-color-success-emphasis: palette.$success-emphasis;
|
-color-red-1: scale.$red-1;
|
||||||
-color-success-muted: palette.$success-muted;
|
-color-red-2: scale.$red-2;
|
||||||
-color-success-subtle: palette.$success-subtle;
|
-color-red-3: scale.$red-3;
|
||||||
|
-color-red-4: scale.$red-4;
|
||||||
|
-color-red-5: scale.$red-5;
|
||||||
|
-color-red-6: scale.$red-6;
|
||||||
|
-color-red-7: scale.$red-7;
|
||||||
|
-color-red-8: scale.$red-8;
|
||||||
|
-color-red-9: scale.$red-9;
|
||||||
|
|
||||||
-color-danger-fg: palette.$danger-fg;
|
// Functional variables
|
||||||
-color-danger-emphasis: palette.$danger-emphasis;
|
|
||||||
-color-danger-muted: palette.$danger-muted;
|
|
||||||
-color-danger-subtle: palette.$danger-subtle;
|
|
||||||
|
|
||||||
-color-chart-1: palette.$chart-1;
|
-color-fg-default: vars.$fg-default;
|
||||||
-color-chart-2: palette.$chart-2;
|
-color-fg-muted: vars.$fg-muted;
|
||||||
-color-chart-3: palette.$chart-3;
|
-color-fg-subtle: vars.$fg-subtle;
|
||||||
-color-chart-4: palette.$chart-4;
|
-color-fg-emphasis: vars.$fg-onEmphasis;
|
||||||
-color-chart-5: palette.$chart-5;
|
|
||||||
-color-chart-6: palette.$chart-6;
|
|
||||||
-color-chart-7: palette.$chart-7;
|
|
||||||
-color-chart-8: palette.$chart-8;
|
|
||||||
|
|
||||||
-color-chart-1-alpha70: palette.$chart-1-alpha70;
|
-color-bg-default: vars.$canvas-default;
|
||||||
-color-chart-2-alpha70: palette.$chart-2-alpha70;
|
-color-bg-overlay: vars.$canvas-overlay;
|
||||||
-color-chart-3-alpha70: palette.$chart-3-alpha70;
|
-color-bg-subtle: vars.$canvas-subtle;
|
||||||
-color-chart-4-alpha70: palette.$chart-4-alpha70;
|
-color-bg-inset: vars.$canvas-inset;
|
||||||
-color-chart-5-alpha70: palette.$chart-5-alpha70;
|
|
||||||
-color-chart-6-alpha70: palette.$chart-6-alpha70;
|
|
||||||
-color-chart-7-alpha70: palette.$chart-7-alpha70;
|
|
||||||
-color-chart-8-alpha70: palette.$chart-8-alpha70;
|
|
||||||
|
|
||||||
-color-chart-1-alpha20: palette.$chart-1-alpha20;
|
-color-border-default: vars.$border-default;
|
||||||
-color-chart-2-alpha20: palette.$chart-2-alpha20;
|
-color-border-muted: vars.$border-muted;
|
||||||
-color-chart-3-alpha20: palette.$chart-3-alpha20;
|
-color-border-subtle: vars.$border-subtle;
|
||||||
-color-chart-4-alpha20: palette.$chart-4-alpha20;
|
|
||||||
-color-chart-5-alpha20: palette.$chart-5-alpha20;
|
-color-neutral-emphasis-plus: vars.$neutral-emphasisPlus;
|
||||||
-color-chart-6-alpha20: palette.$chart-6-alpha20;
|
-color-neutral-emphasis: vars.$neutral-emphasis;
|
||||||
-color-chart-7-alpha20: palette.$chart-7-alpha20;
|
-color-neutral-muted: vars.$neutral-muted;
|
||||||
-color-chart-8-alpha20: palette.$chart-8-alpha20;
|
-color-neutral-subtle: vars.$neutral-subtle;
|
||||||
|
|
||||||
|
-color-accent-fg: vars.$accent-fg;
|
||||||
|
-color-accent-emphasis: vars.$accent-emphasis;
|
||||||
|
-color-accent-muted: vars.$accent-muted;
|
||||||
|
-color-accent-subtle: vars.$accent-subtle;
|
||||||
|
|
||||||
|
-color-warning-fg: vars.$warning-fg;
|
||||||
|
-color-warning-emphasis: vars.$warning-emphasis;
|
||||||
|
-color-warning-muted: vars.$warning-muted;
|
||||||
|
-color-warning-subtle: vars.$warning-subtle;
|
||||||
|
|
||||||
|
-color-success-fg: vars.$success-fg;
|
||||||
|
-color-success-emphasis: vars.$success-emphasis;
|
||||||
|
-color-success-muted: vars.$success-muted;
|
||||||
|
-color-success-subtle: vars.$success-subtle;
|
||||||
|
|
||||||
|
-color-danger-fg: vars.$danger-fg;
|
||||||
|
-color-danger-emphasis: vars.$danger-emphasis;
|
||||||
|
-color-danger-muted: vars.$danger-muted;
|
||||||
|
-color-danger-subtle: vars.$danger-subtle;
|
||||||
|
|
||||||
|
-color-chart-1: vars.$chart-1;
|
||||||
|
-color-chart-2: vars.$chart-2;
|
||||||
|
-color-chart-3: vars.$chart-3;
|
||||||
|
-color-chart-4: vars.$chart-4;
|
||||||
|
-color-chart-5: vars.$chart-5;
|
||||||
|
-color-chart-6: vars.$chart-6;
|
||||||
|
-color-chart-7: vars.$chart-7;
|
||||||
|
-color-chart-8: vars.$chart-8;
|
||||||
|
|
||||||
|
-color-chart-1-alpha70: vars.$chart-1-alpha70;
|
||||||
|
-color-chart-2-alpha70: vars.$chart-2-alpha70;
|
||||||
|
-color-chart-3-alpha70: vars.$chart-3-alpha70;
|
||||||
|
-color-chart-4-alpha70: vars.$chart-4-alpha70;
|
||||||
|
-color-chart-5-alpha70: vars.$chart-5-alpha70;
|
||||||
|
-color-chart-6-alpha70: vars.$chart-6-alpha70;
|
||||||
|
-color-chart-7-alpha70: vars.$chart-7-alpha70;
|
||||||
|
-color-chart-8-alpha70: vars.$chart-8-alpha70;
|
||||||
|
|
||||||
|
-color-chart-1-alpha20: vars.$chart-1-alpha20;
|
||||||
|
-color-chart-2-alpha20: vars.$chart-2-alpha20;
|
||||||
|
-color-chart-3-alpha20: vars.$chart-3-alpha20;
|
||||||
|
-color-chart-4-alpha20: vars.$chart-4-alpha20;
|
||||||
|
-color-chart-5-alpha20: vars.$chart-5-alpha20;
|
||||||
|
-color-chart-6-alpha20: vars.$chart-6-alpha20;
|
||||||
|
-color-chart-7-alpha20: vars.$chart-7-alpha20;
|
||||||
|
-color-chart-8-alpha20: vars.$chart-8-alpha20;
|
||||||
|
|
||||||
// default props inherited by all nodes
|
// default props inherited by all nodes
|
||||||
-fx-background-color: -color-bg-default;
|
-fx-background-color: -color-bg-default;
|
||||||
|
|||||||
@ -1,77 +1,139 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
// Nord color palette
|
// Nord color palette
|
||||||
// informational, not commented to display color preview
|
$nord0: #2E3440; // hsl(220, 16.4, 21.6)
|
||||||
$nord0: #2E3440;
|
$nord1: #3B4252; // hsl(222, 16.3, 27.6)
|
||||||
$nord1: #3B4252;
|
$nord2: #434C5E; // hsl(220, 16.8, 31.6)
|
||||||
$nord1: #434C5E;
|
$nord3: #4C566A; // hsl(220, 16.5, 35.7)
|
||||||
$nord3: #4C566A;
|
$nord4: #D8DEE9; // hsl(219, 27.9, 88 )
|
||||||
$nord4: #D8DEE9;
|
$nord5: #E5E9F0; // hsl(218, 26.8, 92 )
|
||||||
$nord5: #E5E9F0;
|
$nord6: #ECEFF4; // hsl(218, 26.7, 94.1)
|
||||||
$nord6: #ECEFF4;
|
$nord7: #8FBCBB; // hsl(179, 25.1, 64.9)
|
||||||
$nord7: #8FBCBB;
|
$nord8: #88C0D0; // hsl(193, 43.4, 67.5)
|
||||||
$nord8: #88C0D0;
|
$nord9: #81A1C1; // hsl(210, 34, 63.1)
|
||||||
$nord9: #81A1C1;
|
$nord10: #5E81AC; // hsl(213, 32, 52.2)
|
||||||
$nord10: #5E81AC;
|
$nord11: #BF616A; // hsl(354, 42.3, 56.5)
|
||||||
$nord11: #BF616A;
|
$nord12: #D08770; // hsl(14, 50.5, 62.7)
|
||||||
$nord12: #D08770;
|
$nord13: #EBCB8B; // hsl(40, 70.6, 73.3)
|
||||||
$nord13: #EBCB8B;
|
$nord14: #A3BE8C; // hsl(92, 27.8, 64.7)
|
||||||
$nord14: #A3BE8C;
|
$nord16: #B48EAD; // hsl(311, 20.2, 63.1)
|
||||||
$nord16: #B48EAD;
|
|
||||||
|
|
||||||
@forward "settings/palette" with (
|
@forward "settings/color-scale" with (
|
||||||
|
|
||||||
$fg-default: #ECEFF4,
|
$black: #20242d, // hsl(222, 17, 15)
|
||||||
$fg-muted: #DFE4ED,
|
$white: #f4f5f8, // hsl(225, 22, 96)
|
||||||
$fg-subtle: #CFD7E3,
|
|
||||||
$fg-onEmphasis: #ECEFF4,
|
|
||||||
|
|
||||||
$canvas-default: #2E3440,
|
$gray-0: $nord6, // hsl(218, 26.8, 92 )
|
||||||
$canvas-overlay: #2E3440,
|
$gray-1: $nord5, // hsl(219, 27.9, 88 )
|
||||||
$canvas-inset: #3B4252,
|
$gray-2: $nord4, // hsl(219, 9.5, 71 )
|
||||||
$canvas-subtle: #3B4252,
|
$gray-3: #949AA6, // hsl(220, 9.2, 61.6)
|
||||||
|
$gray-4: #8B919E, // hsl(221, 8.9, 58.2)
|
||||||
|
$gray-5: #707888, // hsl(220, 9.7, 48.6)
|
||||||
|
$gray-6: $nord3, // hsl(220, 12.6, 42.2)
|
||||||
|
$gray-7: $nord2, // hsl(220, 16.5, 35.7)
|
||||||
|
$gray-8: $nord1, // hsl(220, 16.8, 31.6)
|
||||||
|
$gray-9: $nord0, // hsl(222, 16.3, 27.6)
|
||||||
|
|
||||||
$border-default: #4C566A,
|
$blue-0: #e3eaf1, // hsl(210, 33.3, 91.8)
|
||||||
$border-muted: #40495A,
|
$blue-1: #d5e0ea, // hsl(209, 33.3, 87.6)
|
||||||
$border-subtle: #3B4353,
|
$blue-2: #b9cbdd, // hsl(210, 34.6, 79.6)
|
||||||
|
$blue-3: #9db6cf, // hsl(210, 34.2, 71.4)
|
||||||
|
$blue-4: $nord9, // hsl(210, 34, 63.1)
|
||||||
|
$blue-5: $nord10, // hsl(213, 32, 52.2)
|
||||||
|
$blue-6: #647d96, // hsl(210, 20, 49 )
|
||||||
|
$blue-7: #48596b, // hsl(211, 19.6, 35.1)
|
||||||
|
$blue-8: #394856, // hsl(209, 20.3, 28 )
|
||||||
|
$blue-9: #2b3640, // hsl(209, 19.6, 21 )
|
||||||
|
|
||||||
$neutral-emphasisPlus: #6e7681,
|
$green-0: #dae5d1, // hsl(93, 27.8, 85.9)
|
||||||
$neutral-emphasis: #6e7681,
|
$green-1: #d1dfc6, // hsl(94, 28.1, 82.5)
|
||||||
$neutral-muted: rgba(110, 118, 129, 0.4),
|
$green-2: #bfd2af, // hsl(93, 28, 75.5)
|
||||||
$neutral-subtle: rgba(110, 118, 129, 0.1),
|
$green-3: #b5cba3, // hsl(93, 27.8, 71.8)
|
||||||
|
$green-4: $nord14, // hsl(92, 27.8, 64.7)
|
||||||
|
$green-5: #93ab7e, // hsl(92, 21.1, 58.2)
|
||||||
|
$green-6: #829870, // hsl(93, 16.3, 51.8)
|
||||||
|
$green-7: #728562, // hsl(93, 15.2, 45.3)
|
||||||
|
$green-8: #525f46, // hsl(91, 15.2, 32.4)
|
||||||
|
$green-9: #31392a, // hsl(92, 15.2, 19.4)
|
||||||
|
|
||||||
$accent-fg: #81A1C1,
|
$yellow-0: #f7ead1, // hsl(39, 70.4, 89.4)
|
||||||
$accent-emphasis: #5E81AC,
|
$yellow-1: #f5e5c5, // hsl(40, 70.6, 86.7)
|
||||||
$accent-muted: rgba(81, 109, 157, 0.3),
|
$yellow-2: #f1dbae, // hsl(40, 70.5, 81.4)
|
||||||
$accent-subtle: rgba(81, 109, 157, 0.1),
|
$yellow-3: #efd5a2, // hsl(40, 70.6, 78.6)
|
||||||
|
$yellow-4: $nord13, // hsl(40, 70.6, 73.3)
|
||||||
|
$yellow-5: #d4b77d, // hsl(40, 50.3, 66.1)
|
||||||
|
$yellow-6: #bca26f, // hsl(40, 36.5, 58.6)
|
||||||
|
$yellow-7: #8d7a53, // hsl(40, 25.9, 43.9)
|
||||||
|
$yellow-8: #766646, // hsl(40, 25.5, 36.9)
|
||||||
|
$yellow-9: #463d2a, // hsl(41, 25, 22 )
|
||||||
|
|
||||||
$success-fg: #A3BE8C,
|
$red-0: #ecd0d2, // hsl(356, 42.4, 87.1)
|
||||||
$success-emphasis: #5A7C4F,
|
$red-1: #dfb0b5, // hsl(354, 42.3, 78.2)
|
||||||
$success-muted: rgba(163, 190, 140, 0.4),
|
$red-2: #d29097, // hsl(354, 42.3, 69.4)
|
||||||
$success-subtle: rgba(163, 190, 140, 0.15),
|
$red-3: #c57179, // hsl(354, 42, 60.8)
|
||||||
|
$red-4: $nord11, // hsl(354, 42.3, 56.5)
|
||||||
|
$red-5: #994e55, // hsl(354, 32.5, 45.3)
|
||||||
|
$red-6: #86444a, // hsl(355, 32.7, 39.6)
|
||||||
|
$red-7: #733a40, // hsl(354, 32.9, 33.9)
|
||||||
|
$red-8: #603135, // hsl(355, 32.4, 28.4)
|
||||||
|
$red-9: #391d20 // hsl(354, 32.6, 16.9)
|
||||||
|
);
|
||||||
|
|
||||||
$warning-fg: #D08770,
|
@use "settings/color-scale" as scale;
|
||||||
$warning-emphasis: #AA5338,
|
|
||||||
$warning-muted: rgba(170, 83, 56, 0.4),
|
|
||||||
$warning-subtle: rgba(170, 83, 56, 0.15),
|
|
||||||
|
|
||||||
$danger-fg: #CA7C83,
|
@forward "settings/color-vars" with (
|
||||||
$danger-emphasis: #BF616A,
|
|
||||||
$danger-muted: rgba(178, 72, 82, 0.4),
|
$fg-default: scale.$gray-0,
|
||||||
$danger-subtle: rgba(178, 72, 82, 0.15)
|
$fg-muted: scale.$gray-2,
|
||||||
|
$fg-subtle: scale.$gray-3,
|
||||||
|
$fg-onEmphasis: scale.$white,
|
||||||
|
|
||||||
|
$canvas-default: scale.$gray-9,
|
||||||
|
$canvas-overlay: scale.$gray-8,
|
||||||
|
$canvas-inset: scale.$black,
|
||||||
|
$canvas-subtle: scale.$gray-7,
|
||||||
|
|
||||||
|
$border-default: scale.$gray-6,
|
||||||
|
$border-muted: scale.$gray-7,
|
||||||
|
$border-subtle: scale.$gray-8,
|
||||||
|
|
||||||
|
$neutral-emphasisPlus: scale.$gray-6,
|
||||||
|
$neutral-emphasis: scale.$gray-5,
|
||||||
|
$neutral-muted: color.change(scale.$gray-4, $alpha: 0.4),
|
||||||
|
$neutral-subtle: color.change(scale.$gray-4, $alpha: 0.1),
|
||||||
|
|
||||||
|
$accent-fg: scale.$blue-3,
|
||||||
|
$accent-emphasis: scale.$blue-5,
|
||||||
|
$accent-muted: color.change(scale.$blue-4, $alpha: 0.4),
|
||||||
|
$accent-subtle: color.change(scale.$blue-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$success-fg: scale.$green-3,
|
||||||
|
$success-emphasis: scale.$green-6,
|
||||||
|
$success-muted: color.change(scale.$green-4, $alpha: 0.35),
|
||||||
|
$success-subtle: color.change(scale.$green-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$warning-fg: scale.$yellow-3,
|
||||||
|
$warning-emphasis: scale.$yellow-6,
|
||||||
|
$warning-muted: color.change(scale.$yellow-5, $alpha: 0.35),
|
||||||
|
$warning-subtle: color.change(scale.$yellow-5, $alpha: 0.15),
|
||||||
|
|
||||||
|
$danger-fg: scale.$red-3,
|
||||||
|
$danger-emphasis: scale.$red-4,
|
||||||
|
$danger-muted: color.change(scale.$red-4, $alpha: 0.35),
|
||||||
|
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15)
|
||||||
);
|
);
|
||||||
|
|
||||||
@forward "settings/config" with (
|
@forward "settings/config" with (
|
||||||
$darkMode: true,
|
$darkMode: true
|
||||||
$color-delta-hover: 15%,
|
|
||||||
$color-delta-active: 20%
|
|
||||||
);
|
);
|
||||||
|
|
||||||
@use "general";
|
@use "general";
|
||||||
|
|
||||||
@forward "components/slider" as slider-* with (
|
@forward "components/slider" as slider-* with (
|
||||||
$thumb-color: -color-fg-subtle,
|
$thumb-color: -color-fg-default,
|
||||||
$thumb-color-border: -color-fg-subtle
|
$thumb-color-border: -color-fg-default
|
||||||
);
|
);
|
||||||
|
|
||||||
@forward "components/titled-pane" as titled-pane-* with (
|
@forward "components/titled-pane" as titled-pane-* with (
|
||||||
|
|||||||
@ -1,72 +1,131 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
// Nord is officially only supports dark theme:
|
@use "sass:color";
|
||||||
|
|
||||||
|
// Note that only dark theme is officially supported:
|
||||||
// https://github.com/arcticicestudio/nord/issues/46
|
// https://github.com/arcticicestudio/nord/issues/46
|
||||||
|
|
||||||
// Nord color palette
|
// Nord color palette
|
||||||
// informational, not commented to display color preview
|
$nord0: #2E3440; // hsl(220, 16.4, 21.6)
|
||||||
$nord0: #2E3440;
|
$nord1: #3B4252; // hsl(222, 16.3, 27.6)
|
||||||
$nord1: #3B4252;
|
$nord2: #434C5E; // hsl(220, 16.8, 31.6)
|
||||||
$nord1: #434C5E;
|
$nord3: #4C566A; // hsl(220, 16.5, 35.7)
|
||||||
$nord3: #4C566A;
|
$nord4: #D8DEE9; // hsl(219, 27.9, 88 )
|
||||||
$nord4: #D8DEE9;
|
$nord5: #E5E9F0; // hsl(218, 26.8, 92 )
|
||||||
$nord5: #E5E9F0;
|
$nord6: #ECEFF4; // hsl(218, 26.7, 94.1)
|
||||||
$nord6: #ECEFF4;
|
$nord7: #8FBCBB; // hsl(179, 25.1, 64.9)
|
||||||
$nord7: #8FBCBB;
|
$nord8: #88C0D0; // hsl(193, 43.4, 67.5)
|
||||||
$nord8: #88C0D0;
|
$nord9: #81A1C1; // hsl(210, 34, 63.1)
|
||||||
$nord9: #81A1C1;
|
$nord10: #5E81AC; // hsl(213, 32, 52.2)
|
||||||
$nord10: #5E81AC;
|
$nord11: #BF616A; // hsl(354, 42.3, 56.5)
|
||||||
$nord11: #BF616A;
|
$nord12: #D08770; // hsl(14, 50.5, 62.7)
|
||||||
$nord12: #D08770;
|
$nord13: #EBCB8B; // hsl(40, 70.6, 73.3)
|
||||||
$nord13: #EBCB8B;
|
$nord14: #A3BE8C; // hsl(92, 27.8, 64.7)
|
||||||
$nord14: #A3BE8C;
|
$nord16: #B48EAD; // hsl(311, 20.2, 63.1)
|
||||||
$nord16: #B48EAD;
|
|
||||||
|
|
||||||
@forward "settings/palette" with (
|
@forward "settings/color-scale" with (
|
||||||
|
|
||||||
$fg-default: #2E3440,
|
$black: #20242d, // hsl(222, 17, 15)
|
||||||
$fg-muted: #4C566A,
|
$white: #f4f5f8, // hsl(225, 22, 96)
|
||||||
$fg-subtle: #5A657C,
|
|
||||||
$fg-onEmphasis: #ECEFF4,
|
|
||||||
|
|
||||||
$canvas-default: #ECEFF4,
|
$gray-0: $nord6, // hsl(218, 26.8, 92 )
|
||||||
$canvas-overlay: #ECEFF4,
|
$gray-1: $nord5, // hsl(219, 27.9, 88 )
|
||||||
$canvas-inset: #D8DEE9,
|
$gray-2: $nord4, // hsl(219, 9.5, 71 )
|
||||||
$canvas-subtle: #E5E9F0,
|
$gray-3: #c2c8d2, // hsl(217, 15.1, 79.2)
|
||||||
|
$gray-4: #8B919E, // hsl(221, 8.9, 58.2)
|
||||||
|
$gray-5: #707888, // hsl(220, 9.7, 48.6)
|
||||||
|
$gray-6: $nord3, // hsl(220, 12.6, 42.2)
|
||||||
|
$gray-7: $nord2, // hsl(220, 16.5, 35.7)
|
||||||
|
$gray-8: $nord1, // hsl(220, 16.8, 31.6)
|
||||||
|
$gray-9: $nord0, // hsl(222, 16.3, 27.6)
|
||||||
|
|
||||||
$border-default: rgba(181, 188, 201, 1),
|
$blue-0: #e3eaf1, // hsl(210, 33.3, 91.8)
|
||||||
$border-muted: rgba(181, 188, 201, 0.75),
|
$blue-1: #d5e0ea, // hsl(209, 33.3, 87.6)
|
||||||
$border-subtle: rgba(181, 188, 201, 0.6),
|
$blue-2: #b9cbdd, // hsl(210, 34.6, 79.6)
|
||||||
|
$blue-3: #9db6cf, // hsl(210, 34.2, 71.4)
|
||||||
|
$blue-4: $nord9, // hsl(210, 34, 63.1)
|
||||||
|
$blue-5: $nord10, // hsl(213, 32, 52.2)
|
||||||
|
$blue-6: #647d96, // hsl(210, 20, 49 )
|
||||||
|
$blue-7: #48596b, // hsl(211, 19.6, 35.1)
|
||||||
|
$blue-8: #394856, // hsl(209, 20.3, 28 )
|
||||||
|
$blue-9: #2b3640, // hsl(209, 19.6, 21 )
|
||||||
|
|
||||||
$neutral-emphasisPlus: #24292f,
|
$green-0: #dae5d1, // hsl(93, 27.8, 85.9)
|
||||||
$neutral-emphasis: #6e7781,
|
$green-1: #d1dfc6, // hsl(94, 28.1, 82.5)
|
||||||
$neutral-muted: rgba(175, 184, 193, 0.2),
|
$green-2: #bfd2af, // hsl(93, 28, 75.5)
|
||||||
$neutral-subtle: rgba(234, 238, 242, 0.5),
|
$green-3: #b5cba3, // hsl(93, 27.8, 71.8)
|
||||||
|
$green-4: $nord14, // hsl(92, 27.8, 64.7)
|
||||||
|
$green-5: #93ab7e, // hsl(92, 21.1, 58.2)
|
||||||
|
$green-6: #829870, // hsl(93, 16.3, 51.8)
|
||||||
|
$green-7: #728562, // hsl(93, 15.2, 45.3)
|
||||||
|
$green-8: #525f46, // hsl(91, 15.2, 32.4)
|
||||||
|
$green-9: #31392a, // hsl(92, 15.2, 19.4)
|
||||||
|
|
||||||
$accent-fg: #5E81AC,
|
$yellow-0: #f7ead1, // hsl(39, 70.4, 89.4)
|
||||||
$accent-emphasis: #5E81AC,
|
$yellow-1: #f5e5c5, // hsl(40, 70.6, 86.7)
|
||||||
$accent-muted: rgba(81, 109, 157, 0.3),
|
$yellow-2: #f1dbae, // hsl(40, 70.5, 81.4)
|
||||||
$accent-subtle: rgba(81, 109, 157, 0.1),
|
$yellow-3: #efd5a2, // hsl(40, 70.6, 78.6)
|
||||||
|
$yellow-4: $nord13, // hsl(40, 70.6, 73.3)
|
||||||
|
$yellow-5: #d4b77d, // hsl(40, 50.3, 66.1)
|
||||||
|
$yellow-6: #bca26f, // hsl(40, 36.5, 58.6)
|
||||||
|
$yellow-7: #8d7a53, // hsl(40, 25.9, 43.9)
|
||||||
|
$yellow-8: #766646, // hsl(40, 25.5, 36.9)
|
||||||
|
$yellow-9: #463d2a, // hsl(41, 25, 22 )
|
||||||
|
|
||||||
$success-fg: #67864c,
|
$red-0: #ecd0d2, // hsl(356, 42.4, 87.1)
|
||||||
$success-emphasis: #67864c,
|
$red-1: #dfb0b5, // hsl(354, 42.3, 78.2)
|
||||||
$success-muted: rgba(103, 134, 76, 0.4),
|
$red-2: #d29097, // hsl(354, 42.3, 69.4)
|
||||||
$success-subtle: rgba(103, 134, 76, 0.15),
|
$red-3: #c57179, // hsl(354, 42, 60.8)
|
||||||
|
$red-4: $nord11, // hsl(354, 42.3, 56.5)
|
||||||
$warning-fg: #C26446,
|
$red-5: #994e55, // hsl(354, 32.5, 45.3)
|
||||||
$warning-emphasis: #C26446,
|
$red-6: #86444a, // hsl(355, 32.7, 39.6)
|
||||||
$warning-muted: rgba(170, 83, 56, 0.4),
|
$red-7: #733a40, // hsl(354, 32.9, 33.9)
|
||||||
$warning-subtle: rgba(170, 83, 56, 0.15),
|
$red-8: #603135, // hsl(355, 32.4, 28.4)
|
||||||
|
$red-9: #391d20 // hsl(354, 32.6, 16.9)
|
||||||
$danger-fg: #BF616A,
|
|
||||||
$danger-emphasis: #BF616A,
|
|
||||||
$danger-muted: rgba(178, 72, 82, 0.4),
|
|
||||||
$danger-subtle: rgba(178, 72, 82, 0.15)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
@forward "settings/config" with (
|
@use "settings/color-scale" as scale;
|
||||||
$color-delta-hover: 5%,
|
|
||||||
$color-delta-active: 10%
|
@forward "settings/color-vars" with (
|
||||||
|
|
||||||
|
$fg-default: scale.$gray-9,
|
||||||
|
$fg-muted: scale.$gray-6,
|
||||||
|
$fg-subtle: scale.$gray-5,
|
||||||
|
$fg-onEmphasis: scale.$white,
|
||||||
|
|
||||||
|
$canvas-default: scale.$white,
|
||||||
|
$canvas-overlay: scale.$white,
|
||||||
|
$canvas-inset: scale.$gray-0,
|
||||||
|
$canvas-subtle: scale.$gray-0,
|
||||||
|
|
||||||
|
$border-default: scale.$gray-3,
|
||||||
|
$border-muted: lighten(scale.$gray-2, 0.03),
|
||||||
|
$border-subtle: color.change(scale.$black, $alpha: 0.15),
|
||||||
|
|
||||||
|
$neutral-emphasisPlus: scale.$gray-8,
|
||||||
|
$neutral-emphasis: scale.$gray-5,
|
||||||
|
$neutral-muted: color.change(scale.$gray-3, $alpha: 0.2),
|
||||||
|
$neutral-subtle: color.change(scale.$gray-1, $alpha: 0.5),
|
||||||
|
|
||||||
|
$accent-fg: scale.$blue-5,
|
||||||
|
$accent-emphasis: scale.$blue-5,
|
||||||
|
$accent-muted: color.change(scale.$blue-3, $alpha: 0.4),
|
||||||
|
$accent-subtle: color.change(scale.$blue-3, $alpha: 0.15),
|
||||||
|
|
||||||
|
$success-fg: scale.$green-6,
|
||||||
|
$success-emphasis: scale.$green-5,
|
||||||
|
$success-muted: color.change(scale.$green-4, $alpha: 0.4),
|
||||||
|
$success-subtle: color.change(scale.$green-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$warning-fg: scale.$yellow-7,
|
||||||
|
$warning-emphasis: scale.$yellow-5,
|
||||||
|
$warning-muted: color.change(scale.$yellow-4, $alpha: 0.4),
|
||||||
|
$warning-subtle: color.change(scale.$yellow-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$danger-fg: scale.$red-5,
|
||||||
|
$danger-emphasis: scale.$red-5,
|
||||||
|
$danger-muted: color.change(scale.$red-4, $alpha: 0.4),
|
||||||
|
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15),
|
||||||
);
|
);
|
||||||
|
|
||||||
@use "general";
|
@use "general";
|
||||||
|
|||||||
@ -1,51 +1,114 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
@forward "settings/palette" with (
|
@use "sass:color";
|
||||||
|
|
||||||
$fg-default: #c9d1d9,
|
@forward "settings/color-scale" with (
|
||||||
$fg-muted: #8b949e,
|
|
||||||
$fg-subtle: #6e7681,
|
|
||||||
$fg-onEmphasis: #ffffff,
|
|
||||||
|
|
||||||
$canvas-default: #0d1117,
|
$black: #010409, // hsl(218, 80, 2 )
|
||||||
$canvas-overlay: #161b22,
|
$white: #ffffff, // hsl(0, 0 , 100)
|
||||||
$canvas-inset: #010409,
|
|
||||||
$canvas-subtle: #161b22,
|
|
||||||
|
|
||||||
$border-default: #30363d,
|
$gray-0: #f0f6fc, // hsl(210, 66.7, 96.5)
|
||||||
$border-muted: #21262d,
|
$gray-1: #c9d1d9, // hsl(210, 17.4, 82 )
|
||||||
$border-subtle: rgba(240, 246, 252, 0.1),
|
$gray-2: #b1bac4, // hsl(212, 13.9, 73.1)
|
||||||
|
$gray-3: #8b949e, // hsl(212, 8.9, 58.2)
|
||||||
|
$gray-4: #6e7681, // hsl(215, 7.9, 46.9)
|
||||||
|
$gray-5: #484f58, // hsl(214, 10, 31.4)
|
||||||
|
$gray-6: #30363d, // hsl(212, 11.9, 21.4)
|
||||||
|
$gray-7: #21262d, // hsl(215, 15.4, 15.3)
|
||||||
|
$gray-8: #161b22, // hsl(215, 21.4, 11 )
|
||||||
|
$gray-9: #0d1117, // hsl(216, 27.8, 7.1 )
|
||||||
|
|
||||||
$neutral-emphasisPlus: #6e7681,
|
$blue-0: #cae8ff, // hsl(206, 100, 89.6)
|
||||||
$neutral-emphasis: #6e7681,
|
$blue-1: #a5d6ff, // hsl(207, 100, 82.4)
|
||||||
$neutral-muted: rgba(110, 118, 129, 0.4),
|
$blue-2: #79c0ff, // hsl(208, 100, 73.7)
|
||||||
$neutral-subtle: rgba(110, 118, 129, 0.1),
|
$blue-3: #58a6ff, // hsl(212, 100, 67.3)
|
||||||
|
$blue-4: #388bfd, // hsl(215, 98, 60.6)
|
||||||
|
$blue-5: #1f6feb, // hsl(216, 83.6, 52.2)
|
||||||
|
$blue-6: #1158c7, // hsl(217, 84.3, 42.4)
|
||||||
|
$blue-7: #0d419d, // hsl(218, 84.7, 33.3)
|
||||||
|
$blue-8: #0c2d6b, // hsl(219, 79.8, 23.3)
|
||||||
|
$blue-9: #051d4d, // hsl(220, 87.8, 16.1)
|
||||||
|
|
||||||
$accent-fg: #58a6ff,
|
$green-0: #aff5b4, // hsl(124, 77.8, 82.4)
|
||||||
$accent-emphasis: #1f6feb,
|
$green-1: #7ee787, // hsl(125, 68.6, 70 )
|
||||||
$accent-muted: rgba(56, 139, 253, 0.4),
|
$green-2: #56d364, // hsl(127, 58.7, 58.2)
|
||||||
$accent-subtle: rgba(56, 139, 253, 0.15),
|
$green-3: #3fb950, // hsl(128, 49.2, 48.6)
|
||||||
|
$green-4: #2ea043, // hsl(131, 55.3, 40.4)
|
||||||
|
$green-5: #238636, // hsl(132, 58.6, 33.1)
|
||||||
|
$green-6: #196c2e, // hsl(135, 62.4, 26.1)
|
||||||
|
$green-7: #0f5323, // hsl(138, 69.4, 19.2)
|
||||||
|
$green-8: #033a16, // hsl(141, 90.2, 12 )
|
||||||
|
$green-9: #04260f, // hsl(139, 81, 8.2 )
|
||||||
|
|
||||||
$success-fg: #3fb950,
|
$yellow-0: #f8e3a1, // hsl(46, 86.1, 80.2)
|
||||||
$success-emphasis: #238636,
|
$yellow-1: #f2cc60, // hsl(44, 84.9, 66.3)
|
||||||
$success-muted: rgba(46, 160, 67, 0.4),
|
$yellow-2: #e3b341, // hsl(42, 74.3, 57.3)
|
||||||
$success-subtle: rgba(46, 160, 67, 0.15),
|
$yellow-3: #d29922, // hsl(41, 72.1, 47.8)
|
||||||
|
$yellow-4: #bb8009, // hsl(40, 90.8, 38.4)
|
||||||
|
$yellow-5: #9e6a03, // hsl(40, 96.3, 31.6)
|
||||||
|
$yellow-6: #845306, // hsl(37, 91.3, 27.1)
|
||||||
|
$yellow-7: #693e00, // hsl(35, 100, 20.6)
|
||||||
|
$yellow-8: #4b2900, // hsl(33, 100, 14.7)
|
||||||
|
$yellow-9: #341a00, // hsl(30, 100, 10.2)
|
||||||
|
|
||||||
$warning-fg: #d29922,
|
$red-0: #ffdcd7, // hsl(8, 100, 92.2)
|
||||||
$warning-emphasis: #9e6a03,
|
$red-1: #ffc1ba, // hsl(6, 100, 86.5)
|
||||||
$warning-muted: rgba(187, 128, 9, 0.4),
|
$red-2: #ffa198, // hsl(5, 100, 79.8)
|
||||||
$warning-subtle: rgba(187, 128, 9, 0.15),
|
$red-3: #ff7b72, // hsl(4, 100, 72.4)
|
||||||
|
$red-4: #f85149, // hsl(3, 92.6, 62.9)
|
||||||
|
$red-5: #da3633, // hsl(1, 69.3, 52.7)
|
||||||
|
$red-6: #b62324, // hsl(0, 67.7, 42.5)
|
||||||
|
$red-7: #8e1519, // hsl(358, 74.2, 32 )
|
||||||
|
$red-8: #67060c, // hsl(356, 89, 21.4)
|
||||||
|
$red-9: #490202 // hsl(0, 94.7, 14.7)
|
||||||
|
);
|
||||||
|
|
||||||
$danger-fg: #f85149,
|
@use "settings/color-scale" as scale;
|
||||||
$danger-emphasis: #da3633,
|
|
||||||
$danger-muted: rgba(248, 81, 73, 0.4),
|
@forward "settings/color-vars" with (
|
||||||
$danger-subtle: rgba(248, 81, 73, 0.15)
|
|
||||||
|
$fg-default: scale.$gray-1,
|
||||||
|
$fg-muted: scale.$gray-3,
|
||||||
|
$fg-subtle: scale.$gray-4,
|
||||||
|
$fg-onEmphasis: scale.$white,
|
||||||
|
|
||||||
|
$canvas-default: scale.$gray-9,
|
||||||
|
$canvas-overlay: scale.$gray-8,
|
||||||
|
$canvas-inset: scale.$black,
|
||||||
|
$canvas-subtle: scale.$gray-8,
|
||||||
|
|
||||||
|
$border-default: scale.$gray-6,
|
||||||
|
$border-muted: scale.$gray-7,
|
||||||
|
$border-subtle: color.change(scale.$gray-0, $alpha: 0.1),
|
||||||
|
|
||||||
|
$neutral-emphasisPlus: scale.$gray-4,
|
||||||
|
$neutral-emphasis: scale.$gray-4,
|
||||||
|
$neutral-muted: color.change(scale.$gray-4, $alpha: 0.4),
|
||||||
|
$neutral-subtle: color.change(scale.$gray-4, $alpha: 0.1),
|
||||||
|
|
||||||
|
$accent-fg: scale.$blue-3,
|
||||||
|
$accent-emphasis: scale.$blue-5,
|
||||||
|
$accent-muted: color.change(scale.$blue-4, $alpha: 0.4),
|
||||||
|
$accent-subtle: color.change(scale.$blue-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$success-fg: scale.$green-3,
|
||||||
|
$success-emphasis: scale.$green-5,
|
||||||
|
$success-muted: color.change(scale.$green-4, $alpha: 0.4),
|
||||||
|
$success-subtle: color.change(scale.$green-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$warning-fg: scale.$yellow-3,
|
||||||
|
$warning-emphasis: scale.$yellow-5,
|
||||||
|
$warning-muted: color.change(scale.$yellow-4, $alpha: 0.4),
|
||||||
|
$warning-subtle: color.change(scale.$yellow-4, $alpha: 0.15),
|
||||||
|
|
||||||
|
$danger-fg: scale.$red-4,
|
||||||
|
$danger-emphasis: scale.$red-5,
|
||||||
|
$danger-muted: color.change(scale.$red-4, $alpha: 0.4),
|
||||||
|
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15)
|
||||||
);
|
);
|
||||||
|
|
||||||
@forward "settings/config" with (
|
@forward "settings/config" with (
|
||||||
$darkMode: true,
|
$darkMode: true
|
||||||
$color-delta-hover: 15%,
|
|
||||||
$color-delta-active: 20%
|
|
||||||
);
|
);
|
||||||
|
|
||||||
@use "general";
|
@use "general";
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
// in a module that has been already loaded.
|
// in a module that has been already loaded.
|
||||||
//
|
//
|
||||||
// Color customization.
|
// Color customization.
|
||||||
// @forward "settings/palette" with (
|
// @forward "settings/color-vars" with (
|
||||||
// ...
|
// ...
|
||||||
// );
|
// );
|
||||||
//
|
//
|
||||||
|
|||||||
59
styles/src/settings/_color-scale.scss
Normal file
59
styles/src/settings/_color-scale.scss
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
$black: #1b1f24 !default; // hsl(213, 14.3, 12.4)
|
||||||
|
$white: #ffffff !default; // hsl(0, 0, 100 )
|
||||||
|
|
||||||
|
$gray-0: #f6f8fa !default; // hsl(210, 28.6, 97.3)
|
||||||
|
$gray-1: #eaeef2 !default; // hsl(210, 23.5, 93.3)
|
||||||
|
$gray-2: #d0d7de !default; // hsl(210, 17.5, 84.3)
|
||||||
|
$gray-3: #afb8c1 !default; // hsl(210, 12.7, 72.2)
|
||||||
|
$gray-4: #8c959f !default; // hsl(212, 9, 58.6)
|
||||||
|
$gray-5: #6e7781 !default; // hsl(212, 7.9, 46.9)
|
||||||
|
$gray-6: #57606a !default; // hsl(212, 9.8, 37.8)
|
||||||
|
$gray-7: #424a53 !default; // hsl(212, 11.4, 29.2)
|
||||||
|
$gray-8: #32383f !default; // hsl(212, 11.5, 22.2)
|
||||||
|
$gray-9: #24292f !default; // hsl(213, 13.3, 16.3)
|
||||||
|
|
||||||
|
$blue-0: #ddf4ff !default; // hsl(199, 100, 93.3)
|
||||||
|
$blue-1: #b6e3ff !default; // hsl(203, 100, 85.7)
|
||||||
|
$blue-2: #80ccff !default; // hsl(204, 100, 75.1)
|
||||||
|
$blue-3: #54aeff !default; // hsl(208, 100, 66.5)
|
||||||
|
$blue-4: #218bff !default; // hsl(211, 100, 56.5)
|
||||||
|
$blue-5: #0969da !default; // hsl(212, 92.1, 44.5)
|
||||||
|
$blue-6: #0550ae !default; // hsl(213, 94.4, 35.1)
|
||||||
|
$blue-7: #033d8b !default; // hsl(214, 95.8, 27.8)
|
||||||
|
$blue-8: #0a3069 !default; // hsl(216, 82.6, 22.5)
|
||||||
|
$blue-9: #002155 !default; // hsl(217, 100, 16.7)
|
||||||
|
|
||||||
|
$green-0: #dafbe1 !default; // hsl(133, 80.5, 92 )
|
||||||
|
$green-1: #aceebb !default; // hsl(134, 66, 80.4)
|
||||||
|
$green-2: #6fdd8b !default; // hsl(135, 61.8, 65.1)
|
||||||
|
$green-3: #4ac26b !default; // hsl(137, 49.6, 52.5)
|
||||||
|
$green-4: #2da44e !default; // hsl(137, 56.9, 41 )
|
||||||
|
$green-5: #1a7f37 !default; // hsl(137, 66, 30 )
|
||||||
|
$green-6: #116329 !default; // hsl(138, 70.7, 22.7)
|
||||||
|
$green-7: #044f1e !default; // hsl(141, 90.4, 16.3)
|
||||||
|
$green-8: #003d16 !default; // hsl(142, 100, 12 )
|
||||||
|
$green-9: #002d11 !default; // hsl(143, 100, 8.8 )
|
||||||
|
|
||||||
|
$yellow-0: #fff8c5 !default; // hsl(53, 100, 88.6)
|
||||||
|
$yellow-1: #fae17d !default; // hsl(48, 92.6, 73.5)
|
||||||
|
$yellow-2: #eac54f !default; // hsl(46, 78.7, 61.4)
|
||||||
|
$yellow-3: #d4a72c !default; // hsl(44, 66.1, 50.2)
|
||||||
|
$yellow-4: #bf8700 !default; // hsl(42, 100, 37.5)
|
||||||
|
$yellow-5: #9a6700 !default; // hsl(40, 100, 30.2)
|
||||||
|
$yellow-6: #7d4e00 !default; // hsl(37, 100, 24.5)
|
||||||
|
$yellow-7: #633c01 !default; // hsl(36, 98, 19.6)
|
||||||
|
$yellow-8: #4d2d00 !default; // hsl(35, 100, 15.1)
|
||||||
|
$yellow-9: #3b2300 !default; // hsl(36, 100, 11.6)
|
||||||
|
|
||||||
|
$red-0: #ffebe9 !default; // hsl(5, 100, 95.7)
|
||||||
|
$red-1: #ffcecb !default; // hsl(3, 100, 89.8)
|
||||||
|
$red-2: #ffaba8 !default; // hsl(2, 100, 82.9)
|
||||||
|
$red-3: #ff8182 !default; // hsl(0, 100, 75.3)
|
||||||
|
$red-4: #fa4549 !default; // hsl(359, 94.8, 62.5)
|
||||||
|
$red-5: #cf222e !default; // hsl(356, 71.8, 47.3)
|
||||||
|
$red-6: #a40e26 !default; // hsl(350, 84.3, 34.9)
|
||||||
|
$red-7: #82071e !default; // hsl(349, 89.8, 26.9)
|
||||||
|
$red-8: #660018 !default; // hsl(346, 100, 20 )
|
||||||
|
$red-9: #4c0014 !default; // hsl(344, 100, 14.9)
|
||||||
70
styles/src/settings/_color-vars.scss
Normal file
70
styles/src/settings/_color-vars.scss
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
@use "sass:color";
|
||||||
|
@use "color-scale" as scale;
|
||||||
|
|
||||||
|
$fg-default: scale.$gray-9 !default;
|
||||||
|
$fg-muted: scale.$gray-6 !default;
|
||||||
|
$fg-subtle: scale.$gray-5 !default;
|
||||||
|
$fg-onEmphasis: scale.$white !default;
|
||||||
|
|
||||||
|
$canvas-default: scale.$white !default;
|
||||||
|
$canvas-overlay: scale.$white !default;
|
||||||
|
$canvas-inset: scale.$gray-0 !default;
|
||||||
|
$canvas-subtle: scale.$gray-0 !default;
|
||||||
|
|
||||||
|
$border-default: scale.$gray-2 !default;
|
||||||
|
$border-muted: lighten(scale.$gray-2, 0.03) !default;
|
||||||
|
$border-subtle: color.change(scale.$black, $alpha: 0.15) !default;
|
||||||
|
|
||||||
|
$neutral-emphasisPlus: scale.$gray-9 !default;
|
||||||
|
$neutral-emphasis: scale.$gray-5 !default;
|
||||||
|
$neutral-muted: color.change(scale.$gray-3, $alpha: 0.2) !default;
|
||||||
|
$neutral-subtle: color.change(scale.$gray-1, $alpha: 0.5) !default;
|
||||||
|
|
||||||
|
$accent-fg: scale.$blue-5 !default;
|
||||||
|
$accent-emphasis: scale.$blue-5 !default;
|
||||||
|
$accent-muted: color.change(scale.$blue-3, $alpha: 0.4) !default;
|
||||||
|
$accent-subtle: scale.$blue-0 !default;
|
||||||
|
|
||||||
|
$success-fg: scale.$green-5 !default;
|
||||||
|
$success-emphasis: scale.$green-4 !default;
|
||||||
|
$success-muted: color.change(scale.$green-3, $alpha: 0.4) !default;
|
||||||
|
$success-subtle: scale.$green-0 !default;
|
||||||
|
|
||||||
|
$warning-fg: scale.$yellow-5 !default;
|
||||||
|
$warning-emphasis: scale.$yellow-4 !default;
|
||||||
|
$warning-muted: color.change(scale.$yellow-3, $alpha: 0.4) !default;
|
||||||
|
$warning-subtle: scale.$yellow-0 !default;
|
||||||
|
|
||||||
|
$danger-fg: scale.$red-5 !default;
|
||||||
|
$danger-emphasis: scale.$red-5 !default;
|
||||||
|
$danger-muted: color.change(scale.$red-3, $alpha: 0.4) !default;
|
||||||
|
$danger-subtle: scale.$red-0 !default;
|
||||||
|
|
||||||
|
$chart-1: #f3622d !default;
|
||||||
|
$chart-2: #fba71b !default;
|
||||||
|
$chart-3: #57b757 !default;
|
||||||
|
$chart-4: #41a9c9 !default;
|
||||||
|
$chart-5: #4258c9 !default;
|
||||||
|
$chart-6: #9a42c8 !default;
|
||||||
|
$chart-7: #c84164 !default;
|
||||||
|
$chart-8: #888888 !default;
|
||||||
|
|
||||||
|
$chart-1-alpha70: color.change($chart-1, $alpha: 0.7) !default;
|
||||||
|
$chart-2-alpha70: color.change($chart-2, $alpha: 0.7) !default;
|
||||||
|
$chart-3-alpha70: color.change($chart-3, $alpha: 0.7) !default;
|
||||||
|
$chart-4-alpha70: color.change($chart-4, $alpha: 0.7) !default;
|
||||||
|
$chart-5-alpha70: color.change($chart-5, $alpha: 0.7) !default;
|
||||||
|
$chart-6-alpha70: color.change($chart-6, $alpha: 0.7) !default;
|
||||||
|
$chart-7-alpha70: color.change($chart-7, $alpha: 0.7) !default;
|
||||||
|
$chart-8-alpha70: color.change($chart-8, $alpha: 0.7) !default;
|
||||||
|
|
||||||
|
$chart-1-alpha20: color.change($chart-1, $alpha: 0.2) !default;
|
||||||
|
$chart-2-alpha20: color.change($chart-2, $alpha: 0.2) !default;
|
||||||
|
$chart-3-alpha20: color.change($chart-3, $alpha: 0.2) !default;
|
||||||
|
$chart-4-alpha20: color.change($chart-4, $alpha: 0.2) !default;
|
||||||
|
$chart-5-alpha20: color.change($chart-5, $alpha: 0.2) !default;
|
||||||
|
$chart-6-alpha20: color.change($chart-6, $alpha: 0.2) !default;
|
||||||
|
$chart-7-alpha20: color.change($chart-7, $alpha: 0.2) !default;
|
||||||
|
$chart-8-alpha20: color.change($chart-8, $alpha: 0.2) !default;
|
||||||
@ -1,8 +1,6 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
$darkMode: false !default;
|
$darkMode: false !default;
|
||||||
$color-delta-hover: 5% !default;
|
|
||||||
$color-delta-active: 10% !default;
|
|
||||||
|
|
||||||
$font-default: 14px !default; // ~= 11pt
|
$font-default: 14px !default; // ~= 11pt
|
||||||
$font-family-serif: serif !default;
|
$font-family-serif: serif !default;
|
||||||
|
|||||||
@ -1,72 +0,0 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
|
||||||
|
|
||||||
@use "sass:color";
|
|
||||||
|
|
||||||
// Muted color is used to emulate semi-transparent background
|
|
||||||
// (see data.scss, RGBA color).
|
|
||||||
|
|
||||||
$fg-default: #24292f !default;
|
|
||||||
$fg-muted: #57606a !default;
|
|
||||||
$fg-subtle: #6e7781 !default;
|
|
||||||
$fg-onEmphasis: #ffffff !default;
|
|
||||||
|
|
||||||
$canvas-default: #ffffff !default;
|
|
||||||
$canvas-overlay: #ffffff !default;
|
|
||||||
$canvas-inset: #f6f8fa !default;
|
|
||||||
$canvas-subtle: #f6f8fa !default;
|
|
||||||
|
|
||||||
$border-default: #d0d7de !default;
|
|
||||||
$border-muted: rgba(215, 221, 227, 1) !default;
|
|
||||||
$border-subtle: rgba(27, 31, 36, 0.15) !default;
|
|
||||||
|
|
||||||
$neutral-emphasisPlus: #24292f !default;
|
|
||||||
$neutral-emphasis: #6e7781 !default;
|
|
||||||
$neutral-muted: rgba(175, 184, 193, 0.2) !default;
|
|
||||||
$neutral-subtle: rgba(234, 238, 242, 0.5) !default;
|
|
||||||
|
|
||||||
$accent-fg: #0969da !default;
|
|
||||||
$accent-emphasis: #0969da !default;
|
|
||||||
$accent-muted: rgba(84, 174, 255, 0.4) !default;
|
|
||||||
$accent-subtle: #ddf4ff !default;
|
|
||||||
|
|
||||||
$success-fg: #1a7f37 !default;
|
|
||||||
$success-emphasis: #2da44e !default;
|
|
||||||
$success-muted: rgba(74, 194, 107, 0.4) !default;
|
|
||||||
$success-subtle: #dafbe1 !default;
|
|
||||||
|
|
||||||
$warning-fg: #9a6700 !default;
|
|
||||||
$warning-emphasis: #bf8700 !default;
|
|
||||||
$warning-muted: rgba(212, 167, 44, 0.4) !default;
|
|
||||||
$warning-subtle: #fff8c5 !default;
|
|
||||||
|
|
||||||
$danger-fg: #cf222e !default;
|
|
||||||
$danger-emphasis: #cf222e !default;
|
|
||||||
$danger-muted: rgba(255, 129, 130, 0.4) !default;
|
|
||||||
$danger-subtle: #FFEBE9 !default;
|
|
||||||
|
|
||||||
$chart-1: #f3622d !default;
|
|
||||||
$chart-2: #fba71b !default;
|
|
||||||
$chart-3: #57b757 !default;
|
|
||||||
$chart-4: #41a9c9 !default;
|
|
||||||
$chart-5: #4258c9 !default;
|
|
||||||
$chart-6: #9a42c8 !default;
|
|
||||||
$chart-7: #c84164 !default;
|
|
||||||
$chart-8: #888888 !default;
|
|
||||||
|
|
||||||
$chart-1-alpha70: color.change($chart-1, $alpha: 0.7) !default;
|
|
||||||
$chart-2-alpha70: color.change($chart-2, $alpha: 0.7) !default;
|
|
||||||
$chart-3-alpha70: color.change($chart-3, $alpha: 0.7) !default;
|
|
||||||
$chart-4-alpha70: color.change($chart-4, $alpha: 0.7) !default;
|
|
||||||
$chart-5-alpha70: color.change($chart-5, $alpha: 0.7) !default;
|
|
||||||
$chart-6-alpha70: color.change($chart-6, $alpha: 0.7) !default;
|
|
||||||
$chart-7-alpha70: color.change($chart-7, $alpha: 0.7) !default;
|
|
||||||
$chart-8-alpha70: color.change($chart-8, $alpha: 0.7) !default;
|
|
||||||
|
|
||||||
$chart-1-alpha20: color.change($chart-1, $alpha: 0.2) !default;
|
|
||||||
$chart-2-alpha20: color.change($chart-2, $alpha: 0.2) !default;
|
|
||||||
$chart-3-alpha20: color.change($chart-3, $alpha: 0.2) !default;
|
|
||||||
$chart-4-alpha20: color.change($chart-4, $alpha: 0.2) !default;
|
|
||||||
$chart-5-alpha20: color.change($chart-5, $alpha: 0.2) !default;
|
|
||||||
$chart-6-alpha20: color.change($chart-6, $alpha: 0.2) !default;
|
|
||||||
$chart-7-alpha20: color.change($chart-7, $alpha: 0.2) !default;
|
|
||||||
$chart-8-alpha20: color.change($chart-8, $alpha: 0.2) !default;
|
|
||||||
@ -3,7 +3,8 @@
|
|||||||
@use "sass:math";
|
@use "sass:math";
|
||||||
|
|
||||||
// Darkens or lightens specified color depending on the color scheme.
|
// Darkens or lightens specified color depending on the color scheme.
|
||||||
@function saturate($color, $darkMode, $amount) {
|
// Avoid using this function, stick to color scale tints and shades instead.
|
||||||
|
@function changeBrightness($color, $darkMode, $amount) {
|
||||||
@if $darkMode == true { @return darken($color, $darkMode, $amount); }
|
@if $darkMode == true { @return darken($color, $darkMode, $amount); }
|
||||||
@return darken($color, $darkMode, $amount);
|
@return darken($color, $darkMode, $amount);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user