@progressiveui/styles 10.30.0

package/scss/components/notification/_toast-notification.scss

@@ -0,0 +1,249 @@
+@use "mixins" as *;
+
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../feature-flags" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../themes" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/focus-outline" as *;
+
+/// Toast notification styles
+/// @access public
+/// @group notification
+@mixin toast-notification {
+  .#{$prefix}--toast-notification {
+    @include reset;
+    display: flex;
+    width: calcRem(288px);
+    height: auto;
+    padding-left: $spacing-05;
+    margin-top: $spacing-03;
+    margin-right: $spacing-05;
+    margin-bottom: $spacing-03;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    color: $text-inverse-default;
+
+    &:first-child {
+      margin-top: $spacing-05;
+    }
+
+    @include breakpoint-up(md) {
+      width: calcRem(452px);
+    }
+  }
+
+  .#{$prefix}--toast-notification:not(
+      .#{$prefix}--toast-notification--low-contrast
+    )
+    a {
+    color: $link-inverse;
+  }
+
+  .#{$prefix}--toast-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--toast-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--toast-notification a:focus {
+    outline: 1px solid $link-inverse;
+  }
+
+  .#{$prefix}--toast-notification.#{$prefix}--toast-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast {
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--toast-notification--error {
+    @include notification--experimental(
+      $support-error-main-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
+    @include notification--experimental(
+      $support-error-main,
+      get-token(var(--cds-background-error))
+    );
+  }
+
+  .#{$prefix}--toast-notification--success {
+    @include notification--experimental(
+      $support-success-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
+    @include notification--experimental(
+      $support-success,
+      get-token(var(--cds-background-success))
+    );
+  }
+
+  .#{$prefix}--toast-notification--info,
+  .#{$prefix}--toast-notification--info-square {
+    @include notification--experimental(
+      $support-info-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info,
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
+    @include notification--experimental(
+      $support-info,
+      get-token(var(--cds-background-info))
+    );
+  }
+
+  .#{$prefix}--toast-notification--warning,
+  .#{$prefix}--toast-notification--warning-alt {
+    @include notification--experimental(
+      $support-warning-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning,
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
+    @include notification--experimental(
+      $support-warning,
+      get-token(var(--cds-background-warning))
+    );
+  }
+
+  .#{$prefix}--toast-notification--warning
+    .#{$prefix}--toast-notification__icon
+    path[opacity="0"] {
+    fill: $text-body-default;
+    opacity: 1;
+  }
+
+  .#{$prefix}--toast-notification__icon {
+    flex-shrink: 0;
+    margin-top: $spacing-05;
+    margin-right: $spacing-05;
+  }
+
+  @if enabled("enable-v11-release") {
+    .#{$prefix}--toast-notification__content {
+      @include type-style("body-short");
+
+      margin-top: $spacing-05;
+      margin-right: $spacing-05;
+      margin-bottom: $spacing-05;
+      word-break: break-word;
+    }
+
+    .#{$prefix}--toast-notification--low-contrast
+      .#{$prefix}--toast-notification__content {
+      color: $text-body-default;
+    }
+  } @else {
+    .#{$prefix}--toast-notification__details {
+      margin-right: $spacing-05;
+    }
+  }
+
+  .#{$prefix}--toast-notification__close-button {
+    @include focus-outline("reset");
+
+    display: flex;
+    width: calcRem(48px);
+    min-width: calcRem(48px);
+    height: calcRem(48px);
+    min-height: calcRem(48px);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    margin-left: auto;
+    background-color: transparent;
+    cursor: pointer;
+    transition: outline $transition--base, background-color $transition--base;
+
+    &:focus {
+      outline: 2px solid $focus-inverse;
+      outline-offset: -2px;
+    }
+
+    .#{$prefix}--toast-notification__close-icon {
+      fill: $icon-inverse;
+    }
+  }
+
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__close-button:focus {
+    @include focus-outline("outline");
+  }
+
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__close-button
+    .#{$prefix}--toast-notification__close-icon {
+    fill: $icon-primary;
+  }
+
+  @if not enabled("enable-v11-release") {
+    .#{$prefix}--toast-notification__title {
+      @include type-style("productive-heading-01");
+
+      margin-top: $spacing-05;
+      font-weight: 600;
+      word-break: break-word;
+    }
+
+    .#{$prefix}--toast-notification__subtitle {
+      @include type-style("body-short");
+
+      margin-top: 0;
+      margin-bottom: $spacing-05;
+      color: $text-inverse-default;
+      word-break: break-word;
+    }
+
+    .#{$prefix}--toast-notification--low-contrast
+      .#{$prefix}--toast-notification__subtitle {
+      color: $text-body-default;
+    }
+
+    .#{$prefix}--toast-notification__caption {
+      @include type-style("body-short");
+
+      padding-top: $spacing-03;
+      margin-bottom: $spacing-05;
+      color: $text-inverse-default;
+    }
+
+    .#{$prefix}--toast-notification--low-contrast
+      .#{$prefix}--toast-notification__caption {
+      color: $text-body-default;
+    }
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--toast-notification {
+    @include high-contrast-mode("outline");
+  }
+  .#{$prefix}--toast-notification__close-button:focus {
+    @include high-contrast-mode("focus");
+  }
+  .#{$prefix}--toast-notification__icon {
+    @include high-contrast-mode("icon-fill");
+  }
+  /* stylelint-enable */
+}

package/scss/components/notification/_tokens.scss

