@casoon/atlas-styles 0.1.0 → 0.2.0

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

@@ -10133,6 +10133,12 @@
  */
 
 :root {
+  /* ========================================
+     Color Scheme
+     Enables native dark/light mode support
+     ======================================== */
+  color-scheme: dark light;
+
   /* ========================================
      Semantic Color Tokens
      Using HSL format for flexibility
@@ -10356,6 +10362,8 @@
    ======================================== */
 :root[data-theme='light'],
 .light {
+  color-scheme: light;
+
   --atlas-background: 0 0% 100%;
   --atlas-foreground: 220 14% 10%;
 

package/dist/tokens.css

@@ -9,6 +9,12 @@
  */
 
 :root {
+  /* ========================================
+     Color Scheme
+     Enables native dark/light mode support
+     ======================================== */
+  color-scheme: dark light;
+
   /* ========================================
      Semantic Color Tokens
      Using HSL format for flexibility
@@ -232,6 +238,8 @@
    ======================================== */
 :root[data-theme='light'],
 .light {
+  color-scheme: light;
+
   --atlas-background: 0 0% 100%;
   --atlas-foreground: 220 14% 10%;
 

package/package.json

@@ -1,16 +1,26 @@
 {
   "name": "@casoon/atlas-styles",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src/preset.js"
   ],
   "sideEffects": [
     "./dist/**/*.css"
   ],
   "exports": {
     ".": "./dist/index.css",
+    "./preset": "./src/preset.js",
+    "./tokens": "./dist/tokens.css",
+    "./core": "./dist/core.css",
+    "./glass": "./dist/glass.css",
+    "./orbs": "./dist/orbs.css",
+    "./animations": "./dist/animations.css",
+    "./utilities": "./dist/utilities.css",
+    "./components": "./dist/components.css",
+    "./recipes": "./dist/recipes.css",
     "./dist/index.css": "./dist/index.css",
     "./dist/core.css": "./dist/core.css",
     "./dist/glass.css": "./dist/glass.css",
@@ -29,10 +39,6 @@
     "./tokens.css": "./dist/tokens.css",
     "./recipes.css": "./dist/recipes.css"
   },
-  "scripts": {
-    "build": "rimraf dist && node build.js",
-    "clean": "rimraf dist"
-  },
   "keywords": [
     "tailwind",
     "css",
@@ -62,5 +68,9 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && node build.js",
+    "clean": "rimraf dist"
   }
-}
+}

package/src/preset.js

@@ -0,0 +1,156 @@
+/**
+ * Atlas Tailwind v4 Preset
+ *
+ * Maps Atlas CSS variables to Tailwind utility classes.
+ * This preset only provides variable mappings - all actual values
+ * are defined in tokens.css and can be overridden there.
+ *
+ * Usage in tailwind.config.js:
+ *   import atlasPreset from '@casoon/atlas-styles/preset'
+ *   export default { presets: [atlasPreset] }
+ *
+ * @see https://tailwindcss.com/docs/presets
+ */
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        atlas: {
+          background: 'hsl(var(--atlas-background) / <alpha-value>)',
+          foreground: 'hsl(var(--atlas-foreground) / <alpha-value>)',
+          card: 'hsl(var(--atlas-card) / <alpha-value>)',
+          'card-foreground': 'hsl(var(--atlas-card-foreground) / <alpha-value>)',
+          popover: 'hsl(var(--atlas-popover) / <alpha-value>)',
+          'popover-foreground': 'hsl(var(--atlas-popover-foreground) / <alpha-value>)',
+          primary: 'hsl(var(--atlas-primary) / <alpha-value>)',
+          'primary-foreground': 'hsl(var(--atlas-primary-foreground) / <alpha-value>)',
+          secondary: 'hsl(var(--atlas-secondary) / <alpha-value>)',
+          'secondary-foreground': 'hsl(var(--atlas-secondary-foreground) / <alpha-value>)',
+          muted: 'hsl(var(--atlas-muted) / <alpha-value>)',
+          'muted-foreground': 'hsl(var(--atlas-muted-foreground) / <alpha-value>)',
+          accent: 'hsl(var(--atlas-accent) / <alpha-value>)',
+          'accent-foreground': 'hsl(var(--atlas-accent-foreground) / <alpha-value>)',
+          destructive: 'hsl(var(--atlas-destructive) / <alpha-value>)',
+          'destructive-foreground': 'hsl(var(--atlas-destructive-foreground) / <alpha-value>)',
+          success: 'hsl(var(--atlas-success) / <alpha-value>)',
+          'success-foreground': 'hsl(var(--atlas-success-foreground) / <alpha-value>)',
+          warning: 'hsl(var(--atlas-warning) / <alpha-value>)',
+          'warning-foreground': 'hsl(var(--atlas-warning-foreground) / <alpha-value>)',
+          info: 'hsl(var(--atlas-info) / <alpha-value>)',
+          'info-foreground': 'hsl(var(--atlas-info-foreground) / <alpha-value>)',
+          border: 'hsl(var(--atlas-border) / <alpha-value>)',
+          input: 'hsl(var(--atlas-input) / <alpha-value>)',
+          ring: 'hsl(var(--atlas-ring) / <alpha-value>)',
+        },
+      },
+      borderRadius: {
+        atlas: 'var(--atlas-radius)',
+        'atlas-sm': 'var(--atlas-radius-sm)',
+        'atlas-md': 'var(--atlas-radius-md)',
+        'atlas-lg': 'var(--atlas-radius-lg)',
+        'atlas-xl': 'var(--atlas-radius-xl)',
+        'atlas-2xl': 'var(--atlas-radius-2xl)',
+        'atlas-full': 'var(--atlas-radius-full)',
+      },
+      boxShadow: {
+        'atlas-xs': 'var(--atlas-shadow-xs)',
+        'atlas-sm': 'var(--atlas-shadow-sm)',
+        'atlas-md': 'var(--atlas-shadow-md)',
+        'atlas-lg': 'var(--atlas-shadow-lg)',
+        'atlas-xl': 'var(--atlas-shadow-xl)',
+        'atlas-2xl': 'var(--atlas-shadow-2xl)',
+      },
+      transitionDuration: {
+        'atlas-instant': 'var(--atlas-duration-instant)',
+        'atlas-fast': 'var(--atlas-duration-fast)',
+        'atlas-normal': 'var(--atlas-duration-normal)',
+        'atlas-slow': 'var(--atlas-duration-slow)',
+        'atlas-slower': 'var(--atlas-duration-slower)',
+      },
+      transitionTimingFunction: {
+        'atlas-default': 'var(--atlas-ease-default)',
+        'atlas-in': 'var(--atlas-ease-in)',
+        'atlas-out': 'var(--atlas-ease-out)',
+        'atlas-in-out': 'var(--atlas-ease-in-out)',
+        'atlas-bounce': 'var(--atlas-ease-bounce)',
+        'atlas-spring': 'var(--atlas-ease-spring)',
+      },
+      fontFamily: {
+        'atlas-sans': 'var(--atlas-font-sans)',
+        'atlas-mono': 'var(--atlas-font-mono)',
+      },
+      fontSize: {
+        'atlas-xs': 'var(--atlas-text-xs)',
+        'atlas-sm': 'var(--atlas-text-sm)',
+        'atlas-base': 'var(--atlas-text-base)',
+        'atlas-lg': 'var(--atlas-text-lg)',
+        'atlas-xl': 'var(--atlas-text-xl)',
+        'atlas-2xl': 'var(--atlas-text-2xl)',
+        'atlas-3xl': 'var(--atlas-text-3xl)',
+        'atlas-4xl': 'var(--atlas-text-4xl)',
+      },
+      lineHeight: {
+        'atlas-none': 'var(--atlas-leading-none)',
+        'atlas-tight': 'var(--atlas-leading-tight)',
+        'atlas-snug': 'var(--atlas-leading-snug)',
+        'atlas-normal': 'var(--atlas-leading-normal)',
+        'atlas-relaxed': 'var(--atlas-leading-relaxed)',
+        'atlas-loose': 'var(--atlas-leading-loose)',
+      },
+      fontWeight: {
+        'atlas-thin': 'var(--atlas-font-thin)',
+        'atlas-light': 'var(--atlas-font-light)',
+        'atlas-normal': 'var(--atlas-font-normal)',
+        'atlas-medium': 'var(--atlas-font-medium)',
+        'atlas-semibold': 'var(--atlas-font-semibold)',
+        'atlas-bold': 'var(--atlas-font-bold)',
+        'atlas-extrabold': 'var(--atlas-font-extrabold)',
+      },
+      spacing: {
+        'atlas-0': 'var(--atlas-space-0)',
+        'atlas-px': 'var(--atlas-space-px)',
+        'atlas-0.5': 'var(--atlas-space-0-5)',
+        'atlas-1': 'var(--atlas-space-1)',
+        'atlas-1.5': 'var(--atlas-space-1-5)',
+        'atlas-2': 'var(--atlas-space-2)',
+        'atlas-2.5': 'var(--atlas-space-2-5)',
+        'atlas-3': 'var(--atlas-space-3)',
+        'atlas-3.5': 'var(--atlas-space-3-5)',
+        'atlas-4': 'var(--atlas-space-4)',
+        'atlas-5': 'var(--atlas-space-5)',
+        'atlas-6': 'var(--atlas-space-6)',
+        'atlas-7': 'var(--atlas-space-7)',
+        'atlas-8': 'var(--atlas-space-8)',
+        'atlas-9': 'var(--atlas-space-9)',
+        'atlas-10': 'var(--atlas-space-10)',
+        'atlas-12': 'var(--atlas-space-12)',
+        'atlas-14': 'var(--atlas-space-14)',
+        'atlas-16': 'var(--atlas-space-16)',
+        'atlas-20': 'var(--atlas-space-20)',
+        'atlas-24': 'var(--atlas-space-24)',
+      },
+      zIndex: {
+        'atlas-hide': 'var(--atlas-z-hide)',
+        'atlas-base': 'var(--atlas-z-base)',
+        'atlas-dropdown': 'var(--atlas-z-dropdown)',
+        'atlas-sticky': 'var(--atlas-z-sticky)',
+        'atlas-drawer': 'var(--atlas-z-drawer)',
+        'atlas-modal': 'var(--atlas-z-modal)',
+        'atlas-popover': 'var(--atlas-z-popover)',
+        'atlas-tooltip': 'var(--atlas-z-tooltip)',
+        'atlas-toast': 'var(--atlas-z-toast)',
+        'atlas-max': 'var(--atlas-z-max)',
+      },
+      ringWidth: {
+        atlas: 'var(--atlas-ring-width)',
+      },
+      ringOffsetWidth: {
+        atlas: 'var(--atlas-ring-offset)',
+      },
+      backdropBlur: {
+        'atlas-glass': 'var(--atlas-glass-blur)',
+      },
+    },
+  },
+};