@sumup-oss/design-tokens 9.1.0-next.2 → 10.0.0

package/consumer-scoped.css

@@ -2,165 +2,165 @@
   --lightningcss-light: ;
   --lightningcss-dark: initial;
   color-scheme: dark;
-  --cui-bg-normal: #190618;
-  --cui-bg-normal-hovered: #30172c;
-  --cui-bg-normal-pressed: #45253f;
-  --cui-bg-normal-disabled: rgba(227, 226, 214, .4);
-  --cui-bg-subtle: #261525;
-  --cui-bg-subtle-hovered: #7d5b76;
-  --cui-bg-subtle-pressed: #ba9eb4;
-  --cui-bg-subtle-disabled: rgba(202, 182, 198, .4);
-  --cui-bg-highlight: #4f374a;
-  --cui-bg-highlight-hovered: #674b61;
-  --cui-bg-highlight-pressed: #7b5c74;
-  --cui-bg-highlight-disabled: rgba(124, 93, 118, .2);
+  --cui-bg-normal: #250723;
+  --cui-bg-normal-hovered: #34152f;
+  --cui-bg-normal-pressed: #3f1f39;
+  --cui-bg-normal-disabled: rgba(47, 16, 43, .6);
+  --cui-bg-subtle: #3a1037;
+  --cui-bg-subtle-hovered: #40153c;
+  --cui-bg-subtle-pressed: #44193e;
+  --cui-bg-subtle-disabled: rgba(58, 16, 55, .6);
+  --cui-bg-highlight: #63215e;
+  --cui-bg-highlight-hovered: #6b2966;
+  --cui-bg-highlight-pressed: #73316e;
+  --cui-bg-highlight-disabled: rgba(99, 33, 94, .4);
   --cui-bg-strong: #fbfbf9;
-  --cui-bg-strong-hovered: #e3e2d6;
-  --cui-bg-strong-pressed: #d0cdc3;
-  --cui-bg-strong-disabled: rgba(227, 226, 214, .4);
-  --cui-bg-accent: #382233;
-  --cui-bg-accent-hovered: #775c71;
-  --cui-bg-accent-pressed: #c09bb8;
-  --cui-bg-accent-disabled: rgba(193, 184, 175, .4);
-  --cui-bg-accent-strong: #f0f1e7;
-  --cui-bg-accent-strong-hovered: #d8d7c7;
-  --cui-bg-accent-strong-pressed: #c9c8b6;
-  --cui-bg-accent-strong-disabled: rgba(227, 226, 214, .4);
-  --cui-bg-neutral: #443e3e;
-  --cui-bg-neutral-hovered: #756c6c;
-  --cui-bg-neutral-pressed: #b7b0a9;
-  --cui-bg-neutral-disabled: rgba(51, 47, 47, .4);
-  --cui-bg-neutral-strong: #635757;
-  --cui-bg-neutral-strong-hovered: #605a5a;
-  --cui-bg-neutral-strong-pressed: #756c6c;
-  --cui-bg-neutral-strong-disabled: rgba(117, 108, 108, .2);
+  --cui-bg-strong-hovered: #eeede8;
+  --cui-bg-strong-pressed: #dfddd3;
+  --cui-bg-strong-disabled: rgba(251, 251, 249, .2);
+  --cui-bg-accent: #3a1037;
+  --cui-bg-accent-hovered: #421839;
+  --cui-bg-accent-pressed: #4a2041;
+  --cui-bg-accent-disabled: rgba(58, 16, 55, .6);
+  --cui-bg-accent-strong: #fbfbf9;
+  --cui-bg-accent-strong-hovered: #eeede8;
+  --cui-bg-accent-strong-pressed: #dfddd3;
+  --cui-bg-accent-strong-disabled: rgba(251, 251, 249, .15);
+  --cui-bg-neutral: rgba(104, 79, 98, .35);
+  --cui-bg-neutral-hovered: #4c4646;
+  --cui-bg-neutral-pressed: #544e4e;
+  --cui-bg-neutral-disabled: rgba(68, 62, 62, .6);
+  --cui-bg-neutral-strong: #684f62;
+  --cui-bg-neutral-strong-hovered: #6e6262;
+  --cui-bg-neutral-strong-pressed: #796c6c;
+  --cui-bg-neutral-strong-disabled: rgba(99, 87, 87, .4);
   --cui-bg-success: rgba(32, 184, 57, .2);
