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

package/scss/style/theme.scss

@@ -1,482 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-
-// LIGHT THEME //
-// Light theme > Background
-$iui-color-background-1--light: hsl(0, 0%, 100%);
-$iui-color-background-2--light: hsl(220, 27%, 98%);
-$iui-color-background-3--light: hsl(216, 17%, 94%);
-$iui-color-background-4--light: hsl(206, 11%, 88%);
-$iui-color-background-5--light: hsl(210, 10%, 80%);
-$iui-color-background-primary--light: hsl(203, 100%, 44%);
-$iui-color-background-positive--light: hsl(95, 72%, 37%);
-$iui-color-background-warning--light: hsl(33, 89%, 51%);
-$iui-color-background-negative--light: hsl(0, 91%, 43%);
-$iui-color-background-disabled--light: $iui-color-background-3--light;
-$iui-color-background-border--light: $iui-color-background-5--light;
-
-// Light theme > Foreground
-$iui-color-foreground-body--light: hsl(0, 0%, 0%);
-$iui-color-foreground-body-invert--light: invert($iui-color-foreground-body--light);
-$iui-color-foreground-accessory--light: hsl(0, 0%, 100%);
-$iui-color-foreground-primary--light: hsl(203, 100%, 44%);
-$iui-color-foreground-positive--light: hsl(95, 72%, 37%);
-$iui-color-foreground-warning--light: hsl(33, 89%, 51%);
-$iui-color-foreground-negative--light: hsl(0, 91%, 43%);
-
-// Light theme > Overlays
-$iui-color-background-1-overlay--light: darken($iui-color-background-1--light, 5%);
-$iui-color-background-primary-overlay--light: darken($iui-color-background-primary--light, 10%);
-$iui-color-background-positive-overlay--light: darken($iui-color-background-positive--light, 10%);
-$iui-color-foreground-primary-overlay--light: darken($iui-color-foreground-primary--light, 10%);
-$iui-color-foreground-positive-overlay--light: darken($iui-color-foreground-positive--light, 10%);
-$iui-color-foreground-warning-overlay--light: darken($iui-color-foreground-warning--light, 10%);
-$iui-color-foreground-negative-overlay--light: darken($iui-color-foreground-negative--light, 10%);
-
-// Light theme > Opacity stops
-$iui-opacity-1--light: 1;
-$iui-opacity-2--light: 0.8;
-$iui-opacity-3--light: 0.6;
-$iui-opacity-4--light: 0.4;
-$iui-opacity-5--light: 0.2;
-$iui-opacity-6--light: 0.1;
-
-// Light theme > Text colors
-$iui-text-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
-$iui-text-color-muted--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
-$iui-text-color-placeholder--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
-
-// Light theme > Icon colors
-$iui-icons-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
-$iui-icons-color-actionable--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
-$iui-icons-color-actionable-hover--light: rgba($iui-color-foreground-body--light, $iui-opacity-1--light);
-$iui-icons-color-actionable-disabled--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
-$iui-icons-color-primary--light: $iui-color-foreground-primary--light;
-$iui-icons-color-positive--light: $iui-color-foreground-positive--light;
-$iui-icons-color-negative--light: $iui-color-foreground-negative--light;
-$iui-icons-color-warning--light: $iui-color-foreground-warning--light;
-
-// LIGHT HIGH CONTRAST THEME //
-// Light high contrast theme > Background
-$iui-color-background-1--light-hc: hsl(200, 12%, 100%);
-$iui-color-background-2--light-hc: hsl(200, 12%, 98%);
-$iui-color-background-3--light-hc: hsl(200, 12%, 94%);
-$iui-color-background-4--light-hc: hsl(200, 12%, 88%);
-$iui-color-background-5--light-hc: hsl(200, 12%, 80%);
-$iui-color-background-primary--light-hc: hsl(200, 100%, 26%);
-$iui-color-background-positive--light-hc: hsl(140, 100%, 19%);
-$iui-color-background-warning--light-hc: hsl(45, 100%, 22%);
-$iui-color-background-negative--light-hc: hsl(0, 100%, 31%);
-$iui-color-background-disabled--light-hc: $iui-color-background-3--light-hc;
-$iui-color-background-border--light-hc: hsl(0 0% 0% / 0.3);
-
-// Light high contrast theme > Foreground
-$iui-color-foreground-body--light-hc: hsl(0, 0%, 0%);
-$iui-color-foreground-body-invert--light-hc: invert($iui-color-foreground-body--light-hc);
-$iui-color-foreground-accessory--light-hc: hsl(0, 0%, 100%);
-$iui-color-foreground-primary--light-hc: hsl(200, 100%, 23%);
-$iui-color-foreground-positive--light-hc: hsl(140, 100%, 16%);
-$iui-color-foreground-warning--light-hc: hsl(45, 100%, 19%);
-$iui-color-foreground-negative--light-hc: hsl(0, 100%, 28%);
-
-// Light high contrast theme > Overlays
-$iui-color-background-1-overlay--light-hc: darken($iui-color-background-1--light-hc, 10%);
-$iui-color-background-primary-overlay--light-hc: darken($iui-color-background-primary--light-hc, 10%);
-$iui-color-background-positive-overlay--light-hc: darken($iui-color-background-positive--light-hc, 10%);
-$iui-color-foreground-primary-overlay--light-hc: darken($iui-color-foreground-primary--light-hc, 10%);
-$iui-color-foreground-positive-overlay--light-hc: darken($iui-color-foreground-positive--light-hc, 10%);
-$iui-color-foreground-warning-overlay--light-hc: darken($iui-color-foreground-warning--light-hc, 10%);
-$iui-color-foreground-negative-overlay--light-hc: darken($iui-color-foreground-negative--light-hc, 10%);
-
-// Light high contrast theme > Opacity stops
-$iui-opacity-1--light-hc: 1;
-$iui-opacity-2--light-hc: 0.86;
-$iui-opacity-3--light-hc: 0.72;
-$iui-opacity-4--light-hc: 0.67;
-$iui-opacity-5--light-hc: 0.3;
-$iui-opacity-6--light-hc: 0.06;
-
-// Light high contrast theme > Text colors
-$iui-text-color--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-2--light-hc);
-$iui-text-color-muted--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
-$iui-text-color-placeholder--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
-
-// Light high contrast theme > Icon colors
-$iui-icons-color--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
-$iui-icons-color-actionable--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-2--light-hc);
-$iui-icons-color-actionable-hover--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-1--light-hc);
-$iui-icons-color-actionable-disabled--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-5--light-hc);
-$iui-icons-color-primary--light-hc: $iui-color-foreground-primary--light-hc;
-$iui-icons-color-positive--light-hc: $iui-color-foreground-positive--light-hc;
-$iui-icons-color-negative--light-hc: $iui-color-foreground-negative--light-hc;
-$iui-icons-color-warning--light-hc: $iui-color-foreground-warning--light-hc;
-
-// DARK THEME //
-// Dark theme > Background
-$iui-color-background-1--dark: hsl(204, 12%, 40%);
-$iui-color-background-2--dark: hsl(202, 12%, 35%);
-$iui-color-background-3--dark: hsl(204, 13%, 31%);
-$iui-color-background-4--dark: hsl(200, 14%, 25%);
-$iui-color-background-5--dark: hsl(200, 14%, 21%);
-$iui-color-background-primary--dark: hsl(203, 100%, 44%);
-$iui-color-background-positive--dark: hsl(95, 72%, 37%);
-$iui-color-background-warning--dark: hsl(33, 89%, 51%);
-$iui-color-background-negative--dark: hsl(0, 91%, 43%);
-$iui-color-background-disabled--dark: $iui-color-background-3--dark;
-$iui-color-background-border--dark: $iui-color-background-5--dark;
-
-// Dark theme > Foreground
-$iui-color-foreground-body--dark: hsl(0, 0%, 100%);
-$iui-color-foreground-body-invert--dark: invert($iui-color-foreground-body--dark);
-$iui-color-foreground-body-invert--dark: hsl(0, 0%, 0%);
-$iui-color-foreground-accessory--dark: hsl(0, 0%, 100%);
-$iui-color-foreground-primary--dark: hsl(203, 80%, 80%);
-$iui-color-foreground-positive--dark: hsl(96, 45%, 78%);
-$iui-color-foreground-warning--dark: hsl(34, 87%, 82%);
-$iui-color-foreground-negative--dark: hsl(0, 69%, 80%);
-
-// Dark theme > Overlays
-$iui-color-background-1-overlay--dark: lighten($iui-color-background-1--dark, 5%);
-$iui-color-background-primary-overlay--dark: lighten($iui-color-background-primary--dark, 5%);
-$iui-color-background-positive-overlay--dark: lighten($iui-color-background-positive--dark, 5%);
-$iui-color-foreground-primary-overlay--dark: lighten($iui-color-foreground-primary--dark, 10%);
-$iui-color-foreground-positive-overlay--dark: lighten($iui-color-foreground-positive--dark, 10%);
-$iui-color-foreground-warning-overlay--dark: lighten($iui-color-foreground-warning--dark, 10%);
-$iui-color-foreground-negative-overlay--dark: lighten($iui-color-foreground-negative--dark, 10%);
-
-// Dark theme > Opacity stops
-$iui-opacity-1--dark: 1;
-$iui-opacity-2--dark: 0.85;
-$iui-opacity-3--dark: 0.65;
-$iui-opacity-4--dark: 0.45;
-$iui-opacity-5--dark: 0.25;
-$iui-opacity-6--dark: 0.1;
-
-// Dark theme > Text colors
-$iui-text-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
-$iui-text-color-muted--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
-$iui-text-color-placeholder--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
-
-// Dark theme > Icon colors
-$iui-icons-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
-$iui-icons-color-actionable--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
-$iui-icons-color-actionable-hover--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-1--dark);
-$iui-icons-color-actionable-disabled--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
-$iui-icons-color-primary--dark: $iui-color-foreground-primary--dark;
-$iui-icons-color-positive--dark: $iui-color-foreground-positive--dark;
-$iui-icons-color-negative--dark: $iui-color-foreground-negative--dark;
-$iui-icons-color-warning--dark: $iui-color-foreground-warning--dark;
-
-// DARK HIGH CONTRAST THEME //
-// Dark high contrast theme > Background
-$iui-color-background-1--dark-hc: hsl(200, 12%, 20%);
-$iui-color-background-2--dark-hc: hsl(200, 12%, 15%);
-$iui-color-background-3--dark-hc: hsl(200, 12%, 10%);
-$iui-color-background-4--dark-hc: hsl(200, 12%, 25%);
-$iui-color-background-5--dark-hc: hsl(200, 12%, 30%);
-$iui-color-background-primary--dark-hc: hsl(200, 100%, 26%);
-$iui-color-background-positive--dark-hc: hsl(140, 100%, 19%);
-$iui-color-background-warning--dark-hc: hsl(45, 100%, 22%);
-$iui-color-background-negative--dark-hc: hsl(0, 100%, 31%);
-$iui-color-background-disabled--dark-hc: $iui-color-background-4--dark-hc;
-$iui-color-background-border--dark-hc: hsl(0 0% 100% / 0.34);
-
-// Dark high contrast theme > Foreground
-$iui-color-foreground-body--dark-hc: hsl(0, 0%, 100%);
-$iui-color-foreground-body-invert--dark-hc: invert($iui-color-foreground-body--dark-hc);
-$iui-color-foreground-accessory--dark-hc: hsl(0, 0%, 100%);
-$iui-color-foreground-primary--dark-hc: hsl(200, 100%, 79%);
-$iui-color-foreground-positive--dark-hc: hsl(140, 100%, 72%);
-$iui-color-foreground-warning--dark-hc: hsl(45, 100%, 75%);
-$iui-color-foreground-negative--dark-hc: hsl(0, 100%, 88%);
-
-// Dark high contrast theme > Overlays
-$iui-color-background-1-overlay--dark-hc: lighten($iui-color-background-1--dark-hc, 10%);
-$iui-color-background-primary-overlay--dark-hc: lighten($iui-color-background-primary--dark-hc, 10%);
-$iui-color-background-positive-overlay--dark-hc: lighten($iui-color-background-positive--dark-hc, 10%);
-$iui-color-foreground-primary-overlay--dark-hc: lighten($iui-color-foreground-primary--dark-hc, 10%);
-$iui-color-foreground-positive-overlay--dark-hc: lighten($iui-color-foreground-positive--dark-hc, 10%);
-$iui-color-foreground-warning-overlay--dark-hc: lighten($iui-color-foreground-warning--dark-hc, 10%);
-$iui-color-foreground-negative-overlay--dark-hc: lighten($iui-color-foreground-negative--dark-hc, 10%);
-
-// Dark high contrast theme > Opacity stops
-$iui-opacity-1--dark-hc: 1;
-$iui-opacity-2--dark-hc: 0.94;
-$iui-opacity-3--dark-hc: 0.88;
-$iui-opacity-4--dark-hc: 0.76;
-$iui-opacity-5--dark-hc: 0.34;
-$iui-opacity-6--dark-hc: 0.07;
-
-// Dark high contrast theme > Text colors
-$iui-text-color--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-2--dark-hc);
-$iui-text-color-muted--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-4--dark-hc);
-$iui-text-color-placeholder--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-5--dark-hc);
-
-// Dark high contrast theme > Icon colors
-$iui-icons-color--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-4--dark-hc);
-$iui-icons-color-actionable--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-2--dark-hc);
-$iui-icons-color-actionable-hover--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-1--dark-hc);
-$iui-icons-color-actionable-disabled--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-5--dark-hc);
-$iui-icons-color-primary--dark-hc: $iui-color-foreground-primary--dark-hc;
-$iui-icons-color-positive--dark-hc: $iui-color-foreground-positive--dark-hc;
-$iui-icons-color-warning--dark-hc: $iui-color-foreground-warning--dark-hc;
-$iui-icons-color-negative--dark-hc: $iui-color-foreground-negative--dark-hc;
-
-// Theme values
-$themes: (
-  light: (
-    iui-color-background-1: $iui-color-background-1--light,
-    iui-color-background-2: $iui-color-background-2--light,
-    iui-color-background-3: $iui-color-background-3--light,
-    iui-color-background-4: $iui-color-background-4--light,
-    iui-color-background-5: $iui-color-background-5--light,
-    iui-color-background-primary: $iui-color-background-primary--light,
-    iui-color-background-positive: $iui-color-background-positive--light,
-    iui-color-background-warning: $iui-color-background-warning--light,
-    iui-color-background-negative: $iui-color-background-negative--light,
-    iui-color-background-disabled: $iui-color-background-disabled--light,
-    iui-color-background-border: $iui-color-background-border--light,
-    iui-color-foreground-body: $iui-color-foreground-body--light,
-    iui-color-foreground-body-invert: $iui-color-foreground-body-invert--light,
-    iui-color-foreground-accessory: $iui-color-foreground-accessory--light,
-    iui-color-foreground-primary: $iui-color-foreground-primary--light,
-    iui-color-foreground-positive: $iui-color-foreground-positive--light,
-    iui-color-foreground-warning: $iui-color-foreground-warning--light,
-    iui-color-foreground-negative: $iui-color-foreground-negative--light,
-    iui-color-background-1-overlay: $iui-color-background-1-overlay--light,
-    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light,
-    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light,
-    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--light,
-    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--light,
-    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--light,
-    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--light,
-    iui-opacity-1: $iui-opacity-1--light,
-    iui-opacity-2: $iui-opacity-2--light,
-    iui-opacity-3: $iui-opacity-3--light,
-    iui-opacity-4: $iui-opacity-4--light,
-    iui-opacity-5: $iui-opacity-5--light,
-    iui-opacity-6: $iui-opacity-6--light,
-    iui-text-color: $iui-text-color--light,
-    iui-text-color-muted: $iui-text-color-muted--light,
-    iui-text-color-placeholder: $iui-text-color-placeholder--light,
-    iui-icons-color: $iui-icons-color--light,
-    iui-icons-color-actionable: $iui-icons-color-actionable--light,
-    iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light,
-    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light,
-    iui-icons-color-primary: $iui-icons-color-primary--light,
-    iui-icons-color-positive: $iui-icons-color-positive--light,
-    iui-icons-color-warning: $iui-icons-color-warning--light,
-    iui-icons-color-negative: $iui-icons-color-negative--light,
-  ),
-  dark: (
-    iui-color-background-1: $iui-color-background-1--dark,
-    iui-color-background-2: $iui-color-background-2--dark,
-    iui-color-background-3: $iui-color-background-3--dark,
-    iui-color-background-4: $iui-color-background-4--dark,
-    iui-color-background-5: $iui-color-background-5--dark,
-    iui-color-background-primary: $iui-color-background-primary--dark,
-    iui-color-background-positive: $iui-color-background-positive--dark,
-    iui-color-background-warning: $iui-color-background-warning--dark,
-    iui-color-background-negative: $iui-color-background-negative--dark,
-    iui-color-background-disabled: $iui-color-background-disabled--dark,
-    iui-color-background-border: $iui-color-background-border--dark,
-    iui-color-foreground-body: $iui-color-foreground-body--dark,
-    iui-color-foreground-body-invert: $iui-color-foreground-body-invert--dark,
-    iui-color-foreground-accessory: $iui-color-foreground-accessory--dark,
-    iui-color-foreground-primary: $iui-color-foreground-primary--dark,
-    iui-color-foreground-positive: $iui-color-foreground-positive--dark,
-    iui-color-foreground-warning: $iui-color-foreground-warning--dark,
-    iui-color-foreground-negative: $iui-color-foreground-negative--dark,
-    iui-color-background-1-overlay: $iui-color-background-1-overlay--dark,
-    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark,
-    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark,
-    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--dark,
-    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--dark,
-    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--dark,
-    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--dark,
-    iui-opacity-1: $iui-opacity-1--dark,
-    iui-opacity-2: $iui-opacity-2--dark,
-    iui-opacity-3: $iui-opacity-3--dark,
-    iui-opacity-4: $iui-opacity-4--dark,
-    iui-opacity-5: $iui-opacity-5--dark,
-    iui-opacity-6: $iui-opacity-6--dark,
-    iui-text-color: $iui-text-color--dark,
-    iui-text-color-muted: $iui-text-color-muted--dark,
-    iui-text-color-placeholder: $iui-text-color-placeholder--dark,
-    iui-icons-color: $iui-icons-color--dark,
-    iui-icons-color-actionable: $iui-icons-color-actionable--dark,
-    iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark,
-    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark,
-    iui-icons-color-primary: $iui-icons-color-primary--dark,
-    iui-icons-color-positive: $iui-icons-color-positive--dark,
-    iui-icons-color-warning: $iui-icons-color-warning--dark,
-    iui-icons-color-negative: $iui-icons-color-negative--dark,
-  ),
-  dark-hc: (
-    iui-color-background-1: $iui-color-background-1--dark-hc,
-    iui-color-background-2: $iui-color-background-2--dark-hc,
-    iui-color-background-3: $iui-color-background-3--dark-hc,
-    iui-color-background-4: $iui-color-background-4--dark-hc,
-    iui-color-background-5: $iui-color-background-5--dark-hc,
-    iui-color-background-primary: $iui-color-background-primary--dark-hc,
-    iui-color-background-positive: $iui-color-background-positive--dark-hc,
-    iui-color-background-warning: $iui-color-background-warning--dark-hc,
-    iui-color-background-negative: $iui-color-background-negative--dark-hc,
-    iui-color-background-disabled: $iui-color-background-disabled--dark-hc,
-    iui-color-background-border: $iui-color-background-border--dark-hc,
-    iui-color-foreground-body: $iui-color-foreground-body--dark-hc,
-    iui-color-foreground-accessory: $iui-color-foreground-accessory--dark-hc,
-    iui-color-foreground-primary: $iui-color-foreground-primary--dark-hc,
-    iui-color-foreground-positive: $iui-color-foreground-positive--dark-hc,
-    iui-color-foreground-warning: $iui-color-foreground-warning--dark-hc,
-    iui-color-foreground-negative: $iui-color-foreground-negative--dark-hc,
-    iui-color-background-1-overlay: $iui-color-background-1-overlay--dark-hc,
-    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark-hc,
-    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark-hc,
-    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--dark-hc,
-    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--dark-hc,
-    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--dark-hc,
-    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--dark-hc,
-    iui-opacity-1: $iui-opacity-1--dark-hc,
-    iui-opacity-2: $iui-opacity-2--dark-hc,
-    iui-opacity-3: $iui-opacity-3--dark-hc,
-    iui-opacity-4: $iui-opacity-4--dark-hc,
-    iui-opacity-5: $iui-opacity-5--dark-hc,
-    iui-opacity-6: $iui-opacity-6--dark-hc,
-    iui-text-color: $iui-text-color--dark-hc,
-    iui-text-color-muted: $iui-text-color-muted--dark-hc,
-    iui-text-color-placeholder: $iui-text-color-placeholder--dark-hc,
-    iui-icons-color: $iui-icons-color--dark-hc,
-    iui-icons-color-actionable: $iui-icons-color-actionable--dark-hc,
-    iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark-hc,
-    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark-hc,
-    iui-icons-color-primary: $iui-icons-color-primary--dark-hc,
-    iui-icons-color-positive: $iui-icons-color-positive--dark-hc,
-    iui-icons-color-warning: $iui-icons-color-warning--dark-hc,
-    iui-icons-color-negative: $iui-icons-color-negative--dark-hc,
-  ),
-  light-hc: (
-    iui-color-background-1: $iui-color-background-1--light-hc,
-    iui-color-background-2: $iui-color-background-2--light-hc,
-    iui-color-background-3: $iui-color-background-3--light-hc,
-    iui-color-background-4: $iui-color-background-4--light-hc,
-    iui-color-background-5: $iui-color-background-5--light-hc,
-    iui-color-background-primary: $iui-color-background-primary--light-hc,
-    iui-color-background-positive: $iui-color-background-positive--light-hc,
-    iui-color-background-warning: $iui-color-background-warning--light-hc,
-    iui-color-background-negative: $iui-color-background-negative--light-hc,
-    iui-color-background-disabled: $iui-color-background-disabled--light-hc,
-    iui-color-background-border: $iui-color-background-border--light-hc,
-    iui-color-foreground-body: $iui-color-foreground-body--light-hc,
-    iui-color-foreground-accessory: $iui-color-foreground-accessory--light-hc,
-    iui-color-foreground-primary: $iui-color-foreground-primary--light-hc,
-    iui-color-foreground-positive: $iui-color-foreground-positive--light-hc,
-    iui-color-foreground-warning: $iui-color-foreground-warning--light-hc,
-    iui-color-foreground-negative: $iui-color-foreground-negative--light-hc,
-    iui-color-background-1-overlay: $iui-color-background-1-overlay--light-hc,
-    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light-hc,
-    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light-hc,
-    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--light-hc,
-    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--light-hc,
-    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--light-hc,
-    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--light-hc,
-    iui-opacity-1: $iui-opacity-1--light-hc,
-    iui-opacity-2: $iui-opacity-2--light-hc,
-    iui-opacity-3: $iui-opacity-3--light-hc,
-    iui-opacity-4: $iui-opacity-4--light-hc,
-    iui-opacity-5: $iui-opacity-5--light-hc,
-    iui-opacity-6: $iui-opacity-6--light-hc,
-    iui-text-color: $iui-text-color--light-hc,
-    iui-text-color-muted: $iui-text-color-muted--light-hc,
-    iui-text-color-placeholder: $iui-text-color-placeholder--light-hc,
-    iui-icons-color: $iui-icons-color--light-hc,
-    iui-icons-color-actionable: $iui-icons-color-actionable--light-hc,
-    iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light-hc,
-    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light-hc,
-    iui-icons-color-primary: $iui-icons-color-primary--light-hc,
-    iui-icons-color-positive: $iui-icons-color-positive--light-hc,
-    iui-icons-color-warning: $iui-icons-color-warning--light-hc,
-    iui-icons-color-negative: $iui-icons-color-negative--light-hc,
-  ),
-);
-
-// Overrides of $themes used when creating CSS variables
-$cssVariables: (
-  iui-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
-  iui-text-color-muted: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
-  iui-text-color-placeholder: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
-  iui-icons-color-primary: var(--iui-color-foreground-primary),
-  iui-icons-color-positive: var(--iui-color-foreground-positive),
-  iui-icons-color-warning: var(--iui-color-foreground-warning),
-  iui-icons-color-negative: var(--iui-color-foreground-negative),
-  iui-icons-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
-  iui-icons-color-actionable: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
-  iui-icons-color-actionable-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)),
-  iui-icons-color-actionable-disabled: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
-);
-
-@function getfallbackvars() {
-  $theme: map-get($themes, light);
-
-  @each $var, $value in $theme {
-    @if (type-of($value) == color) {
-      $theme: map-merge($theme, (#{$var}-rgb: $value));
-    }
-  }
-
-  @return $theme;
-}
-
-$fallbackvars: getfallbackvars();
-
-@function hextorgb($hex) {
-  @return red($hex), green($hex), blue($hex);
-}
-
-@mixin theme-variables($theme) {
-  $variableList: map-get($themes, $theme);
-
-  @each $key, $value in $variableList {
-    @if (map-has-key($cssVariables, $key)) {
-      $cssVarValue: map-get($cssVariables, $key);
-
-      --#{$key}: #{$cssVarValue};
-    } @else if (type-of($value) == color) {
-      @if alpha($value) < 1 {
-        --#{$key}: #{$value};
-      } @else {
-        $rgbVal: hextorgb($value);
-
-        --#{$key}-rgb: #{$rgbVal};
-        --#{$key}: rgb(var(--#{$key}-rgb));
-      }
-    } @else {
-      --#{$key}: #{$value};
-    }
-  }
-}
-
-$fallback: null;
-
-//  Adds a CSS variable with a fallback value.
-//
-//  Usage example:
-//  @include themed {
-//    color: rgba(t(iui-color-background-1-rgb), t(iui-opacity-4));
-//    background-color: t(iui-color-background-2);
-//  }
-@mixin themed($property: null, $var: null) {
-  $fallback: true !global;
-  @content;
-  $fallback: false !global;
-  @content;
-}
-
-// Returns a CSS variable or a fallback value. Can only be used in a `themed` mixin content.
-@function t($var) {
-  @if ($fallback) {
-    @return map-get($fallbackvars, $var);
-  }
-
-  @return var(--#{unquote($var)});
-}

package/scss/style/typography.scss

@@ -1,54 +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 './theme';
-
-/// Constants ------------------------------------------------------------------
-
-$iui-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-$iui-sans: 'Open Sans';
-$iui-monospace: ui-monospace, Menlo, 'Segoe UI Mono', Consolas, 'Roboto Mono', 'Courier New', monospace;
-
-$iui-font-family: $iui-sans, $iui-sans-fallback;
-
-$iui-font-size: 14px;
-$iui-font-size-small: 12px;
-$iui-font-size-leading: 16px;
-$iui-font-size-subheading: 18px;
-$iui-font-size-title: 24px;
-$iui-font-size-headline: 32px;
-
-$iui-cap-size: 10px;
-$iui-cap-size-small: 9px;
-$iui-cap-size-leading: 12px;
-$iui-cap-size-subheading: 13px;
-$iui-cap-size-title: 17px;
-$iui-cap-size-headline: 23px;
-
-$iui-font-weight-light: 300;
-$iui-font-weight-normal: 400;
-$iui-font-weight-semibold: 600;
-$iui-font-weight-bold: 700;
-
-/// Font loading helpers -------------------------------------------------------
-/// See: https://www.zachleat.com/web/comprehensive-webfonts
-
-$iui-font-loaded-class: null !default;
-
-@mixin iui-font-family {
-  @if $iui-font-loaded-class {
-    font-family: $iui-sans-fallback;
-
-    &.#{ $iui-font-loaded-class } {
-      font-family: $iui-font-family;
-    }
-
-    @at-root {
-      body.#{ $iui-font-loaded-class } & {
-        font-family: $iui-font-family;
-      }
-    }
-  } @else {
-    font-family: $iui-font-family;
-  }
-}

package/scss/style/variables.scss

@@ -1,21 +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/variables';
-
-$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

package/scss/surface/classes.scss

@@ -1,7 +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-surface {
-  @include iui-surface;
-}

package/scss/surface/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 './surface';

package/scss/surface/surface.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 '../style/index';
-
-@mixin iui-surface($background-color: var(--iui-color-background-1), $border-radius: 0, $elevation: $iui-elevation-2) {
-  --iui-surface-background-color: #{$background-color};
-  --iui-surface-border-radius: #{$border-radius};
-  --iui-surface-elevation: #{$elevation};
-
-  background-color: var(--iui-surface-background-color);
-  border-radius: var(--iui-surface-border-radius);
-  box-shadow: var(--iui-surface-elevation);
-  box-sizing: border-box;
-  color: var(--iui-text-color);
-  @media (forced-colors: active) {
-    border: 1px solid transparent;
-  }
-}

package/scss/table/classes.scss

@@ -1,63 +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-table {
-  @include iui-table;
-
-  &.iui-condensed {
-    @include iui-table-condensed;
-  }
-
-  &.iui-extra-condensed {
-    @include iui-table-extra-condensed;
-  }
-}
-
-.iui-table-header-wrapper {
-  @include iui-table-header-wrapper;
-}
-
-.iui-table-header {
-  @include iui-table-header;
-}
-
-.iui-table-header-actions-container {
-  @include iui-table-header-actions-container;
-}
-
-.iui-table-body {
-  @include iui-table-body;
-}
-
-.iui-cell {
-  @include iui-table-cell;
-}
-
-.iui-cell-shadow-left {
-  @include iui-table-cell-shadow-left;
-}
-
-.iui-cell-shadow-right {
-  @include iui-table-cell-shadow-right;
-}
-
-.iui-paginator {
-  @include iui-paginator;
-}
-
-.iui-paginator-ellipsis {
-  @include iui-paginator-ellipsis;
-}
-
-.iui-paginator-pages-group {
-  @include iui-paginator-pages-group;
-}
-
-.iui-paginator-page-button {
-  @include iui-paginator-page-button;
-}
-
-.iui-column-filter {
-  @include iui-column-filter;
-}