srcdev-nuxt-forms 6.1.1 → 6.1.3

package/app/assets/styles/setup/theming/themes/_secondary.css

@@ -1,66 +0,0 @@
-[data-theme='secondary'] {
-  --colour-theme-0: var(--gray-0);
-  --colour-theme-1: var(--gray-1);
-  --colour-theme-2: var(--gray-2);
-  --colour-theme-3: var(--gray-3);
-  --colour-theme-4: var(--gray-4);
-  --colour-theme-5: var(--gray-5);
-  --colour-theme-6: var(--gray-6);
-  --colour-theme-7: var(--gray-7);
-  --colour-theme-8: var(--gray-8);
-  --colour-theme-9: var(--gray-9);
-  --colour-theme-10: var(--gray-10);
-  --colour-theme-11: var(--gray-11);
-  --colour-theme-12: var(--gray-12);
-
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
-  --form-label-color: light-dark(var(--gray-12), var(--gray-1));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
-  --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
-  --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
-
-  --theme-input-border: light-dark(var(--gray-9), var(--gray-4));
-  --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
-  --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
-  --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
-
-  --theme-input-text: var(--gray-0);
-  --theme-input-text-hover: var(--gray-0);
-  --theme-input-text-focus: var(--gray-0);
-  --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
-
-  /* Checkboxes & Radio buttons */
-  /* --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1)); */
-  /* --theme-checkbox-decorator-color: light-dark(var(--gray-11), var(--gray-1)); */
-  /* --theme-checkbox-symbol-surface: var(--colour-theme-12); */
-  /* --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1)); */
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-1);
-  --theme-focus-visible-outline: var(--colour-theme-1);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--gray-9), var(--gray-10));
-  --theme-button-surface-hover: light-dark(var(--gray-10), var(--gray-11));
-
-  --theme-button-border: light-dark(var(--gray-9), var(--gray-2));
-  --theme-button-border-hover: light-dark(var(--gray-10), var(--gray-1));
-  --theme-button-border-focus: light-dark(var(--gray-10), var(--gray-5));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--gray-10), var(--gray-1));
-  --theme-button-outline-focus: light-dark(var(--gray-10), var(--gray-1));
-
-  --theme-button-text: var(--gray-0);
-  --theme-button-text-hover: var(--gray-0);
-  --theme-button-text-focus: var(--gray-0);
-}

package/app/assets/styles/setup/theming/themes/_success.css

@@ -1,66 +0,0 @@
-[data-theme='success'] {
-  --colour-theme-0: var(--green-0);
-  --colour-theme-1: var(--green-1);
-  --colour-theme-2: var(--green-2);
-  --colour-theme-3: var(--green-3);
-  --colour-theme-4: var(--green-4);
-  --colour-theme-5: var(--green-5);
-  --colour-theme-6: var(--green-6);
-  --colour-theme-7: var(--green-7);
-  --colour-theme-8: var(--green-8);
-  --colour-theme-9: var(--green-9);
-  --colour-theme-10: var(--green-10);
-  --colour-theme-11: var(--green-11);
-  --colour-theme-12: var(--green-12);
-
-  /* Generic */
-  --theme-box-shadow: var(--colour-theme-12);
-
-  /* Fieldset & Label */
-  --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
-  --form-label-color: light-dark(var(--gray-12), var(--gray-1));
-
-  /* Input Elements */
-  --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
-  --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
-  --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
-
-  --theme-input-border: var(--green-10);
-  --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
-  --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
-
-  --theme-input-outline: transparent;
-  --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
-  --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
-
-  --theme-input-text: var(--gray-0);
-  --theme-input-text-hover: var(--gray-0);
-  --theme-input-text-focus: var(--gray-0);
-  --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
-
-  /* Checkboxes & Radio buttons */
-  /* --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1)); */
-  /* --theme-checkbox-decorator-color: var(--green-10); */
-  /* --theme-checkbox-symbol-surface: var(--green-10); */
-  /* --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1)); */
-
-  /* a11y */
-  --theme-focus-visible-shadow: var(--colour-theme-1);
-  --theme-focus-visible-outline: var(--colour-theme-1);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--green-5), var(--green-10));
-  --theme-button-surface-hover: light-dark(var(--green-6), var(--green-12));
-
-  --theme-button-border: light-dark(var(--green-9), var(--green-4));
-  --theme-button-border-hover: light-dark(var(--green-10), var(--green-5));
-  --theme-button-border-focus: light-dark(var(--green-10), var(--green-5));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--green-10), var(--green-5));
-  --theme-button-outline-focus: light-dark(var(--green-10), var(--green-5));
-
-  --theme-button-text: var(--green-0);
-  --theme-button-text-hover: var(--green-0);
-  --theme-button-text-focus: var(--green-0);
-}

