@rileybathurst/paddle 1.3.5 → 1.3.7

package/package.json

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

package/src/Select.stories.tsx

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

package/src/Select.tsx

@@ -0,0 +1,23 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+export const Select = () => {
+
+  return (
+    <select
+      className="comparesheet_select"
+      name={faker.commerce.productName()}
+      aria-label="Select a product"
+    >
+      {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
+        <option
+          key={faker.string.uuid()}
+          value={faker.commerce.productName()}
+        >
+          {faker.commerce.productName()}
+        </option>
+      ))}
+    </select>
+  );
+};

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/typography.css

@@ -198,20 +198,59 @@ hgroup {
   line-height: 1.5;
 }
 
+/*------------------------------------*/
+
+/* mostly taken from buttons */
 select {
   font-size: var(--vinson);
   font-family: var(--body_font);
   margin-block-end: 0;
-  /* A reset of styles, including removing the default dropdown arrow */
-  appearance: none;
-  /* Additional resets for further consistency */
-  background-color: transparent;
-  border: none;
-  padding: 0 var(--vinson) 0 0;
   margin: 0;
-  width: 100%;
   cursor: inherit;
   line-height: inherit;
+  padding: var(--kosciuszko);
+  box-shadow: var(--penumbra);
+  background-color: var(--neutral-200);
+  border: 1px solid var(--neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    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);
+    background-color: var(--sand-100);
+  }
+}
+
+.comparesheet_select {
+  width: 100%;
 }
 
 /*------------------*/
@@ -238,4 +277,4 @@ select {
     color: hsl(var(--sand__base), var(--dark));
   }
 }
- */
+ */