@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/scss/style/global.scss

@@ -1,70 +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 './anchor';
-
-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 {
-  @include themed {
-    background-color: t(iui-color-background-2);
-    color: t(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-anchor {
-  @include iui-anchor;
-}
-
-.iui-visually-hidden {
-  @include visually-hidden;
-}
-
-[class*='iui-'],
-[class*='iui-'] * {
-  // Text highlight
-  @include iui-text-selection;
-
-  // Scrollbar
-  @include iui-scrollbar;
-}

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 './theme';
-@import './baseline';
-@import './mixins';
-@import './space';
-@import './typography';
-@import './variables';
-@import './color';
-@import './speed';
-@import './elevation';

package/scss/style/mixins.scss

@@ -1,188 +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 './color';
-
-@mixin no-link {
-  text-decoration: none;
-
-  @include themed {
-    color: t(iui-text-color);
-  }
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    @include themed {
-      color: t(iui-text-color);
-    }
-    text-decoration: none;
-  }
-}
-
-@mixin focus-visible {
-  &:focus-visible {
-    @content;
-  }
-
-  @supports #{'not selector(*:focus-visible)'} {
-    &:focus {
-      @content;
-    }
-  }
-}
-
-@mixin iui-focus($color: var(--iui-color-foreground-primary), $offset: -1px, $thickness: 1px) {
-  @include focus-visible {
-    outline: $thickness solid $color;
-    outline-offset: $offset;
-  }
-}
-
-@mixin iui-reset {
-  margin: 0;
-  padding: 0;
-  border: none;
-  vertical-align: baseline;
-}
-
-@mixin iui-text-selection($status: primary) {
-  &::selection,
-  *::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
-    }
-  }
-}
-
-@mixin iui-scrollbar {
-  @include themed {
-    scrollbar-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4)) transparent;
-    scrollbar-width: thin;
-  }
-
-  &::-webkit-scrollbar {
-    width: $iui-s;
-    height: $iui-s;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    }
-    border-radius: $iui-s * 0.5;
-
-    &:hover {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
-      }
-    }
-  }
-
-  &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
-@mixin iui-line-clamp($lines: 1) {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  @supports (-webkit-line-clamp: 1) {
-    white-space: unset;
-    display: -webkit-box; /* stylelint-disable-line */
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical; /* stylelint-disable-line */
-  }
-}
-
-@mixin iui-blur($opacity: 4) {
-  // Blur fallback
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-#{$opacity - 1}));
-  }
-
-  // With blur
-  @supports (backdrop-filter: $iui-blur-filter) {
-    background-color: rgba(0, 0, 0, var(--iui-opacity-#{$opacity}));
-    backdrop-filter: $iui-blur-filter;
-  }
-}
-
-/// Simulates display: none but keeps the element in DOM tree
-@mixin iui-display-none {
-  opacity: 0;
-  height: 0.1px;
-  width: 0.1px;
-  margin: 0;
-  padding: 0;
-}
-
-/// Visually hides an element but keeps it accessible to screen readers.
-/// Because it applies some potentially invasive styles, use this mixin on a wrapper element for best results.
-/// If it contains a focusable element, make sure to revert/exclude these styles.
-@mixin visually-hidden {
-  clip-path: inset(50%);
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  padding: 0;
-  margin: -1px;
-  border-width: 0;
-}
-
-/// Reverts visually-hidden styles, making it visible again.
-@mixin visually-hidden-revert {
-  clip-path: revert;
-  overflow: visible;
-  position: static;
-  white-space: normal;
-  height: auto;
-  width: auto;
-  padding: 0;
-  margin: 0;
-}
-
-/// Classes for react-transition-group
-/// Used for expand/collapse transitions. Needs height/width to be set in JS.
-@mixin iui-transition-group {
-  $transition-rule: opacity $iui-speed-fast ease-out, width $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
-
-  &.iui-enter {
-    opacity: 0;
-  }
-
-  &.iui-enter-active {
-    opacity: 1;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: $transition-rule;
-    }
-  }
-
-  &.iui-exit {
-    opacity: 1;
-  }
-
-  &.iui-exit-active {
-    opacity: 0;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: $transition-rule;
-    }
-  }
-}
-
-/// Adds the ability to toggle vertical scroll snapping by setting `.iui-scroll-snapping` as a modifier (if used inside a class) or at root level.
-/// @arg $selector - selector to apply `scroll-snap-align: start` on. Defaults to '> *'
-@mixin iui-scroll-snapping($selector: '> *') {
-  #{if(&, '&.iui-scroll-snapping', '.iui-scroll-snapping')} {
-    scroll-snap-type: y mandatory;
-
-    #{$selector} {
-      scroll-snap-align: start none;
-    }
-  }
-}

package/scss/style/ripple.scss

@@ -1,18 +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 './speed';
-
-@mixin iui-ripple($hoverColor, $rippleColor) {
-  background-position: center;
-  transition: background $iui-speed ease-out;
-
-  &:hover {
-    background: $hoverColor radial-gradient(circle, transparent 1%, #{$hoverColor} 1%) center/15000%;
-  }
-
-  &:active {
-    background-color: $rippleColor;
-    background-size: 100%;
-    transition: background $iui-speed-instant;
-  }
-}

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;