@papillonarts/css 0.6.0 → 0.8.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 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,8 +1,4 @@
-@import "../support/mixins/misc.scss";
-@import "../support/variables/typography.scss";
-@import "../support/variables/misc.scss";
-
-// stylelint-disable selector-max-type, selector-no-qualifying-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
 * {
   box-sizing: border-box;
 }
@@ -19,13 +15,14 @@ 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(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 a {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-decoration: none;
 
   &:hover {
@@ -50,7 +47,7 @@ label {
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--color-fg-subtle);
+  color: var(--fgColor-muted, var(--color-fg-subtle));
   opacity: 1; // override opacity in normalize.css
 }
 
@@ -65,7 +62,8 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include clearfix();
 }
@@ -76,6 +74,7 @@ hr,
 
 table {
   border-spacing: 0;
+  // stylelint-disable-next-line primer/borders
   border-collapse: collapse;
 }
 
@@ -100,13 +99,6 @@ details {
   summary {
     cursor: pointer;
   }
-
-  &:not([open]) {
-    // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) {
-      display: none !important;
-    }
-  }
 }
 
 // global focus styles

package/build/primer/base/index.scss

@@ -1,4 +1,5 @@
 @import '../support/index.scss';
+@import './native-colors.scss';
 @import './normalize.scss';
 @import './base.scss';
 @import './kbd.scss';

package/build/primer/base/kbd.scss

@@ -1,23 +1,21 @@
-@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: ($spacer-1 - 1) ($spacer-1 + 1);
+  padding: var(--base-size-4);
+  // 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(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  // 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
-  border: $border-style $border-width var(--color-neutral-muted);
-  border-bottom-color: var(--color-neutral-muted);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
 }

package/build/primer/{color-modes/native.scss → base/native-colors.scss}

@@ -6,8 +6,8 @@
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 // Windows High Contrast mode
@@ -18,5 +18,7 @@
   body {
     --color-accent-emphasis: Highlight;
     --color-fg-on-emphasis: LinkText;
+    --fgColor-onEmphasis: LinkText;
+    --fgColor-accent: Highlight;
   }
 }

package/build/primer/base/normalize.scss

@@ -7,6 +7,7 @@
  */
 
 html {
+  font-size: 16px; /* this can be removed when all of GitHub uses rem units */
   font-family: sans-serif; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -152,8 +153,8 @@ h1 {
  */
 
 mark {
-  background-color: var(--color-attention-subtle);
-  color: var(--color-fg-default);
+  background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  color: var(--fgColor-default, var(--color-fg-default));
 }
 
 /**
@@ -225,7 +226,7 @@ samp {
  */
 
 figure {
-  margin: 1em $spacer-6;
+  margin: 1em var(--base-size-40);
 }
 
 /**

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
@@ -71,14 +68,18 @@ dd {
 tt,
 code,
 samp {
+  // stylelint-disable-next-line primer/typography
   font-family: $mono-font;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
 }
 
 pre {
   margin-top: 0;
   margin-bottom: 0;
+  // stylelint-disable-next-line primer/typography
   font-family: $mono-font;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
 }
 

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