@madie/madie-design-system 1.2.39 → 1.2.41

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

@@ -1,27 +1,27 @@
-@import '../functions';
+@import "../functions";
 
 // Font Sizes (in rem units)
 $font-sizes: (
-  '12': rem(12px),
-  '14': rem(14px),
-  '16': rem(16px),
-  '18': rem(18px),
-  '20': rem(20px),
-  '24': rem(24px),
-  '32': rem(32px),
-  '40': rem(40px),
-  '48': rem(48px),
+	"12": rem(12px),
+	"14": rem(14px),
+	"16": rem(16px),
+	"18": rem(18px),
+	"20": rem(20px),
+	"24": rem(24px),
+	"32": rem(32px),
+	"40": rem(40px),
+	"48": 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');
+$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;
@@ -39,7 +39,7 @@ $letter-spacing-md: 0.25;
 $letter-spacing-lg: 0.5;
 
 // Font Family
-$font-rubik: Rubik, Arial, 'Helvetica Neue', Helvetica, sans-serif;
+$font-rubik: Rubik, Arial, "Helvetica Neue", Helvetica, sans-serif;
 $font-monospace: monospace;
 
 // Font Weight
@@ -50,83 +50,83 @@ $font-medium: 500;
 // 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
-  )
+	(
+		$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;
+	// 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;
+	// 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;
+	// Letter Spacing
+	letterSpacingSM: $letter-spacing-sm;
+	letterSpacingMD: $letter-spacing-md;
+	letterSpacingLG: $letter-spacing-lg;
 
-  // Font Family
-  fontRubik: $font-rubik;
+	// Font Family
+	fontRubik: $font-rubik;
 
-  // Font Weight
-  fontRegular: $font-regular;
-  fontMedium: $font-medium;
+	// Font Weight
+	fontRegular: $font-regular;
+	fontMedium: $font-medium;
 }
 /* stylelint-enable property-case */

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

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

package/styles/qppds/utilities/_color.scss

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

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

@@ -1,83 +1,83 @@
 // stylelint-disable declaration-no-important
-@import '../settings/index.scss';
+@import "../settings/index.scss";
 
 .qpp-u-display--block {
-  display: block !important;
+	display: block !important;
 }
 
 .qpp-u-display--inline-block {
-  display: inline-block !important;
+	display: inline-block !important;
 }
 
 .qpp-u-display--inline {
-  display: inline !important;
+	display: inline !important;
 }
 
 .qpp-u-display--flex {
-  display: flex !important;
+	display: flex !important;
 }
 
 .qpp-u-display--inline-flex {
-  display: inline-flex !important;
+	display: inline-flex !important;
 }
 
 .qpp-u-display--none {
-  display: none !important;
+	display: none !important;
 }
 
 .qpp-u-visibility--hidden {
-  visibility: hidden !important;
+	visibility: hidden !important;
 }
 
 .qpp-u-visibility--visible {
-  visibility: visible !important;
+	visibility: visible !important;
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
+	$viewport: map-get($breakpoints, $breakpoint);
 
-  @media (min-width: $viewport) {
-    .qpp-u-#{$breakpoint}-display--block {
-      display: block !important;
-    }
+	@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-block {
+			display: inline-block !important;
+		}
 
-    .qpp-u-#{$breakpoint}-display--inline {
-      display: inline !important;
-    }
+		.qpp-u-#{$breakpoint}-display--inline {
+			display: inline !important;
+		}
 
-    .qpp-u-#{$breakpoint}-display--flex {
-      display: flex !important;
-    }
+		.qpp-u-#{$breakpoint}-display--flex {
+			display: flex !important;
+		}
 
-    .qpp-u-#{$breakpoint}-display--inline-flex {
-      display: inline-flex !important;
-    }
+		.qpp-u-#{$breakpoint}-display--inline-flex {
+			display: inline-flex !important;
+		}
 
-    .qpp-u-#{$breakpoint}-display--none {
-      display: none !important;
-    }
+		.qpp-u-#{$breakpoint}-display--none {
+			display: none !important;
+		}
 
-    .qpp-u-#{$breakpoint}-visibility--hidden {
-      visibility: hidden !important;
-    }
+		.qpp-u-#{$breakpoint}-visibility--hidden {
+			visibility: hidden !important;
+		}
 
-    .qpp-u-#{$breakpoint}-visibility--visible {
-      visibility: visible !important;
-    }
-  }
+		.qpp-u-#{$breakpoint}-visibility--visible {
+			visibility: visible !important;
+		}
+	}
 }
 
 .qpp-u-visually-hidden,
 .qpp-u-visually-hidden-focusable:not(:focus) {
-  @include visually-hidden;
+	@include visually-hidden;
 }
 
 @media print {
-  .qpp-u-visibility--hidden-print {
-    display: none !important;
-  }
+	.qpp-u-visibility--hidden-print {
+		display: none !important;
+	}
 }