@nappr/nappr-styles 0.2.27 → 0.3.1

package/lib/mixins/_border.scss

@@ -1,42 +1,47 @@
-@each $size in $border-size-map {
+@use "sass:string";
+@use '../funcs/rem' as rem;
+@use '../funcs/math' as math;
+@use '../variables/defaults' as defaults;
+
+@each $size in defaults.$BORDER_SIZE_MAP {
   $sides: (all, topbottom, leftright, top, left, right, bottom);
 
   // convert value to SASS variables with unit
-  $pixelValue: number-to-pixel($size);
+  $pixelValue: math.number-to-pixel($size);
 
   @each $side in $sides {
     @if $side == 'all' {
       .b#{$size} {
-        @include rem(border-width, $pixelValue);
-
-        border-style: $border-style;
+        $value : rem.convert($pixelValue);
+        border-width: $value;
+        border-style: defaults.$BORDER_STYLE;
       }
     }
 
     @else if $side == 'topbottom' {
       .by#{$size} {
-        @include rem(border-top-width, $pixelValue);
-        @include rem(border-bottom-width, $pixelValue);
-
-        border-style: $border-style;
+        $value : rem.convert($pixelValue);
+        border-top-width: $value;
+        border-bottom-width: $value;
+        border-style: defaults.$BORDER_STYLE;
       }
     }
 
     @else if $side == 'leftright' {
       .bx#{$size} {
-        @include rem(border-left-width, $pixelValue);
-        @include rem(border-right-width, $pixelValue);
-
-        border-style: $border-style;
+        $value : rem.convert($pixelValue);
+        border-left-width: $value;
+        border-right-width: $value;
+        border-style: defaults.$BORDER_STYLE;
       }
     }
 
     @else {
       // .bl, .br, .bt, .bb
-      .b#{str-slice($side, 0, 1)}#{$size} {
-        @include rem(border-#{$side}-width, $pixelValue);
-
-        border-style: $border-style;
+      .b#{string.slice($side, 0, 1)}#{$size} {
+        $value : rem.convert($pixelValue);
+        border-#{$side}-width: $value;
+        border-style: defaults.$BORDER_STYLE;
       }
     }
   }

package/lib/mixins/_dimensions.scss

@@ -1,3 +1,6 @@
+@use '../funcs/rem' as rem;
+@use '../variables/defaults' as defaults;
+
 /**
 * USAGE:
 * ---------------------
@@ -5,15 +8,15 @@
 * .w33 -> width 33%
 */
 @mixin withHeight($size) {
-  height: rem($size);
-  max-height: rem($size);
-  min-height: rem($size);
+  height: rem.convert($size);
+  max-height: rem.convert($size);
+  min-height: rem.convert($size);
 }
 
 @mixin withWidth($size) {
-  max-width: rem($size);
-  min-width: rem($size);
-  width: rem($size);
+  max-width: rem.convert($size);
+  min-width: rem.convert($size);
+  width: rem.convert($size);
 }
 
 @mixin withSize($width, $height: null) {
@@ -32,7 +35,7 @@
   @include withSize($size);
 }
 
-@each $size in $dimensions-map {
+@each $size in defaults.$DIMENSIONS_MAP {
   $percentValue: ($size * 1%);
 
   .w#{$size} {

package/lib/mixins/_font-size.scss

@@ -1,15 +1,20 @@
+@use '../funcs/rem' as rem;
+@use '../variables/defaults' as defaults;
+@use '../funcs/math' as math;
+
 /**
 * USAGE:
 * ---------------------
 *
 * .fs12 -> font-size 12px converted to rem
 */
-@mixin fontSize($value) {
-  @include rem(font-size, $value);
+@mixin fontSize($pixelValue) {
+  $value: rem.convert($pixelValue);
+  font-size: $value;
 }
 
-@each $size in $font-sizes-map {
-  $pixelValue: number-to-pixel($size);
+@each $size in defaults.$FONT_SIZES_MAP {
+  $pixelValue: math.number-to-pixel($size);
 
   .fs#{$size} {
     @include fontSize($pixelValue);

package/lib/mixins/_line-height.scss

@@ -1,3 +1,6 @@
+@use '../variables/defaults' as defaults;
+@use '../funcs/math' as math;
+
 /**
 * USAGE:
 * ---------------------
@@ -5,13 +8,12 @@
 * .ln12 -> line-height 12px converted to rem
 */
 @mixin lineHeight($value) {
-  @include rem(line-height, $value);
+  $pixelValue: math.number-to-pixel($value);
+  line-height: $pixelValue;
 }
 
-@each $size in $line-height-map {
-  $pixelValue: number-to-pixel($size);
-
+@each $size in defaults.$LINE_HEIGHT_MAP {
   .lh#{$size} {
-    @include lineHeight($pixelValue);
+    @include lineHeight($size);
   }
 }

package/lib/mixins/_margin-padding.scss

@@ -1,3 +1,8 @@
+@use "sass:string";
+@use '../funcs/rem' as rem;
+@use '../variables/defaults' as defaults;
+@use '../funcs/math' as math;
+
 /**
 * USAGE:
 * ---------------------
@@ -6,54 +11,55 @@
 * .mx12 -> margin right-left 12px converted to rem
 * .pr12 -> padding right 12px converted to rem
 */
-@each $size in $spacings-map {
+@each $size in defaults.$SPACINGS_MAP {
   $sides: (all, topbottom, leftright, top, left, right, bottom);
 
   // convert value to SASS variables with unit
-  $pixelValue: number-to-pixel($size);
+  $nbx: math.number-to-pixel($size);
+  $pixelValue: rem.convert($nbx);
 
   @each $side in $sides {
     @if $side == 'all' {
       .m#{$size} {
-        @include rem(margin, $pixelValue);
+        margin: $pixelValue;
       }
 
       .p#{$size} {
-        @include rem(padding, $pixelValue);
+        padding: $pixelValue;
       }
     }
 
     @else if $side == 'topbottom' {
       .my#{$size} {
-        @include rem(margin-top, $pixelValue);
-        @include rem(margin-bottom, $pixelValue);
+        margin-top: $pixelValue;
+        margin-bottom: $pixelValue;
       }
 
       .py#{$size} {
-        @include rem(padding-top, $pixelValue);
-        @include rem(padding-bottom, $pixelValue);
+        padding-top: $pixelValue;
+        padding-bottom: $pixelValue;
       }
     }
 
     @else if $side == 'leftright' {
       .mx#{$size} {
-        @include rem(margin-left, $pixelValue);
-        @include rem(margin-right, $pixelValue);
+        margin-left: $pixelValue;
+        margin-right: $pixelValue;
       }
 
       .px#{$size} {
-        @include rem(padding-left, $pixelValue);
-        @include rem(padding-right, $pixelValue);
+        padding-left: $pixelValue;
+        padding-right: $pixelValue;
       }
     }
 
     @else {
-      .m#{str-slice($side, 0, 1)}#{$size} {
-        @include rem(margin-#{$side}, $pixelValue);
+      .m#{string.slice($side, 0, 1)}#{$size} {
+        margin-#{$side}: $pixelValue;
       }
 
-      .p#{str-slice($side, 0, 1)}#{$size} {
-        @include rem(padding-#{$side}, $pixelValue);
+      .p#{string.slice($side, 0, 1)}#{$size} {
+        padding-#{$side}: $pixelValue;
       }
     }
   }

package/lib/mixins/_root-variables.scss

@@ -1,9 +1,11 @@
+@use '../globals' as globals;
+
 :root {
-  @each $name, $value in $PALETTE {
+  @each $name, $value in globals.$PALETTE {
     --nappr-#{$name}: #{$value};
   }
 
-  @each $name, $value in $BREAKPOINTS {
+  @each $name, $value in globals.$BREAKPOINTS {
     --nappr-#{$name}: #{$value};
   }
 }

package/lib/mixins/_theme.scss

@@ -1,16 +1,18 @@
+@use '../globals' as globals;
+
 @mixin color($name) {
-  color: get-color($PALETTE, $name);
+  color: get-color(globals.$PALETTE, $name);
 }
 
 @mixin backgroundColor($name) {
-  background-color: get-color($PALETTE, $name);
+  background-color: get-color(globals.$PALETTE, $name);
 }
 
 // Generate helpers classes for colors
 // From auto generated file `_colors.scss`
 // .is-<color> { /* setup font-color */ }
 // .bg-<color> { /* setup background-color */ }
-@each $name, $value in $PALETTE {
+@each $name, $value in globals.$PALETTE {
   // generate font colors
   .is-#{$name} {
     color: $value;

package/lib/styles.scss

@@ -3,16 +3,16 @@
  * !!! DO NOT REORDER -> Declarative loading
  *
  */
-@import 'variables/';
-@import 'globals';
-@import 'funcs/';
+@use 'variables/' as *;
+@use 'globals';
+@use 'funcs/' as *;
 
 // Core
-@import 'mixins/';
-@import 'reset';
-@import 'htmls/';
-@import 'helpers/';
-@import 'grid/';
+@use 'mixins/' as *;
+@use 'reset';
+@use 'htmls/' as *;
+@use 'grid/' as *;
+@use 'helpers/' as *;
 
 .debug * {
   outline: 1px solid rgb(255 0 0 / 30%);

package/lib/variables/_.scss

@@ -1,4 +1,4 @@
 // !!! DOT NOT REORDER !!!
-@import 'defaults';
-@import 'breakpoints';
-@import 'colors';
+@use 'defaults';
+@use 'breakpoints';
+@use 'colors';

package/lib/variables/_defaults.scss

@@ -1,23 +1,11 @@
-$body-width: 100vw !default;
-$rem-fallback: true !default; // always force callback
-$rem-px-only: false !default;
-
-// Borders
-$border-style: solid !default;
-$border-size-map: (1, 2, 3, 4, 5, 6, 7, 8, 10) !default;
-$border-radius-map: (2, 3, 4, 5, 6, 7, 8, 10, 12, 24) !default;
-
-// Fonts
-$body-font-size: 16px !default;
-$default-font-size: 12px !default;
-$line-height-map: (12) !default;
-$font-sizes-map: (6, 7, 8, 9, 10, 11, 12, 14, 24, 26, 32, 40) !default;
-$rem-baseline: $body-font-size !default;
-
-// Dimensions
-$default-spacing: 12px !default;
-$spacings-map: (3, 6, 9, 12, 18, 24, 26, 48) !default;
-$dimensions-map: (
+$BORDER_STYLE: solid !default;
+$LINE_HEIGHT_MAP: (12) !default;
+$BODY_FONT_SIZE: 16px !default;
+$SPACINGS_MAP: (3, 6, 9, 12, 18, 24, 26, 48) !default;
+$BORDER_SIZE_MAP: (1, 2, 3, 4, 5, 6, 7, 8, 10) !default;
+$BORDER_RADIUS_MAP: (2, 3, 4, 5, 6, 7, 8, 10, 12, 24) !default;
+$FONT_SIZES_MAP: (6, 7, 8, 9, 10, 11, 12, 14, 24, 26, 32, 40) !default;
+$DIMENSIONS_MAP: (
   3,
   5,
   6,
@@ -42,3 +30,24 @@ $dimensions-map: (
   95,
   100
 ) !default;
+
+$body-width: 100vw !default;
+$rem-fallback: true !default; // always force callback
+$rem-px-only: false !default;
+
+// Borders
+$border-style: $BORDER_STYLE;
+$border-size-map: $BORDER_SIZE_MAP;
+$border-radius-map: $BORDER_RADIUS_MAP;
+
+// Fonts
+$body-font-size: $BODY_FONT_SIZE;
+$default-font-size: 12px !default;
+$line-height-map: $LINE_HEIGHT_MAP;
+$font-sizes-map: $FONT_SIZES_MAP;
+$rem-baseline: $body-font-size !default;
+
+// Dimensions
+$default-spacing: 12px !default;
+$spacings-map: $SPACINGS_MAP;
+$dimensions-map: $DIMENSIONS_MAP;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nappr/nappr-styles",
-  "version": "0.2.27",
+  "version": "0.3.1",
   "description": "A collection of SCSS helpers",
   "main": "./styles.scss",
   "browser": "./dist/styles.css",
@@ -22,17 +22,14 @@
     "prettier-stylelint": "0.4.2",
     "sass": "^1.77.6",
     "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-order": "^6.0.4",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-order": "^7.0.0",
     "stylelint-scss": "^6.3.2"
   },
-  "peerDepencies": {
-    "sass": "^1.77.6"
-  },
   "scripts": {
     "cleanup": "rm -rf node_modules",
     "docs": "docsify serve docs --port=2999",
-    "dev": "sass styles.scss -o=dist -r --output-style=compressed",
+    "dev": "sass --load-path=node_modules styles.scss",
     "build": "./.scripts/build.sh"
   }
 }

package/styles.scss

@@ -1 +1 @@
-@import './lib/styles';
+@use './lib/styles';