@progressiveui/styles 10.30.0

package/scss/components/unit/_unit.scss

@@ -0,0 +1,277 @@
+//
+// Copyright IBM Corp. 2016, 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 '../form' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../motion' as *;
+@use '../../type' as *;
+@use '../../breakpoint' as *;
+@use '../../theme' as *;
+@use '../../utilities/component-reset';
+@use '../../utilities/convert' as *;
+@use '../../utilities/high-contrast-mode' as *;
+
+/// Unit styles
+/// @access public
+/// @group unit
+@mixin unit {
+  .#{$prefix}--unit {
+    white-space: nowrap;
+    &:after,
+    .unit__small {
+      font-size: 0.7em;
+      font-style: italic;
+      margin-left: 0.3em;
+      opacity: 0.7;
+    }
+  }
+
+  .#{$prefix}--unit--hide,
+  .#{$prefix}--unit--hide .unit {
+    &:after,
+    tspan:last-child {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--unit--light {
+    &:after {
+      font-weight: 300;
+      margin-left: 0.2em;
+      opacity: 1;
+    }
+  }
+
+  .#{$prefix}--unit--littleusd {
+    &:after {
+      content: 'USD';
+    }
+  }
+
+  .#{$prefix}--unit--none {
+    white-space: normal;
+  }
+
+  .#{$prefix}--unit--tusd {
+    &:after {
+      content: 'T USD';
+    }
+  }
+
+  .#{$prefix}--unit--usd {
+    &:after {
+      content: 'M USD';
+    }
+  }
+
+  .#{$prefix}--unit--busd {
+    &:after {
+      content: 'B USD';
+    }
+  }
+
+  .#{$prefix}--unit--metrictons {
+    &:after {
+      content: 'T';
+    }
+  }
+  .#{$prefix}--unit--mt {
+    &:after {
+      content: 'MT';
+    }
+  }
+
+  .#{$prefix}--unit--people {
+    &:after {
+      content: 'People';
+    }
+    &.#{$prefix}--unit--million {
+      &:after {
+        content: 'M People';
+      }
+    }
+  }
+
+  /*.#{$prefix}--unit--million {
+      &:after {
+          content: "M";
+      }
+  }*/
+
+  .#{$prefix}--unit--partners {
+    &:after {
+      content: 'Partners';
+    }
+  }
+
+  .#{$prefix}--unit--countries {
+    &:after {
+      content: 'Countries';
+    }
+  }
+
+  .#{$prefix}--unit--kg {
+    &:after {
+      content: 'Kg';
+    }
+  }
+
+  .#{$prefix}--unit--percentage,
+  .#{$prefix}--unit--simplepercentage {
+    &:after {
+      content: '%';
+    }
+  }
+
+  .#{$prefix}--unit--mbeneficiaries {
+    &:after {
+      content: 'M Beneficiaries';
+    }
+  }
+
+  .#{$prefix}--unit--beneficiaries,
+  .#{$prefix}--unit--beneficiaries--text {
+    &:after {
+      content: 'Beneficiaries';
+    }
+  }
+
+  .#{$prefix}--unit--months {
+    &:after {
+      content: 'Months';
+    }
+    &.#{$prefix}--unit--singular {
+      &:after {
+        content: 'Month';
+      }
+    }
+  }
+
+  .#{$prefix}--unit--households {
+    &:after {
+      content: 'Households';
+    }
+  }
+
+  .#{$prefix}--unit--trips {
+    &:after {
+      content: 'Trips';
+    }
+  }
+
+  .#{$prefix}--unit--level {
+    &:before {
+      content: 'Level ';
+    }
+  }
+
+  .#{$prefix}--unit--usd {
+    &:before {
+      content: 'US$ ';
+    }
+    &:after {
+      content: '';
+    }
+    &.#{$prefix}--unit--external {
+      &:after {
+        content: '';
+      }
+      &:before {
+        content: 'US$ ';
+      }
+    }
+    &.#{$prefix}--unit--thousand {
+      &:after {
+        content: 'T';
+      }
+      &.#{$prefix}--unit--external {
+        &:after {
+          content: ' thousand';
+        }
+        &:before {
+          content: 'T US$ ';
+        }
+      }
+    }
+    &.#{$prefix}--unit--million {
+      &:after {
+        content: 'M';
+      }
+      &.#{$prefix}--unit--external {
+        &:after {
+          content: ' million';
+        }
+        &:before {
+          content: 'US$ ';
+        }
+      }
+    }
+    &.#{$prefix}--unit--billion {
+      &:after {
+        content: 'B';
+      }
+      &.#{$prefix}--unit--external {
+        &:after {
+          content: ' billion';
+        }
+        &:before {
+          content: 'US$ ';
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--unit--num {
+    &:after {
+      content: '';
+    }
+    &.#{$prefix}--unit--external {
+      &:after {
+        content: '';
+      }
+    }
+    &.#{$prefix}--unit--thousand {
+      &:after {
+        content: 'T';
+      }
+      &.#{$prefix}--unit--external {
+        &:after {
+          content: ' thousand';
+        }
+      }
+    }
+    &.#{$prefix}--unit--million {
+      &:after {
+        content: 'M';
+      }
+      &.#{$prefix}--unit--external {
+        &:after {
+          content: ' million';
+        }
+      }
+    }
+    &.#{$prefix}--unit--billion {
+      &:after {
+        content: 'B';
+      }
+      &.#{$prefix}--unit--external {
+        &:after {
+          content: ' billion';
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--unit--svg {
+    tspan:last-child {
+      font-size: 6px !important;
+      font-style: italic;
+      opacity: 0.6;
+    }
+  }
+}

