@primer/brand-css 0.0.0-20250212132611

package/components/Box/Box.features.css

@@ -0,0 +1,48 @@
+.spacingContainer {
+  flex-wrap: wrap;
+}
+
+.paddingItem {
+  display: inline-block;
+  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%
+  );
+  background-size: 5.66px 5.66px;
+}
+
+.paddingInnerItem {
+  background-color: #ffb5b380;
+  padding: var(--base-size-4) var(--base-size-8);
+}
+
+.marginOuterItem {
+  width: unset !important;
+}
+
+.marginInnerItem {
+  background-color: var(--base-color-scale-white-0);
+  padding: var(--base-size-4) var(--base-size-8);
+}
+
+.borderRadiusItem {
+  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%
+  );
+  background-size: 5.66px 5.66px;
+}

package/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,81 @@
+.Breadcrumbs {
+  font-family: var(--brand-fontStack-sansSerif);
+  display: flex;
+  justify-content: space-between;
+}
+
+@media screen and (max-width: 63.25rem) {
+  .Breadcrumbs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.Breadcrumbs--default {
+  --brand-InlineLink-color-rest: var(--brand-color-text-default);
+  --brand-InlineLink-color-pressed: var(--brand-color-text-default);
+}
+
+.Breadcrumbs__list {
+  margin: 0;
+  padding-inline-start: 0;
+}
+
+@media screen and (max-width: 63.25rem) {
+  .Breadcrumbs__list {
+    display: inline-flex;
+  }
+}
+
+.Breadcrumbs__item {
+  display: inline-block;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.Breadcrumbs__item::after {
+  content: '';
+  display: inline-block;
+  height: 0.8em;
+  margin: 0 var(--base-size-12);
+  border-right: var(--brand-borderWidth-thin) solid var(--brand-breadcrumbs-separator-borderColor);
+  transform: rotate(15deg) translateY(0.0625em);
+}
+
+.Breadcrumbs__item:first-child {
+  margin-left: 0;
+}
+
+.Breadcrumbs__item:last-child::after {
+  content: none;
+}
+
+.Breadcrumbs__link {
+  font-size: var(--brand-text-size-100);
+  display: inline-block;
+  text-decoration: none;
+}
+
+@media screen and (max-width: 63.25rem) {
+  .Breadcrumbs__link {
+    white-space: nowrap;
+  }
+}
+
+.Breadcrumbs__link:hover,
+.Breadcrumbs__link:focus {
+  text-decoration: underline;
+}
+.Breadcrumbs__link--selected {
+  color: var(--brand-color-text-default);
+  pointer-events: none;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+.Breadcrumbs--default .Breadcrumbs__link--selected {
+  color: var(--brand-color-text-muted);
+}
+
+.Breadcrumbs__link--selected:focus {
+  text-decoration: none;
+}

package/components/BreakoutBanner/BreakoutBanner.css

@@ -0,0 +1,109 @@
+.BreakoutBanner {
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  max-width: var(--brand-breakpoint-xlarge);
+  width: 100%;
+  border-radius: var(--brand-borderRadius-large);
+  background-repeat: no-repeat;
+  background-color: var(--brand-BreakoutBanner-narrow-background-color, var(--brand-BreakoutBanner-background-color));
+  background-image: var(
+    --brand-BreakoutBanner-narrow-background-image-src,
+    var(--brand-BreakoutBanner-background-image-src)
+  );
+  background-size: var(
+    --brand-BreakoutBanner-narrow-background-image-size,
+    var(--brand-BreakoutBanner-background-image-size)
+  );
+
+  background-position: var(
+    --brand-BreakoutBanner-narrow-background-image-position,
+    var(--brand-BreakoutBanner-background-image-position, center)
+  );
+}
+
+.BreakoutBanner-container {
+  border-radius: var(--brand-borderRadius-xlarge);
+  padding: var(--base-size-40) var(--base-size-24) var(--base-size-128);
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.BreakoutBanner-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.BreakoutBanner-container--background {
+  background: var(--brand-BreakoutBanner-bgColor);
+}
+
+.BreakoutBanner-content--center {
+  align-items: center;
+  text-align: center;
+}
+
+.BreakoutBanner__heading {
+  max-width: 20ch;
+}
+
+.BreakoutBanner-description {
+  max-width: 54ch;
+  margin-block-start: var(--base-size-16);
+}
+
+.BreakoutBanner-linkGroup {
+  margin-block-start: var(--base-size-48);
+}
+
+.BreakoutBanner-leadingVisual {
+  margin-block-end: var(--base-size-48);
+}
+
+/* Regular */
+@media screen and (min-width: 48rem) {
+  .BreakoutBanner {
+    background-color: var(
+      --brand-BreakoutBanner-regular-background-color,
+      var(--brand-BreakoutBanner-background-color)
+    );
+    background-image: var(
+      --brand-BreakoutBanner-regular-background-image-src,
+      var(--brand-BreakoutBanner-background-image-src)
+    );
+    background-size: var(
+      --brand-BreakoutBanner-regular-background-image-size,
+      var(--brand-BreakoutBanner-background-image-size)
+    );
+    background-position: var(
+      --brand-BreakoutBanner-regular-background-image-position,
+      var(--brand-BreakoutBanner-background-image-position)
+    );
+  }
+
+  .BreakoutBanner-container {
+    padding: var(--base-size-48);
+  }
+}
+
+/* Wide */
+@media screen and (min-width: 80rem) {
+  .BreakoutBanner {
+    background-color: var(--brand-BreakoutBanner-wide-background-color, var(--brand-BreakoutBanner-background-color));
+    background-image: var(
+      --brand-BreakoutBanner-wide-background-image-src,
+      var(--brand-BreakoutBanner-background-image-src)
+    );
+    background-size: var(
+      --brand-BreakoutBanner-wide-background-image-size,
+      var(--brand-BreakoutBanner-background-image-size)
+    );
+
+    background-position: var(
+      --brand-BreakoutBanner-wide-background-image-position,
+      var(--brand-BreakoutBanner-background-image-position)
+    );
+  }
+}

package/components/Button/Button.css

@@ -0,0 +1,207 @@
+.Button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  transition: box-shadow var(--brand-animation-duration-faster);
+  text-decoration: none;
+  border-radius: var(--brand-borderRadius-medium);
+  cursor: pointer;
+  border: solid var(--brand-borderWidth-thick) transparent;
+  background: none;
+  display: inline-flex;
+  gap: var(--brand-control-medium-gap);
+}
+
+.Button:hover {
+  text-decoration: none;
+}
+
+.Button:focus-visible {
+  transition: none;
+  outline: 4px solid var(--brand-color-focus);
+  outline-offset: 2px;
+}
+
+.Button--disabled,
+.Button--disabled:hover,
+.Button--disabled:focus {
+  cursor: not-allowed;
+}
+
+.Button__text {
+  position: relative;
+}
+
+.Button__icon-visual {
+  display: flex;
+  align-self: center;
+  height: var(--base-size-16);
+  width: auto;
+  fill: currentcolor;
+}
+
+.Button__trailing-visual,
+.Button__leading-visual {
+  display: flex;
+}
+
+/* optically adjust arrow to align with the end (right) padding */
+/* reduce gap between label and arrow */
+.Button-arrow {
+  margin-inline-end: calc(var(--base-size-4) * -1);
+  margin-inline-start: calc(var(--base-size-8) * -1);
+}
+
+/* primary */
+
+.Button--primary {
+  color: var(--brand-button-primary-fgColor-rest);
+  background-color: var(--brand-button-primary-bgColor-rest);
+  border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);
+}
+
+.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+  background-color: var(--brand-button-primary-bgColor-hover);
+  border-color: var(--brand-button-primary-borderColor-hover);
+}
+
+.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
+.Button--primary[aria-expanded='true'] {
+  background-color: var(--brand-button-primary-bgColor-active);
+  border-color: var(--brand-button-primary-borderColor-active);
+  box-shadow: var(--brand-button-primary-shadow-active);
+}
+
+.Button--label-primary {
+  color: var(--brand-button-primary-fgColor-rest);
+}
+
+.Button--primary:disabled,
+.Button--primary[aria-disabled='true'],
+.Button--primary.Button--disabled {
+  background-color: var(--brand-button-primary-bgColor-disabled);
+  border-color: var(--brand-button-primary-borderColor-disabled);
+}
+
+.Button--primary:disabled .Button-arrow--disabled,
+.Button--primary[aria-disabled='true'] .Button-arrow--disabled,
+.Button--primary.Button--disabled .Button-arrow--disabled,
+.Button--primary:disabled .Button__icon-visual--disabled,
+.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,
+.Button--primary.Button--disabled .Button__icon-visual--disabled,
+.Button--label-primary.Button-label--disabled {
+  color: var(--brand-button-primary-fgColor-disabled);
+}
+
+/* secondary */
+
+.Button--secondary {
+  transition: background-color, border-color 200ms;
+  border-color: var(--brand-button-secondary-borderColor-rest);
+  color: var(--brand-button-secondary-fgColor-rest);
+}
+
+.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+  background-color: var(--brand-button-secondary-bgColor-hover);
+  border-color: var(--brand-button-secondary-borderColor-hover);
+}
+
+.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,
+.Button--secondary[aria-expanded='true'] {
+  background-color: var(--brand-button-secondary-bgColor-active);
+  border-color: var(--brand-button-secondary-borderColor-active);
+}
+
+.Button--secondary:disabled {
+  border-color: var(--brand-button-secondary-fgColor-disabled);
+}
+
+.Button--secondary:disabled .Button-arrow--disabled,
+.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,
+.Button--secondary.Button--disabled .Button-arrow--disabled,
+.Button--secondary:disabled .Button__icon-visual--disabled,
+.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,
+.Button--secondary.Button--disabled .Button__icon-visual--disabled,
+.Button--label-secondary.Button-label--disabled {
+  color: var(--brand-button-secondary-fgColor-disabled);
+}
+
+/* subtle */
+
+.Button--subtle {
+  color: var(--brand-color-text-default);
+  border-color: var(--brand-button-subtle-borderColor-rest);
+  transition: background-color, border-color var(--brand-animation-duration-faster);
+}
+
+.Button--subtle:hover:not(.Button[disabled]) {
+  border-color: var(--brand-button-subtle-borderColor-hover);
+}
+
+.Button--label-subtle {
+  color: var(--brand-button-subtle-fgColor-rest);
+}
+
+.Button--subtle:disabled .Button-arrow--disabled,
+.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,
+.Button--subtle.Button--disabled .Button-arrow--disabled,
+.Button--subtle:disabled .Button__icon-visual--disabled,
+.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,
+.Button--subtle.Button--disabled .Button__icon-visual--disabled,
+.Button--label-subtle.Button-label--disabled {
+  color: var(--brand-button-subtle-fgColor-disabled);
+}
+
+/* size */
+
+.Button--size-small {
+  min-height: var(--brand-control-small-size);
+  padding-inline: var(--brand-control-small-paddingInline-normal);
+}
+
+.Button--size-medium {
+  min-height: var(--brand-control-medium-size);
+  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);
+}
+
+.Button--size-large {
+  min-height: var(--brand-control-large-size);
+  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);
+}
+
+.Button--size-large .Button__icon-visual,
+.Button--size-large .Button-arrow {
+  height: var(--base-size-20);
+  width: var(--base-size-20);
+}
+
+.Button--label-medium {
+  font-size: var(--brand-text-subhead-size-medium);
+  line-height: var(--brand-text-subhead-lineHeight-medium);
+}
+
+.Button--label-large {
+  font-size: var(--brand-text-subhead-size-large);
+  line-height: var(--brand-text-subhead-lineHeight-large);
+}
+
+.Button--block {
+  width: 100%;
+}
+
+@media (forced-colors: active) {
+  .Button--disabled {
+    outline-color: GrayText;
+  }
+
+  /* Indicates disabled state in WHCM */
+  .Button--label.Button-label--disabled {
+    color: GrayText;
+  }
+}

