@nappr/nappr-styles 0.3.2 → 0.3.5

package/sass/layout/grid/_grid.scss

@@ -0,0 +1,158 @@
+@use '../../core/funcs/map' as map;
+@use '../../core/mixins/' as mixins;
+@use '../../configs/' as configs;
+
+%grid-base {
+  display: grid;
+  gap: map.get(configs.$NAPPR_GRID, 'gutter-gap-sm');
+  width: 100%;
+}
+
+%grid-fluid-base {
+  @extend %grid-base;
+
+  max-width: none;
+}
+
+// ==========================================================
+// 1. BASE GRID DEFINITION
+// ==========================================================
+
+.grid,
+.grid-sm {
+  @extend %grid-base;
+}
+
+.grid--fluid,
+.grid-sm--fluid {
+  @extend %grid-fluid-base;
+}
+
+.grid,
+.grid--fluid {
+  grid-template-columns: repeat(map.get(configs.$NAPPR_GRID, 'columns'), 1fr);
+}
+
+.grid-sm,
+.grid-sm--fluid {
+  grid-template-columns: repeat(
+    map.get(configs.$NAPPR_GRID, 'columns-sm'),
+    1fr
+  );
+}
+
+.grid {
+  max-width: map.get(configs.$NAPPR_GRID, 'max-width');
+}
+
+.grid-sm {
+  max-width: map.get(configs.$NAPPR_GRID, 'max-width-sm');
+}
+
+// ==========================================================
+// 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/' as *;
+
+// @use './components/badge/elements' 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,83 @@
+html {
+  font-size: 100%;
+}
+
+body {
+  background-color: var(--nappr-theme-background);
+  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,
+);

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