vanilla-framework 2.37.0 → 3.0.0-beta.2

package/scss/_base_forms-tick-elements.scss

@@ -1,607 +0,0 @@
-// tick element variables
-$form-tick-box-size: 1rem;
-$form-tick-height: 0.375rem;
-$form-tick-offset-top: 0.1875rem;
-$form-tick-box-nudge: 0.15rem; // to nudge the tick box a bit below baseline (to correctly align with default text size)
-
-$form-radio-inner-circle-diameter: 0.375rem;
-$form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle-diameter);
-
-// Offsets to align tick elements to the baseline of headings.
-$box-offsets-top: (
-  h1-small-screens: 5,
-  h1: 6,
-  h2-small-screens: 4,
-  h2: 5,
-  h3-small-screens: 4,
-  h3: 4,
-  h4-small-screens: 3,
-  h4: 3,
-  default-text: 3.333,
-  unpadded-text: 2.125,
-  muted-heading: 2.333,
-  muted-inline-heading: 2,
-  table-header: 1.9,
-) !default;
-
-@mixin vf-b-tick-elements-definitions {
-  %vf-hidden-tick-input {
-    float: none;
-    height: $form-tick-box-size;
-    margin: 0;
-    opacity: 0;
-    position: absolute;
-    width: $form-tick-box-size;
-  }
-
-  %vf-pseudo-tick-box {
-    padding-left: $sph-inner + $form-tick-box-size;
-    position: relative;
-
-    &::before,
-    &::after {
-      $properties: #{background-color, border-color};
-      @include vf-animation($properties);
-
-      position: absolute;
-    }
-
-    // container
-    &::before {
-      content: '';
-      height: $form-tick-box-size;
-      left: 0;
-      outline-offset: 1px;
-      top: calc(#{$baseline-position} - #{$form-tick-box-size} + #{$form-tick-box-nudge});
-      width: $form-tick-box-size;
-    }
-
-    // tick/circle
-    &::after {
-      content: '';
-      opacity: 0;
-    }
-  }
-
-  %vf-pseudo-tick-box-checked {
-    &::before {
-      background-color: $color-link;
-      border-color: $color-link;
-    }
-
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  %vf-pseudo-tick-box-focused {
-    &::before {
-      outline: $bar-thickness solid $color-focus;
-    }
-  }
-
-  %vf-pseudo-checkbox {
-    // container
-    &::before {
-      border-radius: $border-radius;
-    }
-
-    //tick
-    &::after {
-      border-bottom: 2px solid;
-      border-left: 2px solid;
-      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});
-      transform: rotate(-45deg);
-      width: 0.625rem;
-    }
-
-    [aria-checked='mixed'] + &,
-    :indeterminate + & {
-      @extend %vf-pseudo-tick-box-checked;
-
-      &::after {
-        border-left: none;
-        transform: none;
-      }
-    }
-  }
-
-  %vf-pseudo-radio {
-    &::before {
-      border-radius: 50%;
-    }
-
-    &::after {
-      border-radius: 50%;
-      height: $form-radio-inner-circle-diameter;
-      left: #{($form-tick-box-size - $form-radio-inner-circle-diameter) * 0.5};
-      top: calc(#{$baseline-position} - #{$form-tick-box-size} + #{$form-radio-circle-offset} + #{$form-tick-box-nudge});
-      width: $form-radio-inner-circle-diameter;
-    }
-  }
-
-  %vf-tick-in-label {
-    // some basic styling for checkboxes inside labels
-    float: left;
-    margin: $spv-inner--x-small $sph-inner 0 0;
-    opacity: 1;
-    position: static;
-  }
-}
-
-@mixin vf-b-tick-elements {
-  @include vf-b-tick-elements-definitions;
-
-  // Default form checkbox and radio styles
-  %vf-tick-elements {
-    // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
-    label & {
-      @extend %vf-tick-in-label;
-    }
-
-    & + label,
-    //Ensuring the required labels don't break on base checkbox
-    & + label.is-required {
-      @extend %vf-pseudo-tick-box;
-
-      // Align with different text styles
-      &:not(.is-h1)::before,
-      &:not(.is-h2)::before,
-      &:not(.is-h3)::before,
-      &:not(.is-h4)::before,
-      &:not(.is-muted-heading)::before,
-      &:not(.is-inline-label)::before {
-        top: #{$sp-unit * map-get($box-offsets-top, default-text) - $form-tick-box-size};
-      }
-
-      &.is-h1::before {
-        top: #{$sp-unit * map-get($box-offsets-top, h1-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h2::before {
-        top: #{$sp-unit * map-get($box-offsets-top, h2-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h3::before {
-        top: #{$sp-unit * map-get($box-offsets-top, h3-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h4::before {
-        top: #{$sp-unit * map-get($box-offsets-top, h4-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-inline-label::before {
-        top: #{$sp-unit * map-get($box-offsets-top, unpadded-text) - $form-tick-box-size};
-      }
-
-      &.is-muted-heading::before {
-        top: #{$sp-unit * map-get($box-offsets-top, muted-heading) - $form-tick-box-size};
-      }
-
-      &.is-muted-inline-heading::before {
-        top: #{$sp-unit * map-get($box-offsets-top, muted-inline-heading) - $form-tick-box-size};
-      }
-
-      &.is-table-header::before {
-        top: #{$sp-unit * map-get($box-offsets-top, table-header) - $form-tick-box-size};
-      }
-
-      @media (min-width: $breakpoint-heading-threshold) {
-        &:not(.is-h1)::before,
-        &:not(.is-h2)::before,
-        &:not(.is-h3)::before,
-        &:not(.is-h4)::before,
-        &:not(.is-muted-heading)::before,
-        &:not(.is-inline-label)::before {
-          top: #{$sp-unit * map-get($box-offsets-top, default-text) - $form-tick-box-size};
-        }
-
-        &.is-h1::before {
-          top: #{$sp-unit * map-get($box-offsets-top, h1) - $form-tick-box-size};
-        }
-
-        &.is-h2::before {
-          top: #{$sp-unit * map-get($box-offsets-top, h2) - $form-tick-box-size};
-        }
-
-        &.is-h3::before {
-          top: #{$sp-unit * map-get($box-offsets-top, h3) - $form-tick-box-size};
-        }
-
-        &.is-h4::before {
-          top: #{$sp-unit * map-get($box-offsets-top, h4) - $form-tick-box-size};
-        }
-
-        &.is-inline-label::before {
-          top: #{$sp-unit * map-get($box-offsets-top, unpadded-text) - $form-tick-box-size};
-        }
-
-        &.is-muted-heading::before {
-          top: #{$sp-unit * map-get($box-offsets-top, muted-heading) - $form-tick-box-size};
-        }
-
-        &.is-muted-inline-heading::before {
-          top: #{$sp-unit * map-get($box-offsets-top, muted-inline-heading) - $form-tick-box-size};
-        }
-
-        &.is-table-header::before {
-          top: #{$sp-unit * map-get($box-offsets-top, table-header) - $form-tick-box-size};
-        }
-      }
-
-      &.is-h1 {
-        @extend %vf-heading-1;
-      }
-
-      &.is-h2 {
-        @extend %vf-heading-2;
-      }
-
-      &.is-h3 {
-        @extend %vf-heading-3;
-      }
-
-      &.is-h4 {
-        @extend %vf-heading-4;
-      }
-
-      &.is-inline-label {
-        display: inline;
-        padding-top: 0;
-      }
-
-      &.is-muted-heading {
-        @extend %muted-heading;
-      }
-
-      &.is-muted-inline-heading {
-        @extend %muted-heading;
-
-        display: inline;
-        padding-top: 0;
-      }
-
-      &.is-table-header {
-        @extend %table-header-label;
-
-        display: inline;
-        padding-top: 0;
-      }
-    }
-
-    &:checked + label {
-      @extend %vf-pseudo-tick-box-checked;
-    }
-
-    &:focus + label {
-      @extend %vf-pseudo-tick-box-focused;
-    }
-
-    &[disabled] + label,
-    &[disabled='disabled'] + label {
-      @extend %vf-disabled-element;
-    }
-  }
-
-  [type='checkbox'] {
-    @extend %vf-hidden-tick-input;
-    @extend %vf-tick-elements;
-
-    // stylelint-disable selector-max-type
-    & + label {
-      @extend %vf-pseudo-checkbox;
-
-      // Align with different text styles
-      &:not(.is-h1)::after,
-      &:not(.is-h2)::after,
-      &:not(.is-h3)::after,
-      &:not(.is-h4)::after,
-      &:not(.is-muted-heading)::after,
-      &:not(.is-inline-label)::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, default-text) - $form-tick-box-size};
-      }
-
-      &.is-h1::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h1-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h2::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h2-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h3::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h3-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h4::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h4-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-inline-label::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, unpadded-text) - $form-tick-box-size};
-      }
-
-      &.is-muted-heading::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, muted-heading) - $form-tick-box-size};
-      }
-
-      &.is-muted-inline-heading::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, muted-inline-heading) - $form-tick-box-size};
-      }
-
-      &.is-table-header::after {
-        top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, table-header) - $form-tick-box-size};
-      }
-
-      @media (min-width: $breakpoint-heading-threshold) {
-        &:not(.is-h1)::after,
-        &:not(.is-h2)::after,
-        &:not(.is-h3)::after,
-        &:not(.is-h4)::after,
-        &:not(.is-muted-heading)::after,
-        &:not(.is-inline-label)::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, default-text) - $form-tick-box-size};
-        }
-
-        &.is-h1::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h1) - $form-tick-box-size};
-        }
-
-        &.is-h2::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h2) - $form-tick-box-size};
-        }
-
-        &.is-h3::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h3) - $form-tick-box-size};
-        }
-
-        &.is-h4::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, h4) - $form-tick-box-size};
-        }
-
-        &.is-inline-label::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, unpadded-text) - $form-tick-box-size};
-        }
-
-        &.is-muted-heading::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, muted-heading) - $form-tick-box-size};
-        }
-
-        &.is-muted-inline-heading::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, muted-inline-heading) - $form-tick-box-size};
-        }
-
-        &.is-table-header::after {
-          top: #{$form-tick-offset-top + $sp-unit * map-get($box-offsets-top, table-header) - $form-tick-box-size};
-        }
-      }
-    }
-    // stylelint-enable selector-max-type
-  }
-
-  [type='radio'] {
-    @extend %vf-hidden-tick-input;
-    @extend %vf-tick-elements;
-
-    // stylelint-disable selector-max-type
-    & + label {
-      @extend %vf-pseudo-radio;
-
-      // Align with different text styles
-      &:not(.is-h1)::after,
-      &:not(.is-h2)::after,
-      &:not(.is-h3)::after,
-      &:not(.is-h4)::after,
-      &:not(.is-muted-heading)::after,
-      &:not(.is-inline-label)::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, default-text) - $form-tick-box-size};
-      }
-
-      &.is-h1::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h1-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h2::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h2-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h3::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h3-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-h4::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h4-small-screens) - $form-tick-box-size};
-      }
-
-      &.is-inline-label::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, unpadded-text) - $form-tick-box-size};
-      }
-
-      &.is-muted-heading::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, muted-heading) - $form-tick-box-size};
-      }
-
-      &.is-muted-inline-heading::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, muted-inline-heading) - $form-tick-box-size};
-      }
-
-      &.is-table-header::after {
-        top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, table-header) - $form-tick-box-size};
-      }
-
-      @media (min-width: $breakpoint-heading-threshold) {
-        &:not(.is-h1)::after,
-        &:not(.is-h2)::after,
-        &:not(.is-h3)::after,
-        &:not(.is-h4)::after,
-        &:not(.is-muted-heading)::after,
-        &:not(.is-inline-label)::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, default-text) - $form-tick-box-size};
-        }
-
-        &.is-h1::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h1) - $form-tick-box-size};
-        }
-
-        &.is-h2::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h2) - $form-tick-box-size};
-        }
-
-        &.is-h3::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h3) - $form-tick-box-size};
-        }
-
-        &.is-h4::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, h4) - $form-tick-box-size};
-        }
-
-        &.is-inline-label::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, unpadded-text) - $form-tick-box-size};
-        }
-
-        &.is-muted-heading::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, muted-heading) - $form-tick-box-size};
-        }
-
-        &.is-muted-inline-heading::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, muted-inline-heading) - $form-tick-box-size};
-        }
-
-        &.is-table-header::after {
-          top: #{$form-radio-circle-offset + $sp-unit * map-get($box-offsets-top, table-header) - $form-tick-box-size};
-        }
-      }
-    }
-  }
-
-  .p-muted-heading .p-checkbox__label {
-    color: $colors--light-theme--text-muted;
-  }
-
-  // Theming
-  @if ($theme-default-forms == 'dark') {
-    [type='checkbox'] + label {
-      @include vf-checkbox-dark-theme;
-    }
-
-    [type='radio'] + label {
-      @include vf-radio-dark-theme;
-    }
-
-    [type='checkbox'].is-light + label {
-      @include vf-checkbox-light-theme;
-    }
-
-    [type='radio'].is-light + label {
-      @include vf-radio-light-theme;
-    }
-  } @else {
-    [type='checkbox'] + label {
-      @include vf-checkbox-light-theme;
-    }
-
-    [type='radio'] + label {
-      @include vf-radio-light-theme;
-    }
-
-    [type='checkbox'].is-dark + label {
-      @include vf-checkbox-dark-theme;
-    }
-
-    [type='radio'].is-dark + label {
-      @include vf-radio-dark-theme;
-    }
-    // stylelint-enable selector-max-type
-  }
-}
-
-// 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: 1px 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/_base_typography-max-widths.scss

