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

Init dark theme

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-14 17:15:51 +00:00
parent 89a8b8f208
commit b73e183091
18 changed files with 1194 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
sass/utilities/css-variables.scss
View File

@@ -1,5 +1,4 @@
@function buildVarName($name, $prefix: "", $suffix: "") {
@debug $cssvars-prefix;
@return "--#{$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
}
@@ -8,6 +7,11 @@
@return var(#{$varName});
}
@function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") {
$varName: buildVarName($name, $prefix, $suffix);
@return unquote("rgba(var(#{$varName}), #{$alpha})");
}
@mixin register-var($name, $value, $prefix: "", $suffix: "") {
$varName: buildVarName($name, $prefix, $suffix);
#{$varName}: #{$value};
@@ -75,3 +79,22 @@
@include register-var($name, $invert, "", "-invert");
}
@mixin bulma-theme($name, $scope: "") {
@if ($scope == "parent") {
[data-#{$class-prefix}theme="#{$name}"] &,
.#{$class-prefix}theme-#{$name} & {
@content;
}
} @else if ($scope == "self") {
&[data-#{$class-prefix}theme="#{$name}"],
&.#{$class-prefix}theme-#{$name} {
@content;
}
} @else {
[data-#{$class-prefix}theme="#{$name}"],
.#{$class-prefix}theme-#{$name} {
@content;
}
}
}

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

@@ -1,5 +1,6 @@
@import "initial-variables";
@import "functions";
@import "css-variables";
$primary: $turquoise !default;
@@ -31,7 +32,7 @@ $info-dark: findDarkColor($info) !default;
$success-invert: findColorInvert($success) !default;
$success-light: findLightColor($success) !default;
$success-dark: findDarkColor($success) !default;
$warning-invert: findColorInvert($warning) !default;
$warning-invert: #{getVar("white")} !default;
$warning-light: findLightColor($warning) !default;
$warning-dark: findDarkColor($warning) !default;
$danger-invert: findColorInvert($danger) !default;
@@ -42,51 +43,49 @@ $dark-invert: findColorInvert($dark) !default;
// General colors
$scheme-main: $white !default;
$scheme-main-bis: $white-bis !default;
$scheme-main-ter: $white-ter !default;
$scheme-invert: $black !default;
$scheme-invert-bis: $black-bis !default;
$scheme-invert-ter: $black-ter !default;
$scheme-main: #{getVar("white")} !default;
$scheme-main-bis: #{getVar("white-bis")} !default;
$scheme-main-ter: #{getVar("white-ter")} !default;
$scheme-invert: #{getVar("text-00")} !default;
$scheme-invert-bis: #{getVar("text-05")} !default;
$scheme-invert-ter: #{getVar("text-10")} !default;
$background: $white-ter !default;
$background: #{getVar("text-90")} !default;
$border: $grey-lighter !default;
$border-hover: $grey-light !default;
$border-light: $grey-lightest !default;
$border-light-hover: $grey-light !default;
$border: #{getVar("text-85")} !default;
$border-hover: #{getVar("text-80")} !default;
$border-light: #{getVar("text-90")} !default;
$border-light-hover: #{getVar("text-85")} !default;
// Text colors
$text: $grey-dark !default;
$text-invert: findColorInvert($text) !default;
$text-light: $grey !default;
$text-strong: $grey-darker !default;
$text: #{getVar("text-25")} !default;
$text-invert: #{getVar("white")} !default;
$text-light: #{getVar("text-55")} !default;
$text-strong: #{getVar("text-10")} !default;
// Code colors
$code: darken($red, 15%) !default;
$code-background: $background !default;
$code: #{getVar("danger-60")} !default;
$code-background: #{getVar("text-90")} !default;
$pre: $text !default;
$pre-background: $background !default;
$pre: #{getVar("text-40")} !default;
$pre-background: #{getVar("text-90")} !default;
// Link colors
$link: $blue !default;
$link-invert: findColorInvert($link) !default;
$link-light: findLightColor($link) !default;
$link-dark: findDarkColor($link) !default;
$link-visited: $purple !default;
$link-hover: $grey-darker !default;
$link-hover-border: $grey-light !default;
$link-hover: #{getVar("text-20")} !default;
$link-hover-border: #{getVar("text-70")} !default;
$link-focus: $grey-darker !default;
$link-focus-border: $blue !default;
$link-focus: #{getVar("text-20")} !default;
$link-focus-border: #{getVar("link")} !default;
$link-active: $grey-darker !default;
$link-active-border: $grey-dark !default;
$link-active: #{getVar("text-20")} !default;
$link-active-border: #{getVar("text-30")} !default;
// Typography
@@ -101,8 +100,9 @@ $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-color: $black !default;
$shadow: 0 0.5em 1em -0.125em rgba(var(--bulma-shadow-color-rgb), 0.1),
0 0px 0 1px rgba(var(--bulma-shadow-color-rgb), 0.02) !default;
// Lists and maps
$custom-colors: null !default;
@@ -135,8 +135,6 @@ $colors: mergeColorMaps(
"link": (
$link,
$link-invert,
$link-light,
$link-dark
),
"info": (
$info,
@@ -161,6 +159,10 @@ $colors: mergeColorMaps(
$danger-invert,
$danger-light,
$danger-dark
),
"text": (
hsl(221, 14%, 29%),
#fff
)
),
$custom-colors

10
sass/utilities/initial-variables.scss
View File

@@ -16,13 +16,13 @@ $white-bis: hsl(0, 0%, 98%) !default;
$white: hsl(0, 0%, 100%) !default;
$orange: hsl(14, 100%, 53%) !default;
$yellow: hsl(44, 100%, 77%) !default;
$green: hsl(153, 53%, 53%) !default;
$yellow: hsl(42, 100%, 52%) !default;
$green: hsl(148, 60%, 53%) !default;
$turquoise: hsl(171, 100%, 41%) !default;
$cyan: hsl(207, 61%, 53%) !default;
$blue: hsl(229, 53%, 53%) !default;
$cyan: hsl(198, 93%, 53%) !default;
$blue: hsl(229, 63%, 53%) !default;
$purple: hsl(271, 100%, 71%) !default;
$red: hsl(348, 86%, 61%) !default;
$red: hsl(4, 86%, 61%) !default;
// Typography

6
sass/utilities/mixins.scss
View File

@@ -314,7 +314,7 @@
-moz-appearance: none;
-webkit-appearance: none;
background-color: bulmaRgba($scheme-invert, 0.2);
background-color: bulmargba(getVar("shadow-color-rgb"), 0.2);
border: none;
border-radius: $radius-rounded;
cursor: pointer;
@@ -357,11 +357,11 @@
&:hover,
&:focus {
background-color: bulmaRgba($scheme-invert, 0.3);
background-color: bulmargba(getVar("shadow-color-rgb"), 0.3);
}
&:active {
background-color: bulmaRgba($scheme-invert, 0.4);
background-color: bulmargba(getVar("shadow-color-rgb"), 0.4);
}
// Sizes