wave-ui 3.28.0 → 4.0.0

package/src/wave-ui/components/w-icon.vue

@@ -98,8 +98,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-icon {
   position: relative;
   display: inline-flex;
@@ -115,21 +113,21 @@ export default {
   // The aspect ratio will not work if the content overflows (needs overflow hidden, but we don't want that in the library).
   height: 1em;
 
-  &.size--xs {font-size: math.round(0.85 * $base-font-size);}
-  &.size--sm {font-size: math.round(1.15 * $base-font-size);}
-  &.size--md {font-size: math.round(1.4 * $base-font-size);}
-  &.size--lg {font-size: math.round(1.7 * $base-font-size);}
-  &.size--xl {font-size: 2 * $base-font-size;}
+  &.size--xs {font-size: round(nearest, calc(0.85 * var(--w-base-font-size)), 1px);}
+  &.size--sm {font-size: round(nearest, calc(1.15 * var(--w-base-font-size)), 1px);}
+  &.size--md {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
+  &.size--lg {font-size: round(nearest, calc(1.7 * var(--w-base-font-size)), 1px);}
+  &.size--xl {font-size: calc(2 * var(--w-base-font-size));}
 
   // Always an even number to align well vertically in a button.
-  .w-button.size--xs & {font-size: math.round(0.95 * divide($base-font-size, 2)) * 2;}
-  .w-alert.size--xs & {font-size: $base-font-size;}
-  .w-button.size--sm &, .w-alert.size--sm & {font-size: math.round(1.15 * $base-font-size);}
-  // .w-button.size--md &, .w-alert.size--md & {font-size: math.round(1.4 * $base-font-size);}
-  .w-button.size--lg &, .w-alert.size--lg & {font-size: math.round(1.7 * $base-font-size);}
-  .w-button.size--xl &, .w-alert.size--xl & {font-size: 2 * $base-font-size;}
+  .w-button.size--xs & {font-size: calc(2 * round(nearest, calc(0.95 * var(--w-base-font-size) / 2), 1px));}
+  .w-alert.size--xs & {font-size: var(--w-base-font-size);}
+  .w-button.size--sm &, .w-alert.size--sm & {font-size: round(nearest, calc(1.15 * var(--w-base-font-size)), 1px);}
+  // .w-button.size--md &, .w-alert.size--md & {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
+  .w-button.size--lg &, .w-alert.size--lg & {font-size: round(nearest, calc(1.7 * var(--w-base-font-size)), 1px);}
+  .w-button.size--xl &, .w-alert.size--xl & {font-size: calc(2 * var(--w-base-font-size));}
 
-  &:before {transition: transform $transition-duration;}
+  &:before {transition: transform var(--w-transition-duration);}
   &--spin:before {animation: w-icon--spin 2s infinite linear;}
   &--spin-a:before {animation: w-icon--spin-a 2s infinite linear;}
   &--rotate45:before {transform: rotate(45deg);}

package/src/wave-ui/components/w-image.vue

@@ -247,7 +247,7 @@ export default {
   }
 
   &__caption {
-    padding-top: $base-increment;
+    padding-top: var(--w-base-increment);
     text-align: right;
   }
 }

package/src/wave-ui/components/w-input.vue

@@ -162,6 +162,12 @@ export default {
     round: { type: Boolean },
     shadow: { type: Boolean },
     tile: { type: Boolean },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
     multiple: { type: Boolean }, // Only for file uploads.
     preview: { type: [Boolean, String], default: true }, // Only for file uploads.
     loading: { type: [Boolean, Number], default: false }, // If a number is given, it will be the value of the progress.
@@ -251,6 +257,10 @@ export default {
       return this.overallFilesProgress === 100
     },
 
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         'w-input': true,
@@ -266,6 +276,7 @@ export default {
         'w-input--has-placeholder': this.placeholder,
         'w-input--inner-icon-left': this.innerIconLeft,
         'w-input--inner-icon-right': this.innerIconRight,
+        [`size--${this.presetSize}`]: !!this.presetSize,
         // With the inheritAttrs set to false any class on the component would be lost, so add it back.
         [this.$attrs.class]: !!this.$attrs.class
       }
@@ -391,7 +402,7 @@ $inactive-color: #777;
   flex-grow: 1;
   flex-wrap: wrap;
   align-items: center;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
   &--file {
     flex-wrap: nowrap;
@@ -409,13 +420,13 @@ $inactive-color: #777;
     display: inline-flex;
     flex: 1 1 auto;
     align-items: center;
-    height: $form-field-height;
-    border-radius: $border-radius;
-    border: $border;
-    transition: border $transition-duration;
+    height: var(--w-size, var(--w-form-field-height));
+    border-radius: var(--w-border-radius);
+    border: var(--w-border);
+    transition: border var(--w-transition-duration);
 
     .w-input.h-auto & {height: auto;}
-    .w-input--floating-label & {margin-top: 3 * $base-increment;}
+    .w-input--floating-label & {margin-top: calc(var(--w-base-increment) * 3);}
     .w-input[class^="bdrs"] &, .w-input[class*=" bdrs"] & {border-radius: inherit;}
 
     // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
@@ -429,7 +440,7 @@ $inactive-color: #777;
 
     &--round {border-radius: 99em;}
     &--tile {border-radius: initial;}
-    &--shadow {box-shadow: $box-shadow;}
+    &--shadow {box-shadow: var(--w-box-shadow);}
     &--loading, &--upload-complete {
       border-bottom-color: transparent;
       flex-wrap: wrap;
@@ -454,7 +465,7 @@ $inactive-color: #777;
       width: 100%;
       height: 0;
       border-bottom: 2px solid currentColor;
-      transition: $transition-duration;
+      transition: var(--w-transition-duration);
       transform: scaleX(0);
       pointer-events: none;
     }
@@ -464,11 +475,11 @@ $inactive-color: #777;
     .w-input--focused &--underline:after {transform: scaleX(1);}
     &--round.w-input__input-wrap--underline:after {
       border-radius: 99em;
-      transition: $transition-duration, height 0.035s;
+      transition: var(--w-transition-duration), height 0.035s;
     }
     .w-input--focused &--round.w-input__input-wrap--underline:after {
       height: 100%;
-      transition: $transition-duration, height 0s ($transition-duration - 0.035s);
+      transition: var(--w-transition-duration), height 0s calc(var(--w-transition-duration) - 0.035s);
     }
   }
 
@@ -486,8 +497,8 @@ $inactive-color: #777;
     border: none;
     border-radius: inherit; // Mostly for the browser-autofilled appearance.
     outline: none;
-    padding-left: 2 * $base-increment;
-    padding-right: 2 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 2);
+    padding-right: calc(var(--w-base-increment) * 2);
 
     // For type="search" on Safari.
     -webkit-appearance: none;
@@ -500,15 +511,15 @@ $inactive-color: #777;
   }
 
   &__input-wrap--round &__input {
-    padding-left: 3 * $base-increment;
-    padding-right: 3 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 3);
+    padding-right: calc(var(--w-base-increment) * 3);
   }
 
   &--inner-icon-left &__input {padding-left: 27px;}
   &--inner-icon-right &__input {padding-right: 27px;}
 
   &--disabled &__input {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -548,7 +559,7 @@ $inactive-color: #777;
     left: 0;
     display: flex;
     align-items: center;
-    color: $disabled-color;
+    color: var(--w-disabled-color);
   }
 
   &__file-preview {
@@ -570,7 +581,7 @@ $inactive-color: #777;
   .w-input--focused &__icon {color: currentColor;}
 
   &--disabled &__icon {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -578,15 +589,15 @@ $inactive-color: #777;
   // Label.
   // ------------------------------------------------------
   &__label {
-    transition: color $transition-duration;
+    transition: color var(--w-transition-duration);
     cursor: pointer;
     user-select: none;
 
-    &--left {margin-right: 2 * $base-increment;}
-    &--right {margin-left: 2 * $base-increment;}
+    &--left {margin-right: calc(var(--w-base-increment) * 2);}
+    &--right {margin-left: calc(var(--w-base-increment) * 2);}
 
     .w-input--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -600,7 +611,7 @@ $inactive-color: #777;
     position: absolute;
     top: 50%;
     left: 0;
-    padding-left: 2 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 2);
     white-space: nowrap;
     transform: translateY(-50%);
     pointer-events: none;
@@ -611,15 +622,15 @@ $inactive-color: #777;
       padding-right: 0;
     }
     .w-input__input-wrap--round & {
-      padding-left: math.round(3 * $base-increment);
-      padding-right: math.round(3 * $base-increment);
+      padding-left: calc(var(--w-base-increment) * 3);
+      padding-right: calc(var(--w-base-increment) * 3);
     }
     .w-input--inner-icon-left & {left: 18px;}
     .w-input--no-padding.w-input--inner-icon-left & {left: 26px;}
 
     .w-input--floating-label & {
       transform-origin: 0 0;
-      transition: $transition-duration ease;
+      transition: var(--w-transition-duration) ease;
       will-change: transform;
     }
 
@@ -644,5 +655,12 @@ $inactive-color: #777;
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-input--floating-label.w-input--inner-icon-left .w-input__input:-webkit-autofill & {left: 0;}
   }