@@ -1,36 +0,0 @@
-@mixin vf-b-typography-max-widths {
-  @include deprecate('3.0.0', 'Use the `p-max-width` mixin instead') {
-    %max-width--p {
-      max-width: map-get($max-widths, default);
-    }
-
-    %measure--p,
-    .measure--p {
-      @extend %max-width--p;
-    }
-  }
-}
-
-@mixin p-max-width {
-  @include deprecate('3.0.0', 'Max-widths should not be based on font-size. Use map-get($max-widths, default) instead.') {
-    max-width: map-get($max-widths, default);
-  }
-}
-
-@mixin heading-max-width--short {
-  @include deprecate('3.0.0', 'Max-widths should not be based on font-size. Use map-get($max-widths, default) instead.') {
-    max-width: map-get($max-widths, default);
-  }
-}
-
-@mixin heading-max-width--long {
-  @include deprecate('3.0.0', 'Max-widths should not be based on font-size. Use map-get($max-widths, default) instead.') {
-    max-width: map-get($max-widths, default);
-  }
-}
-
-@mixin p-max-width--long {
-  @include deprecate('3.0.0', 'Max-widths should not be based on font-size. Use map-get($max-widths, default) instead.') {
-    max-width: map-get($max-widths, default);
-  }
-}

package/scss/_patterns_code-copyable.scss

