@primer/brand-css 0.0.0-20250212132611

package/components/IDE/IDE.css

@@ -0,0 +1,392 @@
+.IDE__inner {
+  --brand-IDE-lineNumber-width: 45px;
+  background: var(--brand-IDE-default-bgColor);
+  border: var(--brand-borderWidth-thin) solid var(--brand-IDE-borderColor);
+}
+
+.IDE--glass {
+  -webkit-backdrop-filter: blur(var(--base-size-12));
+          backdrop-filter: blur(var(--base-size-12));
+}
+
+.IDE--glass .IDE__inner {
+  background: var(--brand-IDE-glass-bgColor-rest);
+  border-color: transparent !important;
+}
+
+.IDE__main {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.IDE--glass .IDE__main {
+  height: var(--brand-IDE-height);
+}
+
+.IDE--default .IDE__main {
+  padding-top: var(--base-size-32);
+}
+
+.IDE__inner {
+  position: relative;
+  width: 100%;
+  height: var(--brand-IDE-height);
+  margin: calc(var(--base-size-12) - 2px) auto;
+  border-radius: var(--brand-borderRadius-large);
+  overflow: hidden;
+}
+
+/**
+* Chat
+*/
+.IDE__Chat {
+  display: grid;
+  grid-area: pane;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-16);
+  color: var(--brand-color-text-default);
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.IDE--glass .IDE__Chat {
+  background: var(--brand-IDE-glass-chat-bgColor);
+}
+
+.IDE--full-exp .IDE__Chat {
+  min-width: 300px;
+  max-width: 450px;
+}
+
+@media screen and (max-width: 63.24rem) {
+  .IDE--full-exp .IDE__Chat {
+    display: none;
+  }
+}
+
+.IDE__Chat-wrapper {
+  display: contents;
+}
+
+.IDE__Chat-message-user {
+  display: inline-flex;
+  gap: var(--base-size-8);
+  align-items: center;
+}
+
+.IDE__Chat-messages {
+  overflow-y: scroll;
+  height: calc(100% - 78px);
+}
+
+.IDE__Chat-messages {
+  scrollbar-width: thin;
+  scrollbar-color: var(--brand-IDE-scrollBar-fgColor) var(--brand-IDE-scrollBar-bgColor);
+}
+
+.IDE__Chat-messages::-webkit-scrollbar {
+  width: var(--base-size-12);
+}
+
+.IDE__Chat-messages::-webkit-scrollbar-track {
+  background: var(--brand-IDE-scrollBar-bgColor);
+}
+
+.IDE__Chat-messages::-webkit-scrollbar-thumb {
+  background-color: var(--brand-IDE-scrollBar-fgColor);
+  border-radius: var(--base-size-20);
+  border: var(--brand-borderRadius-small) solid var(--brand-IDE-scrollBar-bgColor);
+}
+
+.IDE__Chat-input-area {
+  position: absolute;
+  bottom: var(--base-size-16);
+  width: 100%;
+  padding: 0 var(--base-size-20);
+  opacity: 0.5;
+}
+
+.IDE__Chat-input {
+  background: var(--brand-IDE-default-bgColor) !important;
+  color: var(--brand-color-text-muted) !important;
+  -webkit-text-fill-color: var(--brand-color-text-muted) !important;
+  border-color: var(--brand-color-border-default);
+}
+
+.IDE__Chat-input-area svg {
+  fill: var(--brand-color-text-muted);
+}
+
+.IDE__Chat-message-content {
+  margin-top: var(--base-size-16);
+}
+
+.IDE__Chat-message-snippet {
+  background-color: var(--brand-IDE-default-editor-bgColor);
+  overflow-x: hidden;
+}
+
+.IDE__Chat-message {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-size: var(--base-size-16);
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding: var(--base-size-20);
+
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-slideInDown-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.IDE__Chat-message--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.IDE__Chat-message--faded {
+  opacity: 0.5;
+}
+
+.IDE__Chat-message pre {
+  border: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);
+  padding: var(--base-size-16);
+  border-radius: var(--brand-borderRadius-large);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: calc(var(--base-size-12) + 2px) !important; /* workaround dotcom specificity */
+}
+
+/**
+* Editor
+*/
+
+.IDE__Editor {
+  grid-area: editor;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.IDE--default .IDE__Editor {
+  padding-left: var(--base-size-20);
+}
+
+.IDE__Editor-tabs {
+  overflow-x: auto;
+  display: inline-flex;
+  background: var(--brand-IDE-default-editor-tabs-bgColor);
+}
+
+.IDE--default .IDE__Editor-tabs {
+  background: var(--brand-IDE-default-editor-tabs-bgColor);
+}
+
+.IDE--glass .IDE__Editor-tabs {
+  background: var(--brand-IDE-glass-editor-tabs-bgColor);
+}
+
+.IDE__Editor-tab {
+  flex-shrink: 0;
+  display: flex;
+  padding: var(--base-size-8) var(--base-size-12);
+  align-items: center;
+  gap: var(--base-size-4);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: calc(var(--base-size-12) + 2px);
+  color: var(--brand-color-text-muted);
+  cursor: pointer;
+  border: none;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  opacity: 1;
+}
+
+.IDE--default .IDE__Editor-tab {
+  background: var(--brand-IDE-default-editor-tab-bgColor-rest);
+}
+
+.IDE--glass .IDE__Editor-tab {
+  background: var(--brand-IDE-glass-editor-tab-bgColor-rest);
+}
+
+.IDE__Editor-tab.active {
+  color: var(--brand-color-text-default);
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-IDE-default-editor-tab-borderColor);
+  z-index: 1;
+}
+
+.IDE--default .IDE__Editor-tab.active {
+  background: var(--brand-IDE-default-editor-tab-bgColor-active);
+}
+
+.IDE--glass .IDE__Editor-tab {
+  background: transparent;
+  color: var(--brand-color-text-subtle);
+}
+
+.IDE--glass .IDE__Editor-tab.active {
+  color: var(--brand-color-text-default);
+  background: var(--brand-IDE-glass-editor-tab-bgColor-active);
+}
+
+.IDE--full-exp.IDE--glass .IDE__Editor-tab.active {
+  background: var(--brand-IDE-default-editor-bgColor);
+}
+
+.IDE__Editor-tab:hover {
+  color: var(--brand-color-text-default);
+}
+
+.IDE__Editor-tab[disabled] {
+  cursor: not-allowed;
+  color: var(--brand-color-text-subtle) !important;
+  opacity: 0.7;
+}
+
+.IDE__Editor-tab-close-icon {
+  width: var(--base-size-12);
+  height: var(--base-size-12);
+  margin-inline-start: var(--base-size-4);
+  fill: var(--brand-color-text-muted);
+}
+
+img.IDE__Editor-tab-icon {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  filter: grayscale(10%);
+}
+
+.IDE__Editor-tab:hover .IDE__Editor-tab-close-icon {
+  fill: var(--brand-color-text-default);
+}
+
+.IDE__Editor-content {
+  height: 100%;
+  padding-top: var(--base-size-16);
+  overflow-x: auto;
+}
+
+.IDE--default .IDE__Editor-content {
+  background: var(--brand-IDE-default-editor-bgColor);
+}
+
+.IDE--glass .IDE__Editor-content {
+  background: var(--brand-IDE-glass-editor-bgColor);
+  border-bottom-left-radius: var(--brand-borderRadius-large);
+}
+
+.IDE--full-exp.IDE--glass .IDE__Editor-content {
+  background: var(--brand-IDE-default-editor-bgColor);
+}
+
+.IDE__Editor-pane {
+  margin: 0;
+}
+
+.IDE__Editor-content-wrapper {
+  display: flex;
+}
+
+.IDE__Editor-content-inner {
+  flex: 1;
+}
+
+.IDE__Editor--small .IDE__Editor-pane,
+.IDE__Editor--small .IDE__Editor-lineNumbers {
+  font-size: calc(var(--base-size-12) - 1px) !important; /* workaround dotcom specificity */
+  line-height: calc(var(--base-size-16) + 2px) !important; /* workaround dotcom specificity */
+}
+
+.IDE__Editor--medium .IDE__Editor-pane,
+.IDE__Editor--medium .IDE__Editor-lineNumbers {
+  font-size: 0.875rem !important; /* workaround dotcom specificity */
+  line-height: 19.9px !important; /* workaround dotcom specificity */
+}
+
+.IDE__Editor--large .IDE__Editor-pane,
+.IDE__Editor--large .IDE__Editor-lineNumbers {
+  font-size: 1.125rem !important; /* workaround dotcom specificity */
+  line-height: var(--base-size-24) !important; /* workaround dotcom specificity */
+}
+
+.IDE__Editor-pane--suggested {
+  margin-left: calc(-1 * var(--brand-IDE-lineNumber-width));
+  padding-left: calc(var(--base-size-64) - 1px) !important;
+  background-color: var(--brand-IDE-autoSuggestLine-bgColor);
+  border-left: var(--brand-borderWidth-thin) solid var(--brand-IDE-autoSuggest-borderColor);
+}
+
+.IDE__Editor-lineNumbers {
+  z-index: 1;
+  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--brand-text-weight-200);
+  font-feature-settings: 'liga' 0, 'calt' 0;
+  font-variation-settings: normal;
+  letter-spacing: 0;
+  flex: 0 0 var(--brand-IDE-lineNumber-width);
+}
+
+.IDE__Editor-lineNumber {
+  position: relative;
+  display: block;
+  padding: 0 var(--base-size-8);
+  text-align: right;
+  color: var(--brand-color-text-subtle);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.IDE__Editor-lineNumber-text {
+  font-variant-numeric: tabular-nums;
+  position: absolute;
+  text-align: right;
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  cursor: default;
+  height: 100%;
+}
+
+.IDE__Editor pre {
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-fontStack-monospace);
+  padding-left: calc(var(--base-size-64) - var(--brand-IDE-lineNumber-width));
+}
+
+pre.IDE__Chat-copilot-indicator {
+  background-color: var(--brand-IDE-autoSuggest-bgColor);
+  padding-left: 0;
+  display: inline-flex;
+  padding: var(--base-size-8) var(--base-size-24);
+  border-radius: var(--brand-borderRadius-small);
+  gap: var(--base-size-16);
+  margin: var(--base-size-4) 0 0 var(--base-size-16);
+
+  box-shadow: -9px 10px 39px 0px rgba(0, 0, 0, 0.25);
+}
+
+.IDE__Chat-copilot-indicator-label {
+  color: var(--brand-IDE-autoSuggest-fgColor);
+  fill: var(--brand-IDE-autoSuggest-fgColor);
+}
+
+.IDE__Editor-replay {
+  margin-block-start: var(--base-size-24);
+  margin-block-end: var(--base-size-16);
+  align-self: center;
+  position: relative;
+  z-index: 1;
+}
+
+.IDE__Editor-replay[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/components/Icon/Icon.css

@@ -0,0 +1,121 @@
+.Icon {
+  box-sizing: content-box;
+  padding: 0;
+}
+
+.Icon--background {
+  padding: var(--base-size-12);
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.Icon--color-default {
+  color: var(--brand-Icon-color-default);
+}
+
+.Icon--background-color-default {
+  background-color: var(--brand-Icon-background-default);
+}
+
+.Icon--color-blue {
+  color: var(--brand-Icon-color-blue);
+}
+
+.Icon--background-color-blue {
+  background-color: var(--brand-Icon-background-blue);
+}
+
+.Icon--color-coral {
+  color: var(--brand-Icon-color-coral);
+}
+
+.Icon--background-color-coral {
+  background-color: var(--brand-Icon-background-coral);
+}
+
+.Icon--color-green {
+  color: var(--brand-Icon-color-green);
+}
+
+.Icon--background-color-green {
+  background-color: var(--brand-Icon-background-green);
+}
+
+.Icon--color-gray {
+  color: var(--brand-Icon-color-gray);
+}
+
+.Icon--background-color-gray {
+  background-color: var(--brand-Icon-background-gray);
+}
+
+.Icon--color-indigo {
+  color: var(--brand-Icon-color-indigo);
+}
+
+.Icon--background-color-indigo {
+  background-color: var(--brand-Icon-background-indigo);
+}
+
+.Icon--color-lemon {
+  color: var(--brand-Icon-color-lemon);
+}
+
+.Icon--background-color-lemon {
+  background-color: var(--brand-Icon-background-lemon);
+}
+
+.Icon--color-lime {
+  color: var(--brand-Icon-color-lime);
+}
+
+.Icon--background-color-lime {
+  background-color: var(--brand-Icon-background-lime);
+}
+
+.Icon--color-orange {
+  color: var(--brand-Icon-color-orange);
+}
+
+.Icon--background-color-orange {
+  background-color: var(--brand-Icon-background-orange);
+}
+
+.Icon--color-pink {
+  color: var(--brand-Icon-color-pink);
+}
+
+.Icon--background-color-pink {
+  background-color: var(--brand-Icon-background-pink);
+}
+
+.Icon--color-purple {
+  color: var(--brand-Icon-color-purple);
+}
+
+.Icon--background-color-purple {
+  background-color: var(--brand-Icon-background-purple);
+}
+
+.Icon--color-red {
+  color: var(--brand-Icon-color-red);
+}
+
+.Icon--background-color-red {
+  background-color: var(--brand-Icon-background-red);
+}
+
+.Icon--color-teal {
+  color: var(--brand-Icon-color-teal);
+}
+
+.Icon--background-color-teal {
+  background-color: var(--brand-Icon-background-teal);
+}
+
+.Icon--color-yellow {
+  color: var(--brand-Icon-color-yellow);
+}
+
+.Icon--background-color-yellow {
+  background-color: var(--brand-Icon-background-yellow);
+}

package/components/Image/Image.css

@@ -0,0 +1,54 @@
+.Image__container {
+  display: inline-block;
+}
+
+.Image {
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: inline-block;
+}
+
+.Image--aspect-ratio-custom {
+  aspect-ratio: var(--brand-image-aspectRatio);
+}
+
+.Image--aspect-ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.Image--aspect-ratio-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.Image--aspect-ratio-16-10 {
+  aspect-ratio: 16 / 10;
+}
+
+.Image--aspect-ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.Image--borderRadius-small {
+  display: block;
+  border-radius: var(--brand-borderRadius-small);
+}
+
+.Image--borderRadius-medium {
+  display: block;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.Image--borderRadius-large {
+  display: block;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.Image--borderRadius-xlarge {
+  display: block;
+  border-radius: var(--brand-borderRadius-xlarge);
+}
+
+.Image--borderRadius-full {
+  display: block;
+  border-radius: var(--brand-borderRadius-full);
+}

package/components/InlineLink/InlineLink.css

@@ -0,0 +1,30 @@
+.InlineLink {
+  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;
+}
+
+.InlineLink:hover {
+  text-decoration-thickness: var(--brand-borderWidth-thick);
+}
+
+.InlineLink,
+.InlineLink > span {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.InlineLink:active,
+.InlineLink:active > span {
+  color: var(--brand-InlineLink-color-pressed);
+}
+
+[data-color-mode='dark'] .InlineLink {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+}