mirror of
https://github.com/jgthms/bulma
synced 2026-03-22 13:04:29 -07:00
Merge branch 'master' into css-variables-with-fallback
This commit is contained in:
Jeremy Thomas
@@ -3,7 +3,7 @@
|
||||
|
||||
@import "initial-variables.sass"
|
||||
@import "functions.sass"
|
||||
@import "derived-variables.scss"
|
||||
@import "derived-variables.sass"
|
||||
@import "animations.sass"
|
||||
@import "mixins.sass"
|
||||
@import "controls.sass"
|
||||
|
||||
114
sass/utilities/derived-variables.sass
Normal file
114
sass/utilities/derived-variables.sass
Normal file
@@ -0,0 +1,114 @@
|
||||
$primary: var(--turquoise, #{$turquoise}) !default
|
||||
|
||||
$info: var(--cyan, #{$cyan}) !default
|
||||
$success: var(--green, #{$green}) !default
|
||||
$warning: var(--yellow, #{$yellow}) !default
|
||||
$danger: var(--red, #{$red}) !default
|
||||
|
||||
$light: var(--white-ter, #{$white-ter}) !default
|
||||
$dark: var(--grey-darker, #{$grey-darker}) !default
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default
|
||||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
|
||||
$primary-invert: findColorInvert($primary, $turquoise) !default
|
||||
$primary-light: findLightColor($primary, $turquoise) !default
|
||||
$primary-dark: findDarkColor($primary, $turquoise) !default
|
||||
$info-invert: findColorInvert($info, $cyan) !default
|
||||
$info-light: findLightColor($info, $cyan) !default
|
||||
$info-dark: findDarkColor($info, $cyan) !default
|
||||
$success-invert: findColorInvert($success, $green) !default
|
||||
$success-light: findLightColor($success, $green) !default
|
||||
$success-dark: findDarkColor($success, $green) !default
|
||||
$warning-invert: findColorInvert($warning, $yellow) !default
|
||||
$warning-light: findLightColor($warning, $yellow) !default
|
||||
$warning-dark: findDarkColor($warning, $yellow) !default
|
||||
$danger-invert: findColorInvert($danger, $red) !default
|
||||
$danger-light: findLightColor($danger, $red) !default
|
||||
$danger-dark: findDarkColor($danger, $red) !default
|
||||
$light-invert: findColorInvert($light, $white-ter) !default
|
||||
$light-light: findLightColor($light, $white-ter) !default
|
||||
$light-dark: findDarkColor($light, $white-ter) !default
|
||||
$dark-invert: findColorInvert($dark, $grey-darker) !default
|
||||
$dark-light: findLightColor($dark, $grey-darker) !default
|
||||
$dark-dark: findDarkColor($dark, $grey-darker) !default
|
||||
|
||||
// General colors
|
||||
|
||||
$scheme-main: var(--white, #{$white}) !default
|
||||
$scheme-main-bis: var(--white-bis, #{$white-bis}) !default
|
||||
$scheme-main-ter: var(--white-ter, #{$white-ter}) !default
|
||||
$scheme-invert: var(--black, #{$black}) !default
|
||||
$scheme-invert-rgb: bulmaToRGB($black) !default
|
||||
$scheme-invert-bis: var(--black-bis, #{$black-bis}) !default
|
||||
$scheme-invert-ter: var(--black-ter, #{$black-ter}) !default
|
||||
|
||||
$background: var(--white-ter, #{$white-ter}) !default
|
||||
|
||||
$border: var(--grey-lighter, #{$grey-lighter}) !default
|
||||
$border-rgb: bulmaToRGB($grey-lighter) !default
|
||||
$border-hover: var(--grey-light, #{$grey-light}) !default
|
||||
$border-light: var(--grey-lightest, #{$grey-lightest}) !default
|
||||
$border-light-hover: var(--grey-light, #{$grey-light}) !default
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: var(--grey-dark, #{$grey-dark}) !default
|
||||
$text-invert: findColorInvert($text, $grey-dark) !default
|
||||
$text-light: var(--grey, #{$grey}) !default
|
||||
$text-strong: var(--grey-darker, #{$grey-darker}) !default
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: var(--red, #{darken($red, 15%)}) !default
|
||||
$code-background: var(--background, #{$background}) !default
|
||||
|
||||
$pre: var(--text, #{$text}) !default
|
||||
$pre-background: var(--background, #{$background}) !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: var(--blue, #{$blue}) !default
|
||||
$link-rgb: bulmaToRGB($blue) !default
|
||||
$link-invert: findColorInvert($link, $blue) !default
|
||||
$link-light: findLightColor($link, $blue) !default
|
||||
$link-dark: findDarkColor($link, $blue) !default
|
||||
$link-visited: var(--purple, #{$purple}) !default
|
||||
|
||||
$link-hover: var(--grey-darker, #{$grey-darker}) !default
|
||||
$link-hover-border: var(--grey-light, #{$grey-light}) !default
|
||||
|
||||
$link-focus: var(--grey-darker, #{$grey-darker}) !default
|
||||
$link-focus-border: var(--blue, #{$blue}) !default
|
||||
|
||||
$link-active: var(--grey-darker, #{$grey-darker}) !default
|
||||
$link-active-border: var(--grey-dark, #{$grey-dark}) !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: var(--family-sans-serif, #{$family-sans-serif}) !default
|
||||
$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default
|
||||
$family-code: var(--family-monospace, #{$family-monospace}) !default
|
||||
|
||||
$size-small: var(--size-7, #{size-7}) !default
|
||||
$size-normal: var(--size-6, #{size-6}) !default
|
||||
$size-medium: var(--size-5, #{size-5}) !default
|
||||
$size-large: var(--size-4, #{size-4}) !default
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
||||
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
@@ -1,139 +0,0 @@
|
||||
$primary: var(--turquoise, #{$turquoise}) !default;
|
||||
|
||||
$info : var(--cyan, #{$cyan}) !default;
|
||||
$success: var(--green, #{$green}) !default;
|
||||
$warning: var(--yellow, #{$yellow}) !default;
|
||||
$danger : var(--red, #{$red}) !default;
|
||||
|
||||
$light : var(--white-ter, #{$white-ter}) !default;
|
||||
$dark : var(--grey-darker, #{$grey-darker}) !default;
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert : findColorInvert($orange) !default;
|
||||
$yellow-invert : findColorInvert($yellow) !default;
|
||||
$green-invert : findColorInvert($green) !default;
|
||||
$turquoise-invert: findColorInvert($turquoise) !default;
|
||||
$cyan-invert : findColorInvert($cyan) !default;
|
||||
$blue-invert : findColorInvert($blue) !default;
|
||||
$purple-invert : findColorInvert($purple) !default;
|
||||
$red-invert : findColorInvert($red) !default;
|
||||
|
||||
$primary-invert : findColorInvert($primary, $turquoise) !default;
|
||||
$primary-light : findLightColor($primary, $turquoise) !default;
|
||||
$primary-dark : findDarkColor($primary, $turquoise) !default;
|
||||
$info-invert : findColorInvert($info, $cyan) !default;
|
||||
$info-light : findLightColor($info, $cyan) !default;
|
||||
$info-dark : findDarkColor($info, $cyan) !default;
|
||||
$success-invert : findColorInvert($success, $green) !default;
|
||||
$success-light : findLightColor($success, $green) !default;
|
||||
$success-dark : findDarkColor($success, $green) !default;
|
||||
$warning-invert : findColorInvert($warning, $yellow) !default;
|
||||
$warning-light : findLightColor($warning, $yellow) !default;
|
||||
$warning-dark : findDarkColor($warning, $yellow) !default;
|
||||
$danger-invert : findColorInvert($danger, $red) !default;
|
||||
$danger-light : findLightColor($danger, $red) !default;
|
||||
$danger-dark : findDarkColor($danger, $red) !default;
|
||||
$light-invert : findColorInvert($light, $white-ter) !default;
|
||||
$light-light : findLightColor($light, $white-ter) !default;
|
||||
$light-dark : findDarkColor($light, $white-ter) !default;
|
||||
$dark-invert : findColorInvert($dark, $grey-darker) !default;
|
||||
$dark-light : findLightColor($dark, $grey-darker) !default;
|
||||
$dark-dark : findDarkColor($dark, $grey-darker) !default;
|
||||
|
||||
// General colors
|
||||
|
||||
$scheme-main : var(--white, #{$white}) !default;
|
||||
$scheme-main-bis : var(--white-bis, #{$white-bis}) !default;
|
||||
$scheme-main-ter : var(--white-ter, #{$white-ter}) !default;
|
||||
$scheme-invert : var(--black, #{$black}) !default;
|
||||
$scheme-invert-rgb : bulmaToRGB($black) !default;
|
||||
$scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
|
||||
$scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
|
||||
|
||||
$background : var(--white-ter, #{$white-ter}) !default;
|
||||
|
||||
$border : var(--grey-lighter, #{$grey-lighter}) !default;
|
||||
$border-rgb : bulmaToRGB($grey-lighter) !default;
|
||||
$border-hover : var(--grey-light, #{$grey-light}) !default;
|
||||
$border-light : var(--grey-lightest, #{$grey-lightest}) !default;
|
||||
$border-light-hover: var(--grey-light, #{$grey-light}) !default;
|
||||
|
||||
// Text colors
|
||||
|
||||
$text : var(--grey-dark, #{$grey-dark}) !default;
|
||||
$text-invert: findColorInvert($text, $grey-dark) !default;
|
||||
$text-light : var(--grey, #{$grey}) !default;
|
||||
$text-strong: var(--grey-darker, #{$grey-darker}) !default;
|
||||
|
||||
// Code colors
|
||||
|
||||
$code : var(--red, #{darken($red, 15%)}) !default;
|
||||
$code-background: var(--background, #{$background}) !default;
|
||||
|
||||
$pre : var(--text, #{$text}) !default;
|
||||
$pre-background : var(--background, #{$background}) !default;
|
||||
|
||||
// Link colors
|
||||
|
||||
$link : var(--blue, #{$blue}) !default;
|
||||
$link-rgb : bulmaToRGB($blue) !default;
|
||||
$link-invert : findColorInvert($link, $blue) !default;
|
||||
$link-light : findLightColor($link, $blue) !default;
|
||||
$link-dark : findDarkColor($link, $blue) !default;
|
||||
$link-visited : var(--purple, #{$purple}) !default;
|
||||
|
||||
$link-hover : var(--grey-darker, #{$grey-darker}) !default;
|
||||
$link-hover-border : var(--grey-light, #{$grey-light}) !default;
|
||||
|
||||
$link-focus : var(--grey-darker, #{$grey-darker}) !default;
|
||||
$link-focus-border : var(--blue, #{$blue}) !default;
|
||||
|
||||
$link-active : var(--grey-darker, #{$grey-darker}) !default;
|
||||
$link-active-border: var(--grey-dark, #{$grey-dark}) !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary : var(--family-sans-serif, #{$family-sans-serif}) !default;
|
||||
$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
|
||||
$family-code : var(--family-monospace, #{$family-monospace}) !default;
|
||||
|
||||
$size-small : var(--size-7, #{size-7}) !default;
|
||||
$size-normal: var(--size-6, #{size-6}) !default;
|
||||
$size-medium: var(--size-5, #{size-5}) !default;
|
||||
$size-large : var(--size-4, #{size-4}) !default;
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default;
|
||||
$custom-shades: null !default;
|
||||
|
||||
$colors: mergeColorMaps(
|
||||
(
|
||||
"white" : ($white, $black),
|
||||
"black" : ($black, $white),
|
||||
"light" : ($light, $light-invert),
|
||||
"dark" : ($dark, $dark-invert),
|
||||
"primary": ($primary, $primary-invert, $primary-light, $primary-dark),
|
||||
"link" : ($link, $link-invert, $link-light, $link-dark),
|
||||
"info" : ($info, $info-invert, $info-light, $info-dark),
|
||||
"success": ($success, $success-invert, $success-light, $success-dark),
|
||||
"warning": ($warning, $warning-invert, $warning-light, $warning-dark),
|
||||
"danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
|
||||
$custom-colors
|
||||
) !default;
|
||||
|
||||
$shades: mergeColorMaps(
|
||||
(
|
||||
"black-bis" : $black-bis,
|
||||
"black-ter" : $black-ter,
|
||||
"grey-darker" : $grey-darker,
|
||||
"grey-dark" : $grey-dark,
|
||||
"grey" : $grey,
|
||||
"grey-light" : $grey-light,
|
||||
"grey-lighter": $grey-lighter,
|
||||
"white-ter" : $white-ter,
|
||||
"white-bis" : $white-bis),
|
||||
$custom-shades
|
||||
) !default;
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
|
||||
Reference in New Issue
Block a user