@primer/brand-css 0.0.0-20250212132611

package/components/forms/ControlGroup/ControlGroup.css

@@ -0,0 +1,59 @@
+.ControlGroup__container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-8);
+  font-family: var(--brand-body-fontFamily);
+  font-size: var(--brand-text-size-100);
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ControlGroup__label {
+  margin: 0;
+  padding: 0;
+  margin-block-end: var(--base-size-8);
+}
+
+.ControlGroup__validation {
+  display: flex;
+  gap: var(--base-size-4);
+  font-weight: var(--base-text-weight-medium);
+}
+
+.ControlGroup__validation--success {
+  color: var(--brand-color-success-fg);
+}
+
+.ControlGroup__validation--error {
+  color: var(--brand-color-error-fg);
+}
+
+.ControlGroup__validation-icon--success {
+  position: relative;
+  top: -1px;
+}
+
+.ControlGroup__validation-icon--error {
+  position: relative;
+  top: -0.5px;
+}
+
+.ControlGroup__validation--animate-in {
+  animation: 170ms ControlGroupValidationFadeIn var(--brand-animation-easing-glide);
+}
+
+.ControlGroup__container label {
+  font-weight: var(--base-text-weight-medium);
+}
+
+@keyframes ControlGroupValidationFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/components/forms/FormControl/FormControl.css

@@ -0,0 +1,113 @@
+.FormControl {
+  display: inline-flex;
+  font-family: var(--brand-body-fontFamily);
+  flex-direction: column;
+  gap: var(--base-size-8);
+}
+
+.FormControl--fullWidth {
+  width: 100%;
+}
+
+.FormControl--checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.FormControl--border {
+  border: 1px solid var(--brand-control-color-border-default);
+  border-radius: var(--brand-borderRadius-medium);
+  padding: var(--base-size-12);
+}
+
+.FormControl-label {
+  color: var(--brand-color-text-default);
+  font-weight: var(--base-text-weight-semibold);
+  font-family: var(--brand-body-fontFamily);
+}
+
+.FormControl-label--visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.FormControl-label--medium {
+  letter-spacing: var(--brand-text-letterSpacing-100);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+}
+
+.FormControl-label--large {
+  letter-spacing: var(--brand-text-letterSpacing-300);
+  font-size: var(--brand-text-size-300);
+  line-height: var(--brand-text-lineHeight-300);
+}
+
+.FormControl-label--checkbox {
+  cursor: pointer;
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--base-size-24); /* FIXME */
+  position: relative;
+  top: 2px;
+  width: 100%;
+}
+
+.FormControl-control--radio {
+  margin: 2px 0 0;
+}
+
+.FormControl-hint {
+  grid-column: 1 / 3;
+  display: block;
+}
+
+/*Validation*/
+.FormControl-validation {
+  display: flex;
+  gap: var(--base-size-4);
+}
+
+.FormControl-validation--success {
+  color: var(--brand-color-success-fg);
+}
+
+.FormControl-validation--error {
+  color: var(--brand-color-error-fg);
+}
+
+.FormControl-validation-success-icon {
+  position: relative;
+  top: -1px;
+}
+
+.FormControl-validation-error-icon {
+  position: relative;
+  top: -0.5px;
+}
+
+.FormControl-validation--animate-in {
+  animation: 170ms FormControlValidationFadeIn cubic-bezier(0.44, 0.74, 0.36, 1);
+}
+
+@keyframes FormControlValidationFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.FormControl-validation-checkbox {
+  grid-column: 1 / 3;
+}

package/components/forms/Radio/Radio.css

@@ -0,0 +1,111 @@
+/*
+ * Default Radio styles
+ */
+.Radio-wrapper {
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  grid-row: 1;
+}
+
+.Radio {
+  align-items: center;
+  background-color: var(--brand-control-radio-bg-default);
+  border: solid var(--brand-borderWidth-thick, 1px) var(--brand-control-color-border-default);
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-flex;
+  height: 20px;
+  justify-content: center;
+  margin: 3px 0; /* mimic default browser-applied vertical margin */
+  margin: 3px 3px 0px 5px; /* Emulate browser defaults */
+
+  width: 20px;
+  outline: none;
+  box-shadow: 0 0 0 3px transparent;
+  position: relative;
+}
+
+/*
+Fixes safari bug where outline doesn't respect border-radius
+*/
+.Radio::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  right: -2px;
+  bottom: -2px;
+  left: -4px;
+  border: 2px solid var(--brand-control-radio-bg-default);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+}
+
+/**
+ * Radio native input - visually hidden
+ */
+.Radio-input {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.Radio-dot {
+  position: absolute;
+  display: none;
+  border-color: var(--brand-control-radio-dot-default);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--brand-control-radio-dot-default);
+  position: absolute;
+  display: block;
+  transform: scale(0.7);
+  opacity: 0;
+  transition: transform 0.35s var(--brand-animation-easing-glide), opacity 0.35s var(--brand-animation-easing-glide);
+}
+@media (prefers-reduced-motion) {
+  .Radio-dot {
+    transition: none;
+  }
+}
+
+/*
+* Checked state
+*/
+
+.Radio-input:checked + .Radio {
+  background-color: var(--brand-control-radio-bg-checked);
+  border-color: var(--brand-control-radio-border-checked);
+}
+
+.Radio-input:checked + .Radio .Radio-dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.Radio-input:focus + .Radio {
+  box-shadow: 0 0 0 4px var(--brand-color-focus);
+}
+
+/* TODO: Check with a11y team */
+.Radio-input:checked:focus + .Radio {
+  border-color: var(--brand-control-radio-border-checked);
+}
+
+.Radio-input[disabled] + .Radio,
+.Radio-input[disabled]:checked + .Radio {
+  -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-radio-bg-disabled);
+  border-color: var(--brand-control-color-border-disabled);
+  opacity: 1;
+}

