From 363f98df531b0fd0346283be9e6193fd8b44ee43 Mon Sep 17 00:00:00 2001
From: walsh9 <walsh9@gmail.com>
Date: Wed, 4 Sep 2024 13:38:25 -0400
Subject: [PATCH] reorganize css

---
 assets/scss/gap.scss        |  13 --
 assets/scss/global.scss     |  18 +-
 assets/scss/gutters.scss    |  10 +-
 assets/scss/mixins.scss     | 122 ++++++++++++
 assets/scss/typography.scss | 101 ++++++++++
 assets/scss/vars.scss       | 380 ++++++++++++++++++++++++++++++++++++
 nuxt.config.ts              |   4 +-
 7 files changed, 611 insertions(+), 37 deletions(-)
 create mode 100644 assets/scss/mixins.scss
 create mode 100644 assets/scss/typography.scss
 create mode 100644 assets/scss/vars.scss

diff --git a/assets/scss/gap.scss b/assets/scss/gap.scss
index 3b6dd953..ab32ba75 100644
--- a/assets/scss/gap.scss
+++ b/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;
diff --git a/assets/scss/global.scss b/assets/scss/global.scss
index c93a66af..f99137bd 100644
--- a/assets/scss/global.scss
+++ b/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();
+}
\ No newline at end of file
diff --git a/assets/scss/gutters.scss b/assets/scss/gutters.scss
index 079f54a9..d2e9afae 100644
--- a/assets/scss/gutters.scss
+++ b/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);
diff --git a/assets/scss/mixins.scss b/assets/scss/mixins.scss
new file mode 100644
index 00000000..5a555c90
--- /dev/null
+++ b/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%
+  );
+}
\ No newline at end of file
diff --git a/assets/scss/typography.scss b/assets/scss/typography.scss
new file mode 100644
index 00000000..43a3b904
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/assets/scss/vars.scss b/assets/scss/vars.scss
new file mode 100644
index 00000000..c0470836
--- /dev/null
+++ b/assets/scss/vars.scss
@@ -0,0 +1,380 @@
+@use 'sass:map';
+$contentWidth: 1440px;
+$mobileBreakpoint: '<lg';
+$col-fixed-width-330: 330px;
+$col-fixed-width-316: 316px;
+
+$gridGutterSizes: (
+  sm: 0.25rem,
+  md: 0.5rem,
+  lg: 1rem,
+  xl: 1.5rem,
+  xxl: 2rem,
+  xxxl: 2.5rem,
+  30: 15px,
+);
+
+$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,
+);
+
+$type-header1: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-19),
+            'line-height': var(--font-size-19),
+            'font-weight': var(--font-weight-600),
+            'letter-spacing': -0.02em,
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-10),
+            'line-height': var(--font-size-10),
+        ),
+    ),
+);
+$type-header2: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-17),
+            'line-height': var(--font-size-17),
+            'font-weight': var(--font-weight-600),
+            'letter-spacing': -0.02em,
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-10),
+            'line-height': var(--font-size-10),
+        ),
+    ),
+);
+$type-header3: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-14),
+            'line-height': var(--font-size-14),
+            'font-weight': var(--font-weight-600),
+            'letter-spacing': -0.02em,
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-10),
+            'line-height': var(--font-size-10),
+        ),
+    ),
+);
+$type-header4: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-12),
+            'line-height': var(--font-size-12),
+            'font-weight': var(--font-weight-600),
+            'letter-spacing': -0.02em,
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-7),
+            'line-height': var(--font-size-7),
+            'letter-spacing': -0.01em,
+        ),
+    ),
+);
+
+$type-header5: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-8),
+            'line-height': var(--font-size-9),
+            'font-weight': var(--font-weight-600),
+            'letter-spacing': -0.02em,
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-7),
+            'letter-spacing': -0.01em,
+        ),
+    ),
+);
+
+$type-header6: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-7),
+            'font-weight': var(--font-weight-600),
+            'letter-spacing': -0.02em,
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-6),
+            'letter-spacing': -0.01em,
+        ),
+    ),
+);
+
+$type-header7: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family),
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-8),
+            'font-weight': var(--font-weight-500),
+            'color': var(--text-color),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-7),
+        ),
+    ),
+);
+
+$type-title: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-7),
+            'font-weight': var(--font-weight-600),
+            'color': var(--text-color),
+            'letter-spacing': 0.05em,
+            'text-transform': uppercase,
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-3),
+            'line-height': var(--font-size-4),
+        ),
+    ),
+);
+
+$type-paragraph1: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family),
+            'font-size': var(--font-size-8),
+            'line-height': var(--font-size-12),
+            'font-weight': var(--font-weight),
+            'color': var(--black200),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-10),
+        ),
+    ),
+);
+
+$type-paragraph2: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family),
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-9),
+            'font-weight': var(--font-weight),
+            'color': var(--black200),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-8),
+        ),
+    ),
+);
+$type-paragraph3: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-9),
+            'font-weight': var(--font-weight),
+            'color': var(--black200),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-8),
+        ),
+    ),
+);
+
+$type-label1: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-10),
+            'line-height': var(--font-size-10),
+            'font-weight': var(--font-weight),
+            'color': var(--text-color),
+            'letter-spacing': -0.01em,
+            'text-transform': uppercase,
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-5),
+        ),
+    ),
+);
+
+$type-label2: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-7),
+            'line-height': var(--font-size-7),
+            'font-weight': var(--font-weight),
+            'color': var(--text-color),
+            'letter-spacing': -0.01em,
+            'text-transform': uppercase,
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-5),
+        ),
+    ),
+);
+
+$type-label3: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-6),
+            'font-weight': var(--font-weight),
+            'color': var(--text-color),
+            'letter-spacing': -0.01em,
+            'text-transform': uppercase,
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-5),
+        ),
+    ),
+);
+
+$type-link: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-5),
+            'line-height': 15.4px,
+            'font-weight': var(--font-weight-500),
+            'color': var(--text-color),
+            'text-decoration': none,
+        ),
+    ),
+);
+$type-listlink: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-7),
+            'line-height': var(--font-size-7),
+            'font-weight': var(--font-weight-500),
+            'color': var(--text-color),
+            'letter-spacing': -0.01em,
+            'text-transform': uppercase,
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': var(--font-size-6),
+            'line-height': var(--font-size-6),
+        ),
+    ),
+);
+$type-textlink1: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': var(--font-size-5),
+            'line-height': var(--font-size-6),
+            'font-weight': var(--font-weight-500),
+            'color': var(--text-color),
+            'text-decoration': underline,
+        ),
+    ),
+);
+
+$type-textlink2: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': 13px,
+            'line-height': var(--font-size-6),
+            'font-weight': var(--font-weight),
+            'color': var(--text-color),
+            'text-decoration': underline,
+        ),
+    ),
+);
+
+$type-caption: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': 13px,
+            'line-height': var(--font-size-7),
+            'font-weight': var(--font-weight),
+            'color': var(--black200),
+        ),
+    ),
+);
+
+$type-fineprint: (
+    'default': (
+        'values': (
+            'font-family': var(--font-family-header),
+            'font-size': 12px,
+            'line-height': var(--font-size-6),
+            'font-weight': var(--font-weight),
+            'color': var(--black100),
+        ),
+    ),
+    $medium: (
+        'values': (
+            'font-size': 11px,
+            'line-height': var(--font-size-5),
+        ),
+    ),
+);
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 83d2c6df..f7d0d8f9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -35,6 +35,8 @@ export default defineNuxtConfig({
   },
 
   css: [
+    'assets/scss/global.scss',
+    'assets/scss/typography.scss',
     '@nypublicradio/nypr-design-system-vue3/src/assets/themes/gothamist/fonts/fonts.css',
     '@nypublicradio/nypr-design-system-vue3/src/assets/themes/gothamist/gothamist.min.css',
     'primevue/resources/primevue.min.css',
@@ -46,7 +48,7 @@ export default defineNuxtConfig({
       preprocessorOptions: {
         scss: {
           // besure to mirror theses imports in the vitest.config.ts
-          additionalData: '@import "@nypublicradio/nypr-design-system-vue3/src/assets/themes/gothamist/breakpoints.scss"; @import "@nypublicradio/nypr-design-system-vue3/src/assets/themes/gothamist/_mixins.scss"; @import "@nypublicradio/nypr-design-system-vue3/src/assets/themes/gothamist/typography.scss"; @import "~/assets/scss/global.scss";',
+          additionalData: '@import "@nypublicradio/nypr-design-system-vue3/src/assets/themes/gothamist/breakpoints.scss"; @import "~/assets/scss/vars.scss"; @import "~/assets/scss/mixins.scss";',
           logger: {
             warn(message, options) {
               const { stderr } = process