+
+  // Sizes.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 1px);}
+  &.size--sm {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 1px);}
+  &.size--lg {--w-size: round(nearest, calc(2.29 * var(--w-base-font-size)), 1px);}
+  &.size--xl {--w-size: round(nearest, calc(2.71 * var(--w-base-font-size)), 1px);}
 }
 </style>

package/src/wave-ui/components/w-list.vue

@@ -409,10 +409,10 @@ export default {
 .w-list {
   list-style-type: none;
   margin-left: 0;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
-  &--child {margin-left: 6 * $base-increment;}
-  &--icon {padding-left: 8 * $base-increment;}
+  &--child {margin-left: calc(var(--w-base-increment) * 6);}
+  &--icon {padding-left: calc(var(--w-base-increment) * 8);}
 
   &__item {margin-top: 1px;}
   &__item:first-child {margin-top: 0;}
@@ -428,7 +428,7 @@ export default {
   &__item-bullet {
     position: absolute;
     right: 100%;
-    margin-right: 3 * $base-increment;
+    margin-right: calc(var(--w-base-increment) * 3);
     top: 0.1em;
 
     @-moz-document url-prefix() {
@@ -437,7 +437,7 @@ export default {
 
     .w-list--hoverable &,
     .w-list--selectable &,
-    .w-list--checklist & {margin-top: 3 * $base-increment;}
+    .w-list--checklist & {margin-top: calc(var(--w-base-increment) * 3);}
   }
 
   // List item Label.
@@ -463,15 +463,14 @@ export default {
 
     &--hoverable,
     &--selectable {
-      padding: 2 * $base-increment;
+      padding: calc(var(--w-base-increment) * 2);
 
       &:before {
         content: '';
         position: absolute;
         inset: 0;
-        background-color: currentColor;
-        opacity: 0;
-        transition: 0.2s;
+        background-color: transparent;
+        transition: background-color 0.2s;
         pointer-events: none;
       }
     }
@@ -480,17 +479,17 @@ export default {
     &--hoverable:hover:before,
     &--selectable:focus:before,
     &--focused:before,
-    &--selectable:hover:before {opacity: 0.08;}
+    &--selectable:hover:before {background-color: color-mix(in srgb, currentColor 8%, transparent);}
 
     // Active class (when item is selected).
     &--active:before, &--active:focus:before, &--active:hover:before,
-    .w-list--navigation &.router-link-exact-active:before {opacity: 0.15;}
+    .w-list--navigation &.router-link-exact-active:before {background-color: color-mix(in srgb, currentColor 15%, transparent);}
 
     // Active state (while pressing key or mouse).
     &--active.w-list__item-label--hoverable:hover:before,
     &--active.w-list__item-label--selectable:focus:before,
     &--active.w-list__item-label--selectable:hover:before,
-    &--selectable:active:before {opacity: 0.2;}
+    &--selectable:active:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
 
     // Disabled.
     &--disabled:before {display: none;}

package/src/wave-ui/components/w-menu.vue

@@ -1,44 +1,48 @@
 <template lang="pug">
-slot(name="activator" :on="activatorEventHandlers")
-transition(:name="transitionName" appear @after-leave="onAfterLeave")
-  .w-menu(
-    v-if="custom && detachableVisible"
-    ref="detachable"
-    v-bind="$attrs"
-    @click="hideOnMenuClick && close(true)"
-    @mouseenter="showOnHover && (hoveringMenu = true)"
-    @mouseleave="showOnHover && ((hoveringMenu = false), close())"
-    :class="classes"
-    :style="styles")
-    slot
-  w-card.w-menu(
-    v-else-if="detachableVisible"
-    ref="detachable"
-    v-bind="$attrs"
-    @click.native="hideOnMenuClick && close(true)"
-    @mouseenter.native="showOnHover && (hoveringMenu = true)"
-    @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
-    :tile="tile"
-    :title-class="titleClasses"
-    :content-class="contentClasses"
-    :shadow="shadow"
-    :no-border="noBorder"
-    :class="classes"
-    :style="styles")
-    template(v-if="$slots.title" #title)
-      slot(name="title")
-    template(v-if="$slots.actions" #actions)
-      slot(name="actions")
-    slot
-w-overlay(
-  v-if="overlay"
-  ref="overlay"
-  :model-value="detachableVisible"
-  :persistent="persistent"
-  :class="overlayClasses"
-  v-bind="overlayProps"
-  :z-index="(zIndex || 200) - 1"
-  @update:model-value="detachableVisible = false")
+slot(name="activator")
+slot(v-if="!$slots.activator")
+teleport(:to="teleportTarget" :disabled="!teleportTarget")
+  transition(:name="transitionName" appear @after-leave="onAfterLeave")
+    .w-menu(
+      v-if="custom && detachableVisible"
+      ref="detachable"
+      v-bind="$attrs"
+      @click="hideOnMenuClick && close(true)"
+      @mouseenter="showOnHover && (hoveringMenu = true)"
+      @mouseleave="showOnHover && ((hoveringMenu = false), close())"
+      :class="classes"
+      :style="styles")
+      slot(v-if="$slots.activator")
+      slot(v-else name="content")
+    w-card.w-menu(
+      v-else-if="detachableVisible"
+      ref="detachable"
+      v-bind="$attrs"
+      @click.native="hideOnMenuClick && close(true)"
+      @mouseenter.native="showOnHover && (hoveringMenu = true)"
+      @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
+      :tile="tile"
+      :title-class="titleClasses"
+      :content-class="contentClasses"
+      :shadow="shadow"
+      :no-border="noBorder"
+      :class="classes"
+      :style="styles")
+      template(v-if="$slots.title" #title)
+        slot(name="title")
+      template(v-if="$slots.actions" #actions)
+        slot(name="actions")
+      slot(v-if="$slots.activator")
+      slot(v-else name="content")
+  w-overlay(
+    v-if="overlay"
+    ref="overlay"
+    :model-value="detachableVisible"
+    :persistent="persistent"
+    :class="overlayClasses"
+    v-bind="overlayProps"
+    :z-index="(zIndex || 200) - 1"
+    @update:model-value="detachableVisible = false")
 </template>
 
 <script>
@@ -175,7 +179,7 @@ export default {
         minWidth: (this.minWidth && this.menuMinWidth) || null,
         maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
         visibility: this.detachableReady ? null : 'hidden', // Hidden until coords are ready.
-        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)')
+        '--w-menu-bg-color': this.arrow ? (this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)') : null
       }
     },
 
@@ -291,36 +295,34 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-menu-wrap {display: none;}
 
 .w-menu {
   position: absolute;
   z-index: 100;
-  color: $menu-color;
+  color: var(--w-menu-color);
 
   @include themeable;
 
   &--fixed {position: fixed;z-index: 1000;}
-  &--card {background-color: $menu-bg-color;}
+  &--card {background-color: var(--w-menu-bg-color);}
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding: $base-increment math.round(2.5 * $base-increment);
+    padding: var(--w-base-increment) calc(var(--w-base-increment) * 2.5);
   }
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
-  &--top {margin-top: -3 * $base-increment;}
-  &--bottom {margin-top: 3 * $base-increment;}
-  &--left {margin-left: -3 * $base-increment;}
-  &--right {margin-left: 3 * $base-increment;}
+  &--top {margin-top: calc(var(--w-base-increment) * -3);}
+  &--bottom {margin-top: calc(var(--w-base-increment) * 3);}
+  &--left {margin-left: calc(var(--w-base-increment) * -3);}
+  &--right {margin-left: calc(var(--w-base-increment) * 3);}
 
   &--arrow {
-    &.w-menu--top {margin-top: -4 * $base-increment;}
-    &.w-menu--bottom {margin-top: 4 * $base-increment;}
-    &.w-menu--left {margin-left: -4 * $base-increment;}
-    &.w-menu--right {margin-left: 4 * $base-increment;}
+    &.w-menu--top {margin-top: calc(var(--w-base-increment) * -4);}
+    &.w-menu--bottom {margin-top: calc(var(--w-base-increment) * 4);}
+    &.w-menu--left {margin-left: calc(var(--w-base-increment) * -4);}
+    &.w-menu--right {margin-left: calc(var(--w-base-increment) * 4);}
 
     // Menu without border.
     &.w-menu--no-border {

package/src/wave-ui/components/w-notification.vue

@@ -168,8 +168,8 @@ export default {
 .w-notification {
   display: flex;
   justify-content: center;
-  left: 2 * $base-increment;
-  right: 2 * $base-increment;
+  left: calc(var(--w-base-increment) * 2);
+  right: calc(var(--w-base-increment) * 2);
   position: fixed;
   z-index: 300;
   pointer-events: none;
@@ -178,8 +178,8 @@ export default {
 
   // Position.
   &--absolute {position: absolute;z-index: 400;}
-  &--top {top: 0;padding-top: 2 * $base-increment;}
-  &--bottom {bottom: 0;padding-bottom: 2 * $base-increment;}
+  &--top {top: 0;padding-top: calc(var(--w-base-increment) * 2);}
+  &--bottom {bottom: 0;padding-bottom: calc(var(--w-base-increment) * 2);}
   &--left {justify-content: flex-start;right: auto;}
   &--right {justify-content: flex-end;left: auto;}
 

package/src/wave-ui/components/w-progress.vue

@@ -135,11 +135,11 @@ $circle-size: 40;
   &--top {top: 0;}
   &--bottom {bottom: 0;}
 
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   // Linear progress.
   // ------------------------------------------------------
-  &--linear {border-radius: $border-radius;}
+  &--linear {border-radius: var(--w-border-radius);}
   // Tile, round and outline are only available on linear progress.
   &--tile {border-radius: 0;}
   &--round {border-radius: 99em;}
@@ -147,7 +147,7 @@ $circle-size: 40;
 
   &--linear {
     display: flex;
-    height: $base-increment;
+    height: var(--w-base-increment);
     overflow: hidden;
 
     // Background.
@@ -156,8 +156,7 @@ $circle-size: 40;
       position: absolute;
       inset: 0;
       border-radius: inherit;
-      background-color: currentColor;
-      opacity: 0.15;
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
     }
     &.w-progress--outline:after {display: none;}
 
@@ -242,11 +241,11 @@ $circle-size: 40;
     display: inline-flex;
     width: 3em;
     aspect-ratio: 1;
-    font-size: $base-font-size;
+    font-size: var(--w-base-font-size);
 
     svg {display: block;width: 100%;}
     circle.bg {stroke: currentColor;}
-    &.w-progress--default-bg circle.bg {stroke: $progress-bg-color;}
+    &.w-progress--default-bg circle.bg {stroke: var(--w-progress-bg-color);}
 
     .w-progress__progress {
       transform-origin: 100% 100%;

package/src/wave-ui/components/w-radio.vue

@@ -69,6 +69,12 @@ export default {
     color: { type: String, default: 'primary' },
     labelColor: { type: String, default: 'primary' },
     noRipple: { type: Boolean },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
@@ -90,6 +96,10 @@ export default {
     hasLabel () {
       return this.label || this.$slots.default
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         [`w-radio w-radio--${this.inputValue ? 'checked' : 'unchecked'}`]: true,
@@ -98,7 +108,8 @@ export default {
         'w-radio--ripple': this.ripple.start,
         'w-radio--rippled': this.ripple.end,
         'w-radio--dark': this.ripple.dark,
-        'w-radio--light': this.ripple.light
+        'w-radio--light': this.ripple.light,
+        [`size--${this.presetSize}`]: !!this.presetSize
       }
     }
   },
@@ -148,6 +159,8 @@ $outline-width: 2px;
 $inactive-color: #666;
 
 .w-radio {
+  // --_size resolves --w-size if set (e.g. via size class or inline style), otherwise the global default.
+  --_size: var(--w-size, var(--w-small-form-el-size));
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
@@ -175,7 +188,7 @@ $inactive-color: #666;
   &__input {
     position: relative;
     border-radius: 100%;
-    width: $small-form-el-size;
+    width: var(--_size);
     aspect-ratio: 1;
     display: flex;
     flex: 0 0 auto; // Prevent stretching width or height.
@@ -185,11 +198,11 @@ $inactive-color: #666;
     transition: 0.3s ease-in-out;
     cursor: inherit;
 
-    .w-radio--disabled & {border-color: $disabled-color;}
+    .w-radio--disabled & {border-color: var(--w-disabled-color);}
 
     // Checked state.
     :checked ~ & {border-color: currentColor;}
-    .w-radio--disabled :checked ~ & {border-color: $disabled-color;}
+    .w-radio--disabled :checked ~ & {border-color: var(--w-disabled-color);}
   }
 
   // The inner bullet - visible when checked.
@@ -200,7 +213,7 @@ $inactive-color: #666;
     border: 0 solid $inactive-color;
     // Prevents a tiny hole while animating and in some browser zoom levels.
     background-color: $inactive-color;
-    transition: $transition-duration;
+    transition: var(--w-transition-duration);
 
     :checked ~ & {
       border-width: 4px;
@@ -209,9 +222,9 @@ $inactive-color: #666;
       background-color: currentColor;
     }
     .w-radio--disabled & {
-      border-color: $disabled-color;
+      border-color: var(--w-disabled-color);
       // Prevents a tiny hole while animating and in some browser zoom levels.
-      background-color: $disabled-color;
+      background-color: var(--w-disabled-color);
     }
   }
 
@@ -256,6 +269,18 @@ $inactive-color: #666;
 
     .w-radio--disabled & {opacity: 0.7;}
   }
+
+  // Sizes.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--xs &__input {border-width: 1px;}
+  &.size--xs :checked ~ &__input:after {border-width: 3px;}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--sm :checked ~ &__input:after {border-width: 3px;}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--lg :checked ~ &__input:after {border-width: 5px;}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
+  &.size--xl :checked ~ &__input:after {border-width: 6px;}
 }
 
 @keyframes w-radio-ripple {