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

Improve color palette

Browse Source
This commit is contained in:
mkpaz 2022-09-17 14:26:47 +04:00
parent 423f372d88
commit ee119fdea7
1 changed files with 84 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/sample-theme.scss
View File

@ -1,122 +1,117 @@
@use "sass:color";
/*
* Based on Material color palette
*/
/* Based on Material color palette */
// modify color scale
@forward "../target/atlantafx/styles/settings/color-scale" with (
$dark: black,
$light: white,
$dark: black,
$light: white,
$base-0: #fafafa,
$base-1: #f5f5f5,
$base-2: #eeeeee,
$base-3: #e0e0e0,
$base-4: #bdbdbd,
$base-5: #9e9e9e,
$base-6: #757575,
$base-7: #616161,
$base-8: #424242,
$base-9: #212121,
$base-0: #f7f7f7,
$base-1: #f1f1f1,
$base-2: #eeeeee,
$base-3: #e0e0e0,
$base-4: #bdbdbd,
$base-5: #9e9e9e,
$base-6: #757575,
$base-7: #616161,
$base-8: #424242,
$base-9: #212121,
$accent-0: #e8eaf6,
$accent-1: #c5cae9,
$accent-2: #9fa8da,
$accent-3: #7986cb,
$accent-4: #5c6bc0,
$accent-5: #3f51b5,
$accent-6: #3949ab,
$accent-7: #303f9f,
$accent-8: #283593,
$accent-9: #1a237e,
$accent-0: #e8eaf6,
$accent-1: #c5cae9,
$accent-2: #9fa8da,
$accent-3: #7986cb,
$accent-4: #5c6bc0,
$accent-5: #3f51b5,
$accent-6: #3949ab,
$accent-7: #303f9f,
$accent-8: #283593,
$accent-9: #1a237e,
$success-0: #e8f5e9,
$success-1: #c8e6c9,
$success-2: #a5d6a7,
$success-3: #b5cba3,
$success-4: #81c784,
$success-5: #66bb6a,
$success-6: #4caf50,
$success-7: #388e3c,
$success-8: #2e7d32,
$success-9: #1b5e20,
$success-0: #e0f2f1,
$success-1: #b2dfdb,
$success-2: #80cbc4,
$success-3: #4db6ac,
$success-4: #26a69a,
$success-5: #009688,
$success-6: #00897b,
$success-7: #00796b,
$success-8: #00695c,
$success-9: #004d40,
$warning-0: #fff8e1,
$warning-1: #ffecb3,
$warning-2: #ffe082,
$warning-3: #ffd54f,
$warning-4: #ffca28,
$warning-5: #ffc107,
$warning-6: #ffb300,
$warning-7: #ffa000,
$warning-8: #ff8f00,
$warning-9: #ff6f00,
$warning-0: #fbe9e7,
$warning-1: #ffccbc,
$warning-2: #ffab91,
$warning-3: #ff8a65,
$warning-4: #ff7043,
$warning-5: #ff5722,
$warning-6: #f4511e,
$warning-7: #e64a19,
$warning-8: #d84315,
$warning-9: #bf360c,
$danger-0: #fbe9e7,
$danger-1: #ffccbc,
$danger-2: #ffab91,
$danger-3: #ff8a65,
$danger-4: #ff7043,
$danger-5: #ff5722,
$danger-6: #f4511e,
$danger-7: #e64a19,
$danger-8: #d84315,
$danger-9: #bf360c
$danger-0: #fce4ec,
$danger-1: #f8bbd0,
$danger-2: #f48fb1,
$danger-3: #f06292,
$danger-4: #ec407a,
$danger-5: #e91e63,
$danger-6: #d81b60,
$danger-7: #c2185b,
$danger-8: #ad1457,
$danger-9: #880e4f
);
@use "../target/atlantafx/styles/settings/color-scale" as scale;
// modify functional colors
@forward "../target/atlantafx/styles/settings/color-vars" with (
// TODO: NOT TESTED YET
$fg-default: scale.$base-0,
$fg-muted: scale.$base-2,
$fg-subtle: scale.$base-3,
$fg-default: scale.$base-8,
$fg-muted: scale.$base-7,
$fg-subtle: scale.$base-6,
$fg-onEmphasis: scale.$light,
$canvas-default: scale.$base-9,
$canvas-overlay: scale.$base-8,
$canvas-inset: scale.$dark,
$canvas-subtle: scale.$base-7,
$canvas-default: scale.$light,
$canvas-overlay: scale.$light,
$canvas-inset: scale.$base-1,
$canvas-subtle: scale.$base-0,
$border-default: scale.$base-6,
$border-muted: scale.$base-7,
$border-subtle: scale.$base-8,
$border-default: color.change(scale.$base-4, $alpha: 0.7),
$border-muted: scale.$base-3,
$border-subtle: scale.$base-2,
$neutral-emphasisPlus: scale.$base-6,
$neutral-emphasis: scale.$base-5,
$neutral-muted: color.change(scale.$base-4, $alpha: 0.4),
$neutral-subtle: color.change(scale.$base-4, $alpha: 0.1),
$neutral-emphasisPlus: scale.$base-8,
$neutral-emphasis: scale.$base-7,
$neutral-muted: scale.$base-5,
$neutral-subtle: scale.$base-2,
$accent-fg: scale.$accent-3,
$accent-fg: scale.$accent-5,
$accent-emphasis: scale.$accent-5,
$accent-muted: color.change(scale.$accent-4, $alpha: 0.4),
$accent-muted: color.change(scale.$accent-4, $alpha: 0.3),
$accent-subtle: color.change(scale.$accent-4, $alpha: 0.15),
$success-fg: scale.$success-3,
$success-emphasis: scale.$success-5,
$success-muted: color.change(scale.$success-4, $alpha: 0.35),
$success-subtle: color.change(scale.$success-4, $alpha: 0.15),
$success-fg: scale.$success-7,
$success-emphasis: scale.$success-6,
$success-muted: color.change(scale.$success-4, $alpha: 0.3),
$success-subtle: color.change(scale.$success-4, $alpha: 0.1),
$warning-fg: scale.$warning-3,
$warning-emphasis: scale.$warning-5,
$warning-muted: color.change(scale.$warning-5, $alpha: 0.35),
$warning-subtle: color.change(scale.$warning-5, $alpha: 0.15),
$warning-fg: scale.$warning-7,
$warning-emphasis: scale.$warning-7,
$warning-muted: color.change(scale.$warning-5, $alpha: 0.3),
$warning-subtle: color.change(scale.$warning-5, $alpha: 0.1),
$danger-fg: scale.$danger-3,
$danger-emphasis: scale.$danger-5,
$danger-muted: color.change(scale.$danger-4, $alpha: 0.35),
$danger-subtle: color.change(scale.$danger-4, $alpha: 0.15)
$danger-fg: scale.$danger-7,
$danger-emphasis: scale.$danger-7,
$danger-muted: color.change(scale.$danger-4, $alpha: 0.3),
$danger-subtle: color.change(scale.$danger-4, $alpha: 0.1)
);
// modify global config
// @forward "settings/config" with (
// don't forget to signal whether it light or dark theme
// $darkMode: true
// );
@forward "../target/atlantafx/styles/settings/config" with (
$darkMode: false
);
@use "../target/atlantafx/styles/general";