@rileybathurst/paddle 1.3.6 → 1.3.8

package/package.json

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

package/src/paddle-purchase.tsx

@@ -22,6 +22,8 @@ interface BadgeTypes {
   demo: boolean;
   discount?: number;
 }
+
+// TODO: use the way I do specs for this
 // TODO: deal with multiple
 const Badges = ({ inflatable, demo, discount }: BadgeTypes) => {
   if (discount) {
@@ -67,8 +69,8 @@ type purchaseTypes = {
 export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sportSlug, brandSlug, baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: purchaseTypes) => {
 
   return (
-    <article key={id} className="card">
-      <div className="card-collage">
+    <article key={id} className="purchase">
+      <div className="purchase-collage">
 
         <PaddleTextureBackgrounds
           baseOne={baseOne}
@@ -97,13 +99,13 @@ export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflat
           discount={discount}
         />
       </div>
-      <h4 className="card__title">
+      <h4 className="purchase__title">
         <Link to={`/retail/${sportSlug}/${brandSlug}/${slug}`}>{title}</Link>
       </h4>
       <hr />
       <p>{excerpt}</p>
       <hr />
-      <div className="card__details">
+      <div className="purchase__details">
         <h4>
           <PaddleInchesRemainder inches={length} />
           long by {width}" wide

package/src/styles/buttons.css

@@ -2,6 +2,8 @@
 /* #BUTTONS */
 /*------------------------------------*/
 
+/* TODO: combine select into these for the colors */
+
 button,
 .button,
 .book-now {
@@ -136,8 +138,8 @@ button:active {
     color: var(--neutral-100);
   }
 
-  @media (prefers-color-scheme: dark) {
-  }
+  /* @media (prefers-color-scheme: dark) {
+  } */
 
   .book-now:hover,
   .book-now__hover {
@@ -161,7 +163,8 @@ button:active {
 
 .south-tahoe {
   button,
-  .button {
+  .button,
+  select {
     background-color: var(--lake-200);
     border-color: var(--lake-100);
     color: var(--cloud-color);
@@ -169,7 +172,8 @@ button:active {
 
   @media (prefers-color-scheme: dark) {
     button,
-    .button {
+    .button,
+    select {
       background-color: var(--lake-600);
       border-color: var(--lake-700);
       color: var(--lake-100);
@@ -178,13 +182,14 @@ button:active {
 
   button:hover,
   .button__hover,
-  .button:hover {
+  .button:hover,
+  select:hover {
     background-color: var(--lake-400);
     border-color: var(--lake-400);
     color: var(--lake-700);
   }
 
-  .button__active {
+  .button__active select:active {
     background-color: var(--lake-400);
     border-color: var(--lake-500);
     /* this goes passed the 400 / 500 dark light split Im not sure if I want to change it */

package/src/styles/cards.css

@@ -236,8 +236,8 @@
 }
 
 .ticket {
-  /* display: flex; */
   width: 100%;
+  height: 100%;
   background-color: var(--neutral-200);
   border: 1px solid var(--neutral-300);
 

package/src/styles/typography.css

@@ -200,6 +200,7 @@ hgroup {
 
 /*------------------------------------*/
 
+/* mostly taken from buttons */
 select {
   font-size: var(--vinson);
   font-family: var(--body_font);
@@ -208,16 +209,39 @@ select {
   cursor: inherit;
   line-height: inherit;
   padding: var(--kosciuszko);
-  border: 1px solid var(--neutral-100);
+  box-shadow: var(--penumbra);
   background-color: var(--neutral-200);
+  border: 1px solid var(--neutral-100);
 
   @media (prefers-color-scheme: dark) {
-    border-color: var(--neutral-700);
     background-color: var(--neutral-600);
+    border-color: var(--neutral-500);
+    color: var(--neutral-100);
+  }
+}
+
+select:hover,
+.select:hover {
+  box-shadow: var(--antumbra);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-500);
+    border-color: var(--neutral-500);
     color: var(--neutral-200);
   }
 }
 
+.select:active,
+select:active {
+  box-shadow: var(--umbra);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-400);
+    border-color: var(--neutral-200);
+    color: var(--neutral-500);
+  }
+}
+
 @media (prefers-color-scheme: light) {
   .tahoe-city select {
     border-color: var(--sand-200);