@nappr/nappr-styles 0.3.2 → 0.3.3

package/sass/utilities/_spacers.scss

@@ -0,0 +1,120 @@
+@use '../configs/' as configs;
+@use '../core/mixins/' as mixins;
+@use '../core/funcs/map' as map;
+@use '../core/funcs/string' as string;
+
+// @use '../core/funcs/list' as list;
+// @use '../core/funcs/math' as math;
+
+// ==========================================================
+// Functions
+// ==========================================================
+// @function generate-spacers-map(
+//   $min,
+//   $max,
+//   $base: 4,
+//   $suffix: 'v',
+//   $unit: 'rem'
+// ) {
+//   $map: ();
+//   $range: list.iterate($min, $max);
+
+//   @each $i in $range {
+//     $value: math.div($i, $base);
+//     $key: if($i < 0, 'n#{math.abs($i)}#{$suffix}', '#{$i}#{$suffix}');
+//     $token: if($i == 0, '0', $key);
+//     $map: map.set($map, $token, #{$value}#{$unit});
+//   }
+
+//   $map: map.merge(
+//     (
+//       'auto': auto,
+//       'n1-5#{$suffix}': -0.375#{$unit},
+//       'n0-5#{$suffix}': -0.125#{$unit},
+//       '0-5#{$suffix}': 0.125#{$unit},
+//       '1-5#{$suffix}': 0.375#{$unit},
+//     ),
+//     $map
+//   );
+
+//   @return $map;
+// }
+
+// ==========================================================
+// Mixins
+// ==========================================================
+@function get-classname-prefix($prop, $suffix: '') {
+  $first-letter: string.slice('#{$prop}', 0, 1);
+  $classname: '.#{$first-letter}#{$suffix}';
+
+  @return $classname;
+}
+
+@function get-classname-suffix($side, $token, $bpt: null) {
+  $abbr-map: (
+    'all': '',
+    'topbottom': 'y',
+    'leftright': 'x',
+  );
+  $bpt-prefix: if($bpt != null, '-#{$bpt}', '');
+  $side-abbr: if(
+    map.has-key($abbr-map, $side),
+    map.get($abbr-map, $side),
+    string.slice($side, 0, 1)
+  );
+  $classname-suffix: '#{$side-abbr}#{$bpt-prefix}-#{$token}';
+
+  @return $classname-suffix;
+}
+
+@mixin generate-spacers($token-map, $bpt: null) {
+  @each $token, $value in $token-map {
+    @each $side in (all, topbottom, leftright, top, left, right, bottom) {
+      $is-auto: $token == 'auto';
+      $classname-suffix: get-classname-suffix($side, $token, $bpt);
+      $current-props: if($is-auto, (margin), (margin, padding));
+
+      @each $prop in $current-props {
+        $classname-prefix: get-classname-prefix($prop);
+        $classname: string.concat($classname-prefix, $classname-suffix);
+        $css-value: if(
+          $is-auto,
+          auto,
+          var(--nappr-spacing-#{$token}, #{$value})
+        );
+
+        @if $side == 'all' {
+          #{$classname} {
+            #{$prop}: $css-value;
+          }
+        } @else if $side == 'topbottom' {
+          #{$classname} {
+            #{$prop}-top: $css-value;
+            #{$prop}-bottom: $css-value;
+          }
+        } @else if $side == 'leftright' {
+          #{$classname} {
+            #{$prop}-left: $css-value;
+            #{$prop}-right: $css-value;
+          }
+        } @else {
+          #{$classname} {
+            #{$prop}-#{$side}: $css-value;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ==========================================================
+// UTILITY CLASSES
+// ---
+// generate spacers classes
+// Exemple: .m-0-5v, .p-2v, .mx-3v-md
+// ==========================================================
+@include generate-spacers(configs.$NAPPR_SPACING);
+
+@include mixins.media-query-min('md') {
+  @include generate-spacers(configs.$NAPPR_SPACING, 'md');
+}

package/sass/utilities/_square-grid.scss

@@ -0,0 +1,33 @@
+@use '../core/funcs/math' as math;
+
+// ==========================================================
+// Mixins
+// ==========================================================
+
+/**
+ * Generate square grid classes
+ * @param {Number} $gutters - Number of gutters
+ * @return {Void}
+ */
+@mixin generate-square-grid($gutters) {
+  @for $i from 1 through $gutters {
+    $gap: $i - 1;
+    $percent: math.div((100 - $gap), $i);
+    .square-grid-#{$i} > * {
+      width: math.number-to-percent($percent);
+    }
+  }
+}
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+
+.square-grid {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1%;
+  justify-content: flex-start;
+}
+
+@include generate-square-grid(6);

package/sass/utilities/_typography.scss

@@ -0,0 +1,106 @@
+@use '../configs/' as configs;
+@use '../core/funcs/map' as map;
+@use '../core/mixins/' as mixins;
+@use '../core/funcs/list' as list;
+
+$font-sizes-map: list.steps(1, 20);
+$font-sizes-map: map.mirror($font-sizes-map);
+$font-sizes-map: map.merge(
+  $font-sizes-map,
+  (
+    '0': 0,
+    '0-75': 0.75,
+    '1': 1,
+    '1-5': 1.5,
+    '2': 2,
+    '2-5': 2.5,
+  )
+);
+
+@each $key, $value in $font-sizes-map {
+  .fs-#{$key}v {
+    font-size: #{$value}rem;
+  }
+}
+
+@each $key,
+  $value
+    in (
+      'thin': 100,
+      'light': 300,
+      'regular': 400,
+      'medium': 500,
+      'semi-bold': 600,
+      'bold': 700,
+      'extra-bold': 900
+    )
+{
+  .fw-#{$key} {
+    font-weight: $value;
+  }
+}
+
+// ==========================================================
+// HEADINGS
+// ==========================================================
+@include mixins.generate-heading-styles(configs.$NAPPR_HEADINGS, 'heading');
+
+// ==========================================================
+// TEXT ALIGNMENT
+// ==========================================================
+@each $key in (left, right, center, justify) {
+  .text-#{$key} {
+    text-align: $key;
+  }
+}
+
+// ==========================================================
+// TEXT TRANSFORM
+// ==========================================================
+@each $key in (lowercase, uppercase, capitalize) {
+  .is-#{$key} {
+    text-transform: $key;
+  }
+}
+
+// ==========================================================
+// TEXT DECORATION
+// ==========================================================
+.is-italic {
+  font-style: italic;
+}
+
+.is-underline {
+  text-decoration: underline;
+}
+
+.is-stroked {
+  text-decoration: line-through;
+}
+
+// ==========================================================
+// TEXT VARIANT
+// ==========================================================
+.is-small-caps {
+  font-variant: small-caps;
+}
+
+// ==========================================================
+// TEXT OVERFLOW
+// ==========================================================
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ==========================================================
+// TEXT LINE BREAK
+// ==========================================================
+.text-line-break-normal {
+  overflow-wrap: normal;
+}
+
+.text-line-break--force-wrap {
+  overflow-wrap: break-word;
+}

package/sass/utilities/_visibility.scss

@@ -0,0 +1,60 @@
+@use '../configs/' as configs;
+@use '../core/mixins/' as mixins;
+
+// ==========================================================
+// Mixins
+// ==========================================================
+
+@mixin is-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+@mixin is-visible {
+  display: inherit;
+  visibility: inherit;
+}
+
+@mixin screen-reader-only {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+
+.is-hidden {
+  @include is-hidden;
+}
+
+.is-visible {
+  @include is-visible;
+}
+
+.sr-only {
+  @include screen-reader-only;
+}
+
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    .is-hidden-#{$key} {
+      @include is-hidden;
+    }
+
+    .is-visible-#{$key} {
+      @include is-visible;
+    }
+
+    .sr-only-#{$key} {
+      @include screen-reader-only;
+    }
+  }
+}

package/sass/utilities/_wrap.scss

@@ -0,0 +1,12 @@
+@use '../core/funcs/map' as map;
+@use '../core/placeholders/' as *;
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+
+@each $key, $value in map.each-index((100, 50, 33.3333, 25, 12.5)) {
+  .wrap-#{$key} {
+    @extend %flex-wrapper;
+  }
+}

package/styles.scss

@@ -1 +1,5 @@
-@use './lib/styles';
+@charset 'UTF-8';
+@use './styles.metadata.scss' as metadata;
+
+/*! @nappr/styles v#{metadata.$version} | @see #{metadata.$repository} | @since #{metadata.$since} */
+@use './sass/main';

