tiny-essentials 1.29.1 → 1.29.2

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

@@ -0,0 +1,153 @@
+// =============================================================================
+// Effect primitives
+// Glass is a spectrum: 3 named levels, each with a fallback.
+// =============================================================================
+
+@use 'sass:map';
+
+// ---------------------------------------------------------------- elevation --
+/// Two-layer shadow: contact + ambient. The colour comes from the theme so the
+/// light variant can use a slate shadow instead of pure black.
+$elevation: (
+  1: (
+    0 1px 2px rgb(var(--ui-shadow-rgb) / 0.24),
+  ),
+  2: (
+    0 1px 2px rgb(var(--ui-shadow-rgb) / 0.24),
+    0 8px 24px -16px rgb(var(--ui-shadow-rgb) / 0.72),
+  ),
+  3: (
+    0 2px 4px rgb(var(--ui-shadow-rgb) / 0.28),
+    0 16px 48px -20px rgb(var(--ui-shadow-rgb) / 0.8),
+  ),
+) !default;
+
+/// Applies a step from the elevation scale.
+///
+/// @param {Number} $level - 1, 2 or 3.
+@mixin elevation($level: 2) {
+  @if not map.has-key($elevation, $level) {
+    @error 'Unknown elevation level: #{$level}';
+  }
+
+  box-shadow: map.get($elevation, $level);
+}
+
+// -------------------------------------------------------------------- glass --
+/// Frosted surface.
+///
+/// The blur is painted on a `::before` layer, never on the element itself.
+/// `backdrop-filter` turns the element into a stacking context and a containing
+/// block for `position: fixed` / `position: absolute` descendants. Bootstrap's
+/// `.dropdown-menu` (`z-index: 1000`), `.offcanvas` and `.tooltip` all rely on
+/// escaping that box, so blurring the element directly traps them and breaks
+/// the paint order.
+///
+/// The element must be a positioning context (`relative`, `sticky` or `fixed`).
+/// `.navbar` already is; the `.glass*` utilities set it explicitly.
+///
+/// @param {String} $level - `subtle`, `default` or `strong`.
+/// @param {String} $token - Token name, without the `--ui-` prefix.
+/// @param {Boolean} $layer - `true` paints the blur on `::before` (default).
+///   Pass `false` for leaf elements such as `.modal-backdrop`, where the extra
+///   layer is dead weight.
+@mixin glass($level: 'default', $token: 'surface', $layer: true) {
+  $config: (
+    'subtle': (
+      alpha: 0.42,
+      blur: 12px,
+    ),
+    'default': (
+      alpha: 0.62,
+      blur: 20px,
+    ),
+    'strong': (
+      alpha: 0.78,
+      blur: 28px,
+    ),
+  );
+
+  @if not map.has-key($config, $level) {
+    @error 'Unknown glass level: #{$level}';
+  }
+
+  $alpha: map.get(map.get($config, $level), alpha);
+  $blur: map.get(map.get($config, $level), blur);
+
+  // Leaf element: no descendants to trap, paint in place.
+  @if not $layer {
+    background: rgb(var(--ui-#{$token}-rgb) / #{$alpha});
+    backdrop-filter: blur($blur) saturate(var(--ui-glass-saturate));
+    -webkit-backdrop-filter: blur($blur) saturate(var(--ui-glass-saturate));
+
+    @supports not (backdrop-filter: blur(1px)) {
+      background: rgb(var(--ui-#{$token}-rgb) / 0.98);
+    }
+  }
+
+  // Container: paint the blur on a pseudo-element so the element itself stays
+  // out of the stacking context / containing block business.
+  background: transparent;
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    content: '';
+    background: rgb(var(--ui-#{$token}-rgb) / #{$alpha});
+    border-radius: inherit;
+    backdrop-filter: blur($blur) saturate(var(--ui-glass-saturate));
+    -webkit-backdrop-filter: blur($blur) saturate(var(--ui-glass-saturate));
+
+    @supports not (backdrop-filter: blur(1px)) {
+      background: rgb(var(--ui-#{$token}-rgb) / 0.98);
+    }
+  }
+}
+
+// ------------------------------------------------------------------ surface --
+/// Opaque surface. Used by components that must not be transparent (modals,
+/// dropdowns) but still need the border and radius.
+///
+/// @param {Number} $alpha - Background opacity.
+@mixin surface($alpha: 0.98) {
+  background: rgb(var(--ui-surface-rgb) / #{$alpha});
+  border: 1px solid var(--ui-border);
+  border-radius: var(--bs-border-radius);
+}
+
+// ----------------------------------------------------------------- hairline --
+/// 1px light line on the top edge. Fakes a lit bevel.
+@mixin hairline-top($opacity: 1) {
+  box-shadow: inset 0 1px 0 rgb(var(--ui-heading-rgb) / #{0.06 * $opacity});
+}
+
+/// Full inner border, brighter at the top. Requires `position: relative`.
+@mixin bevel($radius: inherit) {
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+    border-radius: $radius;
+    box-shadow: inset 0 1px 0 var(--ui-hairline-strong);
+  }
+}
+
+// -------------------------------------------------------------------- focus --
+@mixin focus-ring($color: 'accent', $width: 3px) {
+  outline: none;
+  box-shadow: 0 0 0 $width rgb(var(--ui-#{$color}-rgb) / 0.24);
+}
+
+// ------------------------------------------------------------------ motion --
+@mixin transition($properties...) {
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+  transition-property: $properties;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 1ms;
+  }
+}

package/dist/v1/webTemplates/bootstrap/5.3/scss/themes/deepstrap/_forms-tones.scss

@@ -0,0 +1,69 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'colors' as *;
+
+/// @type Map
+$form-tone-map: (
+  'primary': (
+    'tone': 'accent',
+    'on': 'accent',
+    'base': palette('indigo-500'),
+  ),
+  'secondary': (
+    'tone': 'text-muted',
+    'on': 'text-muted',
+    'base': palette('slate-400'),
+  ),
+  'success': (
+    'tone': 'success',
+    'on': 'success',
+    'base': palette('green-500'),
+  ),
+  'danger': (
+    'tone': 'error',
+    'on': 'error',
+    'base': palette('red-500'),
+  ),
+  'warning': (
+    'tone': 'warn',
+    'on': 'warn',
+    'base': palette('amber-500'),
+  ),
+  'info': (
+    'tone': 'info',
+    'on': 'info',
+    'base': palette('cyan-500'),
+  ),
+  'light': (
+    'tone': 'neutral-light',
+    'on': 'neutral-light',
+    'base': palette('slate-050'),
+  ),
+  'dark': (
+    'tone': 'neutral-dark',
+    'on': 'neutral-dark',
+    'base': palette('slate-900'),
+  ),
+);
+
+@each $name, $config in $form-tone-map {
+  @if meta.type-of($config) != 'map' {
+    @error 'Form tone `#{$name}` must be a map, got `#{meta.type-of($config)}`.';
+  }
+
+  @each $key in ('tone', 'on') {
+    @if not map.has-key($config, $key) {
+      @error 'Form tone `#{$name}` is missing the `#{$key}` key.';
+    }
+  }
+
+  $mark: null;
+
+  @if map.has-key($config, 'mark') {
+    $mark: map.get($config, 'mark');
+  } @else if map.has-key($config, 'base') {
+    $mark: form-mark-contrast(map.get($config, 'base'));
+  }
+
+  @include form-tone-plugin($name, map.get($config, 'tone'), map.get($config, 'on'), $mark);
+}

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

@@ -0,0 +1,323 @@
+// =============================================================================
+// Form controls
+// =============================================================================
+
+@use 'colors' as *;
+
+// ------------------------------------------------------------- tone hooks --
+:where(.form-select, .form-check, .form-range) {
+  --form-tone: var(--ui-accent);
+  --form-tone-rgb: var(--ui-accent-rgb);
+  --form-tone-on: var(--ui-on-accent);
+}
+
+// ------------------------------------------------------------------ shared --
+%field {
+  color: var(--ui-text);
+  background-color: rgb(var(--ui-input-rgb) / 0.72);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--bs-border-radius-sm);
+  box-shadow: none;
+  transition:
+    border-color var(--ui-duration) var(--ui-ease),
+    background-color var(--ui-duration) var(--ui-ease),
+    box-shadow var(--ui-duration) var(--ui-ease);
+
+  &:hover:not(:disabled):not(:focus):not([readonly]) {
+    border-color: var(--ui-border-strong);
+  }
+
+  &::placeholder {
+    color: var(--ui-text-muted);
+    opacity: 0.65;
+  }
+
+  &:focus {
+    color: var(--ui-text);
+    background-color: rgb(var(--ui-input-rgb) / 1);
+    border-color: var(--form-tone);
+    outline: none;
+    box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+  }
+
+  &:disabled,
+  &[readonly] {
+    color: var(--ui-text-muted);
+    background-color: var(--ui-overlay-1);
+    border-color: var(--ui-border);
+    opacity: 0.7;
+  }
+
+  &::file-selector-button {
+    color: var(--ui-text);
+    background-color: var(--ui-overlay-2);
+  }
+}
+
+// ---------------------------------------------------------------- controls --
+.form-control,
+.form-select {
+  @extend %field;
+}
+
+.form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='#{svg-color('control-icon')}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
+
+// ------------------------------------------------------------ input-group --
+.input-group-text {
+  color: var(--ui-text-muted);
+  background-color: var(--ui-overlay-1);
+  border-color: var(--ui-border);
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.input-group {
+  > .form-control,
+  > .form-select,
+  > .input-group-text,
+  > .btn {
+    border-radius: var(--bs-border-radius-sm);
+  }
+
+  > :not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > :not(:first-child) {
+    margin-left: -1px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+// ------------------------------------------------------------------ labels --
+.form-label,
+.col-form-label {
+  color: var(--ui-text-muted);
+}
+
+.form-text {
+  color: var(--ui-text-muted);
+}
+
+// ------------------------------------------------------------------ checks --
+.form-check-input {
+  background-color: rgb(var(--ui-input-rgb) / 0.72);
+  border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+  transition:
+    background-color var(--ui-duration) var(--ui-ease),
+    border-color var(--ui-duration) var(--ui-ease),
+    box-shadow var(--ui-duration) var(--ui-ease);
+
+  // Unchecked + hover: previews the tone before the click.
+  &:hover:not(:disabled):not(:checked):not(:indeterminate) {
+    background-color: rgb(var(--form-tone-rgb) / 0.1);
+    border-color: color-mix(in srgb, var(--form-tone) 75%, transparent);
+  }
+
+  &:checked,
+  &:indeterminate {
+    color: var(--form-tone-on);
+    background-color: var(--form-tone);
+    border-color: var(--form-tone);
+  }
+
+  &:focus {
+    border-color: var(--form-tone);
+    box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+  }
+
+  &:disabled {
+    background-color: var(--ui-overlay-1);
+    border-color: var(--ui-border);
+    opacity: 0.5;
+  }
+}
+
+.form-check-label {
+  color: var(--ui-text);
+}
+
+.form-switch .form-check-input {
+  --form-switch-size: 1em;
+  --form-switch-inset: 0.15em;
+
+  background-color: var(--ui-input);
+  background-image: radial-gradient(circle, var(--form-tone) 0 42%, transparent 43%);
+  background-repeat: no-repeat;
+  background-position: left var(--form-switch-inset) center;
+  background-size: var(--form-switch-size) var(--form-switch-size);
+  border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+  transition:
+    background-color var(--ui-duration) var(--ui-ease),
+    border-color var(--ui-duration) var(--ui-ease);
+
+  &:checked {
+    background-color: var(--form-tone);
+    background-image: radial-gradient(circle, var(--form-tone-on) 0 42%, transparent 43%);
+    background-position: right var(--form-switch-inset) center;
+    border-color: var(--form-tone);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--form-tone) 75%, transparent);
+  }
+
+  &:active:not(:disabled) {
+    border-color: var(--form-tone);
+  }
+
+  &:focus {
+    border-color: var(--form-tone);
+    box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+  }
+}
+
+// ------------------------------------------------------------------ range --
+.form-range {
+  width: 100%;
+  height: 1.25rem;
+  padding: 0;
+  accent-color: var(--form-tone);
+  background: transparent;
+  appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    height: 4px;
+    background-color: var(--ui-input);
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px var(--ui-border);
+  }
+
+  &::-webkit-slider-thumb {
+    width: 14px;
+    height: 14px;
+    margin-top: -5px;
+    background-color: var(--form-tone);
+    border: 2px solid var(--ui-surface);
+    border-radius: 50%;
+    transition: box-shadow var(--ui-duration) var(--ui-ease);
+    appearance: none;
+  }
+
+  &::-moz-range-track {
+    height: 4px;
+    background-color: var(--form-tone);
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px var(--ui-border);
+  }
+
+  &::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background-color: var(--ui-accent);
+    border: 2px solid var(--ui-surface);
+    border-radius: 50%;
+  }
+
+  &:focus-visible {
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb {
+      box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.28);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.45;
+  }
+}
+
+// -------------------------------------------------------------- validation --
+:root,
+[data-bs-theme='dark'],
+[data-bs-theme='light'] {
+  --bs-form-valid-color: var(--ui-success);
+  --bs-form-valid-border-color: var(--ui-success);
+  --bs-form-invalid-color: var(--ui-error);
+  --bs-form-invalid-border-color: var(--ui-error);
+}
+
+@each $state, $token in ('valid': 'success', 'invalid': 'error') {
+  .#{$state}-feedback {
+    color: var(--ui-#{$token});
+  }
+
+  // Text inputs and selects.
+  .form-control,
+  .form-select {
+    &.is-#{$state},
+    .was-validated &:#{$state} {
+      background-image: none;
+      border-color: var(--ui-#{$token});
+
+      &:focus {
+        border-color: var(--ui-#{$token});
+        box-shadow: 0 0 0 3px rgb(var(--ui-#{$token}-rgb) / 0.2);
+      }
+    }
+  }
+
+  // Checkboxes, radios and switches.
+  .form-check-input {
+    &.is-#{$state},
+    .was-validated &:#{$state} {
+      --form-tone: var(--ui-#{$token});
+      --form-tone-rgb: var(--ui-#{$token}-rgb);
+      --form-tone-on: var(--ui-on-#{$token});
+
+      border-color: color-mix(in srgb, var(--form-tone) 45%, transparent);
+
+      &:hover:not(:disabled):not(:checked) {
+        background-color: rgb(var(--form-tone-rgb) / 0.1);
+        border-color: color-mix(in srgb, var(--form-tone) 75%, transparent);
+      }
+
+      &:checked,
+      &:indeterminate {
+        background-color: var(--form-tone);
+        border-color: var(--form-tone);
+      }
+
+      &:focus {
+        border-color: var(--form-tone);
+        box-shadow: 0 0 0 3px rgb(var(--form-tone-rgb) / 0.2);
+      }
+    }
+  }
+}
+
+// --------------------------------------------------------------- floating --
+.form-floating > .form-control,
+.form-floating > .form-select {
+  height: calc(3rem + 2px);
+}
+
+.form-floating > label {
+  color: var(--ui-text-muted);
+}
+
+// ------------------------------------------------------------------- file --
+.form-control::-webkit-file-upload-button {
+  color: var(--ui-text);
+  background-color: var(--ui-overlay-2);
+  border-color: var(--ui-border);
+}
+
+// ------------------------------------------------------------------ close --
+.btn-close {
+  filter: var(--ui-close-filter, none);
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgb(var(--ui-accent-rgb) / 0.2);
+  }
+}
+
+[data-bs-theme='dark'] .btn-close {
+  --ui-close-filter: invert(1) grayscale(1) brightness(1.6);
+}

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

@@ -0,0 +1,31 @@
+::selection {
+  color: var(--ui-heading);
+  background: rgb(var(--ui-accent-rgb) / 0.32);
+}
+
+// Global scrollbar.
+* {
+  scrollbar-color: var(--ui-border-strong) transparent;
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--ui-border-strong);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--ui-text-muted);
+  background-clip: padding-box;
+}

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

@@ -0,0 +1,47 @@
+// =============================================================================
+// Links
+// =============================================================================
+
+a:not(
+  :where(
+    .btn,
+    .nav-link,
+    .dropdown-item,
+    .page-link,
+    .navbar-brand,
+    .list-group-item,
+    .accordion-button,
+    .btn-close
+  )
+) {
+  color: var(--ui-accent);
+  text-decoration: none;
+  text-underline-offset: 0.2em;
+  transition: color var(--ui-duration) var(--ui-ease);
+
+  &:hover {
+    color: var(--ui-accent-soft);
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ui-accent);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}
+
+.alert a:not(.btn),
+.alert .alert-link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-underline-offset: 0.2em;
+  transition: text-decoration-color var(--ui-duration) var(--ui-ease);
+
+  &:hover,
+  &:focus-visible {
+    color: inherit;
+    text-decoration-color: currentColor;
+  }
+}

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

@@ -0,0 +1,25 @@
+// =============================================================================
+// Table variants
+//
+// Three sources, one mixin each:
+//
+//   1. Semantic tones  → `--ui-*` tokens, theme-aware.
+//   2. Custom tones    → `--ui-*` tokens, theme-aware.
+//   3. BS 5.3 palette → raw colors, static (matches upstream).
+// =============================================================================
+
+@use 'sass:map';
+@use 'colors' as *;
+
+// 1. Semantic tones (primary, secondary, success, danger, warning, info).
+@each $name, $token in $subtle-tokens {
+  @include tone-table-class($name, $token);
+}
+
+// 2. Custom tones.
+@include tone-table-class('pink', 'pink');
+
+// 3. Bootstrap 5.3 palette.
+@each $name, $color in $colors {
+  @include tone-table-from-color($name, $color);
+}

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

@@ -0,0 +1,21 @@
+// =============================================================================
+// Entry point — order matters, do not reorder.
+// =============================================================================
+
+@import './plugins/tone-mixins';
+@import './plugins/form-tone-mixins';
+@import 'bootstrap/scss/functions';
+@import 'variables';
+@import 'bootstrap/scss/bootstrap';
+
+@import 'tokens';
+@import 'effects';
+@import 'global';
+@import 'bootstrap-overrides';
+@import 'buttons';
+@import 'forms';
+@import 'forms-tones';
+@import 'links';
+@import 'utilities';
+@import 'badges';
+@import 'tables';