ng-luna 0.1.4 → 0.2.1

package/README.md

@@ -18,9 +18,9 @@ npm install ng-luna
 
 This library requires the following peer dependencies:
 
-- `@angular/common`: 19.2.15
-- `@angular/core`: 19.2.15
-- `@angular/forms`: 19.2.15
+- `@angular/common`: 19.x.x
+- `@angular/core`: 19.x.x
+- `@angular/forms`: 19.x.x
 
 ## Usage
 
@@ -508,7 +508,7 @@ ng-luna/
 ## Dependencies
 
 - **@ibm/plex** (v6.4.1) - IBM Plex font families (fonts are bundled with the library)
-- **@angular/cdk** (v19.2.17) - Angular Component Dev Kit
+- **@angular/cdk** (19.x.x) - Angular Component Dev Kit
 
 ## Publishing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-luna",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "An Angular component library inspired by Windows XP aesthetics, built with IBM Plex fonts",
   "author": {
     "name": "Adam R Moss",

package/theme/_breakpoints.scss

@@ -0,0 +1,153 @@
+@use 'sass:math';
+
+$breakpoints: (
+        xxs: 320px,
+        xs: 375px,
+        sm: 425px,
+        md: 768px,
+        lg: 1024px,
+        xl: 1440px
+);
+
+@function breakpoint-next($name)
+{
+    $breakpoint-names: map-keys($breakpoints);
+    $n: index($breakpoint-names, $name);
+    @if not $n
+    {
+        $breakpoints-keys: map-keys($breakpoints);
+        @error "breakpoint `#{$name}` not found in any of the breakpoints: `#{$breakpoints-keys}`";
+    }
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+@function breakpoint-min($name)
+{
+    $min: map-get($breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name)
+{
+    $max: map-get($breakpoints, $name);
+    @return if($max and $max > 0, $max - .02, null);
+}
+
+@mixin media-breakpoint-up($name)
+{
+    $min: breakpoint-min($name);
+    @if $min
+    {
+        @media (min-width: $min)
+        {
+            @content;
+        }
+    } @else
+    {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-down($name)
+{
+    $max: breakpoint-max($name);
+    @if $max
+    {
+        @media (max-width: $max)
+        {
+            @content;
+        }
+    } @else
+    {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-between($lower, $upper)
+{
+    $min: breakpoint-min($lower);
+    $max: breakpoint-max($upper);
+
+    @if $min != null and $max != null
+    {
+        @media (min-width: $min) and (max-width: $max)
+        {
+            @content;
+        }
+    } @else if $max == null
+    {
+        @include media-breakpoint-up($lower)
+        {
+            @content;
+        }
+    } @else if $min == null
+    {
+        @include media-breakpoint-down($upper)
+        {
+            @content;
+        }
+    }
+}
+
+@mixin media-breakpoint-only($name)
+{
+    $min: breakpoint-min($name);
+    $next: breakpoint-next($name);
+    $max: breakpoint-max($next);
+
+    @if $min != null and $max != null
+    {
+        @media (min-width: $min) and (max-width: $max)
+        {
+            @content;
+        }
+    } @else if $max == null
+    {
+        @include media-breakpoint-up($name)
+        {
+            @content;
+        }
+    } @else if $min == null
+    {
+        @include media-breakpoint-down($next)
+        {
+            @content;
+        }
+    }
+}
+
+@mixin responsive-value($property, $value)
+{
+    // Ratio (100 / 1440) => 5 / 72
+    #{$property}: #{math.div($value * 5, 72)}vw;
+
+    @include media-breakpoint-only(xl)
+    {
+        // Value is designed for 1440px layout
+        #{$property}: #{$value}px;
+    }
+}
+
+@mixin lg-responsive-value($property, $value)
+{
+    // Ratio (100 / 1024) => 25 / 256
+    #{$property}: #{math.div($value * 25, 256)}vw;
+
+    @include media-breakpoint-up(lg)
+    {
+        // Value is designed for 1024px layout
+        #{$property}: #{$value}px;
+    }
+}
+
+@mixin md-responsive-value($property, $value)
+{
+    // Ratio (100 / 768) => 25 / 192
+    #{$property}: #{math.div($value * 25, 192)}vw;
+
+    @include media-breakpoint-up(md)
+    {
+        // Value is designed for 768px layout
+        #{$property}: #{$value}px;
+    }
+}

package/theme/_fonts.scss

@@ -0,0 +1,16 @@
+// Override font-prefix to point to node_modules
+// Path is relative from component SCSS files (e.g., src/controls/*/) to node_modules
+// Components import this file, so paths resolve from component location
+// Set without !default to ensure it overrides IBM Plex's !default values
+$font-prefix: '../../../node_modules/@ibm/plex';
+
+// Import all IBM Plex font families from npm
+// Note: Using @use with @forward to maintain compatibility while avoiding deprecation warnings
+@use '@ibm/plex/scss/mono';
+@use '@ibm/plex/scss/sans';
+@use '@ibm/plex/scss/serif';
+
+// Define static SCSS variables for consistent usage
+$font-mono: 'IBM Plex Mono', monospace;
+$font-sans: 'IBM Plex Sans', sans-serif;
+$font-serif: 'IBM Plex Serif', serif;

package/theme/_palette.scss

@@ -0,0 +1,61 @@
+$black: #000000;
+$navy-darkest: #00138c;
+$navy-darker: #0f1089;
+$navy-dark: #001ea0;
+$navy: #003c74;
+$blue-royal: #0046d5;
+$blue-bright-darkest: #003bda;
+$blue-bright-darker: #003dd7;
+$blue-bright-dark: #0050ee;
+$blue-bright: #0053ee;
+$blue-bright-medium: #0066ff;
+$blue-bright-light: #005bff;
+$blue-bright-lighter: #0831d9;
+$blue-bright-lightest: #0855dd;
+$blue-sky-dark: #0997ff;
+$blue-sky: #166aee;
+$blue-steel-dark: #1d5281;
+$blue-steel: #7f9db9;
+$blue-steel-light: #91a7b4;
+$blue: #89ade4;
+$blue-medium: #98b8ea;
+$blue-light: #bcd4f6;
+$blue-lightest: #cee7ff;
+$blue-gray: #919b9c;
+
+$green-darkest: #2ed330;
+$green-dark: #42d845;
+$green: #4cda50;
+$green-light: #76e275;
+$green-lighter: #7be47d;
+$green-lightest: #8fe791;
+$green-mint: #acedad;
+
+$orange-dark: #e68b2c;
+$orange: #e5a01a;
+$gold: #f8b636;
+$yellow-gold: #ffc73c;
+$yellow-medium: #fbc761;
+$yellow-light: #fdd889;
+$yellow-cream: #fedf9c;
+$cream-light: #fff0cf;
+
+$gray-darkest: #686868;
+$gray-dark: #9d9c99;
+$gray-darker: #b0b0a7;
+$gray-medium: #cdcac3;
+$beige-tan: #cac8bb;
+$beige-khaki: #d0d0bf;
+$beige-medium: #d8d0c4;
+$gray-light-warm: #dcdcd7;
+$beige-pale: #e3e1d2;
+$gray-light: #e3e3db;
+$gray-lighter: #e5e5de;
+$beige-lighter: #ecebe4;
+$beige-light: #ecebe5;
+$cream-pale: #f0f0ea;
+$gray-lightest: #f2f2f1;
+$cream: #f3f2ea;
+$off-white-warm: #fafaf9;
+$off-white: #fcfcfe;
+$white: #ffffff;

package/theme/_reset.scss

@@ -0,0 +1,58 @@
+*
+{
+    box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video
+{
+    border: 0;
+    margin: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+
+// HTML5 display-role reset for older browsers
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section
+{
+    display: block;
+}
+
+body
+{
+    line-height: 1;
+}
+
+ol, ul
+{
+    list-style: none;
+}
+
+blockquote, q
+{
+    quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after
+{
+    content: "";
+}
+
+table
+{
+    border-collapse: collapse;
+    border-spacing: 0;
+}

package/theme/_z-layers.scss

@@ -0,0 +1,10 @@
+$far-below: -100;
+$below: -10;
+$under: -5;
+$normal: 0;
+$over: 5;
+$above: 10;
+$popup: 100;
+$overlay: 200;
+$modal: 300;
+$alert: 400;