srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/assets/styles/setup/04.elements/forms/05.checkbox-radio-geometry.css

@@ -0,0 +1,17 @@
+:where(html) {
+  /* Control size */
+  --control-size: 1.8rem; /* 18px */
+  --control-border-radius: 0.4rem; /* checkbox only */
+
+  /* Radio */
+  --radio-border-radius: 100vw;
+
+  /* Border */
+  --control-border-width: 0.1rem;
+
+  /* Checkmark / dot scale */
+  --control-indicator-scale: 0.6;
+
+  /* Label spacing */
+  --control-label-gap: 0.8rem;
+}

package/app/assets/styles/setup/04.elements/forms/06.button-geometry.css

@@ -0,0 +1,17 @@
+:where(html) {
+  --button-padding-block: 1rem;
+  --button-padding-inline: 1.8rem;
+
+  --button-border-radius: 0.8rem;
+  --button-border-radius-icon-only: 100vw;
+
+  --button-border-width: 0.1rem;
+  --button-outline-width: 0.1rem;
+
+  --button-focus-ring-width: 0.2rem;
+  --button-focus-ring-offset: 0.2rem;
+
+  --button-icon-gap: 1.8rem;
+
+  /* --button-min-height: 4rem; */
+}

package/app/assets/styles/setup/04.elements/forms/07.validation-error-block-layout.css

@@ -0,0 +1,9 @@
+:where(html) {
+  --error-icon-size: 1.4rem;
+  --error-icon-gap: 0.6rem;
+
+  --error-border-radius: 0.6rem;
+
+  --error-padding-block: 0.8rem;
+  --error-padding-inline: 1rem;
+}

package/app/assets/styles/setup/04.elements/forms/09.animation-motion.css

@@ -0,0 +1,6 @@
+:where(html) {
+  --control-transition-duration: 240ms;
+  --control-transition-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  /* Transition duration */
+  --theme-form-transition-duration: 0.2s;
+}

package/app/assets/styles/setup/04.elements/forms/index.css

@@ -0,0 +1,9 @@
+@import "./00.element-defaults";
+@import "./01.field-layout-container-level.css";
+@import "./02.typography.css";
+@import "./03.generic-input-geometry";
+@import "./04.slot-icon-system.css";
+@import "./05.checkbox-radio-geometry.css";
+@import "./06.button-geometry.css";
+@import "./07.validation-error-block-layout.css";
+@import "./09.animation-motion.css";

package/app/assets/styles/setup/04.elements/index.css

@@ -0,0 +1 @@
+@import "./forms/";

package/app/assets/styles/setup/05.typography/01.tokens/_font-family.css

@@ -0,0 +1,8 @@
+:where(html) {
+  /* --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
+  --font-family:
+    Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+    "Helvetica Neue", sans-serif;
+
+  /* --font-family: 'Quicksand', futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
+}

package/app/assets/styles/setup/05.typography/01.tokens/_reponsive-font-sizes.css

@@ -0,0 +1,22 @@
+:where(html) {
+  --step-10: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem); /* 10 */
+  --step-9: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem); /* 9 */
+  --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 8 */
+  --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* 7 */
+  --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* 6 */
+  --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); /* 5 */
+  --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); /* 4 */
+  --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* 3 */
+  --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); /* 2 */
+  --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); /* 1 */
+
+  --hero-text-display: clamp(4.8rem, 4vw + 2rem, 9.6rem);
+  --hero-text-title: clamp(3.6rem, 4vw + 2rem, 4.8rem);
+  --hero-text-heading: clamp(2.8rem, 4vw + 2rem, 3rem);
+  --hero-text-subheading: 2.4rem;
+  --hero-text-label: 1.75rem;
+
+  --eyebrow-text-large: 1.4rem;
+  --eyebrow-text-medium: 1.2rem;
+  --eyebrow-text-small: 1rem;
+}

package/app/assets/styles/setup/05.typography/01.tokens/_timing-functions.css

@@ -0,0 +1,119 @@
+:where(html) {
+  --spring-easing: linear(
+    0,
+    0.009,
+    0.035 2.1%,
+    0.141,
+    0.281 6.7%,
+    0.723 12.9%,
+    0.938 16.7%,
+    1.017,
+    1.077,
+    1.121,
+    1.149 24.3%,
+    1.159,
+    1.163,
+    1.161,
+    1.154 29.9%,
+    1.129 32.8%,
+    1.051 39.6%,
+    1.017 43.1%,
+    0.991,
+    0.977 51%,
+    0.974 53.8%,
+    0.975 57.1%,
+    0.997 69.8%,
+    1.003 76.9%,
+    1.004 83.8%,
+    1
+  );
+
+  --spring-in-easing: linear(
+    0,
+    0.035 2.1%,
+    0.281 6.7%,
+    0.938 16.7%,
+    1.121,
+    1.159,
+    1.154 29.9%,
+    1.051 39.6%,
+    0.991,
+    0.974 53.8%,
+    0.997 69.8%,
+    1.004 83.8%,
+    1
+  );
+
+  --spring-out-easing: linear(
+    1,
+    1.004 16.2%,
+    0.997 30.2%,
+    0.974 46.2%,
+    0.991,
+    1.051 60.4%,
+    1.154 70.1%,
+    1.159,
+    1.121 75.7%,
+    0.938 83.3%,
+    0.281 93.3%,
+    0.035 97.9%,
+    0
+  );
+
+  --bounce-easing: linear(
+    0,
+    0.004,
+    0.016,
+    0.035,
+    0.063,
+    0.098,
+    0.141 13.6%,
+    0.25,
+    0.391,
+    0.563,
+    0.765,
+    1,
+    0.891 40.9%,
+    0.848,
+    0.813,
+    0.785,
+    0.766,
+    0.754,
+    0.75,
+    0.754,
+    0.766,
+    0.785,
+    0.813,
+    0.848,
+    0.891 68.2%,
+    1 72.7%,
+    0.973,
+    0.953,
+    0.941,
+    0.938,
+    0.941,
+    0.953,
+    0.973,
+    1,
+    0.988,
+    0.984,
+    0.988,
+    1
+  );
+
+  --elastic-easing: linear(
+    0,
+    0.029 1.6%,
+    0.123 3.5%,
+    0.651 10.6%,
+    0.862 14.1%,
+    1.002 17.7%,
+    1.046 19.6%,
+    1.074 21.6%,
+    1.087 23.9%,
+    1.086 26.6%,
+    1.014 38.5%,
+    0.994 46.3%,
+    1
+  );
+}

package/app/assets/styles/setup/05.typography/01.tokens/index.css

@@ -0,0 +1,3 @@
+@import "./_font-family";
+@import "./_reponsive-font-sizes";
+@import "./_timing-functions";

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-article.css

