srcdev-nuxt-forms 4.2.0 → 5.0.1

package/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -0,0 +1,16 @@
+:root {
+  /* Label vars */
+  .form-fieldset {
+    --form-fieldset-legend-text-color: var(--theme-form-input-text-label-color-normal);
+    --form-fieldset-legend-text-margin-block: 0.8rem;
+    --form-fieldset-legend-text-size: var(--step-2);
+    --form-fieldset-legend-text-weight: normal;
+    --form-fieldset-legend-text-line-height: 1.5;
+
+    --form-fieldset-description-font-size: 1.6rem;
+    --form-fieldset-description-margin-top: 1.2rem;
+
+    --form-fieldset-content-margin-block-start: 0;
+    --form-fieldset-content-padding-block-start: 0;
+  }
+}

package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css

@@ -0,0 +1,59 @@
+:root {
+  .input-checkbox-radio-options-button {
+    /* --input-checkbox-radio-options-button-background-color: hsl(from var(--theme-form-input-border) h s 95%); */
+    --input-checkbox-radio-options-button-background-color: color-mix(in srgb, currentColor 5%, transparent);
+    --input-checkbox-radio-options-button-background-color-active: hsl(from var(--theme-form-input-border) h s 25%);
+
+    --input-checkbox-radio-options-button-border: 0.1rem solid var(--theme-form-input-border);
+    --input-checkbox-radio-options-button-border-active: 0.1rem solid var(--theme-form-input-border);
+    /* --input-checkbox-radio-options-button-border-radius: var(--form-input-border-radius); */
+    --input-checkbox-radio-options-button-border-radius: 1lh;
+    --input-checkbox-radio-options-button-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 55%);
+    --input-checkbox-radio-options-button-outline-active: 0.1rem solid hsl(from var(--theme-form-input-border) h s 5%);
+
+    /* Label styles */
+
+    --input-checkbox-radio-options-button-label-font-size: var(--form-element-font-size);
+    --input-checkbox-radio-options-button-label-min-height: var(--form-element-line-height);
+
+    --input-checkbox-radio-options-button-label-margin-block: 0.8rem;
+    --input-checkbox-radio-options-button-label-padding-inline: 0.8rem;
+
+    [data-form-theme='primary'] {
+      --input-checkbox-radio-options-button-label-text-color: light-dark(var(--gray-11), var(--gray-1));
+      --input-checkbox-radio-options-button-label-icon-color: light-dark(var(--gray-11), var(--gray-1));
+    }
+
+    /* Size variants */
+    &.x-small {
+      --input-checkbox-radio-options-padding-block: 0.2rem;
+      --input-checkbox-radio-options-padding-inline: 1.6rem;
+
+      --input-checkbox-radio-options-button-gap: 1rem;
+    }
+
+    &.small {
+      --input-checkbox-radio-options-padding-block: 0.2rem;
+      --input-checkbox-radio-options-padding-inline: 1.6rem;
+      --input-checkbox-radio-options-button-gap: 1rem;
+    }
+
+    &.default {
+      --input-checkbox-radio-options-padding-block: 0.4rem;
+      --input-checkbox-radio-options-padding-inline: 1.2rem;
+      --input-checkbox-radio-options-button-gap: 1rem;
+    }
+
+    &.medium {
+      --input-checkbox-radio-options-padding-block: 0.4rem;
+      --input-checkbox-radio-options-padding-inline: 1.2rem;
+      --input-checkbox-radio-options-button-gap: 1rem;
+    }
+
+    &.large {
+      --input-checkbox-radio-options-padding-block: 0.4rem;
+      --input-checkbox-radio-options-padding-inline: 1.2rem;
+      --input-checkbox-radio-options-button-gap: 1rem;
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+/*
+* These styles control the appearance of checkboxes.
+*/
+:root {
+  .input-checkbox-radio-wrapper {
+    &.checkbox {
+      --input-checkbox-radio-wrapper-transition: all var(--theme-form-transition-duration) ease-in-out;
+      --input-checkbox-radio-wrapper-background-color: hsl(from var(--theme-form-input-border) h s 25%);
+      --input-checkbox-radio-wrapper-border: 0.1rem solid var(--theme-form-input-border);
+      --input-checkbox-radio-wrapper-border-radius: var(--form-input-border-radius);
+      --input-checkbox-radio-wrapper-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 95%);
+
+      --input-checkbox-radio-wrapper-box-shadow-off: none;
+
+      /* Interactive state */
+      --input-checkbox-radio-wrapper-border-on: 0.1rem solid var(--theme-form-input-border);
+      --input-checkbox-radio-wrapper-outline-on: 0.1rem solid hsl(from var(--theme-form-input-border) h s 1%);
+      --input-checkbox-radio-wrapper-box-shadow-on: 0.1rem 0.1rem 0.1rem 0.1rem hsl(from var(--theme-form-input-border) h s 95%);
+
+      --form-input-checkbox-radio-button-symbol-color: hsl(from var(--theme-form-input-border) h s 75%);
+
+      /* Size variants for radio buttons within a button */
+      &.x-small {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+      }
+
+      &.small {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+      }
+
+      &.default {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
+      }
+
+      &.medium {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+      }
+
+      &.large {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+      }
+
+      /* Size variants for default checkbox */
+      &.button {
+        &.display-as-disc {
+          --input-checkbox-radio-wrapper-border-radius: 100%;
+        }
+
+        &.x-small {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+        }
+
+        &.small {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+        }
+
+        &.default {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        }
+
+        &.medium {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        }
+
+        &.large {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+:root {
+  --input-error-color: var(--theme-error-text);
+  /* --input-error-background-color: transparent; */
+  --input-error-background-color: var(--theme-error-surface);
+
+  --input-error-font-size: var(--form-element-font-size);
+  --input-error-line-height: var(--form-element-line-height);
+  --input-error-font-weight: var(--form-element-font-weight);
+
+  --input-error-margin-block-start: 0rem;
+
+  --input-error-border-radius: var(--form-input-border-radius);
+
+  /* Border styles */
+  --input-error-border-top-left-radius: 0;
+  --input-error-border-top-right-radius: 0;
+  --input-error-border-bottom-right-radius: 0;
+  --input-error-border-bottom-left-radius: 0;
+
+  --input-error-border-top-default: var(--form-element-border-width) solid transparent;
+  --input-error-border-right-default: var(--form-element-border-width) solid transparent;
+  --input-error-border-bottom-default: var(--form-element-border-width-underlined) solid transparent;
+  --input-error-border-left-default: var(--form-element-border-width) solid transparent;
+
+  .detached {
+    --input-error-margin-block-start: 2rem;
+
+    --input-error-border-top-left-radius: var(--input-error-border-radius);
+    --input-error-border-top-right-radius: var(--input-error-border-radius);
+    --input-error-border-bottom-right-radius: var(--input-error-border-radius);
+    --input-error-border-bottom-left-radius: var(--input-error-border-radius);
+  }
+
+  .show {
+    --input-error-background-color: var(--theme-error-surface);
+
+    --input-error-border-bottom-right-radius: var(--input-error-border-radius);
+    --input-error-border-bottom-left-radius: var(--input-error-border-radius);
+
+    --input-error-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
+    --input-error-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
+    --input-error-border-bottom-default: var(--form-element-border-width-underlined) solid var(--red-8);
+    --input-error-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
+  }
+
+  .Xunderlined.show {
+    --input-error-border-bottom-right-radius: var(--input-error-border-radius);
+    --input-error-border-bottom-left-radius: var(--input-error-border-radius);
+
+    --input-error-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
+    --input-error-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
+    --input-error-border-bottom-default: var(--form-element-border-width-underlined) solid var(--red-8);
+    --input-error-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
+  }
+}

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

@@ -0,0 +1,18 @@
+:root {
+  /* Label vars */
+  .normal {
+    --input-label-text-color: var(--theme-form-input-text-label-color-normal);
+    --input-label-text-margin-block: 0.8rem;
+    --input-label-text-size: var(--step-2);
+    --input-label-text-weight: normal;
+    --input-label-text-line-height: 1.5;
+  }
+
+  .underlined {
+    --input-label-text-color: var(--theme-form-input-text-label-color-normal);
+    --input-label-text-margin-block: 0.8rem;
+    --input-label-text-size: var(--step-2);
+    --input-label-text-weight: normal;
+    --input-label-text-line-height: 1.5;
+  }
+}

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

@@ -0,0 +1,67 @@
+/*
+* These styles control the appearance of radio buttons.
+*/
+:root {
+  .input-checkbox-radio-wrapper {
+    &.radio {
+      --input-checkbox-radio-wrapper-transition: all var(--theme-form-transition-duration) ease-in-out;
+      --input-checkbox-radio-wrapper-background-color: hsl(from var(--theme-form-input-border) h s 25%);
+      --input-checkbox-radio-wrapper-border: 0.1rem solid var(--theme-form-input-border);
+      --input-checkbox-radio-wrapper-border-radius: 100%;
+      --input-checkbox-radio-wrapper-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 95%);
+
+      --input-checkbox-radio-wrapper-box-shadow-off: none;
+
+      /* Interactive state */
+      --input-checkbox-radio-wrapper-border-on: 0.1rem solid var(--theme-form-input-border);
+      --input-checkbox-radio-wrapper-outline-on: 0.1rem solid hsl(from var(--theme-form-input-border) h s 1%);
+      --input-checkbox-radio-wrapper-box-shadow-on: 0rem 0rem 0rem 0.3rem hsl(from var(--theme-form-input-border) h s 95%);
+
+      --form-input-checkbox-radio-button-symbol-color: hsl(from var(--theme-form-input-border) h s 75%);
+
+      /* Size variants for radio buttons within a button */
+      &.x-small {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+      }
+
+      &.small {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+      }
+
+      &.default {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
+      }
+
+      &.medium {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+      }
+
+      &.large {
+        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+      }
+
+      /* Size variants for default radio buttons */
+      .button {
+        &.x-small {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-0);
+        }
+
+        &.small {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-1);
+        }
+
+        &.default {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        }
+
+        &.medium {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        }
+
+        &.large {
+          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+:root {
+  .input-select-core {
+    --input-select-animation-duration: 0.2s;
+    --input-select-padding-block: 1.5rem;
+    --input-select-padding-inline: 1rem;
+
+    --input-select-option-padding-block: 1rem;
+    --input-select-option-padding-inline: 1.75rem;
+    --input-select-option-gap: 1.5rem;
+
+    --input-select-option-background-color-hover: hsl(from var(--theme-form-input-border) h s 25%);
+
+    --input-select-option-icon-size: 1.5rem;
+    --input-select-option-transition: all var(--input-select-animation-duration) ease-in-out;
+  }
+}

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

@@ -0,0 +1,22 @@
+/*
+* See _input-select.css for the base styles
+**/
+:root {
+  .input-text-wrapper {
+    &[data-inputmode='numeric'] {
+      --input-element-padding-block: 1.25rem;
+      --element-decorator-padding-inline: 0.4rem;
+
+      [data-btn-theme='input-action'] {
+        --theme-btn-bg: hsl(from var(--theme-form-input-border) h s 25%);
+        --theme-btn-text: var(--gray-00);
+        --form-input-border-radius: 0.2rem;
+
+        --theme-btn-border: hsl(from var(--theme-form-input-border) h s 40%);
+
+        --theme-btn-border-hover: transparent;
+        --theme-btn-outline-hover: hsl(from var(--theme-form-input-border) h s 75%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+:root {
+  .input-textarea-core {
+    --input-textarea-min-height: 4em;
+  }
+}

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

@@ -0,0 +1,9 @@
+@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-checkbox-radio-options-button';
+@import './_form-fieldset';

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

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

package/assets/styles/{forms/variables/_theme.css → extends-layer/srcdev-forms/setup/_generic.css}

@@ -3,9 +3,11 @@
   --line-height: calc((var(--font-size) * 2) - 1rem);
 
   --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-
+  --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;
 }

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

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

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

@@ -0,0 +1,12 @@
+:root {
+  [data-size='default'] {
+    --form-element-font-size: var(--step-2);
+    --form-placeholder-font-size: calc(var(--step-2) * 0.65);
+    --form-element-line-height: var(--step-2);
+    --form-icon-size: var(--step-2);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 2.5 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
+    --form-toggle-switch-width-adjustment: 0.2rem;
+  }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+@import './_x-small';
+@import './_small';
+@import './_default';
+@import './_medium';
+@import './_large';
+
+:root {
+  --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-text-padding-inline: 0.5em;
+  --form-button-padding-inline: 1.25em;
+  --form-button-icon-gap: 1em;
+  --form-input-border-radius: 0.4rem;
+
+  --input-element-padding-block: 1.25rem;
+  --input-element-padding-inline: 1rem;
+}

package/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-form-input-bg-normal); */
+    --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-form-input-border) 5%, transparent);
+    --element-decorator-outline-active: 1px solid var(--theme-form-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-form-input-border);
+    --element-decorator-border-right-default: var(--form-element-border-width) solid var(--theme-form-input-border);
+    --element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-form-input-border);
+    --element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-form-input-border);
+
+    --input-placeholder-color: var(--gray-5);
+    --input-placeholder-font-size: var(--step-2);
+    --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-2);
+    --_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/styles/extends-layer/srcdev-forms/setup/variants/_underlined.css

@@ -0,0 +1,48 @@
+:root {
+  .underlined {
+    --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-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);
+
+    /* Border styles */
+    --element-decorator-border-top-left-radius: 0;
+    --element-decorator-border-top-right-radius: 0;
+    --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-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;
+
+    --input-placeholder-color: var(--gray-5);
+    --input-placeholder-font-size: var(--step-2);
+    --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-2);
+    --_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/styles/extends-layer/srcdev-forms/setup/variants/index.css

@@ -0,0 +1,2 @@
+@import './_normal';
+@import './_underlined';

package/assets/styles/main.css

@@ -1,5 +1,5 @@
-@import './variables';
-@import './forms';
+@import './setup/';
+@import './theming/';
+@import './extends-layer/srcdev-forms/';
 @import './utils';
-@import './typography';
 @import './ally/';

package/assets/styles/setup/index.css

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

package/assets/styles/setup/variables/index.css

@@ -0,0 +1,2 @@
+@import './colors/';
+@import './_reponsive-font-size';

package/assets/styles/theming/index.css

@@ -0,0 +1,2 @@
+@import './vars/';
+@import './utils/';

package/assets/styles/theming/vars/index.css

@@ -0,0 +1 @@
+@import './_type-colors';

package/assets/styles/utils/_page.css

@@ -39,7 +39,7 @@ body {
 form {
   input {
     font: inherit;
-    accent-color: var(--accent-color, red);
+    /* accent-color: var(--accent-color, red); */
   }
 
   label {

package/components/forms/c12/prop-validators/index.ts

@@ -1,5 +1,5 @@
 export const propValidators = {
-  size: ['x-small', 'small', 'normal', 'medium', 'large'],
+  size: ['x-small', 'small', 'default', 'medium', 'large'],
   weight: [
     'wght-100',
     'wght-200',

package/components/forms/form-errors/InputError.vue

@@ -66,7 +66,7 @@ const isArray = computed(() => {
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
 .input-error-message {
   --_grid-template-rows: 0fr;
   --_opacity-show: 1;
@@ -96,16 +96,32 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   display: grid;
   grid-template-rows: var(--_grid-template-rows);
 
-  color: var(--theme-error-text);
-  background-color: var(--theme-error-surface);
-  border-radius: var(--_border-radius);
+  color: var(--input-error-color);
+  background-color: var(--input-error-background-color);
+  /* border-radius: var(--_border-radius); */
 
   transition-property: grid-template-rows;
   transition-duration: var(--_transition-duration);
   transition-timing-function: var(--_transition-timing-function);
   transition-behavior: allow-discrete;
 
-  &.detached {
+  border-top-left-radius: var(--input-error-border-top-left-radius);
+  border-top-right-radius: var(--input-error-border-top-right-radius);
+  border-bottom-left-radius: var(--input-error-border-bottom-left-radius);
+  border-bottom-right-radius: var(--input-error-border-bottom-right-radius);
+
+  border-top: var(--input-error-border-top-default);
+  border-right: var(--input-error-border-right-default);
+  border-bottom: var(--input-error-border-bottom-default);
+  border-left: var(--input-error-border-left-default);
+
+  background-clip: padding-box;
+
+  translate: 0 calc(-1 * var(--form-element-border-width));
+
+  margin-block-start: var(--input-error-margin-block-start);
+
+  /* &.detached {
     border-radius: var(--form-input-border-radius);
     margin-block-start: 2rem;
   }
@@ -116,7 +132,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
 
   &.underlined {
     --_border-radius: 0;
-  }
+  } */
 
   .inner {
     align-items: center;