@itwin/core-react 3.6.0-dev.7 → 4.0.0-dev.2

package/lib/esm/core-react/style/breakpoints.scss

@@ -1,41 +1,41 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-/* Breakpoints */
-@mixin for-phone-only {
-  @media (max-width: 599px) { @content; }
-}
-
-@mixin for-tablet-portrait-up {
-  @media (min-width: 600px) { @content; }
-}
-
-@mixin for-tablet-portrait-down {
-  @media (max-width: 799px) { @content; }
-}
-
-@mixin for-tablet-landscape-up {
-  @media (min-width: 800px) { @content; }
-}
-
-@mixin for-tablet-landscape-down {
-  @media (max-width: 1099px) { @content; }
-}
-
-@mixin for-desktop-up {
-  @media (min-width: 1100px) { @content; }
-}
-
-@mixin for-small-desktop-down {
-  @media (max-width: 1299px) { @content; }
-}
-
-@mixin for-medium-desktop-up {
-  @media (min-width: 1300px) { @content; }
-}
-
-@mixin for-big-desktop-up {
-  @media (min-width: 1800px) { @content; }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+/* Breakpoints */
+@mixin for-phone-only {
+  @media (max-width: 599px) { @content; }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 600px) { @content; }
+}
+
+@mixin for-tablet-portrait-down {
+  @media (max-width: 799px) { @content; }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 800px) { @content; }
+}
+
+@mixin for-tablet-landscape-down {
+  @media (max-width: 1099px) { @content; }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1100px) { @content; }
+}
+
+@mixin for-small-desktop-down {
+  @media (max-width: 1299px) { @content; }
+}
+
+@mixin for-medium-desktop-up {
+  @media (min-width: 1300px) { @content; }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) { @content; }
+}

package/lib/esm/core-react/style/colors.scss

@@ -1,77 +1,77 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-/// Variables ------------------------------------------------------------------
-
-/// Primary colors:
-
-$uicore-green:                 #56aa1c;
-$uicore-blue:                  #008be1;
-$uicore-gray:                  #9ba5ae;
-$uicore-text-color:            #2a2f34;
-
-/// Other colors:
-
-$uicore-black:                 #000;
-$uicore-white:                 #fff;
-$uicore-yellow:                #ffcf00;
-$uicore-orange:                #ff6600;
-$uicore-red:                   #cc0000;
-$uicore-teal:                  #2b9b7f;
-
-/// Highlights:
-
-$uicore-blue-highlight:        #e5f5fd;
-$uicore-green-highlight:       #eef6e8;
-$uicore-red-highlight:         #fae5e5;
-
-/// Gray:
-
-$uicore-gray-1:                #070809;
-$uicore-gray-3:                #3c434a;
-$uicore-gray-4:                #4d575f;
-$uicore-gray-5:                #677480;
-$uicore-gray-6:                #85929d;
-$uicore-gray-8:                #a6afb7;
-$uicore-gray-9:                #c7ccd1;
-$uicore-gray-a:                #dce0e3;
-$uicore-gray-b:                #eef0f3;
-$uicore-gray-c:                #f8f9fb;
-
-/// Blue:
-
-$uicore-blue-3:                #00426b;
-$uicore-blue-4:                #005a92;
-$uicore-blue-5:                #0073ba;
-$uicore-blue-6:                $uicore-blue;
-$uicore-blue-8:                #58bfff;
-$uicore-blue-a:                #a6ddff;
-
-/// Green:
-
-$uicore-green-3:               #23450b;
-$uicore-green-4:               #346711;
-$uicore-green-5:               #448615;
-
-$uicore-green-new:             #53A21A;
-
-/// Teal:
-
-$uicore-teal-0:                $uicore-green;
-$uicore-teal-1:                #2b9b1b;
-$uicore-teal-2:                #2b9b2f;
-$uicore-teal-3:                #2b9b43;
-$uicore-teal-4:                #2b9b57;
-$uicore-teal-5:                #2b9b6b;
-$uicore-teal-6:                #2b9b7f;
-$uicore-teal-7:                #2b9b93;
-$uicore-teal-8:                #2b9ba7;
-$uicore-teal-9:                #2b9bbb;
-$uicore-teal-a:                #2b9bcf;
-$uicore-teal-b:                #2b9be3;
-$uicore-teal-c:                $uicore-blue-6;
-$uicore-teal-d:                $uicore-blue-5;
-$uicore-teal-e:                $uicore-blue-4;
-$uicore-teal-f:                $uicore-blue-3;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+/// Variables ------------------------------------------------------------------
+
+/// Primary colors:
+
+$uicore-green:                 #56aa1c;
+$uicore-blue:                  #008be1;
+$uicore-gray:                  #9ba5ae;
+$uicore-text-color:            #2a2f34;
+
+/// Other colors:
+
+$uicore-black:                 #000;
+$uicore-white:                 #fff;
+$uicore-yellow:                #ffcf00;
+$uicore-orange:                #ff6600;
+$uicore-red:                   #cc0000;
+$uicore-teal:                  #2b9b7f;
+
+/// Highlights:
+
+$uicore-blue-highlight:        #e5f5fd;
+$uicore-green-highlight:       #eef6e8;
+$uicore-red-highlight:         #fae5e5;
+
+/// Gray:
+
+$uicore-gray-1:                #070809;
+$uicore-gray-3:                #3c434a;
+$uicore-gray-4:                #4d575f;
+$uicore-gray-5:                #677480;
+$uicore-gray-6:                #85929d;
+$uicore-gray-8:                #a6afb7;
+$uicore-gray-9:                #c7ccd1;
+$uicore-gray-a:                #dce0e3;
+$uicore-gray-b:                #eef0f3;
+$uicore-gray-c:                #f8f9fb;
+
+/// Blue:
+
+$uicore-blue-3:                #00426b;
+$uicore-blue-4:                #005a92;
+$uicore-blue-5:                #0073ba;
+$uicore-blue-6:                $uicore-blue;
+$uicore-blue-8:                #58bfff;
+$uicore-blue-a:                #a6ddff;
+
+/// Green:
+
+$uicore-green-3:               #23450b;
+$uicore-green-4:               #346711;
+$uicore-green-5:               #448615;
+
+$uicore-green-new:             #53A21A;
+
+/// Teal:
+
+$uicore-teal-0:                $uicore-green;
+$uicore-teal-1:                #2b9b1b;
+$uicore-teal-2:                #2b9b2f;
+$uicore-teal-3:                #2b9b43;
+$uicore-teal-4:                #2b9b57;
+$uicore-teal-5:                #2b9b6b;
+$uicore-teal-6:                #2b9b7f;
+$uicore-teal-7:                #2b9b93;
+$uicore-teal-8:                #2b9ba7;
+$uicore-teal-9:                #2b9bbb;
+$uicore-teal-a:                #2b9bcf;
+$uicore-teal-b:                #2b9be3;
+$uicore-teal-c:                $uicore-blue-6;
+$uicore-teal-d:                $uicore-blue-5;
+$uicore-teal-e:                $uicore-blue-4;
+$uicore-teal-f:                $uicore-blue-3;

package/lib/esm/core-react/style/data-viz.scss

@@ -1,23 +1,20 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/color";
-
-// @warn "data-viz.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/colors' instead.";
-
-/** iTwin.js Data Visualization Colors */
-
-$buic-dataviz-skyblue:        $iui-color-dataviz-skyblue;
-$buic-dataviz-celery:	        $iui-color-dataviz-celery;
-$buic-dataviz-froly:	        $iui-color-dataviz-froly;
-$buic-dataviz-steelblue:	    $iui-color-dataviz-steelblue;
-$buic-dataviz-sunglow:	      $iui-color-dataviz-sunglow;
-$buic-dataviz-seabuckthorn:	  $iui-color-dataviz-seabuckthorn;
-$buic-dataviz-montecarlo:	    $iui-color-dataviz-montecarlo;
-$buic-dataviz-poloblue:	      $iui-color-dataviz-poloblue;
-$buic-dataviz-bouquet:	      $iui-color-dataviz-bouquet;
-$buic-dataviz-ash:	          $iui-color-dataviz-ash;
-$buic-dataviz-oak:	          $iui-color-dataviz-oak;
-
-// cSpell:ignore dataviz froly seabuckthorn montecarlo poloblue
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+/** iTwin.js Data Visualization Colors */
+
+$buic-dataviz-skyblue:        hsl(204 77% 67%);
+$buic-dataviz-celery:	        hsl(72 51% 56%);
+$buic-dataviz-froly:	        hsl(2 90% 70%);
+$buic-dataviz-steelblue:	    hsl(200 41% 46%);
+$buic-dataviz-sunglow:	      hsl(42 100% 60%);
+$buic-dataviz-seabuckthorn:	  hsl(29 92% 61%);
+$buic-dataviz-montecarlo:	    hsl(176 43% 62%);
+$buic-dataviz-poloblue:	      hsl(211 44% 67%);
+$buic-dataviz-bouquet:	      hsl(305 19% 55%);
+$buic-dataviz-ash:	          hsl(42 15% 75%);
+$buic-dataviz-oak:	          hsl(27 32% 49%);
+
+// cSpell:ignore dataviz froly seabuckthorn montecarlo poloblue

