boreal-ui 0.0.44 → 0.0.46

package/dist/types/index.next.d.ts

@@ -1,4 +1,5 @@
 export * from "./types/index";
+import "./styles/globals.scss";
 export { default as ThemeProvider, ThemeContext } from "./context/ThemeContext";
 export { registerColorScheme } from "./styles/colorSchemeRegistry";
 export { colorSchemes } from "./styles/Themes";

package/dist/types/index.next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.next.d.ts","sourceRoot":"","sources":["../../src/index.next.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.next.d.ts","sourceRoot":"","sources":["../../src/index.next.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boreal-ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "A modern, customizable React/Next.js component library",
   "author": "Davin Chiupka",
   "license": "ISC",
@@ -137,8 +137,8 @@
       "types": "./dist/types/public.types.d.ts",
       "default": "./dist/types/public.types.d.ts"
     },
-    "./core/style.css": {
-      "default": "./dist/core/style.css"
+    "./core/boreal-ui.css": {
+      "default": "./dist/core/boreal-ui.css"
     },
     "./next": {
       "import": "./dist/next/index.js",
@@ -149,8 +149,8 @@
       "types": "./dist/types/public.types.d.ts",
       "default": "./dist/types/public.types.d.ts"
     },
-    "./next/style.css": {
-      "default": "./dist/next/style.css"
+    "./next/boreal-ui.css": {
+      "default": "./dist/next/boreal-ui.css"
     },
     "./core/Accordion": {
       "import": "./dist/core/Accordion.js",

package/dist/next/style.css

@@ -1,522 +0,0 @@
-@charset "UTF-8";
-
-/**
- * ---------------------------------------------------------------------
- * globals.scss
- * ---------------------------------------------------------------------
- * Global style definitions and base theme setup for Boreal UI.
- * This file is responsible for setting:
- * 
- * 1. CSS Variables (`:root`) — Derived from SCSS theme tokens
- *    - Automatically syncs SCSS color and font variables to global CSS variables
- *    - Enables theming and dynamic runtime overrides
- *
- * 2. Global Element Styles
- *    - `body`, headings (`h1–h6`), paragraphs, links, and layout defaults
- *    - Applies font, color, spacing, and background rules using theme tokens
- *
- * 3. Scrollbar Styling
- *    - Thin scrollbar with custom thumb and track colors
- *    - Supports hiding scrollbars with `.hideScrollbar` utility
- *
- * 4. Focus Outlines
- *    - Custom `:focus` styles using accessible high-contrast outlines
- *
- * 5. Utility Classes
- *    - `.noScroll`: disables scroll overflow
- *    - `.errorMessage`: standardized error message styling
- *    - `.loadingContainer`: centered layout for loading views
- *    - `.sr_only` and `:global(.sr_only)`: accessibility class for screen-reader-only content
- *
- * 6. Mixin: `visually-hidden`
- *    - Reusable mixin for accessibility-hidden content
- *    - Applied via `.sr_only` and `:global(.sr_only)`
- *
- * Dependencies:
- * - Resets: `modern-css-reset`
- * - SCSS Modules: `theme`, `animations`, `breakpoints`
- * - Sass Color Utilities: `sass:color`
- *
- * Note:
- * All transitions use the theme-defined `$transition-default` for consistency.
- * CSS variables allow dynamic switching between light/dark/custom themes.
- */
-@import "modern-css-reset/modern-css-reset.css";
-
-/**
- * ---------------------------------------------------------------------
- * theme.scss
- * ---------------------------------------------------------------------
- * Global design tokens and theme configuration for the Boreal UI system.
- * This file defines SCSS variables, maps, and constants for:
- * - Colors (brand, background, feedback, text)
- * - Fonts (families, sizes, weights)
- * - Spacing
- * - Border radii
- * - Shadows
- * - Transitions
- * - Z-index layers
- * - Thematic color maps
- * - UI states (success, error, warning)
- * - Rounding and shadow presets
- * 
- * All variables support the `!default` flag to allow overrides via user-defined themes.
- * ---------------------------------------------------------------------
- *
- * == Color Palette ==
- * $primary-color           – Brand primary color
- * $secondary-color         – Secondary accent color
- * $tertiary-color          – Alternate accent color
- * $quaternary-color        – Alternate accent color
- * $background-color        – Main background color (dark)
- * $background-color-surface – Surface layer background (cards, modals)
- * $error-color, $success-color, $warning-color – Feedback states
- * $link-color              – Link default color
- * $link-hover-color        – Link hover state
- * $text-color, $text-color-light, $text-color-primary, $text-color-secondary – Text coloring
- *
- * == Typography ==
- * $font-family-primary / secondary – Primary typefaces
- * $font-size-xxs to $font-size-xxl – Font size scale
- * $font-weight-light to bolder     – Font weights
- *
- * == Spacing ==
- * $spacing-xxs to $spacing-xl – Margin/padding utility scale
- *
- * == Border Radius ==
- * $border-radius-xs to full  – Border rounding presets
- *
- * == Shadows ==
- * $box-shadow-light to intense – Shadow elevation levels
- * $inverted-shadows            – Shadows used on dark surfaces (e.g. modals)
- *
- * == Transitions ==
- * $transition-fast / default / slow – Standard easing transitions
- *
- * == Z-Index Layers ==
- * $z-index-drawer   – For slide-out panels
- * $z-index-modal    – For modals and overlays
- * $z-index-tooltip  – Highest layer for tooltips and floating labels
- *
- * == Theme Map ==
- * $themes: map of theme names (e.g. "primary", "secondary") to their visual styles
- *  - Each theme includes: bg, hover, text, border, text-hover
- *
- * == State Map ==
- * $states: visual styles for UI feedback states (success, error, warning)
- *
- * == Rounding / Shadow Maps ==
- * $rounding: key-value pairs for component rounding levels
- * $shadow: key-value pairs for shadow levels
- */
-
-/**
- * -----------------------------------------------------
- * _animations.scss
- * -----------------------------------------------------
- * This file contains reusable keyframe animations
- * used across the component library for transitions,
- * loaders, and visual enhancements.
- *
- * List of Animations:
- *
- * 1. fade-in
- *    - Smoothly fades in an element by transitioning opacity from 0 to 1.
- *
- * 2. slide-up
- *    - Slides an element upward into view from below while fading in.
- *
- * 3. spin-3d
- *    - Rotates an element in 3D space along both X and Y axes (360°).
- *
- * 4. spin
- *    - Continuously rotates an element clockwise in 2D space.
- *
- * 5. pulse
- *    - Gently scales an element up and down to create a pulsing effect.
- *
- * 6. fade-in-up
- *    - Combines a fade-in with a slight upward motion (used for tooltips, popups).
- *
- * 7. progress-grow
- *    - Expands the width of a progress bar from 0% to 100%.
- *
- * 8. indeterminate-move
- *    - Moves an element from left to right in a loop, used in indeterminate loaders.
- *
- * 9. skeleton-loading
- *    - Creates a sweeping shimmer effect for skeleton loaders.
- */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slide-up {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes spin-3d {
-  0% {
-    transform: rotateX(0deg) rotateY(0deg);
-  }
-
-  100% {
-    transform: rotateX(360deg) rotateY(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes fade-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes progress-grow {
-  from {
-    width: 0;
-  }
-
-  to {
-    width: 100%;
-  }
-}
-
-@keyframes indeterminate-move {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  50% {
-    transform: translateX(0);
-  }
-
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes skeleton-loading {
-  0% {
-    left: -100%;
-  }
-
-  100% {
-    left: 100%;
-  }
-}
-
-/**
- * -----------------------------------------------------
- * _breakpoints.scss
- * -----------------------------------------------------
- * These constants define the standard device-width breakpoints
- * used in responsive media queries throughout the theme.
- *
- * - $breakpoint-xs: 320px  (Extra small, portrait phones)
- * - $breakpoint-sm: 480px  (Small devices, larger phones)
- * - $breakpoint-md: 768px  (Medium devices, tablets)
- * - $breakpoint-lg: 1024px (Large devices, desktops)
- * - $breakpoint-xl: 1280px (Extra large desktops)
- * - $breakpoint-xxl: 1536px (Widescreens, large monitors)
- *
- * $breakpoints map:
- *  Use this map to loop over breakpoints or access named values.
- */
-:root {
-  /* ================================
-     PRIMARY COLOR PALETTE
-  ================================== */
-  --primary-color: #1c4d3a;
-  --primary-color-light: rgb(107.6 201.4 165.0285714286);
-  --primary-color-hover: rgb(14.4 39.6 29.8285714286);
-  --primary-text-color-contrast: rgb(0 0 0);
-
-  /* ================================a
-     SECONDARY COLOR PALETTE
-  ================================== */
-  --secondary-color: #6e502e;
-  --secondary-color-light: rgb(210.7692307692 181.9230769231 149.2307692308);
-  --secondary-color-hover: rgb(74.0384615385 53.8461538462 30.9615384615);
-  --secondary-text-color: rgb(0 0 0);
-
-  /* ================================
-     TERTIARY COLOR PALETTE
-  ================================== */
-  --tertiary-color: #092b1c;
-  --tertiary-color-light: rgb(44.9615384615 211.0384615385 137.7692307692);
-  --tertiary-color-hover: rgb(0.1730769231 0.8269230769 0.5384615385);
-  --tertiary-text-color: rgb(255 255 255);
-
-  /* ================================
-     QUATERNARY COLOR PALETTE
-  ================================== */
-  --quaternary-color: #a1733a;
-  --quaternary-color-light: rgb(231.9589041096 213.6849315068 191.0410958904);
-  --quaternary-color-hover: rgb(123.5068493151 88.2191780822 44.4931506849);
-  --quaternary-text-color: rgb(255 255 255);
-
-  /* ================================
-     FEEDBACK COLORS
-  ================================== */
-  --success-color: #51c703;
-  --success-color-hover: rgb(60.5495049505 148.7574257426 2.2425742574);
-  --warning-color: #fca505;
-  --warning-color-hover: rgb(203.557312253 132.7193675889 2.442687747);
-  --error-color: #f83838;
-  --error-color-hover: rgb(244.4029126214 8.5970873786 8.5970873786);
-  --disabled-color: rgb(184 184 184 / 86.7%);
-
-  /* ================================
-     BACKGROUND COLORS
-  ================================== */
-  --background-color: #222e2e;
-  --background-color-light: rgb(55.675 75.325 75.325);
-  --background-color-lighter: rgb(77.35 104.65 104.65);
-  --background-color-dark: rgb(12.325 16.675 16.675);
-  --background-color-darker: hsl(180deg 15% -4.3137254902%);
-
-  /* ================================
-     TEXT COLORS
-  ================================== */
-  --text-color-primary: rgb(255 255 255);
-  --text-color: rgb(255 255 255);
-  --text-color-light: hsl(0deg 0% 120%);
-  --text-color-lighter: hsl(0deg 0% 140%);
-
-  /* ================================
-     LINK COLORS
-  ================================== */
-  --link-color: #8bb0c7;
-  --link-hover-color: #627e8f;
-  --link-hover-color-primary: rgb(22.4 61.6 46.4);
-  --link-hover-color-secondary: rgb(88 64 36.8);
-
-  /* ================================
-     FOCUS & INTERACTION
-  ================================== */
-  --focus-outline-color: var(--text-color-primary);
-
-  /* ===========================
-     Border Radius (Rounding)
-  =========================== */
-  --border-radius-none: 0;
-  --border-radius-sm: 4px;
-  --border-radius-md: 8px;
-  --border-radius-lg: 16px;
-  --border-radius-full: 9999px;
-
-  /* ===========================
-     Shadows
-  =========================== */
-  --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
-  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
-  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
-  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
-
-  /* ===========================
-     Inverted Shadows (Light UI)
-  =========================== */
-  --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
-  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
-  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
-  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
-
-  /* ===========================
-     Divider & Overlay Colors
-  =========================== */
-  --divider-color: rgb(99.025 133.975 133.975); /* subtle dividers */
-  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
-  --font-family-primary: lora, arial, sans-serif;
-}
-
-body {
-  font-family: var(--font-family-primary);
-  font-size: var(--font-size-base);
-  color: var(--text-color-primary);
-  background-color: var(--background-color);
-  margin: 0;
-  padding: 0;
-  line-height: 1.5;
-  overflow-x: hidden;
-  transition:
-    background-color 0.3s ease-in-out,
-    color 0.3s ease-in-out;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: Lora, arial, sans-serif;
-  margin: 0;
-  font-weight: 700;
-  transition: color 0.3s ease-in-out;
-}
-
-h1 {
-  font-size: 32px;
-  font-weight: 900;
-  line-height: 1.2;
-}
-
-h2 {
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1.3;
-}
-
-h3 {
-  font-size: 16px;
-  line-height: 1.4;
-}
-
-h4 {
-  font-size: 18px;
-  line-height: 1.5;
-}
-
-h5,
-h6 {
-  font-size: 14px;
-  line-height: 1.6;
-  font-weight: 400;
-}
-
-h6 {
-  text-transform: uppercase;
-}
-
-p {
-  font-size: 18px;
-  line-height: 1.6;
-  font-weight: 500;
-  margin-bottom: 16px;
-}
-
-a {
-  color: var(--link-color);
-  font-weight: 700;
-  text-decoration: none;
-  transition:
-    color 0.3s ease-in-out,
-    text-decoration 0.3s ease-in-out;
-}
-
-a:hover {
-  color: var(--link-color-hover);
-  text-decoration: underline;
-}
-
-.noScroll {
-  overflow: hidden;
-}
-
-.errorMessage {
-  color: #f83838;
-  font-size: 14px;
-}
-
-.loadingContainer {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.5rem;
-}
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--primary-color) var(--background-color-light);
-}
-
-*:focus {
-  outline: 2px solid var(--focus-outline-color);
-  outline-offset: 2px;
-}
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--background-color);
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--primary-color);
-  border-radius: 6px;
-  border: 3px solid var(--background-color-light);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.hideScrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.hideScrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.sr_only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}