tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename color scale variables

Browse Source 
The main problem of the old approach is that variables which contain real color
name (blue, green, red) were exposed as looked-up colors. This is because
GitHub Primer only specifies four functional variables for each color
(foreground, emphasis, muted and subtle) and only three of them can be used as
background color, which is clearly not enough to create hover, pressed or other
color effects. So, we can either use dynamic color modification functions,
which can lead to less predictable results, or use colors from the predefined
color palette, or create a bunch of the ugly named color variables for every
combination (`-color-accent-muted-hover`, `-color-accent-subtle-hover` and so
on) for general purposes.

Still, it worked fine until changing accent color feature wasn't implemented.
To fully change accent or any other color, one should change not only the
functional variables, but also the corresponding color scale, which is
responsible for background effects. As an outcome, if we change the accent
color to purple, we end-up with `-color-accent-emphasis` which is purple and
`-color-blue-5`which is also purple. That's just confusing.

This commit resolves this by renaming all color scale stuff to functional
variables. So, `-color-blue-*` becomes `-color-accent-*` and so on, and this
long explanation supposed to serve as a reminder that nothing is perfect and
this is just another trade-off example.
This commit is contained in:
mkpaz 2022-09-03 20:24:09 +04:00
parent 7c979a9025
commit c102d25196
16 changed files with 447 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
sampler/src/main/java/atlantafx/sampler/page/general/ColorScale.java
View File

@ -22,12 +22,12 @@ class ColorScale extends VBox {
private final ReadOnlyObjectWrapper<Color> bgBaseColor = new ReadOnlyObjectWrapper<>(Color.WHITE); private final ReadOnlyObjectWrapper<Color> bgBaseColor = new ReadOnlyObjectWrapper<>(Color.WHITE);
private final List<ColorScaleBlock> blocks = Arrays.asList( private final List<ColorScaleBlock> blocks = Arrays.asList(
ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-gray-", 10), ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-base-", 10),
ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-blue-", 10), ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-accent-", 10),
ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-green-", 10), ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-success-", 10),
ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-yellow-", 10), ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-warning-", 10),
ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-red-", 10), ColorScaleBlock.forColorPrefix(bgBaseColor, "-color-danger-", 10),
ColorScaleBlock.forColorName(bgBaseColor, "-color-black", "-color-white") ColorScaleBlock.forColorName(bgBaseColor, "-color-dark", "-color-light")
); );
public ColorScale() { public ColorScale() {

80
sampler/src/main/java/atlantafx/sampler/theme/ColorMap.java
View File

@ -52,16 +52,16 @@ public class ColorMap {
public static ColorMap primerPurple() { public static ColorMap primerPurple() {
var map = new ColorMap(Color.web("#8250df")); var map = new ColorMap(Color.web("#8250df"));
map.setColor("-color-blue-0", Color.web("#fbefff")); map.setColor("-color-accent-0", Color.web("#fbefff"));
map.setColor("-color-blue-1", Color.web("#ecd8ff")); map.setColor("-color-accent-1", Color.web("#ecd8ff"));
map.setColor("-color-blue-2", Color.web("#d8b9ff")); map.setColor("-color-accent-2", Color.web("#d8b9ff"));
map.setColor("-color-blue-3", Color.web("#c297ff")); map.setColor("-color-accent-3", Color.web("#c297ff"));
map.setColor("-color-blue-4", Color.web("#a475f9")); map.setColor("-color-accent-4", Color.web("#a475f9"));
map.setColor("-color-blue-5", Color.web("#8250df")); map.setColor("-color-accent-5", Color.web("#8250df"));
map.setColor("-color-blue-6", Color.web("#6639ba")); map.setColor("-color-accent-6", Color.web("#6639ba"));
map.setColor("-color-blue-7", Color.web("#512a97")); map.setColor("-color-accent-7", Color.web("#512a97"));
map.setColor("-color-blue-8", Color.web("#3e1f79")); map.setColor("-color-accent-8", Color.web("#3e1f79"));
map.setColor("-color-blue-9", Color.web("#2e1461")); map.setColor("-color-accent-9", Color.web("#2e1461"));
map.setColor("-color-accent-fg", Color.web("#8250df")); map.setColor("-color-accent-fg", Color.web("#8250df"));
map.setColor("-color-accent-emphasis", Color.web("#8250df")); map.setColor("-color-accent-emphasis", Color.web("#8250df"));
map.setColor(MUTED_COLOR_NAME, Color.web("#d8b9ff")); map.setColor(MUTED_COLOR_NAME, Color.web("#d8b9ff"));
@ -76,16 +76,16 @@ public class ColorMap {
public static ColorMap primerPink() { public static ColorMap primerPink() {
var map = new ColorMap(Color.web("#bf3989")); var map = new ColorMap(Color.web("#bf3989"));
map.setColor("-color-blue-0", Color.web("#ffeff7")); map.setColor("-color-accent-0", Color.web("#ffeff7"));
map.setColor("-color-blue-1", Color.web("#ffd3eb")); map.setColor("-color-accent-1", Color.web("#ffd3eb"));
map.setColor("-color-blue-2", Color.web("#ffadda")); map.setColor("-color-accent-2", Color.web("#ffadda"));
map.setColor("-color-blue-3", Color.web("#ff80c8")); map.setColor("-color-accent-3", Color.web("#ff80c8"));
map.setColor("-color-blue-4", Color.web("#e85aad")); map.setColor("-color-accent-4", Color.web("#e85aad"));
map.setColor("-color-blue-5", Color.web("#bf3989")); map.setColor("-color-accent-5", Color.web("#bf3989"));
map.setColor("-color-blue-6", Color.web("#99286e")); map.setColor("-color-accent-6", Color.web("#99286e"));
map.setColor("-color-blue-7", Color.web("#772057")); map.setColor("-color-accent-7", Color.web("#772057"));
map.setColor("-color-blue-8", Color.web("#611347")); map.setColor("-color-accent-8", Color.web("#611347"));
map.setColor("-color-blue-9", Color.web("#4d0336")); map.setColor("-color-accent-9", Color.web("#4d0336"));
map.setColor("-color-accent-fg", Color.web("#bf3989")); map.setColor("-color-accent-fg", Color.web("#bf3989"));
map.setColor("-color-accent-emphasis", Color.web("#bf3989")); map.setColor("-color-accent-emphasis", Color.web("#bf3989"));
map.setColor(MUTED_COLOR_NAME, Color.web("#ffadda")); map.setColor(MUTED_COLOR_NAME, Color.web("#ffadda"));
@ -100,16 +100,16 @@ public class ColorMap {
public static ColorMap primerCoral() { public static ColorMap primerCoral() {
var map = new ColorMap(Color.web("#c4432b")); var map = new ColorMap(Color.web("#c4432b"));
map.setColor("-color-blue-0", Color.web("#fff0eb")); map.setColor("-color-accent-0", Color.web("#fff0eb"));
map.setColor("-color-blue-1", Color.web("#ffd6cc")); map.setColor("-color-accent-1", Color.web("#ffd6cc"));
map.setColor("-color-blue-2", Color.web("#ffb4a1")); map.setColor("-color-accent-2", Color.web("#ffb4a1"));
map.setColor("-color-blue-3", Color.web("#fd8c73")); map.setColor("-color-accent-3", Color.web("#fd8c73"));
map.setColor("-color-blue-4", Color.web("#ec6547")); map.setColor("-color-accent-4", Color.web("#ec6547"));
map.setColor("-color-blue-5", Color.web("#c4432b")); map.setColor("-color-accent-5", Color.web("#c4432b"));
map.setColor("-color-blue-6", Color.web("#9e2f1c")); map.setColor("-color-accent-6", Color.web("#9e2f1c"));
map.setColor("-color-blue-7", Color.web("#801f0f")); map.setColor("-color-accent-7", Color.web("#801f0f"));
map.setColor("-color-blue-8", Color.web("#691105")); map.setColor("-color-accent-8", Color.web("#691105"));
map.setColor("-color-blue-9", Color.web("#510901")); map.setColor("-color-accent-9", Color.web("#510901"));
map.setColor("-color-accent-fg", Color.web("#c4432b")); map.setColor("-color-accent-fg", Color.web("#c4432b"));
map.setColor("-color-accent-emphasis", Color.web("#c4432b")); map.setColor("-color-accent-emphasis", Color.web("#c4432b"));
map.setColor(MUTED_COLOR_NAME, Color.web("#ffb4a1")); map.setColor(MUTED_COLOR_NAME, Color.web("#ffb4a1"));
@ -126,16 +126,16 @@ public class ColorMap {
static ColorMap empty() { static ColorMap empty() {
var map = new ColorMap(Color.web("#bf3989")); var map = new ColorMap(Color.web("#bf3989"));
map.setColor("-color-blue-0", null); map.setColor("-color-accent-0", null);
map.setColor("-color-blue-1", null); map.setColor("-color-accent-1", null);
map.setColor("-color-blue-2", null); map.setColor("-color-accent-2", null);
map.setColor("-color-blue-3", null); map.setColor("-color-accent-3", null);
map.setColor("-color-blue-4", null); map.setColor("-color-accent-4", null);
map.setColor("-color-blue-5", null); map.setColor("-color-accent-5", null);
map.setColor("-color-blue-6", null); map.setColor("-color-accent-6", null);
map.setColor("-color-blue-7", null); map.setColor("-color-accent-7", null);
map.setColor("-color-blue-8", null); map.setColor("-color-accent-8", null);
map.setColor("-color-blue-9", null); map.setColor("-color-accent-9", null);
map.setColor("-color-accent-fg", null); map.setColor("-color-accent-fg", null);
map.setColor("-color-accent-emphasis", null); map.setColor("-color-accent-emphasis", null);
map.setColor(MUTED_COLOR_NAME, null); map.setColor(MUTED_COLOR_NAME, null);

16
styles/src/components/_button.scss
View File

@ -9,7 +9,7 @@ $color-bg: -color-bg-subtle !default;
$color-fg: -color-fg-default !default; $color-fg: -color-fg-default !default;
$color-border: -color-border-default !default; $color-border: -color-border-default !default;
$color-bg-hover: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default; $color-bg-hover: if(cfg.$darkMode, -color-base-6, -color-base-1) !default;
$color-fg-hover: -color-button-fg !default; $color-fg-hover: -color-button-fg !default;
$color-border-hover: -color-button-border !default; $color-border-hover: -color-button-border !default;
@ -17,7 +17,7 @@ $color-bg-focused: -color-button-bg !default;
$color-fg-focused: -color-button-fg !default; $color-fg-focused: -color-button-fg !default;
$color-border-focused: -color-accent-emphasis !default; $color-border-focused: -color-accent-emphasis !default;
$color-bg-pressed: if(cfg.$darkMode, -color-gray-7, -color-gray-2) !default; $color-bg-pressed: if(cfg.$darkMode, -color-base-7, -color-base-2) !default;
$color-fg-pressed: -color-button-fg !default; $color-fg-pressed: -color-button-fg !default;
$color-border-pressed: transparent !default; $color-border-pressed: transparent !default;
@ -26,7 +26,7 @@ $color-accent-bg: -color-accent-emphasis !default;
$color-accent-fg: -color-fg-emphasis !default; $color-accent-fg: -color-fg-emphasis !default;
$color-accent-border: -color-accent-emphasis !default; $color-accent-border: -color-accent-emphasis !default;
$color-accent-bg-hover: -color-blue-6 !default; $color-accent-bg-hover: -color-accent-6 !default;
$color-accent-fg-hover: -color-fg-emphasis !default; $color-accent-fg-hover: -color-fg-emphasis !default;
$color-accent-border-hover: -color-accent-emphasis !default; $color-accent-border-hover: -color-accent-emphasis !default;
@ -34,7 +34,7 @@ $color-accent-bg-focused: -color-accent-emphasis !default;
$color-accent-fg-focused: -color-fg-emphasis !default; $color-accent-fg-focused: -color-fg-emphasis !default;
$color-accent-border-focused: -color-accent-emphasis !default; $color-accent-border-focused: -color-accent-emphasis !default;
$color-accent-bg-pressed: -color-blue-6 !default; $color-accent-bg-pressed: -color-accent-6 !default;
$color-accent-fg-pressed: -color-fg-emphasis !default; $color-accent-fg-pressed: -color-fg-emphasis !default;
$color-accent-border-pressed: transparent !default; $color-accent-border-pressed: transparent !default;
@ -43,7 +43,7 @@ $color-success-bg: -color-success-emphasis !default;
$color-success-fg: -color-fg-emphasis !default; $color-success-fg: -color-fg-emphasis !default;
$color-success-border: -color-success-emphasis !default; $color-success-border: -color-success-emphasis !default;
$color-success-bg-hover: -color-green-5 !default; $color-success-bg-hover: if(cfg.$darkMode, -color-success-6, -color-success-5) !default;
$color-success-fg-hover: -color-fg-emphasis !default; $color-success-fg-hover: -color-fg-emphasis !default;
$color-success-border-hover: -color-success-emphasis !default; $color-success-border-hover: -color-success-emphasis !default;
@ -51,7 +51,7 @@ $color-success-bg-focused: -color-success-emphasis !default;
$color-success-fg-focused: -color-fg-emphasis !default; $color-success-fg-focused: -color-fg-emphasis !default;
$color-success-border-focused: -color-success-emphasis !default; $color-success-border-focused: -color-success-emphasis !default;
$color-success-bg-pressed: -color-green-5 !default; $color-success-bg-pressed: if(cfg.$darkMode, -color-success-6, -color-success-5) !default;
$color-success-fg-pressed: -color-fg-emphasis !default; $color-success-fg-pressed: -color-fg-emphasis !default;
$color-success-border-pressed: transparent !default; $color-success-border-pressed: transparent !default;
@ -60,7 +60,7 @@ $color-danger-bg: -color-danger-emphasis !default;
$color-danger-fg: -color-fg-emphasis !default; $color-danger-fg: -color-fg-emphasis !default;
$color-danger-border: -color-danger-emphasis !default; $color-danger-border: -color-danger-emphasis !default;
$color-danger-bg-hover: -color-red-6 !default; $color-danger-bg-hover: -color-danger-6 !default;
$color-danger-fg-hover: -color-fg-emphasis !default; $color-danger-fg-hover: -color-fg-emphasis !default;
$color-danger-border-hover: -color-danger-emphasis !default; $color-danger-border-hover: -color-danger-emphasis !default;
@ -68,7 +68,7 @@ $color-danger-bg-focused: -color-danger-emphasis !default;
$color-danger-fg-focused: -color-fg-emphasis !default; $color-danger-fg-focused: -color-fg-emphasis !default;
$color-danger-border-focused: -color-danger-emphasis !default; $color-danger-border-focused: -color-danger-emphasis !default;
$color-danger-bg-pressed: -color-red-6 !default; $color-danger-bg-pressed: -color-danger-6 !default;
$color-danger-fg-pressed: -color-fg-emphasis !default; $color-danger-fg-pressed: -color-fg-emphasis !default;
$color-danger-border-pressed: transparent !default; $color-danger-border-pressed: transparent !default;

4
styles/src/components/_combo-box.scss
View File

@ -6,8 +6,8 @@
@use "../settings/utils"; @use "../settings/utils";
$color-cell-bg: -color-bg-default !default; $color-cell-bg: -color-bg-default !default;
$color-cell-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default; $color-cell-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$color-cell-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default; $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
@mixin _arrow() { @mixin _arrow() {
@include icons.get("arrow-drop-down", false); @include icons.get("arrow-drop-down", false);

2
styles/src/components/_data.scss
View File

@ -5,7 +5,7 @@
$color-cell-bg: -color-bg-default !default; $color-cell-bg: -color-bg-default !default;
$color-cell-fg: -color-fg-default !default; $color-cell-fg: -color-fg-default !default;
$color-cell-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default; $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-1) !default;
$color-cell-fg-selected: -color-fg-default !default; $color-cell-fg-selected: -color-fg-default !default;
$color-cell-bg-odd: -color-bg-subtle !default; $color-cell-bg-odd: -color-bg-subtle !default;
$color-cell-border: -color-border-default !default; $color-cell-border: -color-border-default !default;

2
styles/src/components/_html-editor.scss
View File

@ -5,7 +5,7 @@
@use "sass:math"; @use "sass:math";
$color-picker-rect-size: 8px !default; $color-picker-rect-size: 8px !default;
$color-button-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default; $color-button-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-1) !default;
.html-editor { .html-editor {
-fx-background-color: -color-border-default, -color-bg-default; -fx-background-color: -color-border-default, -color-bg-default;

4
styles/src/components/_menu.scss
View File

@ -10,9 +10,9 @@
/////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////
$color-menubar-bg: -color-bg-subtle !default; $color-menubar-bg: -color-bg-subtle !default;
$color-menubar-bg-hover: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default; $color-menubar-bg-hover: if(cfg.$darkMode, -color-base-6, -color-base-1) !default;
$color-menuitem-bg: -color-bg-default !default; $color-menuitem-bg: -color-bg-default !default;
$color-menuitem-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default; $color-menuitem-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$separator-padding: map-get(cfg.$separators, "small") !default; $separator-padding: map-get(cfg.$separators, "small") !default;

2
styles/src/components/_spinner.scss
View File

@ -6,7 +6,7 @@
$color-button-bg: -color-bg-subtle !default; $color-button-bg: -color-bg-subtle !default;
$color-button-fg: -color-fg-default !default; $color-button-fg: -color-fg-default !default;
$color-button-hover: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default; $color-button-hover: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$icon-padding-x: 0.25em !default; $icon-padding-x: 0.25em !default;
.spinner { .spinner {

2
styles/src/components/_tab-pane.scss
View File

@ -22,7 +22,7 @@ $color-lr-bg-hover: -color-bg-subtle !default;
$color-lr-fg-hover: -color-fg-default !default; $color-lr-fg-hover: -color-fg-default !default;
$color-lr-border-hover: -color-border-default !default; $color-lr-border-hover: -color-border-default !default;
$color-lr-bg-selected: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default; $color-lr-bg-selected: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$color-lr-fg-selected: -color-fg-default !default; $color-lr-fg-selected: -color-fg-default !default;
$color-lr-border-selected: -color-border-default !default; $color-lr-border-selected: -color-border-default !default;

2
styles/src/components/_toolbar.scss
View File

@ -5,7 +5,7 @@
@use "../settings/utils"; @use "../settings/utils";
$color-bg: -color-bg-subtle !default; $color-bg: -color-bg-subtle !default;
$color-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default; $color-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$padding-x: 0.3em !default; $padding-x: 0.3em !default;
$padding-y: 4px !default; $padding-y: 4px !default;

104
styles/src/general/_root.scss
View File

@ -8,63 +8,63 @@
// Color scale // Color scale
-color-black: scale.$black; -color-dark: scale.$dark;
-color-white: scale.$white; -color-light: scale.$light;
-color-gray-0: scale.$gray-0; -color-base-0: scale.$base-0;
-color-gray-1: scale.$gray-1; -color-base-1: scale.$base-1;
-color-gray-2: scale.$gray-2; -color-base-2: scale.$base-2;
-color-gray-3: scale.$gray-3; -color-base-3: scale.$base-3;
-color-gray-4: scale.$gray-4; -color-base-4: scale.$base-4;
-color-gray-5: scale.$gray-5; -color-base-5: scale.$base-5;
-color-gray-6: scale.$gray-6; -color-base-6: scale.$base-6;
-color-gray-7: scale.$gray-7; -color-base-7: scale.$base-7;
-color-gray-8: scale.$gray-8; -color-base-8: scale.$base-8;
-color-gray-9: scale.$gray-9; -color-base-9: scale.$base-9;
-color-blue-0: scale.$blue-0; -color-accent-0: scale.$accent-0;
-color-blue-1: scale.$blue-1; -color-accent-1: scale.$accent-1;
-color-blue-2: scale.$blue-2; -color-accent-2: scale.$accent-2;
-color-blue-3: scale.$blue-3; -color-accent-3: scale.$accent-3;
-color-blue-4: scale.$blue-4; -color-accent-4: scale.$accent-4;
-color-blue-5: scale.$blue-5; -color-accent-5: scale.$accent-5;
-color-blue-6: scale.$blue-6; -color-accent-6: scale.$accent-6;
-color-blue-7: scale.$blue-7; -color-accent-7: scale.$accent-7;
-color-blue-8: scale.$blue-8; -color-accent-8: scale.$accent-8;
-color-blue-9: scale.$blue-9; -color-accent-9: scale.$accent-9;
-color-green-0: scale.$green-0; -color-success-0: scale.$success-0;
-color-green-1: scale.$green-1; -color-success-1: scale.$success-1;
-color-green-2: scale.$green-2; -color-success-2: scale.$success-2;
-color-green-3: scale.$green-3; -color-success-3: scale.$success-3;
-color-green-4: scale.$green-4; -color-success-4: scale.$success-4;
-color-green-5: scale.$green-5; -color-success-5: scale.$success-5;
-color-green-6: scale.$green-6; -color-success-6: scale.$success-6;
-color-green-7: scale.$green-7; -color-success-7: scale.$success-7;
-color-green-8: scale.$green-8; -color-success-8: scale.$success-8;
-color-green-9: scale.$green-9; -color-success-9: scale.$success-9;
-color-yellow-0: scale.$yellow-0; -color-warning-0: scale.$warning-0;
-color-yellow-1: scale.$yellow-1; -color-warning-1: scale.$warning-1;
-color-yellow-2: scale.$yellow-2; -color-warning-2: scale.$warning-2;
-color-yellow-3: scale.$yellow-3; -color-warning-3: scale.$warning-3;
-color-yellow-4: scale.$yellow-4; -color-warning-4: scale.$warning-4;
-color-yellow-5: scale.$yellow-5; -color-warning-5: scale.$warning-5;
-color-yellow-6: scale.$yellow-6; -color-warning-6: scale.$warning-6;
-color-yellow-7: scale.$yellow-7; -color-warning-7: scale.$warning-7;
-color-yellow-8: scale.$yellow-8; -color-warning-8: scale.$warning-8;
-color-yellow-9: scale.$yellow-9; -color-warning-9: scale.$warning-9;
-color-red-0: scale.$red-0; -color-danger-0: scale.$danger-0;
-color-red-1: scale.$red-1; -color-danger-1: scale.$danger-1;
-color-red-2: scale.$red-2; -color-danger-2: scale.$danger-2;
-color-red-3: scale.$red-3; -color-danger-3: scale.$danger-3;
-color-red-4: scale.$red-4; -color-danger-4: scale.$danger-4;
-color-red-5: scale.$red-5; -color-danger-5: scale.$danger-5;
-color-red-6: scale.$red-6; -color-danger-6: scale.$danger-6;
-color-red-7: scale.$red-7; -color-danger-7: scale.$danger-7;
-color-red-8: scale.$red-8; -color-danger-8: scale.$danger-8;
-color-red-9: scale.$red-9; -color-danger-9: scale.$danger-9;
// Functional variables // Functional variables

166
styles/src/nord-dark.scss
View File

@ -22,107 +22,107 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-scale" with ( @forward "settings/color-scale" with (
$black: #20242d, // hsl(222, 17, 15) $dark: #20242d, // hsl(222, 17, 15)
$white: #f4f5f8, // hsl(225, 22, 96) $light: #f4f5f8, // hsl(225, 22, 96)
$gray-0: $nord6, // hsl(218, 26.8, 92 ) $base-0: $nord6, // hsl(218, 26.8, 92 )
$gray-1: $nord5, // hsl(219, 27.9, 88 ) $base-1: $nord5, // hsl(219, 27.9, 88 )
$gray-2: $nord4, // hsl(219, 9.5, 71 ) $base-2: $nord4, // hsl(219, 9.5, 71 )
$gray-3: #949AA6, // hsl(220, 9.2, 61.6) $base-3: #949AA6, // hsl(220, 9.2, 61.6)
$gray-4: #8B919E, // hsl(221, 8.9, 58.2) $base-4: #8B919E, // hsl(221, 8.9, 58.2)
$gray-5: #707888, // hsl(220, 9.7, 48.6) $base-5: #707888, // hsl(220, 9.7, 48.6)
$gray-6: $nord3, // hsl(220, 12.6, 42.2) $base-6: $nord3, // hsl(220, 12.6, 42.2)
$gray-7: $nord2, // hsl(220, 16.5, 35.7) $base-7: $nord2, // hsl(220, 16.5, 35.7)
$gray-8: $nord1, // hsl(220, 16.8, 31.6) $base-8: $nord1, // hsl(220, 16.8, 31.6)
$gray-9: $nord0, // hsl(222, 16.3, 27.6) $base-9: $nord0, // hsl(222, 16.3, 27.6)
$blue-0: #e3eaf1, // hsl(210, 33.3, 91.8) $accent-0: #e3eaf1, // hsl(210, 33.3, 91.8)
$blue-1: #d5e0ea, // hsl(209, 33.3, 87.6) $accent-1: #d5e0ea, // hsl(209, 33.3, 87.6)
$blue-2: #b9cbdd, // hsl(210, 34.6, 79.6) $accent-2: #b9cbdd, // hsl(210, 34.6, 79.6)
$blue-3: #9db6cf, // hsl(210, 34.2, 71.4) $accent-3: #9db6cf, // hsl(210, 34.2, 71.4)
$blue-4: $nord9, // hsl(210, 34, 63.1) $accent-4: $nord9, // hsl(210, 34, 63.1)
$blue-5: $nord10, // hsl(213, 32, 52.2) $accent-5: $nord10, // hsl(213, 32, 52.2)
$blue-6: #647d96, // hsl(210, 20, 49 ) $accent-6: #647d96, // hsl(210, 20, 49 )
$blue-7: #48596b, // hsl(211, 19.6, 35.1) $accent-7: #48596b, // hsl(211, 19.6, 35.1)
$blue-8: #394856, // hsl(209, 20.3, 28 ) $accent-8: #394856, // hsl(209, 20.3, 28 )
$blue-9: #2b3640, // hsl(209, 19.6, 21 ) $accent-9: #2b3640, // hsl(209, 19.6, 21 )
$green-0: #dae5d1, // hsl(93, 27.8, 85.9) $success-0: #dae5d1, // hsl(93, 27.8, 85.9)
$green-1: #d1dfc6, // hsl(94, 28.1, 82.5) $success-1: #d1dfc6, // hsl(94, 28.1, 82.5)
$green-2: #bfd2af, // hsl(93, 28, 75.5) $success-2: #bfd2af, // hsl(93, 28, 75.5)
$green-3: #b5cba3, // hsl(93, 27.8, 71.8) $success-3: #b5cba3, // hsl(93, 27.8, 71.8)
$green-4: $nord14, // hsl(92, 27.8, 64.7) $success-4: $nord14, // hsl(92, 27.8, 64.7)
$green-5: #93ab7e, // hsl(92, 21.1, 58.2) $success-5: #93ab7e, // hsl(92, 21.1, 58.2)
$green-6: #829870, // hsl(93, 16.3, 51.8) $success-6: #829870, // hsl(93, 16.3, 51.8)
$green-7: #728562, // hsl(93, 15.2, 45.3) $success-7: #728562, // hsl(93, 15.2, 45.3)
$green-8: #525f46, // hsl(91, 15.2, 32.4) $success-8: #525f46, // hsl(91, 15.2, 32.4)
$green-9: #31392a, // hsl(92, 15.2, 19.4) $success-9: #31392a, // hsl(92, 15.2, 19.4)
$yellow-0: #f7ead1, // hsl(39, 70.4, 89.4) $warning-0: #f7ead1, // hsl(39, 70.4, 89.4)
$yellow-1: #f5e5c5, // hsl(40, 70.6, 86.7) $warning-1: #f5e5c5, // hsl(40, 70.6, 86.7)
$yellow-2: #f1dbae, // hsl(40, 70.5, 81.4) $warning-2: #f1dbae, // hsl(40, 70.5, 81.4)
$yellow-3: #efd5a2, // hsl(40, 70.6, 78.6) $warning-3: #efd5a2, // hsl(40, 70.6, 78.6)
$yellow-4: $nord13, // hsl(40, 70.6, 73.3) $warning-4: $nord13, // hsl(40, 70.6, 73.3)
$yellow-5: #d4b77d, // hsl(40, 50.3, 66.1) $warning-5: #d4b77d, // hsl(40, 50.3, 66.1)
$yellow-6: #bca26f, // hsl(40, 36.5, 58.6) $warning-6: #bca26f, // hsl(40, 36.5, 58.6)
$yellow-7: #8d7a53, // hsl(40, 25.9, 43.9) $warning-7: #8d7a53, // hsl(40, 25.9, 43.9)
$yellow-8: #766646, // hsl(40, 25.5, 36.9) $warning-8: #766646, // hsl(40, 25.5, 36.9)
$yellow-9: #463d2a, // hsl(41, 25, 22 ) $warning-9: #463d2a, // hsl(41, 25, 22 )
$red-0: #ecd0d2, // hsl(356, 42.4, 87.1) $danger-0: #ecd0d2, // hsl(356, 42.4, 87.1)
$red-1: #dfb0b5, // hsl(354, 42.3, 78.2) $danger-1: #dfb0b5, // hsl(354, 42.3, 78.2)
$red-2: #d29097, // hsl(354, 42.3, 69.4) $danger-2: #d29097, // hsl(354, 42.3, 69.4)
$red-3: #c57179, // hsl(354, 42, 60.8) $danger-3: #c57179, // hsl(354, 42, 60.8)
$red-4: $nord11, // hsl(354, 42.3, 56.5) $danger-4: $nord11, // hsl(354, 42.3, 56.5)
$red-5: #994e55, // hsl(354, 32.5, 45.3) $danger-5: #994e55, // hsl(354, 32.5, 45.3)
$red-6: #86444a, // hsl(355, 32.7, 39.6) $danger-6: #86444a, // hsl(355, 32.7, 39.6)
$red-7: #733a40, // hsl(354, 32.9, 33.9) $danger-7: #733a40, // hsl(354, 32.9, 33.9)
$red-8: #603135, // hsl(355, 32.4, 28.4) $danger-8: #603135, // hsl(355, 32.4, 28.4)
$red-9: #391d20 // hsl(354, 32.6, 16.9) $danger-9: #391d20 // hsl(354, 32.6, 16.9)
); );
@use "settings/color-scale" as scale; @use "settings/color-scale" as scale;
@forward "settings/color-vars" with ( @forward "settings/color-vars" with (
$fg-default: scale.$gray-0, $fg-default: scale.$base-0,
$fg-muted: scale.$gray-2, $fg-muted: scale.$base-2,
$fg-subtle: scale.$gray-3, $fg-subtle: scale.$base-3,
$fg-onEmphasis: scale.$white, $fg-onEmphasis: scale.$light,
$canvas-default: scale.$gray-9, $canvas-default: scale.$base-9,
$canvas-overlay: scale.$gray-8, $canvas-overlay: scale.$base-8,
$canvas-inset: scale.$black, $canvas-inset: scale.$dark,
$canvas-subtle: scale.$gray-7, $canvas-subtle: scale.$base-7,
$border-default: scale.$gray-6, $border-default: scale.$base-6,
$border-muted: scale.$gray-7, $border-muted: scale.$base-7,
$border-subtle: scale.$gray-8, $border-subtle: scale.$base-8,
$neutral-emphasisPlus: scale.$gray-6, $neutral-emphasisPlus: scale.$base-6,
$neutral-emphasis: scale.$gray-5, $neutral-emphasis: scale.$base-5,
$neutral-muted: color.change(scale.$gray-4, $alpha: 0.4), $neutral-muted: color.change(scale.$base-4, $alpha: 0.4),
$neutral-subtle: color.change(scale.$gray-4, $alpha: 0.1), $neutral-subtle: color.change(scale.$base-4, $alpha: 0.1),
$accent-fg: scale.$blue-3, $accent-fg: scale.$accent-3,
$accent-emphasis: scale.$blue-5, $accent-emphasis: scale.$accent-5,
$accent-muted: color.change(scale.$blue-4, $alpha: 0.4), $accent-muted: color.change(scale.$accent-4, $alpha: 0.4),
$accent-subtle: color.change(scale.$blue-4, $alpha: 0.15), $accent-subtle: color.change(scale.$accent-4, $alpha: 0.15),
$success-fg: scale.$green-3, $success-fg: scale.$success-3,
$success-emphasis: scale.$green-6, $success-emphasis: scale.$success-5,
$success-muted: color.change(scale.$green-4, $alpha: 0.35), $success-muted: color.change(scale.$success-4, $alpha: 0.35),
$success-subtle: color.change(scale.$green-4, $alpha: 0.15), $success-subtle: color.change(scale.$success-4, $alpha: 0.15),
$warning-fg: scale.$yellow-3, $warning-fg: scale.$warning-3,
$warning-emphasis: scale.$yellow-6, $warning-emphasis: scale.$warning-5,
$warning-muted: color.change(scale.$yellow-5, $alpha: 0.35), $warning-muted: color.change(scale.$warning-5, $alpha: 0.35),
$warning-subtle: color.change(scale.$yellow-5, $alpha: 0.15), $warning-subtle: color.change(scale.$warning-5, $alpha: 0.15),
$danger-fg: scale.$red-3, $danger-fg: scale.$danger-3,
$danger-emphasis: scale.$red-4, $danger-emphasis: scale.$danger-5,
$danger-muted: color.change(scale.$red-4, $alpha: 0.35), $danger-muted: color.change(scale.$danger-4, $alpha: 0.35),
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15) $danger-subtle: color.change(scale.$danger-4, $alpha: 0.15)
); );
@forward "settings/config" with ( @forward "settings/config" with (

166
styles/src/nord-light.scss
View File

@ -25,107 +25,107 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-scale" with ( @forward "settings/color-scale" with (
$black: #20242d, // hsl(222, 17, 15) $dark: #20242d, // hsl(222, 17, 15)
$white: #f4f5f8, // hsl(225, 22, 96) $light: #f4f5f8, // hsl(225, 22, 96)
$gray-0: $nord6, // hsl(218, 26.8, 92 ) $base-0: $nord6, // hsl(218, 26.8, 92 )
$gray-1: $nord5, // hsl(219, 27.9, 88 ) $base-1: $nord5, // hsl(219, 27.9, 88 )
$gray-2: $nord4, // hsl(219, 9.5, 71 ) $base-2: $nord4, // hsl(219, 9.5, 71 )
$gray-3: #c2c8d2, // hsl(217, 15.1, 79.2) $base-3: #c2c8d2, // hsl(217, 15.1, 79.2)
$gray-4: #8B919E, // hsl(221, 8.9, 58.2) $base-4: #8B919E, // hsl(221, 8.9, 58.2)
$gray-5: #707888, // hsl(220, 9.7, 48.6) $base-5: #707888, // hsl(220, 9.7, 48.6)
$gray-6: $nord3, // hsl(220, 12.6, 42.2) $base-6: $nord3, // hsl(220, 12.6, 42.2)
$gray-7: $nord2, // hsl(220, 16.5, 35.7) $base-7: $nord2, // hsl(220, 16.5, 35.7)
$gray-8: $nord1, // hsl(220, 16.8, 31.6) $base-8: $nord1, // hsl(220, 16.8, 31.6)
$gray-9: $nord0, // hsl(222, 16.3, 27.6) $base-9: $nord0, // hsl(222, 16.3, 27.6)
$blue-0: #e3eaf1, // hsl(210, 33.3, 91.8) $accent-0: #e3eaf1, // hsl(210, 33.3, 91.8)
$blue-1: #d5e0ea, // hsl(209, 33.3, 87.6) $accent-1: #d5e0ea, // hsl(209, 33.3, 87.6)
$blue-2: #b9cbdd, // hsl(210, 34.6, 79.6) $accent-2: #b9cbdd, // hsl(210, 34.6, 79.6)
$blue-3: #9db6cf, // hsl(210, 34.2, 71.4) $accent-3: #9db6cf, // hsl(210, 34.2, 71.4)
$blue-4: $nord9, // hsl(210, 34, 63.1) $accent-4: $nord9, // hsl(210, 34, 63.1)
$blue-5: $nord10, // hsl(213, 32, 52.2) $accent-5: $nord10, // hsl(213, 32, 52.2)
$blue-6: #647d96, // hsl(210, 20, 49 ) $accent-6: #647d96, // hsl(210, 20, 49 )
$blue-7: #48596b, // hsl(211, 19.6, 35.1) $accent-7: #48596b, // hsl(211, 19.6, 35.1)
$blue-8: #394856, // hsl(209, 20.3, 28 ) $accent-8: #394856, // hsl(209, 20.3, 28 )
$blue-9: #2b3640, // hsl(209, 19.6, 21 ) $accent-9: #2b3640, // hsl(209, 19.6, 21 )
$green-0: #dae5d1, // hsl(93, 27.8, 85.9) $success-0: #dae5d1, // hsl(93, 27.8, 85.9)
$green-1: #d1dfc6, // hsl(94, 28.1, 82.5) $success-1: #d1dfc6, // hsl(94, 28.1, 82.5)
$green-2: #bfd2af, // hsl(93, 28, 75.5) $success-2: #bfd2af, // hsl(93, 28, 75.5)
$green-3: #b5cba3, // hsl(93, 27.8, 71.8) $success-3: #b5cba3, // hsl(93, 27.8, 71.8)
$green-4: $nord14, // hsl(92, 27.8, 64.7) $success-4: $nord14, // hsl(92, 27.8, 64.7)
$green-5: #93ab7e, // hsl(92, 21.1, 58.2) $success-5: #93ab7e, // hsl(92, 21.1, 58.2)
$green-6: #829870, // hsl(93, 16.3, 51.8) $success-6: #829870, // hsl(93, 16.3, 51.8)
$green-7: #728562, // hsl(93, 15.2, 45.3) $success-7: #728562, // hsl(93, 15.2, 45.3)
$green-8: #525f46, // hsl(91, 15.2, 32.4) $success-8: #525f46, // hsl(91, 15.2, 32.4)
$green-9: #31392a, // hsl(92, 15.2, 19.4) $success-9: #31392a, // hsl(92, 15.2, 19.4)
$yellow-0: #f7ead1, // hsl(39, 70.4, 89.4) $warning-0: #f7ead1, // hsl(39, 70.4, 89.4)
$yellow-1: #f5e5c5, // hsl(40, 70.6, 86.7) $warning-1: #f5e5c5, // hsl(40, 70.6, 86.7)
$yellow-2: #f1dbae, // hsl(40, 70.5, 81.4) $warning-2: #f1dbae, // hsl(40, 70.5, 81.4)
$yellow-3: #efd5a2, // hsl(40, 70.6, 78.6) $warning-3: #efd5a2, // hsl(40, 70.6, 78.6)
$yellow-4: $nord13, // hsl(40, 70.6, 73.3) $warning-4: $nord13, // hsl(40, 70.6, 73.3)
$yellow-5: #d4b77d, // hsl(40, 50.3, 66.1) $warning-5: #d4b77d, // hsl(40, 50.3, 66.1)
$yellow-6: #bca26f, // hsl(40, 36.5, 58.6) $warning-6: #bca26f, // hsl(40, 36.5, 58.6)
$yellow-7: #8d7a53, // hsl(40, 25.9, 43.9) $warning-7: #8d7a53, // hsl(40, 25.9, 43.9)
$yellow-8: #766646, // hsl(40, 25.5, 36.9) $warning-8: #766646, // hsl(40, 25.5, 36.9)
$yellow-9: #463d2a, // hsl(41, 25, 22 ) $warning-9: #463d2a, // hsl(41, 25, 22 )
$red-0: #ecd0d2, // hsl(356, 42.4, 87.1) $danger-0: #ecd0d2, // hsl(356, 42.4, 87.1)
$red-1: #dfb0b5, // hsl(354, 42.3, 78.2) $danger-1: #dfb0b5, // hsl(354, 42.3, 78.2)
$red-2: #d29097, // hsl(354, 42.3, 69.4) $danger-2: #d29097, // hsl(354, 42.3, 69.4)
$red-3: #c57179, // hsl(354, 42, 60.8) $danger-3: #c57179, // hsl(354, 42, 60.8)
$red-4: $nord11, // hsl(354, 42.3, 56.5) $danger-4: $nord11, // hsl(354, 42.3, 56.5)
$red-5: #994e55, // hsl(354, 32.5, 45.3) $danger-5: #994e55, // hsl(354, 32.5, 45.3)
$red-6: #86444a, // hsl(355, 32.7, 39.6) $danger-6: #86444a, // hsl(355, 32.7, 39.6)
$red-7: #733a40, // hsl(354, 32.9, 33.9) $danger-7: #733a40, // hsl(354, 32.9, 33.9)
$red-8: #603135, // hsl(355, 32.4, 28.4) $danger-8: #603135, // hsl(355, 32.4, 28.4)
$red-9: #391d20 // hsl(354, 32.6, 16.9) $danger-9: #391d20 // hsl(354, 32.6, 16.9)
); );
@use "settings/color-scale" as scale; @use "settings/color-scale" as scale;
@forward "settings/color-vars" with ( @forward "settings/color-vars" with (
$fg-default: scale.$gray-9, $fg-default: scale.$base-9,
$fg-muted: scale.$gray-6, $fg-muted: scale.$base-6,
$fg-subtle: scale.$gray-5, $fg-subtle: scale.$base-5,
$fg-onEmphasis: scale.$white, $fg-onEmphasis: scale.$light,
$canvas-default: scale.$white, $canvas-default: scale.$light,
$canvas-overlay: scale.$white, $canvas-overlay: scale.$light,
$canvas-inset: scale.$gray-0, $canvas-inset: scale.$base-0,
$canvas-subtle: scale.$gray-0, $canvas-subtle: scale.$base-0,
$border-default: scale.$gray-3, $border-default: scale.$base-3,
$border-muted: lighten(scale.$gray-2, 0.03), $border-muted: lighten(scale.$base-2, 0.03),
$border-subtle: color.change(scale.$black, $alpha: 0.15), $border-subtle: color.change(scale.$dark, $alpha: 0.15),
$neutral-emphasisPlus: scale.$gray-8, $neutral-emphasisPlus: scale.$base-8,
$neutral-emphasis: scale.$gray-5, $neutral-emphasis: scale.$base-5,
$neutral-muted: color.change(scale.$gray-3, $alpha: 0.2), $neutral-muted: color.change(scale.$base-3, $alpha: 0.2),
$neutral-subtle: color.change(scale.$gray-1, $alpha: 0.5), $neutral-subtle: color.change(scale.$base-1, $alpha: 0.5),
$accent-fg: scale.$blue-5, $accent-fg: scale.$accent-5,
$accent-emphasis: scale.$blue-5, $accent-emphasis: scale.$accent-5,
$accent-muted: color.change(scale.$blue-3, $alpha: 0.4), $accent-muted: color.change(scale.$accent-3, $alpha: 0.4),
$accent-subtle: color.change(scale.$blue-3, $alpha: 0.15), $accent-subtle: color.change(scale.$accent-3, $alpha: 0.15),
$success-fg: scale.$green-6, $success-fg: scale.$success-6,
$success-emphasis: scale.$green-5, $success-emphasis: scale.$success-4,
$success-muted: color.change(scale.$green-4, $alpha: 0.4), $success-muted: color.change(scale.$success-4, $alpha: 0.4),
$success-subtle: color.change(scale.$green-4, $alpha: 0.15), $success-subtle: color.change(scale.$success-4, $alpha: 0.15),
$warning-fg: scale.$yellow-7, $warning-fg: scale.$warning-7,
$warning-emphasis: scale.$yellow-5, $warning-emphasis: scale.$warning-4,
$warning-muted: color.change(scale.$yellow-4, $alpha: 0.4), $warning-muted: color.change(scale.$warning-4, $alpha: 0.4),
$warning-subtle: color.change(scale.$yellow-4, $alpha: 0.15), $warning-subtle: color.change(scale.$warning-4, $alpha: 0.15),
$danger-fg: scale.$red-5, $danger-fg: scale.$danger-5,
$danger-emphasis: scale.$red-5, $danger-emphasis: scale.$danger-5,
$danger-muted: color.change(scale.$red-4, $alpha: 0.4), $danger-muted: color.change(scale.$danger-4, $alpha: 0.4),
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15), $danger-subtle: color.change(scale.$danger-4, $alpha: 0.15),
); );
@use "general"; @use "general";

166
styles/src/primer-dark.scss
View File

@ -4,107 +4,107 @@
@forward "settings/color-scale" with ( @forward "settings/color-scale" with (
$black: #010409, // hsl(218, 80, 2 ) $dark: #010409, // hsl(218, 80, 2 )
$white: #ffffff, // hsl(0, 0 , 100) $light: #ffffff, // hsl(0, 0 , 100)
$gray-0: #f0f6fc, // hsl(210, 66.7, 96.5) $base-0: #f0f6fc, // hsl(210, 66.7, 96.5)
$gray-1: #c9d1d9, // hsl(210, 17.4, 82 ) $base-1: #c9d1d9, // hsl(210, 17.4, 82 )
$gray-2: #b1bac4, // hsl(212, 13.9, 73.1) $base-2: #b1bac4, // hsl(212, 13.9, 73.1)
$gray-3: #8b949e, // hsl(212, 8.9, 58.2) $base-3: #8b949e, // hsl(212, 8.9, 58.2)
$gray-4: #6e7681, // hsl(215, 7.9, 46.9) $base-4: #6e7681, // hsl(215, 7.9, 46.9)
$gray-5: #484f58, // hsl(214, 10, 31.4) $base-5: #484f58, // hsl(214, 10, 31.4)
$gray-6: #30363d, // hsl(212, 11.9, 21.4) $base-6: #30363d, // hsl(212, 11.9, 21.4)
$gray-7: #21262d, // hsl(215, 15.4, 15.3) $base-7: #21262d, // hsl(215, 15.4, 15.3)
$gray-8: #161b22, // hsl(215, 21.4, 11 ) $base-8: #161b22, // hsl(215, 21.4, 11 )
$gray-9: #0d1117, // hsl(216, 27.8, 7.1 ) $base-9: #0d1117, // hsl(216, 27.8, 7.1 )
$blue-0: #cae8ff, // hsl(206, 100, 89.6) $accent-0: #cae8ff, // hsl(206, 100, 89.6)
$blue-1: #a5d6ff, // hsl(207, 100, 82.4) $accent-1: #a5d6ff, // hsl(207, 100, 82.4)
$blue-2: #79c0ff, // hsl(208, 100, 73.7) $accent-2: #79c0ff, // hsl(208, 100, 73.7)
$blue-3: #58a6ff, // hsl(212, 100, 67.3) $accent-3: #58a6ff, // hsl(212, 100, 67.3)
$blue-4: #388bfd, // hsl(215, 98, 60.6) $accent-4: #388bfd, // hsl(215, 98, 60.6)
$blue-5: #1f6feb, // hsl(216, 83.6, 52.2) $accent-5: #1f6feb, // hsl(216, 83.6, 52.2)
$blue-6: #1158c7, // hsl(217, 84.3, 42.4) $accent-6: #1158c7, // hsl(217, 84.3, 42.4)
$blue-7: #0d419d, // hsl(218, 84.7, 33.3) $accent-7: #0d419d, // hsl(218, 84.7, 33.3)
$blue-8: #0c2d6b, // hsl(219, 79.8, 23.3) $accent-8: #0c2d6b, // hsl(219, 79.8, 23.3)
$blue-9: #051d4d, // hsl(220, 87.8, 16.1) $accent-9: #051d4d, // hsl(220, 87.8, 16.1)
$green-0: #aff5b4, // hsl(124, 77.8, 82.4) $success-0: #aff5b4, // hsl(124, 77.8, 82.4)
$green-1: #7ee787, // hsl(125, 68.6, 70 ) $success-1: #7ee787, // hsl(125, 68.6, 70 )
$green-2: #56d364, // hsl(127, 58.7, 58.2) $success-2: #56d364, // hsl(127, 58.7, 58.2)
$green-3: #3fb950, // hsl(128, 49.2, 48.6) $success-3: #3fb950, // hsl(128, 49.2, 48.6)
$green-4: #2ea043, // hsl(131, 55.3, 40.4) $success-4: #2ea043, // hsl(131, 55.3, 40.4)
$green-5: #238636, // hsl(132, 58.6, 33.1) $success-5: #238636, // hsl(132, 58.6, 33.1)
$green-6: #196c2e, // hsl(135, 62.4, 26.1) $success-6: #196c2e, // hsl(135, 62.4, 26.1)
$green-7: #0f5323, // hsl(138, 69.4, 19.2) $success-7: #0f5323, // hsl(138, 69.4, 19.2)
$green-8: #033a16, // hsl(141, 90.2, 12 ) $success-8: #033a16, // hsl(141, 90.2, 12 )
$green-9: #04260f, // hsl(139, 81, 8.2 ) $success-9: #04260f, // hsl(139, 81, 8.2 )
$yellow-0: #f8e3a1, // hsl(46, 86.1, 80.2) $warning-0: #f8e3a1, // hsl(46, 86.1, 80.2)
$yellow-1: #f2cc60, // hsl(44, 84.9, 66.3) $warning-1: #f2cc60, // hsl(44, 84.9, 66.3)
$yellow-2: #e3b341, // hsl(42, 74.3, 57.3) $warning-2: #e3b341, // hsl(42, 74.3, 57.3)
$yellow-3: #d29922, // hsl(41, 72.1, 47.8) $warning-3: #d29922, // hsl(41, 72.1, 47.8)
$yellow-4: #bb8009, // hsl(40, 90.8, 38.4) $warning-4: #bb8009, // hsl(40, 90.8, 38.4)
$yellow-5: #9e6a03, // hsl(40, 96.3, 31.6) $warning-5: #9e6a03, // hsl(40, 96.3, 31.6)
$yellow-6: #845306, // hsl(37, 91.3, 27.1) $warning-6: #845306, // hsl(37, 91.3, 27.1)
$yellow-7: #693e00, // hsl(35, 100, 20.6) $warning-7: #693e00, // hsl(35, 100, 20.6)
$yellow-8: #4b2900, // hsl(33, 100, 14.7) $warning-8: #4b2900, // hsl(33, 100, 14.7)
$yellow-9: #341a00, // hsl(30, 100, 10.2) $warning-9: #341a00, // hsl(30, 100, 10.2)
$red-0: #ffdcd7, // hsl(8, 100, 92.2) $danger-0: #ffdcd7, // hsl(8, 100, 92.2)
$red-1: #ffc1ba, // hsl(6, 100, 86.5) $danger-1: #ffc1ba, // hsl(6, 100, 86.5)
$red-2: #ffa198, // hsl(5, 100, 79.8) $danger-2: #ffa198, // hsl(5, 100, 79.8)
$red-3: #ff7b72, // hsl(4, 100, 72.4) $danger-3: #ff7b72, // hsl(4, 100, 72.4)
$red-4: #f85149, // hsl(3, 92.6, 62.9) $danger-4: #f85149, // hsl(3, 92.6, 62.9)
$red-5: #da3633, // hsl(1, 69.3, 52.7) $danger-5: #da3633, // hsl(1, 69.3, 52.7)
$red-6: #b62324, // hsl(0, 67.7, 42.5) $danger-6: #b62324, // hsl(0, 67.7, 42.5)
$red-7: #8e1519, // hsl(358, 74.2, 32 ) $danger-7: #8e1519, // hsl(358, 74.2, 32 )
$red-8: #67060c, // hsl(356, 89, 21.4) $danger-8: #67060c, // hsl(356, 89, 21.4)
$red-9: #490202 // hsl(0, 94.7, 14.7) $danger-9: #490202 // hsl(0, 94.7, 14.7)
); );
@use "settings/color-scale" as scale; @use "settings/color-scale" as scale;
@forward "settings/color-vars" with ( @forward "settings/color-vars" with (
$fg-default: scale.$gray-1, $fg-default: scale.$base-1,
$fg-muted: scale.$gray-3, $fg-muted: scale.$base-3,
$fg-subtle: scale.$gray-4, $fg-subtle: scale.$base-4,
$fg-onEmphasis: scale.$white, $fg-onEmphasis: scale.$light,
$canvas-default: scale.$gray-9, $canvas-default: scale.$base-9,
$canvas-overlay: scale.$gray-8, $canvas-overlay: scale.$base-8,
$canvas-inset: scale.$black, $canvas-inset: scale.$dark,
$canvas-subtle: scale.$gray-8, $canvas-subtle: scale.$base-8,
$border-default: scale.$gray-6, $border-default: scale.$base-6,
$border-muted: scale.$gray-7, $border-muted: scale.$base-7,
$border-subtle: color.change(scale.$gray-0, $alpha: 0.1), $border-subtle: color.change(scale.$base-0, $alpha: 0.1),
$neutral-emphasisPlus: scale.$gray-4, $neutral-emphasisPlus: scale.$base-4,
$neutral-emphasis: scale.$gray-4, $neutral-emphasis: scale.$base-4,
$neutral-muted: color.change(scale.$gray-4, $alpha: 0.4), $neutral-muted: color.change(scale.$base-4, $alpha: 0.4),
$neutral-subtle: color.change(scale.$gray-4, $alpha: 0.1), $neutral-subtle: color.change(scale.$base-4, $alpha: 0.1),
$accent-fg: scale.$blue-3, $accent-fg: scale.$accent-3,
$accent-emphasis: scale.$blue-5, $accent-emphasis: scale.$accent-5,
$accent-muted: color.change(scale.$blue-4, $alpha: 0.4), $accent-muted: color.change(scale.$accent-4, $alpha: 0.4),
$accent-subtle: color.change(scale.$blue-4, $alpha: 0.15), $accent-subtle: color.change(scale.$accent-4, $alpha: 0.15),
$success-fg: scale.$green-3, $success-fg: scale.$success-3,
$success-emphasis: scale.$green-5, $success-emphasis: scale.$success-5,
$success-muted: color.change(scale.$green-4, $alpha: 0.4), $success-muted: color.change(scale.$success-4, $alpha: 0.4),
$success-subtle: color.change(scale.$green-4, $alpha: 0.15), $success-subtle: color.change(scale.$success-4, $alpha: 0.15),
$warning-fg: scale.$yellow-3, $warning-fg: scale.$warning-3,
$warning-emphasis: scale.$yellow-5, $warning-emphasis: scale.$warning-5,
$warning-muted: color.change(scale.$yellow-4, $alpha: 0.4), $warning-muted: color.change(scale.$warning-4, $alpha: 0.4),
$warning-subtle: color.change(scale.$yellow-4, $alpha: 0.15), $warning-subtle: color.change(scale.$warning-4, $alpha: 0.15),
$danger-fg: scale.$red-4, $danger-fg: scale.$danger-4,
$danger-emphasis: scale.$red-5, $danger-emphasis: scale.$danger-5,
$danger-muted: color.change(scale.$red-4, $alpha: 0.4), $danger-muted: color.change(scale.$danger-4, $alpha: 0.4),
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15) $danger-subtle: color.change(scale.$danger-4, $alpha: 0.15)
); );
@forward "settings/config" with ( @forward "settings/config" with (

104
styles/src/settings/_color-scale.scss
View File

@ -1,59 +1,59 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
$black: #1b1f24 !default; // hsl(213, 14.3, 12.4) $dark: #1b1f24 !default; // hsl(213, 14.3, 12.4)
$white: #ffffff !default; // hsl(0, 0, 100 ) $light: #ffffff !default; // hsl(0, 0, 100 )
$gray-0: #f6f8fa !default; // hsl(210, 28.6, 97.3) $base-0: #f6f8fa !default; // hsl(210, 28.6, 97.3)
$gray-1: #eaeef2 !default; // hsl(210, 23.5, 93.3) $base-1: #eaeef2 !default; // hsl(210, 23.5, 93.3)
$gray-2: #d0d7de !default; // hsl(210, 17.5, 84.3) $base-2: #d0d7de !default; // hsl(210, 17.5, 84.3)
$gray-3: #afb8c1 !default; // hsl(210, 12.7, 72.2) $base-3: #afb8c1 !default; // hsl(210, 12.7, 72.2)
$gray-4: #8c959f !default; // hsl(212, 9, 58.6) $base-4: #8c959f !default; // hsl(212, 9, 58.6)
$gray-5: #6e7781 !default; // hsl(212, 7.9, 46.9) $base-5: #6e7781 !default; // hsl(212, 7.9, 46.9)
$gray-6: #57606a !default; // hsl(212, 9.8, 37.8) $base-6: #57606a !default; // hsl(212, 9.8, 37.8)
$gray-7: #424a53 !default; // hsl(212, 11.4, 29.2) $base-7: #424a53 !default; // hsl(212, 11.4, 29.2)
$gray-8: #32383f !default; // hsl(212, 11.5, 22.2) $base-8: #32383f !default; // hsl(212, 11.5, 22.2)
$gray-9: #24292f !default; // hsl(213, 13.3, 16.3) $base-9: #24292f !default; // hsl(213, 13.3, 16.3)
$blue-0: #ddf4ff !default; // hsl(199, 100, 93.3) $accent-0: #ddf4ff !default; // hsl(199, 100, 93.3)
$blue-1: #b6e3ff !default; // hsl(203, 100, 85.7) $accent-1: #b6e3ff !default; // hsl(203, 100, 85.7)
$blue-2: #80ccff !default; // hsl(204, 100, 75.1) $accent-2: #80ccff !default; // hsl(204, 100, 75.1)
$blue-3: #54aeff !default; // hsl(208, 100, 66.5) $accent-3: #54aeff !default; // hsl(208, 100, 66.5)
$blue-4: #218bff !default; // hsl(211, 100, 56.5) $accent-4: #218bff !default; // hsl(211, 100, 56.5)
$blue-5: #0969da !default; // hsl(212, 92.1, 44.5) $accent-5: #0969da !default; // hsl(212, 92.1, 44.5)
$blue-6: #0550ae !default; // hsl(213, 94.4, 35.1) $accent-6: #0550ae !default; // hsl(213, 94.4, 35.1)
$blue-7: #033d8b !default; // hsl(214, 95.8, 27.8) $accent-7: #033d8b !default; // hsl(214, 95.8, 27.8)
$blue-8: #0a3069 !default; // hsl(216, 82.6, 22.5) $accent-8: #0a3069 !default; // hsl(216, 82.6, 22.5)
$blue-9: #002155 !default; // hsl(217, 100, 16.7) $accent-9: #002155 !default; // hsl(217, 100, 16.7)
$green-0: #dafbe1 !default; // hsl(133, 80.5, 92 ) $success-0: #dafbe1 !default; // hsl(133, 80.5, 92 )
$green-1: #aceebb !default; // hsl(134, 66, 80.4) $success-1: #aceebb !default; // hsl(134, 66, 80.4)
$green-2: #6fdd8b !default; // hsl(135, 61.8, 65.1) $success-2: #6fdd8b !default; // hsl(135, 61.8, 65.1)
$green-3: #4ac26b !default; // hsl(137, 49.6, 52.5) $success-3: #4ac26b !default; // hsl(137, 49.6, 52.5)
$green-4: #2da44e !default; // hsl(137, 56.9, 41 ) $success-4: #2da44e !default; // hsl(137, 56.9, 41 )
$green-5: #1a7f37 !default; // hsl(137, 66, 30 ) $success-5: #1a7f37 !default; // hsl(137, 66, 30 )
$green-6: #116329 !default; // hsl(138, 70.7, 22.7) $success-6: #116329 !default; // hsl(138, 70.7, 22.7)
$green-7: #044f1e !default; // hsl(141, 90.4, 16.3) $success-7: #044f1e !default; // hsl(141, 90.4, 16.3)
$green-8: #003d16 !default; // hsl(142, 100, 12 ) $success-8: #003d16 !default; // hsl(142, 100, 12 )
$green-9: #002d11 !default; // hsl(143, 100, 8.8 ) $success-9: #002d11 !default; // hsl(143, 100, 8.8 )
$yellow-0: #fff8c5 !default; // hsl(53, 100, 88.6) $warning-0: #fff8c5 !default; // hsl(53, 100, 88.6)
$yellow-1: #fae17d !default; // hsl(48, 92.6, 73.5) $warning-1: #fae17d !default; // hsl(48, 92.6, 73.5)
$yellow-2: #eac54f !default; // hsl(46, 78.7, 61.4) $warning-2: #eac54f !default; // hsl(46, 78.7, 61.4)
$yellow-3: #d4a72c !default; // hsl(44, 66.1, 50.2) $warning-3: #d4a72c !default; // hsl(44, 66.1, 50.2)
$yellow-4: #bf8700 !default; // hsl(42, 100, 37.5) $warning-4: #bf8700 !default; // hsl(42, 100, 37.5)
$yellow-5: #9a6700 !default; // hsl(40, 100, 30.2) $warning-5: #9a6700 !default; // hsl(40, 100, 30.2)
$yellow-6: #7d4e00 !default; // hsl(37, 100, 24.5) $warning-6: #7d4e00 !default; // hsl(37, 100, 24.5)
$yellow-7: #633c01 !default; // hsl(36, 98, 19.6) $warning-7: #633c01 !default; // hsl(36, 98, 19.6)
$yellow-8: #4d2d00 !default; // hsl(35, 100, 15.1) $warning-8: #4d2d00 !default; // hsl(35, 100, 15.1)
$yellow-9: #3b2300 !default; // hsl(36, 100, 11.6) $warning-9: #3b2300 !default; // hsl(36, 100, 11.6)
$red-0: #ffebe9 !default; // hsl(5, 100, 95.7) $danger-0: #ffebe9 !default; // hsl(5, 100, 95.7)
$red-1: #ffcecb !default; // hsl(3, 100, 89.8) $danger-1: #ffcecb !default; // hsl(3, 100, 89.8)
$red-2: #ffaba8 !default; // hsl(2, 100, 82.9) $danger-2: #ffaba8 !default; // hsl(2, 100, 82.9)
$red-3: #ff8182 !default; // hsl(0, 100, 75.3) $danger-3: #ff8182 !default; // hsl(0, 100, 75.3)
$red-4: #fa4549 !default; // hsl(359, 94.8, 62.5) $danger-4: #fa4549 !default; // hsl(359, 94.8, 62.5)
$red-5: #cf222e !default; // hsl(356, 71.8, 47.3) $danger-5: #cf222e !default; // hsl(356, 71.8, 47.3)
$red-6: #a40e26 !default; // hsl(350, 84.3, 34.9) $danger-6: #a40e26 !default; // hsl(350, 84.3, 34.9)
$red-7: #82071e !default; // hsl(349, 89.8, 26.9) $danger-7: #82071e !default; // hsl(349, 89.8, 26.9)
$red-8: #660018 !default; // hsl(346, 100, 20 ) $danger-8: #660018 !default; // hsl(346, 100, 20 )
$red-9: #4c0014 !default; // hsl(344, 100, 14.9) $danger-9: #4c0014 !default; // hsl(344, 100, 14.9)

62
styles/src/settings/_color-vars.scss
View File

@ -3,44 +3,44 @@
@use "sass:color"; @use "sass:color";
@use "color-scale" as scale; @use "color-scale" as scale;
$fg-default: scale.$gray-9 !default; $fg-default: scale.$base-9 !default;
$fg-muted: scale.$gray-6 !default; $fg-muted: scale.$base-6 !default;
$fg-subtle: scale.$gray-5 !default; $fg-subtle: scale.$base-5 !default;
$fg-onEmphasis: scale.$white !default; $fg-onEmphasis: scale.$light !default;
$canvas-default: scale.$white !default; $canvas-default: scale.$light !default;
$canvas-overlay: scale.$white !default; $canvas-overlay: scale.$light !default;
$canvas-inset: scale.$gray-0 !default; $canvas-inset: scale.$base-0 !default;
$canvas-subtle: scale.$gray-0 !default; $canvas-subtle: scale.$base-0 !default;
$border-default: scale.$gray-2 !default; $border-default: scale.$base-2 !default;
$border-muted: lighten(scale.$gray-2, 0.03) !default; $border-muted: lighten(scale.$base-2, 0.03) !default;
$border-subtle: color.change(scale.$black, $alpha: 0.15) !default; $border-subtle: color.change(scale.$dark, $alpha: 0.15) !default;
$neutral-emphasisPlus: scale.$gray-9 !default; $neutral-emphasisPlus: scale.$base-9 !default;
$neutral-emphasis: scale.$gray-5 !default; $neutral-emphasis: scale.$base-5 !default;
$neutral-muted: color.change(scale.$gray-3, $alpha: 0.2) !default; $neutral-muted: color.change(scale.$base-3, $alpha: 0.2) !default;
$neutral-subtle: color.change(scale.$gray-1, $alpha: 0.5) !default; $neutral-subtle: color.change(scale.$base-1, $alpha: 0.5) !default;
$accent-fg: scale.$blue-5 !default; $accent-fg: scale.$accent-5 !default;
$accent-emphasis: scale.$blue-5 !default; $accent-emphasis: scale.$accent-5 !default;
$accent-muted: color.change(scale.$blue-3, $alpha: 0.4) !default; $accent-muted: color.change(scale.$accent-3, $alpha: 0.4) !default;
$accent-subtle: scale.$blue-0 !default; $accent-subtle: scale.$accent-0 !default;
$success-fg: scale.$green-5 !default; $success-fg: scale.$success-5 !default;
$success-emphasis: scale.$green-4 !default; $success-emphasis: scale.$success-4 !default;
$success-muted: color.change(scale.$green-3, $alpha: 0.4) !default; $success-muted: color.change(scale.$success-3, $alpha: 0.4) !default;
$success-subtle: scale.$green-0 !default; $success-subtle: scale.$success-0 !default;
$warning-fg: scale.$yellow-5 !default; $warning-fg: scale.$warning-5 !default;
$warning-emphasis: scale.$yellow-4 !default; $warning-emphasis: scale.$warning-4 !default;
$warning-muted: color.change(scale.$yellow-3, $alpha: 0.4) !default; $warning-muted: color.change(scale.$warning-3, $alpha: 0.4) !default;
$warning-subtle: scale.$yellow-0 !default; $warning-subtle: scale.$warning-0 !default;
$danger-fg: scale.$red-5 !default; $danger-fg: scale.$danger-5 !default;
$danger-emphasis: scale.$red-5 !default; $danger-emphasis: scale.$danger-5 !default;
$danger-muted: color.change(scale.$red-3, $alpha: 0.4) !default; $danger-muted: color.change(scale.$danger-3, $alpha: 0.4) !default;
$danger-subtle: scale.$red-0 !default; $danger-subtle: scale.$danger-0 !default;
$chart-1: #f3622d !default; $chart-1: #f3622d !default;
$chart-2: #fba71b !default; $chart-2: #fba71b !default;