tiny-essentials 1.29.0 → 1.29.2

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

@@ -0,0 +1,161 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'colors' as *;
+
+// ------------------------------------------------------------------ helpers --
+/// @param {Color} $color - Source colour.
+/// @returns {String} Comma separated channels, for legacy `rgba()`.
+@function channels($color) {
+  @return #{color.channel($color, 'red', $space: rgb)},
+    #{color.channel($color, 'green', $space: rgb)}, #{color.channel($color, 'blue', $space: rgb)};
+}
+
+/// @param {Color} $color - Source colour.
+/// @returns {String} Space separated channels, for `rgb(var(--x) / a)`.
+@function triplet($color) {
+  @return #{color.channel($color, 'red', $space: rgb)}
+    #{color.channel($color, 'green', $space: rgb)} #{color.channel($color, 'blue', $space: rgb)};
+}
+
+@mixin theme-properties($theme) {
+  @each $name, $value in $theme {
+    --ui-#{$name}: #{$value};
+    --ui-#{$name}-rgb: #{triplet($value)};
+  }
+}
+
+$alphas: (
+  'hairline': 0.07,
+  'hairline-strong': 0.12,
+  'grid-line': 0.022,
+  'overlay-1': 0.02,
+  'overlay-2': 0.05,
+) !default;
+
+/// @param {Map} $alphas - Name to alpha map.
+@mixin alpha-properties($alphas) {
+  @each $name, $alpha in $alphas {
+    --ui-#{$name}: rgb(var(--ui-heading-rgb) / #{$alpha});
+  }
+}
+
+/// @param {String} $theme - `dark` or `light`.
+@mixin scrim-properties($theme) {
+  --ui-scrim-base: #{triplet(scrim($theme, 'base'))};
+  --ui-scrim-caption: #{scrim($theme, 'caption')};
+  --ui-scrim-indicator: #{triplet(scrim($theme, 'indicator'))};
+  --ui-scrim-ink: #{scrim($theme, 'ink')};
+}
+
+/// Bridges the active theme into Bootstrap's own custom properties.
+///
+/// @param {Map} $theme - Resolved theme map.
+@mixin bootstrap-bridge($theme) {
+  --bs-body-bg: var(--ui-canvas);
+  --bs-body-bg-rgb: #{channels(map.get($theme, 'canvas'))};
+  --bs-body-color: var(--ui-text);
+  --bs-body-color-rgb: var(--ui-text-rgb);
+  --bs-emphasis-color: var(--ui-heading);
+  --bs-emphasis-color-rgb: var(--ui-heading-rgb);
+  --bs-secondary-color: var(--ui-text-muted);
+  --bs-secondary-bg: var(--ui-surface);
+  --bs-secondary-bg-rgb: #{channels(map.get($theme, 'surface'))};
+  --bs-tertiary-bg: var(--ui-surface-raised);
+  --bs-tertiary-bg-rgb: #{channels(map.get($theme, 'surface-raised'))};
+  --bs-border-color: var(--ui-border);
+  --bs-border-color-translucent: var(--ui-hairline);
+  --bs-heading-color: var(--ui-heading);
+  --bs-link-color: var(--ui-accent);
+  --bs-link-color-rgb: var(--ui-accent-rgb);
+  --bs-link-hover-color: var(--ui-accent-soft);
+  --bs-link-hover-color-rgb: var(--ui-accent-soft-rgb);
+  --bs-link-opacity: 1;
+  --bs-link-hover-opacity: 1;
+  --bs-code-color: var(--ui-info);
+  --bs-highlight-bg: rgb(var(--ui-warn-rgb) / 0.24);
+
+  @each $name, $token in $subtle-tokens {
+    --bs-#{$name}: var(--ui-#{$token});
+    --bs-#{$name}-rgb: #{channels(map.get($theme, $token))};
+  }
+
+  --bs-light: #{palette('slate-050')};
+  --bs-light-rgb: #{channels(palette('slate-050'))};
+  --bs-dark: #{palette('slate-900')};
+  --bs-dark-rgb: #{channels(palette('slate-900'))};
+
+  @include bootstrap-subtle-bridge();
+}
+
+@mixin bootstrap-subtle-bridge() {
+  @each $name, $token in $subtle-tokens {
+    --bs-#{$name}-bg-subtle: rgb(var(--ui-#{$token}-rgb) / 0.12);
+    --bs-#{$name}-text-emphasis: var(--ui-#{$token});
+    --bs-#{$name}-border-subtle: rgb(var(--ui-#{$token}-rgb) / 0.32);
+  }
+
+  --bs-light-bg-subtle: var(--ui-surface-raised);
+  --bs-light-text-emphasis: var(--ui-heading);
+  --bs-light-border-subtle: var(--ui-border);
+
+  --bs-dark-bg-subtle: var(--ui-canvas);
+  --bs-dark-text-emphasis: var(--ui-text);
+  --bs-dark-border-subtle: var(--ui-border-strong);
+}
+
+@each $name, $token in $subtle-tokens {
+  @include tone-list-group-class($name, $token);
+}
+
+// ------------------------------------------------------------------ shared --
+:root {
+  --ui-glass-saturate: 180%;
+  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ui-duration: 160ms;
+
+  --ui-table-header-ink: var(--bs-table-color);
+  --ui-neutral-light: #{palette('slate-050')};
+  --ui-neutral-light-rgb: #{triplet(palette('slate-050'))};
+  --ui-warn-bright: #{palette('amber-500')};
+  --ui-btn-mix: #{palette('ink-900')};
+  --ui-on-neutral-light: #{palette('slate-950')};
+  --ui-neutral-dark: #{palette('slate-900')};
+  --ui-neutral-dark-rgb: #{triplet(palette('slate-900'))};
+  --ui-on-neutral-dark: #{palette('slate-050')};
+  --ui-shade-rgb: #{triplet(palette('ink-000'))};
+}
+
+// -------------------------------------------------------------------- dark --
+:root,
+[data-bs-theme='dark'] {
+  color-scheme: dark;
+
+  @include theme-properties($theme-dark);
+  @include alpha-properties($alphas);
+  @include scrim-properties('dark');
+
+  @each $name, $value in $on-dark {
+    --ui-on-#{$name}: #{$value};
+  }
+
+  --ui-shadow-rgb: #{triplet(map.get($shadow, 'dark'))};
+
+  @include bootstrap-bridge($theme-dark);
+}
+
+// ------------------------------------------------------------------- light --
+[data-bs-theme='light'] {
+  color-scheme: light;
+
+  @include theme-properties($theme-light);
+  @include alpha-properties($alphas);
+  @include scrim-properties('light');
+
+  @each $name, $value in $on-light {
+    --ui-on-#{$name}: #{$value};
+  }
+
+  --ui-shadow-rgb: #{triplet(map.get($shadow, 'light'))};
+
+  @include bootstrap-bridge($theme-light);
+}

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

