qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/qppds/settings/variables/_layout.scss

@@ -0,0 +1,69 @@
+// stylelint-disable length-zero-no-unit
+@use '../functions' as fns;
+
+$spacers: (
+  '0': fns.rem(0px),
+  '4': fns.rem(4px),
+  '8': fns.rem(8px),
+  '12': fns.rem(12px),
+  '16': fns.rem(16px),
+  '20': fns.rem(20px),
+  '24': fns.rem(24px),
+  '32': fns.rem(32px),
+  '40': fns.rem(40px),
+  '48': fns.rem(48px),
+  '96': fns.rem(96px),
+);
+
+$spacing-0: map-get($spacers, '0');
+$spacing-4: map-get($spacers, '4'); // deprecated
+$spacing-8: map-get($spacers, '8');
+$spacing-12: map-get($spacers, '12'); // deprecated
+$spacing-16: map-get($spacers, '16');
+$spacing-20: map-get($spacers, '20');
+$spacing-24: map-get($spacers, '24');
+$spacing-32: map-get($spacers, '32');
+$spacing-40: map-get($spacers, '40');
+$spacing-48: map-get($spacers, '48');
+$spacing-96: map-get($spacers, '96');
+
+// Breakpoint widths
+$width-xxs: 0;
+$width-xs: 544px;
+$width-sm: 768px;
+$width-md: 992px;
+$width-lg: 1200px;
+$width-xl: 1400px;
+
+// Breakpoints
+$breakpoints: (
+  xxs: $width-xxs,
+  xs: $width-xs,
+  sm: $width-sm,
+  md: $width-md,
+  lg: $width-lg,
+  xl: $width-xl,
+);
+
+// JS Variable Exports
+/* stylelint-disable property-case */
+:export {
+  // spacing variables
+  spacing0: $spacing-0;
+  spacing8: $spacing-8;
+  spacing16: $spacing-16;
+  spacing24: $spacing-24;
+  spacing32: $spacing-32;
+  spacing40: $spacing-40;
+  spacing48: $spacing-48;
+  spacing96: $spacing-96;
+
+  // breakpoints
+  breakpointXXS: $width-xxs;
+  breakpointXS: $width-xs;
+  breakpointSM: $width-sm;
+  breakpointMD: $width-md;
+  breakpointLG: $width-lg;
+  breakpointXL: $width-xl;
+}
+/* stylelint-enable property-case */

package/styles/qppds/settings/variables/_type.scss

@@ -0,0 +1,135 @@
+@use '../functions' as fns;
+
+// Font Sizes (in rem units)
+$font-sizes: (
+  '12': fns.rem(12px),
+  '14': fns.rem(14px),
+  '16': fns.rem(16px),
+  '18': fns.rem(18px),
+  '20': fns.rem(20px),
+  '24': fns.rem(24px),
+  '32': fns.rem(32px),
+  '40': fns.rem(40px),
+  '48': fns.rem(48px),
+);
+
+$font-size-12: map-get($font-sizes, '12');
+$font-size-14: map-get($font-sizes, '14');
+$font-size-16: map-get($font-sizes, '16');
+$font-size-18: map-get($font-sizes, '18');
+$font-size-20: map-get($font-sizes, '20');
+$font-size-24: map-get($font-sizes, '24');
+$font-size-32: map-get($font-sizes, '32');
+$font-size-40: map-get($font-sizes, '40');
+$font-size-48: map-get($font-sizes, '48');
+
+// Line Heights (unitless)
+$line-height-xs: 1;
+$line-height-sm: 1.125;
+$line-height-md: 1.25;
+$line-height-lg: 1.5;
+$line-height-reset: $line-height-xs;
+$line-height-base: $line-height-lg;
+$line-height-heading: $line-height-sm;
+$line-height-subheading: $line-height-md;
+
+// Letter Spacing
+$letter-spacing-sm: 0;
+$letter-spacing-md: 0.25;
+$letter-spacing-lg: 0.5;
+
+// Font Family
+$font-rubik: Rubik, Arial, 'Helvetica Neue', Helvetica, sans-serif;
+$font-public-sans: 'Public Sans Web', -apple-system, BlinkMacSystemFont,
+  'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol';
+$font-monospace: monospace;
+
+// Font Weight
+$font-regular: 400;
+$font-medium: 500;
+
+// Headings (h1 - h6)
+// Structure: (font-size(desktop), font-size(mobile), line-height(desktop), line-height(mobile), font-weight)
+// TODO: get designs for responsive heading sizes
+$headings: (
+  (
+    $font-size-48,
+    $font-size-32,
+    $line-height-heading,
+    $line-height-subheading,
+    $font-regular
+  ),
+  (
+    $font-size-32,
+    $font-size-24,
+    $line-height-subheading,
+    $line-height-subheading,
+    $font-regular
+  ),
+  (
+    $font-size-24,
+    $font-size-20,
+    $line-height-subheading,
+    $line-height-subheading,
+    $font-medium
+  ),
+  (
+    $font-size-18,
+    $font-size-16,
+    $line-height-subheading,
+    $line-height-subheading,
+    $font-medium
+  ),
+  (
+    $font-size-16,
+    $font-size-14,
+    $line-height-subheading,
+    $line-height-subheading,
+    $font-medium
+  ),
+  (
+    $font-size-14,
+    $font-size-12,
+    $line-height-subheading,
+    $line-height-subheading,
+    $font-medium
+  )
+);
+
+/* stylelint-disable property-case */
+:export {
+  // Font Sizes (in rem units)
+  fontSize12: $font-size-12;
+  fontSize14: $font-size-14;
+  fontSize16: $font-size-16;
+  fontSize18: $font-size-18;
+  fontSize20: $font-size-20;
+  fontSize24: $font-size-24;
+  fontSize32: $font-size-32;
+  fontSize40: $font-size-40;
+  fontSize48: $font-size-48;
+
+  // Line Heights (unitless)
+  lineHeightXS: $line-height-xs;
+  lineHeightSM: $line-height-sm;
+  lineHeightMD: $line-height-md;
+  lineHeightLG: $line-height-lg;
+  lineHeightReset: $line-height-reset;
+  lineHeightBase: $line-height-base;
+  lineHeightHeading: $line-height-heading;
+  lineHeightSubheading: $line-height-subheading;
+
+  // Letter Spacing
+  letterSpacingSM: $letter-spacing-sm;
+  letterSpacingMD: $letter-spacing-md;
+  letterSpacingLG: $letter-spacing-lg;
+
+  // Font Family
+  fontRubik: $font-rubik;
+
+  // Font Weight
+  fontRegular: $font-regular;
+  fontMedium: $font-medium;
+}
+/* stylelint-enable property-case */

