srcdev-nuxt-forms 6.1.2 → 6.1.4

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-text.css

@@ -1,190 +0,0 @@
-.srcdev-forms-extended {
-  .input-text-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    background-color: var(--theme-input-surface);
-    transition: all var(--theme-form-transition-duration) ease-in-out;
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      padding-inline: 1rem;
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-        outline-color: var(--theme-error-surface);
-      }
-
-      .slot {
-        display: flex;
-        place-items: center;
-        background-clip: padding-box;
-
-        &.left-slot:not([data-theme='input-action']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-        &.right-slot:not([data-theme='input-action']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-
-      &[data-inputmode='numeric'] {
-        padding-block: 0rem;
-        padding-inline: 0.75rem;
-
-        .slot {
-          [data-theme='input-action'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-      padding-inline: 1rem;
-
-      outline: var(--form-element-outline-width) solid transparent;
-
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      border-top: none;
-      border-right: none;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: none;
-
-      overflow: hidden;
-
-      &.error {
-        outline-color: var(--theme-error-surface);
-        border-bottom-right-radius: var(--form-input-border-radius-underlined);
-        border-bottom-left-radius: var(--form-input-border-radius-underlined);
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-
-      .slot {
-        display: flex;
-        place-items: center;
-        background-clip: padding-box;
-
-        &.left-slot:not([data-theme='input-action-underlined']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action-underlined'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-        &.right-slot:not([data-theme='input-action-underlined']) {
-          .icon {
-            width: 2.2rem;
-            height: 2.2rem;
-          }
-
-          [data-theme='input-action-underlined'] {
-            width: initial;
-            height: initial;
-            padding: 0.5rem;
-
-            .icon {
-              width: 1.8rem;
-              height: 1.8rem;
-            }
-          }
-        }
-      }
-    }
-
-    .input-text-core {
-      all: unset;
-      flex-grow: 1;
-
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-      padding-block: var(--input-element-padding-block);
-      padding-inline: 1rem;
-
-      &::placeholder {
-        color: var(--theme-input-placeholder);
-        font-size: var(--theme-input-placeholder-font-size);
-        font-style: italic;
-        line-height: 1;
-        font-weight: normal;
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-textarea.css

@@ -1,96 +0,0 @@
-.srcdev-forms-extended {
-  .input-textarea-wrapper {
-    /* Custom placeholder styles */
-    background-color: var(--theme-input-surface);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-top-left-radius: var(--form-input-border-radius);
-      border-top-right-radius: var(--form-input-border-radius);
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      padding-inline: 1rem;
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:hover {
-      /* Custom placeholder styles */
-    }
-
-    .slot {
-      /* Custom placeholder styles */
-
-      &.left-slot {
-        /* Custom placeholder styles */
-      }
-      &.right-slot {
-        /* Custom placeholder styles */
-      }
-    }
-
-    .input-textarea-core {
-      min-height: 4rem;
-
-      &::placeholder {
-        color: var(--theme-input-placeholder);
-        font-size: var(--theme-input-placeholder-font-size);
-        font-style: italic;
-        line-height: 1;
-        font-weight: normal;
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-      padding-inline: 0.6rem;
-
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid transparent;
-      border-right: var(--form-element-border-width) solid transparent;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid transparent;
-
-      &.error {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/components/index.css

@@ -1,10 +0,0 @@
-@import "./_input-error";
-@import "./_input-select";
-@import "./_input-label";
-@import "./_input-description";
-@import "./_input-textarea";
-@import "./_input-text";
-@import "./_input-checkbox-radio-core";
-@import "./_input-button";
-@import "./_input-checkbox-radio-options-button";
-@import "./_form-fieldset";

package/app/assets/styles/extends-layer/srcdev-forms/index.css

@@ -1,2 +0,0 @@
-@import './setup/';
-@import './components/';

package/app/assets/styles/extends-layer/srcdev-forms/setup/_generic.css

@@ -1,21 +0,0 @@
-:root {
-  --theme-form-font-familty: var(--font-family);
-  --theme-error-surface: var(--red-12);
-  --theme-error-text: var(--red-0);
-  --theme-form-button-font-size-normal: var(--form-element-font-size);
-  --theme-form-transition-duration: 0.2s;
-  --theme-input-placeholder-font-size: var(--step-4);
-
-  input:autofill,
-  input:-internal-autofill-selected,
-  input:-webkit-autofill-strong-password,
-  input:-webkit-autofill-strong-password-viewable,
-  input:-webkit-autofill-and-obscured {
-    background-color: var(--theme-button-surface) !important;
-    background-image: none !important;
-    color: var(--_input-text-core-color) !important;
-    -webkit-box-shadow: 0 0 0rem 1000px var(--theme-button-surface) inset;
-    -webkit-text-fill-color: var(--_input-text-core-color);
-    transition: background-color 5000s ease-in-out 0s;
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/setup/index.css

@@ -1,4 +0,0 @@
-/* @import './themes/'; */
-@import './variables';
-@import './variants';
-@import './_generic';

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_error.css

@@ -1,85 +0,0 @@
-:root {
-  [data-theme-old='error'] {
-    --theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
-    --theme-input-border: var(--red-8);
-    --theme-input-border-active: var(--red-2);
-    --theme-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-color-normal: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
-    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
-
-    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
-    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
-
-    --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-theme='error'] {
-    --theme-button-surface: var(--red-12);
-    --theme-input-border: var(--red-0);
-    --theme-btn-outline: var(--red-12);
-    --theme-btn-text: var(--red-0);
-
-    --theme-button-surface-hover: var(--red-0);
-    --theme-input-border-hover: var(--red-12);
-    --theme-btn-outline-hover: var(--red-0);
-    --theme-btn-text-hover: var(--red-12);
-
-    --theme-button-surface-focus: var(--red-0);
-    --theme-input-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/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_ghost.css

@@ -1,85 +0,0 @@
-:root {
-  [data-theme-old='ghost'] {
-    --theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
-    --theme-input-border: var(--gray-8);
-    --theme-input-border-active: var(--gray-2);
-    --theme-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-color-normal: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
-    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
-
-    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
-    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
-
-    --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-theme='ghost'] {
-    --theme-button-surface: transparent;
-    --theme-input-border: var(--gray-0);
-    --theme-btn-outline: var(--gray-12);
-    --theme-btn-text: light-dark(var(--gray-12), var(--gray-0));
-
-    --theme-button-surface-hover: light-dark(var(--gray-2), var(--gray-8));
-    --theme-input-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-button-surface-focus: light-dark(var(--gray-2), var(--gray-8));
-    --theme-input-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/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_input-action-underlined.css

@@ -1,20 +0,0 @@
-:root {
-  [data-theme-old='input-action-underlined'] {
-    --theme-button-surface: transparent;
-    --theme-input-border: transparent;
-    --theme-btn-outline: transparent;
-    --theme-btn-text: var(--_input-text-core-color);
-
-    --theme-button-surface-hover: var(--blue-8);
-    --theme-input-border-hover: var(--blue-8);
-    --theme-btn-outline-hover: var(--blue-8);
-    --theme-btn-text-hover: var(--gray-00);
-
-    --theme-button-surface-focus: var(--blue-8);
-    --theme-input-border-focus: var(--blue-8);
-    --theme-btn-outline-focus: var(--blue-8);
-    --theme-btn-text-focus: var(--gray-00);
-
-    --theme-form-focus-box-shadow: transparent;
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_input-action.css

@@ -1,20 +0,0 @@
-:root {
-  [data-theme-old='input-action'] {
-    --theme-button-surface: transparent;
-    --theme-input-border: transparent;
-    --theme-btn-outline: transparent;
-    --theme-btn-text: var(--theme-form-input-text-color-normal);
-
-    --theme-button-surface-hover: var(--blue-8);
-    --theme-input-border-hover: var(--blue-8);
-    --theme-btn-outline-hover: var(--blue-8);
-    --theme-btn-text-hover: var(--gray-00);
-
-    --theme-button-surface-focus: var(--blue-8);
-    --theme-input-border-focus: var(--blue-8);
-    --theme-btn-outline-focus: var(--blue-8);
-    --theme-btn-text-focus: var(--gray-00);
-
-    --theme-form-focus-box-shadow: transparent;
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_primary.css

@@ -1,92 +0,0 @@
-:root {
-  [data-theme-old='primary'] {
-    --theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-bg-underlined: light-dark(var(--gray-0), var(--gray-9));
-    --theme-input-border: var(--blue-8);
-    --theme-input-border-active: var(--blue-2);
-    --theme-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-color-normal: light-dark(var(--gray-11), var(--gray-11));
-    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
-
-    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
-    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
-
-    /* --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-1));
-
-    /*
-    * 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-color: light-dark(var(--blue-12), var(--blue-1));
-    --theme-form-toggle-border-width: 0.2rem;
-    --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-theme='primary'] {
-    --theme-button-surface: var(--blue-12);
-    --theme-input-border: var(--blue-0);
-    --theme-btn-outline: var(--blue-12);
-    --theme-btn-text: var(--blue-0);
-
-    --theme-button-surface-hover: var(--blue-0);
-    --theme-input-border-hover: var(--blue-12);
-    --theme-btn-outline-hover: var(--blue-0);
-    --theme-btn-text-hover: var(--blue-12);
-
-    --theme-button-surface-focus: var(--blue-0);
-    --theme-input-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));
-  }
-}