@rileybathurst/paddle 0.0.110 → 0.0.112

package/package.json

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

package/src/PaddleLocationCard.tsx

@@ -25,14 +25,15 @@ function Season({ name, season_start, season_end, opening_time, closing_time }:
     const seasonStartDate = new Date(season_start);
     const seasonEndDate = new Date(season_end);
 
-    if (currentDay > seasonStartDate || currentDay < seasonEndDate) {
+    if (currentDay >= seasonStartDate && currentDay <= seasonEndDate) {
       return (
         <p>
           {opening_time ? "Open Daily: " : null}<br />
           {opening_time && closing_time ? (
             <span><HourMin time={opening_time} /> - <HourMin time={closing_time} /></span>
           )
-            : null}
+            : null}<br />
+          Weather Permitting
         </p>
       )
     }
@@ -41,9 +42,9 @@ function Season({ name, season_start, season_end, opening_time, closing_time }:
   return (
     <p>
       We&apos;re closed for the season:<br />
-      We will reopen<br />
-      {season_start} - {season_end}<br />
-      Weather Permitting
+      {/* We will reopen<br /> */}
+      {/* {season_start} - {season_end}<br /> */}
+      {/* Weather Permitting */}
     </p>
   )
 }

package/src/PaddleSpecs.tsx

@@ -43,7 +43,7 @@ export const PaddleSpecs = (specs: SpecsTypes) =>
               </del>
             </h3>
           </div>
-          <div className="spec mullen">
+          <div className="spec ruby">
             <h2>Sale Price</h2>
             {value.discount}% off
             <h3>${amount}</h3>

package/src/styles/body.css

@@ -2,3 +2,11 @@ body {
   margin: 0; /* reset */
   font-size: 16px;
 }
+
+body:has(#storybook-root) {
+  min-height: 100vh;
+}
+
+.sb-show-main.sb-main-padded {
+  padding: 0; /* reset */
+}

package/src/styles/color.css

@@ -3,30 +3,34 @@
 /*------------------------------------*/
 
 body {
-  background-color: whitesmoke;
+  background-color: var(--brilliance);
   color: var(--black-metal);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--black-metal);
-    color: var(--kingly-cloud);
+    background-color: var(--navy-300);
+    color: var(--brilliance);
   }
 }
 
 /* ! testing */
 /* storybook but also maybe I just add them to the site it could be less confusing */
-main {
+/* I wonder if I can do something with :has so only top layer does the color */
+/* body {
   clip-path: inset(0 -100vmax);
-  background-color: whitesmoke;
-  box-shadow: 0 0 0 100vmax whitesmoke;
+  background-color: var(--brilliance);
+  box-shadow: 0 0 0 100vmax var(--brilliance);
 
   color: var(--black-metal);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--black-metal);
     color: var(--kingly-cloud);
   }
 }
 
 main.tahoe-city {
+  background-color: var(--kingly-cloud);
+
   @media (prefers-color-scheme: dark) {
     background-color: var(--navy-200);
     box-shadow: 0 0 0 100vmax var(--navy-200);
@@ -38,6 +42,20 @@ main.south-tahoe {
     background-color: var(--navy-200);
     box-shadow: 0 0 0 100vmax var(--navy-200);
   }
+} */
+
+body:has(#storybook-root) {
+  #storybook-root {
+    min-height: 100vh;
+  }
+
+  #storybook-root:has(.tahoe-city) {
+    background-color: var(--brilliance);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--navy-300);
+    }
+  }
 }
 
 /*------------------------------------*/
@@ -46,17 +64,67 @@ main.south-tahoe {
 
 .top-bar {
   clip-path: inset(0 -100vmax);
-}
+  background-color: var(--sand-100);
+  box-shadow: 0 0 0 100vmax var(--sand-100);
 
-.south-tahoe .top-bar {
-  background-color: var(--navy-200);
-  box-shadow: 0 0 0 100vmax var(--navy-200);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--navy-200);
+    box-shadow: 0 0 0 100vmax var(--navy-200);
+  }
 }
 
 /*------------------------------------*/
 /* #LOCATION */
 /*------------------------------------*/
 
-.location.true {
-  background-color: antiquewhite;
+/* TODO: tahoe city and south lake */
+.location-wrapper.true {
+  background-color: var(--sand-100);
+  border-radius: var(--card-radius);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--navy-200);
+  }
+}
+
+/*------------------------------------*/
+
+#storybook-root {
+  .forest.tahoe-city {
+    .floor {
+      /* background-color: var(--sand-100); */
+      /* background-color: whitesmoke; */
+      background-color: var(--brilliance);
+    }
+
+    .understory {
+      background-color: var(--sand);
+    }
+
+    .canopy {
+      background-color: var(--sand-200);
+    }
+
+    .emergent {
+      background-color: var(--sand-300);
+    }
+  }
+
+  .forest.south-tahoe {
+    .floor {
+      /* background-color: var(--sand-100); */
+    }
+
+    .understrory {
+      /* background-color: var(--sand-200); */
+    }
+
+    .canopy {
+      /* background-color: var(--sand-300); */
+    }
+
+    .emergent {
+      /* background-color: var(--ruby-100); */
+    }
+  }
 }

package/src/styles/layout.css

@@ -331,3 +331,19 @@ header {
     }
   }
 }
+
+/*------------------------------------*/
+/* #STORYBOOK */
+/*------------------------------------*/
+
+/* some of this is coming from the npm piece which us a little bit of a mess */
+#storybook-root .color-deck {
+  margin-block-end: var(--kilimanjaro);
+
+  .color-card {
+    min-width: 10rem;
+    min-height: 10rem;
+    width: auto;
+    height: auto;
+  }
+}

package/src/styles/links.css

@@ -7,7 +7,7 @@ a:where(:hover, :focus) {
 }
 
 .tahoe-city a {
-  color: var(--mullen-100);
+  color: var(--brilliance);
 }
 
 .south-tahoe a {

package/src/styles/media.css

@@ -9,6 +9,8 @@ svg {
   min-height: var(--everest); /* safari needs default mins */
   max-width: clamp(var(--kilimanjaro), 5vw, 5rem);
   max-height: clamp(var(--kilimanjaro), 5vw, 5rem);
+
+  fill: currentColor;
 }
 
 /*------------------*/
@@ -48,7 +50,8 @@ svg {
 
   svg {
     width: 100%;
-    max-height: 10rem;
+    max-height: var(--vulture);
+    max-width: fit-content;
   }
 }
 

package/src/styles/typography.css

@@ -143,7 +143,7 @@ p {
 /* #HR */
 /*------------------*/
 
-/* default use on whitesmoke background */
+/* default use on var(--brilliance) background */
 hr {
   border: none; /* reset */
   border-bottom: 1px solid;

package/src/styles/variables.css

@@ -7,36 +7,20 @@
   /* #COLOR */
   /*------------------------------------*/
 
-  /* TAHOE CITY KAYAK */
+  /* ? does this need some more saturation */
+  --ruby-100: hsl(0, 50%, 50%); /* base */
+  --ruby-200: hsl(0, 50%, 37.5%);
+  --ruby-300: hsl(0, 50%, 25%);
 
-  /* ? would ruby be a better name */
-  --mullen: hsl(0, 50%, 50%); /* #bf4040 */
-  --mullen-100: hsl(0, 50%, 50%); /* base */
-  --mullen-200: hsl(0, 50%, 37.5%);
-  --mullen-300: hsl(0, 50%, 25%);
-
-  --sand: hsl(25, 37%, 95%);
-  --sand-100: hsl(25, 37%, 95%); /* base */
+  --sand-100: hsl(25, 37%, 95%);
   --sand-150: hsl(25, 37%, 92.5%);
   --sand-200: hsl(25, 37%, 87.5%);
   --sand-300: hsl(25, 37%, 75%);
 
-  /*------------------------------------*/
-  /* #SOUTH TAHOE KAYAK */
-  /*------------------------------------*/
-  /* needed for storybook */
-
   --navy-100: oklch(50% 0.09 230); /* base */
   --navy-200: oklch(37.5% 0.07 230);
   --navy-300: oklch(25% 0.04 230);
 
-  --sunshine-100: oklch(97.5% 0.025 95);
-  --sunshine-200: oklch(95% 0.05 95);
-  --sunshine-300: oklch(92.5% 0.1 95);
-  --sunshine-400: oklch(90% 0.15 95);
-  --sunshine-500: oklch(87.5% 0.2 95); /* base */
-  --sunshine: oklch(87.5% 0.2 95);
-
   /*------------------------------------*/
 
   --card-radius: 0.25rem;