@casoon/atlas-styles 0.0.9 → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,292 @@
+/**
+ * Atlas UI Component Tokens
+ *
+ * Design tokens specifically for UI components.
+ * These tokens complement the core.css tokens and provide
+ * semantic naming for component styling.
+ *
+ * Usage: @import "@casoon/atlas-styles/tokens";
+ */
+
+:root {
+  /* ========================================
+     Semantic Color Tokens
+     Using HSL format for flexibility
+     ======================================== */
+
+  /* Background & Foreground */
+  --atlas-background: 220 14% 4%;
+  --atlas-foreground: 220 13% 95%;
+
+  /* Surface Colors (Cards, Popovers) */
+  --atlas-card: 220 14% 7%;
+  --atlas-card-foreground: 220 13% 95%;
+
+  --atlas-popover: 220 14% 7%;
+  --atlas-popover-foreground: 220 13% 95%;
+
+  /* Primary (Brand) */
+  --atlas-primary: 224 76% 65%;
+  --atlas-primary-foreground: 220 14% 4%;
+
+  /* Secondary */
+  --atlas-secondary: 220 14% 14%;
+  --atlas-secondary-foreground: 220 13% 95%;
+
+  /* Muted (Subtle backgrounds) */
+  --atlas-muted: 220 14% 14%;
+  --atlas-muted-foreground: 220 9% 70%;
+
+  /* Accent (Hover states) */
+  --atlas-accent: 220 14% 14%;
+  --atlas-accent-foreground: 220 13% 95%;
+
+  /* Destructive (Errors, danger) */
+  --atlas-destructive: 0 72% 51%;
+  --atlas-destructive-foreground: 0 0% 98%;
+
+  /* Success */
+  --atlas-success: 142 71% 45%;
+  --atlas-success-foreground: 0 0% 98%;
+
+  /* Warning */
+  --atlas-warning: 38 92% 50%;
+  --atlas-warning-foreground: 0 0% 4%;
+
+  /* Info */
+  --atlas-info: 199 89% 48%;
+  --atlas-info-foreground: 0 0% 98%;
+
+  /* Border, Input, Ring */
+  --atlas-border: 220 14% 18%;
+  --atlas-input: 220 14% 18%;
+  --atlas-ring: 224 76% 65%;
+
+  /* ========================================
+     Border Radius
+     ======================================== */
+  --atlas-radius-none: 0;
+  --atlas-radius-sm: 0.25rem;
+  --atlas-radius: 0.5rem;
+  --atlas-radius-md: 0.5rem;
+  --atlas-radius-lg: 0.75rem;
+  --atlas-radius-xl: 1rem;
+  --atlas-radius-2xl: 1.5rem;
+  --atlas-radius-full: 9999px;
+
+  /* ========================================
+     Shadows
+     ======================================== */
+  --atlas-shadow-xs: 0 1px 2px 0 hsl(var(--atlas-foreground) / 0.03);
+  --atlas-shadow-sm:
+    0 1px 3px 0 hsl(var(--atlas-foreground) / 0.05),
+    0 1px 2px -1px hsl(var(--atlas-foreground) / 0.05);
+  --atlas-shadow-md:
+    0 4px 6px -1px hsl(var(--atlas-foreground) / 0.08),
+    0 2px 4px -2px hsl(var(--atlas-foreground) / 0.05);
+  --atlas-shadow-lg:
+    0 10px 15px -3px hsl(var(--atlas-foreground) / 0.08),
+    0 4px 6px -4px hsl(var(--atlas-foreground) / 0.05);
+  --atlas-shadow-xl:
+    0 20px 25px -5px hsl(var(--atlas-foreground) / 0.1),
+    0 8px 10px -6px hsl(var(--atlas-foreground) / 0.05);
+  --atlas-shadow-2xl: 0 25px 50px -12px hsl(var(--atlas-foreground) / 0.25);
+
+  /* ========================================
+     Transitions
+     ======================================== */
+  --atlas-duration-instant: 0ms;
+  --atlas-duration-fast: 150ms;
+  --atlas-duration-normal: 200ms;
+  --atlas-duration-slow: 300ms;
+  --atlas-duration-slower: 500ms;
+
+  --atlas-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --atlas-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --atlas-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --atlas-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --atlas-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --atlas-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* ========================================
+     Typography
+     ======================================== */
+  --atlas-font-sans:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --atlas-font-mono:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+  --atlas-text-xs: 0.75rem;
+  --atlas-text-sm: 0.875rem;
+  --atlas-text-base: 1rem;
+  --atlas-text-lg: 1.125rem;
+  --atlas-text-xl: 1.25rem;
+  --atlas-text-2xl: 1.5rem;
+  --atlas-text-3xl: 1.875rem;
+  --atlas-text-4xl: 2.25rem;
+
+  --atlas-leading-none: 1;
+  --atlas-leading-tight: 1.25;
+  --atlas-leading-snug: 1.375;
+  --atlas-leading-normal: 1.5;
+  --atlas-leading-relaxed: 1.625;
+  --atlas-leading-loose: 2;
+
+  --atlas-font-thin: 100;
+  --atlas-font-light: 300;
+  --atlas-font-normal: 400;
+  --atlas-font-medium: 500;
+  --atlas-font-semibold: 600;
+  --atlas-font-bold: 700;
+  --atlas-font-extrabold: 800;
+
+  /* ========================================
+     Spacing
+     ======================================== */
+  --atlas-space-0: 0;
+  --atlas-space-px: 1px;
+  --atlas-space-0-5: 0.125rem;
+  --atlas-space-1: 0.25rem;
+  --atlas-space-1-5: 0.375rem;
+  --atlas-space-2: 0.5rem;
+  --atlas-space-2-5: 0.625rem;
+  --atlas-space-3: 0.75rem;
+  --atlas-space-3-5: 0.875rem;
+  --atlas-space-4: 1rem;
+  --atlas-space-5: 1.25rem;
+  --atlas-space-6: 1.5rem;
+  --atlas-space-7: 1.75rem;
+  --atlas-space-8: 2rem;
+  --atlas-space-9: 2.25rem;
+  --atlas-space-10: 2.5rem;
+  --atlas-space-12: 3rem;
+  --atlas-space-14: 3.5rem;
+  --atlas-space-16: 4rem;
+  --atlas-space-20: 5rem;
+  --atlas-space-24: 6rem;
+
+  /* ========================================
+     Z-Index
+     ======================================== */
+  --atlas-z-hide: -1;
+  --atlas-z-base: 0;
+  --atlas-z-dropdown: 50;
+  --atlas-z-sticky: 100;
+  --atlas-z-drawer: 150;
+  --atlas-z-modal: 200;
+  --atlas-z-popover: 250;
+  --atlas-z-tooltip: 300;
+  --atlas-z-toast: 400;
+  --atlas-z-max: 9999;
+
+  /* ========================================
+     Focus Ring
+     ======================================== */
+  --atlas-ring-width: 2px;
+  --atlas-ring-offset: 2px;
+  --atlas-ring-offset-color: hsl(var(--atlas-background));
+
+  /* ========================================
+     Glass Effect
+     ======================================== */
+  --atlas-glass-blur: 12px;
+  --atlas-glass-bg: hsl(var(--atlas-background) / 0.7);
+  --atlas-glass-border: hsl(var(--atlas-border) / 0.3);
+  --atlas-glass-shadow: 0 4px 6px -1px hsl(var(--atlas-foreground) / 0.1);
+
+  /* ========================================
+     Component-Specific Tokens
+     ======================================== */
+
+  /* Button */
+  --atlas-button-height-sm: 2rem;
+  --atlas-button-height-md: 2.5rem;
+  --atlas-button-height-lg: 2.75rem;
+
+  /* Input */
+  --atlas-input-height-sm: 2rem;
+  --atlas-input-height-md: 2.5rem;
+  --atlas-input-height-lg: 3rem;
+
+  /* Avatar */
+  --atlas-avatar-size-sm: 2rem;
+  --atlas-avatar-size-md: 2.5rem;
+  --atlas-avatar-size-lg: 3rem;
+  --atlas-avatar-size-xl: 4rem;
+
+  /* Dialog/Modal */
+  --atlas-dialog-width-sm: 400px;
+  --atlas-dialog-width-md: 500px;
+  --atlas-dialog-width-lg: 700px;
+  --atlas-dialog-width-xl: 900px;
+
+  /* Sheet/Drawer */
+  --atlas-sheet-width-sm: 320px;
+  --atlas-sheet-width-md: 400px;
+  --atlas-sheet-width-lg: 540px;
+}
+
+/* ========================================
+   Light Mode
+   ======================================== */
+:root[data-theme='light'],
+.light {
+  --atlas-background: 0 0% 100%;
+  --atlas-foreground: 220 14% 10%;
+
+  --atlas-card: 0 0% 100%;
+  --atlas-card-foreground: 220 14% 10%;
+
+  --atlas-popover: 0 0% 100%;
+  --atlas-popover-foreground: 220 14% 10%;
+
+  --atlas-primary: 224 76% 48%;
+  --atlas-primary-foreground: 0 0% 100%;
+
+  --atlas-secondary: 220 14% 96%;
+  --atlas-secondary-foreground: 220 14% 10%;
+
+  --atlas-muted: 220 14% 96%;
+  --atlas-muted-foreground: 220 9% 46%;
+
+  --atlas-accent: 220 14% 96%;
+  --atlas-accent-foreground: 220 14% 10%;
+
+  --atlas-destructive: 0 72% 51%;
+  --atlas-destructive-foreground: 0 0% 98%;
+
+  --atlas-border: 220 14% 90%;
+  --atlas-input: 220 14% 90%;
+  --atlas-ring: 224 76% 48%;
+
+  --atlas-glass-bg: hsl(var(--atlas-background) / 0.8);
+  --atlas-glass-border: hsl(var(--atlas-border) / 0.4);
+
+  --atlas-shadow-sm: 0 1px 3px 0 hsl(220 14% 10% / 0.1), 0 1px 2px -1px hsl(220 14% 10% / 0.1);
+  --atlas-shadow-md: 0 4px 6px -1px hsl(220 14% 10% / 0.1), 0 2px 4px -2px hsl(220 14% 10% / 0.1);
+  --atlas-shadow-lg: 0 10px 15px -3px hsl(220 14% 10% / 0.1), 0 4px 6px -4px hsl(220 14% 10% / 0.1);
+}
+
+/* ========================================
+   High Contrast Mode
+   ======================================== */
+@media (prefers-contrast: more) {
+  :root {
+    --atlas-border: 220 14% 40%;
+    --atlas-ring-width: 3px;
+  }
+}
+
+/* ========================================
+   Reduced Motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --atlas-duration-instant: 0ms;
+    --atlas-duration-fast: 0ms;
+    --atlas-duration-normal: 0ms;
+    --atlas-duration-slow: 0ms;
+    --atlas-duration-slower: 0ms;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casoon/atlas-styles",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
   "type": "module",
   "files": [
@@ -17,11 +17,21 @@
     "./dist/orbs.css": "./dist/orbs.css",
     "./dist/animations.css": "./dist/animations.css",
     "./dist/utilities.css": "./dist/utilities.css",
+    "./dist/components.css": "./dist/components.css",
+    "./dist/tokens.css": "./dist/tokens.css",
+    "./dist/recipes.css": "./dist/recipes.css",
     "./core.css": "./dist/core.css",
     "./glass.css": "./dist/glass.css",
     "./orbs.css": "./dist/orbs.css",
     "./animations.css": "./dist/animations.css",
-    "./utilities.css": "./dist/utilities.css"
+    "./utilities.css": "./dist/utilities.css",
+    "./components.css": "./dist/components.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./recipes.css": "./dist/recipes.css"
+  },
+  "scripts": {
+    "build": "rimraf dist && node build.js",
+    "clean": "rimraf dist"
   },
   "keywords": [
     "tailwind",
@@ -52,9 +62,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "rimraf dist && node build.js",
-    "clean": "rimraf dist"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Jörn Seidel (CASOON)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.