@progressiveui/styles 10.30.0

package/scss/components/toggle/_toggle.scss

@@ -0,0 +1,192 @@
+@use "../../config" as *;
+@use "../../feature-flags" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/focus-outline" as *;
+@import "../form";
+
+/// Toggle styles
+/// @access public
+/// @group toggle
+@mixin toggle {
+  .#{$prefix}--toggle {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--toggle__label {
+    @include font-family("sans");
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    transition: $transition--base $standard-easing;
+    cursor: pointer;
+    //margin: $spacing-05 0;
+  }
+
+  .#{$prefix}--toggle__appearance {
+    position: relative;
+    width: calcRem(48px);
+
+    &:before {
+      position: absolute;
+      display: block;
+      content: "";
+      width: 100%;
+      height: calcRem(28px);
+      top: calcRem(-14px);
+      border-radius: calcRem(28px);
+      background-color: $field-background-disabled;
+      transition: $transition--base $standard-easing;
+      cursor: pointer;
+    }
+
+    &:after {
+      box-sizing: border-box;
+      position: absolute;
+      display: block;
+      border: 3px solid $field-background-disabled;
+      cursor: pointer;
+      top: -14px;
+      width: calcRem(28px);
+      height: calcRem(28px);
+      background-color: $background-main; // TODO: Replace
+      border-radius: 50%;
+      content: "";
+      transition: $transition--base $standard-easing;
+    }
+  }
+
+  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label {
+    width: calcRem(32px);
+  }
+
+  .#{$prefix}--toggle--small
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
+    width: calcRem(32px);
+    height: calcRem(16px);
+
+    &:before {
+      box-sizing: border-box;
+      height: calcRem(16px);
+      width: calcRem(32px);
+      border-radius: 0.9375rem;
+      background-color: transparent;
+      border: 2px solid $field-background-enabled;
+      top: 0;
+    }
+
+    &:after {
+      width: calcRem(10px);
+      height: calcRem(10px);
+      background-color: $field-background-enabled;
+      border: none;
+      top: 3px;
+      left: 3px;
+    }
+  }
+
+  .#{$prefix}--toggle__check {
+    fill: $border-inverse;
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    z-index: 1;
+    transition: $transition--base $standard-easing;
+    transform: scale(0.2);
+  }
+
+  .#{$prefix}--toggle--small:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__check {
+    fill: $action-default-fill-primary-default;
+    transform: scale(1) translateX(16px);
+  }
+
+  .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle__text--right {
+    @include type-style("body-short");
+    position: relative;
+  }
+
+  .#{$prefix}--toggle__text--left {
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--toggle__text--right {
+    margin-left: $spacing-03;
+  }
+
+  .#{$prefix}--toggle:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
+    &:before {
+      background-color: $action-default-fill-primary-default; // TODO: Replace
+    }
+
+    &:after {
+      transform: translateX(24px);
+      background-color: $background-main;
+      box-shadow: none;
+      border-color: $field-background-enabled; // TODO: Replace
+    }
+  }
+
+  .#{$prefix}--toggle--small:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
+    &:before {
+      background-color: $action-default-fill-primary-default; // $action-default-fill-primary-default;
+      border-color: $field-background-enabled;
+    }
+
+    &:after {
+      background-color: $background-main;
+      border-color: $background-main;
+      margin-left: 0px;
+      transform: translateX(17px);
+    }
+  }
+
+  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label {
+    .#{$prefix}--toggle__appearance:before {
+      outline: 1px solid transparent;
+    }
+
+    .#{$prefix}--toggle__appearance:after {
+      @include focus-outline("blurred");
+    }
+  }
+
+  .#{$prefix}--toggle--small:focus + .#{$prefix}--toggle__label {
+    .#{$prefix}--toggle__appearance:before {
+      @include focus-outline("blurred");
+    }
+
+    .#{$prefix}--toggle__appearance:after {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .#{$prefix}--toggle:disabled
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
+    &:before,
+    &:after {
+      cursor: not-allowed;
+      transition: $transition--base $standard-easing;
+    }
+  }
+}

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

package/scss/components/tooltip/_mixins.scss

