@nappr/nappr-styles 0.3.2 → 0.3.3

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,21 @@
+a {
+  &:link,
+  &:visited,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+/*
+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});
+  }
+}

package/sass/layout/grid/_grid.scss

@@ -0,0 +1,130 @@
+@use '../../core/funcs/map' as map;
+@use '../../configs/' as configs;
+
+// ==========================================================
+// 1. BASE GRID DEFINITION
+// ==========================================================
+
+.grid,
+.grid--fluid {
+  display: grid;
+  gap: map.get(configs.$NAPPR_GRID, 'gutter-gap-sm');
+  grid-template-columns: repeat(map.get(configs.$NAPPR_GRID, 'columns'), 1fr);
+  width: 100%;
+}
+
+.grid {
+  max-width: map.get(configs.$NAPPR_GRID, 'max-width');
+}
+
+.grid--fluid {
+  max-width: none;
+}
+
+// ==========================================================
+// 6. ITEM ALIGNMENT UTILITY CLASSES
+// (align-items and justify-items)
+// ==========================================================
+
+// --- 6.1. Vertical item alignment (align-items) ---
+@each $name,
+  $value in ('top': start, 'middle': center, 'bottom': end, 'stretch': stretch)
+{
+  .grid-items-#{$name} {
+    align-items: #{$value};
+  }
+}
+
+// --- 6.2. Horizontal item justification (justify-items) ---
+$justify-values: (start, center, end, stretch);
+
+@each $value in $justify-values {
+  .grid-justify-#{$value} {
+    justify-items: #{$value};
+  }
+}
+
+// --- 6.3. Combined alignment and justification (place-items) ---
+$place-items-values: (start, center, end, stretch);
+
+@each $value in $place-items-values {
+  .grid-place-#{$value} {
+    place-items: #{$value};
+  }
+}
+
+// ==========================================================
+// 7. CONTENT ALIGNMENT UTILITY CLASSES
+// (align-content and justify-content)
+// ==========================================================
+
+// --- 7.1. Vertical content alignment (align-content) ---
+$align-content-values: (
+  'top': start,
+  'middle': center,
+  'bottom': end,
+  'between': space-between,
+  'around': space-around,
+  'evenly': space-evenly,
+  'stretch': stretch,
+);
+
+@each $name, $value in $align-content-values {
+  .grid-content-#{$name} {
+    align-content: #{$value};
+  }
+}
+
+// --- 7.2. Horizontal content justification (justify-content) ---
+$justify-content-values: (
+  'start': start,
+  'center': center,
+  'end': end,
+  'between': space-between,
+  'around': space-around,
+  'evenly': space-evenly,
+  'stretch': stretch,
+);
+
+@each $name, $value in $justify-content-values {
+  .grid-justify-content-#{$name} {
+    justify-content: #{$value};
+  }
+}
+
+// ==========================================================
+// 8. INDIVIDUAL ITEM ALIGNMENT UTILITY CLASSES
+// (align-self and justify-self)
+// ==========================================================
+
+// --- 8.1. Vertical alignment of an individual item (align-self) ---
+$align-self-values: (
+  'top': start,
+  'middle': center,
+  'bottom': end,
+  'stretch': stretch,
+);
+
+@each $name, $value in $align-self-values {
+  .grid-self-#{$name} {
+    align-self: #{$value};
+  }
+}
+
+// --- 8.2. Horizontal justification of an individual item (justify-self) ---
+$justify-self-values: (start, center, end, stretch);
+
+@each $value in $justify-self-values {
+  .grid-self-justify-#{$value} {
+    justify-self: #{$value};
+  }
+}
+
+// --- 8.3. Combined alignment and justification for an item (place-self) ---
+$place-self-values: (start, center, end, stretch);
+
+@each $value in $place-self-values {
+  .grid-self-place-#{$value} {
+    place-self: #{$value};
+  }
+}

package/sass/layout/grid/_offsets.scss

@@ -0,0 +1,35 @@
+@use '../../core/mixins/' as mixins;
+@use '../../configs/' as configs;
+@use '../../core/funcs/map' as map;
+
+@for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
+  .grid--col-offset-#{$i} {
+    grid-column-start: #{$i + 1};
+  }
+}
+
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    @for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
+      .grid-#{$key}--col-offset-#{$i} {
+        grid-column-start: #{$i + 1};
+      }
+    }
+  }
+}
+
+@for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
+  .grid--col-offset-#{$i}__right {
+    grid-column-end: #{$i + 1};
+  }
+}
+
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    @for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
+      .grid-#{$key}--col-offset-#{$i}__right {
+        grid-column-end: #{$i + 1};
+      }
+    }
+  }
+}

package/sass/main.scss

@@ -0,0 +1,59 @@
+/* ==========================================================
+//
+// 1. 🔧 ROOT VARIABLES
+//
+========================================================== */
+@use './_globals' as globals;
+
+/* ========================================================== */
+
+/* 2. 🎨 THEMES (Theme Variables)
+/* ========================================================== */
+
+/* ========================================================== */
+
+/* 3. ⚡ CORE (Functions, Mixins, Placeholders)
+/* ========================================================== */
+// @use './core/funcs/' as *;
+// @use './core/mixins/' as *;
+// @use './core/placeholders/' as *;
+
+/* ========================================================== */
+
+/* 4. 🧱 RESETS (Base Reset, Nappr Reset)
+/* ========================================================== */
+@use './resets/' as *;
+
+/* ========================================================== */
+
+/* 5. 🌱 ELEMENTS (HTML Elements)
+/* ========================================================== */
+@use './elements/' as *;
+
+/* ==========================================================
+/* 6. 📐 LAYOUT (Layout Components)
+/* ========================================================== */
+@use './layout/grid/' as *;
+
+/* ========================================================== */
+
+/* 7. 🧩 COMPONENTS (UI Components)
+/* ========================================================== */
+// @use './components/badge/elements' as *;
+
+// @use './components/button/' as *;
+// @use './components/scrollbar/' as *;
+
+/* ========================================================== */
+
+/* 8. ✨ UTILITIES (Utility Classes)
+/* ========================================================== */
+@use './utilities/' as *;
+
+/* ========================================================== */
+
+/* Core
+/* ========================================================== */
+.debug * {
+  outline: 1px solid rgb(255 0 0 / 30%);
+}

package/sass/resets/_.scss

@@ -0,0 +1,5 @@
+// !!! DO NOT REORDER THIS FILE !!!
+@use './base';
+@use './nappr';
+
+// !!! DO NOT REORDER THIS FILE !!!

package/sass/resets/_base.scss

@@ -0,0 +1,69 @@
+/**
+ * https://www.joshwcomeau.com/css/custom-css-reset/
+ *
+ * A custom CSS reset for a modern, accessible web.
+ *
+ * @author Josh W. Comeau
+ * @version 1.0.0
+ * @license MIT
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}

package/sass/resets/_nappr.scss

@@ -0,0 +1,82 @@
+html {
+  font-size: 100%;
+}
+
+body {
+  color: var(--nappr-theme-text-secondary);
+  font-family: var(--nappr-text-font-family);
+  font-size: var(--nappr-text-font-size);
+  min-height: 100vh;
+  text-rendering: optimizespeed;
+  width: 100vw;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+
+pre {
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+p {
+  white-space: initial;
+}
+
+sub,
+sup {
+  line-height: 1;
+}
+
+button,
+[role='reset'],
+[role='submit'],
+[role='button'] {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+}
+
+hr,
+input,
+button,
+textarea,
+[role='reset'],
+[role='submit'],
+[role='button'] {
+  margin: 0;
+  padding: 0;
+}
+
+.disabled,
+:disabled,
+:disabled:link,
+:disabled:visited,
+:disabled:hover,
+:disabled:active {
+  box-shadow: inherit;
+  cursor: default;
+  cursor: not-allowed;
+  pointer-events: none;
+  text-shadow: inherit;
+}
+
+#root {
+  isolation: isolate;
+}

package/sass/themes/_dark.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #1e1e1e,
+  'panel': #2d2d2d,
+  'rollover': #3a3a3a,
+  'accent': #4285f4,
+  'border': #404040,
+  'text-primary': #ffffff,
+  'text-secondary': #707070,
+  'text-disabled': #707070,
+  'text-hover-bg': #4a4a4a,
+  'text-active-bg': #0a4c98,
+  'state-success': #34a853,
+  'state-warning': #f9ab00,
+  'state-error': #ea4335,
+  'state-info': #4285f4,
+  'state-debug': #ffc107,
+);

package/sass/themes/_dracula.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #282a36,
+  'panel': #44475a,
+  'rollover': #6272a4,
+  'accent': #ff79c6,
+  'border': #44475a,
+  'text-primary': #f8f8f2,
+  'text-secondary': #637777,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #50fa7b,
+  'state-warning': #ffb86c,
+  'state-error': #ff5555,
+  'state-info': #bd93f9,
+  'state-debug': #ff9800,
+);

package/sass/themes/_github-light.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #ffffff,
+  'panel': #f6f8fa,
+  'rollover': #eaeaea,
+  'accent': #0366d6,
+  'border': #d1d5da,
+  'text-primary': #24292e,
+  'text-secondary': #6a737d,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #28a745,
+  'state-warning': #ffc107,
+  'state-error': #d73a49,
+  'state-info': #0366d6,
+  'state-debug': #ff9800,
+);

package/sass/themes/_light.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #ffffff,
+  'panel': #f8f8f8,
+  'rollover': #eaeaea,
+  'accent': #1a73e8,
+  'border': #e0e0e0,
+  'text-primary': #202124,
+  'text-secondary': #727072,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #1e8e3e,
+  'state-warning': #f9aa33,
+  'state-error': #d93025,
+  'state-info': #185abc,
+  'state-debug': #ff9800,
+);

package/sass/themes/_monokai-pro.scss

@@ -0,0 +1,17 @@
+$theme: (
+  'background': #2d2a2e,
+  'panel': #3c3b3d,
+  'rollover': #4c4b4d,
+  'accent': #ff6188,
+  'border': #444244,
+  'text-primary': #fcfcfa,
+  'text-secondary': #727072,
+  'text-disabled': #a0a0a0,
+  'text-hover-bg': #f0f0f0,
+  'text-active-bg': #e8f0fe,
+  'state-success': #a9dc76,
+  'state-warning': #ffd866,
+  'state-error': #ff6188,
+  'state-info': #78dce8,
+  'state-debug': #ff9800,
+);