srcdev-nuxt-forms 5.1.1 → 6.0.0

package/README.md

@@ -82,3 +82,19 @@ npm preview
 Styles exist for multiple themes/variants, primary, secondary, tertiary, error etc.
 
 Colour scheme can be updated by modifying the css colour variables
+
+## Thing to note
+
+Must add modifier class within nuxt config to enable local css overrides:
+
+```bash
+  app: {
+    head: {
+      htmlAttrs: {
+        class: 'your-site-class',
+      },
+    },
+  },
+```
+
+This class must be added to css files located at `~/assets/styles/extends-layer/srcdev-forms/components`

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

@@ -0,0 +1,38 @@
+.your-site-class {
+  .form-fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    &.single-checkbox-fieldset {
+    }
+
+    &.multiple-checkboxes-fieldset {
+    }
+
+    &.multiple-radiobuttons-fieldset {
+    }
+
+    .form-fieldset-legend {
+      color: var(--form-fieldset-legend-color);
+      margin-block: 0.8rem;
+      font-size: var(--step-5);
+      font-weight: normal;
+      line-height: 1.5;
+
+      &.has-description {
+        margin-bottom: 0;
+      }
+    }
+
+    .form-fieldset-description {
+      font-size: 1.6rem;
+      margin-top: 1.2rem;
+    }
+
+    .form-fieldset-content {
+      margin-block-start: 0;
+      margin-block-end: 0;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+.your-site-class {
+  .input-button-core {
+    gap: var(--form-button-icon-gap);
+    border-radius: var(--form-input-border-radius);
+
+    padding-inline: var(--form-button-padding-inline);
+    padding-block-start: var(--form-element-padding-block-start);
+    padding-block-end: var(--form-element-padding-block-end);
+
+    box-shadow: var(--box-shadow-off);
+    background-color: var(--theme-button-surface);
+    border: var(--form-element-border-width) solid var(--theme-button-border);
+    color: var(--theme-button-text);
+    outline: var(--form-element-outline-width) solid var(--theme-button-outline);
+    outline-offset: var(--form-element-outline-offset-focus);
+
+    &:hover {
+      background-color: var(--theme-button-surface-hover);
+      border-color: var(--theme-input-border-hover);
+      color: var(--theme-button-text-hover);
+      outline-color: var(--theme-button-outline-hover);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    &:focus-visible {
+      background-color: var(--theme-button-surface-hover);
+      border-color: var(--theme-button-border-focus);
+      color: var(--theme-button-text-focus);
+      outline-color: var(--theme-button-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    &[readonly] {
+      opacity: 0.5;
+      &:hover,
+      &:focus-visible {
+        cursor: not-allowed;
+      }
+    }
+
+    &.icon-only {
+      aspect-ratio: 1;
+      height: var(--form-icon-only-button-size);
+      width: var(--form-icon-only-button-size);
+      margin: 0;
+      padding: 0;
+    }
+
+    .btn-text {
+      display: inline-block;
+      white-space: nowrap;
+      font-size: var(--form-element-font-size);
+      line-height: var(--form-element-line-height);
+    }
+
+    .btn-icon {
+      display: flex;
+      .icon {
+        aspect-ratio: 1;
+        display: inline-block;
+        height: var(--form-icon-size);
+        width: var(--form-icon-size);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+.your-site-class {
+  .input-checkbox-radio-wrapper {
+    background-color: var(--theme-checkbox-symbol-surface);
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+    box-shadow: var(--_box-shadow);
+
+    &.x-small {
+      --input-symbol-size: var(--step-3);
+    }
+
+    &.small {
+      --input-symbol-size: var(--step-4);
+    }
+
+    &.default {
+      --input-symbol-size: var(--step-7);
+    }
+
+    &.medium {
+      --input-symbol-size: var(--step-6);
+    }
+
+    &.large {
+      --input-symbol-size: var(--step-6);
+    }
+
+    &.checkbox {
+      border-radius: var(--form-input-border-radius);
+      &.button {
+        &.display-as-disc {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    &.radio {
+      border-radius: 50%;
+    }
+
+    /* focus-visible */
+    &:not(.button):focus-within {
+      background-color: var(--theme-input-surface-focus);
+      outline-color: var(--theme-input-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    .input-checked-icon {
+      color: var(--theme-checkbox-symbol-color);
+      box-shadow: var(--_box-shadow);
+    }
+
+    .input-checkbox-radio-core {
+      margin: 0;
+      opacity: 0;
+
+      &:not(.is-button) {
+        &:focus-visible {
+          /* background-color: var(--theme-input-surface-focus);
+          outline-color: var(--theme-input-outline-focus);
+          outline-offset: var(--form-element-outline-offset-focus); */
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+.your-site-class {
+  .input-checkbox-radio-options-button {
+    gap: 1rem;
+    border-radius: 1lh;
+
+    /* &.inline {} */
+
+    background-color: var(--theme-input-surface);
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+
+    box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
+    padding-block: var(--input-checkbox-radio-options-padding-block);
+    padding-inline: var(--input-checkbox-radio-options-padding-inline);
+
+    &:hover {
+      background-color: var(--theme-input-surface-hover);
+      border-color: var(--theme-input-border);
+      outline-color: var(--theme-input-outline-hover);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    &:has(.input-checkbox-radio-core:focus-visible) {
+      background-color: var(--theme-input-surface-focus);
+      outline-color: var(--theme-input-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    /* Sizes */
+    &.x-small {
+      padding-block: 0.2rem;
+      padding-inline: 1.6rem;
+      gap: 1rem;
+    }
+    &.small {
+      padding-block: 0.2rem;
+      padding-inline: 1.6rem;
+      gap: 1rem;
+    }
+    &.default {
+      padding-block: 0.4rem;
+      padding-inline: 1.2rem;
+      gap: 1rem;
+    }
+    &.medium {
+      padding-block: 0.4rem;
+      padding-inline: 1.2rem;
+      gap: 1rem;
+    }
+    &.large {
+      padding-block: 0.4rem;
+      padding-inline: 1.2rem;
+      gap: 1rem;
+    }
+
+    .input-checkbox-radio-options-button-label {
+      color: var(--theme-checkbox-label-text-color);
+      font-size: var(--form-element-font-size);
+      min-height: var(--form-element-line-height);
+      padding-block: 0.8rem;
+      padding-inline: 0.8rem;
+
+      &:hover {
+      }
+    }
+
+    .decorator-icon {
+      color: var(--theme-checkbox-symbol-color);
+
+      .icon {
+        height: var(--theme-checkbox-decorator-icon-size);
+        width: var(--theme-checkbox-decorator-icon-size);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+.your-site-class {
+  .input-error-message {
+    color: var(--input-error-color);
+    background-color: var(--theme-error-surface);
+
+    &.show {
+      border: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-bottom-left-radius: var(--form-input-border-radius-underlined);
+      border-bottom-right-radius: var(--form-input-border-radius-underlined);
+
+      &.detached {
+        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(--red-8);
+        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
+
+        border-radius: var(--form-input-border-radius);
+      }
+    }
+
+    .inner {
+      .inner-content {
+        .inner-icon {
+          padding-left: 1.2rem;
+
+          .icon {
+            color: white;
+          }
+        }
+
+        .message {
+          font-size: 1.6rem;
+          font-weight: 500;
+          padding-block: 1.2rem 1rem;
+          padding-inline: 1.2rem;
+
+          .message-single {
+            color: white;
+          }
+
+          .message-list {
+            .message-list-item {
+              color: white;
+            }
+
+            .message-list-item + .message-list-item {
+              margin-block-start: 0.6rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+.your-site-class {
+  .input-label {
+    &.normal {
+      color: var(--form-label-color);
+      margin-block: 0.8rem;
+      font-size: var(--step-5);
+      font-weight: normal;
+      line-height: 1.5;
+      display: block;
+    }
+
+    &.underlined {
+      color: var(--form-label-color);
+      margin-block: 0.8rem;
+      font-size: var(--step-5);
+      font-weight: normal;
+      line-height: 1.5;
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,140 @@
+.your-site-class {
+  .input-select-wrapper {
+    background-color: var(--theme-input-surface);
+
+    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);
+
+      &:focus-within {
+        outline-color: var(--theme-input-outline-focus);
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
+
+      &.error {
+        border-color: var(--theme-error-surface);
+      }
+    }
+
+    &.underlined {
+      margin-block-start: 0;
+      padding-block: 0;
+
+      outline: var(--form-element-outline-width) solid transparent;
+
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: var(--form-input-border-radius-underlined);
+      border-bottom-right-radius: var(--form-input-border-radius-underlined);
+
+      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 {
+        outline-color: var(--theme-error-surface);
+        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);
+      }
+    }
+
+    .input-select-core {
+      appearance: none;
+      background-color: transparent;
+
+      /* For legacy support - eg, Safari */
+      /* &::after {
+      content: '';
+      width: 0.8em;
+      height: 0.5em;
+      background-color: var(--theme-input-border);
+      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    } */
+
+      /* Start modern Select CSS */
+      &,
+      &::picker(select) {
+        appearance: base-select;
+      }
+
+      &::picker(select) {
+        transition: display allow-discrete var(--theme-form-transition-duration), opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
+      }
+
+      &:not(:open)::picker(select) {
+        opacity: 0;
+      }
+
+      &:open::picker(select) {
+        opacity: 1;
+        border: var(--form-element-border-width) solid var(--theme-input-border);
+        outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+
+      border: none;
+      outline: none;
+      border-radius: 0;
+      width: 100%;
+
+      &:hover {
+        background-color: var(--theme-input-surface-hover);
+      }
+
+      /* END modern Select CSS */
+
+      font-family: var(--font-family);
+      font-size: var(--form-element-font-size);
+      line-height: var(--form-element-line-height);
+      padding-block: 1.5rem;
+      padding-inline: 1rem;
+
+      .input-select-core-option {
+        padding-block: 1rem;
+        padding-inline: 1.75rem;
+        gap: 1.5rem;
+        transition: all var(--theme-form-transition-duration) ease-in-out;
+
+        &:hover {
+          background-color: var(--theme-input-surface-hover);
+        }
+
+        .input-select-core-option-decorator-icon {
+          display: inline-block;
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,190 @@
+.your-site-class {
+  .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;
+      }
+    }
+  }
+}