Lumina SASS

Lumina SASS is a design system framework built with Sass Indented Syntax (.sass). It provides design tokens, responsive breakpoints, universal CSS resets, navigation controls, and WCAG accessibility utilities.

Why Sass (Indented Syntax) over Plain CSS & SCSS

Sass Indented Syntax (.sass) was specifically chosen over SCSS and plain CSS because it simplifies and accelerates the development process. By removing curly braces ({}) and semicolons (;), stylesheets remain concise, clean, and fast to author.

• Simplified Development: Clean whitespace-driven syntax speeds up styling and reduces boilerplate code noise.
• Zero Runtime Overhead: Compiles layout math, WCAG contrast checks, and breakpoints directly to plain CSS at build time.
• Parametric Resets: @mixin reset() applies targeted CSS resets with safe false defaults.
• Automated Accessibility: Builds fail automatically if text and background contrast falls below WCAG AA thresholds.
• Strict WCAG Implementation: Enforces WCAG AA contrast thresholds across all components, with adaptive disabled‑link handling.
• Colorblindness Simulation Tests: Verify visual accessibility for protanopia, deuteranopia, tritanopia and achromatopsia.
• Parametric Resets: @mixin reset() applies targeted CSS resets with safe false defaults.
• Centralized Tokens: Single-point map definitions for breakpoints, colors, and typography stacks.
• Navigation Controls: Responsive mobile navigation buttons with @mixin nav-hamburger().

Important Links

• Documentation Overview: Complete index of modules, guides, and specifications.
• System Architecture: Modular framework structure and core principles.
• Utilities Documentation: Parametric CSS resets and position helpers.
• Contrast & Accessibility Guide: Automated WCAG AA contrast validation.
• Mixins Reference: Design tokens, breakpoints, and layout tools.
• Navigation Guide: Responsive hamburger menu controls.
• Contributing Guide: How to fork, develop, and submit Pull Requests.
• Issue Templates & Guidelines: Guidelines for reporting bugs and proposing features.
• Contributors List: Recognition and thanks to community contributors.
• License: Open-source MIT License details.

Quick Start

npm install lumina-sass

@use 'lumina-sass/map' as l-map
@use 'lumina-sass/mixins' as l-mix
@use 'lumina-sass/flexbox' as l-flex
@use 'lumina-sass/colors' as l-colors

*, *::before, *::after
	@include l-mix.reset($box-sizing: true, $margin: true, $padding: true)

.hamburger-toggle
	@include l-mix.nav-hamburger($bg-color: transparent, $color: #ffffff)

.card
	inline-size: 50%
	@include l-mix.media-queries('tablet-landscape')
		inline-size: 100%

Module Overview

• lumina-sass/mixins (l-mix): Reset, navigation (l-hamburg), margins, breakpoints, and typography.
• lumina-sass/flexbox (l-flex): Flexbox mixins and atomic utility classes.
• lumina-sass/colors (l-colors): Standardized brand and UI color maps.
• lumina-sass/map (l-map): Breakpoints, font maps, and design tokens.
• lumina-sass/contrast (l-contrast): WCAG AA contrast verification.
• lumina-sass/func (l-func): Pure Sass math and color functions.

Testing

npx vitest run test/sass.spec.ts

Contributing

Contributions are welcome via GitHub forks and Pull Requests. See the Contributing Guide for step-by-step instructions.

Contributors & Community Thanks

We express our deepest gratitude to the open-source community for contributing ideas, bug reports, and code improvements. See our Contributors List for the full list of acknowledged contributors.

Contact & Support

For questions, issues, or feedback, contact Kristoffer at [email protected].

License

This project is licensed under the MIT License.