@rileybathurst/paddle 1.0.8 → 1.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -26,6 +26,7 @@
     "@biomejs/biome": "2.0.2",
     "@chromatic-com/storybook": "^4.0.0",
     "@faker-js/faker": "^9.8.0",
+    "@storybook/addon-a11y": "^9.0.13",
     "@storybook/addon-docs": "^9.0.11",
     "@storybook/addon-links": "^9.0.11",
     "@storybook/addon-themes": "^9.0.11",
@@ -55,4 +56,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/src/Badges.stories.tsx

@@ -0,0 +1,18 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badges } from './Badges';
+
+const meta = {
+  component: Badges,
+  title: 'Atoms/Badges',
+  args: {},
+} satisfies Meta<typeof Badges>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/Badges.tsx

@@ -0,0 +1,33 @@
+// this is the Name.tsx file
+import { faker } from '@faker-js/faker/locale/zu_ZA';
+import React from 'react';
+
+interface NameTypes {
+  name: string;
+}
+const Name = ({ name }: NameTypes) => {
+  return (
+    <div className="badge">
+      <h5 className="capitalize">{name}</h5>
+    </div>
+  );
+}
+
+export const Badges = () => {
+  // TODO: deal with multiple
+
+  // Discount
+  if (faker.datatype.boolean()) {
+    return (
+      <div className="badge">
+        <h5 className="capitalize">{faker.number.int({ min: 1, max: 100 })}% off</h5>
+      </div>
+    );
+  }
+
+  if (faker.datatype.boolean()) {
+    return <Name name={faker.helpers.arrayElement(['inflatable', 'demo', faker.airline.airline().name])} />;
+  }
+
+  return null;
+};

package/src/Bag.stories.tsx

@@ -0,0 +1,18 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { Bag } from './Bag';
+
+const meta = {
+  component: Bag,
+  title: 'Organisms/Bag',
+  args: {},
+} satisfies Meta<typeof Bag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/Bag.tsx

@@ -0,0 +1,14 @@
+// this is the Name.tsx file
+import React from "react";
+import { faker } from "@faker-js/faker";
+import { Purchase } from "./Purchase";
+
+export const Bag = () => {
+  return (
+    <div className="bag">
+      {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
+        <Purchase key={faker.string.uuid()} />
+      ))}
+    </div>
+  );
+};

package/src/PaddleLocationCard.tsx

