npm - @papillonbits/css - Versions diffs - 1.3.0 → 1.5.0 - Mend

@papillonbits/css 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/LICENSE +1 -1
package/build/primer/autocomplete/README.md +20 -0
package/build/primer/autocomplete/index.scss +3 -0
package/build/primer/autocomplete/suggester.scss +101 -0
package/build/primer/avatars/README.md +20 -0
package/build/primer/avatars/avatar-parent-child.scss +17 -0
package/build/primer/avatars/circle-badge.scss +55 -0
package/build/primer/avatars/index.scss +5 -0
package/build/primer/base/README.md +20 -0
package/build/primer/base/base.scss +2 -5
package/build/primer/base/kbd.scss +2 -6
package/build/primer/base/typography-base.scss +0 -3
package/build/primer/box/README.md +20 -0
package/build/primer/box/box-overlay.scss +45 -0
package/build/primer/box/index.scss +2 -0
package/build/primer/branch-name/README.md +20 -0
package/build/primer/branch-name/branch-name.scss +33 -0
package/build/primer/branch-name/index.scss +3 -0
package/build/primer/buttons/README.md +20 -0
package/build/primer/buttons/button-group.scss +104 -0
package/build/primer/buttons/button.scss +347 -0
package/build/primer/buttons/index.scss +4 -0
package/build/primer/buttons/misc.scss +244 -0
package/build/primer/color-modes/themes/dark.scss +1 -1
package/build/primer/color-modes/themes/dark_colorblind.scss +1 -1
package/build/primer/color-modes/themes/dark_dimmed.scss +1 -1
package/build/primer/color-modes/themes/dark_high_contrast.scss +1 -1
package/build/primer/color-modes/themes/dark_tritanopia.scss +1 -1
package/build/primer/color-modes/themes/light.scss +1 -1
package/build/primer/color-modes/themes/light_colorblind.scss +1 -1
package/build/primer/color-modes/themes/light_high_contrast.scss +1 -1
package/build/primer/color-modes/themes/light_tritanopia.scss +1 -1
package/build/primer/core/README.md +20 -0
package/build/primer/core/index.scss +18 -0
package/build/primer/docs.scss +7 -0
package/build/primer/forms/README.md +20 -0
package/build/primer/forms/form-control.scss +286 -0
package/build/primer/forms/form-group.scss +297 -0
package/build/primer/forms/form-select.scss +47 -0
package/build/primer/forms/index.scss +6 -0
package/build/primer/forms/input-group.scss +81 -0
package/build/primer/forms/radio-group.scss +68 -0
package/build/primer/header/README.md +20 -0
package/build/primer/header/header.scss +51 -0
package/build/primer/header/index.scss +2 -0
package/build/primer/index.scss +8 -3
package/build/primer/labels/README.md +20 -0
package/build/primer/labels/index.scss +3 -0
package/build/primer/labels/issue-labels.scss +26 -0
package/build/primer/labels/mixins.scss +44 -0
package/build/primer/layout/README.md +20 -0
package/build/primer/layout/app-frame.scss +156 -0
package/build/primer/layout/container.scss +30 -0
package/build/primer/layout/grid-offset.scss +19 -0
package/build/primer/layout/grid.scss +77 -0
package/build/primer/layout/index.scss +7 -0
package/build/primer/layout/page-layout.scss +417 -0
package/build/primer/layout/stack.scss +220 -0
package/build/primer/loaders/README.md +20 -0
package/build/primer/loaders/index.scss +2 -0
package/build/primer/loaders/loaders.scss +19 -0
package/build/primer/markdown/README.md +20 -0
package/build/primer/markdown/blob-csv.scss +32 -0
package/build/primer/markdown/code.scss +79 -0
package/build/primer/markdown/footnotes.scss +59 -0
package/build/primer/markdown/headings.scss +101 -0
package/build/primer/markdown/images.scss +130 -0
package/build/primer/markdown/index.scss +9 -0
package/build/primer/markdown/lists.scss +101 -0
package/build/primer/markdown/markdown-body.scss +101 -0
package/build/primer/markdown/tables.scss +46 -0
package/build/primer/marketing/README.md +20 -0
package/build/primer/marketing/buttons/button.scss +171 -0
package/build/primer/marketing/buttons/index.scss +3 -0
package/build/primer/marketing/index.scss +8 -0
package/build/primer/marketing/links/index.scss +3 -0
package/build/primer/marketing/links/link.scss +51 -0
package/build/primer/marketing/support/index.scss +2 -0
package/build/primer/marketing/support/variables.scss +140 -0
package/build/primer/marketing/type/index.scss +3 -0
package/build/primer/marketing/type/typography.scss +140 -0
package/build/primer/marketing/utilities/animations.scss +52 -0
package/build/primer/marketing/utilities/borders.scss +4 -0
package/build/primer/marketing/utilities/filters.scss +3 -0
package/build/primer/marketing/utilities/index.scss +6 -0
package/build/primer/marketing/utilities/layout.scss +58 -0
package/build/primer/navigation/README.md +20 -0
package/build/primer/navigation/filter-list.scss +86 -0
package/build/primer/navigation/index.scss +5 -0
package/build/primer/navigation/sidenav.scss +102 -0
package/build/primer/navigation/subnav.scss +154 -0
package/build/primer/pagination/README.md +20 -0
package/build/primer/pagination/index.scss +3 -0
package/build/primer/pagination/pagination.scss +157 -0
package/build/primer/primitives/index.scss +8 -19
package/build/primer/primitives/temp-typography-tokens.scss +22 -0
package/build/primer/product/README.md +20 -0
package/build/primer/product/index.scss +13 -0
package/build/primer/select-menu/README.md +20 -0
package/build/primer/select-menu/index.scss +3 -0
package/build/primer/select-menu/select-menu.scss +486 -0
package/build/primer/support/README.md +20 -0
package/build/primer/support/mixins/layout.scss +1 -1
package/build/primer/support/mixins/misc.scss +2 -0
package/build/primer/support/mixins/typography.scss +0 -2
package/build/primer/support/variables/typography.scss +1 -1
package/build/primer/table-object/index.scss +1 -0
package/build/primer/table-object/table-object.scss +23 -0
package/build/primer/toasts/README.md +20 -0
package/build/primer/toasts/index.scss +2 -0
package/build/primer/toasts/toasts.scss +129 -0
package/build/primer/tooltips/README.md +20 -0
package/build/primer/tooltips/index.scss +2 -0
package/build/primer/tooltips/tooltips.scss +228 -0
package/build/primer/utilities/README.md +20 -0
package/build/primer/utilities/borders.scss +12 -3
package/build/primer/utilities/box-shadow.scss +0 -2
package/build/primer/utilities/colors.scss +0 -1
package/build/primer/utilities/details.scss +1 -1
package/build/primer/utilities/flexbox.scss +2 -1
package/build/primer/utilities/layout.scss +2 -2
package/build/primer/utilities/margin.scss +2 -3
package/build/primer/utilities/padding.scss +2 -3
package/build/primer/utilities/typography.scss +4 -3
package/build/primer/utilities/visibility-display.scss +2 -1
package/package.json +2 -2

