@itwin/core-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/esm/core-react/settings/SettingsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"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","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 Settings\r\n */\r\n\r\nimport \"./SettingsContainer.scss\";\r\nimport * as React from \"react\";\r\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\r\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\n\r\n/*  ---------------------------------------------------------------------------------------------------\r\n// A typical implementation of a saveFunction callback\r\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n  if (dataIsDirty) {\r\n    // prompt user to save changes passing in function and arguments to call after saving changes.\r\n    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}\r\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\r\n    return;\r\n  }\r\n  afterSaveFunction(args);\r\n}, []);\r\n---------------------------------------------------------------------------------------------------------- */\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\r\n * @public\r\n */\r\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      saveFunction (closeFunc, closeFuncArgs);\r\n    };\r\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\r\n * @public\r\n */\r\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\r\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\r\n    };\r\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface SettingsContainerProps {\r\n  tabs: SettingsTabEntry[];\r\n  // sets tab to set as active tab\r\n  currentSettingsTab?: SettingsTabEntry;\r\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\r\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\r\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\r\n  settingsManager: SettingsManager;\r\n  // if true show tab label as header above page contents.\r\n  showHeader?: boolean;\r\n}\r\n\r\n/**\r\n * SettingsContainer component that displays Setting Tabs on Left and the P\r\n * Note: that SettingsContainer is not rendered if tabs array is empty\r\n * @public\r\n */\r\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\r\n  // sort the tabs based on itemPriority\r\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\r\n\r\n  const [openTab, setOpenTab] = React.useState(()=>{\r\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\r\n      return currentSettingsTab;\r\n    else\r\n      return tabs[0];\r\n  });\r\n\r\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\r\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\r\n      return;\r\n    onSettingsTabSelected && onSettingsTabSelected(tab);\r\n    setOpenTab(tab);\r\n  }, [onSettingsTabSelected]);\r\n\r\n  const processTabSelectionById = React.useCallback((tabId: string) => {\r\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\r\n    tabToActivate && processTabSelection (tabToActivate);\r\n  }, [processTabSelection, tabs]);\r\n\r\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\r\n    const selectedTab = tabs[tabIndex];\r\n    if (openTab && openTab.pageWillHandleCloseRequest)\r\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\r\n    else\r\n      processTabSelection(selectedTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\r\n      const idToFind = settingsTabId.toLowerCase();\r\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\r\n      if (!tabToActivate)\r\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\r\n      // istanbul ignore else\r\n      if (tabToActivate) {\r\n        if (openTab && openTab.pageWillHandleCloseRequest)\r\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\r\n        else\r\n          processTabSelection(tabToActivate);\r\n      }\r\n    };\r\n\r\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      if (openTab && openTab.pageWillHandleCloseRequest)\r\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\r\n      else\r\n        closeFunc(closeFuncArgs);\r\n    };\r\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\r\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  const labels=tabs.map((tab)=> {\r\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\r\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\r\n  });\r\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\r\n  return (\r\n    <div className=\"core-settings-container\">\r\n      <div className=\"core-settings-container-left\">\r\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\r\n      </div>\r\n      <div className=\"core-settings-container-right\">\r\n        {showHeader && <div className=\"core-settings-container-right-header\">\r\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\r\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\r\n        </div>}\r\n        <div className=\"core-settings-container-right-contents\">\r\n          {openTab.page}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"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","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 Settings\r\n */\r\n\r\nimport \"./SettingsContainer.scss\";\r\nimport * as React from \"react\";\r\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\r\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\n\r\n/*  ---------------------------------------------------------------------------------------------------\r\n// A typical implementation of a saveFunction callback\r\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n  if (dataIsDirty) {\r\n    // prompt user to save changes passing in function and arguments to call after saving changes.\r\n    UiFramework.dialogs.modal.openDialog(<CustomSavePromptModalDialog customProps={customProps}\r\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\r\n    return;\r\n  }\r\n  afterSaveFunction(args);\r\n}, []);\r\n---------------------------------------------------------------------------------------------------------- */\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\r\n * @public\r\n */\r\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      saveFunction (closeFunc, closeFuncArgs);\r\n    };\r\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\r\n * @public\r\n */\r\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\r\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\r\n    };\r\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface SettingsContainerProps {\r\n  tabs: SettingsTabEntry[];\r\n  // sets tab to set as active tab\r\n  currentSettingsTab?: SettingsTabEntry;\r\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\r\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\r\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\r\n  settingsManager: SettingsManager;\r\n  // if true show tab label as header above page contents.\r\n  showHeader?: boolean;\r\n}\r\n\r\n/**\r\n * SettingsContainer component that displays Setting Tabs on Left and the P\r\n * Note: that SettingsContainer is not rendered if tabs array is empty\r\n * @public\r\n */\r\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\r\n  // sort the tabs based on itemPriority\r\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\r\n\r\n  const [openTab, setOpenTab] = React.useState(()=>{\r\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\r\n      return currentSettingsTab;\r\n    else\r\n      return tabs[0];\r\n  });\r\n\r\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\r\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\r\n      return;\r\n    onSettingsTabSelected && onSettingsTabSelected(tab);\r\n    setOpenTab(tab);\r\n  }, [onSettingsTabSelected]);\r\n\r\n  const processTabSelectionById = React.useCallback((tabId: string) => {\r\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\r\n    tabToActivate && processTabSelection (tabToActivate);\r\n  }, [processTabSelection, tabs]);\r\n\r\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\r\n    const selectedTab = tabs[tabIndex];\r\n    if (openTab && openTab.pageWillHandleCloseRequest)\r\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\r\n    else\r\n      processTabSelection(selectedTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\r\n      const idToFind = settingsTabId.toLowerCase();\r\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\r\n      if (!tabToActivate)\r\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\r\n      // istanbul ignore else\r\n      if (tabToActivate) {\r\n        if (openTab && openTab.pageWillHandleCloseRequest)\r\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\r\n        else\r\n          processTabSelection(tabToActivate);\r\n      }\r\n    };\r\n\r\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      if (openTab && openTab.pageWillHandleCloseRequest)\r\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\r\n      else\r\n        closeFunc(closeFuncArgs);\r\n    };\r\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\r\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  const labels=tabs.map((tab)=> {\r\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\r\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\r\n  });\r\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\r\n  return (\r\n    <div className=\"core-settings-container\">\r\n      <div className=\"core-settings-container-left\">\r\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\r\n      </div>\r\n      <div className=\"core-settings-container-right\">\r\n        {showHeader && <div className=\"core-settings-container-right-header\">\r\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\r\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\r\n        </div>}\r\n        <div className=\"core-settings-container-right-contents\">\r\n          {openTab.page}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}

package/lib/esm/core-react/settings/SettingsContainer.scss

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 
 @import "../style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 div.core-settings-container {
   display: flex;
@@ -12,7 +11,9 @@ div.core-settings-container {
   height: 100%;
   width: 100%;
 
-  *, *:before, *:after {
+  *,
+  *:before,
+  *:after {
     box-sizing: inherit;
   }
 
@@ -20,7 +21,9 @@ div.core-settings-container {
     min-width: 15em;
     height: 100%;
     overflow: auto;
-    >.uicore-tabs-vertical {
+    border-right: 2px solid var(--iui-color-border);
+
+    > .uicore-tabs-vertical {
       font-size: 16px;
     }
   }
@@ -30,15 +33,15 @@ div.core-settings-container {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: var(--buic-background-dialog);
+    background: var(--iui-color-background);
     align-content: center;
 
     .core-settings-container-right-header {
       display: flex;
       width: 100%;
-      height: ($iui-font-size-title * 2);
-      font-size: $iui-font-size-title;
-      font-weight: $iui-font-weight-semibold;
+      height: calc(var(--iui-font-size-4) * 2);
+      font-size: var(--iui-font-size-4);
+      font-weight: var(--iui-font-weight-semibold);
       padding-left: 15px;
       align-items: center;
 
@@ -62,4 +65,4 @@ div.core-settings-container {
       overflow: auto;
     }
   }
-}
+}

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

@@ -2,12 +2,10 @@
 * 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/baseline";
+$uicore-baseline: var(--iui-size-s);
+$uicore-line-height: var(--iui-size-l); ///  22px; /// ~1.618;
 
-$uicore-baseline:                  $iui-baseline;
-$uicore-line-height:               $iui-line-height;    ///  22px; /// ~1.618;
-
-$uicore-bordered-padding:          $uicore-baseline - 1px;
-$uicore-bordered-padding-large:    $uicore-baseline * 2 - 1px;
-$uicore-unbordered-padding:        $uicore-baseline;
-$uicore-unbordered-padding-large:  $uicore-baseline * 2;
+$uicore-bordered-padding: calc(var(--iui-size-s) - 1px);
+$uicore-bordered-padding-large: calc(var(--iui-size-s) * 2 - 1px);
+$uicore-unbordered-padding: var(--iui-size-s);
+$uicore-unbordered-padding-large: calc(var(--iui-size-s) * 2);

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

@@ -2,22 +2,19 @@
 * 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;
+$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/mixins.scss

@@ -2,19 +2,18 @@
 * 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;
+  color:                var(--iui-color-text);
 
   &:link,
   &:visited,
   &:hover,
   &:active {
 
-    color:              $buic-text-color;
+    color:              var(--iui-color-text);
     text-decoration:    none;
   }
 }

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

@@ -2,16 +2,15 @@
 * 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-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;
+$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

@@ -2,16 +2,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/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
+$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

@@ -2,12 +2,8 @@
 * 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;
+$uicore-speed-fast: var(--iui-duration-1);
+$uicore-speed: var(--iui-duration-2);
+$uicore-speed-slow: var(--iui-duration-3);

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

@@ -5,12 +5,6 @@
 
 // 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);

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

@@ -2,42 +2,38 @@
 * 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/typography";
-
-// @warn "typography.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/typography' instead.";
-
 /// Constants ------------------------------------------------------------------
 
-$uicore-sans:                      $iui-sans;
-$uicore-monospace:                 $iui-monospace;
+$uicore-sans: var(--iui-font-sans);
+$uicore-monospace: var(--iui-font-mono);
 
-$uicore-font-family:               $iui-font-family;
+$uicore-font-family: var(--iui-font-sans);
 
-$uicore-font-size:                 $iui-font-size;
-$uicore-font-size-small:           $iui-font-size-small;
-$uicore-font-size-leading:         $iui-font-size-leading;
-$uicore-font-size-subheading:      $iui-font-size-subheading;
-$uicore-font-size-title:           $iui-font-size-title;
-$uicore-font-size-headline:        $iui-font-size-headline;
+$uicore-font-size: var(--iui-font-size-1);
+$uicore-font-size-small: var(--iui-font-size-0);
+$uicore-font-size-leading: var(--iui-font-size-2);
+$uicore-font-size-subheading: var(--iui-font-size-3);
+$uicore-font-size-title: var(--iui-font-size-4);
+$uicore-font-size-headline: var(--iui-font-size-5);
 
-$uicore-cap-size:                  $iui-cap-size;
-$uicore-cap-size-small:            $iui-cap-size-small;
-$uicore-cap-size-leading:          $iui-cap-size-leading;
-$uicore-cap-size-subheading:       $iui-cap-size-subheading;
-$uicore-cap-size-title:            $iui-cap-size-title;
-$uicore-cap-size-headline:         $iui-cap-size-headline;
+//TODO review this cap part
+$uicore-cap-size: var(--iui-font-size-1);
+$uicore-cap-size-small: var(--iui-font-size-0);
+$uicore-cap-size-leading: var(--iui-font-size-2);
+$uicore-cap-size-subheading: var(--iui-font-size-3);
+$uicore-cap-size-title: var(--iui-font-size-4);
+$uicore-cap-size-headline: var(--iui-font-size-5);
 
-$uicore-font-weight-light:         $iui-font-weight-light;
-$uicore-font-weight-normal:        $iui-font-weight-normal;
-$uicore-font-weight-semibold:      $iui-font-weight-semibold;
-$uicore-font-weight-bold:          $iui-font-weight-bold;
+$uicore-font-weight-light: var(--iui-font-weight-light);
+$uicore-font-weight-normal: var(--iui-font-weight-normal);
+$uicore-font-weight-semibold: var(--iui-font-weight-semibold);
+$uicore-font-weight-bold: var(--iui-font-weight-bold);
 
 /// Font loading helpers -------------------------------------------------------
 /// See: https://www.zachleat.com/web/comprehensive-webfonts
 
-$uicore-font-loaded-class:         $iui-font-loaded-class;
+$uicore-font-loaded-class: var(--iui-font-sans);
 
 @mixin uicore-font-family {
-
-  @include iui-font-family;
+  font-family: var(--iui-font-sans);
 }

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

@@ -2,12 +2,8 @@
 * 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/variables";
+$uicore-border-radius: var(--iui-border-radius-1);
 
-// @warn "variables.scss is deprecated. Use '~@itwin/itwinui-css/scss/style/variables' instead.";
-
-$uicore-border-radius:    $iui-border-radius;
-
-$uicore-component-height-small:   24px;
-$uicore-component-height-normal:  28px;
-$uicore-component-height-large:   32px;
+$uicore-component-height-small: 24px;
+$uicore-component-height-normal: 28px;
+$uicore-component-height-large: 32px;

package/lib/esm/core-react/tabs/Tabs.d.ts

@@ -17,7 +17,7 @@ export interface TabLabel {
     tooltip?: string | JSX.Element;
     disabled?: boolean;
 }
-/** Properties for the [[HorizontalTabs]] and [[VerticalTabs]] components
+/** Properties for the [[VerticalTabs]] component
  * @public
  */
 export interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {

package/lib/esm/core-react/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/Tabs.tsx"],"names":[],"mappings":"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","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 Tabs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { ItemKeyboardNavigator } from \"../focus/ItemKeyboardNavigator\";\r\nimport { IconHelper } from \"../utils/IconHelper\";\r\n\r\n/** TabLabel provides ability to define label, icon, and tooltip for a tab entry. The tooltip can be defined as JSX|Element\r\n *  to support react-tooltip component or a string that will be use to set the title property.\r\n * @public\r\n */\r\nexport interface TabLabel {\r\n  label: string;\r\n  subLabel?: string;\r\n  icon?: string | JSX.Element;\r\n  tabId: string; /* optional id added to tab so it can be used by react-tooltip  */\r\n  /** tooltip allows JSX.Element to support styled tooltips like react-tooltip. */\r\n  tooltip?: string | JSX.Element;\r\n  disabled?: boolean;\r\n}\r\n\r\nfunction isTabLabelWithIcon(item: string | TabLabel): item is TabLabel {\r\n  return (typeof item !== \"string\") && !!(item).icon;\r\n}\r\n\r\nfunction isTabLabel(item: string | TabLabel): item is TabLabel {\r\n  return (typeof item !== \"string\");\r\n}\r\n\r\n/** Properties for the [[HorizontalTabs]] and [[VerticalTabs]] components\r\n * @public\r\n */\r\nexport interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {\r\n  /** Text shown for each tab\r\n   * @public */\r\n  labels: Array<string | TabLabel>;\r\n  /** Handler for activating a tab */\r\n  onActivateTab?: (index: number) => any;\r\n  /** Index of the initial active tab */\r\n  activeIndex?: number;\r\n  /** Indicates whether the bar on the active tab is green instead of the default blue */\r\n  green?: boolean;\r\n}\r\n\r\n/** State for [[Tabs]] component\r\n * @internal\r\n */\r\ninterface TabsState {\r\n  activeIndex: number;\r\n}\r\n\r\n/** Properties for the base [[Tabs]] component\r\n * @public\r\n */\r\nexport interface MainTabsProps extends TabsProps {\r\n  /** Main CSS class name */\r\n  mainClassName: string;\r\n  /** Orientation of the Tabs list */\r\n  orientation: Orientation;\r\n}\r\n\r\n/** Tabs meant to represent the current position in a page/section\r\n * @public\r\n */\r\nexport class Tabs extends React.PureComponent<MainTabsProps, TabsState> {\r\n  private _anchorRefs: Array<React.RefObject<HTMLAnchorElement>> = [];\r\n  private _itemKeyboardNavigator: ItemKeyboardNavigator;\r\n\r\n  constructor(props: MainTabsProps) {\r\n    super(props);\r\n\r\n    const activeIndex = this.validateActiveIndex(props.activeIndex);\r\n    this.state = {\r\n      activeIndex,\r\n    };\r\n\r\n    props.labels.forEach(() => this._anchorRefs.push(React.createRef<HTMLAnchorElement>()));\r\n    this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);\r\n  }\r\n\r\n  private validateActiveIndex(idx?: number): number {\r\n    let activeIndex = 0;\r\n    if (idx && idx >= 0 && idx < this.props.labels.length)\r\n      activeIndex = idx;\r\n    return activeIndex;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n    this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: MainTabsProps) {\r\n    if (prevProps.labels !== this.props.labels)\r\n      this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n\r\n    if (prevProps.orientation !== this.props.orientation)\r\n      this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n\r\n    if (prevProps.activeIndex !== this.props.activeIndex) {\r\n      let hadFocus = false;\r\n      const element = this._anchorRefs[this.state.activeIndex].current;\r\n      // istanbul ignore else\r\n      if (element && document.activeElement === element)\r\n        hadFocus = true;\r\n      const activeIndex = this.validateActiveIndex(this.props.activeIndex);\r\n\r\n      this.setState(\r\n        () => ({ activeIndex }),\r\n        () => {\r\n          // istanbul ignore else\r\n          if (hadFocus) {\r\n            const newElement = this._anchorRefs[activeIndex].current;\r\n            // istanbul ignore else\r\n            if (newElement)\r\n              newElement.focus();\r\n          }\r\n        });\r\n    }\r\n  }\r\n\r\n  private _handleFocusItem = (index: number) => {\r\n    const itemRef = this._anchorRefs[index];\r\n    // istanbul ignore else\r\n    if (itemRef && itemRef.current)\r\n      itemRef.current.focus();\r\n  };\r\n\r\n  private _handleTabClick = (index: number) => {\r\n    this._activateTab(index);\r\n  };\r\n\r\n  /** Handle keydown on tabs */\r\n  private _handleKeyDownEvent(event: React.KeyboardEvent, index: number) {\r\n    this._itemKeyboardNavigator.handleKeyDownEvent(event, index);\r\n  }\r\n\r\n  /** Handle keyup on tabs */\r\n  private _handleKeyUpEvent(event: React.KeyboardEvent, index: number) {\r\n    this._itemKeyboardNavigator.handleKeyUpEvent(event, index);\r\n  }\r\n\r\n  private _activateTab = (index: number) => {\r\n    this.props.onActivateTab && this.props.onActivateTab(index);\r\n    this.setState({ activeIndex: index });\r\n  };\r\n\r\n  /** @internal */\r\n  public override render(): JSX.Element {\r\n    const ulClassNames = classnames(\r\n      this.props.mainClassName,\r\n      this.props.green && \"uicore-tabs-green\",\r\n      this.props.className,\r\n    );\r\n\r\n    const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;\r\n\r\n    return (\r\n      <ul className={ulClassNames} style={this.props.style}\r\n        role=\"tablist\"\r\n        aria-orientation={this.props.orientation === Orientation.Vertical ? \"vertical\" : \"horizontal\"}\r\n      >\r\n        {this.props.labels.map((label, index) => {\r\n          let disabled;\r\n          let tooltipElement: JSX.Element | undefined;\r\n          let title: string | undefined;\r\n          let subLabel: string | undefined;\r\n          let tabId = \"\";\r\n          let icon;\r\n          if (isTabLabel(label)) {\r\n            icon = IconHelper.getIconReactNode(label.icon);\r\n            subLabel = label.subLabel;\r\n            disabled = label.disabled;\r\n            tabId = label.tabId;\r\n            if (React.isValidElement(label.tooltip))\r\n              tooltipElement = label.tooltip;\r\n            else if (typeof label.tooltip === \"string\")\r\n              title = label.tooltip;\r\n          }\r\n          return <li key={index} title={title}\r\n            className={classnames(index === this.state.activeIndex && \"core-active\", disabled && \"core-tab-item-disabled\")}\r\n            role=\"tab\"\r\n            aria-selected={index === this.state.activeIndex}\r\n            data-for={`${tabId}`} /* to support react-tooltip */\r\n          >\r\n            {tooltipElement}\r\n            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\r\n            <a ref={this._anchorRefs[index]}\r\n              tabIndex={index === this.state.activeIndex ? 0 : -1}\r\n              onClick={() => this._handleTabClick(index)}\r\n              onKeyDown={(event) => this._handleKeyDownEvent(event, index)}\r\n              onKeyUp={(event) => this._handleKeyUpEvent(event, index)}\r\n              data-testid={`${tabId}`}\r\n              role=\"button\"\r\n            > <div className={classnames(\"uicore-tabs-inline-label\", disabled && \"core-tab-item-disabled\")}>\r\n                {anyIconsPresent && <span className=\"uicore-tabs-icon\">{icon}</span>}\r\n                <div className=\"uicore-tabs-label-subLabel-container\">\r\n                  <span>{(typeof label === \"string\") ? label : label.label}</span>\r\n                  {subLabel && <span className=\"uicore-tabs-subLabel\">{subLabel}</span>}\r\n                </div>\r\n              </div>\r\n            </a>\r\n          </li>;\r\n        }\r\n        )}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/core-react/tabs/Tabs.tsx"],"names":[],"mappings":"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","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 Tabs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { ItemKeyboardNavigator } from \"../focus/ItemKeyboardNavigator\";\r\nimport { IconHelper } from \"../utils/IconHelper\";\r\n\r\n/** TabLabel provides ability to define label, icon, and tooltip for a tab entry. The tooltip can be defined as JSX|Element\r\n *  to support react-tooltip component or a string that will be use to set the title property.\r\n * @public\r\n */\r\nexport interface TabLabel {\r\n  label: string;\r\n  subLabel?: string;\r\n  icon?: string | JSX.Element;\r\n  tabId: string; /* optional id added to tab so it can be used by react-tooltip  */\r\n  /** tooltip allows JSX.Element to support styled tooltips like react-tooltip. */\r\n  tooltip?: string | JSX.Element;\r\n  disabled?: boolean;\r\n}\r\n\r\nfunction isTabLabelWithIcon(item: string | TabLabel): item is TabLabel {\r\n  return (typeof item !== \"string\") && !!(item).icon;\r\n}\r\n\r\nfunction isTabLabel(item: string | TabLabel): item is TabLabel {\r\n  return (typeof item !== \"string\");\r\n}\r\n\r\n/** Properties for the [[VerticalTabs]] component\r\n * @public\r\n */\r\nexport interface TabsProps extends React.AllHTMLAttributes<HTMLUListElement>, CommonProps {\r\n  /** Text shown for each tab\r\n   * @public */\r\n  labels: Array<string | TabLabel>;\r\n  /** Handler for activating a tab */\r\n  onActivateTab?: (index: number) => any;\r\n  /** Index of the initial active tab */\r\n  activeIndex?: number;\r\n  /** Indicates whether the bar on the active tab is green instead of the default blue */\r\n  green?: boolean;\r\n}\r\n\r\n/** State for [[Tabs]] component\r\n * @internal\r\n */\r\ninterface TabsState {\r\n  activeIndex: number;\r\n}\r\n\r\n/** Properties for the base [[Tabs]] component\r\n * @public\r\n */\r\nexport interface MainTabsProps extends TabsProps {\r\n  /** Main CSS class name */\r\n  mainClassName: string;\r\n  /** Orientation of the Tabs list */\r\n  orientation: Orientation;\r\n}\r\n\r\n/** Tabs meant to represent the current position in a page/section\r\n * @public\r\n */\r\nexport class Tabs extends React.PureComponent<MainTabsProps, TabsState> {\r\n  private _anchorRefs: Array<React.RefObject<HTMLAnchorElement>> = [];\r\n  private _itemKeyboardNavigator: ItemKeyboardNavigator;\r\n\r\n  constructor(props: MainTabsProps) {\r\n    super(props);\r\n\r\n    const activeIndex = this.validateActiveIndex(props.activeIndex);\r\n    this.state = {\r\n      activeIndex,\r\n    };\r\n\r\n    props.labels.forEach(() => this._anchorRefs.push(React.createRef<HTMLAnchorElement>()));\r\n    this._itemKeyboardNavigator = new ItemKeyboardNavigator(this._handleFocusItem, this._activateTab);\r\n  }\r\n\r\n  private validateActiveIndex(idx?: number): number {\r\n    let activeIndex = 0;\r\n    if (idx && idx >= 0 && idx < this.props.labels.length)\r\n      activeIndex = idx;\r\n    return activeIndex;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n    this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: MainTabsProps) {\r\n    if (prevProps.labels !== this.props.labels)\r\n      this._itemKeyboardNavigator.itemCount = this.props.labels.length;\r\n\r\n    if (prevProps.orientation !== this.props.orientation)\r\n      this._itemKeyboardNavigator.orientation = this.props.orientation;\r\n\r\n    if (prevProps.activeIndex !== this.props.activeIndex) {\r\n      let hadFocus = false;\r\n      const element = this._anchorRefs[this.state.activeIndex].current;\r\n      // istanbul ignore else\r\n      if (element && document.activeElement === element)\r\n        hadFocus = true;\r\n      const activeIndex = this.validateActiveIndex(this.props.activeIndex);\r\n\r\n      this.setState(\r\n        () => ({ activeIndex }),\r\n        () => {\r\n          // istanbul ignore else\r\n          if (hadFocus) {\r\n            const newElement = this._anchorRefs[activeIndex].current;\r\n            // istanbul ignore else\r\n            if (newElement)\r\n              newElement.focus();\r\n          }\r\n        });\r\n    }\r\n  }\r\n\r\n  private _handleFocusItem = (index: number) => {\r\n    const itemRef = this._anchorRefs[index];\r\n    // istanbul ignore else\r\n    if (itemRef && itemRef.current)\r\n      itemRef.current.focus();\r\n  };\r\n\r\n  private _handleTabClick = (index: number) => {\r\n    this._activateTab(index);\r\n  };\r\n\r\n  /** Handle keydown on tabs */\r\n  private _handleKeyDownEvent(event: React.KeyboardEvent, index: number) {\r\n    this._itemKeyboardNavigator.handleKeyDownEvent(event, index);\r\n  }\r\n\r\n  /** Handle keyup on tabs */\r\n  private _handleKeyUpEvent(event: React.KeyboardEvent, index: number) {\r\n    this._itemKeyboardNavigator.handleKeyUpEvent(event, index);\r\n  }\r\n\r\n  private _activateTab = (index: number) => {\r\n    this.props.onActivateTab && this.props.onActivateTab(index);\r\n    this.setState({ activeIndex: index });\r\n  };\r\n\r\n  /** @internal */\r\n  public override render(): JSX.Element {\r\n    const ulClassNames = classnames(\r\n      this.props.mainClassName,\r\n      this.props.green && \"uicore-tabs-green\",\r\n      this.props.className,\r\n    );\r\n\r\n    const anyIconsPresent = (this.props.labels.reduce((a, b) => a + (isTabLabelWithIcon(b) ? 1 : 0), 0)) > 0;\r\n\r\n    return (\r\n      <ul className={ulClassNames} style={this.props.style}\r\n        role=\"tablist\"\r\n        aria-orientation={this.props.orientation === Orientation.Vertical ? \"vertical\" : \"horizontal\"}\r\n      >\r\n        {this.props.labels.map((label, index) => {\r\n          let disabled;\r\n          let tooltipElement: JSX.Element | undefined;\r\n          let title: string | undefined;\r\n          let subLabel: string | undefined;\r\n          let tabId = \"\";\r\n          let icon;\r\n          if (isTabLabel(label)) {\r\n            icon = IconHelper.getIconReactNode(label.icon);\r\n            subLabel = label.subLabel;\r\n            disabled = label.disabled;\r\n            tabId = label.tabId;\r\n            if (React.isValidElement(label.tooltip))\r\n              tooltipElement = label.tooltip;\r\n            else if (typeof label.tooltip === \"string\")\r\n              title = label.tooltip;\r\n          }\r\n          return <li key={index} title={title}\r\n            className={classnames(index === this.state.activeIndex && \"core-active\", disabled && \"core-tab-item-disabled\")}\r\n            role=\"tab\"\r\n            aria-selected={index === this.state.activeIndex}\r\n            data-for={`${tabId}`} /* to support react-tooltip */\r\n          >\r\n            {tooltipElement}\r\n            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\r\n            <a ref={this._anchorRefs[index]}\r\n              tabIndex={index === this.state.activeIndex ? 0 : -1}\r\n              onClick={() => this._handleTabClick(index)}\r\n              onKeyDown={(event) => this._handleKeyDownEvent(event, index)}\r\n              onKeyUp={(event) => this._handleKeyUpEvent(event, index)}\r\n              data-testid={`${tabId}`}\r\n              role=\"button\"\r\n            > <div className={classnames(\"uicore-tabs-inline-label\", disabled && \"core-tab-item-disabled\")}>\r\n                {anyIconsPresent && <span className=\"uicore-tabs-icon\">{icon}</span>}\r\n                <div className=\"uicore-tabs-label-subLabel-container\">\r\n                  <span>{(typeof label === \"string\") ? label : label.label}</span>\r\n                  {subLabel && <span className=\"uicore-tabs-subLabel\">{subLabel}</span>}\r\n                </div>\r\n              </div>\r\n            </a>\r\n          </li>;\r\n        }\r\n        )}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/core-react/tabs/classes.scss

@@ -4,5 +4,4 @@
 *--------------------------------------------------------------------------------------------*/
 @import "./index";
 
-.uicore-tabs-horizontal { @include uicore-tabs-horizontal; }
 .uicore-tabs-vertical   { @include uicore-tabs-vertical; }

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

@@ -2,5 +2,4 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "./horizontal";
 @import "./vertical";

package/lib/esm/core-react/tabs/tabs.scss

@@ -4,114 +4,93 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../style/index";
 @import "../icons/variables";
-@import "~@itwin/itwinui-css/scss/style/speed";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 @mixin uicore-tabs {
-
-  display:            block;
-  list-style:         none;
-  padding:            0;
-  margin:             0;
-  box-sizing:         border-box;
-  border:             none;
-  outline:            none;
+  display: block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
 
   > li {
-
-    display:        block;
-    position:       relative;
-    padding:        0;
-    margin:         0;
+    display: block;
+    position: relative;
+    padding: 0;
+    margin: 0;
 
     &.core-tab-item-disabled {
       pointer-events: none;
     }
 
     > a {
-
-      display:        block;
-      position:       relative;
-      padding:        $uicore-bordered-padding ( $iui-font-size - 1px ) $uicore-unbordered-padding;
-      margin:         0;
-      line-height:    $uicore-line-height;
-      color:          $buic-text-color;
-      cursor:         pointer;
+      display: block;
+      position: relative;
+      padding: $uicore-bordered-padding (var(--iui-font-size-1) - 1px)
+        $uicore-unbordered-padding;
+      margin: 0;
+      line-height: var(--iui-size-l);
+      color: var(--iui-color-text);
+      cursor: pointer;
 
       .uicore-tabs-inline-label {
-
         &.core-tab-item-disabled {
-          color: $buic-foreground-disabled;
+          color: var(--iui-color-text-disabled);
 
           .uicore-tabs-subLabel {
-            color: $buic-foreground-disabled;
+            color: var(--iui-color-text-disabled);
           }
         }
 
         .uicore-tabs-icon {
-          width: ( $uicore-icons-small + 12px );
-          height: ( $uicore-icons-small + 12px );
+          width: ($uicore-icons-small + 12px);
+          height: ($uicore-icons-small + 12px);
           display: flex;
           align-items: center;
         }
       }
 
       &::after {
-
-        content:            "";
-        position:           absolute;
-        z-index:            1;
-        transition:         all $iui-speed-fast;
-        top:                0;
-        left:               0;
-        background:         $buic-foreground-primary;
-        opacity:            0;
+        content: "";
+        position: absolute;
+        z-index: 1;
+        transition: all var(--iui-duration-1);
+        top: 0;
+        right: 0;
+        background: var(--iui-color-border-accent);
+        opacity: 0;
       }
 
       &:hover {
-
-        text-decoration:    none;
-        color:              $buic-foreground-activehover;
-
-        &::after {
-
-          opacity:        1;
-        }
+        text-decoration: none;
+        background-color: var(--iui-color-background-hover);
+        color: var(--iui-color-text-hover);
       }
     }
 
-    &.core-active {
-
-      > a {
-
-        font-weight:        $iui-font-weight-bold;
-
-        &::after {
-
-          opacity:        1;
-        }
-      }
+    &.core-active a::after {
+      opacity: 1;
     }
 
     .uicore-tabs-label-subLabel-container {
       display: flex;
       flex-direction: column;
       .uicore-tabs-subLabel {
-        font-size: $iui-font-size-small;
-        font-weight: $iui-font-weight-semibold;
+        font-size: var(--iui-font-size-0);
       }
     }
     &:not(.core-active) {
       .uicore-tabs-label-subLabel-container {
         .uicore-tabs-subLabel {
-          color: $buic-text-color-muted;
-          font-weight: $iui-font-weight-light;
+          color: var(--iui-color-text-muted);
+          font-weight: var(--iui-font-weight-light);
         }
       }
     }
   }
 
   &.uicore-tabs-green > li > a::after {
-    background-color:     $buic-foreground-success;
+    background-color: $buic-foreground-success;
   }
 }