breakouts 0.0.14 → 0.1.1

package/README.md

@@ -1,313 +1,172 @@
-# ✨ Breakouts
+# 📐 Breakouts – SCSS/CSS Layout Framework
 
-**Breakouts** is a minimal and extensible SCSS/CSS utility framework for modern layout systems.
-
-It provides utilities for containers, full-bleed sections, breakout content, and grid layouts with named lines — built for flexibility and responsiveness, whether you're building a landing page, a blog, or a full-scale web app.
+Breakouts is a minimal, modular layout framework for SCSS/CSS that gives you just the right amount of structure: full-bleed containers, responsive grids, spacing, theming, and a clean set of utilities.
 
 ---
 
 ## 🚀 Installation
 
-### via npm
+Using npm:
 
 ```bash
 npm install breakouts
 ```
 
-In your SCSS entry point:
+Using bun:
 
-```scss
-@use 'breakouts' as *;
+```bash
+bun add breakouts
 ```
 
-Note: breakouts automatically forwards all core modules from src/index.scss. You can also import individual modules as needed for tree-shaking.
-
-## 📦 Framework Structure
-
-Breakouts includes a small set of layout-focused utility classes to help you build responsive and consistent page structures.
-
-| Class          | Purpose                                                                  |
-|----------------|---------------------------------------------------------------------------|
-| `.container`   | Creates a centered layout wrapper with a max-width and responsive padding |
-| `.full-bleed`  | Stretches content edge-to-edge across the viewport                        |
-| `.breakout`    | Expands content outside the container’s padding without going full-bleed  |
-| `.grid`        | Defines a named-line CSS grid with `main` and `full` layout regions        |
-| `.grid--full`  | Forces children of `.grid` to span the entire width (`full` region)        |
-| `.breakouts-grid` | A more advanced named-line grid layout using CSS variables              |
-| `.content`     | Places content in the main centered column within `.breakouts-grid`       |
-| `.popout`      | Slightly outside the `.content` width for medium breakout                 |
-| `.feature`     | Wider area used for highlighting visual components                        |
-| `.full`        | Full-width layout spanning the entire grid                                |
-
-## 🧩 Extending the Framework
+---
 
-Breakouts is fully configurable — you can override its core variables before importing it.
+## 🛠 Usage
 
-### 🔁 Example: Override the color palette
+### SCSS with `@use`
 
 ```scss
-$colors: (
-  primary: #ff6600,
-  secondary: #222222,
-  background: #fefefe,
-  text: #111
-);
-
-@use "breakouts";
+@use 'breakouts' as *;
 ```
 
-This replaces the default color palette defined in the framework. You can override any variable marked with !default.
+### Import CSS directly
 
-## 🔌 Use Only What You Need
+```html
+<link rel="stylesheet" href="/node_modules/breakouts/dist/breakouts.css" />
+```
 
-Breakouts is modular and each part of the framework can be imported individually.
+---
 
-### Import specific modules
+## 🧱 Features
 
-If you only want color utilities, you can import them directly:
+- ✅ Full-bleed layout with `.container`, `.full-bleed`, `.breakouts`
+- ✅ Breakouts Grid with named areas (`.full`, `.popout`, `.feature`, etc.)
+- ✅ Spacing utilities: `.m-1`, `.px-2`, etc.
+- ✅ Text utilities: alignment, transformation, weight
+- ✅ Responsive-friendly
+- ✅ Dark mode support and theme overrides
+- ✅ Prebuilt themes for fast prototyping
+- ✅ Minimal reset and clean typography
 
-```scss
-@use "breakouts/theme/colors" as *;
+---
 
-@include text-color-utilities();
-@include bg-color-utilities();
-```
+## 🎨 Prebuilt Themes
 
-If you only need grid layout helpers:
+| Theme Name     | Description                                                    | Import Path                            |
+|----------------|----------------------------------------------------------------|----------------------------------------|
+| **Chupa Pop**  | Bold and colorful palette inspired by candy tones              | `@use 'breakouts/theme/chupa-pop'`     |
+| **Medical**    | Calm, healthcare-inspired palette with blues and greens        | `@use 'breakouts/theme/medical'`       |
+| **Tootsie Pop**| Retro and playful candy-themed palette                         | `@use 'breakouts/theme/tootsie-pop'`   |
 
-```scss
-@use "breakouts/layout/grid";
-```
+---
 
-This gives you full control over what gets compiled into your CSS, keeping it lean and optimized for your project.
+## ✍️ Text Utilities
+
+| Class             | Description              |
+|------------------|--------------------------|
+| `.text-left`      | Align text left          |
+| `.text-center`    | Align text center        |
+| `.text-right`     | Align text right         |
+| `.text-justify`   | Justify text             |
+| `.text-uppercase` | Uppercase text           |
+| `.text-lowercase` | Lowercase text           |
+| `.text-capitalize`| Capitalize text          |
+| `.font-bold`      | Bold text                |
+| `.font-normal`    | Normal weight text       |
+| `.italic`         | Italic text              |
+| `.not-italic`     | Not italic               |
+| `.leading-tight`  | Line height 1.25         |
+| `.leading-normal` | Line height 1.5          |
+| `.leading-loose`  | Line height 2            |
 
-## 🧱 Define Your Own Utilities on Top
+---
 
-Breakouts exposes a consistent set of CSS variables (e.g. `--color-primary`, `--color-background`, etc.) that you can reuse to build your own custom components or utility classes.
+## 📏 Spacing Utilities
 
-### Example: custom button style
+Available spacing classes are based on the `$space-scale` map:
 
 ```scss
-.button {
-  background-color: var(--color-primary);
-  color: var(--color-background);
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 0.25rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.button:hover {
-  background-color: var(--color-secondary);
-}
+$space-scale: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5: 1.25rem,
+  6: 1.5rem
+);
 ```
 
-By using the same design tokens, your custom elements stay visually aligned with the rest of the system.
-
-This approach encourages consistency while giving you full creative freedom.
-
-## ✍️ Typography
-
-Breakouts includes base typographic styles to ensure clean, readable text with consistent rhythm and spacing.
-
-- Responsive font sizing and heading scale
-- Theme-based color integration
-- Styled links and paragraphs
-- Easily extendable via SCSS variables
-
-```scss
-body {
-  font-family: system-ui, sans-serif;
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-text);
-}
+| Type     | Prefixes                           |
+|----------|------------------------------------|
+| Margin   | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` |
+| Padding  | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` |
 
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1.2;
-  font-weight: 600;
-  margin: 2rem 0 1rem;
-  color: var(--color-text);
-}
+---
 
-p {
-  margin: 1rem 0;
-}
+## 🌗 Dark Mode
 
-a {
-  color: var(--color-primary);
-  text-decoration: underline;
+Breakouts supports dark mode automatically by toggling the `.dark` or `.light` class on the `<html>` tag.
 
-  &:hover {
-    color: var(--color-secondary);
-  }
-}
+```html
+<html class="dark">
+<!-- or -->
+<html class="light">
 ```
 
-You can override the heading scale, base sizes, and fonts by defining your own variables before importing Breakouts.
-
-## 🌙 Dark Mode Support
-
-Breakouts includes built-in support for **dark mode**, using CSS variables and system preferences.
-
-### 🌓 Automatic dark mode
-
-By default, the framework responds to the user's system setting using:
+Use `prefers-color-scheme` if you want to auto-detect:
 
 ```scss
 @media (prefers-color-scheme: dark) {
-  :root {
-    // Dark color variables
-  }
+  html { class: dark; }
 }
 ```
 
-This means all your color utility classes like .bg-primary, .text-muted, etc., automatically switch based on the user's device.
-
-### 🌘 Manual Override (Optional)
-
-If you want to control dark mode manually—rather than relying on the user's system preferences—you can use the `.dark` class.
-
-Apply it to the root HTML element:
-
-```html
-<html class="dark">
-```
-
-When this class is present, Breakouts will use the dark color palette regardless of system settings.
-
-This is ideal for implementing a light/dark theme toggle in your application via JavaScript or local storage.
-
-All color-based utility classes like .text-* and .bg-* will respond automatically, as they rely on CSS variables.
-
-### ✅ Compatible with All Color Utilities
-
-All utility classes that rely on colors—such as:
-
-- `.text-primary`
-- `.bg-surface`
-- `.text-muted`
-- `.bg-secondary`
-
-...are automatically compatible with dark mode.
-
-This is possible because Breakouts uses CSS custom properties (variables) for all colors. When the color mode changes (automatically or via `.dark` class), the variables are updated, and the utilities respond instantly without requiring any changes to your HTML.
+---
 
-You can keep writing markup the same way in both themes:
+## 🧪 Demo & Examples
 
-```html
-<div class="bg-background text-text">
-  <p class="text-muted">This works in both light and dark modes.</p>
-</div>
-```
+View the live demo via GitHub Pages:
+👉 [https://cantilux.github.io/breakouts](https://cantilux.github.io/breakouts)
 
-## 🎨 Theming with `@use`
+---
 
-Breakouts supports full theming via SCSS variable overrides using `@use with`. You can customize any design token before the framework compiles.
+## 🧩 Customize with `@use`
 
-### 🧪 Example: Custom Primary and Accent Colors
+Override core variables before importing:
 
 ```scss
 @use 'breakouts' with (
   $color-primary: #d1ff4a,
-  $color-primary-dark: darken(#d1ff4a, 15%),
-  $color-primary-light: lighten(#d1ff4a, 15%),
-
-  $color-accent: #8a2be2,
-  $color-accent-dark: darken(#8a2be2, 15%),
-  $color-accent-light: lighten(#8a2be2, 15%)
+  $color-accent: #8a2be2
 );
 ```
 
-This will automatically update the corresponding CSS custom properties:
-
-```scss
---color-primary: #d1ff4a;
---color-accent: #8a2be2;
-```
-
-And will apply to utility classes like:
-
-```html
-<section class="bg-primary text-background">Primary Background</section>
-<section class="bg-accent text-background">Accent Background</section>
-```
-
-You can also override any other color or spacing variable defined in the framework for full control.
-
-## 🎨 Custom Theme Setup
-
-If you're using a bundler like Vite or Webpack and encounter issues with `@use ... with`, the recommended approach is to recreate Breakouts' internal structure in your own project and apply theming from there.
-
-### ✅ Example: Create a custom `breakouts.scss`
+Or create a custom theme:
 
 ```scss
-// src/styles/breakouts.scss
-
+// my-theme.scss
 @forward 'breakouts/src/theme/variables' with (
   $color-primary: #d1ff4a,
-  $color-primary-dark: darken(#d1ff4a, 15%),
-  $color-primary-light: lighten(#d1ff4a, 15%),
-
-  $color-accent: #8a2be2,
-  $color-accent-dark: darken(#8a2be2, 15%),
-  $color-accent-light: lighten(#8a2be2, 15%)
+  $color-accent: #8a2be2
 );
 
 @use 'breakouts/src/theme/variables' as *;
 @forward 'breakouts/src/theme/colors';
-@forward 'breakouts/src/base/reset';
-@forward 'breakouts/src/base/typography';
-@forward 'breakouts/src/layout/container';
-@forward 'breakouts/src/layout/full-bleed';
-@forward 'breakouts/src/layout/breakouts';
-@forward 'breakouts/src/layout/grid';
-```
-
-💡 Use your custom theme
-In your app entry point or component:
-
-```scss
-@use '@/styles/breakouts' as *;
-```
-
-This gives you full control over the theme while keeping the rest of the framework intact.
-
-## 🛠️ Development
-
-To build or modify Breakouts locally, follow these steps:
-
-1. Install dependencies:
-
-```bash
-npm install
-```
-
-2. Build the CSS files:
-
-```bash
-npm run build
 ```
 
-This will generate two files in the dist/ folder:
-
-breakouts.css: the expanded, human-readable version (ideal for development)
+---
 
-breakouts.min.css: the minified version (ideal for production)
+## 💡 Extend Breakouts
 
-You can customize or extend the framework by editing the SCSS source files located in the src/ directory. The entry point is:
+You can write your own mixins or import individual parts:
 
-```bash
-src/_index.scss
+```scss
+@use 'breakouts/utilities/spacing';
+@use 'breakouts/base/typography';
 ```
 
-The build process uses Dart Sass under the hood.
-
-## 📄 License
-
-This project is licensed under the [MIT License](LICENSE).
+---
 
-You are free to use, modify, distribute, and even sell this framework in personal or commercial projects — just include the original license and copyright.
+## 📦 License
 
-> © 2025 Cantilux
+MIT — [Cantilux](https://github.com/Cantilux)

package/dist/breakouts.css

@@ -105,6 +105,426 @@ body {
   line-height: 1.6;
 }
 
+.m-0 {
+  margin: 0;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.m-3 {
+  margin: 0.75rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.m-4 {
+  margin: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.m-5 {
+  margin: 1.25rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.m-6 {
+  margin: 1.5rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 body {
   font-family: system-ui, sans-serif;
   font-size: 1rem;
@@ -174,6 +594,62 @@ a:hover {
   color: var(--color-secondary);
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.font-normal {
+  font-weight: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.not-italic {
+  font-style: normal;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-loose {
+  line-height: 2;
+}
+
 .container {
   margin-inline: auto;
   max-width: 72rem;

package/dist/breakouts.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/_colors.scss","../src/base/_reset.scss","../src/base/_typography.scss","../src/layout/_container.scss","../src/layout/_full-bleed.scss","../src/layout/_breakouts.scss","../src/layout/_grid.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;;AAMR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;ACvFJ;AACA;AAAA;AAAA;EAGI;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;ACJJ;EACI,aAde;EAef,WAba;EAcb,aAbe;EAcf;EACA;EACA;;;AAMA;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;AAEA;EACI;;;AC9CR;EACI;EACA;EACA;;;ACHJ;EACI;EACA;EACA;;;ACHJ;EACI;EACA;;;ACFJ;EACI;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA,uBACI;EACJ;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI","file":"breakouts.css"}
+{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/layout/_container.scss","../src/layout/_full-bleed.scss","../src/layout/_breakouts.scss","../src/layout/_grid.scss"],"names":[],"mappings":"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","file":"breakouts.css"}

package/dist/breakouts.min.css

@@ -1 +1 @@
-:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529}.dark,.dark :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.text-text{color:var(--color-text)}.text-background{color:var(--color-background)}.text-muted{color:var(--color-muted)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}body{padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];gap:var(--gap)}.content{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}/*# sourceMappingURL=breakouts.min.css.map */
+:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529}.dark,.dark :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.text-text{color:var(--color-text)}.text-background{color:var(--color-background)}.text-muted{color:var(--color-muted)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}body{padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height:2}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];gap:var(--gap)}.content{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}/*# sourceMappingURL=breakouts.min.css.map */

package/dist/breakouts.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/_colors.scss","../src/base/_reset.scss","../src/base/_typography.scss","../src/layout/_container.scss","../src/layout/_full-bleed.scss","../src/layout/_breakouts.scss","../src/layout/_grid.scss"],"names":[],"mappings":"AAEA,MACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBAEA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BAGJ,kBAEI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBAGJ,oBAEI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBAGJ,mCACI,6BACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,yBAMR,eACI,yCAGJ,YACI,sCAGJ,YACI,sCAGJ,cACI,wCAGJ,WACI,qCAGJ,WACI,wBAGJ,iBACI,8BAGJ,YACI,yBCtFJ,qBAGI,sBACA,SACA,UAGJ,UAEI,SACA,UACA,WACA,kBAGJ,KACI,aACA,iCACA,gBCJJ,KACI,YAde,qBAef,UAba,KAcb,YAbe,IAcf,wBACA,yCACA,SAMA,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,OAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,SAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,KAqBH,gBACA,mBACA,gBACA,wBAIR,EACI,cAGJ,EACI,2BACA,0BAEA,QACI,6BC9CR,WACI,mBACA,gBACA,oBCHJ,YACI,YACA,gBACA,2BCHJ,UACI,YACA,sCCFJ,MACI,8BACA,gCACA,2BACA,0BACA,4CAIJ,gBACI,aACA,sBACI,iNACJ,eAGJ,SACI,oBAGJ,QACI,mBAGJ,SACI,oBAGJ,MACI,iBAIJ,MACI,aACA,2EACA,eAEA,QACI,cAIR,cACI","file":"breakouts.min.css"}
+{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/layout/_container.scss","../src/layout/_full-bleed.scss","../src/layout/_breakouts.scss","../src/layout/_grid.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "breakouts",
-    "version": "0.0.14",
+    "version": "0.1.1",
     "description": "A personal SCSS/CSS layout utility framework.",
     "main": "dist/breakouts.css",
     "files": [
@@ -17,6 +17,6 @@
     "author": "Tuo Nome",
     "license": "MIT",
     "devDependencies": {
-        "sass": "^1.75.0"
+        "sass": "^1.86.2"
     }
 }

package/src/_index.scss

@@ -1,10 +1,11 @@
 // Theme and configurable variables
-@forward 'theme/variables';
-@use 'theme/variables' as *;
-@forward 'theme/colors';
+@forward 'base/variables';
+@use 'base/variables' as *;
+@forward 'base/colors';
 
 // Base styles
 @forward 'base/reset';
+@forward 'base/spacing';
 @forward 'base/typography';
 
 // Layout utilities

package/src/base/_spacing.scss

@@ -0,0 +1,42 @@
+$space-scale: (0: 0,
+    1: 0.25rem,
+    2: 0.5rem,
+    3: 0.75rem,
+    4: 1rem,
+    5: 1.25rem,
+    6: 1.5rem) !default;
+
+$spacing-properties: (m: margin,
+    mt: margin-top,
+    mr: margin-right,
+    mb: margin-bottom,
+    ml: margin-left,
+    mx: (margin-left, margin-right),
+    my: (margin-top, margin-bottom),
+
+    p: padding,
+    pt: padding-top,
+    pr: padding-right,
+    pb: padding-bottom,
+    pl: padding-left,
+    px: (padding-left, padding-right),
+    py: (padding-top, padding-bottom));
+
+@each $name,
+$value in $space-scale {
+
+    @each $prefix,
+    $properties in $spacing-properties {
+        .#{$prefix}-#{$name} {
+            @if type-of($properties)=='list' {
+                @each $prop in $properties {
+                    #{$prop}: $value;
+                }
+            }
+
+            @else {
+                #{$properties}: $value;
+            }
+        }
+    }
+}

package/src/base/_typography.scss

@@ -46,4 +46,64 @@ a {
     &:hover {
         color: var(--color-secondary);
     }
+}
+
+// Text alignment utilities
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-justify {
+    text-align: justify;
+}
+
+// Text transformation utilities
+.text-uppercase {
+    text-transform: uppercase;
+}
+
+.text-lowercase {
+    text-transform: lowercase;
+}
+
+.text-capitalize {
+    text-transform: capitalize;
+}
+
+// Font style and weight
+.font-bold {
+    font-weight: bold;
+}
+
+.font-normal {
+    font-weight: normal;
+}
+
+.italic {
+    font-style: italic;
+}
+
+.not-italic {
+    font-style: normal;
+}
+
+// Line height utilities
+.leading-tight {
+    line-height: 1.25;
+}
+
+.leading-normal {
+    line-height: 1.5;
+}
+
+.leading-loose {
+    line-height: 2;
 }

package/src/theme/_chupa-pop.scss

@@ -0,0 +1,28 @@
+// src/theme/_chupa-pop.scss
+
+$color-primary: #ecb838 !default; // Giallo dorato
+$color-secondary: #ab4073 !default; // Rosa scuro
+$color-accent: #196484 !default; // Blu petrolio
+
+@forward 'breakouts/src/theme/variables' with (
+  $color-primary: $primary,
+  $color-primary-dark: darken($primary, 15%),
+  $color-primary-light: lighten($primary, 15%),
+
+  $color-secondary: $secondary,
+  $color-secondary-dark: darken($secondary, 15%),
+  $color-secondary-light: lighten($secondary, 15%),
+
+  $color-accent: $accent,
+  $color-accent-dark: darken($accent, 15%),
+  $color-accent-light: lighten($accent, 15%),
+);
+
+@use 'breakouts/src/theme/variables' as *;
+@forward 'breakouts/src/theme/colors';
+@forward 'breakouts/src/base/reset';
+@forward 'breakouts/src/base/typography';
+@forward 'breakouts/src/layout/container';
+@forward 'breakouts/src/layout/full-bleed';
+@forward 'breakouts/src/layout/breakouts';
+@forward 'breakouts/src/layout/grid';

package/src/theme/_medical.scss

@@ -0,0 +1,36 @@
+// src/theme/medical.scss
+
+$primary: #4682B4 !default; // Blu Acciaio
+$secondary: #9DC183 !default; // Verde Salvia
+$accent: #A9A9A9 !default; // Grigio scuro
+$muted: #D3D3D3 !default; // Grigio chiaro
+$background: #FFFFFF !default; // Bianco puro
+
+@forward 'breakouts/src/theme/variables'with ($color-primary: $primary,
+    $color-primary-dark: darken($primary, 15%),
+    $color-primary-light: lighten($primary, 15%),
+
+    $color-secondary: $secondary,
+    $color-secondary-dark: darken($secondary, 15%),
+    $color-secondary-light: lighten($secondary, 15%),
+
+    $color-accent: $accent,
+    $color-accent-dark: darken($accent, 15%),
+    $color-accent-light: lighten($accent, 15%),
+
+    $color-muted: $muted,
+    $color-muted-dark: darken($muted, 15%),
+    $color-muted-light: lighten($muted, 15%),
+
+    $color-background: $background,
+    $color-background-dark: darken($background, 5%),
+    $color-background-light: lighten($background, 5%));
+
+@use 'breakouts/src/theme/variables'as *;
+@forward 'breakouts/src/theme/colors';
+@forward 'breakouts/src/base/reset';
+@forward 'breakouts/src/base/typography';
+@forward 'breakouts/src/layout/container';
+@forward 'breakouts/src/layout/full-bleed';
+@forward 'breakouts/src/layout/breakouts';
+@forward 'breakouts/src/layout/grid';

package/src/theme/_tootsie-pop.scss

@@ -0,0 +1,38 @@
+// src/theme/tootsie-pop.scss
+
+$primary: #93329E !default;     // Viola medio
+$secondary: #F2711C !default;   // Caramello
+$accent: #E94057 !default;      // Rosa lampone
+$muted: #FFE5B4 !default;       // Vaniglia chiara
+$background: #4F2F4C !default;  // Viola scuro (sfondo)
+
+@forward 'breakouts/src/theme/variables' with (
+  $color-primary: $primary,
+  $color-primary-dark: darken($primary, 15%),
+  $color-primary-light: lighten($primary, 15%),
+
+  $color-secondary: $secondary,
+  $color-secondary-dark: darken($secondary, 15%),
+  $color-secondary-light: lighten($secondary, 15%),
+
+  $color-accent: $accent,
+  $color-accent-dark: darken($accent, 15%),
+  $color-accent-light: lighten($accent, 15%),
+
+  $color-muted: $muted,
+  $color-muted-dark: darken($muted, 15%),
+  $color-muted-light: lighten($muted, 15%),
+
+  $color-background: $background,
+  $color-background-dark: darken($background, 5%),
+  $color-background-light: lighten($background, 5%)
+);
+
+@use 'breakouts/src/theme/variables' as *;
+@forward 'breakouts/src/theme/colors';
+@forward 'breakouts/src/base/reset';
+@forward 'breakouts/src/base/typography';
+@forward 'breakouts/src/layout/container';
+@forward 'breakouts/src/layout/full-bleed';
+@forward 'breakouts/src/layout/breakouts';
+@forward 'breakouts/src/layout/grid';