package/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,10 @@
+.ButtonGroup {
+  display: inline-flex;
+  gap: var(--base-size-8) var(--base-size-16);
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.ButtonGroup > * {
+  flex-grow: 1;
+}

package/components/CTABanner/CTABanner.css

@@ -0,0 +1,104 @@
+.CTABanner {
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  max-width: var(--brand-breakpoint-xlarge);
+  width: 100%;
+}
+
+.CTABanner--shadow::before {
+  content: '';
+  position: absolute;
+  inset: var(--base-size-16);
+  filter: blur(var(--base-size-96));
+  transform: translateZ(0);
+  background: linear-gradient(
+    to right,
+    var(--brand-CTABanner-shadow-color-start),
+    var(--brand-CTABanner-shadow-color-end)
+  );
+}
+
+.CTABanner-container {
+  border-radius: var(--brand-borderRadius-xlarge);
+  padding: var(--base-size-40) var(--base-size-32);
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.CTABanner-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-16);
+  align-items: flex-start;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.CTABanner-container--background {
+  border-radius: var(--brand-borderRadius-xlarge);
+  background-repeat: no-repeat;
+  background-color: var(--brand-CTABanner-narrow-background-color, var(--brand-CTABanner-background-color));
+  background-image: var(--brand-CTABanner-narrow-background-image-src, var(--brand-CTABanner-background-image-src));
+  background-size: var(--brand-CTABanner-narrow-background-image-size, var(--brand-CTABanner-background-image-size));
+
+  background-position: var(
+    --brand-CTABanner-narrow-background-image-position,
+    var(--brand-CTABanner-background-image-position, center)
+  );
+}
+
+.CTABanner-container--border {
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
+.CTABanner-content--center {
+  align-items: center;
+  text-align: center;
+}
+
+.CTABanner-description {
+  margin-bottom: var(--base-size-16);
+}
+
+/* Medium breakpoint and up */
+@media screen and (min-width: 48rem) {
+  .CTABanner-container {
+    padding: var(--base-size-80) var(--base-size-64);
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .CTABanner-container {
+    padding: var(--base-size-128) var(--base-size-64);
+  }
+}
+
+/* Regular */
+@media screen and (min-width: 48rem) {
+  .CTABanner-container--background {
+    background-color: var(--brand-CTABanner-regular-background-color, var(--brand-CTABanner-background-color));
+    background-image: var(--brand-CTABanner-regular-background-image-src, var(--brand-CTABanner-background-image-src));
+    background-size: var(--brand-CTABanner-regular-background-image-size, var(--brand-CTABanner-background-image-size));
+    background-position: var(
+      --brand-CTABanner-regular-background-image-position,
+      var(--brand-CTABanner-background-image-position)
+    );
+  }
+}
+
+/* Wide */
+@media screen and (min-width: 80rem) {
+  .CTABanner-container--background {
+    background-color: var(--brand-CTABanner-wide-background-color, var(--brand-CTABanner-background-color));
+    background-image: var(--brand-CTABanner-wide-background-image-src, var(--brand-CTABanner-background-image-src));
+    background-size: var(--brand-CTABanner-wide-background-image-size, var(--brand-CTABanner-background-image-size));
+
+    background-position: var(
+      --brand-CTABanner-wide-background-image-position,
+      var(--brand-CTABanner-background-image-position)
+    );
+  }
+}

package/components/CTAForm/CTAForm.css

@@ -0,0 +1,48 @@
+.CTAForm {
+  display: grid;
+  gap: var(--base-size-16);
+  grid-template-columns: 2fr auto;
+  align-items: flex-end;
+}
+
+.CTAForm > * {
+  grid-column: span 2;
+  width: 100%;
+}
+
+.CTAForm-input {
+  order: 1;
+}
+
+.CTAForm-confirm {
+  order: 2;
+  grid-column: span 2;
+}
+
+.CTAForm-button {
+  order: 4;
+}
+
+.CTAForm > *:not(.CTAForm-input, .CTAForm-button, .CTAForm-confirm) {
+  order: 3;
+  grid-column: span 2;
+}
+
+@media screen and (min-width: 48rem) {
+  .CTAForm > * {
+    grid-column: span 1;
+  }
+
+  .CTAForm-confirm {
+    order: 3;
+    grid-column: span 2;
+  }
+
+  .CTAForm-button {
+    order: 2;
+  }
+
+  .CTAForm > *:not(.CTAForm-input, .CTAForm-button, .CTAForm-confirm) {
+    order: 4;
+  }
+}