package/build/primer/buttons/button.scss ADDED Viewed

@@ -0,0 +1,347 @@
+// stylelint-disable selector-max-type, no-duplicate-selectors
+// Base button styles
+.btn {
+  position: relative;
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
+  font-size: $body-font-size;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px; // Specifically not inherit our `<body>` default
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border: $border-width $border-style;
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+  &:hover {
+    text-decoration: none;
+  }
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    cursor: default;
+  }
+  i {
+    font-style: normal;
+    // stylelint-disable-next-line primer/typography
+    font-weight: $font-weight-semibold;
+    opacity: 0.75;
+  }
+  .octicon {
+    margin-right: var(--base-size-4);
+    color: var(--fgColor-muted, var(--color-fg-muted));
+    vertical-align: text-bottom;
+    &:only-child {
+      margin-right: 0;
+    }
+  }
+  .Counter {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 2px;
+    color: inherit;
+    text-shadow: none;
+    vertical-align: top;
+    background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
+  }
+  .dropdown-caret {
+    margin-left: var(--base-size-4);
+    opacity: 0.8;
+  }
+}
+// Default button
+.btn {
+  color: var(--button-default-fgColor-rest, var(--color-btn-text));
+  background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
+  border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+  box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow));
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
+    border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
+    transition-duration: 0.1s;
+  }
+  &:active {
+    background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
+    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
+    transition: none;
+  }
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
+    box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
+  }
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: var(--button-default-bgColor-disabled, var(--color-btn-bg));
+    border-color: var(--button-default-borderColor-disabled, var(--color-btn-border));
+    .octicon {
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    }
+  }
+}
+// Primary button
+.btn-primary {
+  color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text));
+  background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
+  border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
+  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));
+    border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
+  }
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));
+    box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
+  }
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
+    background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));
+    border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));
+    .octicon {
+      color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
+    }
+  }
+  .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
+  }
+  .octicon {
+    color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));
+  }
+}
+// ensure links styled as button primary gets proper focus style
+// stylelint-disable-next-line selector-no-qualifying-type
+a.btn-primary {
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+}
+// Outline button
+.btn-outline {
+  color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
+  &:hover,
+  [open] > & {
+    color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
+    background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
+    border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
+    box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));
+    .Counter {
+      background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
+    }
+    .octicon {
+      color: inherit;
+    }
+  }
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
+    background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
+    border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
+    box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
+    background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+    box-shadow: none;
+    .Counter {
+      background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
+    }
+  }
+  .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
+  }
+}
+// Danger button
+.btn-danger {
+  color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
+  .octicon {
+    color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
+  }
+  &:hover,
+  [open] > & {
+    color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text));
+    background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));
+    border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border));
+    box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow));
+    .Counter {
+      background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg));
+    }
+    .octicon {
+      color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
+    }
+  }
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text));
+    background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));
+    border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));
+    box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow));
+  }
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
+    background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+    box-shadow: none;
+    .Counter {
+      background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg));
+    }
+    .octicon {
+      color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
+    }
+  }
+  .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg));
+  }
+}
+// Sizes
+//
+// Tweak `line-height` to make them smaller.
+.btn-sm {
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  .octicon {
+    vertical-align: text-top;
+  }
+}
+// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
+.btn-large {
+  // stylelint-disable-next-line primer/spacing
+  padding: $em-spacer-6 1.5em;
+  font-size: inherit;
+  // stylelint-disable-next-line primer/typography
+  line-height: $lh-default;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.5em;
+}
+// Full-width button
+//
+// These buttons expand to the full width of their parent container
+.btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}

