@progressiveui/styles 10.30.0

package/scss/components/button/_button.scss

@@ -0,0 +1,520 @@
+@use "vars" as *;
+@use "mixins" as *;
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/rtl" as *;
+@use "../../utilities/visually-hidden" as *;
+//@use 'tokens' as *;
+
+@mixin button {
+  // <button> elements cannot be used as flex containers
+  button.#{$prefix}--btn {
+    //background: $color-corporate-09 !important;
+    // TODO: use inline-flex for all buttons
+    // display: inline-block;
+    /*vertical-align: middle;
+    display: inline-flex;
+    line-height: initial;*/
+  }
+
+  // Reset intrisic padding in Firefox (see #731)
+  button.#{$prefix}--btn::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  // Vertically center icon inside <button>
+  button.#{$prefix}--btn .#{$prefix}--btn__icon {
+    //position: relative;
+    //vertical-align: middle;
+    // height: 1em;
+    // width: 1em;
+
+    // Targets IE10+ browsers: Reset <svg> position for vertical centering
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      top: 0;
+    }
+  }
+
+  button.#{$prefix}--btn--icon-reverse,
+  a.#{$prefix}--btn--icon-reverse {
+    .#{$prefix}--btn__icon {
+      margin-left: 0;
+      margin-right: $spacing-03;
+      @include rtl {
+        margin-left: $spacing-03;
+        margin-right: 0;
+      }
+    }
+  }
+
+  /*a.#{$prefix}--btn--icon-reverse {
+    display: inline-flex;
+    flex-direction: row-reverse;
+
+    .#{$prefix}--btn__icon {
+      float: left;
+      margin-left: 0;
+      margin-right: $spacing-03;
+      @include rtl {
+        margin-left: $spacing-03;
+        margin-right: 0;
+      }
+    }
+  }*/
+
+  a,
+  button {
+    &.#{$prefix}--btn--icon-only {
+      padding: 0 $spacing-04;
+
+      .#{$prefix}--btn__icon {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  /* Standard syntax */
+
+  .#{$prefix}--btn {
+    @include button-base;
+  }
+
+  .#{$prefix}--btn--primary {
+    @include button-theme(
+      $action-default-fill-primary-default,
+      transparent,
+      $action-default-text-primary-default,
+      $action-default-fill-primary-default,
+      $action-default-text-primary-default
+    );
+    &:hover {
+      background-color: $action-default-fill-primary-hover;
+    }
+
+    &:active {
+      background-color: $action-default-fill-primary-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus");
+    }
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-default-text-primary-disable;
+      background-color: $action-default-fill-primary-disable;
+      opacity: unset;
+    }
+  }
+
+  .#{$prefix}--btn--primary-solid {
+    @include button-theme(
+      $action-solid-fill-primary-default,
+      transparent,
+      $action-solid-text-primary-default,
+      $action-solid-fill-primary-default,
+      $action-solid-text-primary-default
+    );
+
+    &:hover {
+      color: $action-solid-text-primary-hover;
+      background-color: $action-solid-fill-primary-hover;
+    }
+
+    &:active {
+      background-color: $action-solid-fill-primary-active;
+      color: $action-solid-text-primary-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus");
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-solid-text-primary-disable; //TODO button disabled color
+      background-color: $action-solid-fill-primary-disable;
+      opacity: unset;
+    }
+  }
+
+  .#{$prefix}--btn--secondary {
+    @include button-theme(
+      transparent,
+      $action-default-text-secondary-default,
+      $action-default-text-secondary-default,
+      transparent,
+      $action-default-text-secondary-default
+    );
+    border-width: 1px;
+
+    &:hover {
+      background-color: $action-default-fill-secondary-hover;
+      color: $action-default-text-secondary-hover;
+    }
+
+    &:active {
+      background-color: $action-default-fill-secondary-active;
+      color: $action-default-text-secondary-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus");
+      border-color: transparent;
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-default-text-secondary-disable;
+      border-width: 2px;
+      border-color: $action-default-text-secondary-disable;
+      opacity: unset;
+    }
+  }
+
+  .#{$prefix}--btn--secondary-solid {
+    @include button-theme(
+      transparent,
+      $action-default-fill-secondary-default,
+      $action-default-fill-secondary-default,
+      transparent,
+      $action-default-fill-secondary-default
+    );
+    border-width: 1px;
+
+    &:hover {
+      border-color: transparent;
+      color: $action-solid-text-secondary-hover;
+      background-color: $action-solid-fill-secondary-hover;
+    }
+
+    &:active {
+      border-color: transparent;
+      color: $action-solid-text-secondary-active;
+      background-color: $action-solid-fill-secondary-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus");
+      border-color: transparent;
+    }
+    &:hover > .#{$prefix}--btn__icon,
+    &:focus > .#{$prefix}--btn__icon {
+      fill: $icon-inverse;
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-solid-text-secondary-disable;
+      border-color: $action-solid-text-secondary-disable;
+      opacity: unset;
+    }
+  }
+
+  .#{$prefix}--btn--ghost {
+    @include button-theme(
+      transparent,
+      transparent,
+      $action-default-text-ghost-default,
+      transparent,
+      $action-default-text-ghost-default
+    );
+
+    &:hover {
+      color: $action-default-text-ghost-hover;
+      background-color: $action-default-fill-ghost-hover;
+    }
+
+    &:active {
+      color: $action-default-text-ghost-active;
+      background-color: $action-default-fill-ghost-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus-small");
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-solid-text-ghost-disable;
+      border-color: transparent;
+      opacity: unset;
+    }
+
+    .#{$prefix}--btn__icon {
+      margin-left: $spacing-03;
+      @include rtl {
+        margin-left: initial;
+        margin-right: $spacing-03;
+      }
+    }
+  }
+
+  .#{$prefix}--btn--ghost-solid {
+    @include button-theme(
+      transparent,
+      transparent,
+      $action-solid-text-ghost-default,
+      $action-solid-fill-ghost-default,
+      $action-solid-text-ghost-default
+    );
+
+    &:hover {
+      color: $action-solid-text-ghost-hover;
+      background-color: $action-solid-fill-ghost-hover;
+    }
+
+    &:active {
+      color: $action-solid-text-ghost-active;
+      background-color: $action-solid-fill-ghost-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus");
+
+      .#{$prefix}--btn__icon {
+        fill: $action-solid-fill-ghost-focus;
+      }
+    }
+
+    .#{$prefix}--btn__icon {
+      margin-left: $spacing-03;
+      @include rtl {
+        margin-left: initial;
+        margin-right: $spacing-03;
+      }
+    }
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-solid-text-ghost-disable;
+      opacity: unset;
+      .#{$prefix}--btn__icon {
+        fill: $action-solid-text-ghost-disable;
+      }
+    }
+  }
+
+  @keyframes slidein {
+    from {
+      box-shadow: 0 0 0 0px rgba(var(--ui-05), 0.7);
+    }
+
+    to {
+      box-shadow: 0 0 0 7px rgba(var(--ui-05), 0);
+    }
+  }
+
+  .#{$prefix}--btn--animating {
+    animation-duration: 0.5s;
+    animation-name: slidein;
+  }
+
+  .#{$prefix}--btn--danger {
+    @include button-theme(
+      $action-default-fill-danger-default,
+      transparent,
+      $action-default-text-danger-default,
+      $action-default-fill-danger-default,
+      $action-default-text-danger-default
+    );
+
+    &:hover {
+      background-color: $action-default-fill-danger-hover;
+    }
+
+    &:active {
+      background-color: $action-default-fill-danger-active;
+    }
+
+    &:focus {
+      @include focus-outline("border-focus-small");
+    }
+
+    &:disabled,
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $action-default-text-danger-disable;
+      background-color: $action-default-fill-danger-disable;
+      opacity: unset;
+    }
+
+    // &:hover > .#{$prefix}--btn__icon,
+    // &:focus > .#{$prefix}--btn__icon {
+    //   fill: $icon-on-color;
+    // }
+  }
+
+  .#{$prefix}--btn--danger--primary {
+    @include button-theme(
+      $support-error-main,
+      transparent,
+      $text-inverse-default,
+      $button-danger-hover,
+      $icon-on-color
+    );
+
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $text-inverse-default;
+      border: $button-border-width solid $support-error-main;
+    }
+  }
+
+  .#{$prefix}--btn--sm {
+    padding: $button-padding-sm;
+    @include type-style("body-short");
+    letter-spacing: 0;
+    font-weight: 700;
+    height: 1.8rem;
+  }
+
+  .#{$prefix}--btn--lg {
+    height: 3.25rem;
+    font-size: calcRem(18px); //TODO
+  }
+
+  .#{$prefix}--btn--all-caps {
+    letter-spacing: 0.05rem;
+    text-transform: uppercase;
+  }
+
+  .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary,
+  .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger--primary {
+    margin-left: $spacing-03;
+    @include rtl {
+      margin-left: 0;
+      margin-right: $spacing-03;
+    }
+  }
+
+  // Skeleton State
+  .#{$prefix}--btn.#{$prefix}--skeleton {
+    @include skeleton;
+    width: calcRem(150px);
+  }
+
+  // Legacy button state styling
+
+  .#{$prefix}--btn--accent {
+    @include button-theme(
+      $support-warning,
+      transparent,
+      $text-body-default,
+      $support-warning,
+      $text-body-default
+    );
+
+    .#{$prefix}--btn__icon,
+    &:hover > .#{$prefix}--btn__icon,
+    &:focus > .#{$prefix}--btn__icon {
+      fill: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--btn--navigation {
+    @include button-theme(
+      saturate(#34a2d9, 10%),
+      transparent,
+      $text-inverse-default,
+      saturate(lighten(#34a2d9, 5), 10%),
+      $icon-on-color
+    );
+  }
+
+  .#{$prefix}--btn--tertiary {
+    @include button-theme(
+      $button-tertiary,
+      transparent,
+      $text-body-default,
+      $button-tertiary-hover,
+      $text-body-default
+    );
+
+    &:hover,
+    &:focus {
+      color: $text-body-default;
+    }
+
+    &:active {
+      color: var(--ui-05);
+    }
+
+    &:hover:disabled,
+    &:focus:disabled {
+      color: var(--ui-05);
+    }
+
+    &:hover > .#{$prefix}--btn__icon,
+    &:focus > .#{$prefix}--btn__icon {
+      fill: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--btn--inverse--primary {
+    @include button-theme(
+      $field,
+      $field,
+      $button-primary,
+      $background-main,
+      $text-body-default
+    );
+
+    &:hover {
+      color: $button-primary-hover;
+      //border: $button-border-width solid var(--ui-01);
+    }
+
+    &:focus {
+      background: $fill-field;
+      color: $button-primary-hover;
+    }
+
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $support-error-main;
+      border: $button-border-width solid $support-error-main;
+    }
+  }
+
+  .#{$prefix}--btn--inverse {
+    @include button-theme(
+      transparent,
+      $field,
+      $text-inverse-default,
+      rgba(#ffffff, 0.1),
+      $icon-on-color
+    );
+
+    &:hover {
+      color: $text-inverse-default;
+      border: $button-border-width solid $fill-field;
+    }
+
+    &:focus {
+      color: $text-inverse-default;
+    }
+
+    &:hover:disabled,
+    &:focus:disabled {
+      color: $support-error-main;
+      border: $button-border-width solid $support-error-main;
+    }
+  }
+}
+
+// @include exports('button') {
+//   @include button;
+// }

package/scss/components/button/_index.scss

@@ -0,0 +1,5 @@
+@forward "vars";
+@forward "button";
+@use "button";
+
+@include button.button;

package/scss/components/button/_mixins.scss

@@ -0,0 +1,92 @@
+@use "vars" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/rtl" as *;
+
+@mixin button-base {
+  @include reset;
+  @include font-family("sans");
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: bottom;
+  flex-shrink: 0;
+  font-size: $button-font-size;
+  font-weight: $button-font-weight;
+  height: $button-height;
+  padding: $button-padding;
+  border-radius: $button-border-radius;
+  text-align: center;
+  text-decoration: none;
+  transition-duration: $transition--base;
+  transition-timing-function: ease-in;
+  white-space: nowrap;
+  line-height: 16px;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .#{$prefix}--btn__icon {
+    //width: calcRem(16px);
+    //height: calcRem(16px);
+    margin-left: 0.5em;
+    @include rtl {
+      margin-left: initial;
+      margin-right: 0.5em;
+    }
+    // transition-duration: $transition--base;
+    // transition-timing-function: ease-in;
+  }
+}
+
+@mixin button-theme(
+  $bg-color,
+  $border-color,
+  $font-color,
+  $hover-bg-color,
+  $icon-color
+) {
+  background-color: $bg-color;
+  border-width: $button-border-width;
+  border-style: solid;
+  border-color: $border-color;
+
+  color: $font-color;
+
+  // TODO: Check if link override is still needed
+  &[role="button"] {
+    color: $font-color;
+  }
+  /* @at-root a {
+    color: $font-color !important;
+  } */
+  &:focus,
+  &:hover {
+    background-color: $hover-bg-color;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled:hover,
+  &:disabled:focus {
+    background-color: $bg-color;
+  }
+
+  &:active {
+    //background-color: darken($bg-color, 20%);
+  }
+
+  .#{$prefix}--btn__icon {
+    fill: $icon-color;
+  }
+}

