{"id":28423777,"url":"https://github.com/casoon/dragonfly","last_synced_at":"2026-05-06T03:31:43.170Z","repository":{"id":287075440,"uuid":"963459148","full_name":"casoon/dragonfly","owner":"casoon","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-24T07:27:42.000Z","size":3199,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-12T04:52:46.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://casoon.github.io/dragonfly-docs/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/casoon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-09T18:01:41.000Z","updated_at":"2025-10-24T07:27:48.000Z","dependencies_parsed_at":"2025-04-09T21:22:09.476Z","dependency_job_id":"7e911a25-5a28-44b8-aae0-5ca1f7824bac","html_url":"https://github.com/casoon/dragonfly","commit_stats":null,"previous_names":["casoon/casoon-ui-lib","casoon/dragonfly","casoon/ui-lib"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/casoon/dragonfly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fdragonfly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fdragonfly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fdragonfly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fdragonfly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casoon","download_url":"https://codeload.github.com/casoon/dragonfly/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fdragonfly/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32677894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T02:33:58.958Z","status":"ssl_error","status_checked_at":"2026-05-06T02:33:39.611Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T09:09:29.433Z","updated_at":"2026-05-06T03:31:43.131Z","avatar_url":"https://github.com/casoon.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @casoon/dragonfly\n\nA modular, lightweight CSS framework and design system for modern web projects. While it is especially optimized for use with Astro JS, it is fully framework-agnostic and can be used in any web project. The library is developed by an author who primarily uses Astro JS, but it is not limited to that ecosystem. It is also optimized for LightningCSS and Container Queries, featuring a @layer-based architecture and comprehensive accessibility.\n\n## Table of Contents\n1. [Features](#features)\n2. [Installation](#installation)\n3. [Usage](#usage)\n4. [Goals and Requirements](#goals-and-requirements)\n5. [Architecture](#architecture)\n6. [CSS Layer System](#css-layer-system)\n7. [Layer \u0026 File Structure](#layer--file-structure)\n8. [Compatibility](#compatibility)\n9. [Browser Compatibility Tests](#browser-compatibility-tests)\n10. [Fonts](#fonts)\n11. [Custom Components](#custom-components)\n12. [Documentation](#documentation)\n13. [Contributing](#contributing)\n14. [License](#license)\n\n## ✨ New Features \u0026 Improvements (v0.7.5)\n\n- **🏗️ CSS Modernization Completed**: Complete migration from BEM notation to modern CSS Nesting for all components\n- **✅ 100% Lint-free Codebase**: All 234+ CSS files pass Lightning CSS tests without errors\n- **🧪 Enhanced Testing Suite**: Comprehensive browser compatibility tests and automated CSS validation\n- **📦 Optimized Bundle Size**: Reduced CSS redundancy through modern syntax\n- **🎯 Improved Developer Experience**: Consistent code structure and better maintainability\n- **🔧 Modernized Architecture**: Use of CSS Nesting instead of BEM notation for better readability\n- **🎨 Enhanced Link Buttons**: 15+ new styling variants with extensive customization options\n\n## Features\n\n### 🚀 Core Features\n- **Comprehensive Theme System** with dark/light mode support\n- **Enhanced Accessibility Components** for screen readers and keyboard users\n- **Advanced Color Contrast System**\n- **New Utility Classes** for width and height\n- **Optimized Animation System** with new naming scheme and reduced redundancy\n- **Responsive Design** with `.motion-safe`/`.motion-reduce` for `prefers-reduced-motion`\n- **Modern Effects** including dialog and focus animations, staggered animations\n- **Full Support** for dark mode and RTL layouts\n- **Validation** with modern CSS\n- **Improved Forms** with revised form system and consistent nomenclature\n- **Optimized Layer Structure** with extended flex/grid utilities\n- **Container Query Integration** with consistent logical properties\n- **Fluid Typography** using fluid interpolation\n- **CSS Nesting**: Modern CSS syntax instead of BEM notation for better readability and maintainability\n\n## Installation\n\n```bash\nnpm install @casoon/dragonfly\n# or\nyarn add @casoon/dragonfly\n# or\npnpm add @casoon/dragonfly\n```\n\n\u003e **🆕 v0.7.5**: Completely modernized CSS codebase with 100% lint-free quality guarantee and CSS Nesting instead of BEM notation.\n\n## Usage\n\n### Standard Usage (Modular Approach with Lightning CSS)\n\nThis option is ideal for developers using Lightning CSS who need:\n- Maximum control over CSS layers\n- Selective component imports\n- Custom optimization process\n- Direct work with the layer system\n\n**Basic:**\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/@casoon/dragonfly/index.css\"\u003e\n```\n**With Bundler:**\n```js\nimport '@casoon/dragonfly/index.css';\n```\n**With Astro:**\n```astro\nimport '@casoon/dragonfly/index.css';\n```\n\n### Bundled CSS Alternative\n\nThis option provides a pre-bundled and optimized version for:\n- Simple integration without Lightning CSS configuration\n- Quick usage via CDN (unpkg.com)\n- Projects where loading time is more important than flexibility\n\n**Direct HTML:**\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/@casoon/dragonfly/dist/index.min.css\"\u003e\n```\n\n**With Bundler:**\n```js\nimport '@casoon/dragonfly/dist/index.min.css';\n```\n\n**With Astro:**\n```astro\nimport '@casoon/dragonfly/dist/index.min.css';\n```\n\n**Via unpkg.com CDN:**\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@casoon/dragonfly/dist/index.min.css\"\u003e\n```\n\n**Note about the unpkg.com version:**\nThe minified version contains basic functionality but may not include all effects and components. For specific components or effects, these can be loaded selectively:\n\n```html\n\u003c!-- Base CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@casoon/dragonfly/dist/index.min.css\"\u003e\n\u003c!-- Additional components as needed --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@casoon/dragonfly/effects/visual/shadows.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@casoon/dragonfly/ui/components/card.css\"\u003e\n```\n\n## Goals and Requirements\n\n### 1. Design System – A Consistent, Scalable Foundation\n\n**Goal:** Build a modular, consistent design system that can be reused across different projects.\n\n**Requirements:**\n- Systematic naming and structural organization for all tokens and components\n- A token-based design foundation that uses CSS Custom Properties\n- Theming support and extensibility through a layer-based architecture (e.g., tokens, utilities, components)\n\n### 2. Design Principles – Clear Visual and Functional Rules\n\n**Goal:** Ensure that all UI components follow shared principles to maintain coherence in appearance and behavior.\n\n**Requirements:**\n- Uniform rules for layout, spacing, typography, and sizing\n- Components should be understandable and usable even without relying on external design tools\n- Clear separation of presentation and logic in structure and styling\n\n### 3. Functional Patterns – Reusable, Adaptive Component Blueprints\n\n**Goal:** Provide abstract patterns for common interactions and functional behaviors.\n\n**Requirements:**\n- Modular component patterns like Dialog, Accordion, Dropdown, designed with minimal JavaScript\n- Components should be easily configurable and adaptable to various use cases\n- Accessibility (a11y) must be considered a first-class concern\n\n### 4. Perceptual Patterns – Intuitive Feedback and Visual Communication\n\n**Goal:** Implement perceptual cues that improve user understanding and feedback.\n\n**Requirements:**\n- Definition and support for component states like hover, focus, disabled, error, loading, success\n- Utility classes or animations to support interactive transitions and effects\n- All components should respond properly across screen sizes and devices (responsive design)\n\n### 5. Shared Language – Unified Naming and API Convention\n\n**Goal:** Promote a common language between design and development.\n\n**Requirements:**\n- Token names, components, and utilities should follow a consistent and documented naming convention\n- Clear CSS class API (e.g., btn-primary, gap-md, card-lg) that is intuitive and predictable\n- Terminology and structure should reflect a systemized mental model shared across the project\n\n## Architecture\n\nThe library uses a clearly defined CSS layer architecture to avoid specificity conflicts and improve maintainability.\n\n### Layer Hierarchy\n\n```css\n@layer reset, tokens, custom-properties, core, logical-properties, colors, color-mix, layout, layout-queries, typography, utilities, smooth-scroll, accessibility, icons, components, animations, effects, themes;\n```\n\n### Layer Structure\n1. **reset**: Basic CSS resets for uniform browser rendering\n2. **tokens**: Design tokens for colors, spacing, typography, etc.\n3. **custom-properties**: CSS variable definitions\n4. **core**: Core styles for basic elements\n5. **layout**: Layout system with Flexbox and Grid\n6. **typography**: Typography system\n7. **utilities**: Utility classes\n8. **components**: UI components\n9. **animations**: Animation system\n10. **effects**: Visual effects\n11. **themes**: Theming system\n\nA detailed description of the layer structure can be found in [LAYER-SYSTEM.md](LAYER-SYSTEM.md).\n\n## CSS Layer System\n\n### 1. Structured Layers\n- Implementation of a clearly defined layer system to control CSS specificity\n- Distinct separation and documentation of layers like reset, tokens, custom-properties, utilities, animations, themes, and components\n- Centralized definitions: All layer definitions are managed in a central file (layers.css)\n\n### 2. Design Tokens \u0026 Custom Properties\n- Uniform design tokens: Definition of consistent design tokens for colors, spacing, typography, etc.\n- Use of CSS Custom Properties for easy customization and maintenance of the design\n\n### 3. Component Architecture\n- Modular components: Development of over 35 reusable UI components including buttons, cards, inputs, modals, etc.\n- Framework-agnostic: Components are independent of specific JavaScript frameworks and integrate easily into different projects\n- Responsive design: All components are fully responsive and function across various screen sizes\n\n### 4. Effects \u0026 Animations\n- Visual effects: Implementation of effects like neon, glassmorphism, shadows, and 3D transformations\n- Interactive states: Definition of states such as hover, focus, active, success, error, loading, etc.\n\n### 5. Theming \u0026 Customization\n- Customizable themes: Enable easy creation and integration of different themes by adjusting design tokens\n- Dark/Light Mode: Support for light and dark design variants\n\n### 6. Integration with Build Tools\n- Compatibility: Ensuring compatibility with modern build tools like Webpack, Vite, and Astro\n- Easy installation: Providing clear instructions for installing and integrating the library into projects\n\n### 7. Documentation \u0026 Examples\n- Comprehensive documentation: Detailed documentation with examples for each component and function is available at https://casoon.github.io/ui-docs/\n- Interactive examples: The documentation site includes interactive examples demonstrating how to use various library features in real scenarios\n\n### 8. Testing \u0026 Quality Assurance\n- Lightning CSS testing: Comprehensive testing with Lightning CSS parser to ensure compatibility and proper CSS processing\n- Automated linting: Implementation of Stylelint with custom rules to maintain CSS coding standards and best practices\n- Accessibility validation: Automated tests for WCAG compliance and accessibility features\n- Browser compatibility testing: Testing across major browsers to ensure consistent rendering and functionality\n\n## Layer \u0026 File Structure\n\n```\n@casoon/dragonfly/\n├── index.css             # Main file with layer imports\n├── dist/                 # Contains bundled versions\n│   ├── index.min.css     # Minified bundle with all imports resolved\n│   ├── index.min.css.map # Source map for debugging\n│   ├── index.bundled.css # Non-minified bundle for development\n│   ├── components.min.css # Minified bundle of UI components\n│   ├── effects.min.css    # Minified bundle of effects\n│   ├── icons.min.css      # Minified bundle of icons\n│   └── themes.min.css     # Minified bundle of themes\n├── core/                 # Core styles and reset\n│   ├── reset.css         # CSS reset\n│   ├── colors.css        # Base colors\n│   ├── color-mix.css     # Color mixing utilities\n│   ├── logical-properties.css # Logical properties\n│   ├── smooth-scroll.css # Smooth scrolling\n│   └── accessibility/    # Accessibility helpers\n│       ├── aria.css      # ARIA utilities\n│       ├── contrast.css  # Color contrast\n│       ├── keyboard.css  # Keyboard navigation\n│       └── screenreader.css # Screen reader utilities\n├── layout/               # Layout system\n│   ├── index.css         # Layout imports\n│   ├── responsive.css    # Responsive breakpoints\n│   ├── spacing.css       # Spacing utilities\n│   ├── flex-layouts.css  # Flexbox utilities\n│   ├── grid-system.css   # Grid utilities\n│   └── containers/       # Container system\n│       ├── index.css     # Container imports\n│       ├── base.css      # Basic container components\n│       ├── position.css  # Positioned containers with z-index\n│       ├── responsive-containers.css # Responsive containers\n│       ├── special.css   # Special containers (scrollable, masonry)\n│       ├── asymmetric.css # Split layouts and aspect ratio containers\n│       ├── visual.css    # Visual styling containers\n│       ├── functional.css # Functional UI containers\n│       ├── performance.css # Performance-optimized containers\n│       └── a11y.css      # Accessibility-optimized containers\n├── tokens/               # Design tokens\n│   ├── index.css         # Token imports\n│   ├── colors/           # Color tokens\n│   ├── spacing/          # Spacing tokens\n│   ├── typography/       # Typography tokens\n│   └── effects/          # Effect tokens\n├── typography/           # Typography system\n│   ├── index.css         # Typography imports\n│   ├── typography.css    # Typography styles\n│   ├── hierarchy/        # Heading hierarchy\n│   ├── baseline/         # Baseline grid\n│   └── weights/          # Font weights\n├── utilities/            # Utility classes\n│   ├── index.css         # Utility imports\n│   ├── helpers/          # Helper utilities\n│   ├── mixins/           # CSS mixins\n│   ├── variables/        # CSS variables\n│   └── customize/        # Customization utilities\n├── themes/               # Theming system\n│   ├── index.css         # Theme imports\n│   ├── base/             # Base theme\n│   ├── mode/             # Light/dark modes\n│   └── variants/         # Theme variants\n├── icons/                # Icon system\n│   ├── index.css         # Icon imports\n│   ├── base.css          # Icon base styles\n│   └── [icon-sets]/      # Various icon sets\n├── fonts/                # Web fonts\n│   ├── fonts.css         # Main CSS file with all variables and utility classes\n│   ├── README.md         # Documentation\n│   └── [font-name]/      # Directory for each font\n│       ├── 400.css       # CSS for regular weight\n│       ├── 700.css       # CSS for bold weight\n│       ├── index.css     # Imports all weights\n│       └── *.woff2       # WOFF2 files\n├── ui/                   # UI components\n│   ├── index.css         # UI imports\n│   ├── content.css       # Content \u0026 Link Button components\n│   ├── forms.css         # Form components \u0026 buttons\n│   ├── components.css    # Components collection\n│   ├── components/       # Complex UI components\n│   ├── layout/           # Layout components (grid, containers)\n│   ├── menu/             # Menu \u0026 navigation components\n│   ├── patterns/         # UI patterns\n│   └── regions/          # Page regions (header, footer, sidebar)\n├── effects/              # Effects \u0026 interactions\n│   ├── interaction/      # Interaction effects\n│   ├── layout-effects/   # Layout effects\n│   ├── motion/           # Motion effects\n│   ├── particles/        # Particle effects\n│   ├── themes/           # Theme effects\n│   ├── typography/       # Typography effects\n│   └── visual/           # Visual effects\n└── js/                   # JavaScript helpers\n    ├── theme-switcher.js # Theme switching logic\n    └── viewTransitions.js # View transition helpers\n```\n\n**Layer hierarchy (excerpt):**\n```css\n@layer reset, tokens, custom-properties, core, logical-properties, colors, color-mix, layout, layout-queries, typography, utilities, smooth-scroll, accessibility, icons, components, animations, effects, themes;\n```\nSee the [Layer System Documentation](LAYER-SYSTEM.md) for more details.\n\n## Web Fonts\n\nThe library includes a collection of optimized Google Fonts in WOFF2 format for better performance and privacy. Using self-hosted fonts eliminates external requests to Google's servers and reduces load times.\n\n### Directory Structure\n\nThe fonts are organized in an improved structure:\n\n```\n/fonts/\n├── fonts.css                 # Main CSS file with all variables and utility classes\n├── README.md                 # Documentation\n│\n├── roboto/                   # Each font has its own directory\n│   ├── 400.css              # CSS for regular weight\n│   ├── 700.css              # CSS for bold weight\n│   ├── index.css            # Imports all weights\n│   ├── roboto-regular.woff2 # WOFF2 file for regular weight\n│   └── roboto-bold.woff2    # WOFF2 file for bold weight\n```\n\n### Using the Fonts\n\nYou can include the fonts in different ways:\n\n```css\n/* Only the CSS variables and utility classes, without the fonts themselves */\n@import '@casoon/dragonfly/fonts/fonts.css';\n\n/* A specific font with all weights */\n@import '@casoon/dragonfly/fonts/roboto/index.css';\n\n/* Only a specific weight of a font */\n@import '@casoon/dragonfly/fonts/roboto/400.css';\n```\n\nFor Astro projects, you can simply import the CSS files as shown above. Vite (used by Astro) or Webpack will automatically analyze the CSS and include the font files in your project's build without requiring any plugins or manual copying. For more information, see the [Fonts README](fonts/README.md).\n\n### Included Fonts\n\nThe library includes the following Google Fonts:\n\n- **Anton** - Bold display font for large headlines\n- **Arimo** - Sans-serif font with good readability\n- **Bebas Neue** - Condensed uppercase font\n- **Cabin** - Humanist sans-serif with a touch of warmth\n- **DM Sans** - Low-contrast geometric sans-serif\n- **Dosis** - Rounded sans-serif with even stroke weights\n- **Fira Sans** - Versatile, legible sans-serif\n- **Inconsolata** - Monospace font for code\n- **Inter** - Modern typeface designed for computer screens\n- **Josefin Sans** - Elegant geometric sans-serif\n- **Lato** - Balanced sans-serif with classical proportions\n- **Merriweather** - Serif designed for screen readability\n- **Montserrat** - Urban typeface inspired by old posters\n- **Mukta** - Multi-script font with support for Devanagari\n- **Noto Sans** - Part of Google's font family with broad language support\n- **Nunito** - Well-balanced sans-serif with rounded terminals\n- **Open Sans** - Neutral and friendly sans-serif\n- **Oswald** - Condensed alternative to standards like Impact\n- **Playfair Display** - Serif with high-contrast strokes\n- **Poppins** - Geometric sans-serif with uniform stroke width\n- **PT Sans** - Universal font for wide language support\n- **Quicksand** - Display sans-serif with rounded terminals\n- **Raleway** - Elegant sans-serif with a single thin weight\n- **Roboto** - Default Android font with natural reading rhythm\n- **Roboto Condensed** - Space-efficient version of Roboto\n- **Source Sans Pro** - Adobe's first open-source font\n- **Teko** - Modernist, condensed typeface\n- **Titillium Web** - Sans-serif designed by students\n- **Ubuntu** - The Ubuntu operating system font\n- **Work Sans** - Optimized for on-screen text usage\n\n## Container Query Example\n\n```html\n\u003cdiv class=\"container-query\"\u003e\n  \u003cdiv class=\"layout-flex sm:flex-row md:gap-6 lg:flex-nowrap\"\u003e\n    \u003cdiv class=\"sm:flex-basis-1-3\"\u003eSidebar\u003c/div\u003e\n    \u003cdiv class=\"sm:flex-basis-2-3\"\u003eMain content\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Container Layout System\n\nThe library provides a comprehensive container layout system with various specialized container types:\n\n### Basic Containers\n```html\n\u003c!-- Standard container with centered content and responsive padding --\u003e\n\u003cdiv class=\"container\"\u003eContent\u003c/div\u003e\n\n\u003c!-- Container with specific size constraint --\u003e\n\u003cdiv class=\"container container-md\"\u003eMedium width container\u003c/div\u003e\n\n\u003c!-- Container with custom padding --\u003e\n\u003cdiv class=\"container container-padding-lg\"\u003eContainer with large padding\u003c/div\u003e\n```\n\n### Positioned Containers\n```html\n\u003c!-- Sticky containers --\u003e\n\u003cdiv class=\"container-sticky-top\"\u003eSticks to the top\u003c/div\u003e\n\n\u003c!-- Fixed containers --\u003e\n\u003cdiv class=\"container-fixed-bottom\"\u003eFixed to the bottom\u003c/div\u003e\n\n\u003c!-- Absolute containers --\u003e\n\u003cdiv class=\"container-absolute-center\"\u003eCentered absolutely\u003c/div\u003e\n```\n\n### Special Containers\n```html\n\u003c!-- Scrollable container --\u003e\n\u003cdiv class=\"container-scrollable-md\"\u003e\n  Content with controlled height and scrolling\n\u003c/div\u003e\n\n\u003c!-- Masonry layout --\u003e\n\u003cdiv class=\"container-masonry-3\"\u003e\n  \u003cdiv class=\"masonry-item\"\u003eItem 1\u003c/div\u003e\n  \u003cdiv class=\"masonry-item\"\u003eItem 2\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Advanced Container Features\n- **Visual containers:** Apply shadows, borders, and visual styling\n- **Functional containers:** Create toasts, modals, dropdowns, and tooltips\n- **Performance containers:** Optimize rendering with content-visibility\n- **Accessibility containers:** Enhance keyboard navigation and screen reader support\n- **Container queries:** Component-specific responsive behavior\n\n## Link Button Components\n\nThe library includes specialized Link Button components in `ui/content.css` that work parallel to form buttons but are optimized for content areas and navigation links.\n\n### Basic Link Buttons\n```html\n\u003c!-- Basic link button --\u003e\n\u003ca href=\"/page\" class=\"link-button\"\u003eNavigate\u003c/a\u003e\n\n\u003c!-- Primary action link --\u003e\n\u003ca href=\"/action\" class=\"link-button primary\"\u003ePrimary Action\u003c/a\u003e\n\n\u003c!-- Secondary link with icon --\u003e\n\u003ca href=\"/help\" class=\"link-button secondary with-icon\"\u003e\n  \u003cspan class=\"icon\"\u003e?\u003c/span\u003e\n  Help\n\u003c/a\u003e\n```\n\n### Button Variants\n```html\n\u003c!-- All available variants --\u003e\n\u003ca href=\"#\" class=\"link-button primary\"\u003ePrimary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button secondary\"\u003eSecondary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button tertiary\"\u003eTertiary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button success\"\u003eSuccess\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button warning\"\u003eWarning\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button danger\"\u003eDanger\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button info\"\u003eInfo\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button link\"\u003eLink Style\u003c/a\u003e\n```\n\n### Button Sizes\n```html\n\u003c!-- Size variants --\u003e\n\u003ca href=\"#\" class=\"link-button xs\"\u003eExtra Small\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button sm\"\u003eSmall\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button md\"\u003eMedium (default)\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button lg\"\u003eLarge\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button xl\"\u003eExtra Large\u003c/a\u003e\n```\n\n### Advanced Features\n```html\n\u003c!-- Icon support --\u003e\n\u003ca href=\"#\" class=\"link-button primary with-icon\"\u003e\n  \u003cspan class=\"icon\"\u003e→\u003c/span\u003e\n  Continue\n\u003c/a\u003e\n\n\u003c!-- Icon-only button --\u003e\n\u003ca href=\"#\" class=\"link-button icon-only\" aria-label=\"Menu\"\u003e\n  \u003cspan class=\"icon\"\u003e☰\u003c/span\u003e\n\u003c/a\u003e\n\n\u003c!-- Loading state --\u003e\n\u003ca href=\"#\" class=\"link-button primary loading\"\u003eLoading...\u003c/a\u003e\n\n\u003c!-- Disabled state --\u003e\n\u003ca href=\"#\" class=\"link-button disabled\"\u003eDisabled\u003c/a\u003e\n```\n\n### Styling Variants\n\n#### Outline Buttons\n```html\n\u003c!-- Outline variants with hover fill effect --\u003e\n\u003ca href=\"#\" class=\"link-button outline primary\"\u003eOutline Primary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button outline secondary\"\u003eOutline Secondary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button outline success\"\u003eOutline Success\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button outline danger\"\u003eOutline Danger\u003c/a\u003e\n```\n\n#### Ghost Buttons\n```html\n\u003c!-- Subtle ghost buttons with transparent backgrounds --\u003e\n\u003ca href=\"#\" class=\"link-button ghost primary\"\u003eGhost Primary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button ghost success\"\u003eGhost Success\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button ghost danger\"\u003eGhost Danger\u003c/a\u003e\n```\n\n#### Gradient Buttons\n```html\n\u003c!-- Beautiful gradient effects --\u003e\n\u003ca href=\"#\" class=\"link-button gradient primary\"\u003eGradient Primary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button gradient secondary\"\u003eGradient Secondary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button gradient success\"\u003eGradient Success\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button gradient rainbow\"\u003eRainbow Gradient\u003c/a\u003e\n```\n\n#### Border Variants\n```html\n\u003c!-- Different border styles --\u003e\n\u003ca href=\"#\" class=\"link-button border-thick primary\"\u003eThick Border\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button border-dashed primary\"\u003eDashed Border\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button border-dotted primary\"\u003eDotted Border\u003c/a\u003e\n```\n\n#### Border Radius Variants\n```html\n\u003c!-- Border radius options --\u003e\n\u003ca href=\"#\" class=\"link-button rounded-none\"\u003eNo Radius\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button rounded-sm\"\u003eSmall Radius\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button rounded-lg\"\u003eLarge Radius\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button rounded-xl\"\u003eExtra Large Radius\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button rounded-full\"\u003eFully Rounded\u003c/a\u003e\n```\n\n#### Shadow Effects\n```html\n\u003c!-- Shadow variants for depth --\u003e\n\u003ca href=\"#\" class=\"link-button primary shadow\"\u003eWith Shadow\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button primary shadow-lg\"\u003eLarge Shadow\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button primary shadow-inner\"\u003eInner Shadow\u003c/a\u003e\n```\n\n#### Glow Effects\n```html\n\u003c!-- Glowing buttons for attention --\u003e\n\u003ca href=\"#\" class=\"link-button primary glow\"\u003eGlowing Primary\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button success glow\"\u003eGlowing Success\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button danger glow\"\u003eGlowing Danger\u003c/a\u003e\n```\n\n#### Animated Buttons\n```html\n\u003c!-- Interactive animations --\u003e\n\u003ca href=\"#\" class=\"link-button primary animated\"\u003eScale on Hover\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button primary bounce\"\u003eBounce Effect\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button primary pulse\"\u003ePulse Effect\u003c/a\u003e\n```\n\n#### Special Effects\n```html\n\u003c!-- Modern design effects --\u003e\n\u003ca href=\"#\" class=\"link-button neumorphism\"\u003eNeumorphism\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button glass\"\u003eGlass Effect\u003c/a\u003e\n\u003ca href=\"#\" class=\"link-button minimal\"\u003eMinimal Style\u003c/a\u003e\n```\n\n#### Layout Options\n```html\n\u003c!-- Full width button --\u003e\n\u003ca href=\"#\" class=\"link-button primary full-width\"\u003eFull Width Button\u003c/a\u003e\n```\n\n### Combining Variants\n```html\n\u003c!-- Mix and match for unique styles --\u003e\n\u003ca href=\"#\" class=\"link-button primary gradient shadow-lg rounded-lg animated\"\u003e\n  Ultimate Button\n\u003c/a\u003e\n\n\u003ca href=\"#\" class=\"link-button outline success rounded-full with-icon glow\"\u003e\n  \u003cspan class=\"icon\"\u003e✓\u003c/span\u003e\n  Success Action\n\u003c/a\u003e\n\n\u003ca href=\"#\" class=\"link-button ghost danger lg border-dashed\"\u003e\n  Stylized Danger\n\u003c/a\u003e\n```\n\n### Key Features\n- **Parallel to Form Buttons:** Works alongside `ui/forms.css` buttons without conflicts\n- **Content Optimized:** Specifically designed for content areas and navigation\n- **Full Accessibility:** Focus states, ARIA support, keyboard navigation\n- **Modern CSS:** Uses CSS Nesting instead of BEM notation\n- **Extensive Styling:** 15+ different styling variants and combinations\n- **Visual Effects:** Gradients, shadows, glow, neumorphism, glass effects\n- **Animations:** Bounce, pulse, scale, and custom hover effects\n- **Border Options:** Solid, dashed, dotted, thick borders with various radius options\n- **Layout Flexibility:** Full-width options and responsive behavior\n- **Icon Support:** Built-in icon handling with proper spacing\n- **State Management:** Loading, disabled, and focus states included\n\n## Compatibility\n\nThe library uses progressive enhancement and fallback strategies to ensure broad browser compatibility:\n\n- **Modern Browsers**: Full support for Chrome/Edge 90+, Firefox 90+, Safari 15+\n- **Older Browsers**: Core functionality works in older browsers through fallbacks\n- **Feature Detection**: Uses `@supports` rules instead of browser detection\n- **CSS Variables**: Fallbacks for browsers without CSS Custom Properties\n- **Container Queries**: Media Query fallbacks for older browsers\n- **Color Functions**: RGB/HSL fallbacks for browsers without OKLCH support\n- **Interpolate-size**: Graceful degradation for browsers without fluid sizing\n\n### Known Compatibility Issues\n\n#### Viewport Units (svh, svw)\n\n**Affected Browsers:**\n- Safari \u003c 15.4\n- Chrome \u003c 108\n- Firefox \u003c 101\n\n**Issue:** Small Viewport Units are not supported.\n\n**Solution:** The library implements a fallback using regular viewport units (vh, vw) with CSS feature detection:\n\n```css\n@supports not (height: 1svh) {\n  .use-svh {\n    height: 100vh; /* Fallback */\n  }\n}\n\n@supports (height: 1svh) {\n  .use-svh {\n    height: 100svh;\n  }\n}\n```\n\n#### Container Queries\n\n**Affected Browsers:**\n- Safari \u003c 16\n- Chrome \u003c 105\n- Firefox \u003c 110\n\n**Issue:** Container Queries are not supported.\n\n**Solution:** The library uses Media Queries as fallbacks and provides a `no-container-queries` class for targeted styling.\n\n## Browser Compatibility Tests\n\nThe library includes a browser compatibility test suite that covers:\n\n- Viewport Units (vw, vh, svw, svh, lvw, lvh, dvw, dvh)\n- Theme System with Dark/Light Mode\n- Accessibility Features (focus rings, skip links, screen reader compatibility)\n- CSS Feature Support Detection (container queries, layers, custom properties)\n- Media Query Support (prefers-color-scheme, prefers-reduced-motion)\n\nThe tests are designed for compatibility with the following browsers:\n- Modern browsers (Chrome, Firefox, Safari, Edge - latest versions)\n- Older browsers (Chrome, Firefox, Safari, Edge - version 90+)\n\nTo run the tests:\n```bash\n# Start a local server\nnpx serve\n\n# Access the test suite\n# http://localhost:3000/tests/browser-compatibility/\n```\n\nThe test files include:\n- `viewport-units-test.html` - Tests for viewport unit implementation\n- `theme-system-test.html` - Tests for theme switching and persistence\n- `accessibility-test.html` - Tests for accessibility features\n\nThe test suite provides browser information and documents compatibility issues in `compatibility-issues.md`, helping developers identify and address browser-specific challenges when using the library.\n\n## Fonts\n\nThe library includes a collection of optimized Google Fonts in WOFF2 format for better performance and privacy. Using self-hosted fonts eliminates external requests to Google's servers and reduces load times.\n\n### Directory Structure\n\nThe fonts are organized in an improved structure:\n\n```\n/fonts/\n├── fonts.css                 # Main CSS file with all variables and utility classes\n├── README.md                 # Documentation\n│\n├── roboto/                   # Each font has its own directory\n│   ├── 400.css              # CSS for regular weight\n│   ├── 700.css              # CSS for bold weight\n│   ├── index.css            # Imports all weights\n│   ├── roboto-regular.woff2 # WOFF2 file for regular weight\n│   └── roboto-bold.woff2    # WOFF2 file for bold weight\n```\n\n### Using the Fonts\n\nYou can include the fonts in different ways:\n\n```css\n/* Only the CSS variables and utility classes, without the fonts themselves */\n@import '@casoon/dragonfly/fonts/fonts.css';\n\n/* A specific font with all weights */\n@import '@casoon/dragonfly/fonts/roboto/index.css';\n\n/* Only a specific weight of a font */\n@import '@casoon/dragonfly/fonts/roboto/400.css';\n```\n\nFor Astro projects, you can simply import the CSS files as shown above. Vite (used by Astro) or Webpack will automatically analyze the CSS and include the font files in your project's build without requiring any plugins or manual copying.\n\n## Custom Components\n\nYou can add your own components in the `components` layer:\n```css\n@layer components {\n  .my-component {\n    padding: var(--space-4);\n    color: var(--color-primary);\n    border-radius: var(--radius-md);\n  }\n}\n```\n\n## Compatibility\n\nThe library employs progressive enhancement and fallback strategies to ensure wide browser compatibility:\n\n- **Modern Browsers**: Full support for Chrome/Edge 90+, Firefox 90+, Safari 15+\n- **Older Browsers**: Core functionality works in older browsers through fallbacks\n- **Feature Detection**: Uses `@supports` rules instead of browser detection\n- **CSS Variables**: Fallbacks provided for browsers without CSS Custom Properties\n- **Container Queries**: Media Query fallbacks for older browsers\n- **Color Functions**: RGB/HSL fallbacks for browsers without OKLCH support\n- **interpolate-size**: Graceful degradation for browsers without fluid sizing\n\nFor detailed compatibility information, browser support charts, and implemented fallback strategies, see the [Documentation](DOCUMENTATION.md).\n\n## Testing\n\n### 🧪 Enhanced Testing Features (v0.7.5)\n- **✅ 100% Lint-free CSS Codebase**: All 234+ CSS files pass Stylelint tests without errors\n- **🔧 Advanced CSS Validation**: Systematic verification against modern CSS standards with Stylelint\n- **⚡ JavaScript Quality Assurance**: Modern JavaScript linting and formatting with Biome\n- **📊 Hybrid Linting Approach**: Specialized tools for each language (Stylelint for CSS, Biome for JS)\n- **🚀 Optimized Performance Tests**: Faster test execution through modern syntax\n\n### Linting \u0026 Testing Commands\n```bash\n# Run all tests (CSS + JS Lint + Lightning CSS)\nnpm run test:all\n\n# Combined linting (CSS + JavaScript)\nnpm run lint\n\n# CSS linting only (Stylelint)\nnpm run lint:css\n\n# JavaScript linting only (Biome)\nnpm run lint:js\n\n# Auto-fix CSS issues\nnpm run lint:css:fix\n\n# Auto-fix JavaScript issues\nnpm run lint:js:fix\n\n# Format JavaScript code\nnpm run format:js\n\n# Lightning CSS tests only\nnpm run test:lightningcss\n```\n\n### Quality Assurance Results\n- **234+ CSS Files**: All successfully validated with Stylelint\n- **28 JavaScript Files**: Linted with Biome for modern code quality\n- **0 CSS Lint Errors**: Completely error-free CSS codebase\n- **Hybrid Tooling**: Best-in-class tools for each language\n- **Modern CSS Features**: Container Queries, CSS Nesting, CSS Layers fully supported\n- **Modern JavaScript**: ES6+, Node.js protocols, optimized patterns\n- **Cross-Browser Compatibility**: Tested on Chrome, Firefox, Safari, Edge\n\n### Browser Compatibility Tests\nThe library includes a browser compatibility testing suite that covers:\n\n- Viewport Units (vw, vh, svw, svh, lvw, lvh, dvw, dvh)\n- Theme System with Dark/Light Mode\n- Accessibility Features (focus rings, skip links, screen reader compatibility)\n- CSS Feature Support Detection (container queries, layers, custom properties)\n- Media Query Support (prefers-color-scheme, prefers-reduced-motion)\n\nThe tests are designed to ensure compatibility across:\n- Modern browsers (Chrome, Firefox, Safari, Edge - latest versions)\n- Older browsers (Chrome, Firefox, Safari, Edge - version 90+)\n\nTo run the tests:\n```bash\n# Start a local server\nnpx serve\n\n# Access the test suite\n# http://localhost:3000/tests/browser-compatibility/\n```\n\nThe test files include:\n- `viewport-units-test.html` - Tests for viewport unit implementation\n- `theme-system-test.html` - Tests for theme switching and persistence\n- `accessibility-test.html` - Tests for accessibility features\n\nThe test suite provides browser information and documents compatibility issues in `compatibility-issues.md`, helping developers identify and address browser-specific challenges when using the library.\n\n### Container Compatibility Tests\nAdditional tests for container queries and related layout features are available in the `tests/container-compatibility` directory.\n\n## Documentation\n\nThe library comes with comprehensive documentation to help you get started:\n\n- **[DOCUMENTATION.md](DOCUMENTATION.md)** - Comprehensive documentation with architecture, goals and compatibility information\n- **[STYLE-GUIDE.md](STYLE-GUIDE.md)** - Detailed style guide for using the library\n- **[LAYER-SYSTEM.md](LAYER-SYSTEM.md)** - Explanation of the CSS layer system\n- **[CONTRIBUTING.md](CONTRIBUTING.md)** - Guidelines for contributing to the project\n- **[PUBLISHING.md](PUBLISHING.md)** - Information about the publishing process\n- **[GOOGLE-FONTS-LICENSE.md](GOOGLE-FONTS-LICENSE.md)** - License information for the Google Fonts used\n- **[ICONS-LICENSE.md](ICONS-LICENSE.md)** - License information for the icons used\n\n## License\nMIT\n\n## Contributing\nContributions welcome! See [Contribution Guidelines](CONTRIBUTING.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasoon%2Fdragonfly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasoon%2Fdragonfly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasoon%2Fdragonfly/lists"}