@primer/css 0.0.0-1ea75fe → 0.0.0-202110118627

package/support/README.md

@@ -1,31 +1,25 @@
-# Primer Support
+---
+bundle: "support"
+generated: true
+---
 
-> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.
->
-> Most of the time to include these you'll only need to add `@import "support/support";` to the top of your bundle. If you want only a specific partial you can import them separately.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `support` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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-support/index.scss";
+@import "@primer/css/support/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
-## Documentation
+## Build
 
-Find further documentation at [primer.style/css/support](https://primer.style/css/support).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/support.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css/support
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/support/index.scss

@@ -1,11 +1,10 @@
 // variables
-@import "./variables/typography.scss";
-@import "./variables/colors.scss";
-@import "./variables/layout.scss";
-@import "./variables/misc.scss";
+@import './variables/typography.scss';
+@import './variables/layout.scss';
+@import './variables/misc.scss';
 
 // mixins
-@import "./mixins/typography.scss";
-@import "./mixins/layout.scss";
-@import "./mixins/buttons.scss";
-@import "./mixins/misc.scss";
+@import './mixins/color-modes.scss';
+@import './mixins/typography.scss';
+@import './mixins/layout.scss';
+@import './mixins/misc.scss';

package/support/mixins/color-modes.scss

@@ -0,0 +1,106 @@
+@mixin color-mode-theme($theme-name, $include-root: false) {
+  @if $include-root {
+    :root,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      @content;
+
+      /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
+    }
+  }
+  @else {
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+}
+
+@mixin color-mode($mode) {
+  @if $mode == light {
+    :root,
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+  @else {
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode="auto"][data-light-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+}
+
+// This mixin takes a map of color mode vars and splits them into dark and light mode
+// The goal is to reduce the amount of dark/light mode selectors compiled.
+//
+// Example input for $color-map
+//
+// @include color-variables(("custom-css-variable-1": (
+//     light: var(--color-scale-gray-3),
+//     dark: var(--color-scale-gray-5)
+//   ),
+//   "custom-css-variable-2": (
+//     light: var(--color-scale-gray-2),
+//     dark: var(--color-scale-gray-6)
+//   ),
+//   "custom-css-variable-3": (
+//     light: var(--color-scale-gray-2),
+//     dark: var(--color-scale-gray-6)
+//   )
+// ));
+@mixin color-variables($color-map) {
+  // Create map to store incoming variables
+  $dark-colors: ();
+  $light-colors: ();
+
+  @each $name, $value in $color-map {
+    @each $type, $color in $value {
+      @if $type == dark {
+        $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
+      }
+      @else {
+        $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
+      }
+    }
+  }
+
+  $mode-colors: (
+    dark: $dark-colors,
+    light: $light-colors
+  );
+
+  // Loop through sorted list
+  @each $mode, $variables in $mode-colors {
+    @include color-mode($mode) {
+      @each $prop, $val in $variables {
+        #{$prop}: $val;
+      }
+    }
+  }
+}

package/support/mixins/misc.scss

@@ -1,29 +1,26 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
+@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
   &::after,
   &::before {
     position: absolute;
     top: 11px;
     right: 100%;
-    left: -16px;
+    left: -8px;
     display: block;
-    width: 0;
-    height: 0;
+    width: 8px;
+    height: 16px;
     pointer-events: none;
     content: " ";
-    border-color: transparent;
-    border-style: solid solid outset;
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }
 
   &::after {
-    margin-top: 1px;
-    margin-left: 2px;
-    border-width: 7px;
-    border-right-color: $foreground;
+    margin-left: 1px;
+    background-color: var(--color-canvas-default);
+    background-image: linear-gradient($background, $background);
   }
 
   &::before {
-    border-width: 8px;
-    border-right-color: $background;
+    background-color: $border;
   }
 }

package/support/mixins/typography.scss

@@ -40,7 +40,7 @@
 }
 
 // Responsive heading mixins
-// There are no responsive mixins for h4—h6 because they are small
+// There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
   font-size: $h1-size-mobile;

package/support/variables/layout.scss

@@ -1,5 +1,24 @@
 // Layout variables
-// stylelint-disable declaration-bang-space-before
+
+// these are values for the display CSS property
+$display-values: (
+  block,
+  flex,
+  inline,
+  inline-block,
+  inline-flex,
+  none,
+  table,
+  table-cell
+) !default;
+
+// maps edges to respective corners for border-radius
+$edges: (
+  top: (top-left, top-right),
+  right: (top-right, bottom-right),
+  bottom: (bottom-right, bottom-left),
+  left: (bottom-left, top-left)
+) !default;
 
 // These are our margin and padding utility spacers. The default step size we
 // use is 8px. This gives us a key of:
@@ -14,7 +33,7 @@ $spacer: 8px !default;
 
 // Our spacing scale
 $spacer-0: 0 !default;                  // 0
-$spacer-1: round($spacer / 2) !default; // 4px
+$spacer-1: $spacer * 0.5 !default;      // 4px
 $spacer-2: $spacer !default;            // 8px
 $spacer-3: $spacer * 2 !default;        // 16px
 $spacer-4: $spacer * 3 !default;        // 24px
@@ -44,6 +63,38 @@ $spacer-map: (
   6: $spacer-6,
 ) !default;
 
+// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
+// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
+// 80, 96, etc.
+$spacer-7:  $spacer * 6 !default;  // 48px
+$spacer-8:  $spacer * 8 !default;  // 64px
+$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-10: $spacer * 12 !default; // 96px
+$spacer-11: $spacer * 14 !default; // 112px
+$spacer-12: $spacer * 16 !default; // 128px
+
+$spacers-large: (
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+) !default;
+
+$spacer-map-extended: map-merge(
+  (
+    0: 0,
+    1: $spacer-1,
+    2: $spacer-2,
+    3: $spacer-3,
+    4: $spacer-4,
+    5: $spacer-5,
+    6: $spacer-6,
+  ),
+  $spacers-large,
+) !default;
+
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16
 $em-spacer-2: 0.125em !default;  // 1/8
@@ -52,6 +103,20 @@ $em-spacer-4: 0.375em !default;  // 3/8
 $em-spacer-5: 0.5em !default;    // 1/2
 $em-spacer-6: 0.75em !default;   // 3/4
 
+// Size scale
+// Used for buttons, inputs, labels, avatars etc.
+$size: 16px !default;
+
+$size-0: 0 !default;
+$size-1: $size !default;           // 16px
+$size-2: $size-1 +  4px !default;  // 20px
+$size-3: $size-2 +  4px !default;  // 24px
+$size-4: $size-3 +  4px !default;  // 28px
+$size-5: $size-4 +  4px !default;  // 32px
+$size-6: $size-5 +  8px !default;  // 40px
+$size-7: $size-6 +  8px !default;  // 48px
+$size-8: $size-7 + 16px !default;  // 64px
+
 // Fixed-width container variables
 $container-width: 980px !default;
 $grid-gutter:     10px !default;
@@ -84,14 +149,6 @@ $breakpoints: (
 // This map in the form (breakpoint: variant) is used to iterate over
 // breakpoints and create both responsive and non-responsive classes in one
 // loop:
-//
-// ```scss
-// @each $breakpoint, $variant of $responsive-variants {
-//   @include breakpoint($breakpoint) {
-//     .foo#{$variant}-bar { foo: bar !important; }
-//   }
-// }
-// ```
 $responsive-variants: (
   "": "",
   sm: "-sm",
@@ -105,5 +162,43 @@ $responsive-positions: (
   static,
   relative,
   absolute,
-  fixed
+  fixed,
+  sticky
+) !default;
+
+$sidebar-width: (
+  sm: 220px,
+  md: 256px,
+  lg: 296px,
+  xl: 320px
+) !default;
+
+$sidebar-narrow-width: (
+  md: 240px,
+  lg: 256px,
+  xl: 296px
+) !default;
+
+$sidebar-wide-width: (
+  md: 296px,
+  lg: 320px,
+  xl: 344px
+) !default;
+
+$gutter: (
+  md: $spacer-3,
+  lg: $spacer-4,
+  xl: $spacer-5
+) !default;
+
+$gutter-condensed: (
+  md: $spacer-3,
+  lg: $spacer-3,
+  xl: $spacer-4
+) !default;
+
+$gutter-spacious: (
+  md: $spacer-4,
+  lg: $spacer-5,
+  xl: $spacer-6
 ) !default;

package/support/variables/misc.scss

@@ -1,40 +1,17 @@
 // Miscellaneous variables
-// stylelint-disable declaration-bang-space-before
 
-// Border size
+// Border
 $border-width: 1px !default;
-$border-color: $border-gray !default;
 $border-style: solid !default;
-$border: $border-width $border-color $border-style !default;
-$border-radius: 3px !default;
+$border: $border-width $border-style var(--color-border-default) !default;
 
-// Custom explore grid border
-$exploregrid-item-border-radius: 4px;
-
-// Box shadow
-$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
-$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
-$box-shadow-large: 0 1px 15px $black-fade-15 !default;
-$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
+// Border Radius
+$border-radius-1:  4px !default;
+$border-radius-2:  6px !default;
+$border-radius-3:  8px !default;
+$border-radius: $border-radius-2 !default;
 
 // Tooltips
 $tooltip-max-width: 250px !default;
-$tooltip-background-color: $black;
-$tooltip-text-color: $white !default;
 $tooltip-delay: 0.4s !default;
 $tooltip-duration: 0.1s !default;
-
-// Should be moved into custom github css
-$stats-switcher-py: 10px;
-// Future proof this `height` value by finding the computed line-height, then
-// adding the total value of the vertical padding. This var is used to toggle
-// between the stats bar and language breakdown.
-$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
-
-$min_tab_size: 1;
-$max_tab_size: 12;
-
-// Button and form variables
-$form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
-$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
-$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;

package/support/variables/typography.scss

@@ -1,8 +1,7 @@
 // Typography variables
-// stylelint-disable declaration-bang-space-before
 
 // Heading sizes - mobile
-// h4—h6 remain the same size on both mobile & desktop
+// h4-h6 remain the same size on both mobile & desktop
 $h00-size-mobile: 40px !default;
 $h0-size-mobile: 32px !default;
 $h1-size-mobile: 26px !default;
@@ -33,10 +32,11 @@ $lh-condensed: 1.25 !default;
 $lh-default: 1.5 !default;
 
 // Font stacks
-$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
 
 // Monospace font stack
-$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+// Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
+$mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !default;
 
 // The base body size
 $body-font-size: 14px !default;

package/table-object/README.md

@@ -1,38 +1,25 @@
-# Primer table object
+---
+bundle: "table-object"
+generated: true
+---
 
-> Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `table-object` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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-table-object/index.scss";
+@import "@primer/css/table-object/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/objects/table-object](https://primer.style/css/objects/table-object).
-
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/table-object/index.scss

@@ -1 +1 @@
-@import "./table-object.scss";
+@import './table-object.scss';

package/timeline/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "timeline"
+generated: true
+---
+
+# Primer CSS: `timeline` 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/timeline/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/timeline.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/timeline/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './timeline-item.scss';

package/timeline/timeline-item.scss

@@ -0,0 +1,95 @@
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: $spacer-3 0;
+  margin-left: $spacer-3;
+
+  // The Timeline
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 2px;
+    content: '';
+    background-color: var(--color-border-muted);
+  }
+
+  &:target .TimelineItem-badge {
+    border-color: var(--color-accent-emphasis);
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0.2em var(--color-accent-muted);
+  }
+}
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: $spacer-5;
+  height: $spacer-5;
+  margin-right: $spacer-2;
+  margin-left: -$spacer-3 + 1;
+  color: var(--color-fg-muted);
+  align-items: center;
+  background-color: var(--color-timeline-badge-bg);
+  // stylelint-disable-next-line primer/borders
+  border: 2px $border-style var(--color-canvas-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &--success {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-success-emphasis);
+    border: $border-width $border-style transparent;
+  }
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: $spacer-1;
+  color: var(--color-fg-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -($spacer-6 + $spacer-5);
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: $spacer-4;
+  margin: 0;
+  margin-bottom: -$spacer-3;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: -($spacer-6 + $spacer-3);
+  background-color: var(--color-canvas-default);
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-top: 4px $border-style var(--color-border-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: $spacer-1;
+  padding-bottom: 0;
+
+  // TimelineItem--condensed is often grouped. (commits)
+  &:last-child {
+    padding-bottom: $spacer-3;
+  }
+
+  .TimelineItem-badge {
+    height: $spacer-3;
+    margin-top: $spacer-2;
+    margin-bottom: $spacer-2;
+    color: var(--color-fg-muted);
+    background-color: var(--color-canvas-default);
+    border: 0;
+  }
+}

package/toasts/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "toasts"
+generated: true
+---
+
+# Primer CSS: `toasts` 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/toasts/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/toasts.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/toasts/index.scss

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