srcdev-nuxt-forms 5.1.0 → 6.0.0

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

@@ -0,0 +1,96 @@
+.your-site-class {
+  .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/{assets → app/assets}/styles/extends-layer/srcdev-forms/components/index.css

@@ -1,10 +1,9 @@
-@import './_form-core';
 @import './_input-error';
 @import './_input-select';
 @import './_input-label';
 @import './_input-textarea';
-@import './_input-text-as-number';
-@import './_input-checkbox';
-@import './_input-radio';
+@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/setup/_generic.css

@@ -0,0 +1,21 @@
+: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

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

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

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='error'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [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-form-input-border: var(--red-8);
-    --theme-form-input-border-active: var(--red-2);
-    --theme-form-input-border-focus: var(--red-2);
+    --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);
@@ -64,19 +64,19 @@
     --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);
+  [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-btn-bg-hover: var(--red-0);
-    --theme-btn-border-hover: var(--red-12);
+    --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-btn-bg-focus: var(--red-0);
-    --theme-btn-border-focus: 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);
 

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

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='ghost'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [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-form-input-border: var(--gray-8);
-    --theme-form-input-border-active: var(--gray-2);
-    --theme-form-input-border-focus: var(--gray-2);
+    --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);
@@ -64,19 +64,19 @@
     --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);
+  [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-btn-bg-hover: light-dark(var(--gray-2), var(--gray-8));
-    --theme-btn-border-hover: 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-btn-bg-focus: light-dark(var(--gray-2), var(--gray-8));
-    --theme-btn-border-focus: 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));
 

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

