From c5312c4696f57e80a874c37c244f2ca00865123e Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 3 Feb 2023 12:25:54 +0000 Subject: [PATCH] Add more button variables --- docs/.gitignore | 1 + docs/bulma.scss | 2 +- docs/css/bulma.css | 157 ++++++++++++++++++++++++----------- sass/components/message.scss | 91 +++++++++++++------- sass/elements/button.scss | 12 +-- 5 files changed, 180 insertions(+), 83 deletions(-) diff --git a/docs/.gitignore b/docs/.gitignore index 14acf1d5a..5e5ff8f54 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -27,5 +27,6 @@ test.scss /dev /icons /styles/node_modules +/test /versions _site diff --git a/docs/bulma.scss b/docs/bulma.scss index 9febe6a63..43e055179 100644 --- a/docs/bulma.scss +++ b/docs/bulma.scss @@ -1,3 +1,3 @@ @charset "utf-8"; @import "../bulma"; -// @import "../sass/themes/dark"; +@import "../sass/themes/dark"; diff --git a/docs/css/bulma.css b/docs/css/bulma.css index 7eb81a30c..ef65ecedb 100644 --- a/docs/css/bulma.css +++ b/docs/css/bulma.css @@ -539,6 +539,7 @@ a.box:active { --bulma-button-color: var(--bulma-text-strong); --bulma-button-background-color: var(--bulma-scheme-main); --bulma-button-family: false; + --bulma-button-weight: var(--bulma-weight-medium); --bulma-button-border-color: var(--bulma-border); --bulma-button-border-width: var(--bulma-control-border-width); --bulma-button-padding-vertical: calc( 0.5em - var(--bulma-button-border-width)); @@ -586,6 +587,7 @@ a.box:active { border-width: var(--bulma-button-border-width); color: var(--bulma-button-color); cursor: pointer; + font-weight: var(--bulma-button-weight); justify-content: center; padding-bottom: var(--bulma-button-padding-vertical); padding-left: var(--bulma-button-padding-horizontal); @@ -5651,6 +5653,9 @@ button.dropdown-item.is-active { --bulma-message-body-pre-background-color: var(--bulma-scheme-main); --bulma-message-body-pre-code-background-color: transparent; --bulma-message-header-body-border-width: 0; + --bulma-message-status-background-l: 8%; + --bulma-message-status-color-l: 70%; + --bulma-message-status-header-background-l: 20%; } .message { @@ -5681,151 +5686,179 @@ button.dropdown-item.is-active { } .message.is-white { - background-color: white; + --base-s: var(--bulma-white-s); + --base-l: var(--bulma-white-l); + background: none; } .message.is-white .message-header { - background-color: white; - color: #0a0a0a; + background-color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-white-invert); } .message.is-white .message-body { - border-color: white; + background-color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-black { - background-color: #fafafa; + --base-s: var(--bulma-black-s); + --base-l: var(--bulma-black-l); + background: none; } .message.is-black .message-header { - background-color: #0a0a0a; - color: white; + background-color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-black-invert); } .message.is-black .message-body { - border-color: #0a0a0a; + background-color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-light { - background-color: #fafafa; + --base-s: var(--bulma-light-s); + --base-l: var(--bulma-light-l); + background: none; } .message.is-light .message-header { - background-color: whitesmoke; - color: rgba(0, 0, 0, 0.7); + background-color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-light-invert); } .message.is-light .message-body { - border-color: whitesmoke; + background-color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-dark { - background-color: #fafafa; + --base-s: var(--bulma-dark-s); + --base-l: var(--bulma-dark-l); + background: none; } .message.is-dark .message-header { - background-color: #363636; - color: #fff; + background-color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-dark-invert); } .message.is-dark .message-body { - border-color: #363636; + background-color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-primary { - background-color: #ebfffc; + --base-s: var(--bulma-primary-s); + --base-l: var(--bulma-primary-l); + background: none; } .message.is-primary .message-header { - background-color: #00d1b2; - color: #fff; + background-color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-primary-invert); } .message.is-primary .message-body { - border-color: #00d1b2; - color: #00947e; + background-color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-link { - background-color: #f7f8fd; + --base-s: var(--bulma-link-s); + --base-l: var(--bulma-link-l); + background: none; } .message.is-link .message-header { - background-color: #3c57d3; - color: #fff; + background-color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-link-invert); } .message.is-link .message-body { - border-color: #3c57d3; + background-color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-info { - background-color: #ebf9fe; + --base-s: var(--bulma-info-s); + --base-l: var(--bulma-info-l); + background: none; } .message.is-info .message-header { - background-color: #18b4f7; - color: #fff; + background-color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-info-invert); } .message.is-info .message-body { - border-color: #18b4f7; - color: #0677a7; + background-color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-success { - background-color: #effbf4; + --base-s: var(--bulma-success-s); + --base-l: var(--bulma-success-l); + background: none; } .message.is-success .message-header { - background-color: #3fcf82; - color: #fff; + background-color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-success-invert); } .message.is-success .message-body { - border-color: #3fcf82; - color: #1e7647; + background-color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-warning { - background-color: #fff9eb; + --base-s: var(--bulma-warning-s); + --base-l: var(--bulma-warning-l); + background: none; } .message.is-warning .message-header { - background-color: #ffb60a; - color: var(--bulma-white); + background-color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-warning-invert); } .message.is-warning .message-body { - border-color: #ffb60a; - color: #946800; + background-color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-danger { - background-color: #feedec; + --base-s: var(--bulma-danger-s); + --base-l: var(--bulma-danger-l); + background: none; } .message.is-danger .message-header { - background-color: #f15146; - color: #fff; + background-color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-danger-invert); } .message.is-danger .message-body { - border-color: #f15146; - color: #c71b0f; + background-color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-color-l)); } .message.is-text { - background-color: #f9fafb; + --base-s: var(--bulma-text-s); + --base-l: var(--bulma-text-l); + background: none; } .message.is-text .message-header { - background-color: #404654; - color: #fff; + background-color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-header-background-l)); + color: var(--bulma-text-invert); } .message.is-text .message-body { - border-color: #404654; + background-color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-background-l)); + color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-color-l)); } .message-header { @@ -13113,3 +13146,29 @@ a.has-text-text:hover, a.has-text-text:focus { ) );*/ } + +[data-theme="dark"], +.theme-dark { + --bulma-scheme-main: #121212; + --bulma-scheme-main-bis: #242424; + --bulma-scheme-main-ter: #363636; + --bulma-scheme-invert: white; + --bulma-scheme-invert-bis: #fafafa; + --bulma-scheme-invert-ter: whitesmoke; + --bulma-background: #242424; + --bulma-border: #363636; + --bulma-border-hover: #4a4a4a; + --bulma-border-light: #363636; + --bulma-border-light-hover: #4a4a4a; + --bulma-text: #b5b5b5; + --bulma-text-invert: #363636; + --bulma-text-light: #7a7a7a; + --bulma-text-strong: white; + --bulma-link-hover: white; + --bulma-link-hover-border: #4a4a4a; + --bulma-link-focus: white; + --bulma-link-focus-border: #3c57d3; + --bulma-link-active: white; + --bulma-link-active-border: #b5b5b5; + --bulma-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.2), 0 0px 0 1px rgba(255, 255, 255, 0.04); +} diff --git a/sass/components/message.scss b/sass/components/message.scss index 968d2cb9d..d595059ae 100644 --- a/sass/components/message.scss +++ b/sass/components/message.scss @@ -39,6 +39,9 @@ $message-colors: $colors !default; message-body-pre-background-color: #{$message-body-pre-background-color}, message-body-pre-code-background-color: #{$message-body-pre-code-background-color}, message-header-body-border-width: #{$message-header-body-border-width}, + message-status-background-l: 8%, + message-status-color-l: 70%, + message-status-header-background-l: 20%, ) ); } @@ -75,44 +78,76 @@ $message-colors: $colors !default; // Colors // TODO @each $name, $components in $message-colors { - $color: nth($components, 1); - $color-invert: nth($components, 2); - $color-light: null; - $color-dark: null; - - @if length($components) >= 3 { - $color-light: nth($components, 3); - - @if length($components) >= 4 { - $color-dark: nth($components, 4); - } @else { - $color-luminance: colorLuminance($color); - $darken-percentage: $color-luminance * 70%; - $desaturate-percentage: $color-luminance * 30%; - $color-dark: desaturate( - darken($color, $darken-percentage), - $desaturate-percentage - ); - } - } @else { - $color-lightning: max(100% - lightness($color) - 2%, 0%); - $color-light: lighten($color, $color-lightning); - } + $base-h: getVar($name, "", "-h"); + $base-s: getVar($name, "", "-s"); + $base-l: getVar($name, "", "-l"); + $invert: getVar($name, "", "-invert"); + $base: hsl($base-h, var(--s), var(--l)); &.is-#{$name} { - background-color: $color-light; + --base-s: #{$base-s}; + --base-l: #{$base-l}; + background: none; .#{$class-prefix}message-header { - background-color: $color; - color: $color-invert; + background-color: hsl( + $base-h, + var(--base-s), + var(--bulma-message-status-header-background-l) + ); + color: $invert; } .#{$class-prefix}message-body { - border-color: $color; - color: $color-dark; + background-color: hsl( + $base-h, + var(--base-s), + var(--bulma-message-status-background-l) + ); + color: hsl($base-h, var(--base-s), var(--bulma-message-status-color-l)); } } } + + // @each $name, $components in $message-colors { + // $color: nth($components, 1); + // $color-invert: nth($components, 2); + // $color-light: null; + // $color-dark: null; + + // @if length($components) >= 3 { + // $color-light: nth($components, 3); + + // @if length($components) >= 4 { + // $color-dark: nth($components, 4); + // } @else { + // $color-luminance: colorLuminance($color); + // $darken-percentage: $color-luminance * 70%; + // $desaturate-percentage: $color-luminance * 30%; + // $color-dark: desaturate( + // darken($color, $darken-percentage), + // $desaturate-percentage + // ); + // } + // } @else { + // $color-lightning: max(100% - lightness($color) - 2%, 0%); + // $color-light: lighten($color, $color-lightning); + // } + + // &.is-#{$name} { + // background-color: $color-light; + + // .#{$class-prefix}message-header { + // background-color: $color; + // color: $color-invert; + // } + + // .#{$class-prefix}message-body { + // border-color: $color; + // color: $color-dark; + // } + // } + // } } .#{$class-prefix}message-header { diff --git a/sass/elements/button.scss b/sass/elements/button.scss index a52b44d4e..24404950f 100644 --- a/sass/elements/button.scss +++ b/sass/elements/button.scss @@ -4,6 +4,7 @@ $button-color: getVar("text-strong") !default; $button-background-color: getVar("scheme-main") !default; $button-family: false !default; +$button-weight: getVar("weight-medium") !default; $button-border-color: getVar("border") !default; $button-border-width: getVar("control-border-width") !default; @@ -101,6 +102,7 @@ $button-responsive-sizes: ( button-color: #{$button-color}, button-background-color: #{$button-background-color}, button-family: #{$button-family}, + button-weight: #{$button-weight}, button-border-color: #{$button-border-color}, button-border-width: #{$button-border-width}, button-padding-vertical: #{$button-padding-vertical}, @@ -153,11 +155,7 @@ $button-responsive-sizes: ( border-width: getVar("button-border-width"); color: getVar("button-color"); cursor: pointer; - - @if $button-family { - font-family: getVar("button-family"); - } - + font-weight: getVar("button-weight"); justify-content: center; padding-bottom: getVar("button-padding-vertical"); padding-left: getVar("button-padding-horizontal"); @@ -166,6 +164,10 @@ $button-responsive-sizes: ( text-align: center; white-space: nowrap; + @if $button-family { + font-family: getVar("button-family"); + } + strong { color: inherit; } -- 2.47.2