Update elements to CSS variables

diff --git a/sass/elements/content.sass b/sass/elements/content.sass
index 800268b74b7c966d027bf5b6858a7f8c846e4c91..bbc9b230176216783bb5a57b8dfe0057ccd648d6 100644 (file)
--- a/sass/elements/content.sass
+++ b/sass/elements/content.sass
@@ -1,24 +1,43 @@
-$content-heading-color: $text-strong !default
-$content-heading-weight: $weight-semibold !default
+$content-font-size: var(--size-normal, #{$size-normal}) !default
+
+$content-heading-color: var(--text-strong, #{$text-strong}) !default
+$content-heading-weight: var(--weight-semibold, #{$weight-semibold}) !default
 $content-heading-line-height: 1.125 !default
 
-$content-blockquote-background-color: $background !default
-$content-blockquote-border-left: 5px solid $border !default
+$content-blockquote-background-color: var(--background, #{$background}) !default
+$content-blockquote-border-left: 5px solid var(--border, #{$border}) !default
 $content-blockquote-padding: 1.25em 1.5em !default
 
 $content-pre-padding: 1.25em 1.5em !default
 
-$content-table-cell-border: 1px solid $border !default
+$content-table-cell-border: 1px solid var(--border, #{$border}) !default
 $content-table-cell-border-width: 0 0 1px !default
 $content-table-cell-padding: 0.5em 0.75em !default
-$content-table-cell-heading-color: $text-strong !default
+$content-table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
 $content-table-head-cell-border-width: 0 0 2px !default
-$content-table-head-cell-color: $text-strong !default
+$content-table-head-cell-color: var(--text-strong, #{$text-strong}) !default
 $content-table-foot-cell-border-width: 2px 0 0 !default
-$content-table-foot-cell-color: $text-strong !default
+$content-table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
 
 .content
+  --content-font-size: #{$content-font-size}
+  --content-heading-color: #{$content-heading-color}
+  --content-heading-weight: #{$content-heading-weight}
+  --content-heading-line-height: #{$content-heading-line-height}
+  --content-blockquote-background-color: #{$content-blockquote-background-color}
+  --content-blockquote-border-left: #{$content-blockquote-border-left}
+  --content-blockquote-padding: #{$content-blockquote-padding}
+  --content-pre-padding: #{$content-pre-padding}
+  --content-table-cell-border: #{$content-table-cell-border}
+  --content-table-cell-border-width: #{$content-table-cell-border-width}
+  --content-table-cell-padding: #{$content-table-cell-padding}
+  --content-table-cell-heading-color: #{$content-table-cell-heading-color}
+  --content-table-head-cell-border-width: #{$content-table-head-cell-border-width}
+  --content-table-head-cell-color: #{$content-table-head-cell-color}
+  --content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width}
+  --content-table-foot-cell-color: #{$content-table-foot-cell-color}
   @extend %block
+  font-size: var(--content-font-size)
   // Inline
   li + li
     margin-top: 0.25em
@@ -38,9 +57,9 @@ $content-table-foot-cell-color: $text-strong !default
   h4,
   h5,
   h6
-    color: $content-heading-color
-    font-weight: $content-heading-weight
-    line-height: $content-heading-line-height
+    color: var(--content-heading-color)
+    font-weight: var(--content-heading-weight)
+    line-height: var(--content-heading-line-height)
   h1
     font-size: 2em
     margin-bottom: 0.5em
@@ -66,9 +85,9 @@ $content-table-foot-cell-color: $text-strong !default
     font-size: 1em
     margin-bottom: 1em
   blockquote
-    background-color: $content-blockquote-background-color
-    +ltr-property("border", $content-blockquote-border-left, false)
-    padding: $content-blockquote-padding
+    background-color: var(--content-blockquote-background-color)
+    +ltr-property("border", var(--content-blockquote-border-left), false)
+    padding: var(--content-blockquote-padding)
   ol
     list-style-position: outside
     +ltr-property("margin", 2em, false)
@@ -109,7 +128,7 @@ $content-table-foot-cell-color: $text-strong !default
   pre
     +overflow-touch
     overflow-x: auto
-    padding: $content-pre-padding
+    padding: var(--content-pre-padding)
     white-space: pre
     word-wrap: normal
   sup,
@@ -119,24 +138,24 @@ $content-table-foot-cell-color: $text-strong !default
     width: 100%
     td,
     th
-      border: $content-table-cell-border
-      border-width: $content-table-cell-border-width
-      padding: $content-table-cell-padding
+      border: var(--content-table-cell-border)
+      border-width: var(--content-table-cell-border-width)
+      padding: var(--content-table-cell-padding)
       vertical-align: top
     th
-      color: $content-table-cell-heading-color
+      color: var(--content-table-cell-heading-color)
       &:not([align])
         text-align: inherit
     thead
       td,
       th
-        border-width: $content-table-head-cell-border-width
-        color: $content-table-head-cell-color
+        border-width: var(--content-table-head-cell-border-width)
+        color: var(--content-table-head-cell-color)
     tfoot
       td,
       th
-        border-width: $content-table-foot-cell-border-width
-        color: $content-table-foot-cell-color
+        border-width: var(--content-table-foot-cell-border-width)
+        color: var(--content-table-foot-cell-color)
     tbody
       tr
         &:last-child
@@ -148,8 +167,8 @@ $content-table-foot-cell-color: $text-strong !default
       margin-top: 0
   // Sizes
   &.is-small
-    font-size: $size-small
+    --content-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --content-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --content-font-size: var(--size-large, #{$size-large})

diff --git a/sass/elements/icon.sass b/sass/elements/icon.sass
index 988546c7fc2d24b1d38e81afec65e655366009fc..d6b6140b11ad29ab5d6c8596f61ee45d2847d83c 100644 (file)
--- a/sass/elements/icon.sass
+++ b/sass/elements/icon.sass
@@ -4,18 +4,21 @@ $icon-dimensions-medium: 2rem !default
 $icon-dimensions-large: 3rem !default
 
 .icon
+  --icon-dimensions: #{$icon-dimensions}
+  --icon-dimensions-small: #{$icon-dimensions-small}
+  --icon-dimensions-medium: #{$icon-dimensions-medium}
+  --icon-dimensions-large: #{$icon-dimensions-large}
+
   align-items: center
   display: inline-flex
   justify-content: center
-  height: $icon-dimensions
-  width: $icon-dimensions
+  height: var(--icon-dimensions)
+  width: var(--icon-dimensions)
+
   // Sizes
   &.is-small
-    height: $icon-dimensions-small
-    width: $icon-dimensions-small
+    --icon-dimensions: var(--icon-dimensions-small)
   &.is-medium
-    height: $icon-dimensions-medium
-    width: $icon-dimensions-medium
+    --icon-dimensions: var(--icon-dimensions-medium)
   &.is-large
-    height: $icon-dimensions-large
-    width: $icon-dimensions-large
+    --icon-dimensions: var(--icon-dimensions-large)

diff --git a/sass/elements/image.sass b/sass/elements/image.sass
index 7547abcfd671a2a4f7133c3dd890a7415b593d45..59cf93e72d71760dbbe796f47a841e11f63b446b 100644 (file)
--- a/sass/elements/image.sass
+++ b/sass/elements/image.sass
@@ -8,7 +8,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
     height: auto
     width: 100%
     &.is-rounded
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded, #{$radius-rounded})
   &.is-fullwidth
     width: 100%
   // Ratio

diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass
index af1c7be5917c62166b2de8bdd11554585018b91a..d71a2aa5205d1693a787eb78bc41a6ef240e3790 100644 (file)
--- a/sass/elements/notification.sass
+++ b/sass/elements/notification.sass
@@ -1,19 +1,26 @@
-$notification-background-color: $background !default
-$notification-code-background-color: $scheme-main !default
-$notification-radius: $radius !default
+$notification-background-color: var(--background, #{$background}) !default
+$notification-code-background-color: var(--scheme-main, #{$scheme-main}) !default
+$notification-radius: var(--radius, #{$radius}) !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
 
 .notification
+  --notification-background-color: #{$notification-background-color}
+  --notification-radius: #{$notification-radius}
+  --notification-padding-ltr: #{$notification-padding-ltr}
+  --notification-padding-rtl: #{$notification-padding-rtl}
+  --notification-code-background-color: #{$notification-code-background-color}
+
   @extend %block
-  background-color: $notification-background-color
-  border-radius: $notification-radius
+  background-color: var(--notification-background-color)
+  border-radius: var(--notification-radius)
+  color: var(--notification-color)
   position: relative
   +ltr
-    padding: $notification-padding-ltr
+    padding: var(--notification-padding-ltr)
   +rtl
-    padding: $notification-padding-rtl
+    padding: var(--notification-padding-rtl)
   a:not(.button):not(.dropdown-item)
     color: currentColor
     text-decoration: underline
@@ -21,7 +28,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
     color: currentColor
   code,
   pre
-    background: $notification-code-background-color
+    background: var(--notification-code-background-color)
   pre code
     background: transparent
   & > .delete
@@ -37,12 +44,12 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
-      color: $color-invert
+      --notification-background-color: var(--#{$name}, #{$color})
+      --notification-color: var(--#{$name}-invert, #{$color-invert})
       // If light and dark colors are provided
       @if length($pair) >= 4
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
-          background-color: $color-light
-          color: $color-dark
+          --notification-background-color: var(--#{$name}-light, #{$color-light})
+          --notification-color: var(--#{$name}-dark, #{$color-dark})

diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass
index bb43bb60178f518719b7ba89d0db7503273cb8a1..709771a8b78a90687c19d37c6f1526b6f82ec5d4 100644 (file)
--- a/sass/elements/progress.sass
+++ b/sass/elements/progress.sass
@@ -1,49 +1,57 @@
-$progress-bar-background-color: $border-light !default
-$progress-value-background-color: $text !default
-$progress-border-radius: $radius-rounded !default
+$progress-height: var(--size-normal, #{$size-normal}) !default
+
+$progress-bar-background-color: var(--border-light, #{$border-light}) !default
+$progress-value-background-color: var(--text, #{$text}) !default
+$progress-border-radius: var(--radius-rounded, #{$radius-rounded}) !default
 
 $progress-indeterminate-duration: 1.5s !default
 
 .progress
+  --progress-border-radius: #{$progress-border-radius}
+  --progress-bar-background-color: #{$progress-bar-background-color}
+  --progress-height: #{$progress-height}
+  --progress-value-background-color: #{$progress-value-background-color}
+  --progress-indeterminate-duration: #{$progress-indeterminate-duration}
+
   @extend %block
   -moz-appearance: none
   -webkit-appearance: none
   border: none
-  border-radius: $progress-border-radius
+  border-radius: var(--progress-border-radius)
   display: block
-  height: $size-normal
+  height: var(--progress-height)
   overflow: hidden
   padding: 0
   width: 100%
   &::-webkit-progress-bar
-    background-color: $progress-bar-background-color
+    background-color: var(--progress-bar-background-color)
   &::-webkit-progress-value
-    background-color: $progress-value-background-color
+    background-color: var(--progress-value-background-color)
   &::-moz-progress-bar
-    background-color: $progress-value-background-color
+    background-color: var(--progress-value-background-color)
   &::-ms-fill
-    background-color: $progress-value-background-color
+    background-color: var(--progress-value-background-color)
     border: none
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &::-webkit-progress-value
-        background-color: $color
+        --progress-value-background-color: var(--#{$name}, #{$color})
       &::-moz-progress-bar
-        background-color: $color
+        --progress-value-background-color: var(--#{$name}, #{$color})
       &::-ms-fill
-        background-color: $color
+        --progress-value-background-color: var(--#{$name}, #{$color})
       &:indeterminate
-        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+        background-image: linear-gradient(to right, var(--#{$name}, #{$color}) 30%, var(--progress-bar-background-color) 30%)
 
   &:indeterminate
-    animation-duration: $progress-indeterminate-duration
+    animation-duration: var(--progress-indeterminate-duration)
     animation-iteration-count: infinite
     animation-name: moveIndeterminate
     animation-timing-function: linear
-    background-color: $progress-bar-background-color
-    background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
+    background-color: var(--progress-bar-background-color)
+    background-image: linear-gradient(to right, var(--text, #{$text}) 30%, var(--progress-bar-background-color) 30%)
     background-position: top left
     background-repeat: no-repeat
     background-size: 150% 150%
@@ -54,11 +62,11 @@ $progress-indeterminate-duration: 1.5s !default
 
   // Sizes
   &.is-small
-    height: $size-small
+    --progress-height: var(--size-small, #{$size-small})
   &.is-medium
-    height: $size-medium
+    --progress-height: var(--size-medium, #{$size-medium})
   &.is-large
-    height: $size-large
+    --progress-height: var(--size-large, #{$size-large})
 
 @keyframes moveIndeterminate
   from

diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index 48d7d93e1faea4f8dc2b10da4eb45242b25eb73c..7c777b104da1557e7ae07cc7f66d6adee83efe8d 100644 (file)
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -1,87 +1,106 @@
-$table-color: $text-strong !default
-$table-background-color: $scheme-main !default
+$table-color: var(--text-strong, #{$text-strong}) !default
+$table-background-color: var(--scheme-main, #{$scheme-main}) !default
 
-$table-cell-border: 1px solid $border !default
+$table-cell-border: 1px solid var(--border, #{$border}) !default
 $table-cell-border-width: 0 0 1px !default
 $table-cell-padding: 0.5em 0.75em !default
-$table-cell-heading-color: $text-strong !default
+$table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
 
 $table-head-cell-border-width: 0 0 2px !default
-$table-head-cell-color: $text-strong !default
+$table-head-cell-color: var(--text-strong, #{$text-strong}) !default
 $table-foot-cell-border-width: 2px 0 0 !default
-$table-foot-cell-color: $text-strong !default
+$table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
 
 $table-head-background-color: transparent !default
 $table-body-background-color: transparent !default
 $table-foot-background-color: transparent !default
 
-$table-row-hover-background-color: $scheme-main-bis !default
+$table-row-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
 
-$table-row-active-background-color: $primary !default
-$table-row-active-color: $primary-invert !default
+$table-row-active-background-color: var(--primary, #{$primary}) !default
+$table-row-active-color: var(--primary-invert, #{$primary-invert}) !default
 
-$table-striped-row-even-background-color: $scheme-main-bis !default
-$table-striped-row-even-hover-background-color: $scheme-main-ter !default
+$table-striped-row-even-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
+$table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
 
 .table
+  --table-body-background-color: #{$table-body-background-color}
+  --table-color: #{$table-color}
+  --table-cell-border-width: #{$table-cell-border-width}
+  --table-cell-border: #{$table-cell-border}
+  --table-cell-heading-color: #{$table-cell-heading-color}
+  --table-cell-padding: #{$table-cell-padding}
+  --table-foot-background-color: #{$table-foot-background-color}
+  --table-foot-cell-border-width: #{$table-foot-cell-border-width}
+  --table-foot-cell-color: #{$table-foot-cell-color}
+  --table-head-background-color: #{$table-head-background-color}
+  --table-head-cell-border-width: #{$table-head-cell-border-width}
+  --table-head-cell-color: #{$table-head-cell-color}
+  --table-row-active-background-color: #{$table-row-active-background-color}
+  --table-row-active-color: #{$table-row-active-color}
+  --table-row-hover-background-color: #{$table-row-hover-background-color}
+  --table-row-hover-background-color: #{$table-row-hover-background-color}
+  --table-striped-row-even-background-color: #{$table-striped-row-even-background-color}
+  --table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color}
+
   @extend %block
-  background-color: $table-background-color
-  color: $table-color
+  background-color: var(--table-body-background-color)
+  color: var(--table-color)
   td,
   th
-    border: $table-cell-border
-    border-width: $table-cell-border-width
-    padding: $table-cell-padding
+    border: var(--table-cell-border)
+    border-width: var(--table-cell-border-width)
+    padding: var(--table-cell-padding)
     vertical-align: top
     // Colors
     @each $name, $pair in $colors
       $color: nth($pair, 1)
       $color-invert: nth($pair, 2)
       &.is-#{$name}
-        background-color: $color
-        border-color: $color
-        color: $color-invert
+        background-color: var(--#{$name}, #{$color})
+        border-color: var(--#{$name}, #{$color})
+        color: var(--#{$name}-invert, #{$color-invert})
     // Modifiers
     &.is-narrow
       white-space: nowrap
       width: 1%
     &.is-selected
-      background-color: $table-row-active-background-color
-      color: $table-row-active-color
+      background-color: var(--table-row-active-background-color)
+      color: var(--table-row-active-color)
       a,
       strong
         color: currentColor
     &.is-vcentered
       vertical-align: middle
   th
-    color: $table-cell-heading-color
+    color: var(--table-cell-heading-color)
     &:not([align])
       text-align: inherit
   tr
     &.is-selected
-      background-color: $table-row-active-background-color
-      color: $table-row-active-color
+      background-color: var(--table-row-active-background-color)
+      color: var(--table-row-active-color)
       a,
       strong
         color: currentColor
       td,
       th
-        border-color: $table-row-active-color
+        border-color: var(--table-row-active-color)
         color: currentColor
   thead
-    background-color: $table-head-background-color
+    background-color: var(--table-head-background-color)
     td,
     th
-      border-width: $table-head-cell-border-width
-      color: $table-head-cell-color
+      border-width: var(--table-head-cell-border-width)
+      color: var(--table-head-cell-color)
   tfoot
-    background-color: $table-foot-background-color
+    background-color: var(--table-foot-background-color)
     td,
     th
-      border-width: $table-foot-cell-border-width
-      color: $table-foot-cell-color
+      border-width: var(--table-foot-cell-border-width)
+      color: var(--table-foot-cell-color)
   tbody
-    background-color: $table-body-background-color
+    background-color: var(--table-body-background-color)
     tr
       &:last-child
         td,
@@ -103,14 +122,14 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
     tbody
       tr:not(.is-selected)
         &:hover
-          background-color: $table-row-hover-background-color
+          background-color: var(--table-row-hover-background-color)
     &.is-striped
       tbody
         tr:not(.is-selected)
           &:hover
-            background-color: $table-row-hover-background-color
+            background-color: var(--table-row-hover-background-color)
             &:nth-child(even)
-              background-color: $table-striped-row-even-hover-background-color
+              background-color: var(--table-striped-row-even-hover-background-color)
   &.is-narrow
     td,
     th
@@ -119,7 +138,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
     tbody
       tr:not(.is-selected)
         &:nth-child(even)
-          background-color: $table-striped-row-even-background-color
+          background-color: var(--table-striped-row-even-background-color)
 
 .table-container
   @extend %block

diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index adc5200cc6d3784fc7b6808eb797b0f4d059cc17..9423ae30b63210fde15ebaa4e383ae8b7805dbc5 100644 (file)
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -117,7 +117,6 @@
   @return $color
 
 @function bulmaRgba($color, $alpha)
-  @debug $color
   @if type-of($color) != 'color'
     @return $color
   @return rgba($color, $alpha)