tiny-essentials 1.29.0 → 1.29.2

package/dist/v1/webTemplates/bootstrap/5.3/scss/themes/deepstrap/_bootstrap-overrides.scss

@@ -0,0 +1,495 @@
+@use 'sass:map';
+@use 'colors' as *;
+
+// ------------------------------------------------------------------ navbar --
+.navbar {
+  --bs-navbar-color: var(--tone-ink-soft, var(--ui-text-muted));
+  --bs-navbar-hover-color: var(--tone-ink, var(--ui-heading));
+  --bs-navbar-active-color: var(--tone-ink, var(--ui-heading));
+  --bs-navbar-brand-color: var(--tone-ink, var(--ui-heading));
+  --bs-navbar-brand-hover-color: var(--tone-ink, var(--ui-heading));
+  --bs-navbar-toggler-border-color: var(--ui-border);
+
+  border-bottom: 1px solid var(--ui-hairline);
+  @include glass('default', 'surface');
+  @include hairline-top();
+
+  .nav-link {
+    position: relative;
+    transition: color var(--ui-duration) var(--ui-ease);
+
+    &:not(.dropdown-toggle) {
+      @include nav-underline('after');
+    }
+
+    &.dropdown-toggle {
+      @include nav-underline('before');
+    }
+  }
+
+  &.bg-warning {
+    background-color: var(--ui-warn-bright) !important;
+  }
+
+  .text-warning {
+    color: var(--ui-warn-bright) !important;
+  }
+}
+
+// -------------------------------------------------------------------- card --
+.card {
+  --bs-card-bg: transparent;
+  --bs-card-border-color: var(--ui-border);
+  --bs-card-color: var(--tone-ink, var(--ui-text));
+  --bs-card-cap-bg: var(--ui-overlay-1);
+  --bs-card-cap-color: var(--tone-ink, var(--ui-heading));
+  --bs-card-inner-border-color: var(--ui-hairline);
+
+  @include surface(0.86);
+}
+
+.card-header,
+.card-footer {
+  border-color: var(--ui-hairline);
+}
+
+// ---------------------------------------------------------------- dropdown --
+.dropdown-menu {
+  --bs-dropdown-bg: rgb(var(--ui-surface-rgb) / 0.98);
+  --bs-dropdown-border-color: var(--ui-border);
+  --bs-dropdown-link-color: var(--ui-text);
+  --bs-dropdown-link-hover-bg: var(--ui-overlay-2);
+  --bs-dropdown-link-hover-color: var(--ui-heading);
+  --bs-dropdown-link-active-bg: rgb(var(--ui-accent-rgb) / 0.16);
+  --bs-dropdown-link-active-color: var(--ui-heading);
+  --bs-dropdown-divider-bg: var(--ui-hairline);
+  --bs-dropdown-header-color: var(--ui-text-muted);
+
+  @include elevation(3);
+}
+
+.dropdown-item {
+  border-radius: calc(var(--bs-border-radius-sm) - 2px);
+}
+
+// ------------------------------------------------------------------- modal --
+.modal-content {
+  --bs-modal-bg: transparent;
+  --bs-modal-border-color: transparent;
+  --bs-modal-header-border-color: var(--ui-hairline);
+  --bs-modal-footer-border-color: var(--ui-hairline);
+
+  @include surface(0.98);
+}
+
+.modal-backdrop {
+  backdrop-filter: blur(4px) saturate(120%);
+  -webkit-backdrop-filter: blur(4px) saturate(120%);
+
+  &::before {
+    inset: 0;
+    content: '';
+    background-color: rgb(var(--ui-scrim-base) / 0.72);
+  }
+}
+
+// --------------------------------------------------------------- offcanvas --
+.offcanvas {
+  --bs-offcanvas-bg: var(--ui-surface);
+  --bs-offcanvas-color: var(--ui-text);
+  --bs-offcanvas-border-color: var(--ui-border);
+}
+
+// -------------------------------------------------------------------- tabs --
+.nav-tabs {
+  --bs-nav-tabs-border-color: var(--ui-border);
+  --bs-nav-link-color: var(--ui-text-muted);
+  --bs-nav-link-hover-color: var(--ui-heading);
+  --bs-nav-link-active-color: var(--ui-heading);
+
+  .nav-link {
+    border: 1px solid transparent;
+    border-bottom: 0;
+    border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
+    transition:
+      color var(--ui-duration) var(--ui-ease),
+      background-color var(--ui-duration) var(--ui-ease),
+      border-color var(--ui-duration) var(--ui-ease);
+
+    &:hover {
+      border-color: transparent;
+    }
+
+    &.active {
+      color: var(--bs-nav-link-active-color);
+      background: var(--ui-surface);
+      border-color: var(--ui-border);
+      border-bottom-color: var(--ui-surface);
+      margin-bottom: -1px;
+    }
+  }
+}
+
+.nav-pills {
+  --bs-nav-pills-link-active-bg: rgb(var(--ui-accent-rgb) / 0.16);
+  --bs-nav-pills-link-active-color: var(--ui-heading);
+
+  .nav-link {
+    border-radius: var(--bs-border-radius-sm);
+    transition: background var(--ui-duration) var(--ui-ease);
+  }
+}
+
+// ------------------------------------------------------------------- table --
+.table {
+  --bs-table-bg: transparent;
+  --bs-table-color: var(--ui-heading);
+  --bs-table-border-color: var(--ui-border);
+
+  --bs-table-striped-color: var(--ui-heading);
+  --bs-table-striped-bg: rgb(var(--ui-heading-rgb) / 0.05);
+
+  --bs-table-active-color: var(--ui-heading);
+  --bs-table-active-bg: rgb(var(--ui-heading-rgb) / 0.1);
+
+  --bs-table-hover-color: var(--ui-heading);
+  --bs-table-hover-bg: rgb(var(--ui-heading-rgb) / 0.075);
+  --bs-table-header-color: var(--ui-table-header-ink);
+
+  thead th {
+    color: var(--bs-table-header-color);
+  }
+}
+
+// ------------------------------------------------------------------ alerts --
+@each $name, $token in $subtle-tokens {
+  @include tone-alert($name, $token);
+}
+
+// ------------------------------------------------------------------- toast --
+.toast {
+  --bs-toast-bg: rgb(var(--ui-surface-rgb) / 0.98);
+  --bs-toast-border-color: var(--ui-border);
+  --bs-toast-color: var(--ui-text);
+  --bs-toast-header-color: var(--ui-heading);
+
+  @include elevation(3);
+}
+
+// --------------------------------------------------------------- accordion --
+.accordion {
+  --accordion-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
+
+  --bs-accordion-bg: transparent;
+  --bs-accordion-color: var(--ui-text);
+  --bs-accordion-border-color: var(--ui-border);
+  --bs-accordion-btn-color: var(--ui-heading);
+  --bs-accordion-btn-bg: transparent;
+  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgb(var(--ui-accent-rgb) / 0.2);
+  --bs-accordion-active-color: var(--ui-heading);
+  --bs-accordion-active-bg: var(--ui-overlay-1);
+
+  .accordion-button {
+    transition:
+      background-color var(--ui-duration) var(--ui-ease),
+      color var(--ui-duration) var(--ui-ease);
+
+    &::after {
+      background-image: none;
+      background-color: currentColor;
+      mask: var(--accordion-chevron) center / contain no-repeat;
+      -webkit-mask: var(--accordion-chevron) center / contain no-repeat;
+      transition: transform var(--ui-duration) var(--ui-ease);
+    }
+
+    &:not(.collapsed) {
+      color: var(--bs-accordion-active-color);
+      background-color: var(--bs-accordion-active-bg);
+      box-shadow: inset 0 -1px 0 var(--ui-hairline);
+    }
+  }
+
+  .accordion-body {
+    color: var(--ui-text);
+  }
+}
+
+// ---------------------------------------------------------------- overlays --
+.tooltip {
+  --bs-tooltip-bg: var(--ui-surface-raised);
+  --bs-tooltip-color: var(--ui-heading);
+}
+
+.popover {
+  --bs-popover-bg: var(--ui-surface);
+  --bs-popover-border-color: var(--ui-border);
+  --bs-popover-header-bg: var(--ui-overlay-1);
+  --bs-popover-header-color: var(--ui-heading);
+}
+
+// ---------------------------------------------------------------- progress --
+.progress,
+.progress-stacked {
+  --bs-progress-bg: color-mix(in srgb, var(--ui-border) 55%, transparent);
+}
+
+// -------------------------------------------------------------- pagination --
+.pagination {
+  --bs-pagination-bg: transparent;
+  --bs-pagination-border-color: var(--ui-border);
+  --bs-pagination-color: var(--ui-text);
+  --bs-pagination-hover-bg: var(--ui-overlay-2);
+  --bs-pagination-hover-color: var(--ui-heading);
+  --bs-pagination-hover-border-color: var(--ui-border-strong);
+  --bs-pagination-active-bg: var(--ui-accent);
+  --bs-pagination-active-border-color: var(--ui-accent);
+  --bs-pagination-disabled-bg: transparent;
+  --bs-pagination-disabled-color: var(--ui-text-muted);
+}
+
+// -------------------------------------------------------------- breadcrumb --
+.breadcrumb {
+  --bs-breadcrumb-divider-color: var(--ui-text-muted);
+  --bs-breadcrumb-item-active-color: var(--ui-heading);
+}
+
+// -------------------------------------------------------------- list-group --
+.list-group {
+  --bs-list-group-bg: transparent;
+  --bs-list-group-color: var(--ui-text);
+  --bs-list-group-border-color: var(--ui-border);
+  --bs-list-group-action-hover-bg: var(--ui-overlay-1);
+  --bs-list-group-action-hover-color: var(--ui-heading);
+  --bs-list-group-active-bg: rgb(var(--ui-accent-rgb) / 0.16);
+  --bs-list-group-active-border-color: var(--ui-accent);
+  --bs-list-group-active-color: var(--ui-heading);
+}
+
+// ---------------------------------------------------------------- surfaces --
+.bg-body {
+  background-color: var(--ui-canvas) !important;
+}
+
+.bg-body-secondary {
+  background-color: var(--ui-surface) !important;
+}
+
+.bg-body-tertiary {
+  background-color: var(--ui-surface-raised) !important;
+}
+
+.bg-body-quaternary {
+  background-color: var(--ui-input) !important;
+}
+
+// -------------------------------------------------------------------- misc --
+hr {
+  color: var(--ui-border);
+  opacity: 1;
+}
+
+::placeholder {
+  color: var(--ui-text-muted);
+  opacity: 0.65;
+}
+
+.text-muted {
+  color: var(--ui-text-muted) !important;
+}
+
+.border,
+.border-top,
+.border-bottom,
+.border-start,
+.border-end {
+  border-color: var(--ui-border) !important;
+}
+
+// ---------------------------------------------------------------- carousel --
+.carousel {
+  --carousel-caption-color: var(--ui-scrim-caption);
+  --carousel-scrim: linear-gradient(
+    180deg,
+    rgb(var(--ui-scrim-base) / 0) 0%,
+    rgb(var(--ui-scrim-base) / 0.55) 55%,
+    rgb(var(--ui-scrim-base) / 0.82) 100%
+  );
+  --carousel-code-color: color-mix(in srgb, var(--ui-info) 35%, var(--ui-scrim-ink));
+  --carousel-control-filter: none;
+  --carousel-indicator-bg: rgb(var(--ui-scrim-indicator) / 0.45);
+  --carousel-indicator-active-bg: #{ui-color('carousel-indicator')};
+
+  border-radius: var(--bs-border-radius);
+}
+
+[data-bs-theme='light'] .carousel {
+  --carousel-code-color: color-mix(in srgb, var(--ui-info) 70%, var(--ui-scrim-ink));
+  --carousel-control-filter: invert(1);
+  --carousel-indicator-bg: rgb(var(--ui-scrim-indicator) / 0.28);
+}
+
+[data-bs-theme='dark'] .carousel {
+  --carousel-control-filter: invert(0) grayscale(100);
+}
+
+.carousel-caption {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  background: var(--carousel-scrim);
+  border-radius: 0;
+
+  --bs-code-color: var(--carousel-code-color);
+}
+
+[data-bs-theme='dark'],
+[data-bs-theme='light'] {
+  .carousel,
+  &.carousel {
+    .carousel-caption {
+      color: var(--carousel-caption-color);
+    }
+  }
+}
+
+.carousel-indicators [data-bs-target] {
+  background-color: var(--carousel-indicator-bg);
+  border: 0;
+  border-radius: 999px;
+  opacity: 1;
+  transition:
+    opacity var(--ui-duration) var(--ui-ease),
+    background-color var(--ui-duration) var(--ui-ease);
+}
+
+.carousel-indicators .active {
+  background-color: var(--carousel-indicator-active-bg);
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  opacity: 0.6;
+  transition: opacity var(--ui-duration) var(--ui-ease);
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+[data-bs-theme='dark'],
+[data-bs-theme='light'] {
+  .carousel {
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+      filter: var(--carousel-control-filter);
+    }
+  }
+}
+
+.carousel .carousel-indicators [data-bs-target],
+[data-bs-theme] .carousel .carousel-indicators [data-bs-target] {
+  background-color: var(--carousel-indicator-bg);
+}
+
+.carousel .carousel-indicators .active,
+[data-bs-theme] .carousel .carousel-indicators .active {
+  background-color: var(--carousel-indicator-active-bg);
+}
+
+// --------------------------------------------------------------- spinners --
+.spinner-border,
+.spinner-grow {
+  color: var(--ui-accent);
+}
+
+.btn .spinner-border,
+.btn .spinner-grow {
+  color: inherit;
+}
+
+// ----------------------------------------------------------- placeholders --
+.placeholder {
+  background-color: var(--ui-border-strong);
+  opacity: 0.5;
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+
+// -------------------------------------------------------------- scrollspy --
+.nav-link.active[href^='#'],
+.list-group-item.active[href^='#'] {
+  color: var(--ui-heading);
+}
+
+// ----------------------------------------------------------- close button --
+.btn-close {
+  --bs-btn-close-color: var(--ui-text-muted);
+  --bs-btn-close-hover-color: var(--ui-heading);
+  --bs-btn-close-opacity: 0.6;
+  --bs-btn-close-hover-opacity: 1;
+  --bs-btn-close-focus-shadow: 0 0 0 3px rgb(var(--ui-accent-rgb) / 0.2);
+
+  transition:
+    opacity var(--ui-duration) var(--ui-ease),
+    filter var(--ui-duration) var(--ui-ease);
+
+  &:hover {
+    color: var(--ui-heading);
+  }
+}
+
+// --------------------------------------------------------------- accordion --
+.accordion {
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{svg-color('control-icon')}' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{svg-color('control-icon-active')}' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
+
+  .accordion-button {
+    transition:
+      background-color var(--ui-duration) var(--ui-ease),
+      color var(--ui-duration) var(--ui-ease);
+
+    &:not(.collapsed) {
+      box-shadow: inset 0 -1px 0 var(--ui-hairline);
+    }
+  }
+
+  .accordion-body {
+    color: var(--ui-text);
+  }
+}
+
+// ------------------------------------------------------------------ motion --
+.progress-bar {
+  transition: width 240ms var(--ui-ease);
+}
+
+.collapsing {
+  transition: height 220ms var(--ui-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar,
+  .collapsing {
+    transition: none;
+  }
+}
+
+$tone-foregrounds: map.merge(
+  $subtle-tokens,
+  (
+    'light': 'neutral-light',
+    'dark': 'neutral-dark',
+  )
+);
+
+@each $name, $token in $tone-foregrounds {
+  .border-#{$name} {
+    border-color: rgba(var(--bs-#{$name}-rgb), var(--bs-border-opacity, 1)) !important;
+  }
+}