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

package/lib/cjs/core-react/checklistbox/CheckListBox.js

@@ -1,43 +1,43 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module CheckListBox
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckListBox = exports.CheckListBoxSeparator = exports.CheckListBoxItem = void 0;
-require("./CheckListBox.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** Item with a checkbox added to a [[CheckListBox]].
- * @public
- */
-class CheckListBoxItem extends React.PureComponent {
-    render() {
-        const className = (0, classnames_1.default)("core-chk-listboxitem-checkbox", this.props.className);
-        return (React.createElement("li", null,
-            React.createElement(itwinui_react_1.Checkbox, { checked: this.props.checked, disabled: this.props.disabled, className: className, style: this.props.style, label: this.props.label, onClick: this.props.onClick, onChange: this.props.onChange, "data-testid": "core-chk-listboxitem-checkbox" })));
-    }
-}
-exports.CheckListBoxItem = CheckListBoxItem;
-/** Separator added to a [[CheckListBox]].
- * @public
- */
-function CheckListBoxSeparator() {
-    return (React.createElement("div", { className: "core-chk-listbox-separator" }));
-}
-exports.CheckListBoxSeparator = CheckListBoxSeparator;
-/** React component showing a list of Checkbox items.
- * @public
- */
-class CheckListBox extends React.PureComponent {
-    render() {
-        const className = (0, classnames_1.default)("core-chk-listbox", this.props.className);
-        return (React.createElement("ul", { className: className, style: this.props.style }, this.props.children));
-    }
-}
-exports.CheckListBox = CheckListBox;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module CheckListBox
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckListBox = exports.CheckListBoxSeparator = exports.CheckListBoxItem = void 0;
+require("./CheckListBox.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** Item with a checkbox added to a [[CheckListBox]].
+ * @public
+ */
+class CheckListBoxItem extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("core-chk-listboxitem-checkbox", this.props.className);
+        return (React.createElement("li", null,
+            React.createElement(itwinui_react_1.Checkbox, { checked: this.props.checked, disabled: this.props.disabled, className: className, style: this.props.style, label: this.props.label, onClick: this.props.onClick, onChange: this.props.onChange, "data-testid": "core-chk-listboxitem-checkbox" })));
+    }
+}
+exports.CheckListBoxItem = CheckListBoxItem;
+/** Separator added to a [[CheckListBox]].
+ * @public
+ */
+function CheckListBoxSeparator() {
+    return (React.createElement("div", { className: "core-chk-listbox-separator" }));
+}
+exports.CheckListBoxSeparator = CheckListBoxSeparator;
+/** React component showing a list of Checkbox items.
+ * @public
+ */
+class CheckListBox extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("core-chk-listbox", this.props.className);
+        return (React.createElement("ul", { className: className, style: this.props.style }, this.props.children));
+    }
+}
+exports.CheckListBox = CheckListBox;
 //# sourceMappingURL=CheckListBox.js.map

