@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/TreeItem.svelte

@@ -2,15 +2,28 @@
 import { slide } from "svelte/transition";
 import { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from "./Tree.constants";
 import TreeItemDisplay from "./TreeItemDisplay.svelte";
-import { writable } from "svelte/store";
+import { readable, writable } from "svelte/store";
+import { prefersReducedMotion } from "./stores/prefersReducedMotion";
 export let disabled = false;
+export let label = void 0;
 export let value;
+const slidNoOp = (node, params) => {
+  return { delay: 0, duration: 0 };
+};
+$:
+  slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
 const {
+  colorful,
+  disabled: treeDisabled,
   expandedValues,
-  selectedValue,
-  disabled: treeDisabled
+  selectedValue
 } = getContext(TREE_CONTEXT_KEY);
-const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
+const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {
+  colorful: readable(false),
+  disabled: readable(false),
+  expandedValues: readable([]),
+  selectedValue: readable(void 0)
+};
 let treeItemRef;
 $:
   hasChildren = $$slots.default;
@@ -238,6 +251,7 @@ A item in a Tree displaying the item and children.
   aria-expanded={expanded}
   bind:this={treeItemRef}
   class="sterling-tree-item"
+  class:colorful={$colorful}
   class:disabled={_disabled}
   data-value={value}
   role="treeitem"
@@ -271,7 +285,7 @@ A item in a Tree displaying the item and children.
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -283,17 +297,40 @@ A item in a Tree displaying the item and children.
     on:keydown={onKeydown}
   >
     <slot name="item" {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
-      <TreeItemDisplay {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
-        <svelte:fragment let:depth let:disabled let:expanded let:hasChildren let:selected let:value>
-          <slot name="label" {depth} {disabled} {expanded} {hasChildren} {selected} {value}
-            >{value}</slot
+      <TreeItemDisplay
+        colorful={$colorful}
+        {depth}
+        disabled={_disabled}
+        {expanded}
+        {hasChildren}
+        {selected}
+        {value}
+      >
+        <svelte:fragment
+          let:colorful
+          let:depth
+          let:disabled
+          let:expanded
+          let:hasChildren
+          let:selected
+          let:value
+        >
+          <slot
+            name="label"
+            {colorful}
+            {depth}
+            {disabled}
+            {expanded}
+            {hasChildren}
+            {selected}
+            {value}>{label || value}</slot
           >
         </svelte:fragment>
       </TreeItemDisplay>
     </slot>
   </div>
   {#if expanded && hasChildren}
-    <div class="children" transition:slide={{ duration: 200 }} role="group">
+    <div class="children" transition:slideMotion={{ duration: 200 }} role="group">
       <slot {depth} {selected} {value} />
     </div>
   {/if}

package/TreeItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         value: string;
         collapse?: (() => boolean) | undefined;
         expand?: (() => boolean) | undefined;
@@ -60,6 +61,7 @@ declare const __propDef: {
             value: string;
         };
         label: {
+            colorful: import("svelte/store").Readable<boolean>;
             depth: number;
             disabled: boolean;
             expanded: boolean;

package/TreeItemDisplay.svelte

@@ -2,6 +2,7 @@
 import { TREE_CONTEXT_KEY } from "./Tree.constants";
 import TreeChevron from "./TreeChevron.svelte";
 import { readable } from "svelte/store";
+export let colorful = false;
 export let depth = 0;
 export let disabled = false;
 export let expanded = false;
@@ -26,6 +27,7 @@ export const focus = (options) => {
 <div
   bind:this={divRef}
   class="sterling-tree-item-display"
+  class:colorful
   class:disabled={disabled && !$treeDisabled}
   class:item-disabled={disabled}
   class:expanded
@@ -61,11 +63,11 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <TreeChevron {expanded} {hasChildren} />
-  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
+  <slot {colorful} {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
 </div>
 
 <style>
@@ -74,7 +76,7 @@ export const focus = (options) => {
     align-items: center;
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 0.25em;
@@ -89,13 +91,23 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item-display:not(.item-disabled):not(.selected):hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-tree-item-display.selected {
-    background-color: var(--stsv-Input__background-color--selected);
-    color: var(--stsv-Input__color--selected);
+    background-color: var(--stsv-button__background-color--active);
+    color: var(--stsv-button__color--active);
+  }
+
+  .sterling-tree-item-display.colorful:not(.item-disabled):not(.selected):hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-tree-item-display.colorful.selected {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   .sterling-tree-item-display.disabled {
@@ -104,7 +116,13 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item-display::after {
-    background: var(--stsv-Disabled__background);
+    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
+    );
     bottom: 0;
     content: '';
     left: 0;

package/TreeItemDisplay.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         depth?: number | undefined;
         disabled?: boolean | undefined;
         expanded?: boolean | undefined;
@@ -49,6 +50,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             depth: number;
             disabled: boolean;
             expanded: boolean;

package/actions/clickOutside.js

@@ -9,7 +9,7 @@ export const clickOutside = (node, params) => {
         const targetNode = event?.target;
         if (targetNode &&
             !node.contains(targetNode) &&
-            (!ignoreOthers || ignoreOthers.every((x) => !x.contains(targetNode)))) {
+            (!ignoreOthers || ignoreOthers.filter(Boolean).every((x) => !x.contains(targetNode)))) {
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));

package/actions/trapKeyboardFocus.d.ts

@@ -0,0 +1,3 @@
+export declare const trapKeyboardFocus: (node: HTMLElement) => {
+    destroy: () => void;
+};

package/actions/trapKeyboardFocus.js

@@ -0,0 +1,52 @@
+const getFirstFocusable = (node) => {
+    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
+    // but do default to tabIndex >= 0.
+    const nodes = node.querySelectorAll('*');
+    const elements = Array.from(nodes)
+        .map((n) => n)
+        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
+    return elements.length > 0 ? elements[0] : null;
+};
+const getLastFocusable = (node) => {
+    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
+    // but do default to tabIndex >= 0.
+    const nodes = node.querySelectorAll('*');
+    const elements = Array.from(nodes)
+        .map((n) => n)
+        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
+    return elements.length > 0 ? elements[elements.length - 1] : null;
+};
+export const trapKeyboardFocus = (node) => {
+    const onKeydown = (e) => {
+        let handledFocus = false;
+        if (e.key === 'Tab') {
+            if (e.shiftKey) {
+                const firstFocusable = getFirstFocusable(node);
+                if (document.activeElement === firstFocusable) {
+                    const lastFocusable = getLastFocusable(node);
+                    lastFocusable?.focus();
+                    handledFocus = true;
+                }
+            }
+            else {
+                const lastFocusable = getLastFocusable(node);
+                if (document.activeElement === lastFocusable) {
+                    const firstFocusable = getFirstFocusable(node);
+                    firstFocusable?.focus();
+                    handledFocus = true;
+                }
+            }
+        }
+        if (handledFocus) {
+            e.stopPropagation();
+            e.preventDefault();
+            return false;
+        }
+    };
+    node.addEventListener('keydown', onKeydown);
+    return {
+        destroy: () => {
+            node.removeEventListener('keydown', onKeydown);
+        }
+    };
+};

package/floating-ui.types.d.ts

@@ -1,2 +1,4 @@
 import type { Placement } from '@floating-ui/dom';
+import type { Options as OffsetOptions } from '@floating-ui/core/src/middleware/offset';
 export type FloatingPlacement = Placement;
+export type FloatingOffsetOptions = OffsetOptions;

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,15 +9,15 @@ 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 { 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 } from './MenuItem.types';
+export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
 export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
@@ -29,7 +30,7 @@ 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 } from './MenuItem.constants';
+export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { PROGRESS_COLORFULS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
@@ -37,9 +38,12 @@ export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
 export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } 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 HexColorSliders from './HexColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import Link from './Link.svelte';
@@ -54,6 +58,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 +70,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, Field, 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,7 +12,7 @@ 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';
@@ -20,7 +21,7 @@ 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 } from './MenuItem.constants';
+export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { PROGRESS_COLORFULS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
@@ -29,9 +30,12 @@ export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemCo
 // ----- 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 HexColorSliders from './HexColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import Link from './Link.svelte';
@@ -46,6 +50,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 +62,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, Field, 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.25",
+  "version": "0.0.27",
   "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,11 +55,16 @@
     "./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.svelte": "./Label.svelte",
     "./Link.constants": "./Link.constants.js",
@@ -83,6 +90,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,10 +114,13 @@
     "./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",
     ".": "./index.js",
+    "./stores/prefersReducedMotion": "./stores/prefersReducedMotion.js",
+    "./stores/usingKeyboard": "./stores/usingKeyboard.js",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",

package/stores/prefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const prefersReducedMotion: import("svelte/store").Writable<boolean>;

package/stores/prefersReducedMotion.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const prefersReducedMotion = writable(false, (set) => {
+    const matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
+    set(matchMedia.matches);
+    const mediaChangeHandler = (e) => set(e.matches);
+    matchMedia.addEventListener('change', mediaChangeHandler);
+    return () => {
+        matchMedia.removeEventListener('change', mediaChangeHandler);
+    };
+});

package/stores/usingKeyboard.d.ts

@@ -0,0 +1 @@
+export declare const usingKeyboard: import("svelte/store").Writable<boolean>;

package/stores/usingKeyboard.js

@@ -0,0 +1,13 @@
+import { createKeyborg } from 'keyborg';
+import { writable } from 'svelte/store';
+export const usingKeyboard = writable(false, (set) => {
+    let keyborg = createKeyborg(window);
+    set(keyborg.isNavigatingWithKeyboard());
+    const keyborgHandler = (value) => {
+        set(value);
+    };
+    keyborg.subscribe(keyborgHandler);
+    return () => {
+        keyborg.unsubscribe(keyborgHandler);
+    };
+});

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%)'
+};