@empathyco/x-components 6.0.0-alpha.50 → 6.0.0-alpha.51

package/design-system/deprecated-full-theme.css

@@ -1,20 +1,5 @@
 
 
-.x-uppercase {
-  text-transform: uppercase;
-}
-
-.x-lowercase {
-  text-transform: lowercase;
-}
-
-.x-capitalize {
-  text-transform: capitalize;
-}
-
-.x-normal-case {
-  text-transform: none;
-}
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -34,6 +19,21 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+.x-uppercase {
+  text-transform: uppercase;
+}
+
+.x-lowercase {
+  text-transform: lowercase;
+}
+
+.x-capitalize {
+  text-transform: capitalize;
+}
+
+.x-normal-case {
+  text-transform: none;
+}
 .x-static {
   position: static !important;
 }
@@ -3317,24 +3317,6 @@
 .x-border-color--transparent {
   border-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
-:root {
-  --x-color-text-secondary: var(--x-color-base-neutral-35);
-}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3378,6 +3360,24 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
+}
 .x-text--secondary {
   --x-color-text-default: var(--x-color-text-secondary);
 }
@@ -3436,6 +3436,21 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
 :root {
   --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
@@ -3538,21 +3553,6 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.x-text--bold.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
-}
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
@@ -3567,16 +3567,22 @@
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
 :root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --x-color-background-tag-selected-ghost: transparent;
-  --x-color-border-tag-selected-ghost: transparent;
-  --x-color-background-tag-curated-ghost: transparent;
-  --x-color-border-tag-curated-ghost: transparent;
-  --x-color-background-tag-curated-selected-ghost: transparent;
-  --x-color-border-tag-curated-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
+}
+
+.x-tag--pill.x-tag,
+.x-tag--pill .x-tag {
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
+  --x-size-border-radius-bottom-right-tag-default: var(
+    --x-size-border-radius-bottom-right-tag-pill
+  );
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
 }
 :root {
   --x-color-background-tag-ghost: transparent;
@@ -3609,50 +3615,16 @@
   );
 }
 :root {
-  --x-color-background-tag-default: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default: var(--x-color-text-tag-default);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
-  --x-size-border-width-tag-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-default-selected
-  );
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
 }
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
@@ -3875,6 +3847,52 @@
   );
   --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
 }
+:root {
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}
 :root {
   --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
@@ -3941,24 +3959,6 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
-:root {
-  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
-}
-
-.x-tag--pill.x-tag,
-.x-tag--pill .x-tag {
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
-  --x-size-border-radius-bottom-right-tag-default: var(
-    --x-size-border-radius-bottom-right-tag-pill
-  );
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
-}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -4965,6 +4965,10 @@
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
   --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5025,16 +5029,6 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
-:root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
-  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
-}
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
 
 .x-picture--cover.x-picture {
   position: relative;
@@ -5057,19 +5051,6 @@
   --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
   --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
 }