package/scss/components/button/_vars.scss

@@ -0,0 +1,69 @@
+@use "../../spacing" as *;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-font-weight: 700 !default;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-font-size: 0.875rem !default;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-border-radius: 2px !default;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-height: 2.5rem !default;
+
+/// @type Value
+/// @access public
+/// @group button
+$button-padding: 0 0.8rem !default;
+
+/// @type Value
+/// @access public
+/// @group button
+$button-padding-field: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px !default;
+
+/// @type Value
+/// @access public
+/// @group button
+$button-padding-sm: 0 0.35rem !default;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-padding-lg: $spacing-04 !default;
+
+/// @type Number
+/// @access public
+/// @group button
+/// Uses the same padding-y as normal buttons, but removes extra padding-right
+$button-padding-ghost: calc(0.875rem - 3px) 16px !default;
+
+/// @type Number
+/// @access public
+/// @group button
+/// Uses the same padding-y as field buttons, but removes extra padding-right
+$button-padding-ghost-field: calc(0.675rem - 3px) 16px !default;
+
+/// @type Number
+/// @access public
+/// @group button
+/// Uses the same padding-y as small buttons, but removes extra padding-right
+$button-padding-ghost-sm: calc(0.375rem - 3px) 16px !default;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-border-width: 2px !default;
+
+/// @type Number
+/// @access public
+/// @group button
+$button-outline-width: 1px !default;