Use CSS vars for docs
This commit is contained in:
Jeremy Thomas
parent
32a0d2187e
commit
867a306fc3
6 changed files with 635 additions and 527 deletions
|
|
@ -2,7 +2,8 @@
|
|||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
<img class="bd-scheme-light" src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
<img class="bd-scheme-dark" src="{{ site.url }}/images/bulma-logo-light.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
|
|
|
|||
63
docs/bulma-cssvar.sass
Normal file
63
docs/bulma-cssvar.sass
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
$prefix: "bulma-"
|
||||
|
||||
$cssvar-colors: ("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), "scheme-main": ($scheme-main, $scheme-invert))
|
||||
|
||||
@function getCssVariable($color, $name)
|
||||
$hue: hue($color)
|
||||
$saturation: saturation($color)
|
||||
$lightness: lightness($color)
|
||||
$alpha: alpha($color)
|
||||
@return $hue, $saturation, $lightness
|
||||
|
||||
=cssvar($color, $name, $color-light, $color-dark)
|
||||
$hue: hue($color)
|
||||
$saturation: saturation($color)
|
||||
$lightness: lightness($color)
|
||||
$base: "#{$prefix}#{$name}"
|
||||
|
||||
--#{$base}-h: #{$hue}
|
||||
--#{$base}-s: #{$saturation}
|
||||
--#{$base}-l: #{$lightness}
|
||||
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
|
||||
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
|
||||
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
|
||||
|
||||
--#{$base}-light: #{$color-light}
|
||||
--#{$base}-light-hover: #{darken($color-light, 5%)}
|
||||
--#{$base}-light-active: #{darken($color-light, 10%)}
|
||||
|
||||
--#{$base}-dark: #{$color-dark}
|
||||
--#{$base}-dark-hover: #{darken($color-dark, 5%)}
|
||||
--#{$base}-dark-active: #{darken($color-dark, 10%)}
|
||||
|
||||
// @if $cssvar-invert
|
||||
// --#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
|
||||
// @else
|
||||
// --#{$base}-invert: #{findColorInvert($color)}
|
||||
|
||||
\:root
|
||||
@each $name, $components in $cssvar-colors
|
||||
$color: nth($components, 1)
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
// $cssvar-invert-name: ""
|
||||
|
||||
// @if length($components) >= 5
|
||||
// $color-light: nth($components, 3)
|
||||
// $color-dark: nth($components, 4)
|
||||
// $cssvar-invert-name: nth($components, 5)
|
||||
@if length($components) >= 4
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: nth($components, 4)
|
||||
// $cssvar-invert-name: findColorInvert($color)
|
||||
@else if length($components) >= 3
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: findDarkColor($color)
|
||||
// $cssvar-invert-name: findColorInvert($color)
|
||||
@else
|
||||
$color-light: findLightColor($color)
|
||||
$color-dark: findDarkColor($color)
|
||||
// $cssvar-invert-name: findColorInvert($color)
|
||||
|
||||
+cssvar($color, $name, $color-light, $color-dark)
|
||||
176
docs/bulma-cssvar.scss
Normal file
176
docs/bulma-cssvar.scss
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
$prefix: "bulma-";
|
||||
|
||||
@function findCSSVarColorInvert($color) {
|
||||
@if (colorLuminance($color) > 0.55) {
|
||||
@return var(--#{$prefix}-black-transparent);
|
||||
} @else {
|
||||
@return var(--#{$prefix}-white);
|
||||
}
|
||||
}
|
||||
|
||||
@function findCSSVarLightColor($color) {
|
||||
@if (type-of($color) == 'color') {
|
||||
$l: 96%;
|
||||
@if lightness($color) > 96% {
|
||||
$l: lightness($color);
|
||||
}
|
||||
@return change-color($color, $lightness: $l);
|
||||
}
|
||||
@return var(--#{$prefix}-background);
|
||||
}
|
||||
|
||||
@function findCSSVarDarkColor($color) {
|
||||
@if (type-of($color) == 'color') {
|
||||
$base-l: 29%;
|
||||
$luminance: colorLuminance($color);
|
||||
$luminance-delta: (0.53 - $luminance);
|
||||
$target-l: round($base-l + ($luminance-delta * 53));
|
||||
@return change-color($color, $lightness: max($base-l, $target-l));
|
||||
}
|
||||
@return var(--#{$prefix}-text-strong);
|
||||
}
|
||||
|
||||
$cssvar-colors: (
|
||||
"primary": $primary,
|
||||
"link": $link,
|
||||
"info": $info,
|
||||
"success": $success,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $white-ter,
|
||||
"dark": $grey-darker
|
||||
);
|
||||
|
||||
@function getCssVariable($color, $name) {
|
||||
$hue: hue($color);
|
||||
$saturation: saturation($color);
|
||||
$lightness: lightness($color);
|
||||
$alpha: alpha($color);
|
||||
|
||||
@return $hue, $saturation, $lightness;
|
||||
}
|
||||
|
||||
@mixin cssvar($name, $color) {
|
||||
$hue: hue($color);
|
||||
$saturation: saturation($color);
|
||||
$lightness: lightness($color);
|
||||
$base: "#{$prefix}#{$name}";
|
||||
|
||||
--#{$base}-h: #{$hue};
|
||||
--#{$base}-s: #{$saturation};
|
||||
--#{$base}-l: #{$lightness};
|
||||
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)));
|
||||
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%));
|
||||
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%));
|
||||
|
||||
$color-invert: findCSSVarColorInvert($color);
|
||||
--#{$base}-invert: #{$color-invert};
|
||||
|
||||
$color-light: findCSSVarLightColor($color);
|
||||
--#{$base}-light: #{$color-light};
|
||||
--#{$base}-light-hover: #{darken($color-light, 5%)};
|
||||
--#{$base}-light-active: #{darken($color-light, 10%)};
|
||||
|
||||
$color-dark: findCSSVarDarkColor($color);
|
||||
--#{$base}-dark: #{$color-dark};
|
||||
--#{$base}-dark-hover: #{darken($color-dark, 5%)};
|
||||
--#{$base}-dark-active: #{darken($color-dark, 10%)};
|
||||
}
|
||||
|
||||
: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};
|
||||
|
||||
@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);
|
||||
|
||||
html {
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link;
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $code-background;
|
||||
color: $code;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $hr-background-color;
|
||||
}
|
||||
|
|
@ -1,41 +1,52 @@
|
|||
@import ../sass/utilities/initial-variables.sass
|
||||
@import "../sass/utilities/initial-variables.sass"
|
||||
|
||||
// General colors
|
||||
@media (prefers-color-scheme: light)
|
||||
.bd-scheme-dark
|
||||
display: none
|
||||
|
||||
$scheme-main: $black
|
||||
$scheme-main-bis: $black-bis
|
||||
$scheme-main-ter: $black-ter
|
||||
$scheme-invert: $white
|
||||
$scheme-invert-bis: $white-bis
|
||||
$scheme-invert-ter: $white-ter
|
||||
@media (prefers-color-scheme: dark)
|
||||
.bd-scheme-light
|
||||
display: none
|
||||
html
|
||||
background-color: $scheme-invert-bis
|
||||
color: $scheme-main-ter
|
||||
.bd-navbar
|
||||
background-color: $scheme-invert-ter
|
||||
&.has-shadow
|
||||
box-shadow: none
|
||||
.title
|
||||
color: $scheme-main
|
||||
|
||||
$background: $black-ter
|
||||
// // General colors
|
||||
|
||||
$border: $grey-darker
|
||||
$border-hover: $grey-dark
|
||||
$border-light: $grey-darker
|
||||
$border-light-hover: $grey-dark
|
||||
// $scheme-main: $black
|
||||
// $scheme-main-bis: $black-bis
|
||||
// $scheme-main-ter: $black-ter
|
||||
// $scheme-invert: $white
|
||||
// $scheme-invert-bis: $white-bis
|
||||
// $scheme-invert-ter: $white-ter
|
||||
|
||||
// Text colors
|
||||
// $background: $black-ter
|
||||
|
||||
$text: $grey-light
|
||||
$text-invert: $grey-darker
|
||||
$text-light: $grey
|
||||
$text-strong: $white
|
||||
// $border: $grey-darker
|
||||
// $border-hover: $grey-dark
|
||||
// $border-light: $grey-darker
|
||||
// $border-light-hover: $grey-dark
|
||||
|
||||
// Link colors
|
||||
// // Text colors
|
||||
|
||||
$link-hover: $white
|
||||
$link-hover-border: $grey-dark
|
||||
// $text: $grey-light
|
||||
// $text-invert: $grey-darker
|
||||
// $text-light: $grey
|
||||
// $text-strong: $white
|
||||
|
||||
$link-focus: $white
|
||||
$link-focus-border: $blue
|
||||
// // Link colors
|
||||
|
||||
$link-active: $white
|
||||
$link-active-border: $grey-light
|
||||
// $link-hover: $white
|
||||
// $link-hover-border: $grey-dark
|
||||
|
||||
.bd-navbar
|
||||
background-color: $scheme-main-bis
|
||||
// $link-focus: $white
|
||||
// $link-focus-border: $blue
|
||||
|
||||
&.has-shadow
|
||||
box-shadow: none
|
||||
// $link-active: $white
|
||||
// $link-active-border: $grey-light
|
||||
|
|
|
|||
|
|
@ -24,8 +24,10 @@ $main-spacing: 3rem
|
|||
$intro-width: 1080px
|
||||
$sidebar-width: 10.5rem
|
||||
|
||||
// @import "./bulma-dark"
|
||||
@import "../bulma"
|
||||
// @import "../sass/utilities/_all.sass"
|
||||
@import "./bulma-cssvar.scss"
|
||||
// @import "./bulma-dark"
|
||||
|
||||
%center
|
||||
align-items: center
|
||||
|
|
@ -33,7 +35,7 @@ $sidebar-width: 10.5rem
|
|||
justify-content: center
|
||||
|
||||
%bd-box
|
||||
background-color: $white
|
||||
background-color: $scheme-main
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
|
||||
display: block
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue