pages-themes · san-s-on · Aug 7, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 7, 2024
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en-US" }}">
+<html lang="{{ page.lang | default: site.lang | default: "en-US" }}" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/_sass/@primer/css/alerts/flash.scss b/_sass/@primer/css/alerts/flash.scss
@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/flash';
diff --git a/_sass/@primer/css/alerts/index.scss b/_sass/@primer/css/alerts/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './flash.scss';
diff --git a/_sass/@primer/css/autocomplete/autocomplete.scss b/_sass/@primer/css/autocomplete/autocomplete.scss
@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/auto_complete';
diff --git a/_sass/@primer/css/autocomplete/index.scss b/_sass/@primer/css/autocomplete/index.scss
@@ -0,0 +1,4 @@
+// support files
+@import '../support/index.scss';
+@import './autocomplete.scss';
+@import './suggester.scss';
diff --git a/_sass/@primer/css/autocomplete/suggester.scss b/_sass/@primer/css/autocomplete/suggester.scss
@@ -0,0 +1,92 @@
+// Needs refactoring
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.suggester {
+  position: relative;
+  top: 0;
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  margin: 0;
+  margin-top: var(--base-size-24);
+  list-style: none;
+  cursor: pointer;
+  background: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+  border-radius: $border-radius;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+
+  li {
+    display: block;
+    padding: var(--base-size-4) var(--base-size-8);
+    font-weight: $font-weight-semibold;
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+    small {
+      font-weight: $font-weight-normal;
+      color: var(--fgColor-muted, var(--color-fg-muted));
+    }
+
+    &:last-child {
+      border-bottom: 0;
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    &:hover {
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      text-decoration: none;
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+
+      small {
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+
+    &[aria-selected='true'],
+    &.navigation-focus {
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      text-decoration: none;
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+
+      small {
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+  }
+}
+
+.suggester-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+
+// Responsive
+
+.page-responsive {
+  @media (max-width: $width-sm) {
+    .suggester-container {
+      right: var(--base-size-8) !important;
+      left: var(--base-size-8) !important;
+    }
+
+    .suggester li {
+      padding: var(--base-size-8) var(--base-size-16);
+    }
+  }
+}
diff --git a/_sass/@primer/css/avatars/avatar-parent-child.scss b/_sass/@primer/css/avatars/avatar-parent-child.scss
@@ -0,0 +1,17 @@
+// .avatar-parent-child is when you see a small avatar at the bottom right
+// corner of a larger avatar.
+//
+// No Styleguide version
+.avatar-parent-child {
+  position: relative;
+}
+
+.avatar-child {
+  position: absolute;
+  right: -15%;
+  bottom: -9%;
+  background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius-1;
+  box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
+}
diff --git a/_sass/@primer/css/avatars/avatar-stack.scss b/_sass/@primer/css/avatars/avatar-stack.scss
@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/avatar_stack';
diff --git a/_sass/@primer/css/avatars/avatar.scss b/_sass/@primer/css/avatars/avatar.scss
@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/avatar';
diff --git a/_sass/@primer/css/avatars/circle-badge.scss b/_sass/@primer/css/avatars/circle-badge.scss
@@ -0,0 +1,55 @@
+// Circle badge icon with drop shadow for icons and logos
+
+.CircleBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  border-radius: 50%;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+}
+
+.CircleBadge-icon {
+  max-width: 60% !important;
+  height: auto !important;
+  max-height: 55% !important;
+}
+
+// Small badge
+.CircleBadge--small {
+  width: 56px;
+  height: 56px;
+}
+
+// Medium badge
+.CircleBadge--medium {
+  width: 96px;
+  height: 96px;
+}
+
+// Large badge
+.CircleBadge--large {
+  width: 128px;
+  height: 128px;
+}
+
+// Dashed line that connects badges..
+// Wrap around 2 or more badges to create a horizonal line:
+
+.DashedConnection {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
+  }
+
+  .CircleBadge {
+    position: relative;
+  }
+}
diff --git a/_sass/@primer/css/avatars/index.scss b/_sass/@primer/css/avatars/index.scss
@@ -0,0 +1,7 @@
+@import '../support/index.scss';
+
+// Avatars
+@import './avatar.scss';
+@import './avatar-parent-child.scss';
+@import './avatar-stack.scss';
+@import './circle-badge.scss';
diff --git a/_sass/@primer/css/base/base.scss b/_sass/@primer/css/base/base.scss
@@ -0,0 +1,153 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
+* {
+  box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+body {
+  font-family: $body-font;
+  font-size: var(--body-font-size, $body-font-size);
+  line-height: $body-line-height;
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+}
+
+a {
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+label {
+  font-weight: $font-weight-bold;
+}
+
+// Custom styling for HTML5 validation bubbles (WebKit only)
+::placeholder {
+  color: var(--fgColor-muted, var(--color-fg-subtle));
+  opacity: 1; // override opacity in normalize.css
+}
+
+// Horizontal lines
+//
+// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s
+hr,
+.rule {
+  height: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  @include clearfix();
+}
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+button {
+  cursor: pointer;
+  // Remove border radius added by Chrome macOS
+  border-radius: 0;
+}
+
+// increase the selector specificity for [hidden]
+// so that it always overrides utility classes (.d-block, etc.)
+[hidden][hidden] {
+  display: none !important;
+}
+
+details {
+  summary {
+    cursor: pointer;
+  }
+}
+
+// global focus styles
+
+a,
+button,
+[role='button'],
+input[type='radio'],
+input[type='checkbox'] {
+  // 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;
+  }
+}
+
+a:not([class]),
+input[type='radio'],
+input[type='checkbox'] {
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusBoxShadowInset;
+}
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus,
+  *:focus-visible {
+    outline: solid 1px transparent;
+  }
+
+  input:not([type='radio'], [type='checkbox']),
+  textarea,
+  select {
+    &:focus,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+}
diff --git a/_sass/@primer/css/base/index.scss b/_sass/@primer/css/base/index.scss
@@ -0,0 +1,7 @@
+@import '../support/index.scss';
+@import './native-colors.scss';
+@import './normalize.scss';
+@import './base.scss';
+@import './kbd.scss';
+@import './typography-base.scss';
+@import './octicons.scss';
diff --git a/_sass/@primer/css/base/kbd.scss b/_sass/@primer/css/base/kbd.scss
@@ -0,0 +1,19 @@
+// Keyboard shortcuts
+// stylelint-disable selector-max-type
+
+kbd {
+  display: inline-block;
+  padding: var(--base-size-4);
+  font: 11px $mono-font;
+  // stylelint-disable-next-line primer/typography
+  line-height: 10px;
+  color: var(--fgColor-default, var(--color-fg-default));
+  vertical-align: middle;
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  // stylelint-disable-next-line primer/borders
+  border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  border-radius: $border-radius;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import '@primer/view-components/app/components/primer/beta/flash';