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

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,40 @@ $responsive-positions: (
   static,
   relative,
   absolute,
-  fixed
+  fixed,
+  sticky
 ) !default;
+
+$sidebar-width: (
+  sm: 220px,
+  md: 256px,
+  lg: 296px
+) !default;
+
+$sidebar-narrow-width: (
+  md: 240px,
+  lg: 256px
+) !default;
+
+$sidebar-wide-width: (
+  lg: 320px,
+  xl: 336px
+) !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';