package/scss/components/user/_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 'user';
+@use 'user';
+
+@include user.user;

package/scss/components/user/_user.scss

@@ -0,0 +1,104 @@
+//
+// Copyright IBM Corp. 2016, 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" as *;
+@use "../../spacing" as *;
+@use "../../motion" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../theme" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/rtl" as *;
+@use "../../utilities/high-contrast-mode" as *;
+
+/// User styles
+/// @access public
+/// @group user
+@mixin user {
+  .#{$prefix}--user {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--avatar {
+    font-size: 1.2em;
+    background: $layer-primary;
+
+    /* > img {
+      display: block;
+      object-fit: cover;
+      width: 1.2em;
+      height: 1.2em;
+    } */
+
+    .#{$prefix}--user--has-description & {
+      //width: calcRem(60px);
+      //height: calcRem(60px);
+      margin-right: $spacing-06;
+      @include rtl {
+        margin-left: $spacing-06;
+        margin-right: inherit;
+      }
+    }
+  }
+
+  .#{$prefix}--user__description {
+    @include type-style("productive-heading-03");
+    font-size: calcRem(18px);
+    //color: var(--text-02);
+  }
+
+  .#{$prefix}--user__extended-description {
+    margin-left: $spacing-06;
+    @include type-style("productive-heading-03");
+    font-size: calcRem(18px);
+    //color: var(--text-02);
+  }
+
+  .#{$prefix}--avatar + .#{$prefix}--user__title {
+    margin-left: var(--spacing-100);
+    @include rtl {
+      margin-right: var(--spacing-100);
+      margin-left: inherit;
+    }
+  }
+
+  .#{$prefix}--user__title {
+    > span {
+      .#{$prefix}--user--has-description & {
+        font-weight: bold;
+        line-height: 1.4em;
+      }
+    }
+  }
+
+  .#{$prefix}--user__title--ellipsis {
+    display: inline-block;
+    // @include breakpoint-between(bp--sm--major, bp--md--major) {
+    //   max-width: 130px;
+    //   border: 1px solid red;
+    // }
+
+    overflow: hidden;
+    line-height: 1.5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .#{$prefix}--user__title--small {
+    @include breakpoint("lg") {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .#{$prefix}--user__title--ellipsis {
+    max-width: 70px;
+  }
+}

package/scss/components/value/_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 'value';
+@use 'value';
+
+@include value.value;

package/scss/components/value/_value.scss

@@ -0,0 +1,41 @@
+//
+// Copyright IBM Corp. 2016, 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" as *;
+@use "../../spacing" as *;
+@use "../../motion" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../theme" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/high-contrast-mode" as *;
+
+/// Value styles
+/// @access public
+/// @group value
+@mixin value {
+  .#{$prefix}--value {
+    @include reset;
+    @include font-family("sans");
+    //@include typescale('epsilon');
+    // @include font-smoothing;
+  }
+  .#{$prefix}--title {
+    @include type-style("heading-02");
+    color: $text-body-secondary;
+    margin-bottom: $spacing-03;
+    font-weight: 600;
+  }
+  .#{$prefix}--primary-value {
+    @include type-style("productive-heading-04");
+    margin-bottom: $spacing-03;
+  }
+  .#{$prefix}--secondary-value {
+    @include type-style("body-short-02");
+  }
+}

package/scss/components/wrapper/_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 'wrapper';
+@use 'wrapper';
+
+@include wrapper.wrapper;

package/scss/components/wrapper/_wrapper.scss

@@ -0,0 +1,71 @@
+//
+// Copyright IBM Corp. 2016, 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" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline";
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/z-index" as *;
+@use "../../utilities/placeholder-colors" as *;
+
+@mixin wrapper {
+  .#{$prefix}--wrapper {
+    margin: auto;
+    width: 100%;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
+
+    @include breakpoint("lg") {
+      padding-left: $spacing-05;
+      padding-right: $spacing-05;
+    }
+  }
+
+  .#{$prefix}--wrapper--width-full {
+    max-width: 100%;
+  }
+
+  .#{$prefix}--wrapper--width-lg {
+    max-width: 1200px;
+  }
+
+  .#{$prefix}--wrapper--spacing-md {
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$prefix}--wrapper--spacing-xl {
+    padding-top: $spacing-08;
+    padding-bottom: $spacing-08;
+  }
+
+  .#{$prefix}--wrapper--background-lighter {
+    background: $layer-primary; //$color__navy-gray-9;
+  }
+
+  .#{$prefix}--wrapper--background-dark {
+    background: $background-brand;
+  }
+
+  .#{$prefix}--wrapper--width-md {
+    max-width: 1000px;
+  }
+
+  .#{$prefix}--wrapper--width-sm {
+    max-width: 700px;
+  }
+
+  .#{$prefix}--wrapper--width-xs {
+    max-width: 500px;
+  }
+}

package/scss/utilities/_box-shadow.scss

@@ -0,0 +1,14 @@
+//
+// 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 box shadow
+/// @access public
+/// @example @include box-shadow;
+/// @group utilities
+@mixin box-shadow {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}

package/scss/utilities/_button-reset.scss

@@ -0,0 +1,31 @@
+//
+// 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 'component-reset';
+
+/// Resets button styles
+/// @access public
+/// @param {Bool} $width [true] - Sets width to 100% if true
+/// @example @include button-reset($width: false);
+/// @group utilities
+@mixin reset($width: true) {
+  @include component-reset.reset;
+
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+
+  @if ($width == true) {
+    width: 100%;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

package/scss/utilities/_component-reset.scss

@@ -0,0 +1,25 @@
+//
+// 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.
+//
+
+/// Resets default browser styling
+/// @access public
+/// @group utilities
+@mixin reset {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}

package/scss/utilities/_component-tokens.scss

@@ -0,0 +1,27 @@
+//
+// 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:map';
+
+/// Extract the component tokens from a given theme
+/// @param {SassMap} $tokens
+/// @param {SassMap} $theme
+/// @returns {SassMap}
+@function get-tokens($tokens, $theme) {
+  $result: ();
+
+  @each $key, $descriptor in $tokens {
+    $theme-values: map.get($descriptor, values);
+    @each $theme-value in $theme-values {
+      @if map.get($theme-value, theme) == $theme {
+        $result: map.set($result, $key, map.get($theme-value, value));
+      }
+    }
+  }
+
+  @return $result;
+}

package/scss/utilities/_convert.scss

@@ -0,0 +1,41 @@
+//
+// 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.
+//
+
+/// Default font size
+/// @type Number
+/// @access public
+@use "sass:math";
+
+$base-font-size: 16px !default;
+
+/// Convert a given px unit to a rem unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group utilities
+@function calcRem($px) {
+  @if unit($px) != "px" {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1rem;
+}
+
+/// Convert a given px unit to a em unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group utilities
+@function em($px) {
+  @if unit($px) != "px" {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1em;
+}