package/lib/_globals.scss

@@ -1,16 +0,0 @@
-/**
- * Ce fichier permet de transformer
- * Les fichiers de variables
- * Vers des `sass:map` nécessaire à la surcharge
- * Des mixins du dossier `core`
- */
-@use "sass:meta";
-@use "variables/colors";
-@use "variables/breakpoints";
-
-// stylelint-disable-next-line
-// @debug meta.module-variables('colors');
-// @debug meta.module-variables('breakpoints');
-
-$PALETTE: meta.module-variables('colors');
-$BREAKPOINTS: meta.module-variables('breakpoints');

package/lib/_reset.scss

@@ -1,223 +0,0 @@
-@use './variables/defaults' as defaults;
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-overflow-scrolling: touch;
-  padding: 0;
-}
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  /* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-  */
-  border: 0;
-  font: inherit;
-  font-size: 100%;
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100vh;
-  padding: 0;
-}
-
-body {
-  color: #000000;
-  font-family: Helvetica, Arial, Verdana, sans-serif;
-  font-size: defaults.$BODY_FONT_SIZE;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1;
-  width: defaults.$body-width;
-}
-
-hr,
-input,
-button,
-textarea,
-[role='reset'],
-[role='submit'],
-[role='button'] {
-  margin: 0;
-  padding: 0;
-}
-
-ul,
-ol,
-li {
-  list-style-type: none;
-}
-
-ol + ol,
-li + li {
-  margin-top: defaults.$default-spacing;
-}
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-  content: '';
-  content: none;
-}
-
-a,
-button {
-  cursor: pointer;
-}
-
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-p {
-  white-space: initial;
-}
-
-button,
-[role='reset'],
-[role='submit'],
-[role='button'] {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  font-size: 1rem;
-  overflow: hidden;
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.disabled,
-:disabled,
-:disabled:link,
-:disabled:visited,
-:disabled:hover,
-:disabled:active {
-  box-shadow: inherit;
-  cursor: default;
-  cursor: not-allowed;
-  pointer-events: none;
-  text-shadow: inherit;
-}
-
-/*
-// @NOTE
-// a:hover DOIT venir après a:link et a:visited
-// a:active DOIT venir après un a:hover
-a:not(.is-underline),
-a:link:not(.is-underline),
-a:visited:not(.is-underline),
-a:hover:not(.is-underline),
-a:active:not(.is-underline) {
-  text-decoration: none;
-}
-*/

package/lib/customs/scrollbar.scss

@@ -1,40 +0,0 @@
-::-webkit-scrollbar {
-  background: transparent;
-  overflow: visible;
-  width: 17px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(--nappr-white);
-}
-
-::-webkit-scrollbar-track-piece {
-  background-color: var(--nappr-white);
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  background-color: var(--nappr-g400);
-  border: solid var(--nappr-white);
-  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.8);
-  background-color: var(--nappr-g700);
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  border-width: 4px 6px;
-  min-width: 40px;
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  border-width: 6px 4px;
-  min-height: 40px;
-}

package/lib/funcs/_.scss

@@ -1,5 +0,0 @@
-@use 'rem';
-@use 'get-color';
-@use 'strings';
-@use 'merge-palette';
-@use 'math';

package/lib/funcs/_get-color.scss

@@ -1,3 +0,0 @@
-@function get-color($palette, $name) {
-  @return map-get($palette, $name);
-}

package/lib/funcs/_math.scss

@@ -1,5 +0,0 @@
-// permet de convertir un chiffre sans unité en pixel
-// voir les helpers, margin-padding
-@function number-to-pixel($size: 0) {
-  @return ($size * 1px);
-}

package/lib/funcs/_merge-palette.scss

@@ -1,12 +0,0 @@
-@use '../globals' as globals;
-
-@function merge-palettes($palettes...) {
-  // hack immutable default palette
-  $merged: map-merge((), globals.$PALETTE);
-
-  @each $palette in $palettes {
-    $merged: map-merge($merged, $palette);
-  }
-
-  @return $merged;
-}