@nappr/nappr-styles 0.3.2 → 0.3.3

package/sass/themes/_night-owl.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #011627,
+  'panel': #001c38,
+  'rollover': #09345c,
+  'accent': #c792ea,
+  'border': #1d3d5d,
+  'text-primary': #efffef,
+  'text-secondary': #637777,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #add793,
+  'state-warning': #ffcb6b,
+  'state-error': #ff5874,
+  'state-info': #82aaff,
+  'state-debug': #ff9800,
+);

package/sass/themes/_nord.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #2e3440,
+  'panel': #3b4252,
+  'rollover': #4c566a,
+  'accent': #81a1c1,
+  'border': #4c566a,
+  'text-primary': #d8dee9,
+  'text-secondary': #4c566a,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #a3be8c,
+  'state-warning': #ebcb8b,
+  'state-error': #bf616a,
+  'state-info': #88c0d0,
+  'state-debug': #ff9800,
+);

package/sass/themes/_tokyo-night.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #24283b,
+  'panel': #414868,
+  'rollover': #545c77,
+  'accent': #7dcfff,
+  'border': #444b6a,
+  'text-primary': #c0cae8,
+  'text-secondary': #444b6a,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #9ece6a,
+  'state-warning': #e0af68,
+  'state-error': #f7768e,
+  'state-info': #7dcfff,
+  'state-debug': #ff9800,
+);

package/sass/utilities/_.scss

@@ -0,0 +1,21 @@
+@use 'dimensions';
+@use 'displays';
+@use 'flexbox';
+@use 'floats';
+@use 'negates';
+@use 'palette';
+@use 'pointers';
+@use 'scrolls';
+@use 'spacers';
+@use 'square-grid';
+@use 'typography';
+@use 'visibility';
+@use 'wrap';
+
+// @use 'lists';
+
+body {
+  color: var(--nappr-theme-text-secondary);
+  font-family: var(--nappr-text-font-family);
+  font-size: var(--nappr-text-font-size);
+}

package/sass/utilities/_dimensions.scss

@@ -0,0 +1,11 @@
+@use '../core/funcs/list' as list;
+@use '../core/funcs/math' as math;
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+@each $size in list.steps(5, 100) {
+  .nappr-w-#{$size} {
+    width: math.number-to-percent($size);
+  }
+}

package/sass/utilities/_displays.scss

@@ -0,0 +1,111 @@
+@use '../core/placeholders/' as *;
+
+// ==========================================================
+// VERTICAL ALIGNMENT
+// ==========================================================
+
+@each $key in (top, middle, bottom, baseline, sub, super) {
+  .valign-#{$key} {
+    vertical-align: $key;
+  }
+}
+
+// ==========================================================
+// DISPLAY TYPES
+// ==========================================================
+
+@each $key in (flex, grid, block, inline, inline-block, table, table-cell) {
+  .is-#{$key} {
+    display: $key;
+  }
+}
+
+// ==========================================================
+// STRETCHING
+// ==========================================================
+
+.stretch-y {
+  bottom: 0;
+  top: 0;
+}
+
+.stretch-x {
+  left: 0;
+  right: 0;
+}
+
+// ==========================================================
+// PLACEMENTS
+// ==========================================================
+
+@each $token,
+  $values
+    in (
+      'tl': (
+          top,
+          left,
+        ),
+      'br': (
+          bottom,
+          right,
+        ),
+      'bl': (
+          bottom,
+          left,
+        ),
+      'tr': (
+          top,
+          right,
+        )
+    )
+{
+  .placement-#{$token} {
+    @each $value in $values {
+      #{$value}: 0;
+    }
+  }
+}
+
+// ==========================================================
+// POSITIONING
+// ==========================================================
+
+@each $key in (relative, absolute, fixed, sticky) {
+  .is-#{$key} {
+    position: $key;
+  }
+}
+
+// ==========================================================
+// COVERING and OVERLAYING
+// ==========================================================
+
+.is-cover {
+  @extend %is-all-edges;
+}
+
+.is-overlay {
+  @extend %is-all-edges;
+  @extend %position-absolute;
+}
+
+.is-overlay--fixed {
+  @extend %is-all-edges;
+  @extend %position-fixed;
+}
+
+// ==========================================================
+// SIZES
+// ==========================================================
+
+.is-full-width {
+  @extend %is-full-width;
+}
+
+.is-full-height {
+  @extend %is-full-height;
+}
+
+.is-full-layout {
+  @extend %is-full-layout;
+}

package/sass/utilities/_flexbox.scss

@@ -0,0 +1,81 @@
+@use '../core/placeholders/' as *;
+@use '../core/funcs/list' as list;
+
+@each $value in list.steps(1, 12) {
+  .flex-#{$value} {
+    flex: #{$value};
+  }
+}
+
+@each $key, $direction in ('columns': row, 'rows': column) {
+  .flex-#{$key} {
+    @extend %flex-base;
+
+    flex-direction: $direction;
+  }
+
+  .flex-#{$key}-reverse {
+    flex-direction: #{$direction}-reverse;
+  }
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-inverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-wrapper {
+  @extend %flex-wrapper;
+}
+
+// ==========================================================
+// Flexbox Layouts (Distribution)
+// ==========================================================
+
+@each $key,
+  $value
+    in (
+      'start': flex-start,
+      'center': center,
+      'end': flex-end,
+      'between': space-between,
+      'around': space-around,
+      'evenly': space-evenly,
+      'stretch': stretch
+    )
+{
+  .flex-#{$key} {
+    justify-content: $value;
+  }
+}
+
+// fait grandir les éléments eux-mêmes pour occuper l'espace disponible sur l'axe principal
+.flex-justify > * {
+  flex: 1 1 auto;
+}
+
+// ==========================================================
+// Items Spacers
+// ==========================================================
+
+@each $key,
+  $value
+    in (
+      'start': flex-start,
+      'center': center,
+      'end': flex-end,
+      'stretch': stretch,
+      'baseline': baseline
+    )
+{
+  .items-#{$key} {
+    align-items: $value;
+  }
+
+  .self-#{$key} {
+    align-self: $value;
+  }
+}

package/{lib/helpers → sass/utilities}/_floats.scss

@@ -1,3 +1,6 @@
+// ==========================================================
+// Utility Classes
+// ==========================================================
 .clearfix {
   *zoom: 1;
 
@@ -22,18 +25,12 @@
   clear: both;
 }
 
-.clear-right {
-  clear: right;
-}
-
-.clear-left {
-  clear: left;
-}
-
-.float-left {
-  float: left;
-}
+@each $name in (right, left) {
+  .clear-#{$name} {
+    clear: $name;
+  }
 
-.float-right {
-  float: right;
+  .float-#{$name} {
+    float: $name;
+  }
 }

package/sass/utilities/_lists.scss

@@ -0,0 +1,86 @@
+@use '../core/placeholders/' as *;
+
+// =================================================================
+// 1. Lists
+// =================================================================
+
+// --- 1.1. Unordered Lists ---
+
+ul.list--styled,
+ul.list--unstyled {
+  > li::marker {
+    font-size: calc(var(--xl-size) * 0.9);
+  }
+}
+
+ul.list--unstyled {
+  @extend %list-type--unstyled;
+}
+
+ul.list--styled {
+  @extend %list-type--styled;
+
+  list-style-type: disc;
+}
+
+// --- 1.2. Ordered Lists ---
+
+ol.list--styled,
+ol.list--unstyled {
+  counter-reset: li-counter;
+
+  > li {
+    counter-increment: li-counter;
+  }
+
+  > li::marker {
+    font-size: var(--xl-size);
+    font-weight: 700;
+  }
+}
+
+ol.list--unstyled {
+  @extend %list-type--unstyled;
+
+  > li::marker {
+    content: none;
+  }
+}
+
+ol.list--styled {
+  @extend %list-type--styled;
+
+  list-style-type: decimal;
+
+  > li::marker {
+    content: counters(li-counter, '.') '.  ';
+  }
+}
+
+// --- 1.3. Definition Lists ---
+
+dl.list--styled,
+dl.list--unstyled {
+  dd,
+  dl {
+    margin: 0;
+  }
+}
+
+dl.list--unstyled {
+  @extend %list-type--unstyled;
+
+  dd,
+  dl {
+    padding-inline-start: 0;
+  }
+}
+
+dl.list--styled {
+  @extend %list-type--styled;
+
+  dd,
+  dl {
+    padding-inline-start: 1rem;
+  }
+}

package/sass/utilities/_negates.scss

@@ -0,0 +1,121 @@
+@use '../core/funcs/map' as map;
+
+// ==========================================================
+// NEGATES
+// ==========================================================
+
+// --- TEXT DECORATION NEGATES (with link states) ---
+@each $state in ('', ':hover', ':active', ':visited') {
+  .no-underline,
+  a.no-underline#{$state} {
+    text-decoration: none;
+  }
+
+  .no-no-underline,
+  a.no-no-underline#{$state} {
+    text-decoration: none !important;
+  }
+}
+
+// --- NEGATES ---
+@each $name,
+  $config
+    in (
+      'background': (
+          'property': 'background',
+          'value': none,
+        ),
+      'events': (
+          'property': 'pointer-events',
+          'value': none,
+        ),
+      'flex-grow': (
+          'property': 'flex',
+          'value': 0 1,
+        ),
+      'flex-shrink': (
+          'property': 'flex',
+          'value': 1 0,
+        ),
+      'float': (
+          'property': 'float',
+          'value': none,
+        ),
+      'flex': (
+          'property': 'flex',
+          'value': none,
+        ),
+      'margin': (
+          'property': 'margin',
+          'value': 0,
+        ),
+      'padding': (
+          'property': 'padding',
+          'value': 0,
+        ),
+      'border': (
+          'property': 'border',
+          'value': 0,
+        ),
+      'radius': (
+          'property': 'border-radius',
+          'value': 0,
+        ),
+      'outline': (
+          'property': 'outline',
+          'value': none,
+        ),
+      'pointer': (
+          'property': 'cursor',
+          'value': default,
+        ),
+      'select': (
+          'property': 'user-select',
+          'value': none,
+        ),
+      'wrap': (
+          'property': 'white-space',
+          'value': nowrap,
+        )
+    )
+{
+  $property: map.get($config, 'property');
+  $value: map.get($config, 'value');
+
+  .no-#{$name} {
+    #{$property}: #{$value};
+  }
+
+  .no-no-#{$name} {
+    #{$property}: #{$value} !important;
+  }
+}
+
+// --- UTILITY CLASSES ---
+.no-click-allowed {
+  cursor: not-allowed;
+}
+
+.no-overflow {
+  overflow: hidden;
+}
+
+.no-no-overflow {
+  overflow: hidden !important;
+}
+
+.no-overflow-x {
+  overflow-x: hidden;
+}
+
+.no-no-overflow-x {
+  overflow-x: hidden !important;
+}
+
+.no-overflow-y {
+  overflow-y: hidden;
+}
+
+.no-no-overflow-y {
+  overflow-y: hidden !important;
+}

package/sass/utilities/_palette.scss

@@ -0,0 +1,11 @@
+// Applique la variable CSS locale --nappr-data-color à la couleur du texte.
+// @example <div data-color="black" class="text-data-color">Texte noir</div>
+.text-data-color {
+  color: var(--nappr-data-color);
+}
+
+// Applique la variable CSS locale --nappr-data-color au fond.
+// @example <div data-color="black" class="bg-data-color">Fond noir</div>
+.bg-data-color {
+  background-color: var(--nappr-data-color);
+}

package/sass/utilities/_scrolls.scss

@@ -0,0 +1,67 @@
+@use '../core/placeholders/' as *;
+
+// ==========================================================
+// Placeholders
+// ==========================================================
+%is-scrollbox {
+  @extend %is-full-layout;
+  @extend %position-absolute;
+
+  overflow: auto;
+}
+
+%is-scrollbox-y {
+  @extend %is-full-layout;
+  @extend %position-absolute;
+
+  overflow: hidden auto;
+}
+
+%scroll-x-auto {
+  overflow: auto hidden;
+}
+
+%scroll-y-auto {
+  overflow: hidden auto;
+}
+
+// ==========================================================
+// Utility Classes
+// ==========================================================
+.scroll-x-only {
+  overflow: scroll hidden;
+}
+
+.scroll-y-only {
+  overflow: hidden scroll;
+}
+
+.scroll-x-auto {
+  @extend %scroll-x-auto;
+}
+
+.scroll-y-auto {
+  @extend %scroll-y-auto;
+}
+
+.scrollbox-wrapper {
+  @extend %position-relative;
+}
+
+.scrollbox {
+  @extend %is-scrollbox;
+}
+
+.scrollbox-y {
+  @extend %is-scrollbox;
+  @extend %scroll-y-auto;
+
+  height: auto;
+}
+
+.scrollbox-x {
+  @extend %is-scrollbox;
+  @extend %scroll-x-auto;
+
+  height: auto;
+}