mirror of https://github.com/twbs/bootstrap.git
62 lines
2.1 KiB
SCSS
62 lines
2.1 KiB
SCSS
@use "config" as *;
|
|
|
|
// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
|
|
|
|
// Easily convert colors to oklch() with https://oklch.com/
|
|
$new-blue: oklch(60% 0.24 258) !default;
|
|
$new-indigo: oklch(56% 0.26 288) !default;
|
|
$new-violet: oklch(56% 0.24 300) !default;
|
|
$new-purple: oklch(56% 0.24 320) !default;
|
|
$new-pink: oklch(60% 0.22 4) !default;
|
|
$new-red: oklch(60% 0.22 20) !default;
|
|
$new-orange: oklch(70% 0.22 52) !default;
|
|
$new-amber: oklch(79% 0.2 78) !default;
|
|
$new-yellow: oklch(88% 0.24 88) !default;
|
|
$new-lime: oklch(65% 0.24 135) !default;
|
|
$new-green: oklch(64% 0.22 160) !default;
|
|
$new-teal: oklch(68% 0.22 190) !default;
|
|
$new-cyan: oklch(69% 0.22 220) !default;
|
|
$new-brown: oklch(60% 0.12 54) !default;
|
|
$new-gray: oklch(60% 0.02 245) !default;
|
|
$new-pewter: oklch(65% 0.01 290) !default;
|
|
|
|
$hues: (
|
|
"blue": $new-blue,
|
|
"indigo": $new-indigo,
|
|
"violet": $new-violet,
|
|
"purple": $new-purple,
|
|
"pink": $new-pink,
|
|
"red": $new-red,
|
|
"orange": $new-orange,
|
|
"amber": $new-amber,
|
|
"yellow": $new-yellow,
|
|
"lime": $new-lime,
|
|
"green": $new-green,
|
|
"teal": $new-teal,
|
|
"cyan": $new-cyan,
|
|
"brown": $new-brown,
|
|
"gray": $new-gray,
|
|
"pewter": $new-pewter
|
|
) !default;
|
|
|
|
:root {
|
|
@each $color, $hue in $hues {
|
|
--#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
|
|
--#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
|
|
--#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
|
|
--#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
|
|
--#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
|
|
--#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
|
|
--#{$prefix}#{$color}-500: #{$hue};
|
|
--#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
|
|
--#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
|
|
--#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
|
|
--#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
|
|
--#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
|
|
--#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
|
|
}
|
|
}
|
|
|
|
$white: #fff !default;
|
|
$black: #000 !default;
|