-  --cui-bg-success-hovered: rgba(32, 184, 57, .4);
-  --cui-bg-success-pressed: rgba(32, 184, 57, .6);
-  --cui-bg-success-disabled: rgba(32, 184, 57, .1);
-  --cui-bg-success-strong: #20b839;
-  --cui-bg-success-strong-hovered: #179d2d;
-  --cui-bg-success-strong-pressed: #118324;
-  --cui-bg-success-strong-disabled: rgba(32, 184, 57, .1);
-  --cui-bg-warning: rgba(248, 171, 47, .2);
-  --cui-bg-warning-hovered: rgba(248, 171, 47, .4);
-  --cui-bg-warning-pressed: rgba(248, 171, 47, .6);
-  --cui-bg-warning-disabled: rgba(248, 171, 47, .1);
-  --cui-bg-warning-strong: #f8ab2f;
-  --cui-bg-warning-strong-hovered: #e89c21;
-  --cui-bg-warning-strong-pressed: #d0850c;
-  --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .1);
-  --cui-bg-danger: rgba(255, 76, 5, .3);
-  --cui-bg-danger-hovered: #e76942;
-  --cui-bg-danger-pressed: #cd5531;
-  --cui-bg-danger-disabled: rgba(255, 132, 95, .2);
-  --cui-bg-danger-strong: #ff4c05;
-  --cui-bg-danger-strong-hovered: #e94201;
-  --cui-bg-danger-strong-pressed: #d24008;
-  --cui-bg-danger-strong-disabled: rgba(255, 72, 0, .1);
-  --cui-bg-promo: #0bcbfb;
-  --cui-bg-promo-hovered: #0ab1db;
-  --cui-bg-promo-pressed: #0ab3de;
-  --cui-bg-promo-disabled: rgba(11, 203, 251, .1);
-  --cui-bg-promo-strong: #0bcbfb;
-  --cui-bg-promo-strong-hovered: #0ab1db;
-  --cui-bg-promo-strong-pressed: #0ab3de;
-  --cui-bg-promo-strong-disabled: rgba(11, 203, 251, .1);
+  --cui-bg-success-hovered: rgba(37, 193, 63, .2);
+  --cui-bg-success-pressed: rgba(43, 203, 69, .2);
+  --cui-bg-success-disabled: rgba(32, 184, 57, 0);
+  --cui-bg-success-strong: #89ec90;
+  --cui-bg-success-strong-hovered: #28cc44;
+  --cui-bg-success-strong-pressed: #30d84c;
+  --cui-bg-success-strong-disabled: rgba(32, 184, 57, .4);
+  --cui-bg-warning: rgba(242, 219, 47, .2);
+  --cui-bg-warning-hovered: rgba(255, 178, 51, .2);
+  --cui-bg-warning-pressed: rgba(255, 186, 55, .2);
+  --cui-bg-warning-disabled: rgba(248, 171, 47, 0);
+  --cui-bg-warning-strong: #efdf69;
+  --cui-bg-warning-strong-hovered: #fabb50;
+  --cui-bg-warning-strong-pressed: #fcc96e;
+  --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .4);
+  --cui-bg-danger: rgba(255, 75, 90, .2);
+  --cui-bg-danger-hovered: rgba(255, 81, 8, .3);
+  --cui-bg-danger-pressed: rgba(255, 87, 12, .3);
+  --cui-bg-danger-disabled: rgba(255, 76, 5, 0);
+  --cui-bg-danger-strong: #ff7d88;
+  --cui-bg-danger-strong-hovered: #ff6122;
+  --cui-bg-danger-strong-pressed: #ff753a;
+  --cui-bg-danger-strong-disabled: rgba(255, 76, 5, .4);
+  --cui-bg-promo: rgba(255, 97, 242, .18);
+  --cui-bg-promo-hovered: #ff65fa;
+  --cui-bg-promo-pressed: #ff69ff;
+  --cui-bg-promo-disabled: rgba(255, 97, 242, .6);
+  --cui-bg-promo-strong: #ffacf8;
+  --cui-bg-promo-strong-hovered: #bb54b1;
+  --cui-bg-promo-strong-pressed: #c366bb;
+  --cui-bg-promo-strong-disabled: rgba(179, 66, 169, .4);
   --cui-bg-brand: #ff61f2;
