srcdev-nuxt-forms 0.2.0 → 1.0.0

package/assets/styles/brand/_typography.css

@@ -0,0 +1,176 @@
+:root {
+  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
+  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
+  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
+  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
+  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
+  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
+  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
+  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
+}
+
+/* .typography { */
+/* font-family: 'Poppins', Sans-serif; */
+/* font-family: var(--font-family); */
+
+.heading-1 {
+  font-size: var(--step-5);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-2 {
+  font-size: var(--step-4);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-3 {
+  font-size: var(--step-3);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-4 {
+  font-size: var(--step-2);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-5 {
+  font-size: var(--step-1);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+.heading-6 {
+  font-size: var(--step-0);
+  font-weight: bold;
+  line-height: 1.3;
+}
+
+/* Body text */
+
+.body-large {
+  font-size: var(--step-2);
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.body-normal {
+  font-size: var(--step-1);
+  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--1);
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.body-large-semibold {
+  font-size: var(--step-2);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-normal-semibold {
+  font-size: var(--step-1);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-small-semibold {
+  font-size: var(--step-0);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-xsmall-semibold {
+  font-size: var(--step--1);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-large-bold {
+  font-size: var(--step-2);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-normal-bold {
+  font-size: var(--step-1);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-small-bold {
+  font-size: var(--step-0);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-xsmall-bold {
+  font-size: var(--step--1);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+/* Links */
+
+.link-large {
+  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);
+  }
+}
+
+.link-normal {
+  color: var(--theme-link-default);
+  font-size: var(--step-1);
+  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-0);
+  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--1);
+  font-weight: 600;
+  line-height: 1.5;
+  text-decoration: underline;
+
+  &:visited {
+    color: var(--theme-link-default);
+  }
+}
+/* } */

package/assets/styles/brand/index.css

@@ -0,0 +1 @@
+@import './_typography.css';

package/assets/styles/forms/index.css

@@ -1,3 +1,2 @@
-@import './variables/_theme.css';
+@import './variables/index.css';
 @import './themes/index.css';
-@import './utils/index.css';

package/assets/styles/forms/themes/_default.css

@@ -0,0 +1,3 @@
+:root {
+  --theme-link-default: var(--blue-12);
+}

package/assets/styles/forms/themes/_error.css

@@ -1,12 +1,46 @@
-:where(html) {
-  --theme-error: var(--red-7);
-  --theme-form-error: var(--red-8);
-  --theme-form-error-border: var(--red-2);
-  --theme-form-error-border-hover: var(--red-0);
-  --theme-form-error-outline: var(--red-9);
-  --theme-form-error-outline-hover: var(--red-9);
-  --theme-form-error-bg: var(--red-9);
-  --theme-form-error-bg-hover: var(--red-2);
-  --theme-form-error-color: var(--red-1);
-  --theme-form-error-color-hover: var(--red-9);
+:root {
+  [data-form-theme='error'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--red-8);
+    --theme-form-input-border-active: var(--red-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--red-6);
+    --theme-form-checkbox-symbol: var(--red-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--red-6);
+    --theme-form-radio-symbol: var(--red-8);
+  }
+
+  [data-btn-theme='error'] {
+    --theme-btn-bg: var(--red-12);
+    --theme-btn-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-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-btn-outline-focus: var(--red-0);
+    --theme-btn-text-focus: var(--red-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
+  }
+
+  --theme-error-surface: var(--red-12);
+  --theme-error-text: var(--red-0);
 }

package/assets/styles/forms/themes/_ghost.css

@@ -1,11 +1,43 @@
-:where(html) {
-  --theme-form-ghost: var(--gray-8);
-  --theme-form-ghost-border: transparent;
-  --theme-form-ghost-border-hover: var(--gray-0);
-  --theme-form-ghost-outline: transparent;
-  --theme-form-ghost-outline-hover: var(--gray-11);
-  --theme-form-ghost-bg: transparent;
-  --theme-form-ghost-bg-hover: var(--gray-2);
-  --theme-form-ghost-color: var(--gray-11);
-  --theme-form-ghost-color-hover: var(--gray-11);
+:root {
+  [data-form-theme='ghost'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--gray-8);
+    --theme-form-input-border-active: var(--gray-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--gray-6);
+    --theme-form-checkbox-symbol: var(--gray-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--gray-6);
+    --theme-form-radio-symbol: var(--gray-8);
+  }
+
+  [data-btn-theme='ghost'] {
+    --theme-btn-bg: var(--gray-0);
+    --theme-btn-border: transparent;
+    --theme-btn-outline: transparent;
+    --theme-btn-text: var(--gray-12);
+
+    --theme-btn-bg-hover: var(--gray-2);
+    --theme-btn-border-hover: transparent;
+    --theme-btn-outline-hover: transparent;
+    --theme-btn-text-hover: var(--gray-12);
+
+    --theme-btn-bg-focus: var(--gray-1);
+    --theme-btn-border-focus: transparent;
+    --theme-btn-outline-focus: transparent;
+    --theme-btn-text-focus: var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
+  }
 }

package/assets/styles/forms/themes/_primary.css

@@ -1,13 +1,43 @@
-:where(html) {
-  --theme-form-primary: var(--blue-8);
-  --theme-form-primary-border: var(--blue-2);
-  --theme-form-primary-border-hover: var(--blue-0);
-  --theme-form-primary-outline: var(--blue-11);
-  --theme-form-primary-outline-hover: var(--blue-11);
-  --theme-form-primary-bg: var(--blue-6);
-  --theme-form-primary-bg-hover: var(--blue-2);
-  --theme-form-primary-color: var(--blue-1);
-  --theme-form-primary-color-hover: var(--blue-11);
-  --theme-form-primary-focus: var(--blue-6);
-  --theme-form-primary-radio-color-bg: var(--gray-00);
+:root {
+  [data-form-theme='primary'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--blue-8);
+    --theme-form-input-border-active: var(--blue-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--blue-12);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--blue-6);
+    --theme-form-checkbox-symbol: var(--blue-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--blue-6);
+    --theme-form-radio-symbol: var(--blue-8);
+  }
+
+  [data-btn-theme='primary'] {
+    --theme-btn-bg: var(--blue-12);
+    --theme-btn-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-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-btn-outline-focus: var(--blue-0);
+    --theme-btn-text-focus: var(--blue-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--blue-12);
+  }
 }

package/assets/styles/forms/themes/_secondary.css

@@ -1,13 +1,43 @@
-:where(html) {
-  --theme-form-secondary: var(--gray-8);
-  --theme-form-secondary-border: var(--gray-2);
-  --theme-form-secondary-border-hover: var(--gray-0);
-  --theme-form-secondary-outline: var(--gray-8);
-  --theme-form-secondary-outline-hover: var(--gray-8);
-  --theme-form-secondary-bg: var(--gray-11);
-  --theme-form-secondary-bg-hover: var(--gray-2);
-  --theme-form-secondary-color: var(--gray-1);
-  --theme-form-secondary-color-hover: var(--gray-11);
-  --theme-form-secondary-focus: var(--blue-6);
-  --theme-form-secondary-radio-color-bg: var(--gray-00);
+:root {
+  [data-form-theme='secondary'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--gray-8);
+    --theme-form-input-border-active: var(--gray-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--gray-6);
+    --theme-form-checkbox-symbol: var(--gray-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--gray-6);
+    --theme-form-radio-symbol: var(--gray-8);
+  }
+
+  [data-btn-theme='secondary'] {
+    --theme-btn-bg: var(--gray-12);
+    --theme-btn-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-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-btn-outline-focus: var(--gray-0);
+    --theme-btn-text-focus: var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+  }
 }

package/assets/styles/forms/themes/_success.css

@@ -1,12 +1,43 @@
-:where(html) {
-  --theme-success: var(--green-7);
-  --theme-form-success: var(--green-8);
-  --theme-form-success-border: var(--green-2);
-  --theme-form-success-border-hover: var(--green-0);
-  --theme-form-success-outline: var(--green-9);
-  --theme-form-success-outline-hover: var(--green-9);
-  --theme-form-success-bg: var(--green-9);
-  --theme-form-success-bg-hover: var(--green-2);
-  --theme-form-success-color: var(--green-1);
-  --theme-form-success-color-hover: var(--green-9);
+:root {
+  [data-form-theme='success'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--green-8);
+    --theme-form-input-border-active: var(--green-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--green-6);
+    --theme-form-checkbox-symbol: var(--green-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--green-6);
+    --theme-form-radio-symbol: var(--green-8);
+  }
+
+  [data-btn-theme='success'] {
+    --theme-btn-bg: var(--green-12);
+    --theme-btn-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-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-btn-outline-focus: var(--green-0);
+    --theme-btn-text-focus: var(--green-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
+  }
 }

package/assets/styles/forms/themes/_tertiary.css

@@ -1,11 +1,43 @@
-:where(html) {
-  --theme-form-tertiary: var(--gray-8);
-  --theme-form-tertiary-border: var(--gray-2);
-  --theme-form-tertiary-border-hover: var(--gray-2);
-  --theme-form-tertiary-outline: var(--gray-8);
-  --theme-form-tertiary-outline-hover: var(--gray-8);
-  --theme-form-tertiary-bg: var(--gray-1);
-  --theme-form-tertiary-bg-hover: var(--gray-11);
-  --theme-form-tertiary-color: var(--gray-9);
-  --theme-form-tertiary-color-hover: var(--gray-2);
+:root {
+  [data-form-theme='tertiary'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--gray-8);
+    --theme-form-input-border-active: var(--gray-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--gray-6);
+    --theme-form-checkbox-symbol: var(--gray-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--gray-6);
+    --theme-form-radio-symbol: var(--gray-8);
+  }
+
+  [data-btn-theme='tertiary'] {
+    --theme-btn-bg: var(--gray-0);
+    --theme-btn-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-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-btn-outline-focus: var(--gray-12);
+    --theme-btn-text-focus: var(--gray-0);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+  }
 }

package/assets/styles/forms/themes/_warning.css

@@ -1,11 +1,43 @@
-:where(html) {
-  --theme-form-warning: var(--orange-8);
-  --theme-form-warning-border: var(--orange-2);
-  --theme-form-warning-border-hover: var(--orange-0);
-  --theme-form-warning-outline: var(--orange-11);
-  --theme-form-warning-outline-hover: var(--orange-11);
-  --theme-form-warning-bg: var(--orange-6);
-  --theme-form-warning-bg-hover: var(--orange-2);
-  --theme-form-warning-color: var(--orange-1);
-  --theme-form-warning-color-hover: var(--orange-11);
+:root {
+  [data-form-theme='warning'] {
+    --theme-form-input-bg: white;
+    --theme-form-input-border: var(--orange-8);
+    --theme-form-input-border-active: var(--orange-2);
+    --theme-form-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);
+    --theme-form-input-text: var(--brand-grayscale-text-form);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
+
+    --theme-form-checkbox-bg: white;
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--orange-6);
+    --theme-form-checkbox-symbol: var(--orange-8);
+
+    --theme-form-radio-bg: white;
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--orange-6);
+    --theme-form-radio-symbol: var(--orange-8);
+  }
+
+  [data-btn-theme='warning'] {
+    --theme-btn-bg: var(--orange-12);
+    --theme-btn-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-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-btn-outline-focus: var(--orange-0);
+    --theme-btn-text-focus: var(--orange-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
+  }
 }

package/assets/styles/forms/themes/index.css

@@ -1,3 +1,4 @@
+@import './_default.css';
 @import './_primary.css';
 @import './_secondary.css';
 @import './_tertiary.css';