@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/index.d.ts

@@ -1,6 +1,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
 export { idGenerator } from './idGenerator';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
@@ -8,40 +9,42 @@ export { applyLightTheme } from './theme/applyLightTheme';
 export { applyTheme } from './theme/applyTheme';
 export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
-export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
+export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueAccentColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export type { ButtonVariant, ButtonShape } from './Button.types';
-export type { FieldStatus } from './Field.types';
-export type { FloatingPlacement } from './floating-ui.types';
+export type { LabelStatus } from './Label.types';
+export type { FloatingPlacement, FloatingOffsetOptions } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext } from './MenuBar.types';
 export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
-export type { ProgressColorful } from './Progress.types';
+export type { ProgressStatus } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
 export type { TooltipShowOn } from './Tooltip.types';
 export type { TreeContext } from './Tree.types';
 export type { TreeItemContext } from './TreeItem.types';
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
-export { FIELD_STATUSES } from './Field.constants';
+export { LABEL_STATUSES } from './Label.constants';
 export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
-export { PROGRESS_COLORFULS } from './Progress.constants';
+export { PROGRESS_STATUSES } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
 export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
-export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
+export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
+import ColorPicker from './ColorPicker.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 HexColorSliders from './HexColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
+import Input from './Input.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
 import ListItem from './ListItem.svelte';
@@ -54,6 +57,7 @@ import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
+import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -65,4 +69,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, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -2,6 +2,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
 // ----- functions ----- //
 export { idGenerator } from './idGenerator';
 // ----- theme ----- //
@@ -11,29 +12,31 @@ export { applyLightTheme } from './theme/applyLightTheme';
 export { applyTheme } from './theme/applyTheme';
 export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
-export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
+export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueAccentColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 // ----- Component constants ----- //
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
-export { FIELD_STATUSES } from './Field.constants';
+export { LABEL_STATUSES } from './Label.constants';
 export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
-export { PROGRESS_COLORFULS } from './Progress.constants';
+export { PROGRESS_STATUSES } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
 export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
-export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
+export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
 // ----- Components ----- //
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
+import ColorPicker from './ColorPicker.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 HexColorSliders from './HexColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
+import Input from './Input.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
 import ListItem from './ListItem.svelte';
@@ -46,6 +49,7 @@ import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
+import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -57,4 +61,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, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, 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.26",
+  "version": "0.0.28",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^1.0.0",
     "@types/lodash-es": "^4.17.6",
+    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -43,6 +44,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@ctrl/tinycolor": "^3.6.0",
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"
@@ -53,13 +55,17 @@
     "./Button.svelte": "./Button.svelte",
     "./Button.types": "./Button.types.js",
     "./Checkbox.svelte": "./Checkbox.svelte",
+    "./ColorPicker.constants": "./ColorPicker.constants.js",
+    "./ColorPicker.svelte": "./ColorPicker.svelte",
+    "./ColorPicker.types": "./ColorPicker.types.js",
     "./Dialog.svelte": "./Dialog.svelte",
     "./Dropdown.svelte": "./Dropdown.svelte",
-    "./Field.constants": "./Field.constants.js",
-    "./Field.svelte": "./Field.svelte",
-    "./Field.types": "./Field.types.js",
+    "./HexColorSliders.svelte": "./HexColorSliders.svelte",
+    "./HslColorSliders.svelte": "./HslColorSliders.svelte",
     "./Input.svelte": "./Input.svelte",
+    "./Label.constants": "./Label.constants.js",
     "./Label.svelte": "./Label.svelte",
+    "./Label.types": "./Label.types.js",
     "./Link.constants": "./Link.constants.js",
     "./Link.svelte": "./Link.svelte",
     "./Link.types": "./Link.types.js",
@@ -83,6 +89,7 @@
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",
     "./Radio.svelte": "./Radio.svelte",
+    "./RgbColorSliders.svelte": "./RgbColorSliders.svelte",
     "./Select.svelte": "./Select.svelte",
     "./Slider.svelte": "./Slider.svelte",
     "./Switch.svelte": "./Switch.svelte",
@@ -106,6 +113,7 @@
     "./actions/clickOutside": "./actions/clickOutside.js",
     "./actions/forwardEvents": "./actions/forwardEvents.js",
     "./actions/portal": "./actions/portal.js",
+    "./actions/trapKeyboardFocus": "./actions/trapKeyboardFocus.js",
     "./floating-ui.constants": "./floating-ui.constants.js",
     "./floating-ui.types": "./floating-ui.types.js",
     "./idGenerator": "./idGenerator.js",

package/theme/applyTheme.js

