@progressiveui/styles 10.30.0

package/scss/utilities/_custom-property.scss

@@ -0,0 +1,56 @@
+//
+// 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 '../config';
+
+// Some CSS Custom Property terminology
+// @see https://www.w3.org/TR/css-variables-1/
+//
+// <custom-property-name>:
+//   Any valid identifer that starts with two dashes (--)
+//
+// A declaration:
+//   CSS Custom Properties can be used as declarations in a CSS selector. They
+//   take on the form of:
+//
+//   <custom-property-name>: <declaration-value>;
+//
+// The var() notation:
+//   You can use a CSS Custom Property as a substitute for a value of another
+//   property using the var() function. This function has the following syntax:
+//
+//   var( <custom-property-name> [, <declarative-value> ]? )
+//
+//   This function takes in an optional fallback value if the CSS Custom
+//   Property has not been previously defined
+
+/// Get the <custom-property-name> for a given string
+/// @param {String} $name
+/// @returns {String}
+@function get-name($name) {
+  @return --#{config.$prefix}-#{$name};
+}
+
+/// Get the var() representation for a given token
+/// @param {String} $name
+/// @param {Any} $fallback
+/// @returns var()
+@function get-var($name, $fallback: false) {
+  @if $fallback {
+    @return var(--#{config.$prefix}-#{$name}, #{$fallback});
+  }
+  @return var(--#{config.$prefix}-#{$name});
+}
+
+/// Emit a declaration which sets the value of a CSS Custom Property using the
+/// $name as the <custom-property-name> and the $value as the
+/// <declaration-value>
+/// @param {String} $name
+/// @param {any} $value
+@mixin declaration($name, $value) {
+  #{get-name($name)}: #{$value};
+}

package/scss/utilities/_focus-outline.scss

@@ -0,0 +1,68 @@
+@use "../theme";
+
+/// Adds outline styles depending on specific type
+/// @access public
+/// @param {String} $type ['border'] - Type of outline from: `border`, `blurred`, `outline`, `invalid`, `reset`
+/// @example @include focus-outline('outline');
+/// @group utilities
+@mixin focus-outline($type: "border") {
+  @if ($type == "border") {
+    outline: 1px solid theme.$field-focus;
+    border-color: theme.$field-focus; //update $focus color
+    //box-shadow: 0px 2px 8px 0 theme.$focus; //get new token
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
+  }
+
+  @if ($type == "blurred") {
+    box-shadow: 0 0 0 3px theme.$field-focus; //theme.$focus; //get new token
+    outline: 1px solid transparent;
+  }
+
+  @if ($type == "outline") {
+    outline: 2px solid theme.$field-focus;
+    outline-offset: -2px;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
+  }
+
+  @if ($type == "invalid") {
+    outline: 2px solid theme.$support-error-main;
+    outline-offset: -2px;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
+  }
+
+  @if ($type == "reset") {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+
+  @if ($type == "border-important") {
+    outline: 2px solid theme.$field-focus !important;
+    outline-offset: -1px;
+  }
+
+  @if ($type == "border-focus") {
+    border-radius: var(--border-radius-100);
+    outline: var(--focus-200__color) solid var(--focus-200__width);
+  }
+
+  @if ($type == "border-focus-small") {
+    border-radius: var(--border-radius-100);
+    outline: var(--focus-100__color) solid var(--focus-100__width);
+  }
+
+  @if ($type == "border-small") {
+    //outline: 2px solid theme.$action-default-link-default-hover;
+    outline-offset: 2px;
+    border-radius: var(--border-radius-100);
+    outline: var(--focus-100__color) solid var(--focus-100__width);
+  }
+}

package/scss/utilities/_high-contrast-mode.scss

@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Windows HCM Mixin
+/// @access public
+/// @example @include high-contrast-mode;
+/// @group utilities
+/// Set HCM styles at the end of each file to ensure they are not overwritten
+@mixin high-contrast-mode($type: '') {
+  @media screen and (-ms-high-contrast: active),
+    (forced-colors: active),
+    (prefers-contrast) {
+    @if ($type == 'icon-fill') {
+      fill: ButtonText;
+    }
+
+    @if ($type == 'focus') {
+      color: Highlight;
+      outline: 1px solid Highlight;
+    }
+
+    @if ($type == 'outline') {
+      outline: 1px solid transparent;
+    }
+
+    @if ($type == 'disabled') {
+      color: GrayText;
+      fill: GrayText;
+    }
+
+    @content;
+  }
+}

package/scss/utilities/_index.scss

@@ -0,0 +1,24 @@
+//
+// 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 'box-shadow';
+@forward 'button-reset' as button-*;
+@forward 'component-reset' as component-*;
+@forward 'convert' show em, rem;
+@forward 'focus-outline';
+@forward 'high-contrast-mode';
+@forward 'keyframes';
+@forward 'placeholder-colors';
+@forward 'rotate';
+@forward 'skeleton';
+@forward 'text-overflow';
+@forward 'text-truncate';
+@forward 'tooltip';
+@forward 'visually-hidden';
+@forward 'z-index';
+@forward 'rlt';
+@forward 'read-only';

package/scss/utilities/_input-base.scss

@@ -0,0 +1,63 @@
+@use "../theme" as *;
+@use "../spacing" as *;
+@use "../utilities/placeholder-colors" as *;
+@use "../utilities/focus-outline" as *;
+@use "../utilities/read-only" as *;
+@use "../type" as *;
+
+/// Adds placeholder text color
+/// @access public
+/// @example @include input-base;
+/// @group utilities
+
+$input-border: 1px solid var(--neutral-100__color); //TODO
+$input-height: 40px;
+$input-border-radius: 0px;
+
+@mixin input-base {
+  @include font-family("sans");
+  @include type-style("input");
+  height: $input-height;
+  min-width: 10rem;
+  width: 100%;
+  padding: 0 $spacing-03;
+  color: $text-body-default;
+  appearance: none;
+  //TODO: dynamic font-size
+  font-size: 1em;
+  background-color: $fill-field;
+  order: 2;
+  border: $input-border;
+  border-color: var(--neutral-100__color);
+  border-radius: $input-border-radius;
+  border-radius: $field-border-radius;
+  box-shadow: none;
+
+  //TODO
+  // @include print {
+  //   background: var(--ui-01) !important;
+  //   border-color: var(--ui-06);
+  //   padding: 0 $spacing-02;
+  //   height: $input-height * 0.7;
+  // }
+  &::placeholder {
+    @include placeholder-colors;
+  }
+
+  &:focus {
+    @include focus-outline("border");
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:disabled:hover {
+    border: $input-border;
+  }
+
+  /*&:read-only {
+    @include read-only('border');
+  }*/
+}

package/scss/utilities/_keyframes.scss

@@ -0,0 +1,76 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@mixin content-visible {
+  opacity: 1;
+  visibility: inherit;
+}
+
+@mixin content-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@keyframes hide-feedback {
+  0% {
+    @include content-visible;
+  }
+  100% {
+    @include content-hidden;
+  }
+}
+
+@keyframes show-feedback {
+  0% {
+    @include content-hidden;
+  }
+  100% {
+    @include content-visible;
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    opacity: 0.3;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  20% {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  28% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  51% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  58% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  82% {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  83% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  96% {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  100% {
+    opacity: 0.3;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}

package/scss/utilities/_layer-set.scss

@@ -0,0 +1,31 @@
+@use "sass:list";
+@use "sass:meta";
+@use "../config" as *;
+@use "./custom-property";
+
+/// Define a map of layer sets, each set should have values for each layer in
+/// the application. The key of this map is used for the CSS Custom Property
+/// name whose value is updated as more layers are added.
+/// @type {Map}
+$layer-sets: () !default;
+
+/// Emit the layer tokens defined in $layer-sets for the given $level
+/// @param {Number} $level
+@mixin -emit-layer-tokens($level) {
+  @each $key, $layer-set in $layer-sets {
+    $value: list.nth($layer-set, $level);
+    @include custom-property.declaration($key, $value);
+  }
+}
+
+:root {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer {
+  @include -emit-layer-tokens(2);
+
+  .#{$prefix}--layer {
+    @include -emit-layer-tokens(3);
+  }
+}

package/scss/utilities/_layer.scss

@@ -0,0 +1,52 @@
+//-------------------------------------------
+// 📑 Layer
+// ------------------------------------------
+//
+//   Layer                 ||  Elevation
+//   ==========================================
+//   0 - Base              ||  0
+//   1 - Flat              ||  1
+//   2 - Raised            ||  2
+//   3 - Overlay           ||  8
+//   4 - Pop-out           ||  24
+//   ==========================================
+//   Custom: Left Nav      ||  16
+//   Custom: Global Header ||  12
+//
+
+// Box shadow variables
+$box-shadow: rgba(0, 0, 0, 0.1);
+$box-shadow--hover: rgba(0, 0, 0, 0.2);
+$box-shadow--raised: 0 1px 2px 0 $box-shadow;
+$box-shadow--overlay: 0 4px 8px 0 $box-shadow;
+$box-shadow--sticky-nav: 0 6px 12px 0 $box-shadow;
+$box-shadow--temporary-nav: 0 8px 16px 0 $box-shadow;
+$box-shadow--pop-out: 0 8px 24px 0 $box-shadow;
+$box-shadow--pop-out--hover: 0 5px 32px 0 $box-shadow--hover;
+
+// Layer box-shadow map
+$layer-shadows: (
+  base: none,
+  flat: none,
+  raised: $box-shadow--raised,
+  overlay: $box-shadow--overlay,
+  pop-out: $box-shadow--pop-out,
+  pop-out--hover: $box-shadow--pop-out--hover,
+  temporary-nav: $box-shadow--temporary-nav,
+  sticky-nav: $box-shadow--sticky-nav,
+);
+
+// Layer mixin
+@mixin layer($layer) {
+  @if global-variable-exists('css--use-layer') ==
+    false or
+    $css--use-layer ==
+    true
+  {
+    @if map-has-key($layer-shadows, $layer) {
+      box-shadow: #{map-get($layer-shadows, $layer)};
+    } @else {
+      @warn '#{$layer} is not a valid layer.';
+    }
+  }
+}

package/scss/utilities/_placeholder-colors.scss

@@ -0,0 +1,10 @@
+@use "../theme" as *;
+
+/// Adds placeholder text color
+/// @access public
+/// @example @include placeholder-colors;
+/// @group utilities
+@mixin placeholder-colors {
+  color: $text-field-placeholder; //undefined var error
+  opacity: 1;
+}

package/scss/utilities/_read-only.scss

@@ -0,0 +1,19 @@
+
+@use '../theme' as *;
+
+/// Adds placeholder text color
+/// @access public
+/// @example @include read-only;
+/// @group utilities
+
+@mixin read-only($type: 'border') {
+    @if ($type == 'border') {
+      border-color: $border-subtle;
+      &:hover,
+      &:focus {
+        border-color: $border-subtle;
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  }

package/scss/utilities/_rotate.scss

@@ -0,0 +1,19 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Adds rotational transformation
+/// @access public
+/// @param {Number} $deg - How many degrees to rotate
+/// @param {Number} $speed - Speed of rotation
+/// @param {Value} $origin [center] - `transform-origin`
+/// @example @include rotate(90deg, 300ms);
+/// @group utilities
+@mixin rotate($deg, $speed, $origin: center) {
+  transform: rotate($deg);
+  transform-origin: $origin;
+  transition: transform $speed;
+}

package/scss/utilities/_rtl.scss

@@ -0,0 +1,21 @@
+/**
+ * Right to left Support added
+ */
+
+ /// Adds text overflow styling
+/// @access public
+/// @example @include rtl;
+/// @content
+/// @group utilities
+
+@mixin ltr() {
+  body[dir='ltr'] & {
+    @content;
+  }
+}
+
+@mixin rtl() {
+  [dir='rtl'] & {
+    @content;
+  }
+}

package/scss/utilities/_skeleton.scss

@@ -0,0 +1,44 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 'keyframes';
+@use '../theme' as *;
+
+/// Skeleton loading animation
+/// @access public
+/// @example @include skeleton;
+/// @group utilities
+@mixin skeleton {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: #d1e5f4; //$skeleton-background;
+  box-shadow: none;
+  pointer-events: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    border: none;
+    cursor: default;
+    outline: none;
+  }
+
+  &::before {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation: 3000ms ease-in-out skeleton infinite;
+    background: #e7f1f9; //$skeleton-element;
+    content: '';
+    will-change: transform-origin, transform, opacity;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}

package/scss/utilities/_text-gradient.scss

@@ -0,0 +1,20 @@
+//-------------------------
+// 🎌 Text Gradient Blur
+//-------------------------
+
+// Layer mixin
+@mixin text-gradient() {
+  &:after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: "";
+    height: calcRem(70px);
+    width: 100%;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.8) 90%
+    );
+  }
+}

package/scss/utilities/_text-overflow.scss

@@ -0,0 +1,23 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Adds text overflow styling
+/// @access public
+/// @param {Number} $width [false] - Value of width if you want to set width, else nothing
+/// @example @include text-overflow(300px);
+/// @group utilities
+@mixin text-overflow($width: false) {
+  display: block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  // apply a width if width parameter exists
+  @if ($width) {
+    width: $width;
+  }
+}

package/scss/utilities/_text-truncate.scss

@@ -0,0 +1,29 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Text truncation at the end of text
+/// @access public
+/// @group utilities
+@mixin text-truncate-end {
+  display: inline-block;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Text truncation at the beginning of text
+/// @access public
+/// @group utilities
+@mixin text-truncate-front {
+  display: inline-block;
+  overflow: hidden;
+  width: 100%;
+  direction: rtl;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/utilities/_visually-hidden.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 '../config' as *;
+
+/// Include styles for screen reader/assistive text
+/// @access public
+/// @group utilities
+@mixin visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}
+
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}

package/scss/utilities/_z-index.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @access public
+/// @type Map
+/// @group utilities
+$z-indexes: (
+  // Dropdowns that render outside of a Modal should render above a Modal.
+  // Dropdowns below the modal will close when the Modal is opened, so
+  // having a higher z-index *should* not cause issues.
+  dropdown: 9100,
+  modal: 9000,
+  header: 8000,
+  overlay: 6000,
+  floating: 6000,
+  footer: 5000,
+  hidden: - 1,
+  overflowHidden: - 1
+);
+
+/// @access public
+/// @param {String} $layer - Value from `$z-indexes` map
+/// @group utilities
+/// @example - scss
+///   .modal {
+///     z-index: z('modal');
+///   }
+@function z($layer) {
+  @if not map-has-key($z-indexes, $layer) {
+    @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
+  }
+
+  @return map-get($z-indexes, $layer);
+}