srcdev-nuxt-components 9.1.28 → 9.1.30

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/_input-toggle-switch.css

@@ -1,68 +0,0 @@
-.srcdev-forms-extended {
-  .toggle-switch-core {
-    .toggle-switch-wrapper {
-      --_icon-on-opacity: 0;
-      --_icon-off-opacity: 1;
-      --_icon-font-size: 2.4rem;
-      --_symbol-size: 3.4rem;
-      --_symbol-background-color: var(--blue-10);
-      --_symbol-margin-inline-start: 0;
-      --_symbol-checked-offset: calc(var(--_symbol-size) * 0.75);
-
-      /* New vars */
-      --_switch-padding: 0.2rem;
-      --_toggle-symbol-border-width: 0.1rem;
-
-      &.use-default-icons {
-      }
-
-      display: flex;
-      flex-direction: column;
-
-      .symbol-wrapper {
-        background-color: var(--theme-toggle-wrapper-surface-color);
-        border: var(--form-element-border-width) solid var(--theme-input-border);
-        outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-        border-radius: calc(
-          var(--_symbol-size) + calc(var(--_toggle-symbol-border-width) * 2) + calc(var(--_switch-padding) * 2)
-        );
-        width: calc(var(--_symbol-size) * 2);
-        height: calc(
-          var(--_symbol-size) + calc(var(--_toggle-symbol-border-width) * 5) + calc(var(--_switch-padding) * 2)
-        );
-        padding: var(--_switch-padding);
-
-        &:hover {
-          background-color: var(--theme-toggle-wrapper-surface-color-hover);
-        }
-
-        .symbol {
-          padding: calc(calc(var(--_symbol-size) - var(--_icon-font-size)) / 2);
-          border: 0.1rem solid var(--theme-toggle-symbol-border-color);
-          outline: 0.1rem solid var(--theme-toggle-symbol-outline-color);
-          border-radius: 50%;
-          background-color: var(--theme-toggle-symbol-surface-color);
-          transition: left 0.4s ease;
-
-          .symbol-icon {
-            color: var(--theme-toggle-symbol-icon-color);
-            font-size: var(--_icon-font-size);
-            transition: opacity var(--theme-form-transition-duration);
-
-            &.active {
-              /* opacity: 1; */
-            }
-
-            &.icon-off {
-              /* color: red; */
-            }
-
-            &.icon-on {
-              /* color: green; */
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,12 +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 "./_input-checkbox-radio-with-label";
-@import "./_input-toggle-switch";
-@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 @@
-:where(html) {
-  --theme-form-font-familty: var(--font-family);
-  --theme-error-surface: var(--red-10);
-  --theme-error-text: var(--red-00);
-  --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,3 +0,0 @@
-@import "./themes/";
-@import "./sizes";
-@import "./_generic";

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

@@ -1,13 +0,0 @@
-:where(html) {
-  --form-element-font-size: var(--step-5);
-  --form-placeholder-font-size: calc(var(--step-5) * 0.65);
-  --input-element-line-height: var(--step-5);
-  --form-icon-size: var(--step-5);
-  --form-input-border-radius: 0.4rem;
-  --form-icon-only-button-size: calc(var(--step-4) * 2.5 + 1px);
-  --form-toggle-symbol-size: calc(var(--step-5) * 1.72);
-  --form-toggle-switch-width-adjustment: 0.2rem;
-
-  /* Checkboxes */
-  /* --input-checkbox-decorator-icon-size: 2rem; */
-}

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

@@ -1,12 +0,0 @@
-:where(html) {
-  [data-size="large"] {
-    --form-element-font-size: var(--step-6);
-    --form-placeholder-font-size: calc(var(--step-6) * 0.65);
-    --input-element-line-height: var(--step-6);
-    --form-icon-size: var(--step-6);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-6) * 1.78);
-    --form-toggle-switch-width-adjustment: 0rem;
-  }
-}

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

@@ -1,12 +0,0 @@
-:where(html) {
-  [data-size="medium"] {
-    --form-element-font-size: var(--step-6);
-    --form-placeholder-font-size: calc(var(--step-6) * 0.65);
-    --input-element-line-height: var(--step-6);
-    --form-icon-size: var(--step-6);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-6) * 1.78);
-    --form-toggle-switch-width-adjustment: 0rem;
-  }
-}

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

@@ -1,12 +0,0 @@
-:where(html) {
-  [data-size="small"] {
-    --form-element-font-size: var(--step-4);
-    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
-    --input-element-line-height: var(--step-4);
-    --form-icon-size: var(--step-4);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-4) * 2.25 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-4) * 1.635);
-    --form-toggle-switch-width-adjustment: 0.3rem;
-  }
-}

package/app/assets/styles/extends-layer/srcdev-forms/setup/sizes/_x-small.css

@@ -1,11 +0,0 @@
-:where(html) {
-  [data-size="x-small"] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --input-element-line-height: var(--step-3);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-4) * 2 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.55);
-    --form-toggle-switch-width-adjustment: 0.5rem;
-  }
-}

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

