From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 22 Aug 2020 09:19:21 +0000 (+0200)
Subject: Add functions to register and assign CSS variables
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=166fcdb32ced537f11543c862a9ea1c83f15286d;p=thirdparty%2Fbulma.git

Add functions to register and assign CSS variables
---

diff --git a/sass/components/breadcrumb.sass b/sass/components/breadcrumb.sass
index f42b0b841..ce9ee7259 100644
--- a/sass/components/breadcrumb.sass
+++ b/sass/components/breadcrumb.sass
@@ -1,25 +1,35 @@
-$breadcrumb-item-color: $link !default
-$breadcrumb-item-hover-color: $link-hover !default
-$breadcrumb-item-active-color: $text-strong !default
+$breadcrumb-font-size: var(--size-normal, #{$size-normal}) !default
+
+$breadcrumb-item-color: var(--link, #{$link}) !default
+$breadcrumb-item-hover-color: var(--link-hover, #{$link-hover}) !default
+$breadcrumb-item-active-color: var(--text-strong, #{$text-strong}) !default
 
 $breadcrumb-item-padding-vertical: 0 !default
 $breadcrumb-item-padding-horizontal: 0.75em !default
 
-$breadcrumb-item-separator-color: $border-hover !default
+$breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
 
 .breadcrumb
+  --breadcrumb-font-size: #{$content-font-size}
+  --breadcrumb-item-color: #{$breadcrumb-item-color}
+  --breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color}
+  --breadcrumb-item-active-color: #{$breadcrumb-item-active-color}
+  --breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
+  --breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
+  --breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}
+
   @extend %block
   @extend %unselectable
-  font-size: $size-normal
+  font-size: var(--breadcrumb-font-size)
   white-space: nowrap
   a
     align-items: center
-    color: $breadcrumb-item-color
+    color: var(--breadcrumb-item-color)
     display: flex
     justify-content: center
-    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
+    padding: var(--breadcrumb-item-padding-vertical) var(--breadcrumb-item-padding-horizontal)
     &:hover
-      color: $breadcrumb-item-hover-color
+      color: var(--breadcrumb-item-hover-color)
   li
     align-items: center
     display: flex
@@ -27,11 +37,11 @@ $breadcrumb-item-separator-color: $border-hover !default
       +ltr-property("padding", 0, false)
     &.is-active
       a
-        color: $breadcrumb-item-active-color
+        color: var(--breadcrumb-item-active-color)
         cursor: default
         pointer-events: none
     & + li::before
-      color: $breadcrumb-item-separator-color
+      color: var(--breadcrumb-item-separator-color)
       content: "\0002f"
   ul,
   ol
@@ -55,11 +65,11 @@ $breadcrumb-item-separator-color: $border-hover !default
       justify-content: flex-end
   // Sizes
   &.is-small
-    font-size: $size-small
+    --breadcrumb-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --breadcrumb-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --breadcrumb-font-size: var(--size-large, #{$size-large})
   // Styles
   &.has-arrow-separator
     li + li::before
diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass
index 62cb66e4a..189f897ff 100644
--- a/sass/components/dropdown.sass
+++ b/sass/components/dropdown.sass
@@ -1,23 +1,41 @@
 $dropdown-menu-min-width: 12rem !default
 
-$dropdown-content-background-color: $scheme-main !default
-$dropdown-content-arrow: $link !default
+$dropdown-content-background-color: var(--scheme-main, #{$scheme-main}) !default
+$dropdown-content-arrow: var(--link, #{$link}) !default
 $dropdown-content-offset: 4px !default
 $dropdown-content-padding-bottom: 0.5rem !default
 $dropdown-content-padding-top: 0.5rem !default
-$dropdown-content-radius: $radius !default
-$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$dropdown-content-radius: var(--radius, #{$radius}) !default
+$dropdown-content-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$dropdown-content-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
+$dropdown-content-shadow: 0 0.5em 1em -0.125em $dropdown-content-shadow-color, 0 0px 0 1px $dropdown-content-shadow-color-bis !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item-color: $text !default
-$dropdown-item-hover-color: $scheme-invert !default
-$dropdown-item-hover-background-color: $background !default
-$dropdown-item-active-color: $link-invert !default
-$dropdown-item-active-background-color: $link !default
+$dropdown-item-color: var(--text, #{$text}) !default
+$dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
+$dropdown-item-hover-background-color: var(--background, #{$background}) !default
+$dropdown-item-active-color: var(--link-invert, #{$link-invert}) !default
+$dropdown-item-active-background-color: var(--link, #{$link}) !default
 
-$dropdown-divider-background-color: $border-light !default
+$dropdown-divider-background-color: var(--border-light, #{$border-light}) !default
 
 .dropdown
+  --dropdown-content-offset: #{$dropdown-content-offset}
+  --dropdown-menu-min-width: #{$dropdown-menu-min-width}
+  --dropdown-content-offset: #{$dropdown-content-offset}
+  --dropdown-content-z: #{$dropdown-content-z}
+  --dropdown-content-background-color: #{$dropdown-content-background-color}
+  --dropdown-content-radius: #{$dropdown-content-radius}
+  --dropdown-content-shadow: #{$dropdown-content-shadow}
+  --dropdown-content-padding-bottom: #{$dropdown-content-padding-bottom}
+  --dropdown-content-padding-top: #{$dropdown-content-padding-top}
+  --dropdown-item-color: #{$dropdown-item-color}
+  --dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color}
+  --dropdown-item-hover-color: #{$dropdown-item-hover-color}
+  --dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
+  --dropdown-item-active-color: #{$dropdown-item-active-color}
+  --dropdown-divider-background-color: #{$dropdown-divider-background-color}
+
   display: inline-flex
   position: relative
   vertical-align: top
@@ -32,28 +50,28 @@ $dropdown-divider-background-color: $border-light !default
   &.is-up
     .dropdown-menu
       bottom: 100%
-      padding-bottom: $dropdown-content-offset
+      padding-bottom: var(--dropdown-content-offset)
       padding-top: initial
       top: auto
 
 .dropdown-menu
   display: none
   +ltr-position(0, false)
-  min-width: $dropdown-menu-min-width
-  padding-top: $dropdown-content-offset
+  min-width: var(--dropdown-menu-min-width)
+  padding-top: var(--dropdown-content-offset)
   position: absolute
   top: 100%
-  z-index: $dropdown-content-z
+  z-index: var(--dropdown-content-z)
 
 .dropdown-content
-  background-color: $dropdown-content-background-color
-  border-radius: $dropdown-content-radius
-  box-shadow: $dropdown-content-shadow
-  padding-bottom: $dropdown-content-padding-bottom
-  padding-top: $dropdown-content-padding-top
+  background-color: var(--dropdown-content-background-color)
+  border-radius: var(--dropdown-content-radius)
+  box-shadow: var(--dropdown-content-shadow)
+  padding-bottom: var(--dropdown-content-padding-bottom)
+  padding-top: var(--dropdown-content-padding-top)
 
 .dropdown-item
-  color: $dropdown-item-color
+  color: var(--dropdown-item-color)
   display: block
   font-size: 0.875rem
   line-height: 1.5
@@ -67,14 +85,14 @@ button.dropdown-item
   white-space: nowrap
   width: 100%
   &:hover
-    background-color: $dropdown-item-hover-background-color
-    color: $dropdown-item-hover-color
+    background-color: var(--dropdown-item-hover-background-color)
+    color: var(--dropdown-item-hover-color)
   &.is-active
-    background-color: $dropdown-item-active-background-color
-    color: $dropdown-item-active-color
+    background-color: var(--dropdown-item-active-background-color)
+    color: var(--dropdown-item-active-color)
 
 .dropdown-divider
-  background-color: $dropdown-divider-background-color
+  background-color: var(--dropdown-divider-background-color)
   border: none
   display: block
   height: 1px
diff --git a/sass/components/level.sass b/sass/components/level.sass
index 8f7312025..61f2a2fec 100644
--- a/sass/components/level.sass
+++ b/sass/components/level.sass
@@ -1,6 +1,7 @@
-$level-item-spacing: ($block-spacing / 2) !default
+$level-item-spacing: calc(var(--block-spacing, #{$block-spacing}) / 2) !default
 
 .level
+  --level-item-spacing: #{$level-item-spacing}
   @extend %block
   align-items: center
   justify-content: space-between
@@ -20,7 +21,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        +ltr-property("margin", $level-item-spacing)
+        +ltr-property("margin", var(--level-item-spacing))
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -43,7 +44,7 @@ $level-item-spacing: ($block-spacing / 2) !default
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: $level-item-spacing
+      margin-bottom: var(--level-item-spacing)
 
 .level-left,
 .level-right
@@ -57,7 +58,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     // Responsiveness
     +tablet
       &:not(:last-child)
-        +ltr-property("margin", $level-item-spacing)
+        +ltr-property("margin", var(--level-item-spacing))
 
 .level-left
   align-items: center
diff --git a/sass/components/media.sass b/sass/components/media.sass
index 777755b2f..37bd3d358 100644
--- a/sass/components/media.sass
+++ b/sass/components/media.sass
@@ -1,15 +1,19 @@
-$media-border-color: bulmaRgba($border, 0.5) !default
+$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
 $media-spacing: 1rem
 $media-spacing-large: 1.5rem
 
 .media
+  --media-border-color: #{$media-border-color}
+  --media-spacing: #{$media-spacing}
+  --media-spacing-large: #{$media-spacing-large}
+
   align-items: flex-start
   display: flex
   text-align: inherit
   .content:not(:last-child)
     margin-bottom: 0.75rem
   .media
-    border-top: 1px solid $media-border-color
+    border-top: 1px solid var(--media-border-color)
     display: flex
     padding-top: 0.75rem
     .content:not(:last-child),
@@ -20,14 +24,13 @@ $media-spacing-large: 1.5rem
       & + .media
         margin-top: 0.5rem
   & + .media
-    border-top: 1px solid $media-border-color
-    margin-top: $media-spacing
-    padding-top: $media-spacing
+    border-top: 1px solid var(--media-border-color)
+    margin-top: var(--media-spacing)
+    padding-top: var(--media-spacing)
   // Sizes
   &.is-large
     & + .media
-      margin-top: $media-spacing-large
-      padding-top: $media-spacing-large
+      --media-spacing: var(--media-spacing-large)
 
 .media-left,
 .media-right
@@ -36,10 +39,10 @@ $media-spacing-large: 1.5rem
   flex-shrink: 0
 
 .media-left
-  +ltr-property("margin", $media-spacing)
+  +ltr-property("margin", var(--media-spacing))
 
 .media-right
-  +ltr-property("margin", $media-spacing, false)
+  +ltr-property("margin", var(--media-spacing), false)
 
 .media-content
   flex-basis: auto
diff --git a/sass/components/menu.sass b/sass/components/menu.sass
index 1bf782977..2133384e4 100644
--- a/sass/components/menu.sass
+++ b/sass/components/menu.sass
@@ -1,57 +1,77 @@
-$menu-item-color: $text !default
-$menu-item-radius: $radius-small !default
-$menu-item-hover-color: $text-strong !default
-$menu-item-hover-background-color: $background !default
-$menu-item-active-color: $link-invert !default
-$menu-item-active-background-color: $link !default
+$menu-font-size: var(--size-normal, #{$size-normal}) !default
 
-$menu-list-border-left: 1px solid $border !default
+$menu-item-color: var(--text, #{$text}) !default
+$menu-item-radius: var(--radius-small, #{$radius-small}) !default
+$menu-item-hover-color: var(--text-strong, #{$text-strong}) !default
+$menu-item-hover-background-color: var(--background, #{$background}) !default
+$menu-item-active-color: var(--link-invert, #{$link-invert}) !default
+$menu-item-active-background-color: var(--link, #{$link}) !default
+
+$menu-list-border-left: 1px solid var(--border, #{$border}) !default
 $menu-list-line-height: 1.25 !default
 $menu-list-link-padding: 0.5em 0.75em !default
 $menu-nested-list-margin: 0.75em !default
 $menu-nested-list-padding-left: 0.75em !default
 
-$menu-label-color: $text-light !default
+$menu-label-color: var(--text-light, #{$text-light}) !default
 $menu-label-font-size: 0.75em !default
 $menu-label-letter-spacing: 0.1em !default
 $menu-label-spacing: 1em !default
 
 .menu
-  font-size: $size-normal
+  --menu-font-size: #{$content-font-size}
+  --menu-list-line-height: #{$menu-list-line-height}
+  --menu-item-radius: #{$menu-item-radius}
+  --menu-item-color: #{$menu-item-color}
+  --menu-list-link-padding: #{$menu-list-link-padding}
+  --menu-item-hover-background-color: #{$menu-item-hover-background-color}
+  --menu-item-hover-color: #{$menu-item-hover-color}
+  --menu-item-active-background-color: #{$menu-item-active-background-color}
+  --menu-item-active-color: #{$menu-item-active-color}
+  --menu-list-border-left: #{$menu-list-border-left}
+  --menu-nested-list-padding-left: #{$menu-nested-list-padding-left}
+  --menu-nested-list-margin: #{$menu-nested-list-margin}
+  --menu-label-color: #{$menu-label-color}
+  --menu-label-font-size: #{$menu-label-font-size}
+  --menu-label-letter-spacing: #{$menu-label-letter-spacing}
+  --menu-label-spacing: #{$menu-label-spacing}
+  --menu-label-spacing: #{$menu-label-spacing}
+
+  font-size: var(--menu-font-size)
   // Sizes
   &.is-small
-    font-size: $size-small
+    --menu-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --menu-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --menu-font-size: var(--size-large, #{$size-large})
 
 .menu-list
-  line-height: $menu-list-line-height
+  line-height: var(--menu-list-line-height)
   a
-    border-radius: $menu-item-radius
-    color: $menu-item-color
+    border-radius: var(--menu-item-radius)
+    color: var(--menu-item-color)
     display: block
-    padding: $menu-list-link-padding
+    padding: var(--menu-list-link-padding)
     &:hover
-      background-color: $menu-item-hover-background-color
-      color: $menu-item-hover-color
+      background-color: var(--menu-item-hover-background-color)
+      color: var(--menu-item-hover-color)
     // Modifiers
     &.is-active
-      background-color: $menu-item-active-background-color
-      color: $menu-item-active-color
+      background-color: var(--menu-item-active-background-color)
+      color: var(--menu-item-active-color)
   li
     ul
-      +ltr-property("border", $menu-list-border-left, false)
-      margin: $menu-nested-list-margin
-      +ltr-property("padding", $menu-nested-list-padding-left, false)
+      +ltr-property("border", var(--menu-list-border-left), false)
+      margin: var(--menu-nested-list-margin)
+      +ltr-property("padding", var(--menu-nested-list-padding-left), false)
 
 .menu-label
-  color: $menu-label-color
-  font-size: $menu-label-font-size
-  letter-spacing: $menu-label-letter-spacing
+  color: var(--menu-label-color)
+  font-size: var(--menu-label-font-size)
+  letter-spacing: var(--menu-label-letter-spacing)
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: $menu-label-spacing
+    margin-top: var(--menu-label-spacing)
   &:not(:last-child)
-    margin-bottom: $menu-label-spacing
+    margin-bottom: var(--menu-label-spacing)
diff --git a/sass/components/message.sass b/sass/components/message.sass
index 68988daa0..e9cd45efb 100644
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -28,6 +28,7 @@ $message-colors: $colors !default
   --message-header-color: #{$message-header-color}
   --message-header-weight: #{$message-header-weight}
   --message-header-padding: #{$message-header-padding}
+  --message-header-radius: #{$message-header-radius}
   --message-body-border-color: #{$message-body-border-color}
   --message-body-radius: #{$message-body-radius}
   --message-body-border-width: #{$message-body-border-width}
@@ -86,7 +87,7 @@ $message-colors: $colors !default
 .message-header
   align-items: center
   background-color: var(--message-header-background-color)
-  border-radius: $message-header-radius $message-header-radius 0 0
+  border-radius: var(--message-header-radius) var(--message-header-radius) 0 0
   color: var(--message-header-color)
   display: flex
   font-weight: var(--message-header-weight)
diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index 5725617c2..799044fc5 100644
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -12,8 +12,9 @@
   text-transform: uppercase
 
 .highlight
+  --highlight-font-weight: var(--weight-normal, #{$weight-normal})
   @extend %block
-  font-weight: $weight-normal
+  font-weight: var(--highlight-font-weight)
   max-width: 100%
   overflow: hidden
   padding: 0
@@ -25,11 +26,14 @@
   @extend %loader
 
 .number
+  --number-background: var(--background, #{$background})
+  --number-radius-rounded: var(--radius-rounded, #{$radius-rounded})
+  --number-font-size: var(--size-medium, #{$size-medium})
   align-items: center
-  background-color: $background
-  border-radius: $radius-rounded
+  background-color: var(--number-background)
+  border-radius: var(--number-radius-rounded)
   display: inline-flex
-  font-size: $size-medium
+  font-size: var(--number-font-size)
   height: 2em
   justify-content: center
   margin-right: 1.5rem
diff --git a/sass/themes/default.sass b/sass/themes/default.sass
index 49044a4fb..d63480769 100644
--- a/sass/themes/default.sass
+++ b/sass/themes/default.sass
@@ -89,6 +89,7 @@
   --scheme-invert-ter: #{$scheme-invert-ter}
   --background: #{$background}
   --border: #{$border}
+  --border-rgb: #{$border-rgb}
   --border-hover: #{$border-hover}
   --border-light: #{$border-light}
   --border-light-hover: #{$border-light-hover}
diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss
index 9273ab279..de8fb738c 100644
--- a/sass/utilities/derived-variables.scss
+++ b/sass/utilities/derived-variables.scss
@@ -54,6 +54,7 @@ $scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
 $background        : var(--white-ter, #{$white-ter}) !default;
 
 $border            : var(--grey-lighter, #{$grey-lighter}) !default;
+$border-rgb        : bulmaToRGB($grey-lighter) !default;
 $border-hover      : var(--grey-light, #{$grey-light}) !default;
 $border-light      : var(--grey-lightest, #{$grey-lightest}) !default;
 $border-light-hover: var(--grey-light, #{$grey-light}) !default;
diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index 9423ae30b..6d51649c9 100644
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -133,3 +133,23 @@
 
 @function bulmaToRGB($color)
   @return red($color), green($color), blue($color)
+
+=registerCSSVar($name, $value, $at-root: true)
+  @if $at-root
+    @at-root :root
+      --#{$name}: #{$value}
+  @else
+    --#{$name}: #{$value}
+
+=registerCSSVars($list, $at-root: true)
+  @if $at-root
+    @at-root :root
+      @each $name, $value in $list
+        --#{$name}: #{$value}
+  @else
+    @each $name, $value in $list
+      --#{$name}: #{$value}
+
+@function assignCSSVar($name, $fallback)
+  // +registerCSSVar($name, $fallback)
+  @return var(--#{$name}, #{$fallback})
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 0ed78c153..94cae455f 100644
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -194,9 +194,9 @@
   @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: bulmaRgba($scheme-invert, 0.2)
+  background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2)
   border: none
-  border-radius: $radius-rounded
+  border-radius: var(--radius-rounded, #{$radius-rounded})
   cursor: pointer
   pointer-events: auto
   display: inline-block
@@ -214,7 +214,7 @@
   width: 20px
   &::before,
   &::after
-    background-color: $scheme-main
+    background-color: var(--scheme-main, #{$scheme-main})
     content: ""
     display: block
     left: 50%
@@ -230,9 +230,9 @@
     width: 2px
   &:hover,
   &:focus
-    background-color: bulmaRgba($scheme-invert, 0.3)
+    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.3)
   &:active
-    background-color: bulmaRgba($scheme-invert, 0.4)
+    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.4)
   // Sizes
   &.is-small
     height: 16px