@primer/brand-css 0.0.0-20250212132611

package/components/Accordion/Accordion.css

@@ -0,0 +1,305 @@
+.Accordion {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.Accordion--default {
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);
+}
+
+.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {
+  border-bottom: var(--brand-borderWidth-thicker) solid var(--brand-Accordion-border-color-emphasis);
+}
+
+.Accordion--default::after {
+  content: '';
+  border: 3px solid var(--brand-Accordion-border-color-default);
+  height: 0;
+  transition: var(--brand-animation-duration-fast) transform;
+  transform: scaleY(0);
+  transform-origin: 50% 100%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.Accordion--default:hover::after {
+  transform: scaleY(0.35);
+}
+
+.Accordion__summary {
+  cursor: pointer;
+  padding: var(--base-size-24) 0;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+
+.Accordion__summary--reversed-toggles {
+  padding-inline-start: var(--base-size-48);
+}
+
+.Accordion__summary::-webkit-details-marker {
+  display: none;
+}
+
+.Accordion__summary:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+}
+
+.Accordion__summary--collapsed,
+.Accordion__summary--expanded {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-weight: 500;
+  cursor: pointer;
+  font-size: 32px;
+  line-height: 24px;
+  text-align: center;
+  height: 24px;
+  width: 24px;
+  -webkit-text-fill-color: transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  position: absolute;
+}
+
+.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--collapsed,
+.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--expanded {
+  right: 0;
+}
+
+.Accordion__summary--reversed-toggles .Accordion__summary--collapsed,
+.Accordion__summary--reversed-toggles .Accordion__summary--expanded {
+  left: 0;
+}
+
+.Accordion__summary--default .Accordion__summary--collapsed::before,
+.Accordion__summary--default .Accordion__summary--expanded::after {
+  transition: transform var(--brand-animation-duration-fast) ease, opacity var(--brand-animation-duration-faster) ease;
+  display: block;
+  background: linear-gradient(
+    -70deg,
+    var(--brand-Accordion-toggle-color-start) 0%,
+    var(--brand-Accordion-toggle-color-end) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.Accordion__summary--toggleColor-default {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-default);
+}
+
+.Accordion__summary--toggleColor-blue {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-blue);
+}
+
+.Accordion__summary--toggleColor-blue-purple {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-blue-purple-end);
+}
+
+.Accordion__summary--toggleColor-coral {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-coral);
+}
+
+.Accordion__summary--toggleColor-green {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-green);
+}
+
+.Accordion__summary--toggleColor-green-blue {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-green-blue-end);
+}
+
+.Accordion__summary--toggleColor-gray {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-gray);
+}
+
+.Accordion__summary--toggleColor-indigo {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-indigo);
+}
+
+.Accordion__summary--toggleColor-lemon {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-lemon);
+}
+
+.Accordion__summary--toggleColor-lime {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-lime);
+}
+
+.Accordion__summary--toggleColor-orange {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-orange);
+}
+
+.Accordion__summary--toggleColor-pink {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-pink);
+}
+
+.Accordion__summary--toggleColor-pink-blue {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-pink-blue-end);
+}
+
+.Accordion__summary--toggleColor-purple {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-purple);
+}
+
+.Accordion__summary--toggleColor-purple-red {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-purple-red-end);
+}
+
+.Accordion__summary--toggleColor-red {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-red);
+}
+
+.Accordion__summary--toggleColor-red-orange {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-red-orange-end);
+}
+
+.Accordion__summary--toggleColor-teal {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-teal);
+}
+
+.Accordion__summary--toggleColor-yellow {
+  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);
+  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-yellow);
+}
+
+.Accordion__summary--default .Accordion__summary--collapsed::before {
+  font-weight: var(--base-text-weight-medium);
+  content: '–';
+  opacity: 0;
+}
+
+.Accordion__summary--default .Accordion__summary--expanded::after {
+  content: '+';
+}
+
+.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed,
+.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
+  transform: translate(0, -2px);
+}
+
+.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
+  opacity: 0;
+}
+
+details[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
+  opacity: 1;
+}
+
+details[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed {
+  opacity: 0;
+}
+
+details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed::before {
+  opacity: 1;
+  transform: rotateZ(180deg);
+}
+
+details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded::after {
+  opacity: 0;
+  transform: rotateZ(180deg);
+}
+
+.Accordion__summary:not(.Accordion__summary--reversed-toggles) {
+  padding-inline-end: var(--base-size-48);
+}
+
+.Accordion__summary--reversed-toggles {
+  padding-inline-start: var(--base-size-48);
+}
+
+.Accordion__content,
+.Accordion__content p,
+.Accordion__content span:not(.Accordion__summary--expanded):not(.Accordion__summary--collapsed),
+.Accordion__content ul,
+.Accordion__content ol {
+  color: var(--brand-color-text-muted);
+  font-family: var(--brand-fontStack-sansSerif);
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+
+[data-color-mode='dark'] .Accordion__content {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+.Accordion__content p:not(:first-child) {
+  margin-block-start: var(--base-size-16);
+}
+
+.Accordion__content a {
+  color: var(--brand-InlineLink-color-rest);
+  position: relative;
+  text-decoration: underline;
+  text-decoration-color: var(--brand-InlineLink-color-rest);
+  text-decoration-thickness: var(--brand-borderWidth-thin);
+  text-underline-position: under;
+  transition: var(--brand-InlineLink-transition-timing) text-decoration;
+}
+
+.Accordion__content a:hover {
+  text-decoration-thickness: var(--brand-borderWidth-thick);
+}
+
+.Accordion__content a,
+.Accordion__content a > span {
+  font-weight: inherit;
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.Accordion__content a:active,
+.Accordion__content a:active > span {
+  color: var(--brand-InlineLink-color-pressed);
+}
+
+details[open] > .Accordion__content {
+  padding-bottom: var(--base-size-24);
+  animation: fade-in 0.5s;
+  position: relative;
+  z-index: 0;
+}
+
+.Accordion__summary--default + .Accordion__content {
+  margin-top: calc(var(--base-size-16) * -1); /* for 8px gap between question and answer */
+}
+
+details[open] > .Accordion__summary--reversed-toggles + .Accordion__content {
+  padding-inline-start: var(--base-size-48);
+}
+
+/* Medium breakpoint and up */
+@media screen and (min-width: 48rem) {
+  .Accordion__summary {
+    gap: var(--base-size-40);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/components/ActionMenu/ActionMenu.css

@@ -0,0 +1,187 @@
+.ActionMenu {
+  position: relative;
+}
+
+.ActionMenu--disabled {
+  cursor: not-allowed;
+}
+
+.ActionMenu__button {
+  /* avoid specificity issues */
+  --brand-borderRadius-medium: var(--brand-borderRadius-full);
+  height: auto;
+}
+
+.ActionMenu__button--small {
+  padding: calc(var(--base-size-4) / 2) var(--base-size-12);
+}
+
+.ActionMenu__button--medium {
+  padding: calc(var(--base-size-8) + 2px) var(--base-size-28);
+}
+
+.ActionMenu__button > span:first-of-type {
+  max-width: 200px;
+  overflow: hidden;
+}
+
+.ActionMenu__menu {
+  position: absolute;
+  z-index: 100;
+  padding: var(--base-size-12);
+  min-width: -moz-min-content;
+  min-width: min-content;
+
+  visibility: hidden;
+  background-color: var(--brand-color-canvas-default);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-radius: var(--brand-borderRadius-large);
+  max-height: 460px;
+  overflow-y: auto;
+  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02),
+    0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);
+}
+
+.ActionMenu__menu--small {
+  padding: var(--base-size-8);
+}
+
+.ActionMenu__menu--medium {
+  padding: var(--base-size-12);
+}
+
+.ActionMenu__menu--visible {
+  visibility: visible;
+}
+
+.ActionMenu__menu--pos-outside-bottom {
+  animation: 189ms var(--brand-animation-easing-glide) 0s 1 normal none running overlay-appear-outside-bottom;
+}
+
+.ActionMenu__menu--pos-outside-top {
+  animation: 189ms var(--brand-animation-easing-glide) 0s 1 normal none running overlay-appear-outside-top;
+}
+
+@keyframes overlay-appear-outside-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes overlay-appear-outside-top {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ActionMenu__menu--medium.ActionMenu__menu--pos-outside-bottom {
+  margin-block-start: var(--base-size-8);
+}
+
+.ActionMenu__menu--medium.ActionMenu__menu--pos-outside-top {
+  margin-block-start: calc(var(--base-size-8) * -1);
+}
+
+.ActionMenu__menu--small.ActionMenu__menu--pos-outside-bottom {
+  margin-block-start: var(--base-size-4);
+}
+
+.ActionMenu__menu--small.ActionMenu__menu--pos-outside-top {
+  margin-block-start: calc(var(--base-size-4) * -1);
+}
+
+.ActionMenu__menu::-webkit-scrollbar {
+  width: var(--base-size-12);
+}
+
+.ActionMenu__menu::-webkit-scrollbar-track {
+  border-left: 1px solid var(--brand-color-border-muted);
+  border-top-right-radius: var(--brand-borderRadius-large);
+  border-bottom-right-radius: var(--brand-borderRadius-large);
+}
+
+.ActionMenu__menu::-webkit-scrollbar-thumb {
+  border-radius: var(--brand-borderRadius-medium);
+  border: 1px solid var(--brand-color-border-default);
+  background-color: var(--brand-ActionMenu-color-scrollbar-thumb-bg);
+}
+
+.ActionMenu__item {
+  flex: 1 0 auto;
+  display: grid;
+  align-items: center;
+  grid-template-areas: 'leadingVisual text';
+  grid-template-columns: min-content min-content;
+  list-style: none;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.ActionMenu__item--medium {
+  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);
+  min-height: var(--brand-control-medium-size);
+}
+
+.ActionMenu__item--small {
+  padding: var(--base-size-8) var(--brand-control-small-paddingInline-condensed);
+}
+
+.ActionMenu__item[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.ActionMenu__item:hover:not(.ActionMenu__item[aria-disabled='true']) {
+  cursor: pointer;
+  background-color: var(--brand-ActionMenu-color-item-hover);
+}
+
+.ActionMenu__item--selection-type-single {
+  padding-right: var(--base-size-48);
+}
+
+.ActionMenu__item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+  transition: none;
+}
+
+.ActionMenu__item-leadingVisual {
+  display: flex;
+  min-width: var(--base-size-16);
+  margin-right: var(--brand-control-medium-gap);
+  color: var(--brand-color-text-default);
+  pointer-events: none;
+  grid-area: leadingVisual / leadingVisual;
+}
+
+.ActionMenu__item-text {
+  grid-area: text / text;
+  /* display grid collapses the text line box height for optical alignment */
+  display: grid;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.ActionMenu__item-text > span {
+  line-height: var(--brand-control-medium-lineBoxHeight);
+}
+
+.ActionMenu__item-icon {
+  fill: var(--brand-color-text-default);
+}
+
+.ActionMenu__item-content--disabled {
+  color: var(--base-color-scale-gray-3);
+}
+
+.ActionMenu__item-icon--disabled {
+  fill: var(--base-color-scale-gray-3);
+}