@lnpg/pkgn-sol 1.0.0-beta.0

package/src/scss/adapters/bootstrap/v5/index.scss

@@ -0,0 +1,364 @@
+/**
+ * pkgn-sol Design Foundation: Bootstrap v5 Adapter
+ *
+ * Bridges pkgn-sol foundation tokens into Bootstrap v5's Sass variable
+ * contract.
+ *
+ * This adapter intentionally maps Sol's primitive and semantic tokens onto the
+ * Bootstrap variable names expected by Bootstrap's Sass partials. It does not
+ * make Bootstrap part of Sol's core foundation, and it should not introduce
+ * application-specific or UI-kit-specific component decisions.
+ *
+ * Bootstrap remains an optional integration layer:
+ * - Sol owns the design tokens.
+ * - Bootstrap owns its Sass component implementation.
+ * - This file owns the mapping between the two.
+ *
+ * This file should stay deliberately narrow:
+ * - No Vue/application code
+ * - No Terra/internal-app components
+ * - No bespoke CRM/admin layouts
+ * - No full Sol `main` import
+ *
+ * @module
+ * @group  adapters.bootstrap.v5
+ * @access public
+ * @since  0.1.0
+ * @author LNPG Development Team
+ */
+
+@use '../../../tokens/colours' as colours;
+@use '../../../tokens/options' as options;
+@use '../../../tokens/spacing' as spacing;
+@use '../../../tokens/theme' as theme;
+@use '../../../tokens/typography' as typography;
+
+/* --------------------------------------------------------------------------
+ - Bootstrap colour primitives
+ ------------------------------------------------------------------------- */
+
+/**
+ * Neutral colour primitives.
+ *
+ * These map Bootstrap's grey scale variables onto Sol's canonical neutral
+ * palette. Bootstrap's `$gray-*` naming is preserved because these variables
+ * are part of Bootstrap's public Sass configuration contract.
+ */
+
+// scss-docs-start gray-color-variables
+$white: colours.$white !default;
+$gray-100: colours.$grey-tint-80 !default;
+$gray-200: colours.$grey-tint-60 !default;
+$gray-300: colours.$grey-tint-40 !default;
+$gray-400: colours.$grey-tint-20 !default;
+$gray-500: colours.$base-grey !default;
+$gray-600: colours.$grey-shade-20 !default;
+$gray-700: colours.$grey-shade-40 !default;
+$gray-800: colours.$grey-shade-60 !default;
+$gray-900: colours.$grey-shade-80 !default;
+$black: colours.$black !default;
+
+// scss-docs-end gray-color-variables
+
+/**
+ * Base hue primitives.
+ *
+ * These values intentionally come from Sol's primitive colour token layer.
+ * Semantic intent is applied later through Bootstrap's `$primary`,
+ * `$secondary`, `$success`, and related theme variables.
+ */
+
+// scss-docs-start color-variables
+$blue: colours.$base-blue !default;
+$indigo: colours.$base-indigo !default;
+$purple: colours.$base-purple !default;
+$pink: colours.$base-pink !default;
+$red: colours.$base-red !default;
+$orange: colours.$base-orange !default;
+$yellow: colours.$base-yellow !default;
+$green: colours.$base-green !default;
+$teal: colours.$base-teal !default;
+$cyan: colours.$base-cyan !default;
+
+// scss-docs-end color-variables
+
+/* --------------------------------------------------------------------------
+ - Bootstrap colour ramps
+ ------------------------------------------------------------------------- */
+
+/**
+ * Bootstrap colour ramp variables.
+ *
+ * Bootstrap normally derives these values with `tint-color()` and
+ * `shade-color()`. Sol already owns explicit colour ramps, so the adapter maps
+ * Bootstrap's ramp variable names directly to Sol's tokenised ramp values.
+ *
+ * This avoids recalculating Bootstrap-specific ramps and keeps colour output
+ * aligned with the Sol design foundation.
+ */
+
+// fusv-disable
+$blue-100: colours.$blue-tint-80 !default;
+$blue-200: colours.$blue-tint-60 !default;
+$blue-300: colours.$blue-tint-40 !default;
+$blue-400: colours.$blue-tint-20 !default;
+$blue-500: $blue !default;
+$blue-600: colours.$blue-shade-20 !default;
+$blue-700: colours.$blue-shade-40 !default;
+$blue-800: colours.$blue-shade-60 !default;
+$blue-900: colours.$blue-shade-80 !default;
+$indigo-100: colours.$indigo-tint-80 !default;
+$indigo-200: colours.$indigo-tint-60 !default;
+$indigo-300: colours.$indigo-tint-40 !default;
+$indigo-400: colours.$indigo-tint-20 !default;
+$indigo-500: $indigo !default;
+$indigo-600: colours.$indigo-shade-20 !default;
+$indigo-700: colours.$indigo-shade-40 !default;
+$indigo-800: colours.$indigo-shade-60 !default;
+$indigo-900: colours.$indigo-shade-80 !default;
+$purple-100: colours.$purple-tint-80 !default;
+$purple-200: colours.$purple-tint-60 !default;
+$purple-300: colours.$purple-tint-40 !default;
+$purple-400: colours.$purple-tint-20 !default;
+$purple-500: $purple !default;
+$purple-600: colours.$purple-shade-20 !default;
+$purple-700: colours.$purple-shade-40 !default;
+$purple-800: colours.$purple-shade-60 !default;
+$purple-900: colours.$purple-shade-80 !default;
+$pink-100: colours.$pink-tint-80 !default;
+$pink-200: colours.$pink-tint-60 !default;
+$pink-300: colours.$pink-tint-40 !default;
+$pink-400: colours.$pink-tint-20 !default;
+$pink-500: $pink !default;
+$pink-600: colours.$pink-shade-20 !default;
+$pink-700: colours.$pink-shade-40 !default;
+$pink-800: colours.$pink-shade-60 !default;
+$pink-900: colours.$pink-shade-80 !default;
+$red-100: colours.$red-tint-80 !default;
+$red-200: colours.$red-tint-60 !default;
+$red-300: colours.$red-tint-40 !default;
+$red-400: colours.$red-tint-20 !default;
+$red-500: $red !default;
+$red-600: colours.$red-shade-20 !default;
+$red-700: colours.$red-shade-40 !default;
+$red-800: colours.$red-shade-60 !default;
+$red-900: colours.$red-shade-80 !default;
+$orange-100: colours.$orange-tint-80 !default;
+$orange-200: colours.$orange-tint-60 !default;
+$orange-300: colours.$orange-tint-40 !default;
+$orange-400: colours.$orange-tint-20 !default;
+$orange-500: $orange !default;
+$orange-600: colours.$orange-shade-20 !default;
+$orange-700: colours.$orange-shade-40 !default;
+$orange-800: colours.$orange-shade-60 !default;
+$orange-900: colours.$orange-shade-80 !default;
+$yellow-100: colours.$yellow-tint-80 !default;
+$yellow-200: colours.$yellow-tint-60 !default;
+$yellow-300: colours.$yellow-tint-40 !default;
+$yellow-400: colours.$yellow-tint-20 !default;
+$yellow-500: $yellow !default;
+$yellow-600: colours.$yellow-shade-20 !default;
+$yellow-700: colours.$yellow-shade-40 !default;
+$yellow-800: colours.$yellow-shade-60 !default;
+$yellow-900: colours.$yellow-shade-80 !default;
+$green-100: colours.$green-tint-80 !default;
+$green-200: colours.$green-tint-60 !default;
+$green-300: colours.$green-tint-40 !default;
+$green-400: colours.$green-tint-20 !default;
+$green-500: $green !default;
+$green-600: colours.$green-shade-20 !default;
+$green-700: colours.$green-shade-40 !default;
+$green-800: colours.$green-shade-60 !default;
+$green-900: colours.$green-shade-80 !default;
+$teal-100: colours.$teal-tint-80 !default;
+$teal-200: colours.$teal-tint-60 !default;
+$teal-300: colours.$teal-tint-40 !default;
+$teal-400: colours.$teal-tint-20 !default;
+$teal-500: $teal !default;
+$teal-600: colours.$teal-shade-20 !default;
+$teal-700: colours.$teal-shade-40 !default;
+$teal-800: colours.$teal-shade-60 !default;
+$teal-900: colours.$teal-shade-80 !default;
+$cyan-100: colours.$cyan-tint-80 !default;
+$cyan-200: colours.$cyan-tint-60 !default;
+$cyan-300: colours.$cyan-tint-40 !default;
+$cyan-400: colours.$cyan-tint-20 !default;
+$cyan-500: $cyan !default;
+$cyan-600: colours.$cyan-shade-20 !default;
+$cyan-700: colours.$cyan-shade-40 !default;
+$cyan-800: colours.$cyan-shade-60 !default;
+$cyan-900: colours.$cyan-shade-80 !default;
+
+// fusv-enable
+
+/* --------------------------------------------------------------------------
+ - Bootstrap semantic theme colours
+ ------------------------------------------------------------------------- */
+
+/**
+ * Bootstrap semantic colours.
+ *
+ * These map Bootstrap's semantic colour names onto Sol's semantic theme token
+ * layer. This keeps Bootstrap components aligned with Sol's brand/theme
+ * decisions while preserving Bootstrap's expected variable names.
+ */
+
+// scss-docs-start theme-color-variables
+$primary: theme.$primary-colour !default;
+$secondary: theme.$secondary-colour !default;
+$success: theme.$success-colour !default;
+$info: theme.$info-colour !default;
+$warning: theme.$warning-colour !default;
+$danger: theme.$danger-colour !default;
+$light: theme.$light-colour !default;
+$dark: theme.$dark-colour !default;
+
+// scss-docs-end theme-color-variables
+
+/* --------------------------------------------------------------------------
+ - Bootstrap feature options
+ ------------------------------------------------------------------------- */
+
+/**
+ * Bootstrap feature flags and CSS variable prefix.
+ *
+ * The adapter keeps Bootstrap's configuration surface intact, but sources
+ * relevant defaults from Sol where appropriate.
+ */
+
+$enable-rounded: false !default;
+$enable-dark-mode: options.$dark-mode !default;
+$color-mode-type: data !default;
+$prefix: options.$sol-prefix !default;
+
+/* --------------------------------------------------------------------------
+ - Bootstrap spacing
+ ------------------------------------------------------------------------- */
+
+/**
+ * Bootstrap spacing base.
+ *
+ * Bootstrap derives its `$spacers` map from `$spacer`. Sol only maps the base
+ * spacing token here so Bootstrap can continue deriving its own spacing scale.
+ */
+
+$spacer: spacing.$base-spacing !default;
+
+/* --------------------------------------------------------------------------
+ - Bootstrap body and link defaults
+ ------------------------------------------------------------------------- */
+
+/**
+ * Body and link defaults.
+ *
+ * These values connect Bootstrap's document-level defaults to Sol's semantic
+ * theme and typography decisions.
+ */
+
+$body-color: theme.$base-font-color !default;
+$body-bg: theme.$body-bg-color !default;
+$link-color: $primary !default;
+$link-decoration: none !default;
+$paragraph-margin-bottom: typography.$base-margin-bottom !default;
+
+/* --------------------------------------------------------------------------
+ - Bootstrap typography
+ ------------------------------------------------------------------------- */
+
+/**
+ * Bootstrap base typography.
+ *
+ * Font families, weights, sizing, and line-height are mapped from Sol's
+ * typography token layer. Heading scale values remain Bootstrap-compatible and
+ * are left as the same calculated defaults.
+ */
+
+// scss-docs-start font-variables
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: typography.$base-font-family !default;
+$font-family-monospace: typography.$code-font-family !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base: typography.$base-font-size !default;
+$font-weight-lighter: typography.$lighter-font-weight !default;
+$font-weight-light: typography.$light-font-weight !default;
+$font-weight-normal: typography.$normal-font-weight !default;
+$font-weight-medium: typography.$medium-font-weight !default;
+$font-weight-semibold: typography.$semibold-font-weight !default;
+$font-weight-bold: typography.$bold-font-weight !default;
+$font-weight-bolder: typography.$bolder-font-weight !default;
+$font-weight-base: typography.$base-font-weight !default;
+$line-height-base: typography.$base-line-height !default;
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+// scss-docs-end font-variables
+
+/**
+ * Bootstrap heading typography.
+ *
+ * Heading family, weight, line-height, margin, and colour are mapped to Sol's
+ * heading typography and semantic theme tokens.
+ */
+
+// scss-docs-start headings-variables
+$headings-margin-bottom: typography.$heading-margin-bottom !default;
+$headings-font-family: typography.$heading-font-family !default;
+$headings-font-weight: typography.$heading-font-weight !default;
+$headings-line-height: typography.$heading-line-height !default;
+$headings-color: theme.$heading-font-color !default;
+
+// scss-docs-end headings-variables
+
+/* stylelint-disable no-invalid-position-at-import-rule -- Bootstrap v5 requires Sass variable overrides before its legacy @import stack. */
+
+/* --------------------------------------------------------------------------
+ - Bootstrap import stack
+ ------------------------------------------------------------------------- */
+
+/**
+ * Bootstrap partial import stack.
+ *
+ * Bootstrap v5 still exposes its Sass implementation through `@import`.
+ * Sol maps its design tokens onto Bootstrap variables before this stack so
+ * Bootstrap can consume those values while compiling.
+ *
+ * These imports intentionally appear after variable declarations. That is the
+ * Bootstrap Sass configuration model and is why the Stylelint import-position
+ * rule is disabled for this section only.
+ *
+ * This adapter intentionally imports only the Bootstrap layers currently
+ * required by Sol's Bootstrap integration: root variables, reboot, type,
+ * helpers, and utilities.
+ */
+
+@import 'bootstrap/scss/mixins/banner';
+@include bsBanner('');
+
+// scss-docs-start import-stack
+// Configuration
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';
+
+// Layout & components
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+
+// Helpers
+@import 'bootstrap/scss/helpers';
+
+// Utilities
+@import 'bootstrap/scss/utilities/api';
+
+// scss-docs-end import-stack
+
+/* stylelint-enable no-invalid-position-at-import-rule */

package/src/scss/core.scss

@@ -0,0 +1,53 @@
+/**
+ * pkgn-sol Design Foundation: Core Entry Point
+ *
+ * Primary SCSS entry point for the pkgn-sol design foundation.
+ *
+ * This file composes the baseline layers that make up the "core" output:
+ * 1) Font faces (asset declarations)
+ * 2) Root scope (future CSS variables)
+ * 3) Reboot (global baseline/reset)
+ *
+ * IMPORTANT:
+ * - This file is intentionally composition-only.
+ * - It must not define selectors, variables, mixins, or functions.
+ * - Import order matters and is part of the public contract of the build.
+ *
+ * Current state:
+ * - Values are hard-coded in downstream layers temporarily.
+ * - Tokens/CSS variables will be wired in later without changing structure.
+ *
+ * @module
+ * @group  core
+ * @access public
+ * @since  0.1.0
+ * @author LNPG Development Team
+ */
+
+/* ----------------------------------------------------------------------------
+ - Composition
+ --------------------------------------------------------------------------- */
+
+/**
+ * Font-face declarations.
+ *
+ * Must be loaded first so any font-family usage in later layers can resolve
+ * to declared faces once we wire generation to maps/tokens.
+ */
+@use './font-face';
+
+/**
+ * Root scope.
+ *
+ * Placeholder for CSS variable emission. Kept separate to preserve ordering
+ * and allow future expansion without touching reboot rules.
+ */
+@use './root';
+
+/**
+ * Reboot / baseline.
+ *
+ * Global reset and baseline defaults. Must load after root so variables can
+ * be referenced here later (once tokenised).
+ */
+@use './reboot';