@empathyco/x-components 3.0.0-alpha.20 → 3.0.0-alpha.24

package/design-system/list-default.css

@@ -24,6 +24,7 @@
   font-size: var(--x-size-font-text);
   font-weight: var(--x-number-font-weight-text);
   line-height: var(--x-size-line-height-text);
+  color: var(--x-color-text-default);
   min-width: 0; }
   @media not all and (min-resolution: 0.001dpcm) {
     .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
@@ -108,6 +109,10 @@
   -ms-flex-item-align: stretch;
       align-self: stretch; }
 
+.x-list > .x-list__item--flex-none {
+  -ms-flex: none;
+      flex: none; }
+
 .x-list > .x-list__item--01 {
   -ms-flex: 1 12 auto;
       flex: 1 12 auto; }

package/design-system/list-gap.css

@@ -5,7 +5,13 @@
   --x-size-gap-list-04: var(--x-size-base-04);
   --x-size-gap-list-05: var(--x-size-base-05);
   --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07); }
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13); }
 
 @use 'sass:string';
 .x-list--gap-01.x-list {
@@ -140,3 +146,117 @@
       .x-list--gap-07.x-list.x-list--wrap > *:not(:last-child) {
         margin-right: var(--x-size-gap-list-07);
         margin-bottom: var(--x-size-gap-list-07); } }
+
+.x-list--gap-08.x-list {
+  gap: var(--x-size-gap-list-08); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-08.x-list:not(.x-list--horizontal), .x-list--gap-08.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-08.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-08.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-08); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-08.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-08.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-08); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-08.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-08.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-08);
+        margin-bottom: var(--x-size-gap-list-08); } }
+
+.x-list--gap-09.x-list {
+  gap: var(--x-size-gap-list-09); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-09.x-list:not(.x-list--horizontal), .x-list--gap-09.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-09.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-09.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-09); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-09.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-09.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-09); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-09.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-09.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-09);
+        margin-bottom: var(--x-size-gap-list-09); } }
+
+.x-list--gap-10.x-list {
+  gap: var(--x-size-gap-list-10); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-10.x-list:not(.x-list--horizontal), .x-list--gap-10.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-10.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-10.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-10); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-10.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-10.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-10); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-10.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-10.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-10);
+        margin-bottom: var(--x-size-gap-list-10); } }
+
+.x-list--gap-11.x-list {
+  gap: var(--x-size-gap-list-11); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-11.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-11.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-11); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-11.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-11.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-11); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-11.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-11.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-11);
+        margin-bottom: var(--x-size-gap-list-11); } }
+
+.x-list--gap-12.x-list {
+  gap: var(--x-size-gap-list-12); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-12.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-12.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-12); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-12.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-12.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-12); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-12.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-12.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-12);
+        margin-bottom: var(--x-size-gap-list-12); } }
+
+.x-list--gap-13.x-list {
+  gap: var(--x-size-gap-list-13); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-13.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-13.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-13); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-13.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-13); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-13.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-13);
+        margin-bottom: var(--x-size-gap-list-13); } }

package/design-system/list-padding.css

@@ -1,3 +1,4 @@
+/* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
   --x-size-padding-list-02: var(--x-size-base-02);
@@ -5,8 +6,15 @@
   --x-size-padding-list-04: var(--x-size-base-04);
   --x-size-padding-list-05: var(--x-size-base-05);
   --x-size-padding-list-06: var(--x-size-base-06);
-  --x-size-padding-list-07: var(--x-size-base-07); }
+  --x-size-padding-list-07: var(--x-size-base-07);
+  --x-size-padding-list-08: var(--x-size-base-08);
+  --x-size-padding-list-09: var(--x-size-base-09);
+  --x-size-padding-list-10: var(--x-size-base-10);
+  --x-size-padding-list-11: var(--x-size-base-11);
+  --x-size-padding-list-12: var(--x-size-base-12);
+  --x-size-padding-list-13: var(--x-size-base-13); }
 
+/* @deprecated */
 @use 'sass:string';
 [class*='x-list--padding-'].x-list.x-list--padding-top:not(.x-list--padding-right) {
   padding-right: 0; }
@@ -155,3 +163,99 @@
       gap: 0; }
       .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
         margin-right: var(--x-size-gap-list-07); } }
+
+.x-list--padding-08.x-list {
+  padding: var(--x-size-padding-list-08); }
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-08); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list {
+      gap: 0; }
+      .x-list--gap-.x-list > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-08); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-08); } }
+
+.x-list--padding-09.x-list {
+  padding: var(--x-size-padding-list-09); }
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-09); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list {
+      gap: 0; }
+      .x-list--gap-.x-list > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-09); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-09); } }
+
+.x-list--padding-10.x-list {
+  padding: var(--x-size-padding-list-10); }
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-10); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list {
+      gap: 0; }
+      .x-list--gap-.x-list > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-10); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-10); } }
+
+.x-list--padding-11.x-list {
+  padding: var(--x-size-padding-list-11); }
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-11); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list {
+      gap: 0; }
+      .x-list--gap-.x-list > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-11); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-11); } }
+
+.x-list--padding-12.x-list {
+  padding: var(--x-size-padding-list-12); }
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-12); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list {
+      gap: 0; }
+      .x-list--gap-.x-list > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-12); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-12); } }
+
+.x-list--padding-13.x-list {
+  padding: var(--x-size-padding-list-13); }
+
+.x-list--gap-.x-list {
+  gap: var(--x-size-gap-list-13); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list {
+      gap: 0; }
+      .x-list--gap-.x-list > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-13); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-13); } }

package/design-system/row-padding.css

@@ -1,3 +1,4 @@
+/* @deprecated */
 :root {
   --x-size-padding-row-02: var(--x-size-base-02);
   --x-size-padding-row-03: var(--x-size-base-03);
@@ -5,6 +6,7 @@
   --x-size-padding-row-05: var(--x-size-base-05);
   --x-size-padding-row-06: var(--x-size-base-06); }
 
+/* @deprecated */
 .x-row--padding-02 {
   --x-size-padding-row: var(--x-size-padding-row-02); }
 

package/design-system/utilities-background-color.css

@@ -0,0 +1,20 @@
+.x-background--lead {
+  background-color: var(--x-color-base-lead) !important; }
+
+.x-background--auxiliary {
+  background-color: var(--x-color-base-auxiliary) !important; }
+
+.x-background--neutral-10 {
+  background-color: var(--x-color-base-neutral-10) !important; }
+
+.x-background--neutral-35 {
+  background-color: var(--x-color-base-neutral-35) !important; }
+
+.x-background--neutral-70 {
+  background-color: var(--x-color-base-neutral-70) !important; }
+
+.x-background--neutral-95 {
+  background-color: var(--x-color-base-neutral-95) !important; }
+
+.x-background--neutral-100 {
+  background-color: var(--x-color-base-neutral-100) !important; }

package/design-system/utilities-border-color.css

@@ -0,0 +1,20 @@
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important; }
+
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important; }
+
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important; }
+
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important; }
+
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important; }
+
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important; }
+
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important; }