package/components/forms/Select/Select.css

@@ -0,0 +1,143 @@
+/*
+ * Default Select styles
+ */
+.Select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color: var(--brand-control-color-fg-default);
+  cursor: pointer;
+  background-color: var(--brand-color-canvas-default);
+  border: none;
+  border-radius: var(--brand-borderRadius-medium);
+  line-height: var(--brand-text-lineHeight-200);
+  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);
+  transition-property: color, background-color, box-shadow, border-color;
+  width: 100%;
+  grid-column: 1 / -1;
+  grid-row: 1;
+}
+
+@media screen and (forced-colors: active) {
+  /* Maintain dark bg color in Firefox on Windows high-contrast mode */
+  .Select:disabled {
+    background-color: -moz-combobox;
+  }
+}
+
+.Select::-moz-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Select::placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Select:focus-visible {
+  border-color: var(--brand-color-focus);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-color-focus);
+}
+
+.Select[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);
+  border-color: var(--brand-control-color-border-disabled);
+  opacity: 1;
+}
+
+.Select-wrapper--disabled.Select-wrapper::after {
+  background-color: var(--brand-control-color-fg-disabled);
+}
+
+/*
+ * Sizes
+ */
+
+.Select-wrapper--medium {
+  height: var(--brand-control-medium-size);
+}
+
+.Select-wrapper--medium::after {
+  margin-inline-end: calc(var(--brand-control-medium-paddingInline-condensed) / 2);
+}
+
+.Select--medium {
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  padding-inline: var(--brand-control-medium-paddingInline-condensed);
+  padding-inline-end: calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16));
+  padding-block: 0;
+}
+
+.Select-wrapper--large {
+  height: var(--brand-control-large-size);
+}
+
+.Select-wrapper--large::after {
+  margin-inline-end: var(--base-size-8);
+}
+
+.Select--large {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  padding-inline: var(--brand-control-large-paddingInline-condensed);
+  padding-inline-end: calc(var(--brand-control-large-paddingInline-condensed) + var(--base-size-16));
+  padding-block: 0;
+}
+
+/*
+ * Select wrapper
+ */
+
+.Select-wrapper {
+  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);
+  border-radius: var(--brand-borderRadius-medium, 6px);
+  font-family: var(--brand-body-fontFamily);
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: minmax(0, auto) var(--base-size-16);
+}
+
+.Select-wrapper::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  pointer-events: none;
+  background-color: var(--brand-control-color-fg-default);
+  mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  grid-column: 2;
+  grid-row: 1;
+  place-self: center end;
+}
+
+.Select-wrapper--disabled {
+  border-color: var(--brand-control-color-border-disabled);
+}
+
+.Select-wrapper--fullWidth {
+  width: 100%;
+}
+
+/*
+ * Validation
+ */
+
+.Select--success {
+  border-color: var(--brand-color-success-fg);
+}
+
+.Select--error {
+  border-color: var(--brand-color-error-fg);
+}

package/components/forms/TextInput/TextInput.css

