Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-05 23:15:28 +00:00
parent f8ef28e788
commit a03da2b801
11 changed files with 919 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
sass/base/generic.scss
View File

@@ -1,31 +1,31 @@
@import "../utilities/mixins";
$body-background-color: $scheme-main !default;
$body-background-color: getVar("scheme-main") !default;
$body-size: 16px !default;
$body-min-width: 300px !default;
$body-rendering: optimizeLegibility !default;
$body-family: $family-primary !default;
$body-family: getVar("family-primary") !default;
$body-overflow-x: hidden !default;
$body-overflow-y: scroll !default;
$body-color: $text !default;
$body-color: getVar("text") !default;
$body-font-size: 1em !default;
$body-weight: $weight-normal !default;
$body-weight: getVar("weight-normal") !default;
$body-line-height: 1.5 !default;
$code-family: $family-code !default;
$code-family: getVar("family-code") !default;
$code-padding: 0.25em 0.5em 0.25em !default;
$code-weight: normal !default;
$code-size: 0.875em !default;
$small-font-size: 0.875em !default;
$hr-background-color: $background !default;
$hr-background-color: getVar("background") !default;
$hr-height: 2px !default;
$hr-margin: 1.5rem 0 !default;
$strong-color: $text-strong !default;
$strong-weight: $weight-bold !default;
$strong-color: getVar("text-strong") !default;
$strong-weight: getVar("weight-bold") !default;
$pre-font-size: 0.875em !default;
$pre-padding: 1.25rem 1.5rem !default;

1
sass/base/helpers.scss
View File

@@ -1 +0,0 @@
@warn "The helpers.scss file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead.";

1
sass/components/breadcrumb.scss
View File

@@ -11,7 +11,6 @@ $breadcrumb-item-separator-color: $border-hover !default;
.#{$class-prefix}breadcrumb {
@extend %block;
@extend %unselectable;
font-size: $size-normal;

71
sass/themes/default.scss Normal file
View File

@@ -0,0 +1,71 @@
:root {
@include register-vars(
(
family-sans-serif: #{$family-sans-serif},
family-monospace: #{$family-monospace},
size-1: #{$size-1},
size-2: #{$size-2},
size-3: #{$size-3},
size-4: #{$size-4},
size-5: #{$size-5},
size-6: #{$size-6},
size-7: #{$size-7},
weight-light: #{$weight-light},
weight-normal: #{$weight-normal},
weight-medium: #{$weight-medium},
weight-semibold: #{$weight-semibold},
weight-bold: #{$weight-bold},
block-spacing: #{$block-spacing},
scheme-main: #{$white},
scheme-main-bis: #{$white-bis},
scheme-main-ter: #{$white-ter},
scheme-invert: #{$black},
scheme-invert-bis: #{$black-bis},
scheme-invert-ter: #{$black-ter},
background: #{$background},
border: #{$border},
border-hover: #{$border-hover},
border-light: #{$border-light},
border-light-hover: #{$border-light-hover},
text: #{$text},
text-invert: #{$text-invert},
text-light: #{$text-light},
text-strong: #{$text-strong},
code: #{$code},
code-background: #{$code-background},
pre: #{$pre},
pre-background: #{$pre-background},
link-light: #{$link-light},
link-dark: #{$link-dark},
link-visited: #{$link-visited},
link-hover: #{$link-hover},
link-hover-border: #{$link-hover-border},
link-focus: #{$link-focus},
link-focus-border: #{$link-focus-border},
link-active: #{$link-active},
link-active-border: #{$link-active-border},
family-primary: #{$family-primary},
family-secondary: #{$family-secondary},
family-code: #{$family-code},
size-small: #{$size-small},
size-normal: #{$size-normal},
size-medium: #{$size-medium},
size-large: #{$size-large},
shadow: #{$shadow},
)
);
@each $name, $pair in $colors {
$base: nth($pair, 1);
$invert: nth($pair, 2);
@include register-rgb($name, $base);
@include register-hsl($name, $base);
@include generate-color-palette($name, $base, $invert);
}
@each $name, $shade in $shades {
@include register-var($name, $shade);
}
}

1
sass/utilities/_all.scss
View File

@@ -4,6 +4,7 @@
@import "initial-variables";
@import "functions";
@import "derived-variables";
@import "css-variables";
@import "mixins";
@import "controls";
@import "extends";

77
sass/utilities/css-variables.scss Normal file
View File

@@ -0,0 +1,77 @@
@function buildVarName($name, $prefix: "", $suffix: "") {
@debug $cssvars-prefix;
@return "--#{$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
}
@function getVar($name, $prefix: "", $suffix: "") {
$varName: buildVarName($name, $prefix, $suffix);
@return var(#{$varName});
}
@mixin register-var($name, $value, $prefix: "", $suffix: "") {
$varName: buildVarName($name, $prefix, $suffix);
#{$varName}: #{$value};
}
@mixin register-vars($vars, $prefix: "", $suffix: "") {
@each $name, $value in $vars {
@include register-var($name, $value, $prefix, $suffix);
}
}
@mixin register-rgb($name, $value) {
@include register-var(
$name,
(red($value), green($value), blue($value)),
"",
"-rgb"
);
}
@mixin register-hsl($name, $value) {
@include register-var($name, round(hue($value)), "", "-h");
@include register-var($name, round(saturation($value)), "", "-s");
@include register-var($name, round(lightness($value)), "", "-l");
}
@mixin generate-color-palette($name, $base, $invert) {
$h: round(hue($base));
$s: round(saturation($base));
$l-base: round(
lightness($base) % 10
); // get lightness second digit: 53% -> 3%
$l-0: 0%; // 5% or less
$l-5: 5%; // more than 5%
@if ($l-base < 5%) {
$l-0: $l-base;
$l-5: $l-base + 5%;
} @else {
$l-0: $l-base - 5%;
$l-5: $l-base;
}
@include register-var($name, $base);
@include register-var($name, $base, "", "-base");
@for $i from 0 through 9 {
$color-l-0: $l-0 +
$i *
10; // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc.
$color-l-5: $l-5 +
$i *
10; // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc.
$v-0: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$color-l-0})";
$v-5: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$color-l-5})";
@include register-var($name, $v-0, "", "-#{$i}0");
@include register-var($name, $v-5, "", "-#{$i}5");
}
@if ($l-base < 5%) {
$v: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$l-base + 95%})";
@include register-var($name, $v, "", "-95");
}
@include register-var($name, $invert, "", "-invert");
}

76
sass/utilities/derived-variables.scss
View File

@@ -101,14 +101,84 @@ $size-large: $size-4 !default;
// Effects
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0px 0 1px rgba($scheme-invert, 0.02) !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;
$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;
$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
sass/utilities/initial-variables.scss
View File

@@ -124,3 +124,4 @@ $rtl: false !default;
// Prefixes
$class-prefix: "" !default;
$cssvars-prefix: "bulma-" !default;