@rileybathurst/paddle 1.6.4 → 1.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.6.4",
+  "version": "1.7.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/paddle-moonlight-date-time.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+
+type MoonlightTourDateTime = {
+  nodes: {
+    id: React.Key;
+    date: string;
+    start: string;
+    finish: string;
+  }[];
+};
+
+const Time = ({ string }: { string?: string }) => {
+  const dateStr = new Date().toISOString().split("T")[0];
+  return new Date(`${dateStr}T${string}`).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true
+  });
+};
+
+export const PaddleMoonlightDatesTime = ({ nodes }: MoonlightTourDateTime) => (
+  <div>
+    <h3>Moonlight Tour Dates</h3>
+    <ul>
+      {nodes.map(({ id, date, start, finish }) => {
+        const hasPassed = new Date(date) < new Date();
+        const content = (
+          <>
+            {new Date(date).toLocaleDateString("en-US", {
+              timeZone: "UTC",
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+            &nbsp;-&nbsp;
+            <Time string={start} />
+            &nbsp;-&nbsp;
+            <Time string={finish} />
+          </>
+        );
+        return (
+          <li key={id}>
+            {hasPassed ? <s>{content}</s> : content}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+);

package/src/paddle-specs.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
-import PaddleRemainder from "./paddle-remainder.tsx";
+import PaddleRemainder from "./paddle-remainder";
 
 interface SpecsTypes {
   [key: string]:
-    | string
-    | number
-    | {
-        [key: string]: string | number[];
-      };
+  | string
+  | number
+  | {
+    [key: string]: string | number[];
+  };
 }
 // * moving the section tag to the parent component means you can loop yourself
 export const PaddleSpecs = (specs: SpecsTypes) =>

package/src/styles/buttons.css

@@ -14,7 +14,7 @@ button,
   margin-block-end: var(--elbrus);
   transition: var(--slow);
   display: inline-block;
-  line-height: var(--kilimanjaro);
+  line-height: 1.5;
   text-decoration: none;
   width: max-content;
   text-align: center;
@@ -243,6 +243,10 @@ menu button {
   justify-content: space-between;
   gap: var(--denali);
   width: 100%;
+
+  h3 {
+    margin-block-end: 0;
+  }
 }
 
 /*------------------------------------*/

package/src/styles/cards.css

@@ -48,31 +48,30 @@
       stroke: whitesmoke;
 
       @media (prefers-color-scheme: dark) {
-        border-color: var(--black-metal);
-        stroke: var(--black-metal);
+        border-color: var(--neutral-100);
+        stroke: var(--neutral-100);
       }
     }
 
     .cutout {
       object-fit: contain;
       place-self: center;
-      /* box-shadow: var(--umbra); */
-      z-index: 2; /* TODO: variable */
+      z-index: var(--understory);
       grid-row: 1/1;
-      filter: drop-shadow(5px 5px 5px var(--black-out));
+      filter: drop-shadow(5px 5px 5px var(--neutral-700));
       aspect-ratio: 16/9;
       width: 100%;
     }
 
     svg {
-      z-index: 1; /* TODO: variable */
+      z-index: var(--floor);
       max-height: 100%; /* overwrite the default */
       margin: calc(var(--elbrus) / 2);
       width: calc(100% - var(--elbrus));
       stroke: whitesmoke;
 
       @media (prefers-color-scheme: dark) {
-        stroke: var(--black-metal);
+        stroke: var(--neutral-100);
       }
     }
   }
@@ -90,7 +89,7 @@
   .purchase__title {
     font-size: var(--denali);
     margin-inline: var(--kosciuszko);
-    line-height: var(--aconcagua);
+    line-height: 2.5;
   }
 
   hr,
@@ -122,11 +121,11 @@
     h6 {
       font-size: clamp(var(--vinson), 1.667vw, var(--denali));
       font-weight: normal;
-      line-height: var(--everest);
+      line-height: 3;
     }
 
     button {
-      line-height: var(--denali);
+      line-height: 2;
     }
   }
 
@@ -196,7 +195,6 @@
   flex-flow: row wrap;
   gap: var(--elbrus);
   max-width: max-content;
-  /* border: 1px solid var(--tin-soldier); im not sure yet */
   margin-block-end: var(--kilimanjaro);
   padding-block: var(--kilimanjaro);
   padding-inline: var(--kosciuszko);
@@ -277,12 +275,22 @@
   box-shadow: var(--penumbra);
   color: var(--lake-600);
 
+  .book-now {
+    background-color: var(--neutral-100);
+    color: var(--lake-700);
+  }
+
   @media (prefers-color-scheme: dark) {
     background-color: var(--lake-700);
     border-color: var(--lake-600);
-    /* box-shadow: var(--penumbra--dark); */
     color: var(--lake-200);
 
+    .book-now {
+      background-color: var(--lake-400);
+      color: var(--lake-700);
+      border-color: var(--lake-500);
+    }
+
     a:not(.book-now) {
       color: var(--lake-200);
     }

package/src/styles/color.css

@@ -28,7 +28,7 @@ body:has(#storybook-root) {
 body .tahoe-city {
   @media (prefers-color-scheme: dark) {
     background-color: var(--navy-300);
-    color: var(--brilliance);
+    color: var(--neutral-100);
   }
 }
 

package/src/styles/layout.css

@@ -137,7 +137,7 @@ header {
   h2 {
     max-width: var(--vulture);
     margin-inline: auto;
-    font-size: 2rem;
+    font-size: var(--denali);
 
     a {
       display: inline-block;
@@ -150,7 +150,7 @@ header {
 }
 
 /*------------------------------------*/
-/* #BLOCK Start */
+/* #MARGIN BLOCK START */
 /* this seems like something you could do more interesting in a programatic way */
 /*------------------------------------*/
 
@@ -187,7 +187,44 @@ header {
 }
 
 /*------------------------------------*/
-/* #BLOCK END */
+/* #MARGIN BLOCK */
+/* this seems like something you could do more interesting in a programatic way */
+/*------------------------------------*/
+
+.everest-margin-block {
+  margin-block: var(--everest);
+}
+
+.aconcagua-margin-block {
+  margin-block: var(--aconcagua);
+}
+
+.denali-margin-block {
+  margin-block: var(--denali);
+}
+
+.kilimanjaro-margin-block {
+  margin-block: var(--kilimanjaro);
+}
+
+.elbrus-margin-block {
+  margin-block: var(--elbrus);
+}
+
+.vinson-margin-block {
+  margin-block: var(--vinson);
+}
+
+.kosciuszko-margin-block {
+  margin-block: var(--kosciuszko);
+}
+
+.zero-margin-block {
+  margin-block: 0;
+}
+
+/*------------------------------------*/
+/* #MARGIN BLOCK END */
 /* this seems like something you could do more interesting in a programatic way */
 /*------------------------------------*/
 
@@ -224,7 +261,44 @@ header {
 }
 
 /*------------------------------------*/
-/* #BLOCK Start */
+/* #BLOCK PADDING */
+/* this seems like something you could do more interesting in a programatic way */
+/*------------------------------------*/
+
+.everest-padding-block {
+  padding-block: var(--everest);
+}
+
+.aconcagua-padding-block {
+  padding-block: var(--aconcagua);
+}
+
+.denali-padding-block {
+  padding-block: var(--denali);
+}
+
+.kilimanjaro-padding-block {
+  padding-block: var(--kilimanjaro);
+}
+
+.elbrus-padding-block {
+  padding-block: var(--elbrus);
+}
+
+.vinson-padding-block {
+  padding-block: var(--vinson);
+}
+
+.kosciuszko-padding-block {
+  padding-block: var(--kosciuszko);
+}
+
+.zero-padding-block {
+  padding-block: 0;
+}
+
+/*------------------------------------*/
+/* #PADDING BLOCK START */
 /* this seems like something you could do more interesting in a programatic way */
 /*------------------------------------*/
 
@@ -261,7 +335,7 @@ header {
 }
 
 /*------------------------------------*/
-/* #BLOCK END */
+/* #PADDING BLOCK END */
 /* this seems like something you could do more interesting in a programatic way */
 /*------------------------------------*/
 
@@ -349,13 +423,6 @@ header {
   gap: clamp(var(--kosciuszko), 1.67vw, var(--elbrus));
   border-radius: var(--card-radius);
 
-  /* TODO: this is breaking with a phone and pushing too much location */
-  /* > * {
-    flex: 3rem 1;
-    width: 100%;
-    height: fit-content;
-  } */
-
   > svg,
   .svg {
     min-width: var(--everest);
@@ -364,11 +431,11 @@ header {
 
   .location_details {
     width: 100%;
-  }
 
-  /* p {
-    margin-block-end: 0; reset to the gap
-  } */
+    .button {
+      margin-block-end: 0; /* reset */
+    }
+  }
 
   ul {
     padding-inline-start: 0;
@@ -390,7 +457,6 @@ header {
     max-width: 100%;
   }
 
-  /* * img__wrapped */
   > * {
     border-radius: 0.25rem;
     box-shadow: var(--penumbra);
@@ -406,7 +472,7 @@ header {
     aspect-ratio: 1;
     border: none;
     box-shadow: none;
-    margin-block: 1rem;
+    margin-block: var(--vinson);
 
     img {
       border-radius: 50%;
@@ -422,7 +488,7 @@ header {
     grid-row: 2;
     aspect-ratio: 1;
     box-shadow: none;
-    margin-block: 1rem;
+    margin-block: var(--vinson);
     border-radius: 50%;
     border: 2px solid;
     width: calc(100% - 4px);
@@ -469,25 +535,25 @@ header {
 
 .spec {
   display: flex;
-  gap: 1rem;
+  gap: var(--vinson);
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: baseline;
   align-items: flex-start;
   /* addding this border has to flip the margins */
-  border-block-start: 1px solid var(--tin-soldier);
+  border-block-start: 1px solid var(--neutral-300);
   text-transform: uppercase;
 
   height: 2lh;
   margin-block-start: 1lh;
   @supports not (margin: 1lh) {
-    height: 2.5rem;
-    margin-block-start: 1.25rem;
+    height: var(--aconcagua);
+    margin-block-start: var(--elbrus);
   }
 
   h2,
   h3 {
-    line-height: 2rem;
+    line-height: 2;
     margin-block-end: 0.25rem;
   }
 
@@ -512,7 +578,7 @@ header {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
+  gap: var(--vinson);
 
   .equipment-images {
     max-width: 100%;
@@ -528,7 +594,7 @@ header {
 /* * test this in chrome, it doesnt have subgrid yet */
 .comparesheet {
   display: grid;
-  gap: 1rem;
+  gap: var(--vinson);
   grid-template-columns: 1fr 1fr;
 
   @media (min-width: 30rem) {
@@ -549,9 +615,8 @@ header {
     grid-row: 1/11;
     display: grid;
     grid-template-rows: subgrid;
-    gap: 1rem;
-    /* border-inline-end: 1px solid var(--tin-soldier); */
-    padding-inline-end: 1rem;
+    gap: var(--vinson);
+    padding-inline-end: var(--vinson);
 
     > * {
       align-self: stretch;
@@ -564,7 +629,7 @@ header {
 
     > *:nth-child(odd) {
       border-radius: 0.25rem;
-      background-color: var(--brilliance);
+      background-color: var(--neutral-100);
 
       @media (prefers-color-scheme: dark) {
         background-color: var(--navy-300);
@@ -588,7 +653,7 @@ header {
     @media (min-width: 30rem) {
       display: grid;
     }
-    padding-inline-end: 1rem;
+    padding-inline-end: var(--vinson);
     text-align: end;
   }
 
@@ -596,8 +661,8 @@ header {
     position: sticky;
     top: -1px;
     z-index: var(--understory);
-    background-color: var(--brilliance);
-    box-shadow: 0 0 0 100vmax var(--brilliance);
+    background-color: var(--neutral-100);
+    box-shadow: 0 0 0 100vmax var(--neutral-100);
     clip-path: inset(0 -100vmax);
 
     @media (prefers-color-scheme: dark) {

package/src/styles/lists.css

@@ -17,7 +17,7 @@ ol {
     display: block;
     margin-block-end: var(--baseline);
     padding-inline-start: 0;
-    line-height: var(--kilimanjaro);
+    line-height: 1.5;
   }
 }
 
@@ -67,7 +67,7 @@ ol {
 .tour__minimum {
   display: flex;
   flex-flow: row wrap;
-  gap: 1rem;
+  gap: var(--vinson);
   align-items: baseline;
   justify-content: space-between;
 }
@@ -78,7 +78,7 @@ ol {
 
 .features {
   text-transform: uppercase;
-  font-size: 1rem;
+  font-size: var(--vinson);
 
   ul {
     list-style: none;
@@ -89,8 +89,8 @@ ol {
       margin-block-end: 1lh;
 
       @supports not (margin: 1lh) {
-        height: 2.5rem;
-        margin-block-end: 1.25rem;
+        height: var(--aconcagua);
+        margin-block-end: var(--elbrus);
       }
     }
 
@@ -110,8 +110,8 @@ ol {
 
   li {
     list-style: none;
-    border-bottom: 1px solid var(--tin-soldier);
-    margin-block-end: 1.5rem;
+    border-bottom: 1px solid var(--neutral-300);
+    margin-block-end: var(--kilimanjaro);
   }
 
   li:last-child {
@@ -120,14 +120,14 @@ ol {
 
   /* question */
   h2 {
-    font-size: 1.25rem;
+    font-size: var(--elbrus);
     line-height: 1.875rem;
     margin-block-end: 0.625rem;
   }
 
   /* answer */
   h3 {
-    font-size: 1rem;
+    font-size: var(--vinson);
     line-height: 1.25;
     font-weight: normal;
     margin-block-end: 0.625rem;
@@ -177,7 +177,7 @@ ol {
       transition: var(--fade);
       margin-block: var(--baseline);
       margin-inline: auto;
-      min-width: 3rem; /* guess and check */
+      min-width: var(--everest); /* guess and check */
 
       @media (min-width: 20rem) {
         min-width: 4rem; /* guess and check */

package/src/styles/nav.css

@@ -13,9 +13,9 @@ header {
   margin-block-end: 0;
   transform: translate3D(0, 0, 0); /* I need this to hide things */
   line-height: 1.5;
-  height: 2rem;
+  height: var(--denali);
   overflow: hidden;
-  z-index: 1; /* TODO: variable */
+  z-index: var(--floor);
   position: relative;
   /* width: calc(100% - 1rem); */
   width: 100%;
@@ -34,17 +34,17 @@ header {
 
 .spinning-button {
   position: fixed; /* I never like these things but it's needed here */
-  height: 1rem;
-  line-height: 2rem;
+  height: var(--vinson);
+  line-height: 2;
   transition: 2s ease;
   margin-block-start: -1rem; /* I dont know why I have to add this something about defaults probably */
 }
 
 nav {
-  margin: 1.5rem;
+  margin: var(--kilimanjaro);
   margin-block-start: 0; /* testing slide menu */
   transition: 2s ease;
-  padding-inline-start: 1.5rem;
+  padding-inline-start: var(--kilimanjaro);
 
   @media (min-width: 40rem) {
     max-width: var(--pelican);
@@ -56,8 +56,8 @@ nav {
     flex-flow: row wrap;
     justify-content: space-between;
     margin-block: 0; /* testing slide menu */
-    padding-block-start: 1.25rem;
-    padding-block-start: calc(var(--elbrus) / 2);
+    padding-block-start: calc(var(--elbrus) / 2); /* 1.25/2= 0.625 */
+    /* TODO: check if this can be kosciuszko */
     list-style: none;
     padding-inline-start: 0;
     align-items: baseline;
@@ -106,13 +106,11 @@ nav {
     }
 
     li:first-child {
-      margin-block-start: 1.5rem;
-      margin-block-start: calc(var(--elbrus) / 2);
       margin-block-start: 0;
     }
 
     li:last-child {
-      margin-block-end: 1.5rem;
+      margin-block-end: var(--kilimanjaro);
     }
 
     .book-now {

package/src/styles/panels.css

@@ -53,6 +53,12 @@
   }
 }
 
+.tahoe-city {
+  .cloud {
+    background-color: var(--sand-100);
+  }
+}
+
 .south-tahoe {
   .cloud {
     background-color: var(--cloud-background-color);

package/src/styles/tables.css

@@ -23,7 +23,7 @@
     /* * be careful of this it can break the footer flex */
     font-size: var(--kosciuszko);
 
-    line-height: var(--denali);
+    line-height: 2;
     min-height: var(--denali); /* always keep a line */
     padding: clamp(0.5rem, 1vw, var(--vinson));
     border-bottom: 0.5px solid var(--neutral-400);

package/src/styles/typography.css

@@ -5,7 +5,7 @@
 body {
   font-family: var(--body_font); /* Google font */
   font-size: 16px;
-  line-height: 1.25rem; /* 20px */
+  line-height: 1.25; /* 20px */
 }
 
 h1,
@@ -21,6 +21,7 @@ h4,
 h5,
 h6 {
   margin-block-start: 0; /* reset */
+  line-height: 1.5;
 }
 
 h3,
@@ -33,86 +34,48 @@ h6 {
 h1,
 .everest {
   margin-top: 0; /* browser reset */
-  font-size: 3rem; /* 48px */
-  line-height: 3.75rem; /* 60px */
-  margin-bottom: 2.5rem; /* 40px */
-  /* single line 100px */
-  /* two lines 160px */
-  /* multi lines + 60px each */
+  font-size: var(--everest); /* 48px */
+  margin-bottom: var(--aconcagua); /* 40px */
 }
 
 h2,
 .aconcagua,
 .supra {
-  font-size: 2.5rem; /* 40px */
-  line-height: 3rem; /* 48px */
-  margin-block-end: 2rem; /* 32px */
-  /* single line 80px */
-  /* two lines 128px🚨 */
-  /* multi lines + 48px each🚨 */
-
-  /* what if i just do a slightly different base for two lines? as an extra class? */
-  /* 96 + x? */
+  font-size: var(--aconcagua); /* 40px */
+  margin-block-end: var(--denali); /* 32px */
 }
 
 h3,
 .denali {
-  font-size: 2rem; /* 32px */
-  line-height: 2.5rem; /* 40px */
+  font-size: var(--denali); /* 32px */
   margin-bottom: 1.875rem; /* 30px */
-  /* single line 70px */
-  /* two lines 110px */
-  /* multi lines + 40px each */
 }
 
 h4,
 .kilimanjaro,
 .spec h2 {
-  font-size: 1.5rem; /* 24px */
-  line-height: 2rem; /* 32px */
+  font-size: var(--kilimanjaro); /* 24px */
   margin-bottom: 1.75rem; /* 28px */
-  /* single line 60px */
-  /* two lines 92px🚨 */
-  /* multi lines + 32px🚨 each */
 }
 
 h5,
 .elbrus {
-  font-size: 1.25rem; /* 20px */
-  line-height: 1.875rem; /* 30px */
+  font-size: var(--kosciuszko); /* 20px */
   margin-bottom: 0.625rem; /* 10px */
-  /* single line 40px */
-  /* two lines 70px */
-  /* multi lines + 30px each */
 }
 
 h6,
 .vinson {
-  font-size: 1rem; /* 16px */
-  line-height: 1.25rem; /* 20px this becomes the vertical rythym */
+  font-size: var(--vinson); /* 16px */
   margin-bottom: 0.625rem; /* 10px skips some of the lines */
-  /* single line 30px */
-  /* two lines 50px */
-  /* multi lines + 20px each */
   font-family: var(--body_font);
 }
 
 /* start the multi line problem here as itll be worst */
 small,
-.kosciuszko,
-.two-small-lines,
-.multiple-small-lines {
-  font-size: 0.75rem; /* 12px */
-  line-height: 1rem; /* 16px */
+.kosciuszko {
+  font-size: var(--kosciuszko); /* 12px */
   margin-bottom: 0.875rem; /* 14px */
-  /* single line 30px */
-  /* two lines 46px🚨 */
-  /* multi lines + 16px🚨 each */
-
-  /* options i want 20px if its smaller it can be 10 but thats unrealistic */
-  /* 4 is pretty small on a single line that doesnt work it'd have to go to 30 */
-  /* two is already fine */
-  /* anymore gets super complicated to get it right */
 }
 
 address {
@@ -131,15 +94,10 @@ p {
   font-family: var(--font-serif);
 }
 
-.two-small-lines {
-  margin-bottom: 0.5rem;
-}
-
 /*------------------*/
 /* #HR */
 /*------------------*/
 
-/* default use on var(--brilliance) background */
 hr {
   border: none; /* reset */
   border-bottom: 1px solid;
@@ -271,11 +229,3 @@ select:active {
 /*------------------*/
 
 /* TODO: v1.2 */
-/* I think this is the only place its used but describes why */
-/* .single__description del {
-  color: hsl(var(--sand__base), var(--dim));
-  @media (prefers-color-scheme: dark) {
-    color: hsl(var(--sand__base), var(--dark));
-  }
-}
- */

package/src/styles/variables.css

@@ -83,28 +83,6 @@
   /* #NEUTRALS */
   /*------------------*/
 
-  /* louie variables */
-  --pitch: 2.5%;
-  --dark: 12.5%;
-  --dull: 25%;
-  --dim: 37.5%;
-  --mid: 50%;
-  --glow: 62.5%;
-  --light: 75%;
-  --bright: 87.5%;
-  --brilliance: 97.5%;
-
-  /* louie neutrals */
-  --black-metal: hsl(210, 25%, 2.5%);
-  --black-out: hsl(210, 25%, 12.5%);
-  --raven-black: hsl(210, 12.5%, 25%);
-  --industrial-revolution: hsl(210, 7.5%, 37.5%);
-  --grey: hsl(210, 7.5%, 50%);
-  --cold-grey: hsl(210, 7.5%, 62.5%);
-  --tin-soldier: hsl(210, 12.5%, 75%);
-  --kingly-cloud: hsl(210, 18.75%, 87.5%);
-  --brilliance: hsl(210, 25%, 97.5%);
-
   --neutral-100: #f9f9f9;
   --neutral-200: #ebebeb;
   --neutral-300: #d9d9d9;