@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.1

package/scss/slider/slider.scss

@@ -1,135 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../icon/index';
-@import '../utils/index';
-
-$thumb-height: $iui-m; // 16px
-$track-height: $iui-xs; // 4px
-$tick-height: $iui-baseline; // 11px
-
-@mixin iui-slider-component-container {
-  display: flex;
-  min-height: $iui-baseline * 2;
-
-  .iui-slider-min,
-  .iui-slider-max {
-    user-select: all;
-    margin-top: $iui-xxs;
-
-    svg {
-      @include iui-icons-default;
-      margin-top: $iui-xs;
-    }
-  }
-
-  .iui-slider-min {
-    margin-right: $iui-sm;
-    text-align: right;
-  }
-
-  .iui-slider-max {
-    margin-left: $iui-sm;
-  }
-
-  &.iui-disabled {
-    @include iui-slider-disabled;
-  }
-}
-
-@mixin iui-slider-container {
-  position: relative;
-  flex-grow: 1;
-  cursor: pointer;
-  touch-action: pan-y;
-  isolation: isolate;
-
-  &.iui-grabbing {
-    cursor: grabbing;
-  }
-}
-
-@mixin iui-slider-rail {
-  position: absolute;
-  width: 100%;
-  height: $track-height;
-  top: $iui-sm;
-  background-color: var(--iui-color-background-border);
-}
-
-@mixin iui-slider-thumb {
-  box-sizing: content-box;
-  position: absolute;
-  height: $thumb-height;
-  width: $thumb-height;
-  border-radius: 100%;
-  top: $track-height + 1; // position center of thumb in center of track
-  transform: translateX(
-    (-$thumb-height - 2) * 0.5
-  ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
-  z-index: 1;
-  cursor: grab;
-  @include iui-focus($thickness: 2px);
-  background: var(--iui-color-background-1);
-  border: 1px solid var(--iui-color-background-border);
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-@mixin iui-slider-track {
-  pointer-events: none;
-  position: absolute;
-  height: $track-height;
-  left: 0;
-  top: $iui-sm;
-  background-color: var(--iui-color-foreground-primary);
-}
-
-@mixin iui-slider-ticks {
-  position: relative;
-  padding-top: $iui-m;
-  display: flex;
-  pointer-events: none;
-  justify-content: space-between;
-  user-select: none;
-
-  .iui-slider-tick {
-    position: relative;
-    display: flex;
-    pointer-events: none;
-    justify-content: center;
-    width: 1px;
-    height: $tick-height;
-    line-height: $tick-height * 4;
-    margin-bottom: $tick-height * 2;
-    background-color: var(--iui-color-background-4);
-  }
-}
-
-@mixin iui-slider-disabled {
-  cursor: not-allowed;
-
-  .iui-slider-container {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .iui-slider-thumb {
-    cursor: not-allowed;
-    background-color: var(--iui-color-background-4);
-    border-color: var(--iui-color-background-4);
-  }
-
-  .iui-slider-track {
-    background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  }
-
-  .iui-slider-min,
-  .iui-slider-max,
-  .iui-slider-tick {
-    user-select: none;
-    color: var(--iui-text-color-muted);
-  }
-}

package/scss/stepper/classes.scss

@@ -1,32 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-.iui-stepper {
-  @include iui-stepper;
-}
-
-.iui-stepper-step {
-  @include iui-stepper-step;
-  @include iui-stepper-step-modifiers;
-}
-
-.iui-stepper-circle {
-  @include iui-stepper-circle;
-}
-
-.iui-stepper-track-content {
-  @include iui-stepper-track-content;
-}
-
-.iui-stepper-step-name {
-  @include iui-stepper-step-name;
-}
-
-.iui-stepper-steps-label {
-  @include iui-stepper-steps-label;
-}
-
-.iui-stepper-steps-label-count {
-  @include iui-stepper-steps-label-count;
-}

package/scss/stepper/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './stepper';

package/scss/stepper/stepper.scss

@@ -1,151 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../utils/index';
-@import '../text/mixins';
-
-@mixin iui-stepper {
-  display: flex;
-  flex-direction: column;
-  row-gap: $iui-baseline * 0.5;
-
-  > ol {
-    @include iui-stepper-list;
-  }
-}
-
-@mixin iui-stepper-list {
-  @include iui-reset;
-  display: flex;
-  justify-content: space-around;
-  align-items: flex-start;
-  width: 100%;
-}
-
-@mixin iui-stepper-step {
-  --_iui-stepper-step-background-color: var(--iui-color-background-1);
-  --_iui-stepper-step-border-color: var(--iui-color-foreground-positive);
-  --_iui-stepper-step-number-color: var(--iui-color-foreground-positive);
-  --_iui-stepper-step-text-color: var(--iui-color-foreground-positive);
-  --_iui-stepper-step-track-before-color: var(--iui-color-foreground-positive);
-  --_iui-stepper-step-track-after-color: var(--iui-color-foreground-positive);
-
-  flex: 1;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  @include iui-text(small);
-  color: var(--_iui-stepper-step-text-color);
-
-  &:first-of-type {
-    --_iui-stepper-step-track-before-color: transparent;
-  }
-
-  &:last-of-type {
-    --_iui-stepper-step-track-after-color: transparent;
-  }
-}
-
-@mixin iui-stepper-step-modifiers {
-  // Current step
-  &.iui-current {
-    --_iui-stepper-step-background-color: var(--iui-color-background-positive);
-    --_iui-stepper-step-border-color: var(--iui-color-background-positive);
-    --_iui-stepper-step-number-color: var(--iui-color-foreground-accessory);
-    --_iui-stepper-step-track-after-color: var(--iui-color-background-border);
-
-    font-weight: $iui-font-weight-semibold;
-  }
-
-  // Future steps
-  &.iui-current ~ & {
-    --_iui-stepper-step-background-color: var(--iui-color-background-1);
-    --_iui-stepper-step-border-color: var(--iui-color-background-border);
-    --_iui-stepper-step-number-color: var(--iui-text-color-muted);
-    --_iui-stepper-step-text-color: var(--iui-text-color-muted);
-    --_iui-stepper-step-track-before-color: var(--iui-color-background-5);
-
-    &:not(:last-of-type) {
-      --_iui-stepper-step-track-after-color: var(--iui-color-background-5);
-    }
-  }
-
-  // Clickable steps
-  &.iui-clickable:focus {
-    outline: 0;
-  }
-}
-
-@mixin iui-stepper-circle {
-  align-items: center;
-  border-radius: $iui-border-radius-round;
-  display: flex;
-  width: $iui-l;
-  height: $iui-l;
-  justify-content: center;
-  overflow-wrap: break-word;
-  user-select: none;
-  border: 1px solid var(--_iui-stepper-step-border-color);
-  background-color: var(--_iui-stepper-step-background-color);
-  color: var(--_iui-stepper-step-number-color);
-
-  @at-root .iui-clickable & {
-    cursor: pointer;
-    transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out,
-      color $iui-speed-fast ease-out;
-
-    &:hover {
-      --_iui-stepper-step-background-color: var(--iui-color-background-positive);
-      --_iui-stepper-step-border-color: var(--iui-color-background-positive);
-      --_iui-stepper-step-number-color: var(--iui-color-foreground-accessory);
-    }
-  }
-
-  @at-root .iui-clickable:focus & {
-    outline: 2px solid var(--iui-color-foreground-positive);
-    outline-offset: -1px;
-  }
-
-  @at-root .iui-clickable:focus:not(:focus-visible) & {
-    outline: none;
-  }
-}
-
-@mixin iui-stepper-track-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    height: $iui-xxs;
-    flex: 1 2 auto;
-  }
-
-  &::before {
-    background-color: var(--_iui-stepper-step-track-before-color);
-  }
-
-  &::after {
-    background-color: var(--_iui-stepper-step-track-after-color);
-  }
-}
-
-@mixin iui-stepper-step-name {
-  text-align: center;
-  user-select: all;
-  color: var(--_iui-stepper-step-text-color);
-}
-
-@mixin iui-stepper-steps-label {
-  display: block;
-  font-size: $iui-font-size-subheading;
-  text-align: center;
-}
-
-@mixin iui-stepper-steps-label-count {
-  user-select: none;
-  margin-right: $iui-s;
-  color: var(--iui-text-color-muted);
-}

package/scss/style/baseline.scss

@@ -1,4 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-$iui-baseline: 11px;
-$iui-line-height: $iui-baseline * 2; ///  22px; /// ~1.618;

package/scss/style/color.scss

@@ -1,39 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-/// Data visualization colors:
-$iui-color-dataviz-skyblue: hsl(204, 77%, 67%);
-$iui-color-dataviz-celery: hsl(72, 51%, 56%);
-$iui-color-dataviz-froly: hsl(2, 90%, 70%);
-$iui-color-dataviz-steelblue: hsl(200, 41%, 46%);
-$iui-color-dataviz-sunglow: hsl(42, 100%, 60%);
-$iui-color-dataviz-seabuckthorn: hsl(29, 92%, 61%);
-$iui-color-dataviz-montecarlo: hsl(176, 43%, 62%);
-$iui-color-dataviz-poloblue: hsl(211, 44%, 67%);
-$iui-color-dataviz-bouquet: hsl(305, 19%, 55%);
-$iui-color-dataviz-ash: hsl(42, 15%, 75%);
-$iui-color-dataviz-oak: hsl(27, 32%, 49%);
-
-/// Soft background colors generated from dataviz colors:
-$iui-color-background-skyblue: hsl(197, 71%, 83%);
-$iui-color-background-celery: hsl(72, 51%, 66%);
-$iui-color-background-froly: hsl(2, 90%, 83%);
-$iui-color-background-steelblue: hsl(207, 44%, 73%);
-$iui-color-background-sunglow: hsl(42, 100%, 70%);
-$iui-color-background-seabuckthorn: hsl(29, 92%, 71%);
-$iui-color-background-montecarlo: hsl(176, 43%, 72%);
-$iui-color-background-poloblue: hsl(211, 44%, 77%);
-$iui-color-background-bouquet: hsl(305, 19%, 75%);
-$iui-color-background-ash: hsl(42, 15%, 85%);
-$iui-color-background-oak: hsl(27, 32%, 72%);
-
-/// System provided colors:
-$iui-color-system-red: #F00;
-$iui-color-system-burgundi: #900;
-$iui-color-system-orange: #F90;
-$iui-color-system-yellow: #FF0;
-$iui-color-system-green: #6C0;
-$iui-color-system-cyan: #0CF;
-$iui-color-system-blue: #03F;
-$iui-color-system-magenta: #C3F;
-$iui-color-system-turquoise: #6FC;
-$iui-color-system-gray: #999;

package/scss/style/elevation.scss

@@ -1,11 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-/// Elevations:
-$iui-elevation-color: hsla(200, 12%, 0%, 0.25);
-
-$iui-elevation-0: 0;
-$iui-elevation-2: 0 1px 5px $iui-elevation-color;
-$iui-elevation-4: 0 1px 10px $iui-elevation-color;
-$iui-elevation-8: 0 3px 14px $iui-elevation-color;
-$iui-elevation-16: 0 6px 30px $iui-elevation-color;
-$iui-elevation-24: 0 9px 46px $iui-elevation-color;

package/scss/style/global-variables.scss

@@ -1,23 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './space';
-@import './baseline';
-@import './icon-sizes';
-
-$iui-border-radius: 4px;
-$iui-border-radius-round: 9999px;
-$iui-blur-filter: blur(5px);
-
-$iui-component-offset: 3px;
-
-$iui-component-height: $iui-baseline * 4 - $iui-component-offset * 2; // 38px
-$iui-component-height-small: $iui-baseline * 3 - $iui-component-offset * 2; // 27px
-$iui-component-height-large: $iui-baseline * 5 - $iui-component-offset * 2; // 49px
-
-$iui-component-padding-horizontal: $iui-sm; // 12px
-
-$iui-component-padding-vertical: (($iui-component-height - $iui-line-height) * 0.5) - 1; // 12.5px
-$iui-component-padding-vertical-small: (($iui-component-height-small - $iui-line-height) * 0.5) - 1; // 7px
-$iui-component-padding-vertical-large: (($iui-component-height-large - $iui-line-height) * 0.5) - 1; // 18px
-
-$iui-side-navigation-icon-margins: $iui-icons-large; // Used to align header brand button & side navigation spacing

package/scss/style/global.scss

@@ -1,69 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-@import '../utils/index';
-
-html {
-  @include theme-variables(light);
-
-  @media (prefers-color-scheme: dark) {
-    @include theme-variables(dark);
-  }
-
-  @media (prefers-color-scheme: light) and (prefers-contrast: more) {
-    @include theme-variables(light-hc);
-  }
-
-  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
-    @include theme-variables(dark-hc);
-  }
-
-  &.iui-theme-light {
-    @include theme-variables(light);
-  }
-
-  &.iui-theme-dark {
-    @include theme-variables(dark);
-  }
-
-  &.iui-theme-light-hc {
-    @include theme-variables(light-hc);
-  }
-
-  &.iui-theme-dark-hc {
-    @include theme-variables(dark-hc);
-  }
-}
-
-.iui-body {
-  background-color: var(--iui-color-background-2);
-  color: var(--iui-text-color);
-  font-size: $iui-font-size;
-  line-height: $iui-line-height;
-
-  @include iui-scrollbar;
-  @include iui-font-family;
-
-  &.iui-no-webfonts {
-    font-family: $iui-sans-fallback;
-  }
-}
-
-.iui-visually-hidden {
-  @include visually-hidden;
-}
-
-[class*='iui-'],
-[class*='iui-'] * {
-  // Text highlight
-  @include iui-text-selection;
-
-  // Scrollbar
-  @include iui-scrollbar;
-}
-
-[class*=iui-]:where(:not(.iui-body)),
-[class*=iui-]:where(:not(.iui-body))::before,
-[class*=iui-]:where(:not(.iui-body))::after {
-  box-sizing: border-box;
-}

