@papillonbits/css 1.4.0 → 1.6.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 MTS.
+Copyright (c) 2025 MTS.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/build/primer/autocomplete/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "autocomplete"
+generated: true
+---
+
+# Primer CSS: `autocomplete` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/autocomplete/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/autocomplete.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/autocomplete/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './suggester.scss';

package/build/primer/autocomplete/suggester.scss

@@ -0,0 +1,101 @@
+// Needs refactoring
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.suggester {
+  position: relative;
+  top: 0;
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  margin: 0;
+  margin-top: var(--base-size-24);
+  list-style: none;
+  cursor: pointer;
+  background: var(--overlay-bgColor, var(--color-canvas-overlay));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+
+  li {
+    display: block;
+    padding: var(--base-size-4) var(--base-size-8);
+    // stylelint-disable-next-line primer/typography
+    font-weight: $font-weight-semibold;
+    // stylelint-disable-next-line primer/borders, primer/colors
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+    small {
+      // stylelint-disable-next-line primer/typography
+      font-weight: $font-weight-normal;
+      color: var(--fgColor-muted, var(--color-fg-muted));
+    }
+
+    &:last-child {
+      border-bottom: 0;
+      // stylelint-disable-next-line primer/borders
+      border-bottom-right-radius: $border-radius;
+      // stylelint-disable-next-line primer/borders
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:first-child {
+      // stylelint-disable-next-line primer/borders
+      border-top-left-radius: $border-radius;
+      // stylelint-disable-next-line primer/borders
+      border-top-right-radius: $border-radius;
+    }
+
+    &:hover {
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      text-decoration: none;
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+
+      small {
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+
+    &[aria-selected='true'],
+    &.navigation-focus {
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      text-decoration: none;
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+
+      small {
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+  }
+}
+
+.suggester-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+
+// Responsive
+
+.page-responsive {
+  @media (max-width: $width-sm) {
+    .suggester-container {
+      right: var(--base-size-8) !important;
+      left: var(--base-size-8) !important;
+    }
+
+    .suggester li {
+      padding: var(--base-size-8) var(--base-size-16);
+    }
+  }
+}

package/build/primer/avatars/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "avatars"
+generated: true
+---
+
+# Primer CSS: `avatars` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/avatars/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/avatars/avatar-parent-child.scss

@@ -0,0 +1,17 @@
+// .avatar-parent-child is when you see a small avatar at the bottom right
+// corner of a larger avatar.
+//
+// No Styleguide version
+.avatar-parent-child {
+  position: relative;
+}
+
+.avatar-child {
+  position: absolute;
+  right: -15%;
+  bottom: -9%;
+  background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius-1;
+  box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
+}

package/build/primer/avatars/circle-badge.scss

@@ -0,0 +1,55 @@
+// Circle badge icon with drop shadow for icons and logos
+
+.CircleBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  border-radius: 50%;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+}
+
+.CircleBadge-icon {
+  max-width: 60% !important;
+  height: auto !important;
+  max-height: 55% !important;
+}
+
+// Small badge
+.CircleBadge--small {
+  width: 56px;
+  height: 56px;
+}
+
+// Medium badge
+.CircleBadge--medium {
+  width: 96px;
+  height: 96px;
+}
+
+// Large badge
+.CircleBadge--large {
+  width: 128px;
+  height: 128px;
+}
+
+// Dashed line that connects badges..
+// Wrap around 2 or more badges to create a horizonal line:
+
+.DashedConnection {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
+  }
+
+  .CircleBadge {
+    position: relative;
+  }
+}

package/build/primer/avatars/index.scss

@@ -0,0 +1,5 @@
+@import '../support/index.scss';
+
+// Avatars
+@import './avatar-parent-child.scss';
+@import './circle-badge.scss';

package/build/primer/base/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "base"
+generated: true
+---
+
+# Primer CSS: `base` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/base/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/base.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/base/base.scss

@@ -1,7 +1,3 @@
-@import "../support/mixins/misc.scss";
-@import "../support/variables/typography.scss";
-@import "../support/variables/misc.scss";
-
 // stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
 * {
   box-sizing: border-box;
@@ -19,6 +15,7 @@ button {
 body {
   font-family: $body-font;
   font-size: var(--body-font-size, $body-font-size);
+  font-weight: var(--base-text-weight-normal, 400);
   line-height: $body-line-height;
   color: var(--fgColor-default, var(--color-fg-default));
   background-color: var(--bgColor-default, var(--color-canvas-default));
@@ -65,7 +62,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  // stylelint-disable-next-line primer/borders
+  // stylelint-disable-next-line primer/borders, primer/colors
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include clearfix();

package/build/primer/base/kbd.scss

@@ -1,21 +1,17 @@
-@import "../support/variables/layout.scss";
-@import "../support/variables/typography.scss";
-@import "../support/variables/misc.scss";
-
 // Keyboard shortcuts
 // stylelint-disable selector-max-type
 
 kbd {
   display: inline-block;
   padding: var(--base-size-4);
-  // stylelint-disable-next-line primer/typography
+  // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
   color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
   background-color: var(--bgColor-muted, var(--color-canvas-subtle));
-  // stylelint-disable-next-line primer/borders
+  // stylelint-disable-next-line primer/borders, primer/colors
   border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
   border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
   // stylelint-disable-next-line primer/borders

package/build/primer/base/typography-base.scss

@@ -1,6 +1,3 @@
-@import "../support/variables/typography.scss";
-@import "../support/mixins/typography.scss";
-
 // Headings
 // --------------------------------------------------
 // stylelint-disable selector-max-type

package/build/primer/box/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "box"
+generated: true
+---
+
+# Primer CSS: `box` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/box/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/box.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/box/box-overlay.scss

@@ -0,0 +1,45 @@
+.Box--overlay {
+  // stylelint-disable-next-line primer/responsive-widths
+  width: 448px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  background-clip: padding-box;
+  border-color: var(--borderColor-default, var(--color-border-default));
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
+
+  .Box-header {
+    margin: 0;
+    border-width: 0;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-width: $border-width;
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: $border-radius;
+  }
+}
+
+.Box-overlay--narrow {
+  width: 320px;
+}
+
+.Box-overlay--wide {
+  // stylelint-disable-next-line primer/responsive-widths
+  width: 640px;
+}
+
+.Box-body {
+  &.scrollable-overlay {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
+
+  .help {
+    padding-top: var(--base-size-8);
+    margin: 0;
+    color: var(--fgColor-muted, var(--color-fg-muted));
+    text-align: center;
+  }
+}

package/build/primer/box/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './box-overlay.scss';

package/build/primer/branch-name/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "branch-name"
+generated: true
+---
+
+# Primer CSS: `branch-name` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/branch-name/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/branch-name.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/branch-name/branch-name.scss

@@ -0,0 +1,33 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+// A nice way to display branch names inside the UI. Can be a link or not.
+
+.branch-name {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 2px 6px;
+  // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown
+  font: 12px $mono-font;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  word-break: break-all;
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+
+  .octicon {
+    // stylelint-disable-next-line primer/spacing
+    margin: 1px -2px 0 0;
+    color: var(--fgColor-muted, var(--color-fg-muted));
+  }
+}
+
+// When a branch name is a link
+
+a.branch-name {
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+
+  .octicon {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+  }
+}

package/build/primer/branch-name/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './branch-name.scss';

package/build/primer/buttons/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "buttons"
+generated: true
+---
+
+# Primer CSS: `buttons` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/buttons/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/buttons.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/buttons/button-group.scss

@@ -0,0 +1,104 @@
+// Button group
+//
+// A button group is a series of buttons laid out next to each other, all part
+// of one visual button, but separated by rules to be separate.
+
+.BtnGroup {
+  display: inline-block;
+  vertical-align: middle;
+
+  @include clearfix();
+
+  // Proper spacing for multiple button groups (a la, gollum editor)
+  + .BtnGroup,
+  + .btn {
+    margin-left: var(--base-size-4);
+  }
+}
+
+.BtnGroup-item {
+  position: relative;
+  float: left;
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-child {
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    // stylelint-disable-next-line primer/borders
+    border-right-width: $border-width;
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &:focus,
+  &:active,
+  &:hover {
+    // stylelint-disable-next-line primer/borders
+    border-right-width: $border-width;
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+.BtnGroup-parent {
+  float: left;
+
+  &:first-child .BtnGroup-item {
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child .BtnGroup-item {
+    // stylelint-disable-next-line primer/borders
+    border-right-width: $border-width;
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-right-radius: $border-radius;
+  }
+
+  .BtnGroup-item {
+    border-right-width: 0;
+    border-radius: 0;
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &:focus,
+  &:active,
+  &:hover {
+    .BtnGroup-item {
+      // stylelint-disable-next-line primer/borders
+      border-right-width: $border-width;
+    }
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+// ensure that the focus ring sits above the adjacent buttons
+.BtnGroup-item,
+.BtnGroup-parent {
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}