@primer/brand-css 0.0.0-20250212132611

package/components/Heading/Heading.css

@@ -0,0 +1,284 @@
+.Heading {
+  --condensed-stretch: 75%;
+  color: var(--brand-color-text-default);
+}
+
+.Heading-font--hubot-sans {
+  --condensed-stretch: 90%;
+}
+
+[data-color-mode='dark'] .Heading {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.Heading-font--mona-sans {
+  font-family: var(--brand-heading-fontFamily);
+}
+
+.Heading-font--hubot-sans {
+  font-family: var(--brand-heading-fontFamilyAlt);
+}
+
+.Heading-font--monospace {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Heading--display {
+  font-weight: var(--brand-heading-weight-1000);
+  font-size: var(--brand-text-size-1000);
+  line-height: var(--brand-text-lineHeight-1000);
+  letter-spacing: var(--brand-text-letterSpacing-1000);
+}
+
+.Heading--subhead-large {
+  font-weight: var(--brand-text-subhead-weight-large);
+  font-size: var(--brand-text-subhead-size-large);
+  line-height: var(--brand-text-subhead-lineHeight-large);
+}
+
+.Heading--subhead-medium {
+  font-weight: var(--brand-text-subhead-weight-medium);
+  font-size: var(--brand-text-subhead-size-medium);
+  line-height: var(--brand-text-subhead-lineHeight-medium);
+}
+
+.Heading--1 {
+  font-weight: var(--brand-heading-weight-900);
+  font-size: var(--brand-text-size-900);
+  line-height: var(--brand-text-lineHeight-900);
+  letter-spacing: var(--brand-text-letterSpacing-900);
+}
+
+.Heading--2 {
+  font-weight: var(--brand-heading-weight-800);
+  font-size: var(--brand-text-size-800);
+  line-height: var(--brand-text-lineHeight-800);
+  letter-spacing: var(--brand-text-letterSpacing-800);
+}
+
+.Heading--3 {
+  font-weight: var(--brand-heading-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-heading-lineHeight-700);
+  letter-spacing: var(--brand-heading-letterSpacing-700);
+}
+
+.Heading--4 {
+  font-weight: var(--brand-heading-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+  letter-spacing: var(--brand-heading-letterSpacing-600);
+}
+
+.Heading--5 {
+  font-weight: var(--brand-heading-weight-500);
+  font-size: var(--brand-text-size-500);
+  line-height: var(--brand-text-lineHeight-500);
+  letter-spacing: var(--brand-heading-letterSpacing-500);
+}
+
+.Heading--6 {
+  font-weight: var(--brand-heading-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+}
+
+.Heading--weight-heavy,
+.Heading-narrow--weight-heavy {
+  font-weight: var(--base-text-weight-heavy);
+}
+
+.Heading--weight-extrabold,
+.Heading-narrow--weight-extrabold {
+  font-weight: var(--base-text-weight-extrabold);
+}
+
+.Heading--weight-bold,
+.Heading-narrow--weight-bold {
+  font-weight: var(--base-text-weight-bold);
+}
+
+.Heading--weight-semibold,
+.Heading-narrow--weight-semibold {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.Heading--weight-medium,
+.Heading-narrow--weight-medium {
+  font-weight: var(--base-text-weight-medium);
+}
+
+.Heading--weight-normal,
+.Heading-narrow--weight-normal {
+  font-weight: var(--base-text-weight-normal);
+}
+
+.Heading--weight-light,
+.Heading-narrow--weight-light {
+  font-weight: var(--base-text-weight-light);
+}
+
+.Heading--weight-extralight,
+.Heading-narrow--weight-extralight {
+  font-weight: var(--base-text-weight-extralight);
+}
+
+@media screen and (min-width: 48rem) {
+  .Heading-regular--weight-heavy {
+    font-weight: var(--base-text-weight-heavy);
+  }
+
+  .Heading-regular--weight-extrabold {
+    font-weight: var(--base-text-weight-extrabold);
+  }
+
+  .Heading-regular--weight-bold {
+    font-weight: var(--base-text-weight-bold);
+  }
+
+  .Heading-regular--weight-semibold {
+    font-weight: var(--base-text-weight-semibold);
+  }
+
+  .Heading-regular--weight-medium {
+    font-weight: var(--base-text-weight-medium);
+  }
+
+  .Heading-regular--weight-normal {
+    font-weight: var(--base-text-weight-normal);
+  }
+
+  .Heading-regular--weight-light {
+    font-weight: var(--base-text-weight-light);
+  }
+
+  .Heading-regular--weight-extralight {
+    font-weight: var(--base-text-weight-extralight);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Heading-wide--weight-heavy {
+    font-weight: var(--base-text-weight-heavy);
+  }
+
+  .Heading-wide--weight-extrabold {
+    font-weight: var(--base-text-weight-extrabold);
+  }
+
+  .Heading-wide--weight-bold {
+    font-weight: var(--base-text-weight-bold);
+  }
+
+  .Heading-wide--weight-semibold {
+    font-weight: var(--base-text-weight-semibold);
+  }
+
+  .Heading-wide--weight-medium {
+    font-weight: var(--base-text-weight-medium);
+  }
+
+  .Heading-wide--weight-normal {
+    font-weight: var(--base-text-weight-normal);
+  }
+
+  .Heading-wide--weight-light {
+    font-weight: var(--base-text-weight-light);
+  }
+}
+
+/**
+ * Heading widths
+ */
+
+.Heading--stretch-condensed,
+.Heading-narrow--stretch-condensed {
+  font-stretch: var(--condensed-stretch);
+}
+
+.Heading--stretch-normal,
+.Heading-narrow--stretch-normal {
+  font-stretch: 100%;
+}
+
+.Heading--stretch-expanded,
+.Heading-narrow--stretch-expanded {
+  font-stretch: 125%;
+}
+
+@media screen and (min-width: 48rem) {
+  .Heading-regular--stretch-condensed {
+    font-stretch: var(--condensed-stretch);
+  }
+
+  .Heading-regular--stretch-normal {
+    font-stretch: 100%;
+  }
+
+  .Heading-regular--stretch-expanded {
+    font-stretch: 125%;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Heading-narrow--weight-expanded .Heading-wide--stretch-condensed {
+    font-stretch: var(--condensed-stretch);
+  }
+
+  .Heading-wide--stretch-normal {
+    font-stretch: 100%;
+  }
+
+  .Heading-wide--stretch-expanded {
+    font-stretch: 125%;
+  }
+}
+
+/**
+ * Heading letter spacing
+ */
+
+.Heading--letter-spacing-condensed,
+.Heading-narrow--letter-spacing-condensed {
+  letter-spacing: var(--brand-text-letterSpacing-900);
+}
+
+.Heading--letter-spacing-normal,
+.Heading-narrow--letter-spacing-normal {
+  letter-spacing: var(--brand-heading-letterSpacing-700);
+}
+
+.Heading--letter-spacing-none,
+.Heading-narrow--letter-spacing-none {
+  letter-spacing: 0;
+}
+
+@media screen and (min-width: 48rem) {
+  .Heading-regular--letter-spacing-condensed {
+    letter-spacing: var(--brand-text-letterSpacing-900);
+  }
+
+  .Heading-regular--letter-spacing-normal {
+    letter-spacing: var(--brand-heading-letterSpacing-700);
+  }
+
+  .Heading-regular--letter-spacing-none {
+    letter-spacing: 0;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Heading-narrow--weight-wide .Heading-wide--letter-spacing-condensed {
+    letter-spacing: var(--brand-text-letterSpacing-900);
+  }
+
+  .Heading-wide--letter-spacing-normal {
+    letter-spacing: var(--brand-heading-letterSpacing-700);
+  }
+
+  .Heading-wide--letter-spacing-none {
+    letter-spacing: 0;
+  }
+}

package/components/Hero/Hero.css

@@ -0,0 +1,87 @@
+.Hero {
+  padding: var(--brand-Hero-narrow-padding);
+  display: flex;
+  flex-direction: column;
+}
+
+.Hero--align-start {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.Hero--align-center {
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+}
+
+.Hero-grid {
+  --brand-Grid-spacing-margin: 0;
+}
+
+.Hero-grid--block-end,
+.Hero-grid--inline-end {
+  --brand-Grid-spacing-row: var(--base-size-40);
+}
+
+@media screen and (min-width: 48rem) {
+  .Hero-grid--block-end {
+    --brand-Grid-spacing-row: var(--base-size-80);
+  }
+}
+
+.Hero--align-center .Hero-actions {
+  justify-content: center;
+}
+
+.Hero--align-center .Hero-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.Hero-image {
+  border-radius: var(--brand-borderRadius-large);
+  width: 100%;
+}
+
+.Hero-label {
+  margin-block-end: var(--base-size-24);
+}
+
+.Hero-heading {
+  margin: 0;
+  max-width: 924px;
+}
+
+.Hero-heading--fullWidth {
+  max-width: unset;
+}
+
+.Hero-description {
+  margin: var(--base-size-24) 0 0;
+  max-width: 600px;
+}
+
+.Hero-actions {
+  margin-block-start: var(--base-size-32);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--base-size-8) var(--base-size-16);
+}
+
+.Hero-trailing {
+  margin-block-start: var(--base-size-32);
+}
+
+.Hero-eyebrow {
+  margin-block-end: var(--base-size-32);
+}
+
+/* Small breakpoint and up */
+@media screen and (min-width: 34rem) {
+  .Hero {
+    padding: var(--brand-Hero-regular-padding);
+  }
+}