@empathyco/x-components 3.0.0-alpha.37 → 3.0.0-alpha.41

package/design-system/full-theme.css

@@ -12,9 +12,11 @@
   --x-color-base-neutral-35: #595959;
   --x-color-base-neutral-70: #b3b3b3;
   --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff; }
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26; }
 
-/* Update this value if adding more values */
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -2811,8 +2813,8 @@
 .x-suggestion {
   display: flex;
   flex-flow: row nowrap;
-  align-items: flex-start;
   box-sizing: border-box;
+  align-items: var(--x-string-align-items-suggestion-default);
   border: none;
   background-color: var(--x-color-background-suggestion-default);
   color: var(--x-color-text-suggestion-default);
@@ -2831,7 +2833,8 @@
         margin-right: var(--x-size-gap-suggestion-default); } }
   .x-suggestion__query {
     flex: 1 1 auto; }
-  .x-suggestion__matching-part, .x-suggestion .x-identifier-result__matching-part {
+  .x-suggestion__matching-part,
+  .x-suggestion .x-identifier-result__matching-part {
     font-family: var(--x-font-family-suggestion-matching-part-default);
     font-size: var(--x-size-font-suggestion-matching-part-default);
     line-height: var(--x-size-line-height-suggestion-matching-part-default);
@@ -2849,6 +2852,7 @@
     flex: none; }
 
 :root {
+  --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
   --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
   --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
@@ -2938,15 +2942,18 @@
       .x-tag > *:not(:last-child) {
         margin-right: var(--x-size-gap-tag-default); } }
   .x-tag.x-filter {
-    --x-color-background-filter: transparent;
-    --x-size-border-width-filter: 0;
-    --x-color-text-filter: var(--x-color-text-tag-default);
-    --x-size-padding-filter: 0;
-    --x-size-gap-filter: var(--x-size-gap-tag-default);
-    --x-font-family-filter: var(--x-font-family-tag-default);
-    --x-size-font-filter: var(--x-size-font-tag-default);
-    --x-number-font-weight-filter: var(--x-number-font-weight-tag-default);
-    --x-size-line-height-filter: var(--x-size-line-height-tag-default); }
+    --x-color-background-filter-default: transparent;
+    --x-size-border-width-filter-default: 0;
+    --x-color-text-filter-default: var(--x-color-text-tag-default);
+    --x-size-padding-top-filter-default: 0;
+    --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
+    --x-size-padding-bottom-filter-default: 0;
+    --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
+    --x-size-gap-filter-default: var(--x-size-gap-tag-default);
+    --x-font-family-filter-default: var(--x-font-family-tag-default);
+    --x-size-font-filter-default: var(--x-size-font-tag-default);
+    --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
+    --x-size-line-height-filter-default: var(--x-size-line-height-tag-default); }
   .x-tag.x-tag.x-tag--is-selected {
     background-color: var(--x-color-background-tag-default-selected);
     border-color: var(--x-color-border-tag-default-selected);
@@ -2956,11 +2963,13 @@
     font-size: var(--x-size-font-tag-default-selected);
     font-weight: var(--x-number-font-weight-tag-default-selected); }
     .x-tag.x-tag.x-tag--is-selected.x-filter {
-      --x-color-text-filter: var(--x-color-text-tag-default-selected);
-      --x-font-family-filter: var(--x-font-family-tag-default-selected);
-      --x-size-font-filter: var(--x-size-font-tag-default-selected);
-      --x-number-font-weight-filter: var(--x-number-font-weight-tag-default-selected);
-      --x-size-line-height-filter: var(--x-size-line-height-tag-default-selected); }
+      --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
+      --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
+      --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
+      --x-number-font-weight-filter-count-default-selected: var(
+        --x-number-font-weight-tag-default-selected
+      );
+      --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);
@@ -3028,7 +3037,7 @@
   --x-color-text-default: var(--x-color-text-accent); }
 
 :root {
-  --x-color-text-accent: var(--x-color-base-auxiliary); }
+  --x-color-text-accent: var(--x-color-base-accent); }
 
 .x-text--bold.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-bold); }
@@ -3187,6 +3196,15 @@
 .x-background--neutral-100 {
   background-color: var(--x-color-base-neutral-100) !important; }
 
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important; }
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important; }
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important; }
+
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important; }
 
@@ -3208,30 +3226,15 @@
 .x-border-color--neutral-100 {
   border-color: var(--x-color-base-neutral-100) !important; }
 
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important; }
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important; }
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important; }
 
-@use 'sass:string';
 .x-border-radius--00 {
   border-radius: 0 !important; }
 
@@ -4746,46 +4749,6 @@
   border-width: 0px !important;
   border-style: solid !important; }
 
-.x-border-width--01 {
-  border-width: 1px !important;
-  border-style: solid !important; }
-
-.x-border-width--02 {
-  border-width: 2px !important;
-  border-style: solid !important; }
-
-.x-border-width--03 {
-  border-width: 3px !important;
-  border-style: solid !important; }
-
-.x-border-width--04 {
-  border-width: 4px !important;
-  border-style: solid !important; }
-
-.x-border-width--05 {
-  border-width: 5px !important;
-  border-style: solid !important; }
-
-.x-border-width--06 {
-  border-width: 6px !important;
-  border-style: solid !important; }
-
-.x-border-width--07 {
-  border-width: 7px !important;
-  border-style: solid !important; }
-
-.x-border-width--08 {
-  border-width: 8px !important;
-  border-style: solid !important; }
-
-.x-border-width--09 {
-  border-width: 9px !important;
-  border-style: solid !important; }
-
-.x-border-width--10 {
-  border-width: 10px !important;
-  border-style: solid !important; }
-
 .x-border-width--top-00 {
   border-top-width: 0px !important;
   border-style: solid !important; }
@@ -4812,6 +4775,10 @@
 .x-border-width--left-00 {
   border-style: solid !important; }
 
+.x-border-width--01 {
+  border-width: 1px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-01 {
   border-top-width: 1px !important;
   border-style: solid !important; }
@@ -4838,6 +4805,10 @@
 .x-border-width--left-01 {
   border-style: solid !important; }
 
+.x-border-width--02 {
+  border-width: 2px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-02 {
   border-top-width: 2px !important;
   border-style: solid !important; }
@@ -4864,6 +4835,10 @@
 .x-border-width--left-02 {
   border-style: solid !important; }
 
+.x-border-width--03 {
+  border-width: 3px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-03 {
   border-top-width: 3px !important;
   border-style: solid !important; }
@@ -4890,6 +4865,10 @@
 .x-border-width--left-03 {
   border-style: solid !important; }
 
+.x-border-width--04 {
+  border-width: 4px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-04 {
   border-top-width: 4px !important;
   border-style: solid !important; }
@@ -4916,6 +4895,10 @@
 .x-border-width--left-04 {
   border-style: solid !important; }
 
+.x-border-width--05 {
+  border-width: 5px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-05 {
   border-top-width: 5px !important;
   border-style: solid !important; }
@@ -4942,6 +4925,10 @@
 .x-border-width--left-05 {
   border-style: solid !important; }
 
+.x-border-width--06 {
+  border-width: 6px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-06 {
   border-top-width: 6px !important;
   border-style: solid !important; }
@@ -4968,6 +4955,10 @@
 .x-border-width--left-06 {
   border-style: solid !important; }
 
+.x-border-width--07 {
+  border-width: 7px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-07 {
   border-top-width: 7px !important;
   border-style: solid !important; }
@@ -4994,6 +4985,10 @@
 .x-border-width--left-07 {
   border-style: solid !important; }
 
+.x-border-width--08 {
+  border-width: 8px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-08 {
   border-top-width: 8px !important;
   border-style: solid !important; }
@@ -5020,6 +5015,10 @@
 .x-border-width--left-08 {
   border-style: solid !important; }
 
+.x-border-width--09 {
+  border-width: 9px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-09 {
   border-top-width: 9px !important;
   border-style: solid !important; }
@@ -5046,6 +5045,10 @@
 .x-border-width--left-09 {
   border-style: solid !important; }
 
+.x-border-width--10 {
+  border-width: 10px !important;
+  border-style: solid !important; }
+
 .x-border-width--top-10 {
   border-top-width: 10px !important;
   border-style: solid !important; }
@@ -5079,37 +5082,69 @@
 .x-shadow--01 {
   box-shadow: var(--x-string-box-shadow-01) !important; }
 
+.x-shadow--bottom-01 {
+  box-shadow: var(--x-string-box-shadow-bottom-01) !important; }
+
 .x-shadow--02 {
   box-shadow: var(--x-string-box-shadow-02) !important; }
 
+.x-shadow--bottom-02 {
+  box-shadow: var(--x-string-box-shadow-bottom-02) !important; }
+
 .x-shadow--03 {
   box-shadow: var(--x-string-box-shadow-03) !important; }
 
+.x-shadow--bottom-03 {
+  box-shadow: var(--x-string-box-shadow-bottom-03) !important; }
+
 .x-shadow--04 {
   box-shadow: var(--x-string-box-shadow-04) !important; }
 
+.x-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important; }
+
 .x-shadow--05 {
   box-shadow: var(--x-string-box-shadow-05) !important; }
 
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important; }
+
 .x-shadow--06 {
   box-shadow: var(--x-string-box-shadow-06) !important; }
 
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important; }
+
 .x-shadow--07 {
   box-shadow: var(--x-string-box-shadow-07) !important; }
 
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important; }
+
 .x-shadow--08 {
   box-shadow: var(--x-string-box-shadow-08) !important; }
 
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important; }
+
 .x-shadow--09 {
   box-shadow: var(--x-string-box-shadow-09) !important; }
 
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important; }
+
 .x-shadow--10 {
   box-shadow: var(--x-string-box-shadow-10) !important; }
 
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important; }
+
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
 :root {
+  /* Shadow none */
+  --x-string-box-shadow-00: none;
   /* Shadow 1dp */
   --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
     0 1px 3px 0 rgba(0, 0, 0, 0.2);
@@ -5139,7 +5174,38 @@
     0 8px 10px -5px rgba(0, 0, 0, 0.2);
   /* Shadow 24dp */
   --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
-    0 11px 15px -7px rgba(0, 0, 0, 0.2); }
+    0 11px 15px -7px rgba(0, 0, 0, 0.2);
+  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
+  /* Shadow 1dp */
+  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
+    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
+  /* Shadow 2dp */
+  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 3dp */
+  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
+    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
+  /* Shadow 4dp */
+  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
+    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
+  /* Shadow 6dp */
+  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
+    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
+  /* Shadow 8dp */
+  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
+    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 9dp */
+  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
+    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
+  /* Shadow 12dp */
+  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
+    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
+  /* Shadow 16dp */
+  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
+    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  /* Shadow 24dp */
+  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
+    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); }
 
 .dev-mode .slot-helper {
   font-family: inherit;
@@ -5174,6 +5240,15 @@
 .x-font-color--neutral-100 {
   color: var(--x-color-base-neutral-100) !important; }
 
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important; }
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important; }
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important; }
+
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important; }
 
@@ -5183,30 +5258,6 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !important; }
 
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-margin--auto {
   margin: auto !important; }
 
@@ -5669,30 +5720,6 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important; }
 
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-padding--00 {
   padding: 0 !important; }
 
@@ -6133,3 +6160,4 @@
 
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important; }
+

package/design-system/suggestion-default.css

@@ -1,4 +1,5 @@
 :root {
+  --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
   --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
   --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
@@ -43,8 +44,8 @@
 .x-suggestion {
   display: flex;
   flex-flow: row nowrap;
-  align-items: flex-start;
   box-sizing: border-box;
+  align-items: var(--x-string-align-items-suggestion-default);
   border: none;
   background-color: var(--x-color-background-suggestion-default);
   color: var(--x-color-text-suggestion-default);
@@ -63,7 +64,8 @@
         margin-right: var(--x-size-gap-suggestion-default); } }
   .x-suggestion__query {
     flex: 1 1 auto; }
-  .x-suggestion__matching-part, .x-suggestion .x-identifier-result__matching-part {
+  .x-suggestion__matching-part,
+  .x-suggestion .x-identifier-result__matching-part {
     font-family: var(--x-font-family-suggestion-matching-part-default);
     font-size: var(--x-size-font-suggestion-matching-part-default);
     line-height: var(--x-size-line-height-suggestion-matching-part-default);

package/design-system/tag-default.css

@@ -72,15 +72,18 @@
       .x-tag > *:not(:last-child) {
         margin-right: var(--x-size-gap-tag-default); } }
   .x-tag.x-filter {
-    --x-color-background-filter: transparent;
-    --x-size-border-width-filter: 0;
-    --x-color-text-filter: var(--x-color-text-tag-default);
-    --x-size-padding-filter: 0;
-    --x-size-gap-filter: var(--x-size-gap-tag-default);
-    --x-font-family-filter: var(--x-font-family-tag-default);
-    --x-size-font-filter: var(--x-size-font-tag-default);
-    --x-number-font-weight-filter: var(--x-number-font-weight-tag-default);
-    --x-size-line-height-filter: var(--x-size-line-height-tag-default); }
+    --x-color-background-filter-default: transparent;
+    --x-size-border-width-filter-default: 0;
+    --x-color-text-filter-default: var(--x-color-text-tag-default);
+    --x-size-padding-top-filter-default: 0;
+    --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
+    --x-size-padding-bottom-filter-default: 0;
+    --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
+    --x-size-gap-filter-default: var(--x-size-gap-tag-default);
+    --x-font-family-filter-default: var(--x-font-family-tag-default);
+    --x-size-font-filter-default: var(--x-size-font-tag-default);
+    --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
+    --x-size-line-height-filter-default: var(--x-size-line-height-tag-default); }
   .x-tag.x-tag.x-tag--is-selected {
     background-color: var(--x-color-background-tag-default-selected);
     border-color: var(--x-color-border-tag-default-selected);
@@ -90,8 +93,10 @@
     font-size: var(--x-size-font-tag-default-selected);
     font-weight: var(--x-number-font-weight-tag-default-selected); }
     .x-tag.x-tag.x-tag--is-selected.x-filter {
-      --x-color-text-filter: var(--x-color-text-tag-default-selected);
-      --x-font-family-filter: var(--x-font-family-tag-default-selected);
-      --x-size-font-filter: var(--x-size-font-tag-default-selected);
-      --x-number-font-weight-filter: var(--x-number-font-weight-tag-default-selected);
-      --x-size-line-height-filter: var(--x-size-line-height-tag-default-selected); }
+      --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
+      --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
+      --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
+      --x-number-font-weight-filter-count-default-selected: var(
+        --x-number-font-weight-tag-default-selected
+      );
+      --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected); }

package/design-system/typography-accent.token.css

@@ -1,2 +1,2 @@
 :root {
-  --x-color-text-accent: var(--x-color-base-auxiliary); }
+  --x-color-text-accent: var(--x-color-base-accent); }

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

@@ -18,3 +18,12 @@
 
 .x-background--neutral-100 {
   background-color: var(--x-color-base-neutral-100) !important; }
+
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important; }
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important; }
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important; }

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

@@ -18,3 +18,12 @@
 
 .x-border-color--neutral-100 {
   border-color: var(--x-color-base-neutral-100) !important; }
+
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important; }
+
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important; }
+
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important; }

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

@@ -1,27 +1,3 @@
-/* Update this value if adding more values */
-:root {
-  --x-size-base-01: 2px;
-  --x-size-base-02: 4px;
-  --x-size-base-03: 8px;
-  --x-size-base-04: 12px;
-  --x-size-base-05: 16px;
-  --x-size-base-06: 24px;
-  --x-size-base-07: 32px;
-  --x-size-base-08: 40px;
-  --x-size-base-09: 48px;
-  --x-size-base-10: 56px;
-  --x-size-base-11: 64px;
-  --x-size-base-12: 72px;
-  --x-size-base-13: 80px;
-  --x-size-base-14: 96px;
-  --x-size-base-15: 112px;
-  --x-size-base-16: 144px;
-  --x-size-base-17: 176px;
-  --x-size-base-18: 208px;
-  --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
-@use 'sass:string';
 .x-border-radius--00 {
   border-radius: 0 !important; }