@@ -0,0 +1,30 @@
+.article-heading {
+  font-size: var(--step-5);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1;
+}
+
+.article-body-normal {
+  font-size: var(--step-4);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+}
+
+.article-list-normal {
+  display: block;
+  font-size: var(--step-4);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+}
+
+/*
+* Shared styles
+*/
+.article-heading,
+.article-body-normal,
+.article-list-normal {
+  margin: 0;
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-card.css

@@ -0,0 +1,45 @@
+.card-heading {
+  font-size: var(--step-5);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1;
+}
+
+.card-subheading {
+  font-size: var(--step-4);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1;
+}
+
+.card-body-normal {
+  font-size: var(--step-4);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+}
+
+.card-body-semibold {
+  font-size: var(--step-4);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1.5;
+}
+
+.card-list-normal {
+  font-size: var(--step-4);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+}
+
+/*
+* Shared styles
+*/
+.card-heading,
+.card-subheading,
+.card-body-normal,
+.card-body-semibold,
+.card-list-normal {
+  margin: 0;
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-body.css

@@ -0,0 +1,146 @@
+.page-body-large {
+  font-size: var(--step-6);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+}
+
+.page-body-medium {
+  font-size: var(--step-5);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+}
+
+.page-body-normal {
+  font-size: var(--step-4);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+}
+
+.page-body-small {
+  font-size: var(--step-3);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+}
+
+.page-body-xsmall {
+  font-size: var(--step-2);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+}
+
+.page-body-large-light {
+  font-size: var(--step-6);
+  font-weight: 200;
+  font-variation-settings: "wght" 200;
+}
+
+.page-body-medium-light {
+  font-size: var(--step-5);
+  font-weight: 200;
+  font-variation-settings: "wght" 200;
+}
+
+.page-body-normal-light {
+  font-size: var(--step-4);
+  font-weight: 200;
+  font-variation-settings: "wght" 200;
+}
+
+.page-body-small-light {
+  font-size: var(--step-3);
+  font-weight: 200;
+  font-variation-settings: "wght" 200;
+}
+
+.page-body-xsmall-light {
+  font-size: var(--step-2);
+  font-weight: 200;
+  font-variation-settings: "wght" 200;
+}
+
+.page-body-large-semibold {
+  font-size: var(--step-6);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+}
+
+.page-body-medium-semibold {
+  font-size: var(--step-5);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+}
+
+.page-body-normal-semibold {
+  font-size: var(--step-4);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+}
+
+.page-body-small-semibold {
+  font-size: var(--step-3);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+}
+
+.page-body-xsmall-semibold {
+  font-size: var(--step-2);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+}
+
+.page-body-large-bold {
+  font-size: var(--step-6);
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+
+.page-body-medium-bold {
+  font-size: var(--step-5);
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+
+.page-body-normal-bold {
+  font-size: var(--step-4);
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+
+.page-body-small-bold {
+  font-size: var(--step-3);
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+
+.page-body-xsmall-bold {
+  font-size: var(--step-2);
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+
+/*
+* Shared styles
+*/
+.page-body-large,
+.page-body-medium,
+.page-body-normal,
+.page-body-small,
+.page-body-xsmall,
+.page-body-large-light,
+.page-body-medium-light,
+.page-body-normal-light,
+.page-body-small-light,
+.page-body-xsmall-light,
+.page-body-large-semibold,
+.page-body-medium-semibold,
+.page-body-normal-semibold,
+.page-body-small-semibold,
+.page-body-xsmall-semibold,
+.page-body-large-bold,
+.page-body-medium-bold,
+.page-body-normal-bold,
+.page-body-small-bold,
+.page-body-xsmall-bold {
+  line-height: 1.5;
+  margin: 0;
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css

@@ -0,0 +1,35 @@
+.page-heading-1 {
+  font-size: var(--step-8);
+}
+
+.page-heading-2 {
+  font-size: var(--step-7);
+}
+
+.page-heading-3 {
+  font-size: var(--step-6);
+}
+
+.page-heading-4 {
+  font-size: var(--step-5);
+}
+
+.page-heading-5 {
+  font-size: var(--step-4);
+}
+
+.page-heading-6 {
+  font-size: var(--step-3);
+}
+
+.page-heading-1,
+.page-heading-2,
+.page-heading-3,
+.page-heading-4,
+.page-heading-5,
+.page-heading-6 {
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1;
+  margin: 0;
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-link.css

@@ -0,0 +1,116 @@
+.page-link-large {
+  color: var(--theme-link-default);
+  font-size: var(--step-6);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-large-semibold {
+  color: var(--theme-link-default);
+  font-size: var(--step-6);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-medium {
+  color: var(--theme-link-default);
+  font-size: var(--step-5);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-medium-semibold {
+  color: var(--theme-link-default);
+  font-size: var(--step-5);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-normal {
+  color: var(--theme-link-default);
+  font-size: var(--step-4);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-normal-semibold {
+  color: var(--theme-link-default);
+  font-size: var(--step-4);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-small {
+  color: var(--theme-link-default);
+  font-size: var(--step-3);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-small-semibold {
+  color: var(--theme-link-default);
+  font-size: var(--step-3);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-xsmall {
+  color: var(--theme-link-default);
+  font-size: var(--step-2);
+  font-weight: 400;
+  font-variation-settings: "wght" 400;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-xsmall-semibold {
+  color: var(--theme-link-default);
+  font-size: var(--step-2);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.page-link-large,
+.page-link-large-semibold,
+.page-link-medium,
+.page-link-medium-semibold,
+.page-link-normal,
+.page-link-normal-semibold,
+.page-link-small,
+.page-link-small-semibold,
+.page-link-xsmall,
+.page-link-xsmall-semibold {
+  margin: 0;
+  &:visited {
+    color: var(--theme-link-default);
+  }
+
+  &:hover {
+    color: var(--theme-link-hover);
+  }
+
+  &:focus-visible {
+    color: var(--theme-link-hover);
+    outline: 2px solid var(--theme-link-default);
+    outline-offset: 3px;
+    border-radius: 4px;
+  }
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-section.css

@@ -0,0 +1,7 @@
+.section-heading {
+  font-size: var(--step-6);
+  font-weight: 600;
+  font-variation-settings: "wght" 600;
+  line-height: 1;
+  margin: 0;
+}

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

@@ -0,0 +1,3 @@
+.italic {
+  font-style: italic;
+}

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

@@ -0,0 +1,29 @@
+/* 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/05.typography/02.utility-classes/_generic-font-weights.css

@@ -0,0 +1,39 @@
+/* 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/05.typography/02.utility-classes/index.css

@@ -0,0 +1,9 @@
+@import "./_font-classes-page-heading";
+@import "./_font-classes-page-body";
+@import "./_font-classes-page-link";
+@import "./_font-classes-section";
+@import "./_font-classes-article";
+@import "./_font-classes-card";
+@import "./_generic-font-classes.css";
+@import "./_generic-font-variation-settings.css";
+@import "./_generic-font-weights.css";

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

@@ -0,0 +1,2 @@
+@import "./01.tokens";
+@import "./02.utility-classes";