jekyll-v4-theme-primer 0.9.0

data/_sass/@primer/css/utilities/colors.scss

@@ -0,0 +1,95 @@
+// stylelint-disable block-opening-brace-space-before
+
+// Foreground
+
+.color-fg-default     { color: var(--color-fg-default) !important; }
+.color-fg-muted       { color: var(--color-fg-muted) !important; }
+.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
+
+.color-fg-accent    { color: var(--color-accent-fg) !important; }
+.color-fg-success   { color: var(--color-success-fg) !important; }
+.color-fg-attention { color: var(--color-attention-fg) !important; }
+.color-fg-severe    { color: var(--color-severe-fg) !important; }
+.color-fg-danger    { color: var(--color-danger-fg) !important; }
+.color-fg-open      { color: var(--color-open-fg) !important; }
+.color-fg-closed    { color: var(--color-closed-fg) !important; }
+.color-fg-done      { color: var(--color-done-fg) !important; }
+.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
+
+.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
+
+// Background
+
+.color-bg-default  { background-color: var(--color-canvas-default) !important; }
+.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
+.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
+.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+
+.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
+.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
+
+.color-bg-success          { background-color: var(--color-success-subtle) !important; }
+.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
+
+.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
+.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
+
+.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
+.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
+
+.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
+.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
+
+.color-bg-open          { background-color: var(--color-open-subtle) !important; }
+.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+
+.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
+.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+
+.color-bg-done          { background-color: var(--color-done-subtle) !important; }
+.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
+
+.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
+.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
+
+.color-bg-transparent { background-color: transparent !important; }
+
+// Border
+
+.color-border-default { border-color: var(--color-border-default) !important; }
+.color-border-muted   { border-color: var(--color-border-muted) !important; }
+.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+
+.color-border-accent          { border-color: var(--color-accent-muted) !important; }
+.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+
+.color-border-success          { border-color: var(--color-success-muted) !important; }
+.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+
+.color-border-attention          { border-color: var(--color-attention-muted) !important; }
+.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+
+.color-border-severe          { border-color: var(--color-severe-muted) !important; }
+.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+
+.color-border-danger          { border-color: var(--color-danger-muted) !important; }
+.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+
+.color-border-open          { border-color: var(--color-open-muted) !important; }
+.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+
+.color-border-closed          { border-color: var(--color-closed-muted) !important; }
+.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+
+.color-border-done          { border-color: var(--color-done-muted) !important; }
+.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+
+.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
+.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
+
+// Misc
+
+.color-fg-inherit {
+  color: inherit !important;
+}

data/_sass/@primer/css/utilities/details.scss

@@ -0,0 +1,105 @@
+// stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
+
+.details-overlay[open] > summary::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  display: block;
+  cursor: default;
+  content: ' ';
+  background: transparent;
+}
+
+.details-overlay-dark[open] > summary::before {
+  z-index: 111;
+  background: var(--color-primer-canvas-backdrop);
+}
+
+.details-reset {
+  // Remove marker added by the display: list-item browser default
+  > summary {
+    list-style: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    // fallback :focus state
+    &:focus {
+      @include focusOutline;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutline;
+    }
+
+    &.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;
+      }
+    }
+  }
+  // Remove marker added by details polyfill
+  > summary::before {
+    display: none;
+  }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details-overlay > summary {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+
+  &.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;
+    }
+  }
+}

data/_sass/@primer/css/utilities/flexbox.scss

@@ -0,0 +1,52 @@
+// Flex utility classes
+// stylelint-disable block-opening-brace-space-before
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Flexbox classes
+    // Container
+    .flex#{$variant}-row            { flex-direction: row !important; }
+    .flex#{$variant}-row-reverse    { flex-direction: row-reverse !important; }
+    .flex#{$variant}-column         { flex-direction: column !important; }
+    .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
+
+    .flex#{$variant}-wrap             { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap           { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap-reverse     { flex-wrap: wrap-reverse !important; }
+
+    .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
+    .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
+    .flex#{$variant}-justify-center   { justify-content: center !important; }
+    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
+    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
+
+    .flex#{$variant}-items-start      { align-items: flex-start !important; }
+    .flex#{$variant}-items-end        { align-items: flex-end !important; }
+    .flex#{$variant}-items-center     { align-items: center !important; }
+    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
+    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
+
+    .flex#{$variant}-content-start    { align-content: flex-start !important; }
+    .flex#{$variant}-content-end      { align-content: flex-end !important; }
+    .flex#{$variant}-content-center   { align-content: center !important; }
+    .flex#{$variant}-content-between  { align-content: space-between !important; }
+    .flex#{$variant}-content-around   { align-content: space-around !important; }
+    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
+
+    // Item
+    .flex#{$variant}-1        { flex: 1 !important; }
+    .flex#{$variant}-auto     { flex: auto !important; }
+    .flex#{$variant}-grow-0   { flex-grow: 0 !important; }
+    .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
+
+    .flex#{$variant}-self-auto        { align-self: auto !important; }
+    .flex#{$variant}-self-start       { align-self: flex-start !important; }
+    .flex#{$variant}-self-end         { align-self: flex-end !important; }
+    .flex#{$variant}-self-center      { align-self: center !important; }
+    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
+    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
+
+    .flex#{$variant}-order-1 { order: 1 !important; }
+    .flex#{$variant}-order-2 { order: 2 !important; }
+    .flex#{$variant}-order-none { order: inherit !important; }
+  }
+}

data/_sass/@primer/css/utilities/index.scss

@@ -0,0 +1,14 @@
+@import '../support/index.scss';
+// utilities
+@import './animations.scss';
+@import './borders.scss';
+@import './box-shadow.scss';
+@import './colors.scss';
+@import './details.scss';
+@import './flexbox.scss';
+@import './layout.scss';
+@import './margin.scss';
+@import './padding.scss';
+@import './typography.scss';
+// Visibility and display should always come last in the imports so that they override other utilities with !important
+@import './visibility-display.scss';

data/_sass/@primer/css/utilities/layout.scss

@@ -0,0 +1,96 @@
+// Layout
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+
+/* Position */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $position in $responsive-positions {
+      .position#{$variant}-#{$position} {
+        position: $position !important;
+      }
+    }
+  }
+}
+
+/* Final position */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .top#{$variant}-0 { top: 0 !important; }
+    .right#{$variant}-0 { right: 0 !important; }
+    .bottom#{$variant}-0 { bottom: 0 !important; }
+    .left#{$variant}-0 { left: 0 !important; }
+    .top#{$variant}-auto { top: auto !important; }
+    .right#{$variant}-auto { right: auto !important; }
+    .bottom#{$variant}-auto { bottom: auto !important; }
+    .left#{$variant}-auto { left: auto !important; }
+  }
+}
+
+/* Vertical align middle */
+.v-align-middle      { vertical-align: middle !important; }
+/* Vertical align top */
+.v-align-top         { vertical-align: top !important; }
+/* Vertical align bottom */
+.v-align-bottom      { vertical-align: bottom !important; }
+/* Vertical align to the top of the text */
+.v-align-text-top    { vertical-align: text-top !important; }
+/* Vertical align to the bottom of the text */
+.v-align-text-bottom { vertical-align: text-bottom !important; }
+/* Vertical align to the parent's baseline */
+.v-align-baseline    { vertical-align: baseline !important; }
+
+// Overflow utilities
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $overflow in (visible, hidden, auto, scroll) {
+      .overflow#{$variant}-#{$overflow}   { overflow: $overflow !important; }
+      .overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
+      .overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
+    }
+  }
+}
+
+// Clear floats
+/* Clear floats around the element */
+.clearfix {
+  @include clearfix;
+}
+
+// Floats
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Float to the left */
+    .float#{$variant}-left  { float: left !important; }
+    /* Float to the right */
+    .float#{$variant}-right  { float: right !important; }
+    /* No float */
+    .float#{$variant}-none { float: none !important; }
+  }
+}
+
+// Width and height utilities, helpful in combination
+// with display-table utilities and images
+/* Max width 100% */
+.width-fit   { max-width: 100% !important; }
+/* Set the width to 100% */
+.width-full  { width: 100% !important; }
+/* Max height 100% */
+.height-fit  { max-height: 100% !important; }
+/* Set the height to 100% */
+.height-full { height: 100% !important; }
+
+/* Remove min-width from element */
+.min-width-0 { min-width: 0 !important; }
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+
+    // Auto variants
+    .width#{$variant}-auto { width: auto !important; }
+
+    /* Set the direction to rtl */
+    .direction#{$variant}-rtl { direction: rtl !important; }
+    /* Set the direction to ltr */
+    .direction#{$variant}-ltr { direction: ltr !important; }
+  }
+}