package/app/assets/styles/setup/theming/themes/_tertiary.css

@@ -1,31 +0,0 @@
-[data-theme='tertiary'] {
-  --colour-theme-0: var(--gray-0);
-  --colour-theme-1: var(--gray-1);
-  --colour-theme-2: var(--gray-2);
-  --colour-theme-3: var(--gray-3);
-  --colour-theme-4: var(--gray-4);
-  --colour-theme-5: var(--gray-5);
-  --colour-theme-6: var(--gray-6);
-  --colour-theme-7: var(--gray-7);
-  --colour-theme-8: var(--gray-8);
-  --colour-theme-9: var(--gray-9);
-  --colour-theme-10: var(--gray-10);
-  --colour-theme-11: var(--gray-11);
-  --colour-theme-12: var(--gray-12);
-
-  /* Buttons */
-  --theme-button-surface: light-dark(var(--gray-5), var(--gray-4));
-  --theme-button-surface-hover: light-dark(var(--gray-6), var(--gray-5));
-
-  --theme-button-border: light-dark(var(--gray-9), var(--gray-4));
-  --theme-button-border-hover: light-dark(var(--gray-10), var(--gray-5));
-  --theme-button-border-focus: light-dark(var(--gray-10), var(--gray-5));
-
-  --theme-button-outline: transparent;
-  --theme-button-outline-hover: light-dark(var(--gray-10), var(--gray-5));
-  --theme-button-outline-focus: light-dark(var(--gray-10), var(--gray-5));
-
-  --theme-button-text: var(--gray-0);
-  --theme-button-text-hover: var(--gray-0);
-  --theme-button-text-focus: var(--gray-0);
-}

package/app/assets/styles/setup/theming/themes/_warning.css

@@ -1,68 +0,0 @@
-:root {
-  [data-theme='warning'] {
-    --colour-theme-0: var(--orange-0);
-    --colour-theme-1: var(--orange-1);
-    --colour-theme-2: var(--orange-2);
-    --colour-theme-3: var(--orange-3);
-    --colour-theme-4: var(--orange-4);
-    --colour-theme-5: var(--orange-5);
-    --colour-theme-6: var(--orange-6);
-    --colour-theme-7: var(--orange-7);
-    --colour-theme-8: var(--orange-8);
-    --colour-theme-9: var(--orange-9);
-    --colour-theme-10: var(--orange-10);
-    --colour-theme-11: var(--orange-11);
-    --colour-theme-12: var(--orange-12);
-
-    /* Generic */
-    --theme-box-shadow: var(--colour-theme-12);
-
-    /* Fieldset & Label */
-    --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
-    --form-label-color: light-dark(var(--gray-12), var(--gray-1));
-
-    /* Input Elements */
-    --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
-    --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));
-    --theme-input-surface-focus: light-dark(var(--gray-1), var(--gray-10));
-
-    --theme-input-border: var(--orange-10);
-    --theme-input-border-hover: light-dark(var(--gray-10), var(--gray-5));
-    --theme-input-border-focus: light-dark(var(--gray-10), var(--gray-5));
-
-    --theme-input-outline: transparent;
-    --theme-input-outline-hover: light-dark(var(--gray-10), var(--gray-1));
-    --theme-input-outline-focus: light-dark(var(--gray-10), var(--gray-1));
-
-    --theme-input-text: var(--gray-0);
-    --theme-input-text-hover: var(--gray-0);
-    --theme-input-text-focus: var(--gray-0);
-    --theme-input-placeholder: light-dark(var(--gray-7), var(--gray-5));
-
-    /* Checkboxes & Radio buttons */
-    /* --theme-checkbox-label-text-color: light-dark(var(--gray-11), var(--gray-1)); */
-    /* --theme-checkbox-decorator-color: var(--orange-10); */
-    /* --theme-checkbox-symbol-surface: var(--orange-10); */
-    /* --theme-checkbox-symbol-color: light-dark(var(--gray-11), var(--gray-1)); */
-
-    /* a11y */
-    --theme-focus-visible-shadow: var(--colour-theme-1);
-    --theme-focus-visible-outline: var(--colour-theme-1);
-
-    /* Buttons */
-    --theme-button-surface: light-dark(var(--orange-5), var(--orange-10));
-    --theme-button-surface-hover: light-dark(var(--orange-6), var(--orange-12));
-
-    --theme-button-border: light-dark(var(--orange-9), var(--orange-4));
-    --theme-button-border-hover: light-dark(var(--orange-10), var(--orange-5));
-    --theme-button-border-focus: light-dark(var(--orange-10), var(--orange-5));
-
-    --theme-button-outline: transparent;
-    --theme-button-outline-hover: light-dark(var(--orange-10), var(--orange-5));
-    --theme-button-outline-focus: light-dark(var(--orange-10), var(--orange-5));
-
-    --theme-button-text: var(--orange-0);
-    --theme-button-text-hover: var(--orange-0);
-    --theme-button-text-focus: var(--orange-0);
-  }
-}

package/app/assets/styles/setup/theming/themes/index.css

@@ -1,9 +0,0 @@
-@import './_default';
-@import './_primary';
-@import './_secondary';
-@import './_tertiary';
-@import './_error';
-@import './_success';
-@import './_warning';
-@import './_info';
-@import './_ghost';

package/app/assets/styles/setup/typography/index.css

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

package/app/assets/styles/setup/typography/utility-classes/_generic-font-classes.css

@@ -1,217 +0,0 @@
-.heading-1 {
-  font-size: var(--step-8);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-2 {
-  font-size: var(--step-7);
-  /* font-weight: bold; */
-  font-variation-settings: 'wght' 500;
-  line-height: 1.3;
-}
-
-.heading-3 {
-  font-size: var(--step-6);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-4 {
-  font-size: var(--step-5);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-5 {
-  font-size: var(--step-4);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-6 {
-  font-size: var(--step-3);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-/* Body text */
-
-.body-large {
-  font-size: var(--step-6);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-medium {
-  font-size: var(--step-5);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-normal {
-  font-size: var(--step-4);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-small {
-  font-size: var(--step--0);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-xsmall {
-  font-size: var(--step-2);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-large-semibold {
-  font-size: var(--step-6);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-medium-semibold {
-  font-size: var(--step-5);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-normal-semibold {
-  font-size: var(--step-4);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-small-semibold {
-  font-size: var(--step-3);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-xsmall-semibold {
-  font-size: var(--step-2);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-large-bold {
-  font-size: var(--step-6);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-medium-bold {
-  font-size: var(--step-5);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-normal-bold {
-  font-size: var(--step-4);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-small-bold {
-  font-size: var(--step-3);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-xsmall-bold {
-  font-size: var(--step-2);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-/* Links */
-
-.link-large {
-  color: var(--theme-link-default);
-  font-size: var(--step-6);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-medium {
-  color: var(--theme-link-default);
-  font-size: var(--step-5);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-normal {
-  color: var(--theme-link-default);
-  font-size: var(--step-4);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited,
-  &:active {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-small {
-  color: var(--theme-link-default);
-  font-size: var(--step-3);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-xsmall {
-  color: var(--theme-link-default);
-  font-size: var(--step-2);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.italic {
-  font-style: italic;
-}
-
-.wght-300 {
-  font-variation-settings: 'wght' 300;
-}
-.wght-400 {
-  font-variation-settings: 'wght' 400;
-}
-.wght-500 {
-  font-variation-settings: 'wght' 500;
-}
-.wght-600 {
-  font-variation-settings: 'wght' 600;
-}
-.wght-700 {
-  font-variation-settings: 'wght' 700;
-}
-.wght-800 {
-  font-variation-settings: 'wght' 800;
-}
-.wght-900 {
-  font-variation-settings: 'wght' 900;
-}

package/app/assets/styles/setup/typography/utility-classes/_generic-font-variation-settings.css

@@ -1,29 +0,0 @@
-/* Using the font-variation-settings property. */
-
-.fvs-wght-100 {
-  font-variation-settings: 'wght' 100;
-}
-.fvs-wght-200 {
-  font-variation-settings: 'wght' 200;
-}
-.fvs-wght-300 {
-  font-variation-settings: 'wght' 300;
-}
-.fvs-wght-400 {
-  font-variation-settings: 'wght' 400;
-}
-.fvs-wght-500 {
-  font-variation-settings: 'wght' 500;
-}
-.fvs-wght-600 {
-  font-variation-settings: 'wght' 600;
-}
-.fvs-wght-700 {
-  font-variation-settings: 'wght' 700;
-}
-.fvs-wght-800 {
-  font-variation-settings: 'wght' 800;
-}
-.fvs-wght-900 {
-  font-variation-settings: 'wght' 900;
-}

package/app/assets/styles/setup/typography/utility-classes/_generic-font-weights.css

@@ -1,39 +0,0 @@
-/* By numeric step */
-.wght-100 {
-  font-weight: 100;
-}
-.wght-200 {
-  font-weight: 200;
-}
-.wght-300 {
-  font-weight: 300;
-}
-.wght-400 {
-  font-weight: 400;
-}
-.wght-500 {
-  font-weight: 500;
-}
-.wght-600 {
-  font-weight: 600;
-}
-.wght-700 {
-  font-weight: 700;
-}
-.wght-800 {
-  font-weight: 800;
-}
-.wght-900 {
-  font-weight: 900;
-}
-
-/* By named weight */
-.light {
-  font-weight: light;
-}
-.normal {
-  font-weight: normal;
-}
-.bold {
-  font-weight: bold;
-}

package/app/assets/styles/setup/typography/utility-classes/index.css

@@ -1,3 +0,0 @@
-@import './_generic-font-classes.css';
-@import './_generic-font-variation-settings.css';
-@import './_generic-font-weights.css';

package/app/assets/styles/setup/typography/vars/_reponsive-font-sizes.css

@@ -1,12 +0,0 @@
-:root {
-  --step-10: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem);
-  --step-9: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
-  --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
-  --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
-  --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
-  --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
-  --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
-  --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
-  --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
-  --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
-}

package/app/assets/styles/setup/typography/vars/index.css

@@ -1 +0,0 @@
-@import './_reponsive-font-sizes.css';

package/app/assets/styles/setup/utility-classes/_fluid-spacing.css

@@ -1,13 +0,0 @@
-/* @link https://utopia.fyi/clamp/calculator?a=360,1240,1—2|2—4|4—8|6—12|8—16|10—20|12—24|16—32|20—40 */
-
-:root {
-  --fluid-1-2: clamp(0.0625rem, 0.0369rem + 0.1136vw, 0.125rem);
-  --fluid-2-4: clamp(0.125rem, 0.0739rem + 0.2273vw, 0.25rem);
-  --fluid-4-8: clamp(0.25rem, 0.1477rem + 0.4545vw, 0.5rem);
-  --fluid-6-12: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
-  --fluid-8-16: clamp(0.5rem, 0.2955rem + 0.9091vw, 1rem);
-  --fluid-10-20: clamp(0.625rem, 0.3693rem + 1.1364vw, 1.25rem);
-  --fluid-12-24: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
-  --fluid-16-32: clamp(1rem, 0.5909rem + 1.8182vw, 2rem);
-  --fluid-20-40: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
-}

package/app/assets/styles/setup/utility-classes/animations/_auto-rotate.css

@@ -1,13 +0,0 @@
-@keyframes autoRotateAnimation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.auto-rotate {
-  animation: autoRotateAnimation;
-  animation-timeline: view();
-}

package/app/assets/styles/setup/utility-classes/animations/_entry-exit-blur.css

@@ -1,16 +0,0 @@
-.entry-exit-blur {
-  animation: entryExitBlurAnimation linear both;
-  animation-timeline: view();
-}
-@keyframes entryExitBlurAnimation {
-  0% {
-    filter: blur(40px);
-  }
-  45%,
-  55% {
-    filter: blur(0px);
-  }
-  100% {
-    filter: blur(40px);
-  }
-}

package/app/assets/styles/setup/utility-classes/animations/_entry-slide-in.css

@@ -1,15 +0,0 @@
-@keyframes entrySlideInAnimation {
-  from {
-    opacity: 0;
-    transform: translateY(200px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.entry-slide-in {
-  animation: entrySlideInAnimation both;
-  animation-timeline: view(70% 5%);
-}

package/app/assets/styles/setup/utility-classes/animations/_entry-zoom-reveal.css

@@ -1,15 +0,0 @@
-@keyframes entryZoomRevealAnimation {
-  from {
-    opacity: 0;
-    transform: translateY(200px) scale(0.3);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.entry-zoom-reveal {
-  animation: entryZoomRevealAnimation both;
-  animation-timeline: view(70% 5%);
-}

package/app/assets/styles/setup/utility-classes/animations/index.css

@@ -1,4 +0,0 @@
-@import './_entry-zoom-reveal';
-@import './_entry-slide-in';
-@import './_entry-exit-blur';
-@import './_auto-rotate';

package/app/assets/styles/setup/utility-classes/index.css

@@ -1,2 +0,0 @@
-@import './_fluid-spacing';
-@import './animations/';