@casoon/atlas-styles 0.0.5 → 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/dist/glass.css

@@ -138,6 +138,110 @@
   --cs-glass-backdrop-filter-extra: none;
 }
 
+/* =========================================================
+   CSS CUSTOM PROPERTIES FOR INLINE STYLES
+   Duplicates @theme tokens as :root variables for use with var()
+   ========================================================= */
+:root {
+  /* === GLASS COLOR SYSTEM === */
+  --cs-glass-white: #ffffff;
+  --cs-glass-black: #000000;
+  --cs-glass-blue: #3b82f6;
+  --cs-glass-purple: #9333ea;
+  --cs-glass-green: #22c55e;
+  --cs-glass-pink: #ec4899;
+  --cs-glass-amber: #f59e0b;
+
+  /* Glass background opacity tokens - Complete range */
+  --cs-glass-bg-xs: rgba(255, 255, 255, 0.02);
+  --cs-glass-bg-sm: rgba(255, 255, 255, 0.07);
+  --cs-glass-bg-light: rgba(255, 255, 255, 0.1);
+  --cs-glass-bg-weak: rgba(255, 255, 255, 0.05);
+  --cs-glass-bg-md: rgba(255, 255, 255, 0.12);
+  --cs-glass-bg-medium: rgba(255, 255, 255, 0.15);
+  --cs-glass-bg-lg: rgba(255, 255, 255, 0.18);
+  --cs-glass-bg-strong: rgba(255, 255, 255, 0.2);
+  --cs-glass-bg-xl: rgba(255, 255, 255, 0.25);
+  --cs-glass-bg-2xl: rgba(255, 255, 255, 0.35);
+  --cs-glass-bg-3xl: rgba(255, 255, 255, 0.45);
+  --cs-glass-bg-4xl: rgba(255, 255, 255, 0.6);
+  --cs-glass-bg-5xl: rgba(255, 255, 255, 0.75);
+
+  /* Dark glass backgrounds - Complete range */
+  --cs-glass-bg-dark: rgba(0, 0, 0, 0.1);
+  --cs-glass-bg-dark-xs: rgba(0, 0, 0, 0.02);
+  --cs-glass-bg-dark-sm: rgba(0, 0, 0, 0.07);
+  --cs-glass-bg-dark-md: rgba(0, 0, 0, 0.12);
+  --cs-glass-bg-dark-lg: rgba(0, 0, 0, 0.18);
+  --cs-glass-bg-dark-strong: rgba(0, 0, 0, 0.2);
+  --cs-glass-bg-dark-xl: rgba(0, 0, 0, 0.25);
+  --cs-glass-bg-dark-2xl: rgba(0, 0, 0, 0.35);
+  --cs-glass-bg-dark-3xl: rgba(0, 0, 0, 0.45);
+  --cs-glass-bg-dark-4xl: rgba(0, 0, 0, 0.6);
+  --cs-glass-bg-dark-5xl: rgba(0, 0, 0, 0.75);
+
+  /* Colored glass backgrounds */
+  --cs-glass-bg-blue: rgba(59, 130, 246, 0.1);
+  --cs-glass-bg-purple: rgba(147, 51, 234, 0.1);
+  --cs-glass-bg-green: rgba(34, 197, 94, 0.1);
+  --cs-glass-bg-pink: rgba(236, 72, 153, 0.1);
+  --cs-glass-bg-amber: rgba(245, 158, 11, 0.1);
+
+  /* Glass border opacity tokens - Complete range */
+  --cs-glass-border-xs: rgba(255, 255, 255, 0.05);
+  --cs-glass-border-sm: rgba(255, 255, 255, 0.08);
+  --cs-glass-border-light: rgba(255, 255, 255, 0.1);
+  --cs-glass-border-md: rgba(255, 255, 255, 0.15);
+  --cs-glass-border-medium: rgba(255, 255, 255, 0.2);
+  --cs-glass-border-lg: rgba(255, 255, 255, 0.25);
+  --cs-glass-border-strong: rgba(255, 255, 255, 0.3);
+  --cs-glass-border-xl: rgba(255, 255, 255, 0.4);
+  --cs-glass-border-2xl: rgba(255, 255, 255, 0.5);
+  --cs-glass-border-3xl: rgba(255, 255, 255, 0.65);
+
+  /* Colored glass borders */
+  --cs-glass-border-blue: rgba(59, 130, 246, 0.2);
+  --cs-glass-border-purple: rgba(147, 51, 234, 0.2);
+  --cs-glass-border-green: rgba(34, 197, 94, 0.2);
+  --cs-glass-border-pink: rgba(236, 72, 153, 0.2);
+  --cs-glass-border-amber: rgba(245, 158, 11, 0.2);
+
+  /* Glass effects tokens */
+  --cs-glass-blur-sm: 8px;
+  --cs-glass-blur: 16px;
+  --cs-glass-blur-lg: 24px;
+  --cs-glass-blur-xl: 32px;
+
+  --cs-glass-radius-sm: 0.25rem;
+  --cs-glass-radius: 0.5rem;
+  --cs-glass-radius-lg: 0.75rem;
+  --cs-glass-radius-xl: 1rem;
+  --cs-glass-radius-2xl: 1.5rem;
+  --cs-glass-radius-3xl: 2rem;
+
+  /* Glass shadow tokens */
+  --cs-glass-shadow-light: rgba(0, 0, 0, 0.05);
+  --cs-glass-shadow-medium: rgba(0, 0, 0, 0.1);
+  --cs-glass-shadow-strong: rgba(0, 0, 0, 0.15);
+  --cs-glass-shadow-xl: rgba(0, 0, 0, 0.2);
+
+  /* Glass misc tokens */
+  --cs-glass-transition: 0.3s;
+  --cs-glass-tooltip-bg: rgba(0, 0, 0, 0.8);
+  --cs-glass-bg-hover: rgba(255, 255, 255, 0.15);
+  --cs-glass-bg-light-hover: rgba(255, 255, 255, 0.25);
+  --cs-glass-bg-contrast: rgba(255, 255, 255, 0.2);
+  --cs-glass-bg-dark-contrast: rgba(0, 0, 0, 0.2);
+  --cs-glass-bg-fallback: rgba(255, 255, 255, 0.25);
+  --cs-glass-bg-dark-fallback: rgba(0, 0, 0, 0.25);
+  --cs-glass-bg-blue-fallback: rgba(59, 130, 246, 0.2);
+  --cs-glass-bg-purple-fallback: rgba(147, 51, 234, 0.2);
+  --cs-glass-bg-green-fallback: rgba(34, 197, 94, 0.2);
+  --cs-glass-bg-pink-fallback: rgba(236, 72, 153, 0.2);
+  --cs-glass-bg-amber-fallback: rgba(245, 158, 11, 0.2);
+  --cs-glass-focus-ring: rgba(59, 130, 246, 0.5);
+}
+
 /* =========================================================
    CORE GLASS UTILITIES
    Base glass backdrop-filter utilities

package/dist/index.css

@@ -4601,6 +4601,110 @@
   --cs-glass-backdrop-filter-extra: none;
 }
 
+/* =========================================================
+   CSS CUSTOM PROPERTIES FOR INLINE STYLES
+   Duplicates @theme tokens as :root variables for use with var()
+   ========================================================= */
+:root {
+  /* === GLASS COLOR SYSTEM === */
+  --cs-glass-white: #ffffff;
+  --cs-glass-black: #000000;
+  --cs-glass-blue: #3b82f6;
+  --cs-glass-purple: #9333ea;
+  --cs-glass-green: #22c55e;
+  --cs-glass-pink: #ec4899;
+  --cs-glass-amber: #f59e0b;
+
+  /* Glass background opacity tokens - Complete range */
+  --cs-glass-bg-xs: rgba(255, 255, 255, 0.02);
+  --cs-glass-bg-sm: rgba(255, 255, 255, 0.07);
+  --cs-glass-bg-light: rgba(255, 255, 255, 0.1);
+  --cs-glass-bg-weak: rgba(255, 255, 255, 0.05);
+  --cs-glass-bg-md: rgba(255, 255, 255, 0.12);
+  --cs-glass-bg-medium: rgba(255, 255, 255, 0.15);
+  --cs-glass-bg-lg: rgba(255, 255, 255, 0.18);
+  --cs-glass-bg-strong: rgba(255, 255, 255, 0.2);
+  --cs-glass-bg-xl: rgba(255, 255, 255, 0.25);
+  --cs-glass-bg-2xl: rgba(255, 255, 255, 0.35);
+  --cs-glass-bg-3xl: rgba(255, 255, 255, 0.45);
+  --cs-glass-bg-4xl: rgba(255, 255, 255, 0.6);
+  --cs-glass-bg-5xl: rgba(255, 255, 255, 0.75);
+
+  /* Dark glass backgrounds - Complete range */
+  --cs-glass-bg-dark: rgba(0, 0, 0, 0.1);
+  --cs-glass-bg-dark-xs: rgba(0, 0, 0, 0.02);
+  --cs-glass-bg-dark-sm: rgba(0, 0, 0, 0.07);
+  --cs-glass-bg-dark-md: rgba(0, 0, 0, 0.12);
+  --cs-glass-bg-dark-lg: rgba(0, 0, 0, 0.18);
+  --cs-glass-bg-dark-strong: rgba(0, 0, 0, 0.2);
+  --cs-glass-bg-dark-xl: rgba(0, 0, 0, 0.25);
+  --cs-glass-bg-dark-2xl: rgba(0, 0, 0, 0.35);
+  --cs-glass-bg-dark-3xl: rgba(0, 0, 0, 0.45);
+  --cs-glass-bg-dark-4xl: rgba(0, 0, 0, 0.6);
+  --cs-glass-bg-dark-5xl: rgba(0, 0, 0, 0.75);
+
+  /* Colored glass backgrounds */
+  --cs-glass-bg-blue: rgba(59, 130, 246, 0.1);
+  --cs-glass-bg-purple: rgba(147, 51, 234, 0.1);
+  --cs-glass-bg-green: rgba(34, 197, 94, 0.1);
+  --cs-glass-bg-pink: rgba(236, 72, 153, 0.1);
+  --cs-glass-bg-amber: rgba(245, 158, 11, 0.1);
+
+  /* Glass border opacity tokens - Complete range */
+  --cs-glass-border-xs: rgba(255, 255, 255, 0.05);
+  --cs-glass-border-sm: rgba(255, 255, 255, 0.08);
+  --cs-glass-border-light: rgba(255, 255, 255, 0.1);
+  --cs-glass-border-md: rgba(255, 255, 255, 0.15);
+  --cs-glass-border-medium: rgba(255, 255, 255, 0.2);
+  --cs-glass-border-lg: rgba(255, 255, 255, 0.25);
+  --cs-glass-border-strong: rgba(255, 255, 255, 0.3);
+  --cs-glass-border-xl: rgba(255, 255, 255, 0.4);
+  --cs-glass-border-2xl: rgba(255, 255, 255, 0.5);
+  --cs-glass-border-3xl: rgba(255, 255, 255, 0.65);
+
+  /* Colored glass borders */
+  --cs-glass-border-blue: rgba(59, 130, 246, 0.2);
+  --cs-glass-border-purple: rgba(147, 51, 234, 0.2);
+  --cs-glass-border-green: rgba(34, 197, 94, 0.2);
+  --cs-glass-border-pink: rgba(236, 72, 153, 0.2);
+  --cs-glass-border-amber: rgba(245, 158, 11, 0.2);
+
+  /* Glass effects tokens */
+  --cs-glass-blur-sm: 8px;
+  --cs-glass-blur: 16px;
+  --cs-glass-blur-lg: 24px;
+  --cs-glass-blur-xl: 32px;
+
+  --cs-glass-radius-sm: 0.25rem;
+  --cs-glass-radius: 0.5rem;
+  --cs-glass-radius-lg: 0.75rem;
+  --cs-glass-radius-xl: 1rem;
+  --cs-glass-radius-2xl: 1.5rem;
+  --cs-glass-radius-3xl: 2rem;
+
+  /* Glass shadow tokens */
+  --cs-glass-shadow-light: rgba(0, 0, 0, 0.05);
+  --cs-glass-shadow-medium: rgba(0, 0, 0, 0.1);
+  --cs-glass-shadow-strong: rgba(0, 0, 0, 0.15);
+  --cs-glass-shadow-xl: rgba(0, 0, 0, 0.2);
+
+  /* Glass misc tokens */
+  --cs-glass-transition: 0.3s;
+  --cs-glass-tooltip-bg: rgba(0, 0, 0, 0.8);
+  --cs-glass-bg-hover: rgba(255, 255, 255, 0.15);
+  --cs-glass-bg-light-hover: rgba(255, 255, 255, 0.25);
+  --cs-glass-bg-contrast: rgba(255, 255, 255, 0.2);
+  --cs-glass-bg-dark-contrast: rgba(0, 0, 0, 0.2);
+  --cs-glass-bg-fallback: rgba(255, 255, 255, 0.25);
+  --cs-glass-bg-dark-fallback: rgba(0, 0, 0, 0.25);
+  --cs-glass-bg-blue-fallback: rgba(59, 130, 246, 0.2);
+  --cs-glass-bg-purple-fallback: rgba(147, 51, 234, 0.2);
+  --cs-glass-bg-green-fallback: rgba(34, 197, 94, 0.2);
+  --cs-glass-bg-pink-fallback: rgba(236, 72, 153, 0.2);
+  --cs-glass-bg-amber-fallback: rgba(245, 158, 11, 0.2);
+  --cs-glass-focus-ring: rgba(59, 130, 246, 0.5);
+}
+
 /* =========================================================
    CORE GLASS UTILITIES
    Base glass backdrop-filter utilities
@@ -5876,6 +5980,49 @@
   );
 }
 
+/* =========================================================
+   CSS CUSTOM PROPERTIES FOR INLINE STYLES
+   Duplicates @theme tokens as :root variables for use with var()
+   ========================================================= */
+:root {
+  /* Base palette colors */
+  --cs-text: #0f172a;
+  --cs-text-inverse: #ffffff;
+  --cs-bg: #ffffff;
+  --cs-surface: #ffffff;
+  --cs-surface-2: #f8fafc;
+  --cs-border: #e5e7eb;
+
+  /* Orb colors */
+  --cs-orb-blue: #3b82f6;
+  --cs-orb-blue-light: #93c5fd;
+  --cs-orb-blue-lighter: #dbeafe;
+  --cs-orb-purple: #9333ea;
+  --cs-orb-purple-light: #c4b5fd;
+  --cs-orb-purple-lighter: #ede9fe;
+  --cs-orb-pink: #ec4899;
+  --cs-orb-pink-light: #fbcfe8;
+  --cs-orb-pink-lighter: #fdf2f8;
+  --cs-orb-custom-primary: #667eea;
+  --cs-orb-custom-secondary: #764ba2;
+  --cs-orb-custom-accent: #f093fb;
+  --cs-orb-green: #22c55e;
+  --cs-orb-amber: #f59e0b;
+
+  /* Opacity tokens */
+  --cs-opacity-strong: 0.5;
+  --cs-opacity-medium: 0.3;
+  --cs-opacity-weak: 0.1;
+
+  /* Motion & transitions */
+  --cs-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --cs-anim-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --cs-anim-ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --cs-anim-duration-float: 6s;
+  --cs-anim-duration-pulse: 4s;
+  --cs-anim-duration-drift: 8s;
+}
+
 /* =========================================================
    Base Orb Utility
    ========================================================= */

