@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/styles/components/settings-modal.css

@@ -9,68 +9,717 @@
   min-height: 0;
 }
 
-.mint-settings-modal__section {
-  margin-bottom: 1.5rem;
+/* ─────────────────────────────────────────────────────────────────────
+ * Schema-driven content grid (used by both layouts)
+ * Cols come from `--mint-settings-cols` set inline by the component;
+ * keeps the data binding minimal and the styling in one place.
+ * ───────────────────────────────────────────────────────────────────── */
+
+.mint-settings-modal__group-grid {
+  display: grid;
+  gap: 0 1.5rem;
+  grid-template-columns: repeat(var(--mint-settings-cols, 1), minmax(0, 1fr));
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Setting rows (5d): label + hint on the left, control on the right.
+ * Numbers get a 120px right-aligned mono field, selects 220px; booleans
+ * already render as row toggles; text-like fields stay full width.
+ * ───────────────────────────────────────────────────────────────────── */
+
+.mint-settings-modal__row {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border-light);
+}
+
+/* Dark --border-light equals the modal surface; the row hairline needs --border-color there. */
+:where(html.dark) .mint-settings-modal__row {
+  border-bottom-color: var(--border-color);
+}
+
+/* The field cell anchors the ↺ reset, which sits just left of the control (5d).
+   --_settings-control-w is the control's width; stacked fields (text, custom slots)
+   keep 0 and put the reset at the right end of their label line. */
+.mint-settings-modal__row-field {
+  --_settings-control-w: 0px;
+  --_settings-reset-room: 1.875rem; /* 24px button + 6px gap */
+  position: relative;
+  min-width: 0;
 }
 
-.mint-settings-modal__section-label {
+.mint-settings-modal__row-field:has(> .mint-form-field > .mint-number-input) {
+  --_settings-control-w: 7.5rem;
+}
+
+.mint-settings-modal__row-field:has(> .mint-form-field > .mint-select) {
+  --_settings-control-w: 13.75rem;
+}
+
+.mint-settings-modal__row-field:has(.mint-toggle__track--md) {
+  --_settings-control-w: 2rem;
+}
+
+/* Toggle rows: label + hint on the left, the switch centred on that block (as number / select rows). */
+.mint-settings-modal__row-field:has(.mint-toggle--row) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 1rem;
+  align-items: center;
+}
+
+.mint-settings-modal__row-field:has(.mint-toggle--row) > .mint-form-field,
+.mint-settings-modal__row-field .mint-toggle--row {
+  display: contents;
+}
+
+.mint-settings-modal__row-field .mint-toggle--row .mint-toggle__copy {
+  position: relative;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.mint-settings-modal__row-field .mint-toggle--row .mint-toggle__track {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+.mint-settings-modal__row-hint {
+  grid-column: 1;
+  grid-row: 2;
+  margin: 0.125rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+
+/* Search results name their group above the label. */
+.mint-settings-modal__row-group {
+  position: relative;
+  display: block;
+  margin-bottom: 0.125rem;
   font-size: 0.6875rem;
+  color: var(--text-secondary);
+}
+
+/* Modified from default: 6px primary dot in the pane gutter, on the row's first text line. */
+.mint-settings-modal__row--modified > .mint-settings-modal__row-group::before,
+.mint-settings-modal__row--modified:not(:has(> .mint-settings-modal__row-group)) .mint-form-field__label-row::before,
+.mint-settings-modal__row--modified:not(:has(> .mint-settings-modal__row-group)) .mint-toggle__copy::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -0.75rem;
+  width: 6px;
+  height: 6px;
+  margin-top: -3px;
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+.mint-settings-modal__row-field .mint-form-field__label-row {
+  position: relative;
+}
+
+/* Keep label and hint clear of the reset. */
+.mint-settings-modal__row--modified .mint-settings-modal__row-field:has(.mint-toggle--row),
+.mint-settings-modal__row--modified .mint-form-field:has(> .mint-number-input, > .mint-select) {
+  column-gap: calc(1rem + var(--_settings-reset-room));
+}
+
+.mint-settings-modal__row--modified .mint-form-field:not(:has(> .mint-number-input, > .mint-select)) > .mint-form-field__label-row {
+  padding-right: var(--_settings-reset-room);
+}
+
+.mint-settings-modal__reset {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--_settings-control-w) + 0.375rem);
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: background-color var(--mint-transition), color var(--mint-transition);
+}
+
+/* Stacked field: the reset ends the label line. */
+.mint-settings-modal__row-field:not(:has(> .mint-form-field > .mint-number-input, > .mint-form-field > .mint-select, .mint-toggle--row)) > .mint-settings-modal__reset {
+  top: -0.25rem;
+  right: 0;
+  transform: none;
+}
+
+.mint-settings-modal__reset:hover {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.mint-settings-modal__reset:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-settings-modal__reset svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.mint-settings-modal__group-grid .mint-form-field__label {
+  font-size: 0.8125rem;
   font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  color: var(--text-primary);
+}
+
+.mint-settings-modal__group-grid .mint-form-field__hint {
+  font-size: 0.75rem;
+  line-height: 1.45;
   color: var(--text-secondary);
-  margin-bottom: 0.5rem;
 }
 
-.mint-settings-modal__option-group {
+.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 1rem;
+  row-gap: 0.125rem;
+  align-items: center;
+}
+
+.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__label-row {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__hint,
+.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__error {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.mint-settings-modal__group-grid .mint-form-field > .mint-number-input,
+.mint-settings-modal__group-grid .mint-form-field > .mint-select {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+.mint-settings-modal__group-grid .mint-form-field > .mint-number-input {
+  width: 7.5rem;
+}
+
+.mint-settings-modal__group-grid .mint-form-field > .mint-number-input .mint-number-input__input {
+  text-align: right;
+}
+
+/* Settings rows show the plain 120px value field (no steppers, no range fill); arrow keys still step it. */
+.mint-settings-modal__group-grid .mint-form-field > .mint-number-input :is(.mint-number-input__steppers, .mint-number-input__wash, .mint-number-input__rule) {
+  display: none;
+}
+
+.mint-settings-modal__group-grid .mint-form-field > .mint-select {
+  width: 13.75rem;
+}
+
+/* No hint or error: the label shares the control's centre line instead of sitting on top of an empty row. */
+.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select):not(:has(> .mint-form-field__hint, > .mint-form-field__error)) > .mint-form-field__label-row {
+  grid-row: 1 / span 2;
+}
+
+.mint-settings-modal__group-grid .mint-toggle__label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+/* The pane header already shows the active group's description; the rail keeps icon + name (5d).
+   BaseModal's Teleport root drops class fallthrough, so scope through :has(). */
+.mint-modal__split:has(.mint-settings-modal) .mint-modal__rail-item-description {
+  display: none;
+}
+
+/* Modified count in the rail: 5px primary dot + mono number (schema mode only). */
+.mint-modal__split:has(.mint-settings-modal--schema) .mint-modal__rail-item-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text-secondary);
+}
+
+.mint-modal__split:has(.mint-settings-modal--schema) .mint-modal__rail-item-meta::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Header: title + built-in search
+ * ───────────────────────────────────────────────────────────────────── */
+
+.mint-settings-modal__header {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.mint-settings-modal__search {
+  position: relative;
+  flex: 0 1 15rem;
+  min-width: 0;
+  margin-left: auto;
+}
+
+.mint-settings-modal__search-icon {
+  position: absolute;
+  top: 50%;
+  left: 0.625rem;
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-secondary);
+  transform: translateY(-50%);
+  pointer-events: none;
 }
 
-.mint-settings-modal__option-btn {
-  padding: 0.375rem 0.75rem;
+.mint-settings-modal__search .mint-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 2rem;
+}
+
+/* Native clear button drawn as the SDK's × in --text-secondary. */
+.mint-settings-modal__search .mint-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: var(--text-secondary);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
+  cursor: pointer;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Pane / group header: title + description, "Restore group defaults"
+ * ───────────────────────────────────────────────────────────────────── */
+
+.mint-settings-modal__head {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.mint-settings-modal__head-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.mint-settings-modal__head-title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0 !important;
+  padding: 0 !important;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
+}
+
+.mint-settings-modal__head-count {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 400;
   color: var(--text-secondary);
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
+}
+
+.mint-settings-modal__head-description {
+  margin: 0.125rem 0 0 !important;
+  padding: 0 !important;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+
+.mint-settings-modal__restore-group {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.375rem;
+  height: 1.75rem;
+  padding: 0 0.625rem;
+  border: none;
   border-radius: var(--radius-md);
+  background: transparent;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  color: var(--text-secondary-strong);
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-settings-modal__restore-group:hover:not(:disabled) {
+  background-color: var(--bg-hover);
+}
+
+.mint-settings-modal__restore-group:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-settings-modal__restore-group:disabled {
+  color: var(--text-muted);
+  cursor: default;
+}
+
+.mint-settings-modal__restore-group svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* In the body (stacked / tab layouts) the header sits above its group's rows. */
+.mint-settings-modal > .mint-settings-modal__head,
+.mint-settings-modal__group > .mint-settings-modal__head {
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+:where(html.dark) .mint-settings-modal > .mint-settings-modal__head,
+:where(html.dark) .mint-settings-modal__group > .mint-settings-modal__head {
+  border-bottom-color: var(--border-color);
+}
+
+.mint-settings-modal__empty {
+  margin: 0;
+  padding: 3rem 0;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Appearance: theme preview cards, palette swatch strips, density preview
+ * ───────────────────────────────────────────────────────────────────── */
+
+.mint-settings-modal__setting {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 0.875rem 0;
+  border-bottom: 1px solid var(--border-light);
+}
+
+:where(html.dark) .mint-settings-modal__setting {
+  border-bottom-color: var(--border-color);
+}
+
+.mint-settings-modal__setting:last-of-type {
+  border-bottom: none;
+}
+
+/* Label left, control right, preview underneath. */
+.mint-settings-modal__setting--inline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.625rem 1rem;
+  align-items: start;
+}
+
+.mint-settings-modal__setting-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.mint-settings-modal__setting-label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.mint-settings-modal__setting-hint {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.mint-settings-modal__themes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+}
+
+.mint-settings-modal__theme {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
   cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.mint-settings-modal__option-btn:hover {
-  background-color: var(--bg-tertiary);
+/* Fixed light / dark sample colours for the previews, built from the active
+   theme's tokens: the opposite theme borrows the ink tokens, which are that
+   theme's surfaces (dark ink #1E293B / light ink #F8FAFC). */
+.mint-settings-modal__theme-preview {
+  --_pv-light-bg: var(--bg-primary);
+  --_pv-light-card: var(--bg-card);
+  --_pv-light-line: var(--_control-border-strong);
+  --_pv-light-border: var(--border-color);
+  --_pv-dark-bg: var(--text-primary);
+  --_pv-dark-card: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary-strong));
+  --_pv-dark-line: var(--text-secondary-strong);
+  --_pv-dark-border: var(--text-secondary-strong);
+
+  display: flex;
+  width: 8.25rem;
+  height: 5rem;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  box-shadow: 0 0 0 1px var(--border-color);
+  transition: box-shadow var(--mint-transition);
+}
+
+:where(html.dark) .mint-settings-modal__theme-preview {
+  --_pv-light-bg: color-mix(in srgb, var(--text-primary) 90%, var(--text-secondary-strong));
+  --_pv-light-card: var(--text-primary);
+  --_pv-light-line: var(--text-secondary-strong);
+  --_pv-light-border: var(--text-secondary-strong);
+  --_pv-dark-bg: var(--bg-primary);
+  --_pv-dark-card: var(--bg-card);
+  --_pv-dark-line: var(--_control-border-strong);
+  --_pv-dark-border: var(--border-color);
+}
+
+.mint-settings-modal__theme--active .mint-settings-modal__theme-preview {
+  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--color-primary);
+}
+
+.mint-settings-modal__theme:focus-visible {
+  outline: none;
+}
+
+.mint-settings-modal__theme:focus-visible .mint-settings-modal__theme-preview {
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-settings-modal__theme-half {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3125rem;
+  padding: 0.5rem;
+}
+
+.mint-settings-modal__theme-half + .mint-settings-modal__theme-half {
+  padding-left: 0;
+}
+
+.mint-settings-modal__theme-half--light {
+  --_pv-bg: var(--_pv-light-bg);
+  --_pv-card: var(--_pv-light-card);
+  --_pv-line: var(--_pv-light-line);
+  --_pv-border: var(--_pv-light-border);
+}
+
+.mint-settings-modal__theme-half--dark {
+  --_pv-bg: var(--_pv-dark-bg);
+  --_pv-card: var(--_pv-dark-card);
+  --_pv-line: var(--_pv-dark-line);
+  --_pv-border: var(--_pv-dark-border);
+}
+
+.mint-settings-modal__theme-half {
+  background-color: var(--_pv-bg);
+}
+
+.mint-settings-modal__theme-line {
+  width: 60%;
+  height: 6px;
+  border-radius: 2px;
+  background-color: var(--_pv-line);
+}
+
+.mint-settings-modal__theme-card {
+  flex: 1;
+  border: 1px solid var(--_pv-border);
+  border-radius: var(--radius-sm);
+  background-color: var(--_pv-card);
+}
+
+.mint-settings-modal__theme-label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary-strong);
+}
+
+.mint-settings-modal__theme--active .mint-settings-modal__theme-label {
+  font-weight: 600;
   color: var(--text-primary);
 }
 
-.mint-settings-modal__option-btn--active {
+.mint-settings-modal__theme-radio {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 9999px;
+  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
+}
+
+.mint-settings-modal__theme--active .mint-settings-modal__theme-radio {
+  box-shadow: inset 0 0 0 4px var(--color-primary);
+}
+
+.mint-settings-modal__palettes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.mint-settings-modal__palette {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  height: 2.75rem;
+  padding: 0 0.75rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--border-color);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-settings-modal__palette:hover {
+  background-color: var(--bg-hover);
+}
+
+.mint-settings-modal__palette:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-settings-modal__palette--active,
+.mint-settings-modal__palette--active:hover {
+  background-color: var(--color-primary-soft);
+  box-shadow: inset 0 0 0 1.5px var(--color-primary);
+}
+
+.mint-settings-modal__swatches {
+  display: flex;
+  flex-shrink: 0;
+  gap: 3px;
+}
+
+.mint-settings-modal__swatch {
+  width: 0.75rem;
+  height: 1.25rem;
+  border-radius: 3px;
+}
+
+.mint-settings-modal__palette-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-settings-modal__palette--active .mint-settings-modal__palette-name {
+  font-weight: 600;
+}
+
+.mint-settings-modal__palette-check {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
   color: var(--color-primary);
-  border-color: var(--color-primary);
-  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  visibility: hidden;
 }
 
-html.dark .mint-settings-modal__option-btn--active {
-  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
+.mint-settings-modal__palette--active .mint-settings-modal__palette-check {
+  visibility: visible;
 }
 
-.mint-settings-modal__note {
+.mint-settings-modal__density-preview {
+  --_density-row: 2.125rem;
+
+  grid-column: 1 / -1;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
   font-size: 0.75rem;
-  color: var(--text-muted);
-  margin-top: 0.375rem !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
+}
+
+.mint-settings-modal__density-preview--compact {
+  --_density-row: 1.75rem;
+}
+
+.mint-settings-modal__density-preview--comfortable {
+  --_density-row: 2.625rem;
+}
+
+.mint-settings-modal__density-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 5rem 5rem;
+  align-items: center;
+  height: var(--_density-row);
+  padding: 0 0.75rem;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-primary);
+  transition: height 160ms ease;
+}
+
+.mint-settings-modal__density-row:last-child {
+  border-bottom: none;
+}
+
+.mint-settings-modal__density-row > span + span {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.mint-settings-modal__density-row--head {
+  height: 1.875rem;
+  background-color: var(--bg-primary);
+  font-weight: 500;
+  color: var(--text-secondary);
 }
 
 /* ─────────────────────────────────────────────────────────────────────
- * Schema-driven content grid (used by both layouts)
- * Cols come from `--mint-settings-cols` set inline by the component;
- * keeps the data binding minimal and the styling in one place.
+ * Footer: applied status + Done
  * ───────────────────────────────────────────────────────────────────── */
 
-.mint-settings-modal__group-grid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(var(--mint-settings-cols, 1), minmax(0, 1fr));
+.mint-settings-modal__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-right: auto;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.mint-settings-modal__status-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--mint-success-hover);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-settings-modal__density-row,
+  .mint-settings-modal__theme-preview {
+    transition: none;
+  }
 }