package/lib/esm/core-react/style/index.scss

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./breakpoints";
-@import "./themecolors";
-@import "./colors";
-@import "./mixins";
-@import "./opacity";
-
-// Deprecated
-@import "./data-viz";
-@import "./space";
-@import "./speed";
-@import "./typography";
-@import "./variables";
+/*---------------------------------------------------------------------------------------------
+* 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 "./breakpoints";
+@import "./themecolors";
+@import "./colors";
+@import "./mixins";
+@import "./opacity";
+
+// Deprecated
+@import "./data-viz";
+@import "./space";
+@import "./speed";
+@import "./typography";
+@import "./variables";

package/lib/esm/core-react/style/itwinui-overrides.scss

@@ -1,25 +1,24 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../icons/variables";
-@import "../inputs/variables";
-@import "./themecolors";
-@import "./variables";
-@import "~@itwin/itwinui-css/scss/style/space";
-
-// Override some iTwinUI-css padding and minimums for iTwin.js applications
-
-@mixin small-itwinui-toggle-switch {
-
-  .iui-toggle-switch {
-    padding: 1px 0 !important;
-  }
-
-}
-
-@mixin itwinui-style-overrides {
-
-  @include small-itwinui-toggle-switch;
-
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../icons/variables";
+@import "../inputs/variables";
+@import "./themecolors";
+@import "./variables";
+
+// Override some iTwinUI-css padding and minimums for iTwin.js applications
+
+@mixin small-itwinui-toggle-switch {
+
+  .iui-toggle-switch {
+    padding: 1px 0 !important;
+  }
+
+}
+
+@mixin itwinui-style-overrides {
+
+  @include small-itwinui-toggle-switch;
+
 }

package/lib/esm/core-react/style/mixins.scss

@@ -1,28 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/mixins";
-
-@mixin no-link {
-
-  text-decoration:      none;
-  color:                $buic-text-color;
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-
-    color:              $buic-text-color;
-    text-decoration:    none;
-  }
-}
-
-@mixin firefox-only {
-
-  @supports (-moz-appearance: none) {
-    @content;
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@mixin no-link {
+
+  text-decoration:      none;
+  color:                $buic-text-color;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+
+    color:              $buic-text-color;
+    text-decoration:    none;
+  }
+}
+
+@mixin firefox-only {
+
+  @supports (-moz-appearance: none) {
+    @content;
+  }
+
+}

package/lib/esm/core-react/style/opacity.scss

@@ -1,17 +1,16 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-/// Opacity stops:
-
-$uicore-opacity-1:          var(--iui-opacity-1);
-$uicore-opacity-2:          var(--iui-opacity-2);
-$uicore-opacity-3:          var(--iui-opacity-3);
-$uicore-opacity-4:          var(--iui-opacity-4);
-$uicore-opacity-5:          var(--iui-opacity-5);
-$uicore-opacity-6:          var(--iui-opacity-6);
-
-$uicore-opacity-muted:      $uicore-opacity-3;
-$uicore-opacity-disabled:   $uicore-opacity-4;
-$uicore-opacity-boxshadow:  $uicore-opacity-4;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/// Opacity stops:
+
+$uicore-opacity-1: var(--iui-opacity-1);
+$uicore-opacity-2: var(--iui-opacity-2);
+$uicore-opacity-3: var(--iui-opacity-3);
+$uicore-opacity-4: var(--iui-opacity-4);
+$uicore-opacity-5: var(--iui-opacity-5);
+$uicore-opacity-6: var(--iui-opacity-6);
+
+$uicore-opacity-muted: $uicore-opacity-3;
+$uicore-opacity-disabled: $uicore-opacity-4;
+$uicore-opacity-boxshadow: $uicore-opacity-4;

package/lib/esm/core-react/style/space.scss

@@ -1,17 +1,13 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/space";
-
-// @warn "space.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/space' instead.";
-
-$uicore-xxs:           $iui-xxs;    // 2px
-$uicore-xs:            $iui-xs;     // 4px
-$uicore-s:             $iui-s;      // 8px
-$uicore-sm:            $iui-sm;     // 12px
-$uicore-m:             $iui-m;      // 16px
-$uicore-l:             $iui-l;      // 24px
-$uicore-xl:            $iui-xl;     // 32px
-$uicore-xxl:           $iui-xxl;    // 64px
-$uicore-3xl:           $iui-3xl;    // 96px
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+$uicore-xxs: var(--iui-size-3xs); // 2px
+$uicore-xs: var(--iui-size-2xs); // 4px
+$uicore-s: var(--iui-size-xs); // 8px
+$uicore-sm: var(--iui-size-s); // 12px
+$uicore-m: var(--iui-size-m); // 16px
+$uicore-l: var(--iui-size-l); // 24px
+$uicore-xl: var(--iui-size-xl); // 32px
+$uicore-xxl: var(--iui-size-2xl); // 64px
+$uicore-3xl: var(--iui-size-3xl); // 96px

package/lib/esm/core-react/style/speed.scss

@@ -1,13 +1,12 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/speed";
-
-// @warn "speed.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/space' instead.";
-
-/// Animation speed:
-
-$uicore-speed-fast:   $iui-speed-fast;
-$uicore-speed:        $iui-speed;
-$uicore-speed-slow:   $iui-speed-slow;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+// @warn "speed.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/space' instead.";
+
+/// Animation speed:
+
+$uicore-speed-fast: var(--iui-duration-1);
+$uicore-speed: var(--iui-duration-2);
+$uicore-speed-slow: var(--iui-duration-3);