package/scss/style/icon-sizes.scss

@@ -1,14 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-
-/// Icon sizes
-
-$iui-icons-default: 16px;
-
-$iui-icons-small: 0.75 * $iui-icons-default; // 12px
-$iui-icons-large: 1.5 * $iui-icons-default; // 24px
-$iui-icons-xl: 2 * $iui-icons-default; // 32px
-$iui-icons-xxl: 3 * $iui-icons-default; // 48px
-$iui-icons-3xl: 4 * $iui-icons-default; // 64px
-
-$iui-icons-color-multicolor-disabled: grayscale(100%);

package/scss/style/index.scss

@@ -1,11 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './baseline';
-@import './color';
-@import './elevation';
-@import './global-variables';
-@import './icon-sizes';
-@import './space';
-@import './speed';
-@import './theme';
-@import './typography';

package/scss/style/space.scss

@@ -1,11 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-$iui-xxs: 2px;
-$iui-xs: 4px;
-$iui-s: 8px;
-$iui-sm: 12px;
-$iui-m: 16px;
-$iui-l: 24px;
-$iui-xl: 32px;
-$iui-xxl: 64px;
-$iui-3xl: 96px;

package/scss/style/speed.scss

@@ -1,8 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-/// Animation speed:
-
-$iui-speed-instant: 0s;
-$iui-speed-fast: 0.2s;
-$iui-speed: 0.4s;
-$iui-speed-slow: 0.8s;