@papillonarts/css 0.1.0 → 0.2.0

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_dark_colorblind.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(dark_colorblind) {
+  @include primer-colors-dark_colorblind;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_dark_dimmed.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(dark_dimmed) {
+  @include primer-colors-dark_dimmed;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_dark_high_contrast.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(dark_high_contrast) {
+  @include primer-colors-dark_high_contrast;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(dark_tritanopia) {
+  @include primer-colors-dark_tritanopia;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_light.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(light, true) {
+  @include primer-colors-light;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_light_colorblind.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(light_colorblind) {
+  @include primer-colors-light_colorblind;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_light_high_contrast.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(light_high_contrast) {
+  @include primer-colors-light_high_contrast;
+}

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

@@ -0,0 +1,6 @@
+@import '~@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
+@import '../../support/mixins/color-modes.scss';
+
+@include color-mode-theme(light_tritanopia) {
+  @include primer-colors-light_tritanopia;
+}

package/build/primer/index.scss

@@ -0,0 +1,6 @@
+@import './color-modes/index.scss';
+@import './support/index.scss';
+@import './base/index.scss';
+@import './truncate/index.scss';
+@import './utilities/index.scss';
+

package/build/primer/support/index.scss

@@ -0,0 +1,10 @@
+// variables
+@import './variables/typography.scss';
+@import './variables/layout.scss';
+@import './variables/misc.scss';
+
+// mixins
+@import './mixins/color-modes.scss';
+@import './mixins/typography.scss';
+@import './mixins/layout.scss';
+@import './mixins/misc.scss';

package/build/primer/support/mixins/color-modes.scss

@@ -0,0 +1,111 @@
+@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 {
+        // stylelint-disable-next-line function-no-unknown
+        $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
+      }
+
+      @else {
+        // stylelint-disable-next-line function-no-unknown
+        $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/build/primer/support/mixins/layout.scss

@@ -0,0 +1,61 @@
+@import "../variables/layout.scss";
+
+// Responsive media queries
+
+@mixin breakpoint($breakpoint) {
+  @if $breakpoint == '' {
+    @content;
+  }
+
+  @else {
+    // Retrieves the value from the key
+    // stylelint-disable-next-line function-no-unknown
+    $value: map-get($breakpoints, $breakpoint);
+
+    // If the key exists in the map
+    @if $value != null {
+      // Prints a media query based on the value
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+
+    // If the key doesn't exist in the map
+    @else {
+      @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. '
+        + 'Please make sure it is defined in `$breakpoints` map.';
+    }
+  }
+}
+
+// Retina media query
+
+@mixin retina-media-query {
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-moz-min-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    @content;
+  }
+}
+
+// Clearfix
+//
+// Clears floats via mixin.
+
+@mixin clearfix {
+  &::before {
+    display: table;
+    content: '';
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/build/primer/support/mixins/misc.scss

@@ -0,0 +1,73 @@
+// Generate a two-color caret for any element.
+@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
+  &::after,
+  &::before {
+    position: absolute;
+    top: 11px;
+    right: 100%;
+    left: -8px;
+    display: block;
+    width: 8px;
+    height: 16px;
+    pointer-events: none;
+    content: ' ';
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  }
+
+  &::after {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 2px;
+    background-color: var(--color-canvas-default);
+    background-image: linear-gradient($background, $background);
+  }
+
+  &::before {
+    background-color: $border;
+  }
+}
+
+// global focus styles
+
+// inset box-shadow for form controls
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
+  border-color: var(--color-accent-fg);
+  outline: none;
+  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
+}
+
+// box-shadow for :target styles (no inset)
+// !important to override PCSS utilities
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+  outline: none !important;
+  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
+}
+
+// outline
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: none;
+}
+
+// outline with fg box-shadow for buttons
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
+
+// if min-width is undefined, return only min-height
+@mixin minTouchTarget($min-height: 32px, $min-width: '') {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: $min-height;
+  content: '';
+  transform: translateX(-50%) translateY(-50%);
+
+  @if $min-width != '' {
+    min-width: $min-width;
+  }
+}

package/build/primer/support/mixins/typography.scss

@@ -0,0 +1,93 @@
+@import "../variables/typography.scss";
+
+// Text hiding for image based text replacement.
+// Higher performance than -9999px because it only renders
+// the size of the actual text, not a full 9999px box.
+@mixin hide-text() {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+// Heading mixins for use within components
+// These match heading utilities in utilities/typography
+@mixin h1 {
+  font-size: var(--h1-size, $h1-size);
+  font-weight: $font-weight-bold;
+}
+
+@mixin h2 {
+  font-size: var(--h2-size, $h2-size);
+  font-weight: $font-weight-bold;
+}
+
+@mixin h3 {
+  font-size: var(--h3-size, $h3-size);
+  font-weight: $font-weight-bold;
+}
+
+@mixin h4 {
+  font-size: var(--h4-size, $h4-size);
+  font-weight: $font-weight-bold;
+}
+
+@mixin h5 {
+  font-size: var(--h5-size, $h5-size);
+  font-weight: $font-weight-bold;
+}
+
+@mixin h6 {
+  font-size: var(--h6-size, $h6-size);
+  font-weight: $font-weight-bold;
+}
+
+// Responsive heading mixins
+// 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: var(--h1-size-mobile, $h1-size-mobile);
+
+  // 32px on desktop
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size);
+  }
+}
+
+@mixin f2-responsive {
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
+
+  // 24px on desktop
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size);
+  }
+}
+
+@mixin f3-responsive {
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
+
+  // 20px on desktop
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size);
+  }
+}
+
+// These use the mixins from above for responsive heading sizes.
+// The following mixins can be used where it's convenient or necessary to
+// couple the responsive font-size with the font-weight.
+@mixin h1-responsive {
+  @include f1-responsive;
+
+  font-weight: $font-weight-bold;
+}
+
+@mixin h2-responsive {
+  @include f2-responsive;
+
+  font-weight: $font-weight-bold;
+}
+
+@mixin h3-responsive {
+  @include f3-responsive;
+
+  font-weight: $font-weight-bold;
+}

