@primer/brand-css 0.0.0-20250212132611

package/components/forms/Textarea/Textarea.css

@@ -0,0 +1,129 @@
+/*
+ * Default Textarea styles
+ */
+.Textarea {
+  display: flex;
+  color: var(--brand-control-color-fg-default);
+  background-color: var(--brand-color-canvas-default);
+  border: none;
+  border-radius: var(--brand-borderRadius-medium);
+  line-height: var(--brand-text-lineHeight-100);
+  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);
+  transition-property: color, background-color, box-shadow;
+}
+
+.Textarea::-moz-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Textarea::placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Textarea[disabled] {
+  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
+  color: var(--brand-control-color-fg-disabled);
+  cursor: not-allowed;
+  background-color: var(--brand-control-color-canvas-disabled);
+  opacity: 1;
+  resize: none;
+}
+
+.Textarea:focus {
+  outline: none;
+}
+
+.Textarea-resize--vertical {
+  resize: vertical;
+}
+
+.Textarea-resize--horizontal {
+  resize: horizontal;
+}
+
+.Textarea-resize--none {
+  resize: none;
+}
+
+.Textarea-resize--both {
+  resize: both;
+}
+
+/*
+ * Sizes
+ */
+.Textarea--medium {
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);
+}
+
+.Textarea--large {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);
+}
+
+/*
+ * Visual states
+ */
+.Textarea--fullWidth {
+  width: 100%;
+}
+
+/*
+ * Textarea wrapper
+ */
+
+.Textarea-wrapper--disabled {
+  border-color: var(--brand-control-color-border-disabled);
+}
+
+.Textarea-wrapper {
+  font-family: var(--brand-body-fontFamily);
+  display: inline-flex;
+  position: relative;
+  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);
+  border-radius: var(--brand-borderRadius-medium);
+  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);
+  transition-property: border;
+}
+
+.Textarea-wrapper--invisible {
+  border-color: transparent;
+}
+
+.Textarea-wrapper--fullWidth {
+  display: flex;
+}
+
+.Textarea-wrapper:not(.Textarea-wrapper--fullWidth) {
+  width: -moz-min-content;
+  width: min-content;
+}
+
+.Textarea-wrapper--monospace {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Textarea-wrapper:focus-within {
+  border-color: var(--brand-color-focus);
+  box-shadow: 0 0 0 1px var(--brand-color-focus);
+  outline: none;
+}
+
+/*
+ * Validation
+ */
+
+.Textarea-wrapper--success,
+.Textarea-wrapper--success.Textarea-wrapper--disabled {
+  border-color: var(--brand-color-success-fg);
+}
+
+.Textarea-wrapper--error,
+.Textarea-wrapper--error.Textarea-wrapper--disabled {
+  border-color: var(--brand-color-error-fg);
+}

package/components/list/ListItem/ListItem.css

@@ -0,0 +1,29 @@
+.ListItem {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--base-size-12);
+}
+
+.ListItem--default {
+  color: var(--brand-color-text-default);
+}
+
+.ListItem--muted {
+  color: var(--brand-color-text-muted);
+}
+
+.ListItem__leading-visual {
+  margin: var(--base-size-4) 0;
+}
+
+.ListItem__leading-visual--muted {
+  fill: var(--brand-color-text-muted);
+}
+
+.OrderedList__item::before {
+  content: counter(li) '.';
+  counter-increment: li;
+  min-width: var(--base-size-16);
+  text-align: center;
+  font-weight: var(--brand-text-size-200);
+}

package/components/list/OrderedList/OrderedList.css

@@ -0,0 +1,3 @@
+.OrderedList {
+  counter-reset: li;
+}

package/components/list/list-shared.css

@@ -0,0 +1,10 @@
+.List {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  list-style: none;
+  gap: var(--base-size-8);
+  padding-inline-start: 0px;
+  font-family: var(--brand-body-fontFamily);
+  color: var(--brand-color-text-default);
+}

package/components/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.css

