diff --git a/.gitignore b/.gitignore index a7b7273..ebf3043 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,9 @@ # NodeJS Trash node_modules/ +# Corporate-specific stuff +scss/themes/theme_corp_* + # Build Artifacts *.css *.min.html diff --git a/scss/core/border.scss b/scss/core/border.scss index d8682aa..23f8aa3 100644 --- a/scss/core/border.scss +++ b/scss/core/border.scss @@ -5,22 +5,22 @@ /* Core > Borders > Enabling */ .b, .border { - border: 1px solid #{$color-border-all}; + border: 1px solid #{$color-border-default}; } .bx { - border-left: 1px solid #{$color-border-all}; - border-right: 1px solid #{$color-border-all}; + border-left: 1px solid #{$color-border-default}; + border-right: 1px solid #{$color-border-default}; } .by { - border-top: 1px solid #{$color-border-all}; - border-bottom: 1px solid #{$color-border-all}; + border-top: 1px solid #{$color-border-default}; + border-bottom: 1px solid #{$color-border-default}; } @mixin border-maker-enable($side-key, $side-css-key) { .b#{$side-key} { - border-#{$side-css-key}: 1px solid #{$color-border-all}; + border-#{$side-css-key}: 1px solid #{$color-border-default}; } } diff --git a/scss/site/backgrounds.scss b/scss/site/backgrounds.scss index 044a239..c167cc1 100644 --- a/scss/site/backgrounds.scss +++ b/scss/site/backgrounds.scss @@ -3,48 +3,48 @@ /* Site > Misc > Backgrounds */ .bkgd-dark { - background: #{$color-background-main-headings}; + background: $color-background-gray-dark; } .bkgd-grey, .bkgd-gray { - background: mix($color-background-main, $color-background-surround, 50%); + background: $color-background-gray-medium; } .bkgd-light { - background: $color-background-main; + background: $color-background-gray-light; } @if($include-grid-backgrounds) { // The element rules override rules in `base.scss ~94` .bkgd-grid10, .bkgd-surround, header, nav, footer { @if($use-b64-backgrounds) { - background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center; + background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center; } @else { - background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center; + background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center; } } .bkgd-grid20 { @if($use-b64-backgrounds) { - background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center; + background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center; } @else { - background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center; + background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center; } } .bkgd-grid30 { @if($use-b64-backgrounds) { - background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center; + background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center; } @else { - background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center; + background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center; } } .bkgd-grid40, .bkgd-grid { @if($use-b64-backgrounds) { - background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center; + background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center; } @else { - background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center; + background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center; } } } @@ -54,33 +54,33 @@ } .bkgd-blue { - background-color: #{$color-background-button-primary}; + background-color: #{$color-background-blue}; } .bkgd-blue-light { - background-color: #{$color-background-button-primary-hover}; + background-color: #{$color-background-blue-light}; } .bkgd-green { - background-color: #{$color-background-button-success}; + background-color: #{$color-background-green}; } .bkgd-green-light { - background-color: #{$color-background-button-success-hover}; + background-color: #{$color-background-green-light}; } .bkgd-red { - background-color: #{$color-background-button-error}; + background-color: #{$color-background-red}; } .bkgd-red-light { - background-color: #{$color-background-button-error-hover}; + background-color: #{$color-background-red-light}; } .bkgd-orange { - background-color: #{$color-background-button-warning}; + background-color: #{$color-background-orange}; } .bkgd-orange-light { - background-color: #{$color-background-button-warning-hover}; + background-color: #{$color-background-orange-light}; } diff --git a/scss/site/borders.scss b/scss/site/borders.scss index 3453e77..fd3170a 100644 --- a/scss/site/borders.scss +++ b/scss/site/borders.scss @@ -1,7 +1,7 @@ // NibblePoker CSS Theme - CC0 1.0 (Public Domain) .border, code, .code, kbd { - border-color: #{$color-border-surround}; + border-color: #{$color-border-code}; //&.b-light { // border: 1px solid #{$color-border-light}; diff --git a/scss/site/hr.scss b/scss/site/hr.scss index 6ab5628..21edac5 100644 --- a/scss/site/hr.scss +++ b/scss/site/hr.scss @@ -3,7 +3,7 @@ /* Site > Elements > Horizontal Rule */ hr { - border-color: #{$color-border-all}; + border-color: #{$color-border-hr}; &.subtle, &.hr-subtle { //background-color: rgba(0,0,0,0) !important; @@ -41,7 +41,7 @@ hr { content: '\002702'; display: inline-block; position: relative; - color: #{$color-border-all}; + color: #{$color-border-hr}; font-size: 18px; top: -8px; left: 40px; diff --git a/scss/site/input.scss b/scss/site/input.scss index 947a0f5..c53f6c9 100644 --- a/scss/site/input.scss +++ b/scss/site/input.scss @@ -12,17 +12,17 @@ button, input, textarea, select { outline: none; color: #{$color-text-inputs}; - background-color: #{$color-background-inputs}; + background-color: #{$color-background-input}; &:not(.no-focus) { &:focus { - box-shadow: 0px 0px 3px 0px #{$color-input-glow}; + box-shadow: 0px 0px 3px 0px #{$color-glow-input}; } } &:disabled { cursor: not-allowed; - background-color: #{$color-background-code} !important; + background-color: #{$color-background-input-disabled} !important; } } @@ -36,10 +36,10 @@ label { input[type=checkbox], input[type=radio] { width: 1.65em; height: 1.65em; - background-color: #{$color-background-checkbox-unchecked}; + background-color: #{$color-background-input-unchecked}; &:checked { - background-color: #{$color-background-checkbox-checked}; + background-color: #{$color-background-input-checked}; } position: relative; diff --git a/scss/site/layouts/generic.scss b/scss/site/layouts/generic.scss index d76a541..38fe48b 100644 --- a/scss/site/layouts/generic.scss +++ b/scss/site/layouts/generic.scss @@ -57,7 +57,7 @@ body.layout-generic { body.layout-generic { & > nav { //border-right: 1px solid #{$color-border-all}; - border-right: 1px solid #{$color-border-main}; + border-right: 1px solid #{$color-border-nav}; } & > header { diff --git a/scss/site/scrollbar.scss b/scss/site/scrollbar.scss index 6e93031..2e74c7d 100644 --- a/scss/site/scrollbar.scss +++ b/scss/site/scrollbar.scss @@ -10,11 +10,11 @@ } *::-webkit-scrollbar-track:vertical { - border-left: 1px solid #{$color-scrollbar-border}; + border-left: 1px solid #{$color-border-scrollbar}; } /**::-webkit-scrollbar-track:horizontal { - border-top: 1px solid #{$color-scrollbar-border}; + border-top: 1px solid #{$color-border-scrollbar}; }*/ *::-webkit-scrollbar-thumb { diff --git a/scss/site/table.scss b/scss/site/table.scss index be140d0..1d22ff9 100644 --- a/scss/site/table.scss +++ b/scss/site/table.scss @@ -11,18 +11,18 @@ } tr { - background-color: #{$color-background-table-dual}; + background-color: #{$color-background-table-tr-alt}; } tr:nth-child(2n), th { - background-color: #{$color-background-table-main}; + background-color: #{$color-background-table-tr-main}; } td:not(:last-of-type), th:not(:last-of-type) { - border-right: 1.5px solid #{$color-table-border}; + border-right: 1.5px solid #{$color-border-table}; } tr:not(:last-of-type) td, th { - border-bottom: 1.5px solid #{$color-table-border}; + border-bottom: 1.5px solid #{$color-border-table}; } } diff --git a/scss/site/text.scss b/scss/site/text.scss index 0765f7e..7417403 100644 --- a/scss/site/text.scss +++ b/scss/site/text.scss @@ -5,7 +5,7 @@ /* Site > Text > Commons */ * { - color: #{$color-text-regular-normal}; + color: #{$color-text-generic}; } @@ -21,18 +21,18 @@ p { a, .a { // Base text-decoration: underline; - color: #{$color-link-blue}; + color: #{$color-text-link}; & * { - color: #{$color-link-blue}; + color: #{$color-text-link}; } &:hover { - color: #{$color-link-blue-hover}; + color: #{$color-text-link-hover}; cursor: pointer; & * { - color: #{$color-link-blue-hover}; + color: #{$color-text-link-hover}; text-decoration: underline; } } @@ -53,18 +53,18 @@ a, .a { //&.casper-link, &.bland-link { &.a-hidden { text-decoration: none; - color: #{$color-text-regular-normal}; + color: #{$color-text-generic}; & * { - color: #{$color-text-regular-normal}; + color: #{$color-text-generic}; } &:hover { text-decoration: underline; - color: #{$color-link-hover}; + color: #{$color-text-link-hover}; & * { - color: #{$color-link-hover}; + color: #{$color-text-link-hover}; } // FIXME: Not working, big F diff --git a/scss/site/wedge.scss b/scss/site/wedge.scss index ad5d926..23c7869 100644 --- a/scss/site/wedge.scss +++ b/scss/site/wedge.scss @@ -7,7 +7,7 @@ wedge, .wedge { //top: 0; //right: 0; - color: #{$color-text-regular-normal}; + color: #{$color-text-generic}; background-color: #{$color-background-button}; user-select: none; diff --git a/scss/themes/theme_nibblepoker.scss b/scss/themes/theme_nibblepoker.scss new file mode 100644 index 0000000..ac20911 --- /dev/null +++ b/scss/themes/theme_nibblepoker.scss @@ -0,0 +1,106 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) +@use 'sass:color'; + + +// External palettes + +/* Variables > Palettes > Apollo */ +// https://lospec.com/palette-list/apollo +$color-apollo-01: #253a5e; +$color-apollo-02: #3c5e8b; +$color-apollo-03: #4f8fba; +$color-apollo-04: #73bed3; +$color-apollo-05: #a4dddb; +$color-apollo-07: #25562e; +$color-apollo-08: #468232; +$color-apollo-20: #884b2b; +$color-apollo-21: #be772b; +$color-apollo-26: #752438; +$color-apollo-27: #a53030; +$color-apollo-45: #ebede9; + +$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button +$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover + + +// Flat colors +$color-background-gray-light: #24252B; +$color-background-gray-dark: #1D1E22; +$color-background-gray-medium: mix($color-background-gray-light, $color-background-gray-dark, 50%); + +$color-background-blue: #{$color-apollo-custom-30}; +$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%); + +$color-background-green: #{$color-apollo-07}; +$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%); + +$color-background-red: #{$color-apollo-26}; +$color-background-red-light: #{$color-apollo-27}; + +$color-background-orange: #{$color-apollo-20}; +$color-background-orange-light: #{$color-apollo-21}; + + +// Body parts +$color-background-main: $color-background-gray-light; +$color-background-surround: $color-background-gray-dark; +$color-background-body: $color-background-surround; + + +// Cards & Other elements +$color-background-heading: $color-background-surround; +$color-background-code: $color-background-surround; + +$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%); +$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%); + +$color-background-input: $color-background-surround; +$color-background-input-checked: $color-apollo-08; +$color-background-input-unchecked: $color-apollo-27; +$color-background-input-disabled: $color-background-surround; + +$color-background-button: #2d2f36; +$color-background-button-hover: #373841; + +$color-background-button-primary: $color-background-blue; +$color-background-button-primary-hover: $color-background-blue-light; + +$color-background-button-success: $color-background-green; +$color-background-button-success-hover: $color-background-green-light; + +$color-background-button-error: $color-background-red; +$color-background-button-error-hover: $color-background-red-light; + +$color-background-button-warning: $color-background-orange; +$color-background-button-warning-hover: $color-background-orange-light; + +$color-background-grid-image: $color-background-gray-medium; + + +// Borders +$color-border-light: #141417; +$color-border-normal: #141417; +$color-border-dark: #141417; + +$color-border-default: $color-border-normal; + +$color-border-main: $color-border-normal; +$color-border-nav: $color-border-normal; +$color-border-hr: $color-border-normal; +$color-border-scrollbar: $color-border-normal; +$color-border-table: $color-border-normal; +$color-border-code: $color-border-normal; + + +// Text +$color-text-generic: $color-apollo-45; +$color-text-inputs: $color-text-generic; +$color-text-muted: #{$color-text-generic}E0; +$color-text-muted-super: #{$color-text-generic}C0; + +$color-text-link: #{$color-apollo-04}; +$color-text-link-hover: #{$color-apollo-05}; + + +// Specials +$color-glow-input: $color-apollo-02; diff --git a/scss/themes/theme_unset.scss b/scss/themes/theme_unset.scss new file mode 100644 index 0000000..d34616e --- /dev/null +++ b/scss/themes/theme_unset.scss @@ -0,0 +1,87 @@ +// NibblePoker CSS Theme - CC0 1.0 (Public Domain) +@use 'sass:color'; + +// The only goal for this file is to set all colors to `deeppink`. +// Other theme files should override all the colors variables defined in here. + + +// Flat colors +$color-background-gray-light: deeppink; +$color-background-gray-medium: deeppink; +$color-background-gray-dark: deeppink; + +$color-background-blue: deeppink; +$color-background-blue-light: deeppink; + +$color-background-green: deeppink; +$color-background-green-light: deeppink; + +$color-background-red: deeppink; +$color-background-red-light: deeppink; + +$color-background-orange: deeppink; +$color-background-orange-light: deeppink; + + +// Body parts +$color-background-main: deeppink; +$color-background-surround: deeppink; +$color-background-body: deeppink; + +// Cards & Other elements +$color-background-heading: deeppink; +$color-background-code: deeppink; + +$color-background-table-tr-main: deeppink; +$color-background-table-tr-alt: deeppink; + +$color-background-input: deeppink; +$color-background-input-checked: deeppink; +$color-background-input-unchecked: deeppink; +$color-background-input-disabled: deeppink; + +$color-background-button: deeppink; +$color-background-button-hover: deeppink; + +$color-background-button-primary: deeppink; +$color-background-button-primary-hover: deeppink; + +$color-background-button-success: deeppink; +$color-background-button-success-hover: deeppink; + +$color-background-button-error: deeppink; +$color-background-button-error-hover: deeppink; + +$color-background-button-warning: deeppink; +$color-background-button-warning-hover: deeppink; + +$color-background-grid-image: deeppink; + + +// Borders +$color-border-light: #00EB6C; +$color-border-normal: #00EB6C; +$color-border-dark: #00EB6C; + +$color-border-default: #00EB6C; + +$color-border-main: #00EB6C; +$color-border-nav: #00EB6C; +$color-border-hr: #00EB6C; +$color-border-scrollbar: #00EB6C; +$color-border-table: #00EB6C; +$color-border-code: #00EB6C; + + +// Text +$color-text-generic: #00EB6C; +$color-text-inputs: #00EB6C; +$color-text-muted: #{$color-text-generic}E0; +$color-text-muted-super: #{$color-text-generic}C0; + +$color-text-link: #00EB6C; +$color-text-link-hover: #00EB6C; + + +// Specials +$color-glow-input: yellow; diff --git a/scss/trash/palettes.scss b/scss/trash/palettes.scss new file mode 100644 index 0000000..aff431e --- /dev/null +++ b/scss/trash/palettes.scss @@ -0,0 +1,113 @@ + +@use 'sass:color'; + +/* Variables > Palettes > Apollo */ +// https://lospec.com/palette-list/apollo +$color-apollo-00: #172038; +$color-apollo-01: #253a5e; +$color-apollo-02: #3c5e8b; +$color-apollo-03: #4f8fba; +$color-apollo-04: #73bed3; +$color-apollo-05: #a4dddb; +$color-apollo-06: #19332d; +$color-apollo-07: #25562e; +$color-apollo-08: #468232; +$color-apollo-09: #75a743; +$color-apollo-10: #a8ca58; +$color-apollo-11: #d0da91; +$color-apollo-12: #4d2b32; +$color-apollo-13: #7a4841; +$color-apollo-14: #ad7757; +$color-apollo-15: #c09473; +$color-apollo-16: #d7b594; +$color-apollo-17: #e7d5b3; +$color-apollo-18: #341c27; +$color-apollo-19: #602c2c; +$color-apollo-20: #884b2b; +$color-apollo-21: #be772b; +$color-apollo-22: #de9e41; +$color-apollo-23: #e8c170; +$color-apollo-24: #241527; +$color-apollo-25: #411d31; +$color-apollo-26: #752438; +$color-apollo-27: #a53030; +$color-apollo-28: #cf573c; +$color-apollo-29: #da863e; +$color-apollo-30: #1e1d39; +$color-apollo-31: #402751; +$color-apollo-32: #7a367b; +$color-apollo-33: #a23e8c; +$color-apollo-34: #c65197; +$color-apollo-35: #df84a5; +$color-apollo-36: #090a14; +$color-apollo-37: #10141f; +$color-apollo-38: #151d28; +$color-apollo-39: #202e37; +$color-apollo-40: #394a50; +$color-apollo-41: #577277; +$color-apollo-42: #819796; +$color-apollo-43: #a8b5b2; +$color-apollo-44: #c7cfcc; +$color-apollo-45: #ebede9; + +$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%); + +$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%); +$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%); +$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%); +$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%); + +$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%)); +$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%)); + +$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%); +$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%); +$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%); +$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%); + +$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%); + +$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%); + +$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button +$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover + +/* Variables > Palettes > Material UI */ +// https://materialui.co/colors + +$color-material-blueGrey-50: #eceff1; +$color-material-blueGrey-100: #cfd8dc; +$color-material-blueGrey-200: #b0bec5; +$color-material-blueGrey-300: #90a4ae; +$color-material-blueGrey-400: #78909c; +$color-material-blueGrey-500: #607d8b; +$color-material-blueGrey-600: #546e7a; +$color-material-blueGrey-700: #455a64; +$color-material-blueGrey-800: #37474f; +$color-material-blueGrey-900: #263238; + +$color-material-blueGrey-1000: #151D21; +$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%); +//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%); +$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%); + +/* Variables > Palettes > WinUI 3 */ + +$color-winui-00: #191919; +$color-winui-01: #1D1D1D; +$color-winui-02: #202020; +$color-winui-03: #232323; +$color-winui-04: #272727; +$color-winui-05: #323232; +$color-winui-06: #3E3E3E; + +// https://flatuicolors.com/palette/defo + +/* Variables > Palettes > Misc */ + +//$color-test-01: mix(#7b6aa5, #000000, 33%); +//$color-test-02: #007c7d; + +/* Variables > Colors Mappings */ + +$color-unset: $color-apollo-34; diff --git a/scss/variables.scss b/scss/variables.scss index 86dfc49..328d4b6 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -1,299 +1,6 @@ // NibblePoker CSS Theme - CC0 1.0 (Public Domain) @use 'sass:color'; -/* Variables > Palettes */ - -/* Variables > Palettes > Apollo */ -// https://lospec.com/palette-list/apollo -$color-apollo-00: #172038; -$color-apollo-01: #253a5e; -$color-apollo-02: #3c5e8b; -$color-apollo-03: #4f8fba; -$color-apollo-04: #73bed3; -$color-apollo-05: #a4dddb; -$color-apollo-06: #19332d; -$color-apollo-07: #25562e; -$color-apollo-08: #468232; -$color-apollo-09: #75a743; -$color-apollo-10: #a8ca58; -$color-apollo-11: #d0da91; -$color-apollo-12: #4d2b32; -$color-apollo-13: #7a4841; -$color-apollo-14: #ad7757; -$color-apollo-15: #c09473; -$color-apollo-16: #d7b594; -$color-apollo-17: #e7d5b3; -$color-apollo-18: #341c27; -$color-apollo-19: #602c2c; -$color-apollo-20: #884b2b; -$color-apollo-21: #be772b; -$color-apollo-22: #de9e41; -$color-apollo-23: #e8c170; -$color-apollo-24: #241527; -$color-apollo-25: #411d31; -$color-apollo-26: #752438; -$color-apollo-27: #a53030; -$color-apollo-28: #cf573c; -$color-apollo-29: #da863e; -$color-apollo-30: #1e1d39; -$color-apollo-31: #402751; -$color-apollo-32: #7a367b; -$color-apollo-33: #a23e8c; -$color-apollo-34: #c65197; -$color-apollo-35: #df84a5; -$color-apollo-36: #090a14; -$color-apollo-37: #10141f; -$color-apollo-38: #151d28; -$color-apollo-39: #202e37; -$color-apollo-40: #394a50; -$color-apollo-41: #577277; -$color-apollo-42: #819796; -$color-apollo-43: #a8b5b2; -$color-apollo-44: #c7cfcc; -$color-apollo-45: #ebede9; - -$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%); - -$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%); -$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%); -$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%); -$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%); - -$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%)); -$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%)); - -$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%); -$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%); -$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%); -$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%); - -$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%); - -$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%); - -$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button -$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover - -/* Variables > Palettes > Material UI */ -// https://materialui.co/colors - -$color-material-blueGrey-50: #eceff1; -$color-material-blueGrey-100: #cfd8dc; -$color-material-blueGrey-200: #b0bec5; -$color-material-blueGrey-300: #90a4ae; -$color-material-blueGrey-400: #78909c; -$color-material-blueGrey-500: #607d8b; -$color-material-blueGrey-600: #546e7a; -$color-material-blueGrey-700: #455a64; -$color-material-blueGrey-800: #37474f; -$color-material-blueGrey-900: #263238; - -$color-material-blueGrey-1000: #151D21; -$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%); -//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%); -$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%); - -/* Variables > Palettes > WinUI 3 */ - -$color-winui-00: #191919; -$color-winui-01: #1D1D1D; -$color-winui-02: #202020; -$color-winui-03: #232323; -$color-winui-04: #272727; -$color-winui-05: #323232; -$color-winui-06: #3E3E3E; - -// https://flatuicolors.com/palette/defo - -/* Variables > Palettes > Misc */ - -//$color-test-01: mix(#7b6aa5, #000000, 33%); -//$color-test-02: #007c7d; - -/* Variables > Colors Mappings */ - -$color-unset: $color-apollo-34; - -/* Variables > Theme selection */ - -// Available themes: -// * Teal Supreme (teal) -// * WinUI 3 (winui) -// * La Moiti Leune (moon) -// * NibblePoker (nibblepoker) -$theme: nibblepoker; - -/* Variables > Colors Mappings > Backgrounds & Borders */ - -$color-background-main: map-get(( - teal: $color-apollo-custom-02, - winui: $color-winui-04, - moon: $color-unset, - nibblepoker: #24252B, -), $theme); - -$color-background-surround: map-get(( - teal: $color-apollo-custom-00, - winui: $color-winui-02, - moon: $color-unset, - nibblepoker: #1D1E22, -), $theme); - -// Used as the background-color in the main's rounded corners -$color-background-body: $color-background-surround; - -// Used in stylized headings -$color-background-main-headings: map-get(( - teal: $color-background-surround, - winui: $color-unset, - moon: $color-unset, - nibblepoker: $color-background-surround, -), $theme); - - -// FIXME: Remove its usage ! -// Left: Code, Kbd, Scrollbar ??? -$color-border-all: $color-unset; // Default border -$color-border-light: $color-unset; // For .b-light class (No longer exists !) - -// Used to separate the 'main' from the 'surround'. -$color-border-surround: map-get(( - teal: $color-apollo-38, - winui: $color-winui-01, - moon: $color-unset, - nibblepoker: #141417, -), $theme); - -// Used as the border for all element inside the "main". -// It probably influences more stuff, but I can't be bothered to fix this... -$color-border-main: map-get(( - teal: $color-apollo-38, // $color-apollo-custom-20; - winui: $color-winui-03, - moon: $color-unset, - nibblepoker: $color-border-surround, -), $theme); - -// TEMP !!! -$color-border-all: $color-border-main; - -$color-background-code: map-get(( - teal: $color-apollo-custom-20, - winui: $color-unset, - moon: $color-unset, - nibblepoker: mix($color-background-main, $color-background-surround, 25%), -), $theme); - -$color-border-code: map-get(( - teal: #{$color-border-surround}CF, - winui: $color-unset, - moon: $color-unset, - nibblepoker: #{$color-border-surround}CF, -), $theme); - - -$color-background-table-main: map-get(( - teal: $color-apollo-custom-01, - winui: $color-unset, - moon: $color-unset, - nibblepoker: mix($color-background-main, $color-background-surround, 50%), -), $theme); - -$color-background-table-dual: map-get(( - teal: $color-apollo-custom-00, - winui: $color-unset, - moon: $color-unset, - nibblepoker: mix($color-background-main, $color-background-surround, 12.5%), -), $theme); - -$color-table-border: map-get(( - teal: $color-apollo-39, - winui: $color-unset, - moon: $color-unset, - nibblepoker: #{$color-border-surround}CF, -), $theme); - -$color-background-inputs: map-get(( - teal: $color-apollo-40, - winui: $color-unset, - moon: $color-unset, - nibblepoker: #2d2f36, -), $theme); - -// TODO: Implement better ones ! - -$color-background-button: map-get(( - teal: $color-apollo-40, - winui: $color-unset, - moon: $color-unset, - nibblepoker: #2d2f36, -), $theme); - -$color-background-button-hover: map-get(( - teal: $color-apollo-custom-10, - winui: $color-unset, - moon: $color-unset, - nibblepoker: #373841, -), $theme); - -$color-background-checkbox-checked: $color-apollo-08; -$color-background-checkbox-unchecked: $color-apollo-27; -//$color-background-checkbox-disabled: $color-background-button; - -$color-background-radio-checked: $color-apollo-08; -$color-background-radio-unchecked: $color-apollo-27; -//$color-background-radio-disabled: $color-background-button-hover; - -$color-background-button-primary: #{$color-apollo-custom-30}; -$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%); - -$color-background-button-success: #{$color-apollo-07}; -$color-background-button-success-hover: mix($color-apollo-07, $color-apollo-08, 50%); - -$color-background-button-error: #{$color-apollo-26}; -$color-background-button-error-hover: #{$color-apollo-27}; - -$color-background-button-warning: #{$color-apollo-20}; -$color-background-button-warning-hover: #{$color-apollo-21}; - - - -/* Variables > Colors Mappings > Text */ - -$color-text-regular-normal: $color-apollo-45; -$color-text-inputs: $color-apollo-45; -$color-text-muted: #{$color-apollo-45}E0; -$color-text-muted-super: #{$color-apollo-45}C0; - -$color-link-hover: rgb(253, 255, 251); - -// Should be a mix of 03-04 and 04-05. -$color-link-blue: #{$color-apollo-04}; -$color-link-blue-hover: #{$color-apollo-05}; - -//$color-border-all: $color-apollo-38; -//$color-border-light: $color-apollo-custom-20; - -$color-input-glow: $color-apollo-02; - -//$color-wedge-blue-background: $color-apollo-03; - -// Still used for wedges !!! - Nope, it looked bad with the new colors ! -//$color-wedge-blue-border: $color-apollo-02; - -//$color-background-body: $color-apollo-custom-00; -//$color-background-main: $color-apollo-custom-02; -//$color-background-surround: $color-apollo-custom-00; -// -//// TMP V2 -//$color-background-body: $color-material-blueGrey-900; -//$color-background-main: $color-material-blueGrey-950; -//$color-background-surround: $color-material-blueGrey-900; - - -/* Variables > Scrollbar */ - -//$color-scrollbar-border: rgba(0, 0, 0, 0.15); -$color-scrollbar-border: $color-border-surround; $scrollbar-size: 1.25em; @@ -319,3 +26,8 @@ $content-search-image-size: 128px; $z-index-sidebar: 5; $z-index-lang-dropdown: 10; $z-index-modal: 99; + + +/* Variables > Themes & Overrides */ +//@import "themes/theme_unset"; +@import "themes/theme_nibblepoker";