@bamx/scss 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Bäumer Afonso Meissner GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,32 @@
+{
+  "access": "public",
+  "author": "Dev <dev@bam-bam-bam-com> (https://bam-bam-bam.com/)",
+  "description": "SCSS Framework",
+  "directories": {
+    "lib": "src"
+  },
+  "exports": {
+    "sass": "./src/_index.scss"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "scss",
+    "sass",
+    "framework",
+    "frontend",
+    "bam-bam-bam"
+  ],
+  "license": "MIT",
+  "main": "src/_index.scss",
+  "name": "@bamx/scss",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bam-bam-bam-com/scss.git"
+  },
+  "style": "src/_index.scss",
+  "version": "0.1.1"
+}

package/src/_breakpoints.scss

@@ -0,0 +1,48 @@
+@use 'sass:map' as map;
+// @use "config" as *;
+$breakpoints: (
+    xs: 375px,
+    s: 680px,
+    sm: 680px,
+    m: 768px,
+    md: 768px,
+    l: 1024px,
+    lg: 1024px,
+    xl: 1280px,
+    xxl: 1440px,
+    hd: 1920px,
+) !default !global;
+
+@function breakpoint($key) {
+    @return map.get($breakpoints, $key);
+}
+
+@mixin mq-to($key) {
+    @media (width < breakpoint($key)) {
+        @content;
+    }
+}
+
+@mixin mq-from($key) {
+    @media (width >= breakpoint($key)) {
+        @content;
+    }
+}
+
+@mixin mq-range($from, $to) {
+    @media (breakpoint($from) <= width < breakpoint($to)) {
+        @content;
+    }
+}
+
+@mixin responsive-property($property, $breakpoint_value_map) {
+    @each $breakpoint, $value in $breakpoint_value_map {
+        @if ($breakpoint != default) {
+            @include mq-from($breakpoint) {
+                #{$property}: $value;
+            }
+        } @else {
+            #{$property}: $value;
+        }
+    }
+}

package/src/_grid.scss

@@ -0,0 +1,59 @@
+@use '@/scss/framework/framework-utils' as *;
+
+/**
+ * Generates a grid definition for a grid with equal sized columns
+ *
+ * @param   {number | custom css prop}  $grid-columns    grid column count; must be even and greate or equal than 4
+ * @param   {number | custom css prop}  $gutter-size     grid gutter size
+ *
+ * @return  grid definition
+ */
+@function generate-content-grid($grid-columns: var(--default-grid-columns, 12), $gutter-size: var(--default-grid-gutter-size, 16px)) {
+    $_grid-columns: #{$grid-columns};
+    $_total-gutter-size: calc((#{$_grid-columns} - 1) * #{$gutter-size});
+
+    /* prettier-ignore */
+    $_content-width: calc(#{var(--page-width)} - 2 * #{var(--page-indent)} - 2 * #{var(--content-indent)});
+    $_column-size: minmax(0, calc(($_content-width - $_total-gutter-size) / $_grid-columns));
+
+    $cols-count: calc(($_grid-columns / 2) - 1);
+
+    /* prettier-ignore */
+    @return [grid-start]
+        repeat(
+            $cols-count,
+            [column-start] $_column-size [column-end] #{$gutter-size}
+        )
+        [column-start] $_column-size [column-end]
+        calc(#{var(--default-grid-gutter-size, 0px)} / 2)
+        [mid]
+        calc(#{var(--default-grid-gutter-size, 0px)} / 2)
+        repeat(
+            $cols-count,
+            [column-start] $_column-size [column-end] #{var(--default-grid-gutter-size)}
+        )
+        [column-start] $_column-size [column-end grid-end];
+}
+
+@mixin section-grid($content-grid: generate-content-grid()) {
+    display: grid;
+    column-gap: 0;
+
+    $_viewport-indent: calc((100% - #{var(--page-width)}) / 2);
+
+    @include v(
+        (
+            viewport-indent: (
+                default: 0px,
+                xs: $_viewport-indent,
+            ),
+        )
+    );
+
+    grid-template-columns:
+        [viewport-start] var(--viewport-indent)
+        [page-start] var(--page-indent)
+        [content-start] #{var(--content-indent)} $content-grid #{var(--content-indent)} [content-end]
+        var(--page-indent) [page-end]
+        var(--viewport-indent) [viewport-end];
+}

package/src/_index.scss

@@ -0,0 +1,5 @@
+@forward 'breakpoints';
+@forward 'functions';
+@forward 'mixins';
+@forward 'grid';
+@forward 'v';

package/src/_v.scss

@@ -0,0 +1,44 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+@use 'breakpoints';
+
+@function get-var-name($key, $infix: '') {
+    $prefix: '';
+
+    @if $infix != '' {
+        $infix: $infix + '-';
+    }
+
+    @return #{$prefix}#{$infix}#{$key};
+}
+
+@mixin _output-value($var-base-name, $value) {
+    $var-name: get-var-name($var-base-name);
+    #{$var-name}: $value;
+}
+
+@mixin v($map_or_key, $value: null, $skipStore: false) {
+    $type: meta.type-of($map_or_key);
+
+    @if $type == map {
+        @each $var-base-name, $v in $map_or_key {
+            $var_name: get-var-name($var-base-name);
+
+            @if & {
+                @if (meta.type-of($v) == map) {
+                    // write out vars in media queries
+                    @include breakpoints.responsive-property($var_name, $v);
+                } @else if $v {
+                    @include _output-value($var-base-name, $v);
+                }
+            }
+        }
+    } @else {
+        $var-base-name: $map_or_key;
+
+        @if & {
+            @include _output-value($var-base-name, $value);
+        }
+    }
+}

package/src/functions/_clamped.scss

@@ -0,0 +1,12 @@
+@use 'sass:math';
+
+$default-min-bp: 320px !default !global;
+$default-max-bp: 2560px !default !global;
+
+@function clamped($min-px, $max-px, $min-bp: $default-min-bp, $max-bp: $default-max-bp) {
+    $slope: math.div($max-px - $min-px, $max-bp - $min-bp);
+    $intercept-px: $min-px - $slope * $min-bp;
+    $slope-vw: $slope * 100;
+
+    @return clamp(#{$min-px}, #{$slope-vw}vw + #{$intercept-px}, #{$max-px});
+}

package/src/functions/_index.scss

@@ -0,0 +1,2 @@
+@forward 'clamped';
+@forward 'shadows';

package/src/functions/_shadows.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@use '../v' as *;
+
+@function shadow-elevated($level: 0, $color: #{var(--color-shadow, #000)}) {
+    @if ($level == 1) {
+        @return 10px 10px 20px 0px color-mix(in srgb, $color 92%, transparent);
+    } @else if ($level == 2) {
+        @return 0px 30px 30px color-mix(in srgb, $color 25%, transparent);
+    } @else {
+        @return 0px 0px 0px 0px $color;
+    }
+}
+
+@function material-shadow($xOffset, $yOffset, $level, $color: #{var(--color-shadow, #000)}) {
+    // Material Design elevation levels (approximations)
+    $blur: $level * 4px; // Blur increases with level
+    $spread: $level * 1px; // Spread increases with level
+    $opacity: math.clamp(0, (1 - $level * 0.05), 1) * 100%;
+
+    @return #{$xOffset} #{$yOffset} #{$blur} #{$spread} color-mix(in srgb, #{$color} #{$opacity}, transparent);
+}

package/src/mixins/_font-smoothing.scss

@@ -0,0 +1,9 @@
+@mixin font-smoothing($value: antialiased) {
+    @if $value == antialiased {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    } @else {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+}

package/src/mixins/_hover.scss

@@ -0,0 +1,8 @@
+@mixin hover($selector: '&:hover', $hover: hover, $pointer: fine) {
+    // https://hover-pointer-media-query.glitch.me/
+    @media (hover: $hover) and (pointer: $pointer) {
+        #{$selector} {
+            @content;
+        }
+    }
+}

package/src/mixins/_index.scss

@@ -0,0 +1,5 @@
+@forward 'font-smoothing';
+@forward 'hover';
+@forward 'normalize';
+@forward 'scrollbars';
+@forward 'svg-auto-color';

package/src/mixins/_normalize.scss

@@ -0,0 +1,401 @@
+@mixin normalize {
+    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+    /* Document
+   ========================================================================== */
+
+    /**
+     * 1. Correct the line height in all browsers.
+     * 2. Prevent adjustments of font size after orientation changes in iOS.
+     */
+
+    html {
+        line-height: 1.15;
+        /* 1 */
+        -webkit-text-size-adjust: 100%;
+        /* 2 */
+    }
+
+    /* Sections
+     ========================================================================== */
+
+    /**
+   * Remove the margin in all browsers.
+   */
+
+    body {
+        padding: 0;
+        margin: 0;
+    }
+
+    /**
+   * Render the `main` element consistently in IE.
+   */
+
+    main {
+        display: block;
+    }
+
+    figure: {
+        margin: 0;
+    }
+
+    svg {
+        vertical-align: middle;
+    }
+
+    video {
+        object-fit: fill;
+        background-size: 100% 100%;
+    }
+
+    /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+    h1 {
+        font-size: 2em;
+        margin: 0.67em 0;
+    }
+
+    /* Grouping content
+     ========================================================================== */
+
+    /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+    hr {
+        box-sizing: content-box;
+        /* 1 */
+        height: 0;
+        /* 1 */
+        overflow: visible;
+        /* 2 */
+    }
+
+    /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+    pre {
+        font-family: monospace, monospace;
+        /* 1 */
+        font-size: 1em;
+        /* 2 */
+    }
+
+    /* Text-level semantics
+     ========================================================================== */
+
+    /**
+   * Remove the gray background on active links in IE 10.
+   */
+
+    a {
+        background-color: transparent;
+    }
+
+    /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+    abbr[title] {
+        border-bottom: none;
+        /* 1 */
+        text-decoration: underline;
+        /* 2 */
+        text-decoration: underline dotted;
+        /* 2 */
+    }
+
+    /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+    code,
+    kbd,
+    samp {
+        font-family: monospace, monospace;
+        /* 1 */
+        font-size: 1em;
+        /* 2 */
+    }
+
+    /**
+   * Add the correct font size in all browsers.
+   */
+
+    small {
+        font-size: 80%;
+    }
+
+    /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    /* Embedded content
+     ========================================================================== */
+
+    /**
+   * Remove the border on images inside links in IE 10.
+   */
+
+    img {
+        display: inline-block;
+        border-style: none;
+        vertical-align: middle;
+    }
+
+    picture {
+        display: contents;
+    }
+
+    /* Forms
+     ========================================================================== */
+
+    /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        font-family: inherit;
+        /* 1 */
+        font-size: 100%;
+        /* 1 */
+        line-height: 1.15;
+        /* 1 */
+        margin: 0;
+        /* 2 */
+    }
+
+    /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+    button,
+    input {
+        /* 1 */
+        overflow: visible;
+    }
+
+    /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+    button,
+    select {
+        /* 1 */
+        text-transform: none;
+    }
+
+    /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+    button,
+    [type='button'],
+    [type='reset'],
+    [type='submit'] {
+        -webkit-appearance: button;
+    }
+
+    /**
+   * Remove the inner border and padding in Firefox.
+   */
+
+    button::-moz-focus-inner,
+    [type='button']::-moz-focus-inner,
+    [type='reset']::-moz-focus-inner,
+    [type='submit']::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+    }
+
+    /**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+    button:-moz-focusring,
+    [type='button']:-moz-focusring,
+    [type='reset']:-moz-focusring,
+    [type='submit']:-moz-focusring {
+        outline: 1px dotted ButtonText;
+    }
+
+    /**
+   * Correct the padding in Firefox.
+   */
+
+    fieldset {
+        padding: 0.35em 0.75em 0.625em;
+    }
+
+    /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+    legend {
+        box-sizing: border-box;
+        /* 1 */
+        color: inherit;
+        /* 2 */
+        display: table;
+        /* 1 */
+        max-width: 100%;
+        /* 1 */
+        padding: 0;
+        /* 3 */
+        white-space: normal;
+        /* 1 */
+    }
+
+    /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+    progress {
+        vertical-align: baseline;
+    }
+
+    /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+    textarea {
+        overflow: auto;
+    }
+
+    /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+    [type='checkbox'],
+    [type='radio'] {
+        box-sizing: border-box;
+        /* 1 */
+        padding: 0;
+        /* 2 */
+    }
+
+    /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+    [type='number']::-webkit-inner-spin-button,
+    [type='number']::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+    [type='search'] {
+        -webkit-appearance: textfield;
+        /* 1 */
+        outline-offset: -2px;
+        /* 2 */
+    }
+
+    /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+    [type='search']::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+    ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        /* 1 */
+        font: inherit;
+        /* 2 */
+    }
+
+    /* Interactive
+     ========================================================================== */
+
+    /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+    details {
+        display: block;
+    }
+
+    /*
+   * Add the correct display in all browsers.
+   */
+
+    summary {
+        display: list-item;
+    }
+
+    /* Misc
+     ========================================================================== */
+
+    /**
+   * Add the correct display in IE 10+.
+   */
+
+    template {
+        display: none;
+    }
+
+    /**
+   * Add the correct display in IE 10.
+   */
+
+    [hidden] {
+        display: none;
+    }
+}

package/src/mixins/_scrollbars.scss

@@ -0,0 +1,16 @@
+@mixin scrollbars($size: 10px, $foreground-color: black, $background-color: gray) {
+    // For Chrome & Safari
+    &::-webkit-scrollbar {
+        width: $size;
+        height: $size;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: $foreground-color;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: $background-color;
+    }
+
+    // Standard version (Firefox only for now)
+    scrollbar-color: $foreground-color $background-color;
+}

package/src/mixins/_svg-auto-color.scss

@@ -0,0 +1,8 @@
+@mixin svg-auto-color {
+    [fill]:not([fill='none']) {
+        fill: currentColor;
+    }
+    [stroke]:not([stroke='none']) {
+        stroke: currentColor;
+    }
+}