@@ -0,0 +1,204 @@
+/**
+ * Custom overrides
+ * Should be fixed in the respective components
+ */
+
+.FeaturePreview {
+  --brand-Hero-regular-padding: var(--brand-Hero-narrow-padding);
+}
+
+[data-color-mode='dark'] .FeaturePreview__trailingSection {
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
+}
+
+.FeaturePreview__footer {
+  z-index: 2;
+}
+
+.FeaturePreview__mainContent {
+  position: relative;
+  z-index: 1;
+}
+
+.FeaturePreview__mainContentGrid {
+  padding: 0;
+  position: relative;
+}
+
+.FeaturePreview__borderTop {
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-control-color-border-default);
+}
+
+.FeaturePreview__hero {
+  z-index: 1;
+}
+@media screen and (max-width: 63.25rem) {
+  .FeaturePreview__heroContent {
+    background-color: var(--base-color-scale-black-0);
+  }
+}
+
+.FeaturePreview__splitLayout {
+  --brand-featurepreview-dark-bgColor: #000;
+}
+
+@media screen and (max-width: 63.25rem) {
+  .FeaturePreview__splitLayout {
+    display: none;
+  }
+  .FeaturePreview__splitLayoutBg {
+    background-image: none !important;
+  }
+
+  .FeaturePreview__heroBg {
+    background-size: cover;
+    background-image: none !important;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .FeaturePreview__splitLayout {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: cover;
+  }
+
+  .FeaturePreview__splitLayoutBg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: cover;
+    z-index: 0;
+  }
+
+  .FeaturePreview__splitLayoutEnterprise {
+    background-color: var(--brand-featurepreview-dark-bgColor);
+  }
+
+  .FeaturePreview__formContent {
+    background-color: var(--brand-color-canvas-default);
+    position: relative;
+    z-index: 1;
+  }
+
+  [data-color-mode='dark'] .FeaturePreview__formContent {
+    background-color: var(--brand-color-canvas-subtle);
+  }
+
+  .FeaturePreview__heroContentInnerSticky {
+    height: 100vh;
+  }
+
+  .FeaturePreview__heroContentInnerStickyContent {
+    position: fixed;
+  }
+}
+
+.FeaturePreview__footerLink {
+  color: var(--brand-color-text-muted);
+}
+
+/**
+ * Enterprise story
+ * Positional overrides that are required as the video doesn't fade.
+ * FIXME: by replacing the video with one that fades into background on its edges
+ */
+
+.FeaturePreview__enterpriseVideo {
+  position: fixed;
+  bottom: -250px;
+  left: 0;
+  width: 54%;
+  max-width: 1200px;
+  z-index: 0;
+  height: auto;
+}
+
+.FeaturePreview__enterpriseVideoOverlayTop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 54%;
+  height: 100%;
+  z-index: 1;
+  background-image: linear-gradient(black 40%, transparent 50%);
+}
+
+.FeaturePreview__enterpriseVideoOverlayLeft {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 54%;
+  height: 100%;
+  z-index: 1;
+  background-image: linear-gradient(to right, black 5%, transparent 20%);
+}
+
+.FeaturePreview__enterpriseVideoOverlayRight {
+  position: fixed;
+  top: 0;
+  right: 45%;
+  width: 50%;
+  height: 100%;
+  z-index: 1;
+  background-image: linear-gradient(to left, black 0%, transparent 20%);
+}
+
+@media screen and (max-width: 63.25rem) {
+  .FeaturePreview__enterpriseVideo,
+  .FeaturePreview__enterpriseVideoOverlayRight,
+  .FeaturePreview__enterpriseVideoOverlayTop,
+  .FeaturePreview__enterpriseVideoOverlayLeft {
+    display: none;
+  }
+}
+
+@media screen and (max-height: 37.5rem) {
+  .FeaturePreview__enterpriseVideo {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .FeaturePreview__enterpriseVideo {
+    left: 5%;
+    bottom: -370px;
+  }
+}
+
+@media screen and (min-height: 1040px) {
+  .FeaturePreview__enterpriseVideo {
+    bottom: -250px;
+  }
+}
+
+@media screen and (min-width: 125rem) and (max-height: 1040px) {
+  .FeaturePreview__enterpriseVideo {
+    bottom: -460px;
+  }
+}
+
+@media screen and (min-width: 125rem) and (min-height: 1040px) {
+  .FeaturePreview__enterpriseVideo {
+    left: 10%;
+    top: 150px;
+  }
+
+  .FeaturePreview__enterpriseVideoOverlayLeft {
+    background-image: linear-gradient(to right, black 25%, transparent 55%);
+  }
+}
+
+@media screen and (min-width: 150rem) and (min-height: 1040px) {
+  .FeaturePreview__enterpriseVideo {
+    left: 15%;
+  }
+}

package/components/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.css

@@ -0,0 +1,57 @@
+/**
+ * Custom overrides
+ * Should be fixed in the respective components
+ */
+
+.Hero {
+  /* In this template, the vertical spacing in Hero 
+   * at wider viewports uses the same value
+   * as that used in narrower viewports.
+   */
+  padding: var(--brand-Hero-narrow-padding);
+}
+
+@media screen and (min-width: 48rem) {
+  .FeaturePreview {
+    --brand-River-spacing-outer: var(--base-size-48);
+  }
+}
+
+.FeaturePreview__heroBg {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: right center;
+}
+
+.FeaturePreview__heroImageContainer {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: var(--brand-borderRadius-large);
+  overflow: hidden;
+}
+
+.FeaturePreview__ctaBanner {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: var(--brand-borderRadius-large);
+  overflow: hidden;
+}
+
+.FeaturePreview__heroImageContainer img {
+  display: block;
+}
+
+.FeaturePreview__trailingSection {
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-1);
+}
+
+[data-color-mode='dark'] .FeaturePreview__trailingSection {
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-7);
+}
+
+@media screen and (min-width: 48rem) {
+  /* This will eventually be fixed by using the Grid inside the River */
+  .RiverContent {
+    padding-inline-start: calc(var(--brand-River-spacing-inner) * 2);
+  }
+}