package/build/primer/buttons/index.scss ADDED Viewed

@@ -0,0 +1,4 @@
+@import '../support/index.scss';
+@import './button.scss';
+@import './button-group.scss';
+@import './misc.scss';

package/build/primer/buttons/misc.scss ADDED Viewed

@@ -0,0 +1,244 @@
+// stylelint-disable selector-max-type
+// Link-like buttons
+//
+// This class is for styling <button> and <input> elements to look like links
+.btn-link {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+  &:hover {
+    text-decoration: underline;
+  }
+  &:disabled,
+  &[aria-disabled='true'] {
+    &,
+    &:hover {
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+      cursor: default;
+    }
+  }
+  &:not(.dropdown-item) {
+    &:focus,
+    &:focus-visible {
+      // stylelint-disable-next-line primer/borders
+      border-radius: $border-radius;
+      outline-offset: 0;
+    }
+  }
+}
+// Invisible button
+//
+// Typically used as a "cancel" button next to a .btn
+.btn-invisible {
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  background-color: transparent; // Reset default gradient backgrounds and colors
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+  box-shadow: none;
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
+    outline: none;
+    box-shadow: none;
+  }
+  &:active,
+  &.selected,
+  &[aria-selected='true'],
+  &.zeroclipboard-is-active {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+    background: none;
+    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
+    @include focusOutline;
+  }
+  &:active &.zeroclipboard-is-active {
+    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
+  }
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: transparent;
+  }
+}
+// Octicon button
+//
+// Icon-only buttons
+.btn-octicon {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 5px;
+  // stylelint-disable-next-line primer/typography
+  line-height: $lh-condensed-ultra;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  vertical-align: middle;
+  // For `<button>` elements
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  &:hover {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+  }
+  &:focus,
+  &:focus-visible {
+    // stylelint-disable-next-line primer/borders
+    border-radius: $border-radius;
+  }
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    cursor: default;
+    &:hover {
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    }
+  }
+}
+.btn-octicon-danger:hover {
+  color: var(--fgColor-danger, var(--color-danger-fg));
+}
+// Close button
+//
+// Typically used with an octicon-x
+.close-button {
+  padding: 0;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  background: transparent;
+  border: 0;
+  &:hover {
+    color: var(--fgColor-default, var(--color-fg-default));
+  }
+  &:active {
+    @include focusOutline;
+  }
+}
+// Hidden text button
+//
+// Use `.hidden-text-expander` to indicate and expand hidden text.
+.hidden-text-expander {
+  display: block;
+  &.inline {
+    position: relative;
+    // stylelint-disable-next-line primer/spacing
+    top: -1px;
+    display: inline-block;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 5px;
+    // stylelint-disable-next-line primer/typography
+    line-height: 0;
+  }
+}
+.hidden-text-expander a,
+.ellipsis-expander {
+  display: inline-block;
+  height: 12px;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 5px 5px;
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 6px;
+  color: var(--fgColor-default, var(--color-fg-default));
+  text-decoration: none;
+  vertical-align: middle;
+  background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 1px;
+  &:hover {
+    text-decoration: none;
+    background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
+  }
+  &:active {
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+  }
+}
+// Social button count
+// TODO: Deprecate? Use BtnGroup instead?
+.btn-with-count {
+  float: left;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  &:focus {
+    z-index: 1;
+  }
+}
+// Social count bubble
+//
+// A container that is used for social bubbles counts.
+.social-count {
+  position: relative;
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: var(--fgColor-default, var(--color-fg-default));
+  vertical-align: middle;
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
+  border-left: 0;
+  // stylelint-disable-next-line primer/borders
+  border-top-right-radius: $border-radius;
+  // stylelint-disable-next-line primer/borders
+  border-bottom-right-radius: $border-radius;
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+  &:hover {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+    cursor: pointer;
+  }
+}

