free-astro-components 0.0.26 → 0.0.28

package/README.md

@@ -11,20 +11,28 @@ Explore and utilize a variety of components that can help you build your web pro
 ### Available Components
 
 - **Icons**
-  - A set of customizable icons for various uses.
+  - A set of icons for various uses.
 - **Buttons**
   - Stylish and functional buttons for your web applications.
 - **Controls**
-  - **Checkbox**: A customizable checkbox component.
-  - **Radio**: A flexible radio button component.
+  - **Checkbox**: A checkbox component.
+  - **Radio**: A radio button component.
   - **Switch**: A toggle switch component for user interactions.
+- **Input**
+  - A versatile input component for user text entry.
+- **Textarea**
+  - A textarea component for larger text input.
+- **Select**
+  - A select dropdown component.
 
 ## Getting Started
 
 1. **Visit the Website:**
+
    - [Explore the Collection](https://free-astro-components.vercel.app/)
 
 2. **Installation:**
+
    - To use these components in your Astro.js project, follow the instructions on the website.
 
 3. **Usage:**
@@ -44,4 +52,4 @@ This project is licensed under the MIT License.
 
 ## Contact
 
-For any questions or support, please reach out to [dventura017@gmail.com] or open an issue on the [GitHub repository](https://github.com/denv17/free-astro-components.git).
+For any questions or support, please reach out to [dventura017@gmail.com] or open an issue on the [GitHub repository](https://github.com/denv17/free-astro-components.git).

package/package.json

@@ -3,7 +3,7 @@
   "description": "A collection of free Astro components",
   "author": "Denis Ventura",
   "type": "module",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "exports": {
     ".": {
       "import": {

package/src/components/Checkbox.astro

@@ -25,7 +25,7 @@ const checkboxClasses = [
 <style>
   .ac-checkbox-wrapper {
     align-items: center;
-    color: rgb(var(--ac-gray-400));
+    color: rgb(var(--ac-color-500));
     cursor: pointer;
     display: inline-flex;
     font-family: var(--ac-font-sans);
@@ -75,7 +75,7 @@ const checkboxClasses = [
     }
 
     &:checked + .ac-checkbox-label {
-      color: rgb(var(--ac-dark));
+      color: rgb(var(--ac-color-700));
     }
 
     &:checked:hover + .ac-checkbox-label {

package/src/components/Input.astro

@@ -101,12 +101,12 @@ const inputClasses = ['ac-input', statusClasses, className]
 
   .ac-input {
     appearance: none;
-    background-color: rgb(var(--ac-white));
+    background-color: rgb(var(--ac-color-100));
     background-image: none;
-    border-color: rgb(var(--ac-gray-100));
+    border-color: rgb(var(--ac-color-200));
     border-radius: var(--ac-input-border-radius);
     border-width: var(--ac-border-2);
-    color: var(--ac-dark);
+    color: var(--ac-color-700);
     font-size: var(--ac-text-base);
     height: var(--ac-input-height);
     line-height: var(--ac-leading-normal);
@@ -116,7 +116,7 @@ const inputClasses = ['ac-input', statusClasses, className]
     width: 100%;
 
     &:hover {
-      border-color: rgb(var(--ac-gray-200));
+      border-color: rgb(var(--ac-color-300));
     }
 
     &:focus {
@@ -125,7 +125,7 @@ const inputClasses = ['ac-input', statusClasses, className]
     }
 
     &:disabled {
-      background-color: rgb(var(--ac-gray-100));
+      background-color: rgb(var(--ac-color-200));
     }
 
     &.ac-input--error {
@@ -134,13 +134,13 @@ const inputClasses = ['ac-input', statusClasses, className]
   }
 
   .ac-input-label {
-    color: rgb(var(--ac-gray-400));
+    color: rgb(var(--ac-color-500));
     font-size: var(--ac-text-sm);
   }
 
   .ac-input-helper-text {
     align-items: center;
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     display: flex;
     font-size: var(--ac-text-sm);
     gap: var(--ac-spacing-1);
@@ -153,7 +153,7 @@ const inputClasses = ['ac-input', statusClasses, className]
   }
 
   .ac-input-icon {
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     height: var(--ac-spacing-6);
     position: absolute;
     top: 50%;
@@ -173,7 +173,7 @@ const inputClasses = ['ac-input', statusClasses, className]
     appearance: none;
     background-color: transparent;
     border: none;
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     cursor: pointer;
     height: var(--ac-spacing-6);
     padding: 0;

package/src/components/Radio.astro

@@ -20,7 +20,7 @@ const radioClasses = ['ac-radio', error ? 'ac-radio--error' : '', className]
 <style>
   .ac-radio-wrapper {
     align-items: center;
-    color: rgb(var(--ac-gray-400));
+    color: rgb(var(--ac-color-500));
     cursor: pointer;
     display: inline-flex;
     font-family: var(--ac-font-sans);
@@ -60,7 +60,7 @@ const radioClasses = ['ac-radio', error ? 'ac-radio--error' : '', className]
     &:checked {
       background-color: rgb(var(--ac-primary));
       border-color: rgb(var(--ac-primary));
-      box-shadow: inset 0 0 0 4px rgb(var(--ac-white));
+      box-shadow: inset 0 0 0 4px rgb(var(--ac-color-100));
     }
 
     &:checked:hover {
@@ -69,7 +69,7 @@ const radioClasses = ['ac-radio', error ? 'ac-radio--error' : '', className]
     }
 
     &:checked + .ac-radio-label {
-      color: rgb(var(--ac-dark));
+      color: rgb(var(--ac-color-700));
     }
 
     &:checked:hover + .ac-radio-label {

package/src/components/Select.astro

@@ -141,12 +141,12 @@ const selectClasses = [
 
   .ac-select {
     appearance: none;
-    background-color: rgb(var(--ac-white));
+    background-color: rgb(var(--ac-color-100));
     background-image: none;
-    border-color: rgb(var(--ac-gray-100));
+    border-color: rgb(var(--ac-color-200));
     border-radius: var(--ac-select-border-radius);
     border-width: var(--ac-border-2);
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     cursor: pointer;
     font-size: var(--ac-text-base);
     font-weight: var(--ac-font-normal);
@@ -158,7 +158,7 @@ const selectClasses = [
     width: 100%;
 
     &.is-selected {
-      color: rgb(var(--ac-dark));
+      color: rgb(var(--ac-color-700));
     }
 
     &.is-open,
@@ -167,7 +167,7 @@ const selectClasses = [
     }
 
     &:hover {
-      border-color: rgb(var(--ac-gray-200));
+      border-color: rgb(var(--ac-color-300));
     }
 
     &:focus,
@@ -178,7 +178,7 @@ const selectClasses = [
     }
 
     &:disabled {
-      background-color: rgb(var(--ac-gray-100));
+      background-color: rgb(var(--ac-color-200));
     }
 
     &.ac-select--error,
@@ -188,13 +188,13 @@ const selectClasses = [
   }
 
   .ac-select-label {
-    color: rgb(var(--ac-gray-400));
+    color: rgb(var(--ac-color-500));
     font-size: var(--ac-text-sm);
   }
 
   .ac-select-helper-text {
     align-items: center;
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     display: flex;
     font-size: var(--ac-text-sm);
     gap: var(--ac-spacing-1);
@@ -207,7 +207,7 @@ const selectClasses = [
   }
 
   .ac-select-icon {
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     position: absolute;
     right: var(--ac-select-padding);
     top: 50%;
@@ -228,7 +228,7 @@ const selectClasses = [
     z-index: 1;
 
     > div {
-      background-color: rgb(var(--ac-white));
+      background-color: rgb(var(--ac-color-100));
       border-radius: var(--ac-select-border-radius);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       list-style: none;
@@ -240,7 +240,7 @@ const selectClasses = [
 
   .ac-select-list {
     -ms-overflow-style: none;
-    border-color: rgb(var(--ac-gray-100));
+    border-color: rgb(var(--ac-color-200));
     border-radius: var(--ac-rounded-xl);
     border-width: var(--ac-border-1);
     display: flex;
@@ -255,9 +255,9 @@ const selectClasses = [
 
     > li > button {
       align-items: center;
-      background-color: rgb(var(--ac-white));
+      background-color: rgb(var(--ac-color-100));
       border-radius: var(--ac-rounded-lg);
-      color: rgb(var(--ac-gray-400));
+      color: rgb(var(--ac-color-500));
       cursor: pointer;
       display: flex;
       font-size: var(--ac-text-sm);
@@ -288,7 +288,7 @@ const selectClasses = [
 
       &.is-selected {
         background-color: rgba(var(--ac-primary), 0.1);
-        color: rgb(var(--ac-dark));
+        color: rgb(var(--ac-color-700));
 
         > svg {
           opacity: 1;

package/src/components/Switch.astro

@@ -18,7 +18,7 @@ const switchClasses = ['ac-switch', className].filter(Boolean).join(' ')
 <style>
   .ac-switch-wrapper {
     align-items: center;
-    color: rgb(var(--ac-gray-400));
+    color: rgb(var(--ac-color-500));
     cursor: pointer;
     display: inline-flex;
     font-family: var(--ac-font-sans);
@@ -36,7 +36,7 @@ const switchClasses = ['ac-switch', className].filter(Boolean).join(' ')
 
   .ac-switch {
     appearance: none;
-    background-color: rgb(var(--ac-white));
+    background-color: transparent;
     border-color: rgb(var(--ac-primary));
     border-radius: var(--ac-rounded-full);
     border-style: solid;
@@ -72,7 +72,7 @@ const switchClasses = ['ac-switch', className].filter(Boolean).join(' ')
     }
 
     &:checked + .ac-switch-dot:first-of-type + .ac-switch-label {
-      color: rgb(var(--ac-dark));
+      color: rgb(var(--ac-color-700));
     }
 
     &:checked + .ac-switch-dot {

package/src/components/Textarea.astro

@@ -86,12 +86,12 @@ const inputClasses = ['ac-textarea', statusClasses, className]
 
   .ac-textarea {
     appearance: none;
-    background-color: rgb(var(--ac-white));
+    background-color: rgb(var(--ac-color-100));
     background-image: none;
-    border-color: rgb(var(--ac-gray-100));
+    border-color: rgb(var(--ac-color-200));
     border-radius: var(--ac-textarea-border-radius);
     border-width: var(--ac-border-2);
-    color: var(--ac-dark);
+    color: var(--ac-color-700);
     font-family: var(--ac-font-sans);
     font-size: var(--ac-text-base);
     form-sizing: content;
@@ -102,7 +102,7 @@ const inputClasses = ['ac-textarea', statusClasses, className]
     width: 100%;
 
     &:hover {
-      border-color: rgb(var(--ac-gray-200));
+      border-color: rgb(var(--ac-color-300));
     }
 
     &:focus {
@@ -111,7 +111,7 @@ const inputClasses = ['ac-textarea', statusClasses, className]
     }
 
     &:disabled {
-      background-color: rgb(var(--ac-gray-100));
+      background-color: rgb(var(--ac-color-200));
     }
 
     &.ac-textarea--error {
@@ -120,13 +120,13 @@ const inputClasses = ['ac-textarea', statusClasses, className]
   }
 
   .ac-textarea-label {
-    color: rgb(var(--ac-gray-400));
+    color: rgb(var(--ac-color-500));
     font-size: var(--ac-text-sm);
   }
 
   .ac-textarea-helper-text {
     align-items: center;
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     display: flex;
     font-size: var(--ac-text-sm);
     gap: var(--ac-spacing-1);
@@ -139,7 +139,7 @@ const inputClasses = ['ac-textarea', statusClasses, className]
   }
 
   .ac-textarea-icon {
-    color: rgb(var(--ac-gray-300));
+    color: rgb(var(--ac-color-400));
     height: var(--ac-spacing-6);
     position: absolute;
     top: var(--ac-textarea-padding-y);

package/src/css/input.css

@@ -5,9 +5,9 @@
 }
 
 input::placeholder {
-  color: rgb(var(--ac-gray-300));
+  color: rgb(var(--ac-color-400));
 }
 
 .ac-input-wrapper .ac-input:read-only {
-  background-color: rgb(var(--ac-gray-100));
+  background-color: rgb(var(--ac-color-200));
 }

package/src/css/main.css

@@ -95,6 +95,28 @@
   --ac-rounded-full: 9999px;
 }
 
+.dark,
+[data-theme='dark'] {
+  --ac-color-100: var(--ac-dark);
+  --ac-color-200: var(--ac-gray-500);
+  --ac-color-300: var(--ac-gray-400);
+  --ac-color-400: var(--ac-gray-300);
+  --ac-color-500: var(--ac-gray-200);
+  --ac-color-600: var(--ac-gray-100);
+  --ac-color-700: var(--ac-white);
+}
+
+.light,
+[data-theme='light'] {
+  --ac-color-100: var(--ac-white);
+  --ac-color-200: var(--ac-gray-100);
+  --ac-color-300: var(--ac-gray-200);
+  --ac-color-400: var(--ac-gray-300);
+  --ac-color-500: var(--ac-gray-400);
+  --ac-color-600: var(--ac-gray-500);
+  --ac-color-700: var(--ac-dark);
+}
+
 *,
 ::before,
 ::after {

package/src/css/textarea.css

@@ -6,9 +6,9 @@
 }
 
 textarea::placeholder {
-  color: rgb(var(--ac-gray-300));
+  color: rgb(var(--ac-color-400));
 }
 
 .ac-textarea-wrapper .ac-textarea:read-only {
-  background-color: rgb(var(--ac-gray-100));
+  background-color: rgb(var(--ac-color-200));
 }

package/src/layouts/Layout.astro

@@ -3,13 +3,19 @@ import '../css/main.css'
 
 interface Props {
   title: string
+  class?: string
 }
 
-const { title } = Astro.props
+const { title, class: className = 'dark' } = Astro.props
+
+const colorScheme = {
+  light: 'light',
+  dark: 'dark',
+}[className]
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class={className} style={`color-scheme: ${colorScheme};`}>
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />

package/src/pages/buttons.astro

@@ -70,92 +70,74 @@ import Button from '../components/Button.astro'
         <Button variant="dark" icon="arrow-right" disabled />
       </div>
 
-      <div class="dark-bg">
-        <p>Secondary buttons</p>
-        <div>
-          <Button size="small" icon="arrow-right" label="Primary Button" />
-          <Button icon="arrow-right" label="Primary Button" />
-          <Button size="small" icon="arrow-right" />
-          <Button icon="arrow-right" />
-          <Button
-            variant="secondary"
-            size="small"
-            icon="arrow-right"
-            label="Primary Button"
-          />
-          <Button
-            variant="secondary"
-            icon="arrow-right"
-            label="Primary Button"
-          />
-          <Button variant="secondary" size="small" icon="arrow-right" />
-          <Button variant="secondary" icon="arrow-right" />
-        </div>
-        <div>
-          <Button
-            variant="secondary"
-            size="small"
-            icon="arrow-right"
-            label="Primary Button"
-            disabled
-          />
-          <Button
-            variant="secondary"
-            icon="arrow-right"
-            label="Primary Button"
-            disabled
-          />
-          <Button
-            variant="secondary"
-            size="small"
-            icon="arrow-right"
-            disabled
-          />
-          <Button variant="secondary" icon="arrow-right" disabled />
-        </div>
-        <p>light buttons</p>
-        <div>
-          <Button
-            variant="light"
-            size="small"
-            icon="arrow-right"
-            label="light Button"
-          />
-          <Button variant="light" icon="arrow-right" label="light Button" />
-          <Button variant="light" size="small" icon="arrow-right" />
-          <Button variant="light" icon="arrow-right" />
-        </div>
-        <div>
-          <Button
-            variant="light"
-            size="small"
-            icon="arrow-right"
-            label="light Button"
-            disabled
-          />
-          <Button
-            variant="light"
-            icon="arrow-right"
-            label="light Button"
-            disabled
-          />
-          <Button variant="light" size="small" icon="arrow-right" disabled />
-          <Button variant="light" icon="arrow-right" disabled />
-        </div>
+      <p>Secondary buttons</p>
+      <div>
+        <Button size="small" icon="arrow-right" label="Primary Button" />
+        <Button icon="arrow-right" label="Primary Button" />
+        <Button size="small" icon="arrow-right" />
+        <Button icon="arrow-right" />
+        <Button
+          variant="secondary"
+          size="small"
+          icon="arrow-right"
+          label="Primary Button"
+        />
+        <Button variant="secondary" icon="arrow-right" label="Primary Button" />
+        <Button variant="secondary" size="small" icon="arrow-right" />
+        <Button variant="secondary" icon="arrow-right" />
+      </div>
+      <div>
+        <Button
+          variant="secondary"
+          size="small"
+          icon="arrow-right"
+          label="Primary Button"
+          disabled
+        />
+        <Button
+          variant="secondary"
+          icon="arrow-right"
+          label="Primary Button"
+          disabled
+        />
+        <Button variant="secondary" size="small" icon="arrow-right" disabled />
+        <Button variant="secondary" icon="arrow-right" disabled />
+      </div>
+      <p>light buttons</p>
+      <div>
+        <Button
+          variant="light"
+          size="small"
+          icon="arrow-right"
+          label="light Button"
+        />
+        <Button variant="light" icon="arrow-right" label="light Button" />
+        <Button variant="light" size="small" icon="arrow-right" />
+        <Button variant="light" icon="arrow-right" />
+      </div>
+      <div>
+        <Button
+          variant="light"
+          size="small"
+          icon="arrow-right"
+          label="light Button"
+          disabled
+        />
+        <Button
+          variant="light"
+          icon="arrow-right"
+          label="light Button"
+          disabled
+        />
+        <Button variant="light" size="small" icon="arrow-right" disabled />
+        <Button variant="light" icon="arrow-right" disabled />
       </div>
     </div>
   </main>
 </Layout>
 
 <style>
-  /*@import '../css/preflight.css';*/
   .content {
     padding: var(--ac-spacing-8);
   }
-
-  .dark-bg {
-    background-color: rgb(var(--ac-dark));
-    color: rgb(var(--ac-white));
-    padding: var(--ac-spacing-8);
-  }
 </style>

package/src/pages/controls.astro

@@ -64,8 +64,6 @@ import Switch from '../components/Switch.astro'
 </Layout>
 
 <style>
-  /*@import '../css/preflight.css';*/
-
   .content {
     padding: var(--ac-spacing-8);
   }