@@ -0,0 +1,107 @@
+@mixin backdrop-transform-enter($placement) {
+  $scale: 1;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -55%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-50%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-50%, -50%);
+  }
+}
+
+@mixin backdrop-transform-leave($placement) {
+  $scale: 0.2;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, 0);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-75%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-25%, -50%);
+  }
+}
+
+@mixin arrow($placement, $width, $color) {
+  @if ($placement == 'top') {
+    border-width: $width $width 0;
+    border-top-color: $color;
+  } @else if ($placement == 'bottom') {
+    border-width: 0 $width $width;
+    border-bottom-color: $color;
+  } @else if ($placement == 'left') {
+    border-width: $width 0 $width $width;
+    border-left-color: $color;
+  } @else if ($placement == 'right') {
+    border-width: $width $width $width 0;
+    border-right-color: $color;
+  }
+}
+
+@mixin arrow-position($placement, $width, $is-svg-arrow) {
+  @if ($placement == 'top' and not $is-svg-arrow) {
+    bottom: -$width;
+  } @else if ($placement == 'bottom') {
+    top: -$width;
+  }
+
+  @if ($is-svg-arrow) {
+    @if ($placement == 'left') {
+      right: -$width * 2 + 2px;
+    } @else if ($placement == 'right') {
+      left: -$width * 2 + 2px;
+    } @else if ($placement == 'top') {
+      bottom: -$width + 0.5px;
+    }
+  } @else {
+    @if ($placement == 'left') {
+      right: -$width;
+    } @else if ($placement == 'right') {
+      left: -$width;
+    }
+  }
+}
+
+@mixin arrow-margin($placement) {
+  @if ($placement == 'top' or $placement == 'bottom') {
+    margin: 0 3px;
+  } @else {
+    margin: 3px 0;
+  }
+}
+
+@mixin svg-arrow-transform($placement) {
+  @if ($placement == 'top') {
+    transform: rotate(180deg);
+  } @else if ($placement == 'left') {
+    transform: rotate(90deg);
+  } @else if ($placement == 'right') {
+    transform: rotate(-90deg);
+  }
+}
+
+@mixin arrow-transform-origin($placement, $size) {
+  @if ($placement == 'top') {
+    transform-origin: 50% 0%;
+  } @else if ($placement == 'bottom') {
+    transform-origin: 50% $size;
+  } @else if ($placement == 'left') {
+    transform-origin: 0% 50%;
+  } @else if ($placement == 'right') {
+    transform-origin: $size 50%;
+  }
+}
+
+@mixin svg-arrow-transform-origin($placement, $size) {
+  @if ($placement == 'top') {
+    transform-origin: 50% 0%;
+  } @else if ($placement == 'bottom') {
+    transform-origin: 50% $size;
+  } @else if ($placement == 'left') {
+    transform-origin: 33.33333333% 50%;
+  } @else if ($placement == 'right') {
+    transform-origin: 66.66666666% 50%;
+  }
+}

package/scss/components/tooltip/_tooltip.scss

