@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/index.js

@@ -1,3 +1,8 @@
+// ----- actions ----- //
+export { clickOutside } from './actions/clickOutside';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
+// ----- theme ----- //
 export {} from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -6,22 +11,37 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { clickOutside } from './clickOutside';
-import Button from './buttons/Button.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
-import Dialog from './surfaces/Dialog.svelte';
-import Input from './inputs/Input.svelte';
-import Label from './display/Label.svelte';
-import List from './containers/List.svelte';
-import Progress from './display/Progress.svelte';
-import Radio from './inputs/Radio.svelte';
-import Select from './inputs/Select.svelte';
-import Slider from './inputs/Slider.svelte';
-import Switch from './inputs/Switch.svelte';
-import Tab from './containers/Tab.svelte';
-import TabList from './containers/TabList.svelte';
-import TextArea from './inputs/TextArea.svelte';
-import Tree from './containers/Tree.svelte';
-import TreeChevron from './containers/TreeChevron.svelte';
-import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+// ----- Button ----- //
+export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
+// ----- Component constants ----- //
+export { listContextKey } from './List.constants';
+export { tabListContextKey } from './TabList.constants';
+export { treeContextKey, treeItemContextKey } from './Tree.constants';
+// ----- Components ----- //
+import Button from './Button.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuItemDisplay from './MenuItemDisplay.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+import TreeItemDisplay from './TreeItemDisplay.svelte';
+export { Button, Checkbox, Dialog, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -45,40 +45,56 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
+    "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0"
   },
   "exports": {
     "./package.json": "./package.json",
-    "./buttons/Button.svelte": "./buttons/Button.svelte",
-    "./buttons/Button.types": "./buttons/Button.types.js",
-    "./clickOutside": "./clickOutside.js",
-    "./containers/List.svelte": "./containers/List.svelte",
-    "./containers/ListItem.svelte": "./containers/ListItem.svelte",
-    "./containers/Tab.svelte": "./containers/Tab.svelte",
-    "./containers/TabList.svelte": "./containers/TabList.svelte",
-    "./containers/Tabs.constants": "./containers/Tabs.constants.js",
-    "./containers/Tabs.types": "./containers/Tabs.types.js",
-    "./containers/Tree.constants": "./containers/Tree.constants.js",
-    "./containers/Tree.svelte": "./containers/Tree.svelte",
-    "./containers/Tree.types": "./containers/Tree.types.js",
-    "./containers/TreeChevron.svelte": "./containers/TreeChevron.svelte",
-    "./containers/TreeItem.svelte": "./containers/TreeItem.svelte",
-    "./containers/TreeNode.svelte": "./containers/TreeNode.svelte",
-    "./display/Label.svelte": "./display/Label.svelte",
-    "./display/Progress.svelte": "./display/Progress.svelte",
-    "./display/Progress.types": "./display/Progress.types.js",
+    "./Button.svelte": "./Button.svelte",
+    "./Button.types": "./Button.types.js",
+    "./Checkbox.svelte": "./Checkbox.svelte",
+    "./Dialog.svelte": "./Dialog.svelte",
+    "./Input.svelte": "./Input.svelte",
+    "./Label.svelte": "./Label.svelte",
+    "./List.constants": "./List.constants.js",
+    "./List.svelte": "./List.svelte",
+    "./List.types": "./List.types.js",
+    "./ListItem.svelte": "./ListItem.svelte",
+    "./Menu.svelte": "./Menu.svelte",
+    "./MenuBar.svelte": "./MenuBar.svelte",
+    "./MenuButton.svelte": "./MenuButton.svelte",
+    "./MenuItem.svelte": "./MenuItem.svelte",
+    "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
+    "./MenuSeparator.svelte": "./MenuSeparator.svelte",
+    "./Menus.constants": "./Menus.constants.js",
+    "./Menus.types": "./Menus.types.js",
+    "./Menus.utils": "./Menus.utils.js",
+    "./Portal.svelte": "./Portal.svelte",
+    "./Progress.svelte": "./Progress.svelte",
+    "./Progress.types": "./Progress.types.js",
+    "./Radio.svelte": "./Radio.svelte",
+    "./Select.svelte": "./Select.svelte",
+    "./Slider.svelte": "./Slider.svelte",
+    "./Switch.svelte": "./Switch.svelte",
+    "./Tab.svelte": "./Tab.svelte",
+    "./TabList.constants": "./TabList.constants.js",
+    "./TabList.svelte": "./TabList.svelte",
+    "./TabList.types": "./TabList.types.js",
+    "./TextArea.svelte": "./TextArea.svelte",
+    "./TextArea.types": "./TextArea.types.js",
+    "./Tooltip.svelte": "./Tooltip.svelte",
+    "./Tooltip.types": "./Tooltip.types.js",
+    "./Tree.constants": "./Tree.constants.js",
+    "./Tree.svelte": "./Tree.svelte",
+    "./Tree.types": "./Tree.types.js",
+    "./TreeChevron.svelte": "./TreeChevron.svelte",
+    "./TreeItem.svelte": "./TreeItem.svelte",
+    "./TreeItemDisplay.svelte": "./TreeItemDisplay.svelte",
+    "./actions/clickOutside": "./actions/clickOutside.js",
+    "./actions/forwardEvents": "./actions/forwardEvents.js",
+    "./actions/portal": "./actions/portal.js",
     ".": "./index.js",
-    "./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
-    "./inputs/Input.svelte": "./inputs/Input.svelte",
-    "./inputs/Radio.svelte": "./inputs/Radio.svelte",
-    "./inputs/Select.svelte": "./inputs/Select.svelte",
-    "./inputs/Slider.svelte": "./inputs/Slider.svelte",
-    "./inputs/Switch.svelte": "./inputs/Switch.svelte",
-    "./inputs/TextArea.svelte": "./inputs/TextArea.svelte",
-    "./inputs/TextArea.types": "./inputs/TextArea.types.js",
-    "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
-    "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",

package/theme/darkTheme.js

@@ -1,92 +1,84 @@
 import { neutrals } from './colors';
 export const darkTheme = {
     // ----- Common ---- //
-    '--Common__background-color': neutrals.neutral15,
-    '--Common__border-color': neutrals.neutral92,
-    '--Common__border-radius': '0',
-    '--Common__border-style': 'solid',
-    '--Common__border-width': '2px',
-    '--Common__color': neutrals.neutral100,
+    '--stsv-Common__background-color': neutrals.neutral15,
+    '--stsv-Common__border-color': neutrals.neutral92,
+    '--stsv-Common__border-radius': '0',
+    '--stsv-Common__border-style': 'solid',
+    '--stsv-Common__border-width': '2px',
+    '--stsv-Common__color': neutrals.neutral100,
     // hover
-    '--Common__background-color--hover': neutrals.neutral15,
-    '--Common__border-color--hover': neutrals.neutral96,
-    '--Common__color--hover': neutrals.neutral100,
+    '--stsv-Common__background-color--hover': neutrals.neutral15,
+    '--stsv-Common__border-color--hover': neutrals.neutral96,
+    '--stsv-Common__color--hover': neutrals.neutral100,
     // focus
-    '--Common__background-color--focus': neutrals.neutral45,
-    '--Common__border-color--focus': neutrals.neutral100,
-    '--Common__color--focus': neutrals.neutral100,
+    '--stsv-Common__background-color--focus': neutrals.neutral45,
+    '--stsv-Common__border-color--focus': neutrals.neutral100,
+    '--stsv-Common__color--focus': neutrals.neutral100,
     // outline
-    '--Common__outline-color': neutrals.neutral100,
-    '--Common__outline-offset': '0',
-    '--Common__outline-style': 'solid',
-    '--Common__outline-width': '2px',
+    '--stsv-Common__outline-color': neutrals.neutral100,
+    '--stsv-Common__outline-offset': '0',
+    '--stsv-Common__outline-style': 'solid',
+    '--stsv-Common__outline-width': '2px',
     // disabled
-    '--Common__background-color--disabled': neutrals.neutral45,
-    '--Common__border-color--disabled': neutrals.neutral92,
-    '--Common__color--disabled': neutrals.neutral92,
+    '--stsv-Common__background-color--disabled': neutrals.neutral45,
+    '--stsv-Common__border-color--disabled': neutrals.neutral92,
+    '--stsv-Common__color--disabled': neutrals.neutral60,
     // ----- Layer ---- //
-    '--Layer__background-color--1': neutrals.neutral20,
-    '--Layer__color--1': neutrals.neutral100,
-    '--Layer__background-color--2': neutrals.neutral10,
-    '--Layer__color--2': neutrals.neutral100,
-    '--Layer__background-color--3': neutrals.neutral45,
-    '--Layer__color--3': neutrals.neutral100,
+    '--stsv-Layer__background-color--1': neutrals.neutral20,
+    '--stsv-Layer__color--1': neutrals.neutral100,
+    '--stsv-Layer__background-color--2': neutrals.neutral10,
+    '--stsv-Layer__color--2': neutrals.neutral100,
+    '--stsv-Layer__background-color--3': neutrals.neutral45,
+    '--stsv-Layer__color--3': neutrals.neutral100,
     // ----- Button ----- //
-    '--Button__background-color': neutrals.neutral45,
-    '--Button__border-color': neutrals.neutral92,
-    '--Button__border-radius': '8px',
-    '--Button__border-style': 'solid',
-    '--Button__border-width': '2px',
-    '--Button__color': neutrals.neutral100,
+    '--stsv-Button__background-color': neutrals.neutral30,
+    '--stsv-Button__border-color': neutrals.neutral92,
+    '--stsv-Button__border-radius': '8px',
+    '--stsv-Button__border-style': 'solid',
+    '--stsv-Button__border-width': '2px',
+    '--stsv-Button__color': neutrals.neutral100,
     // hover
-    '--Button__background-color--hover': neutrals.neutral45,
-    '--Button__border-color--hover': neutrals.neutral96,
-    '--Button__color--hover': neutrals.neutral100,
+    '--stsv-Button__background-color--hover': neutrals.neutral45,
+    '--stsv-Button__border-color--hover': neutrals.neutral96,
+    '--stsv-Button__color--hover': neutrals.neutral100,
     // active
-    '--Button__background-color--active': neutrals.neutral60,
-    '--Button__border-color--active': neutrals.neutral98,
-    '--Button__color--active': neutrals.neutral98,
+    '--stsv-Button__background-color--active': neutrals.neutral60,
+    '--stsv-Button__border-color--active': neutrals.neutral98,
+    '--stsv-Button__color--active': neutrals.neutral98,
     // focus
-    '--Button__background-color--focus': neutrals.neutral45,
-    '--Button__border-color--focus': neutrals.neutral100,
-    '--Button__color--focus': neutrals.neutral100,
-    // disabled
-    '--Button__background-color--disabled': neutrals.neutral75,
-    '--Button__border-color--disabled': neutrals.neutral92,
-    '--Button__color--disabled': neutrals.neutral92,
+    '--stsv-Button__background-color--focus': neutrals.neutral45,
+    '--stsv-Button__border-color--focus': neutrals.neutral100,
+    '--stsv-Button__color--focus': neutrals.neutral100,
     // ----- Input ----- //
-    '--Input__background-color': neutrals.neutral30,
-    '--Input__border-color': neutrals.neutral92,
-    '--Input__border-radius': '3px',
-    '--Input__border-style': 'solid',
-    '--Input__border-width': '2px',
-    '--Input__color': neutrals.neutral100,
+    '--stsv-Input__background-color': neutrals.neutral30,
+    '--stsv-Input__border-color': neutrals.neutral92,
+    '--stsv-Input__border-radius': '3px',
+    '--stsv-Input__border-style': 'solid',
+    '--stsv-Input__border-width': '2px',
+    '--stsv-Input__color': neutrals.neutral100,
     // hover
-    '--Input__background-color--hover': neutrals.neutral15,
-    '--Input__border-color--hover': neutrals.neutral96,
-    '--Input__color--hover': neutrals.neutral100,
+    '--stsv-Input__background-color--hover': neutrals.neutral15,
+    '--stsv-Input__border-color--hover': neutrals.neutral96,
+    '--stsv-Input__color--hover': neutrals.neutral100,
     // focus
-    '--Input__background-color--focus': neutrals.neutral15,
-    '--Input__border-color--focus': neutrals.neutral100,
-    '--Input__color--focus': neutrals.neutral100,
+    '--stsv-Input__background-color--focus': neutrals.neutral15,
+    '--stsv-Input__border-color--focus': neutrals.neutral100,
+    '--stsv-Input__color--focus': neutrals.neutral100,
     // selected
-    '--Input__background-color--selected': neutrals.neutral60,
-    '--Input__border-color--selected': neutrals.neutral98,
-    '--Input__color--selected': neutrals.neutral100,
-    // disabled
-    '--Input__background-color--disabled': neutrals.neutral45,
-    '--Input__border-color--disabled': neutrals.neutral85,
-    '--Input__color--disabled': neutrals.neutral85,
+    '--stsv-Input__background-color--selected': neutrals.neutral60,
+    '--stsv-Input__border-color--selected': neutrals.neutral98,
+    '--stsv-Input__color--selected': neutrals.neutral100,
     // ----- Display ----- //
-    '--Display__background-color': neutrals.neutral30,
-    '--Display__border-color': neutrals.neutral92,
-    '--Display__color': neutrals.neutral100,
-    '--Display__color--subtle': neutrals.neutral96,
-    '--Display__color--faint': neutrals.neutral45,
-    '--Display__color--disabled': neutrals.neutral45,
-    '--Display__color--info': '#025E73',
-    '--Display__color--progress': '#0099DD',
-    '--Display__color--success': '#03A64A',
-    '--Display__color--warning': '#F2A71B',
-    '--Display__color--error': '#A62B1F'
+    '--stsv-Display__background-color': neutrals.neutral30,
+    '--stsv-Display__border-color': neutrals.neutral92,
+    '--stsv-Display__color': neutrals.neutral100,
+    '--stsv-Display__color--subtle': neutrals.neutral96,
+    '--stsv-Display__color--faint': neutrals.neutral45,
+    '--stsv-Display__color--disabled': neutrals.neutral45,
+    '--stsv-Display__color--info': '#025E73',
+    '--stsv-Display__color--progress': '#0099DD',
+    '--stsv-Display__color--success': '#03A64A',
+    '--stsv-Display__color--warning': '#F2A71B',
+    '--stsv-Display__color--error': '#A62B1F'
 };

package/theme/lightTheme.js

@@ -1,92 +1,84 @@
 import { neutrals } from './colors';
 export const lightTheme = {
     // ----- Common ---- //
-    '--Common__background-color': neutrals.neutral100,
-    '--Common__border-color': neutrals.neutral60,
-    '--Common__border-radius': '0',
-    '--Common__border-style': 'solid',
-    '--Common__border-width': '2px',
-    '--Common__color': neutrals.neutral15,
+    '--stsv-Common__background-color': neutrals.neutral100,
+    '--stsv-Common__border-color': neutrals.neutral60,
+    '--stsv-Common__border-radius': '0',
+    '--stsv-Common__border-style': 'solid',
+    '--stsv-Common__border-width': '2px',
+    '--stsv-Common__color': neutrals.neutral15,
     // hover
-    '--Common__background-color--hover': neutrals.neutral100,
-    '--Common__border-color--hover': neutrals.neutral45,
-    '--Common__color--hover': neutrals.neutral15,
+    '--stsv-Common__background-color--hover': neutrals.neutral100,
+    '--stsv-Common__border-color--hover': neutrals.neutral45,
+    '--stsv-Common__color--hover': neutrals.neutral15,
     // focus
-    '--Common__background-color--focus': neutrals.neutral96,
-    '--Common__border-color--focus': neutrals.neutral0,
-    '--Common__color--focus': neutrals.neutral15,
+    '--stsv-Common__background-color--focus': neutrals.neutral96,
+    '--stsv-Common__border-color--focus': neutrals.neutral0,
+    '--stsv-Common__color--focus': neutrals.neutral15,
     // outline
-    '--Common__outline-color': neutrals.neutral15,
-    '--Common__outline-offset': '0',
-    '--Common__outline-style': 'solid',
-    '--Common__outline-width': '2px',
+    '--stsv-Common__outline-color': neutrals.neutral15,
+    '--stsv-Common__outline-offset': '0',
+    '--stsv-Common__outline-style': 'solid',
+    '--stsv-Common__outline-width': '2px',
     // disabled
-    '--Common__background-color--disabled': neutrals.neutral96,
-    '--Common__border-color--disabled': neutrals.neutral75,
-    '--Common__color--disabled': neutrals.neutral75,
+    '--stsv-Common__background-color--disabled': neutrals.neutral96,
+    '--stsv-Common__border-color--disabled': neutrals.neutral75,
+    '--stsv-Common__color--disabled': neutrals.neutral75,
     // ----- Layer ---- //
-    '--Layer__background-color--1': neutrals.neutral98,
-    '--Layer__color--1': neutrals.neutral15,
-    '--Layer__background-color--2': neutrals.neutral96,
-    '--Layer__color--2': neutrals.neutral15,
-    '--Layer__background-color--3': neutrals.neutral92,
-    '--Layer__color--3': neutrals.neutral15,
+    '--stsv-Layer__background-color--1': neutrals.neutral98,
+    '--stsv-Layer__color--1': neutrals.neutral15,
+    '--stsv-Layer__background-color--2': neutrals.neutral96,
+    '--stsv-Layer__color--2': neutrals.neutral15,
+    '--stsv-Layer__background-color--3': neutrals.neutral92,
+    '--stsv-Layer__color--3': neutrals.neutral15,
     // ----- Button ----- //
-    '--Button__background-color': neutrals.neutral96,
-    '--Button__border-color': neutrals.neutral60,
-    '--Button__border-radius': '8px',
-    '--Button__border-style': 'solid',
-    '--Button__border-width': '2px',
-    '--Button__color': neutrals.neutral15,
+    '--stsv-Button__background-color': neutrals.neutral96,
+    '--stsv-Button__border-color': neutrals.neutral60,
+    '--stsv-Button__border-radius': '8px',
+    '--stsv-Button__border-style': 'solid',
+    '--stsv-Button__border-width': '2px',
+    '--stsv-Button__color': neutrals.neutral15,
     // hover
-    '--Button__background-color--hover': neutrals.neutral96,
-    '--Button__border-color--hover': neutrals.neutral45,
-    '--Button__color--hover': neutrals.neutral15,
+    '--stsv-Button__background-color--hover': neutrals.neutral96,
+    '--stsv-Button__border-color--hover': neutrals.neutral45,
+    '--stsv-Button__color--hover': neutrals.neutral15,
     // active
-    '--Button__background-color--active': neutrals.neutral92,
-    '--Button__border-color--active': neutrals.neutral30,
-    '--Button__color--active': neutrals.neutral30,
+    '--stsv-Button__background-color--active': neutrals.neutral92,
+    '--stsv-Button__border-color--active': neutrals.neutral30,
+    '--stsv-Button__color--active': neutrals.neutral30,
     // focus
-    '--Button__background-color--focus': neutrals.neutral96,
-    '--Button__border-color--focus': neutrals.neutral0,
-    '--Button__color--focus': neutrals.neutral15,
-    // disabled
-    '--Button__background-color--disabled': neutrals.neutral85,
-    '--Button__border-color--disabled': neutrals.neutral60,
-    '--Button__color--disabled': neutrals.neutral60,
+    '--stsv-Button__background-color--focus': neutrals.neutral96,
+    '--stsv-Button__border-color--focus': neutrals.neutral0,
+    '--stsv-Button__color--focus': neutrals.neutral15,
     // ----- Input ----- //
-    '--Input__background-color': neutrals.neutral98,
-    '--Input__border-color': neutrals.neutral60,
-    '--Input__border-radius': '3px',
-    '--Input__border-style': 'solid',
-    '--Input__border-width': '2px',
-    '--Input__color': neutrals.neutral15,
+    '--stsv-Input__background-color': neutrals.neutral98,
+    '--stsv-Input__border-color': neutrals.neutral60,
+    '--stsv-Input__border-radius': '3px',
+    '--stsv-Input__border-style': 'solid',
+    '--stsv-Input__border-width': '2px',
+    '--stsv-Input__color': neutrals.neutral15,
     // hover
-    '--Input__background-color--hover': neutrals.neutral100,
-    '--Input__border-color--hover': neutrals.neutral45,
-    '--Input__color--hover': neutrals.neutral15,
+    '--stsv-Input__background-color--hover': neutrals.neutral100,
+    '--stsv-Input__border-color--hover': neutrals.neutral45,
+    '--stsv-Input__color--hover': neutrals.neutral15,
     // focus
-    '--Input__background-color--focus': neutrals.neutral100,
-    '--Input__border-color--focus': neutrals.neutral15,
-    '--Input__color--focus': neutrals.neutral15,
+    '--stsv-Input__background-color--focus': neutrals.neutral100,
+    '--stsv-Input__border-color--focus': neutrals.neutral15,
+    '--stsv-Input__color--focus': neutrals.neutral15,
     // selected
-    '--Input__background-color--selected': neutrals.neutral92,
-    '--Input__border-color--selected': neutrals.neutral30,
-    '--Input__color--selected': neutrals.neutral15,
-    // disabled
-    '--Input__background-color--disabled': neutrals.neutral96,
-    '--Input__border-color--disabled': neutrals.neutral75,
-    '--Input__color--disabled': neutrals.neutral75,
+    '--stsv-Input__background-color--selected': neutrals.neutral92,
+    '--stsv-Input__border-color--selected': neutrals.neutral30,
+    '--stsv-Input__color--selected': neutrals.neutral15,
     // ----- Display ----- //
-    '--Display__background-color': neutrals.neutral92,
-    '--Display__border-color': neutrals.neutral60,
-    '--Display__color': neutrals.neutral15,
-    '--Display__color--subtle': neutrals.neutral30,
-    '--Display__color--faint': neutrals.neutral85,
-    '--Display__color--disabled': neutrals.neutral85,
-    '--Display__color--info': '#025E73',
-    '--Display__color--progress': '#0099DD',
-    '--Display__color--success': '#03A64A',
-    '--Display__color--warning': '#F2A71B',
-    '--Display__color--error': '#A62B1F'
+    '--stsv-Display__background-color': neutrals.neutral92,
+    '--stsv-Display__border-color': neutrals.neutral60,
+    '--stsv-Display__color': neutrals.neutral15,
+    '--stsv-Display__color--subtle': neutrals.neutral30,
+    '--stsv-Display__color--faint': neutrals.neutral85,
+    '--stsv-Display__color--disabled': neutrals.neutral85,
+    '--stsv-Display__color--info': '#025E73',
+    '--stsv-Display__color--progress': '#0099DD',
+    '--stsv-Display__color--success': '#03A64A',
+    '--stsv-Display__color--warning': '#F2A71B',
+    '--stsv-Display__color--error': '#A62B1F'
 };