Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Style dark components

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-18 20:29:40 -04:00
parent 6b09dcfcf0
commit 9209d1fe42
25 changed files with 1079 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
docs/bulma-cssvar.scss
View File

@@ -2,9 +2,9 @@ $prefix: "bulma-";
@function findCSSVarColorInvert($color) {
@if (colorLuminance($color) > 0.55) {
@return var(--#{$prefix}-black-transparent);
@return var(--#{$prefix}black-transparent);
} @else {
@return var(--#{$prefix}-white);
@return var(--#{$prefix}white);
}
}
@@ -16,7 +16,7 @@ $prefix: "bulma-";
}
@return change-color($color, $lightness: $l);
}
@return var(--#{$prefix}-background);
@return var(--#{$prefix}background);
}
@function findCSSVarDarkColor($color) {
@@ -27,7 +27,7 @@ $prefix: "bulma-";
$target-l: round($base-l + ($luminance-delta * 53));
@return change-color($color, $lightness: max($base-l, $target-l));
}
@return var(--#{$prefix}-text-strong);
@return var(--#{$prefix}text-strong);
}
$cssvar-colors: (
@@ -78,78 +78,78 @@ $cssvar-colors: (
}
:root {
--#{$prefix}-white: #{$white};
--#{$prefix}-black: #{$black};
--#{$prefix}-black-transparent: #{rgba(#000, 0.7)};
--#{$prefix}-scheme-main: #{$white};
--#{$prefix}-scheme-main-bis: #{$white-bis};
--#{$prefix}-scheme-main-ter: #{$white-ter};
--#{$prefix}-scheme-invert: #{$black};
--#{$prefix}-scheme-invert-bis: #{$black-bis};
--#{$prefix}-scheme-invert-ter: #{$black-ter};
--#{$prefix}-background: #{$white-ter};
--#{$prefix}-border: #{$grey-lighter};
--#{$prefix}-border-hover: #{$grey-light};
--#{$prefix}-border-light: #{$grey-lightest};
--#{$prefix}-border-light-hover: #{$grey-light};
--#{$prefix}-text: #{$grey-dark};
--#{$prefix}-text-invert: #{findCSSVarColorInvert($text)};
--#{$prefix}-text-light: #{$grey};
--#{$prefix}-text-strong: #{$grey-darker};
--#{$prefix}-code: #{$red};
--#{$prefix}-code-background: #{$background};
--#{$prefix}-pre: #{$text};
--#{$prefix}-pre-background: #{$background};
--#{$prefix}-link: #{$blue};
--#{$prefix}-link-invert: #{findCSSVarColorInvert($link)};
--#{$prefix}-link-light: #{findCSSVarLightColor($link)};
--#{$prefix}-link-dark: #{findCSSVarDarkColor($link)};
--#{$prefix}-link-visited: #{$purple};
--#{$prefix}-link-hover: #{$grey-darker};
--#{$prefix}-link-hover-border: #{$grey-light};
--#{$prefix}-link-focus: #{$grey-darker};
--#{$prefix}-link-focus-border: #{$blue};
--#{$prefix}-link-active: #{$grey-darker};
--#{$prefix}-link-active-border: #{$grey-dark};
--#{$prefix}white: #{$white};
--#{$prefix}black: #{$black};
--#{$prefix}black-transparent: #{rgba(#000, 0.7)};
--#{$prefix}scheme-main: #{$white};
--#{$prefix}scheme-main-bis: #{$white-bis};
--#{$prefix}scheme-main-ter: #{$white-ter};
--#{$prefix}scheme-invert: #{$black};
--#{$prefix}scheme-invert-bis: #{$black-bis};
--#{$prefix}scheme-invert-ter: #{$black-ter};
--#{$prefix}background: #{$white-ter};
--#{$prefix}border: #{$grey-lighter};
--#{$prefix}border-hover: #{$grey-light};
--#{$prefix}border-light: #{$grey-lightest};
--#{$prefix}border-light-hover: #{$grey-light};
--#{$prefix}text: #{$grey-dark};
--#{$prefix}text-invert: #{findCSSVarColorInvert($text)};
--#{$prefix}text-light: #{$grey};
--#{$prefix}text-strong: #{$grey-darker};
--#{$prefix}code: #{$red};
--#{$prefix}code-background: #{$background};
--#{$prefix}pre: #{$text};
--#{$prefix}pre-background: #{$background};
--#{$prefix}link: #{$blue};
--#{$prefix}link-invert: #{findCSSVarColorInvert($link)};
--#{$prefix}link-light: #{findCSSVarLightColor($link)};
--#{$prefix}link-dark: #{findCSSVarDarkColor($link)};
--#{$prefix}link-visited: #{$purple};
--#{$prefix}link-hover: #{$grey-darker};
--#{$prefix}link-hover-border: #{$grey-light};
--#{$prefix}link-focus: #{$grey-darker};
--#{$prefix}link-focus-border: #{$blue};
--#{$prefix}link-active: #{$grey-darker};
--#{$prefix}link-active-border: #{$grey-dark};
@each $name, $color in $cssvar-colors {
@include cssvar($name, $color);
}
}
$white: var(--#{$prefix}-white);
$black: var(--#{$prefix}-black);
$black-transparent: var(--#{$prefix}-black-transparent);
$scheme-main: var(--#{$prefix}-scheme-main);
$scheme-main-bis: var(--#{$prefix}-scheme-main-bis);
$scheme-main-ter: var(--#{$prefix}-scheme-main-ter);
$scheme-invert: var(--#{$prefix}-scheme-invert);
$scheme-invert-bis: var(--#{$prefix}-scheme-invert-bis);
$scheme-invert-ter: var(--#{$prefix}-scheme-invert-ter);
$background: var(--#{$prefix}-background);
$border: var(--#{$prefix}-border);
$border-hover: var(--#{$prefix}-border-hover);
$border-light: var(--#{$prefix}-border-light);
$border-light-hover: var(--#{$prefix}-border-light-hover);
$text: var(--#{$prefix}-text);
$text-invert: var(--#{$prefix}-text-invert);
$text-light: var(--#{$prefix}-text-light);
$text-strong: var(--#{$prefix}-text-strong);
$code: var(--#{$prefix}-code);
$code-background: var(--#{$prefix}-code-background);
$pre: var(--#{$prefix}-pre);
$pre-background: var(--#{$prefix}-pre-background);
$link: var(--#{$prefix}-link);
$link-invert: var(--#{$prefix}-link-invert);
$link-light: var(--#{$prefix}-link-light);
$link-dark: var(--#{$prefix}-link-dark);
$link-visited: var(--#{$prefix}-link-visited);
$link-hover: var(--#{$prefix}-link-hover);
$link-hover-border: var(--#{$prefix}-link-hover-border);
$link-focus: var(--#{$prefix}-link-focus);
$link-focus-border: var(--#{$prefix}-link-focus-border);
$link-active: var(--#{$prefix}-link-active);
$link-active-border: var(--#{$prefix}-link-active-border);
$white: var(--#{$prefix}white);
$black: var(--#{$prefix}black);
$black-transparent: var(--#{$prefix}black-transparent);
$scheme-main: var(--#{$prefix}scheme-main);
$scheme-main-bis: var(--#{$prefix}scheme-main-bis);
$scheme-main-ter: var(--#{$prefix}scheme-main-ter);
$scheme-invert: var(--#{$prefix}scheme-invert);
$scheme-invert-bis: var(--#{$prefix}scheme-invert-bis);
$scheme-invert-ter: var(--#{$prefix}scheme-invert-ter);
$background: var(--#{$prefix}background);
$border: var(--#{$prefix}border);
$border-hover: var(--#{$prefix}border-hover);
$border-light: var(--#{$prefix}border-light);
$border-light-hover: var(--#{$prefix}border-light-hover);
$text: var(--#{$prefix}text);
$text-invert: var(--#{$prefix}text-invert);
$text-light: var(--#{$prefix}text-light);
$text-strong: var(--#{$prefix}text-strong);
$code: var(--#{$prefix}code);
$code-background: var(--#{$prefix}code-background);
$pre: var(--#{$prefix}pre);
$pre-background: var(--#{$prefix}pre-background);
$link: var(--#{$prefix}link);
$link-invert: var(--#{$prefix}link-invert);
$link-light: var(--#{$prefix}link-light);
$link-dark: var(--#{$prefix}link-dark);
$link-visited: var(--#{$prefix}link-visited);
$link-hover: var(--#{$prefix}link-hover);
$link-hover-border: var(--#{$prefix}link-hover-border);
$link-focus: var(--#{$prefix}link-focus);
$link-focus-border: var(--#{$prefix}link-focus-border);
$link-active: var(--#{$prefix}link-active);
$link-active-border: var(--#{$prefix}link-active-border);
html {
background-color: $scheme-main;