@@ -0,0 +1,128 @@
+//
+// 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 "../../theme" as *;
+@use "../../type" as *;
+@use "../../motion" as *;
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../utilities/layer" as *;
+@use "./vars";
+@use "./mixins";
+@import "./animations/fade.scss";
+@import "./themes/light.scss";
+@import "./themes/light-border.scss";
+
+// TODO: deprecate legacy tooltip mixins
+// Tooltip Icon
+// Icon CSS only tooltip
+/// @access private
+/// @deprecated
+/// @group tooltip
+@mixin tooltip {
+  .#{$prefix}--tooltip {
+    cursor: pointer !important;
+    -webkit-tap-highlight-color: transparent;
+    background: $background-main;
+    padding: $spacing-03;
+    &.#{$prefix}--tooltip--disable-padding {
+      padding: 0;
+    }
+    &.#{$prefix}--tooltip--click {
+      cursor: pointer;
+    }
+    &--trigger {
+      cursor: pointer;
+    }
+    /*opacity: 0;
+  display: none;*/
+    //transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+    //transition-property: transform;
+    cursor: pointer;
+    max-width: 300px;
+    border-radius: 7px;
+    line-height: 1.5rem;
+    @include layer("pop-out");
+    z-index: 1000;
+    @include type-style("body-short-02");
+    &[data-popper-placement*="bottom"] {
+      .#{$prefix}--tooltip__arrow {
+        top: 0;
+        left: 0;
+        margin-top: -4px;
+        /*&::before {
+        border-width: 0 1.5em 1em 1.5em;
+        border-color: transparent transparent #232323 transparent;
+      }*/
+      }
+    }
+    &[data-popper-placement*="top"] {
+      .#{$prefix}--tooltip__arrow {
+        bottom: 0;
+        left: 0;
+        margin-bottom: -4px;
+        /*&::before {
+        border-width: 1em 1.5em 0 1.5em;
+        border-color: #232323 transparent transparent transparent;
+      }*/
+      }
+    }
+    &[data-popper-placement*="right"] {
+      .#{$prefix}--tooltip__arrow {
+        left: 0;
+        margin-left: -4px;
+        /*&::before {
+        border-width: 1.5em 1em 1.5em 0;
+        border-color: transparent #232323 transparent transparent;
+      }*/
+      }
+    }
+    &[data-popper-placement*="left"] {
+      .#{$prefix}--tooltip__arrow {
+        right: 0;
+        margin-right: -4px;
+        /*&::before {
+        border-width: 1.5em 0 1.5em 1em;
+        border-color: transparent transparent transparent#232323;
+      }*/
+      }
+    }
+  }
+
+  .#{$prefix}--tooltip--dark {
+    color: $text-inverse-default;
+    background: var(--ui-06);
+    .#{$prefix}--tooltip__arrow {
+      &:before {
+        background: var(--ui-06);
+      }
+    }
+  }
+
+  .#{$prefix}--tooltip--visible {
+    opacity: 1;
+    display: block;
+  }
+
+  .#{$prefix}--tooltip__arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    z-index: -1;
+    &:before {
+      content: "";
+      transform: rotate(45deg);
+      background: $background-main;
+      top: 0px;
+      left: 0px;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}

package/scss/components/tooltip/_vars.scss

@@ -0,0 +1,6 @@
+$namespace-prefix: 'tippy' !default;
+$placements: 'top', 'bottom', 'left', 'right';
+$origins: bottom, top, right, left;
+$backdrop-origins: 0% 25%, 0% -50%, 50% 0%, -50% 0%;
+$backdrop-border-radii: 40% 40% 0 0, 0 0 30% 30%, 50% 0 0 50%, 0 50% 50% 0;
+$arrow-size: 7px;

package/scss/components/tooltip/animations/fade.scss

@@ -0,0 +1,10 @@
+@import '../_mixins.scss';
+@import '../_vars.scss';
+
+.#{$namespace-prefix}-tooltip {
+  &[data-animation='fade'] {
+    &[data-state='hidden'] {
+      opacity: 0;
+    }
+  }
+}

package/scss/components/tooltip/themes/light-border.scss