@@ -1,6 +1,6 @@
 const _applyTheme = (node, theme) => {
     Object.keys(theme).map((key) => {
-        node.style.setProperty(key, theme[key] ? `${theme[key]}` : null);
+        node.style.setProperty(`--${key}`, theme[key] ? `${theme[key]}` : null);
     });
 };
 /**
@@ -12,7 +12,8 @@ export const applyTheme = (node, params) => {
     return {
         update: (params) => {
             if (params) {
-                _applyTheme(document.documentElement, params?.theme);
+                const element = params.atDocumentRoot ? document.documentElement : node;
+                _applyTheme(element, params?.theme);
             }
         }
     };

package/theme/colors.d.ts

@@ -51,3 +51,4 @@ export declare const darkStatusColors: {
         color: string;
     };
 };
+export declare const blueColors: Record<string, string>;

package/theme/colors.js

@@ -1,17 +1,17 @@
 export const neutralColors = {
-    neutral0: 'hsl(0, 0%, 0%)',
-    neutral10: 'hsl(0, 0%, 12%)',
-    neutral15: 'hsl(0, 0%, 15%)',
-    neutral20: 'hsl(0, 0%, 20%)',
-    neutral30: 'hsl(0, 0%, 30%)',
-    neutral45: 'hsl(0, 0%, 45%)',
-    neutral60: 'hsl(0, 0%, 60%)',
-    neutral75: 'hsl(0, 0%, 75%)',
-    neutral85: 'hsl(0, 0%, 85%)',
-    neutral92: 'hsl(0, 0%, 92%)',
-    neutral96: 'hsl(0, 0%, 96%)',
-    neutral98: 'hsl(0, 0%, 98%)',
-    neutral100: 'hsl(0, 0%, 100%)'
+    color0: 'hsl(0, 0%, 0%)',
+    color1: 'hsl(0, 0%, 12%)',
+    color2: 'hsl(0, 0%, 15%)',
+    color3: 'hsl(0, 0%, 20%)',
+    color4: 'hsl(0, 0%, 30%)',
+    color5: 'hsl(0, 0%, 45%)',
+    color6: 'hsl(0, 0%, 60%)',
+    color7: 'hsl(0, 0%, 75%)',
+    color8: 'hsl(0, 0%, 85%)',
+    color9: 'hsl(0, 0%, 92%)',
+    color10: 'hsl(0, 0%, 96%)',
+    color11: 'hsl(0, 0%, 98%)',
+    color12: 'hsl(0, 0%, 100%)'
 };
 /**
  * Status colors for a light theme.
@@ -65,3 +65,18 @@ export const darkStatusColors = {
         color: 'hsl(5, 100%, 50%)'
     }
 };
+export const blueColors = {
+    color0: 'hsl(204, 100%, 0%)',
+    color1: 'hsl(204, 100%, 18%)',
+    color2: 'hsl(204, 100%, 25%)',
+    color3: 'hsl(204, 100%, 30%)',
+    color4: 'hsl(204, 100%, 35%)',
+    color5: 'hsl(204, 100%, 42%)',
+    color6: 'hsl(204, 100%, 50%)',
+    color7: 'hsl(204, 100%, 60%)',
+    color8: 'hsl(204, 100%, 70%)',
+    color9: 'hsl(204, 100%, 80%)',
+    color10: 'hsl(204, 100%, 90%)',
+    color11: 'hsl(204, 100%, 98%)',
+    color12: 'hsl(204, 100%, 100%)'
+};

package/theme/darkTheme.js

@@ -1,100 +1,142 @@
-import { darkStatusColors, neutralColors } from './colors';
+import { blueColors, darkStatusColors, neutralColors } from './colors';
 export const darkTheme = {
     // ----- Common ---- //
-    '--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': neutralColors.neutral100,
-    // hover
-    '--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': neutralColors.neutral45,
-    '--stsv-Common__border-color--focus': neutralColors.neutral100,
-    '--stsv-Common__color--focus': neutralColors.neutral100,
+    'stsv-common__background-color': neutralColors.color2,
+    'stsv-common__border-color': neutralColors.color9,
+    'stsv-common__border-radius': '0',
+    'stsv-common__border-style': 'solid',
+    'stsv-common__border-width': '2px',
+    'stsv-common__color': neutralColors.color12,
+    'stsv-common__background-color--secondary': neutralColors.color3,
+    'stsv-common__color--secondary': neutralColors.color6,
+    'stsv-common__background-color--subtle': neutralColors.color2,
+    'stsv-common__color--subtle': neutralColors.color5,
+    'stsv-common__background-color--faint': neutralColors.color1,
+    'stsv-common__color--faint': neutralColors.color4,
     // outline
-    '--stsv-Common__outline-color': neutralColors.neutral100,
-    '--stsv-Common__outline-offset': '0',
-    '--stsv-Common__outline-style': 'solid',
-    '--stsv-Common__outline-width': '2px',
+    'stsv-common__outline-color': neutralColors.color12,
+    'stsv-common__outline-offset': '0',
+    'stsv-common__outline-style': 'solid',
+    'stsv-common__outline-width': '2px',
     // disabled
-    '--stsv-Common__background-color1--disabled': 'hsla(0, 0%, 0%, 20%)',
-    '--stsv-Common__background-color2--disabled': `hsla(0, 0%, 100%, 20%)`,
-    '--stsv-Disabled__background': 'repeating-linear-gradient(' +
-        '45deg,' +
-        'var(--stsv-Common__background-color1--disabled),' +
-        'var(--stsv-Common__background-color1--disabled) 3px,' +
-        'var(--stsv-Common__background-color2--disabled) 3px,' +
-        'var(--stsv-Common__background-color2--disabled) 6px' +
-        ')',
-    '--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': 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,
+    'stsv-common--disabled__stripe-color': 'hsla(0, 0%, 0%, 0.2)',
+    'stsv-common--disabled__stripe-color--alt': `hsla(0, 0%, 100%, 0.2)`,
+    'stsv-common--disabled__stripe-angle': '135deg',
+    'stsv-common--disabled__stripe-width': '3px',
+    // ----- Common--colorful (15) ---- //
+    'stsv-common--colorful__background-color': blueColors.color1,
+    'stsv-common--colorful__border-color': blueColors.color8,
+    'stsv-common--colorful__color': blueColors.color9,
+    'stsv-common--colorful__background-color--secondary': blueColors.color3,
+    'stsv-common--colorful__color--secondary': blueColors.color7,
+    'stsv-common--colorful__background-color--subtle': blueColors.color2,
+    'stsv-common--colorful__color--subtle': blueColors.color5,
+    'stsv-common--colorful__background-color--faint': blueColors.color1,
+    'stsv-common--colorful__color--faint': blueColors.color3,
     // ----- Button ----- //
-    '--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': neutralColors.neutral100,
+    'stsv-button__background-color': neutralColors.color4,
+    'stsv-button__border-color': neutralColors.color9,
+    'stsv-button__border-radius': '8px',
+    'stsv-button__border-style': 'solid',
+    'stsv-button__border-width': '2px',
+    'stsv-button__color': neutralColors.color12,
     // hover
-    '--stsv-Button__background-color--hover': neutralColors.neutral45,
-    '--stsv-Button__border-color--hover': neutralColors.neutral96,
-    '--stsv-Button__color--hover': neutralColors.neutral100,
+    'stsv-button__background-color--hover': neutralColors.color5,
+    'stsv-button__border-color--hover': neutralColors.color10,
+    'stsv-button__color--hover': neutralColors.color12,
     // active
-    '--stsv-Button__background-color--active': neutralColors.neutral60,
-    '--stsv-Button__border-color--active': neutralColors.neutral98,
-    '--stsv-Button__color--active': neutralColors.neutral98,
+    'stsv-button__background-color--active': neutralColors.color6,
+    'stsv-button__border-color--active': neutralColors.color11,
+    'stsv-button__color--active': neutralColors.color11,
+    // focus
+    'stsv-button__background-color--focus': neutralColors.color5,
+    'stsv-button__border-color--focus': neutralColors.color12,
+    'stsv-button__color--focus': neutralColors.color12,
+    // ----- Button--colorful (12) ---- //
+    'stsv-button--colorful__background-color': blueColors.color5,
+    'stsv-button--colorful__border-color': blueColors.color3,
+    'stsv-button--colorful__color': blueColors.color11,
+    // hover
+    'stsv-button--colorful__background-color--hover': blueColors.color6,
+    'stsv-button--colorful__border-color--hover': blueColors.color4,
+    'stsv-button--colorful__color--hover': blueColors.color11,
     // focus
-    '--stsv-Button__background-color--focus': neutralColors.neutral45,
-    '--stsv-Button__border-color--focus': neutralColors.neutral100,
-    '--stsv-Button__color--focus': neutralColors.neutral100,
+    'stsv-button--colorful__background-color--focus': blueColors.color6,
+    'stsv-button--colorful__border-color--focus': blueColors.color4,
+    'stsv-button--colorful__color--focus': blueColors.color11,
+    // active
+    'stsv-button--colorful__background-color--active': blueColors.color7,
+    'stsv-button--colorful__border-color--active': blueColors.color5,
+    'stsv-button--colorful__color--active': blueColors.color12,
     // ----- Input ----- //
-    '--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': neutralColors.neutral100,
+    'stsv-input__background-color': neutralColors.color4,
+    'stsv-input__border-color': neutralColors.color9,
+    'stsv-input__border-radius': '3px',
+    'stsv-input__border-style': 'solid',
+    'stsv-input__border-width': '2px',
+    'stsv-input__color': neutralColors.color12,
+    // hover
+    'stsv-input__background-color--hover': neutralColors.color2,
+    'stsv-input__border-color--hover': neutralColors.color10,
+    'stsv-input__color--hover': neutralColors.color12,
+    // focus
+    'stsv-input__background-color--focus': neutralColors.color2,
+    'stsv-input__border-color--focus': neutralColors.color12,
+    'stsv-input__color--focus': neutralColors.color12,
+    // selected
+    'stsv-input__background-color--selected': neutralColors.color6,
+    'stsv-input__border-color--selected': neutralColors.color11,
+    'stsv-input__color--selected': neutralColors.color12,
+    // ----- Input--colorful (12) ---- //
+    'stsv-input--colorful__background-color': blueColors.color4,
+    'stsv-input--colorful__border-color': blueColors.color9,
+    'stsv-input--colorful__color': blueColors.color12,
+    // hover
+    'stsv-input--colorful__background-color--hover': blueColors.color2,
+    'stsv-input--colorful__border-color--hover': blueColors.color10,
+    'stsv-input--colorful__color--hover': blueColors.color12,
+    // focus
+    'stsv-input--colorful__background-color--focus': blueColors.color2,
+    'stsv-input--colorful__border-color--focus': blueColors.color10,
+    'stsv-input--colorful__color--focus': blueColors.color12,
+    // selected
+    'stsv-input--colorful__background-color--selected': blueColors.color6,
+    'stsv-input--colorful__border-color--selected': blueColors.color11,
+    'stsv-input--colorful__color--selected': blueColors.color12,
+    // ----- Status ----- //
+    'stsv-status--info__background-color': darkStatusColors.info.backgroundColor,
+    'stsv-status--info__border-color': darkStatusColors.info.borderColor,
+    'stsv-status--info__color': darkStatusColors.info.color,
+    'stsv-status--success__background-color': darkStatusColors.success.backgroundColor,
+    'stsv-status--success__border-color': darkStatusColors.success.borderColor,
+    'stsv-status--success__color': darkStatusColors.success.color,
+    'stsv-status--warning__background-color': darkStatusColors.warning.backgroundColor,
+    'stsv-status--warning__border-color': darkStatusColors.warning.borderColor,
+    'stsv-status--warning__color': darkStatusColors.warning.color,
+    'stsv-status--danger__background-color': darkStatusColors.error.backgroundColor,
+    'stsv-status--danger__border-color': darkStatusColors.error.borderColor,
+    'stsv-status--danger__color': darkStatusColors.error.color,
+    // ----- Colorful (18) ---- //
+    'stsv-Colorful__background-color': blueColors.color4,
+    'stsv-Colorful__border-color': blueColors.color8,
+    'stsv-Colorful__border-radius': '0',
+    'stsv-Colorful__border-style': 'solid',
+    'stsv-Colorful__border-width': '2px',
+    'stsv-Colorful__color': blueColors.color11,
     // hover
-    '--stsv-Input__background-color--hover': neutralColors.neutral15,
-    '--stsv-Input__border-color--hover': neutralColors.neutral96,
-    '--stsv-Input__color--hover': neutralColors.neutral100,
+    'stsv-Colorful__background-color--hover': blueColors.color5,
+    'stsv-Colorful__border-color--hover': blueColors.color8,
+    'stsv-Colorful__color--hover': blueColors.color11,
     // focus
-    '--stsv-Input__background-color--focus': neutralColors.neutral15,
-    '--stsv-Input__border-color--focus': neutralColors.neutral100,
-    '--stsv-Input__color--focus': neutralColors.neutral100,
+    'stsv-Colorful__background-color--focus': blueColors.color5,
+    'stsv-Colorful__border-color--focus': blueColors.color8,
+    'stsv-Colorful__color--focus': blueColors.color11,
+    // active
+    'stsv-Colorful__background-color--active': blueColors.color7,
+    'stsv-Colorful__border-color--active': blueColors.color9,
+    'stsv-Colorful__color--active': blueColors.color12,
     // selected
-    '--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': 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
+    'stsv-Colorful__background-color--selected': neutralColors.color7,
+    'stsv-Colorful__border-color--selected': neutralColors.color9,
+    'stsv-Colorful__color--selected': neutralColors.color12
 };