reorganize css

assets/scss/gap.scss

@@ -1,17 +1,4 @@
 //prime-flex gap does not work for some reason, so I am adding the helpfull classes here
-$flexGaps: (
-  0: 0rem,
-  125: 0.125rem,
-  1: 0.25rem,
-  2: 0.5rem,
-  3: 1rem,
-  4: 1.5rem,
-  5: 2rem,
-  6: 3rem,
-  7: 4rem,
-  8: 5rem,
-);
-
 @each $key, $value in $flexGaps {
   .gap-#{$key} {
     gap: $value;

assets/scss/global.scss

@@ -1,10 +1,5 @@
 @import './extensions';
 
-$contentWidth: 1440px;
-$mobileBreakpoint: '<lg';
-$col-fixed-width-330: 330px;
-$col-fixed-width-316: 316px;
-
 .col-fixed-width-330 {
   width: $col-fixed-width-330;
 }
@@ -20,15 +15,6 @@ body {
   height: 100vh;
 }
 
-@mixin page-top-gradient {
-  background: linear-gradient(
-    180deg,
-    #f3f3e4 0,
-    #f3f3e4 130px,
-    rgba(255, 255, 255, 0) 720px,
-    rgba(255, 255, 255, 0) 100%
-  );
-}
 
 hr {
   border: 0;
@@ -148,3 +134,7 @@ a.mod-button.pi {
 .v-card-metadata.article-metadata .comments {
   min-width: 110px;
 }
+
+.truncate {
+  @include truncate();
+}

assets/scss/gutters.scss

@@ -1,13 +1,5 @@
 /*grid col padding*/
-$gridGutterSizes: (
-  sm: 0.25rem,
-  md: 0.5rem,
-  lg: 1rem,
-  xl: 1.5rem,
-  xxl: 2rem,
-  xxxl: 2.5rem,
-  30: 15px,
-);
+
 .grid {
   @each $size in $gridGutterSizes {
     $key: nth($size, 1);

assets/scss/mixins.scss

@@ -0,0 +1,122 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+@import '@nypublicradio/nypr-design-system-vue3/src/assets/library/include-media';
+// font config
+@mixin font-config($config-map) {
+  @each $breakpoint, $values in $config-map {
+    // @debug "breakpoint = #{$breakpoint}";
+    @if $breakpoint == "default" {
+      @each $key, $value in map.get($values, "values") {
+        #{$key}: #{$value};
+      }
+    } @else {
+      @include media("<#{$breakpoint}") {
+        //@media screen and (min-width: $breakpoint) {
+        @each $key, $value in map.get($values, "values") {
+          #{$key}: #{$value};
+        }
+      }
+    }
+  }
+}
+
+//spacing
+$spacing-base: 0.25; //  matches prime-flex
+@function spacing($y) {
+  @return calc($spacing-base * $y) + rem;
+}
+@function spacingXY($x, $y) {
+  @return calc($spacing-base * $x) + rem calc($spacing-base * $y) + rem;
+}
+@function spacingTRBL($t, $r, $b, $l) {
+  @return calc($spacing-base * $t) + rem calc($spacing-base * $r) + rem calc($spacing-base * $b) + rem
+    calc($spacing-base * $l) + rem;
+}
+
+// hex to rgb
+@function hex2rgb($hexColor) {
+  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == "number" and not unitless($number) {
+    @return math.div($number, $number * 0 + 1);
+  }
+  @return $number;
+}
+
+
+@mixin truncate() {
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  position: relative;
+  background: inherit;
+  -webkit-box-orient: vertical;
+  word-break: var(--word-break, "none");
+  overflow: hidden;
+  hyphens: auto;
+
+  // fade text's last word, if clamped ()
+  &::after {
+      content: "";
+      height: 2ch;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      //background: linear-gradient(90deg, transparent, var(--bg));
+      background: inherit; // it's easier to work with inheritance
+      mask-image: linear-gradient(to left, black, transparent);
+      transition: 0.2s;
+      width: 3em;
+  }
+  &.t2lines {
+      -webkit-line-clamp: 2;
+  }
+  &.t3lines {
+      -webkit-line-clamp: 3;
+  }
+  &.t4lines {
+      -webkit-line-clamp: 4;
+  }
+  &.t5lines {
+      -webkit-line-clamp: 5;
+  }
+  &.t6lines {
+      -webkit-line-clamp: 6;
+  }
+  &.t7lines {
+      -webkit-line-clamp: 7;
+  }
+}
+
+@mixin t2lines() {
+  -webkit-line-clamp: 2;
+}
+@mixin t3lines() {
+  -webkit-line-clamp: 3;
+}
+@mixin t4lines() {
+  -webkit-line-clamp: 4;
+}
+@mixin t5lines() {
+  -webkit-line-clamp: 5;
+}
+@mixin t6lines() {
+  -webkit-line-clamp: 6;
+}
+@mixin t7lines() {
+  -webkit-line-clamp: 7;
+}
+
+
+@mixin page-top-gradient {
+  background: linear-gradient(
+    180deg,
+    #f3f3e4 0,
+    #f3f3e4 130px,
+    rgba(255, 255, 255, 0) 720px,
+    rgba(255, 255, 255, 0) 100%
+  );
+}

assets/scss/typography.scss

@@ -0,0 +1,101 @@
+:root {
+  font-size: var(--font-size);
+}
+
+h1,
+.h1,
+.type-header1 {
+    @include font-config($type-header1);
+}
+
+h2,
+.h2,
+.type-header2 {
+    @include font-config($type-header2);
+}
+
+h3,
+.h3,
+.type-header3 {
+    @include font-config($type-header3);
+}
+
+h4,
+.h4,
+.type-header4 {
+    @include font-config($type-header4);
+}
+
+h5,
+.h5,
+.type-header5 {
+    @include font-config($type-header5);
+}
+
+h6,
+.h6,
+.type-header6 {
+    @include font-config($type-header6);
+}
+
+h7,
+.h7,
+.type-header7 {
+    @include font-config($type-header7);
+}
+
+.type-title {
+    @include font-config($type-title);
+}
+
+p,
+.p1,
+.type-paragraph1 {
+    @include font-config($type-paragraph1);
+}
+
+.p2,
+.type-paragraph2 {
+    @include font-config($type-paragraph2);
+}
+
+.p3,
+.type-paragraph3 {
+    @include font-config($type-paragraph3);
+}
+
+.type-label1 {
+    @include font-config($type-label1);
+}
+.type-label2 {
+    @include font-config($type-label2);
+}
+.type-label3 {
+    @include font-config($type-label3);
+}
+.type-link {
+    @include font-config($type-link);
+}
+.type-listlink {
+    @include font-config($type-listlink);
+}
+.type-textlink1 {
+    @include font-config($type-textlink1);
+}
+.type-textlink2 {
+    @include font-config($type-textlink2);
+}
+.type-caption {
+    @include font-config($type-caption);
+}
+.type-fineprint {
+    @include font-config($type-fineprint);
+}
+
+ul,
+ol {
+    padding-left: 1rem;
+    li {
+        @include font-config($type-paragraph1);
+    }
+}