@geoffcox/sterling-svelte 0.0.17 → 0.0.19

package/TextArea.svelte

@@ -1,10 +1,6 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
-export let value;
+<script>export let autoHeight = false;
 export let resize = "none";
-export let disabled = false;
-export let autoHeight = false;
-const inputId = uuid();
+export let value;
 let textAreaRef;
 const autoSetHeight = () => {
   if (autoHeight && textAreaRef) {
@@ -19,48 +15,41 @@ $:
   autoHeight, autoSetHeight();
 </script>
 
-<div class="sterling-text-area" style={`--TextArea__resize: ${resize};`}>
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <textarea
-    {...$$restProps}
-    bind:this={textAreaRef}
-    bind:value
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel
-    on:input={onInput}
-    {disabled}
-    rows="1"
-    {...$$restProps}
-  />
-</div>
+<textarea
+  bind:this={textAreaRef}
+  class="sterling-text-area"
+  rows="1"
+  style={`--TextArea__resize: ${resize};`}
+  bind:value
+  on:blur
+  on:click
+  on:change
+  on:copy
+  on:cut
+  on:paste
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:input
+  on:invalid
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:select
+  on:submit
+  on:reset
+  on:wheel
+  on:input={onInput}
+  {...$$restProps}
+/>
 
 <style>
   .sterling-text-area {
@@ -71,15 +60,17 @@ $:
     border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
     color: var(--stsv-Input__color);
-    overflow: hidden;
-    width: 100%;
+    font: inherit;
+    line-height: inherit;
     height: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    padding: 0;
+    outline: none;
+    padding: 0.5em;
     margin: 0;
+    min-height: 3em;
+    overflow: hidden;
+    resize: var(--TextArea__resize, none);
     transition: background-color 250ms, color 250ms, border-color 250ms;
+    width: 100%;
   }
 
   .sterling-text-area:hover {
@@ -88,7 +79,7 @@ $:
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-text-area:focus-wthin {
+  .sterling-text-area:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -105,49 +96,17 @@ $:
     cursor: not-allowed;
   }
 
-  textarea {
-    background: none;
-    box-sizing: border-box;
-    color: inherit;
-    font: inherit;
-    line-height: inherit;
-    padding: 0 0.5em 0.5em 0.5em;
-    min-height: 3em;
-    margin: 0.5em 0 0 0;
-    resize: var(--TextArea__resize, none);
-    width: 100%;
-  }
-
-  textarea,
-  textarea:hover,
-  textarea:focus-within,
-  textarea:disabled {
-    background-color: transparent;
-    border: none;
-    outline: none;
-  }
-
-  textarea::placeholder {
+  .sterling-text-area::placeholder {
     color: var(--stsv-Display__color--faint);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  textarea:disabled::placeholder {
+  .sterling-text-area:disabled::placeholder {
     color: var(--stsv-Display__color--disabled);
   }
 
-  .sterling-text-area > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-text-area > :global(label):empty {
-    margin: 0;
-  }
-
   @media (prefers-reduced-motion) {
-    .sterling-text-area,
-    .sterling-text-area textarea::placeholder {
+    .sterling-text-area {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -3,10 +3,9 @@ import type { TextAreaResize } from './TextArea.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value: string;
-        resize?: TextAreaResize | undefined;
-        disabled?: boolean | undefined;
         autoHeight?: boolean | undefined;
+        resize?: TextAreaResize | undefined;
+        value: string;
     };
     events: {
         blur: FocusEvent;
@@ -38,9 +37,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
-    };
+    slots: {};
 };
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;

package/Tree.svelte

@@ -1,10 +1,7 @@
 <script>import { createKeyborg } from "keyborg";
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
 import { treeContextKey } from "./Tree.constants";
-const inputId = uuid();
 export let composed = false;
 export let disabled = false;
 export let selectedValue = void 0;
@@ -58,18 +55,12 @@ onMount(() => {
 <div
   aria-disabled={disabled}
   class="sterling-tree"
-  class:disabled
   class:composed
+  class:disabled
   class:using-keyboard={usingKeyboard}
+  role="tree"
 >
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <div class="tree" role="tree">
-    <slot />
-  </div>
+  <slot />
 </div>
 
 <style>
@@ -81,12 +72,14 @@ onMount(() => {
     border-width: var(--stsv-Common__border-width);
     box-sizing: border-box;
     color: var(--stsv-Common__color);
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
     height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
     margin: 0;
-    overflow: hidden;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -112,31 +105,10 @@ onMount(() => {
   }
 
   .sterling-tree.composed,
-  .sterling-tree:hover.composed,
-  .sterling-tree:focus-visible.composed,
-  .sterling-tree.disabled.composed {
-    background: none;
+  .sterling-tree.composed:hover,
+  .sterling-tree.composed.using-keyboard:focus-visible,
+  .sterling-tree.composed.disabled {
     border: none;
     outline: none;
   }
-
-  .sterling-tree > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0.7em;
-  }
-
-  .sterling-tree > :global(label):empty {
-    margin: 0;
-  }
-
-  .tree {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    grid-row: 2 / span 1;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    outline: none;
-    position: relative;
-  }
 </style>

package/Tree.svelte.d.ts

@@ -13,7 +13,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
         default: {};
     };
 };

package/index.d.ts

@@ -7,10 +7,11 @@ export { applyLightTheme } from './theme/applyLightTheme';
 export { applyTheme } from './theme/applyTheme';
 export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
-export { neutrals } from './theme/colors';
+export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 export type { ButtonVariant, ButtonShape } from './Button.types';
+export type { FieldStatus } from './Field.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.types';
 export type { ProgressColorful } from './Progress.types';
@@ -24,6 +25,8 @@ export { treeContextKey, treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';
+import Dropdown from './Dropdown.svelte';
+import Field from './Field.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import List from './List.svelte';
@@ -47,4 +50,4 @@ 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 };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -9,7 +9,7 @@ export { applyLightTheme } from './theme/applyLightTheme';
 export { applyTheme } from './theme/applyTheme';
 export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
-export { neutrals } from './theme/colors';
+export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 // ----- Button ----- //
 export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
@@ -21,6 +21,8 @@ export { treeContextKey, treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';
+import Dropdown from './Dropdown.svelte';
+import Field from './Field.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import List from './List.svelte';
@@ -44,4 +46,4 @@ 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 };
+export { Button, Checkbox, Dialog, Dropdown, Field, 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.17",
+  "version": "0.0.19",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -55,6 +55,9 @@
     "./Button.types": "./Button.types.js",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./Dialog.svelte": "./Dialog.svelte",
+    "./Dropdown.svelte": "./Dropdown.svelte",
+    "./Field.svelte": "./Field.svelte",
+    "./Field.types": "./Field.types.js",
     "./Input.svelte": "./Input.svelte",
     "./Label.svelte": "./Label.svelte",
     "./List.constants": "./List.constants.js",
@@ -70,7 +73,6 @@
     "./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",

package/theme/colors.d.ts

@@ -1 +1,53 @@
-export declare const neutrals: Record<string, string>;
+export declare const neutralColors: Record<string, string>;
+/**
+ * Status colors for a light theme.
+ * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
+ */
+export declare const lightStatusColors: {
+    info: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    warning: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+};
+/**
+ * Status colors for a dark theme.
+ * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
+ */
+export declare const darkStatusColors: {
+    info: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    warning: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+};

package/theme/colors.js

@@ -1,4 +1,4 @@
-export const neutrals = {
+export const neutralColors = {
     neutral0: 'hsl(0, 0%, 0%)',
     neutral10: 'hsl(0, 0%, 12%)',
     neutral15: 'hsl(0, 0%, 15%)',
@@ -13,3 +13,55 @@ export const neutrals = {
     neutral98: 'hsl(0, 0%, 98%)',
     neutral100: 'hsl(0, 0%, 100%)'
 };
+/**
+ * Status colors for a light theme.
+ * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
+ */
+export const lightStatusColors = {
+    info: {
+        backgroundColor: 'hsl(198, 100%, 90%)',
+        borderColor: 'hsl(198, 100%, 40%)',
+        color: 'hsl(198, 100%, 40%)'
+    },
+    success: {
+        backgroundColor: 'hsl(146, 100%, 90%)',
+        borderColor: 'hsl(146, 100%, 30%)',
+        color: 'hsl(146, 80%, 25%)'
+    },
+    warning: {
+        backgroundColor: 'hsl(39, 100%, 80%)',
+        borderColor: 'hsl(39, 100%, 45%)',
+        color: 'hsl(39, 100%, 25%)'
+    },
+    error: {
+        backgroundColor: 'hsl(5, 100%, 90%)',
+        borderColor: 'hsl(5, 100%, 40%)',
+        color: 'hsl(5, 80%, 40%)'
+    }
+};
+/**
+ * Status colors for a dark theme.
+ * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
+ */
+export const darkStatusColors = {
+    info: {
+        backgroundColor: 'hsl(198, 100%, 10%)',
+        borderColor: 'hsl(198, 100%, 40%)',
+        color: 'hsl(198, 80%, 50%)'
+    },
+    success: {
+        backgroundColor: 'hsl(146, 100%, 10%)',
+        borderColor: 'hsl(146, 100%, 30%)',
+        color: 'hsl(146, 100%, 40%)'
+    },
+    warning: {
+        backgroundColor: 'hsl(39, 100%, 10%)',
+        borderColor: 'hsl(39, 100%, 45%)',
+        color: 'hsl(39, 100%, 50%)'
+    },
+    error: {
+        backgroundColor: 'hsl(5, 100%, 10%)',
+        borderColor: 'hsl(5, 100%, 40%)',
+        color: 'hsl(5, 100%, 50%)'
+    }
+};

package/theme/darkTheme.js

@@ -1,84 +1,91 @@
-import { neutrals } from './colors';
+import { darkStatusColors, neutralColors } from './colors';
 export const darkTheme = {
     // ----- Common ---- //
-    '--stsv-Common__background-color': neutrals.neutral15,
-    '--stsv-Common__border-color': neutrals.neutral92,
+    '--stsv-Common__background-color': neutralColors.neutral15,
+    '--stsv-Common__border-color': neutralColors.neutral92,
     '--stsv-Common__border-radius': '0',
     '--stsv-Common__border-style': 'solid',
     '--stsv-Common__border-width': '2px',
-    '--stsv-Common__color': neutrals.neutral100,
+    '--stsv-Common__color': neutralColors.neutral100,
     // hover
-    '--stsv-Common__background-color--hover': neutrals.neutral15,
-    '--stsv-Common__border-color--hover': neutrals.neutral96,
-    '--stsv-Common__color--hover': neutrals.neutral100,
+    '--stsv-Common__background-color--hover': neutralColors.neutral15,
+    '--stsv-Common__border-color--hover': neutralColors.neutral96,
+    '--stsv-Common__color--hover': neutralColors.neutral100,
     // focus
-    '--stsv-Common__background-color--focus': neutrals.neutral45,
-    '--stsv-Common__border-color--focus': neutrals.neutral100,
-    '--stsv-Common__color--focus': neutrals.neutral100,
+    '--stsv-Common__background-color--focus': neutralColors.neutral45,
+    '--stsv-Common__border-color--focus': neutralColors.neutral100,
+    '--stsv-Common__color--focus': neutralColors.neutral100,
     // outline
-    '--stsv-Common__outline-color': neutrals.neutral100,
+    '--stsv-Common__outline-color': neutralColors.neutral100,
     '--stsv-Common__outline-offset': '0',
     '--stsv-Common__outline-style': 'solid',
     '--stsv-Common__outline-width': '2px',
     // disabled
-    '--stsv-Common__background-color--disabled': neutrals.neutral45,
-    '--stsv-Common__border-color--disabled': neutrals.neutral92,
-    '--stsv-Common__color--disabled': neutrals.neutral60,
+    '--stsv-Common__background-color--disabled': neutralColors.neutral45,
+    '--stsv-Common__border-color--disabled': neutralColors.neutral92,
+    '--stsv-Common__color--disabled': neutralColors.neutral60,
     // ----- Layer ---- //
-    '--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,
+    '--stsv-Layer__background-color--1': neutralColors.neutral20,
+    '--stsv-Layer__color--1': neutralColors.neutral100,
+    '--stsv-Layer__background-color--2': neutralColors.neutral10,
+    '--stsv-Layer__color--2': neutralColors.neutral100,
+    '--stsv-Layer__background-color--3': neutralColors.neutral45,
+    '--stsv-Layer__color--3': neutralColors.neutral100,
     // ----- Button ----- //
-    '--stsv-Button__background-color': neutrals.neutral30,
-    '--stsv-Button__border-color': neutrals.neutral92,
+    '--stsv-Button__background-color': neutralColors.neutral30,
+    '--stsv-Button__border-color': neutralColors.neutral92,
     '--stsv-Button__border-radius': '8px',
     '--stsv-Button__border-style': 'solid',
     '--stsv-Button__border-width': '2px',
-    '--stsv-Button__color': neutrals.neutral100,
+    '--stsv-Button__color': neutralColors.neutral100,
     // hover
-    '--stsv-Button__background-color--hover': neutrals.neutral45,
-    '--stsv-Button__border-color--hover': neutrals.neutral96,
-    '--stsv-Button__color--hover': neutrals.neutral100,
+    '--stsv-Button__background-color--hover': neutralColors.neutral45,
+    '--stsv-Button__border-color--hover': neutralColors.neutral96,
+    '--stsv-Button__color--hover': neutralColors.neutral100,
     // active
-    '--stsv-Button__background-color--active': neutrals.neutral60,
-    '--stsv-Button__border-color--active': neutrals.neutral98,
-    '--stsv-Button__color--active': neutrals.neutral98,
+    '--stsv-Button__background-color--active': neutralColors.neutral60,
+    '--stsv-Button__border-color--active': neutralColors.neutral98,
+    '--stsv-Button__color--active': neutralColors.neutral98,
     // focus
-    '--stsv-Button__background-color--focus': neutrals.neutral45,
-    '--stsv-Button__border-color--focus': neutrals.neutral100,
-    '--stsv-Button__color--focus': neutrals.neutral100,
+    '--stsv-Button__background-color--focus': neutralColors.neutral45,
+    '--stsv-Button__border-color--focus': neutralColors.neutral100,
+    '--stsv-Button__color--focus': neutralColors.neutral100,
     // ----- Input ----- //
-    '--stsv-Input__background-color': neutrals.neutral30,
-    '--stsv-Input__border-color': neutrals.neutral92,
+    '--stsv-Input__background-color': neutralColors.neutral30,
+    '--stsv-Input__border-color': neutralColors.neutral92,
     '--stsv-Input__border-radius': '3px',
     '--stsv-Input__border-style': 'solid',
     '--stsv-Input__border-width': '2px',
-    '--stsv-Input__color': neutrals.neutral100,
+    '--stsv-Input__color': neutralColors.neutral100,
     // hover
-    '--stsv-Input__background-color--hover': neutrals.neutral15,
-    '--stsv-Input__border-color--hover': neutrals.neutral96,
-    '--stsv-Input__color--hover': neutrals.neutral100,
+    '--stsv-Input__background-color--hover': neutralColors.neutral15,
+    '--stsv-Input__border-color--hover': neutralColors.neutral96,
+    '--stsv-Input__color--hover': neutralColors.neutral100,
     // focus
-    '--stsv-Input__background-color--focus': neutrals.neutral15,
-    '--stsv-Input__border-color--focus': neutrals.neutral100,
-    '--stsv-Input__color--focus': neutrals.neutral100,
+    '--stsv-Input__background-color--focus': neutralColors.neutral15,
+    '--stsv-Input__border-color--focus': neutralColors.neutral100,
+    '--stsv-Input__color--focus': neutralColors.neutral100,
     // selected
-    '--stsv-Input__background-color--selected': neutrals.neutral60,
-    '--stsv-Input__border-color--selected': neutrals.neutral98,
-    '--stsv-Input__color--selected': neutrals.neutral100,
+    '--stsv-Input__background-color--selected': neutralColors.neutral60,
+    '--stsv-Input__border-color--selected': neutralColors.neutral98,
+    '--stsv-Input__color--selected': neutralColors.neutral100,
     // ----- Display ----- //
-    '--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'
+    '--stsv-Display__background-color': neutralColors.neutral20,
+    '--stsv-Display__border-color': neutralColors.neutral92,
+    '--stsv-Display__color': neutralColors.neutral80,
+    '--stsv-Display__color--subtle': neutralColors.neutral96,
+    '--stsv-Display__color--faint': neutralColors.neutral45,
+    '--stsv-Display__color--disabled': neutralColors.neutral45,
+    '--stsv-Info__background-color': darkStatusColors.info.backgroundColor,
+    '--stsv-Info__border-color': darkStatusColors.info.borderColor,
+    '--stsv-Info__color': darkStatusColors.info.color,
+    '--stsv-Success__background-color': darkStatusColors.success.backgroundColor,
+    '--stsv-Success__border-color': darkStatusColors.success.borderColor,
+    '--stsv-Success__color': darkStatusColors.success.color,
+    '--stsv-Warning__background-color': darkStatusColors.warning.backgroundColor,
+    '--stsv-Warning__border-color': darkStatusColors.warning.borderColor,
+    '--stsv-Warning__color': darkStatusColors.warning.color,
+    '--stsv-Error__background-color': darkStatusColors.error.backgroundColor,
+    '--stsv-Error__border-color': darkStatusColors.error.borderColor,
+    '--stsv-Error__color': darkStatusColors.error.color
 };