srcdev-nuxt-forms 3.0.0 → 4.0.0

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

@@ -0,0 +1,85 @@
+:root {
+  [data-form-theme='warning'] {
+    --theme-form-input-bg-normal: 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-form-input-outline: white;
+    --theme-form-input-outline-active: var(--orange-6);
+    --theme-form-input-outline-focus: var(--orange-6);
+    --theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-checkbox-outline: light-dark(var(--orange-1), var(--orange-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--orange-6);
+    --theme-form-checkbox-symbol: var(--orange-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-radio-outline: light-dark(var(--orange-1), var(--orange-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--orange-6);
+    --theme-form-radio-symbol: var(--orange-12);
+
+    --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
+
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+
+    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--orange-12), var(--orange-1));
+
+    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
+    --theme-checkbox-radio-button-border-width: 0.1rem;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
+    --theme-checkbox-radio-button-outline-width: 0.1rem;
+
+    --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);
+    --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: light-dark(var(--orange-12), var(--orange-2));
+  }
+}

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

@@ -0,0 +1,9 @@
+@import './_primary';
+@import './_secondary';
+@import './_tertiary';
+@import './_ghost';
+@import './_error';
+@import './_success';
+@import './_warning';
+@import './_input-action';
+@import './_input-action-underlined';

package/assets/styles/forms/variables/_sizes.css

@@ -0,0 +1,71 @@
+: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;
+
+  [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;
+
+    --form-input-checkbox-radio-button-size: var(--step-0);
+  }
+  [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;
+
+    --form-input-checkbox-radio-button-size: var(--step-1);
+  }
+  [data-size='normal'] {
+    --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;
+
+    --form-input-checkbox-radio-button-size: var(--step-2);
+  }
+  [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;
+
+    --form-input-checkbox-radio-button-size: var(--step-3);
+  }
+  [data-size='large'] {
+    --form-element-font-size: var(--step-4);
+    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
+    --form-element-line-height: var(--step-4);
+    --form-icon-size: var(--step-4);
+    --form-input-border-radius: 0.4rem;
+    --form-icon-only-button-size: calc(var(--step-1) * 3 + 1px);
+    --form-toggle-symbol-size: calc(var(--step-4) * 1.816);
+    --form-toggle-switch-width-adjustment: -0.2rem;
+
+    --form-input-checkbox-radio-button-size: var(--step-4);
+  }
+}

package/assets/styles/forms/variables/_theme.css

@@ -0,0 +1,11 @@
+:root {
+  --font-size: 1.6rem;
+  --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-error-surface: var(--red-12);
+  --theme-error-text: var(--red-0);
+
+  --theme-form-button-font-size-normal: var(--form-element-font-size);
+}

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

@@ -0,0 +1,2 @@
+@import './_theme.css';
+@import './_sizes.css';

package/assets/styles/main.css

@@ -0,0 +1,5 @@
+@import './variables';
+@import './forms';
+@import './utils';
+@import './typography';
+@import './ally/';

package/assets/styles/typography/index.css

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

package/assets/styles/typography/utils/_font-classes.css

@@ -0,0 +1,190 @@
+.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-3);
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.body-medium {
+  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-3);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.body-medium-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-3);
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.body-medium-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-3);
+  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-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/typography/utils/_weights.css

@@ -0,0 +1,69 @@
+/* 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;
+}
+
+/* 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/assets/styles/typography/utils/index.css

@@ -0,0 +1,2 @@
+@import './_font-classes.css';
+@import './_weights.css';

package/assets/styles/typography/variables/_colors.css

@@ -0,0 +1,14 @@
+:root {
+  --theme-link-default: light-dark(var(--blue-12), var(--blue-4));
+
+  --page-bg: light-dark(var(--gray-0), var(--gray-9));
+
+  --surface-subtle: light-dark(var(--gray-1), var(--gray-8));
+
+  --grayscale-text-title: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-body: light-dark(var(--gray-12), var(--gray-3));
+  --grayscale-text-subtitle: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-caption: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-negative: light-dark(var(--gray-12), var(--gray-2));
+  --grayscale-text-disabled: light-dark(var(--gray-12), var(--gray-2));
+}

package/assets/styles/typography/variables/_reponsive-font-size.css

@@ -0,0 +1,10 @@
+: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);
+}

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

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