package/lib/cjs/core-react/checklistbox/CheckListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListBox.js","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA6B;AAC7B,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAgD;AAmBhD;;GAEG;AACH,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACpF,OAAO,CACL;YACE,oBAAC,wBAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAClE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,iBACvE,+BAA+B,GAAG,CAC7C,CACN,CAAC;IACJ,CAAC;CACF;AAZD,4CAYC;AAED;;GAEG;AACH,SAAgB,qBAAqB;IACnC,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CAC/C,CAAC;AACJ,CAAC;AAJD,sDAIC;AAED;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAGtC;IACgB,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvE,OAAO,CACL,4BAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CACjB,CACN,CAAC;IACJ,CAAC;CACF;AAZD,oCAYC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module CheckListBox\r\n */\r\n\r\nimport \"./CheckListBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[CheckListBoxItem]] component\r\n * @public\r\n */\r\nexport interface CheckListBoxItemProps extends CommonProps {\r\n  /** Label */\r\n  label: string;\r\n  /** Indicates whether the item is checked or not */\r\n  checked?: boolean;\r\n  /** Indicates whether the item is disabled or not */\r\n  disabled?: boolean;\r\n  /** Function called when item is clicked. */\r\n  onClick?: () => any;\r\n  /** Function called when item is changed. */\r\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => any;\r\n}\r\n\r\n/** Item with a checkbox added to a [[CheckListBox]].\r\n * @public\r\n */\r\nexport class CheckListBoxItem extends React.PureComponent<CheckListBoxItemProps> {\r\n  public override render() {\r\n    const className = classnames(\"core-chk-listboxitem-checkbox\", this.props.className);\r\n    return (\r\n      <li>\r\n        <Checkbox checked={this.props.checked} disabled={this.props.disabled}\r\n          className={className} style={this.props.style}\r\n          label={this.props.label} onClick={this.props.onClick} onChange={this.props.onChange}\r\n          data-testid=\"core-chk-listboxitem-checkbox\" />\r\n      </li>\r\n    );\r\n  }\r\n}\r\n\r\n/** Separator added to a [[CheckListBox]].\r\n * @public\r\n */\r\nexport function CheckListBoxSeparator() {\r\n  return (\r\n    <div className=\"core-chk-listbox-separator\" />\r\n  );\r\n}\r\n\r\n/** React component showing a list of Checkbox items.\r\n * @public\r\n */\r\nexport class CheckListBox extends React.PureComponent<CommonProps & {\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}> {\r\n  public override render() {\r\n    const className = classnames(\"core-chk-listbox\", this.props.className);\r\n    return (\r\n      <ul className={className} style={this.props.style}>\r\n        {this.props.children}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"CheckListBox.js","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA6B;AAC7B,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAgD;AAmBhD;;GAEG;AACH,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACpF,OAAO,CACL;YACE,oBAAC,wBAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAClE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,iBACvE,+BAA+B,GAAG,CAC7C,CACN,CAAC;IACJ,CAAC;CACF;AAZD,4CAYC;AAED;;GAEG;AACH,SAAgB,qBAAqB;IACnC,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CAC/C,CAAC;AACJ,CAAC;AAJD,sDAIC;AAED;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAGtC;IACgB,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvE,OAAO,CACL,4BAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CACjB,CACN,CAAC;IACJ,CAAC;CACF;AAZD,oCAYC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module CheckListBox\n */\n\nimport \"./CheckListBox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for the [[CheckListBoxItem]] component\n * @public\n */\nexport interface CheckListBoxItemProps extends CommonProps {\n  /** Label */\n  label: string;\n  /** Indicates whether the item is checked or not */\n  checked?: boolean;\n  /** Indicates whether the item is disabled or not */\n  disabled?: boolean;\n  /** Function called when item is clicked. */\n  onClick?: () => any;\n  /** Function called when item is changed. */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => any;\n}\n\n/** Item with a checkbox added to a [[CheckListBox]].\n * @public\n */\nexport class CheckListBoxItem extends React.PureComponent<CheckListBoxItemProps> {\n  public override render() {\n    const className = classnames(\"core-chk-listboxitem-checkbox\", this.props.className);\n    return (\n      <li>\n        <Checkbox checked={this.props.checked} disabled={this.props.disabled}\n          className={className} style={this.props.style}\n          label={this.props.label} onClick={this.props.onClick} onChange={this.props.onChange}\n          data-testid=\"core-chk-listboxitem-checkbox\" />\n      </li>\n    );\n  }\n}\n\n/** Separator added to a [[CheckListBox]].\n * @public\n */\nexport function CheckListBoxSeparator() {\n  return (\n    <div className=\"core-chk-listbox-separator\" />\n  );\n}\n\n/** React component showing a list of Checkbox items.\n * @public\n */\nexport class CheckListBox extends React.PureComponent<CommonProps & {\n  /** Content */\n  children?: React.ReactNode;\n}> {\n  public override render() {\n    const className = classnames(\"core-chk-listbox\", this.props.className);\n    return (\n      <ul className={className} style={this.props.style}>\n        {this.props.children}\n      </ul>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/checklistbox/CheckListBox.scss

