@nappr/nappr-styles 0.3.1 → 0.3.3

package/sass/components/scrollbar/_.scss

@@ -0,0 +1,102 @@
+// ==========================================================
+// SCROLLBAR COMPONENT
+// ==========================================================
+// Customizable scrollbar styles
+// Apply the .scrollbar class to a parent element to enable custom scrollbar styling
+// ----
+// Usage:
+//   <div class="scrollbar">...</div>
+// ----
+// Customization via CSS variables:
+//   <div class="scrollbar" style="--scrollbar-width: 12px; --scrollbar-thumb-color: #007bff;">...</div>
+// ----
+// Or via modifier classes:
+//   <div class="scrollbar scrollbar--thin">...</div>
+//   <div class="scrollbar scrollbar--dark">...</div>
+
+.scrollbar {
+  // CSS variables for customization (with defaults)
+  --scrollbar-width: 17px;
+  --scrollbar-track-color: var(--nappr-white, #ffffff);
+  --scrollbar-thumb-color: var(--nappr-grey-400, #cecece);
+  --scrollbar-thumb-hover-color: var(--nappr-grey-700, #383838);
+  --scrollbar-thumb-border-color: var(--nappr-white, #ffffff);
+  --scrollbar-corner-color: transparent;
+
+  // Webkit scrollbar styles
+  &::-webkit-scrollbar {
+    background: transparent;
+    overflow: visible;
+    width: var(--scrollbar-width);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track-color);
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background-color: var(--scrollbar-track-color);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: var(--scrollbar-corner-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+    border: solid var(--scrollbar-thumb-border-color);
+    box-shadow:
+      inset 1px 1px 0 rgb(0 0 0 / 10%),
+      inset 0 -1px 0 rgb(0 0 0 / 7%);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-color);
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal {
+    border-width: 4px 6px;
+    min-width: 40px;
+  }
+
+  &::-webkit-scrollbar-thumb:vertical {
+    border-width: 6px 4px;
+    min-height: 40px;
+  }
+
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+
+  // Firefox scrollbar styles
+  scrollbar-width: thin;
+}
+
+// ==========================================================
+// SCROLLBAR MODIFIERS
+// ==========================================================
+
+// Thin scrollbar
+.scrollbar--thin {
+  --scrollbar-width: 8px;
+}
+
+// Dark theme scrollbar
+.scrollbar--dark {
+  --scrollbar-track-color: var(--nappr-grey-800, #1e1e1e);
+  --scrollbar-thumb-color: var(--nappr-grey-600, #6a6a6a);
+  --scrollbar-thumb-hover-color: var(--nappr-grey-500, #9c9c9c);
+  --scrollbar-thumb-border-color: var(--nappr-grey-800, #1e1e1e);
+}
+
+// Light theme scrollbar (default, but explicit)
+.scrollbar--light {
+  --scrollbar-track-color: var(--nappr-white, #ffffff);
+  --scrollbar-thumb-color: var(--nappr-grey-400, #cecece);
+  --scrollbar-thumb-hover-color: var(--nappr-grey-700, #383838);
+  --scrollbar-thumb-border-color: var(--nappr-white, #ffffff);
+}
+
+// Primary color scrollbar
+.scrollbar--primary {
+  --scrollbar-thumb-color: var(--nappr-primary-blue, #007bff);
+  --scrollbar-thumb-hover-color: var(--nappr-primary-blue, #007bff);
+}

package/sass/configs/_.scss

@@ -0,0 +1,7 @@
+@forward './breakpoints';
+@forward './defaults';
+@forward './grid';
+@forward './palettes';
+@forward './themes';
+@forward './spacing';
+@forward './text';

package/sass/configs/_breakpoints.scss

@@ -0,0 +1,12 @@
+$NAPPR_BREAKPOINTS: (
+  // Useless starts at 0px (Mobile Small)
+  // 'xs': 0em,
+  // Starts at 576px (Mobile)
+  'sm': 36em,
+  // Starts at 768px (Tablet)
+  'md': 48em,
+  // Starts at 992px (Desktop)
+  'lg': 62em,
+  // Starts at 1248px (Desktop Extra Large)
+  'xl': 78em
+) !default;

package/sass/configs/_defaults.scss

@@ -0,0 +1,6 @@
+$NAPPR_DEFAULTS: (
+  'xl-base': 1em,
+  'body-width': 100vw,
+  'border-radius': 0.25rem,
+  'default-theme': 'dark-theme',
+) !default;

package/sass/configs/_grid.scss

@@ -0,0 +1,8 @@
+$NAPPR_GRID: (
+  'columns': 12,
+  'max-width': 1200px,
+  'gutter-gap-sm': 1rem,
+  'gutter-gap-md': 1rem,
+  'gutter-gap-lg': 1.5rem,
+  'gutter-gap-xl': 1.5rem,
+) !default;

package/sass/configs/_palettes.scss

@@ -0,0 +1,72 @@
+$NAPPR_PALETTES: (
+  // --- Black & White Colors
+  'black': #000000,
+  'white': #ffffff,
+  'grey': #7f7f7f,
+
+  // --- Primary colors
+  'primary-blue': #007bff,
+  'primary-red': #ff0000,
+  'primary-green': #00ff00,
+  'primary-yellow': #f0f00f,
+  'primary-magenta': #800080,
+  'primary-orange': #ffa500,
+
+  // --- Usual colors
+  'usual-warning': #f5631a,
+  'usual-success': #268744,
+  'usual-info': #0762c8,
+  'usual-error': #ff0000,
+
+  // --- Highlight colors
+  'highlight-warning': #f5631a,
+  'highlight-success': #268744,
+  'highlight-info': #0762c8,
+  'highlight-error': #ff0000,
+
+  // --- Grey colors
+  'grey-100': #f8f8f8,
+  'grey-200': #f0f0f0,
+  'grey-300': #e7e7e7,
+  'grey-400': #cecece,
+  'grey-500': #9c9c9c,
+  'grey-600': #6a6a6a,
+  'grey-700': #383838,
+  'grey-750': #2a2a2a,
+  'grey-800': #1e1e1e,
+
+  // --- Pastel colors
+  'pastel-blue': #5db0d7,
+  'pastel-yellow': #f9da9b,
+  'pastel-red': #db8c62,
+  'pastel-green': #42b983,
+  'pastel-purple': #9a7fd5,
+  'pastel-verde': #40d4c7,
+  'pastel-kaki': #b9c580,
+  'pastel-gold': #c7b654,
+
+  // --- Chrome colors
+  'chrome-red': #ff8080,
+  'chrome-yellow': #ffdd9e,
+  'chrome-black': #242424,
+  'chrome-grey': #333333,
+  'chrome-light': #525252,
+  'chrome-white': #e6e6e6,
+
+  // --- MISC colors
+  'airbnb': #ff385c,
+  'amazon': #ff9900,
+  'twitch': #9147ff,
+  'youtube': #ff0000,
+  'twitter': #1da1f2,
+  'facebook': #365899,
+  'instagram': linear-gradient(
+      45deg,
+      #405de6,
+      #5851db,
+      #833ab4,
+      #c13584,
+      #e1306c,
+      #fd1d1d
+    )
+) !default;

package/sass/configs/_spacing.scss

@@ -0,0 +1,36 @@
+@use '../core/funcs/map' as map;
+@use '../core/funcs/list' as list;
+@use '../core/funcs/math' as math;
+
+@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;
+}
+
+$NAPPR_SPACING: generate-spacers-map(-8, 32);

package/sass/configs/_text.scss

@@ -0,0 +1,41 @@
+$NAPPR_TEXT: (
+  'font-size': 1rem,
+  'font-family': 'Helvetica, Arial, Verdana, sans-serif',
+  'font-family--alt': '"Spectral", Georgia, serif',
+  'weights': (
+    'light': 300,
+    'regular': 400,
+    'medium': 500,
+    'bold': 700,
+  ),
+  'weight': 400,
+  'weight--alt': 500,
+  'line-height': 1.5rem,
+  'spacing': 0 0 1.5rem 0,
+) !default;
+$NAPPR_HEADINGS: (
+  h1: (
+    base: 2rem,
+    xl: 2.5rem,
+  ),
+  h2: (
+    base: 1.75rem,
+    xl: 2rem,
+  ),
+  h3: (
+    base: 1.5rem,
+    xl: 1.75rem,
+  ),
+  h4: (
+    base: 1.375rem,
+    xl: 1.5rem,
+  ),
+  h5: (
+    base: 1.25rem,
+    xl: 1.375rem,
+  ),
+  h6: (
+    base: 1.125rem,
+    xl: 1.25rem,
+  ),
+) !default;

package/sass/configs/_themes.scss

@@ -0,0 +1,24 @@
+@use '../themes/light' as light;
+@use '../themes/dark' as dark;
+
+$NAPPR_THEMES: (
+  'dark-theme': dark.$theme,
+  'light-theme': light.$theme,
+  'theme-keys': (
+    'background',
+    'panel',
+    'rollover',
+    'accent',
+    'border',
+    'text-primary',
+    'text-secondary',
+    'text-disabled',
+    'text-hover-bg',
+    'text-active-bg',
+    'state-success',
+    'state-warning',
+    'state-error',
+    'state-info',
+    'state-debug',
+  ),
+) !default;

package/sass/core/funcs/_list.scss

@@ -0,0 +1,43 @@
+// ----------------------------------
+// Imports
+// ----------------------------------
+@forward 'sass:list';
+@use 'sass:math' as math;
+@use 'sass:list' as list;
+
+// ----------------------------------
+// Functions
+// ----------------------------------
+
+/**
+ * Generate a list of numbers with a given min and max value
+ * @param {number} $min - The minimum value of the list
+ * @param {number} $max - The maximum value of the list
+ * @return {list} - The list of numbers
+ */
+@function iterate($min, $max) {
+  $result: ();
+
+  @for $i from $min through $max {
+    $result: list.append($result, $i);
+  }
+
+  @return $result;
+}
+
+/**
+ * Generate a list of numbers with a given step and max value
+ * @param {number} $step - The step between each number
+ * @param {number} $max-value - The maximum value of the list
+ * @return {list} - The list of numbers
+ */
+@function steps($step, $max-value) {
+  $list: 0;
+
+  @for $i from 1 through math.floor(math.div($max-value, $step)) {
+    $value: $i * $step;
+    $list: list.append($list, $value);
+  }
+
+  @return $list;
+}

package/sass/core/funcs/_map.scss

@@ -0,0 +1,42 @@
+// ----------------------------------
+// Imports
+// ----------------------------------
+@forward 'sass:map';
+@use 'sass:map' as map;
+@use 'sass:list' as list;
+@use 'sass:math' as math;
+
+// ----------------------------------
+// Functions
+// ----------------------------------
+
+/**
+ * Generate a map by mirroring the values of a list
+ * @param {list} $list - The list to generate the map from
+ * @return {map} - The map of keys and values
+ */
+@function mirror($list) {
+  $map: ();
+
+  @each $key in $list {
+    $map: map.set($map, $key, $key);
+  }
+
+  @return $map;
+}
+
+/**
+ * Generate a map of numbers with the index of each value in a map
+ * @param {map} $map - The map to generate the list from
+ * @return {list} - The list of numbers
+ */
+@function each-index($list) {
+  $next: ();
+
+  @each $value in $list {
+    $i: list.index($list, $value);
+    $next: map.set($next, $i, $value);
+  }
+
+  @return $next;
+}

package/sass/core/funcs/_math.scss

@@ -0,0 +1,35 @@
+// ----------------------------------
+// Imports
+// ----------------------------------
+@forward 'sass:math';
+
+// ----------------------------------
+// Functions
+// ----------------------------------
+@function number-to-pixel($size: 0) {
+  @return ($size * 1px);
+}
+
+@function number-to-percent($size: 0) {
+  @return ($size * 1%);
+}
+
+@function number-to-rem($size: 0) {
+  @return ($size * 1rem);
+}
+
+@function number-to-em($size: 0) {
+  @return ($size * 1em);
+}
+
+@function number-to-vh($size: 0) {
+  @return ($size * 1vh);
+}
+
+@function number-to-vw($size: 0) {
+  @return ($size * 1vw);
+}
+
+@function calculate-line-height($font-size-rem) {
+  @return $font-size-rem + 0.5rem;
+}

package/sass/core/funcs/_string.scss

@@ -0,0 +1,47 @@
+// ----------------------------------
+// Imports
+// ----------------------------------
+@forward 'sass:string';
+@use 'sass:list' as list;
+@use 'sass:string' as string;
+
+// ----------------------------------
+// Functions
+// ----------------------------------
+@function concat($string1, $string2) {
+  @return '#{$string1}#{$string2}';
+}
+
+@function contains($list, $value) {
+  @return not not list.index($list, $value);
+}
+
+@function capitalize($string) {
+  @return string.to-upper-case(string.slice($string, 1, 1)) +
+    string.slice($string, 2);
+}
+
+@function uncapitalize($string) {
+  @return string.to-lower-case(string.slice($string, 1, 1)) +
+    string.slice($string, 2);
+}
+
+@function camelize($string) {
+  $progress: string.to-lower-case($string);
+  $result: '';
+  $exclude: ' ', '-', '–', '—', '_', ',', ';', ':', '.';
+
+  @while list.length($progress) > 0 {
+    $char: string.slice($progress, 1, 1);
+
+    @if contains($exclude, $char) {
+      $progress: capitalize(string.slice($progress, 2, 2)) +
+        string.slice($progress, 3);
+    } @else {
+      $result: $result + $char;
+      $progress: string.slice($progress, 2);
+    }
+  }
+
+  @return $result;
+}

package/sass/core/mixins/_.scss

@@ -0,0 +1,3 @@
+@forward 'links';
+@forward 'media-queries';
+@forward 'typography';

package/{lib → sass/core}/mixins/_links.scss

@@ -1,6 +1,6 @@
 // NOTE
-// a: hover DOIT venir après: lien et a: visited
-// a: active doit venir après un: hover
+// a:hover MUST come after: link and a:visited
+// a:active must come after a:hover
 @mixin as-link($color) {
   &,
   &:link,

package/sass/core/mixins/_media-queries.scss

@@ -0,0 +1,22 @@
+@use '../funcs/map' as map;
+@use '../../configs/' as configs;
+
+@mixin media-query($key, $condition) {
+  $value: map.get(configs.$NAPPR_BREAKPOINTS, $key);
+
+  @media (#{$condition}-width: #{$value}) {
+    @content;
+  }
+}
+
+@mixin media-query-min($breakpoint-key) {
+  @include media-query($breakpoint-key, 'min') {
+    @content;
+  }
+}
+
+@mixin media-query-max($breakpoint-key) {
+  @include media-query($breakpoint-key, 'max') {
+    @content;
+  }
+}

package/sass/core/mixins/_typography.scss

@@ -0,0 +1,26 @@
+@use '../placeholders/' as *;
+@use '../funcs/map' as map;
+@use '../funcs/math' as math;
+@use 'media-queries' as media-queries;
+
+@mixin generate-heading-styles($map, $prefix: '') {
+  @each $key, $values in $map {
+    $selector: if($prefix == '', #{$key}, '#{$prefix}-#{$key}');
+
+    #{$selector} {
+      @extend %heading-base;
+
+      $fs-base: map.get($values, 'base');
+
+      font-size: $fs-base;
+      line-height: math.calculate-line-height($fs-base);
+
+      @include media-queries.media-query-min('xl') {
+        $fs-xl: map.get($values, 'xl');
+
+        font-size: $fs-xl;
+        line-height: math.calculate-line-height($fs-xl);
+      }
+    }
+  }
+}

package/sass/core/placeholders/_.scss

@@ -0,0 +1,4 @@
+@forward 'dimensions';
+@forward 'flexbox';
+@forward 'positions';
+@forward 'typography';

package/sass/core/placeholders/_dimensions.scss

@@ -0,0 +1,16 @@
+%is-full-width {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+}
+
+%is-full-height {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+}
+
+%is-full-layout {
+  @extend %is-full-width;
+  @extend %is-full-height;
+}

package/sass/core/placeholders/_flexbox.scss

@@ -0,0 +1,11 @@
+%flex-base {
+  display: flex;
+  flex: 1;
+}
+
+%flex-wrapper {
+  @extend %flex-base;
+
+  flex-flow: row wrap;
+  justify-content: space-between;
+}

package/sass/core/placeholders/_lists.scss

@@ -0,0 +1,41 @@
+%nappr-list-base {
+  --nappr-xl-size: var(--nappr-xl-base);
+
+  margin: 0;
+  margin-block: 0;
+  padding: 0;
+  padding-inline-start: 0;
+}
+
+%nappr-list-item-base {
+  --nappr-xl-base: calc(var(--nappr-xl-size) * 0.9);
+
+  padding-bottom: 0;
+}
+
+%nappr-list-type--unstyled {
+  @extend %nappr-list-base;
+
+  list-style-type: none;
+
+  li,
+  dt,
+  dd {
+    @extend %nappr-list-item-base;
+  }
+}
+
+%nappr-list-type--styled {
+  @extend %nappr-list-base;
+
+  margin-block: 0.5rem;
+  padding-inline-start: 1rem;
+
+  li,
+  dt,
+  dd {
+    @extend %nappr-list-item-base;
+
+    padding-bottom: 0.25rem;
+  }
+}

package/sass/core/placeholders/_positions.scss

@@ -0,0 +1,19 @@
+%position-absolute {
+  position: absolute;
+}
+
+%position-fixed {
+  position: fixed;
+}
+
+%position-relative {
+  position: relative;
+}
+
+%position-sticky {
+  position: sticky;
+}
+
+%is-all-edges {
+  inset: 0;
+}

package/sass/core/placeholders/_typography.scss

@@ -0,0 +1,10 @@
+%heading-base {
+  font-weight: 700;
+  margin: var(--nappr-text-spacing);
+}
+
+%text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: var(--nappr-text-spacing);
+}

package/sass/elements/_.scss

@@ -0,0 +1,6 @@
+@use './dialog';
+@use './form';
+@use './links';
+@use './lists';
+@use './table';
+@use './typography';

package/sass/elements/_dialog.scss

@@ -0,0 +1,13 @@
+dialog {
+  backdrop-filter: blur(5px);
+
+  &::backdrop {
+    backdrop-filter: blur(5px);
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+}