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 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

8
docs/.gitignore vendored
View File

@@ -6,20 +6,21 @@ _config.local.yml
_config.version.yml
_layouts/basic.html
_layouts/dev.html
bulma-test.css
bulma-test.sass
bulma-test.scss
bulma-test.css
bulma-website-local.sass
css/bulma-test.css
css/bulma-docs.css.map
PUBLISHING.md
css/bulma-test.css
npm-debug.log
PUBLISHING.md
test.html
test.sass
test.scss
# Folders
.jekyll-cache
.sass-cache
/bulma
/cypress/videos
@@ -28,4 +29,3 @@ test.scss
/styles/node_modules
/versions
_site
.jekyll-cache

22
docs/_layouts/cypress.html
View File

@@ -1,14 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="theme-dark">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %}</title>
<title>
{% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{%
else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {%
endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %}
</title>
<link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
<link rel="stylesheet" href="{{ site.url }}/css/bulma.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
<link
rel="stylesheet"
href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css"
/>
<link rel="stylesheet" href="{{ site.url }}/css/bulma.css?v={{ site.time |
date: "%Y%m%d%H%M" }}">
</head>
<body>
{{ content }}

1
docs/bulma.scss vendored
View File

@@ -1,2 +1,3 @@
@charset "utf-8";
@import "../bulma";
// @import "../sass/themes/dark";

1512
docs/css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

32
docs/cyp/base/generic.html
View File

@@ -10,24 +10,38 @@ title: Base/Generic
<header>header</header>
<hgroup>hgroup</hgroup>
<section>section</section>
<body>body</body>
<body>
body
</body>
<button>button</button>
<input>input</button>
<input />
<optgroup>optgroup</optgroup>
<select>select</select>
<select>
select
</select>
<textarea>textarea</textarea>
<code>code</code>
<pre>pre<code>code</code></pre>
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
<img
src="{{ site.url }}/images/bulma-logo.png"
alt="Bulma: a modern CSS framework based on Flexbox"
width="112"
height="28"
/>
<a>Link <strong>strong</strong></a>
<hr>hr</pre>
<img>img</pre>
<hr />
<img />
<small>small</small>
<span>span</span>
<strong>strong</strong>
<fieldset>fieldset</fieldset>
<table><tr><th>th</th><td>td</td></tr></table>
<table>
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>
<fieldset>
<input type="checkbox" name="check">
<input type="radio" name="rad">
<input type="checkbox" name="check" />
<input type="radio" name="rad" />
</fieldset>

2
sass/components/card.scss
View File

@@ -8,7 +8,7 @@ $card-radius: 0.25rem !default;
$card-header-background-color: transparent !default;
$card-header-color: getVar("text-strong") !default;
$card-header-padding: 0.75rem 1rem !default;
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; // TODO
$card-header-shadow: 0 0.125em 0.25em rgba(getVar("shadow-color-rgb"), 0.1) !default; // TODO
$card-header-weight: getVar("weight-bold") !default;
$card-content-background-color: transparent !default;

2
sass/components/modal.scss
View File

@@ -2,7 +2,7 @@
$modal-z: 40 !default;
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default;
$modal-background-background-color: bulmargba(getVar("shadow-color-rgb"), 0.86) !default;
$modal-content-width: 640px !default;
$modal-content-margin-mobile: 20px !default;

14
sass/components/navbar.scss
View File

@@ -34,8 +34,8 @@ $navbar-dropdown-radius: getVar("radius-large") !default;
$navbar-dropdown-z: 20 !default;
$navbar-dropdown-boxed-radius: getVar("radius-large") !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1),
0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1),
0 0 0 1px bulmargba(getVar("shadow-color-rgb"), 0.1) !default;
$navbar-dropdown-item-hover-color: getVar("scheme-invert") !default;
$navbar-dropdown-item-hover-background-color: getVar("background") !default;
@@ -396,7 +396,7 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-menu {
background-color: getVar("navbar-background-color");
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
box-shadow: 0 8px 16px bulmargba(getVar("shadow-color-rgb"), 0.1);
padding: 0.5rem 0;
&.is-active {
@@ -415,7 +415,7 @@ a.#{$class-prefix}navbar-item,
bottom: 0;
&.has-shadow {
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1);
}
}
@@ -541,7 +541,7 @@ a.#{$class-prefix}navbar-item,
getVar("navbar-dropdown-radius") 0 0;
border-top: none;
bottom: 100%;
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
box-shadow: 0 -8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1);
top: auto;
}
}
@@ -585,7 +585,7 @@ a.#{$class-prefix}navbar-item,
border-bottom-left-radius: getVar("navbar-dropdown-radius");
border-bottom-right-radius: getVar("navbar-dropdown-radius");
border-top: getVar("navbar-dropdown-border-top");
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
box-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1);
display: none;
font-size: 0.875rem;
@include ltr-position(0, false);
@@ -662,7 +662,7 @@ a.#{$class-prefix}navbar-item,
bottom: 0;
&.has-shadow {
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1);
}
}

2
sass/components/pagination.scss
View File

