@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
93 lines (80 loc) • 4 kB
CSS
/**
* Casoon UI Design System - Core CSS
*
* Dieses Stylesheet definiert die Layer-Struktur und importiert
* alle benötigten CSS-Module.
*/
/*
* Definition der globalen Layer-Reihenfolge
* Sorgt für konsistente Spezifität über alle Komponenten hinweg
*/
@layer reset, /* CSS-Reset und Normalisierung */
tokens, /* Design-Tokens und Variablen */
themes, /* Theme-System */
themes-base, /* Basis-Theme-Definitionen */
themes-mode, /* Light/Dark-Theme-Definitionen */
themes-custom, /* Benutzerdefinierte Themes */
base, /* Grundlegende Elementstile */
logical-properties, /* Logische Eigenschaften für RTL/LTR Support */
accessibility, /* Barrierefreiheits-bezogene Stile */
colors, /* Farbdefinitionen und Schema */
color-mix, /* Farb-Mischungen und -Transformationen */
typography, /* Typografie-System */
typography-headings, /* Überschriften-Stile */
typography-weights, /* Schriftgewichte */
typography-baseline, /* Baseline-Grid */
typography-base, /* Basis-Typografie */
typography-text, /* Text-Element-Stile */
typography-responsive, /* Responsive Typografie */
typography-fluid, /* Fluid Typografie */
layout, /* Layout-System */
layout-grid, /* Grid-System */
layout-flex, /* Flex-Layouts */
layout-containers, /* Container-System */
layout-spacing, /* Abstandsregeln */
layout-responsive, /* Responsive Layouts */
layout-utilities, /* Layout-Utilities */
utilities, /* Hilfsstilklassen */
utilities-variables, /* Variablen für Utilities */
utilities-mixins, /* Mixins für Utilities */
utilities-helpers, /* Hilfsklassen */
utilities-customize, /* Anpassungen */
components, /* Komponentenstile */
form, /* Formular-bezogene Stile */
animations, /* Animationsdefinitionen */
animation-contexts, /* Kontextbezogene Animationen */
effects, /* Visuelle Effekte */
smooth-scroll, /* Scrolling-Verhalten und -Effekte */
icons; /* Icon-System */
/*
* Import der Layer-Definitionen
* Importreihenfolge entspricht der Layer-Hierarchie
*/
/* =================== GRUNDLEGENDE LAYER =================== */
@import url("core/reset.css"); /* layer(reset) */
@import url("tokens/index.css"); /* layer(tokens) */
@import url("themes/index.css"); /* layer(themes) und vereinfachte Theme-Layer */
/* =================== BASISSTILE & PROPERTIES =================== */
@import url("core/logical-properties.css"); /* layer(logical-properties) */
@import url("core/accessibility/index.css"); /* layer(accessibility) */
@import url("core/colors.css"); /* layer(colors) */
@import url("core/color-mix.css"); /* layer(color-mix) */
@import url("core/smooth-scroll.css"); /* layer(smooth-scroll) */
/* =================== UTILITY & STYLING LAYER =================== */
@import url("utilities/index.css"); /* layer(utilities) und utilities-* Layer */
@import url("typography/index.css"); /* layer(typography) und typography-* Layer */
@import url("layout/index.css"); /* layer(layout) und layout-* Layer */
/* Schriftarten aus dem neuen Pfad importieren */
@import url("fonts/fonts.css"); /* Basis-Schriften-Definitionen */
/* =================== KOMPONENTEN & ICONS =================== */
@import url("icons/index.css"); /* layer(icons) */
@import url("ui/index.css"); /* UI-System mit Regionen, Komponenten und Formularen */
/* =================== EFFECTS & UI COMPONENTS =================== */
/*
* Effects und UI-Components/Patterns werden nicht automatisch importiert.
* Diese müssen vom Verwender einzeln nach dem Laden der Haupt-CSS importiert werden, z.B.:
*
* @import url("pfad/zur/ui-lib/effects/animation.css");
* @import url("pfad/zur/ui-lib/ui/components/button.css");
* @import url("pfad/zur/ui-lib/ui/patterns/card.css");
*/