From 9f3adb4930b597382bfa13d7298154552bdc2e17 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Thu, 27 Aug 2020 09:57:33 +0200 Subject: [PATCH] Add more CSS variables with fallback --- sass/form/input-textarea.sass | 3 --- sass/helpers/color.sass | 16 +++++++-------- sass/helpers/typography.sass | 24 +++++++++++++---------- sass/helpers/visibility.sass | 2 -- sass/layout/footer.sass | 12 ++++++++---- sass/layout/hero.sass | 13 ++++++++---- sass/layout/section.sass | 10 +++++++--- sass/themes/default.sass | 11 +++++++++++ sass/utilities/derived-variables.scss | 8 ++++---- test/plugins/check-css-variables-exist.js | 3 ++- 10 files changed, 63 insertions(+), 39 deletions(-) diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass index 7688e34a..117c7bfa 100644 --- a/sass/form/input-textarea.sass +++ b/sass/form/input-textarea.sass @@ -3,9 +3,6 @@ $textarea-max-height: 40em !default $textarea-min-height: 8em !default %input-textarea - --input-shadow: #{$input-shadow} - --input-focus-box-shadow-size: #{$input-focus-box-shadow-size} - @extend %input box-shadow: var(--input-shadow, #{$input-shadow}) max-width: 100% diff --git a/sass/helpers/color.sass b/sass/helpers/color.sass index 22ac8c51..c4d77335 100644 --- a/sass/helpers/color.sass +++ b/sass/helpers/color.sass @@ -1,37 +1,37 @@ @each $name, $pair in $colors $color: nth($pair, 1) .has-text-#{$name} - color: $color !important + color: var(--#{$name}, #{$color}) !important a.has-text-#{$name} &:hover, &:focus color: bulmaDarken($color, 10%) !important .has-background-#{$name} - background-color: $color !important + background-color: var(--#{$name}, #{$color}) !important @if length($pair) >= 4 $color-light: nth($pair, 3) $color-dark: nth($pair, 4) // Light .has-text-#{$name}-light - color: $color-light !important + color: var(--#{$name}-light, #{$color-light}) !important a.has-text-#{$name}-light &:hover, &:focus color: bulmaDarken($color-light, 10%) !important .has-background-#{$name}-light - background-color: $color-light !important + background-color: var(--#{$name}-light, #{$color-light}) !important // Dark .has-text-#{$name}-dark - color: $color-dark !important + color: var(--#{$name}-dark, #{$color-dark}) !important a.has-text-#{$name}-dark &:hover, &:focus color: bulmaLighten($color-dark, 10%) !important .has-background-#{$name}-dark - background-color: $color-dark !important + background-color: var(--#{$name}-dark, #{$color-dark}) !important @each $name, $shade in $shades .has-text-#{$name} - color: $shade !important + color: var(--#{$name}, #{$shade}) !important .has-background-#{$name} - background-color: $shade !important + background-color: var(--#{$name}, #{$shade}) !important diff --git a/sass/helpers/typography.sass b/sass/helpers/typography.sass index eafd7e09..129f0aec 100644 --- a/sass/helpers/typography.sass +++ b/sass/helpers/typography.sass @@ -72,27 +72,31 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig font-style: italic !important .has-text-weight-light - font-weight: $weight-light !important + font-weight: var(--weight-light, #{$weight-light}) !important + .has-text-weight-normal - font-weight: $weight-normal !important + font-weight: var(--weight-normal, #{$weight-normal}) !important + .has-text-weight-medium - font-weight: $weight-medium !important + font-weight: var(--weight-medium, #{$weight-medium}) !important + .has-text-weight-semibold - font-weight: $weight-semibold !important + font-weight: var(--weight-semibold, #{$weight-semibold}) !important + .has-text-weight-bold - font-weight: $weight-bold !important + font-weight: var(--weight-bold, #{$weight-bold}) !important .is-family-primary - font-family: $family-primary !important + font-family: var(--family-primary, #{$family-primary}) !important .is-family-secondary - font-family: $family-secondary !important + font-family: var(--family-secondary, #{$family-secondary}) !important .is-family-sans-serif - font-family: $family-sans-serif !important + font-family: var(--family-sans-serif, #{$family-sans-serif}) !important .is-family-monospace - font-family: $family-monospace !important + font-family: var(--family-monospace, #{$family-monospace}) !important .is-family-code - font-family: $family-code !important + font-family: var(--family-code, #{$family-code}) !important diff --git a/sass/helpers/visibility.sass b/sass/helpers/visibility.sass index 92477f3a..9c388b6d 100644 --- a/sass/helpers/visibility.sass +++ b/sass/helpers/visibility.sass @@ -1,5 +1,3 @@ - - $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' @each $display in $displays diff --git a/sass/layout/footer.sass b/sass/layout/footer.sass index 8faa11ed..ea62014b 100644 --- a/sass/layout/footer.sass +++ b/sass/layout/footer.sass @@ -1,9 +1,13 @@ -$footer-background-color: $scheme-main-bis !default +$footer-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default $footer-color: false !default $footer-padding: 3rem 1.5rem 6rem !default .footer - background-color: $footer-background-color - padding: $footer-padding + --footer-background-color: #{$footer-background-color} + --footer-padding: #{$footer-padding} + --footer-color: #{$footer-color} + + background-color: var(--footer-background-color) + padding: var(--footer-padding) @if $footer-color - color: $footer-color + color: var(--footer-color, #{$footer-color}) diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index 925c98c2..4c746a96 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -5,6 +5,11 @@ $hero-body-padding-large: 18rem 1.5rem !default // Main container .hero + --hero-body-padding: #{$hero-body-padding} + --hero-body-padding-small: #{$hero-body-padding-small} + --hero-body-padding-medium: #{$hero-body-padding-medium} + --hero-body-padding-large: #{$hero-body-padding-large} + align-items: stretch display: flex flex-direction: column @@ -76,15 +81,15 @@ $hero-body-padding-large: 18rem 1.5rem !default // Sizes &.is-small .hero-body - padding: $hero-body-padding-small + --hero-body-padding: var(--hero-body-padding-small) &.is-medium +tablet .hero-body - padding: $hero-body-padding-medium + --hero-body-padding: var(--hero-body-padding-medium) &.is-large +tablet .hero-body - padding: $hero-body-padding-large + --hero-body-padding: var(--hero-body-padding-large) &.is-halfheight, &.is-fullheight, &.is-fullheight-with-navbar @@ -142,4 +147,4 @@ $hero-body-padding-large: 18rem 1.5rem !default .hero-body flex-grow: 1 flex-shrink: 0 - padding: $hero-body-padding + padding: var(--hero-body-padding) diff --git a/sass/layout/section.sass b/sass/layout/section.sass index 6f2d3523..4dee0903 100644 --- a/sass/layout/section.sass +++ b/sass/layout/section.sass @@ -3,11 +3,15 @@ $section-padding-medium: 9rem 1.5rem !default $section-padding-large: 18rem 1.5rem !default .section - padding: $section-padding + --section-padding: #{$section-padding} + --section-padding-medium: #{$section-padding-medium} + --section-padding-large: #{$section-padding-large} + + padding: var(--section-padding) // Responsiveness +desktop // Sizes &.is-medium - padding: $section-padding-medium + --section-padding: var(--section-padding-medium) &.is-large - padding: $section-padding-large + --section-padding: var(--section-padding-large) diff --git a/sass/themes/default.sass b/sass/themes/default.sass index a11d06ce..39631413 100644 --- a/sass/themes/default.sass +++ b/sass/themes/default.sass @@ -45,6 +45,17 @@ --speed: #{$speed} // Derived variables --primary: #{$primary} + // bulmaDarken($color, 5%) + // bulmaDarken($color, 10%) + // bulmaDarken($color, 2.5%) + // bulmaRgba($color, 0.25) + // bulmaDarken($color-light, 10%) + // bulmaDarken($color-light, 2.5%) + // bulmaDarken($color-light, 5%) + // bulmaLighten($color-dark, 10%) + // bulmaDarken($color-invert, 5%) + // bulmaRgba($color-invert, 0.9) + // bulmaRgba($color-invert, 0.7) --info: #{$info} --success: #{$success} --warning: #{$warning} diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss index de8fb738..a6488dad 100644 --- a/sass/utilities/derived-variables.scss +++ b/sass/utilities/derived-variables.scss @@ -98,10 +98,10 @@ $family-primary : var(--family-sans-serif, #{$family-sans-serif}) !default; $family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default; $family-code : var(--family-monospace, #{$family-monospace}) !default; -$size-small : $size-7 !default; -$size-normal: $size-6 !default; -$size-medium: $size-5 !default; -$size-large : $size-4 !default; +$size-small : var(--size-7, #{size-7}) !default; +$size-normal: var(--size-6, #{size-6}) !default; +$size-medium: var(--size-5, #{size-5}) !default; +$size-large : var(--size-4, #{size-4}) !default; // Lists and maps $custom-colors: null !default; diff --git a/test/plugins/check-css-variables-exist.js b/test/plugins/check-css-variables-exist.js index 3e4945c9..1619b21b 100644 --- a/test/plugins/check-css-variables-exist.js +++ b/test/plugins/check-css-variables-exist.js @@ -3,7 +3,7 @@ module.exports = plugin; const utils = require('./utils'); const fs = require('fs'); const regexAssign = /--[a-z-]*:/g; -const regexUsage = /var\(--[a-z-]*\)/g; +const regexUsage = /var\(--[a-z-]*(\, \#|\))/g; const LOG_EVERYTHING = false; function logThis(message) { @@ -51,6 +51,7 @@ function plugin() { usages = usages.map(usage => { usage = usage.replace('var(', ''); usage = usage.replace(')', ''); + usage = usage.replace(', #', ''); return usage; });