package/dist/orbs.css

@@ -202,6 +202,49 @@
   );
 }
 
+/* =========================================================
+   CSS CUSTOM PROPERTIES FOR INLINE STYLES
+   Duplicates @theme tokens as :root variables for use with var()
+   ========================================================= */
+:root {
+  /* Base palette colors */
+  --cs-text: #0f172a;
+  --cs-text-inverse: #ffffff;
+  --cs-bg: #ffffff;
+  --cs-surface: #ffffff;
+  --cs-surface-2: #f8fafc;
+  --cs-border: #e5e7eb;
+
+  /* Orb colors */
+  --cs-orb-blue: #3b82f6;
+  --cs-orb-blue-light: #93c5fd;
+  --cs-orb-blue-lighter: #dbeafe;
+  --cs-orb-purple: #9333ea;
+  --cs-orb-purple-light: #c4b5fd;
+  --cs-orb-purple-lighter: #ede9fe;
+  --cs-orb-pink: #ec4899;
+  --cs-orb-pink-light: #fbcfe8;
+  --cs-orb-pink-lighter: #fdf2f8;
+  --cs-orb-custom-primary: #667eea;
+  --cs-orb-custom-secondary: #764ba2;
+  --cs-orb-custom-accent: #f093fb;
+  --cs-orb-green: #22c55e;
+  --cs-orb-amber: #f59e0b;
+
+  /* Opacity tokens */
+  --cs-opacity-strong: 0.5;
+  --cs-opacity-medium: 0.3;
+  --cs-opacity-weak: 0.1;
+
+  /* Motion & transitions */
+  --cs-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --cs-anim-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --cs-anim-ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --cs-anim-duration-float: 6s;
+  --cs-anim-duration-pulse: 4s;
+  --cs-anim-duration-drift: 8s;
+}
+
 /* =========================================================
    Base Orb Utility
    ========================================================= */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casoon/atlas-styles",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
   "type": "module",
   "files": [
@@ -23,10 +23,6 @@
     "./animations.css": "./dist/animations.css",
     "./utilities.css": "./dist/utilities.css"
   },
-  "scripts": {
-    "build": "rimraf dist && node build.js",
-    "clean": "rimraf dist"
-  },
   "keywords": [
     "tailwind",
     "css",
@@ -56,5 +52,9 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && node build.js",
+    "clean": "rimraf dist"
   }
-}
+}