data/_sass/@primer/css/utilities/margin.scss

@@ -0,0 +1,71 @@
+// Margin spacer utilities
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable declaration-colon-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
+
+// Loop through the breakpoint values
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Loop through the spacer values
+    @each $scale, $size in $spacer-map-rem-extended {
+      @if ($scale < length($spacer-map-rem)) {
+        /* Set a $size margin to all sides at $breakpoint */
+        .m#{$variant}-#{$scale}  { margin: $size !important; }
+      }
+
+      /* Set a $size margin on the top at $breakpoint */
+      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
+      /* Set a $size margin on the bottom at $breakpoint */
+      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
+
+      @if ($scale < length($spacer-map-rem)) {
+        /* Set a $size margin on the right at $breakpoint */
+        .mr#{$variant}-#{$scale} { margin-right: $size !important; }
+        /* Set a $size margin on the left at $breakpoint */
+        .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+      }
+
+      @if ($size != 0) {
+        /* Set a negative $size margin on top at $breakpoint */
+        .mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; }
+        /* Set a negative $size margin on the bottom at $breakpoint */
+        .mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; }
+
+        @if ($scale < length($spacer-map-rem)) {
+          /* Set a negative $size margin on the right at $breakpoint */
+          .mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; }
+          /* Set a negative $size margin on the left at $breakpoint */
+          .ml#{$variant}-n#{$scale} { margin-left  : calc(-1 * $size) !important; }
+        }
+      }
+
+      @if ($scale < length($spacer-map-rem)) {
+        /* Set a $size margin on the left & right at $breakpoint */
+        .mx#{$variant}-#{$scale} {
+          margin-right: $size !important;
+          margin-left: $size !important;
+        }
+      }
+
+      /* Set a $size margin on the top & bottom at $breakpoint */
+      .my#{$variant}-#{$scale} {
+        margin-top: $size !important;
+        margin-bottom: $size !important;
+      }
+    }
+
+    /* responsive horizontal auto margins */
+    .mx#{$variant}-auto {
+      margin-right: auto !important;
+      margin-left: auto !important;
+    }
+  }
+}
+
+.m-auto { margin: auto !important; }
+
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }

data/_sass/@primer/css/utilities/padding.scss

@@ -0,0 +1,56 @@
+// Padding spacer utilities
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
+
+// Responsive padding spacer utilities
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Loop through the spacer values
+    @each $scale, $size in $spacer-map-rem-extended {
+      @if ($scale < length($spacer-map-rem)) {
+        /* Set a $size padding to all sides at $breakpoint */
+        .p#{$variant}-#{$scale}  { padding: $size !important; }
+      }
+
+      /* Set a $size padding to the top at $breakpoint */
+      .pt#{$variant}-#{$scale} { padding-top: $size !important; }
+      /* Set a $size padding to the right at $breakpoint */
+      .pr#{$variant}-#{$scale} { padding-right: $size !important; }
+      /* Set a $size padding to the bottom at $breakpoint */
+      .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
+      /* Set a $size padding to the left at $breakpoint */
+      .pl#{$variant}-#{$scale} { padding-left: $size !important; }
+
+      @if ($scale < length($spacer-map-rem)) {
+        /* Set a $size padding to the left & right at $breakpoint */
+        .px#{$variant}-#{$scale} {
+          padding-right: $size !important;
+          padding-left: $size !important;
+        }
+      }
+
+      /* Set a $size padding to the top & bottom at $breakpoint */
+      .py#{$variant}-#{$scale} {
+        padding-top: $size !important;
+        padding-bottom: $size !important;
+      }
+    }
+  }
+}
+
+// responsive padding for containers
+.p-responsive {
+  padding-right: var(--base-size-16, $spacer-3) !important;
+  padding-left: var(--base-size-16, $spacer-3) !important;
+
+  @include breakpoint(sm) {
+    padding-right: var(--base-size-40, $spacer-6) !important;
+    padding-left: var(--base-size-40, $spacer-6) !important;
+  }
+
+  @include breakpoint(lg) {
+    padding-right: var(--base-size-16, $spacer-3) !important;
+    padding-left: var(--base-size-16, $spacer-3) !important;
+  }
+}