@@ -33,7 +33,7 @@ $pagination-current-border-color: getVar("link") !default;
$pagination-ellipsis-color: getVar("grey-light") !default;
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
$pagination-shadow-inset: inset 0 1px 2px rgba(getVar("shadow-color-rgb"), 0.2) !default;
:root {
@include register-vars(

4
sass/elements/box.scss
View File

@@ -6,9 +6,9 @@ $box-radius: getVar("radius-large") !default;
$box-shadow: getVar("shadow") !default;
$box-padding: 1.25rem !default;
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba(getVar("shadow-color-rgb"), 0.1),
0 0 0 1px getVar("link") !default;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2),
$box-link-active-shadow: inset 0 1px 2px rgba(getVar("shadow-color-rgb"), 0.2),
0 0 0 1px getVar("link") !default;
:root {

2
sass/form/shared.scss
View File

@@ -7,7 +7,7 @@ $input-color: $text-strong !default;
$input-background-color: $scheme-main !default;
$input-border-color: $border !default;
$input-height: $control-height !default;
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default;
$input-shadow: inset 0 0.0625em 0.125em rgba(getVar("shadow-color-rgb"), 0.05) !default;
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default;
$input-hover-color: $text-strong !default;

2
sass/layout/hero.scss
View File

@@ -95,7 +95,7 @@ $hero-colors: $colors !default;
color: $color-invert;
&:hover {
background-color: bulmaRgba($scheme-invert, 0.1);
background-color: bulmargba(getVar("shadow-color-rgb"), 0.1);
}
}

64
sass/themes/dark.scss Normal file
View File

@@ -0,0 +1,64 @@
// $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;
// $background: $black-ter;
// $border: $grey-darker;
// $border-hover: $grey-dark;
// $border-light: $grey-darker;
// $border-light-hover: $grey-dark;
// $text: $grey-light;
// $text-invert: $grey-darker;
// $text-light: $grey;
// $text-strong: $white;
// $link-hover: $white;
// $link-hover-border: $grey-dark;
// $link-focus: $white;
// $link-focus-border: $blue;
// $link-active: $white;
// $link-active-border: $grey-light;
@include bulma-theme($name: "dark") {
@include register-vars(
(
scheme-main: #{$black-bis},
scheme-main-bis: #{$black-ter},
scheme-main-ter: #{$grey-darker},
scheme-invert: #{$white},
scheme-invert-bis: #{$white-bis},
scheme-invert-ter: #{$white-ter},
background: #{$black-ter},
border: #{$grey-darker},
border-hover: #{$grey-dark},
border-light: #{$grey-darker},
border-light-hover: #{$grey-dark},
text: #{$grey-light},
text-invert: #{$grey-darker},
text-light: #{$grey},
text-strong: #{$white},
link-hover: #{$white},
link-hover-border: #{$grey-dark},
link-focus: #{$white},
link-focus-border: #{$blue},
link-active: #{$white},
link-active-border: #{$grey-light},
shadow: #{0 0.5em 1em -0.125em rgba($white, 0.2),
0 0px 0 1px rgba($white, 0.04)},
)
);
}

91
sass/themes/default.scss
View File

@@ -1,6 +1,31 @@
:root {
@include register-vars(
(
scheme-main: #{$scheme-main},
scheme-main-bis: #{$scheme-main-bis},
scheme-main-ter: #{$scheme-main-ter},
scheme-invert: #{$scheme-invert},
scheme-invert-bis: #{$scheme-invert-bis},
scheme-invert-ter: #{$scheme-invert-ter},
text: #{$text},
text-invert: #{$text-invert},
text-light: #{$text-light},
text-strong: #{$text-strong},
background: #{$background},
border: #{$border},
border-hover: #{$border-hover},
border-light: #{$border-light},
border-light-hover: #{$border-light-hover},
code: #{$code},
code-background: #{$code-background},
pre: #{$pre},
pre-background: #{$pre-background},
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-sans-serif: #{$family-sans-serif},
family-monospace: #{$family-monospace},
size-1: #{$size-1},
@@ -23,35 +48,6 @@
radius-large: #{$radius-large},
radius-rounded: #{$radius-rounded},
speed: #{$speed},
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},
@@ -63,6 +59,8 @@
)
);
@include register-rgb("shadow-color", $shadow-color);
@each $name, $pair in $colors {
$base: nth($pair, 1);
$invert: nth($pair, 2);
@@ -75,4 +73,39 @@
@each $name, $shade in $shades {
@include register-var($name, $shade);
}
/*@include register-vars(
(
scheme-main: #{getVar("white")},
scheme-main-bis: #{getVar("white-bis")},
scheme-main-ter: #{getVar("white-ter")},
scheme-invert: #{getVar("text-00")},
scheme-invert-bis: #{getVar("text-05")},
scheme-invert-ter: #{getVar("text-10")},
text: #{getVar("text-25")},
text-invert: #{getVar("white")},
text-light: #{getVar("text-55")},
text-strong: #{getVar("text-10")},
background: #{getVar("text-90")},
border: #{getVar("text-85")},
border-hover: #{getVar("text-80")},
border-light: #{getVar("text-90")},
border-light-hover: #{getVar("text-85")},
code: #{getVar("danger-60")},
code-background: #{getVar("text-90")},
pre: #{getVar("text-40")},
pre-background: #{getVar("text-90")},
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},
)
);*/
}

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