package/build/primer/color-modes/themes/dark.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/dark~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/dark';

package/build/primer/color-modes/themes/dark_colorblind.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/dark-colorblind~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/dark-colorblind';

package/build/primer/color-modes/themes/dark_dimmed.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/dark-dimmed~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/dark-dimmed';

package/build/primer/color-modes/themes/dark_high_contrast.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/dark-high-contrast~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/dark-high-contrast';

package/build/primer/color-modes/themes/dark_tritanopia.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/dark-tritanopia~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/dark-tritanopia';

package/build/primer/color-modes/themes/light.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/light~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/light';

package/build/primer/color-modes/themes/light_colorblind.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/light-colorblind~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/light-colorblind';

package/build/primer/color-modes/themes/light_high_contrast.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/light-high-contrast~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/light-high-contrast';

package/build/primer/color-modes/themes/light_tritanopia.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import '~@primer/primitives/dist/~~internalCss~~/light-tritanopia~~.css~~';
1	+ @import '@primer/primitives/dist/css/functional/themes/light-tritanopia';

package/build/primer/core/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+---
+bundle: "core"
+generated: true
+---
+# Primer CSS: `core` 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/core/index.scss";
+```
+## Build
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/core.css`.
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/core/index.scss ADDED Viewed

@@ -0,0 +1,18 @@
+// Global requirements
+@import '../support/index.scss';
+// Color modes
+// Core modules
+@import '../base/index.scss';
+@import '../box/index.scss';
+@import '../buttons/index.scss';
+@import '../table-object/index.scss';
+@import '../forms/index.scss';
+@import '../layout/index.scss';
+@import '../navigation/index.scss';
+@import '../pagination/index.scss';
+@import '../tooltips/index.scss';
+// Utilities always go last so that they can override components
+@import '../utilities/index.scss';

package/build/primer/docs.scss ADDED Viewed

@@ -0,0 +1,7 @@
+// CSS color variables
+@import './color-modes/index.scss';
+// Global requirements
+@import './core/index.scss';
+@import './product/index.scss';
+@import './marketing/index.scss';