-
-.x-picture--colored.x-picture {
-  --x-color-background-picture-default: var(--x-color-background-picture-colored);
-}
-.x-picture--colored.x-picture .x-picture-image {
-  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
-}
-.x-picture--colored.x-picture .x-picture--fallback {
-  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
-}
-.x-picture--colored.x-picture .x-picture--placeholder {
-  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
-}
 :root {
   --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5172,86 +5153,6 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-color-background-option-list-button-default: transparent;
-  --x-color-border-option-list-button-default: transparent;
-  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
-  --x-color-background-option-list-button-default-hover: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-hover: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
-  --x-color-background-option-list-button-default-selected: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-selected: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
-  --x-color-background-option-list-button-default-selected-hover: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-option-list-button-default-selected-hover: var(
-    --x-color-border-option-list-button-default-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-default-selected
-  );
-  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default-selected: var(
-    --x-size-border-width-top-option-list-item-default
-  );
-  --x-size-border-width-right-option-list-item-default-selected: var(
-    --x-size-border-width-right-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default-selected: var(
-    --x-size-border-width-bottom-option-list-item-default
-  );
-  --x-size-border-width-left-option-list-item-default-selected: var(
-    --x-size-border-width-left-option-list-item-default
-  );
-  --x-size-padding-option-list-button-default: var(--x-size-base-02);
-  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-right-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-bottom-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-left-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-font-decoration-option-list-button-default-hover: underline;
-  --x-size-font-option-list-button-default: var(--x-size-font-text);
-  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
-}
 
 .x-option-list {
   display: inline-flex;
@@ -5645,6 +5546,86 @@
 .x-message > p {
   margin: 0;
 }
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 /* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
@@ -6710,6 +6691,41 @@
   );
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+:root {
+  --x-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -6757,15 +6773,6 @@
   margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
   margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
 }
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
-}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7086,32 +7093,6 @@
   --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
   --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
-
-.x-input-group--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
-}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7306,26 +7287,26 @@
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
 :root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
 }
 
-.x-icon--l {
-  --x-size-width-icon-default: var(--x-size-width-icon-l);
-  --x-size-height-icon-default: var(--x-size-height-icon-l);
+.x-icon--m {
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
 }
 :root {
   --x-size-width-icon-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
 }
 :root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
 }
 
-.x-icon--m {
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
+.x-icon--l {
+  --x-size-width-icon-default: var(--x-size-width-icon-l);
+  --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
 :root {
   --x-color-stroke-icon-default: currentColor;
@@ -7336,11 +7317,6 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7376,6 +7352,11 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 
 .x-grid-list {
   margin: 0;
@@ -7600,6 +7581,19 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
+:root {
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
 
 .x-facet--outlined.x-facet,
 .x-facet--outlined .x-facet {
@@ -7615,19 +7609,6 @@
   --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
 }
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
 :root {
   --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
   --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7832,6 +7813,18 @@
   --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
   --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
 }
+:root {
+  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-card: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 
 .x-facet--card.x-facet,
 .x-facet--card .x-facet {
@@ -7847,19 +7840,7 @@
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }
 :root {
-  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-card: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
-}
-:root {
-  --x-size-width-dropdown-s: 74px;
+  --x-size-width-dropdown-xl: 282px;
 }
 :root {
   --x-size-width-dropdown-xl: 282px;
@@ -7869,7 +7850,14 @@
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
 :root {
-  --x-size-width-dropdown-xl: 282px;
+  --x-size-width-dropdown-s: 74px;
+}
+:root {
+  --x-size-width-dropdown-s: 74px;
+}
+
+.x-dropdown.x-dropdown--s {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
 }
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
@@ -7923,11 +7911,7 @@
   );
 }
 :root {
-  --x-size-width-dropdown-s: 74px;
-}
-
-.x-dropdown.x-dropdown--s {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
+  --x-size-width-dropdown-m: 130px;
 }
 :root {
   --x-size-width-dropdown-m: 130px;
@@ -7936,9 +7920,6 @@
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7963,9 +7944,6 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8032,6 +8010,9 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
@@ -8109,6 +8090,19 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
+:root {
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8364,19 +8358,6 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
 
 .x-dropdown--card {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8417,16 +8398,6 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
-:root {
-  --x-color-background-button-secondary: transparent;
-  --x-color-border-button-secondary: var(--x-color-border-button-default);
-  --x-color-text-button-secondary: var(--x-color-border-button-default);
-  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
-}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8458,6 +8429,16 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
+:root {
+  --x-color-background-button-secondary: transparent;
+  --x-color-border-button-secondary: var(--x-color-border-button-default);
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
 
 .x-button--secondary.x-button,
 .x-button--secondary .x-button {
@@ -8476,13 +8457,6 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
-:root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -8501,6 +8475,13 @@
   --x-size-padding-left-button-default: 0;
   --x-size-padding-right-button-default: 0;
 }
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8566,11 +8547,6 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
@@ -8588,6 +8564,11 @@
 .x-button--ghost.x-button--ghost-end .x-button {
   --x-size-padding-right-button-default: 0;
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,6 +8684,38 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
+
+.x-button--card.x-button,
+.x-button--card .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-card
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-card
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-card
+  );
+}
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-color-background-badge-default: var(--x-color-base-neutral-10);
   --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8752,38 +8765,6 @@
 .x-badge-container {
   position: relative;
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
-
-.x-button--card.x-button,
-.x-button--card .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-card
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-card
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-card
-  );
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8825,4 +8806,23 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
+}
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}
+
+.x-picture--colored.x-picture {
+  --x-color-background-picture-default: var(--x-color-background-picture-colored);
+}
+.x-picture--colored.x-picture .x-picture-image {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
+}
+.x-picture--colored.x-picture .x-picture--fallback {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
+}
+.x-picture--colored.x-picture .x-picture--placeholder {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }