@geoffcox/sterling-svelte 0.0.26 → 0.0.27

package/Switch.svelte

@@ -1,6 +1,7 @@
 <script>import Label from "./Label.svelte";
 import { idGenerator } from "./idGenerator";
 export let checked = false;
+export let colorful = false;
 export let disabled = false;
 export let vertical = false;
 export let onText = void 0;
@@ -38,7 +39,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,7 +70,7 @@ export const focus = (options) => {
     on:mouseover
     on:mouseout
     on:mouseup
-    on:wheel
+    on:wheel|passive
     {...$$restProps}
   />
   {#if hasOffLabel}
@@ -144,6 +145,8 @@ export const focus = (options) => {
     grid-row: 1 / span 1;
   }
 
+  /* ----- input hidden ----- */
+
   input {
     font: inherit;
     margin: 0;
@@ -156,14 +159,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 +177,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 +204,43 @@ export const focus = (options) => {
     height: 2em;
   }
 
+  /* ----- labels ----- */
+
   .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,19 +250,47 @@ 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(
+      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;
@@ -247,16 +306,20 @@ 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,

package/Switch.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
         vertical?: boolean | undefined;
         onText?: string | 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,28 @@ 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(
+      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;
@@ -166,6 +166,8 @@ export const focus = (options) => {
     opacity: 1;
   }
 
+  /* ----- content -----*/
+
   .content {
     padding: 0 0.2em;
   }
@@ -174,6 +176,8 @@ export const focus = (options) => {
     padding-top: 0.25em;
   }
 
+  /* ----- indicator -----*/
+
   .indicator {
     background-color: transparent;
     border-radius: 10000px;
@@ -190,24 +194,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/TabList.svelte

@@ -2,14 +2,18 @@
 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 +34,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 +70,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 +83,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 +167,7 @@ const onKeydown = (event) => {
   }
 };
 setContext(TAB_LIST_CONTEXT_KEY, {
+  colorful: colorfulStore,
   disabled: disabledStore,
   selectedValue: selectedValueStore,
   vertical: verticalStore
@@ -168,9 +178,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 +209,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -210,7 +221,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 +243,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,5 +1,6 @@
 <script>import { onMount } from "svelte";
 export let autoHeight = false;
+export let colorful = false;
 export let disabled = false;
 export let resize = "none";
 export let value = "";
@@ -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,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   .sterling-text-area::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;
@@ -155,7 +180,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;
   }
 

package/TextArea.svelte.d.ts

@@ -3,8 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         autoHeight?: boolean | undefined;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
-        resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
+        resize?: "none" | "vertical" | "horizontal" | "both" | undefined;
         value?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
@@ -60,7 +61,7 @@ export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAr
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
     get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/Tooltip.svelte

@@ -114,6 +114,7 @@ const autoShowUpdate = () => {
   cleanupAutoShowUpdate = () => {
   };
   const element = reference;
+  open = false;
   if (element) {
     switch (showOn) {
       case "click":
@@ -171,12 +172,12 @@ onMount(() => {
   }
 
   .sterling-tooltip {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
-    color: var(--stsv-Common__color);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
+    color: var(--stsv-common__color);
     position: absolute;
     overflow: visible;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
@@ -187,11 +188,11 @@ onMount(() => {
     position: absolute;
     width: 10px;
     height: 10px;
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
     clip-path: polygon(0% 1%, 100% 1%, 100% 100%, 0% 1%);
   }
 </style>