Simplify theme color palette
This commit is contained in:
parent
0a22b3990f
commit
8338fc405f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -33,95 +33,6 @@ $darkest: #171b1d;
|
|||
|
||||
@import '../node_modules/bootstrap/scss/variables';
|
||||
|
||||
// Make color palette colors available as theme colors.
|
||||
// For example, you could use `.bg-red-100`, if needed.
|
||||
$theme-color-addons: (
|
||||
'darker': $darker,
|
||||
'darkest': $darkest,
|
||||
'gray': $gray-400,
|
||||
'gray-100': $gray-100,
|
||||
'gray-200': $gray-200,
|
||||
'gray-300': $gray-300,
|
||||
'gray-400': $gray-400,
|
||||
'gray-500': $gray-500,
|
||||
'gray-600': $gray-600,
|
||||
'gray-700': $gray-700,
|
||||
'gray-800': $gray-800,
|
||||
'gray-900': $gray-900,
|
||||
'red-100': $red-100,
|
||||
'red-200': $red-200,
|
||||
'red-300': $red-300,
|
||||
'red-400': $red-400,
|
||||
'red-500': $red-500,
|
||||
'red-600': $red-600,
|
||||
'red-700': $red-700,
|
||||
'red-800': $red-800,
|
||||
'red-900': $red-900,
|
||||
'yellow-100': $yellow-100,
|
||||
'yellow-200': $yellow-200,
|
||||
'yellow-300': $yellow-300,
|
||||
'yellow-400': $yellow-400,
|
||||
'yellow-500': $yellow-500,
|
||||
'yellow-600': $yellow-600,
|
||||
'yellow-700': $yellow-700,
|
||||
'yellow-800': $yellow-800,
|
||||
'yellow-900': $yellow-900,
|
||||
'green-100': $green-100,
|
||||
'green-200': $green-200,
|
||||
'green-300': $green-300,
|
||||
'green-400': $green-400,
|
||||
'green-500': $green-500,
|
||||
'green-600': $green-600,
|
||||
'green-700': $green-700,
|
||||
'green-800': $green-800,
|
||||
'green-900': $green-900,
|
||||
'blue-100': $blue-100,
|
||||
'blue-200': $blue-200,
|
||||
'blue-300': $blue-300,
|
||||
'blue-400': $blue-400,
|
||||
'blue-500': $blue-500,
|
||||
'blue-600': $blue-600,
|
||||
'blue-700': $blue-700,
|
||||
'blue-800': $blue-800,
|
||||
'blue-900': $blue-900,
|
||||
'cyan-100': $cyan-100,
|
||||
'cyan-200': $cyan-200,
|
||||
'cyan-300': $cyan-300,
|
||||
'cyan-400': $cyan-400,
|
||||
'cyan-500': $cyan-500,
|
||||
'cyan-600': $cyan-600,
|
||||
'cyan-700': $cyan-700,
|
||||
'cyan-800': $cyan-800,
|
||||
'cyan-900': $cyan-900,
|
||||
'indigo-100': $indigo-100,
|
||||
'indigo-200': $indigo-200,
|
||||
'indigo-300': $indigo-300,
|
||||
'indigo-400': $indigo-400,
|
||||
'indigo-500': $indigo-500,
|
||||
'indigo-600': $indigo-600,
|
||||
'indigo-700': $indigo-700,
|
||||
'indigo-800': $indigo-800,
|
||||
'indigo-900': $indigo-900,
|
||||
'purple-100': $purple-100,
|
||||
'purple-200': $purple-200,
|
||||
'purple-300': $purple-300,
|
||||
'purple-400': $purple-400,
|
||||
'purple-500': $purple-500,
|
||||
'purple-600': $purple-600,
|
||||
'purple-700': $purple-700,
|
||||
'purple-800': $purple-800,
|
||||
'purple-900': $purple-900,
|
||||
'pink-100': $pink-100,
|
||||
'pink-200': $pink-200,
|
||||
'pink-300': $pink-300,
|
||||
'pink-400': $pink-400,
|
||||
'pink-500': $pink-500,
|
||||
'pink-600': $pink-600,
|
||||
'pink-700': $pink-700,
|
||||
'pink-800': $pink-800,
|
||||
'pink-900': $pink-900,
|
||||
);
|
||||
|
||||
// This is the same value as the default from Bootstrap, but it needs to be in scope prior to
|
||||
// importing _variables.scss from Bootstrap.
|
||||
$btn-close-width: 1em;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@use 'sass:map';
|
||||
@import './theme-base';
|
||||
|
||||
// Theme colors (BS5 classes)
|
||||
$primary: $blue-300;
|
||||
$secondary: $gray-500;
|
||||
$success: $green-300;
|
||||
|
|
@ -13,6 +14,7 @@ $light: $gray-300;
|
|||
$dark: $gray-500;
|
||||
|
||||
$theme-colors: (
|
||||
// BS5 theme colors
|
||||
'primary': $primary,
|
||||
'secondary': $secondary,
|
||||
'success': $success,
|
||||
|
|
@ -21,18 +23,23 @@ $theme-colors: (
|
|||
'danger': $danger,
|
||||
'light': $light,
|
||||
'dark': $dark,
|
||||
'red': $red-300,
|
||||
'yellow': $yellow-300,
|
||||
'green': $green-300,
|
||||
|
||||
// General-purpose palette
|
||||
'blue': $blue-300,
|
||||
'cyan': $cyan-300,
|
||||
'indigo': $indigo-300,
|
||||
'purple': $purple-300,
|
||||
'pink': $pink-300,
|
||||
'red': $red-300,
|
||||
'orange': $orange-300,
|
||||
'yellow': $yellow-300,
|
||||
'green': $green-300,
|
||||
'teal': $teal-300,
|
||||
'cyan': $cyan-300,
|
||||
'gray': $gray-300,
|
||||
'black': $black,
|
||||
'white': $white,
|
||||
);
|
||||
|
||||
$theme-colors: map-merge($theme-colors, $theme-color-addons);
|
||||
|
||||
// Gradient
|
||||
$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));
|
||||
|
||||
|
|
|
|||
|
|
@ -2,23 +2,42 @@
|
|||
|
||||
@import './theme-base.scss';
|
||||
|
||||
$theme-colors: map-merge(
|
||||
$theme-colors,
|
||||
(
|
||||
'primary': #337ab7,
|
||||
'info': #54d6f0,
|
||||
'red': $red-500,
|
||||
'yellow': $yellow-500,
|
||||
'green': $green-500,
|
||||
'blue': $blue-500,
|
||||
'cyan': $cyan-500,
|
||||
'indigo': $indigo-500,
|
||||
'purple': $purple-500,
|
||||
'pink': $pink-500,
|
||||
)
|
||||
);
|
||||
// Theme colors (BS5 classes)
|
||||
$primary: #337ab7;
|
||||
$secondary: $gray-600;
|
||||
$success: $green-500;
|
||||
$info: #54d6f0;
|
||||
$warning: $yellow-500;
|
||||
$danger: $red-500;
|
||||
$light: $gray-200;
|
||||
$dark: $gray-800;
|
||||
|
||||
$theme-colors: map-merge($theme-colors, $theme-color-addons);
|
||||
$theme-colors: (
|
||||
// BS5 theme colors
|
||||
'primary': $primary,
|
||||
'secondary': $secondary,
|
||||
'success': $success,
|
||||
'info': $info,
|
||||
'warning': $warning,
|
||||
'danger': $danger,
|
||||
'light': $light,
|
||||
'dark': $dark,
|
||||
|
||||
// General-purpose palette
|
||||
'blue': $blue-500,
|
||||
'indigo': $indigo-500,
|
||||
'purple': $purple-500,
|
||||
'pink': $pink-500,
|
||||
'red': $red-500,
|
||||
'orange': $orange-500,
|
||||
'yellow': $yellow-500,
|
||||
'green': $green-500,
|
||||
'teal': $teal-500,
|
||||
'cyan': $cyan-500,
|
||||
'gray': $gray-500,
|
||||
'black': $black,
|
||||
'white': $white,
|
||||
);
|
||||
|
||||
$light: $gray-200;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue