@nappr/nappr-styles 0.3.2 → 0.3.5

package/sass/components/_button.scss

@@ -0,0 +1,244 @@
+@use 'sass:color';
+
+// $COMPONENT_CONFIG: (
+//   'hover-lightness': -10%,
+//   'active-lightness': -15%,
+// ) !default;
+
+// ==========================================================
+// BUTTON PLACEHOLDERS
+// ==========================================================
+
+%button-base {
+  align-items: center;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  gap: 0.5rem;
+  justify-content: center;
+  line-height: 1.2;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &.btn--rounded {
+    border-radius: 9999px;
+  }
+
+  // Focus state
+  &:focus-visible {
+    outline: 2px solid var(--nappr-theme-accent);
+    outline-offset: 2px;
+  }
+
+  // No outline modifier
+  &.btn--no-outline {
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
+
+// Button disabled state
+%button-disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+%button-group-base {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+// ==========================================================
+// BUTTON MIXINS
+// ==========================================================
+
+@mixin button-interactive {
+  &:not(:disabled, .disabled) {
+    @content;
+  }
+}
+
+@mixin button-transition {
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+
+  // Note: border-color is included for secondary variant which has a border
+}
+
+// ==========================================================
+// BUTTON COMPONENT
+// ==========================================================
+
+.btn {
+  @extend %button-base;
+  @include button-transition;
+
+  // Icon support
+  .icon {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+  }
+
+  // Icon only (no text)
+  &.btn--icon-only {
+    aspect-ratio: 1;
+
+    // padding: config.$NAPPR_BUTTON_PADDING_Y;
+
+    .icon {
+      margin: 0;
+    }
+  }
+
+  // Icon on the left
+  &.btn--icon-left {
+    .icon {
+      order: -1;
+    }
+  }
+
+  // Icon on the right (default)
+  &.btn--icon-right {
+    .icon {
+      order: 1;
+    }
+  }
+
+  // Hover state
+  @include button-interactive {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Disabled state
+  &:disabled,
+  &.disabled {
+    @extend %button-disabled;
+  }
+}
+
+// ==========================================================
+// BUTTON VARIANTS (PRIORITIES)
+// ==========================================================
+
+// Primary (default)
+.btn,
+.btn--primary {
+  background-color: var(--nappr-theme-accent);
+  border: 0;
+  color: var(--nappr-theme-text-primary);
+
+  @include button-interactive {
+    &:hover {
+      // Use color-mix for hover state (darken by 10%)
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+    }
+
+    &:active {
+      // Use color-mix for active state (darken by 15%)
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 85%,
+        black 15%
+      );
+    }
+  }
+}
+
+// Secondary (variant of primary)
+.btn--secondary {
+  background-color: transparent;
+  border: 1px solid var(--nappr-theme-accent);
+  color: var(--nappr-theme-accent);
+
+  @include button-interactive {
+    &:hover {
+      background-color: var(--nappr-theme-accent);
+      color: var(--nappr-theme-text-primary);
+    }
+
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      color: var(--nappr-theme-text-primary);
+    }
+  }
+}
+
+// Tertiary (border only, background on hover)
+.btn--tertiary {
+  background-color: transparent;
+  border: 1px solid var(--nappr-theme-accent);
+  color: var(--nappr-theme-accent);
+
+  @include button-interactive {
+    &:hover {
+      background-color: var(--nappr-theme-accent);
+      border-color: var(--nappr-theme-accent);
+      color: var(--nappr-theme-text-primary);
+    }
+
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      color: var(--nappr-theme-text-primary);
+    }
+  }
+}
+
+.btns-group {
+  @extend %button-group-base;
+
+  & > * {
+    width: 100%;
+  }
+}
+
+.btns-group--inline {
+  @extend %button-group-base;
+
+  flex-direction: row;
+
+  & > * {
+    width: auto;
+  }
+}

package/sass/components/_nav.scss

@@ -0,0 +1,95 @@
+.nav,
+.navbar {
+  .nav__list {
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+    margin: 0;
+    margin-block: 0;
+    padding: 0;
+    padding-inline-start: 0;
+  }
+
+  .nav__item {
+    align-items: stretch;
+    display: flex;
+    flex: 0 1 auto;
+    flex-direction: column;
+    padding-bottom: 0;
+    position: relative;
+  }
+
+  .nav__btn,
+  .nav__link {
+    // --hover-tint: var(--hover);
+    // --active-tint: var(--active);
+    align-items: center;
+    color: var(--nappr-theme-text-primary);
+    display: flex;
+    flex-direction: row;
+    font-size: 1rem;
+    font-weight: 700;
+    height: 100%;
+    justify-content: space-between;
+    line-height: 1.5rem;
+    margin: 0;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    text-decoration: none;
+    width: 100%;
+  }
+}
+
+.navbar {
+  justify-content: flex-start;
+
+  .nav__list {
+    flex-flow: row nowrap;
+    gap: 1rem;
+    margin: 0 -1rem;
+    max-width: calc(100% + 1rem);
+  }
+
+  .nav__item {
+    align-items: flex-start;
+    flex: 1 1 0%;
+    position: static;
+  }
+
+  .nav__btn,
+  .nav__link {
+    font-size: 0.875rem;
+    font-weight: 400;
+    justify-content: center;
+    line-height: 1.5rem;
+    min-height: 3.5rem;
+    padding: 1rem;
+    text-align: center;
+  }
+}
+
+@media (width >= 62em) {
+  .nav {
+    justify-content: flex-start;
+
+    .nav__list {
+      flex-flow: row nowrap;
+      margin: 0 -1rem;
+      max-width: calc(100% + 1rem);
+    }
+
+    .nav__item {
+      align-items: flex-start;
+      position: static;
+    }
+
+    .nav__btn,
+    .nav__link {
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+      min-height: 3.5rem;
+      padding: 1rem;
+    }
+  }
+}

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,10 @@
+$NAPPR_GRID: (
+  'columns': 12,
+  'columns-sm': 6,
+  'max-width': 1200px,
+  'max-width-sm': 600px,
+  '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,39 @@
+$NAPPR_TEXT: (
+  'font-size': 1rem,
+  'font-family': 'Helvetica, Arial, Verdana, sans-serif',
+  'font-family--alt': '"Spectral", Georgia, serif',
+  'weights-light': 300,
+  'weights-regular': 400,
+  'weights-medium': 500,
+  'weights-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;
+}