diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 8f36dc837..6e379ded3 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -24,42 +24,49 @@ --grey-lighter: var(--grey-200); --grey-lightest: var(--grey-100); --input-border-color: var(--grey-200); + --white-h: 0deg; --white-s: 0%; --white-l: 100%; --white-a: 1; --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a)); --white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75); + --black-h: 0deg; --black-s: 0%; --black-l: 4%; --black-a: 1; --black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a)); - // $warning / $orange: #ff851b or hsl(27.9, 100%, 55.3%) + + // $warning / $orange: #ff851b --warning-h: 27.9deg; --warning-s: 100%; --warning-l: 55.3%; --warning-a: 1; --warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a)); - // $success / $green is #00db60 or hsl(146.3, 100%, 42.9%) + + // $success / $green is #00db60 --success-h: 146.3deg; --success-s: 100%; --success-l: 42.9%; --success-a: 1; --success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a)); - // $danger / $red is #ff4136 or hsl(3.3, 100%, 60.6%) + + // $danger / $red is #ff4136 --danger-h: 3.3deg; --danger-s: 100%; --danger-l: 60.6%; --danger-a: 1; --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a)); - // var(--primary) / $blue is #1973ff or hsl(216.5, 100%, 54.9%) + + // var(--primary) / $blue is #1973ff --primary-h: 216.5deg; --primary-s: 100%; --primary-l: 54.9%; --primary-a: 1; --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l); --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); + // END Overrides of Bulma defaults // Define custom color variable to prevent change in dark mode