@mineui/tokens 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Maysara Elshewehy (https://github.com/maysara-elshewehy)
+
+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,259 @@
+<!-- ╔══════════════════════════════ BEG ══════════════════════════════╗ -->
+
+<br>
+<div align="center">
+    <p>
+        <img src="./assets/img/logo.png" alt="logo" style="" height="60" />
+    </p>
+</div>
+
+<div align="center">
+    <img src="https://img.shields.io/badge/v-1.0.0-black"/>
+    <a href="https://github.com/mineui-org"><img src="https://img.shields.io/badge/🔥-@mineui-black"/></a>
+    <br>
+    <img src="https://img.shields.io/badge/coverage-100%25-brightgreen" alt="Test Coverage" />
+    <img src="https://img.shields.io/github/issues/mineui-orgx/tokens?style=flat" alt="Github Repo Issues" />
+    <img src="https://img.shields.io/github/stars/mineui-orgx/tokens?style=social" alt="GitHub Repo stars" />
+</div>
+<br>
+
+<!-- ╚═════════════════════════════════════════════════════════════════╝ -->
+
+
+
+<!-- ╔══════════════════════════════ DOC ══════════════════════════════╗ -->
+
+- ## Overview 👀
+
+    - #### Why ?
+        > To standardize the design system with 350+ pre-configured tokens (colors, spacing, typography, shadows) using HSL format and semantic naming.
+
+    - #### When ?
+        > When using [@mineui](https://github.com/mineui-org) and [@cruxjs](https://github.com/cruxjs-org) to build consistent, scalable design systems and component libraries.
+
+    <br>
+    <br>
+
+- ## Quick Start 🔥
+
+    > install [`hmm`](https://github.com/minejs-org/hmm) first.
+
+    ```bash
+    # in your terminal
+    hmm i @mineui/tokens
+    ```
+
+    ```scss
+    # in your `.scss` files
+    @use "./node_modules/@mineui/tokens/dist/scss/index.scss" as *;
+    ```
+
+    <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
+    <br>
+
+
+    - ### Colors
+
+        ```scss
+        .button {
+          background: $blue-6;    // Main blue
+          color: $gray-0;         // Almost white
+          border: 1px solid $gray-3;
+        }
+        ```
+
+    - ### Spacing & Typography
+
+        ```scss
+        .card {
+          padding: $sp-6;         // 1.5rem (24px)
+          font-size: $fs-lg;      // 1.125rem (18px)
+          font-weight: $fw-medium; // 500
+          border-radius: $br-lg;   // 0.5rem (8px)
+        }
+        ```
+
+    <br>
+    <br>
+
+- ## Documentation 📑
+
+
+    - ### API ⛓️
+
+        - #### Colors
+            > 11 color palettes × 11 shades each. HSL format for easy manipulation.
+
+            ```scss
+            // Gray scale (12 shades)
+            $gray-0 to $gray-11
+            
+            // Brand colors (11 shades each)
+            $blue-1 to $blue-11
+            $green-1 to $green-11
+            $red-1 to $red-11
+            $amber-1 to $amber-11
+            $orange-1 to $orange-11
+            $purple-1 to $purple-11
+            $pink-1 to $pink-11
+            $cyan-1 to $cyan-11
+            $teal-1 to $teal-11
+            $indigo-1 to $indigo-11
+            ```
+
+        - #### Spacing
+
+            > Perfect scale from 0 to 64 (0px to 256px).
+
+            ```scss
+            $sp-0, $sp-1, $sp-2, $sp-3, $sp-4, $sp-5, $sp-6, 
+            $sp-7, $sp-8, $sp-9, $sp-10, $sp-12, $sp-14, $sp-16,
+            $sp-20, $sp-24, $sp-28, $sp-32, $sp-36, $sp-40,
+            $sp-44, $sp-48, $sp-52, $sp-56, $sp-60, $sp-64
+            ```
+
+        - #### Typography
+
+            > Font families, sizes, weights, line heights, letter spacing.
+
+            ```scss
+            // Families
+            $font-sans, $font-serif, $font-mono, $font-arabic
+            
+            // Sizes
+            $fs-xs to $fs-9xl
+            
+            // Weights
+            $fw-thin to $fw-black
+            
+            // Line heights
+            $lh-none to $lh-loose
+            
+            // Letter spacing
+            $ls-tighter to $ls-widest
+            ```
+
+        - #### Borders
+
+            > Widths and radius values.
+
+            ```scss
+            // Widths
+            $bw-0 to $bw-8
+            
+            // Radius
+            $br-none to $br-3xl, $br-full
+            ```
+
+        - #### Shadows
+
+            > Realistic shadows for light and dark modes.
+
+            ```scss
+            // Light mode
+            $shadow-xs, $shadow-sm, $shadow-base, $shadow-md,
+            $shadow-lg, $shadow-xl, $shadow-2xl, $shadow-inner
+            
+            // Dark mode
+            $shadow-xs-dark to $shadow-2xl-dark
+            ```
+
+        - #### Z-Index
+
+            > Layering system with semantic names.
+
+            ```scss
+            $z-0 to $z-50
+            $z-dropdown, $z-sticky, $z-fixed, $z-backdrop,
+            $z-modal, $z-popover, $z-tooltip, $z-notification
+            ```
+
+        - #### Transitions
+
+            > Durations and easing functions.
+
+            ```scss
+            // Durations
+            $dur-instant to $dur-slowest
+            
+            // Easings
+            $ease-linear, $ease-in, $ease-out, $ease-in-out,
+            $ease-bounce, $ease-elastic
+            ```
+
+        - #### Opacity
+
+            > 0% to 100% in useful increments.
+
+            ```scss
+            $opacity-0, $opacity-5, $opacity-10, $opacity-20,
+            $opacity-25, $opacity-30, $opacity-40, $opacity-50,
+            $opacity-60, $opacity-70, $opacity-75, $opacity-80,
+            $opacity-90, $opacity-95, $opacity-100
+            ```
+
+        - #### Breakpoints
+
+            > Responsive design breakpoints.
+
+            ```scss
+            $bp-xs: 0
+            $bp-sm: 640px
+            $bp-md: 768px
+            $bp-lg: 1024px
+            $bp-xl: 1280px
+            $bp-2xl: 1536px
+            ```
+
+        - #### Sizes
+
+            > Common component sizes.
+
+            ```scss
+            $size-xs to $size-2xl
+            ```
+
+        - #### Blur
+
+            > Backdrop and effect blur values.
+
+            ```scss
+            $blur-none to $blur-3xl
+            ```
+
+        - #### Aspect Ratios
+
+            > Common aspect ratios.
+
+            ```scss
+            $aspect-square, $aspect-video, $aspect-4-3,
+            $aspect-21-9, $aspect-portrait, $aspect-auto
+            ```
+
+        <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
+        <br>
+
+    - ### Related 🔗
+
+        - ##### [@mineui/semantic](https://github.com/mineui-org/semantic)
+            > Theme system and semantic variables built on these tokens
+
+        - ##### [@mineui/core](https://github.com/mineui-org/core)
+            > Complete UI framework using these tokens
+
+<!-- ╚═════════════════════════════════════════════════════════════════╝ -->
+
+
+
+<!-- ╔══════════════════════════════ END ══════════════════════════════╗ -->
+
+<br>
+<br>
+
+---
+
+<div align="center">
+    <a href="https://github.com/maysara-elshewehy"><img src="https://img.shields.io/badge/by-Maysara-black"/></a>
+</div>
+
+<!-- ╚═════════════════════════════════════════════════════════════════╝ -->

package/dist/index.css

@@ -0,0 +1 @@
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css"}

package/dist/scss/aspect.scss

@@ -0,0 +1,15 @@
+// aspect.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// ASPECT RATIOS
+// ----------------------------------------------------------------------------
+    $aspect-square: 1 / 1;
+    $aspect-video: 16 / 9;
+    $aspect-4-3: 4 / 3;
+    $aspect-21-9: 21 / 9;
+    $aspect-portrait: 3 / 4;
+    $aspect-auto: auto;

package/dist/scss/blur.scss

@@ -0,0 +1,17 @@
+// blur.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// BLUR - Backdrop & Effects
+// ----------------------------------------------------------------------------
+    $blur-none: 0;
+    $blur-sm: 4px;
+    $blur-base: 8px;
+    $blur-md: 12px;
+    $blur-lg: 16px;
+    $blur-xl: 24px;
+    $blur-2xl: 40px;
+    $blur-3xl: 64px;

package/dist/scss/borders.scss

@@ -0,0 +1,29 @@
+// borders.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// Border Widths
+// ----------------------------------------------------------------------------
+    $bw-0: 0;
+    $bw-1: 1px;
+    $bw-2: 2px;
+    $bw-3: 3px;
+    $bw-4: 4px;
+    $bw-6: 6px;
+    $bw-8: 8px;
+
+// ----------------------------------------------------------------------------
+// Border Radius
+// ----------------------------------------------------------------------------
+    $br-none: 0;
+    $br-sm: 0.125rem; // 2px
+    $br-base: 0.25rem; // 4px
+    $br-md: 0.375rem; // 6px
+    $br-lg: 0.5rem; // 8px
+    $br-xl: 0.75rem; // 12px
+    $br-2xl: 1rem; // 16px
+    $br-3xl: 1.5rem; // 24px
+    $br-full: 9999px;

package/dist/scss/breakpoints.scss

@@ -0,0 +1,26 @@
+// breakpoints.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// BREAKPOINTS - Responsive Design
+// ----------------------------------------------------------------------------
+    $bp-xs: 0;
+    $bp-sm: 640px;
+    $bp-md: 768px;
+    $bp-lg: 1024px;
+    $bp-xl: 1280px;
+    $bp-2xl: 1536px;
+
+    // Map for easy iteration
+    $breakpoints: (
+        'xs': $bp-xs,
+        'sm': $bp-sm,
+        'md': $bp-md,
+        'lg': $bp-lg,
+        'xl': $bp-xl,
+        '2xl': $bp-2xl,
+    );
+

package/dist/scss/colors.scss

@@ -0,0 +1,171 @@
+// colors.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// Gray Scale (11 shades - Perfect Balance)
+// ----------------------------------------------------------------------------
+    $gray-0: hsl(0, 0%, 98%); // #FAFAFA
+    $gray-1: hsl(0, 0%, 96%); // #F5F5F5
+    $gray-2: hsl(0, 0%, 93%); // #EDEDED
+    $gray-3: hsl(0, 0%, 88%); // #E0E0E0
+    $gray-4: hsl(0, 0%, 82%); // #D1D1D1
+    $gray-5: hsl(0, 0%, 71%); // #B5B5B5
+    $gray-6: hsl(0, 0%, 58%); // #949494
+    $gray-7: hsl(0, 0%, 45%); // #737373
+    $gray-8: hsl(0, 0%, 32%); // #525252
+    $gray-9: hsl(0, 0%, 20%); // #333333
+    $gray-10: hsl(0, 0%, 10%); // #1A1A1A
+    $gray-11: hsl(0, 0%, 4%); // #0A0A0A
+
+// ----------------------------------------------------------------------------
+// Blue (Primary Brand Color)
+// ----------------------------------------------------------------------------
+    $blue-1: hsl(210, 100%, 97%);
+    $blue-2: hsl(210, 100%, 94%);
+    $blue-3: hsl(210, 100%, 88%);
+    $blue-4: hsl(210, 100%, 78%);
+    $blue-5: hsl(210, 100%, 66%);
+    $blue-6: hsl(210, 100%, 54%); // Main
+    $blue-7: hsl(210, 100%, 46%);
+    $blue-8: hsl(210, 100%, 38%);
+    $blue-9: hsl(210, 100%, 30%);
+    $blue-10: hsl(210, 100%, 22%);
+    $blue-11: hsl(210, 100%, 14%);
+
+// ----------------------------------------------------------------------------
+// Green (Success)
+// ----------------------------------------------------------------------------
+    $green-1: hsl(142, 76%, 96%);
+    $green-2: hsl(142, 76%, 91%);
+    $green-3: hsl(142, 76%, 82%);
+    $green-4: hsl(142, 76%, 69%);
+    $green-5: hsl(142, 76%, 53%);
+    $green-6: hsl(142, 76%, 42%); // Main
+    $green-7: hsl(142, 76%, 35%);
+    $green-8: hsl(142, 76%, 28%);
+    $green-9: hsl(142, 76%, 21%);
+    $green-10: hsl(142, 76%, 14%);
+    $green-11: hsl(142, 76%, 8%);
+
+// ----------------------------------------------------------------------------
+// Red (Error/Danger)
+// ----------------------------------------------------------------------------
+    $red-1: hsl(0, 86%, 97%);
+    $red-2: hsl(0, 86%, 94%);
+    $red-3: hsl(0, 86%, 88%);
+    $red-4: hsl(0, 86%, 78%);
+    $red-5: hsl(0, 86%, 66%);
+    $red-6: hsl(0, 86%, 54%); // Main
+    $red-7: hsl(0, 86%, 46%);
+    $red-8: hsl(0, 86%, 38%);
+    $red-9: hsl(0, 86%, 30%);
+    $red-10: hsl(0, 86%, 22%);
+    $red-11: hsl(0, 86%, 14%);
+
+// ----------------------------------------------------------------------------
+// Amber (Warning)
+// ----------------------------------------------------------------------------
+    $amber-1: hsl(43, 96%, 95%);
+    $amber-2: hsl(43, 96%, 89%);
+    $amber-3: hsl(43, 96%, 78%);
+    $amber-4: hsl(43, 96%, 64%);
+    $amber-5: hsl(43, 96%, 51%);
+    $amber-6: hsl(43, 96%, 41%); // Main
+    $amber-7: hsl(43, 96%, 34%);
+    $amber-8: hsl(43, 96%, 27%);
+    $amber-9: hsl(43, 96%, 20%);
+    $amber-10: hsl(43, 96%, 13%);
+    $amber-11: hsl(43, 96%, 7%);
+
+// ----------------------------------------------------------------------------
+// Orange
+// ----------------------------------------------------------------------------
+    $orange-1: hsl(33, 100%, 96%);
+    $orange-2: hsl(33, 100%, 92%);
+    $orange-3: hsl(33, 100%, 83%);
+    $orange-4: hsl(33, 100%, 70%);
+    $orange-5: hsl(33, 100%, 57%);
+    $orange-6: hsl(33, 100%, 50%); // Main
+    $orange-7: hsl(33, 100%, 42%);
+    $orange-8: hsl(33, 100%, 34%);
+    $orange-9: hsl(33, 100%, 26%);
+    $orange-10: hsl(33, 100%, 18%);
+    $orange-11: hsl(33, 100%, 10%);
+
+// ----------------------------------------------------------------------------
+// Purple
+// ----------------------------------------------------------------------------
+    $purple-1: hsl(280, 100%, 97%);
+    $purple-2: hsl(280, 100%, 94%);
+    $purple-3: hsl(280, 100%, 88%);
+    $purple-4: hsl(280, 100%, 78%);
+    $purple-5: hsl(280, 100%, 66%);
+    $purple-6: hsl(280, 100%, 54%); // Main
+    $purple-7: hsl(280, 100%, 46%);
+    $purple-8: hsl(280, 100%, 38%);
+    $purple-9: hsl(280, 100%, 30%);
+    $purple-10: hsl(280, 100%, 22%);
+    $purple-11: hsl(280, 100%, 14%);
+
+// ----------------------------------------------------------------------------
+// Pink
+// ----------------------------------------------------------------------------
+    $pink-1: hsl(330, 100%, 97%);
+    $pink-2: hsl(330, 100%, 94%);
+    $pink-3: hsl(330, 100%, 88%);
+    $pink-4: hsl(330, 100%, 78%);
+    $pink-5: hsl(330, 100%, 66%);
+    $pink-6: hsl(330, 100%, 54%); // Main
+    $pink-7: hsl(330, 100%, 46%);
+    $pink-8: hsl(330, 100%, 38%);
+    $pink-9: hsl(330, 100%, 30%);
+    $pink-10: hsl(330, 100%, 22%);
+    $pink-11: hsl(330, 100%, 14%);
+
+// ----------------------------------------------------------------------------
+// Cyan
+// ----------------------------------------------------------------------------
+    $cyan-1: hsl(190, 95%, 96%);
+    $cyan-2: hsl(190, 95%, 92%);
+    $cyan-3: hsl(190, 95%, 84%);
+    $cyan-4: hsl(190, 95%, 72%);
+    $cyan-5: hsl(190, 95%, 58%);
+    $cyan-6: hsl(190, 95%, 48%); // Main
+    $cyan-7: hsl(190, 95%, 40%);
+    $cyan-8: hsl(190, 95%, 32%);
+    $cyan-9: hsl(190, 95%, 24%);
+    $cyan-10: hsl(190, 95%, 16%);
+    $cyan-11: hsl(190, 95%, 10%);
+
+// ----------------------------------------------------------------------------
+// Teal
+// ----------------------------------------------------------------------------
+    $teal-1: hsl(170, 76%, 96%);
+    $teal-2: hsl(170, 76%, 91%);
+    $teal-3: hsl(170, 76%, 82%);
+    $teal-4: hsl(170, 76%, 69%);
+    $teal-5: hsl(170, 76%, 53%);
+    $teal-6: hsl(170, 76%, 42%); // Main
+    $teal-7: hsl(170, 76%, 35%);
+    $teal-8: hsl(170, 76%, 28%);
+    $teal-9: hsl(170, 76%, 21%);
+    $teal-10: hsl(170, 76%, 14%);
+    $teal-11: hsl(170, 76%, 8%);
+
+// ----------------------------------------------------------------------------
+// Indigo
+// ----------------------------------------------------------------------------
+    $indigo-1: hsl(240, 100%, 97%);
+    $indigo-2: hsl(240, 100%, 94%);
+    $indigo-3: hsl(240, 100%, 88%);
+    $indigo-4: hsl(240, 100%, 78%);
+    $indigo-5: hsl(240, 100%, 66%);
+    $indigo-6: hsl(240, 100%, 54%); // Main
+    $indigo-7: hsl(240, 100%, 46%);
+    $indigo-8: hsl(240, 100%, 38%);
+    $indigo-9: hsl(240, 100%, 30%);
+    $indigo-10: hsl(240, 100%, 22%);
+    $indigo-11: hsl(240, 100%, 14%);

package/dist/scss/index.scss

@@ -0,0 +1,21 @@
+// @mineui/tokens
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// PACK
+// ----------------------------------------------------------------------------
+    @use './colors.scss';
+    @use './spaces.scss';
+    @use './typography.scss';
+    @use './borders.scss';
+    @use './shadows.scss';
+    @use './z-index.scss';
+    @use './transitions.scss';
+    @use './opacity.scss';
+    @use './blur.scss';
+    @use './aspect.scss';
+    @use './sizes.scss';
+    @use './breakpoints.scss';

package/dist/scss/opacity.scss

@@ -0,0 +1,24 @@
+// opacity.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// OPACITY - Transparency Levels
+// ----------------------------------------------------------------------------
+    $opacity-0: 0;
+    $opacity-5: 0.05;
+    $opacity-10: 0.1;
+    $opacity-20: 0.2;
+    $opacity-25: 0.25;
+    $opacity-30: 0.3;
+    $opacity-40: 0.4;
+    $opacity-50: 0.5;
+    $opacity-60: 0.6;
+    $opacity-70: 0.7;
+    $opacity-75: 0.75;
+    $opacity-80: 0.8;
+    $opacity-90: 0.9;
+    $opacity-95: 0.95;
+    $opacity-100: 1;

package/dist/scss/shadows.scss

@@ -0,0 +1,37 @@
+// shadows.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// SHADOWS - Realistic and Beautiful
+// ----------------------------------------------------------------------------
+    $shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    $shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    $shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    $shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    $shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    $shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+    $shadow-none: none;
+
+    // Dark Mode Shadows (Deeper)
+    $shadow-xs-dark: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    $shadow-sm-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
+        0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    $shadow-base-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
+        0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    $shadow-md-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
+        0 2px 4px -2px rgba(0, 0, 0, 0.4);
+    $shadow-lg-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+        0 4px 6px -4px rgba(0, 0, 0, 0.4);
+    $shadow-xl-dark: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
+        0 8px 10px -6px rgba(0, 0, 0, 0.5);
+    $shadow-2xl-dark: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

package/dist/scss/sizes.scss

@@ -0,0 +1,16 @@
+// sizes.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// SIZES - Common Component Sizes
+// ----------------------------------------------------------------------------
+    $size-xs: 1.5rem; // 24px
+    $size-sm: 2rem; // 32px
+    $size-base: 2.5rem; // 40px
+    $size-md: 3rem; // 48px
+    $size-lg: 3.5rem; // 56px
+    $size-xl: 4rem; // 64px
+    $size-2xl: 5rem; // 80px

package/dist/scss/spaces.scss

@@ -0,0 +1,35 @@
+// colors.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// SPACING - Perfect Scale (rem based)
+// ----------------------------------------------------------------------------
+    $sp-0: 0;
+    $sp-1: 0.25rem; // 4px
+    $sp-2: 0.5rem; // 8px
+    $sp-3: 0.75rem; // 12px
+    $sp-4: 1rem; // 16px
+    $sp-5: 1.25rem; // 20px
+    $sp-6: 1.5rem; // 24px
+    $sp-7: 1.75rem; // 28px
+    $sp-8: 2rem; // 32px
+    $sp-9: 2.25rem; // 36px
+    $sp-10: 2.5rem; // 40px
+    $sp-12: 3rem; // 48px
+    $sp-14: 3.5rem; // 56px
+    $sp-16: 4rem; // 64px
+    $sp-20: 5rem; // 80px
+    $sp-24: 6rem; // 96px
+    $sp-28: 7rem; // 112px
+    $sp-32: 8rem; // 128px
+    $sp-36: 9rem; // 144px
+    $sp-40: 10rem; // 160px
+    $sp-44: 11rem; // 176px
+    $sp-48: 12rem; // 192px
+    $sp-52: 13rem; // 208px
+    $sp-56: 14rem; // 224px
+    $sp-60: 15rem; // 240px
+    $sp-64: 16rem; // 256px

package/dist/scss/transitions.scss

@@ -0,0 +1,26 @@
+// transitions.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// Durations
+// ----------------------------------------------------------------------------
+    $dur-instant: 50ms;
+    $dur-fast: 100ms;
+    $dur-normal: 150ms;
+    $dur-moderate: 200ms;
+    $dur-slow: 300ms;
+    $dur-slower: 500ms;
+    $dur-slowest: 700ms;
+
+// ----------------------------------------------------------------------------
+// Timing Functions
+// ----------------------------------------------------------------------------
+    $ease-linear: linear;
+    $ease-in: cubic-bezier(0.4, 0, 1, 1);
+    $ease-out: cubic-bezier(0, 0, 0.2, 1);
+    $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    $ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    $ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

package/dist/scss/typography.scss

@@ -0,0 +1,70 @@
+// typography.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// Font Families
+// ----------------------------------------------------------------------------
+    $font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+    $font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+
+    $font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas,
+        'Liberation Mono', 'Courier New', monospace;
+
+    $font-arabic: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
+
+// ----------------------------------------------------------------------------
+// Font Sizes (Perfect Typographic Scale)
+// ----------------------------------------------------------------------------
+    $fs-xs: 0.75rem; // 12px
+    $fs-sm: 0.875rem; // 14px
+    $fs-base: 1rem; // 16px
+    $fs-md: 1.0625rem; // 17px
+    $fs-lg: 1.125rem; // 18px
+    $fs-xl: 1.25rem; // 20px
+    $fs-2xl: 1.5rem; // 24px
+    $fs-3xl: 1.875rem; // 30px
+    $fs-4xl: 2.25rem; // 36px
+    $fs-5xl: 3rem; // 48px
+    $fs-6xl: 3.75rem; // 60px
+    $fs-7xl: 4.5rem; // 72px
+    $fs-8xl: 6rem; // 96px
+    $fs-9xl: 8rem; // 128px
+
+// ----------------------------------------------------------------------------
+// Font Weights
+// ----------------------------------------------------------------------------
+    $fw-thin: 100;
+    $fw-extralight: 200;
+    $fw-light: 300;
+    $fw-normal: 400;
+    $fw-medium: 500;
+    $fw-semibold: 600;
+    $fw-bold: 700;
+    $fw-extrabold: 800;
+    $fw-black: 900;
+
+// ----------------------------------------------------------------------------
+// Line Heights
+// ----------------------------------------------------------------------------
+    $lh-none: 1;
+    $lh-tight: 1.25;
+    $lh-snug: 1.375;
+    $lh-normal: 1.5;
+    $lh-relaxed: 1.625;
+    $lh-loose: 2;
+
+// ----------------------------------------------------------------------------
+// Letter Spacing
+// ----------------------------------------------------------------------------
+    $ls-tighter: -0.05em;
+    $ls-tight: -0.025em;
+    $ls-normal: 0;
+    $ls-wide: 0.025em;
+    $ls-wider: 0.05em;
+    $ls-widest: 0.1em;

package/dist/scss/z-index.scss

@@ -0,0 +1,27 @@
+// z-index.scss
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// Z-INDEX - Layering System
+// ----------------------------------------------------------------------------
+    $z-0: 0;
+    $z-1: 1;
+    $z-10: 10;
+    $z-20: 20;
+    $z-30: 30;
+    $z-40: 40;
+    $z-50: 50;
+    $z-auto: auto;
+
+    // Semantic Z-Index
+    $z-dropdown: 1000;
+    $z-sticky: 1020;
+    $z-fixed: 1030;
+    $z-backdrop: 1040;
+    $z-modal: 1050;
+    $z-popover: 1060;
+    $z-tooltip: 1070;
+    $z-notification: 1080;

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "@mineui/tokens",
+	"version": "0.0.1",
+	"description": "tokens",
+	"keywords": ["mine", "ui", "tokens"],
+	"license": "MIT",
+	"homepage": "https://github.com/mineui-org/tokens#readme",
+	"bugs": {
+		"url": "https://github.com/mineui-org/tokens/issues"
+	},
+	"author": {
+		"name": "Maysara",
+		"email": "maysara.elshewehy@gmail.com",
+		"url": "https://github.com/maysara-elshewehy"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/mineui-org/tokens.git"
+	},
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": ["dist"],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.js"
+		},
+		"./style": "./dist/scss/index.scss"
+	},
+	"scripts": {
+		"build": "sass src/scss/index.scss dist/index.css --style=compressed && bun scripts/copy-scss.js",
+		"build:scss": "bun scripts/copy-scss.js",
+		"lint": "eslint src --ext .ts",
+		"test": "bun test"
+	},
+	"engines": {
+		"bun": ">=1.3.3"
+	},
+	"peerDependencies": {
+		"bun": "^1.3.3"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.39.2",
+		"@stylistic/eslint-plugin": "^5.6.1",
+		"@types/bun": "^1.3.5",
+		"@types/node": "^20.19.27",
+		"bun-plugin-dts": "^0.3.0",
+		"bun-types": "^1.3.5",
+		"saas": "^1.0.0",
+		"sass": "^1.97.2",
+		"ts-node": "^10.9.2",
+		"tsup": "^8.5.1",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.51.0"
+	},
+	"style": "./dist/index.css"
+}