package/components/recipes/FeaturePreviewLPs/FeaturePreviewLevelZero/FeaturePreviewLevelZero.css

@@ -0,0 +1,3 @@
+.FeaturePreview__borderTop {
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}

package/components/recipes/SolutionTemplates/CategoryPage/CategoryPage.css

@@ -0,0 +1,83 @@
+.hideHorizontalOverflow {
+  position: relative;
+  overflow-x: hidden;
+}
+
+.subtleCards {
+  --brand-Card-background-default: var(--brand-color-canvas-subtle);
+}
+
+.customHero {
+  overflow-x: hidden;
+  --brand-Hero-regular-padding: var(--base-size-112) 0 var(--base-size-96);
+  --initialOpacity: 0.2;
+}
+
+@keyframes scaleAnimation {
+  0% {
+    opacity: var(--initialOpacity);
+    transform: scale(0.99);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.customHero::before,
+.customHero::after {
+  --diameter: 1200px;
+  --radius: 1227px;
+
+  position: absolute;
+  top: -1125px;
+  bottom: 0;
+  left: 45%;
+  z-index: -1;
+  display: block;
+  width: var(--diameter);
+  height: var(--diameter);
+  transform: scale(0.99);
+  transform-origin: center 0;
+  content: '';
+  z-index: 0;
+  filter: blur(200px);
+  animation: scaleAnimation 2s var(--brand-animation-easing-glide) forwards;
+  animation-delay: 0.3s;
+  opacity: var(--initialOpacity);
+  border-radius: var(--radius);
+}
+
+.customHero::before {
+  left: 20%;
+}
+
+[data-color-mode='light'] .customHero::before {
+  background: var(--base-color-scale-blue-2);
+}
+
+[data-color-mode='light'] .customHero::after {
+  background: var(--base-color-scale-purple-2);
+}
+
+[data-color-mode='dark'] .customHero::before {
+  background: var(--base-color-scale-blue-5);
+}
+
+[data-color-mode='dark'] .customHero::after {
+  background: var(--base-color-scale-purple-5);
+}
+
+.relative {
+  position: relative;
+  z-index: 1;
+}
+
+.ctaBanner {
+  --brand-CTABanner-bgColor: var(--brand-color-canvas-subtle);
+}
+
+/* In dotcom, use h-full */
+.fullHeight {
+  height: 100%;
+}

package/components/recipes/SolutionTemplates/SolutionPage/SolutionPage.css

@@ -0,0 +1,119 @@
+.hideHorizontalOverflow {
+  overflow-x: clip;
+}
+
+.sectionIntro {
+  display: grid;
+  grid-template-rows: auto;
+  height: 100%;
+  grid-auto-rows: max-content;
+  justify-items: start;
+}
+
+.verticalOffset > div:nth-child(2),
+.verticalOffset > div:nth-child(3) {
+  margin-block-start: calc(var(--base-size-48) * -1);
+}
+
+.topOfStack {
+  position: relative;
+  z-index: 2;
+}
+
+.relative {
+  position: relative;
+  z-index: 1;
+}
+
+.gitLinesBg {
+  background-size: cover;
+  background-position: center center;
+}
+
+.ctaBanner {
+  --brand-CTABanner-bgColor: var(--brand-color-canvas-subtle);
+}
+
+.noBottomRadius {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.jtbd2Section {
+  --brand-RiverStoryScroll-content-inactive-bgColor: var(--brand-color-canvas-subtle);
+}
+
+.cards {
+  --brand-Grid-spacing-row: var(--base-size-32);
+}
+
+.breadcrumbsOffset {
+  margin-top: calc(-1 * var(--base-size-96));
+}
+
+/*
+ * Hero video glow
+ * Opt-in feature. Not officialy-support Primer Brand pattern.
+ */
+
+@keyframes scaleAnimation {
+  0% {
+    opacity: 0.1;
+    transform: translateX(200px) scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(200px) scale(1);
+  }
+}
+
+.heroVideoGlow {
+  position: relative;
+}
+
+.heroVideoGlow::before,
+.heroVideoGlow::after {
+  --diameter: 520px;
+  --radius: 720px;
+  --topOffset: 600px;
+  --leftOffset: 45%;
+
+  position: absolute;
+  top: var(--topOffset);
+  bottom: 0;
+  left: var(--leftOffset);
+  z-index: -1;
+  display: block;
+  width: var(--diameter);
+  height: var(--diameter);
+  transform: translateX(200px) scale(0.99);
+  transform-origin: center 0;
+  content: '';
+  z-index: 0;
+  filter: blur(200px);
+  animation: scaleAnimation 3s var(--brand-animation-easing-default) forwards;
+  animation-delay: 0.5s;
+  opacity: 0;
+  border-radius: var(--radius);
+}
+
+.heroVideoGlow::before {
+  left: calc(var(--leftOffset) - 200px);
+  top: calc(--topOffset - 100px);
+}
+
+[data-color-mode='light'] .heroVideoGlow::before {
+  background: var(--base-color-scale-blue-2);
+}
+
+[data-color-mode='light'] .heroVideoGlow::after {
+  background: var(--base-color-scale-purple-2);
+}
+
+[data-color-mode='dark'] .heroVideoGlow::before {
+  background: var(--base-color-scale-blue-7);
+}
+
+[data-color-mode='dark'] .heroVideoGlow::after {
+  background: var(--base-color-scale-purple-7);
+}

package/components/recipes/SolutionTemplates/SolutionsOverview/SolutionsOverview.css

@@ -0,0 +1,35 @@
+.verticalOffset > div {
+  margin-block-start: calc(var(--base-size-48) * -1);
+}
+
+.noBottomRadius {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.topOfStack {
+  position: relative;
+  z-index: 2;
+}
+
+.portalCustomerCards {
+  --brand-Card-background-default: transparent;
+}
+
+.gitLinesBg {
+  background-size: cover;
+  background-position: center center;
+}
+
+.ctaBanner {
+  --brand-CTABanner-bgColor: var(--brand-color-canvas-subtle);
+}
+
+/* In dotcom, use h-full */
+.fullHeight {
+  height: 100%;
+}
+
+.customerCards {
+  --brand-Grid-spacing-row: var(--base-size-32);
+}