tiny-essentials 1.29.1 → 1.29.2

package/dist/v1/webTemplates/bootstrap/5.3/scss/themes/deepstrap/_buttons.scss

@@ -0,0 +1,390 @@
+@use 'sass:list';
+@use 'sass:map';
+
+// =============================================================================
+// 1. Configuration
+// =============================================================================
+
+/// Defaults merged into every `$button-families` entry.
+///
+/// @type Map
+/// @prop {String|null} mix      - Overrides `--btn-mix`.
+/// @prop {String|null} hover    - Overrides `--btn-hover-amount`.
+/// @prop {String|null} press    - Overrides `--btn-press-amount`.
+/// @prop {Boolean}     seam     - Draws a stronger outline edge.
+/// @prop {List}        variants - Which variants to emit.
+$button-defaults: (
+  'mix': null,
+  'hover': null,
+  'press': null,
+  'seam': false,
+  'variants': (
+    'solid',
+    'outline',
+    'subtle',
+  ),
+);
+
+/// Every button family. One entry generates up to three classes:
+///
+///   .btn-<name>          solid
+///   .btn-outline-<name>  outline
+///   .btn-subtle-<name>   subtle
+///
+/// @type Map
+$button-families: (
+  'primary': (
+    tone: 'accent',
+  ),
+  'secondary': (
+    tone: 'text-muted',
+  ),
+  'success': (
+    tone: 'success',
+  ),
+  'danger': (
+    tone: 'error',
+  ),
+  'warning': (
+    tone: 'warn',
+  ),
+  'info': (
+    tone: 'info',
+  ),
+  'light': (
+    tone: 'neutral-light',
+    mix: 'rgb(var(--ui-shade-rgb))',
+    hover: '92%',
+    press: '82%',
+    seam: true,
+  ),
+  'dark': (
+    tone: 'neutral-dark',
+    mix: 'var(--ui-neutral-light)',
+    hover: '82%',
+    press: '72%',
+    seam: true,
+  ),
+);
+
+/// Ghost module configuration. Must mirror `$button-families`.
+$ghost-tones: (
+  'primary': var(--ui-accent),
+  'secondary': var(--ui-text-muted),
+  'success': var(--ui-success),
+  'danger': var(--ui-error),
+  'warning': var(--ui-warn),
+  'info': var(--ui-info),
+  'light': var(--ui-neutral-light),
+  'dark': var(--ui-neutral-dark),
+);
+
+@use '../../components/buttons/_buttons-ghost.scss' with (
+  $tones: $ghost-tones
+);
+
+// Fail loud during development if a family is missing from the ghost map.
+@each $name, $config in $button-families {
+  @if not map.has-key($ghost-tones, $name) {
+    @warn 'Button family `#{$name}` is missing from `$ghost-tones`.';
+  }
+}
+
+// =============================================================================
+// 2. Primitives
+// =============================================================================
+
+/// Blends a theme tone into an opaque surface colour.
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+/// @param {Number} $amount - Share of the tone in the mix.
+/// @param {String} $base - CSS colour the tone is blended into.
+/// @return {String} An opaque `color-mix()` value.
+@function solid-tint($tone, $amount: 40%, $base: var(--ui-canvas)) {
+  @return color-mix(in srgb, var(--ui-#{$tone}) #{$amount}, #{$base});
+}
+
+// =============================================================================
+// 3. Variant mixins
+// =============================================================================
+
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+@mixin subtle-variant($tone) {
+  --btn-tone: var(--ui-#{$tone});
+  --btn-tone-rgb: var(--ui-#{$tone}-rgb);
+  --bs-btn-color: var(--ui-#{$tone});
+  --bs-btn-hover-color: var(--ui-#{$tone});
+  --bs-btn-active-color: var(--ui-#{$tone});
+  --bs-btn-disabled-color: var(--ui-#{$tone});
+
+  --btn-border: transparent;
+
+  --btn-group-border: color-mix(in srgb, var(--ui-#{$tone}) 40%, var(--btn-group-bg));
+
+  color: var(--ui-#{$tone});
+  background-color: rgb(var(--ui-#{$tone}-rgb) / 0.12);
+
+  border: 1px solid var(--btn-border);
+
+  &.hover-border {
+    --btn-border: #{solid-tint($tone, 40%, var(--btn-group-bg, var(--ui-canvas)))};
+  }
+
+  &:hover:not(:disabled):not(.disabled),
+  &:active:not(:disabled):not(.disabled),
+  &.active {
+    border-color: var(--btn-border);
+  }
+
+  &:hover:not(:disabled):not(.disabled) {
+    --btn-glow:
+      0 0 0 1px rgb(var(--ui-#{$tone}-rgb) / 0.25), 0 0 20px -6px rgb(var(--ui-#{$tone}-rgb) / 0.45);
+
+    background-color: rgb(var(--ui-#{$tone}-rgb) / 0.2);
+  }
+
+  &:active:not(:disabled):not(.disabled) {
+    background-color: rgb(var(--ui-#{$tone}-rgb) / 0.28);
+  }
+}
+
+/// Emits a solid variant.
+///
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+@mixin solid-variant($tone) {
+  --btn-tone: var(--ui-#{$tone});
+  --btn-tone-rgb: var(--ui-#{$tone}-rgb);
+  --bs-btn-color: var(--ui-on-#{$tone});
+  --bs-btn-hover-color: var(--ui-on-#{$tone});
+  --bs-btn-active-color: var(--ui-on-#{$tone});
+  --bs-btn-disabled-color: var(--ui-on-#{$tone});
+
+  --bs-btn-bg: var(--ui-#{$tone});
+  --bs-btn-border-color: var(--ui-#{$tone});
+  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-#{$tone}) var(--btn-hover-amount), var(--btn-mix));
+  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
+  --bs-btn-active-bg: color-mix(
+    in srgb,
+    var(--ui-#{$tone}) var(--btn-press-amount),
+    var(--btn-mix)
+  );
+  --bs-btn-active-border-color: var(--bs-btn-active-bg);
+  --bs-btn-disabled-bg: var(--ui-#{$tone});
+  --bs-btn-disabled-border-color: var(--ui-#{$tone});
+  --bs-btn-focus-shadow-rgb: var(--ui-#{$tone}-rgb);
+
+  --btn-group-border: color-mix(in srgb, var(--ui-on-#{$tone}) 40%, var(--ui-#{$tone}));
+
+  --btn-fill: var(--ui-#{$tone});
+
+  color: var(--ui-on-#{$tone});
+  background-color: var(--btn-fill);
+  border-color: transparent !important;
+
+  &:hover:not(:disabled):not(.disabled) {
+    --btn-glow:
+      0 0 20px -4px rgb(var(--ui-#{$tone}-rgb) / 0.55),
+      0 0 40px -8px rgb(var(--ui-#{$tone}-rgb) / 0.35);
+
+    --btn-fill: color-mix(in srgb, var(--ui-#{$tone}) var(--btn-hover-amount), var(--btn-mix));
+  }
+
+  &:active:not(:disabled):not(.disabled),
+  &.active {
+    --btn-fill: color-mix(in srgb, var(--ui-#{$tone}) var(--btn-press-amount), var(--btn-mix));
+  }
+}
+
+/// Emits an outline variant.
+///
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+/// @param {Boolean} $seam - Draws a hairline ring so the button stays visible
+///   when the tone matches the page background.
+@mixin outline-variant($tone, $seam: false) {
+  --btn-tone: var(--ui-#{$tone});
+  --btn-tone-rgb: var(--ui-#{$tone}-rgb);
+  --bs-btn-color: var(--ui-#{$tone});
+  --bs-btn-hover-color: var(--ui-on-#{$tone});
+  --bs-btn-active-color: var(--ui-on-#{$tone});
+  --bs-btn-disabled-color: var(--ui-#{$tone});
+
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: var(--ui-#{$tone});
+  --bs-btn-hover-bg: var(--ui-#{$tone});
+  --bs-btn-hover-border-color: var(--ui-#{$tone});
+  --bs-btn-active-bg: color-mix(
+    in srgb,
+    var(--ui-#{$tone}) var(--btn-press-amount),
+    var(--btn-mix)
+  );
+  --bs-btn-active-border-color: var(--bs-btn-active-bg);
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: var(--ui-#{$tone});
+  --bs-btn-focus-shadow-rgb: var(--ui-#{$tone}-rgb);
+
+  --btn-group-border: color-mix(in srgb, var(--ui-#{$tone}) 40%, var(--btn-group-bg));
+
+  color: var(--ui-#{$tone});
+  background-color: transparent;
+  border-color: solid-tint($tone, 40%, var(--btn-group-bg, var(--ui-canvas)));
+
+  @if $seam {
+    border-color: solid-tint($tone, 70%, var(--btn-group-bg, var(--ui-canvas)));
+  }
+
+  &:hover:not(:disabled):not(.disabled) {
+    --btn-glow:
+      0 0 0 1px rgb(var(--ui-#{$tone}-rgb) / 0.35), 0 0 20px -4px rgb(var(--ui-#{$tone}-rgb) / 0.55);
+
+    color: var(--ui-on-#{$tone});
+    background-color: var(--ui-#{$tone});
+    border-color: var(--ui-#{$tone});
+  }
+
+  &:active:not(:disabled):not(.disabled),
+  &.active {
+    color: var(--ui-on-#{$tone});
+    background-color: color-mix(
+      in srgb,
+      var(--ui-#{$tone}) var(--btn-press-amount),
+      var(--btn-mix)
+    );
+    border-color: transparent;
+  }
+}
+
+// =============================================================================
+// 4. Base
+// =============================================================================
+
+.btn {
+  --bs-btn-border-radius: var(--bs-border-radius-sm);
+  --bs-btn-disabled-opacity: 0.4;
+  --btn-tone: var(--ui-accent);
+  --btn-tone-rgb: var(--ui-accent-rgb);
+  --btn-glow: none;
+
+  --btn-mix: var(--ui-btn-mix);
+  --btn-hover-amount: 76%;
+  --btn-press-amount: 68%;
+
+  border: 1px solid var(--bs-btn-border-color, transparent);
+  transition:
+    background-color var(--ui-duration) var(--ui-ease),
+    border-color var(--ui-duration) var(--ui-ease),
+    color var(--ui-duration) var(--ui-ease),
+    box-shadow var(--ui-duration) var(--ui-ease);
+
+  .badge {
+    transition:
+      color var(--ui-duration) var(--ui-ease),
+      background-color var(--ui-duration) var(--ui-ease),
+      border-color var(--ui-duration) var(--ui-ease);
+  }
+
+  &:active:not(:disabled):not(.disabled) {
+    transition-duration: 60ms;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--btn-tone);
+    outline-offset: 2px;
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+  }
+}
+
+// =============================================================================
+// 5. Generator
+// =============================================================================
+
+/// Emits the `--btn-*` overrides for a single family.
+///
+/// @param {Map} $config - Merged `$button-families` entry.
+@mixin button-overrides($config) {
+  $mix: map.get($config, 'mix');
+  $hover: map.get($config, 'hover');
+  $press: map.get($config, 'press');
+
+  @if $mix != null {
+    --btn-mix: #{$mix};
+  }
+
+  @if $hover != null {
+    --btn-hover-amount: #{$hover};
+  }
+
+  @if $press != null {
+    --btn-press-amount: #{$press};
+  }
+}
+
+/// Emits the variants for a single family.
+///
+/// @param {String} $name - Class suffix, e.g. `primary`.
+/// @param {Map} $config - Entry from `$button-families`.
+@mixin button-family($name, $config) {
+  $config: map.merge($button-defaults, $config);
+  $tone: map.get($config, 'tone');
+  $seam: map.get($config, 'seam');
+  $variants: map.get($config, 'variants');
+
+  @if list.index($variants, 'solid') {
+    .btn-#{$name} {
+      @include solid-variant($tone);
+      @include button-overrides($config);
+    }
+  }
+
+  @if list.index($variants, 'outline') {
+    .btn-outline-#{$name} {
+      @include outline-variant($tone, $seam: $seam);
+      @include button-overrides($config);
+    }
+  }
+
+  @if list.index($variants, 'subtle') {
+    .btn-subtle-#{$name} {
+      @include subtle-variant($tone);
+      @include button-overrides($config);
+    }
+  }
+}
+
+@each $name, $config in $button-families {
+  @include button-family($name, $config);
+}
+
+// =============================================================================
+// 6. Utilities
+// =============================================================================
+
+.btn-lighting {
+  &:hover:not(:disabled):not(.disabled) {
+    box-shadow: var(--btn-glow);
+  }
+}
+
+.btn-group,
+.btn-group-vertical {
+  --btn-group-bg: var(--ui-canvas);
+
+  > .btn {
+    position: relative;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  > .btn:hover:not(:disabled):not(.disabled),
+  > .btn:focus-visible:not(:disabled):not(.disabled) {
+    z-index: 1;
+  }
+
+  > .btn.active,
+  > .btn:active:not(:disabled):not(.disabled),
+  > .btn-check:checked + .btn {
+    z-index: 2;
+  }
+}

package/dist/v1/webTemplates/bootstrap/5.3/scss/themes/deepstrap/_colors.scss

@@ -0,0 +1,213 @@
+@use 'sass:map';
+@use 'sass:string';
+
+// ---------------------------------------------------------------- 1. palette --
+/// Raw colours. Keys describe the hue, never the role.
+$palette: (
+  // Neutral ramp, dark end.
+  'slate-950': #0b0e14,
+  'slate-900': #10141d,
+  'slate-850': #151a25,
+  'slate-800': #1c2230,
+  'slate-700': #2a3243,
+  'slate-600': #3b4557,
+  'slate-400': #6b7688,
+  'slate-200': #b6bfce,
+  'slate-050': #e8ecf3,
+
+  // Neutral ramp, light end.
+  'paper-000': #ffffff,
+  'paper-050': #f7f9fd,
+  'paper-100': #f4f6fb,
+  'paper-200': #dde3ee,
+  'paper-300': #c3ccdd,
+  'ink-000': #000000,
+  'ink-900': #0d1220,
+  'ink-700': #3a4459,
+
+  // Accents.
+  'indigo-700': #3f5fe0,
+  'indigo-600': #5c7bf5,
+  'indigo-500': #6c8cff,
+  'indigo-400': #8aa2ff,
+  'green-500': #3ddc97,
+  'green-700': #0f8f5f,
+  'red-500': #ff6b81,
+  'red-700': #cf2445,
+  'amber-500': #ffc46b,
+  'amber-700': #a56200,
+  'cyan-500': #5fd3f3,
+  'cyan-700': #0a7fa5,
+
+  // Foreground inks. Sit on top of a filled tone; never used as a background.
+  'on-accent': #080b11,
+  'on-success': #04140d,
+  'on-error': #1a0308,
+  'on-warn': #1a1200,
+  'on-info': #04141a,
+
+  // Cool dark used by the light theme so shadows do not read as grey.
+  'shadow-slate': #1e293b
+) !default;
+
+/// Returns a raw colour from the palette.
+///
+/// @param {String} $key - Palette key, e.g. `slate-900`.
+/// @returns {Color} The raw colour value.
+@function palette($key) {
+  @if not map.has-key($palette, $key) {
+    @error 'Unknown palette key: #{$key}';
+  }
+
+  @return map.get($palette, $key);
+}
+
+// ---------------------------------------------------------------- 2. themes --
+$theme-dark: (
+  'canvas': palette('slate-950'),
+  'surface': palette('slate-900'),
+  'surface-raised': palette('slate-850'),
+  'input': palette('slate-800'),
+  'border': palette('slate-700'),
+  'border-strong': palette('slate-600'),
+  'text': palette('slate-200'),
+  'text-muted': palette('slate-400'),
+  'heading': palette('slate-050'),
+  'accent': palette('indigo-500'),
+  'accent-soft': palette('indigo-400'),
+  'success': palette('green-500'),
+  'error': palette('red-500'),
+  'warn': palette('amber-500'),
+  'info': palette('cyan-500'),
+) !default;
+
+$theme-light: (
+  'canvas': palette('paper-100'),
+  'surface': palette('paper-000'),
+  'surface-raised': palette('paper-050'),
+  'input': palette('paper-000'),
+  'border': palette('paper-200'),
+  'border-strong': palette('paper-300'),
+  'text': palette('ink-700'),
+  'text-muted': palette('slate-400'),
+  'heading': palette('ink-900'),
+  'accent': palette('indigo-700'),
+  'accent-soft': palette('indigo-600'),
+  'success': palette('green-700'),
+  'error': palette('red-700'),
+  'warn': palette('amber-700'),
+  'info': palette('cyan-700'),
+) !default;
+
+// ------------------------------------------------------------ 3. foreground --
+$on-dark: (
+  'accent': palette('on-accent'),
+  'success': palette('on-success'),
+  'error': palette('on-error'),
+  'warn': palette('on-warn'),
+  'info': palette('on-info'),
+  'text-muted': palette('paper-000'),
+) !default;
+
+$on-light: (
+  'accent': palette('paper-000'),
+  'success': palette('paper-000'),
+  'error': palette('paper-000'),
+  'warn': palette('paper-000'),
+  'info': palette('paper-000'),
+  'text-muted': palette('paper-000'),
+) !default;
+
+$subtle-tokens: (
+  'primary': 'accent',
+  'secondary': 'text-muted',
+  'success': 'success',
+  'danger': 'error',
+  'warning': 'warn',
+  'info': 'info',
+) !default;
+
+// ------------------------------------------------------------- 4. constants --
+$constants: (
+  // Backdrop behind modals.
+  'scrim': #05070b,
+  // Chevron inside `.form-select` and `.accordion-button`.
+  'control-icon': palette('slate-400'),
+  'control-icon-active': palette('indigo-500'),
+  // Active carousel indicator.
+  'carousel-indicator': palette('indigo-500')
+) !default;
+
+$shadow: (
+  'dark': palette('ink-000'),
+  'light': palette('shadow-slate'),
+) !default;
+
+$scrims: (
+  'dark': (
+    'base': palette('ink-000'),
+    'caption': palette('paper-000'),
+    'indicator': palette('paper-000'),
+    'ink': palette('paper-000'),
+  ),
+  'light': (
+    'base': palette('paper-000'),
+    'caption': theme-color('text', 'light'),
+    'indicator': palette('slate-950'),
+    'ink': palette('ink-000'),
+  ),
+) !default;
+
+/// @param {String} $theme - `dark` or `light`.
+/// @param {String} $role - `base`, `caption`, `indicator` or `ink`.
+/// @returns {Color} The scrim colour.
+@function scrim($theme, $role) {
+  $map: map.get($scrims, $theme);
+
+  @if not map.has-key($map, $role) {
+    @error 'Unknown scrim role: #{$role}';
+  }
+
+  @return map.get($map, $role);
+}
+
+// --------------------------------------------------------------- accessors --
+/// @param {String} $name - Key in `$constants`.
+/// @returns {Color} The constant value.
+@function ui-color($name) {
+  @if not map.has-key($constants, $name) {
+    @error 'Unknown colour constant: #{$name}';
+  }
+
+  @return map.get($constants, $name);
+}
+
+$_themes: (
+  'dark': $theme-dark,
+  'light': $theme-light,
+);
+
+/// @param {String} $role - Semantic role, e.g. `canvas`.
+/// @param {String} $theme - `dark` or `light`.
+/// @returns {Color} The role colour for the given theme.
+@function theme-color($role, $theme: 'dark') {
+  @if not map.has-key($_themes, $theme) {
+    @error 'Unknown theme: #{$theme}';
+  }
+
+  $map: map.get($_themes, $theme);
+
+  @if not map.has-key($map, $role) {
+    @error 'Unknown colour role: #{$role}';
+  }
+
+  @return map.get($map, $role);
+}
+
+/// URL-encoded hex, for inline SVG data URIs.
+///
+/// @param {String} $name - Key in `$constants`.
+/// @returns {String} `%23rrggbb`.
+@function svg-color($name) {
+  @return '%23' + string.slice('#{ui-color($name)}', 2);
+}