@@ -0,0 +1,158 @@
+@import '../_mixins.scss';
+@import '../_vars.scss';
+
+$color: var(--ui-01);
+$transparent-light: rgba(0, 8, 16, 0.08);
+$transparent-dark: rgba(0, 8, 16, 0.15);
+$transparent-darker: rgba(0, 8, 16, 0.2);
+
+.#{$namespace-prefix}-tooltip.light-border-theme {
+  background-color: $color;
+  background-clip: padding-box;
+  border: 1px solid $transparent-dark;
+  color: #26323d;
+  box-shadow: 0 4px 14px -2px $transparent-light;
+
+  > .#{$namespace-prefix}-backdrop {
+    background-color: $color;
+  }
+
+  > .#{$namespace-prefix}-arrow,
+  > .#{$namespace-prefix}-svg-arrow {
+    &::after,
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+    }
+  }
+
+  > .#{$namespace-prefix}-svg-arrow {
+    fill: $color;
+
+    &::after {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0MjEiIHZpZXdCb3g9IjAgMCAxOCA3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDdzMi4wMjEtLjAxNSA1LjI1My00LjIxOGMxLjMzMS0xLjczMSAyLjU0NC0yLjc3NSAzLjc0Ny0yLjc4MiAxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyIDMuMjUxIDQuMjIzIDUuMjM5IDQuMjE4IDUuMjM5IDQuMjE4eiIgZmlsbD0iIzMzMyIgZmlsbC1vcGFjaXR5PSIuMjM1Mjk0IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
+      background-size: 18px $arrow-size;
+      width: 18px;
+      height: $arrow-size;
+      left: 0;
+      top: 0;
+      fill: $transparent-dark;
+    }
+  }
+
+  &[data-placement^='top'] {
+    > .#{$namespace-prefix}-svg-arrow::after {
+      top: 1px;
+      transform: rotate(180deg);
+    }
+
+    > .#{$namespace-prefix}-arrow {
+      border-top-color: $color;
+
+      &::after {
+        border-top: $arrow-size solid $color;
+        top: -$arrow-size;
+      }
+      &::before {
+        border-top: $arrow-size solid $transparent-darker;
+        bottom: -1px;
+      }
+    }
+  }
+
+  &[data-placement^='bottom'] {
+    > .#{$namespace-prefix}-svg-arrow::after {
+      top: -1px;
+    }
+
+    > .#{$namespace-prefix}-arrow {
+      border-bottom-color: $color;
+
+      &::after {
+        border-bottom: $arrow-size solid $color;
+        bottom: -$arrow-size;
+      }
+      &::before {
+        border-bottom: $arrow-size solid $transparent-darker;
+        bottom: -($arrow-size - 1);
+      }
+    }
+  }
+
+  &[data-placement^='left'] {
+    > .#{$namespace-prefix}-svg-arrow::after {
+      left: 1px;
+      top: 0;
+      transform: rotate(90deg);
+    }
+
+    > .#{$namespace-prefix}-arrow {
+      border-left-color: var(--ui-01);
+
+      &::after {
+        border-left: $arrow-size solid $color;
+        left: -$arrow-size;
+      }
+      &::before {
+        border-left: $arrow-size solid $transparent-darker;
+        left: -($arrow-size - 1);
+      }
+    }
+  }
+
+  &[data-placement^='right'] {
+    > .#{$namespace-prefix}-svg-arrow::after {
+      left: -1px;
+      top: 0;
+      transform: rotate(-90deg);
+    }
+
+    > .#{$namespace-prefix}-arrow {
+      border-right-color: var(--ui-01);
+
+      &::after {
+        border-right: $arrow-size solid $color;
+        right: -$arrow-size;
+      }
+      &::before {
+        border-right: $arrow-size solid $transparent-darker;
+        right: -($arrow-size - 1);
+      }
+    }
+  }
+
+  &[data-placement^='top'],
+  &[data-placement^='bottom'] {
+    > .#{$namespace-prefix}-arrow,
+    > .#{$namespace-prefix}-svg-arrow {
+      transform: translateX(-1px);
+    }
+
+    > .#{$namespace-prefix}-arrow {
+      &::after,
+      &::before {
+        left: -$arrow-size;
+        border-left: $arrow-size solid transparent;
+        border-right: $arrow-size solid transparent;
+      }
+    }
+  }
+
+  &[data-placement^='left'],
+  &[data-placement^='right'] {
+    > .#{$namespace-prefix}-arrow,
+    > .#{$namespace-prefix}-svg-arrow {
+      transform: translateY(-1px);
+    }
+
+    > .#{$namespace-prefix}-arrow {
+      &::after,
+      &::before {
+        top: -$arrow-size;
+        border-top: $arrow-size solid transparent;
+        border-bottom: $arrow-size solid transparent;
+      }
+    }
+  }
+}

package/scss/components/tooltip/themes/light.scss

@@ -0,0 +1,28 @@
+@import '../_mixins.scss';
+@import '../_vars.scss';
+
+$color: var(--ui-01);
+
+.#{$namespace-prefix}-tooltip.light-theme {
+  color: #26323d;
+  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
+    0 4px 80px -8px rgba(36, 40, 47, 0.25),
+    0 4px 4px -2px rgba(91, 94, 105, 0.15);
+  background-color: $color;
+
+  @each $placement in $placements {
+    &[data-placement^='#{$placement}'] {
+      > .#{$namespace-prefix}-arrow {
+        @include arrow($placement, $arrow-size + 1, $color);
+      }
+    }
+  }
+
+  > .#{$namespace-prefix}-backdrop {
+    background-color: $color;
+  }
+
+  > .#{$namespace-prefix}-svg-arrow {
+    fill: $color;
+  }
+}

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