-  --cui-bg-brand-hovered: #ff3def;
+  --cui-bg-brand-hovered: #eb58df;
   --cui-bg-brand-pressed: #da4ece;
-  --cui-bg-brand-disabled: rgba(255, 97, 242, .1);
-  --cui-fg-normal: #f0f1e7;
-  --cui-fg-normal-hovered: #e3e2d6;
-  --cui-fg-normal-pressed: #332f2f;
-  --cui-fg-normal-disabled: rgba(227, 226, 214, .4);
-  --cui-fg-subtle: #c4b0bb;
-  --cui-fg-subtle-hovered: #78656e;
-  --cui-fg-subtle-pressed: #b29aae;
-  --cui-fg-subtle-disabled: rgba(183, 176, 169, .4);
-  --cui-fg-placeholder: #8c7783;
-  --cui-fg-placeholder-hovered: #584c53;
-  --cui-fg-placeholder-pressed: #2f262b;
-  --cui-fg-placeholder-disabled: rgba(117, 108, 108, .4);
-  --cui-fg-on-strong: #22001c;
-  --cui-fg-on-strong-hovered: #30172c;
-  --cui-fg-on-strong-pressed: #45253f;
-  --cui-fg-on-strong-disabled: rgba(227, 214, 225, .4);
-  --cui-fg-on-strong-subtle: rgba(34, 0, 28, .7);
-  --cui-fg-on-strong-subtle-hovered: rgba(34, 0, 28, .5);
-  --cui-fg-on-strong-subtle-pressed: rgba(34, 0, 28, .2);
-  --cui-fg-on-strong-subtle-disabled: rgba(34, 0, 28, .3);
-  --cui-fg-accent: #b9aead;
-  --cui-fg-accent-hovered: #968c8b;
-  --cui-fg-accent-pressed: #756c6c;
-  --cui-fg-accent-disabled: rgba(185, 174, 173, .2);
-  --cui-fg-neutral: #9a8d94;
-  --cui-fg-neutral-hovered: #584e4e;
-  --cui-fg-neutral-pressed: #332f2f;
-  --cui-fg-neutral-disabled: rgba(117, 108, 108, .4);
-  --cui-fg-success: #1fbc3a;
-  --cui-fg-success-hovered: #18aa30;
-  --cui-fg-success-pressed: #16982c;
-  --cui-fg-success-disabled: rgba(31, 188, 58, .2);
-  --cui-fg-warning: #df9d30;
-  --cui-fg-warning-hovered: #9d6814;
-  --cui-fg-warning-pressed: #8e5c0c;
-  --cui-fg-warning-disabled: rgba(174, 121, 35, .2);
-  --cui-fg-danger: #ff845f;
-  --cui-fg-danger-hovered: #ce3c02;
-  --cui-fg-danger-pressed: #b93502;
-  --cui-fg-danger-disabled: rgba(230, 65, 0, .2);
-  --cui-fg-promo: #0bcbfb;
-  --cui-fg-promo-hovered: #0ab1db;
-  --cui-fg-promo-pressed: #0ab3de;
-  --cui-fg-promo-disabled: rgba(11, 203, 251, .2);
+  --cui-bg-brand-disabled: rgba(255, 97, 242, .4);
+  --cui-fg-normal: #fbfbf9;
+  --cui-fg-normal-hovered: #fbfbf9;
+  --cui-fg-normal-pressed: #fbfbf9;
+  --cui-fg-normal-disabled: rgba(251, 251, 249, .4);
+  --cui-fg-subtle: rgba(253, 234, 255, .6);
+  --cui-fg-subtle-hovered: rgba(255, 255, 255, .5);
+  --cui-fg-subtle-pressed: rgba(255, 255, 255, .5);
+  --cui-fg-subtle-disabled: rgba(251, 251, 249, 0);
+  --cui-fg-placeholder: rgba(251, 251, 249, .3);
+  --cui-fg-placeholder-hovered: rgba(255, 255, 255, .3);
+  --cui-fg-placeholder-pressed: rgba(255, 255, 255, .3);
+  --cui-fg-placeholder-disabled: rgba(251, 251, 249, 0);
+  --cui-fg-on-strong: #1e1c1c;
+  --cui-fg-on-strong-hovered: #1e1c1c;
+  --cui-fg-on-strong-pressed: #1e1c1c;
+  --cui-fg-on-strong-disabled: rgba(30, 28, 28, .6);
+  --cui-fg-on-strong-subtle: rgba(30, 28, 28, .7);
+  --cui-fg-on-strong-subtle-hovered: #3a3635;
+  --cui-fg-on-strong-subtle-pressed: #3a3635;
+  --cui-fg-on-strong-subtle-disabled: rgba(58, 54, 53, .4);
+  --cui-fg-accent: #fbfbf9;
+  --cui-fg-accent-hovered: #d2d0ca;
+  --cui-fg-accent-pressed: #b8b6b2;
+  --cui-fg-accent-disabled: rgba(251, 251, 249, .4);
+  --cui-fg-neutral: #ccbdc6;
+  --cui-fg-neutral-hovered: #a89da4;
+  --cui-fg-neutral-pressed: #b6abb2;
+  --cui-fg-neutral-disabled: rgba(154, 141, 148, .4);
+  --cui-fg-success: #37f1a4;
+  --cui-fg-success-hovered: #47feb6;
+  --cui-fg-success-pressed: #57ffc8;
+  --cui-fg-success-disabled: rgba(55, 241, 164, .4);
+  --cui-fg-warning: #e8e538;
+  --cui-fg-warning-hovered: #f3fe58;
+  --cui-fg-warning-pressed: #f5ff76;
+  --cui-fg-warning-disabled: rgba(241, 238, 55, .4);
+  --cui-fg-danger: #ff5866;
+  --cui-fg-danger-hovered: #fd6e72;
+  --cui-fg-danger-pressed: #fd8086;
+  --cui-fg-danger-disabled: rgba(253, 90, 93, .4);
+  --cui-fg-promo: #ff7bf4;
+  --cui-fg-promo-hovered: #bb54b2;
+  --cui-fg-promo-pressed: #c366ba;
+  --cui-fg-promo-disabled: rgba(179, 66, 169, .4);
   --cui-fg-brand: #ff61f2;
   --cui-fg-brand-hovered: #eb58df;
   --cui-fg-brand-pressed: #da4ece;
