Add CSS variables to tabs

diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass
index 822c2e816b5d808996bf87d3d2a913c40453f41d..0976e33e2772333056efc150857fd0f6bf0c2ff1 100644 (file)
--- a/sass/components/pagination.sass
+++ b/sass/components/pagination.sass
@@ -1,53 +1,76 @@
-$pagination-color: $text-strong !default
-$pagination-border-color: $border !default
+$pagination-color: var(--text-strong, #{$text-strong}) !default
+$pagination-border-color: var(--border, #{$border}) !default
+$pagination-font-size: var(--size-normal, #{$size-normal}) !default
 $pagination-margin: -0.25rem !default
-$pagination-min-width: $control-height !default
+$pagination-min-width: var(--control-height, #{$control-height}) !default
 
 $pagination-item-font-size: 1em !default
 $pagination-item-margin: 0.25rem !default
 $pagination-item-padding-left: 0.5em !default
 $pagination-item-padding-right: 0.5em !default
 
-$pagination-hover-color: $link-hover !default
-$pagination-hover-border-color: $link-hover-border !default
+$pagination-hover-color: var(--link-hover, #{$link-hover}) !default
+$pagination-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !default
 
-$pagination-focus-color: $link-focus !default
-$pagination-focus-border-color: $link-focus-border !default
+$pagination-focus-color: var(--link-focus, #{$link-focus}) !default
+$pagination-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
 
-$pagination-active-color: $link-active !default
-$pagination-active-border-color: $link-active-border !default
+$pagination-active-color: var(--link-active, #{$link-active}) !default
+$pagination-active-border-color: var(--link-active-border, #{$link-active-border}) !default
 
-$pagination-disabled-color: $text-light !default
-$pagination-disabled-background-color: $border !default
-$pagination-disabled-border-color: $border !default
+$pagination-disabled-color: var(--text-light, #{$text-light}) !default
+$pagination-disabled-background-color: var(--border, #{$border}) !default
+$pagination-disabled-border-color: var(--border, #{$border}) !default
 
-$pagination-current-color: $link-invert !default
-$pagination-current-background-color: $link !default
-$pagination-current-border-color: $link !default
+$pagination-current-color: var(--link-invert, #{$link-invert}) !default
+$pagination-current-background-color: var(--link, #{$link}) !default
+$pagination-current-border-color: var(--link, #{$link}) !default
 
-$pagination-ellipsis-color: $grey-light !default
+$pagination-ellipsis-color: var(--grey-light, #{$grey-light}) !default
 
 $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination
+  --pagination-font-size: #{$pagination-font-size}
+  --pagination-margin: #{$pagination-margin}
+  --pagination-item-font-size: #{$pagination-item-font-size}
+  --pagination-item-margin: #{$pagination-item-margin}
+  --pagination-item-padding-left: #{$pagination-item-padding-left}
+  --pagination-item-padding-right: #{$pagination-item-padding-right}
+  --pagination-border-color: #{$pagination-border-color}
+  --pagination-color: #{$pagination-color}
+  --pagination-min-width: #{$pagination-min-width}
+  --pagination-hover-border-color: #{$pagination-hover-border-color}
+  --pagination-hover-color: #{$pagination-hover-color}
+  --pagination-focus-border-color: #{$pagination-focus-border-color}
+  --pagination-shadow-inset: #{$pagination-shadow-inset}
+  --pagination-disabled-background-color: #{$pagination-disabled-background-color}
+  --pagination-disabled-border-color: #{$pagination-disabled-border-color}
+  --pagination-disabled-color: #{$pagination-disabled-color}
+  --pagination-current-background-color: #{$pagination-current-background-color}
+  --pagination-current-border-color: #{$pagination-current-border-color}
+  --pagination-current-color: #{$pagination-current-color}
+  --pagination-ellipsis-color: #{$pagination-ellipsis-color}
+
   @extend %block
-  font-size: $size-normal
-  margin: $pagination-margin
+  font-size: var(--pagination-font-size)
+  margin: var(--pagination-margin)
+
   // Sizes
   &.is-small
-    font-size: $size-small
+    --pagination-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --pagination-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --pagination-font-size: var(--size-large, #{$size-large})
   &.is-rounded
     .pagination-previous,
     .pagination-next
       padding-left: 1em
       padding-right: 1em
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded)
     .pagination-link
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded)
 
 .pagination,
 .pagination-list
@@ -62,31 +85,31 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 .pagination-ellipsis
   @extend %control
   @extend %unselectable
-  font-size: $pagination-item-font-size
+  font-size: var(--pagination-item-font-size)
   justify-content: center
-  margin: $pagination-item-margin
-  padding-left: $pagination-item-padding-left
-  padding-right: $pagination-item-padding-right
+  margin: var(--pagination-item-margin)
+  padding-left: var(--pagination-item-padding-left)
+  padding-right: var(--pagination-item-padding-right)
   text-align: center
 
 .pagination-previous,
 .pagination-next,
 .pagination-link
-  border-color: $pagination-border-color
-  color: $pagination-color
-  min-width: $pagination-min-width
+  border-color: var(--pagination-border-color)
+  color: var(--pagination-color)
+  min-width: var(--pagination-min-width)
   &:hover
-    border-color: $pagination-hover-border-color
-    color: $pagination-hover-color
+    border-color: var(--pagination-hover-border-color)
+    color: var(--pagination-hover-color)
   &:focus
-    border-color: $pagination-focus-border-color
+    border-color: var(--pagination-focus-border-color)
   &:active
-    box-shadow: $pagination-shadow-inset
+    box-shadow: var(--pagination-shadow-inset)
   &[disabled]
-    background-color: $pagination-disabled-background-color
-    border-color: $pagination-disabled-border-color
+    background-color: var(--pagination-disabled-background-color)
+    border-color: var(--pagination-disabled-border-color)
     box-shadow: none
-    color: $pagination-disabled-color
+    color: var(--pagination-disabled-color)
     opacity: 0.5
 
 .pagination-previous,
@@ -97,12 +120,12 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-link
   &.is-current
-    background-color: $pagination-current-background-color
-    border-color: $pagination-current-border-color
-    color: $pagination-current-color
+    background-color: var(--pagination-current-background-color)
+    border-color: var(--pagination-current-border-color)
+    color: var(--pagination-current-color)
 
 .pagination-ellipsis
-  color: $pagination-ellipsis-color
+  color: var(--pagination-ellipsis-color)
   pointer-events: none
 
 .pagination-list

diff --git a/sass/components/panel.sass b/sass/components/panel.sass
index 2f7e2754e97d513fa0d772d95607aca06035993a..1b92cd6261d1fd3a146801ecc715710198b86c0c 100644 (file)
--- a/sass/components/panel.sass
+++ b/sass/components/panel.sass
@@ -1,3 +1,4 @@
+$panel-font-size: var(--size-normal, #{$size-normal}) !default
 $panel-margin: $block-spacing !default
 $panel-item-border: 1px solid $border-light !default
 $panel-radius: $radius-large !default
@@ -29,11 +30,36 @@ $panel-icon-color: $text-light !default
 $panel-colors: $colors !default
 
 .panel
-  border-radius: $panel-radius
-  box-shadow: $panel-shadow
+  --panel-font-size: #{$panel-font-size}
+  --panel-radius: #{$panel-radius}
+  --panel-shadow: #{$panel-shadow}
+  --panel-margin: #{$panel-margin}
+  --panel-item-border: #{$panel-item-border}
+  --panel-radius: #{$panel-radius}
+  --panel-heading-background-color: #{$panel-heading-background-color}
+  --panel-heading-color: #{$panel-heading-color}
+  --panel-heading-size: #{$panel-heading-size}
+  --panel-heading-weight: #{$panel-heading-weight}
+  --panel-heading-line-height: #{$panel-heading-line-height}
+  --panel-heading-padding: #{$panel-heading-padding}
+  --panel-tabs-font-size: #{$panel-tabs-font-size}
+  --panel-tab-border-bottom: #{$panel-tab-border-bottom}
+  --panel-tab-active-border-bottom-color: #{$panel-tab-active-border-bottom-color}
+  --panel-tab-active-color: #{$panel-tab-active-color}
+  --panel-list-item-color: #{$panel-list-item-color}
+  --panel-list-item-hover-color: #{$panel-list-item-hover-color}
+  --panel-block-color: #{$panel-block-color}
+  --panel-block-active-border-left-color: #{$panel-block-active-border-left-color}
+  --panel-block-active-color: #{$panel-block-active-color}
+  --panel-block-active-icon-color: #{$panel-block-active-icon-color}
+  --panel-block-hover-background-color: #{$panel-block-hover-background-color}
+  --panel-icon-color: #{$panel-icon-color}
+
+  border-radius: var(--panel-radius)
+  box-shadow: var(--panel-shadow)
   font-size: $size-normal
   &:not(:last-child)
-    margin-bottom: $panel-margin
+    margin-bottom: var(--panel-margin)
   // Colors
   @each $name, $components in $panel-colors
     $color: nth($components, 1)
@@ -50,40 +76,40 @@ $panel-colors: $colors !default
 .panel-tabs,
 .panel-block
   &:not(:last-child)
-    border-bottom: $panel-item-border
+    border-bottom: var(--panel-item-border)
 
 .panel-heading
-  background-color: $panel-heading-background-color
-  border-radius: $panel-radius $panel-radius 0 0
-  color: $panel-heading-color
-  font-size: $panel-heading-size
-  font-weight: $panel-heading-weight
-  line-height: $panel-heading-line-height
-  padding: $panel-heading-padding
+  background-color: var(--panel-heading-background-color)
+  border-radius: var(--panel-radius) var(--panel-radius) 0 0
+  color: var(--panel-heading-color)
+  font-size: var(--panel-heading-size)
+  font-weight: var(--panel-heading-weight)
+  line-height: var(--panel-heading-line-height)
+  padding: var(--panel-heading-padding)
 
 .panel-tabs
   align-items: flex-end
   display: flex
-  font-size: $panel-tabs-font-size
+  font-size: var(--panel-tabs-font-size)
   justify-content: center
   a
-    border-bottom: $panel-tab-border-bottom
+    border-bottom: var(--panel-tab-border-bottom)
     margin-bottom: -1px
     padding: 0.5em
     // Modifiers
     &.is-active
-      border-bottom-color: $panel-tab-active-border-bottom-color
-      color: $panel-tab-active-color
+      border-bottom-color: var(--panel-tab-active-border-bottom-color)
+      color: var(--panel-tab-active-color)
 
 .panel-list
   a
-    color: $panel-list-item-color
+    color: var(--panel-list-item-color)
     &:hover
-      color: $panel-list-item-hover-color
+      color: var(--panel-list-item-hover-color)
 
 .panel-block
   align-items: center
-  color: $panel-block-color
+  color: var(--panel-block-color)
   display: flex
   justify-content: flex-start
   padding: 0.5em 0.75em
@@ -96,23 +122,23 @@ $panel-colors: $colors !default
   &.is-wrapped
     flex-wrap: wrap
   &.is-active
-    border-left-color: $panel-block-active-border-left-color
-    color: $panel-block-active-color
+    border-left-color: var(--panel-block-active-border-left-color)
+    color: var(--panel-block-active-color)
     .panel-icon
-      color: $panel-block-active-icon-color
+      color: var(--panel-block-active-icon-color)
   &:last-child
-    border-bottom-left-radius: $panel-radius
-    border-bottom-right-radius: $panel-radius
+    border-bottom-left-radius: var(--panel-radius)
+    border-bottom-right-radius: var(--panel-radius)
 
 a.panel-block,
 label.panel-block
   cursor: pointer
   &:hover
-    background-color: $panel-block-hover-background-color
+    background-color: var(--panel-block-hover-background-color)
 
 .panel-icon
   +fa(14px, 1em)
-  color: $panel-icon-color
+  color: var(--panel-icon-color)
   +ltr-property("margin", 0.75em)
   .fa
     font-size: inherit

diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass
index 2308bf093b7e25307f5c1fa01980e7e14c1b0bce..d5fac5b1a7b47d6df4d196e3a6b00eb62906f644 100644 (file)
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -1,67 +1,94 @@
-$tabs-border-bottom-color: $border !default
+$tabs-font-size: var(--size-normal, #{$size-normal}) !default
+$tabs-border-bottom-color: var(--border, #{$border}) !default
 $tabs-border-bottom-style: solid !default
 $tabs-border-bottom-width: 1px !default
-$tabs-link-color: $text !default
-$tabs-link-hover-border-bottom-color: $text-strong !default
-$tabs-link-hover-color: $text-strong !default
-$tabs-link-active-border-bottom-color: $link !default
-$tabs-link-active-color: $link !default
+$tabs-link-color: var(--text, #{$text}) !default
+$tabs-link-hover-border-bottom-color: var(--text-strong, #{$text-strong}) !default
+$tabs-link-hover-color: var(--text-strong, #{$text-strong}) !default
+$tabs-link-active-border-bottom-color: var(--link, #{$link}) !default
+$tabs-link-active-color: var(--link, #{$link}) !default
 $tabs-link-padding: 0.5em 1em !default
 
-$tabs-boxed-link-radius: $radius !default
-$tabs-boxed-link-hover-background-color: $background !default
-$tabs-boxed-link-hover-border-bottom-color: $border !default
+$tabs-boxed-link-radius: var(--radius, #{$radius}) !default
+$tabs-boxed-link-hover-background-color: var(--background, #{$background}) !default
+$tabs-boxed-link-hover-border-bottom-color: var(--border, #{$border}) !default
 
-$tabs-boxed-link-active-background-color: $scheme-main !default
-$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-background-color: var(--scheme-main, #{$scheme-main}) !default
+$tabs-boxed-link-active-border-color: var(--border, #{$border}) !default
 $tabs-boxed-link-active-border-bottom-color: transparent !default
 
-$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-color: var(--border, #{$border}) !default
 $tabs-toggle-link-border-style: solid !default
 $tabs-toggle-link-border-width: 1px !default
-$tabs-toggle-link-hover-background-color: $background !default
-$tabs-toggle-link-hover-border-color: $border-hover !default
-$tabs-toggle-link-radius: $radius !default
-$tabs-toggle-link-active-background-color: $link !default
-$tabs-toggle-link-active-border-color: $link !default
-$tabs-toggle-link-active-color: $link-invert !default
+$tabs-toggle-link-hover-background-color: var(--background, #{$background}) !default
+$tabs-toggle-link-hover-border-color: var(--border-hover, #{$border-hover}) !default
+$tabs-toggle-link-radius: var(--radius, #{$radius}) !default
+$tabs-toggle-link-active-background-color: var(--link, #{$link}) !default
+$tabs-toggle-link-active-border-color: var(--link, #{$link}) !default
+$tabs-toggle-link-active-color: var(--link-invert, #{$link-invert}) !default
 
 .tabs
+  --tabs-font-size: #{$tabs-font-size}
+  --tabs-border-bottom-color: #{$tabs-border-bottom-color}
+  --tabs-border-bottom-style: #{$tabs-border-bottom-style}
+  --tabs-border-bottom-width: #{$tabs-border-bottom-width}
+  --tabs-link-color: #{$tabs-link-color}
+  --tabs-link-padding: #{$tabs-link-padding}
+  --tabs-link-hover-border-bottom-color: #{$tabs-link-hover-border-bottom-color}
+  --tabs-link-hover-color: #{$tabs-link-hover-color}
+  --tabs-link-active-border-bottom-color: #{$tabs-link-active-border-bottom-color}
+  --tabs-link-active-color: #{$tabs-link-active-color}
+  --tabs-boxed-link-radius: #{$tabs-boxed-link-radius}
+  --tabs-boxed-link-hover-background-color: #{$tabs-boxed-link-hover-background-color}
+  --tabs-boxed-link-hover-border-bottom-color: #{$tabs-boxed-link-hover-border-bottom-color}
+  --tabs-boxed-link-active-background-color: #{$tabs-boxed-link-active-background-color}
+  --tabs-boxed-link-active-border-color: #{$tabs-boxed-link-active-border-color}
+  --tabs-boxed-link-active-border-bottom-color: #{$tabs-boxed-link-active-border-bottom-color}
+  --tabs-toggle-link-border-color: #{$tabs-toggle-link-border-color}
+  --tabs-toggle-link-border-style: #{$tabs-toggle-link-border-style}
+  --tabs-toggle-link-border-width: #{$tabs-toggle-link-border-width}
+  --tabs-toggle-link-hover-background-color: #{$tabs-toggle-link-hover-background-color}
+  --tabs-toggle-link-hover-border-color: #{$tabs-toggle-link-hover-border-color}
+  --tabs-toggle-link-radius: #{$tabs-toggle-link-radius}
+  --tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color}
+  --tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color}
+  --tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color}
+
   @extend %block
   +overflow-touch
   @extend %unselectable
   align-items: stretch
   display: flex
-  font-size: $size-normal
+  font-size: var(--tabs-font-size)
   justify-content: space-between
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
   a
     align-items: center
-    border-bottom-color: $tabs-border-bottom-color
-    border-bottom-style: $tabs-border-bottom-style
-    border-bottom-width: $tabs-border-bottom-width
-    color: $tabs-link-color
+    border-bottom-color: var(--tabs-border-bottom-color)
+    border-bottom-style: var(--tabs-border-bottom-style)
+    border-bottom-width: var(--tabs-border-bottom-width)
+    color: var(--tabs-link-color)
     display: flex
     justify-content: center
-    margin-bottom: -#{$tabs-border-bottom-width}
-    padding: $tabs-link-padding
+    margin-bottom: calc(-1 * #{var(--tabs-border-bottom-width)})
+    padding: var(--tabs-link-padding)
     vertical-align: top
     &:hover
-      border-bottom-color: $tabs-link-hover-border-bottom-color
-      color: $tabs-link-hover-color
+      border-bottom-color: var(--tabs-link-hover-border-bottom-color)
+      color: var(--tabs-link-hover-color)
   li
     display: block
     &.is-active
       a
-        border-bottom-color: $tabs-link-active-border-bottom-color
-        color: $tabs-link-active-color
+        border-bottom-color: var(--tabs-link-active-border-bottom-color)
+        color: var(--tabs-link-active-color)
   ul
     align-items: center
-    border-bottom-color: $tabs-border-bottom-color
-    border-bottom-style: $tabs-border-bottom-style
-    border-bottom-width: $tabs-border-bottom-width
+    border-bottom-color: var(--tabs-border-bottom-color)
+    border-bottom-style: var(--tabs-border-bottom-style)
+    border-bottom-width: var(--tabs-border-bottom-width)
     display: flex
     flex-grow: 1
     flex-shrink: 0
@@ -93,55 +120,55 @@ $tabs-toggle-link-active-color: $link-invert !default
     a
       border: 1px solid transparent
       +ltr
-        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+        border-radius: var(--tabs-boxed-link-radius) var(--tabs-boxed-link-radius) 0 0
       +rtl
-        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
+        border-radius: 0 0 var(--tabs-boxed-link-radius) var(--tabs-boxed-link-radius)
       &:hover
-        background-color: $tabs-boxed-link-hover-background-color
-        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
+        background-color: var(--tabs-boxed-link-hover-background-color)
+        border-bottom-color: var(--tabs-boxed-link-hover-border-bottom-color)
     li
       &.is-active
         a
-          background-color: $tabs-boxed-link-active-background-color
-          border-color: $tabs-boxed-link-active-border-color
-          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
+          background-color: var(--tabs-boxed-link-active-background-color)
+          border-color: var(--tabs-boxed-link-active-border-color)
+          border-bottom-color: var(--tabs-boxed-link-active-border-bottom-color) !important
   &.is-fullwidth
     li
       flex-grow: 1
       flex-shrink: 0
   &.is-toggle
     a
-      border-color: $tabs-toggle-link-border-color
-      border-style: $tabs-toggle-link-border-style
-      border-width: $tabs-toggle-link-border-width
+      border-color: var(--tabs-toggle-link-border-color)
+      border-style: var(--tabs-toggle-link-border-style)
+      border-width: var(--tabs-toggle-link-border-width)
       margin-bottom: 0
       position: relative
       &:hover
-        background-color: $tabs-toggle-link-hover-background-color
-        border-color: $tabs-toggle-link-hover-border-color
+        background-color: var(--tabs-toggle-link-hover-background-color)
+        border-color: var(--tabs-toggle-link-hover-border-color)
         z-index: 2
     li
       & + li
-        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
+        +ltr-property("margin", calc(-1 * #{var(--tabs-toggle-link-border-width)}), false)
       &:first-child a
         +ltr
-          border-top-left-radius: $tabs-toggle-link-radius
-          border-bottom-left-radius: $tabs-toggle-link-radius
+          border-top-left-radius: var(--tabs-toggle-link-radius)
+          border-bottom-left-radius: var(--tabs-toggle-link-radius)
         +rtl
-          border-top-right-radius: $tabs-toggle-link-radius
-          border-bottom-right-radius: $tabs-toggle-link-radius
+          border-top-right-radius: var(--tabs-toggle-link-radius)
+          border-bottom-right-radius: var(--tabs-toggle-link-radius)
       &:last-child a
         +ltr
-          border-top-right-radius: $tabs-toggle-link-radius
-          border-bottom-right-radius: $tabs-toggle-link-radius
+          border-top-right-radius: var(--tabs-toggle-link-radius)
+          border-bottom-right-radius: var(--tabs-toggle-link-radius)
         +rtl
-          border-top-left-radius: $tabs-toggle-link-radius
-          border-bottom-left-radius: $tabs-toggle-link-radius
+          border-top-left-radius: var(--tabs-toggle-link-radius)
+          border-bottom-left-radius: var(--tabs-toggle-link-radius)
       &.is-active
         a
-          background-color: $tabs-toggle-link-active-background-color
-          border-color: $tabs-toggle-link-active-border-color
-          color: $tabs-toggle-link-active-color
+          background-color: var(--tabs-toggle-link-active-background-color)
+          border-color: var(--tabs-toggle-link-active-border-color)
+          color: var(--tabs-toggle-link-active-color)
           z-index: 1
     ul
       border-bottom: none
@@ -149,26 +176,26 @@ $tabs-toggle-link-active-color: $link-invert !default
       li
         &:first-child a
           +ltr
-            border-bottom-left-radius: $radius-rounded
-            border-top-left-radius: $radius-rounded
+            border-bottom-left-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-left-radius: var(--radius-rounded, #{$radius-rounded})
             padding-left: 1.25em
           +rtl
-            border-bottom-right-radius: $radius-rounded
-            border-top-right-radius: $radius-rounded
+            border-bottom-right-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-right-radius: var(--radius-rounded, #{$radius-rounded})
             padding-right: 1.25em
         &:last-child a
           +ltr
-            border-bottom-right-radius: $radius-rounded
-            border-top-right-radius: $radius-rounded
+            border-bottom-right-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-right-radius: var(--radius-rounded, #{$radius-rounded})
             padding-right: 1.25em
           +rtl
-            border-bottom-left-radius: $radius-rounded
-            border-top-left-radius: $radius-rounded
+            border-bottom-left-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-left-radius: var(--radius-rounded, #{$radius-rounded})
             padding-left: 1.25em
   // Sizes
   &.is-small
-    font-size: $size-small
+    --tabs-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --tabs-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --tabs-font-size: var(--size-large, #{$size-large})