npm - @papillonarts/css - Versions diffs - 0.5.0 → 0.7.0 - Mend

@papillonarts/css 0.5.0 → 0.7.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 (133) 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 +9 -17
package/build/primer/base/index.scss +1 -0
package/build/primer/base/kbd.scss +8 -10
package/build/primer/{color-modes/native.scss → base/native-colors.scss} +4 -2
package/build/primer/base/normalize.scss +4 -3
package/build/primer/base/typography-base.scss +4 -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/index.scss +0 -1
package/build/primer/color-modes/themes/dark.scss +1 -6
package/build/primer/color-modes/themes/dark_colorblind.scss +1 -6
package/build/primer/color-modes/themes/dark_dimmed.scss +1 -6
package/build/primer/color-modes/themes/dark_high_contrast.scss +1 -6
package/build/primer/color-modes/themes/dark_tritanopia.scss +1 -6
package/build/primer/color-modes/themes/light.scss +1 -6
package/build/primer/color-modes/themes/light_colorblind.scss +1 -6
package/build/primer/color-modes/themes/light_high_contrast.scss +1 -6
package/build/primer/color-modes/themes/light_tritanopia.scss +1 -6
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 +10 -0
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/color-modes.scss +89 -3
package/build/primer/support/mixins/layout.scss +1 -2
package/build/primer/support/mixins/misc.scss +15 -9
package/build/primer/support/mixins/typography.scss +21 -2
package/build/primer/support/variables/misc.scss +2 -2
package/build/primer/support/variables/typography.scss +2 -2
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/truncate/truncate.scss +2 -66
package/build/primer/utilities/README.md +20 -0
package/build/primer/utilities/borders.scss +30 -21
package/build/primer/utilities/box-shadow.scss +8 -6
package/build/primer/utilities/colors.scss +59 -60
package/build/primer/utilities/details.scss +2 -2
package/build/primer/utilities/flexbox.scss +2 -2
package/build/primer/utilities/layout.scss +8 -6
package/build/primer/utilities/margin.scss +2 -5
package/build/primer/utilities/padding.scss +8 -10
package/build/primer/utilities/typography.scss +12 -11
package/build/primer/utilities/visibility-display.scss +14 -12
package/package.json +2 -2

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

@@ -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;
+  }
+}

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/index.scss CHANGED Viewed

@@ -9,4 +9,3 @@
 @import './themes/dark_high_contrast.scss';
 @import './themes/dark_colorblind.scss';
 @import './themes/dark_tritanopia.scss';
-@import './native.scss';

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

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_dark.scss';
-@import '../../support/mixins/color-modes.scss';
-@include color-mode-theme(dark) {
-  @include primer-colors-dark;
-}
+@import '@primer/primitives/dist/css/functional/themes/dark';