@itwin/core-react 4.0.0-dev.9 → 4.0.0

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/index.scss

@@ -1,17 +1,10 @@
-/*---------------------------------------------------------------------------------------------
-* 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";

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

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+* 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:                var(--iui-color-text);
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+
+    color:              var(--iui-color-text);
+    text-decoration:    none;
+  }
+}
+
+@mixin firefox-only {
+
+  @supports (-moz-appearance: none) {
+    @content;
+  }
+
+}

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

@@ -1,16 +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/themecolors.scss

@@ -1,129 +1,123 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-// cspell:ignore scrollbar titlebar toolbutton outoffocus boxshadow mediumgray
-
-$buic-background-1-rgb:                   var(--buic-background-1-rgb);
-$buic-background-2-rgb:                   var(--buic-background-2-rgb);
-$buic-background-3-rgb:                   var(--buic-background-3-rgb);
-$buic-background-4-rgb:                   var(--buic-background-4-rgb);
-$buic-background-5-rgb:                   var(--buic-background-5-rgb);
-
-$buic-background-1:                       var(--buic-background-1);
-$buic-background-2:                       var(--buic-background-2);
-$buic-background-3:                       var(--buic-background-3);
-$buic-background-4:                       var(--buic-background-4);
-$buic-background-5:                       var(--buic-background-5);
-
-/* Backgrounds and strokes */
-$buic-background-primary:                 var(--buic-background-primary);
-$buic-background-scrollbar:               var(--buic-background-scrollbar);
-$buic-background-scrollbar-hover:         var(--buic-background-scrollbar-hover);
-
-$buic-background-titlebar:                var(--buic-background-titlebar);
-$buic-background-dialog-stroke:           var(--buic-background-dialog-stroke);
-$buic-background-widget-stroke:           var(--buic-background-widget-stroke);
-$buic-background-widget-panel:            var(--buic-background-widget-panel);
-$buic-background-panel-stroke:            var(--buic-background-panel-stroke);
-$buic-background-tooltip:                 var(--buic-background-tooltip);
-$buic-background-statusbar:               var(--buic-background-statusbar);
-$buic-background-control-stroke:          var(--buic-background-control-stroke);
-$buic-background-toolbutton-stroke:       var(--buic-background-toolbutton-stroke);
-
-$buic-background-titlebar-outoffocus:     var(--buic-background-titlebar-outoffocus);
-$buic-background-divider:                 var(--buic-background-divider);
-$buic-background-widget-element-stroke:   var(--buic-background-widget-element-stroke);
-$buic-background-control-disabled:        var(--buic-background-control-disabled);
-$buic-background-table-header:            var(--buic-background-table-header);
-$buic-background-control-stroke-disabled: var(--buic-background-control-stroke-disabled);
-
-$buic-background-tab-inactive:            var(--buic-background-tab-inactive);
-$buic-background-toolbutton-inactive:     var(--buic-background-toolbutton-inactive);
-$buic-background-context-menu:            var(--buic-background-context-menu);
-$buic-background-panel:                   var(--buic-background-panel);
-$buic-background-placeholder:             var(--buic-background-placeholder);
-$buic-background-striped_row:             var(--buic-background-striped_row);
-
-$buic-background-tab-active:              var(--buic-background-tab-active);
-$buic-background-dialog:                  var(--buic-background-dialog);
-$buic-background-widget:                  var(--buic-background-widget);
-$buic-background-window:                  var(--buic-background-window);
-$buic-background-toolbar:                 var(--buic-background-toolbar);
-
-$buic-background-card:                    var(--buic-background-card);
-$buic-background-control:                 var(--buic-background-control);
-
-$buic-background-focus-overlay:           var(--buic-background-focus-overlay);
-$buic-background-hover-overlay:           var(--buic-background-hover-overlay);
-$buic-background-active-overlay:          var(--buic-background-active-overlay);
-$buic-background-pressed-overlay:         var(--buic-background-pressed-overlay);
-
-/** Text and icons */
-$buic-foreground-body-rgb:                var(--buic-foreground-body-rgb);
-$buic-foreground-body-reverse-rgb:        var(--buic-foreground-body-reverse-rgb);
-
-$buic-foreground-body:                    var(--buic-foreground-body);
-$buic-foreground-body-reverse:            var(--buic-foreground-body-reverse);
-$buic-foreground-disabled:                var(--buic-foreground-disabled);
-$buic-foreground-muted:                   var(--buic-foreground-muted);
-$buic-foreground-activehover:             var(--buic-foreground-activehover);
-
-$buic-text-color:                         var(--buic-foreground-body);          // 0.85 opacity
-$buic-text-color-disabled:                var(--buic-foreground-disabled);      // 0.45 opacity (Note: 0.25 is too much)
-$buic-text-color-muted:                   var(--buic-foreground-muted);         // 0.65 opacity
-$buic-text-color-reverse:                 var(--buic-foreground-body-reverse);  // 0.85 opacity
-$buic-text-color-hover:                   var(--buic-foreground-activehover);   // 1.00 opacity
-$buic-text-color-highlight:               var(--buic-foreground-primary);       // themed
-
-$buic-icon-color:                         var(--buic-foreground-body);
-$buic-icon-color-disabled:                var(--buic-foreground-disabled);
-$buic-icon-color-reverse:                 var(--buic-foreground-body-reverse);
-
-$buic-background-editable:                var(--buic-background-editable);
-$buic-row-selection:                      var(--buic-row-selection);
-$buic-row-hover:                          var(--buic-row-hover);
-
-$buic-button-gradient1:                   var(--buic-button-gradient1);
-$buic-button-gradient2:                   var(--buic-button-gradient2);
-
-$buic-foreground-focus-border:            var(--buic-foreground-focus-border);
-$buic-inputs-border:                      var(--buic-inputs-border);
-$buic-focus-boxshadow:                    var(--buic-focus-boxshadow);
-$buic-inputs-boxshadow:                   var(--buic-inputs-boxshadow);
-$buic-popup-boxshadow:                    var(--buic-popup-boxshadow);
-
-/** Themed colors */
-$buic-foreground-accessory:               var(--buic-foreground-accessory);
-$buic-foreground-primary-rgb:             var(--buic-foreground-primary-rgb);
-$buic-foreground-primary:                 var(--buic-foreground-primary);
-$buic-foreground-primary-tone:            var(--buic-foreground-primary-tone);
-$buic-foreground-positive:                var(--buic-foreground-positive);
-$buic-foreground-positive-rgb:            var(--buic-foreground-positive-rgb);
-$buic-foreground-success:                 var(--buic-foreground-positive);
-$buic-foreground-negative:                var(--buic-foreground-negative);
-$buic-foreground-negative-rgb:            var(--buic-foreground-negative-rgb);
-$buic-foreground-alert:                   var(--buic-foreground-negative);
-$buic-foreground-error:                   var(--buic-foreground-negative);
-$buic-foreground-warning:                 var(--buic-foreground-warning);
-$buic-foreground-warning-rgb:             var(--buic-foreground-warning-rgb);
-$buic-foreground-focus:                   var(--buic-foreground-focus);
-
-/** Static colors */
-// NEEDSWORK - Need to deprecate
-$buic-accessory-hollow:                   var(--buic-accessory-hollow);
-$buic-accessory-primary:                  var(--buic-accessory-primary);
-$buic-accessory-success:                  var(--buic-accessory-success);
-$buic-accessory-alert:                    var(--buic-accessory-alert);
-$buic-accessory-warning:                  var(--buic-accessory-warning);
-$buic-accessory-primary-tint:             var(--buic-accessory-primary-tint);
-$buic-accessory-success-tint:             var(--buic-accessory-success-tint);
-$buic-accessory-alert-tint:               var(--buic-accessory-alert-tint);
-$buic-accessory-warning-tint:             var(--buic-accessory-warning-tint);
-
-/** Widget Opacity */
-$buic-widget-opacity:                     var(--buic-widget-opacity, 0.90);
-
-/** Toolbar Opacity */
-$buic-toolbar-opacity:                     var(--buic-toolbar-opacity, 0.50);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+// cspell:ignore scrollbar titlebar toolbutton outoffocus boxshadow mediumgray
+
+$buic-background-1:                       var(--buic-background-1);
+$buic-background-2:                       var(--buic-background-2);
+$buic-background-3:                       var(--buic-background-3);
+$buic-background-4:                       var(--buic-background-4);
+$buic-background-5:                       var(--buic-background-5);
+
+/* Backgrounds and strokes */
+$buic-background-primary:                 var(--buic-background-primary);
+$buic-background-scrollbar:               var(--buic-background-scrollbar);
+$buic-background-scrollbar-hover:         var(--buic-background-scrollbar-hover);
+
+$buic-background-titlebar:                var(--buic-background-titlebar);
+$buic-background-dialog-stroke:           var(--buic-background-dialog-stroke);
+$buic-background-widget-stroke:           var(--buic-background-widget-stroke);
+$buic-background-widget-panel:            var(--buic-background-widget-panel);
+$buic-background-panel-stroke:            var(--buic-background-panel-stroke);
+$buic-background-tooltip:                 var(--buic-background-tooltip);
+$buic-background-statusbar:               var(--buic-background-statusbar);
+$buic-background-control-stroke:          var(--buic-background-control-stroke);
+$buic-background-toolbutton-stroke:       var(--buic-background-toolbutton-stroke);
+
+$buic-background-titlebar-outoffocus:     var(--buic-background-titlebar-outoffocus);
+$buic-background-divider:                 var(--buic-background-divider);
+$buic-background-widget-element-stroke:   var(--buic-background-widget-element-stroke);
+$buic-background-control-disabled:        var(--buic-background-control-disabled);
+$buic-background-table-header:            var(--buic-background-table-header);
+$buic-background-control-stroke-disabled: var(--buic-background-control-stroke-disabled);
+
+$buic-background-tab-inactive:            var(--buic-background-tab-inactive);
+$buic-background-toolbutton-inactive:     var(--buic-background-toolbutton-inactive);
+$buic-background-context-menu:            var(--buic-background-context-menu);
+$buic-background-panel:                   var(--buic-background-panel);
+$buic-background-placeholder:             var(--buic-background-placeholder);
+$buic-background-striped_row:             var(--buic-background-striped_row);
+
+$buic-background-tab-active:              var(--buic-background-tab-active);
+$buic-background-dialog:                  var(--buic-background-dialog);
+$buic-background-widget:                  var(--buic-background-widget);
+$buic-background-window:                  var(--buic-background-window);
+$buic-background-toolbar:                 var(--buic-background-toolbar);
+
+$buic-background-card:                    var(--buic-background-card);
+$buic-background-control:                 var(--buic-background-control);
+
+$buic-background-focus-overlay:           var(--buic-background-focus-overlay);
+$buic-background-hover-overlay:           var(--buic-background-hover-overlay);
+$buic-background-active-overlay:          var(--buic-background-active-overlay);
+$buic-background-pressed-overlay:         var(--buic-background-pressed-overlay);
+
+/** Text and icons */
+$buic-foreground-body-rgb:                var(--buic-foreground-body-rgb);
+$buic-foreground-body-reverse-rgb:        var(--buic-foreground-body-reverse-rgb);
+
+$buic-foreground-body:                    var(--buic-foreground-body);
+$buic-foreground-body-reverse:            var(--buic-foreground-body-reverse);
+$buic-foreground-disabled:                var(--buic-foreground-disabled);
+$buic-foreground-muted:                   var(--buic-foreground-muted);
+$buic-foreground-activehover:             var(--buic-foreground-activehover);
+
+$buic-text-color:                         var(--buic-foreground-body);          // 0.85 opacity
+$buic-text-color-disabled:                var(--buic-foreground-disabled);      // 0.45 opacity (Note: 0.25 is too much)
+$buic-text-color-muted:                   var(--buic-foreground-muted);         // 0.65 opacity
+$buic-text-color-reverse:                 var(--buic-foreground-body-reverse);  // 0.85 opacity
+$buic-text-color-hover:                   var(--buic-foreground-activehover);   // 1.00 opacity
+$buic-text-color-highlight:               var(--buic-foreground-primary);       // themed
+
+$buic-icon-color:                         var(--buic-foreground-body);
+$buic-icon-color-disabled:                var(--buic-foreground-disabled);
+$buic-icon-color-reverse:                 var(--buic-foreground-body-reverse);
+
+$buic-background-editable:                var(--buic-background-editable);
+$buic-row-selection:                      var(--buic-row-selection);
+$buic-row-hover:                          var(--buic-row-hover);
+
+$buic-button-gradient1:                   var(--buic-button-gradient1);
+$buic-button-gradient2:                   var(--buic-button-gradient2);
+
+$buic-foreground-focus-border:            var(--buic-foreground-focus-border);
+$buic-inputs-border:                      var(--buic-inputs-border);
+$buic-focus-boxshadow:                    var(--buic-focus-boxshadow);
+$buic-inputs-boxshadow:                   var(--buic-inputs-boxshadow);
+$buic-popup-boxshadow:                    var(--buic-popup-boxshadow);
+
+/** Themed colors */
+$buic-foreground-accessory:               var(--buic-foreground-accessory);
+$buic-foreground-primary-rgb:             var(--buic-foreground-primary-rgb);
+$buic-foreground-primary:                 var(--buic-foreground-primary);
+$buic-foreground-primary-tone:            var(--buic-foreground-primary-tone);
+$buic-foreground-positive:                var(--buic-foreground-positive);
+$buic-foreground-positive-rgb:            var(--buic-foreground-positive-rgb);
+$buic-foreground-success:                 var(--buic-foreground-positive);
+$buic-foreground-negative:                var(--buic-foreground-negative);
+$buic-foreground-negative-rgb:            var(--buic-foreground-negative-rgb);
+$buic-foreground-alert:                   var(--buic-foreground-negative);
+$buic-foreground-error:                   var(--buic-foreground-negative);
+$buic-foreground-warning:                 var(--buic-foreground-warning);
+$buic-foreground-warning-rgb:             var(--buic-foreground-warning-rgb);
+$buic-foreground-focus:                   var(--buic-foreground-focus);
+
+/** Static colors */
+// NEEDSWORK - Need to deprecate
+$buic-accessory-hollow:                   var(--buic-accessory-hollow);
+$buic-accessory-primary:                  var(--buic-accessory-primary);
+$buic-accessory-success:                  var(--buic-accessory-success);
+$buic-accessory-alert:                    var(--buic-accessory-alert);
+$buic-accessory-warning:                  var(--buic-accessory-warning);
+$buic-accessory-primary-tint:             var(--buic-accessory-primary-tint);
+$buic-accessory-success-tint:             var(--buic-accessory-success-tint);
+$buic-accessory-alert-tint:               var(--buic-accessory-alert-tint);
+$buic-accessory-warning-tint:             var(--buic-accessory-warning-tint);
+
+/** Widget Opacity */
+$buic-widget-opacity:                     var(--buic-widget-opacity, 0.90);
+
+/** Toolbar Opacity */
+$buic-toolbar-opacity:                     var(--buic-toolbar-opacity, 0.50);