@@ -1,23 +0,0 @@
-@import "./_x-small";
-@import "./_small";
-@import "./_default";
-@import "./_medium";
-@import "./_large";
-
-:where(html) {
-  --form-element-padding-block-start: 0.4lh;
-  --form-element-padding-block-end: 0.4lh;
-  --form-element-border-width: 0.2rem;
-  --form-element-border-width-underlined: 0.4rem;
-  --form-element-outline-width: 0.1rem;
-  --form-element-outline-offset-focus: 0.2rem;
-
-  --form-textarea-padding-inline: 0.5em;
-  --form-button-padding-inline: 1.25em;
-  --form-button-icon-gap: 1em;
-  --form-input-border-radius: 0.4rem;
-  --form-input-border-radius-underlined: 0;
-
-  --input-element-padding-block: 1.25rem;
-  --input-element-padding-inline: 1rem;
-}

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

@@ -1,62 +0,0 @@
-:where(html) {
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
-  --form-label-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Description */
-  --form-description-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
-  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
-
-  --theme-input-border: light-dark(var(--slate-09), var(--slate-04));
-  --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-text: var(--slate-00);
-  --theme-input-text-hover: var(--slate-00);
-  --theme-input-text-focus: var(--slate-00);
-  --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
-
-  /* Checkboxes & Radio buttons */
-  --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Toggle Switch */
-  --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
-  --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
-  --theme-toggle-symbol-surface-color: var(--blue-10);
-  --theme-toggle-symbol-border-color: var(--slate-10);
-  --theme-toggle-symbol-outline-color: transparent;
-  --theme-toggle-symbol-icon-color: var(--slate-00);
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-12);
-  --theme-focus-visible-outline: var(--colour-theme-12);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--slate-05), var(--slate-04));
-  --theme-button-surface-hover: light-dark(var(--slate-06), var(--slate-05));
-
-  --theme-button-border: light-dark(var(--slate-09), var(--slate-04));
-  --theme-button-border-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-button-border-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-button-outline-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-button-text: var(--slate-00);
-  --theme-button-text-hover: var(--slate-00);
-  --theme-button-text-focus: var(--slate-00);
-}

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

@@ -1,63 +0,0 @@
-[data-theme="error"] {
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
-  --form-label-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Description */
-  --form-description-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
-  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
-  --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
-
-  --theme-input-border: var(--red-06);
-  --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-01));
-  --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-01));
-
-  --theme-input-text: var(--slate-00);
-  --theme-input-text-hover: var(--slate-00);
-  --theme-input-text-focus: var(--slate-00);
-  --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
-
-  /* Checkboxes & Radio buttons */
-  --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Toggle Switch */
-  --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
-  --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
-  --theme-toggle-symbol-surface-color: var(--blue-10);
-  --theme-toggle-symbol-border-color: var(--slate-10);
-  --theme-toggle-symbol-outline-color: transparent;
-  --theme-toggle-symbol-icon-color: var(--slate-00);
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-1);
-  --theme-focus-visible-outline: var(--colour-theme-1);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--red-05), var(--red-10));
-  --theme-button-surface-hover: light-dark(var(--red-06), var(--red-10));
-
-  --theme-button-border: light-dark(var(--red-09), var(--red-04));
-  --theme-button-border-hover: light-dark(var(--red-10), var(--red-05));
-  --theme-button-border-focus: light-dark(var(--red-10), var(--red-05));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--red-10), var(--red-07));
-  --theme-button-outline-focus: light-dark(var(--red-10), var(--red-07));
-
-  --theme-button-text: var(--red-00);
-  --theme-button-text-hover: var(--red-00);
-  --theme-button-text-focus: var(--red-00);
-}

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

@@ -1,63 +0,0 @@
-[data-theme="ghost"] {
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
-  --form-label-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Description */
-  --form-description-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
-  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
-
-  /* --theme-input-border: light-dark(var(--slate-09), var(--slate-04)); */
-  --theme-input-border: var(--slate-04);
-  --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-text: var(--slate-00);
-  --theme-input-text-hover: var(--slate-00);
-  --theme-input-text-focus: var(--slate-00);
-  --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
-
-  /* Checkboxes & Radio buttons */
-  --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Toggle Switch */
-  --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
-  --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
-  --theme-toggle-symbol-surface-color: var(--blue-10);
-  --theme-toggle-symbol-border-color: var(--slate-10);
-  --theme-toggle-symbol-outline-color: transparent;
-  --theme-toggle-symbol-icon-color: var(--slate-00);
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-12);
-  --theme-focus-visible-outline: var(--colour-theme-12);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--slate-02), var(--slate-08));
-  --theme-button-surface-hover: var(--slate-10);
-
-  --theme-button-border: transparent;
-  --theme-button-border-hover: transparent;
-  --theme-button-border-focus: transparent;
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--slate-10), var(--slate-06));
-  --theme-button-outline-focus: light-dark(var(--slate-10), var(--slate-06));
-
-  --theme-button-text: light-dark(var(--slate-10), var(--slate-01));
-  --theme-button-text-hover: var(--slate-00);
-  --theme-button-text-focus: var(--slate-00);
-}

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

