srcdev-nuxt-components 4.0.6 → 5.0.1

package/components/skip-links/SkipLinks.vue

@@ -0,0 +1,85 @@
+<template>
+  <ul class="home-link-navigation" aria-label="Home Navigation">
+    <li class="home-link"><a href="/">Logo</a></li>
+    <li class="skip-links">
+      <ul class="skip-links-nav">
+        <li class="skip-link-item"><a href="#main-content" class="skip-link" ref="skipLink">Skip to main content</a></li>
+        <li class="skip-link-item"><a href="#footer" class="skip-link">Skip to footer</a></li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="css">
+.home-link-navigation {
+  position: relative;
+  list-style: none;
+  padding: 0;
+
+  .skip-links {
+    list-style: none;
+    background-color: black;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 40px;
+    left: 0;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+
+    &:focus-within {
+      height: auto;
+      z-index: 1000;
+    }
+
+    .skip-links-nav {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      background-color: black;
+
+      border: 1px solid white;
+
+      list-style: none;
+      padding: 0.2rem;
+      margin: 0;
+
+      .skip-link-item {
+        padding: 0.2rem;
+
+        .skip-link {
+          display: block;
+          color: white;
+          text-decoration: none;
+          margin: 0.2rem;
+
+          padding: 0.8rem 1.2rem;
+          text-wrap: nowrap;
+
+          &:focus-visible {
+            outline: 2px solid white;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* .skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: #fff;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition: top 0.3s;
+}
+
+.skip-link:focus {
+  top: 0;
+} */
+</style>

package/components/{presentation/tabs → tabs}/TabsCore.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tabs-core" :class="`axis-${axis}`">
     <ul role="tablist" aria-labelledby="channel-name" ref="tabsNavRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
-      <li v-for="(index, key) in navItems" :key="key">
+      <li v-for="(index, key) in itemCount" :key="key">
         <button
           @click.prevent="navItemClicked($event)"
           @mouseover="navItemHovered($event)"
@@ -17,7 +17,7 @@
       </li>
     </ul>
     <div class="tab-content-wrapper">
-      <div v-for="(item, key) in navItems" :key="key" class="tab-content" :aria-labelledby="`tab-${key}-trigger`" :id="`tab-${key}-content`" role="region" aria-hidden="true" ref="tabsContentRefs">
+      <div v-for="(item, key) in itemCount" :key="key" class="tab-content" :aria-labelledby="`tab-${key}-trigger`" :id="`tab-${key}-content`" role="region" aria-hidden="true" ref="tabsContentRefs">
         <slot :name="`tab-${key}-content`"></slot>
       </div>
     </div>
@@ -25,8 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import type { ITabNav } from '@/types/types.tabs';
-
 const props = defineProps({
   tag: {
     type: String as PropType<string>,
@@ -40,9 +38,9 @@ const props = defineProps({
     type: Number as PropType<number>,
     default: 200,
   },
-  navItems: {
-    type: Array as PropType<ITabNav[]>,
-    required: true,
+  itemCount: {
+    type: Number as PropType<number>,
+    default: 0,
   },
   trackHover: {
     type: Boolean as PropType<boolean>,
@@ -76,24 +74,6 @@ onMounted(() => {
 
 <style lang="css">
 .tabs-core {
-  /*
-  * CSS var within /assets/styles/components/tabs.css
-  */
-  --_tabs-default-text: var(--tabs-default-text, light-dark(var(--gray-12), var(--gray-0)));
-  --_tabs-active-bg: var(--tabs-active-bg, light-dark(var(--gray-12), var(--gray-0)));
-  --_tabs-active-text: var(--tabs-active-text, light-dark(var(--gray-0), var(--gray-12)));
-  --_tabs-active-indicator: var(--tabs-active-indicator, light-dark(var(--gray-12), var(--gray-0)));
-  --_tabs-hovered-bg: var(--tabs-hovered-bg, light-dark(var(--gray-7), var(--gray-3)));
-  --_tabs-hovered-text: var(--tabs-hovered-text, light-dark(var(--gray-0), var(--gray-12)));
-  --_tabs-border-bottom: var(--tabs-border-bottom, 0.1rem solid var(--gray-6));
-  --_tabs-content-border: var(--tabs-content-border, 0.1rem solid var(--gray-6));
-  --_tabs-content-outline: var(--tabs-content-outline, 0.1rem solid var(--gray-6));
-  --_tabs-content-bg: var(--tabs-content-bg, light-dark(var(--gray-12), var(--gray-0)));
-  --_tabs-content-start-start-radius: var(--tabs-content-start-start-radius, 0);
-  --_tabs-content-start-end-radius: var(--tabs-content-start-end-radius, 0);
-  --_tabs-content-end-start-radius: var(--tabs-content-end-start-radius, 0);
-  --_tabs-content-end-end-radius: var(--tabs-content-end-end-radius, 0);
-
   .tabs-list {
     position: relative;
     display: flex;
@@ -163,24 +143,24 @@ onMounted(() => {
     border-bottom: var(--_tabs-border-bottom);
 
     .nav__hovered {
-      background: var(--_tabs-hovered-bg);
-      color: var(--_tabs-hovered-text);
+      background: light-dark(var(--gray-7), var(--gray-3));
+      color: light-dark(var(--gray-0), var(--gray-12));
     }
 
     .nav__active {
-      background: var(--_tabs-active-bg);
-      color: var(--_tabs-active-text);
+      background: light-dark(var(--gray-12), var(--gray-0));
+      color: light-dark(var(--gray-0), var(--gray-12));
     }
 
     .nav__active-indicator {
-      background: var(--_tabs-active-indicator);
+      background: light-dark(var(--gray-12), var(--gray-0));
       height: 0.4rem;
     }
 
     .tabs-list-item {
       background: transparent;
       border: 0;
-      color: var(--_tabs-default-text);
+      color: light-dark(var(--gray-12), var(--gray-0));
       cursor: pointer;
       font: inherit;
       text-transform: uppercase;
@@ -189,16 +169,15 @@ onMounted(() => {
       padding: 1em 2em;
 
       &:hover {
-        /* background: var(--_tabs-hovered-bg); */
-        color: var(--_tabs-hovered-text);
+        color: light-dark(var(--gray-0), var(--gray-12));
       }
 
       &[aria-selected='true'] {
-        color: var(--_tabs-active-text);
+        color: light-dark(var(--gray-0), var(--gray-12));
       }
 
       &.transitioning {
-        color: var(--_tabs-hovered-text);
+        color: light-dark(var(--gray-0), var(--gray-12));
       }
     }
   }
@@ -207,29 +186,19 @@ onMounted(() => {
     display: grid;
     grid-template-areas: 'element-stack';
 
+    background-color: light-dark(var(--gray-9), var(--gray-10));
+    border: 0.1rem solid var(--gray-6);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    outline: 0.1rem solid var(--gray-6);
+
     .tab-content {
       grid-area: element-stack;
       display: none;
     }
   }
-
-  /*
-  * User configurable variables
-  */
-
-  .tab-content-wrapper {
-    background: var(--_tabs-content-bg);
-    border: var(--_tabs-content-border);
-    border-start-start-radius: var(--_tabs-content-start-start-radius);
-    border-start-end-radius: var(--_tabs-content-start-end-radius);
-    border-end-start-radius: var(--_tabs-content-end-start-radius);
-    border-end-end-radius: var(--_tabs-content-end-end-radius);
-
-    outline: var(--_tabs-content-outline);
-
-    /* .tab-content {
-    } */
-  }
 }
 
 /*
@@ -253,17 +222,17 @@ onMounted(() => {
         text-align: left;
         width: 100%;
 
-        /* &:hover {
-          color: var(--_tabs-hovered-text);
+        &:hover {
+          /* color: light-dark(var(--gray-0), var(--gray-12)); */
         }
 
         &[aria-selected='true'] {
-          color: var(--_tabs-active-text);
+          /* color: var(--_tabs-active-text); */
         }
 
         &.transitioning {
-          color: var(--_tabs-hovered-text);
-        } */
+          /* color: light-dark(var(--gray-0), var(--gray-12)); */
+        }
       }
 
       .nav__hovered {

package/composables/useDialogControls.ts

@@ -3,7 +3,15 @@ export const useDialogControls = () => {
     [key: string]: boolean;
   }
 
+  interface DialogCallbacks {
+    [key: string]: {
+      onConfirm?: () => void;
+      onCancel?: () => void;
+    };
+  }
+
   const dialogsConfig = reactive<DialogConfig>({});
+  const dialogCallbacks = reactive<DialogCallbacks>({});
 
   function initialiseDialogs(dialogIds: string[]) {
     dialogIds.forEach((id) => {
@@ -11,7 +19,19 @@ export const useDialogControls = () => {
     });
   }
 
-  const controlDialogs = (name: string, state: boolean) => {
+  function registerDialogCallbacks(dialogId: string, callbacks: { onConfirm?: () => void; onCancel?: () => void }) {
+    dialogCallbacks[dialogId] = callbacks;
+  }
+
+  const controlDialogs = (name: string, state: boolean, action?: 'confirm' | 'cancel') => {
+    if (!state && action && dialogCallbacks[name]) {
+      // Execute callback before closing dialog
+      if (action === 'confirm' && dialogCallbacks[name].onConfirm) {
+        dialogCallbacks[name].onConfirm!();
+      } else if (action === 'cancel' && dialogCallbacks[name].onCancel) {
+        dialogCallbacks[name].onCancel!();
+      }
+    }
     dialogsConfig[name] = state;
   };
 
@@ -19,5 +39,6 @@ export const useDialogControls = () => {
     dialogsConfig,
     controlDialogs,
     initialiseDialogs,
+    registerDialogCallbacks,
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "4.0.6",
+  "version": "5.0.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

package/assets/styles/a11y/index.css

@@ -1,2 +0,0 @@
-@import './_variables';
-@import './_utils';

package/assets/styles/forms/index.css

@@ -1,2 +0,0 @@
-@import './variables/index.css';
-@import './themes/index.css';

package/assets/styles/forms/themes/_error.css

@@ -1,77 +0,0 @@
-:root {
-  [data-form-theme='error'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-border: var(--red-8);
-    --theme-form-input-border-active: var(--red-2);
-    --theme-form-input-border-focus: var(--red-2);
-    --theme-form-input-outline: white;
-    --theme-form-input-outline-active: var(--red-6);
-    --theme-form-input-outline-focus: var(--red-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-
-    --theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
-
-    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
-    --theme-form-checkbox-outline: light-dark(var(--red-1), var(--red-1));
-    --theme-form-checkbox-shadow: transparent;
-    --theme-form-checkbox-shadow-focus: var(--red-6);
-    --theme-form-checkbox-symbol: var(--red-12);
-
-    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-radio-border: light-dark(var(--red-12), var(--red-12));
-    --theme-form-radio-outline: light-dark(var(--red-1), var(--red-1));
-    --theme-form-radio-shadow: transparent;
-    --theme-form-radio-shadow-focus: var(--red-6);
-    --theme-form-radio-symbol: var(--red-12);
-
-    --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
-
-    /*
-    * ToggleSwitch
-    **/
-    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
-
-    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--red-12), var(--red-1));
-
-    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--red-12), var(--red-12));
-    --theme-form-toggle-symbol-off: var(--orange-12);
-    --theme-form-toggle-symbol-on: var(--gray-12);
-    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
-    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
-
-    /*
-    * Checkbox as button
-    **/
-
-    --theme-checkbox-radio-button-bg-default: light-dark(var(--red-1), var(--red-1));
-
-    --theme-checkbox-radio-button-border-default: light-dark(var(--red-12), var(--red-12));
-    --theme-checkbox-radio-button-border-width: 0.1rem;
-
-    --theme-checkbox-radio-button-outline-default: light-dark(var(--red-5), var(--red-5));
-    --theme-checkbox-radio-button-outline-width: 0.1rem;
-
-    --theme-checkbox-radio-button-label-default: light-dark(var(--red-12), var(--red-12));
-  }
-
-  [data-btn-theme='error'] {
-    --theme-btn-bg: var(--red-12);
-    --theme-btn-border: var(--red-0);
-    --theme-btn-outline: var(--red-12);
-    --theme-btn-text: var(--red-0);
-
-    --theme-btn-bg-hover: var(--red-0);
-    --theme-btn-border-hover: var(--red-12);
-    --theme-btn-outline-hover: var(--red-0);
-    --theme-btn-text-hover: var(--red-12);
-
-    --theme-btn-bg-focus: var(--red-0);
-    --theme-btn-border-focus: var(--red-12);
-    --theme-btn-outline-focus: var(--red-0);
-    --theme-btn-text-focus: var(--red-12);
-
-    --theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
-  }
-}

package/assets/styles/forms/themes/_ghost.css

@@ -1,77 +0,0 @@
-:root {
-  [data-form-theme='ghost'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-border: var(--gray-8);
-    --theme-form-input-border-active: var(--gray-2);
-    --theme-form-input-border-focus: var(--gray-2);
-    --theme-form-input-outline: white;
-    --theme-form-input-outline-active: var(--gray-6);
-    --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
-
-    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
-    --theme-form-checkbox-shadow: transparent;
-    --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-12);
-
-    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
-    --theme-form-radio-shadow: transparent;
-    --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-12);
-
-    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
-
-    /*
-    * ToggleSwitch
-    **/
-    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
-    --form-element-border-width: 0.1rem;
-    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
-    --form-element-border-width: 0.1rem;
-    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-toggle-symbol-off: var(--gray-4);
-    --theme-form-toggle-symbol-on: var(--gray-12);
-    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
-    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
-
-    /*
-    * Checkbox as button
-    **/
-
-    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
-
-    --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
-    --theme-checkbox-radio-button-border-width: 0.1rem;
-
-    --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
-    --theme-checkbox-radio-button-outline-width: 0.1rem;
-
-    --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
-  }
-
-  [data-btn-theme='ghost'] {
-    --theme-btn-bg: transparent;
-    --theme-btn-border: var(--gray-0);
-    --theme-btn-outline: var(--gray-12);
-    --theme-btn-text: light-dark(var(--gray-12), var(--gray-0));
-
-    --theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-8));
-    --theme-btn-border-hover: light-dark(var(--gray-12), var(--gray-0));
-    --theme-btn-outline-hover: light-dark(var(--gray-12), var(--gray-0));
-    --theme-btn-text-hover: light-dark(var(--gray-12), var(--gray-0));
-
-    --theme-btn-bg-focus: light-dark(var(--gray-2), var(--gray-8));
-    --theme-btn-border-focus: light-dark(var(--gray-12), var(--gray-0));
-    --theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
-    --theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
-
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
-  }
-}

package/assets/styles/forms/themes/_input-action.css

@@ -1,20 +0,0 @@
-:root {
-  [data-btn-theme='input-action'] {
-    --theme-btn-bg: transparent;
-    --theme-btn-border: transparent;
-    --theme-btn-outline: transparent;
-    --theme-btn-text: var(--theme-form-input-text);
-
-    --theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-3));
-    --theme-btn-border-hover: transparent;
-    --theme-btn-outline-hover: transparent;
-    --theme-btn-text-hover: var(--theme-form-input-text);
-
-    --theme-btn-bg-focus: transparent;
-    --theme-btn-border-focus: transparent;
-    --theme-btn-outline-focus: transparent;
-    --theme-btn-text-focus: transparent;
-
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
-  }
-}

package/assets/styles/forms/themes/_primary.css

@@ -1,82 +0,0 @@
-:root {
-  [data-form-theme='primary'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-border: var(--blue-8);
-    --theme-form-input-border-active: var(--blue-2);
-    --theme-form-input-border-focus: var(--blue-2);
-    --theme-form-input-outline: white;
-    --theme-form-input-outline-active: var(--blue-6);
-    --theme-form-input-outline-focus: var(--blue-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-
-    /* --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2)); */
-    --theme-form-focus-box-shadow: light-dark(red, yellowgreen);
-
-    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
-    --theme-form-checkbox-outline: light-dark(var(--blue-1), var(--blue-1));
-    --theme-form-checkbox-shadow: transparent;
-    --theme-form-checkbox-shadow-focus: var(--blue-6);
-    --theme-form-checkbox-symbol: var(--blue-12);
-
-    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-radio-border: light-dark(var(--blue-12), var(--blue-12));
-    --theme-form-radio-outline: light-dark(var(--blue-1), var(--blue-1));
-    --theme-form-radio-shadow: transparent;
-    --theme-form-radio-shadow-focus: var(--blue-6);
-    --theme-form-radio-symbol: var(--blue-12);
-
-    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
-
-    /*
-    * ToggleSwitch
-    **/
-    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
-
-    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--blue-12), var(--blue-1));
-
-    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--blue-1), var(--blue-1));
-    --theme-form-toggle-symbol-off: var(--blue-7);
-    --theme-form-toggle-symbol-on: var(--gray-12);
-    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
-    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
-
-    /*
-    * Checkbox as button
-    **/
-
-    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
-
-    --theme-checkbox-radio-button-border-default: light-dark(var(--blue-12), var(--blue-12));
-    --theme-checkbox-radio-button-border-width: 0.1rem;
-
-    --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
-    --theme-checkbox-radio-button-outline-focus: light-dark(var(--blue-12), var(--blue-12));
-    --theme-checkbox-radio-button-outline-width: 0.1rem;
-
-    --theme-checkbox-radio-button-shadow: transparent;
-    --theme-checkbox-radio-button-shadow-focus: light-dark(var(--blue-6), var(--blue-1));
-
-    --theme-checkbox-radio-button-label-default: light-dark(var(--blue-12), var(--blue-12));
-  }
-
-  [data-btn-theme='primary'] {
-    --theme-btn-bg: var(--blue-12);
-    --theme-btn-border: var(--blue-0);
-    --theme-btn-outline: var(--blue-12);
-    --theme-btn-text: var(--blue-0);
-
-    --theme-btn-bg-hover: var(--blue-0);
-    --theme-btn-border-hover: var(--blue-12);
-    --theme-btn-outline-hover: var(--blue-0);
-    --theme-btn-text-hover: var(--blue-12);
-
-    --theme-btn-bg-focus: var(--blue-0);
-    --theme-btn-border-focus: var(--blue-12);
-    --theme-btn-outline-focus: var(--blue-0);
-    --theme-btn-text-focus: var(--blue-12);
-
-    --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2));
-  }
-}

package/assets/styles/forms/themes/_secondary.css

@@ -1,77 +0,0 @@
-:root {
-  [data-form-theme='secondary'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-border: var(--gray-8);
-    --theme-form-input-border-active: var(--gray-2);
-    --theme-form-input-border-focus: var(--gray-2);
-    --theme-form-input-outline: white;
-    --theme-form-input-outline-active: var(--gray-6);
-    --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
-
-    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
-    --theme-form-checkbox-shadow: transparent;
-    --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-12);
-
-    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
-    --theme-form-radio-shadow: transparent;
-    --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-12);
-
-    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
-
-    /*
-    * ToggleSwitch
-    **/
-    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
-
-    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
-
-    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-toggle-symbol-off: var(--gray-4);
-    --theme-form-toggle-symbol-on: var(--gray-12);
-    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
-    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
-
-    /*
-    * Checkbox as button
-    **/
-
-    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
-
-    --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
-    --theme-checkbox-radio-button-border-width: 0.1rem;
-
-    --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
-    --theme-checkbox-radio-button-outline-width: 0.1rem;
-
-    --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
-  }
-
-  [data-btn-theme='secondary'] {
-    --theme-btn-bg: var(--gray-12);
-    --theme-btn-border: var(--gray-0);
-    --theme-btn-outline: var(--gray-12);
-    --theme-btn-text: var(--gray-0);
-
-    --theme-btn-bg-hover: var(--gray-0);
-    --theme-btn-border-hover: var(--gray-12);
-    --theme-btn-outline-hover: var(--gray-0);
-    --theme-btn-text-hover: var(--gray-12);
-
-    --theme-btn-bg-focus: var(--gray-0);
-    --theme-btn-border-focus: var(--gray-12);
-    --theme-btn-outline-focus: var(--gray-0);
-    --theme-btn-text-focus: var(--gray-12);
-
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
-  }
-}