-  --cui-fg-brand-disabled: rgba(255, 97, 242, .2);
-  --cui-border-normal: #70626e;
-  --cui-border-normal-hovered: #544a53;
-  --cui-border-normal-pressed: #3b343a;
-  --cui-border-normal-disabled: rgba(112, 98, 110, .5);
-  --cui-border-subtle: #40333a;
-  --cui-border-subtle-hovered: #2e252a;
-  --cui-border-subtle-pressed: #241d21;
-  --cui-border-subtle-disabled: rgba(64, 51, 58, .5);
-  --cui-border-divider: #40333a;
-  --cui-border-divider-hovered: #2e252a;
-  --cui-border-divider-pressed: #241d21;
-  --cui-border-divider-disabled: rgba(64, 51, 58, .5);
+  --cui-fg-brand-disabled: rgba(255, 97, 242, .4);
+  --cui-border-normal: rgba(251, 251, 249, .3);
+  --cui-border-normal-hovered: rgba(255, 255, 255, .3);
+  --cui-border-normal-pressed: rgba(255, 255, 255, .3);
+  --cui-border-normal-disabled: rgba(251, 251, 249, 0);
+  --cui-border-subtle: rgba(251, 251, 249, .15);
+  --cui-border-subtle-hovered: rgba(255, 255, 255, .15);
+  --cui-border-subtle-pressed: rgba(255, 255, 255, .15);
+  --cui-border-subtle-disabled: rgba(251, 251, 249, 0);
+  --cui-border-divider: rgba(251, 251, 249, .1);
+  --cui-border-divider-hovered: rgba(255, 255, 255, .3);
+  --cui-border-divider-pressed: rgba(255, 255, 255, .3);
+  --cui-border-divider-disabled: rgba(251, 251, 249, 0);
   --cui-border-strong: #e3e2d6;