@@ -0,0 +1,266 @@
+/*
+ * Default TextInput styles
+ */
+.TextInput {
+  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;
+}
+
+.TextInput::-moz-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.TextInput::placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.TextInput[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;
+}
+
+.TextInput:focus {
+  outline: none;
+}
+
+/*
+ * Sizes
+ */
+
+.TextInput-wrapper--medium {
+  height: var(--brand-control-medium-size);
+}
+
+.TextInput--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);
+}
+
+.TextInput--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);
+}
+
+.TextInput-wrapper--large {
+  height: var(--brand-control-large-size);
+}
+
+/*
+ * Visual states
+ */
+.TextInput--fullWidth {
+  width: 100%;
+}
+
+/*
+ * TextInput wrapper
+ */
+
+.TextInput-wrapper--disabled {
+  border-color: var(--brand-control-color-border-disabled);
+}
+
+.TextInput-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;
+}
+
+.TextInput-wrapper--invisible {
+  border-color: transparent;
+}
+
+.TextInput-wrapper--fullWidth {
+  width: 100%;
+  display: flex;
+}
+
+.TextInput-wrapper:not(.TextInput-wrapper--fullWidth) {
+  width: -moz-min-content;
+  width: min-content;
+}
+
+.TextInput-wrapper--monospace {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.TextInput-wrapper:focus-within {
+  border-color: var(--brand-color-focus);
+  box-shadow: 0 0 0 1px var(--brand-color-focus);
+  outline: none;
+}
+
+/*
+ * Validation
+ */
+
+.TextInput-wrapper--success,
+.TextInput-wrapper--success.TextInput-wrapper--disabled {
+  border-color: var(--brand-color-success-fg);
+}
+
+.TextInput-wrapper--error,
+.TextInput-wrapper--error.TextInput-wrapper--disabled {
+  border-color: var(--brand-color-error-fg);
+}
+
+/*
+ * TextInput visuals
+ */
+.TextInput--has-leading-visual--medium {
+  padding-inline-start: calc(
+    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)
+  );
+}
+
+.TextInput--has-leading-visual--large {
+  padding-inline-start: calc(
+    var(--brand-control-large-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-large-gap)
+  );
+}
+
+.TextInput--has-trailing-visual--medium {
+  padding-inline-end: calc(
+    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)
+  );
+}
+
+.TextInput--has-trailing-visual--large {
+  padding-inline-end: calc(
+    var(--brand-control-medium-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-medium-gap)
+  );
+}
+
+.TextInput-leading-visual,
+.TextInput-trailing-visual {
+  display: grid;
+  position: absolute;
+  top: 0;
+  display: flex;
+  width: var(--base-size-16);
+  height: 100%;
+  align-items: center;
+  color: var(--color-fg-muted);
+  pointer-events: none;
+  color: var(--brand-color-text-default);
+}
+
+.TextInput-leading-visual--medium {
+  left: var(--brand-control-medium-paddingInline-condensed);
+}
+
+.TextInput-trailing-visual--medium {
+  right: var(--brand-control-medium-paddingInline-condensed);
+}
+
+.TextInput-leading-visual--large {
+  left: var(--brand-control-large-paddingInline-condensed);
+}
+
+.TextInput-trailing-visual--large {
+  right: var(--brand-control-large-paddingInline-condensed);
+}
+
+.TextInput-leading-visual-icon--medium {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
+.TextInput-leading-visual-icon--large {
+  width: var(--base-size-20);
+  height: var(--base-size-20);
+}
+
+/*
+ * TextInput leading and trailing text
+ */
+
+.TextInput-leading-text,
+.TextInput-trailing-text {
+  display: flex;
+  align-items: center;
+  color: var(--brand-color-text-muted);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.TextInput-leading-text--disabled,
+.TextInput-trailing-text--disabled {
+  color: var(--brand-control-color-fg-disabled);
+  background-color: var(--brand-control-color-canvas-disabled);
+}
+
+.TextInput-leading-text {
+  border-top-left-radius: var(--brand-borderRadius-medium, 6px);
+  border-bottom-left-radius: var(--brand-borderRadius-medium, 6px);
+  border-right: 0;
+}
+
+.TextInput-trailing-text {
+  border-top-right-radius: var(--brand-borderRadius-medium, 6px);
+  border-bottom-right-radius: var(--brand-borderRadius-medium, 6px);
+  border-left: 0;
+}
+
+.TextInput-leading-text-inner,
+.TextInput-trailing-text-inner {
+  display: inline-flex;
+  color: var(--brand-color-text-muted);
+}
+
+.TextInput-leading-text-inner--medium,
+.TextInput-trailing-text-inner--medium {
+  padding-inline: var(--brand-control-medium-paddingInline-condensed);
+}
+
+.TextInput-leading-text-inner--large,
+.TextInput-trailing-text-inner--large {
+  padding-inline: var(--brand-control-large-paddingInline-condensed);
+}
+
+.TextInput-leading-text-inner {
+  border-right: 1px solid var(--brand-color-border-default);
+}
+
+.TextInput-trailing-text-inner {
+  border-left: 1px solid var(--brand-color-border-default);
+}
+
+.TextInput--has-leading-text {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.TextInput--has-trailing-text {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.TextInput-leading-text--success,
+.TextInput-trailing-text--success {
+  border-color: var(--brand-color-success-fg);
+}
+
+.TextInput-leading-text--error,
+.TextInput-trailing-text--error {
+  border-color: var(--brand-color-error-fg);
+}