vanilla-framework 4.6.0 → 4.8.0

package/scss/_patterns_form-help-text.scss

@@ -4,39 +4,11 @@
   .p-form-help-text {
     @extend %small-text;
 
-    color: $color-mid-dark;
+    color: $colors--theme--text-muted;
     margin-top: -$sp-unit;
 
     &.is-tick-element {
       margin-left: $sph--large + $form-tick-box-size;
     }
   }
-
-  @if ($theme-default-forms == 'dark') {
-    .p-form-help-text {
-      @include vf-form-help-text-dark-theme;
-    }
-  } @else {
-    .p-form-help-text {
-      @include vf-form-help-text-light-theme;
-    }
-  }
-
-  .is-dark .p-form-help-text,
-  .p-form-help-text.is-dark {
-    @include vf-form-help-text-dark-theme;
-  }
-
-  .is-light .p-form-help-text,
-  .p-form-help-text.is-light {
-    @include vf-form-help-text-light-theme;
-  }
-}
-
-@mixin vf-form-help-text-dark-theme {
-  color: $colors--dark-theme--text-muted;
-}
-
-@mixin vf-form-help-text-light-theme {
-  color: $colors--light-theme--text-muted;
 }

package/scss/_patterns_form-password-toggle.scss

@@ -18,7 +18,7 @@
   .p-form-password-toggle + [type='text'] {
     &[readonly],
     &[readonly='readonly'] {
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
     }
   }
 }

package/scss/_patterns_form-tick-elements.scss

