@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/Switch.svelte

@@ -1,10 +1,10 @@
-<script>import Label from "./Label.svelte";
-import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let disabled = false;
-export let vertical = false;
-export let onText = void 0;
+export let colorful = false;
 export let offText = void 0;
+export let onText = void 0;
+export let vertical = false;
 const inputId = idGenerator.nextId("Switch");
 let inputRef;
 let switchWidth = 0;
@@ -38,7 +38,7 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class="sterling-switch" class:vertical class:disabled>
+<div class="sterling-switch" class:colorful class:disabled class:vertical>
   <input
     bind:this={inputRef}
     bind:checked
@@ -69,14 +69,14 @@ export const focus = (options) => {
     on:mouseover
     on:mouseout
     on:mouseup
-    on:wheel
+    on:wheel|passive
     {...$$restProps}
   />
   {#if hasOffLabel}
     <div class="off-label">
       <slot name="offLabel" {checked} {disabled} {inputId} {offText} {vertical}>
         {#if offText}
-          <Label for={inputId} {disabled}>{offText}</Label>
+          <label for={inputId}>{offText}</label>
         {/if}
       </slot>
     </div>
@@ -94,7 +94,7 @@ export const focus = (options) => {
     <div class="on-label">
       <slot name="onLabel" {checked} {disabled} {inputId} {onText} {vertical}>
         {#if onText}
-          <Label for={inputId} {disabled}>{onText}</Label>
+          <label for={inputId}>{onText}</label>
         {/if}
       </slot>
     </div>
@@ -144,6 +144,8 @@ export const focus = (options) => {
     grid-row: 1 / span 1;
   }
 
+  /* ----- input hidden ----- */
+
   input {
     font: inherit;
     margin: 0;
@@ -156,14 +158,16 @@ export const focus = (options) => {
     opacity: 0;
   }
 
+  /* ----- switch ----- */
+
   .switch {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
     border-radius: 10000px;
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     font: inherit;
     pointer-events: none;
     position: relative;
@@ -172,21 +176,23 @@ export const focus = (options) => {
   }
 
   .sterling-switch:hover .switch {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   input:focus-visible ~ .switch {
-    background-color: var(--stsv-Input__background-color--focus);
-    border-color: var(--stsv-Input__border-color--focus);
-    color: var(--stsv-Common__color--focux);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    background-color: var(--stsv-input__background-color--focus);
+    border-color: var(--stsv-input__border-color--focus);
+    color: var(--stsv-common__color--focux);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
+  /* ----- switch vertical ----- */
+
   .sterling-switch:not(.vertical) .switch {
     width: 2em;
     height: 1.25em;
@@ -197,19 +203,49 @@ export const focus = (options) => {
     height: 2em;
   }
 
+  /* ----- labels ----- */
+
+  label {
+    color: var(--stsv-common__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
   .off-label,
   .on-label {
-    padding-top: var(--stsv-Button__border-width);
+    padding-top: var(--stsv-button__border-width);
+  }
+
+  /* ----- switch colorful ----- */
+
+  .sterling-switch.colorful .switch {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-switch.colorful:hover .switch {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input_--colorful_color--hover);
+  }
+
+  .sterling-switch.colorful input:focus-visible ~ .switch {
+    background-color: var(--stsv-input--colorful__background-color--focus);
+    border-color: var(--stsv-input--colorful__border-color--focus);
+    color: var(--stsv-input--colorful__color--focus);
   }
 
+  /* ----- thumb ----- */
+
   .thumb {
-    background-color: var(--stsv-Button__background-color);
-    border-color: var(--stsv-Button__border-color);
+    background-color: var(--stsv-button__background-color);
+    border-color: var(--stsv-button__border-color);
     border-radius: 10000px;
-    border-style: var(--stsv-Button__border-style);
-    border-width: var(--stsv-Button__border-width);
+    border-style: var(--stsv-button__border-style);
+    border-width: var(--stsv-button__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Button__color);
+    color: var(--stsv-button__color);
     display: block;
     font: inherit;
     height: 1.25em;
@@ -219,20 +255,50 @@ export const focus = (options) => {
   }
 
   .sterling-switch:hover .thumb {
-    background-color: var(--stsv-Button__background-color--hover);
-    border-color: var(--stsv-Button__border-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    border-color: var(--stsv-button__border-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-switch:active .thumb {
-    background-color: var(--stsv-Button__background-color--active);
-    border-color: var(--stsv-Button__border-color--active);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--active);
+    border-color: var(--stsv-button__border-color--active);
+    color: var(--stsv-button__color--hover);
   }
 
+  /* ----- thumb colorful ----- */
+
+  .sterling-switch.colorful .thumb {
+    background-color: var(--stsv-button--colorful__background-color);
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__color);
+  }
+
+  .sterling-switch.colorful:hover .thumb {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    border-color: var(--stsv-button--colorful__border-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-switch.colorful:active .thumb {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    border-color: var(--stsv-button--colorful__border-color--active);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  /* ----- thumb disabled ----- */
+
   .sterling-switch .thumb::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
     bottom: 0;
+    border-radius: 10000px;
     content: '';
     left: 0;
     opacity: 0;
@@ -247,20 +313,25 @@ export const focus = (options) => {
     opacity: 1;
   }
 
+  /* ----- thumb vertical ----- */
+
   .sterling-switch:not(.vertical) .thumb {
-    top: calc(-1 * var(--stsv-Button__border-width));
-    transform: translateX(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
+    top: calc(-1 * var(--stsv-button__border-width));
+    transform: translateX(calc(var(--thumb-offset) - var(--stsv-button__border-width)));
   }
 
   .sterling-switch.vertical .thumb {
-    left: calc(-1 * var(--stsv-Button__border-width));
-    transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
+    left: calc(-1 * var(--stsv-button__border-width));
+    transform: translateY(calc(var(--thumb-offset) - var(--stsv-button__border-width)));
   }
 
+  /* ----- reduced motion ----- */
+
   @media (prefers-reduced-motion) {
     .switch,
     .thumb,
-    .thumb::after {
+    .thumb::after,
+    label {
       transition: none;
     }
   }

package/Switch.svelte.d.ts

@@ -4,9 +4,10 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
-        vertical?: boolean | undefined;
-        onText?: string | undefined;
+        colorful?: boolean | undefined;
         offText?: string | undefined;
+        onText?: string | undefined;
+        vertical?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/Tab.svelte

@@ -7,6 +7,7 @@ export let text = void 0;
 export let value;
 let tabRef;
 const {
+  colorful,
   disabled: tabListDisabled,
   selectedValue,
   vertical
@@ -36,6 +37,7 @@ export const focus = (options) => {
   bind:this={tabRef}
   aria-selected={selected}
   class="sterling-tab"
+  class:colorful={$colorful}
   disabled={_disabled}
   class:selected
   class:using-keyboard={$usingKeyboard}
@@ -74,7 +76,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
 >
   <div class="content">
     <slot disabled={_disabled} {selected} {value} {text}>
@@ -90,13 +92,13 @@ export const focus = (options) => {
   .sterling-tab {
     align-content: center;
     align-items: center;
-    background-color: var(--stsv-Common__background-color);
+    background-color: var(--stsv-common__background-color);
     border-color: transparent;
-    border-radius: var(--stsv-Button__border-radius);
-    border-style: var(--stsv-Common__border-style);
+    border-radius: var(--stsv-button__border-radius);
+    border-style: var(--stsv-common__border-style);
     border-width: 0;
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -127,30 +129,29 @@ export const focus = (options) => {
     column-gap: 0.15em;
   }
 
-  .sterling-tab:hover {
-    background-color: var(--stsv-Common__background-color--hover);
-    color: var(--stsv-Common__color--hover);
-  }
-
-  .sterling-tab:active {
-    background-color: var(--stsv-Common__background-color--active);
-    color: var(--stsv-Common__color--active);
-  }
-
   .sterling-tab.using-keyboard:focus-visible {
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
+  /* ----- disabled -----*/
+
   .sterling-tab:disabled {
     cursor: not-allowed;
     outline: none;
   }
 
   .sterling-tab::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -166,6 +167,8 @@ export const focus = (options) => {
     opacity: 1;
   }
 
+  /* ----- content -----*/
+
   .content {
     padding: 0 0.2em;
   }
@@ -174,6 +177,8 @@ export const focus = (options) => {
     padding-top: 0.25em;
   }
 
+  /* ----- indicator -----*/
+
   .indicator {
     background-color: transparent;
     border-radius: 10000px;
@@ -190,24 +195,43 @@ export const focus = (options) => {
     width: 0.4em;
   }
 
-  .sterling-tab:hover .indicator {
-    background-color: var(--stsv-Display__color--faint);
+  .sterling-tab:not(.selected):not(:active):hover .indicator {
+    background-color: var(--stsv-input__border-color--hover);
+    opacity: 0.3;
   }
 
   .sterling-tab:active .indicator {
-    background-color: var(--stsv-Button__border-color--hover);
+    background-color: var(--stsv-input__border-color--selected);
   }
 
-  .sterling-tab:disabled .indicator,
-  .sterling-tab:disabled:hover .indicator,
-  .sterling-tab:disabled:active .indicator {
-    background-color: transparent;
+  .sterling-tab.selected .indicator {
+    background-color: var(--stsv-input__border-color--selected);
   }
 
-  .sterling-tab.selected .indicator {
-    background-color: var(--stsv-Input__color);
+  /* ----- indicator colorful -----*/
+
+  .sterling-tab.colorful:not(.selected):not(:active):hover .indicator {
+    background-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  .sterling-tab.colorful:active .indicator {
+    background-color: var(--stsv-input--colorful__border-color--selected);
+  }
+
+  .sterling-tab.colorful.selected .indicator {
+    background-color: var(--stsv-input--colorful__border-color--selected);
   }
 
+  /* ----- indicator disabled -----*/
+
+  .sterling-tab:disabled:not(.selected) .indicator,
+  .sterling-tab:disabled:not(.selected):hover .indicator,
+  .sterling-tab:disabled:not(.selected):active .indicator {
+    background-color: transparent;
+  }
+
+  /* ----- reduced motion -----*/
+
   @media (prefers-reduced-motion) {
     .sterling-tab,
     .sterling-tab::after,

package/Tab.svelte.d.ts

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        disabled?: boolean | undefined;
-        selected?: boolean | undefined;
-        text?: string | undefined;
-        value: string;
+        /**
+           * When true, the tab is disabled.
+           * The tab is also disabled if the tab list is disabled.
+           */ disabled?: boolean | undefined;
+        /** When true, the tab is selected. */ selected?: boolean | undefined;
+        /** The text of the tab when the default slot is not replaced. */ text?: string | undefined;
+        /** The value uniquely identifying this item within the tab list. */ value: string;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/TabList.svelte

@@ -1,15 +1,18 @@
 <script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
-import { usingKeyboard } from "./stores/usingKeyboard";
+export let colorful = false;
 export let disabled = false;
 export let vertical = false;
 export let selectedValue = void 0;
 let tabListRef;
 let lastSelectedTabRef;
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const selectedValueStore = writable(selectedValue);
 const verticalStore = writable(vertical);
+$:
+  colorfulStore.set(colorful);
 $:
   disabledStore.set(disabled);
 $:
@@ -30,7 +33,12 @@ export const blur = () => {
   tabListRef?.blur();
 };
 export const focus = (options) => {
-  tabListRef?.focus(options);
+  let selectedItem = getSelectedTabElement();
+  if (selectedValue && selectedItem) {
+    selectTab(selectedValue, selectedItem);
+  } else {
+    selectFirstTab();
+  }
 };
 const isElementTab = (candidate) => {
   return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "tab";
@@ -61,8 +69,8 @@ export const selectFirstTab = () => {
   return false;
 };
 export const selectPreviousTab = () => {
-  let selectedItem = getSelectedTabElement();
-  let candidate = selectedItem?.previousElementSibling;
+  let selectedTab = getSelectedTabElement();
+  let candidate = selectedTab?.previousElementSibling;
   while (candidate && !isElementTab(candidate)) {
     candidate = candidate.previousElementSibling;
   }
@@ -74,8 +82,8 @@ export const selectPreviousTab = () => {
   return false;
 };
 export const selectNextTab = () => {
-  let selectedItem = getSelectedTabElement();
-  let candidate = selectedItem?.nextElementSibling;
+  let selectedTab = getSelectedTabElement();
+  let candidate = selectedTab?.nextElementSibling;
   while (candidate && !isElementTab(candidate)) {
     candidate = candidate.nextElementSibling;
   }
@@ -158,6 +166,7 @@ const onKeydown = (event) => {
   }
 };
 setContext(TAB_LIST_CONTEXT_KEY, {
+  colorful: colorfulStore,
   disabled: disabledStore,
   selectedValue: selectedValueStore,
   vertical: verticalStore
@@ -168,9 +177,10 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   bind:this={tabListRef}
   class="sterling-tab-list"
-  role="tablist"
-  class:vertical
+  class:colorful
   class:disabled
+  class:vertical
+  role="tablist"
   on:blur
   on:click
   on:click={onClick}
@@ -198,7 +208,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -210,7 +220,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     box-sizing: border-box;
     display: grid;
     margin: 0;
-    padding: calc(2 * var(--stsv-Common__outline-width));
+    padding: calc(2 * var(--stsv-common__outline-width));
   }
 
   .sterling-tab-list:not(.vertical) {
@@ -232,7 +242,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   }
 
   .sterling-tab-list:hover {
-    color: var(--stsv-Common__color--hover);
+    color: var(--stsv-common__color--hover);
   }
 
   @media (prefers-reduced-motion) {

package/TabList.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
         vertical?: boolean | undefined;
         selectedValue?: string | undefined;

package/TabList.types.d.ts

@@ -1,5 +1,6 @@
 import type { Readable, Writable } from 'svelte/store';
 export type TabListContext = {
+    colorful: Readable<boolean>;
     disabled: Readable<boolean>;
     selectedValue: Writable<string | undefined>;
     vertical: Readable<boolean>;

package/TextArea.svelte

@@ -1,8 +1,9 @@
 <script>import { onMount } from "svelte";
-export let autoHeight = false;
 export let disabled = false;
-export let resize = "none";
 export let value = "";
+export let autoHeight = false;
+export let colorful = false;
+export let resize = "none";
 let textAreaRef;
 const autoSetHeight = () => {
   if (autoHeight && textAreaRef) {
@@ -42,7 +43,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<div class="sterling-text-area" class:disabled>
+<div class="sterling-text-area" class:colorful class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
@@ -81,7 +82,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     on:select
     on:submit
     on:reset
-    on:wheel
+    on:wheel|passive
     on:input={onInput}
     {...$$restProps}
   />
@@ -95,13 +96,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   textarea {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-radius: var(--stsv-Input__border-radius);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-radius: var(--stsv-input__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     display: block;
     font: inherit;
     line-height: inherit;
@@ -117,19 +118,37 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   textarea:hover {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   textarea:focus {
-    background-color: var(--stsv-Input__background-color--focus);
-    border-color: var(--stsv-Input__border-color--focus);
-    color: var(--stsv-Input__color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    background-color: var(--stsv-input__background-color--focus);
+    border-color: var(--stsv-input__border-color--focus);
+    color: var(--stsv-input__color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
+  }
+
+  .sterling-text-area.colorful textarea {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-text-area.colorful textarea:hover {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input--colorful__color--hover);
+  }
+
+  .sterling-text-area.colorful textarea:focus {
+    background-color: var(--stsv-input--colorful__background-color--focus);
+    border-color: var(--stsv-input--colorful__border-color--focus);
+    color: var(--stsv-input--colorful__color--focus);
   }
 
   .sterling-text-area:disabled {
@@ -138,7 +157,14 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   .sterling-text-area::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -155,7 +181,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   textarea::placeholder {
-    color: var(--stsv-Display__color--faint);
+    color: var(--stsv-common__color--subtle);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }