@momentum-ui/web-components 2.16.8 → 2.16.10

package/src/components/button/scss/mixins.scss

@@ -1,281 +0,0 @@
-@mixin button-base() {
-  border: none;
-  border-radius: $button__radius--36;
-  cursor: $cursor-pointer-value;
-  display: inline-flex;
-  font-family: var(--brand-font-medium, $brand-font-regular);
-  font-weight: 500;
-  font-size: $button__font-size;
-  line-height: normal;
-  min-width: rem-calc(72);
-  position: relative;
-  text-align: $button__font-align;
-  text-decoration: none;
-  align-items: center;
-  justify-content: center;
-
-  > * {
-    font-size: inherit;
-  }
-
-  .#{$button__class}__children {
-    @include flex;
-    max-width: 100%;
-    flex: 1;
-  }
-
-  + .#{$button__class} {
-    margin-left: rem-calc(5);
-  }
-
-  &:active,
-  &.active-state {
-    &:focus,
-    &.focus-state {
-      box-shadow: none;
-    }
-  }
-
-  &.disabled,
-  &.md-button--disabled,
-  &[disabled] {
-    box-shadow: none;
-    cursor: $button__cursor--disabled;
-    pointer-events: none;
-
-    &:hover,
-    &:focus {
-      box-shadow: none;
-    }
-  }
-}
-
-@mixin button-size(
-  $font-size: $button__font-size,
-  $full-width: false,
-  $height: false,
-  $line-height: $button__line-height,
-  $padding: false,
-  $radius: null
-) {
-  // Declarations before nested rules
-  & {
-    font-size: $font-size;
-    line-height: $line-height;
-
-    @if $full-width {
-      width: 100%;
-    }
-
-    @if $padding {
-      padding: $padding;
-    }
-
-    @if $height {
-      height: $height;
-      @if $height == auto or $height == initial or $height == inherit {
-        $height: 100%;
-      }
-    }
-    @if $height {
-      .#{$prefix}-prepend {
-        margin-right: calc(#{$height} / 4);
-      }
-      .#{$prefix}-append {
-        margin-left: calc(#{$height} / 4);
-      }
-    }
-  }
-
-  // Nested rules with conditional logic
-  @if $radius != null {
-    @include radius($radius);
-    
-    &::after {
-      @if $radius > 0 {
-        border-radius: calc(#{$radius} + #{$button-focus-gap-ring});
-      }
-      @else{
-        border-radius: $radius;
-      }
-    }
-  }
-}
-
-@mixin button-circle-size($font-size: false, $line-height: $font-size, $size: false) {
-  @if $size {
-    width: $size;
-    height: $size;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  @if $font-size {
-    font-size: $font-size;
-    line-height: $line-height;
-  }
-}
-
-@mixin button-color(
-  $bg: $button__background-color,
-  $bg-active: $button__background-color--active,
-  $bg-disabled: $button__color--disabled,
-  $bg-hover: $button__background-color--hover,
-  $border: false,
-  $border-hover: false,
-  $border-active: false,
-  $border-focus: $button__border-color--focus,
-  $box-shadow: false,
-  $color: $button__font-color,
-  $color-active: $color,
-  $color-disabled: $button__font-color--disabled,
-  $color-hover: $color,
-  $disabled: true,
-  $focus: false,
-  $opacity: false,
-  $outline: false
-) {
-  // Declarations before nested rules
-  & {
-    background-color: $bg;
-    border-color: transparent;
-    color: $color;
-
-    @if $border {
-      border: $border;
-    }
-
-    @if $box-shadow {
-      box-shadow: $box-shadow;
-    }
-
-    @if $disabled {
-      @include button-color-disabled($color: $color-disabled, $bg: $bg-disabled, $opacity: $opacity);
-    }
-
-    @if $focus {
-      @include button-color-focus($border-focus);
-    }
-
-    @if $outline {
-      outline: $outline;
-    }
-  }
-
-  &:focus {
-    background-color: $bg-hover;
-    color: $color-hover;
-  }
-
-  &:hover {
-    background-color: $bg-hover;
-    color: $color-hover;
-
-    @if $border-hover {
-      border: $border-hover;
-    }
-  }
-
-  &:active,
-  &.active {
-    background-color: $bg-active;
-    color: $color-active;
-
-    @if $border-active {
-      border: $border-active;
-    }
-  }
-}
-
-@mixin button-color-fill(
-  $fill: $button__font-color,
-  $fill-hover: $fill,
-  $fill-active: $color,
-  $fill-disabled: $button__font-color--disabled,
-  $bg-disabled: transparent,
-  $focus: false
-) {
-  // Declarations before nested rules
-  & {
-    color: $fill;
-    fill: $fill;
-  }
-
-  @include button-color-disabled($color: $fill-disabled, $bg: $bg-disabled);
-
-  &:hover,
-  &.hover-state {
-    color: $fill-hover;
-    fill: $fill-hover;
-  }
-
-  &:active,
-  &.active-state {
-    color: $fill-active;
-    fill: $fill-active;
-  }
-
-  @if $focus {
-    @include button-color-focus;
-  }
-}
-
-@mixin button-color-focus($color: $button__border-color--focus) {
-  &:focus,
-  &.focus-state {
-    @include button-focus-styles;
-  }
-}
-
-@mixin button-color-disabled($color: $button__font-color--disabled, $bg: $button__color--disabled, $opacity: false) {
-  &.disabled,
-  &.md-button--disabled,
-  &[disabled] {
-    // Declarations before nested rules
-    & {
-      @if $opacity {
-        opacity: $opacity;
-      } @else {
-        color: $color;
-        fill: $color;
-        background-color: $bg;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $bg;
-      color: $color;
-      fill: $color;
-    }
-  }
-}
-
-@mixin button(
-  $bg: $button__background-color,
-  $bg-disabled: $button__color--disabled,
-  $bg-hover: $button__background-color--hover,
-  $bg-active: $button__background-color--active,
-  $border-focus: $button__border-color--focus,
-  $color: $button__font-color,
-  $color-disabled: $button__font-color--disabled,
-  $radius: false,
-  $full-width: false,
-  $focus: false,
-  $disabled: true
-) {
-  @include button-base;
-  @include button-size($padding, $full-width, $radius);
-  @include button-color(
-    $color,
-    $color-disabled,
-    $bg,
-    $bg-active,
-    $bg-disabled,
-    $bg-hover,
-    $border-focus,
-    $disabled,
-    $focus
-  );
-  @include single-transition(background-color, $button__transition-speed, ease);
-}

package/src/components/button/scss/module.scss

@@ -1,16 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/typography/settings";
-@import "@/wc_scss/icon/settings";
-
-@import "@/wc_scss/tools/mixins/flex";
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "./settings";
-@import "./mixins";
-@import "./button";

package/src/components/button/scss/settings.scss

@@ -1,241 +0,0 @@
-$button__class: "#{$prefix}-button";
-
-// Default font size
-$button__font-size: rem-calc(16);
-$button__line-height: normal;
-
-// Pill Font Sizes
-$button__font-size--28: rem-calc(12);
-
-// button line-height
-$button__line-height--28: rem-calc(15);
-$button__line-height--32: rem-calc(16);
-$button__line-height--36: rem-calc(17);
-$button__line-height--40: rem-calc(17);
-$button__line-height--52: rem-calc(25);
-
-// button font size
-$button__font-size--20: var(--button-font-size-extra-small, rem-calc(8));
-$button__font-size--24: var(--button-font-size-extra-small, rem-calc(10));
-$button__font-size--28: var(--button-font-size-small, rem-calc(12));
-$button__font-size--32: var(--button-font-size-medium, rem-calc(14));
-$button__font-size--36: var(--button-font-size-medium, rem-calc(14));
-$button__font-size--40: var(--button-font-size-medium, rem-calc(14));
-$button__font-size--44: var(--button-font-size-medium, rem-calc(14));
-$button__font-size--52: rem-calc(22);
-$button__font-size--56: rem-calc(24);
-$button__font-size--68: rem-calc(28);
-$button__font-size--72: rem-calc(32);
-$button__font-size--84: rem-calc(40);
-
-// Circle Button Sizes
-$button__size--20: rem-calc(20);
-$button__size--24: rem-calc(24);
-$button__size--28: rem-calc(28);
-$button__size--32: rem-calc(32);
-$button__size--36: rem-calc(36);
-$button__size--40: rem-calc(40);
-$button__size--44: rem-calc(44);
-$button__size--52: rem-calc(52);
-$button__size--56: rem-calc(56);
-$button__size--68: rem-calc(68);
-$button__size--72: rem-calc(72);
-$button__size--84: rem-calc(84);
-
-// Border Radius Sizes
-$button__radius--24: rem-calc(12);
-$button__radius--28: rem-calc(14);
-$button__radius--32: rem-calc(16);
-$button__radius--36: rem-calc(18);
-$button__radius--40: rem-calc(20);
-$button__radius--52: rem-calc(26);
-$button__radius--round: $global-rounded !default;
-$button__radius--rounded: rem-calc(8) !default;
-
-// Set text alignment
-$button__font-align: center !default;
-
-// Set paddings
-$button__padding--24: var(--button-padding-24, rem-calc(4) rem-calc(12) rem-calc(5) rem-calc(12));
-$button__padding--28: var(--button-padding-28, rem-calc(6) rem-calc(14) rem-calc(7) rem-calc(14));
-$button__padding--32: var(--button-padding-32, rem-calc(8) rem-calc(16) rem-calc(9) rem-calc(16));
-$button__padding--36: var(--button-padding-36, rem-calc(9) rem-calc(18) rem-calc(10) rem-calc(18));
-$button__padding--40: var(--button-padding-40, rem-calc(11) rem-calc(20) rem-calc(12) rem-calc(20));
-$button__padding--52: var(--button-padding-52, rem-calc(14) rem-calc(26) rem-calc(15) rem-calc(26));
-
-$button__padding__state-selector--32: var(
-  --button-state-selector-padding,
-  rem-calc(8) rem-calc(10) rem-calc(8) rem-calc(10)
-);
-
-$button__transition-speed: 150ms;
-
-// Set button font colors
-$button__font-color: $md-black-100 !default;
-$button__font-color--alt: $md-white-100 !default;
-
-// Set color, background and cursor for disabled buttons.
-$button__color--disabled: $black-04 !default;
-$button__color--disabled--dark: $white-08 !default;
-$button__font-color--disabled: $black-20 !default;
-$button__font-color--disabled--dark: $white-20 !default;
-$button__cursor--disabled: default !default;
-$button__link-color--disabled: $button__font-color--disabled;
-
-// Default button color settings.
-$button__background-color: $md-gray-20 !default;
-$button__background-color--dark: $white-24 !default;
-$button__background-color--hover: $md-gray-30 !default;
-$button__background-color--hover--dark: $white-32 !default;
-$button__background-color--active: $md-gray-40 !default;
-$button__background-color--active--dark: $white-40 !default;
-$button--default__border: 0 0 0 1px $md-gray-30 !default;
-$button__border-color--focus: $md-black-100 !default;
-
-// Default button contrast colors
-$button__background-color--contrast: $black-60 !default;
-$button__background-color--hover--contrast: $black-68 !default;
-$button__background-color--active--contrast: $black-76 !default;
-
-// Default dark button contrast colors
-$button__background-color--dark--contrast: $md-white-100 !default;
-$button__background-color--hover--dark--contrast: $white-92 !default;
-$button__background-color--active--dark--contrast: $white-84 !default;
-
-// Blue button colors
-$button--blue__outline-color: var(--button-primary-outline-color) !default;
-$button--blue__background-color: $md-theme-50 !default;
-$button--blue__background-color--hover: $md-theme-60 !default;
-$button--blue__background-color--active: $md-theme-70 !default;
-$button--blue__border: 0 0 0 1px $button--blue__outline-color !default;
-
-// Blue button contrast colors
-$button--blue__background-color--contrast: var(--button-accent-bg-color, $md-theme-60) !default;
-$button--blue__background-color--hover--contrast: var(--button-accent-hover-bg-color, $md-theme-70) !default;
-$button--blue__background-color--active--contrast: var(--button-accent-pressed-bg-color, $md-theme-80) !default;
-$button--blue__border--contrast: 0 0 0 1px $md-theme-60 !default;
-
-// Red button colors
-$button--red__background-color: $md-red-50 !default;
-$button--red__background-color--hover: $md-red-60 !default;
-$button--red__background-color--active: $md-red-70 !default;
-$button--red__border: 0 0 0 1px $md-red-50 !default;
-
-// Red button contrast colors
-$button--red__background-color--contrast: $md-red-60 !default;
-$button--red__background-color--hover--contrast: $md-red-70 !default;
-$button--red__background-color--active--contrast: $md-red-80 !default;
-$button--red__border--contrast: 0 0 0 1px $md-red-60 !default;
-
-// Green button colors
-$button--green__background-color: $md-green-50 !default;
-$button--green__background-color--hover: $md-green-60 !default;
-$button--green__background-color--active: $md-green-70 !default;
-$button--green__border: 0 0 0 1px $md-green-50 !default;
-
-// Green button contrast colors
-$button--green__background-color--contrast: $md-green-60 !default;
-$button--green__background-color--hover--contrast: $md-green-70 !default;
-$button--green__background-color--active--contrast: $md-green-80 !default;
-$button--green__border--contrast: 0 0 0 1px $md-green-60 !default;
-
-// Orange button colors
-$button--orange__background-color: $md-orange-50 !default;
-$button--orange__background-color--hover: $md-orange-60 !default;
-$button--orange__background-color--active: $md-orange-70 !default;
-$button--orange__border: 0 0 0 1px $md-orange-50 !default;
-
-// Orange button contrast colors
-$button--orange__background-color--contrast: $md-orange-60 !default;
-$button--orange__background-color--hover--contrast: $md-orange-70 !default;
-$button--orange__background-color--active--contrast: $md-orange-80 !default;
-$button--orange__border--contrast: 0 0 0 1px $md-orange-60 !default;
-
-// Yellow button colors
-$button--yellow__background-color: $md-yellow-50 !default;
-$button--yellow__background-color--hover: $md-yellow-60 !default;
-$button--yellow__background-color--active: $md-yellow-70 !default;
-$button--yellow__border: 0 0 0 1px $md-yellow-50 !default;
-
-// Yellow button contrast colors
-$button--yellow__background-color--contrast: $md-yellow-60 !default;
-$button--yellow__background-color--hover--contrast: $md-yellow-70 !default;
-$button--yellow__background-color--active--contrast: $md-yellow-80 !default;
-$button--yellow__border--contrast: 0 0 0 1px $md-orange-60 !default;
-
-// Mint button colors
-$button--mint__background-color: $md-mint-50 !default;
-$button--mint__background-color--hover: $md-mint-60 !default;
-$button--mint__background-color--active: $md-mint-70 !default;
-$button--mint__border: 0 0 0 1px $md-mint-50 !default;
-
-// Mint button contrast colors
-$button--mint__background-color--contrast: $md-mint-60 !default;
-$button--mint__background-color--hover--contrast: $md-mint-70 !default;
-$button--mint__background-color--active--contrast: $md-mint-80 !default;
-$button--mint__border--contrast: 0 0 0 1px $md-orange-60 !default;
-
-// Purple button colors
-$button--purple__background-color: $md-purple-50 !default;
-$button--purple__background-color--hover: $md-purple-60 !default;
-$button--purple__background-color--active: $md-purple-70 !default;
-$button--purple__border: 0 0 0 1px $md-purple-50 !default;
-
-// Purple button contrast colors
-$button--purple__background-color--contrast: $md-purple-60 !default;
-$button--purple__background-color--hover--contrast: $md-purple-70 !default;
-$button--purple__background-color--active--contrast: $md-purple-80 !default;
-$button--purple__border--contrast: 0 0 0 1px $md-purple-60 !default;
-
-// Pink button colors
-$button--pink__background-color: $md-pink-50 !default;
-$button--pink__background-color--hover: $md-pink-60 !default;
-$button--pink__background-color--active: $md-pink-70 !default;
-$button--pink__border: 0 0 0 1px $md-pink-50 !default;
-
-// Pink button contrast colors
-$button--pink__background-color--contrast: $md-pink-60 !default;
-$button--pink__background-color--hover--contrast: $md-pink-70 !default;
-$button--pink__background-color--active--contrast: $md-pink-80 !default;
-$button--pink__border--contrast: 0 0 0 1px $md-pink-60 !default;
-
-// Cyan button colors
-$button--cyan__background-color: $md-cyan-50 !default;
-$button--cyan__background-color--hover: $md-cyan-60 !default;
-$button--cyan__background-color--active: $md-cyan-70 !default;
-$button--cyan__border: 0 0 0 1px $md-cyan-50 !default;
-
-// Cyan button contrast colors
-$button--cyan__background-color--contrast: $md-cyan-60 !default;
-$button--cyan__background-color--hover--contrast: $md-cyan-70 !default;
-$button--cyan__background-color--active--contrast: $md-cyan-80 !default;
-$button--cyan__border--contrast: 0 0 0 1px $md-cyan-60 !default;
-
-// White button colors
-$button--white__background-color: $md-white-100 !default;
-$button--white__background-color--hover: $md-gray-10 !default;
-$button--white__background-color--active: $md-gray-30 !default;
-$button--white__border: 0 0 0 1px $md-gray-30 !default;
-
-// Dark Gray button colors
-$button--dark-gray__background-color: var(--button-inverted-white-hover-bg-color) !default;
-$button--dark-gray__background-color--hover: $md-gray-80 !default;
-$button--dark-gray__background-color--active: $md-gray-70 !default;
-$button--dark-gray__border: 0 0 0 1px var(--button-inverted-white-hover-bg-color) !default;
-
-// Duck Egg button colors
-$button--duck-egg__background-color: $md-gray-50 !default;
-$button--duck-egg__background-color--hover: $md-gray-60 !default;
-$button--duck-egg__background-color--active: $md-gray-70 !default;
-$button--duck-egg__border: 0 0 0 1px $md-gray-50 !default;
-
-// Violet button colors
-$button--violet__background-color: $md-violet-50 !default;
-$button--violet__background-color--hover: $md-violet-60 !default;
-$button--violet__background-color--active: $md-violet-70 !default;
-$button--violet__border: 0 0 0 1px $md-violet-50 !default;
-
-// Button Container Settings
-$button-container__width: 116px;
-$button-container--small__width: 104px;
-$button-focus-gap-ring: 2px;