package/build/primer/support/variables/layout.scss

@@ -0,0 +1,230 @@
+// Layout variables
+
+// 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:
+//    0 => 0px
+//    1 => 4px
+//    2 => 8px
+//    3 => 16px
+//    4 => 24px
+//    5 => 32px
+//    6 => 40px
+$spacer: 8px !default;
+
+// Our spacing scale
+$spacer-0: 0 !default; // 0
+$spacer-1: $spacer * 0.5 !default; // 4px
+$spacer-2: $spacer !default; // 8px
+$spacer-3: $spacer * 2 !default; // 16px
+$spacer-4: $spacer * 3 !default; // 24px
+$spacer-5: $spacer * 4 !default; // 32px
+$spacer-6: $spacer * 5 !default; // 40px
+
+// The list of spacer values
+$spacers: (
+  $spacer-0,
+  $spacer-1,
+  $spacer-2,
+  $spacer-3,
+  $spacer-4,
+  $spacer-5,
+  $spacer-6,
+) !default;
+
+// And the map of spacers, for easier looping:
+// @each $scale, $length in $spacer-map { ... }
+$spacer-map: (
+  0: $spacer-0,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  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
+$em-spacer-3: 0.25em !default; // 1/4
+$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;
+
+// Breakpoint widths
+$width-xs: 0 !default;
+// Small screen / phone
+$width-sm: 544px !default;
+// Medium screen / tablet
+$width-md: 768px !default;
+// Large screen / desktop (980 + (16 * 2)) <= container + gutters
+$width-lg: 1012px !default;
+// Extra large screen / wide desktop
+$width-xl: 1280px !default;
+
+// Responsive container widths
+$container-sm: $width-sm !default;
+$container-md: $width-md !default;
+$container-lg: $width-lg !default;
+$container-xl: $width-xl !default;
+
+// Breakpoints in the form (name: length)
+$breakpoints: (
+  sm: $width-sm,
+  md: $width-md,
+  lg: $width-lg,
+  xl: $width-xl) !default;
+
+// Viewport ranges
+// Soon to be provided by Primer Primitives directly
+// https://github.com/primer/primitives/blob/main/tokens/functional/size/viewport.json
+$viewport-narrow: 'max-width: #{$width-md - 0.02px}' !default;
+$viewport-regular: 'min-width: #{$width-md}' !default;
+$viewport-wide: 'min-width: 1400px' !default;
+
+// This map in the form (breakpoint: variant) is used to iterate over
+// breakpoints and create both responsive and non-responsive classes in one
+// loop:
+$responsive-variants: (
+  '': '',
+  sm: '-sm',
+  md: '-md',
+  lg: '-lg',
+  xl: '-xl',
+) !default;
+
+// responsive utility position values
+$responsive-positions: (
+  static,
+  relative,
+  absolute,
+  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;
+
+// rem unit support
+
+$spacer-map-rem: (
+  0: 0,
+  1: var(--base-size-4, 4px),
+  2: var(--base-size-8, 8px),
+  3: var(--base-size-16, 16px),
+  4: var(--base-size-24, 24px),
+  5: var(--base-size-32, 32px),
+  6: var(--base-size-40, 40px),
+) !default;
+
+$spacers-large-rem: (
+  7: var(--base-size-48, 48px),
+  8: var(--base-size-64, 64px),
+  9: var(--base-size-80, 80px),
+  10: var(--base-size-96, 96px),
+  11: var(--base-size-112, 112px),
+  12: var(--base-size-128, 128px),
+) !default;
+
+$spacer-map-rem-extended: map-merge(
+  (0: 0,
+  1: var(--base-size-4, 4px),
+  2: var(--base-size-8, 8px),
+  3: var(--base-size-16, 16px),
+  4: var(--base-size-24, 24px),
+  5: var(--base-size-32, 32px),
+  6: var(--base-size-40, 40px),
+),
+$spacers-large-rem,
+) !default;

package/build/primer/support/variables/misc.scss

@@ -0,0 +1,18 @@
+// Miscellaneous variables
+
+// Border
+$border-width: 1px !default;
+$border-style: solid !default;
+$border: $border-width $border-style var(--color-border-default) !default;
+$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !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-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;