tiny-essentials 1.29.1 → 1.29.2

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

@@ -0,0 +1,392 @@
+// =============================================================================
+// Tone mixins
+//
+// Shared emitters for the per-tone plugin partials. Every mixin takes the
+// `--ui-*` token suffix (e.g. `pink`) and assumes the `-rgb` companion exists.
+//
+// Two layers live here:
+//
+//   1. Property emitters — `tone-ink`, `tone-list-group`, `tone-table`.
+//      They only declare custom properties and must be called from a selector
+//      the caller owns.
+//   2. Class emitters — `tone-badge`, `tone-alert`, `tone-utilities`, ...
+//      They own their selector and are safe to call at the root.
+//
+// `tone-plugin` wires every class emitter for a single tone.
+//
+// Depends on `triplet()` and `channels()` from `_tokens.scss`. Both are only
+// resolved when a mixin is *called*, so the import order in `_theme.scss`
+// (mixins first, `tokens` later, plugins last) is safe.
+// =============================================================================
+
+@use 'sass:map';
+
+// =============================================================================
+// 1. Property emitters
+// =============================================================================
+
+/// Re-points every text token a component may read to the readable
+/// foreground of the current tone.
+///
+/// @param {String} $on - `--ui-on-*` suffix, without the prefix.
+@mixin tone-ink($on) {
+  --tone-ink: var(--ui-on-#{$on});
+  --tone-ink-soft: color-mix(in srgb, var(--ui-on-#{$on}) 78%, transparent);
+
+  color: color-mix(in srgb, var(--tone-ink) calc(var(--bs-bg-opacity, 1) * 100%), var(--ui-text));
+
+  --bs-body-color: var(--tone-ink);
+  --bs-emphasis-color: var(--tone-ink);
+  --bs-heading-color: var(--tone-ink);
+  --bs-secondary-color: var(--tone-ink-soft);
+  --bs-tertiary-color: var(--tone-ink-soft);
+  --bs-card-color: var(--tone-ink);
+  --bs-card-cap-color: var(--tone-ink);
+  --bs-list-group-color: var(--tone-ink);
+  --bs-border-color: color-mix(in srgb, var(--tone-ink) 28%, transparent);
+}
+
+/// Emits the full Bootstrap 5.3 list-group variable set for a tone.
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+@mixin tone-list-group($tone) {
+  --bs-list-group-color: var(--ui-#{$tone});
+  --bs-list-group-bg: rgb(var(--ui-#{$tone}-rgb) / 0.08);
+  --bs-list-group-border-color: rgb(var(--ui-#{$tone}-rgb) / 0.24);
+
+  --bs-list-group-action-color: var(--ui-#{$tone});
+  --bs-list-group-action-hover-color: var(--ui-#{$tone});
+  --bs-list-group-action-hover-bg: rgb(var(--ui-#{$tone}-rgb) / 0.14);
+  --bs-list-group-action-active-color: var(--ui-#{$tone});
+  --bs-list-group-action-active-bg: rgb(var(--ui-#{$tone}-rgb) / 0.2);
+
+  --bs-list-group-active-color: var(--ui-on-#{$tone});
+  --bs-list-group-active-bg: var(--ui-#{$tone});
+  --bs-list-group-active-border-color: var(--ui-#{$tone});
+
+  --bs-list-group-disabled-color: color-mix(in srgb, var(--ui-#{$tone}) 55%, transparent);
+  --bs-list-group-disabled-bg: rgb(var(--ui-#{$tone}-rgb) / 0.06);
+}
+
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+@mixin tone-list-group-active($tone) {
+  color: var(--ui-on-#{$tone});
+  background-color: var(--ui-#{$tone});
+}
+
+/// Emits the full Bootstrap 5.3 table variable set for a tone.
+/// @param {String} $tone - Token suffix, without the `--ui-` prefix.
+@mixin tone-table($tone) {
+  --bs-table-color: var(--ui-#{$tone});
+  --bs-table-header-color: var(--ui-#{$tone});
+  --bs-table-bg: color-mix(in srgb, var(--ui-#{$tone}) 12%, var(--ui-canvas));
+  --bs-table-border-color: color-mix(in srgb, var(--ui-#{$tone}) 32%, var(--ui-canvas));
+
+  --bs-table-striped-color: var(--ui-#{$tone});
+  --bs-table-striped-bg: color-mix(in srgb, var(--ui-#{$tone}) 18%, var(--ui-canvas));
+
+  --bs-table-active-color: var(--ui-#{$tone});
+  --bs-table-active-bg: color-mix(in srgb, var(--ui-#{$tone}) 24%, var(--ui-canvas));
+
+  --bs-table-hover-color: var(--ui-#{$tone});
+  --bs-table-hover-bg: color-mix(in srgb, var(--ui-#{$tone}) 20%, var(--ui-canvas));
+
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+/// Animated underline shared by every nav item.
+///
+/// @param {String} $pseudo - Pseudo-element that draws the line.
+///   `.dropdown-toggle` must use `before`, because Bootstrap owns its `after`
+///   (the caret).
+@mixin nav-underline($pseudo: 'after') {
+  &::#{$pseudo} {
+    position: absolute;
+    bottom: 0rem;
+    left: 0;
+    width: 0;
+    height: 1px;
+    content: '';
+    background: var(--ui-accent);
+    transition: width var(--ui-duration) var(--ui-ease);
+  }
+
+  &:hover::#{$pseudo},
+  &.active::#{$pseudo} {
+    width: 100%;
+  }
+}
+
+// =============================================================================
+// 2. Class emitters
+// =============================================================================
+
+/// Emits the `--ui-*` / `--bs-*` custom properties for a single tone.
+///
+/// @param {String} $name - Tone name, used as the class suffix.
+/// @param {Map} $tokens - `base`, `on`, `emphasis`, `subtle-bg`, `subtle-border`.
+@mixin tone-tokens($name, $tokens) {
+  @each $key in ('base', 'on', 'emphasis', 'subtle-bg', 'subtle-border') {
+    @if not map.has-key($tokens, $key) {
+      @error 'Tone `#{$name}` is missing the `#{$key}` token.';
+    }
+  }
+
+  $base: map.get($tokens, 'base');
+
+  --ui-#{$name}: #{$base};
+  --ui-#{$name}-rgb: #{triplet($base)};
+  --ui-on-#{$name}: #{map.get($tokens, 'on')};
+
+  --bs-#{$name}: #{$base};
+  --bs-#{$name}-rgb: #{channels($base)};
+  --bs-#{$name}-text-emphasis: #{map.get($tokens, 'emphasis')};
+  --bs-#{$name}-bg-subtle: #{map.get($tokens, 'subtle-bg')};
+  --bs-#{$name}-border-subtle: #{map.get($tokens, 'subtle-border')};
+}
+
+/// Emits the three button variants for a tone.
+///
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-buttons($name, $tone: $name) {
+  .btn-#{$name} {
+    @include solid-variant($tone);
+  }
+
+  .btn-outline-#{$name} {
+    @include outline-variant($tone);
+  }
+
+  .btn-subtle-#{$name} {
+    @include subtle-variant($tone);
+  }
+}
+
+/// Keeps a hovered/active tone button above its siblings inside a group.
+///
+/// @param {String} $name - Class suffix, e.g. `pink`.
+@mixin tone-button-group($name) {
+  @each $prefix in ('btn', 'btn-outline', 'btn-subtle') {
+    .btn-group > .#{$prefix}-#{$name},
+    .btn-group-vertical > .#{$prefix}-#{$name} {
+      position: relative;
+    }
+
+    .btn-group > .#{$prefix}-#{$name}:hover:not(:disabled):not(.disabled),
+    .btn-group-vertical > .#{$prefix}-#{$name}:hover:not(:disabled):not(.disabled) {
+      z-index: 1;
+    }
+
+    .btn-group > .#{$prefix}-#{$name}.active,
+    .btn-group > .#{$prefix}-#{$name}:active:not(:disabled):not(.disabled),
+    .btn-group-vertical > .#{$prefix}-#{$name}.active,
+    .btn-group-vertical > .#{$prefix}-#{$name}:active:not(:disabled):not(.disabled) {
+      z-index: 2;
+    }
+  }
+
+  .btn-check:checked + .btn-#{$name} {
+    --btn-fill: color-mix(in srgb, var(--ui-#{$name}) var(--btn-press-amount), var(--btn-mix));
+  }
+
+  .btn-check:checked + .btn-outline-#{$name},
+  .btn-check:checked + .btn-subtle-#{$name} {
+    z-index: 2;
+  }
+}
+
+/// Emits the soft and floating badge skins for one tone.
+///
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin tone-badge($name, $tone: $name, $on: $tone) {
+  .badge.text-bg-#{$name} {
+    color: var(--ui-#{$tone}) !important;
+    background-color: rgb(var(--ui-#{$tone}-rgb) / 0.12) !important;
+    border-color: rgb(var(--ui-#{$tone}-rgb) / 0.32);
+  }
+
+  .badge.badge-floating.text-bg-#{$name} {
+    color: var(--ui-on-#{$on}) !important;
+    background-color: var(--ui-#{$tone}) !important;
+    border-color: transparent;
+  }
+
+  .btn .badge.text-bg-#{$name}:not(.badge-floating) {
+    color: inherit !important;
+    background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
+    border-color: color-mix(in srgb, currentColor 32%, transparent) !important;
+  }
+}
+
+/// Emits the `.text-*`, `.bg-*`, `.border-*` and `.text-bg-*` helpers.
+///
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+/// @param {String} $on - Token suffix for `--ui-on-*`.
+@mixin tone-utilities($name, $tone: $name, $on: $tone) {
+  .bg-#{$name},
+  .text-bg-#{$name} {
+    @include tone-ink($on);
+  }
+
+  .text-#{$name} {
+    color: rgba(var(--bs-#{$name}-rgb), var(--bs-text-opacity, 1)) !important;
+  }
+
+  .bg-#{$name} {
+    background-color: rgba(var(--bs-#{$name}-rgb), var(--bs-bg-opacity, 1)) !important;
+  }
+
+  .border-#{$name} {
+    border-color: rgba(var(--bs-#{$name}-rgb), var(--bs-border-opacity, 1)) !important;
+  }
+
+  .text-bg-#{$name} {
+    color: var(--tone-ink) !important;
+    background-color: rgba(var(--bs-#{$name}-rgb), var(--bs-bg-opacity, 1)) !important;
+  }
+
+  .bg-#{$name}-subtle {
+    background-color: var(--bs-#{$name}-bg-subtle) !important;
+  }
+
+  .text-#{$name}-emphasis {
+    color: var(--bs-#{$name}-text-emphasis) !important;
+  }
+
+  .border-#{$name}-subtle {
+    border-color: var(--bs-#{$name}-border-subtle) !important;
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-alert($name, $tone: $name) {
+  .alert-#{$name} {
+    --bs-alert-color: var(--ui-#{$tone});
+    --bs-alert-bg: rgb(var(--ui-#{$tone}-rgb) / 0.1);
+    --bs-alert-border-color: rgb(var(--ui-#{$tone}-rgb) / 0.28);
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-link($name, $tone: $name) {
+  .link-#{$name} {
+    color: var(--ui-#{$tone});
+
+    &:hover,
+    &:focus {
+      color: color-mix(in srgb, var(--ui-#{$tone}) 80%, var(--ui-heading));
+    }
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-progress($name, $tone: $name) {
+  .progress-bar-#{$name} {
+    --bs-progress-bar-bg: var(--ui-#{$tone});
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-ghost-button($name, $tone: $name) {
+  .btn-ghost-#{$name} {
+    --bs-btn-color: var(--ui-#{$tone});
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--ui-#{$tone});
+    --bs-btn-hover-bg: color-mix(in srgb, var(--ui-#{$tone}) 12%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--ui-#{$tone});
+    --bs-btn-active-bg: color-mix(in srgb, var(--ui-#{$tone}) 20%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--ui-#{$tone});
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-table-class($name, $tone: $name) {
+  .table-#{$name} {
+    @include tone-table($tone);
+  }
+}
+
+/// Emits a `.table-{name}` variant from a raw Sass color.
+/// @param {String} $name - Class suffix, e.g. `blue`.
+/// @param {Color} $base - Solid background color.
+@mixin tone-table-from-color($name, $base) {
+  $ink: color-contrast($base);
+  $bg: mix($base, $body-bg, 12%);
+  $border: mix($base, $body-bg, 32%);
+  $striped: mix($base, $body-bg, 18%);
+  $active: mix($base, $body-bg, 24%);
+  $hover: mix($base, $body-bg, 20%);
+
+  .table-#{$name} {
+    --bs-table-color: #{$ink};
+    --bs-table-header-color: #{$ink};
+    --bs-table-bg: #{$bg};
+    --bs-table-border-color: #{$border};
+
+    --bs-table-striped-color: #{$ink};
+    --bs-table-striped-bg: #{$striped};
+
+    --bs-table-active-color: #{$ink};
+    --bs-table-active-bg: #{$active};
+
+    --bs-table-hover-color: #{$ink};
+    --bs-table-hover-bg: #{$hover};
+
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color);
+  }
+}
+
+/// @param {String} $name - Class suffix, e.g. `pink`.
+/// @param {String} $tone - Token suffix for `--ui-*`.
+@mixin tone-list-group-class($name, $tone: $name) {
+  .list-group-item.list-group-item-#{$name} {
+    @include tone-list-group($tone);
+  }
+
+  .list-group-item.list-group-item-#{$name}.active {
+    @include tone-list-group-active($tone);
+  }
+}
+
+// =============================================================================
+// 3. Orchestrator
+// =============================================================================
+
+/// Emits every class emitter for a single tone.
+///
+/// @param {String} $name - Tone name, used as the class suffix.
+/// @param {Map} $config - `token` (required) and `on` (defaults to `$name`).
+@mixin tone-plugin($name, $config) {
+  @if not map.has-key($config, 'token') {
+    @error 'Tone `#{$name}` is missing the `token` key.';
+  }
+
+  $token: map.get($config, 'token');
+  $on: if(map.has-key($config, 'on'), map.get($config, 'on'), $token);
+
+  @include tone-buttons($name, $token);
+  @include tone-button-group($name);
+  @include tone-utilities($name, $token, $on);
+  @include tone-badge($name, $token, $on);
+  @include tone-alert($name, $token);
+  @include tone-link($name, $token);
+  @include tone-progress($name, $token);
+  @include tone-ghost-button($name, $token);
+  @include tone-table-class($name, $token);
+  @include tone-list-group-class($name, $token);
+}

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

@@ -0,0 +1,112 @@
+// =============================================================================
+// Compact typography (opt-in)
+//
+// The theme ships with Bootstrap's default 16px type scale. This file restores
+// the denser 14px scale the theme used to ship with.
+//
+// Enable: add `@import 'typography-compact';` as the last line of _theme.scss.
+//
+// For pixel parity, also uncomment the two Sass variables in _variables.scss.
+// They are compile-time values, so they cannot be restored from here.
+// =============================================================================
+
+// ------------------------------------------------------------------- scale --
+// `$font-size-base: 0.875rem` multiplied by Bootstrap's own heading ratios.
+// Kept as a map so a future scale change is a one-line edit.
+$compact-headings: (
+  'h1': 2.1875rem,
+  'h2': 1.75rem,
+  'h3': 1.53125rem,
+  'h4': 1.3125rem,
+  'h5': 1.09375rem,
+  'h6': 0.875rem,
+) !default;
+
+@each $tag, $size in $compact-headings {
+  #{$tag},
+  .#{$tag} {
+    font-size: $size;
+  }
+}
+
+// ---------------------------------------------------------------- Family --
+$font-family-sans-serif:
+  'Inter',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  sans-serif;
+$font-family-monospace: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, monospace;
+
+// -------------------------------------------------------------------- root --
+:root {
+  --bs-body-font-size: 0.875rem;
+}
+
+// -------------------------------------------------------------- components --
+.table {
+  thead th {
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+}
+
+.navbar .nav-link {
+  font-weight: 500;
+  font-size: 0.8125rem;
+}
+
+.table thead th {
+  font-size: 0.6875rem;
+}
+
+.badge {
+  font-family: $font-family-monospace;
+}
+
+.accordion {
+  .accordion-button {
+    font-weight: 500;
+    font-size: 0.8125rem;
+  }
+
+  .accordion-body {
+    font-size: 0.8125rem;
+  }
+}
+
+$btn-font-weight: 500;
+
+.btn {
+  --bs-btn-font-weight: 500;
+  --bs-btn-font-size: 0.8125rem;
+}
+
+.form-control,
+.form-select {
+  font-size: 0.8125rem;
+
+  &-sm {
+    font-size: 0.75rem;
+  }
+
+  &-lg {
+    font-size: 0.9375rem;
+  }
+}
+
+.form-label,
+.col-form-label {
+  letter-spacing: 0.04em;
+  font-size: 0.6875rem;
+}
+
+.form-text {
+  font-size: 0.6875rem;
+}
+
+@each $state in ('valid', 'invalid') {
+  .#{$state}-feedback {
+    font-size: 0.6875rem;
+  }
+}

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

@@ -0,0 +1,131 @@
+// =============================================================================
+// Optional Page background
+// Three layers: mesh gradient, technical grid, ambient orbs.
+//
+// Opt-in. Enable it in your entry point:
+//
+//   @import 'tiny-essentials/webTemplates/bootstrap/5.3/scss/themes/deepstrap/plugins/background/tiny_gradient_1';
+//   @include tiny-gb1-plugin();
+//
+// Then add the class to <body>:
+//
+//   <body class="ui-background">
+//
+// Custom selector:
+//
+//   @include tiny-gb1-plugin(('selector': '.my-background'));
+//
+// Custom colors: override the `--ui-bg-*` tokens below.
+// =============================================================================
+
+@use 'sass:map';
+
+:root,
+[data-bs-theme='dark'] {
+  --ui-orb-opacity: 1;
+  --ui-orb-blur: 48px;
+  --ui-mesh-1: 0.16;
+  --ui-mesh-2: 0.12;
+}
+
+[data-bs-theme='light'] {
+  --ui-orb-opacity: 0.5;
+  --ui-orb-blur: 64px;
+  --ui-mesh-1: 0.1;
+  --ui-mesh-2: 0.08;
+}
+
+$background-config: (
+  'selector': 'body',
+  'grid-size': 48px,
+  'grid-mask': 'radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 78%)',
+) !default;
+
+@mixin tiny-gb1-plugin($config: $background-config) {
+  $selector: map.get($config, 'selector');
+  $grid-size: map.get($config, 'grid-size');
+  $grid-mask: map.get($config, 'grid-mask');
+
+  #{$selector} {
+    position: relative;
+    min-height: 100vh;
+    background-color: var(--ui-bg-canvas);
+    background-image:
+      radial-gradient(
+        70rem 50rem at 8% -14%,
+        rgb(var(--ui-bg-mesh-1) / var(--ui-bg-mesh-1-alpha)),
+        transparent 60%
+      ),
+      radial-gradient(
+        60rem 44rem at 96% -4%,
+        rgb(var(--ui-bg-mesh-2) / var(--ui-bg-mesh-2-alpha)),
+        transparent 62%
+      ),
+      radial-gradient(
+        50rem 40rem at 50% 120%,
+        rgb(var(--ui-bg-mesh-3) / var(--ui-bg-mesh-3-alpha)),
+        transparent 70%
+      );
+    background-attachment: fixed;
+  }
+
+  #{$selector}::before {
+    position: fixed;
+    inset: 0;
+    z-index: -2;
+    pointer-events: none;
+    content: '';
+    background-image:
+      linear-gradient(var(--ui-bg-grid) 1px, transparent 1px),
+      linear-gradient(90deg, var(--ui-bg-grid) 1px, transparent 1px);
+    background-size: $grid-size $grid-size;
+    mask-image: #{$grid-mask};
+  }
+
+  #{$selector}::after {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    content: '';
+    background:
+      radial-gradient(
+        28rem 28rem at 12% 8%,
+        rgb(var(--ui-bg-orb-1) / var(--ui-bg-orb-1-alpha)),
+        transparent 70%
+      ),
+      radial-gradient(
+        24rem 24rem at 88% 22%,
+        rgb(var(--ui-bg-orb-2) / var(--ui-bg-orb-2-alpha)),
+        transparent 70%
+      );
+    filter: blur(var(--ui-orb-blur));
+    opacity: var(--ui-orb-opacity);
+    transition: opacity var(--ui-duration) var(--ui-ease);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Default color tokens.
+// Override these in :root or in a scoped selector to recolor the background.
+// ---------------------------------------------------------------------------
+:root {
+  --ui-bg-canvas: var(--ui-canvas);
+
+  --ui-bg-mesh-1: var(--ui-accent-rgb);
+  --ui-bg-mesh-1-alpha: var(--ui-mesh-1);
+
+  --ui-bg-mesh-2: var(--ui-info-rgb);
+  --ui-bg-mesh-2-alpha: var(--ui-mesh-2);
+
+  --ui-bg-mesh-3: var(--ui-accent-rgb);
+  --ui-bg-mesh-3-alpha: 0.06;
+
+  --ui-bg-grid: var(--ui-grid-line);
+
+  --ui-bg-orb-1: var(--ui-accent-rgb);
+  --ui-bg-orb-1-alpha: 0.18;
+
+  --ui-bg-orb-2: var(--ui-info-rgb);
+  --ui-bg-orb-2-alpha: 0.14;
+}

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

@@ -0,0 +1,47 @@
+// =============================================================================
+// Pink plugin
+//
+// Self-contained: tokens, buttons, group states, badges, alerts, utilities.
+// Import after `buttons` in `_theme.scss`.
+// =============================================================================
+
+@use 'sass:map';
+
+// ------------------------------------------------------------------ tokens --
+$pink-tokens: (
+  'dark': (
+    'base': #ff5c9e,
+    'on': #1a0410,
+    'emphasis': #ff9ec4,
+    'subtle-bg': #2a0f1c,
+    'subtle-border': #5c2340,
+  ),
+  'light': (
+    'base': #c2185b,
+    'on': #ffffff,
+    'emphasis': #8a0f40,
+    'subtle-bg': #fce4ec,
+    'subtle-border': #f4a6c2,
+  ),
+);
+
+:root,
+[data-bs-theme='dark'] {
+  @include tone-tokens('pink', map.get($pink-tokens, 'dark'));
+}
+
+[data-bs-theme='light'] {
+  @include tone-tokens('pink', map.get($pink-tokens, 'light'));
+}
+
+// ------------------------------------------------------------------ plugin --
+@include tone-plugin(
+  'pink',
+  (
+    'token': 'pink',
+    'on': 'pink',
+  )
+);
+
+// Form controls: select, checkbox, switch and range.
+@include form-tone-plugin('pink', 'pink', 'pink', form-mark-contrast(#ff5c9e));