From daf5874111abd3871d1bb63407d99ecb34415a6c Mon Sep 17 00:00:00 2001
From: mph <mhrudka@getty.edu>
Date: Wed, 4 Dec 2024 17:54:44 -0800
Subject: [PATCH] Sass migration

---
 content/_assets/styles/epub.scss      | 34 +++++-----
 content/_assets/styles/print.scss     | 94 +++++++++++++--------------
 content/_assets/styles/utilities.scss | 19 +++---
 content/_assets/styles/variables.scss | 49 +++++++-------
 4 files changed, 100 insertions(+), 96 deletions(-)

diff --git a/content/_assets/styles/epub.scss b/content/_assets/styles/epub.scss
index f044c7e..f3628a0 100755
--- a/content/_assets/styles/epub.scss
+++ b/content/_assets/styles/epub.scss
@@ -1,7 +1,7 @@
 // =============================================================================
 // Epub.scss
-@import "colors";
-@import "variables";
+@use "colors";
+@use "variables";
 
 html body {
     margin: 0;
@@ -121,7 +121,7 @@ h1, h2, h3, h4, h5, h6, dt, hr {
 }
 
 p {
-  @if $quire-page-paragraph-style == indent {
+  @if variables.$quire-page-paragraph-style == indent {
     text-indent: 1em;
   } @else {
     text-indent: 0;
@@ -156,8 +156,8 @@ a {
   text-decoration: underline;
   /* Note: KF8 will force this value unless you use "el.class a" */
   font-weight: bold;
-  color: $accent-color;
-  -webkit-text-fill-color: $accent-color;
+  color: variables.$accent-color;
+  -webkit-text-fill-color: variables.$accent-color;
   /* iBooks override (iOS 9 + El Capitan in night mode) */
   /* inherit = text color */
 }
@@ -244,7 +244,7 @@ figure {
   break-inside: avoid;
   margin: 1.5em 0;
   img {
-    background-color: $gray;
+    background-color: colors.$gray;
   }
 }
 
@@ -320,7 +320,7 @@ hr {
   margin-bottom: 1.4375em;
   height: 0;
   border: none;
-  border-top: 0.125em solid $accent-color;
+  border-top: 0.125em solid variables.$accent-color;
   /* currentColor = color of text (getting around night mode) */
   opacity: 0.5;
   /* Opacity -> grayscale. If opacity is declared for too many elements in a XHTML file, performance of legacy RMSDK takes a hit */
@@ -353,7 +353,7 @@ tbody, thead, tfoot, tr {
 
 th {
   empty-cells: show;
-  border-bottom: 0.125em solid $accent-color;
+  border-bottom: 0.125em solid variables.$accent-color;
   /* Current color = color of text (inverted in night mode) */
   padding: 0.6875em 2% 0.6875em 0;
   text-align: left;
@@ -362,7 +362,7 @@ th {
 
 td {
   empty-cells: show;
-  border-bottom: 0.0625em solid $accent-color;
+  border-bottom: 0.0625em solid variables.$accent-color;
   /* Current color = color of text (inverted in night mode) */
   padding: 0.75em 2% 0.6875em 0;
   text-align: left;
@@ -420,17 +420,17 @@ section.level1 {
   padding: 0 .25em;
   width: fit-content;
   display: table;
-  @if $theme == classic {
+  @if variables.$theme == classic {
     background-color: gray;
     color: white;
   } @else {
-    border-top: 2px solid $accent-color;
-    border-bottom: 2px solid $accent-color;
+    border-top: 2px solid variables.$accent-color;
+    border-bottom: 2px solid variables.$accent-color;
   }
 }
 
 // chapter headings
-@if $theme == classic {
+@if variables.$theme == classic {
   h1, h2, h3, h4, h5, h6 {
     font-family: Times, serif;
     font-weight: 700;
@@ -487,7 +487,7 @@ section:not(#contents) {
 a {
   font-weight: 400;
   text-decoration: none;
-  border-bottom: 1px dotted $accent-color;
+  border-bottom: 1px dotted variables.$accent-color;
   &.footnote-return,
   .footnote-ref &,
   &.footnote-backref,
@@ -501,11 +501,11 @@ a {
 figure {
   page-break-inside: avoid; 
   margin: 1em 0;
-  @if $theme == classic {
+  @if variables.$theme == classic {
     
   } @else {
-    border-top: 1px solid $accent-color;
-    border-bottom: 1px solid $accent-color;
+    border-top: 1px solid variables.$accent-color;
+    border-bottom: 1px solid variables.$accent-color;
     padding-top: .5em;
     padding-bottom: .5em;
   }
diff --git a/content/_assets/styles/print.scss b/content/_assets/styles/print.scss
index a618709..9b1a5f0 100755
--- a/content/_assets/styles/print.scss
+++ b/content/_assets/styles/print.scss
@@ -1,6 +1,6 @@
 @use "sass:math";
-@import "colors";
-@import "variables";
+@use "colors";
+@use "variables";
 
 // =============================================================================
 // Print.scss
@@ -12,16 +12,16 @@
 
 // Variables (others in the variables.scss file)
 // -----------------------------------------------------------------------------
-$print-base-text-column-width: ($print-width - $print-inner-margin - $print-outer-margin) * .7;
+$print-base-text-column-width: (variables.$print-width - variables.$print-inner-margin - variables.$print-outer-margin) * .7;
 
-@if $print-width <= 7 {
-  $print-base-text-column-width: $print-width - $print-inner-margin - $print-outer-margin;
+@if variables.$print-width <= 7 {
+  $print-base-text-column-width: variables.$print-width - variables.$print-inner-margin - variables.$print-outer-margin;
 }
 
-$print-footer-font: $quire-headings-font;
+$print-footer-font: variables.$quire-headings-font;
 $print-footer-font-size: 8pt;
 
-$print-trim: $print-bleed * 2;
+$print-trim: variables.$print-bleed * 2;
 
 
 @media print {
@@ -29,21 +29,21 @@ $print-trim: $print-bleed * 2;
 // Paged Media CSS Setup for PrinceXML
 // -----------------------------------------------------------------------------
   @page {
-    size: $print-width $print-height;
-    prince-bleed: $print-bleed;
-    bleed: $print-bleed;
+    size: variables.$print-width variables.$print-height;
+    prince-bleed: variables.$print-bleed;
+    bleed: variables.$print-bleed;
     prince-trim: $print-trim;
     marks: crop;
-    margin-top: $print-top-margin;
-    margin-bottom: $print-bottom-margin;
+    margin-top: variables.$print-top-margin;
+    margin-bottom: variables.$print-bottom-margin;
     font-family: $print-footer-font;
     font-size: $print-footer-font-size;
-    color: $print-text-color;
+    color: variables.$print-text-color;
   }
 
   @page:left {
-    margin-left: $print-outer-margin;
-    margin-right: $print-inner-margin;
+    margin-left: variables.$print-outer-margin;
+    margin-right: variables.$print-inner-margin;
 
     @bottom-right {
       content: string(sectiontitle);
@@ -64,8 +64,8 @@ $print-trim: $print-bleed * 2;
   }
 
   @page:right {
-    margin-left: $print-inner-margin;
-    margin-right: $print-outer-margin;
+    margin-left: variables.$print-inner-margin;
+    margin-right: variables.$print-outer-margin;
 
     @bottom-left {
       content: string(pagetitle);
@@ -97,14 +97,14 @@ $print-trim: $print-bleed * 2;
   }
 
   @page frontmatter-splash:left {
-    background-color: $print-splash-color;
+    background-color: variables.$print-splash-color;
     @bottom-left {
       content: counter(page, lower-roman);
     }
   }
 
   @page frontmatter-splash:right {
-    background-color: $print-splash-color;
+    background-color: variables.$print-splash-color;
     @bottom-right {
       text-align: right;
       content: counter(page, lower-roman);
@@ -112,19 +112,19 @@ $print-trim: $print-bleed * 2;
   }
 
   @page objects {
-    background-color: $print-splash-color;
+    background-color: variables.$print-splash-color;
   }
 
   @page splash {
-    background-color: $print-splash-color;
+    background-color: variables.$print-splash-color;
   }
 
   @page splash-image {
     margin-top: 0;
-    margin-bottom: -$print-bleed;
+    margin-bottom: -(variables.$print-bleed);
     margin-left: 0;
     margin-right: 0;
-    background-color: $print-splash-color;
+    background-color: variables.$print-splash-color;
     @bottom-right {
       content: none;
     }
@@ -135,7 +135,7 @@ $print-trim: $print-bleed * 2;
   }
 
   @page entry-image {
-    background-color: $print-entry-image-color;
+    background-color: variables.$print-entry-image-color;
     @bottom-right {
       content: none;
     }
@@ -147,7 +147,7 @@ $print-trim: $print-bleed * 2;
 
   @page cover {
     margin-top: 0;
-    margin-bottom: -$print-bleed;
+    margin-bottom: -(variables.$print-bleed);
     margin-left: 0;
     margin-right: 0;
     @bottom-right {
@@ -170,7 +170,7 @@ $print-trim: $print-bleed * 2;
   }
 
   @page pdf-cover-page {
-    background-color: $print-splash-color;
+    background-color: variables.$print-splash-color;
     @bottom-right {
       content: none;
     }
@@ -304,7 +304,7 @@ $print-trim: $print-bleed * 2;
 
       }
       &--full-height {
-        $print-splash-height: $print-height - $print-top-margin - $print-bottom-margin;
+        $print-splash-height: variables.$print-height - variables.$print-top-margin - variables.$print-bottom-margin;
         height: $print-splash-height;
         page: splash-image;
       }
@@ -350,7 +350,7 @@ $print-trim: $print-bleed * 2;
       }
     }
 
-    @if $print-width > 7 {
+    @if variables.$print-width > 7 {
       .quire-essay &,
       .quire-entry & {
         column-count: 2;
@@ -399,7 +399,7 @@ $print-trim: $print-bleed * 2;
 
   .quire-page__header.hero-image .hero-body {
     margin: 2.5in .5in 0;
-    @if $print-width <= 7 {
+    @if variables.$print-width <= 7 {
       width: $print-base-text-column-width;
       margin: 2.5in auto 0;
     }
@@ -410,10 +410,10 @@ $print-trim: $print-bleed * 2;
   $menu-grid-gap: .1875in;
   $menu-grid-item-margin: math.div($menu-grid-gap, 2);
 
-  $menu-grid-item-width: math.div($print-width - $print-outer-margin - $print-inner-margin - 3 * $menu-grid-gap, 3);
+  $menu-grid-item-width: math.div(variables.$print-width - variables.$print-outer-margin - variables.$print-inner-margin - 3 * $menu-grid-gap, 3);
 
-  @if $print-width <= 7 {
-    $menu-grid-item-width: math.div($print-width - $print-outer-margin - $print-inner-margin - (2 * $menu-grid-gap), 2);
+  @if variables.$print-width <= 7 {
+    $menu-grid-item-width: math.div(variables.$print-width - variables.$print-outer-margin - variables.$print-inner-margin - (2 * $menu-grid-gap), 2);
   }
 
   .quire-contents-list.grid .menu-list ol {
@@ -421,8 +421,8 @@ $print-trim: $print-bleed * 2;
       width: $menu-grid-item-width;
       height: 2.5in;
       margin-bottom: $menu-grid-gap;
-      @if $theme == modern {
-        background-color: $print-splash-color;
+      @if variables.$theme == modern {
+        background-color: variables.$print-splash-color;
         padding: 1em;
       }
       position: relative;
@@ -439,7 +439,7 @@ $print-trim: $print-bleed * 2;
         .card-content {
           padding: $menu-grid-gap 0;
           font-size: 1.25rem;
-          font-family: $quire-primary-font;
+          font-family: variables.$quire-primary-font;
         }
         img {
           max-height: 1.25in;
@@ -449,15 +449,15 @@ $print-trim: $print-bleed * 2;
     }
     .section-item {
       width: 100%;
-      border-bottom: 1px solid $print-text-color;
+      border-bottom: 1px solid variables.$print-text-color;
       margin-bottom: .25in;
     }
   }
 
 // Entry image pages
 // -----------------------------------------------------------------------------
-  $print-entry-image-height: $print-height - $print-top-margin - $print-bottom-margin;
-  $print-entry-image-width: $print-width - $print-inner-margin - $print-outer-margin;
+  $print-entry-image-height: variables.$print-height - variables.$print-top-margin - variables.$print-bottom-margin;
+  $print-entry-image-width: variables.$print-width - variables.$print-inner-margin - variables.$print-outer-margin;
 
   .quire-entry__image-wrap .q-figure {
     align-items: center;
@@ -468,7 +468,7 @@ $print-trim: $print-bleed * 2;
     justify-content: center;
     margin: 0;
     padding: 0;
-    @if $print-entry-image-display == first {
+    @if variables.$print-entry-image-display == first {
       display: none;
       &:first-child {
         display: flex;
@@ -491,17 +491,17 @@ $print-trim: $print-bleed * 2;
       }
     }
     .q-figure__caption {
-      color: $print-entry-caption-color;
+      color: variables.$print-entry-caption-color;
       font-size: .75rem;
       margin-top: .5rem;
       max-width: $print-base-text-column-width;
       &-embed-link a {
-        color: $print-entry-caption-color;
+        color: variables.$print-entry-caption-color;
         display: block;
         margin-bottom: .5rem;
       }
       .q-figure__modal-link {
-        color: $print-entry-caption-color;
+        color: variables.$print-entry-caption-color;
       }
     }
   }
@@ -594,7 +594,7 @@ $print-trim: $print-bleed * 2;
     justify-content: space-around;
     align-items: flex-end;
     text-align: right;
-    font-family: $quire-headings-font;
+    font-family: variables.$quire-headings-font;
 
     * {
       max-width: 5.5in;
@@ -603,7 +603,7 @@ $print-trim: $print-bleed * 2;
     .title {
       font-size: 4em;
       font-weight: 700;
-      color: $accent-color;
+      color: variables.$accent-color;
       line-height: 1.1;
       margin-bottom: .3em;
     }
@@ -625,14 +625,14 @@ $print-trim: $print-bleed * 2;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
-    font-family: $quire-headings-font;
+    font-family: variables.$quire-headings-font;
     font-size: 1.5em;
-    color: $accent-color;
+    color: variables.$accent-color;
     text-align: right;
   }
 
   .copyright-page {
-    color: $print-text-color;
+    color: variables.$print-text-color;
     column-count: 2;
     column-fill: auto;
     column-gap: .1875in;
diff --git a/content/_assets/styles/utilities.scss b/content/_assets/styles/utilities.scss
index eae68ec..08be677 100755
--- a/content/_assets/styles/utilities.scss
+++ b/content/_assets/styles/utilities.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 // =============================================================================
 // Utilities.scss
 // -----------------------------------------------------------------------------
@@ -48,7 +49,7 @@
 
 // Adjust text color based background
 @function background-color-text($color) {
-  @if (lightness($color) > 50) {
+  @if (color.lightness($color) > 50) {
     @return $off-black; // lighter background, return dark color
   } @else {
     @return $white; // darker background, return light color
@@ -57,7 +58,7 @@
 
 // Adjust text color based background
 @function background-color-text-classic($color) {
-  @if (lightness($color) > 50) {
+  @if (color.lightness($color) > 50) {
     @if $theme == classic {
       @return $black;
     } @else {
@@ -71,7 +72,7 @@
 // Adjust button color based background
 @function button-color($color) {
   @if $theme == classic {
-    @if (lightness($color) > 50) {
+    @if (color.lightness($color) > 50) {
       @return $off-black;
     } @else {
       @return $white;
@@ -86,20 +87,20 @@
   @if $theme == classic {
     @return $accent-color;
   } @else {
-    @if (lightness($color) > 50) {
-      @return darken($accent-color, 15%);
+    @if (color.lightness($color) > 50) {
+      @return color.adjust($accent-color, $lightness: -15%);
     } @else {
-      @return lighten($accent-color, 15%);
+      @return color.adjust($accent-color, $lightness: 15%);
     }
   }
 }
 
 // Adjust background color
 @function background-color($color) {
-  @if (lightness($color) > 50) {
-    @return darken($color, 10%); // lighter background, return dark color
+  @if (color.lightness($color) > 50) {
+    @return color.adjust($color, $lightness: -10%); // lighter background, return dark color
   } @else {
-    @return lighten($color, 10%); // darker background, return light color
+    @return color.adjust($color, $lightness: 10%); // darker background, return light color
   }
 }
 
diff --git a/content/_assets/styles/variables.scss b/content/_assets/styles/variables.scss
index 3f68e6a..6b84bde 100755
--- a/content/_assets/styles/variables.scss
+++ b/content/_assets/styles/variables.scss
@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "colors";
+
 // =============================================================================
 // Variables.scss
 // -----------------------------------------------------------------------------
@@ -34,26 +37,26 @@ $quire-page-paragraph-style: line-space; // or use indent
 
 // Cover typography
 // -----------------------------------------------------------------------------
-$quire-cover-text-color: $white;
+$quire-cover-text-color: colors.$white;
 $quire-cover-text-scale: 1; // use decimal numbers such as .8 or 1.3
 
 // Menu
 // -----------------------------------------------------------------------------
 $quire-menu-width: 352px;
 
-$quire-menu-color: $off-black;
-$quire-menu-text-color: $white;
+$quire-menu-color: colors.$off-black;
+$quire-menu-text-color: colors.$white;
 
 // Image viewer (pop-up figure viewer & entry page viewer)
 // -----------------------------------------------------------------------------
 $quire-entry-header-height: 6rem;
 
-$quire-entry-image-color: $black;
-$quire-entry-image-icons-color: $white;
+$quire-entry-image-color: colors.$black;
+$quire-entry-image-icons-color: colors.$white;
 
 // Active link and table-row color
 // -----------------------------------------------------------------------------
-$quire-hover-color: $light-yellow;
+$quire-hover-color: colors.$light-yellow;
 
 // Print/PDF stylesheet
 // -----------------------------------------------------------------------------
@@ -67,12 +70,12 @@ $print-outer-margin: 0.75in;
 $print-inner-margin: 1in;
 
 $print-base-font-size: 8.5pt;
-$print-text-color: $black;
+$print-text-color: colors.$black;
 
-$print-splash-color: $off-white;
+$print-splash-color: colors.$off-white;
 
-$print-entry-image-color: $black; // or can use $rich-black with PrinceXML
-$print-entry-caption-color: $white;
+$print-entry-image-color: colors.$black; // or can use $rich-black with PrinceXML
+$print-entry-caption-color: colors.$white;
 $print-entry-image-display: all; // first | all
 
 // Themes
@@ -89,8 +92,8 @@ $quire-navigation-font: null; // navbar and next/prev buttons
   $quire-headings-font: $times-serif !default;
   $quire-footnotes-font: $noto-sans !default;
   $quire-navigation-font: $noto-sans !default;
-  $accent-color: $blue !default;
-  $content-background-color: $white !default;
+  $accent-color: colors.$blue !default;
+  $content-background-color: colors.$white !default;
   $secondary-background-color: $content-background-color;
 } @else {
   // Modern Theme (default)
@@ -98,9 +101,9 @@ $quire-navigation-font: null; // navbar and next/prev buttons
   $quire-headings-font: $ibm-sans !default;
   $quire-footnotes-font: $noto-serif !default;
   $quire-navigation-font: $noto-sans !default;
-  $accent-color: $red !default;
-  $content-background-color: $white !default;
-  $secondary-background-color: $off-white !default;
+  $accent-color: colors.$red !default;
+  $content-background-color: colors.$white !default;
+  $secondary-background-color: colors.$off-white !default;
 }
 
 // Navbar
@@ -116,16 +119,16 @@ $quire-navbar-text-color: null;
 @if $navbar == accent {
   // Accent Navbar
   $quire-navbar-color: $accent-color !default;
-  $quire-navbar-hover-color: darken($quire-navbar-color, 5%) !default;
-  $quire-navbar-text-color: $white !default;
+  $quire-navbar-hover-color: color.adjust($quire-navbar-color, $lightness: -5%) !default;
+  $quire-navbar-text-color: colors.$white !default;
 } @else {
   // Normal Navbar (default)
-  $quire-navbar-color: $white !default;
-  $quire-navbar-hover-color: darken($quire-navbar-color, 5%) !default;
+  $quire-navbar-color: colors.$white !default;
+  $quire-navbar-hover-color: color.adjust($quire-navbar-color, $lightness: -5%) !default;
   @if $theme == classic {
-    $quire-navbar-text-color: lighten($off-black, 20%) !default;
+    $quire-navbar-text-color: color.adjust(colors.$off-black, $lightness: 20%) !default;
   } @else {
-    $quire-navbar-text-color: $off-black !default;
+    $quire-navbar-text-color: colors.$off-black !default;
   }
 }
 
@@ -137,9 +140,9 @@ $quire-cover-color-2: null;
 
 @if $theme == classic {
   $quire-cover-color-1: $accent-color !default;
-  $quire-cover-color-2: $red !default;
+  $quire-cover-color-2: colors.$red !default;
 } @else {
-  $quire-cover-color-1: $blue !default;
+  $quire-cover-color-1: colors.$blue !default;
   $quire-cover-color-2: $accent-color !default;
 }