Simplify theme color palette
This commit is contained in:
parent
7b66dae2f0
commit
a0d6cb1fd3
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));
|
||||
|
||||
|
|
|
|||
|
|
@ -4,23 +4,42 @@
|
|||
|
||||
$input-border-color: $gray-200;
|
||||
|
||||
$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