@dialpad/dialtone 7.18.1 → 7.20.0

package/lib/dist/css/dialtone.css

@@ -645,7 +645,7 @@ body {
   --banner-color-background: var(--bgc-secondary);
   --banner-color-text: var(--fc-primary);
   --notice-color-icon: var(--toast-color-text);
-  --banner-color-border: hsla(var(--black-900-hsl) / 0.1);
+  --banner-color-border: var(--bc-subtle);
   --banner-font-size: var(--fs-200);
   --banner-line-height: var(--lh-200);
   --banner-dialog-padding-y: var(--space-400);
@@ -699,30 +699,30 @@ body {
   align-items: baseline;
 }
 .d-banner.d-banner--important {
-  --banner-color-background: var(--bgc-contrast);
-  --banner-color-text: var(--black-100);
-  --notice-color-icon: var(--black-100);
+  --banner-color-background: var(--bgc-strong);
+  --banner-color-text: var(--fc-primary-inverted);
+  --notice-color-icon: var(--fc-primary-inverted);
   --banner-color-border: transparent;
 }
 .d-banner--error {
   --banner-color-background: var(--bgc-critical);
 }
 .d-banner--error.d-banner--important {
-  --banner-color-background: var(--red-400);
+  --banner-color-background: var(--bgc-critical-strong);
   --banner-color-text: var(--fc-primary-inverted);
 }
 .d-banner--info {
   --banner-color-background: var(--bgc-info);
 }
 .d-banner--info.d-banner--important {
-  --banner-color-background: var(--blue-400);
+  --banner-color-background: var(--bgc-info-strong);
   --banner-color-text: var(--fc-primary-inverted);
 }
 .d-banner--success {
   --banner-color-background: var(--bgc-success);
 }
 .d-banner--success.d-banner--important {
-  --banner-color-background: var(--green-400);
+  --banner-color-background: var(--bgc-success-strong);
   --banner-color-text: var(--fc-primary-inverted);
 }
 .d-banner--warning {
@@ -1610,7 +1610,7 @@ legend .d-label {
 .d-textarea--md,
 .d-input__wrapper--md,
 .d-input__wrapper {
-  --input-color-border: hsla(var(--black-900-hsl) / 0.09);
+  --input-color-border: var(--bc-subtle);
   --input-color-background: hsla(var(--black-900-hsl) / 0.03);
   --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
   --input-color-text: var(--fc-secondary);
@@ -1671,8 +1671,8 @@ legend .d-label {
 .d-input__wrapper--md:focus-within,
 .d-input__wrapper:focus-within {
   --input-color-background: hsla(var(--black-900-hsl) / 0.01);
-  --input-color-border: var(--color-focus-ring) !important;
-  box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
+  --input-color-border: var(--bc-focus) !important;
+  box-shadow: 0 0 0 var(--size-100) var(--input-color-border) inset;
 }
 .d-input[disabled],
 .d-input--md[disabled],
@@ -1883,15 +1883,15 @@ legend .d-label {
 }
 .d-input--warning,
 .d-textarea--warning {
-  --input-color-border: var(--gold-400) !important;
+  --input-color-border: var(--bc-warning) !important;
 }
 .d-input--error,
 .d-textarea--error {
-  --input-color-border: var(--red-300) !important;
+  --input-color-border: var(--bc-critical) !important;
 }
 .d-input--success,
 .d-textarea--success {
-  --input-color-border: var(--green-400) !important;
+  --input-color-border: var(--bc-success) !important;
 }
 .d-input-icon {
   --input-icon-size: var(--size-500);
@@ -1979,11 +1979,11 @@ legend .d-label {
 }
 .d-link--danger {
   --link-color-default: var(--fc-critical);
-  --link-color-default-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
+  --link-color-default-hover: var(--fc-critical-strong);
 }
 .d-link--success {
   --link-color-default: var(--fc-success);
-  --link-color-default-hover: var(--green-500);
+  --link-color-default-hover: var(--fc-success-strong);
 }
 .d-link--muted {
   --link-color-default: var(--fc-secondary);
@@ -2048,7 +2048,7 @@ legend .d-label {
   --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
   --modal-dialog-padding: var(--space-600);
   --modal-dialog-color-background: var(--bgc-primary);
-  --modal-dialog-color-border: hsla(var(--black-900-hsl) / 0.1);
+  --modal-dialog-color-border: var(--bc-subtle);
   --modal-dialog-color-text: var(--fc-tertiary);
   --modal-header-color-text: var(--fc-secondary);
   --modal-dialog-shadow: var(--bs-card);
@@ -2328,8 +2328,8 @@ legend .d-label {
   margin-left: var(--space-600);
 }
 .d-toast.d-toast--important {
-  --toast-color-background: var(--bgc-contrast);
-  --toast-color-text: var(--black-100);
+  --toast-color-background: var(--bgc-strong);
+  --toast-color-text: var(--fc-primary-inverted);
   --notice-color-icon: var(--toast-color-text);
 }
 .d-toast--error {
@@ -2343,14 +2343,14 @@ legend .d-label {
   --toast-color-background: var(--bgc-info);
 }
 .d-toast--info.d-toast--important {
-  --toast-color-background: var(--blue-400);
+  --toast-color-background: var(--bgc-info-strong);
   --toast-color-text: var(--fc-primary-inverted);
 }
 .d-toast--success {
   --toast-color-background: var(--bgc-success);
 }
 .d-toast--success.d-toast--important {
-  --toast-color-background: var(--green-400);
+  --toast-color-background: var(--bgc-success-strong);
   --toast-color-text: var(--fc-primary-inverted);
 }
 .d-toast--warning {
@@ -2442,8 +2442,8 @@ legend .d-label {
   font-size: var(--fs-100);
 }
 .d-notice.d-notice--important {
-  --notice-color-background: var(--bgc-contrast);
-  --notice-color-text: var(--black-100);
+  --notice-color-background: var(--bgc-strong);
+  --notice-color-text: var(--fc-primary-inverted);
   --notice-color-shadow: transparent;
   --notice-color-icon: var(--fc-primary-inverted);
 }
@@ -2462,7 +2462,7 @@ legend .d-label {
 .d-notice--error.d-toast--important,
 .d-banner--error.d-toast--important,
 .d-toast--error.d-toast--important {
-  --notice-color-background: var(--red-400);
+  --notice-color-background: var(--bgc-critical-strong);
   --notice-color-text: var(--fc-primary-inverted);
 }
 .d-notice--info,
@@ -2480,7 +2480,7 @@ legend .d-label {
 .d-notice--info.d-toast--important,
 .d-banner--info.d-toast--important,
 .d-toast--info.d-toast--important {
-  --notice-color-background: var(--blue-400);
+  --notice-color-background: var(--bgc-info-strong);
   --notice-color-text: var(--fc-primary-inverted);
 }
 .d-notice--success,
@@ -2498,7 +2498,7 @@ legend .d-label {
 .d-notice--success.d-toast--important,
 .d-banner--success.d-toast--important,
 .d-toast--success.d-toast--important {
-  --notice-color-background: var(--green-400);
+  --notice-color-background: var(--bgc-success-strong);
   --notice-color-text: var(--fc-primary-inverted);
 }
 .d-notice--warning,
@@ -2524,10 +2524,10 @@ legend .d-label {
   --popover-color-background: var(--bgc-secondary);
   --popover-border-width: var(--size-100);
   --popover-border-radius: var(--size-400);
-  --popover-color-border: hsla(var(--black-900-hsl) / 0.1);
+  --popover-color-border: var(--bc-subtle);
   --popover-shadow: var(--bs-card);
   display: grid;
-  grid-template-rows: 1fr;
+  grid-template-rows: min-content 1fr min-content;
   overflow: auto;
   background-color: var(--popover-color-background);
   background-clip: padding-box;
@@ -2545,6 +2545,7 @@ legend .d-label {
   z-index: var(--zi-modal-element);
 }
 .d-popover__content {
+  grid-row: 2;
   overflow: auto;
 }
 .d-popover__header,
@@ -2561,9 +2562,11 @@ legend .d-label {
   font-size: var(--fs-200);
 }
 .d-popover__header {
+  grid-row: 1;
   border-bottom: var(--popover-border-width) solid var(--popover-color-border);
 }
 .d-popover__footer {
+  grid-row: 3;
   border-top: var(--popover-border-width) solid var(--popover-color-border);
 }
 .d-checkbox,
@@ -2771,7 +2774,7 @@ legend .d-label {
 .d-select__input {
   --select-color-border: var(--input-color-border);
   --select-notch-padding-right: calc(var(--space-300) * 6);
-  --input-color-border: hsla(var(--black-900-hsl) / 0.09);
+  --input-color-border: var(--bc-subtle);
   --input-color-background: hsla(var(--black-900-hsl) / 0.03);
   --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
   --input-color-text: var(--fc-secondary);
@@ -2813,8 +2816,8 @@ legend .d-label {
 .d-select__input:focus,
 .d-select__input:focus-within {
   --input-color-background: hsla(var(--black-900-hsl) / 0.01);
-  --input-color-border: var(--color-focus-ring) !important;
-  box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
+  --input-color-border: var(--bc-focus) !important;
+  box-shadow: 0 0 0 var(--size-100) var(--input-color-border) inset;
 }
 .d-select__input[disabled],
 .d-select__input[read-only] {
@@ -2916,13 +2919,13 @@ legend .d-label {
   --select-notch-position-right: calc(var(--size-300) * 3);
 }
 .d-select__input--success {
-  --input-color-border: var(--green-400);
+  --input-color-border: var(--bc-success);
 }
 .d-select__input--error {
-  --input-color-border: var(--red-300);
+  --input-color-border: var(--bc-critical);
 }
 .d-select__input--warning {
-  --input-color-border: var(--gold-400);
+  --input-color-border: var(--bc-warning);
 }
 .d-select--disabled::before,
 .d-select--disabled::after {
@@ -2957,7 +2960,7 @@ legend .d-label {
   }
 }
 .d-table {
-  --table-color-border: var(--black-300);
+  --table-color-border: var(--bc-default);
   --table-th-color-text: var(--fc-secondary);
   --table-td-color-text: var(--fc-tertiary);
   --table-font-size: var(--fs-200);
@@ -3011,8 +3014,8 @@ legend .d-label {
 }
 .d-table--inverted {
   --table-th-color-text: var(--fc-secondary-inverted);
-  --table-td-color-text: var(--black-400);
-  --table-color-border: var(--black-500);
+  --table-td-color-text: var(--fc-tertiary-inverted);
+  --table-color-border: var(--bc-inverted-default);
 }
 .d-table--striped tr:nth-child(even) {
   background-color: hsla(var(--bgc-bold-hsl) / 0.1);
@@ -3038,7 +3041,7 @@ legend .d-label {
   left: 0;
   z-index: var(--zi-base1);
   height: var(--size-100);
-  background-color: var(--black-400);
+  background-color: var(--bc-moderate);
   content: '';
 }
 .d-tablist--sm {
@@ -3141,7 +3144,7 @@ legend .d-label {
 }
 .d-tab--selected::after,
 .d-tab--selected:hover::after {
-  --tab-color-background: var(--purple-400);
+  --tab-color-background: var(--bc-brand);
 }
 .d-tablist--no-border .d-tab--selected::after,
 .d-tablist--no-border .d-tab--selected:hover::after {
@@ -3153,6 +3156,9 @@ legend .d-label {
 .d-tablist--inverted::after {
   background-color: hsla(var(--purple-600-hsl) / 0.5);
 }
+.d-tablist--inverted:not(.d-tablist--no-border)::after {
+  background-color: hsla(var(--white-hsl) / 0.34);
+}
 .d-tablist--inverted .d-tab {
   --tab-color-text: var(--fc-secondary-inverted);
 }
@@ -3502,7 +3508,9 @@ legend .d-label {
   border-width: var(--presence-size);
   border-radius: var(--br-circle);
 }
-.dt-leftbar-row--selected .d-presence,
+.dt-leftbar-row--selected .d-presence {
+  --presence-color-border-base: var(--theme-sidebar-selected-row-color-background);
+}
 .dt-leftbar-row__primary:hover .d-presence {
   --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
 }
@@ -6751,15 +6759,6 @@ body.theme-dark .d\:d-bgg-to-black-700 {
 .d-bgg-pattern-stripe-light {
   --bgg-pattern: var(--bgg-pattern-stripe-light) !important;
 }
-.d-bc-transparent {
-  border-color: transparent !important;
-}
-.d-bc-current {
-  border-color: currentColor !important;
-}
-.d-bc-unset {
-  border-color: unset !important;
-}
 .d-ba {
   border: var(--size-100) solid !important;
 }
@@ -6789,6 +6788,78 @@ body.theme-dark .d\:d-bgg-to-black-700 {
 .d-ba-unset {
   border: unset !important;
 }
+.d-bc-transparent {
+  border-color: transparent !important;
+}
+.d-bc-current {
+  border-color: currentColor !important;
+}
+.d-bc-unset {
+  border-color: unset !important;
+}
+.d-bc-subtle {
+  border-color: var(--bc-subtle) !important;
+}
+.d-bc-default {
+  border-color: var(--bc-default) !important;
+}
+.d-bc-moderate {
+  border-color: var(--bc-moderate) !important;
+}
+.d-bc-bold {
+  border-color: var(--bc-bold) !important;
+}
+.d-bc-inverted-subtle {
+  border-color: var(--bc-inverted-subtle) !important;
+}
+.d-bc-inverted-default {
+  border-color: var(--bc-inverted-default) !important;
+}
+.d-bc-inverted-moderate {
+  border-color: var(--bc-inverted-moderate) !important;
+}
+.d-bc-inverted-bold {
+  border-color: var(--bc-inverted-bold) !important;
+}
+.d-bc-focus {
+  border-color: var(--bc-focus) !important;
+}
+.d-bc-critical {
+  border-color: var(--bc-critical) !important;
+}
+.d-bc-critical-subtle {
+  border-color: var(--bc-critical-subtle) !important;
+}
+.d-bc-critical-strong {
+  border-color: var(--bc-critical-strong) !important;
+}
+.d-bc-success {
+  border-color: var(--bc-success) !important;
+}
+.d-bc-success-subtle {
+  border-color: var(--bc-success-subtle) !important;
+}
+.d-bc-success-strong {
+  border-color: var(--bc-success-strong) !important;
+}
+.d-bc-warning {
+  border-color: var(--bc-warning) !important;
+}
+.d-bc-warning-subtle {
+  border-color: var(--bc-warning-subtle) !important;
+}
+.d-bc-warning-strong {
+  border-color: var(--bc-warning-strong) !important;
+}
+.d-bc-brand {
+  border-color: var(--bc-brand) !important;
+}
+.d-bc-brand-subtle {
+  border-color: var(--bc-brand-subtle) !important;
+}
+.d-bc-brand-strong {
+  border-color: var(--bc-brand-strong) !important;
+}
 .d-bar0 {
   border-radius: 0 !important;
 }
@@ -10506,7 +10577,35 @@ body.theme-dark .d\:d-bgc-red-500 {
 }
 .d-fc-red-400,
 .h\:d-fc-red-400:hover,
-.f\:d-fc-red-400:focus {
+.f\:d-fc-red-400:focus,
+.d-fc-error-strong,
+.h\:d-fc-error-strong:hover,
+.f\:d-fc-error-strong:focus,
+.f\:d-fc-error-strong:focus-within,
+.fv\:d-fc-error-strong.focus-visible.js-focus-visible,
+.js-focus-visible .fv\:d-fc-error-strong.focus-visible,
+.d-fc-critical-strong,
+.h\:d-fc-critical-strong:hover,
+.f\:d-fc-critical-strong:focus,
+.f\:d-fc-critical-strong:focus-within,
+.fv\:d-fc-critical-strong.focus-visible.js-focus-visible,
+.js-focus-visible .fv\:d-fc-critical-strong.focus-visible {
+  --fco: 100%;
+  color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l)  /  var(--fco)) !important;
+}
+.d-fc-red-400,
+.h\:d-fc-red-400:hover,
+.f\:d-fc-red-400:focus,
+.d-fc-error-strong,
+.h\:d-fc-error-strong:hover,
+.f\:d-fc-error-strong:focus,
+.f\:d-fc-error-strong:focus-within,
+.fv\:d-fc-error-strong:focus-visible,
+.d-fc-critical-strong,
+.h\:d-fc-critical-strong:hover,
+.f\:d-fc-critical-strong:focus,
+.f\:d-fc-critical-strong:focus-within,
+.fv\:d-fc-critical-strong:focus-visible {
   --fco: 100%;
   color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l)  /  var(--fco)) !important;
 }
@@ -11054,7 +11153,24 @@ body.theme-dark .d\:d-bgc-green-600 {
 }
 .d-fc-green-500,
 .h\:d-fc-green-500:hover,
-.f\:d-fc-green-500:focus {
+.f\:d-fc-green-500:focus,
+.d-fc-success-strong,
+.h\:d-fc-success-strong:hover,
+.f\:d-fc-success-strong:focus,
+.f\:d-fc-success-strong:focus-within,
+.fv\:d-fc-success-strong.focus-visible.js-focus-visible,
+.js-focus-visible .fv\:d-fc-success-strong.focus-visible {
+  --fco: 100%;
+  color: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l)  /  var(--fco)) !important;
+}
+.d-fc-green-500,
+.h\:d-fc-green-500:hover,
+.f\:d-fc-green-500:focus,
+.d-fc-success-strong,
+.h\:d-fc-success-strong:hover,
+.f\:d-fc-success-strong:focus,
+.f\:d-fc-success-strong:focus-within,
+.fv\:d-fc-success-strong:focus-visible {
   --fco: 100%;
   color: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l)  /  var(--fco)) !important;
 }
@@ -13301,6 +13417,30 @@ body.theme-dark .d\:d-bgc-black-700 {
 .fv\:d-fc-unset:focus-visible {
   color: unset !important;
 }
+.d-bgc-success-subtle {
+  background-color: var(--bgc-success-subtle) !important;
+}
+.d-bgc-success-strong {
+  background-color: var(--bgc-success-strong) !important;
+}
+.d-bgc-warning-subtle {
+  background-color: var(--bgc-warning-subtle) !important;
+}
+.d-bgc-warning-strong {
+  background-color: var(--bgc-warning-strong) !important;
+}
+.d-bgc-info-subtle {
+  background-color: var(--bgc-info-subtle) !important;
+}
+.d-bgc-info-strong {
+  background-color: var(--bgc-info-strong) !important;
+}
+.d-bgc-critical-subtle {
+  background-color: var(--bgc-critical-subtle) !important;
+}
+.d-bgc-critical-strong {
+  background-color: var(--bgc-critical-strong) !important;
+}
 .d-bgc-transparent {
   background-color: transparent !important;
   background-image: none !important;
@@ -20389,11 +20529,14 @@ body {
 .d-theme-sidebar-row-bgc:hover {
   background-color: var(--theme-sidebar-row-color-background-hover) !important;
 }
-.d-theme-sidebar-row-active-fc {
-  color: var(--theme-sidebar-active-row-color) !important;
+.d-theme-sidebar-row-bgc:active {
+  background-color: var(--theme-sidebar-row-color-background-active) !important;
+}
+.d-theme-sidebar-row-selected-fc {
+  color: var(--theme-sidebar-selected-row-color) !important;
 }
-.d-theme-sidebar-row-active-bgc {
-  background-color: var(--theme-sidebar-active-row-color-background) !important;
+.d-theme-sidebar-row-selected-bgc {
+  background-color: var(--theme-sidebar-selected-row-color-background) !important;
 }
 .d-theme-presence-available {
   background-color: var(--theme-presence-color-background-available) !important;
@@ -20826,6 +20969,8 @@ body {
   --fc-secondary-hsl: var(--black-700-hsl);
   --fc-secondary-inverted: var(--black-200);
   --fc-secondary-inverted-hsl: var(--black-200-hsl);
+  --fc-tertiary-inverted: var(--black-300);
+  --fc-tertiary-inverted-hsl: var(--black-300-hsl);
   --fc-tertiary: var(--black-600);
   --fc-tertiary-hsl: var(--black-600-hsl);
   --fc-muted: hsla(var(--black-800-hsl)  /  var(--alpha, 50%));
@@ -20834,11 +20979,17 @@ body {
   --fc-disabled: var(--black-500);
   --fc-disabled-hsl: var(--black-500-hsl);
   --fc-critical: var(--red-300);
+  --fc-critical-strong: var(--red-400);
   --fc-critical-hsl: var(--red-300-hsl);
+  --fc-critical-strong-hsl: var(--red-400-hsl);
   --fc-error: var(--fc-critical);
+  --fc-error-strong: var(--fc-critical-strong);
   --fc-error-hsl: var(--fc-critical-hsl);
+  --fc-error-strong-hsl: var(--fc-critical-strong-hsl);
   --fc-success: var(--green-400);
+  --fc-success-strong: var(--green-500);
   --fc-success-hsl: var(--green-400-hsl);
+  --fc-success-strong-hsl: var(--green-500-hsl);
   --fc-warning: var(--gold-500);
   --fc-warning-hsl: var(--gold-500-hsl);
   --fc-warning-hover: var(--black-900);
@@ -20847,12 +20998,20 @@ body {
   --base-color-background: var(--bgc-primary);
   --bgc-critical: var(--red-100);
   --bgc-critical-hsl: var(--red-100-hsl);
+  --bgc-critical-subtle: #fff2f3;
+  --bgc-critical-strong: var(--red-400);
   --bgc-info: var(--blue-100);
   --bgc-info-hsl: var(--blue-100-hsl);
+  --bgc-info-subtle: #f5f9fd;
+  --bgc-info-strong: var(--blue-400);
   --bgc-warning: var(--gold-100);
   --bgc-warning-hsl: var(--gold-100-hsl);
+  --bgc-warning-subtle: #fffae5;
+  --bgc-warning-strong: var(--gold-500);
   --bgc-success: var(--green-100);
   --bgc-success-hsl: var(--green-100-hsl);
+  --bgc-success-subtle: #f8fdf7;
+  --bgc-success-strong: var(--green-400);
   --bgc-primary: var(--white);
   --bgc-primary-hsl: var(--white-hsl);
   --bgc-secondary: var(--black-100);
@@ -20865,6 +21024,27 @@ body {
   --bgc-strong-hsl: var(--black-600-hsl);
   --bgc-contrast: var(--black-800);
   --bgc-contrast-hsl: var(--black-800-hsl);
+  --bc-subtle: rgba(0, 0, 0, 0.1);
+  --bc-default: rgba(0, 0, 0, 0.18);
+  --bc-moderate: rgba(0, 0, 0, 0.34);
+  --bc-bold: rgba(0, 0, 0, 0.5);
+  --bc-inverted-subtle: rgba(255, 255, 255, 0.14);
+  --bc-inverted-default: rgba(255, 255, 255, 0.22);
+  --bc-inverted-moderate: rgba(255, 255, 255, 0.38);
+  --bc-inverted-bold: rgba(255, 255, 255, 0.5);
+  --bc-focus: var(--blue-300);
+  --bc-critical: var(--red-300);
+  --bc-critical-subtle: var(--red-200);
+  --bc-critical-strong: var(--red-400);
+  --bc-success: var(--green-400);
+  --bc-success-subtle: var(--green-200);
+  --bc-success-strong: var(--green-500);
+  --bc-warning: var(--gold-400);
+  --bc-warning-subtle: var(--gold-200);
+  --bc-warning-strong: var(--gold-500);
+  --bc-brand: var(--purple-400);
+  --bc-brand-subtle: var(--purple-200);
+  --bc-brand-strong: var(--purple-500);
   --zi-hide: -1;
   --zi-base: 0;
   --zi-base1: 1;
@@ -20880,7 +21060,7 @@ body {
   --zi-modal-element: 650;
   --zi-notification: 700;
   --color-focus-ring: hsla(var(--blue-300-hsl) / 1);
-  --focus-ring: var(--color-focus-ring);
+  --focus-ring: var(--bc-focus);
   --primary-color-h: var(--purple-400-h);
   --primary-color-s: var(--purple-400-s);
   --primary-color-l: var(--purple-400-l);
@@ -20904,10 +21084,12 @@ body {
   --theme-sidebar-color-background: var(--bgc-secondary);
   --theme-sidebar-icon-color: var(--fc-secondary);
   --theme-sidebar-status-color: var(--fc-tertiary);
-  --theme-sidebar-row-color-background-hover: var(--black-300);
-  --theme-sidebar-active-row-color: var(--fc-primary);
-  --theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
-  --theme-sidebar-active-row-color-background: var(--black-200);
+  --theme-sidebar-row-color-background: transparent;
+  --theme-sidebar-row-color-background-hover: hsla(var(--black-900-hsl) / 0.1);
+  --theme-sidebar-row-color-background-active: var(--black-300);
+  --theme-sidebar-selected-row-color: var(--fc-primary);
+  --theme-sidebar-selected-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
+  --theme-sidebar-selected-row-color-background: var(--black-200);
   --theme-presence-color-background-available: var(--green-400);
   --theme-presence-color-background-busy-unavailable: var(--red-300);
   --theme-presence-color-background-busy: var(--gold-300);