@revolist/ui 4.0.4-rc → 4.0.4

package/styles/_field-configurator.scss

@@ -1,3 +1,4 @@
+@use './fields-grid';
 @use './motion';
 @use './disclosure';
 @use './icon-action';
@@ -101,8 +102,14 @@
     min-width: 0;
   }
   .rv-configurator-field-content > .rv-configurator-icon {
-    display: inline-flex; flex: 0 0 12px; width: 12px; height: 12px;
-    svg { width: 12px; height: 12px; }
+    display: inline-flex;
+    flex: 0 0 12px;
+    width: 12px;
+    height: 12px;
+    svg {
+      width: 12px;
+      height: 12px;
+    }
   }
   .rv-configurator-field-caption {
     min-width: 0;
@@ -160,7 +167,8 @@
     font-weight: 500;
     list-style: none;
     cursor: pointer;
-    transition: color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+    transition: color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
     &::-webkit-details-marker {
       display: none;
     }
@@ -173,7 +181,8 @@
       flex: none;
     }
     .rv-configurator-icon {
-      transition: transform var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+      transition: transform var(--rv-ui-motion-fast, 120ms)
+        var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
     }
     &:hover {
       color: var(--rv-configurator-accent-text, var(--rv-ui-accent));
@@ -209,7 +218,11 @@
     > .rv-configurator-field-row {
       @include field;
       position: relative;
-      transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+      transition:
+        background-color var(--rv-ui-motion-fast, 120ms)
+          var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+        border-color var(--rv-ui-motion-fast, 120ms)
+          var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
       &[draggable='true'] {
         cursor: grab;
       }
@@ -235,38 +248,93 @@
   }
 }
 
-.rv-configurator-field-actions { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 0; min-width: 0; }
-.rv-configurator-action-trigger { display: inline-flex; flex: none; min-width: 0; }
+.rv-configurator-field-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+}
+.rv-configurator-action-trigger {
+  display: inline-flex;
+  flex: none;
+  min-width: 0;
+}
 .rv-configurator-status-badge {
-  display: inline-flex; flex: 0 0 auto; align-items: center; max-width: 7ch;
-  margin-inline-end: 4px; padding: 1px 4px; border-radius: 4px;
-  background: var(--rv-configurator-muted-bg, var(--rv-ui-surface-hover)); color: inherit;
-  font-size: 10px; font-weight: 600; line-height: 16px; white-space: nowrap;
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
-  &[data-active='true'] { color: var(--rv-configurator-accent-text, var(--rv-ui-field-accent-text, var(--rv-ui-accent))); background: color-mix(in srgb, var(--rv-ui-accent) 12%, transparent); }
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  max-width: 7ch;
+  margin-inline-end: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: var(--rv-configurator-muted-bg, var(--rv-ui-surface-hover));
+  color: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  transition:
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
+  &[data-active='true'] {
+    color: var(
+      --rv-configurator-accent-text,
+      var(--rv-ui-field-accent-text, var(--rv-ui-accent))
+    );
+    background: color-mix(in srgb, var(--rv-ui-accent) 12%, transparent);
+  }
 }
 
 // Native adapters and Preact examples use this same field action presentation.
 button.rv-configurator-action-button {
   @include icon-action.neutral;
   &[data-configurator-action='settings'] {
-    &:hover, &:active, &[aria-expanded='true'] { background: transparent; color: var(--rv-configurator-muted, var(--rv-ui-field-muted)); opacity: 1; transform: none; box-shadow: none; }
+    &:hover,
+    &:active,
+    &[aria-expanded='true'] {
+      background: transparent;
+      color: var(--rv-configurator-muted, var(--rv-ui-field-muted));
+      opacity: 1;
+      transform: none;
+      box-shadow: none;
+    }
   }
   &[data-configured='true'] {
     position: relative;
-    &::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--rv-ui-accent); pointer-events: none; }
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 2px;
+      inset-inline-end: 2px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--rv-ui-accent);
+      pointer-events: none;
+    }
   }
 }
 
 .rv-configurator-drop-indicator {
-  position: absolute; inset-inline: 4px; top: -2px; height: 2px;
-  border-radius: 999px; background: var(--rv-ui-accent);
+  position: absolute;
+  inset-inline: 4px;
+  top: -2px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--rv-ui-accent);
   box-shadow: 0 0 0 1px var(--rv-configurator-bg, var(--rv-ui-surface));
-  pointer-events: none; z-index: 2;
-  &[data-position='after'] { top: auto; bottom: -2px; }
+  pointer-events: none;
+  z-index: 2;
+  &[data-position='after'] {
+    top: auto;
+    bottom: -2px;
+  }
 }
 
-
 .rv-collapsible-section {
   min-width: 0;
   margin: 0;
@@ -275,7 +343,9 @@ button.rv-configurator-action-button {
   border-radius: 0;
   background: transparent;
 }
-.rv-collapsible-section > .rv-configurator-summary { min-height: 52px; }
+.rv-collapsible-section > .rv-configurator-summary {
+  min-height: 52px;
+}
 .rv-collapsible-section__content {
   display: grid;
   gap: 12px;
@@ -283,8 +353,236 @@ button.rv-configurator-action-button {
   padding: 0 0 14px;
   overflow-wrap: anywhere;
 }
-.rv-collapsible-section__description { margin: 0; }
+.rv-collapsible-section__description {
+  margin: 0;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .rv-collapsible-section > .rv-configurator-summary svg { transition: none; }
+  .rv-collapsible-section > .rv-configurator-summary svg {
+    transition: none;
+  }
+}
+
+// Product-neutral panel shell; grid bodies remain rendering slots in their adapters.
+.rv-configurator-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  min-width: 0;
+  box-sizing: border-box;
+  .pivot-field-annotation {
+    color: var(--rv-configurator-muted, var(--rv-ui-text-muted));
+    font-size: 12px;
+  }
+  .pivot-filter-active {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--rv-ui-accent);
+  }
+}
+
+.rv-configurator-panel--standalone {
+  @include presentation;
+  --rv-configurator-bg: var(--rv-ui-surface);
+  --rv-configurator-surface: var(--rv-ui-field-surface);
+  --rv-configurator-text: var(--rv-ui-text);
+  --rv-configurator-muted: var(--rv-ui-text-muted);
+  --rv-configurator-border: var(--rv-ui-border);
+  --rv-configurator-accent: var(--rv-ui-accent);
+  --rv-configurator-accent-text: var(--rv-ui-accent);
+  flex-shrink: 0;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  padding: 8px 16px 16px;
+  border: 1px solid var(--rv-ui-border);
+  border-radius: 10px;
+  background: var(--rv-ui-surface);
+  color: var(--rv-ui-text);
+  font: 13px/1.5 sans-serif;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .rv-configurator-library-content > .rv-configurator-field-search {
+    margin: 8px;
+    width: auto;
+  }
+  .rv-configurator-icon svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+// Compact rail presentation is shared by Grid, Pivot and Pivot Charts.
+.rv-configurator-panel__content {
+  display: contents;
+}
+.rv-configurator-panel__content[hidden] {
+  display: none;
+}
+.rv-configurator-rail {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.rv-configurator-rail__button.rv-btn {
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  justify-content: center;
+}
+.rv-configurator-rail__button .rv-configurator-icon svg {
+  width: 18px;
+  height: 18px;
+}
+.rv-configurator-rail__count.rv-badge {
+  position: absolute;
+  inset: -4px -4px auto auto;
+}
+.rv-configurator-panel[data-compact='true'] {
+  border: 0;
+  border-left: 1px solid var(--rv-ui-border);
+  border-radius: 0;
+  width: 56px !important;
+  min-width: 56px;
+  padding: 8px;
+  flex: none;
+}
+.rv-configurator-panel[data-compact='true'] > .rv-configurator-rail {
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.rv-configurator-panel[data-mini-mode='true'][data-compact='true'] {
+  box-sizing: border-box;
+  min-height: 0;
+  overflow: auto;
+}
+.rv-configurator-panel[data-mini-mode='true']
+  .rv-configurator-rail__button.rv-btn {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  height: auto;
+  min-height: 36px;
+}
+.rv-configurator-rail__label {
+  writing-mode: vertical-rl;
+  white-space: nowrap;
+}
+.rv-configurator-panel__toggle {
+  display: flex;
+  flex: none;
+  justify-content: flex-end;
+  padding: 4px 8px;
+}
+
+.rv-configurator-panel[data-resizable='true'] {
+  position: relative;
+}
+// Configurator hosts supply content; shared switches retain all control appearance.
+.rv-configurator-section-tabs.rv-segmented-switch {
+  display: flex;
+  flex: none;
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  > button {
+    flex: 1 0 auto;
+  }
+}
+.rv-configurator-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding-block: 8px;
+  margin-block: -8px 0;
+  margin-inline: var(--rv-configurator-header-inline-offset, 0px);
+  background: var(--rv-configurator-bg, var(--rv-ui-surface));
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -8px -16px 0;
+    z-index: -1;
+    background: inherit;
+  }
+  > .rv-segmented-switch {
+    flex: 1 1 0%;
+    width: 0;
+  }
+}
+.rv-configurator-custom-section,
+.rv-configurator-section-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.rv-configurator-panel:has(
+  > .rv-configurator-panel__content
+    > .rv-configurator-custom-section:not([hidden])
+) {
+  height: 100%;
+  min-height: 0;
+}
+.rv-configurator-custom-section[hidden] {
+  display: none;
+}
+
+// A compact icon with a native/shared select hit target; field text stays in its popup.
+.rv-icon-select {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  border-radius: 6px;
+  &:focus-within {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: 2px;
+  }
+  &:has(.rv-select-control.disabled) {
+    opacity: 0.5;
+  }
+  &:has(.rv-select-control:hover:not(.disabled)) {
+    background: var(--rv-ui-surface-hover);
+  }
+  // This icon composition must outrank the normal standalone form padding.
+  .dropdown-container.rv-select .dropdown-trigger {
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    .selected-value,
+    .dropdown-arrow {
+      display: none;
+    }
+  }
+  .rv-select-control {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    min-height: 28px;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
 }

package/styles/_fields-grid.scss

@@ -0,0 +1,49 @@
+// Shared Fields-grid presentation. Grid adapters supply rows and policy.
+revo-grid.rv-configurator-fields-grid {
+  // Checkboxes convey assignment; selected rows retain the neutral Fields surface.
+  --revo-selected-row: transparent;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+
+  revogr-data {
+    .rgRow,
+    .groupingRow {
+      box-shadow: none;
+    }
+    // Readonly theme rules also paint cell separators. Keep this surface borderless.
+    .rgRow .rgCell,
+    .rgRow .rgCell.disabled {
+      padding-inline: var(--rv-configurator-field-cell-padding, 0);
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .rgRow .rv-configurator-field-reorder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .rv-configurator-field-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  .rv-configurator-field-drag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    cursor: grab;
+    .rv-configurator-drag-handle {
+      margin: 0;
+    }
+  }
+}

package/styles/_filter-controls.scss

@@ -14,7 +14,13 @@
   text-align: start;
   font: inherit;
   white-space: normal;
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   &:hover:not(:disabled) {
     border-color: var(--rv-ui-border-strong);
     background: var(--rv-ui-field-surface);
@@ -116,4 +122,6 @@ textarea.rv-highlighted-input__input::placeholder {
   box-shadow: inset 0 0 0 1px var(--rv-ui-danger);
 }
 
-.rv-option-button[aria-pressed="true"] .rv-option-button__detail { color: inherit; }
+.rv-option-button[aria-pressed='true'] .rv-option-button__detail {
+  color: inherit;
+}

package/styles/_icon-action.scss

@@ -3,26 +3,59 @@
 @mixin neutral {
   appearance: none;
   box-sizing: border-box;
-  display: inline-flex; align-items: center; justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: 0 0 var(--rv-icon-action-size, 28px);
-  width: var(--rv-icon-action-size, 28px); height: var(--rv-icon-action-size, 28px);
-  min-width: var(--rv-icon-action-size, 28px); min-height: var(--rv-icon-action-size, 28px);
-  margin: 0; padding: var(--rv-icon-action-padding, 6px);
-  border: 0; border-radius: 6px; box-shadow: none; background: transparent;
+  width: var(--rv-icon-action-size, 28px);
+  height: var(--rv-icon-action-size, 28px);
+  min-width: var(--rv-icon-action-size, 28px);
+  min-height: var(--rv-icon-action-size, 28px);
+  margin: 0;
+  padding: var(--rv-icon-action-padding, 6px);
+  border: 0;
+  border-radius: 6px;
+  box-shadow: none;
+  background: transparent;
   color: var(--rv-configurator-muted, var(--rv-ui-field-muted));
-  font: inherit; font-size: 12px; line-height: 20px;
-  opacity: 1; cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  opacity: 1;
+  cursor: pointer;
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease),
     color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
-  > span { display: inline-flex; color: inherit; }
-  svg { display: block; width: 12px; height: 12px; fill: currentColor; transform-origin: center; }
-  &:hover:not(:disabled), &[aria-expanded='true'] {
-    color: var(--rv-configurator-accent-text, var(--rv-ui-field-accent-text, var(--rv-ui-accent)));
+  > span {
+    display: inline-flex;
+    color: inherit;
+  }
+  svg {
+    display: block;
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+    transform-origin: center;
+  }
+  &:hover:not(:disabled),
+  &[aria-expanded='true'] {
+    color: var(
+      --rv-configurator-accent-text,
+      var(--rv-ui-field-accent-text, var(--rv-ui-accent))
+    );
     background: color-mix(in srgb, var(--rv-ui-accent) 10%, transparent);
   }
-  &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 1px; }
-  &:disabled { opacity: .35; cursor: default; }
-  @media (prefers-reduced-motion: reduce) { transition: none; }
+  &:focus-visible {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: 1px;
+  }
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }

package/styles/_loading.scss

@@ -7,7 +7,8 @@
   border: $width solid var(--rv-ui-border);
   border-block-start-color: var(--rv-ui-accent);
   border-radius: 50%;
-  animation: rv-ui-spin calc(var(--rv-ui-motion-normal, 160ms) * 6.25) linear infinite;
+  animation: rv-ui-spin calc(var(--rv-ui-motion-normal, 160ms) * 6.25) linear
+    infinite;
 }
 @mixin overlay {
   position: absolute;
@@ -16,5 +17,13 @@
   justify-content: center;
   background: color-mix(in srgb, var(--rv-ui-surface, white) 70%, transparent);
 }
-@keyframes rv-ui-spin { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .rv-spinner > span { animation: none; } }
+@keyframes rv-ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rv-spinner > span {
+    animation: none;
+  }
+}

package/styles/_motion.scss

@@ -5,11 +5,13 @@
   --rv-ui-motion-normal: 160ms;
   --rv-ui-motion-enter: 180ms;
   --rv-ui-motion-exit: 120ms;
-  --rv-ui-motion-ease: cubic-bezier(.2, 0, 0, 1);
+  --rv-ui-motion-ease: cubic-bezier(0.2, 0, 0, 1);
 }
 
 @mixin immediate {
-  &, &::before, &::after {
+  &,
+  &::before,
+  &::after {
     animation: none !important;
     transition: none !important;
     scroll-behavior: auto !important;
@@ -29,15 +31,22 @@
   --rv-ui-motion-exit: 0ms;
   --rv-ui-transition: 0s;
   @include immediate;
-  * { @include immediate; }
+  * {
+    @include immediate;
+  }
 }
 
 @keyframes rv-ui-surface-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 [data-rv-ui-surface]:not(.rv-status-feedback):not([data-status-feedback-exit]) {
-  animation: rv-ui-surface-in var(--rv-ui-motion-enter, 180ms) var(--rv-ui-motion-ease, ease-out);
+  animation: rv-ui-surface-in var(--rv-ui-motion-enter, 180ms)
+    var(--rv-ui-motion-ease, ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -50,9 +59,23 @@
     --rv-ui-transition: 0s;
   }
   // Shared controls can also be mounted independently or in body-level portals.
-  :where([class^='rv-'], [class*=' rv-'], [class^='revo-'], [class*=' revo-'],
-    .avatar-cell, .range_container, [data-rv-ui-surface]),
-  :where(.rv-ui, .rv-native-controls, .rv-dialog-overlay, .revo-calendar, .range_container) * {
+  :where(
+    [class^='rv-'],
+    [class*=' rv-'],
+    [class^='revo-'],
+    [class*=' revo-'],
+    .avatar-cell,
+    .range_container,
+    [data-rv-ui-surface]
+  ),
+  :where(
+      .rv-ui,
+      .rv-native-controls,
+      .rv-dialog-overlay,
+      .revo-calendar,
+      .range_container
+    )
+    * {
     @include immediate;
   }
 }

package/styles/_palette.scss

@@ -43,27 +43,3 @@ $white-overlay-8: palettes.color('common', 'rgba_255_255_255_0_08');
 $white-overlay-14: palettes.color('common', 'rgba_255_255_255_0_14');
 $gray-52525b: palettes.color('common', 'hex52525b');
 $gray-e4e4e7: palettes.color('common', 'hexe4e4e7');
-$legacy-007bff: palettes.color('common', 'hex007bff');
-$legacy-0d63e8: palettes.color('common', 'hex0d63e8');
-$legacy-000: palettes.color('common', 'hex000');
-$legacy-757575: palettes.color('common', 'hex757575');
-$legacy-999: palettes.color('common', 'hex999');
-$legacy-f6f6f7: palettes.color('common', 'hexf6f6f7');
-$legacy-ebebef: palettes.color('common', 'hexebebef');
-$legacy-e4e4e9: palettes.color('common', 'hexe4e4e9');
-$legacy-333333: palettes.color('common', 'hex333333');
-$legacy-f0f0f0: palettes.color('common', 'hexf0f0f0');
-$legacy-2d2d2d: palettes.color('common', 'hex2d2d2d');
-$legacy-d4d4d4: palettes.color('common', 'hexd4d4d4');
-$legacy-shadow-54: palettes.color('common', 'rgba_0_0_0_0_15');
-$legacy-1c1c1c: palettes.color('common', 'hex1c1c1c');
-$legacy-686868: palettes.color('common', 'hex686868');
-$legacy-shadow-57: palettes.color('common', 'rgba_0_0_0_0_5');
-$legacy-2c2c2c: palettes.color('common', 'hex2c2c2c');
-$legacy-fa2057: palettes.color('common', 'hexfa2057');
-$legacy-f7c605: palettes.color('common', 'hexf7c605');
-$legacy-01c26e: palettes.color('common', 'hex01c26e');
-$legacy-a8183c: palettes.color('common', 'hexa8183c');
-$legacy-5555fc: palettes.color('common', 'hex5555fc');
-$legacy-161a42: palettes.color('common', 'hex161a42');
-$legacy-252525: palettes.color('common', 'hex252525');