tiny-essentials 1.29.1 → 1.29.2

package/dist/v1/webTemplates/bootstrap/5.3/scss/components/buttons/_buttons-contrast.scss

@@ -0,0 +1,208 @@
+// =============================================================================
+// Contrast aliases
+//
+// `.X-contrast` and `.X-contrast-inverse` are not new variants: they are
+// aliases for the `light` and `dark` tones of their own component, swapped by
+// theme. They must stay a perfect mirror of those classes, so they use
+// `@extend` instead of re-declaring the mixin.
+//
+// Requires: every component below must be imported before this file.
+// `@extend` needs the target selector to already exist.
+// =============================================================================
+
+// ------------------------------------------------------------------ buttons --
+$contrast-button-families: ('', 'outline-', 'subtle-', 'ghost-');
+
+@each $family in $contrast-button-families {
+  .btn-#{$family}contrast {
+    @extend .btn-#{$family}light !optional;
+  }
+
+  [data-bs-theme='light'] .btn-#{$family}contrast {
+    @extend .btn-#{$family}dark !optional;
+  }
+
+  .btn-#{$family}contrast-inverse {
+    @extend .btn-#{$family}dark !optional;
+  }
+
+  [data-bs-theme='light'] .btn-#{$family}contrast-inverse {
+    @extend .btn-#{$family}light !optional;
+  }
+}
+
+// ------------------------------------------------------------------- alerts --
+.alert-contrast {
+  @extend .alert-light !optional;
+}
+
+[data-bs-theme='light'] .alert-contrast {
+  @extend .alert-dark !optional;
+}
+
+.alert-contrast-inverse {
+  @extend .alert-dark !optional;
+}
+
+[data-bs-theme='light'] .alert-contrast-inverse {
+  @extend .alert-light !optional;
+}
+
+// -------------------------------------------------------------------- links --
+.link-contrast {
+  @extend .link-light !optional;
+}
+
+[data-bs-theme='light'] .link-contrast {
+  @extend .link-dark !optional;
+}
+
+.link-contrast-inverse {
+  @extend .link-dark !optional;
+}
+
+[data-bs-theme='light'] .link-contrast-inverse {
+  @extend .link-light !optional;
+}
+
+// ------------------------------------------------------------------- tables --
+.table-contrast {
+  @extend .table-light !optional;
+}
+
+[data-bs-theme='light'] .table-contrast {
+  @extend .table-dark !optional;
+}
+
+.table-contrast-inverse {
+  @extend .table-dark !optional;
+}
+
+[data-bs-theme='light'] .table-contrast-inverse {
+  @extend .table-light !optional;
+}
+
+// -------------------------------------------------------------- list groups --
+.list-group-item-contrast {
+  @extend .list-group-item-light !optional;
+}
+
+[data-bs-theme='light'] .list-group-item-contrast {
+  @extend .list-group-item-dark !optional;
+}
+
+.list-group-item-contrast-inverse {
+  @extend .list-group-item-dark !optional;
+}
+
+[data-bs-theme='light'] .list-group-item-contrast-inverse {
+  @extend .list-group-item-light !optional;
+}
+
+// -------------------------------------------------------------------- badges --
+.badge.text-bg-contrast {
+  @extend .text-bg-light !optional;
+}
+
+[data-bs-theme='light'] .badge.text-bg-contrast {
+  @extend .text-bg-dark !optional;
+}
+
+.badge.text-bg-contrast-inverse {
+  @extend .text-bg-dark !optional;
+}
+
+[data-bs-theme='light'] .badge.text-bg-contrast-inverse {
+  @extend .text-bg-light !optional;
+}
+
+// --------------------------------------------------------------- form checks --
+.form-check-input-contrast {
+  @extend .form-check-input-light !optional;
+}
+
+[data-bs-theme='light'] .form-check-input-contrast {
+  @extend .form-check-input-dark !optional;
+}
+
+.form-check-input-contrast-inverse {
+  @extend .form-check-input-dark !optional;
+}
+
+[data-bs-theme='light'] .form-check-input-contrast-inverse {
+  @extend .form-check-input-light !optional;
+}
+
+// ------------------------------------------------------------------- base --
+@each $prefix in ('text', 'bg', 'border', 'text-bg') {
+  .#{$prefix}-contrast {
+    @extend .#{$prefix}-light !optional;
+  }
+
+  [data-bs-theme='light'] .#{$prefix}-contrast {
+    @extend .#{$prefix}-dark !optional;
+  }
+
+  .#{$prefix}-contrast-inverse {
+    @extend .#{$prefix}-dark !optional;
+  }
+
+  [data-bts-theme='light'] .#{$prefix}-contrast-inverse {
+    @extend .#{$prefix}-light !optional;
+  }
+}
+
+// ----------------------------------------------------------------- subtle --
+@each $prefix in ('bg', 'border') {
+  .#{$prefix}-contrast-subtle {
+    @extend .#{$prefix}-light-subtle !optional;
+  }
+
+  [data-bs-theme='light'] .#{$prefix}-contrast-subtle {
+    @extend .#{$prefix}-dark-subtle !optional;
+  }
+
+  .#{$prefix}-contrast-inverse-subtle {
+    @extend .#{$prefix}-dark-subtle !optional;
+  }
+
+  [data-bs-theme='light'] .#{$prefix}-contrast-inverse-subtle {
+    @extend .#{$prefix}-light-subtle !optional;
+  }
+}
+
+// --------------------------------------------------------------- emphasis --
+.text-contrast-emphasis {
+  @extend .text-light-emphasis !optional;
+}
+
+[data-bs-theme='light'] .text-contrast-emphasis {
+  @extend .text-dark-emphasis !optional;
+}
+
+.text-contrast-inverse-emphasis {
+  @extend .text-dark-emphasis !optional;
+}
+
+[data-bs-theme='light'] .text-contrast-inverse-emphasis {
+  @extend .text-light-emphasis !optional;
+}
+
+// `_bootstrap-overrides.scss` redefines `.border-*` after Bootstrap, so
+// `@extend .border-light` would only copy the last declaration. Declare the
+// contrast alias directly to stay independent of the import order.
+.border-contrast {
+  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity, 1)) !important;
+}
+
+[data-bs-theme='light'] .border-contrast {
+  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity, 1)) !important;
+}
+
+.border-contrast-inverse {
+  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity, 1)) !important;
+}
+
+[data-bs-theme='light'] .border-contrast-inverse {
+  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity, 1)) !important;
+}

package/dist/v1/webTemplates/bootstrap/5.3/scss/components/buttons/_buttons-ghost.scss

@@ -0,0 +1,89 @@
+// =============================================================================
+// Bootstrap 5.3 — Ghost button plugin
+// =============================================================================
+// A borderless, low-emphasis button variant.
+//
+// Usage:
+//   <button class="btn btn-ghost">Neutral</button>
+//   <button class="btn btn-ghost-primary">Primary</button>
+// =============================================================================
+
+@use 'sass:map';
+
+// ------------------------------------------------------------------ config --
+// Every tone is a plain CSS color or a `var(--token)`. The plugin never
+// resolves the value, so host projects can wire their own design tokens.
+$defaults: (
+  'primary': rgb(var(--bs-primary-rgb)),
+  'secondary': rgb(var(--bs-secondary-rgb)),
+  'success': rgb(var(--bs-success-rgb)),
+  'danger': rgb(var(--bs-danger-rgb)),
+  'warning': rgb(var(--bs-warning-rgb)),
+  'info': rgb(var(--bs-info-rgb)),
+  'light': rgb(var(--bs-light-rgb)),
+  'dark': rgb(var(--bs-dark-rgb)),
+) !default;
+
+// Partial overrides are merged on top of `$defaults`, so passing
+// `$tones: ('primary': red)` keeps every other tone available.
+$tones: () !default;
+$tones: map.merge($defaults, $tones);
+
+$hover-alpha: 12% !default;
+$active-alpha: 20% !default;
+$focus-alpha: 30% !default;
+$disabled-opacity: 0.4 !default;
+
+// ------------------------------------------------------------------ mixin ---
+/// Emits the CSS variables for a single ghost tone.
+///
+/// @param {Color|String} $color - Any CSS color, or `currentColor`.
+@mixin ghost-variant($color) {
+  --bs-btn-color: #{$color};
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: #{$color};
+  --bs-btn-hover-bg: color-mix(in srgb, #{$color} #{$hover-alpha}, transparent);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-color: #{$color};
+  --bs-btn-active-bg: color-mix(in srgb, #{$color} #{$active-alpha}, transparent);
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-color: #{$color};
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: transparent;
+}
+
+// ------------------------------------------------------------------ base ----
+// `--bs-btn-border-width: 0` removes the border from the layout entirely, so
+// the disabled state cannot inherit a 1px line from Bootstrap's defaults.
+.btn-ghost,
+[class*='btn-ghost-'] {
+  --bs-btn-border-width: 0;
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-border-color: transparent;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 0.25rem color-mix(in srgb, currentColor #{$focus-alpha}, transparent);
+  }
+
+  // Hard reset: no border, no ring, no shadow. Only the opacity changes.
+  &:disabled,
+  &.disabled {
+    border: 0;
+    box-shadow: none;
+    opacity: $disabled-opacity;
+  }
+}
+
+// ------------------------------------------------------------------ tones ---
+.btn-ghost {
+  @include ghost-variant(currentColor);
+}
+
+@each $name, $color in $tones {
+  .btn-ghost-#{$name} {
+    @include ghost-variant($color);
+  }
+}

package/dist/v1/webTemplates/bootstrap/5.3/scss/components/icon/_cube-icon.scss

@@ -0,0 +1,65 @@
+// =============================================================================
+// Cube Icon
+// Bootstrap 5.3 architecture: Sass modules, overridable maps, CSS variables.
+// =============================================================================
+
+@use 'sass:map';
+
+// Fallback so this partial also compiles outside a full Bootstrap build.
+// Bootstrap 5.3 already declares: $prefix: 'bs-' !default;
+$prefix: 'bs-' !default;
+
+// Size scale. Each key generates a modifier class: .cube-icon-sm, .cube-icon-lg...
+// The value is the box dimension (applied to both width and height).
+$cube-icon-sizes: (
+  xs: 1rem,
+  sm: 1.5rem,
+  md: 3rem,
+  lg: 4rem,
+  xl: 6rem,
+) !default;
+
+// Size applied by the base class. Must be a key of $cube-icon-sizes.
+$cube-icon-size: md !default;
+
+// Resolves a key from $cube-icon-sizes. Fails at compile time on typos.
+@function cube-icon-size-value($key) {
+  @if not map.has-key($cube-icon-sizes, $key) {
+    @error "Unknown cube icon size `#{$key}`. Available keys: #{map.keys($cube-icon-sizes)}.";
+  }
+
+  @return map.get($cube-icon-sizes, $key);
+}
+
+// Emits the custom property only; width/height are declared once in .cube-icon.
+@mixin cube-icon-apply-size($size) {
+  --#{$prefix}cube-icon-size: #{$size};
+}
+
+.cube-icon {
+  @include cube-icon-apply-size(cube-icon-size-value($cube-icon-size));
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}cube-icon-size);
+  height: var(--#{$prefix}cube-icon-size);
+  color: inherit;
+  line-height: 1;
+  vertical-align: middle;
+
+  > svg,
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+// Generates .cube-icon-xs, .cube-icon-sm, .cube-icon-md, .cube-icon-lg, .cube-icon-xl
+@each $key, $value in $cube-icon-sizes {
+  .cube-icon-#{$key} {
+    @include cube-icon-apply-size($value);
+  }
+}

package/dist/v1/webTemplates/bootstrap/5.3/scss/components/icon/_sphere-pulse.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+
+$defaults: (
+  'primary': var(--bs-primary-rgb),
+  'secondary': var(--bs-secondary-rgb),
+  'success': var(--bs-success-rgb),
+  'danger': var(--bs-danger-rgb),
+  'warning': var(--bs-warning-rgb),
+  'info': var(--bs-info-rgb),
+  'light': var(--bs-light-rgb),
+  'dark': var(--bs-dark-rgb),
+) !default;
+
+// Partial overrides are merged on top of `$defaults`, so passing
+// `$tones: ('primary': red)` keeps every other tone available.
+$tones: () !default;
+$tones: map.merge($defaults, $tones);
+
+@each $name, $color in $tones {
+  .sphere-pulse-#{$name} {
+    width: 9px;
+    height: 9px;
+    background: rgb($color);
+    border-radius: 50%;
+    padding: 0px 4px;
+    animation: tiny-bs-sphere-pulse 2.4s ease-in-out infinite;
+    display: inline-block;
+
+    &.shadow-pulse {
+      box-shadow: 0 0 0 4px rgba($color, 0.12);
+    }
+  }
+}
+
+@keyframes tiny-bs-sphere-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}

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

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+// ---------------------------------------------------------------- registry --
+/// Tone registry.
+/// @type Map
+$badge-tone-map: (
+  'primary': (
+    token: 'accent',
+    on: 'accent',
+  ),
+  'secondary': (
+    token: 'text-muted',
+    on: 'neutral-light',
+  ),
+  'success': (
+    token: 'success',
+    on: 'success',
+  ),
+  'danger': (
+    token: 'error',
+    on: 'error',
+  ),
+  'warning': (
+    token: 'warn',
+    on: 'warn',
+  ),
+  'info': (
+    token: 'info',
+    on: 'info',
+  ),
+  'light': (
+    token: 'neutral-light',
+    on: 'neutral-light',
+  ),
+  'dark': (
+    token: 'neutral-dark',
+    on: 'neutral-dark',
+  ),
+  'white': (
+    token: 'neutral-light',
+    on: 'neutral-light',
+  ),
+  'black': (
+    token: 'neutral-dark',
+    on: 'neutral-dark',
+  ),
+);
+
+@each $name, $config in $badge-tone-map {
+  @if meta.type-of($config) != 'map' {
+    @error 'Badge tone `#{$name}` must be a map with `token` and `on`, got `#{meta.type-of($config)}`.';
+  }
+
+  @each $key in ('token', 'on') {
+    @if not map.has-key($config, $key) {
+      @error 'Badge tone `#{$name}` is missing the `#{$key}` key.';
+    }
+  }
+}
+
+// -------------------------------------------------------------------- base --
+.badge {
+  --bs-badge-font-size: 0.6875rem;
+  --bs-badge-font-weight: 500;
+
+  letter-spacing: 0.02em;
+  border: 1px solid transparent;
+}
+
+// ------------------------------------------------------------------- tones --
+@each $name, $config in $badge-tone-map {
+  @include tone-badge($name, map.get($config, 'token'), map.get($config, 'on'));
+}
+
+// --------------------------------------------------------- surface pairing --
+@each $name, $config in $badge-tone-map {
+  .bg-#{$name},
+  .text-bg-#{$name} {
+    @include tone-ink(map.get($config, 'on'));
+  }
+}
+
+.text-bg-white {
+  background-color: var(--ui-neutral-light) !important;
+}
+
+.text-bg-black {
+  background-color: var(--ui-neutral-dark) !important;
+}