@@ -1,23 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../checkbox/index.scss";
-
-.core-chk-listbox {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: relative;
-
-  > li > .core-chk-listboxitem-checkbox {
-    margin: 4px 0;
-  }
-
-  > .core-chk-listbox-separator {
-    height: 1px;
-    background: $buic-inputs-border;
-    margin: 4px 0;
-    pointer-events: none;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.core-chk-listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+
+  > li > .core-chk-listboxitem-checkbox {
+    margin: 4px 0;
+  }
+
+  > .core-chk-listbox-separator {
+    height: 1px;
+    background: var(--iui-color-border-foreground);
+    margin: 4px 0;
+    pointer-events: none;
+  }
 }

package/lib/cjs/core-react/classes.scss

@@ -1,14 +1,11 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./base/classes";
-@import "./button/classes";
-@import "./checkbox/classes";
-@import "./expandable/classes";
-@import "./icons/classes";
-@import "./inputs/classes";
-@import "./tabs/classes";
-@import "./text/classes";
+/*---------------------------------------------------------------------------------------------
+* 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 "./base/classes";
+@import "./expandable/classes";
+@import "./icons/classes";
+@import "./inputs/classes";
+@import "./tabs/classes";
+@import "./text/classes";

package/lib/cjs/core-react/colorthemes.scss

@@ -1,90 +1,61 @@
-/*---------------------------------------------------------------------------------------------
-* 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/theme";
-
-// cspell:ignore colorvariables
-
-/** @note: This file should only be imported by UiCore.ts.
- *  It should NOT be imported by any *.scss or other ui-core files.
- */
-
-@mixin light-theme {
-  --buic-button-gradient1: rgba(
-    var(--iui-color-foreground-body-invert-rgb),
-    0.65
-  );
-  --buic-button-gradient2: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
-
-  // TODO create new values just for them
-  --buic-background-editable: #{mix(
-      $iui-color-background-1--light,
-      $iui-color-background-primary--light,
-      70%
-    )};
-  --buic-row-selection: #{mix(
-      $iui-color-background-1--light,
-      $iui-color-background-primary--light,
-      80%
-    )};
-  --buic-row-hover: #{mix(
-      $iui-color-background-1--light,
-      $iui-color-background-primary--light,
-      90%
-    )};
-}
-
-@mixin dark-theme {
-  --buic-button-gradient1: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
-  --buic-button-gradient2: rgba(
-    var(--iui-color-foreground-body-invert-rgb),
-    0.25
-  );
-
-  // TODO create new values just for them
-  --buic-background-editable: #{mix(
-      $iui-color-background-1--dark,
-      $iui-color-background-primary--dark,
-      70%
-    )};
-  --buic-row-selection: #{mix(
-      $iui-color-background-1--dark,
-      $iui-color-background-primary--dark,
-      80%
-    )};
-  --buic-row-hover: #{mix(
-      $iui-color-background-1--dark,
-      $iui-color-background-primary--dark,
-      90%
-    )};
-}
-
-html,
-html[data-theme="light"] {
-  @include light-theme;
-}
-
-html[data-theme="dark"] {
-  @include dark-theme;
-}
-
-@media (prefers-color-scheme: light) {
-  html[data-theme="SYSTEM_PREFERRED"] {
-    @include light-theme;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html[data-theme="SYSTEM_PREFERRED"] {
-    @include dark-theme;
-  }
-}
-
-html.theme-transition,
-html.theme-transition *,
-html.theme-transition *:before,
-html.theme-transition *:after {
-  transition: all 100ms !important;
-  transition-delay: 0 !important;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+// cspell:ignore colorvariables
+
+/** @note: This file should only be imported by UiCore.ts.
+ *  It should NOT be imported by any *.scss or other ui-core files.
+ */
+
+$background: var(--iui-color-background);
+$accent: var(--iui-color-background-accent);
+
+@mixin light-theme {
+  --buic-button-gradient1: rgba(
+    var(--iui-color-foreground-body-invert-rgb),
+    0.65
+  );
+  --buic-button-gradient2: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
+
+  --buic-background-editable: var(--iui-color-background);
+}
+
+@mixin dark-theme {
+  --buic-button-gradient1: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
+  --buic-button-gradient2: rgba(
+    var(--iui-color-foreground-body-invert-rgb),
+    0.25
+  );
+
+  --buic-background-editable: var(--iui-color-background);
+}
+
+html,
+html[data-theme="light"] {
+  @include light-theme;
+}
+
+html[data-theme="dark"] {
+  @include dark-theme;
+}
+
+@media (prefers-color-scheme: light) {
+  html[data-theme="SYSTEM_PREFERRED"] {
+    @include light-theme;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html[data-theme="SYSTEM_PREFERRED"] {
+    @include dark-theme;
+  }
+}
+
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *:before,
+html.theme-transition *:after {
+  transition: all 100ms !important;
+  transition-delay: 0 !important;
+}

package/lib/cjs/core-react/colorvariables.scss

@@ -1,154 +1,131 @@
-/*---------------------------------------------------------------------------------------------
-* 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/theme";
-@import "~@itwin/itwinui-variables/index";
-
-// cspell:ignore mediumgray titlebar toolbutton outoffocus
-
-/** @note: This file should only be imported by UiCore.ts.
- *  It should NOT be imported by any *.scss or other ui-core files.
- */
-
-:root {
-  // NEEDSWORK - Need to deprecate these accessory colors
-  --buic-accessory-hollow: rgb(255, 255, 255);
-  --buic-accessory-primary: rgb(000, 139, 225);
-  --buic-accessory-success: rgb(083, 162, 026);
-  --buic-accessory-alert: rgb(211, 010, 010);
-  --buic-accessory-warning: rgb(241, 139, 018);
-  --buic-accessory-primary-tint: rgb(165, 215, 245);
-  --buic-accessory-success-tint: rgb(195, 225, 175);
-  --buic-accessory-alert-tint: rgb(239, 169, 169);
-  --buic-accessory-warning-tint: rgb(249, 215, 171);
-
-  --buic-background-1-rgb: var(--iui-color-background-1-rgb);
-  --buic-background-2-rgb: var(--iui-color-background-2-rgb);
-  --buic-background-3-rgb: var(--iui-color-background-3-rgb);
-  --buic-background-4-rgb: var(--iui-color-background-4-rgb);
-  --buic-background-5-rgb: var(--iui-color-background-5-rgb);
-
-  --buic-background-1: var(--iui-color-background-1);
-  --buic-background-2: var(--iui-color-background-2);
-  --buic-background-3: var(--iui-color-background-3);
-  --buic-background-4: var(--iui-color-background-4);
-  --buic-background-5: var(--iui-color-background-5);
-  --buic-background-primary: var(--iui-color-background-primary);
-  --buic-background-tooltip: rgba(var(--iui-color-background-5-rgb), 0.9);
-  --buic-background-scrollbar: rgba(
-    var(--iui-color-foreground-body-rgb),
-    var(--iui-opacity-4)
-  );
-  --buic-background-scrollbar-hover: rgba(
-    var(--iui-color-foreground-body-rgb),
-    var(--iui-opacity-3)
-  );
-
-  --buic-foreground-body-rgb: var(--iui-text-color-rgb);
-  --buic-foreground-body: var(--iui-text-color);
-  --buic-foreground-body-reverse-rgb: var(
-    --iui-color-foreground-body-invert-rgb
-  );
-  --buic-foreground-body-reverse: rgba(
-    var(--iui-color-foreground-body-invert-rgb),
-    var(--iui-opacity-2)
-  );
-  --buic-foreground-muted: var(--iui-text-color-muted);
-  --buic-foreground-disabled: var(--iui-text-color-placeholder);
-  --buic-foreground-activehover: var(--iui-icons-color-actionable-hover);
-
-  --buic-inputs-border: rgba(
-    var(--iui-color-foreground-body-rgb),
-    var(--iui-opacity-4)
-  );
-  --buic-inputs-boxshadow: var(--iui-focus-box-shadow);
-  --buic-popup-boxshadow: var(--buic-inputs-boxshadow);
-
-  --buic-foreground-primary: var(--iui-icons-color-primary);
-  --buic-foreground-primary-tone: var(--iui-color-foreground-primary-overlay);
-  --buic-foreground-focus: var(--iui-color-foreground-primary-overlay);
-  --buic-foreground-focus-border: var(--buic-inputs-border);
-  --buic-focus-boxshadow: rgba(
-    var(--iui-color-foreground-primary-rgb),
-    var(--iui-opacity-4)
-  );
-
-  // The following two are still in use by DatePicker and there is no itwinui equivalent
-  --buic-focus-boxshadow-gradient1: rgba(
-    var(--buic-foreground-primary-tone-rgb),
-    0
-  );
-  --buic-focus-boxshadow-gradient2: rgba(
-    var(--buic-foreground-primary-rgb),
-    0.65
-  );
-
-  --buic-foreground-accessory: var(--iui-color-foreground-accessory);
-  --buic-foreground-success: var(--iui-color-foreground-positive);
-  --buic-foreground-positive: var(--iui-color-foreground-positive);
-  --buic-foreground-positive-rgb: var(--iui-color-foreground-positive-rgb);
-  --buic-foreground-alert: var(--iui-color-foreground-negative);
-  --buic-foreground-negative: var(--iui-color-foreground-negative);
-  --buic-foreground-negative-rgb: var(--iui-color-foreground-negative-rgb);
-  --buic-foreground-warning: var(--iui-color-foreground-warning);
-  --buic-foreground-warning-rgb: var(--iui-color-foreground-warning-rgb);
-
-  --buic-background-focus-overlay: rgba(
-    var(--iui-color-foreground-primary-rgb),
-    var(--iui-opacity-6)
-  );
-  --buic-background-hover-overlay: rgba(
-    var(--iui-color-foreground-primary-rgb),
-    var(--iui-opacity-5)
-  );
-  --buic-background-active-overlay: rgba(
-    var(--iui-color-foreground-primary-rgb),
-    var(--iui-opacity-5)
-  );
-  --buic-background-pressed-overlay: rgba(
-    var(--iui-color-foreground-primary-rgb),
-    0.3
-  );
-
-  --buic-background-card: var(--buic-background-tooltip);
-  --buic-background-striped_row: rgba(
-    var(--iui-color-foreground-body-rgb),
-    0.03
-  );
-
-  /** background.5 */
-  --buic-background-titlebar: var(--buic-background-5);
-  --buic-background-dialog-stroke: var(--buic-background-5);
-  --buic-background-widget-stroke: var(--buic-background-5);
-  --buic-background-control-stroke: var(--buic-background-5);
-  --buic-background-panel-stroke: var(--buic-background-5);
-  --buic-background-toolbutton-stroke: var(--buic-background-5);
-
-  /** background.4 */
-  --buic-background-titlebar-outoffocus: var(--buic-background-4);
-  --buic-background-divider: var(--buic-background-4);
-  --buic-background-widget-element-stroke: var(--buic-background-4);
-  --buic-background-statusbar: var(--buic-background-4);
-  --buic-background-table-header: var(--buic-background-4);
-  --buic-background-control-stroke-disabled: var(--buic-background-4);
-
-  /** background.3 */
-  --buic-background-tab-inactive: var(--buic-background-3);
-  --buic-background-toolbutton-inactive: var(--buic-background-3);
-  --buic-background-context-menu: var(--buic-background-3);
-  --buic-background-widget-panel: var(--buic-background-3);
-  --buic-background-placeholder: var(--buic-background-3);
-  --buic-background-control-disabled: var(--buic-background-3);
-
-  /** background.2 */
-  --buic-background-tab-active: var(--buic-background-2);
-  --buic-background-dialog: var(--buic-background-2);
-  --buic-background-widget: var(--buic-background-2);
-  --buic-background-window: var(--buic-background-2);
-  --buic-background-toolbar: var(--buic-background-2);
-  --buic-background-panel: var(--buic-background-2);
-
-  /** background.1 */
-  --buic-background-control: var(--buic-background-1);
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+// cspell:ignore mediumgray titlebar toolbutton outoffocus
+
+/** @note: This file should only be imported by UiCore.ts.
+ *  It should NOT be imported by any *.scss or other ui-core files.
+ */
+
+[data-root-container="iui-root-id"] {
+  // NEEDSWORK - Need to deprecate these accessory colors
+  --buic-accessory-hollow: rgb(255, 255, 255);
+  --buic-accessory-primary: rgb(000, 139, 225);
+  --buic-accessory-success: rgb(083, 162, 026);
+  --buic-accessory-alert: rgb(211, 010, 010);
+  --buic-accessory-warning: rgb(241, 139, 018);
+  --buic-accessory-primary-tint: rgb(165, 215, 245);
+  --buic-accessory-success-tint: rgb(195, 225, 175);
+  --buic-accessory-alert-tint: rgb(239, 169, 169);
+  --buic-accessory-warning-tint: rgb(249, 215, 171);
+
+  --buic-background-1: var(--iui-color-background);
+  --buic-background-2: var(--iui-color-background-hover);
+  --buic-background-3: var(--iui-color-background-backdrop);
+  --buic-background-4: var(--iui-color-background-backdrop-hover);
+  --buic-background-5: var(--iui-color-background-disabled);
+  --buic-background-primary: var(--iui-color-background-accent);
+  --buic-background-tooltip: hsl(var(--iui-color-background-hsl) / 0.9);
+  --buic-background-scrollbar: hsl(
+    var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+  );
+  --buic-background-scrollbar-hover: hsl(
+    var(--iui-color-foreground-hsl) / var(--iui-opacity-3)
+  );
+
+  --buic-foreground-body-rgb: var(--iui-color-foreground-hsl);
+  --buic-foreground-body: var(--iui-color-text);
+
+  --buic-foreground-body-reverse-rgb: var(--iui-color-foreground-hsl);
+  --buic-foreground-body-reverse: hsl(
+    var(--iui-color-background-hsl) / var(--iui-opacity-2)
+  );
+  --buic-foreground-muted: var(--iui-color-text-muted);
+  --buic-foreground-disabled: var(--iui-color-text-disabled);
+  --buic-foreground-activehover: var(--iui-color-text);
+
+  --buic-inputs-border: hsl(
+    var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+  );
+  --buic-inputs-boxshadow: var(--iui-focus-box-shadow);
+  --buic-popup-boxshadow: var(--buic-inputs-boxshadow);
+
+  --buic-foreground-primary: var(--iui-color-icon-accent);
+  --buic-foreground-primary-tone: var(--iui-color-text-accent-hover);
+  --buic-foreground-focus: var(--iui-color-text-accent-hover);
+  --buic-foreground-focus-border: var(--buic-inputs-border);
+  --buic-focus-boxshadow: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-4)
+  );
+
+  // The following two are still in use by DatePicker and there is no itwinui equivalent
+  --buic-focus-boxshadow-gradient1: hsl(
+    var(--buic-foreground-primary-tone-rgb) / 0
+  );
+  --buic-focus-boxshadow-gradient2: hsl(
+    var(--buic-foreground-primary-rgb) / 0.65
+  );
+
+  --buic-foreground-accessory: var(--iui-color-white);
+  --buic-foreground-success: var(--iui-color-text-positive);
+  --buic-foreground-positive: var(--iui-color-text-positive);
+  --buic-foreground-positive-rgb: var(--iui-color-positive-hsl);
+  --buic-foreground-alert: var(--iui-color-text-negative);
+  --buic-foreground-negative: var(--iui-color-text-negative);
+  --buic-foreground-negative-rgb: var(--iui-color-negative-hsl);
+  --buic-foreground-warning: var(--iui-color-text-warning);
+  --buic-foreground-warning-rgb: var(--iui-color-warning-hsl);
+
+  --buic-background-focus-overlay: hsl(var(--iui-opacity-6));
+  --buic-background-hover-overlay: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-5)
+  );
+  --buic-background-active-overlay: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-5)
+  );
+  --buic-background-pressed-overlay: hsl(var(--iui-color-accent-hsl) / 0.3);
+
+  --buic-background-card: var(--buic-background-tooltip);
+  --buic-background-striped_row: hsl(var(--iui-color-foreground-hsl) / 0.03);
+
+  /** background.5 */
+  --buic-background-titlebar: var(--buic-background-5);
+  --buic-background-dialog-stroke: var(--buic-background-5);
+  --buic-background-widget-stroke: var(--buic-background-5);
+  --buic-background-control-stroke: var(--buic-background-5);
+  --buic-background-panel-stroke: var(--buic-background-5);
+  --buic-background-toolbutton-stroke: var(--buic-background-5);
+
+  /** background.4 */
+  --buic-background-titlebar-outoffocus: var(--buic-background-4);
+  --buic-background-divider: var(--buic-background-4);
+  --buic-background-widget-element-stroke: var(--buic-background-4);
+  --buic-background-statusbar: var(--buic-background-4);
+  --buic-background-table-header: var(--buic-background-4);
+  --buic-background-control-stroke-disabled: var(--buic-background-4);
+
+  /** background.3 */
+  --buic-background-tab-inactive: var(--buic-background-3);
+  --buic-background-toolbutton-inactive: var(--buic-background-3);
+  --buic-background-context-menu: var(--buic-background-3);
+  --buic-background-widget-panel: var(--buic-background-3);
+  --buic-background-placeholder: var(--buic-background-3);
+  --buic-background-control-disabled: var(--buic-background-3);
+
+  /** background.2 */
+  --buic-background-tab-active: var(--buic-background-2);
+  --buic-background-dialog: var(--buic-background-2);
+  --buic-background-widget: var(--buic-background-2);
+  --buic-background-window: var(--buic-background-2);
+  --buic-background-toolbar: var(--buic-background-2);
+  --buic-background-panel: var(--buic-background-2);
+
+  /** background.1 */
+  --buic-background-control: var(--buic-background-1);
+
+  // Color variables
+  --buic-row-selection: var(--iui-color-background-accent-muted);
+  --buic-row-hover: var(--iui-color-background-hover);
+}