@primer/brand-css 0.0.0-20250212132611

package/components/Prose/Prose.css

@@ -0,0 +1,332 @@
+/* ---------------------------------------------------------- */
+/* Prose component                                            */
+/* ---------------------------------------------------------- */
+/* Table of contents:                                         */
+/* 1. Container                                               */
+/* 2. Element spacing                                         */
+/* 3. Line-length control                                     */
+/* 4. Headings                                                */
+/* 5. Paragraphs                                              */
+/* 6. Lists                                                   */
+/* 7. Inline elements                                         */
+/* 8. Images                                                  */
+/* 9. Block elements                                          */
+/* ---------------------------------------------------------- */
+
+/* ---------------------------------------------------------- */
+/* 1. Container                                               */
+/* ---------------------------------------------------------- */
+
+.Prose {
+  font-family: var(--brand-body-fontFamily);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  color: var(--brand-color-text-default);
+}
+
+.Prose--editorial {
+  font-size: var(--brand-text-size-300);
+  line-height: 1.7;
+}
+
+/* ---------------------------------------------------------- */
+/* 2. Element spacing                                         */
+/* ---------------------------------------------------------- */
+
+.Prose * + * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+  margin-block-start: var(--spacing, 1em);
+}
+
+.Prose--editorial * + * {
+  --spacing: var(--base-size-40);
+}
+
+/* ---------------------------------------------------------- */
+/* 3. Line-length control                                     */
+/* ---------------------------------------------------------- */
+
+.Prose--lineLength {
+  max-width: var(--brand-Prose-lineLength);
+}
+
+/* ---------------------------------------------------------- */
+/* 4. Headings                                                */
+/* ---------------------------------------------------------- */
+
+.Prose h1 {
+  font-weight: var(--brand-heading-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-text-lineHeight-700);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-text-letterSpacing-700);
+}
+
+.Prose--lineLength h1 {
+  max-width: 22ch;
+}
+
+.Prose h2 {
+  font-weight: var(--brand-heading-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-text-letterSpacing-600);
+}
+
+.Prose--lineLength h2 {
+  max-width: 26ch;
+}
+
+.Prose h3 {
+  font-weight: var(--brand-heading-weight-500);
+  font-size: var(--brand-text-size-500);
+  line-height: var(--brand-heading-lineHeight-500);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-500);
+}
+
+.Prose--lineLength h1 {
+  max-width: 32ch;
+}
+
+.Prose h4 {
+  --spacing: var(--base-size-48);
+  font-weight: var(--brand-heading-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+}
+
+.Prose h5 {
+  --spacing: var(--base-size-48);
+  font-weight: var(--brand-text-subhead-weight-large);
+  font-size: var(--brand-text-subhead-size-large);
+  line-height: var(--brand-text-subhead-lineHeight-large);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-300);
+}
+
+.Prose h6 {
+  --spacing: var(--base-size-48);
+  font-weight: var(--brand-text-subhead-weight-medium);
+  font-size: var(--brand-text-subhead-size-medium);
+  line-height: var(--brand-text-subhead-lineHeight-medium);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-200);
+}
+
+.Prose :is(h1, h2, h3) {
+  --spacing: var(--base-size-64);
+}
+
+.Prose :is(h1, h2, h3) + * {
+  --spacing: var(--base-size-24);
+}
+
+/* ---------------------------------------------------------- */
+/* 5. Paragraphs                                              */
+/* ---------------------------------------------------------- */
+
+.Prose p {
+  --spacing: var(--base-size-24);
+}
+
+.Prose--editorial p {
+  --spacing: var(--base-size-40);
+}
+
+/* ---------------------------------------------------------- */
+/* 6. Lists                                                   */
+/* ---------------------------------------------------------- */
+
+.Prose ul,
+.Prose ol {
+  --spacing: var(--base-size-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-8);
+  padding: 0;
+  margin-inline-start: var(--base-size-24);
+  line-height: var(--brand-text-lineHeight-300);
+}
+
+.Prose--editorial ul,
+.Prose--editorial ol {
+  --spacing: var(--base-size-48);
+  gap: var(--base-size-16);
+  line-height: 1.7;
+}
+
+.Prose ul {
+  list-style-type: image;
+  list-style-image: var(--brand-Prose-unorderedList-imageUrl);
+}
+
+.Prose li {
+  --spacing: 0;
+}
+
+/* ---------------------------------------------------------- */
+/* 7. Inline elements                                         */
+/* ---------------------------------------------------------- */
+
+.Prose strong {
+  font-weight: var(--brand-text-weight-800);
+}
+
+.Prose em {
+  font-variation-settings: 'ital' 10;
+  font-synthesis: none;
+}
+
+.Prose a {
+  color: var(--brand-InlineLink-color-rest);
+  text-decoration: none;
+  position: relative;
+}
+
+.Prose a:hover {
+  text-decoration: none;
+}
+
+.Prose a::after {
+  content: '';
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-InlineLink-color-rest);
+  height: 0;
+  transition: var(--brand-InlineLink-transition-timing) transform;
+  transform: scaleY(var(--brand-InlineLink-transition-scale-start));
+  transform-origin: 50% 100%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.Prose a:hover::after {
+  transform: scaleY(var(--brand-InlineLink-transition-scale-end));
+}
+
+.Prose a:active::after {
+  border-color: var(--brand-InlineLink-color-pressed);
+}
+
+.Prose code {
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  white-space: break-spaces;
+  padding: var(--base-size-4) var(--base-size-8);
+  border-radius: var(--brand-borderRadius-small);
+  background-color: var(--brand-Prose-code-bgColor);
+}
+
+.Prose pre {
+  padding: var(--base-size-16);
+  border-radius: var(--brand-borderRadius-medium);
+  background-color: var(--brand-Prose-code-bgColor);
+}
+
+.Prose pre code {
+  padding: 0;
+}
+
+/* ---------------------------------------------------------- */
+/* 8. Images                                                  */
+/* ---------------------------------------------------------- */
+
+.Prose img {
+  --spacing: var(--brand-Prose-img-spacing);
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-block-end: var(--spacing);
+}
+
+.Prose--editorial figure img {
+  margin-block-end: 0;
+  border-radius: var(--brand-borderRadius-medium);
+  display: block;
+}
+
+/* ---------------------------------------------------------- */
+/* 9. Block elements                                          */
+/* ---------------------------------------------------------- */
+
+.Prose blockquote {
+  --spacing: var(--brand-Prose-blockquote-spacing);
+  position: relative;
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  padding-top: var(--base-size-48);
+  padding-bottom: var(--base-size-8);
+  margin-bottom: var(--spacing);
+}
+
+.Prose--default blockquote {
+  padding-left: var(--base-size-40);
+}
+
+.Prose--editorial blockquote {
+  font-size: var(--brand-text-size-500);
+  line-height: var(--brand-text-lineHeight-500);
+  font-weight: var(--brand-text-weight-500);
+  padding-top: var(--base-size-64);
+}
+
+@media screen and (min-width: 87.5rem) {
+  .Prose--editorial blockquote {
+    margin-block: var(--base-size-40);
+  }
+}
+
+.Prose blockquote::before {
+  content: '“';
+  font-size: var(--base-size-48);
+  line-height: var(--base-size-64);
+  font-weight: var(--base-text-weight-extrabold);
+  position: absolute;
+  top: 0;
+}
+
+.Prose--editorial blockquote::before {
+  color: var(--brand-color-accent-primary);
+  font-size: var(--base-size-64);
+  line-height: var(--base-size-64);
+}
+
+.Prose--default blockquote::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: var(--brand-borderWidth-thick);
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--base-color-scale-indigo-5);
+  background-image: linear-gradient(180deg, var(--base-color-scale-blue-5), var(--base-color-scale-purple-5));
+}
+
+.Prose figure figcaption {
+  --spacing: var(--base-size-24);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+  color: var(--brand-color-text-muted);
+}
+
+.Prose--editorial figcaption {
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+  font-weight: var(--brand-text-weight-100);
+}
+
+.Prose--editorial hr {
+  --spacing: var(--base-size-64);
+  margin-block-start: var(--spacing);
+  margin-block-end: var(--spacing);
+  border: 1px solid var(--brand-color-border-muted);
+}

package/components/Section/Section.css

@@ -0,0 +1,156 @@
+.Section {
+  --rounded-padding-overlap-adjustment: 0px;
+  --rounded-radius: var(--brand-borderRadius-xlarge);
+  --padding-block-end: var(--brand-Section-padding-normal);
+  --adjusted-padding-block-end: calc(var(--padding-block-end) + var(--rounded-padding-overlap-adjustment));
+
+  background-repeat: no-repeat;
+  background-color: var(--brand-Section-narrow-background-color, var(--brand-Section-background-color));
+  background-image: var(--brand-Section-narrow-background-image-src, var(--brand-Section-background-image-src));
+  background-size: var(--brand-Section-narrow-background-image-size, var(--brand-Section-background-image-size));
+
+  background-position: var(
+    --brand-Section-narrow-background-image-position,
+    var(--brand-Section-background-image-position, center)
+  );
+
+  padding-block-start: var(--padding-block-start);
+  padding-block-end: var(--adjusted-padding-block-end);
+}
+
+.Section__container {
+  width: 100%;
+  max-width: var(--brand-Section-container-maxWidth);
+  margin-inline: auto;
+}
+
+.Section__container--fullWidth {
+  max-width: none;
+}
+
+.Section--rounded {
+  border-radius: var(--rounded-radius) var(--rounded-radius) 0 0;
+  margin-top: calc(-1 * var(--rounded-radius));
+}
+
+/* A progressive enhancment to adjust block-end padding to account for adjacent section rounded corners overlap. */
+.Section:has(+ .Section--rounded) {
+  --rounded-padding-overlap-adjustment: var(--rounded-radius);
+}
+
+.Section--paddingBlockStart-none,
+.Section-narrow--paddingBlockStart-none {
+  padding-block-start: 0;
+}
+
+.Section--paddingBlockStart-condensed,
+.Section-narrow--paddingBlockStart-condensed {
+  padding-block-start: var(--brand-Section-padding-condensed);
+}
+.Section--paddingBlockStart-normal,
+.Section-narrow--paddingBlockStart-normal {
+  padding-block-start: var(--brand-Section-padding-normal);
+}
+.Section--paddingBlockStart-spacious,
+.Section-narrow--paddingBlockStart-spacious {
+  padding-block-start: var(--brand-Section-padding-spacious);
+}
+
+.Section--paddingBlockEnd-none,
+.Section-narrow--paddingBlockEnd-none {
+  --padding-block-end: 0px;
+}
+
+.Section--paddingBlockEnd-condensed,
+.Section-narrow--paddingBlockEnd-condensed {
+  --padding-block-end: var(--brand-Section-padding-condensed);
+}
+.Section--paddingBlockEnd-normal,
+.Section-narrow--paddingBlockEnd-normal {
+  --padding-block-end: var(--brand-Section-padding-normal);
+}
+.Section--paddingBlockEnd-spacious,
+.Section-narrow--paddingBlockEnd-spacious {
+  --padding-block-end: var(--brand-Section-padding-spacious);
+}
+
+@media screen and (min-width: 48rem) {
+  .Section {
+    background-color: var(--brand-Section-regular-background-color, var(--brand-Section-background-color));
+    background-image: var(--brand-Section-regular-background-image-src, var(--brand-Section-background-image-src));
+    background-size: var(--brand-Section-regular-background-image-size, var(--brand-Section-background-image-size));
+    background-position: var(
+      --brand-Section-regular-background-image-position,
+      var(--brand-Section-background-image-position)
+    );
+  }
+
+  .Section-regular--paddingBlockStart-none {
+    padding-block-start: 0;
+  }
+
+  .Section-regular--paddingBlockStart-condensed {
+    padding-block-start: var(--brand-Section-padding-condensed);
+  }
+  .Section-regular--paddingBlockStart-normal {
+    padding-block-start: var(--brand-Section-padding-normal);
+  }
+  .Section-regular--paddingBlockStart-spacious {
+    padding-block-start: var(--brand-Section-padding-spacious);
+  }
+
+  .Section-regular--paddingBlockEnd-none {
+    --padding-block-end: 0px;
+  }
+
+  .Section-regular--paddingBlockEnd-condensed {
+    --padding-block-end: var(--brand-Section-padding-condensed);
+  }
+  .Section-regular--paddingBlockEnd-normal {
+    --padding-block-end: var(--brand-Section-padding-normal);
+  }
+  .Section-regular--paddingBlockEnd-spacious {
+    --padding-block-end: var(--brand-Section-padding-spacious);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Section {
+    background-color: var(--brand-Section-wide-background-color, var(--brand-Section-background-color));
+    background-image: var(--brand-Section-wide-background-image-src, var(--brand-Section-background-image-src));
+    background-size: var(--brand-Section-wide-background-image-size, var(--brand-Section-background-image-size));
+
+    background-position: var(
+      --brand-Section-wide-background-image-position,
+      var(--brand-Section-background-image-position)
+    );
+  }
+
+  .Section-wide--paddingBlockStart-none {
+    padding-block-start: 0;
+  }
+
+  .Section-wide--paddingBlockStart-condensed {
+    padding-block-start: var(--brand-Section-padding-condensed);
+  }
+  .Section-wide--paddingBlockStart-normal {
+    padding-block-start: var(--brand-Section-padding-normal);
+  }
+  .Section-wide--paddingBlockStart-spacious {
+    padding-block-start: var(--brand-Section-padding-spacious);
+  }
+
+  .Section-wide--paddingBlockEnd-none {
+    --padding-block-end: 0px;
+  }
+
+  .Section-wide--paddingBlockEnd-condensed {
+    --padding-block-end: var(--brand-Section-padding-condensed);
+  }
+  .Section-wide--paddingBlockEnd-normal {
+    --padding-block-end: var(--brand-Section-padding-normal);
+  }
+  .Section-wide--paddingBlockEnd-spacious {
+    --padding-block-end: var(--brand-Section-padding-spacious);
+  }
+}

package/components/Section/Section.features.css

@@ -0,0 +1,33 @@
+.paddingItem {
+  border: 1px solid var(--base-color-scale-red-2);
+  background-image: linear-gradient(
+    45deg,
+    var(--base-color-scale-red-0) 12.5%,
+    #ffb5b380 12.5%,
+    #ffb5b380 50%,
+    var(--base-color-scale-red-0) 50%,
+    var(--base-color-scale-red-0) 62.5%,
+    #ffb5b380 62.5%,
+    #ffb5b380 100%
+  ) !important;
+  background-size: 5.66px 5.66px !important;
+  background-repeat: repeat !important;
+  overflow: hidden;
+}
+
+.paddingInnerItem {
+  position: relative;
+  z-index: 1;
+  background-color: var(--base-color-scale-white-0);
+}
+
+.paddingInnerItem::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100vw;
+  height: 100%;
+  width: 200vw;
+  background: #fff;
+  z-index: -1;
+}

package/components/SectionIntro/SectionIntro.css

@@ -0,0 +1,48 @@
+.SectionIntro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-16);
+  align-items: flex-start;
+  padding-block: var(--base-size-24);
+}
+
+.SectionIntro-heading--muted {
+  color: var(--brand-color-text-muted);
+}
+
+.SectionIntro-heading--muted em,
+.SectionIntro-heading--muted b {
+  color: var(--brand-color-text-default);
+  font-style: normal;
+  font-weight: inherit;
+}
+
+.SectionIntro--align-start {
+  text-align: start;
+}
+
+.SectionIntro--align-center {
+  align-items: center;
+  text-align: center;
+  padding-inline: var(--base-size-24);
+}
+
+.SectionIntro-heading {
+  max-width: 18ch;
+}
+
+.SectionIntro--full-width .SectionIntro-heading {
+  max-width: none;
+}
+
+.SectionIntro-label {
+  margin-block-end: var(--base-size-8);
+}
+
+.SectionIntro-description {
+  max-width: 50ch;
+}
+
+.SectionIntro-link {
+  margin-top: var(--base-size-16);
+}