@@ -11,12 +11,15 @@
   }
 
   %vf-pseudo-tick-box {
+    color: $colors--theme--text-default;
     padding-left: $sph--large + $form-tick-box-size;
     position: relative;
 
     &::before,
     &::after {
-      $properties: #{background-color, border-color};
+      $properties:
+        #{background-color,
+        border-color};
       @include vf-transition($properties);
 
       position: absolute;
@@ -24,6 +27,8 @@
 
     // container
     &::before {
+      background: $colors--theme--background-default;
+      border: $input-border-thickness solid $colors--theme--border-high-contrast;
       content: '';
       height: $form-tick-box-size;
       left: 0;
@@ -39,18 +44,18 @@
     }
 
     .p-muted-heading & {
-      color: $colors--light-theme--text-muted;
+      color: $colors--theme--text-muted;
     }
 
     &:hover::before {
-      background-color: $colors--light-theme--background-hover;
+      background-color: $colors--theme--background-hover;
     }
   }
 
   %vf-pseudo-tick-box-checked {
     &::before {
-      background-color: $color-link;
-      border-color: $color-link;
+      background-color: $colors--theme--link-default;
+      border-color: $colors--theme--link-default;
     }
 
     &::after {
@@ -74,6 +79,7 @@
     &::after {
       border-bottom: 2px solid;
       border-left: 2px solid;
+      color: $colors--theme--background-default;
       height: $form-tick-height;
       left: $form-tick-height * 0.5;
       top: calc($baseline-position - $form-tick-box-size + $form-tick-offset-top + $form-tick-box-nudge);
@@ -98,6 +104,7 @@
     }
 
     &::after {
+      background-color: $colors--theme--background-default;
       border-radius: 50%;
       height: $form-radio-inner-circle-diameter;
       left: #{($form-tick-box-size - $form-radio-inner-circle-diameter) * 0.5};
@@ -206,128 +213,4 @@
   .p-radio + .p-checkbox {
     margin-top: -$sp-unit;
   }
-
-  // Theming
-  @if ($theme-default-forms == 'dark') {
-    .p-checkbox__label {
-      @include vf-checkbox-dark-theme;
-    }
-
-    .p-radio__label {
-      @include vf-radio-dark-theme;
-    }
-
-    .p-checkbox.is-light .p-checkbox__label {
-      @include vf-checkbox-light-theme;
-    }
-
-    .p-radio.is-light .p-radio__label {
-      @include vf-radio-light-theme;
-    }
-  } @else {
-    .p-checkbox__label {
-      @include vf-checkbox-light-theme;
-    }
-
-    .p-radio__label {
-      @include vf-radio-light-theme;
-    }
-
-    .p-checkbox.is-dark .p-checkbox__label {
-      @include vf-checkbox-dark-theme;
-    }
-
-    .p-radio.is-dark .p-radio__label {
-      @include vf-radio-dark-theme;
-    }
-  }
-}
-
-// theme for common properties on radios and checkboxes
-@mixin vf-tick-elements-theme(
-  // color of the tick element label text
-  $color-tick-text,
-  // color of the tick element background
-  $color-tick-background,
-  // color of the tick element border
-  $color-tick-border: $colors--light-theme--border-high-contrast
-) {
-  color: $color-tick-text;
-
-  &::before {
-    background: $color-tick-background;
-    border: $input-border-thickness solid $color-tick-border;
-  }
-}
-
-// theme for checkbox (including common properties)
-@mixin vf-checkbox-theme(
-  // color of the tick element label text
-  $color-tick-text,
-  // color of the tick element background
-  $color-tick-background,
-  // color of the tick element border
-  $color-tick-border,
-  // color of the checkbox tick
-  $color-checkbox-tick
-) {
-  @include vf-tick-elements-theme($color-tick-text, $color-tick-background, $color-tick-border);
-
-  &::after {
-    color: $color-checkbox-tick;
-  }
-}
-
-@mixin vf-checkbox-light-theme {
-  @include vf-checkbox-theme(
-    $color-tick-text: $colors--light-theme--text-default,
-    $color-tick-background: $colors--light-theme--background-default,
-    $color-tick-border: $colors--light-theme--border-high-contrast,
-    $color-checkbox-tick: $colors--light-theme--background-default
-  );
-}
-
-@mixin vf-checkbox-dark-theme {
-  @include vf-checkbox-theme(
-    $color-tick-text: $colors--dark-theme--text-default,
-    $color-tick-background: $colors--dark-theme--background-default,
-    $color-tick-border: $colors--dark-theme--border-high-contrast,
-    $color-checkbox-tick: $colors--dark-theme--text-default
-  );
-}
-
-// theme for radio (including common properties)
-@mixin vf-radio-theme(
-  // color of the tick element label text
-  $color-tick-text,
-  // color of the tick element background
-  $color-tick-background,
-  // color of the tick element border
-  $color-tick-border,
-  // color of the radio dot
-  $color-radio-dot
-) {
-  @include vf-tick-elements-theme($color-tick-text, $color-tick-background, $color-tick-border);
-
-  &::after {
-    background-color: $color-radio-dot;
-  }
-}
-
-@mixin vf-radio-light-theme {
-  @include vf-radio-theme(
-    $color-tick-text: $colors--light-theme--text-default,
-    $color-tick-background: $colors--light-theme--background-default,
-    $color-tick-border: $colors--light-theme--border-high-contrast,
-    $color-radio-dot: $colors--light-theme--background-default
-  );
-}
-
-@mixin vf-radio-dark-theme {
-  @include vf-radio-theme(
-    $color-tick-text: $colors--dark-theme--text-default,
-    $color-tick-background: $colors--dark-theme--background-default,
-    $color-tick-border: $colors--dark-theme--border-high-contrast,
-    $color-radio-dot: $colors--dark-theme--text-default
-  );
 }

package/scss/_patterns_form-validation.scss

@@ -18,261 +18,63 @@
     margin-top: -$sp-unit;
   }
 
-  // Theming
-  @if ($theme-default-forms == 'dark') {
+  .is-caution {
     .p-form-validation__input {
-      .is-success & {
-        @include vf-form-validation-input-success-dark-theme;
-      }
+      background-color: $colors--theme--background-caution-default;
+      border-bottom-color: $colors--theme--border-caution;
 
-      .is-caution & {
-        @include vf-form-validation-input-caution-dark-theme;
+      &:hover {
+        background-color: $colors--theme--background-caution-hover;
       }
 
-      .is-error & {
-        @include vf-form-validation-input-error-dark-theme;
+      &:focus {
+        background-color: $colors--theme--background-caution-active;
       }
     }
 
     .p-form-validation__message {
-      .is-success & {
-        @include vf-form-validation-message-success-dark-theme;
-      }
-
-      .is-caution & {
-        @include vf-form-validation-message-caution-dark-theme;
-      }
-
-      .is-error & {
-        @include vf-form-validation-message-error-dark-theme;
-      }
+      @include vf-icon-warning-themed;
+      color: $colors--theme--border-caution;
     }
-  } @else {
+  }
+
+  .is-error {
     .p-form-validation__input {
-      .is-success & {
-        @include vf-form-validation-input-success-light-theme;
-      }
+      background-color: $colors--theme--background-negative-default;
+      border-bottom-color: $colors--theme--border-negative;
 
-      .is-caution & {
-        @include vf-form-validation-input-caution-light-theme;
+      &:hover {
+        background-color: $colors--theme--background-negative-hover;
       }
 
-      .is-error & {
-        @include vf-form-validation-input-error-light-theme;
+      &:focus {
+        background-color: $colors--theme--background-negative-active;
       }
     }
 
     .p-form-validation__message {
-      .is-success & {
-        @include vf-form-validation-message-success-light-theme;
-      }
-
-      .is-caution & {
-        @include vf-form-validation-message-caution-light-theme;
-      }
-
-      .is-error & {
-        @include vf-form-validation-message-error-light-theme;
-      }
+      @include vf-icon-error-themed;
+      color: $colors--theme--border-negative;
     }
   }
 
-  // when is-dark/is-light is set on root p-form-validation element or its parent
-  .is-dark .is-success,
-  .is-success.is-dark {
+  .is-success {
     .p-form-validation__input {
-      @include vf-form-validation-input-success-dark-theme;
-    }
-    .p-form-validation__message {
-      @include vf-form-validation-message-success-dark-theme;
-    }
-  }
+      background-color: $colors--theme--background-positive-default;
+      border-bottom-color: $colors--theme--border-positive;
 
-  .is-success.is-light {
-    .p-form-validation__input {
-      @include vf-form-validation-input-success-light-theme;
-    }
-    .p-form-validation__message {
-      @include vf-form-validation-message-success-light-theme;
-    }
-  }
-
-  .is-dark .is-caution,
-  .is-caution.is-dark {
-    .p-form-validation__input {
-      @include vf-form-validation-input-caution-dark-theme;
-    }
-    .p-form-validation__message {
-      @include vf-form-validation-message-caution-dark-theme;
-    }
-  }
-
-  .is-caution.is-light {
-    .p-form-validation__input {
-      @include vf-form-validation-input-caution-light-theme;
-    }
-    .p-form-validation__message {
-      @include vf-form-validation-message-caution-light-theme;
-    }
-  }
+      &:hover {
+        background-color: $colors--theme--background-positive-hover;
+      }
 
-  .is-dark .is-error,
-  .is-error.is-dark {
-    .p-form-validation__input {
-      @include vf-form-validation-input-error-dark-theme;
-    }
-    .p-form-validation__message {
-      @include vf-form-validation-message-error-dark-theme;
+      &:focus {
+        background-color: $colors--theme--background-positive-active;
+      }
     }
-  }
 
-  .is-error.is-light {
-    .p-form-validation__input {
-      @include vf-form-validation-input-error-light-theme;
-    }
     .p-form-validation__message {
-      @include vf-form-validation-message-error-light-theme;
-    }
-  }
-
-  // when is-dark/is-light is set on p-form-validation__input element
-  .is-success .p-form-validation__input {
-    .is-dark &,
-    &.is-dark {
-      @include vf-form-validation-input-success-dark-theme;
-    }
-
-    &.is-light {
-      @include vf-form-validation-input-success-light-theme;
-    }
-  }
-
-  .is-caution .p-form-validation__input {
-    .is-dark &,
-    &.is-dark {
-      @include vf-form-validation-input-caution-dark-theme;
-    }
-
-    &.is-light {
-      @include vf-form-validation-input-caution-light-theme;
+      @include vf-icon-success-themed;
+      color: $colors--theme--border-positive;
     }
   }
-
-  .is-error .p-form-validation__input {
-    .is-dark &,
-    &.is-dark {
-      @include vf-form-validation-input-error-dark-theme;
-    }
-
-    &.is-light {
-      @include vf-form-validation-input-error-light-theme;
-    }
-  }
-}
-
-@mixin vf-form-validation-input-state-theme($color-background-default, $color-background-hover, $color-background-active, $color-border, $color-text) {
-  background-color: $color-background-default;
-  border-bottom-color: $color-border;
-
-  &:hover {
-    background-color: $color-background-hover;
-  }
-
-  &:focus {
-    background-color: $color-background-active;
-  }
-}
-
-@mixin vf-form-validation-input-success-dark-theme {
-  @include vf-form-validation-input-state-theme(
-    $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'default'),
-    $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'hover'),
-    $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'active'),
-    $color-border: map-get($colors-dark-theme--tinted-borders, 'positive'),
-    $color-text: map-get($colors-dark-theme--tinted-borders, 'positive')
-  );
-}
-
-@mixin vf-form-validation-input-caution-dark-theme {
-  @include vf-form-validation-input-state-theme(
-    $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'default'),
-    $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'hover'),
-    $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'active'),
-    $color-border: map-get($colors-dark-theme--tinted-borders, 'caution'),
-    $color-text: map-get($colors-dark-theme--tinted-borders, 'caution')
-  );
-}
-
-@mixin vf-form-validation-input-error-dark-theme {
-  @include vf-form-validation-input-state-theme(
-    $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'default'),
-    $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'hover'),
-    $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'active'),
-    $color-border: map-get($colors-dark-theme--tinted-borders, 'negative'),
-    $color-text: map-get($colors-dark-theme--tinted-borders, 'negative')
-  );
-}
-
-@mixin vf-form-validation-input-success-light-theme {
-  @include vf-form-validation-input-state-theme(
-    $color-background-default: $color-positive-background,
-    $color-background-hover: $color-positive-background--hover,
-    $color-background-active: $color-positive-background--focus,
-    $color-border: $color-positive,
-    $color-text: $color-positive
-  );
-}
-
-@mixin vf-form-validation-input-caution-light-theme {
-  @include vf-form-validation-input-state-theme(
-    $color-background-default: $color-caution-background,
-    $color-background-hover: $color-caution-background--hover,
-    $color-background-active: $color-caution-background--focus,
-    $color-border: $color-caution,
-    $color-text: $color-caution
-  );
-}
-
-@mixin vf-form-validation-input-error-light-theme {
-  @include vf-form-validation-input-state-theme(
-    $color-background-default: $color-negative-background,
-    $color-background-hover: $color-negative-background--hover,
-    $color-background-active: $color-negative-background--focus,
-    $color-border: $color-negative,
-    $color-text: $color-negative
-  );
-}
-
-@mixin vf-form-validation-message-state-theme($color-text) {
-  color: $color-text;
-}
-
-@mixin vf-form-validation-message-success-dark-theme {
-  @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'positive'));
-  @include vf-icon-success($color: map-get($colors-dark-theme--tinted-borders, 'positive'), $color-symbol: $colors--dark-theme--background-default);
-}
-
-@mixin vf-form-validation-message-caution-dark-theme {
-  @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'caution'));
-  @include vf-icon-warning($color: map-get($colors-dark-theme--tinted-borders, 'caution'), $color-symbol: $colors--dark-theme--background-default);
-}
-
-@mixin vf-form-validation-message-error-dark-theme {
-  @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'negative'));
-  @include vf-icon-error($color: map-get($colors-dark-theme--tinted-borders, 'negative'), $color-symbol: $colors--dark-theme--background-default);
-}
-
-@mixin vf-form-validation-message-success-light-theme {
-  @include vf-form-validation-message-state-theme($color-text: $color-positive);
-  @include vf-icon-success($color-positive);
-}
-
-@mixin vf-form-validation-message-caution-light-theme {
-  @include vf-form-validation-message-state-theme($color-text: $colors--light-theme--text-default);
-  @include vf-icon-warning($color-caution);
-}
-
-@mixin vf-form-validation-message-error-light-theme {
-  @include vf-form-validation-message-state-theme($color-text: $color-negative);
-  @include vf-icon-error($color-negative);
 }