-  --cui-border-strong-hovered: #d8d7c7;
-  --cui-border-strong-pressed: #c9c8b6;
-  --cui-border-strong-disabled: rgba(227, 226, 214, .4);
+  --cui-border-strong-hovered: #d3d2c5;
+  --cui-border-strong-pressed: #c3c1b4;
+  --cui-border-strong-disabled: rgba(227, 226, 214, .2);
   --cui-border-accent: #d0cdc3;
-  --cui-border-accent-hovered: #b7b0a9;
-  --cui-border-accent-pressed: #756c6c;
-  --cui-border-accent-disabled: rgba(208, 205, 195, .2);
-  --cui-border-success: #20b839;
-  --cui-border-success-hovered: #12a129;
-  --cui-border-success-pressed: #0f9024;
-  --cui-border-success-disabled: rgba(32, 184, 57, .2);
-  --cui-border-warning: #f8ab2f;
-  --cui-border-warning-hovered: #e89c21;
-  --cui-border-warning-pressed: #d0850c;
-  --cui-border-warning-disabled: rgba(248, 171, 47, .4);
-  --cui-border-danger: #ff4800;
-  --cui-border-danger-hovered: #bd2c19;
-  --cui-border-danger-pressed: #cc3a00;
-  --cui-border-danger-disabled: rgba(255, 72, 0, .4);
-  --cui-border-promo: #0bcbfb;
-  --cui-border-promo-hovered: #0ab1db;
-  --cui-border-promo-pressed: #0ab3de;
-  --cui-border-promo-disabled: rgba(11, 203, 251, .4);
+  --cui-border-accent-hovered: #a7a294;
+  --cui-border-accent-pressed: #8d887c;
+  --cui-border-accent-disabled: rgba(208, 205, 195, .4);
+  --cui-border-success: #37f1a4;
+  --cui-border-success-hovered: #47feb6;
+  --cui-border-success-pressed: #57ffc8;
+  --cui-border-success-disabled: rgba(55, 241, 164, .4);
+  --cui-border-warning: #f1ee37;
+  --cui-border-warning-hovered: #f3fe58;
+  --cui-border-warning-pressed: #f5ff76;
+  --cui-border-warning-disabled: rgba(241, 238, 55, .4);
+  --cui-border-danger: #fd5a5d;
+  --cui-border-danger-hovered: #fd6e72;
+  --cui-border-danger-pressed: #fd8086;
+  --cui-border-danger-disabled: rgba(253, 90, 93, .4);
+  --cui-border-promo: #b342a9;
+  --cui-border-promo-hovered: #bb54b2;
+  --cui-border-promo-pressed: #c366ba;
+  --cui-border-promo-disabled: rgba(179, 66, 169, .4);
   --cui-border-brand: #ff61f2;
   --cui-border-brand-hovered: #eb58df;
   --cui-border-brand-pressed: #da4ece;
-  --cui-border-brand-disabled: rgba(255, 97, 242, .2);
+  --cui-border-brand-disabled: rgba(255, 97, 242, .4);
   --cui-bg-overlay: rgba(35, 31, 35, .7);
-  --cui-bg-elevated: #473143;
-  --cui-border-focus: #f0f1e7;
+  --cui-bg-elevated: #322430;
+  --cui-border-focus: #fbfbf9;
   --cui-border-radius-bit: 4px;
   --cui-border-radius-byte: 10px;
   --cui-border-radius-kilo: 12px;
@@ -172,8 +172,8 @@
   --cui-border-radius-pill: 999999px;
   --cui-border-width-kilo: 1px;
   --cui-border-width-mega: 2px;
-  --cui-font-stack-default: "SumUp Narrow", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --cui-font-stack-display: "SumUp Black", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --cui-font-stack-default: "SumUp Narrow", "SumUp Narrow fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --cui-font-stack-display: "SumUp Black", "SumUp Black fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --cui-font-stack-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
   --cui-font-weight-regular: 375;
   --cui-font-weight-semibold: 550;
@@ -215,7 +215,7 @@
   --cui-body-l-font-size: 1.3125rem;
   --cui-body-l-line-height: 1.625rem;
   --cui-body-m-font-size: 1.0625rem;
-  --cui-body-m-line-height: 1.5rem;
+  --cui-body-m-line-height: 1.375rem;
   --cui-body-s-font-size: .9375rem;
   --cui-body-s-line-height: 1.25rem;
   --cui-compact-l-font-size: 1.125rem;