elements-kit 0.5.2 → 0.6.1

package/dist/ui/marketing/marketing.css

@@ -0,0 +1,624 @@
+.hero :is(h1, h2, h3, h4, h5, h6, p), .section-header :is(h1, h2, h3, h4, h5, h6, p), .section-heading, .section-paragraph, .river-content :is(h1, h2, h3, h4, h5, h6, p), .pillar :is(h1, h2, h3, h4, h5, h6, p, [data-heading], [data-paragraph]), .cta-banner :is(h1, h2, h3, h4, h5, h6, p), .testimonial :is(blockquote, figcaption, cite, p), .statistic :is(p, [data-leading], [data-heading], [data-description]) {
+  margin: 0;
+}
+
+.hero {
+  flex-direction: column;
+  padding-top: 3rem;
+  display: flex;
+}
+
+.hero .section-paragraph {
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-9);
+  text-wrap: pretty;
+  margin-top: 1.5rem;
+}
+
+.hero .river-content {
+  row-gap: 0;
+}
+
+@media (min-width: 40rem) {
+  .hero {
+    padding-top: 7rem;
+  }
+
+  .hero .section-paragraph {
+    max-width: min(42rem, 70%);
+  }
+}
+
+@media (min-width: 64rem) {
+  .hero .section-paragraph {
+    font-size: var(--font-size-5);
+    line-height: var(--line-height-5);
+  }
+}
+
+.hero[data-align="center"] :is(.section-heading, .section-paragraph) {
+  text-align: center;
+  text-wrap: balance;
+}
+
+.hero:has(.river[data-align="start"]) {
+  padding-block: 6rem;
+}
+
+.hero:has(.river[data-align="start"]) .section-paragraph {
+  text-wrap: pretty;
+  font-size: var(--font-size-3) !important;
+  line-height: var(--line-height-3) !important;
+}
+
+@media (min-width: 48rem) {
+  .hero:has(.river[data-align="start"]) {
+    padding-block: 8rem;
+  }
+}
+
+.page-section {
+  background-color: var(--color-background);
+  padding-block: 3rem;
+  position: relative;
+}
+
+@media (min-width: 48rem) {
+  .page-section {
+    padding-top: 7rem;
+  }
+}
+
+.page-container {
+  box-sizing: border-box;
+  padding-left: var(--page-padding-left, 1rem);
+  padding-right: var(--page-padding-right, 1rem);
+  max-width: var(--page-max-width, 72rem);
+  width: 100%;
+  margin-inline: auto;
+}
+
+.section-header {
+  text-wrap: balance;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-block: 1.5rem;
+  display: flex;
+}
+
+.section-header .section-heading {
+  max-width: 20ch;
+}
+
+.section-header .section-paragraph {
+  text-wrap: balance;
+  max-width: 82ch;
+}
+
+.section-header[data-align="center"] {
+  align-items: safe center;
+}
+
+.section-header[data-align="center"] .section-heading, .section-header[data-align="center"] .section-paragraph {
+  text-align: center;
+}
+
+.section-header[data-align="center"] > a {
+  margin-top: 1rem;
+}
+
+.section-heading {
+  font-family: var(--font-heading);
+  letter-spacing: var(--letter-spacing-9);
+  overflow-wrap: break-word;
+  font-weight: 600;
+}
+
+[dir="rtl"] .section-heading {
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.section-heading-1 {
+  font-size: calc(48px * var(--scaling, 1));
+  letter-spacing: -.04em;
+  font-weight: 550;
+  line-height: 1;
+}
+
+.section-heading-2 {
+  font-size: var(--font-size-8);
+  line-height: var(--line-height-8);
+}
+
+.section-heading-3 {
+  font-size: calc(30px * var(--scaling, 1));
+  line-height: calc(36px * var(--scaling, 1));
+}
+
+.section-heading-4 {
+  font-size: var(--font-size-5);
+  line-height: var(--line-height-5);
+}
+
+@media (min-width: 64rem) {
+  .section-heading-1 {
+    font-size: var(--font-size-9);
+    line-height: 1;
+  }
+
+  .section-heading-2 {
+    font-size: calc(48px * var(--scaling, 1));
+    line-height: 1;
+  }
+
+  .section-heading-3 {
+    font-size: var(--font-size-8);
+    line-height: var(--line-height-8);
+  }
+}
+
+.section-paragraph {
+  line-height: var(--default-line-height, 1.5);
+  text-wrap: pretty;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  color: var(--base-color-11);
+}
+
+.section-paragraph em {
+  color: var(--base-color-12);
+  font-style: normal;
+}
+
+.river {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-auto-rows: min-content;
+  row-gap: 2rem;
+  display: grid;
+}
+
+.river > * {
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+
+@media (min-width: 48rem) {
+  .river {
+    grid-auto-rows: auto;
+    gap: 0 3rem;
+  }
+
+  .river > * {
+    grid-column: span 6 / span 6;
+  }
+
+  .river[data-align="start"][data-large-visual] > .river-content, .river[data-align="end"][data-large-visual] > .river-content {
+    grid-column: span 5 / span 5;
+  }
+
+  .river[data-align="start"][data-large-visual] > .river-visual, .river[data-align="end"][data-large-visual] > .river-visual {
+    grid-column: span 7 / span 7;
+  }
+}
+
+.river[data-align="center"] {
+  grid-auto-rows: min-content;
+  align-items: safe center;
+  gap: 3rem 0;
+}
+
+.river[data-align="center"] > * {
+  grid-column: 1 / -1;
+  justify-self: center;
+  padding-inline: 0;
+}
+
+.river[data-align="center"] > .river-content {
+  align-items: safe center;
+}
+
+.river[data-align="center"] > .river-content > .section-heading {
+  text-align: center;
+  text-wrap: balance;
+  max-width: 24ch;
+}
+
+.river[data-align="center"] > .river-content > .section-paragraph {
+  text-align: center;
+  text-wrap: balance;
+  max-width: 72ch;
+}
+
+@media (min-width: 48rem) {
+  .river[data-align="end"] > .river-content {
+    order: 1;
+  }
+
+  .river[data-align="end"] > .river-visual {
+    order: 0;
+  }
+}
+
+@media (min-width: 64rem) {
+  .river[data-align="end"] > .river-content {
+    padding-inline: 4rem;
+  }
+}
+
+.river[data-align="breakout"] {
+  flex-direction: column;
+  gap: 2.5rem;
+  padding-block: 2.5rem;
+  display: flex;
+}
+
+.river[data-align="breakout"] > .section-heading:first-child {
+  clip: rect(0, 0, 0, 0);
+  word-wrap: normal;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  position: absolute;
+}
+
+.river[data-align="breakout"] > .river-content {
+  order: 1;
+}
+
+.river[data-align="breakout"] > .river-content .section-paragraph {
+  font-family: var(--font-heading);
+  font-size: var(--font-size-6);
+  letter-spacing: var(--letter-spacing-9);
+  text-wrap: pretty;
+  color: var(--base-color-11);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.river[data-align="breakout"] > .river-content > [data-trailing] {
+  margin-top: 1.5rem;
+}
+
+.river[data-align="breakout"] > .river-visual {
+  border-radius: var(--radius-4);
+  order: 0;
+}
+
+@media (min-width: 48rem) {
+  .river[data-align="breakout"] {
+    row-gap: 4rem;
+    padding-block: 3rem;
+  }
+
+  .river[data-align="breakout"] > .river-content .section-paragraph {
+    font-size: var(--font-size-8);
+  }
+
+  .river[data-align="breakout"] .river-content {
+    grid-template-columns: 5fr 3fr;
+    grid-template-areas: "text trailing"
+                         "cta trailing";
+    grid-auto-rows: auto 1fr;
+    gap: 2rem 3rem;
+    display: grid;
+  }
+
+  .river[data-align="breakout"] .river-content .section-paragraph {
+    grid-area: text;
+  }
+
+  .river[data-align="breakout"] .river-content [data-cta] {
+    grid-area: cta;
+    justify-self: start;
+  }
+
+  .river[data-align="breakout"] .river-content > [data-trailing] {
+    grid-area: trailing;
+    justify-self: end;
+    margin-block-start: 0;
+  }
+}
+
+.river-content {
+  flex-direction: column;
+  order: 0;
+  align-items: flex-start;
+  row-gap: 1rem;
+  min-width: 0;
+  display: flex;
+}
+
+.river-content > .section-heading {
+  text-wrap: balance;
+}
+
+.river-content > a {
+  margin-top: 1rem;
+}
+
+.river-visual {
+  order: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.river-visual[data-border] {
+  border-radius: var(--radius-4);
+  border: 1px solid var(--base-color-a6);
+}
+
+.pillar {
+  text-align: start;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 50ch;
+  display: flex;
+}
+
+.pillar > [data-heading] {
+  font-size: var(--font-size-5);
+  letter-spacing: var(--letter-spacing-8);
+  margin-bottom: .5rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.pillar > svg:first-child {
+  color: var(--color-9);
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+}
+
+.pillar > [data-paragraph] {
+  font-size: var(--font-size-2);
+  line-height: var(--default-line-height, 1.5);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0;
+  color: var(--base-color-11);
+  margin-bottom: 1.5rem;
+}
+
+.pillar > a {
+  margin-top: 1rem;
+}
+
+.pillar[data-border] {
+  border-radius: var(--radius-5);
+  border: 1px solid var(--base-color-a6);
+  padding: 2rem;
+}
+
+.testimonial {
+  border-radius: var(--radius-5);
+  border: 1px solid var(--base-color-a6);
+  background-color: var(--color-surface);
+  flex-direction: column;
+  min-width: 0;
+  padding: 2rem;
+  display: flex;
+}
+
+@media (min-width: 64rem) {
+  .testimonial {
+    padding: 6rem 8rem;
+  }
+}
+
+.testimonial > blockquote {
+  font-family: var(--font-heading);
+  font-size: var(--font-size-6);
+  letter-spacing: var(--letter-spacing-9);
+  text-wrap: pretty;
+  color: var(--base-color-11);
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+@media (min-width: 48rem) {
+  .testimonial > blockquote {
+    font-size: var(--font-size-7);
+  }
+}
+
+.testimonial > blockquote em {
+  color: var(--base-color-12);
+  font-style: normal;
+}
+
+.testimonial > blockquote:before {
+  content: "“";
+  font-size: calc(96px * var(--scaling, 1));
+  color: var(--color-9);
+  font-weight: 700;
+  line-height: 1;
+  display: block;
+}
+
+.testimonial > blockquote:after {
+  content: "”";
+}
+
+.testimonial > figcaption {
+  flex-direction: column;
+  margin-top: 4rem;
+  display: flex;
+}
+
+.testimonial > figcaption > cite {
+  font-family: var(--font-heading);
+  font-size: var(--font-size-5);
+  line-height: var(--line-height-5);
+  letter-spacing: var(--letter-spacing-9);
+  color: var(--base-color-12);
+  font-style: normal;
+  font-weight: 600;
+}
+
+.testimonial > figcaption > [data-title] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  color: var(--base-color-11);
+}
+
+.cta-banner {
+  isolation: isolate;
+  border-radius: var(--radius-5);
+  border: 1px solid var(--base-color-a6);
+  text-align: center;
+  flex-direction: column;
+  align-items: center;
+  padding: 3rem 1.5rem;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+@media (min-width: 48rem) {
+  .cta-banner {
+    padding: 5rem 2.5rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cta-banner {
+    padding: 8rem 4.5rem;
+  }
+}
+
+.cta-banner :is(.section-heading, .section-paragraph) {
+  text-align: center;
+  text-wrap: balance;
+  max-width: 42ch;
+}
+
+.cta-banner .section-paragraph {
+  margin-top: 1.5rem;
+}
+
+.cta-banner > [data-cta] {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1rem;
+  width: 100%;
+  margin-top: 2.5rem;
+  display: flex;
+}
+
+@media (min-width: 40rem) {
+  .cta-banner > [data-cta] {
+    flex-flow: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem 1.5rem;
+    width: auto;
+  }
+}
+
+.cta-banner[data-align="start"] {
+  text-align: start;
+  align-items: flex-start;
+}
+
+.cta-banner[data-align="start"] :is(.section-heading, .section-paragraph) {
+  text-align: start;
+}
+
+.cta-banner[data-align="start"] > [data-cta] {
+  width: 100%;
+}
+
+@media (min-width: 40rem) {
+  .cta-banner[data-align="start"] > [data-cta] {
+    justify-content: flex-start;
+    width: auto;
+  }
+}
+
+.statistic {
+  text-align: start;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  max-width: 50ch;
+  display: flex;
+}
+
+.statistic > [data-leading] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-9);
+  color: var(--base-color-11);
+  margin: 0 0 .25rem;
+}
+
+.statistic > [data-heading] {
+  font-family: var(--font-heading);
+  font-size: calc(48px * var(--scaling, 1));
+  letter-spacing: -.04em;
+  color: var(--base-color-12);
+  margin: 0;
+  font-weight: 550;
+  line-height: 1;
+}
+
+@media (min-width: 64rem) {
+  .statistic > [data-heading] {
+    font-size: var(--font-size-9);
+  }
+}
+
+.statistic > [data-description] {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  color: var(--base-color-11);
+  margin-top: .5rem;
+}
+
+.statistic[data-size="1"] > [data-leading] {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+}
+
+.statistic[data-size="1"] > [data-heading] {
+  font-size: calc(28px * var(--scaling, 1));
+  letter-spacing: var(--letter-spacing-9);
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+@media (min-width: 64rem) {
+  .statistic[data-size="1"] > [data-heading] {
+    font-size: var(--font-size-7);
+  }
+}
+
+.statistic[data-size="1"] > [data-description] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+}
+
+.statistic[data-size="3"] > [data-heading] {
+  font-size: var(--font-size-9);
+}
+
+@media (min-width: 64rem) {
+  .statistic[data-size="3"] > [data-heading] {
+    font-size: calc(72px * var(--scaling, 1));
+  }
+}
+
+.statistic[data-size="3"] > [data-description] {
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  margin-top: .75rem;
+}
+
+.statistic[data-align="center"] {
+  text-align: center;
+  align-items: safe center;
+}

package/dist/ui/styles/base/gray.css

@@ -0,0 +1,30 @@
+[data-base-color="gray"] {
+  --base-color-1: var(--gray-1);
+  --base-color-2: var(--gray-2);
+  --base-color-3: var(--gray-3);
+  --base-color-4: var(--gray-4);
+  --base-color-5: var(--gray-5);
+  --base-color-6: var(--gray-6);
+  --base-color-7: var(--gray-7);
+  --base-color-8: var(--gray-8);
+  --base-color-9: var(--gray-9);
+  --base-color-10: var(--gray-10);
+  --base-color-11: var(--gray-11);
+  --base-color-12: var(--gray-12);
+  --base-color-a1: var(--gray-a1);
+  --base-color-a2: var(--gray-a2);
+  --base-color-a3: var(--gray-a3);
+  --base-color-a4: var(--gray-a4);
+  --base-color-a5: var(--gray-a5);
+  --base-color-a6: var(--gray-a6);
+  --base-color-a7: var(--gray-a7);
+  --base-color-a8: var(--gray-a8);
+  --base-color-a9: var(--gray-a9);
+  --base-color-a10: var(--gray-a10);
+  --base-color-a11: var(--gray-a11);
+  --base-color-a12: var(--gray-a12);
+  --base-color-surface: var(--gray-surface);
+  --base-color-indicator: var(--gray-indicator);
+  --base-color-track: var(--gray-track);
+  --base-color-contrast: var(--gray-contrast);
+}

package/dist/ui/styles/base/mauve.css

@@ -1,30 +1,30 @@
-[data-gray-color="mauve"] {
-  --gray-1: var(--mauve-1);
-  --gray-2: var(--mauve-2);
-  --gray-3: var(--mauve-3);
-  --gray-4: var(--mauve-4);
-  --gray-5: var(--mauve-5);
-  --gray-6: var(--mauve-6);
-  --gray-7: var(--mauve-7);
-  --gray-8: var(--mauve-8);
-  --gray-9: var(--mauve-9);
-  --gray-10: var(--mauve-10);
-  --gray-11: var(--mauve-11);
-  --gray-12: var(--mauve-12);
-  --gray-a1: var(--mauve-a1);
-  --gray-a2: var(--mauve-a2);
-  --gray-a3: var(--mauve-a3);
-  --gray-a4: var(--mauve-a4);
-  --gray-a5: var(--mauve-a5);
-  --gray-a6: var(--mauve-a6);
-  --gray-a7: var(--mauve-a7);
-  --gray-a8: var(--mauve-a8);
-  --gray-a9: var(--mauve-a9);
-  --gray-a10: var(--mauve-a10);
-  --gray-a11: var(--mauve-a11);
-  --gray-a12: var(--mauve-a12);
-  --gray-contrast: var(--mauve-contrast);
-  --gray-surface: var(--mauve-surface);
-  --gray-indicator: var(--mauve-indicator);
-  --gray-track: var(--mauve-track);
+[data-base-color="mauve"] {
+  --base-color-1: var(--mauve-1);
+  --base-color-2: var(--mauve-2);
+  --base-color-3: var(--mauve-3);
+  --base-color-4: var(--mauve-4);
+  --base-color-5: var(--mauve-5);
+  --base-color-6: var(--mauve-6);
+  --base-color-7: var(--mauve-7);
+  --base-color-8: var(--mauve-8);
+  --base-color-9: var(--mauve-9);
+  --base-color-10: var(--mauve-10);
+  --base-color-11: var(--mauve-11);
+  --base-color-12: var(--mauve-12);
+  --base-color-a1: var(--mauve-a1);
+  --base-color-a2: var(--mauve-a2);
+  --base-color-a3: var(--mauve-a3);
+  --base-color-a4: var(--mauve-a4);
+  --base-color-a5: var(--mauve-a5);
+  --base-color-a6: var(--mauve-a6);
+  --base-color-a7: var(--mauve-a7);
+  --base-color-a8: var(--mauve-a8);
+  --base-color-a9: var(--mauve-a9);
+  --base-color-a10: var(--mauve-a10);
+  --base-color-a11: var(--mauve-a11);
+  --base-color-a12: var(--mauve-a12);
+  --base-color-contrast: var(--mauve-contrast);
+  --base-color-surface: var(--mauve-surface);
+  --base-color-indicator: var(--mauve-indicator);
+  --base-color-track: var(--mauve-track);
 }