@@ -18,11 +18,11 @@ type PlaceTypes = {
 const Place = ({ commonName, streetAddress, addressLocality, addressRegion, postalCode }: PlaceTypes) => {
   return (
     <address>
-      {commonName ? commonName : null}
-      {streetAddress ? streetAddress : null}
-      {addressLocality ? addressLocality : null}
-      {addressRegion ? addressRegion : null}
-      {postalCode ? postalCode : null}
+      {commonName ? (<>{commonName},&nbsp;</>) : null},&nbsp;
+      {streetAddress ? (<>{streetAddress},&nbsp;</>) : null}
+      {addressLocality ? (<>{addressLocality},&nbsp;</>) : null}
+      {addressRegion ? (<>{addressRegion},&nbsp;</>) : null}
+      {postalCode ? (<>{postalCode},&nbsp;</>) : null}
     </address>
   )
 }
@@ -62,13 +62,9 @@ const Season = ({
       return (
         <p>
           {opening_time ? "Open Daily: " : null}
-          <br />
           {opening_time && closing_time ? (
-            <span>
-              <HourMin time={opening_time} /> - <HourMin time={closing_time} />
-            </span>
+            <><HourMin time={opening_time} /> - <HourMin time={closing_time} />&nbsp;</>
           ) : null}
-          <br />
           Weather Permitting
         </p>
       );
@@ -80,13 +76,7 @@ const Season = ({
         <p>We&apos;re closed for the season</p>
 
         {currentDay < seasonStartDate ? (
-          <p>
-            We will reopen
-            <br />
-            {season_start}
-            <br />
-            Weather Permitting
-          </p>
+          <p>We will reopen {season_start}, Weather Permitting</p>
         ) : null}
 
         {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}

package/src/PaddleSpecs.tsx

@@ -1,23 +1,25 @@
-import * as React from "react"
-import PaddleRemainder from "./paddle-remainder.tsx"
+import * as React from "react";
+import PaddleRemainder from "./paddle-remainder.tsx";
 
 interface SpecsTypes {
-  [key: string]: string | number | {
-    [key: string]: string | number[];
-  };
+  [key: string]:
+    | string
+    | number
+    | {
+        [key: string]: string | number[];
+      };
 }
 // * moving the section tag to the parent component means you can loop yourself
 export const PaddleSpecs = (specs: SpecsTypes) =>
   // <section className='specs'>
   Object.entries(specs).map(([key, value]) => {
-
     // console.log(key, value);
 
     if (!value) {
       return null;
     }
 
-    if (key === 'time' && typeof value === 'object') {
+    if (key === "time" && typeof value === "object") {
       return (
         <div key={key} className="spec">
           <h2>{value.value}</h2>
@@ -28,22 +30,22 @@ export const PaddleSpecs = (specs: SpecsTypes) =>
       // * I cant remeber others yet
     }
 
-    if (key === 'cost' && typeof value === 'object' && value.discount) {
-
-      const amount = Number(value.price) - (Number(value.discount) * (Number(value.price) / 100)) as number;
+    if (key === "cost" && typeof value === "object" && value.discount) {
+      const amount = (Number(value.price) -
+        Number(value.discount) * (Number(value.price) / 100)) as number;
 
       return (
         <>
           {/* // TODO: add color */}
           <div className="spec">
-            <h2><del>Original Price</del></h2>
+            <h2>
+              <del>Original Price</del>
+            </h2>
             <h3>
-              <del>
-                ${value.price}
-              </del>
+              <del>${value.price}</del>
             </h3>
           </div>
-          <div className="spec ruby">
+          <div className="spec">
             <h2>Sale Price</h2>
             {value.discount}% off
             <h3>${amount}</h3>
@@ -54,22 +56,28 @@ export const PaddleSpecs = (specs: SpecsTypes) =>
 
     /* I didnt know you could call yourself like this */
     /* I guess its not a infinite loop as its not calling an object */
-    if (typeof value === 'object') {
-      return (
-        <PaddleSpecs {...value} />
-      );
+    if (typeof value === "object") {
+      return <PaddleSpecs {...value} />;
     }
 
     return (
       <div key={key} className="spec">
         <h2>{key}</h2>
         <h3>
-          {key === 'price' ? <span className="spec__unit">$</span> : null}
-          {key === 'length' && typeof value === 'number' ? <PaddleRemainder inches={value} /> : value}
-          {key === 'hullweight' || key === 'riggedweight' ? <span className="spec__unit">lbs</span> : null}
-          {key === 'width' || key === 'length' || key === 'capacity' ? <span className="spec__unit">"</span> : null}
+          {key === "price" ? <span className="spec__unit">$</span> : null}
+          {key === "length" && typeof value === "number" ? (
+            <PaddleRemainder inches={value} />
+          ) : (
+            value
+          )}
+          {key === "hullweight" || key === "riggedweight" ? (
+            <span className="spec__unit">lbs</span>
+          ) : null}
+          {key === "width" || key === "length" || key === "capacity" ? (
+            <span className="spec__unit">"</span>
+          ) : null}
         </h3>
       </div>
-    )
-  })
-// </section>
+    );
+  });
+// </section>

package/src/Purchase.stories.tsx

@@ -0,0 +1,18 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { Purchase } from './Purchase';
+
+const meta = {
+  component: Purchase,
+  title: 'Molecules/Purchase',
+  args: {},
+} satisfies Meta<typeof Purchase>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/Purchase.tsx

@@ -0,0 +1,51 @@
+// Retail Card
+import React from "react";
+// import { GatsbyImage } from 'gatsby-plugin-image';
+import { faker } from "@faker-js/faker";
+import { Badges } from "./Badges";
+// import { Badges } from './Badges';
+// import { Remainder } from './Remainder';
+// import { useRetailContext } from '../context/RetailContext';
+import { TextureBackgrounds } from "./TextureBackgrounds";
+
+export const Purchase = () => {
+  return (
+    <article key={faker.string.uuid()} className="purchase">
+      {/* // This is currently a wrapper and not used */}
+      <div className="purchase-collage">
+        <TextureBackgrounds />
+        <a href={faker.music.songName()} className="image-link">
+          {/* <GatsbyImage
+            image={cutout?.localFile?.childImageSharp?.gatsbyImageData}
+            alt={cutout?.alternativeText || `${title} by ${brand.slug}`}
+            className="cutout"
+            objectFit="contain"
+            // TODO: this has been causing some problems but keep an eye on it
+          /> */}
+        </a>
+
+        <Badges
+        // inflatable={faker.datatype.boolean()}
+        // demo={faker.datatype.boolean()}
+        // discount={faker.datatype.boolean() ? faker.number.int({ min: 1, max: 100 }) : undefined}
+        />
+      </div>
+      <h4 className="purchase__title">
+        <a href={faker.music.songName()}>{faker.music.album()}</a>
+      </h4>
+      <hr />
+      {/* // ? I think this is too long */}
+      <p>{faker.lorem.paragraph()}</p>
+      <hr />
+      <div className="purchase__details">
+        <h4>
+          {/* <Remainder inches={length} /> */}
+          long by {faker.number.int({ min: 1, max: 100 })}" wide
+        </h4>
+        <h5 className="capitalize">
+          Capacity {faker.number.int({ min: 1, max: 100 })}&thinsp;lbs
+        </h5>
+      </div>
+    </article>
+  );
+};

package/src/TextureBackgrounds.stories.tsx

@@ -0,0 +1,18 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextureBackgrounds } from './TextureBackgrounds';
+
+const meta = {
+  component: TextureBackgrounds,
+  title: 'Atoms/TextureBackgrounds',
+  args: {},
+} satisfies Meta<typeof TextureBackgrounds>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/TextureBackgrounds.tsx

@@ -0,0 +1,31 @@
+// this is the Name.tsx file
+import React from "react";
+import { faker } from "@faker-js/faker";
+
+export const TextureBackgrounds = () => {
+  return (
+    <>
+      <img
+        src={faker.image.dataUri()}
+        className="texture-slice crop"
+        alt="top texture"
+      />
+      <img
+        src={faker.image.dataUri()}
+        className="texture-slice"
+        alt="bottom texture"
+      />
+      <svg viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+        <title>Diagonal line decoration</title>
+        <line
+          x1="0"
+          y1="630"
+          x2="1200"
+          y2="0"
+          // only color the stroke in css so it has dark mode
+          strokeWidth="3"
+        />
+      </svg>
+    </>
+  );
+};

package/src/styles/astro.css

@@ -1,4 +1,4 @@
-/* straight pull for menu so its going to take a bunch of work but this keeps everything sperate */
+/* TODO: Not in use yet straight pull for menu so its going to take a bunch of work but this keeps everything sperate */
 
 .menu-button {
   background-color: hotpink !important;

package/src/styles/cards.css

@@ -1,16 +1,20 @@
 /*------------------*/
-/* #CARDS */
+/* #CARDS / PURCHASE / TICKET */
 /*------------------*/
 
-.deck {
+/* was deck */
+.bag {
   margin-block-end: var(--aconcagua);
 
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
+
+  /* TODO: clamp */
+  gap: var(--kosciuszko);
 }
 
-/* TODO: v1.2 I think this may have already be removed by check it properly before deleteing it card is becoming purchase and splitting more */
-.card {
+/* was card */
+.purchase {
   padding: 0;
   display: flex;
   flex-direction: column;
@@ -19,12 +23,58 @@
   border-radius: var(--card-radius);
   /* needed to control nested elements */
   text-decoration: none;
+  box-shadow: var(--penumbra);
+
+  background-color: white;
 
-  .card__placeholder {
-    max-height: 5rem;
-    border: none;
-    border-radius: 0;
-    margin-block-end: var(--kilimanjaro);
+  .purchase-collage {
+    display: grid;
+    width: 100%;
+  
+    > * {
+      grid-row: 1;
+      grid-column: 1;
+    }
+  
+    .texture-slice {
+      width: calc(100% - var(--elbrus));
+      aspect-ratio: 16/9;
+      height: 100%;
+      align-self: center;
+      margin: calc(var(--elbrus) / 2);
+      border-radius: 0.25rem;
+      box-shadow: var(--penumbra);
+      border: 1px solid whitesmoke;
+      stroke: whitesmoke;
+  
+      @media (prefers-color-scheme: dark) {
+        border-color: var(--black-metal);
+        stroke: var(--black-metal);
+      }
+    }
+    
+    .cutout {
+      object-fit: contain;
+      place-self: center;
+      /* box-shadow: var(--umbra); */
+      z-index: 2; /* TODO: variable */
+      grid-row: 1/1;
+      filter: drop-shadow(5px 5px 5px var(--black-out));
+      aspect-ratio: 16/9;
+      width: 100%;
+    }
+  
+    svg {
+      z-index: 1; /* TODO: variable */
+      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);
+      }
+    }
   }
 
   .image-link {
@@ -37,49 +87,21 @@
     transform: scale(1.05);
   }
 
-  .card__image {
-    margin-block-end: var(--kilimanjaro);
-    transition: var(--fade);
-  }
-
-  .card__image:where(:hover, :focus) {
-    filter: brightness(80%);
-  }
-
-  .card__title {
+  .purchase__title {
     font-size: var(--denali);
     margin-inline: var(--kosciuszko);
     line-height: var(--aconcagua);
   }
 
-  .card__specs {
-    width: calc(100% - var(--kilimanjaro));
-    display: flex;
-    flex-flow: row wrap;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-inline: var(--kosciuszko);
-    margin-block-end: var(--elbrus);
-
-    > * {
-      margin: 0; /* reset */
-    }
-  }
-
-  .card__span {
-    font-size: var(--vinson);
-    text-transform: uppercase;
-  }
-
-  hr {
+  hr, p {
     margin-inline: var(--kosciuszko);
   }
 
-  img {
+  /* img {
     width: 100%;
-  }
+  } */
 
-  .card__details {
+  .purchase__details {
     display: flex;
     gap: var(--vinson);
     width: calc(100% - var(--kilimanjaro));
@@ -109,10 +131,14 @@
 
   .badge {
     z-index: var(--floor);
-    place-self: start;
+    justify-self: end;
+    align-self: start;
     padding: var(--kosciuszko);
     margin: var(--kosciuszko);
     border-radius: var(--card-radius);
+
+    background-color: var(--neutral-200);
+    border: 1px solid var(--neutral-100);
     opacity: 0.9;
 
     h5 {
@@ -123,7 +149,17 @@
   }
 }
 
-.card:hover,
+.tahoe-city .purchase {
+  background-color: var(--sand-100);
+
+  hr {
+    border-color: var(--sand-400);
+  }
+}
+
+/* south-tahoe currently does not have a purchase */
+
+.purchase:hover,
 .ticket:hover {
   p {
     text-decoration: underline;
@@ -135,15 +171,11 @@
   }
 }
 
-.deck:empty {
+.bag:empty {
   display: none;
 }
 
-.deck__column {
-  grid-template-columns: 1fr;
-}
-
-.deck__more {
+.bag__more {
   max-width: var(--pelican);
   margin-inline: auto;
   padding-inline: var(--kosciuszko);
@@ -154,28 +186,6 @@
   }
 }
 
-.ticket img {
-  aspect-ratio: 16 / 9;
-}
-
-.south-tahoe .ticket {
-  background-color: var(--lake-200);
-  border: 1px solid var(--lake-300);
-  box-shadow: var(--penumbra);
-  color: var(--lake-600);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--lake-700);
-    border-color: var(--lake-600);
-    /* box-shadow: var(--penumbra--dark); */
-    color: var(--lake-200);
-
-    a:not(.book-now) {
-      color: var(--lake-200);
-    }
-  }
-}
-
 /*------------------*/
 /* #RETAIL LOGO */
 /*------------------*/
@@ -237,6 +247,7 @@
 
   img {
     width: 100%;
+    aspect-ratio: 16 / 9;
   }
 
   > a {
@@ -263,6 +274,20 @@
   }
 }
 
-/* .south-tahoe .ticket {
-}
- */
+.south-tahoe .ticket {
+  background-color: var(--lake-200);
+  border: 1px solid var(--lake-300);
+  box-shadow: var(--penumbra);
+  color: var(--lake-600);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-700);
+    border-color: var(--lake-600);
+    /* box-shadow: var(--penumbra--dark); */
+    color: var(--lake-200);
+
+    a:not(.book-now) {
+      color: var(--lake-200);
+    }
+  }
+}

package/src/styles/color.css

@@ -25,6 +25,13 @@ body:has(#storybook-root) {
   }
 }
 
+body .tahoe-city {
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--navy-300);
+    color: var(--brilliance);
+  }
+}
+
 body .south-tahoe {
   @media (prefers-color-scheme: dark) {
     background-color: var(--lake-800);
@@ -71,3 +78,11 @@ body .south-tahoe {
     color: var(--neutral-200);
   }
 }
+
+/*------------------------------------*/
+/* #SPECS */
+/*------------------------------------*/
+
+.specs h2, .specs .spec__unit {
+  color: grey;
+}

package/src/styles/layout.css

@@ -17,6 +17,7 @@ main,
 footer,
 .react-aria-Breadcrumbs,
 .deck,
+.bag,
 .flight {
   margin-inline: auto;
   padding-inline: var(--kosciuszko);
@@ -54,6 +55,7 @@ main,
 .albatross,
 footer,
 .deck,
+.bag,
 .flight,
 .react-aria-Breadcrumbs {
   max-width: min(var(--albatross), calc(100vw - var(--denali)));
@@ -404,7 +406,6 @@ header {
     grid-column: 3;
     grid-row: 2;
     aspect-ratio: 1;
-    border: none;
     box-shadow: none;
     margin-block: 1rem;
     border-radius: 50%;
@@ -446,3 +447,45 @@ header {
     height: auto;
   }
 }
+
+/*------------------*/
+/* #SPECS */
+/*------------------*/
+
+.spec {
+  display: flex;
+  gap: 1rem;
+  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);
+  text-transform: uppercase;
+
+  height: 2lh;
+  margin-block-start: 1lh;
+  @supports not (margin: 1lh) {
+    height: 2.5rem;
+    margin-block-start: 1.25rem;
+  }
+
+  h2,
+  h3 {
+    line-height: 2rem;
+    margin-block-end: 0.25rem;
+  }
+
+  .spec-flex {
+    display: flex;
+  }
+}
+
+/* bug fix that maybe could be done with .sr-only being different but this works */
+.spec:has(.sr-only) {
+  align-items: center;
+}
+
+.spec:last-child {
+  border-bottom: none;
+}

package/src/styles/links.css

@@ -14,7 +14,7 @@ a:where(:hover, :focus) {
 
 /* this is getting too big and complex try go the other way for what it is */
 .tahoe-city a:not(.social a):not(button):not(.button):not(.book-now) {
-  color: var(--ruby-100);
+  color: var(--tanager-100);
 }
 
 .south-tahoe a {

package/src/styles/lists.css

@@ -17,6 +17,7 @@ ul {
 }
 
 ol {
+  margin-block-start: 0;
   li {
     display: inline flow-root list-item;
     margin-block-end: var(--baseline);
@@ -70,7 +71,8 @@ ol {
   display: flex;
   flex-flow: row wrap;
   gap: 1rem;
-  align-items: center;
+  align-items: baseline;
+  justify-content: space-between;
 }
 
 /*------------------*/
@@ -176,7 +178,8 @@ ol {
 
     svg {
       transition: var(--fade);
-      margin: var(--baseline);
+      margin-block: var(--baseline);
+      margin-inline: auto;
       min-width: 3rem; /* guess and check */
 
       @media (min-width: 20rem) {
@@ -201,18 +204,21 @@ ol {
 
 .date-time {
   display: flex;
-  flex-flow: column;
+  flex-flow: row wrap;
   gap: 0.5rem;
-  justify-items: center;
-  text-align: center;
+  place-items: baseline;
 
-  .date {
+  > * {
+    margin: 0;
+    padding: 0;
+    line-height: 2;
     width: max-content;
   }
 
+  /* .date {
+  } */
+
   .time {
-    padding: 0.5rem;
     border-radius: var(--border-radius);
-    width: max-content;
   }
 }

package/src/styles/panels.css

@@ -26,6 +26,11 @@
       border-color: white;
     }
   }
+
+  /* * fixes color bleed check the tours page */
+  > *:last-child {
+    margin-block-end: 0;
+  }
 }
 
 .aurora {

package/src/styles/typography.css

@@ -67,7 +67,6 @@ h3,
 
 h4,
 .kilimanjaro,
-/* .spec h2 put this inline */
 .spec h2 {
   font-size: 1.5rem; /* 24px */
   line-height: 2rem; /* 32px */
@@ -231,9 +230,12 @@ select {
 /* #DEL */
 /*------------------*/
 
-del {
+/* 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

@@ -7,11 +7,6 @@
   /* #COLOR */
   /*------------------------------------*/
 
-  /* TODO: v1.2 swap to tanager and remove */
-  --ruby-100: hsl(0, 50%, 50%); /* base */
-  --ruby-200: hsl(0, 50%, 37.5%);
-  --ruby-300: hsl(0, 50%, 25%);
-
   --sand-100: hsl(25, 37%, 95%);
   --sand-150: hsl(25, 37%, 92.5%);
   --sand-200: hsl(25, 37%, 87.5%);
@@ -21,7 +16,7 @@
   --navy-200: oklch(37.5% 0.07 230);
   --navy-300: oklch(25% 0.04 230);
 
-  @supports not (oklch: 50% 0.09 230) {
+  @supports not (color: oklch(50% 0.09 230)) {
     --navy-100: #1b6c8c;
     --navy-200: #0a475f;
     --navy-300: #092531;
@@ -55,7 +50,7 @@
   --sand-400: oklch(0.88 0.04 50);
   /* this finishes where 500 normally would go dark */
 
-  @supports not (color: oklch(0.55 0.2 25)) {
+  @supports not (color: oklch(0.97 0.01 50)) {
     --sand-100: #fbf3ef;
     --sand-200: #faebe3;
     --sand-300: #f6dfd3;
@@ -65,8 +60,9 @@
   /* South Tahoe */
   /* Lake */
 
-  --lake-100: oklch(99% 0.001 230);
-  --lake-100: oklch(95% 0.03 230);
+  /* ! whats going on with the 2x 100? */
+  /* --lake-100: oklch(99% 0.001 230); */
+  --lake-100: oklch(94% 0.03 230);
   --lake-200: oklch(93% 0.04 230);
   --lake-300: oklch(90% 0.055 230);
   --lake-400: oklch(83% 0.08 230);