package/styles/qppds/settings/variables/_z-index.scss

@@ -0,0 +1,8 @@
+$zIndexTopNavClosed: 1;
+$zIndexTopNavOpen: 999;
+// to further populate, thus consolidating all z-indexes
+
+:export {
+  zIndexTopNavClosed: $zIndexTopNavClosed;
+  zIndexTopNavOpen: $zIndexTopNavOpen;
+}

package/styles/qppds/utilities/_background-color.scss

@@ -0,0 +1,134 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+.qpp-u-fill--white {
+  background-color: v.$white !important;
+}
+
+.qpp-u-fill--black {
+  background-color: v.$black !important;
+}
+
+.qpp-u-fill--gray-02 {
+  background-color: v.$gray-02 !important;
+}
+
+.qpp-u-fill--gray-04 {
+  background-color: v.$gray-04 !important;
+}
+
+.qpp-u-fill--gray-10 {
+  background-color: v.$gray-10 !important;
+}
+
+.qpp-u-fill--gray-20 {
+  background-color: v.$gray-20 !important;
+}
+
+.qpp-u-fill--gray-60 {
+  background-color: v.$gray-60 !important;
+}
+
+.qpp-u-fill--gray-70 {
+  background-color: v.$gray-70 !important;
+}
+
+.qpp-u-fill--gray-80 {
+  background-color: v.$gray-80 !important;
+}
+
+.qpp-u-fill--gray-90 {
+  background-color: v.$gray-90 !important;
+}
+
+.qpp-u-fill--blue-05 {
+  background-color: v.$blue-05 !important;
+}
+
+.qpp-u-fill--blue-10 {
+  background-color: v.$blue-10 !important;
+}
+
+.qpp-u-fill--blue-30 {
+  background-color: v.$blue-30 !important;
+}
+
+.qpp-u-fill--blue-40 {
+  background-color: v.$blue-40 !important;
+}
+
+.qpp-u-fill--blue-60 {
+  background-color: v.$blue-60 !important;
+}
+
+.qpp-u-fill--blue-70 {
+  background-color: v.$blue-70 !important;
+}
+
+.qpp-u-fill--blue-80 {
+  background-color: v.$blue-80 !important;
+}
+
+.qpp-u-fill--cyan-20 {
+  background-color: v.$cyan-20 !important;
+}
+
+.qpp-u-fill--cyan-40 {
+  background-color: v.$cyan-40 !important;
+}
+
+.qpp-u-fill--cyan-50 {
+  background-color: v.$cyan-50 !important;
+}
+
+.qpp-u-fill--green-05 {
+  background-color: v.$green-05 !important;
+}
+
+.qpp-u-fill--green-30 {
+  background-color: v.$green-30 !important;
+}
+
+.qpp-u-fill--green-50 {
+  background-color: v.$green-50 !important;
+}
+
+.qpp-u-fill--gold-05 {
+  background-color: v.$gold-05 !important;
+}
+
+.qpp-u-fill--gold-20 {
+  background-color: v.$gold-20 !important;
+}
+
+.qpp-u-fill--gold-40 {
+  background-color: v.$gold-40 !important;
+}
+
+.qpp-u-fill--red-10 {
+  background-color: v.$red-10 !important;
+}
+
+.qpp-u-fill--red-50 {
+  background-color: v.$red-50 !important;
+}
+
+.qpp-u-fill--red-60 {
+  background-color: v.$red-60 !important;
+}
+
+.qpp-u-fill--cost-green {
+  background-color: v.$cost-green !important;
+}
+
+.qpp-u-fill--ia-gold {
+  background-color: v.$ia-gold !important;
+}
+
+.qpp-u-fill--pi-magenta {
+  background-color: v.$pi-magenta !important;
+}
+
+.qpp-u-fill--quality-blue {
+  background-color: v.$quality-blue !important;
+}