@@ -0,0 +1,81 @@
+// ------------------------------------------------------------------- glass --
+.glass,
+.glass-subtle,
+.glass-strong {
+  position: relative;
+}
+
+.glass {
+  @include glass('default', 'surface');
+}
+
+.glass-subtle {
+  @include glass('subtle', 'surface');
+}
+
+.glass-strong {
+  @include glass('strong', 'surface');
+}
+
+// --------------------------------------------------------------- elevation --
+@each $level, $shadow in $elevation {
+  .elevate-#{$level} {
+    box-shadow: $shadow;
+  }
+}
+
+// ---------------------------------------------------------------- hairline --
+.hairline {
+  border: 1px solid var(--ui-hairline);
+}
+
+.hairline-top {
+  box-shadow: inset 0 1px 0 var(--ui-hairline);
+}
+
+.hairline-bottom {
+  box-shadow: inset 0 -1px 0 var(--ui-hairline);
+}
+
+// ----------------------------------------------------------------- surface --
+.surface {
+  background: rgb(var(--ui-surface-rgb) / 0.72);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--bs-border-radius);
+}
+
+.surface-raised {
+  background: rgb(var(--ui-surface-raised-rgb) / 0.72);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--bs-border-radius);
+}
+
+// -------------------------------------------------------------------- text --
+.text-gradient {
+  color: transparent;
+  background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-info));
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+// ------------------------------------------------------------------- focus --
+.ring-accent {
+  box-shadow: 0 0 0 3px rgb(var(--ui-accent-rgb) / 0.22);
+}
+
+.glow-accent {
+  box-shadow: 0 8px 32px -12px rgb(var(--ui-accent-rgb) / 0.9);
+}
+
+// ------------------------------------------------------------------ motion --
+@media (prefers-reduced-motion: reduce) {
+  .glass,
+  .glass-subtle,
+  .glass-strong {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,63 @@
+@use 'colors' as *;
+
+// ---------------------------------------------------------------- typography --
+$line-height-base: 1.5;
+
+// -------------------------------------------------------------- brand colors --
+$primary: theme-color('accent');
+$secondary: theme-color('text-muted');
+$success: theme-color('success');
+$danger: theme-color('error');
+$warning: theme-color('warn');
+$info: theme-color('info');
+$dark: palette('slate-900');
+$light: palette('slate-050');
+
+// --------------------------------------------------------------------- body --
+$enable-dark-mode: false;
+$body-bg: theme-color('canvas');
+$body-color: theme-color('text');
+$body-secondary-color: theme-color('text-muted');
+$body-emphasis-color: theme-color('heading');
+$body-tertiary-color: theme-color('text-muted');
+$border-color: theme-color('border');
+$border-color-translucent: rgba(theme-color('border'), 0.55);
+$code-color: theme-color('info');
+
+// ------------------------------------------------------------------ shapes ---
+$border-radius: 10px;
+$border-radius-sm: 6px;
+$border-radius-lg: 14px;
+
+// ------------------------------------------------------------------ inputs ---
+$input-bg: theme-color('input');
+$input-color: theme-color('text');
+$input-border-color: theme-color('border');
+$input-focus-bg: theme-color('input');
+$input-focus-color: theme-color('text');
+$input-focus-border-color: theme-color('accent');
+$input-placeholder-color: theme-color('text-muted');
+
+// ----------------------------------------------------------------- buttons ---
+$btn-focus-width: 2px;
+
+// --------------------------------------------------------------- focus ring --
+$focus-ring-color: rgba(theme-color('accent'), 0.5);
+$focus-ring-width: 2px;
+
+$colors: (
+  'blue': palette('indigo-500'),
+  'indigo': palette('indigo-500'),
+  'purple': palette('indigo-700'),
+  'pink': palette('red-500'),
+  'red': palette('red-500'),
+  'orange': palette('amber-500'),
+  'yellow': palette('amber-500'),
+  'green': palette('green-500'),
+  'teal': palette('cyan-500'),
+  'cyan': palette('cyan-500'),
+  'black': palette('ink-000'),
+  'white': palette('paper-000'),
+  'gray': palette('slate-400'),
+  'gray-dark': palette('slate-600'),
+);

package/dist/v1/webTemplates/bootstrap/5.3/scss/themes/deepstrap/plugins/_form-tone-mixins.scss

@@ -0,0 +1,236 @@
+// =============================================================================
+// Form tone mixins
+// =============================================================================
+
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:meta';
+
+/// Picks black or white for a mark drawn on top of `$background`.
+///
+/// Uses the WCAG relative luminance coefficients, so the result matches the
+/// perceived brightness instead of the naive channel average.
+///
+/// @param {Color} $background - Colour the mark is painted on.
+/// @return {Color} `#000000` or `#ffffff`.
+@function form-mark-contrast($background) {
+  @if meta.type-of($background) != 'color' {
+    @error 'Expected a colour, got `#{meta.type-of($background)}`.';
+  }
+
+  $luminance: color.channel($background, 'red', $space: rgb) * 0.2126 +
+    color.channel($background, 'green', $space: rgb) * 0.7152 +
+    color.channel($background, 'blue', $space: rgb) * 0.0722;
+
+  @return if($luminance > 140, #000000, #ffffff);
+}
+
+/// Builds the `background-image` used by a checked checkbox.
+///
+/// Accepts a colour or a hex string, so it can be fed either by a palette
+/// entry or by `form-mark-contrast()`.
+///
+/// @param {Color|String} $color - Hex colour, with or without the leading `#`.
+/// @return {String} A `url()` with the URL-encoded SVG.
+@function form-mark-url($color) {
+  $value: #{$color};
+
+  @if string.slice($value, 1, 1) != '#' {
+    @error 'Expected a hex colour, got `#{$color}`.';
+  }
+
+  $hex: string.slice($value, 2);
+
+  @if string.length($hex) != 6 {
+    @error 'Expected a 6-digit hex colour, got `#{$color}`.';
+  }
+
+  @return url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23#{$hex}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+
+/// Re-points the three `--form-*` properties to a tone.
+///
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-tone-properties($tone, $on: $tone) {
+  --form-tone: var(--ui-#{$tone});
+  --form-tone-rgb: var(--ui-#{$tone}-rgb);
+  --form-tone-on: var(--ui-on-#{$on});
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-select-tone($name, $tone: $name, $on: $tone) {
+  .form-select-#{$name} {
+    @include form-tone-properties($tone, $on);
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+/// @param {String|null} $mark - Hex colour of the checkmark. `null` keeps the
+///   Bootstrap default (white).
+@mixin form-check-tone($name, $tone: $name, $on: $tone, $mark: null) {
+  .form-check-#{$name},
+  .form-check-input-#{$name} {
+    @include form-tone-properties($tone, $on);
+  }
+
+  @if $mark != null {
+    $mark-url: form-mark-url($mark);
+
+    .form-check-#{$name}:not(.form-switch) .form-check-input:checked[type='checkbox'],
+    .form-check-input-#{$name}:checked[type='checkbox']:not(.form-switch .form-check-input) {
+      background-image: $mark-url;
+    }
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-range-tone($name, $tone: $name, $on: $tone) {
+  .form-range-#{$name} {
+    @include form-tone-properties($tone, $on);
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-control-tone($name, $tone: $name, $on: $tone) {
+  .form-control-#{$name} {
+    @include form-tone-properties($tone, $on);
+
+    border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+
+    &:hover:not(:disabled):not(:focus) {
+      border-color: color-mix(in srgb, var(--form-tone) 65%, transparent);
+    }
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-control-color-tone($name, $tone: $name, $on: $tone) {
+  .form-control-color-#{$name} {
+    @include form-tone-properties($tone, $on);
+
+    border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+
+    &::-webkit-color-swatch-wrapper {
+      border-radius: inherit;
+    }
+
+    &::-webkit-color-swatch {
+      border: 0;
+      border-radius: calc(var(--bs-border-radius-sm) - 2px);
+    }
+
+    &:hover:not(:disabled):not(:focus) {
+      border-color: color-mix(in srgb, var(--form-tone) 65%, transparent);
+    }
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-file-tone($name, $tone: $name, $on: $tone) {
+  .form-file-#{$name} {
+    @include form-tone-properties($tone, $on);
+
+    border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+
+    &::file-selector-button {
+      color: var(--form-tone);
+      background-color: rgb(var(--form-tone-rgb) / 0.12);
+      border-inline-end: 1px solid color-mix(in srgb, var(--form-tone) 45%, transparent);
+      transition: background-color var(--ui-duration) var(--ui-ease);
+    }
+
+    &:hover:not(:disabled)::file-selector-button {
+      background-color: rgb(var(--form-tone-rgb) / 0.2);
+    }
+
+    &:focus {
+      border-color: var(--form-tone);
+      box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+    }
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-input-group-tone($name, $tone: $name, $on: $tone) {
+  .input-group-#{$name} {
+    @include form-tone-properties($tone, $on);
+
+    > .input-group-text {
+      color: var(--form-tone);
+      background-color: rgb(var(--form-tone-rgb) / 0.12);
+      border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+    }
+
+    > .form-control,
+    > .form-select {
+      border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+
+      &:focus {
+        border-color: var(--form-tone);
+        box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+      }
+    }
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin form-floating-tone($name, $tone: $name, $on: $tone) {
+  .form-floating-#{$name} {
+    @include form-tone-properties($tone, $on);
+
+    > .form-control,
+    > .form-select {
+      border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+
+      &:focus {
+        border-color: var(--form-tone);
+        box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+      }
+    }
+
+    > label {
+      color: color-mix(in srgb, var(--form-tone) 70%, var(--ui-text-muted));
+    }
+
+    > .form-control:focus ~ label,
+    > .form-select:focus ~ label {
+      color: var(--form-tone);
+    }
+  }
+}
+
+/// Emits every form control variant for a single tone.
+///
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+/// @param {String|null} $mark - Hex colour of the checkmark. `null` keeps the
+///   Bootstrap default (white).
+@mixin form-tone-plugin($name, $tone: $name, $on: $tone, $mark: null) {
+  @include form-control-tone($name, $tone, $on);
+  @include form-control-color-tone($name, $tone, $on);
+  @include form-file-tone($name, $tone, $on);
+  @include form-select-tone($name, $tone, $on);
+  @include form-check-tone($name, $tone, $on, $mark);
+  @include form-range-tone($name, $tone, $on);
+  @include form-input-group-tone($name, $tone, $on);
+  @include form-floating-tone($name, $tone, $on);
+}

package/dist/v1/webTemplates/bootstrap/5.3/scss/themes/deepstrap/plugins/_sizing.scss

@@ -0,0 +1,68 @@
+// =============================================================================
+// Compact sizing (opt-in)
+//
+// Spacing, dimensions and radii only. Colours, backgrounds, animations and
+// transitions stay in the base theme: they are identity, not density.
+//
+// Enable: add `@import 'plugins/sizing-compact';` to _theme.scss.
+// =============================================================================
+
+// ------------------------------------------------------------------ navbar --
+.navbar {
+  --bs-navbar-padding-y: 0.75rem;
+}
+
+// ------------------------------------------------------------------ button --
+.btn {
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-padding-x: 0.875rem;
+}
+
+// ---------------------------------------------------------------- dropdown --
+.dropdown-menu {
+  padding: 0.3125rem;
+}
+
+// ------------------------------------------------------------------- badge --
+.badge {
+  --bs-badge-padding-y: 0.3125rem;
+  --bs-badge-padding-x: 0.5rem;
+}
+
+// ------------------------------------------------------------------- forms --
+.form-label,
+.col-form-label {
+  margin-bottom: 0.25rem;
+}
+
+.form-control-color {
+  width: 2.75rem;
+  padding: 0.25rem;
+}
+
+.form-floating > .form-control,
+.form-floating > .form-select {
+  height: calc(3rem + 2px);
+}
+
+// ---------------------------------------------------------------- carousel --
+.carousel-caption {
+  padding: 2.5rem 1.25rem 1rem;
+}
+
+.carousel-indicators [data-bs-target] {
+  width: 24px;
+  height: 3px;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  width: 3rem;
+}
+
+// ----------------------------------------------------------------- spinner --
+.spinner-border-sm,
+.spinner-grow-sm {
+  --bs-spinner-width: 0.875rem;
+  --bs-spinner-height: 0.875rem;
+}