elements-kit 0.5.1 → 0.6.0

package/dist/ui/marketing/marketing.css

@@ -0,0 +1,392 @@
+.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]) {
+  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-bounds {
+  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;
+}

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

@@ -0,0 +1,30 @@
+[data-gray-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);
+}

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

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

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

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

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

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

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

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

package/dist/ui/styles/colors/amber.css

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --amber-1: #fefdfb;
-  --amber-2: #fefbe9;
-  --amber-3: #fff7c2;
-  --amber-4: #ffee9c;
-  --amber-5: #fbe577;
-  --amber-6: #f3d673;
-  --amber-7: #e9c162;
-  --amber-8: #e2a336;
-  --amber-9: #ffc53d;
-  --amber-10: #ffba18;
-  --amber-11: #ab6400;
-  --amber-12: #4f3422;
-  --amber-a1: #c0800004;
-  --amber-a2: #f4d10016;
-  --amber-a3: #ffde003d;
-  --amber-a4: #ffd40063;
-  --amber-a5: #f8cf0088;
-  --amber-a6: #eab5008c;
-  --amber-a7: #dc9b009d;
-  --amber-a8: #da8a00c9;
-  --amber-a9: #ffb300c2;
-  --amber-a10: #ffb300e7;
-  --amber-a11: #ab6400;
-  --amber-a12: #341500dd;
-  --amber-surface: #fefae4cc;
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --amber-1: color(display-p3 .995 .992 .985);
-      --amber-2: color(display-p3 .994 .986 .921);
-      --amber-3: color(display-p3 .994 .969 .782);
-      --amber-4: color(display-p3 .989 .937 .65);
-      --amber-5: color(display-p3 .97 .902 .527);
-      --amber-6: color(display-p3 .936 .844 .506);
-      --amber-7: color(display-p3 .89 .762 .443);
-      --amber-8: color(display-p3 .85 .65 .3);
-      --amber-9: color(display-p3 1 .77 .26);
-      --amber-10: color(display-p3 .959 .741 .274);
-      --amber-11: color(display-p3 .64 .4 0);
-      --amber-12: color(display-p3 .294 .208 .145);
-      --amber-a1: color(display-p3 .757 .514 .024 / .016);
-      --amber-a2: color(display-p3 .902 .804 .008 / .079);
-      --amber-a3: color(display-p3 .965 .859 .004 / .22);
-      --amber-a4: color(display-p3 .969 .82 .004 / .35);
-      --amber-a5: color(display-p3 .933 .796 .004 / .475);
-      --amber-a6: color(display-p3 .875 .682 .004 / .495);
-      --amber-a7: color(display-p3 .804 .573 0 / .557);
-      --amber-a8: color(display-p3 .788 .502 0 / .699);
-      --amber-a9: color(display-p3 1 .686 0 / .742);
-      --amber-a10: color(display-p3 .945 .643 0 / .726);
-      --amber-a11: color(display-p3 .64 .4 0);
-      --amber-a12: color(display-p3 .294 .208 .145);
-      --amber-surface: color(display-p3 .9922 .9843 .902 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --amber-1: #16120c;
-  --amber-2: #1d180f;
-  --amber-3: #302008;
-  --amber-4: #3f2700;
-  --amber-5: #4d3000;
-  --amber-6: #5c3d05;
-  --amber-7: #714f19;
-  --amber-8: #8f6424;
-  --amber-9: #ffc53d;
-  --amber-10: #ffd60a;
-  --amber-11: #ffca16;
-  --amber-12: #ffe7b3;
-  --amber-a1: #e63c0006;
-  --amber-a2: #fd9b000d;
-  --amber-a3: #fa820022;
-  --amber-a4: #fc820032;
-  --amber-a5: #fd8b0041;
-  --amber-a6: #fd9b0051;
-  --amber-a7: #ffab2567;
-  --amber-a8: #ffae3587;
-  --amber-a9: #ffc53d;
-  --amber-a10: #ffd60a;
-  --amber-a11: #ffca16;
-  --amber-a12: #ffe7b3;
-  --amber-surface: #271f1380;
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --amber-1: color(display-p3 .082 .07 .05);
-      --amber-2: color(display-p3 .111 .094 .064);
-      --amber-3: color(display-p3 .178 .128 .049);
-      --amber-4: color(display-p3 .239 .156 0);
-      --amber-5: color(display-p3 .29 .193 0);
-      --amber-6: color(display-p3 .344 .245 .076);
-      --amber-7: color(display-p3 .422 .314 .141);
-      --amber-8: color(display-p3 .535 .399 .189);
-      --amber-9: color(display-p3 1 .77 .26);
-      --amber-10: color(display-p3 1 .87 .15);
-      --amber-11: color(display-p3 1 .8 .29);
-      --amber-12: color(display-p3 .984 .909 .726);
-      --amber-a1: color(display-p3 .992 .298 0 / .017);
-      --amber-a2: color(display-p3 .988 .651 0 / .047);
-      --amber-a3: color(display-p3 1 .6 0 / .118);
-      --amber-a4: color(display-p3 1 .557 0 / .185);
-      --amber-a5: color(display-p3 1 .592 0 / .24);
-      --amber-a6: color(display-p3 1 .659 .094 / .299);
-      --amber-a7: color(display-p3 1 .714 .263 / .383);
-      --amber-a8: color(display-p3 .996 .729 .306 / .5);
-      --amber-a9: color(display-p3 1 .769 .259);
-      --amber-a10: color(display-p3 1 .871 .149);
-      --amber-a11: color(display-p3 1 .8 .29);
-      --amber-a12: color(display-p3 .984 .909 .726);
-      --amber-surface: color(display-p3 .1412 .1176 .0784 / .5);
-    }
-  }
-}
-
-:root {
-  --amber-contrast: #21201c;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
-  }
+[data-color="amber"] {
+  --color-1: var(--amber-1);
+  --color-2: var(--amber-2);
+  --color-3: var(--amber-3);
+  --color-4: var(--amber-4);
+  --color-5: var(--amber-5);
+  --color-6: var(--amber-6);
+  --color-7: var(--amber-7);
+  --color-8: var(--amber-8);
+  --color-9: var(--amber-9);
+  --color-10: var(--amber-10);
+  --color-11: var(--amber-11);
+  --color-12: var(--amber-12);
+  --color-a1: var(--amber-a1);
+  --color-a2: var(--amber-a2);
+  --color-a3: var(--amber-a3);
+  --color-a4: var(--amber-a4);
+  --color-a5: var(--amber-a5);
+  --color-a6: var(--amber-a6);
+  --color-a7: var(--amber-a7);
+  --color-a8: var(--amber-a8);
+  --color-a9: var(--amber-a9);
+  --color-a10: var(--amber-a10);
+  --color-a11: var(--amber-a11);
+  --color-a12: var(--amber-a12);
+  --accent-contrast: var(--amber-contrast);
+  --accent-surface: var(--amber-surface);
+  --accent-indicator: var(--amber-indicator);
+  --accent-track: var(--amber-track);
 }