package/styles/qppds/utilities/_color.scss

@@ -0,0 +1,40 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+.qpp-u-color--white {
+  color: v.$white !important;
+}
+
+.qpp-u-color--black {
+  color: v.$black !important;
+}
+
+.qpp-u-color--gray-60 {
+  color: v.$gray-60 !important;
+}
+
+.qpp-u-color--gray-80 {
+  color: v.$gray-80 !important;
+}
+
+.qpp-u-color--gray-90 {
+  color: v.$gray-90 !important;
+}
+
+.qpp-u-color--blue-60 {
+  color: v.$blue-60 !important;
+}
+
+.qpp-u-color--blue-70 {
+  color: v.$blue-70 !important;
+}
+
+.qpp-u-color--red-50 {
+  color: v.$red-50 !important;
+}
+
+.qpp-u-color--red-60 {
+  color: v.$red-60 !important;
+}
+
+// TODO: determine all colors that are intended to be used for text in design

package/styles/qppds/utilities/_display-visibility.scss

@@ -0,0 +1,84 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+
+.qpp-u-display--block {
+  display: block !important;
+}
+
+.qpp-u-display--inline-block {
+  display: inline-block !important;
+}
+
+.qpp-u-display--inline {
+  display: inline !important;
+}
+
+.qpp-u-display--flex {
+  display: flex !important;
+}
+
+.qpp-u-display--inline-flex {
+  display: inline-flex !important;
+}
+
+.qpp-u-display--none {
+  display: none !important;
+}
+
+.qpp-u-visibility--hidden {
+  visibility: hidden !important;
+}
+
+.qpp-u-visibility--visible {
+  visibility: visible !important;
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    .qpp-u-#{$breakpoint}-display--block {
+      display: block !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--inline-block {
+      display: inline-block !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--inline {
+      display: inline !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--flex {
+      display: flex !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--inline-flex {
+      display: inline-flex !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--none {
+      display: none !important;
+    }
+
+    .qpp-u-#{$breakpoint}-visibility--hidden {
+      visibility: hidden !important;
+    }
+
+    .qpp-u-#{$breakpoint}-visibility--visible {
+      visibility: visible !important;
+    }
+  }
+}
+
+.qpp-u-visually-hidden,
+.qpp-u-visually-hidden-focusable:not(:focus) {
+  @include m.visually-hidden;
+}
+
+@media print {
+  .qpp-u-visibility--hidden-print {
+    display: none !important;
+  }
+}

package/styles/qppds/utilities/_flexbox.scss

@@ -0,0 +1,240 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+$_flex-direction-values: (
+  row: row,
+  column: column,
+  row-reverse: row-reverse,
+  column-reverse: column-reverse,
+);
+
+@each $name in map-keys($_flex-direction-values) {
+  $value: map-get($_flex-direction-values, $name);
+  // Example: .qpp-u-flex-direction--column
+  .qpp-u-flex-direction--#{$name} {
+    // Example: flex-direction: column
+    flex-direction: $value !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($_flex-direction-values) {
+      $value: map-get($_flex-direction-values, $name);
+      // Example: .qpp-u-lg-flex-direction--column
+      .qpp-u-#{$breakpoint}-flex-direction--#{$name} {
+        // Example: flex-direction: column
+        flex-direction: $value !important;
+      }
+    }
+  }
+}
+
+$_justify-content-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+);
+
+@each $name in map-keys($_justify-content-values) {
+  $value: map-get($_justify-content-values, $name);
+  // Example: .qpp-u-justify-content--start
+  .qpp-u-justify-content--#{$name} {
+    // Example: justify-content: flex-start
+    justify-content: $value !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($_justify-content-values) {
+      $value: map-get($_justify-content-values, $name);
+      // Example: .qpp-u-lg-justify-content--start
+      .qpp-u-#{$breakpoint}-justify-content--#{$name} {
+        // Example: justify-content: flex-start
+        justify-content: $value !important;
+      }
+    }
+  }
+}
+
+$_align-items-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@each $name in map-keys($_align-items-values) {
+  $value: map-get($_align-items-values, $name);
+  // Example: .qpp-u-align-items--start
+  .qpp-u-align-items--#{$name} {
+    // Example: align-items: flex-start
+    align-items: $value !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($_align-items-values) {
+      $value: map-get($_align-items-values, $name);
+      // Example: .qpp-u-lg-align-items--start
+      .qpp-u-#{$breakpoint}-align-items--#{$name} {
+        // Example: align-items: flex-start
+        align-items: $value !important;
+      }
+    }
+  }
+}
+
+$_flex-wrap-values: (
+  nowrap: nowrap,
+  wrap: wrap,
+  reverse: wrap-reverse,
+);
+
+@each $name in map-keys($_flex-wrap-values) {
+  $value: map-get($_flex-wrap-values, $name);
+  // Example: .qpp-u-flex-wrap--start
+  .qpp-u-flex-wrap--#{$name} {
+    // Example: flex-wrap: flex-start
+    flex-wrap: $value !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($_flex-wrap-values) {
+      $value: map-get($_flex-wrap-values, $name);
+      // Example: .qpp-u-lg-flex-wrap--start
+      .qpp-u-#{$breakpoint}-flex-wrap--#{$name} {
+        // Example: flex-wrap: flex-start
+        flex-wrap: $value !important;
+      }
+    }
+  }
+}
+
+@each $name in map-keys(v.$spacers) {
+  $value: map-get(v.$spacers, $name);
+  .qpp-u-flex-gap--#{$name} {
+    margin: -#{$value} 0 0 -#{$value};
+    width: calc(100% + #{$value});
+
+    > * {
+      padding: $value 0 0 $value;
+      width: 100%; // needed for IE11 support
+    }
+  }
+
+  .qpp-u-flex-gap-col--#{$name} {
+    margin: 0;
+    margin-left: -#{$value} !important;
+    width: calc(100% + #{$value});
+
+    > * {
+      padding: 0;
+      padding-left: $value !important;
+      width: 100%;
+    }
+  }
+
+  .qpp-u-flex-gap-row--#{$name} {
+    margin: 0;
+    margin-top: -#{$value} !important;
+
+    > * {
+      padding: 0;
+      padding-top: $value !important;
+      width: 100%;
+    }
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys(v.$spacers) {
+      $value: map-get(v.$spacers, $name);
+      // Example: .qpp-u-lg-flex-gap--12
+      .qpp-u-#{$breakpoint}-flex-gap--#{$name} {
+        margin: -#{$value} 0 0 -#{$value};
+        width: calc(100% + #{$value});
+
+        > * {
+          padding: $value 0 0 $value;
+          width: 100%;
+        }
+      }
+
+      .qpp-u-#{$breakpoint}-flex-gap-col--#{$name} {
+        margin: 0;
+        margin-left: -#{$value} !important;
+        width: calc(100% + #{$value});
+
+        > * {
+          padding: 0;
+          padding-left: $value !important;
+          width: 100%;
+        }
+      }
+
+      .qpp-u-#{$breakpoint}-flex-gap-row--#{$name} {
+        margin: 0;
+        margin-top: -#{$value} !important;
+
+        > * {
+          padding: 0;
+          padding-top: $value !important;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+$_flex-values: (
+  '1': 1,
+  'fifth': 20% 0,
+  'quarter': 25% 0,
+  'third': 33.333333333% 0,
+  'half': 50% 0,
+  'full': 100% 0,
+  'initial': initial,
+  'auto': auto,
+  'none': none,
+);
+
+@each $name in map-keys($_flex-values) {
+  $value: map-get($_flex-values, $name);
+  // Example: .qpp-u-flex--1
+  .qpp-u-flex--#{$name} {
+    flex: $value !important;
+  }
+}
+
+@each $breakpoint in map-keys(v.$breakpoints) {
+  $viewport: map-get(v.$breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($_flex-values) {
+      $value: map-get($_flex-values, $name);
+      // Example: .qpp-u-lg-flex--1
+      .qpp-u-#{$breakpoint}-flex--#{$name} {
+        flex: $value !important;
+      }
+    }
+  }
+}

package/styles/qppds/utilities/_font-family.scss

@@ -0,0 +1,10 @@
+// stylelint-disable declaration-no-important
+@use '../settings/variables' as v;
+
+.qpp-u-font--rubik {
+  font-family: v.$font-rubik !important;
+}
+
+.qpp-u-font--monospace {
+  font-family: v.$font-monospace !important;
+}