@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
2 lines (1 loc) • 3.87 kB
CSS
.Primer_Brand__Token-module__Token___nJxhW{border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-small);align-items:center;gap:var(--base-size-8);min-width:0;max-width:100%;padding-inline:var(--base-size-8);padding-block:var(--base-size-6);vertical-align:middle;padding-block-end:var(--base-size-6);display:inline-flex}.Primer_Brand__Token-module__Token--hasLeadingVisual___Erv8L{padding-inline:calc((var(--base-size-4) + var(--base-size-8)) / 2);padding-block:calc((var(--base-size-4) + var(--base-size-8)) / 2)}.Primer_Brand__Token-module__Token--interactive___ZpgTX{cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}[data-color-mode=dark] .Primer_Brand__Token-module__Token___nJxhW{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Token-module__Token--variant-default___eMkcM{background-color:var(--brand-Token-bgColor-default);color:var(--brand-Token-fgColor-default)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-default___eMkcM:hover{background-color:var(--brand-Token-bgColor-hover-default)}.Primer_Brand__Token-module__Token--variant-accent___fSxf7{background-color:var(--brand-Token-bgColor-accent);color:var(--brand-Token-fgColor-accent)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-accent___fSxf7:hover{background-color:var(--brand-Token-bgColor-hover-accent)}.Primer_Brand__Token-module__Token--variant-outline___GTmIy{background-color:var(--brand-Token-bgColor-outline);border-color:var(--brand-Token-border-outline);color:var(--brand-Token-fgColor-outline)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-outline___GTmIy:hover{background-color:var(--brand-Token-bgColor-hover-outline)}.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki{color:var(--brand-Token-fgColor-invisible);background-color:#0000}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki:hover{background-color:var(--brand-Token-bgColor-hover-invisible)}.Primer_Brand__Token-module__Token__label___e3Cx3{text-overflow:ellipsis;text-transform:uppercase;min-width:0;font-weight:var(--base-text-weight-normal);white-space:nowrap;letter-spacing:var(--brand-text-letterSpacing-100);flex:auto;line-height:.85;display:block;overflow:hidden}.Primer_Brand__Token-module__Token___nJxhW>.Primer_Brand__Token-module__Token__label___e3Cx3{color:inherit}.Primer_Brand__Token-module__Token__leading-visual____uvYs{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);flex-shrink:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__Token-module__Token__visual___Nlxfv{display:block}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-width:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-height:calc((var(--base-size-16) + var(--base-size-20)) / 2);border-radius:2px}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv svg,.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv img{width:100%;height:100%}@media (forced-colors:active){.Primer_Brand__Token-module__Token___nJxhW{outline:var(--brand-borderWidth-thin) solid transparent}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline-color:highlight}}