srcdev-nuxt-forms 0.2.0 → 1.0.0

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

@@ -0,0 +1,104 @@
+:root {
+  --grayscale-surface-subtle: #f3f2f4;
+  --grayscale-surface-default: #847d85;
+  --grayscale-surface-disabled: #c6c3c7;
+  --grayscale-border-default: #9d979d;
+  --grayscale-border-disabled: #ada8ad;
+  --grayscale-border-dark: #494549;
+  --grayscale-text-title: #373538;
+  --grayscale-text-body: #494549;
+  --grayscale-text-subtitle: #787279;
+  --grayscale-text-caption: #847d85;
+  --grayscale-text-negative: #f3f2f3;
+  --grayscale-text-disabled: #c6c3c7;
+
+  --primary-surface-subtle: #f2e8f2;
+  --primary-surface-light: #d5b9d7;
+  --primary-surface-default: #781d7d;
+  --primary-surface-dark: #551559;
+  --primary-border-subtle: #d5b9d7;
+  --primary-border-default: #781d7d;
+  --primary-border-dark: #421045;
+  --primary-border-light: #c197c3;
+  --primary-text-icon: #781d7d;
+
+  --secondary-surface-subtle: #fef1eb;
+  --secondary-surface-light: #fbd5c1;
+  --secondary-surface-default: #f37737;
+  --secondary-surface-dark: #ad5427;
+  --secondary-border-subtle: #fbd5c1;
+  --secondary-border-default: #f37737;
+  --secondary-border-dark: #86411e;
+  --secondary-border-light: #f9c0a3;
+  --secondary-text-icon: #f37737;
+
+  --accent-primary-surface-light: #e6f8fc;
+  --accent-primary-surface-subtle: #b0eaf7;
+  --accent-primary-surface-default: #00bbe4;
+  --accent-primary-surface-dark: #0085a2;
+  --accent-primary-border-subtle: #b0eaf7;
+  --accent-primary-border-default: #00bbe4;
+  --accent-primary-border-dark: #00677d;
+  --accent-primary-border-light: #8ae0f3;
+  --accent-primary-text-icon: #00bbe4;
+
+  --accent-secondary-surface-subtle: #f4f9ec;
+  --accent-secondary-surface-light: #dcedc3;
+  --accent-secondary-surface-default: #8ec63f;
+  --accent-secondary-surface-dark: #658d2d;
+  --accent-secondary-border-subtle: #dcedc3;
+  --accent-secondary-border-default: #8ec63f;
+  --accent-secondary-border-dark: #4e6d23;
+  --accent-secondary-border-light: #cbe5a7;
+  --accent-secondary-text-icon: #8ec63f;
+
+  --accent-tertiary-surface-subtle: #feecf4;
+  --accent-tertiary-surface-light: #fac4dd;
+  --accent-tertiary-surface-default: #f04292;
+  --accent-tertiary-surface-dark: #aa2f68;
+  --accent-tertiary-border-subtle: #fac4dd;
+  --accent-tertiary-border-default: #f04292;
+  --accent-tertiary-border-dark: #842450;
+  --accent-tertiary-border-light: #f8a8cd;
+  --accent-tertiary-text-icon: #f04292;
+
+  --error-surface-subtle: #fceaed;
+  --error-surface-light: #f5bdc6;
+  --error-surface-default: #e02947;
+  --error-surface-dark: #9f1d32;
+  --error-border-subtle: #f5bdc6;
+  --error-border-default: #e02947;
+  --error-border-dark: #7b1727;
+  --error-border-light: #f19daa;
+  --error-text-icon: #e02947;
+
+  --warning-orange-surface-subtle: #fef5e6;
+  --warning-orange-surface-light: #fce0b0;
+  --warning-orange-surface-default: #f59b00;
+  --warning-orange-surface-dark: #ae6e00;
+  --warning-orange-border-subtle: #fce0b0;
+  --warning-orange-border-default: #f59b00;
+  --warning-orange-border-dark: #875500;
+  --warning-orange-border-light: #fad18a;
+  --warning-orange-text-icon: #f59b00;
+
+  --warning-yellow-surface-subtle: #fffbe6;
+  --warning-yellow-surface-light: #fff4b0;
+  --warning-yellow-surface-default: #ffda00;
+  --warning-yellow-surface-dark: #b59b00;
+  --warning-yellow-border-subtle: #fff4b0;
+  --warning-yellow-border-default: #ffda00;
+  --warning-yellow-border-dark: #8c7800;
+  --warning-yellow-border-light: #ffee8a;
+  --warning-yellow-text-icon: #ffda00;
+
+  --success-surface-subtle: #e6f8f7;
+  --success-surface-light: #b2eae5;
+  --success-surface-default: #07bbac;
+  --success-surface-dark: #05857a;
+  --success-border-subtle: #b2eae5;
+  --success-border-default: #07bbac;
+  --success-border-dark: #04675f;
+  --success-border-light: #8de0d9;
+  --success-text-icon: #07bbac;
+}

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

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --font-size: 16px;
   --line-height: calc((var(--font-size) * 2) - 10px);
 

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

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

