@als-tp/als-react-ts-ui 0.5.3 → 0.5.4

package/README.md

@@ -130,9 +130,138 @@ The library uses CSS variables for theming. You can override these in your globa
 
 ```css
 :root {
-  --primary-color: #your-color;
-  --secondary-color: #your-color;
-  /* ... other variables */
+    /* Typography Scale */
+    --font-family-base: "F37 Beckett", "Segoe UI", system-ui, -apple-system,
+        "Helvetica Neue", arial, sans-serif;
+    --font-weight-regular: 400;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --line-height-tight: 1.25;
+    --line-height-base: 1.5;
+    --line-height-relaxed: 1.75;
+
+    /* Fluid Typography Scale */
+    --font-h1: clamp(2.5rem, 4vw + 1rem, 3.5rem); /* 40-56px */
+    --font-h2: clamp(2rem, 3vw + 0.5rem, 2.75rem); /* 32-44px */
+    --font-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* 24-32px */
+    --font-h4: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); /* 20-28px */
+    --font-h5: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); /* 18-24px */
+    --font-h6: clamp(1rem, 0.5vw + 0.5rem, 1.25rem); /* 16-20px */
+    --font-base: 1rem; /* 16px */
+    --font-small: 0.875rem; /* 14px */
+    --font-tiny: 0.75rem; /* 12px */
+
+    /* Spacing Scale */
+    --space-xs: 0.25rem; /* 4px */
+    --space-sm: 0.5rem; /* 8px */
+    --space-md: 1rem; /* 16px */
+    --space-lg: 1.5rem; /* 24px */
+    --space-xl: 2rem; /* 32px */
+    --space-2xl: 3rem; /* 48px */
+    --space-3xl: 4rem; /* 64px */
+
+    /* Border Radius */
+    --radius-sm: 0.25rem; /* 4px */
+    --radius-md: 0.5rem; /* 8px */
+    --radius-lg: 0.75rem; /* 12px */
+    --radius-xl: 1rem; /* 16px */
+    --radius-full: 9999px;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%),
+        0 2px 4px -2px rgb(0 0 0 / 10%);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%),
+        0 4px 6px -4px rgb(0 0 0 / 10%);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%),
+        0 8px 10px -6px rgb(0 0 0 / 10%);
+
+    /* Transitions */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-duration-fast: 150ms;
+    --transition-duration-base: 250ms;
+    --transition-duration-slow: 350ms;
+
+    /* Z-Index Scale */
+    --z-base: 1;
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-fixed: 300;
+    --z-modal-backdrop: 400;
+    --z-modal: 500;
+    --z-popover: 600;
+    --z-tooltip: 700;
+
+    /* ALS Color Palette */
+
+    --color-als-white: #fff;
+    --color-als-black: #000;
+
+    /* ALS Grays */
+    --color-als-gray-100: #f2f5f7;
+    --color-als-gray-500: #d9e1e5;
+    --color-als-gray-900: #b0b9be;
+
+    /* ALS Blues */
+
+    /* Dark blue  */
+    --color-als-dark-blue: #1f3349;
+
+    /* Primary blue */
+
+    --color-als-blue-100: #d9ecf9;
+    --color-als-blue-500: #9fd7ff;
+    --color-als-blue-900: #45b1ff;
+
+    /* Aux blue */
+    --color-als-aux-blue-100: #c9f1ff;
+    --color-als-aux-blue-200: #93e2ff;
+    --color-als-aux-blue-300: #5dd4ff;
+    --color-als-aux-blue-500: #00b0f0;
+    --color-als-aux-blue-800: #0084b4;
+    --color-als-aux-blue-900: #005878;
+
+    /* ALS Beiges */
+    --color-als-beige-100: #ffedcb;
+    --color-als-beige-500: #ecd8b3;
+    --color-als-beige-900: #cfb88e;
+
+    /* ALS Greens */
+    --color-als-green-100: #d0eed5;
+    --color-als-green-500: #a8d3af;
+    --color-als-green-900: #7ec68a;
+
+    /* ALS Reds */
+    --color-als-red-100: #ffdfdf;
+    --color-als-red-500: #ff6f6f;
+    --color-als-red-900: #f00;
+
+    /* Semantic Colors */
+    --color-success: var(--color-als-green-500);
+    --color-warning: var(--color-als-beige-500);
+    --color-error: var(--color-als-red-500);
+    --color-info: var(--color-als-blue-500);
+
+    /* Background Colors */
+    --bg-primary: var(--color-als-gray-100);
+
+    /* Text Colors */
+    --text-primary: var(--color-als-dark-blue);
+    --text-secondary: var(--color-als-gray-900); /* o el color que prefieras */
+
+    /* Border Colors */
+    --border-primary: var(--color-als-gray-500);
+    --border-secondary: var(--color-als-gray-100);
+    --border-focus: var(--color-als-blue-500);
+
+    /* Menu Size  */
+    --sidenav-width-expanded: 16rem; /* 256px */
+    --sidenav-width-collapsed: 4rem; /* 64px */
+
+    /* Header Size */
+    --header-height: 4rem; /* 64px */
 }
 ```
 
@@ -147,7 +276,7 @@ pnpm run build:lib
 ### Running Storybook
 
 ```bash
-pnpm run storybook
+pnpm storybook
 ```
 
 ### Running Tests
@@ -156,17 +285,11 @@ pnpm run storybook
 pnpm test
 ```
 
-## Contributing
-
-Contributions are welcome! Please read our contributing guidelines before submitting PRs.
-
 ## License
 
 MIT © ALS TP
 
 ## Links
 
-- [GitHub Repository](https://github.com/als-tp/als-react-ts-ui)
-- [Issue Tracker](https://github.com/als-tp/als-react-ts-ui/issues)
 - [Base UI Documentation](https://base-ui.com/)