@itwin/core-react 4.1.0-dev.1 → 4.1.0

package/lib/cjs/core-react/button/UnderlinedButton.scss

@@ -1,33 +1,33 @@
-/*---------------------------------------------------------------------------------------------
-* 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.scss";
-@import "../inputs/index.scss";
-
-$color: $buic-foreground-primary;
-$hoverColor: $buic-foreground-primary-tone;
-
-.core-underlined-button {
-  background: transparent;
-  color: $color;
-  border: 0px solid $color;
-  border-bottom-width: 1px;
-
-  width: fit-content;
-
-  cursor: pointer;
-
-  &:hover {
-    color: $hoverColor;
-    border-color: $hoverColor;
-  }
-
-  &:focus {
-    color: $hoverColor;
-    border-color: $hoverColor;
-    background-color: $buic-background-focus-overlay;
-    outline: none;
-  }
-
+/*---------------------------------------------------------------------------------------------
+* 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.scss";
+@import "../inputs/index.scss";
+
+$color: $buic-foreground-primary;
+$hoverColor: $buic-foreground-primary-tone;
+
+.core-underlined-button {
+  background: transparent;
+  color: $color;
+  border: 0px solid $color;
+  border-bottom-width: 1px;
+
+  width: fit-content;
+
+  cursor: pointer;
+
+  &:hover {
+    color: $hoverColor;
+    border-color: $hoverColor;
+  }
+
+  &:focus {
+    color: $hoverColor;
+    border-color: $hoverColor;
+    background-color: $buic-background-focus-overlay;
+    outline: none;
+  }
+
 }

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":["/*---------------------------------------------------------------------------------------------\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 type { 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"]}
+{"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 type { 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"]}

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

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
-  }
+/*---------------------------------------------------------------------------------------------
+* 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,11 +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 "./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,61 +1,61 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
-}
+/*---------------------------------------------------------------------------------------------
+* 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,131 +1,131 @@
-/*---------------------------------------------------------------------------------------------
-* 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);
-}
+/*---------------------------------------------------------------------------------------------
+* 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);
+}