@@ -1,17 +1,17 @@
 :root {
-  [data-btn-theme='input-action-underlined'] {
-    --theme-btn-bg: transparent;
-    --theme-btn-border: transparent;
+  [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-btn-bg-hover: var(--blue-8);
-    --theme-btn-border-hover: var(--blue-8);
+    --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-btn-bg-focus: var(--blue-8);
-    --theme-btn-border-focus: var(--blue-8);
+    --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);
 

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

@@ -1,17 +1,17 @@
 :root {
-  [data-btn-theme='input-action'] {
-    --theme-btn-bg: transparent;
-    --theme-btn-border: transparent;
+  [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-btn-bg-hover: var(--blue-8);
-    --theme-btn-border-hover: var(--blue-8);
+    --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-btn-bg-focus: var(--blue-8);
-    --theme-btn-border-focus: var(--blue-8);
+    --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);
 

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

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='primary'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [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-form-input-border: var(--blue-8);
-    --theme-form-input-border-active: var(--blue-2);
-    --theme-form-input-border-focus: var(--blue-2);
+    --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);
@@ -71,19 +71,19 @@
     --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);
+  [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-btn-bg-hover: var(--blue-0);
-    --theme-btn-border-hover: var(--blue-12);
+    --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-btn-bg-focus: var(--blue-0);
-    --theme-btn-border-focus: 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);
 

package/{assets → app/assets}/styles/extends-layer/srcdev-forms/setup/themes/_secondary.css

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='secondary'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [data-theme-old='secondary'] {
+    --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-form-input-border: var(--gray-8);
-    --theme-form-input-border-active: var(--gray-2);
-    --theme-form-input-border-focus: var(--gray-2);
+    --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);
@@ -64,19 +64,19 @@
     --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);
+  [data-theme='secondary'] {
+    --theme-button-surface: var(--gray-12);
+    --theme-input-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-button-surface-hover: var(--gray-0);
+    --theme-input-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-button-surface-focus: var(--gray-0);
+    --theme-input-border-focus: var(--gray-12);
     --theme-btn-outline-focus: var(--gray-0);
     --theme-btn-text-focus: var(--gray-12);
 

package/{assets → app/assets}/styles/extends-layer/srcdev-forms/setup/themes/_success.css

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='success'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [data-theme-old='success'] {
+    --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-form-input-border: var(--green-8);
-    --theme-form-input-border-active: var(--green-2);
-    --theme-form-input-border-focus: var(--green-2);
+    --theme-input-border: var(--green-8);
+    --theme-input-border-active: var(--green-2);
+    --theme-input-border-focus: var(--green-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--green-6);
     --theme-form-input-outline-focus: var(--green-6);
@@ -64,19 +64,19 @@
     --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
   }
 
-  [data-btn-theme='success'] {
-    --theme-btn-bg: var(--green-12);
-    --theme-btn-border: var(--green-0);
+  [data-theme='success'] {
+    --theme-button-surface: var(--green-12);
+    --theme-input-border: var(--green-0);
     --theme-btn-outline: var(--green-12);
     --theme-btn-text: var(--green-0);
 
-    --theme-btn-bg-hover: var(--green-0);
-    --theme-btn-border-hover: var(--green-12);
+    --theme-button-surface-hover: var(--green-0);
+    --theme-input-border-hover: var(--green-12);
     --theme-btn-outline-hover: var(--green-0);
     --theme-btn-text-hover: var(--green-12);
 
-    --theme-btn-bg-focus: var(--green-0);
-    --theme-btn-border-focus: var(--green-12);
+    --theme-button-surface-focus: var(--green-0);
+    --theme-input-border-focus: var(--green-12);
     --theme-btn-outline-focus: var(--green-0);
     --theme-btn-text-focus: var(--green-12);
 

package/{assets → app/assets}/styles/extends-layer/srcdev-forms/setup/themes/_tertiary.css

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='tertiary'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [data-theme-old='tertiary'] {
+    --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-form-input-border: var(--gray-8);
-    --theme-form-input-border-active: var(--gray-2);
-    --theme-form-input-border-focus: var(--gray-2);
+    --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);
@@ -64,19 +64,19 @@
     --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
   }
 
-  [data-btn-theme='tertiary'] {
-    --theme-btn-bg: var(--gray-0);
-    --theme-btn-border: var(--gray-0);
+  [data-theme='tertiary'] {
+    --theme-button-surface: var(--gray-0);
+    --theme-input-border: var(--gray-0);
     --theme-btn-outline: var(--gray-12);
     --theme-btn-text: var(--gray-12);
 
-    --theme-btn-bg-hover: var(--gray-12);
-    --theme-btn-border-hover: var(--gray-0);
+    --theme-button-surface-hover: var(--gray-12);
+    --theme-input-border-hover: var(--gray-0);
     --theme-btn-outline-hover: var(--gray-12);
     --theme-btn-text-hover: var(--gray-0);
 
-    --theme-btn-bg-focus: var(--gray-12);
-    --theme-btn-border-focus: var(--gray-0);
+    --theme-button-surface-focus: var(--gray-12);
+    --theme-input-border-focus: var(--gray-0);
     --theme-btn-outline-focus: var(--gray-12);
     --theme-btn-text-focus: var(--gray-0);
 

package/{assets → app/assets}/styles/extends-layer/srcdev-forms/setup/themes/_warning.css

@@ -1,11 +1,11 @@
 :root {
-  [data-form-theme='warning'] {
-    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+  [data-theme-old='warning'] {
+    --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-form-input-border: var(--orange-8);
-    --theme-form-input-border-active: var(--orange-2);
-    --theme-form-input-border-focus: var(--orange-2);
+    --theme-input-border: var(--orange-8);
+    --theme-input-border-active: var(--orange-2);
+    --theme-input-border-focus: var(--orange-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--orange-6);
     --theme-form-input-outline-focus: var(--orange-6);
@@ -64,19 +64,19 @@
     --theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
   }
 
-  [data-btn-theme='warning'] {
-    --theme-btn-bg: var(--orange-12);
-    --theme-btn-border: var(--orange-0);
+  [data-theme='warning'] {
+    --theme-button-surface: var(--orange-12);
+    --theme-input-border: var(--orange-0);
     --theme-btn-outline: var(--orange-12);
     --theme-btn-text: var(--orange-0);
 
-    --theme-btn-bg-hover: var(--orange-0);
-    --theme-btn-border-hover: var(--orange-12);
+    --theme-button-surface-hover: var(--orange-0);
+    --theme-input-border-hover: var(--orange-12);
     --theme-btn-outline-hover: var(--orange-0);
     --theme-btn-text-hover: var(--orange-12);
 
-    --theme-btn-bg-focus: var(--orange-0);
-    --theme-btn-border-focus: var(--orange-12);
+    --theme-button-surface-focus: var(--orange-0);
+    --theme-input-border-focus: var(--orange-12);
     --theme-btn-outline-focus: var(--orange-0);
     --theme-btn-text-focus: var(--orange-12);
 

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

@@ -0,0 +1,7 @@
+:root {
+  --theme-focus-visible-outline: 1px solid var(--theme-focus-visible-outline);
+
+  --theme-focus-visible-shadow-soft: 0 1px 2px rgba(var(--theme-focus-visible-shadow-soft), 0.05);
+  --theme-focus-visible-shadow-medium: 0 3px 6px rgba(var(--theme-focus-visible-shadow-medium), 0.1);
+  --theme-focus-visible-shadow-strong: 0 6px 12px rgba(var(--theme-focus-visible-shadow-strong), 0.15);
+}

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

@@ -0,0 +1 @@
+@import './_a11y';

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

@@ -0,0 +1,48 @@
+:root {
+  .normal {
+    /* --input-row-margin-block-start: 0; */
+
+    /* --element-decorator-background-color: var(--theme-button-surface); */
+    /* --element-decorator-background-color: color-mix(in srgb, currentColor 5%, transparent); */
+
+    /* --element-decorator-margin-block-start: 0.5rem; */
+    /* --element-decorator-padding-inline: 1rem; */
+
+    /* --element-decorator-outline-default: 1px solid color-mix(in srgb, var(--theme-input-border) 5%, transparent); */
+    /* --element-decorator-outline-active: 1px solid var(--theme-input-border); */
+
+    /* Border styles */
+    /* --element-decorator-border-top-left-radius: var(--form-input-border-radius); */
+    /* --element-decorator-border-top-right-radius: var(--form-input-border-radius); */
+    /* --element-decorator-border-bottom-right-radius: var(--form-input-border-radius); */
+    /* --element-decorator-border-bottom-left-radius: var(--form-input-border-radius); */
+
+    /* --element-decorator-border-top-default: var(--form-element-border-width) solid var(--theme-input-border); */
+    /* --element-decorator-border-right-default: var(--form-element-border-width) solid var(--theme-input-border); */
+    /* --element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-input-border); */
+    /* --element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-input-border); */
+
+    /* --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5)); */
+    /* --input-placeholder-font-size: var(--step-5); */
+    /* --input-placeholder-font-style: italic; */
+    /* --input-placeholder-font-weight: normal; */
+    /* --input-placeholder-line-height: 1; */
+
+    /* Label vars */
+    --_label-text-color: var(--theme-form-input-text-label-color-underlined);
+    --_label-text-margin-block: 0.8rem;
+    --_label-text-size: var(--step-5);
+    --_label-text-weight: normal;
+    --_label-text-line-height: 1.5;
+
+    .error {
+      --element-decorator-border-bottom-right-radius: 0;
+      --element-decorator-border-bottom-left-radius: 0;
+
+      --element-decorator-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
+      --element-decorator-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
+      --element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-error-surface);
+      --element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
+    }
+  }
+}

package/{assets → app/assets}/styles/extends-layer/srcdev-forms/setup/variants/_underlined.css

@@ -1,15 +1,15 @@
 :root {
   .underlined {
-    --input-row-margin-block-start: 3em;
+    /* --input-row-margin-block-start: 3em; */
 
-    /* --element-decorator-background-color: var(--theme-form-input-bg-normal); */
-    --element-decorator-background-color: color-mix(in srgb, currentColor 5%, transparent);
+    /* --element-decorator-background-color: var(--theme-button-surface); */
+    /* --element-decorator-background-color: color-mix(in srgb, currentColor 5%, transparent); */
 
-    --element-decorator-margin-block-start: 0.5rem;
-    --element-decorator-padding-inline: 1rem;
+    /* --element-decorator-margin-block-start: 0.5rem; */
+    /* --element-decorator-padding-inline: 1rem; */
 
-    --element-decorator-outline-default: 1px solid transparent;
-    --element-decorator-outline-active: 1px solid var(--theme-form-input-border);
+    /* --element-decorator-outline-default: 1px solid transparent; */
+    /* --element-decorator-outline-active: 1px solid var(--theme-input-border); */
 
     /* Border styles */
     --element-decorator-border-top-left-radius: 0;
@@ -17,13 +17,13 @@
     --element-decorator-border-bottom-right-radius: var(--form-input-border-radius);
     --element-decorator-border-bottom-left-radius: var(--form-input-border-radius);
 
-    --element-decorator-border-top-default: var(--form-element-border-width) solid transparent;
+    /* --element-decorator-border-top-default: var(--form-element-border-width) solid transparent;
     --element-decorator-border-right-default: var(--form-element-border-width) solid transparent;
-    --element-decorator-border-bottom-default: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
-    --element-decorator-border-left-default: var(--form-element-border-width) solid transparent;
+    --element-decorator-border-bottom-default: var(--form-element-border-width-underlined) solid var(--theme-input-border);
+    --element-decorator-border-left-default: var(--form-element-border-width) solid transparent; */
 
     --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5));
-    --input-placeholder-font-size: var(--step-2);
+    --input-placeholder-font-size: var(--step-5);
     --input-placeholder-font-style: italic;
     --input-placeholder-font-weight: normal;
     --input-placeholder-line-height: 1;
@@ -31,7 +31,7 @@
     /* Label vars */
     --_label-text-color: var(--theme-form-input-text-label-color-underlined);
     --_label-text-margin-block: 0.8rem;
-    --_label-text-size: var(--step-2);
+    --_label-text-size: var(--step-5);
     --_label-text-weight: normal;
     --_label-text-line-height: 1.5;
 

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

@@ -0,0 +1,3 @@
+@import './sizes';
+/* @import './_normal'; */
+/* @import './_underlined'; */

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

@@ -0,0 +1,13 @@
+:root {
+  --form-element-font-size: var(--step-5);
+  --form-placeholder-font-size: calc(var(--step-5) * 0.65);
+  --form-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 */
+  --theme-checkbox-decorator-icon-size: 2rem;
+}

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

@@ -0,0 +1,12 @@
+:root {
+  [data-size='large'] {
+    --form-element-font-size: var(--step-6);
+    --form-placeholder-font-size: calc(var(--step-6) * 0.65);
+    --form-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;
+  }
+}