@@ -0,0 +1,126 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:color';
+@use '../../colors';
+@use '../../theme' as *;
+@use '../../themes';
+@use '../../utilities/component-tokens';
+
+// prettier-ignore
+$-tokens: (
+  'notification-background-error': (
+    fallback: colors.$red-10,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$red-10,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$red-10,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer-primary,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer-primary,
+      ),
+    ),
+  ),
+  'notification-background-success': (
+    fallback: colors.$green-10,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$green-10,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$green-10,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer-primary,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer-primary,
+      ),
+    ),
+  ),
+  'notification-background-info': (
+    fallback: colors.$blue-10,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$blue-10,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$blue-10,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer-primary,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer-primary,
+      ),
+    ),
+  ),
+  'notification-background-warning': (
+    fallback: mix(colors.$yellow-30, colors.$white-0, 15%),
+    values: (
+      (
+        theme: themes.$white,
+        value: mix(colors.$yellow-30, colors.$white-0, 15%),
+      ),
+      (
+        theme: themes.$g10,
+        value: mix(colors.$yellow-30, colors.$white-0, 15%),
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer-primary,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer-primary,
+      ),
+    ),
+  ),
+  'notification-action-hover': (
+    fallback: colors.$white-0,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$white-0,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$white-0,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer-hover,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer-hover,
+      ),
+    ),
+  ),
+);
+
+$white: component-tokens.get-tokens($-tokens, themes.$white);
+$g10: component-tokens.get-tokens($-tokens, themes.$g10);
+$g90: component-tokens.get-tokens($-tokens, themes.$g90);
+$g100: component-tokens.get-tokens($-tokens, themes.$g100);

package/scss/components/number-input/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'number-input';
+@use 'number-input';
+
+@include number-input.number-input;

package/scss/components/number-input/_number-input.scss

@@ -0,0 +1,195 @@
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/rtl" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/input-base" as *;
+@use "../form" as *;
+
+$input-height: 40px;
+$input-border: 1px solid $field-border;
+
+/// Number input styles
+/// @access public
+/// @group number-input
+@mixin number-input {
+  .#{$prefix}--number {
+    @include reset;
+    position: relative;
+    display: flex;
+    //flex-direction: column;
+  }
+
+  .#{$prefix}--number input[type="number"] {
+    @include type-style("body-short");
+    @include font-family("sans");
+    @include input-base;
+    box-sizing: border-box;
+    display: inline-flex;
+    width: 100%;
+    min-width: 9.375rem;
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+
+    &:disabled ~ .#{$prefix}--number__controls {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-error-main; //TODO change $border-error
+      font-weight: 400;
+      margin-top: $spacing-02;
+      overflow: visible;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--number input[type="number"] {
+    //appearance: textfield; // Firefox: Hide spinner (up and down buttons)
+
+    &::-ms-clear {
+      display: none; // IE: Hide "clear-field" `x` button on input field
+    }
+
+    &::-webkit-inner-spin-button,
+    ::-webkit-inner-spin-button {
+      -webkit-appearance: none; // Safari: Hide number spinner
+    }
+  }
+
+  .#{$prefix}--number__controls {
+    @include reset;
+    order: 1;
+    position: relative;
+    &:hover {
+      .#{$prefix}--number__control-btn {
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$prefix}--number--nocontrols {
+    .#{$prefix}--number__control-btn {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--number__control-btn {
+    @include button-reset.reset;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    min-width: $input-height;
+    max-width: $input-height;
+    // height: $input-height;
+    //  margin-left: -2px;
+    font-weight: 600;
+    font-size: 1.5rem;
+    // border: 1px solid $input-border-color;
+    opacity: 0;
+    transition: all 0.1s;
+    border-left: 1px solid $field-border-color;
+    color: $action-default-fill-primary-default;
+    //position: absolute;
+    order: 3;
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    right: 1px;
+
+    @include rtl {
+      left: 0;
+      right: initial;
+      border-left: none;
+      border-right: $input-border;
+    }
+
+    span {
+      display: block;
+    }
+
+    &:focus {
+      border-left-color: transparent !important;
+      @include focus-outline;
+      z-index: 100;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:hover svg {
+      //TODO: fill: $hover-primary;
+    }
+    &:nth-child(1) {
+      right: $input-height + 1px;
+      @include rtl {
+        right: initial;
+        left: $input-height + 1px;
+      }
+    }
+  }
+
+  .#{$prefix}--number__controls svg {
+    fill: $action-default-fill-primary-default;
+
+    // Hover styles for use with old HTML w/o button
+    &:hover {
+      cursor: pointer;
+      //TODO: fill: $hover-primary;
+    }
+  }
+
+  .#{$prefix}--number[data-invalid] {
+    .#{$prefix}--form-requirement {
+      display: inline-block;
+      max-height: calcRem(200px);
+    }
+
+    input[type="number"],
+    input[type="number"]:focus {
+      outline: none;
+      border-color: $support-error-main;
+      //box-shadow: 0 2px 0px 0px var(--support-01);
+    }
+
+    /* input[type='number']:focus ~ .#{$prefix}--label {
+      color: var(--support-01);
+    } */
+
+    .#{$prefix}--number__controls {
+      bottom: 2rem;
+    }
+  }
+
+  .#{$prefix}--number--light input[type="number"] {
+    background: var(--field-02);
+  }
+
+  // Skeleton State
+  .#{$prefix}--number.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+    height: 2.5rem;
+
+    input[type="number"] {
+      display: none;
+    }
+  }
+}

package/scss/components/overflow-menu/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'overflow-menu';
+@use 'overflow-menu';
+
+@include overflow-menu.overflow-menu;