Allow each component to have its own colors and default to the global set

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index a34718ec893d140db0780199d97abde635c0e635..09b9851312f59bf24fa402e11d5dbbc0546a2a1c 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -46,6 +46,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
 $navbar-breakpoint: $desktop !default
 
+$navbar-colors: $colors !default
+
 =navbar-fixed
   left: 0
   position: fixed
@@ -57,7 +59,7 @@ $navbar-breakpoint: $desktop !default
   min-height: $navbar-height
   position: relative
   z-index: $navbar-z
-  @each $name, $pair in $colors
+  @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 4bdf2534ea1de512c8b5a93cb6b6a84f920b25ff..9e78de5a6a9433fe76e6a2211023af7bfdf33d6a 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -33,6 +33,8 @@ $button-static-color: $text-light !default
 $button-static-background-color: $scheme-main-ter !default
 $button-static-border-color: $border !default
 
+$button-colors: $colors !default
+
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
@@ -115,7 +117,7 @@ $button-static-border-color: $border !default
       background-color: transparent
       border-color: transparent
       box-shadow: none
-  @each $name, $pair in $colors
+  @each $name, $pair in $button-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass
index af1c7be5917c62166b2de8bdd11554585018b91a..31ee712e9a3f5e7fe1e0ae60dfdb9f035625937f 100644 (file)
--- a/sass/elements/notification.sass
+++ b/sass/elements/notification.sass
@@ -5,6 +5,8 @@ $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-colors: $colors !default
+
 .notification
   @extend %block
   background-color: $notification-background-color
@@ -33,7 +35,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
   .content
     color: currentColor
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $notification-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass
index d65bd904c522dd5e7c361b781a6f6fabc746dbc8..d6d7fce6f257789f89c22dea8c971184008e1613 100644 (file)
--- a/sass/elements/progress.sass
+++ b/sass/elements/progress.sass
@@ -4,6 +4,8 @@ $progress-border-radius: $radius-rounded !default
 
 $progress-indeterminate-duration: 1.5s !default
 
+$progress-colors: $colors !default
+
 .progress
   @extend %block
   -moz-appearance: none
@@ -25,7 +27,7 @@ $progress-indeterminate-duration: 1.5s !default
     background-color: $progress-value-background-color
     border: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $progress-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &::-webkit-progress-value

diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index 48d7d93e1faea4f8dc2b10da4eb45242b25eb73c..bb88e2d424828c3e4d01840a0c9e44e8fc98331f 100644 (file)
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -23,6 +23,8 @@ $table-row-active-color: $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-colors: $colors !default
+
 .table
   @extend %block
   background-color: $table-background-color
@@ -34,7 +36,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
     padding: $table-cell-padding
     vertical-align: top
     // Colors
-    @each $name, $pair in $colors
+    @each $name, $pair in $table-colors
       $color: nth($pair, 1)
       $color-invert: nth($pair, 2)
       &.is-#{$name}

diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
index f3c20a215f6e7f250704bf2e74e2be30af768d97..9ba30cd0832ba7a18e7fc822a208db1da8ca3f78 100644 (file)
--- a/sass/elements/tag.sass
+++ b/sass/elements/tag.sass
@@ -3,6 +3,8 @@ $tag-color: $text !default
 $tag-radius: $radius !default
 $tag-delete-margin: 1px !default
 
+$tag-colors: $colors !default
+
 .tags
   align-items: center
   display: flex
@@ -71,7 +73,7 @@ $tag-delete-margin: 1px !default
     +ltr-property("margin", 0.25rem, false)
     +ltr-property("margin", -0.375rem)
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $tag-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

diff --git a/sass/form/file.sass b/sass/form/file.sass
index 5fe0eee2a6cbc2a4c634e7cb01133a4a6217aff0..22a5a508a40a48d4e3af68f313cbe2706792e662 100644 (file)
--- a/sass/form/file.sass
+++ b/sass/form/file.sass
@@ -11,6 +11,8 @@ $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
 
+$file-colors: $form-colors !default
+
 .file
   @extend %unselectable
   align-items: stretch
@@ -18,7 +20,7 @@ $file-name-max-width: 16em !default
   justify-content: flex-start
   position: relative
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $file-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass
index a5aef556cb07d141f1b4915b9ff5e3c54e82fe3d..8d842a04f0d045948a4d3ee24ced92065631dbfa 100644 (file)
--- a/sass/form/input-textarea.sass
+++ b/sass/form/input-textarea.sass
@@ -2,6 +2,8 @@ $textarea-padding: $control-padding-horizontal !default
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
+$textarea-colors: $form-colors !default
+
 %input-textarea
   @extend %input
   box-shadow: $input-shadow
@@ -10,7 +12,7 @@ $textarea-min-height: 8em !default
   &[readonly]
     box-shadow: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $textarea-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       border-color: $color

diff --git a/sass/form/select.sass b/sass/form/select.sass
index 21d62d0b8577208c8495c3ae0c504c11ced9e114..07fe98cca172fba24b782b957287945c57326fef 100644 (file)
--- a/sass/form/select.sass
+++ b/sass/form/select.sass
@@ -1,3 +1,5 @@
+$select-colors: $form-colors !default
+
 .select
   display: inline-block
   max-width: 100%
@@ -39,7 +41,7 @@
     &::after
       border-color: $input-hover-color
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $select-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &:not(:hover)::after

diff --git a/sass/form/shared.sass b/sass/form/shared.sass
index 230a00cbf03afe876090b2c8b5379add32426f2a..b5e2ff3bcecb13ad1a18fefa4b433ec9ac3f7b25 100644 (file)
--- a/sass/form/shared.sass
+++ b/sass/form/shared.sass
@@ -1,3 +1,5 @@
+$form-colors: $colors !default
+
 $input-color: $text-strong !default
 $input-background-color: $scheme-main !default
 $input-border-color: $border !default

diff --git a/sass/form/tools.sass b/sass/form/tools.sass
index d97427c409c0aee877c8b7e090d304f0f8e26767..73b09b64bc4780a63da2ddcb74e4f91d777a0977 100644 (file)
--- a/sass/form/tools.sass
+++ b/sass/form/tools.sass
@@ -3,6 +3,8 @@ $label-weight: $weight-bold !default
 
 $help-size: $size-small !default
 
+$label-colors: $form-colors !default
+
 .label
   color: $label-color
   display: block
@@ -22,7 +24,7 @@ $help-size: $size-small !default
   display: block
   font-size: $help-size
   margin-top: 0.25rem
-  @each $name, $pair in $colors
+  @each $name, $pair in $label-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       color: $color

diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 925c98c285a1461fe5ef87a3b3b2e080bae9d051..996e0cdf5a343b9c13bff664cc311480a23f97f0 100644 (file)
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -3,6 +3,8 @@ $hero-body-padding-small: 1.5rem !default
 $hero-body-padding-medium: 9rem 1.5rem !default
 $hero-body-padding-large: 18rem 1.5rem !default
 
+$hero-colors: $colors !default
+
 // Main container
 .hero
   align-items: stretch
@@ -15,7 +17,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
     ul
       border-bottom: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $hero-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}