lumina-sass 1.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kristoffer
+
+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/README.md

@@ -0,0 +1,137 @@
+# Lumina SASS
+
+A descriptive SASS color and utility library.
+
+## Overview
+
+Lumina SASS provides a comprehensive set of standardized color variables and utility mixins designed for modern web development. The library focuses on descriptive naming conventions and easy integration.
+
+## Features
+
+- **Standardized Color Naming:** Uses a consistent `[brand]-[color]` or `[category]-[color]` pattern.
+- **Brand Colors:** Pre-defined colors for social media platforms and operating systems.
+- **Tech Colors:** Specifically curated colors for programming languages and development categories.
+- **Flexbox Utilities:** Comprehensive set of flexbox maps and utility classes.
+- **Utility Mixins:** Includes media query breakpoints, font handling, typography, figure/image styling, and button generation.
+
+## Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/lumina-sass.git
+
+# Navigate to the project
+cd lumina-sass
+```
+
+## Usage
+
+### Colors
+
+All color variables follow a descriptive naming convention:
+
+```sass
+@use 'src/color' as *
+
+.social-button
+  background-color: $discord-blue
+  &:hover
+    background-color: $discord-blue-hover
+
+.tech-tag
+  color: $typescript-blue
+  border: 1px solid $accent-slate-blue
+```
+
+### Flexbox & Mixins
+
+You can import the entire library or specific modules:
+
+```sass
+// Import everything
+@use 'src' as *
+
+// Or import specific modules
+@use 'src/flexbox' as flex
+@use 'src/mixins' as mix
+
+.container
+  +mix.flex-center
+  
+.row
+  +flex.flex-row
+```
+
+## Demo
+
+A live demo is available in the `demo/` directory.
+
+### Viewing the Demo
+You can build and serve the demo using the included npm scripts:
+
+```bash
+# Install dependencies
+npm install
+
+# Build and serve the demo locally
+npm start
+```
+This will compile the SASS and start a local web server at `http://localhost:8080`.
+
+Alternatively, you can run the tasks separately:
+```bash
+# Just build the styles
+npm run build:demo
+
+# Watch for changes and rebuild
+npm run build:demo:watch
+
+# Serve the demo folder
+npm run serve
+```
+
+## Directory Structure
+
+- `src/color/`: Contains all color definitions.
+- `src/flexbox/`: Comprehensive flexbox utilities and mappings.
+- `src/mixins/`: Utility mixins (layout, media queries, typography, buttons).
+- `src/map/`: SASS maps for configuration (icons, devices, flexbox).
+- `src/_index.sass`: Main entry point for the entire library.
+- `src/_variables.sass`: Global configuration variables.
+
+## Naming Conventions
+
+Colors are named using the following patterns:
+- **Brand/Tag:** `$[brand]-[color]` (e.g., `$linux-orange`)
+- **Category:** `$[category]-[color]` (e.g., `$compiled-orange`)
+- **States:** `$[brand]-[color]-[state]` (e.g., `$facebook-blue-hover`)
+
+## Releases & Publishing
+
+This project uses GitHub Actions to automate releases and publishing to NPM via **Trusted Publishing (OIDC)**.
+
+### Dependency Updates
+Dependabot is configured to check for npm and GitHub Action updates **monthly**.
+
+### How to Release
+1. Update the version in `package.json`.
+2. Push a new tag following the `v*` pattern (e.g., `v1.0.1`):
+   ```bash
+   git tag v1.0.1
+   git push origin v1.0.1
+   ```
+3. The GitHub Action will automatically:
+   - Create a GitHub Release with generated release notes.
+   - Publish the package to NPM with **SLSA Provenance**.
+
+### Trusted Publishing Setup
+To enable secretless publishing, you must configure **Trusted Publishers** on npmjs.com:
+1. Go to your package settings on npm.
+2. Under **Publishing access**, add **GitHub Actions** as a Trusted Publisher.
+3. Link your repository (`Krigjo25/lumina-sass`) and the workflow file (`.github/workflows/release.yml`).
+
+> **Benefits:** This setup eliminates the need for manual `NPM_TOKEN` management and provides a "Provenance" badge on npm, allowing users to verify that the package was built directly from this repository.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "lumina-sass",
+  "version": "1.6.0",
+  "description": "Lumina Sass design tokens and mixins",
+  "main": "src/_index.sass",
+  "sass": "src/_index.sass",
+  "exports": {
+    ".": {
+      "sass": "./src/_index.sass",
+      "default": "./src/_index.sass"
+    },
+    "./flexbox": {
+      "sass": "./src/flexbox/_index.sass",
+      "default": "./src/flexbox/_index.sass"
+    },
+    "./color": {
+      "sass": "./src/color/_index.sass",
+      "default": "./src/color/_index.sass"
+    },
+    "./mixins": {
+      "sass": "./src/mixins/_index.sass",
+      "default": "./src/mixins/_index.sass"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Krigjo25/lumina-sass.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:demo": "sass demo/style.sass demo/style.css",
+    "build:demo:watch": "sass demo/style.sass demo/style.css --watch",
+    "serve": "http-server demo",
+    "start": "npm run build:demo && npm run serve",
+    "release": "standard-version"
+  },
+  "files": [
+    "src"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^14.1.1",
+    "sass": "^1.85.1",
+    "standard-version": "^9.5.0"
+  }
+}

package/src/_index.sass

@@ -0,0 +1,5 @@
+@forward 'variables'
+@forward 'mix'
+@forward 'color'
+@forward 'flexbox'
+@forward 'utils/flexbox'

package/src/color/_alerts.sass

@@ -0,0 +1,2 @@
+$warning: red
+$disabled: rgb(160, 160, 160)

package/src/color/_index.sass

@@ -0,0 +1,7 @@
+@forward 'misc'
+@forward 'base'
+@forward 'icons'
+@forward 'brands'
+@forward 'stacks'
+@forward 'accents'
+@forward 'palette/groovy-70s'

package/src/color/accents/_index.sass

@@ -0,0 +1,3 @@
+$accent-salmon: rgb(255, 119, 119)
+$accent-slate-blue: rgb(123, 104, 238)
+$accent-lavender: rgb(230, 230, 250)

package/src/color/base/_index.sass

@@ -0,0 +1,17 @@
+//  Color palette Light
+
+$dark-grey: rgb(64, 64, 64)
+
+$white: rgb(245, 245, 245)
+$soft-white: rgb(244, 246, 249)
+$off-white: rgb(252, 252, 252)
+
+$light-blue: rgb(52, 152, 216)
+$deep-midnight-blue: rgb(29, 46, 84)
+
+$logo-red: rgb(179, 34, 20)
+
+$sea-green: rgb(95, 158, 160)
+
+$light-orange: rgb(231, 113, 125)
+$dark-orange: rgb(204, 85, 102)

package/src/color/brands/_github.sass

@@ -0,0 +1,4 @@
+$brand-github-gray: rgba(105, 105, 105, 1)
+$brand-github-gray-active: rgba(45, 45, 45, 1)
+$brand-github-gray-hover: rgba(120, 120, 120, 1)
+$brand-github-light-green: rgba(231, 243, 243, 1)

package/src/color/brands/_index.sass

@@ -0,0 +1,29 @@
+$github-gray: rgba(105, 105, 105, 1)
+$github-gray-active: rgba(45, 45, 45, 1)
+$github-gray-hover: rgba(120, 120, 120, 1)
+$github-light-green: rgba(231, 243, 243, 1)
+
+//  Social media colors
+$discord-blue: rgba(88, 101, 242, 1)
+$discord-blue-hover: rgba(88, 101, 242, 0.8)
+$discord-blue-active: rgba(88, 101, 242, 0.6)
+ 
+$facebook-blue: rgba(59, 89, 152, 1)
+$facebook-blue-hover: rgba(59, 89, 152, 0.8)
+$facebook-blue-active: rgba(59, 89, 152, 0.6)
+
+$instagram-purple: rgba(193, 53, 132, 1)
+$instagram-purple-hover: rgba(193, 53, 132, 0.8)
+$instagram-purple-active: rgba(193, 53, 132, 0.6)
+
+$messenger-blue: rgba(0, 132, 255, 1)
+$messenger-blue-hover: rgba(0, 132, 255, 0.8)
+$messenger-blue-active: rgba(0, 132, 255, 0.6)
+
+$youtube-red: rgba(255, 0, 0, 1)
+$youtube-red-hover: rgba(120, 6, 6, 1)
+$youtube-red-active: rgba(255, 0, 0, 0.6)
+
+$linked-in-blue: rgba(0, 0, 128, 1)
+$linked-in-blue-active: rgba(0, 0, 115, 1)
+$linked-in-blue-hover: rgba(25, 25, 140, 1)

package/src/color/brands/_lumina.sass

@@ -0,0 +1,7 @@
+// Project specific colors
+$brand-blue: rgb(52, 152, 216)
+$brand-deep-midnight-blue: rgb(29, 46, 84)
+$brand-logo-red: rgb(179, 34, 20)
+$brand-sea-green: rgb(95, 158, 160)
+$brand-light-orange: rgb(231, 113, 125)
+$brand-dark-orange: rgb(204, 85, 102)

package/src/color/brands/_social.sass

@@ -0,0 +1,24 @@
+//  Social media colors
+$brand-discord-blue: rgba(88, 101, 242, 1)
+$brand-discord-blue-hover: rgba(88, 101, 242, 0.8)
+$brand-discord-blue-active: rgba(88, 101, 242, 0.6)
+
+$brand-facebook-blue: rgba(59, 89, 152, 1)
+$brand-facebook-blue-hover: rgba(59, 89, 152, 0.8)
+$brand-facebook-blue-active: rgba(59, 89, 152, 0.6)
+
+$brand-instagram-purple: rgba(193, 53, 132, 1)
+$brand-instagram-purple-hover: rgba(193, 53, 132, 0.8)
+$brand-instagram-purple-active: rgba(193, 53, 132, 0.6)
+
+$brand-messenger-blue: rgba(0, 132, 255, 1)
+$brand-messenger-blue-hover: rgba(0, 132, 255, 0.8)
+$brand-messenger-blue-active: rgba(0, 132, 255, 0.6)
+
+$brand-youtube-red: rgba(255, 0, 0, 1)
+$brand-youtube-red-hover: rgba(120, 6, 6, 1)
+$brand-youtube-red-active: rgba(255, 0, 0, 0.6)
+
+$brand-linked-in-blue: rgba(0, 0, 128, 1)
+$brand-linked-in-blue-active: rgba(0, 0, 115, 1)
+$brand-linked-in-blue-hover: rgba(25, 25, 140, 1)

package/src/color/icons/_index.sass

@@ -0,0 +1,6 @@
+// Miscellaneous Colors
+$pdf-red : rgb(217, 83, 79)
+$email-red : rgb(255, 99, 71)
+$code-blue : rgb(0, 123, 255)
+$globe-green : rgb(40, 167, 69)
+$files-yellow : rgb(255, 193, 7)

package/src/color/misc/_index.sass

@@ -0,0 +1,10 @@
+$linux-orange: rgb(233, 84, 32)
+$windows-blue: rgb(0, 120, 212)
+$macos-silver: rgb(245, 245, 247)
+
+$misc-purple: rgb(155, 89, 182)
+$rd-lime-green: rgb(160, 255, 0)
+$fullstack-vibrant-orange: rgb(255, 140, 0)
+
+$human-emerald-glow: rgb(0, 255, 159)
+

package/src/color/neutral/_index.sass

@@ -0,0 +1,11 @@
+// Neutral palette
+$neutral-white: rgb(245, 245, 245)
+$neutral-soft-white: rgb(255, 248, 241)
+$neutral-white-mute: rgb(242, 242, 242)
+$neutral-off-white: rgb(252, 252, 252)
+
+// Text palette
+$text-light-1: rgb(60, 60, 60)
+$text-light-2: rgba(60, 60, 60, 0.66)
+$text-dark-grey: rgb(40, 40, 40)
+$text-base-dark-grey: rgb(64, 64, 64)

package/src/color/palette/groovy-70s/_index.sass

@@ -0,0 +1,16 @@
+// Groovy 70's palette
+// Naming convention: $groovy-70s-[descriptive-color-name]
+
+$groovy-70s-earth-brown: rgb(89, 61, 43)
+$groovy-70s-avocado-green: rgb(181, 215, 81)
+$groovy-70s-burnt-orange: rgb(229, 119, 30)
+$groovy-70s-mustard-yellow: rgb(230, 193, 92)
+
+$groovy-70s-cream: rgb(252, 245, 235)
+
+$groovy-70s-off-white: rgb(245, 245, 245)
+$groovy-70s-warm-white: rgb(255, 248, 241)
+$groovy-70s-muted-white: rgb(242, 242, 242)
+
+$groovy-70s-charcoal: rgb(60, 60, 60)
+$groovy-70s-charcoal-muted: rgba(60, 60, 60, 0.66)

package/src/color/stacks/_index.sass

@@ -0,0 +1,39 @@
+//  Theme color  | Compiled language
+$c-silver: rgb(168, 185, 204)
+$cplus-blue: rgb(0, 89, 156)
+$fortran-purple: rgb(115, 79, 150)
+
+$compiled-orange: rgba(238, 140, 43, 1)
+$compiled-light-orange: rgba(238, 177, 138, 1)
+
+//  Theme colors | Interpreted language
+$go-teal: rgb(0, 173, 216)
+$microsoft-green: rgb(23, 134, 0)
+$typescript-blue: rgb(81, 43, 212)
+$microsoft-purple: rgb(81, 43, 212)
+$cyan-blue-azure: rgb(55, 118, 171)
+$javascript-yellow:rgb(247, 223, 30)
+$interpreted-light-green: rgb(109, 222, 157)
+
+//  Theme colors | Database
+$db-red: rgba(204, 41, 39, .8)
+$db-light-red: rgba(255, 0, 0, .6)
+
+//  Theme colors | WorkFlow
+$workflow-blue: rgba(110, 147, 171, 1)
+$jupyter-peach: rgb(255, 204, 152)
+$workflow-light-blue: rgba(0, 191, 255, 0.6)
+
+//  Theme colors | Scripting
+$lua-blue: rgb(0, 0, 128)
+$powershell-blue: rgb(1, 36, 86)
+$shell-green: rgb(78, 254, 9)
+$scripting-light-yellow: rgb(255, 227, 128)
+
+// Theme Colors | Templating
+$meson-red: rgb(179, 32, 36)
+$jinja-red: rgb(179, 32, 36)
+$roff-grey: rgb(110, 110, 110)
+$smarty-orange: rgb(245, 185, 69)
+
+$frontend-sky-blue: rgb(92, 201, 238)

package/src/flexbox/_flexbox-column.sass

@@ -0,0 +1,30 @@
+@use '../mix/generators' as mix
+
+.flex-column-align-items-center
+    align-items: center
+    @include mix.flexbox-generator('flex-column')
+
+.flex-column-justify-center
+    justify-content: center
+    @include mix.flexbox-generator('flex-column')
+
+.flex-column-justify-space-evenly
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-column')
+
+.flex-wrap-column-align-content-center
+    align-content: center
+    @include mix.flexbox-generator('flex-wrap-column')
+
+.flex-wrap-column-align-center-justify-space-evenly
+    align-content: center
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-wrap-column')
+
+.flex-column-align-items-end
+    align-items: flex-end
+    @include mix.flexbox-generator('flex-column')
+
+.flex-wrap-column-align-content-center
+    align-content: center
+    @include mix.flexbox-generator('flex-wrap-column')

package/src/flexbox/_flexbox-reversed-row.sass

@@ -0,0 +1,21 @@
+@use '../mix/generators' as mix
+
+.flex-row-reversed-justify-center-align-content-center
+    align-content: center
+    justify-content: center
+    @include mix.flexbox-generator('flex-wrap-reversed-row')
+
+.flex-row-reversed-justify-space-around-align-content-center
+    align-content: center
+    justify-content: space-around
+    @include mix.flexbox-generator('flex-wrap-reversed-row')
+
+.flex-row-reversed-justify-space-between-align-content-center
+    align-content: center
+    justify-content: space-between
+    @include mix.flexbox-generator('flex-wrap-reversed-row')
+
+.flex-row-reversed-justify-space-evenly-align-content-centerW
+    align-content: center
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-wrap-reversed-row')

package/src/flexbox/_flexbox-row.sass

@@ -0,0 +1,37 @@
+@use '../mix/generators' as mix
+.flex-row
+    @include mix.flexbox-generator('flex-row')
+
+.flex-row-align-items-center
+    align-items: center
+    @include mix.flexbox-generator('flex-row')
+
+.inline-flex-row
+    @include mix.flexbox-generator('inline-flex-row')
+
+.inline-flex-center
+    align-items: center
+    justify-content: center
+    @include mix.flexbox-generator('inline-flex')
+
+.flex-row-justify-space-between
+    justify-content: space-between
+    @include mix.flexbox-generator('flex-row')
+
+.flex-row-align-items-flex-end-justify-center
+    align-items: flex-end 
+    justify-content: center
+    @include mix.flexbox-generator('flex-row')
+
+.flex-row-align-items-center-justify-content-space-between
+    justify-content: space-between
+    @include mix.flexbox-generator('flex-row')
+
+.flex-row-justify-center
+    justify-content: center
+    @include mix.flexbox-generator('flex-row')
+
+.flex-row-align-items-center
+    align-items: center
+    @include mix.flexbox-generator('flex-row')
+    

package/src/flexbox/_flexbox-wrap-row.sass

@@ -0,0 +1,35 @@
+@use '../mix/generators' as mix
+
+.flex-wrap-row-justify-center
+    justify-content: center
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-justify-flex-end
+    justify-content: flex-end
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-justify-flex-start
+    justify-content: flex-start
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-justify-space-evenly
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-justify-space-between
+    justify-content: space-between
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-justify-space-around
+    justify-content: space-around
+    @include mix.flexbox-generator('flex-wrap-row')
+
+//  Align items
+
+.flex-wrap-row-align-items-end
+    align-items: flex-end
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-center
+    align-items: center
+    @include mix.flexbox-generator('flex-wrap-row')

package/src/flexbox/_index.sass

@@ -0,0 +1,40 @@
+@use '../mix/generators' as mix
+
+@forward '../flexbox/flexbox-row'
+@forward '../flexbox/flexbox-column'
+@forward '../flexbox/flexbox-wrap-row'
+@forward '../flexbox/flexbox-reversed-row'
+@forward '../flexbox/row-align-justify-mix/flexbox-wrap-row-align-justify'
+
+.flex
+    @include mix.flexbox-generator('flex')
+
+.flex-center
+    @include mix.flexbox-generator('flex-center')
+
+.flex-row
+    @include mix.flexbox-generator('flex-row')
+
+.flex-column
+    @include mix.flexbox-generator('flex-column')
+
+.flex-wrap-row
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-column
+    @include mix.flexbox-generator('flex-wrap-column')
+
+.flex-wrap-reversed-row
+    @include mix.flexbox-generator('flex-wrap-reversed-row')
+
+.flex-wrap-reversed-column
+    @include mix.flexbox-generator('flex-wrap-reversed-column')
+
+.inline-flex
+    @include mix.flexbox-generator('inline-flex')
+
+.inline-flex-row
+    @include mix.flexbox-generator('inline-flex-row')
+
+.inline-flex-column
+    @include mix.flexbox-generator('inline-flex-column')

package/src/flexbox/column-align-justify-mix/column-justify-items.sass

@@ -0,0 +1,12 @@
+//  Align-content and Justify-content gen
+@use '../../mix/generators' as gen
+
+.flex-column-justify-space-evenly-items-center
+    align-items: center
+    justify-content: space-evenly
+    @include gen.flexbox-generator('flex-column')
+
+.flex-column-align-items-center-justify-center
+    align-items: center
+    justify-content: center
+    @include gen.flexbox-generator('flex-column') 

package/src/flexbox/row-align-justify-mix/_flexbox-wrap-row-align-justify.sass

@@ -0,0 +1,36 @@
+@use '../../mix/generators' as mix
+
+.flex-wrap-row-align-content-start-justify-space-evenly
+    align-content: flex-start
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-center-justify-center
+    align-items: center
+    justify-content: center
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-center-justify-space-evenly
+    align-items: center
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-center-justify-space-around
+    align-items: center
+    justify-content: space-around
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-center-justify-space-between
+    align-items: center
+    justify-content: space-between
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-end-justify-space-between
+    align-items: flex-end
+    justify-content: space-between
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-row-align-items-end-justify-space-evenly
+    align-items: flex-end
+    justify-content: space-evenly
+    @include mix.flexbox-generator('flex-wrap-row')

package/src/map/_devices-breakpoints.sass

@@ -0,0 +1,31 @@
+@use 'sass:map'
+
+
+$breakpoints:(
+    'xs': 30rem, 'sm': 48rem, 'md': 64rem,
+    'lg': 80rem, 'xl': 90rem, 'S': 12.5rem,
+    'M': 31.25rem, 'L': 50rem, 'XL': 64rem,
+    '2XL': 80rem, '3XL': 81.25rem,
+)
+
+$motorola: ('mobility-milestone': (block-size: 35.625rem, inline-size: map.get(map.get($htc, 'desire'), 'inline-size')))
+$sony-ericson: ('u': (block-size: 53.375rem, inline-size: map.get(map.get($motorola, 'mobility-milestone'),'inline-size')))
+$misc-breakpoints: ('tablet': (block-size: 50rem, inline-size: 37.5rem), 'wideScreen': (block-size: 48rem, inline-size: 79.625rem))
+$amazon: ('kindle-fire': (inline-size: 37.5rem, block-size: map.get($breakpoints, 'XL')), 'kindle-fire-hd': (inline-size: 50rem, block-size: map.get($breakpoints, '2XL')))
+$microsoft: ('surface-pro': (block-size: 85.5rem, inline-size: 57rem), 'surface-duoc': (block-size: 45rem, inline-size: map.get(map.get($htc, 'sensation'), 'inline-size')))
+$display: ('hd-720p': (block-size: 45rem, inline-size: 80rem), 'hd-1080i': (block-size: 67.5rem, inline-size: 90rem), 'hd-1080p': (block-size: 52.875rem, inline-size: 114.938rem))
+$asus: ('zbc': (inline-size: 53.3125rem, block-size: map.get(map.get($amazon, 'kindle-fire-hd'), 'block-size')), 'zbf': (inline-size: 106.625rem, block-size: map.get(map.get($amazon, 'kindle-fire-hd'), 'block-size')))
+$black-berry: ('bt': (inline-size: map.get(map.get($apple, 'iphone'),'block-size'), block-size: 40rem), 'curve': (inline-size: 22.5rem, block-size: map.get(map.get($apple, 'iphone'),'block-size')), 'original': (block-size: 50rem, inline-size: map.get(map.get($apple, 'iphone'),'block-size')))
+$htc: ('desire': (block-size: 33.3125rem, inline-size: map.get(map.get($google, 'nest-hub-max'), 'inline-size')), 'sensation': (block-size: 60rem, inline-size: 33.75rem), 'one': (block-size: map.get(map.get($black-berry, 'original'), 'block-size'), inline-size: map.get(map.get($google, 'nest-hub-max'), 'inline-size')))
+$google: ('pixel': (block-size: 57.1875rem, inline-size: map.get(map.get($black-berry, 'original'), 'inline-size')), 'nest-hub': (block-size: 37.5rem, inline-size: map.get($breakpoints, 'XL')), 'nest-hub-max': (block-size: map.get($breakpoints, 'XL'), inline-size: map.get(map.get($black-berry, 'original'), 'inline-size')))
+$sharp: ('is03': (block-size: map.get(map.get($htc, 'one'), 'block-size'), inline-size: map.get(map.get($samsung, 'gs8'), 'inline-size')), '941sh': (block-size: map.get($breakpoints, 'XL'), inline-size: map.get(map.get($sony-ericson, 'u'), 'inline-size')), 'sx862': (block-size: map.get(map.get($sony-ericson, 'u'), 'block-size'), inline-size: map.get(map.get($sony-ericson, 'u'), 'inline-size')))
+$samsung: ('gcz5': (block-size: 46.25rem, inline-size: 21.5rem), 'gs8': (block-size: 46.25rem, inline-size: map.get(map.get($black-berry, 'curve'), 'inline-size')), 'gfz5': (block-size: 51.8125rem, inline-size: map.get(map.get($black-berry, 'curve'), 'inline-size')), 'ga5171': (block-size: 57.125rem, inline-size: map.get(map.get($apple, 'iphone-plus'), 'inline-size')), 'tab': (block-size: 42.6875rem, inline-size: 25rem), 'gs20u': (block-size: map.get(map.get($google, 'pixel'), 'block-size'), inline-size: map.get(map.get($apple, 'iphone-plus'), 'inline-size')))
+$apple: ('ipad': (inline-size: 48rem, block-size: map.get($breakpoints, 'XL')), 'ipad-air': (block-size: 73.75rem, inline-size: 51.25rem), 'ipad-pro': (block-size: 85.375rem, inline-size: 64rem), 'tv-cd': (block-size: 160rem, inline-size: 100rem), 'iphone': (block-size: 30rem, inline-size: 20rem), 'iphone-7': (block-size: 41.6875rem, inline-size: 23.4375rem), 'iphone-xr': (block-size: 56rem, inline-size: 25.875rem), 'iphone-pro': (block-size: 52.75rem, inline-size: 24.375rem), 'iphone-pro-height': 52.75rem, 'iphone-plus': (block-size: 46rem, inline-size: 25.75rem), 'iphone-pro-max': (block-size: 57.875rem, inline-size: 26.875rem))
+
+
+$devices:(
+    'htc': $htc, 'sharp': $sharp, 'apple': $apple,
+    'google': $google, 'display': $display, 'samsung': $samsung,
+    'motorola': $motorola, 'misc': $misc-breakpoints,
+    'black-berry': $black-berry, 'sony-ericson': $sony-ericson,
+)

package/src/map/_flexbox.sass

@@ -0,0 +1,20 @@
+$flex: ('display': flex)
+$inline-flex: ('display': inline-flex)
+$flex-row: ('display': flex, 'flex-wrap': nowrap, 'flex-direction': row)
+$flex-wrap-row: ('display': flex, 'flex-wrap': wrap, 'flex-direction': row)
+$flex-column: ('display': flex, 'flex-wrap': nowrap, 'flex-direction': column)
+$flex-wrap-column: ('display': flex, 'flex-wrap': wrap, 'flex-direction': column)
+$flex-center: ('display': flex, 'justify-content': center, 'align-items': center)
+$inline-flex-row: ('flex-wrap': nowrap, 'flex-direction': row, 'display': inline-flex)
+$inline-flex-column: ('flex-wrap': nowrap, 'display': inline-flex, 'flex-direction': column)
+$flex-wrap-reversed-row: ('display': flex, 'flex-wrap': wrap, 'flex-direction': row-reverse)
+$flex-wrap-reversed-column: ('display': flex, 'flex-wrap': wrap, 'flex-direction': column-reverse)
+
+
+$flexbox:(
+    'flex': $flex, 'flex-row': $flex-row, 'flex-center': $flex-center,
+    'flex-column': $flex-column, 'inline-flex': $inline-flex, 'flex-wrap-row': $flex-wrap-row,
+    'inline-flex-row': $inline-flex-row, 'flex-wrap-column': $flex-wrap-column,
+    'inline-flex-column': $inline-flex-column, 'flex-wrap-reversed-row': $flex-wrap-reversed-row,
+    'flex-wrap-reversed-column': $flex-wrap-reversed-column,
+)

package/src/map/_icons.sass

@@ -0,0 +1,21 @@
+// Combined and structured icons map
+@use '../color/_index' as color
+
+$academic: ('school': (icon: "\F62F"), 'diploma': (icon: "\F153"))
+$boolean-controls: ('radio': (icon: '\F1D0'), 'checkbox': (icon: '\F272'))
+$utility-inputs: ('range': (icon: '\F0E7'), 'color': (icon: '\F4B0'), 'hidden': (icon: '\F0E7'))
+$documents: ('pdf': (icon: "\F63F"), 'default': (icon: ""), 'word': (icon: "\F641"), 'excel': (icon: "\F642"))
+$buttons: ('file': (icon: '\F0E7'), 'submit': (icon: '\F0E7'), 'reset': (icon: '\F0E7'), 'button': (icon: '\F0E7'))
+$datetime-pickers: ('date': (icon: '\F073'), 'time': (icon: '\F017'), 'week': (icon: '\F4C0'), 'month': (icon: '\F4C1'), 'datetime-local': (icon: '\F017'))
+$input-controls: ('tel': (icon: '\F5BB'), 'url': (icon: '\F882'), 'text': (icon: '\F435'), 'search': (icon: '\F52A'), 'number': (icon: ' \F67F'), 'password': (icon: '\F44E'))
+$misc-icons: ('dir': (icon: "\F3D7"), 'globe': (icon: "\F882"), 'map-pin': (icon: "\F64B"), 'calendar': (icon: "\F1E7"), 'internship': (icon: "\F0E7"), 'collaborator': (icon: "\F4D0"))
+$misc: ('pdf': (icon: "\F63D"), 'dot': (icon: "\F309"), 'email': (icon: "\F84B"), 'default': (icon: "\F82E"), 'calendar': (icon: "\F1F6"), 'telephone': (icon: "\F5C1"), 'external-link': (icon: "\F35D"))
+$communication: ('mail': (icon: "\F32F"), 'github': (icon: "\F3ED"), 'ytube': (icon: "\F62B"), 'facebook': (icon: "\F344"), 'linkedin': (icon: "\F472"), 'instagram': (icon: "\F437"), 'twitter': (icon: "\F519"))
+
+
+$icons: (
+    'misc': $misc, 'buttons': $buttons, 'utility-inputs': $utility-inputs,
+    'input-controls': $input-controls, 'boolean-controls': $boolean-controls,
+    'datetime-pickers': $datetime-pickers, 'document': $documents,
+    'communication': $communication, 'academic': $academic,
+    'misc-icons': $misc-icons)

package/src/mix/_generators.sass

@@ -0,0 +1,27 @@
+@use 'sass:map' as map
+@use './mixins' as mix
+
+@use '../map/icons' as icon-map
+@use '../map/flexbox' as flexbox-mapping
+
+@mixin icon-generator($color: null, $font-family: 'bootstrap-icons')
+    @if icon-map.$icons
+        @each $category, $maps in icon-map.$icons
+            @each $icon, $props in $maps
+                .#{$icon}
+                    font-family: $font-family
+                    &:before
+                        content: map.get($props, icon)
+                    @if $color
+                        color: $color
+    @else
+        @error 'Icon mapping not found.'
+
+@mixin flexbox-generator($name)
+    $props: map.get(flexbox-mapping.$flexbox, $name)
+
+    @if $props
+        @each $property, $value in $props
+            #{$property}: $value
+    @else
+        @error '"#{$name}" not found in flexbox mapping.'

package/src/mix/_index.sass

@@ -0,0 +1,3 @@
+@forward 'media'
+@forward 'typography'
+@forward 'generators'

package/src/mix/_media.sass

@@ -0,0 +1,24 @@
+@use '../map/devices-breakpoints' as bp
+@use 'sass:map'
+
+@mixin media($breakpoint)
+  $value: if(map.has-key(bp.$breakpoints, $breakpoint), map.get(bp.$breakpoints, $breakpoint), $breakpoint)
+
+  @media (max-width: $value)
+    @content
+
+@mixin figure-and-image($object-fit: cover, $size: null, $style: null)
+    figure
+        picture, img
+          inline-size: 100%
+          object-fit: $object-fit
+
+        picture
+          img
+            inline-size: 100%
+            object-fit: $object-fit
+        figcaption
+          @if $size != null & $style != null
+            @include mix.font($size, $style)
+        
+            

package/src/mix/_typography.sass

@@ -0,0 +1,33 @@
+@use 'sass:list'
+
+@mixin text-wrap-safe()
+    p, h1, h2, h3, h4, h5, h6, figcaption, a, li
+        hyphens: auto
+        min-inline-size: 0
+        word-wrap: anywhere
+        white-space: pre-wrap
+        overflow-wrap: anywhere
+
+@mixin font-style($font, $family: null)
+    $sans-serif: ('Roboto', 'Work Sans', 'Nunito')
+
+    @if list.index($sans-serif, $font)
+        $family: sans-serif
+
+    font-family: $font, $family
+
+@mixin font($size: null, $weight: null, $font: null, $family: null, $style: null)
+    @if $font != null
+        @include font-style($font, $family)
+    @else if $family != null
+        font-family: $family
+
+    @if $size != null
+        font-size: $size
+
+    @if $weight != null
+        font-weight: $weight
+
+    @if $style != null
+        font-style: $style
+

package/src/utils/_flexbox.sass

@@ -0,0 +1,32 @@
+@use '../mix/generators' as mix
+
+@forward '../flexbox/flexbox-row'
+@forward '../flexbox/flexbox-column'
+@forward '../flexbox/flexbox-wrap-row'
+@forward '../flexbox/flexbox-reversed-row'
+@forward '../flexbox/row-align-justify-mix/flexbox-wrap-row-align-justify'
+
+.flex-inline
+    @include mix.flexbox-generator('inline-flex')
+
+.flex
+    @include mix.flexbox-generator('flex')
+
+.flex-row
+    @include mix.flexbox-generator('flex-row')
+
+.flex-wrap-row
+    @include mix.flexbox-generator('flex-wrap-row')
+
+.flex-wrap-reversed-row
+    @include mix.flexbox-generator('flex-wrap-reversed-row')
+
+.flex-column
+    @include mix.flexbox-generator('flex-column')
+
+.flex-wrap-column
+    @include mix.flexbox-generator('flex-wrap-column')
+
+.flex-wrap-reversed-column
+    @include mix.flexbox-generator('flex-wrap-reversed-column')
+