@nappr/nappr-styles 0.3.2 → 0.3.5

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,31 @@
+%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;
+}
+
+%is-viewport-height {
+  height: 100vh;
+  height: 100dvh;
+}
+
+%is-viewport-width {
+  width: 100vw;
+  width: 100dvw;
+}
+
+%is-viewport-layout {
+  @extend %is-viewport-height;
+  @extend %is-viewport-width;
+}

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;
+  }
+}

package/{lib/htmls → sass/elements}/_form.scss

@@ -21,9 +21,31 @@
   cursor: default;
 }
 
-.no-click,
-.not-allowed {
-  cursor: not-allowed;
+form {
+  > section {
+    border-style: solid;
+    border-width: 1px;
+    margin-bottom: 4rem;
+
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      display: inline-block;
+      font-weight: bold;
+      left: 1.8rem;
+      padding: 1rem;
+      position: relative;
+      top: -1.8rem;
+      z-index: 0;
+    }
+
+    > div {
+      padding: 0 2rem 1.25rem;
+    }
+  }
 }
 
 input,
@@ -55,8 +77,8 @@ input[type='checkbox'] {
 }
 
 input[type='search'] {
-  -webkit-appearance: textfield;
-  -webkit-box-sizing: content-box;
+  appearance: textfield;
+  box-sizing: content-box;
 }
 
 button,
@@ -68,7 +90,7 @@ input[type='submit'] {
 }
 
 textarea {
-  line-height: 1.2em;
+  line-height: 1.2rem;
   min-height: 2.4rem;
   overflow: auto;
   resize: vertical;

package/sass/elements/_links.scss

@@ -0,0 +1,132 @@
+[href] {
+  color: var(--nappr-theme-text-primary);
+  font-size: 1rem;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+
+  &:link,
+  &:visited,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// font-weight: 700;
+// height: 100%;
+// justify-content: space-between;
+// line-height: 1.5rem;
+// margin: 0;
+// padding: 0.75rem 1rem;
+// width: 100%;
+// text-align: left;
+
+/*
+[href] {
+  background-image: var(--underline-img), var(--underline-img);
+  background-position:
+    var(--underline-x) 100%,
+    var(--underline-x) calc(100% - var(--underline-thickness));
+  background-repeat: no-repeat, no-repeat;
+  background-size:
+    var(--underline-hover-width) calc(var(--underline-thickness) * 2),
+    var(--underline-idle-width) var(--underline-thickness);
+  transition: background-size 0s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a[href]:active,
+  button:not(:disabled):active,
+  input[type='button']:not(:disabled):active,
+  input[type='image']:not(:disabled):active,
+  input[type='reset']:not(:disabled):active,
+  input[type='submit']:not(:disabled):active {
+    background-color: var(--active-tint);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a[href]:hover,
+  button:not(:disabled):hover,
+  input[type='button']:not(:disabled):hover,
+  input[type='image']:not(:disabled):hover,
+  input[type='reset']:not(:disabled):hover,
+  input[type='submit']:not(:disabled):hover {
+    background-color: var(--hover-tint);
+  }
+}
+
+[tabindex]:focus-visible,
+a:focus-visible,
+audio:focus-visible[controls],
+button:focus-visible,
+details:focus-visible,
+details > summary:first-of-type:focus-visible,
+input:focus-visible,
+input[type='button']:focus-visible,
+input[type='checkbox']:focus-visible + label:before,
+input[type='image']:focus-visible,
+input[type='radio']:focus-visible + label:before,
+input[type='reset']:focus-visible,
+input[type='submit']:focus-visible,
+select:focus-visible,
+video:focus-visible[controls] {
+  outline-style: solid;
+}
+
+[tabindex]:focus:not(:focus-visible),
+a:focus:not(:focus-visible),
+audio:focus:not(:focus-visible)[controls],
+button:focus:not(:focus-visible),
+details:focus:not(:focus-visible),
+details > summary:first-of-type:focus:not(:focus-visible),
+input:focus:not(:focus-visible),
+input[type='button']:focus:not(:focus-visible),
+input[type='checkbox']:focus:not(:focus-visible) + label:before,
+input[type='image']:focus:not(:focus-visible),
+input[type='radio']:focus:not(:focus-visible) + label:before,
+input[type='reset']:focus:not(:focus-visible),
+input[type='submit']:focus:not(:focus-visible),
+select:focus:not(:focus-visible),
+video:focus:not(:focus-visible)[controls] {
+  outline-style: none;
+}
+[tabindex]:focus,
+a:focus,
+audio:focus[controls],
+button:focus,
+details:focus,
+details > summary:first-of-type:focus,
+input:focus,
+input[type='button']:focus,
+input[type='checkbox']:focus + label:before,
+input[type='image']:focus,
+input[type='radio']:focus + label:before,
+input[type='reset']:focus,
+input[type='submit']:focus,
+select:focus,
+video:focus[controls] {
+  outline-color: #0a76f6;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a[href]:active,
+  a[href]:hover {
+    --underline-hover-width: var(--underline-max-width);
+  }
+}
+
+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/sass/elements/_lists.scss

@@ -0,0 +1,11 @@
+dl,
+ol,
+ul {
+  --nappr-default-xl-size: var(--nappr-default-xl-base);
+}
+
+dd,
+dt,
+li {
+  --nappr-default-xl-base: calc(var(--nappr-default-xl-size) * 0.9);
+}

package/{lib/htmls → sass/elements}/_table.scss

@@ -1,10 +1,7 @@
-@use '../funcs/rem' as rem;
-
 table {
-  font-size: rem.convert(12px);
-
   border-collapse: collapse;
   border-spacing: 0;
+  font-size: var(--nappr-default-font-size, 0.75rem);
   max-width: 100%;
   min-width: 100%;
   overflow: scroll;
@@ -18,10 +15,9 @@ table th {
 
 table th,
 table td {
-  padding: rem.convert(12px 15px);
-
   display: table-cell;
   overflow: hidden;
+  padding: 0.75rem 1rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/sass/elements/_typography.scss

@@ -0,0 +1,13 @@
+@use '../core/placeholders/' as *;
+@use '../core/mixins/' as mixins;
+@use '../configs/' as configs;
+
+// ==========================================================
+// TEXT
+// ==========================================================
+
+@include mixins.generate-heading-styles(configs.$NAPPR_HEADINGS);
+
+p {
+  @extend %text-base;
+}

package/sass/layout/grid/_.scss

@@ -0,0 +1,4 @@
+@use 'grid';
+@use 'columns';
+@use 'gaps';
+@use 'offsets';

package/sass/layout/grid/_columns.scss

@@ -0,0 +1,32 @@
+@use '../../core/funcs/map' as map;
+@use '../../core/mixins/' as mixins;
+@use '../../configs/' as configs;
+
+// Mixin pour générer les classes de colonnes
+@mixin generate-grid-columns($prefix: '') {
+  @for $i from 1 through map.get(configs.$NAPPR_GRID, 'columns') {
+    .grid#{$prefix}-col-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+// Mixin pour générer les classes de template columns
+@mixin generate-grid-template-columns($prefix: '') {
+  @for $i from 1 through map.get(configs.$NAPPR_GRID, 'columns') {
+    .grid#{$prefix}-cols-#{$i} {
+      grid-template-columns: repeat(#{$i}, 1fr);
+    }
+  }
+}
+
+@include generate-grid-columns;
+@include generate-grid-template-columns;
+
+// Génération des classes responsives
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    @include generate-grid-columns('-#{$key}');
+    @include generate-grid-template-columns('-#{$key}');
+  }
+}

package/sass/layout/grid/_gaps.scss

@@ -0,0 +1,42 @@
+@use '../../core/funcs/map' as map;
+@use '../../core/mixins/' as mixins;
+@use '../../configs/' as configs;
+
+// --- Utilisation de variables CSS pour les gaps ---
+.grid-gap {
+  $value: map.get(configs.$NAPPR_GRID, 'gutter-gap-md');
+
+  gap: var(--nappr-grid-gutter-gap-md, #{$value});
+}
+
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    .grid-#{$key}--gap {
+      $value: map.get(configs.$NAPPR_GRID, 'gutter-gap-#{$key}');
+
+      gap: var(--nappr-grid-gutter-gap-#{$key}, #{$value});
+    }
+  }
+}
+
+.grid--no-gap {
+  gap: 0;
+}
+
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    .grid-#{$key}--no-gap {
+      gap: 0;
+    }
+  }
+}
+
+@include mixins.media-query-min('lg') {
+  .grid-gap,
+  .grid-md-gap,
+  .grid-sm-gap {
+    $value: map.get(configs.$NAPPR_GRID, 'gutter-gap-lg');
+
+    gap: var(--nappr-grid-gutter-gap-lg, #{$value});
+  }
+}