@@ -1,43 +0,0 @@
-@import 'settings';
-
-$cc-button-size: 36px;
-
-@mixin vf-p-code-copyable {
-  @include deprecate('3.0.0', 'p-code-copyable is being removed, use the code snippet block instead.') {
-    .p-code-copyable {
-      @extend %leading-linux-prompt-icon;
-
-      background-color: $color-code-background;
-      margin-bottom: $input-margin-bottom;
-      overflow: hidden;
-      padding: $spv-inner--x-small--scaleable $sph-inner;
-      position: relative;
-
-      & + & {
-        margin-top: 0; // overrides p + p
-      }
-    }
-
-    .p-code-copyable__input {
-      background: transparent;
-      border: 0;
-      font-family: unquote($font-monospace);
-      font-weight: $font-weight-regular-text;
-      line-height: map-get($line-heights, default-text);
-      margin-bottom: 0;
-      margin-top: 0;
-      outline: none;
-      padding: 0 0 0 (map-get($icon-sizes, default) + $spv-inner--x-small--scaleable);
-      width: 100%;
-    }
-
-    .p-code-copyable__action {
-      // This pattern is being deprecated in 2.22, but we
-      // want a consistent look among code block patterns, so
-      // code-copyable has been updated to look like a standard
-      // code block. For that reason, we're hiding the "copy"
-      // button on existing implementations of this pattern.
-      display: none;
-    }
-  }
-}

package/scss/_patterns_code-numbered.scss

@@ -1,13 +0,0 @@
-@import 'settings';
-
-@mixin vf-p-code-numbered {
-  @include deprecate('3.0.0', 'p-code-numbered is being removed, use the code snippet block numbered variant instead.') {
-    .p-code-numbered {
-      counter-reset: line-numbering;
-    }
-
-    .p-code-numbered__line {
-      @extend %code-numbered-line;
-    }
-  }
-}