package/assets/styles/main.css

@@ -1,2 +1,4 @@
 @import './variables';
 @import './forms';
+@import './brand';
+@import './scaffolding';

package/assets/styles/scaffolding/_margin-helpers.css

@@ -0,0 +1,308 @@
+/* Margin */
+.m-0 {
+  margin: 0;
+}
+.mbs-0 {
+  margin-block-start: 0;
+}
+.mbe-0 {
+  margin-block-end: 0;
+}
+.mis-0 {
+  margin-inline-start: 0;
+}
+.mie-0 {
+  margin-inline-end: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+.mb-0 {
+  margin-block: 0;
+}
+
+.m-1 {
+  margin: 1px;
+}
+.mbs-1 {
+  margin-block-start: 1px;
+}
+.mbe-1 {
+  margin-block-end: 1px;
+}
+.mis-1 {
+  margin-inline-start: 1px;
+}
+.mie-1 {
+  margin-inline-end: 1px;
+}
+.mi-1 {
+  margin-inline: 1px;
+}
+.mb-1 {
+  margin-block: 1px;
+}
+
+.m-2 {
+  margin: 2px;
+}
+.mbs-2 {
+  margin-block-start: 2px;
+}
+.mbe-2 {
+  margin-block-end: 2px;
+}
+.mis-2 {
+  margin-inline-start: 2px;
+}
+.mie-2 {
+  margin-inline-end: 2px;
+}
+.mi-2 {
+  margin-inline: 2px;
+}
+.mb-2 {
+  margin-block: 2px;
+}
+
+.m-4 {
+  margin: 4px;
+}
+.mbs-4 {
+  margin-block-start: 4px;
+}
+.mbe-4 {
+  margin-block-end: 4px;
+}
+.mis-4 {
+  margin-inline-start: 4px;
+}
+.mie-4 {
+  margin-inline-end: 4px;
+}
+.mi-4 {
+  margin-inline: 4px;
+}
+.mb-4 {
+  margin-block: 4px;
+}
+
+.m-6 {
+  margin: 6px;
+}
+.mbs-6 {
+  margin-block-start: 6px;
+}
+.mbe-6 {
+  margin-block-end: 6px;
+}
+.mis-6 {
+  margin-inline-start: 6px;
+}
+.mie-6 {
+  margin-inline-end: 6px;
+}
+.mi-6 {
+  margin-inline: 6px;
+}
+.mb-6 {
+  margin-block: 6px;
+}
+
+.m-8 {
+  margin: 8px;
+}
+.mbs-8 {
+  margin-block-start: 8px;
+}
+.mbe-8 {
+  margin-block-end: 8px;
+}
+.mis-8 {
+  margin-inline-start: 8px;
+}
+.mie-8 {
+  margin-inline-end: 8px;
+}
+.mi-8 {
+  margin-inline: 8px;
+}
+.mb-8 {
+  margin-block: 8px;
+}
+
+.m-10 {
+  margin: 10px;
+}
+.mbs-10 {
+  margin-block-start: 10px;
+}
+.mbe-10 {
+  margin-block-end: 10px;
+}
+.mis-10 {
+  margin-inline-start: 10px;
+}
+.mie-10 {
+  margin-inline-end: 10px;
+}
+.mi-10 {
+  margin-inline: 10px;
+}
+.mb-10 {
+  margin-block: 10px;
+}
+
+.m-12 {
+  margin: 12px;
+}
+.mbs-12 {
+  margin-block-start: 12px;
+}
+.mbe-12 {
+  margin-block-end: 12px;
+}
+.mis-12 {
+  margin-inline-start: 12px;
+}
+.mie-12 {
+  margin-inline-end: 12px;
+}
+.mi-12 {
+  margin-inline: 12px;
+}
+.mb-12 {
+  margin-block: 12px;
+}
+
+.m-18 {
+  margin: 18px;
+}
+.mbs-18 {
+  margin-block-start: 18px;
+}
+.mbe-18 {
+  margin-block-end: 18px;
+}
+.mis-18 {
+  margin-inline-start: 18px;
+}
+.mie-18 {
+  margin-inline-end: 18px;
+}
+.mi-18 {
+  margin-inline: 18px;
+}
+.mb-18 {
+  margin-block: 18px;
+}
+
+.m-20 {
+  margin: 20px;
+}
+.mbs-20 {
+  margin-block-start: 20px;
+}
+.mbe-20 {
+  margin-block-end: 20px;
+}
+.mis-20 {
+  margin-inline-start: 20px;
+}
+.mie-20 {
+  margin-inline-end: 20px;
+}
+.mi-20 {
+  margin-inline: 20px;
+}
+.mb-20 {
+  margin-block: 20px;
+}
+
+.m-24 {
+  margin: 24px;
+}
+.mbs-24 {
+  margin-block-start: 24px;
+}
+.mbe-24 {
+  margin-block-end: 24px;
+}
+.mis-24 {
+  margin-inline-start: 24px;
+}
+.mie-24 {
+  margin-inline-end: 24px;
+}
+.mi-24 {
+  margin-inline: 24px;
+}
+.mb-24 {
+  margin-block: 24px;
+}
+
+.m-32 {
+  margin: 32px;
+}
+.mbs-32 {
+  margin-block-start: 32px;
+}
+.mbe-32 {
+  margin-block-end: 32px;
+}
+.mis-32 {
+  margin-inline-start: 32px;
+}
+.mie-32 {
+  margin-inline-end: 32px;
+}
+.mi-32 {
+  margin-inline: 32px;
+}
+.mb-32 {
+  margin-block: 32px;
+}
+
+.m-40 {
+  margin: 40px;
+}
+.mbs-40 {
+  margin-block-start: 40px;
+}
+.mbe-40 {
+  margin-block-end: 40px;
+}
+.mis-40 {
+  margin-inline-start: 40px;
+}
+.mie-40 {
+  margin-inline-end: 40px;
+}
+.mi-40 {
+  margin-inline: 40px;
+}
+.mb-40 {
+  margin-block: 40px;
+}
+
+.m-60 {
+  margin: 60px;
+}
+.mbs-60 {
+  margin-block-start: 60px;
+}
+.mbe-60 {
+  margin-block-end: 60px;
+}
+.mis-60 {
+  margin-inline-start: 60px;
+}
+.mie-60 {
+  margin-inline-end: 60px;
+}
+.mi-60 {
+  margin-inline: 60px;
+}
+.mb-60 {
+  margin-block: 60px;
+}

package/assets/styles/scaffolding/_padding-helpers.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 1px;
+}
+.pbs-1 {
+  padding-block-start: 1px;
+}
+.pbe-1 {
+  padding-block-end: 1px;
+}
+.pis-1 {
+  padding-inline-start: 1px;
+}
+.pie-1 {
+  padding-inline-end: 1px;
+}
+.pi-1 {
+  padding-inline: 1px;
+}
+.pb-1 {
+  padding-block: 1px;
+}
+
+.p-2 {
+  padding: 2px;
+}
+.pbs-2 {
+  padding-block-start: 2px;
+}
+.pbe-2 {
+  padding-block-end: 2px;
+}
+.pis-2 {
+  padding-inline-start: 2px;
+}
+.pie-2 {
+  padding-inline-end: 2px;
+}
+.pi-2 {
+  padding-inline: 2px;
+}
+.pb-2 {
+  padding-block: 2px;
+}
+
+.p-4 {
+  padding: 4px;
+}
+.pbs-4 {
+  padding-block-start: 4px;
+}
+.pbe-4 {
+  padding-block-end: 4px;
+}
+.pis-4 {
+  padding-inline-start: 4px;
+}
+.pie-4 {
+  padding-inline-end: 4px;
+}
+.pi-4 {
+  padding-inline: 4px;
+}
+.pb-4 {
+  padding-block: 4px;
+}
+
+.p-6 {
+  padding: 6px;
+}
+.pbs-6 {
+  padding-block-start: 6px;
+}
+.pbe-6 {
+  padding-block-end: 6px;
+}
+.pis-6 {
+  padding-inline-start: 6px;
+}
+.pie-6 {
+  padding-inline-end: 6px;
+}
+.pi-6 {
+  padding-inline: 6px;
+}
+.pb-6 {
+  padding-block: 6px;
+}
+
+.p-8 {
+  padding: 8px;
+}
+.pbs-8 {
+  padding-block-start: 8px;
+}
+.pbe-8 {
+  padding-block-end: 8px;
+}
+.pis-8 {
+  padding-inline-start: 8px;
+}
+.pie-8 {
+  padding-inline-end: 8px;
+}
+.pi-8 {
+  padding-inline: 8px;
+}
+.pb-8 {
+  padding-block: 8px;
+}
+
+.p-10 {
+  padding: 10px;
+}
+.pbs-10 {
+  padding-block-start: 10px;
+}
+.pbe-10 {
+  padding-block-end: 10px;
+}
+.pis-10 {
+  padding-inline-start: 10px;
+}
+.pie-10 {
+  padding-inline-end: 10px;
+}
+.pi-10 {
+  padding-inline: 10px;
+}
+.pb-10 {
+  padding-block: 10px;
+}
+
+.p-12 {
+  padding: 12px;
+}
+.pbs-12 {
+  padding-block-start: 12px;
+}
+.pbe-12 {
+  padding-block-end: 12px;
+}
+.pis-12 {
+  padding-inline-start: 12px;
+}
+.pie-12 {
+  padding-inline-end: 12px;
+}
+.pi-12 {
+  padding-inline: 12px;
+}
+.pb-12 {
+  padding-block: 12px;
+}
+
+.p-18 {
+  padding: 18px;
+}
+.pbs-18 {
+  padding-block-start: 18px;
+}
+.pbe-18 {
+  padding-block-end: 18px;
+}
+.pis-18 {
+  padding-inline-start: 18px;
+}
+.pie-18 {
+  padding-inline-end: 18px;
+}
+.pi-18 {
+  padding-inline: 18px;
+}
+.pb-18 {
+  padding-block: 18px;
+}
+
+.p-20 {
+  padding: 20px;
+}
+.pbs-20 {
+  padding-block-start: 20px;
+}
+.pbe-20 {
+  padding-block-end: 20px;
+}
+.pis-20 {
+  padding-inline-start: 20px;
+}
+.pie-20 {
+  padding-inline-end: 20px;
+}
+.pi-20 {
+  padding-inline: 20px;
+}
+.pb-20 {
+  padding-block: 20px;
+}
+
+.p-24 {
+  padding: 24px;
+}
+.pbs-24 {
+  padding-block-start: 24px;
+}
+.pbe-24 {
+  padding-block-end: 24px;
+}
+.pis-24 {
+  padding-inline-start: 24px;
+}
+.pie-24 {
+  padding-inline-end: 24px;
+}
+.pi-24 {
+  padding-inline: 24px;
+}
+.pb-24 {
+  padding-block: 24px;
+}
+
+.p-32 {
+  padding: 32px;
+}
+.pbs-32 {
+  padding-block-start: 32px;
+}
+.pbe-32 {
+  padding-block-end: 32px;
+}
+.pis-32 {
+  padding-inline-start: 32px;
+}
+.pie-32 {
+  padding-inline-end: 32px;
+}
+.pi-32 {
+  padding-inline: 32px;
+}
+.pb-32 {
+  padding-block: 32px;
+}
+
+.p-40 {
+  padding: 40px;
+}
+.pbs-40 {
+  padding-block-start: 40px;
+}
+.pbe-40 {
+  padding-block-end: 40px;
+}
+.pis-40 {
+  padding-inline-start: 40px;
+}
+.pie-40 {
+  padding-inline-end: 40px;
+}
+.pi-40 {
+  padding-inline: 40px;
+}
+.pb-40 {
+  padding-block: 40px;
+}
+
+.p-60 {
+  padding: 60px;
+}
+.pbs-60 {
+  padding-block-start: 60px;
+}
+.pbe-60 {
+  padding-block-end: 60px;
+}
+.pis-60 {
+  padding-inline-start: 60px;
+}
+.pie-60 {
+  padding-inline-end: 60px;
+}
+.pi-60 {
+  padding-inline: 60px;
+}
+.pb-60 {
+  padding-block: 60px;
+}