mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
scss: use CSS variables for light and dark theme
This commit is contained in:
axolotle
parent
3db2bbc939
commit
b193e2d715
2 changed files with 100 additions and 53 deletions
|
|
@ -30,12 +30,42 @@
|
|||
$font-size-base: .9rem;
|
||||
$font-weight-bold: 500;
|
||||
|
||||
$purple: #9932cc;
|
||||
$white: var(--white);
|
||||
$gray-100: var(--gray-100);
|
||||
$gray-200: var(--gray-200);
|
||||
$gray-300: var(--gray-300);
|
||||
$gray-400: var(--gray-400);
|
||||
$gray-500: var(--gray-500);
|
||||
$gray-600: var(--gray-600);
|
||||
$gray-700: var(--gray-700);
|
||||
$gray-800: var(--gray-800);
|
||||
$gray-900: var(--gray-900);
|
||||
$black: var(--black);
|
||||
|
||||
$blue: var(--blue);
|
||||
$indigo: var(--indigo);
|
||||
$purple: var(--purple);
|
||||
$pink: var(--pink);
|
||||
$red: var(--red);
|
||||
$orange: var(--orange);
|
||||
$yellow: var(--yellow);
|
||||
$green: var(--green);
|
||||
$teal: var(--teal);
|
||||
$cyan: var(--cyan);
|
||||
|
||||
$theme-colors: (
|
||||
'best': $purple,
|
||||
);
|
||||
|
||||
$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
|
||||
|
||||
$alert-bg-level: -10;
|
||||
$alert-border-level: -9;
|
||||
$alert-color-level: 5;
|
||||
|
||||
$list-group-item-bg-level: -11;
|
||||
$list-group-item-color-level: 6;
|
||||
|
||||
// Replace font-weight 300 with 200
|
||||
$font-weight-light: 200;
|
||||
$display1-weight: 200;
|
||||
|
|
@ -60,6 +90,9 @@ $card-spacer-x: 1rem;
|
|||
|
||||
$list-group-item-padding-x: 1rem;
|
||||
|
||||
// Hard coded for scss compilation to pass
|
||||
$b-toast-background-opacity: 100%;
|
||||
|
||||
// Import default variables after the above setup to compute all other variables.
|
||||
@import '~bootstrap/scss/functions.scss';
|
||||
@import '_functions-override.scss';
|
||||
|
|
|
|||
|
|
@ -49,60 +49,81 @@
|
|||
@import 'font';
|
||||
@import '~fork-awesome/scss/fork-awesome.scss';
|
||||
|
||||
// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
|
||||
@mixin hsl-color($name, $h, $s, $l) {
|
||||
--#{$name}: hsl(#{$h}, #{$s}, #{$l});
|
||||
--#{$name}-h: #{$h};
|
||||
--#{$name}-s: #{$s};
|
||||
--#{$name}-l: #{$l};
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--background-color-secondary: #fafbfc;
|
||||
--border-color: #c5d9e8;
|
||||
--font-color: #333;
|
||||
--font-color-secondary: #3f536e;
|
||||
color-scheme: light;
|
||||
|
||||
--black: #2c405a;
|
||||
--blue: #0079c4;
|
||||
--green: #81c926;
|
||||
--grey: #8eacc5;
|
||||
--orange: #fd7b1f;
|
||||
--purple: #ab7ef6;
|
||||
--red: #e0102b;
|
||||
--turquoise: #26c1c9;
|
||||
--white: #ffffff;
|
||||
--yellow: #faca00;
|
||||
--yiq-contrasted-threshold: 150;
|
||||
|
||||
--active: #0079c4;
|
||||
--description: #8eacc5;
|
||||
--error: #e0102b;
|
||||
--normal: #c5d9e8;
|
||||
--info: #0079c4;
|
||||
--success: #81c926;
|
||||
--warning: #ffc107;
|
||||
@include hsl-color('white', 0, 0%, 100%);
|
||||
@include hsl-color('black', 0, 0%, 0%);
|
||||
@include hsl-color('blue', 211, 64%, 50%);
|
||||
@include hsl-color('indigo', 263, 90%, 51%);
|
||||
@include hsl-color('purple', 280, 61%, 50%);
|
||||
@include hsl-color('pink', 332, 79%, 58%);
|
||||
@include hsl-color('red', 354, 70%, 54%);
|
||||
@include hsl-color('orange', 27, 98%, 54%);
|
||||
@include hsl-color('yellow', 45, 100%, 66%);
|
||||
@include hsl-color('green', 134, 61%, 41%);
|
||||
@include hsl-color('teal', 162, 73%, 46%);
|
||||
@include hsl-color('cyan', 188, 78%, 41%);
|
||||
|
||||
@include hsl-color('gray-100', 210, 17%, 98%);
|
||||
@include hsl-color('gray-200', 210, 16%, 93%);
|
||||
@include hsl-color('gray-300', 210, 14%, 89%);
|
||||
@include hsl-color('gray-400', 210, 14%, 83%);
|
||||
@include hsl-color('gray-500', 210, 11%, 71%);
|
||||
@include hsl-color('gray-600', 208, 7%, 46%);
|
||||
@include hsl-color('gray-700', 210, 9%, 31%);
|
||||
@include hsl-color('gray-800', 210, 10%, 23%);
|
||||
@include hsl-color('gray-900', 210, 11%, 15%);
|
||||
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level));
|
||||
}
|
||||
}
|
||||
|
||||
[dark-theme="true"] {
|
||||
/* Variables for dark mode */
|
||||
--background-color: #202025;
|
||||
--background-color-secondary: #273142;
|
||||
--border-color: #313d4f;
|
||||
--font-color: #ffffff;
|
||||
--font-color-secondary: #a9c7df;
|
||||
color-scheme: dark; // Ask browser to use dark mode native styling
|
||||
|
||||
--black: #25374f;
|
||||
--blue: #0093ee;
|
||||
--green: #96bf47;
|
||||
--grey: #a9c7df;
|
||||
--orange: #ffb610;
|
||||
--purple: #ab7ef6;
|
||||
--red: #e0102b;
|
||||
--turquoise: #26c1c9;
|
||||
--white: #ffffff;
|
||||
--yellow: #ffc02a;
|
||||
--yiq-contrasted-threshold: 120;
|
||||
|
||||
--active: #0093ee;
|
||||
--description: #8eacc5;
|
||||
--error: #e0102b;
|
||||
--normal: #313d4f;
|
||||
--info: #0093ee;
|
||||
--success: #96bf47;
|
||||
--warning: #ffc02a;
|
||||
@include hsl-color('white', 256, 0%, 12.5%);
|
||||
@include hsl-color('black', 256, 0%, 100%);
|
||||
@include hsl-color('blue', 210.7, 95.5%, 65.5%);
|
||||
@include hsl-color('purple', 280, 77.8%, 62.9%);
|
||||
@include hsl-color('red', 0, 100%, 67.6%);
|
||||
@include hsl-color('green', 134.3, 74.4%, 67.8%);
|
||||
@include hsl-color('cyan', 188.4, 91.4%, 72.5%);
|
||||
|
||||
@include hsl-color('gray-900', 210, 17%, 98%);
|
||||
@include hsl-color('gray-800', 210, 16%, 93%);
|
||||
@include hsl-color('gray-700', 210, 14%, 89%);
|
||||
@include hsl-color('gray-600', 210, 14%, 83%);
|
||||
@include hsl-color('gray-500', 210, 11%, 71%);
|
||||
@include hsl-color('gray-400', 208, 7%, 46%);
|
||||
@include hsl-color('gray-300', 210, 9%, 31%);
|
||||
@include hsl-color('gray-200', 210, 10%, 23%);
|
||||
@include hsl-color('gray-100', 210, 11%, 15%);
|
||||
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2));
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(theme-color-level($color, -6), theme-color-level($color, -5), theme-color-level($color, 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style overrides happens after dependencies imports
|
||||
|
|
@ -129,13 +150,6 @@ body {
|
|||
}
|
||||
|
||||
|
||||
// Bootstrap overrides
|
||||
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
|
||||
}
|
||||
|
||||
// Add breakpoints for w-*
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $size, $length in $sizes {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue