breakouts 0.8.0 → 0.8.2

package/package.json

@@ -1,22 +1,34 @@
 {
     "name": "breakouts",
-    "version": "0.8.0",
+    "version": "0.8.2",
     "description": "A focused SCSS/CSS breakout layout toolkit inspired by the Mulligan named-grid pattern.",
+    "homepage": "https://cantilux.github.io/breakouts/",
+    "bugs": "https://github.com/Cantilux/breakouts/issues",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Cantilux/breakouts.git"
+    },
     "main": "dist/breakouts.css",
+    "sass": "src/breakouts.scss",
     "files": [
+        "_index.scss",
         "src/",
-        "dist/"
+        "dist/",
+        "CHANGELOG.md"
     ],
     "scripts": {
+        "test": "sh test/compile.sh",
         "build": "sass src/_index.scss dist/breakouts.css --style=expanded && sass src/_index.scss dist/breakouts.min.css --style=compressed && cp dist/breakouts.css docs/breakouts.css",
-        "release:patch": "npm run build && npm version patch --sign-git-tag && git push && git push --follow-tags && npm publish --access public",
-        "release:minor": "npm run build && npm version minor --sign-git-tag && git push && git push --follow-tags && npm publish --access public",
-        "release:major": "npm run build && npm version major --sign-git-tag && git push && git push --follow-tags && npm publish --access public"
+        "changeset": "changeset",
+        "release:version": "changeset version"
     },
     "author": "Cantilux",
     "license": "MIT",
     "devDependencies": {
+        "@changesets/cli": "3.0.3",
         "sass": "^1.86.2"
     },
-    "sass": "src/breakouts.scss"
+    "publishConfig": {
+        "access": "public"
+    }
 }

package/src/_index.scss

@@ -1,14 +1,5 @@
-// Full bundle entry point. Use src/core, src/base, src/reset, or
-// src/utilities when you need a smaller Sass surface.
+// Full bundle entry point: base layers, then utilities last (ITCSS order, see AGENTS.md).
+// Use src/core, src/base, src/reset, or src/utilities when you need a smaller Sass surface.
 
-// Theme and configurable variables
-@forward 'base/variables';
-@use 'base/variables' as *;
-@forward 'base/colors';
-
-// Base styles
-@forward 'base/reset';
-@forward 'base/spacing';
-@forward 'base/positions';
-@forward 'base/typography';
-@forward 'base/layout';
+@forward 'base';
+@forward 'utilities';

package/src/base/_color-tokens.scss

@@ -2,6 +2,21 @@
 
 @use 'variables' as *;
 
+// One definition for both dark-mode selectors, so they cannot drift apart.
+@mixin -dark-tokens {
+    --color-background: #{$color-background-dark};
+    --color-surface: #{$color-surface-dark};
+    --color-text: #{$color-text-dark};
+    --color-muted: #{$color-muted-dark};
+    --color-primary: #{$color-primary-dark};
+    --color-secondary: #{$color-secondary-dark};
+    --color-accent: #{$color-accent-dark};
+    --color-success: #{$color-success-dark};
+    --color-error: #{$color-error-dark};
+    --color-warning: #{$color-warning-dark};
+    color-scheme: dark;
+}
+
 :root {
     --color-background: #{$color-background};
     --color-surface: #{$color-surface};
@@ -29,17 +44,7 @@
 html.dark,
 :root.dark,
 .dark {
-    --color-background: #{$color-background-dark};
-    --color-surface: #{$color-surface-dark};
-    --color-text: #{$color-text-dark};
-    --color-muted: #{$color-muted-dark};
-    --color-primary: #{$color-primary-dark};
-    --color-secondary: #{$color-secondary-dark};
-    --color-accent: #{$color-accent-dark};
-    --color-success: #{$color-success-dark};
-    --color-error: #{$color-error-dark};
-    --color-warning: #{$color-warning-dark};
-    color-scheme: dark;
+    @include -dark-tokens;
 }
 
 html.light,
@@ -60,16 +65,6 @@ html.light,
 
 @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark) {
-        --color-background: #{$color-background-dark};
-        --color-surface: #{$color-surface-dark};
-        --color-text: #{$color-text-dark};
-        --color-muted: #{$color-muted-dark};
-        --color-primary: #{$color-primary-dark};
-        --color-secondary: #{$color-secondary-dark};
-        --color-accent: #{$color-accent-dark};
-        --color-success: #{$color-success-dark};
-        --color-error: #{$color-error-dark};
-        --color-warning: #{$color-warning-dark};
-        color-scheme: dark;
+        @include -dark-tokens;
     }
 }

package/src/base/_color-utilities.scss

@@ -1,113 +1,25 @@
 // Utility classes for background and text colors.
 
-.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);
-}
-
-.bg-muted {
-    background-color: var(--color-muted);
-}
-
-.bg-success {
-    background-color: var(--color-success);
-}
-
-.bg-error {
-    background-color: var(--color-error);
-}
+$-colors: background, surface, primary, secondary, accent, muted, success, error, warning;
 
-.bg-warning {
-    background-color: var(--color-warning);
-}
-
-.text-background {
-    color: var(--color-background);
+@each $name in $-colors {
+    .bg-#{$name} {
+        background-color: var(--color-#{$name});
+    }
 }
 
 .text-color {
     color: var(--color-text);
 }
 
-.text-primary {
-    color: var(--color-primary);
-}
-
-.text-accent {
-    color: var(--color-accent);
-}
-
-.text-secondary {
-    color: var(--color-secondary);
-}
-
-.text-surface {
-    color: var(--color-surface);
-}
-
-.text-muted {
-    color: var(--color-muted);
-}
-
-.text-success {
-    color: var(--color-success);
-}
-
-.text-error {
-    color: var(--color-error);
-}
-
-.text-warning {
-    color: var(--color-warning);
-}
-
-.text-neutral-100 {
-    color: var(--color-neutral-100);
-}
-
-.text-neutral-200 {
-    color: var(--color-neutral-200);
-}
-
-.text-neutral-300 {
-    color: var(--color-neutral-300);
-}
-
-.text-neutral-400 {
-    color: var(--color-neutral-400);
-}
-
-.text-neutral-500 {
-    color: var(--color-neutral-500);
-}
-
-.text-neutral-600 {
-    color: var(--color-neutral-600);
-}
-
-.text-neutral-700 {
-    color: var(--color-neutral-700);
-}
-
-.text-neutral-800 {
-    color: var(--color-neutral-800);
+@each $name in $-colors {
+    .text-#{$name} {
+        color: var(--color-#{$name});
+    }
 }
 
-.text-neutral-900 {
-    color: var(--color-neutral-900);
+@each $step in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
+    .text-neutral-#{$step} {
+        color: var(--color-neutral-#{$step});
+    }
 }

package/src/base/_layout.scss

@@ -1,6 +1,9 @@
 // This file contains the layout styles for the site, including grid and flexbox layouts.
 // It uses CSS custom properties for responsive design and theming.
 
+@use 'sass:list';
+@use 'sass:string';
+
 :root {
     --gap: clamp(1rem, 6vw, 3rem);
     --full: minmax(var(--gap), 1fr);
@@ -16,40 +19,26 @@
     padding-inline: 1rem;
 }
 
-// Breakout classes
-.full-bleed {
-    width: 100vw;
-    margin-left: 50%;
-    transform: translateX(-50%);
-}
-
-.full-bleed--left {
-    width: 100vw;
-    margin-left: 0;
-    transform: translateX(0);
-}
-
-.full-bleed--right {
-    width: 100vw;
-    margin-left: calc(-1 * (100vw - 100%) / 2);
-    transform: translateX(calc(100% - 100vw));
-} 
-
+// Viewport-wide helpers outside the named grid, for a parent centered in the viewport.
+// 100vw includes a classic scrollbar: pages using them may need `overflow-x: clip` on body.
+// .breakout* are deprecated aliases of .full-bleed*, to be removed in the next major.
+.full-bleed,
 .breakout {
     width: 100vw;
-    margin-left: calc(-1 * (100vw - 100%) / 2);
+    margin-left: calc(50% - 50vw);
 }
 
+// Viewport's left edge to the parent's right edge.
+.full-bleed--left,
 .breakout--left {
-    width: 100vw;
-    margin-left: 0;
-    transform: translateX(0);
+    width: calc(50% + 50vw);
+    margin-left: calc(50% - 50vw);
 }
 
+// Parent's left edge to the viewport's right edge.
+.full-bleed--right,
 .breakout--right {
-    width: 100vw;
-    margin-left: calc(-1 * (100vw - 100%) / 2);
-    transform: translateX(calc(100% - 100vw));
+    width: calc(50% + 50vw);
 }
 
 // Breakouts Grid (named lines)
@@ -113,11 +102,51 @@
     grid-column: content-start / full-end;
 }
 
-.breakouts > .breakouts,
-.breakouts > .breakouts-grid,
-.breakouts-grid > .breakouts,
-.breakouts-grid > .breakouts-grid {
-    grid-template-columns: inherit;
+// Nested grids reuse the parent's tracks (subgrid), so their columns line up with the parent's.
+// Outer lines the nested area does not span are named on its edges: .full inside a nested
+// .feature fills that .feature. Without subgrid support a nested grid keeps its own tracks.
+$-outer-lines: (popout, feature, full);
+
+// Placement classes -> (start, end) level: 0 content, 1 popout, 2 feature, 3 full.
+$-nested-areas: (
+    '*': (0, 0),
+    '.content': (0, 0),
+    '.popout': (1, 1),
+    '.popout-start, .popout-left': (1, 0),
+    '.popout-end, .popout-right': (0, 1),
+    '.feature': (2, 2),
+    '.feature-start, .feature-left': (2, 0),
+    '.feature-end, .feature-right': (0, 2),
+    '.full': (3, 3),
+    '.full-start, .full-left': (3, 0),
+    '.full-end, .full-right': (0, 3),
+);
+
+// Line names beyond $level on one side, e.g. (1, start) -> "[feature-start full-start]".
+@function -edge-names($level, $side) {
+    $names: ();
+    @each $line in $-outer-lines {
+        @if list.index($-outer-lines, $line) > $level {
+            $names: list.append($names, string.unquote('#{$line}-#{$side}'), space);
+        }
+    }
+    @if list.length($names) == 0 {
+        @return '[]';
+    }
+    @return '[#{$names}]';
+}
+
+@each $classes, $levels in $-nested-areas {
+    $start: list.nth($levels, 1);
+    $end: list.nth($levels, 2);
+    $lines: -edge-names($start, start);
+    @for $i from 0 to $start + $end {
+        $lines: $lines + ' []';
+    }
+
+    :is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(#{$classes}) {
+        grid-template-columns: subgrid #{$lines} #{-edge-names($end, end)};
+    }
 }
 
 // Standard Grid (for .grid and .grid--full compatibility)

package/src/base/_typography-base.scss

@@ -44,3 +44,9 @@ a {
         color: var(--color-secondary);
     }
 }
+
+// Rows of a breakouts grid are already spaced by row-gap; flow margins would add to it.
+// Same specificity as the element rules above, so utilities like .my-4 still win.
+:where(.breakouts, .breakouts-grid) > :is(h1, h2, h3, h4, h5, h6, p) {
+    margin-block: 0;
+}

package/src/base/_variables.scss

@@ -1,45 +1,49 @@
 // This file contains the default variables for the default theme.
+// `-dark` values apply in dark mode, `-light` values in explicit light mode.
+
+@use 'sass:color';
 
 // color variables
 $color-background: #ffffff !default;
 $color-background-dark: #111111 !default;
-$color-background-light: #ffffff !default;
+$color-background-light: $color-background !default;
 
 $color-surface: #f0f0f0 !default;
 $color-surface-dark: #1a1a1a !default;
-$color-surface-light: #f8f8f8 !default;
+$color-surface-light: $color-surface !default;
 
 $color-text: #111111 !default;
 $color-text-dark: #eeeeee !default;
-$color-text-light: #222222 !default;
+$color-text-light: $color-text !default;
 
 $color-muted: #666666 !default;
 $color-muted-dark: #aaaaaa !default;
-$color-muted-light: #999999 !default;
+$color-muted-light: $color-muted !default;
 
+// Brand and status colors: dark mode uses a lighter tint, so it stays readable on dark backgrounds.
 $color-primary: #0055ff !default;
-$color-primary-dark: #0033aa !default;
-$color-primary-light: #88b0ff !default;
+$color-primary-dark: color.scale($color-primary, $lightness: 50%) !default;
+$color-primary-light: $color-primary !default;
 
 $color-secondary: #0033aa !default;
-$color-secondary-dark: #002277 !default;
-$color-secondary-light: #ccd9ff !default;
+$color-secondary-dark: color.scale($color-secondary, $lightness: 50%) !default;
+$color-secondary-light: $color-secondary !default;
 
 $color-accent: #ff4081 !default;
-$color-accent-dark: #c60055 !default;
-$color-accent-light: #ff80ab !default;
+$color-accent-dark: color.scale($color-accent, $lightness: 50%) !default;
+$color-accent-light: $color-accent !default;
 
 $color-success: #28a745 !default;
-$color-success-dark: #1e7e34 !default;
-$color-success-light: #71dd8a !default;
+$color-success-dark: color.scale($color-success, $lightness: 50%) !default;
+$color-success-light: $color-success !default;
 
 $color-error: #dc3545 !default;
-$color-error-dark: #a71d2a !default;
-$color-error-light: #ff6b6b !default;
+$color-error-dark: color.scale($color-error, $lightness: 50%) !default;
+$color-error-light: $color-error !default;
 
 $color-warning: #ffc107 !default;
-$color-warning-dark: #c79100 !default;
-$color-warning-light: #ffdb4d !default;
+$color-warning-dark: color.scale($color-warning, $lightness: 50%) !default;
+$color-warning-light: $color-warning !default;
 
 $color-neutral-100: #f8f9fa !default;
 $color-neutral-200: #e9ecef !default;
@@ -50,4 +54,3 @@ $color-neutral-600: #6c757d !default;
 $color-neutral-700: #495057 !default;
 $color-neutral-800: #343a40 !default;
 $color-neutral-900: #212529 !default;
-

package/src/base.scss

@@ -1,5 +1,7 @@
-// Optional base element styles, without utility classes.
+// Optional base element styles, without utility classes: settings, generic, elements, objects.
 
-@forward 'core';
+@forward 'base/variables';
+@forward 'base/color-tokens';
 @forward 'base/reset';
 @forward 'base/typography-base';
+@forward 'base/layout';

package/src/theme/_chupa-pop.scss

@@ -4,28 +4,19 @@
 // The theme variables are used to customize the appearance of the Chupa Pop theme.
 // The theme variables are defined using the SCSS @use and @forward directives.
 
-@use 'sass:color';
-
 $primary: #ecb838 !default;
 $secondary: #ab4073 !default;
 $accent: #196484 !default;
 
 @forward '../base/variables' with (
   $color-primary: $primary,
-  $color-primary-dark: color.adjust($primary, $lightness: -15%),
-  $color-primary-light: color.adjust($primary, $lightness: 15%),
-
   $color-secondary: $secondary,
-  $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
-  $color-secondary-light: color.adjust($secondary, $lightness: 15%),
-
   $color-accent: $accent,
-  $color-accent-dark: color.adjust($accent, $lightness: -15%),
-  $color-accent-light: color.adjust($accent, $lightness: 15%),
 );
 
-@use '../base/variables' as *;
-@forward '../base/colors';
+@forward '../base/color-tokens';
 @forward '../base/reset';
-@forward '../base/typography';
+@forward '../base/typography-base';
 @forward '../base/layout';
+@forward '../base/color-utilities';
+@forward '../base/typography-utilities';

package/src/theme/_medical.scss

@@ -4,38 +4,23 @@
 // The theme variables are used to customize the appearance of the Medical theme.
 // The theme variables are defined using the SCSS @use and @forward directives.
 
-@use 'sass:color';
-
 $primary: #4682B4 !default;
 $secondary: #9DC183 !default;
 $accent: #A9A9A9 !default;
-$muted: #D3D3D3 !default;
+$muted: #6B7280 !default;
 $background: #FFFFFF !default;
 
 @forward '../base/variables' with (
     $color-primary: $primary,
-    $color-primary-dark: color.adjust($primary, $lightness: -15%),
-    $color-primary-light: color.adjust($primary, $lightness: 15%),
-
     $color-secondary: $secondary,
-    $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
-    $color-secondary-light: color.adjust($secondary, $lightness: 15%),
-
     $color-accent: $accent,
-    $color-accent-dark: color.adjust($accent, $lightness: -15%),
-    $color-accent-light: color.adjust($accent, $lightness: 15%),
-
     $color-muted: $muted,
-    $color-muted-dark: color.adjust($muted, $lightness: -15%),
-    $color-muted-light: color.adjust($muted, $lightness: 15%),
-
-    $color-background: $background,
-    $color-background-dark: color.adjust($background, $lightness: -5%),
-    $color-background-light: color.adjust($background, $lightness: 5%)
+    $color-background: $background
 );
 
-@use '../base/variables' as *;
-@forward '../base/colors';
+@forward '../base/color-tokens';
 @forward '../base/reset';
-@forward '../base/typography';
+@forward '../base/typography-base';
 @forward '../base/layout';
+@forward '../base/color-utilities';
+@forward '../base/typography-utilities';

package/src/theme/_tootsie-pop.scss

@@ -11,31 +11,23 @@ $secondary: #F2711C !default;
 $accent: #E94057 !default;
 $muted: #FFE5B4 !default;
 $background: #4F2F4C !default;
+// Dark background in every mode, so text stays light in every mode.
+$text: #FFF5E6 !default;
 
 @forward '../base/variables' with (
   $color-primary: $primary,
-  $color-primary-dark: color.adjust($primary, $lightness: -15%),
-  $color-primary-light: color.adjust($primary, $lightness: 15%),
-
   $color-secondary: $secondary,
-  $color-secondary-dark: color.adjust($secondary, $lightness: -15%),
-  $color-secondary-light: color.adjust($secondary, $lightness: 15%),
-
   $color-accent: $accent,
-  $color-accent-dark: color.adjust($accent, $lightness: -15%),
-  $color-accent-light: color.adjust($accent, $lightness: 15%),
-
   $color-muted: $muted,
-  $color-muted-dark: color.adjust($muted, $lightness: -15%),
-  $color-muted-light: color.adjust($muted, $lightness: 15%),
-
+  $color-text: $text,
+  $color-text-dark: $text,
   $color-background: $background,
   $color-background-dark: color.adjust($background, $lightness: -5%),
-  $color-background-light: color.adjust($background, $lightness: 5%)
 );
 
-@use '../base/variables' as *;
-@forward '../base/colors';
+@forward '../base/color-tokens';
 @forward '../base/reset';
-@forward '../base/typography';
+@forward '../base/typography-base';
 @forward '../base/layout';
+@forward '../base/color-utilities';
+@forward '../base/typography-utilities';