@@ -1,63 +0,0 @@
-[data-theme="info"] {
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
-  --form-label-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Description */
-  --form-description-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
-  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
-
-  /* --theme-input-border: light-dark(var(--slate-09), var(--slate-04)); */
-  --theme-input-border: var(--slate-04);
-  --theme-input-border-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-border-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-text: var(--slate-00);
-  --theme-input-text-hover: var(--slate-00);
-  --theme-input-text-focus: var(--slate-00);
-  --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
-
-  /* Checkboxes & Radio buttons */
-  --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Toggle Switch */
-  --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
-  --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
-  --theme-toggle-symbol-surface-color: var(--blue-10);
-  --theme-toggle-symbol-border-color: var(--slate-10);
-  --theme-toggle-symbol-outline-color: transparent;
-  --theme-toggle-symbol-icon-color: var(--slate-00);
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-12);
-  --theme-focus-visible-outline: var(--colour-theme-12);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--blue-05), var(--blue-04));
-  --theme-button-surface-hover: light-dark(var(--blue-06), var(--blue-05));
-
-  --theme-button-border: light-dark(var(--blue-09), var(--blue-04));
-  --theme-button-border-hover: light-dark(var(--blue-10), var(--blue-05));
-  --theme-button-border-focus: light-dark(var(--blue-10), var(--blue-05));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--blue-10), var(--blue-05));
-  --theme-button-outline-focus: light-dark(var(--blue-10), var(--blue-05));
-
-  --theme-button-text: var(--blue-00);
-  --theme-button-text-hover: var(--blue-00);
-  --theme-button-text-focus: var(--blue-00);
-}

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

@@ -1,66 +0,0 @@
-[data-theme="default"] {
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--slate-10), var(--slate-01));
-  --form-label-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Description */
-  --form-description-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--slate-01), var(--slate-08));
-  --theme-input-surface-hover: light-dark(var(--slate-01), var(--slate-10));
-  --theme-input-surface-focus: light-dark(var(--slate-01), var(--slate-10));
-
-  /* --theme-input-border: light-dark(var(--blue-09), var(--blue-04)); */
-  --theme-input-border: var(--blue-08);
-  --theme-input-border-hover: light-dark(var(--blue-10), var(--blue-05));
-  --theme-input-border-focus: light-dark(var(--blue-10), var(--blue-05));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--slate-10), var(--slate-05));
-  --theme-input-outline-focus: light-dark(var(--slate-10), var(--slate-05));
-
-  --theme-input-text: var(--blue-00);
-  --theme-input-text-hover: var(--blue-00);
-  --theme-input-text-focus: var(--blue-00);
-  --theme-input-placeholder: light-dark(var(--slate-07), var(--slate-05));
-
-  /* Checkboxes & Radio buttons */
-  --theme-checkbox-label-text-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-decorator-color: light-dark(var(--slate-10), var(--slate-01));
-  --theme-checkbox-symbol-surface: var(--theme-input-surface);
-  --theme-checkbox-symbol-color: light-dark(var(--slate-10), var(--slate-01));
-
-  /* Toggle Switch */
-  --theme-toggle-wrapper-surface-color: var(--theme-input-surface);
-  --theme-toggle-wrapper-surface-color-hover: var(--theme-input-surface-hover);
-  --theme-toggle-symbol-surface-color: var(--blue-10);
-  --theme-toggle-symbol-border-color: var(--slate-10);
-  --theme-toggle-symbol-outline-color: transparent;
-  --theme-toggle-symbol-icon-color: var(--slate-00);
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-12);
-  --theme-focus-visible-outline: var(--colour-theme-12);
-
-  /* Buttons */
-  /* --theme-button-surface: light-dark(var(--blue-09), var(--blue-10)); */
-  --theme-button-surface: var(--blue-10);
-  /* --theme-button-surface-hover: light-dark(var(--blue-06), var(--blue-10)); */
-  --theme-button-surface-hover: var(--blue-10);
-
-  --theme-button-border: light-dark(var(--blue-09), var(--blue-02));
-  --theme-button-border-hover: light-dark(var(--blue-10), var(--blue-01));
-  --theme-button-border-focus: light-dark(var(--blue-10), var(--blue-05));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--blue-10), var(--blue-01));
-  --theme-button-outline-focus: light-dark(var(--blue-10), var(--blue-01));
-
-  --theme-button-text: var(--blue-00);
-  --theme-button-text-hover: var(--blue-00);
-  --theme-button-text-focus: var(--blue-00);
-}