@xen-orchestra/web-core 0.1.1 → 0.3.0

package/lib/assets/css/_colors.pcss

@@ -1,125 +1,157 @@
 :root {
   --color-logo: #282467;
 
-  --color-grey-000: #000000;
-  --color-grey-100: #1a1b38;
-  --color-grey-200: #595a6f;
-  --color-grey-300: #9899a5;
-  --color-grey-400: #bfbfc6;
-  --color-grey-500: #e5e5e7;
-  --color-grey-600: #ffffff;
-
-  --background-color-primary: #ffffff;
-  --background-color-secondary: #f6f6f7;
-
-  --color-purple-base: #8f84ff;
-  --color-purple-d20: color(#8f84ff blend(black 20%));
-  --color-purple-d40: color(#8f84ff blend(black 40%));
-  --color-purple-d60: color(#8f84ff blend(black 60%));
-  --color-purple-l20: color(#8f84ff blend(white 20%));
-  --color-purple-l40: color(#8f84ff blend(white 40%));
-  --color-purple-l60: color(#8f84ff blend(white 60%));
-  --background-color-purple-10: color(white blend(#8f84ff 10%));
-  --background-color-purple-20: color(white blend(#8f84ff 20%));
-  --background-color-purple-30: color(white blend(#8f84ff 30%));
-  --background-color-purple-60: color(white blend(#8f84ff 60%));
-
-  --color-green-base: #2ca878;
-  --color-green-d20: color(#2ca878 blend(black 20%));
-  --color-green-d40: color(#2ca878 blend(black 40%));
-  --color-green-d60: color(#2ca878 blend(black 60%));
-  --color-green-l20: color(#2ca878 blend(white 20%));
-  --color-green-l40: color(#2ca878 blend(white 40%));
-  --color-green-l60: color(#2ca878 blend(white 60%));
-  --background-color-green-10: color(white blend(#2ca878 10%));
-  --background-color-green-20: color(white blend(#2ca878 20%));
-  --background-color-green-30: color(white blend(#2ca878 30%));
-  --background-color-green-60: color(white blend(#2ca878 60%));
-
-  --color-orange-base: #ef7f18;
-  --color-orange-d20: color(#ef7f18 blend(black 20%));
-  --color-orange-d40: color(#ef7f18 blend(black 40%));
-  --color-orange-d60: color(#ef7f18 blend(black 60%));
-  --color-orange-l20: color(#ef7f18 blend(white 20%));
-  --color-orange-l40: color(#ef7f18 blend(white 40%));
-  --color-orange-l60: color(#ef7f18 blend(white 60%));
-  --background-color-orange-10: color(white blend(#ef7f18 10%));
-  --background-color-orange-20: color(white blend(#ef7f18 20%));
-  --background-color-orange-30: color(white blend(#ef7f18 30%));
-  --background-color-orange-60: color(white blend(#ef7f18 60%));
-
-  --color-red-base: #be1621;
-  --color-red-d20: color(#be1621 blend(black 20%));
-  --color-red-d40: color(#be1621 blend(black 40%));
-  --color-red-d60: color(#be1621 blend(black 60%));
-  --color-red-l20: color(#be1621 blend(white 20%));
-  --color-red-l40: color(#be1621 blend(white 40%));
-  --color-red-l60: color(#be1621 blend(white 60%));
-  --background-color-red-10: color(white blend(#be1621 10%));
-  --background-color-red-20: color(white blend(#be1621 20%));
-  --background-color-red-30: color(white blend(#be1621 30%));
-  --background-color-red-60: color(white blend(#be1621 60%));
+  /* NEUTRALS */
+
+  --color-neutral-txt-primary: #1a1b38;
+  --color-neutral-txt-secondary: #5a5b6c;
+
+  --color-neutral-background-primary: #ffffff;
+  --color-neutral-background-secondary: #f8f8f8;
+  --color-neutral-background-disabled: #e4e4e7;
+
+  --color-neutral-border: #d0d0d5;
+
+  /* NORMAL */
+
+  --color-normal-txt-base: #6b63bf;
+  --color-normal-txt-hover: color-mix(in srgb, #000000 20%, var(--color-normal-txt-base));
+  --color-normal-txt-active: color-mix(in srgb, #000000 40%, var(--color-normal-txt-base));
+
+  --color-normal-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-normal-item-base));
+  --color-normal-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-normal-item-base));
+  --color-normal-background-active: color-mix(in srgb, #ffffff 70%, var(--color-normal-item-base));
+
+  --color-normal-txt-item: #030029;
+  --color-normal-item-base: #8f84ff;
+  --color-normal-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-item-base));
+  --color-normal-item-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-item-base));
+  --color-normal-item-disabled: #d2ceff;
+
+  /* SUCCESS */
+
+  --color-success-txt-base: #217e5a;
+  --color-success-txt-hover: color-mix(in srgb, #000000 20%, var(--color-success-txt-base));
+  --color-success-txt-active: color-mix(in srgb, #000000 40%, var(--color-success-txt-base));
+
+  --color-success-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-success-item-base));
+  --color-success-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-success-item-base));
+  --color-success-background-active: color-mix(in srgb, #ffffff 70%, var(--color-success-item-base));
+
+  --color-success-txt-item: #092017;
+  --color-success-item-base: #2ca878;
+  --color-success-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-item-base));
+  --color-success-item-active: color-mix(in srgb, #ffffff 40%, var(--color-success-item-base));
+  --color-success-item-disabled: #abdcc9;
+
+  /* WARNING */
+
+  --color-warning-txt-base: #aa5b11;
+  --color-warning-txt-hover: color-mix(in srgb, #000000 20%, var(--color-warning-txt-base));
+  --color-warning-txt-active: color-mix(in srgb, #000000 40%, var(--color-warning-txt-base));
+
+  --color-warning-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-warning-item-base));
+  --color-warning-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-warning-item-base));
+  --color-warning-background-active: color-mix(in srgb, #ffffff 70%, var(--color-warning-item-base));
+
+  --color-warning-txt-item: #261403;
+  --color-warning-item-base: #ef7f18;
+  --color-warning-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-item-base));
+  --color-warning-item-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-item-base));
+  --color-warning-item-disabled: #f9cca3;
+
+  /* DANGER */
+
+  --color-danger-txt-base: #a11d1d;
+  --color-danger-txt-hover: color-mix(in srgb, #000000 20%, var(--color-danger-txt-base));
+  --color-danger-txt-active: color-mix(in srgb, #000000 40%, var(--color-danger-txt-base));
+
+  --color-danger-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-danger-item-base));
+  --color-danger-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-danger-item-base));
+  --color-danger-background-active: color-mix(in srgb, #ffffff 70%, var(--color-danger-item-base));
+
+  --color-danger-txt-item: #fff0f1;
+  --color-danger-item-base: #be1621;
+  --color-danger-item-hover: color-mix(in srgb, #000000 20%, var(--color-danger-item-base));
+  --color-danger-item-active: color-mix(in srgb, #000000 40%, var(--color-danger-item-base));
+  --color-danger-item-disabled: #e5a2a6;
 }
 
 :root.dark {
   --color-logo: #e5e5e7;
 
-  --color-grey-000: #ffffff;
-  --color-grey-100: #e5e5e7;
-  --color-grey-200: #bfbfc6;
-  --color-grey-300: #9899a5;
-  --color-grey-400: #595a6f;
-  --color-grey-500: #3a3b54;
-  --color-grey-600: #000000;
-
-  --background-color-primary: #14141e;
-  --background-color-secondary: #17182b;
-
-  --color-purple-base: #8f84ff;
-  --color-purple-d20: color(#8f84ff blend(white 20%));
-  --color-purple-d40: color(#8f84ff blend(white 40%));
-  --color-purple-d60: color(#8f84ff blend(white 60%));
-  --color-purple-l20: color(#8f84ff blend(black 20%));
-  --color-purple-l40: color(#8f84ff blend(black 40%));
-  --color-purple-l60: color(#8f84ff blend(black 60%));
-  --background-color-purple-10: color(#17182b blend(#8f84ff 25%));
-  --background-color-purple-20: color(#17182b blend(#8f84ff 35%));
-  --background-color-purple-30: color(#17182b blend(#8f84ff 45%));
-  --background-color-purple-60: color(#17182b blend(#8f84ff 85%));
-
-  --color-green-base: #2ca878;
-  --color-green-d20: color(#2ca878 blend(white 20%));
-  --color-green-d40: color(#2ca878 blend(white 40%));
-  --color-green-d60: color(#2ca878 blend(white 60%));
-  --color-green-l20: color(#2ca878 blend(black 20%));
-  --color-green-l40: color(#2ca878 blend(black 40%));
-  --color-green-l60: color(#2ca878 blend(black 60%));
-  --background-color-green-10: color(#17182b blend(#2ca878 25%));
-  --background-color-green-20: color(#17182b blend(#2ca878 35%));
-  --background-color-green-30: color(#17182b blend(#2ca878 45%));
-  --background-color-green-60: color(#17182b blend(#2ca878 85%));
-
-  --color-orange-base: #ef7f18;
-  --color-orange-d20: color(#ef7f18 blend(white 20%));
-  --color-orange-d40: color(#ef7f18 blend(white 40%));
-  --color-orange-d60: color(#ef7f18 blend(white 60%));
-  --color-orange-l20: color(#ef7f18 blend(black 20%));
-  --color-orange-l40: color(#ef7f18 blend(black 40%));
-  --color-orange-l60: color(#ef7f18 blend(black 60%));
-  --background-color-orange-10: color(#17182b blend(#ef7f18 25%));
-  --background-color-orange-20: color(#17182b blend(#ef7f18 35%));
-  --background-color-orange-30: color(#17182b blend(#ef7f18 45%));
-  --background-color-orange-60: color(#17182b blend(#ef7f18 85%));
-
-  --color-red-base: #be1621;
-  --color-red-d20: color(#be1621 blend(white 20%));
-  --color-red-d40: color(#be1621 blend(white 40%));
-  --color-red-d60: color(#be1621 blend(white 60%));
-  --color-red-l20: color(#be1621 blend(black 20%));
-  --color-red-l40: color(#be1621 blend(black 40%));
-  --color-red-l60: color(#be1621 blend(black 60%));
-  --background-color-red-10: color(#17182b blend(#be1621 25%));
-  --background-color-red-20: color(#17182b blend(#be1621 35%));
-  --background-color-red-30: color(#17182b blend(#be1621 45%));
-  --background-color-red-60: color(#17182b blend(#be1621 85%));
+  /* NEUTRALS */
+
+  --color-neutral-txt-primary: #f8f8f8;
+  --color-neutral-txt-secondary: #bfbfc6;
+
+  --color-neutral-background-primary: #111225;
+  --color-neutral-background-secondary: #000000;
+  --color-neutral-background-disabled: #4b4c5b;
+
+  --color-neutral-border: #363647;
+
+  /* NORMAL */
+
+  --color-normal-txt-base: #9b92ff;
+  --color-normal-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-txt-base));
+  --color-normal-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-txt-base));
+
+  --color-normal-background-selected: color-mix(in srgb, #000000 70%, var(--color-normal-txt-base));
+  --color-normal-background-hover: color-mix(in srgb, #000000 60%, var(--color-normal-txt-base));
+  --color-normal-background-active: color-mix(in srgb, #000000 50%, var(--color-normal-txt-base));
+
+  --color-normal-txt-item: #030029;
+  --color-normal-item-base: #8f84ff;
+  --color-normal-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-item-base));
+  --color-normal-item-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-item-base));
+  --color-normal-item-disabled: #393566;
+
+  /* SUCCESS */
+
+  --color-success-txt-base: #2ca878;
+  --color-success-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-txt-base));
+  --color-success-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-success-txt-base));
+
+  --color-success-background-selected: color-mix(in srgb, #000000 70%, var(--color-success-txt-base));
+  --color-success-background-hover: color-mix(in srgb, #000000 60%, var(--color-success-txt-base));
+  --color-success-background-active: color-mix(in srgb, #000000 50%, var(--color-success-txt-base));
+
+  --color-success-txt-item: #092017;
+  --color-success-item-base: #2ca878;
+  --color-success-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-item-base));
+  --color-success-item-active: color-mix(in srgb, #ffffff 40%, var(--color-success-item-base));
+  --color-success-item-disabled: #124330;
+
+  /* WARNING */
+
+  --color-warning-txt-base: #ef7f18;
+  --color-warning-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-txt-base));
+  --color-warning-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-txt-base));
+
+  --color-warning-background-selected: color-mix(in srgb, #000000 70%, var(--color-warning-txt-base));
+  --color-warning-background-hover: color-mix(in srgb, #000000 60%, var(--color-warning-txt-base));
+  --color-warning-background-active: color-mix(in srgb, #000000 50%, var(--color-warning-txt-base));
+
+  --color-warning-txt-item: #261403;
+  --color-warning-item-base: #ef7f18;
+  --color-warning-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-item-base));
+  --color-warning-item-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-item-base));
+  --color-warning-item-disabled: #60330a;
+
+  /* DANGER */
+
+  --color-danger-txt-base: #ec535d;
+  --color-danger-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-danger-txt-base));
+  --color-danger-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-danger-txt-base));
+
+  --color-danger-background-selected: color-mix(in srgb, #000000 70%, var(--color-danger-txt-base));
+  --color-danger-background-hover: color-mix(in srgb, #000000 60%, var(--color-danger-txt-base));
+  --color-danger-background-active: color-mix(in srgb, #000000 50%, var(--color-danger-txt-base));
+
+  --color-danger-txt-item: #fff0f1;
+  --color-danger-item-base: #be1621;
+  --color-danger-item-hover: color-mix(in srgb, #000000 20%, var(--color-danger-item-base));
+  --color-danger-item-active: color-mix(in srgb, #000000 40%, var(--color-danger-item-base));
+  --color-danger-item-disabled: #4c090d;
 }

package/lib/assets/css/_context.pcss

@@ -1,99 +1,99 @@
 .context-color-success {
-  color: var(--color-green-base);
+  color: var(--color-success-txt-base);
 }
 
 .context-color-error {
-  color: var(--color-red-base);
+  color: var(--color-danger-txt-base);
 }
 
 .context-color-warning {
-  color: var(--color-orange-base);
+  color: var(--color-warning-txt-base);
 }
 
 .context-color-info {
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
 }
 
 .context-background-color-success {
-  background-color: var(--background-color-green-10);
+  background-color: var(--color-success-background-selected);
 }
 
 .context-background-color-error {
-  background-color: var(--background-color-red-10);
+  background-color: var(--color-danger-background-selected);
 }
 
 .context-background-color-warning {
-  background-color: var(--background-color-orange-10);
+  background-color: var(--color-warning-background-selected);
 }
 
 .context-background-color-info {
-  background-color: var(--background-color-purple-10);
+  background-color: var(--color-normal-background-selected);
 }
 
 .context-border-color-success {
-  border-color: var(--color-green-base);
+  border-color: var(--color-success-txt-base);
 }
 
 .context-border-color-error {
-  border-color: var(--color-red-base);
+  border-color: var(--color-danger-txt-base);
 }
 
 .context-border-color-warning {
-  border-color: var(--color-orange-base);
+  border-color: var(--color-warning-txt-base);
 }
 
 .context-border-color-info {
-  border-color: var(--color-purple-base);
+  border-color: var(--color-normal-txt-base);
 }
 
 .color-context-info {
-  --color-context-primary: var(--color-purple-base);
-  --color-context-primary-hover: var(--color-purple-d20);
-  --color-context-primary-active: var(--color-purple-d40);
-  --color-context-primary-disabled: var(--color-grey-400);
+  --color-context-primary: var(--color-normal-txt-base);
+  --color-context-primary-hover: var(--color-normal-txt-hover);
+  --color-context-primary-active: var(--color-normal-txt-active);
+  --color-context-primary-disabled: var(--color-neutral-txt-secondary);
 
-  --color-context-secondary: var(--background-color-purple-10);
-  --color-context-secondary-hover: var(--background-color-purple-20);
-  --color-context-secondary-active: var(--background-color-purple-30);
+  --color-context-secondary: var(--color-normal-background-selected);
+  --color-context-secondary-hover: var(--color-normal-background-selected);
+  --color-context-secondary-active: var(--color-normal-background-active);
 
-  --color-context-tertiary: var(--background-color-primary);
+  --color-context-tertiary: var(--color-neutral-background-primary);
 }
 
 .color-context-success {
-  --color-context-primary: var(--color-green-base);
-  --color-context-primary-hover: var(--color-green-d20);
-  --color-context-primary-active: var(--color-green-d40);
-  --color-context-primary-disabled: var(--color-green-l60);
+  --color-context-primary: var(--color-success-txt-base);
+  --color-context-primary-hover: var(--color-success-txt-hover);
+  --color-context-primary-active: var(--color-success-txt-active);
+  --color-context-primary-disabled: var(--color-success-item-disabled);
 
-  --color-context-secondary: var(--background-color-green-10);
-  --color-context-secondary-hover: var(--background-color-green-20);
-  --color-context-secondary-active: var(--background-color-green-30);
+  --color-context-secondary: var(--color-success-background-selected);
+  --color-context-secondary-hover: var(--color-success-background-selected);
+  --color-context-secondary-active: var(--color-success-background-active);
 
-  --color-context-tertiary: var(--background-color-primary);
+  --color-context-tertiary: var(--color-neutral-background-primary);
 }
 
 .color-context-warning {
-  --color-context-primary: var(--color-orange-base);
-  --color-context-primary-hover: var(--color-orange-d20);
-  --color-context-primary-active: var(--color-orange-d40);
-  --color-context-primary-disabled: var(--color-orange-l60);
+  --color-context-primary: var(--color-warning-txt-base);
+  --color-context-primary-hover: var(--color-warning-txt-hover);
+  --color-context-primary-active: var(--color-warning-txt-active);
+  --color-context-primary-disabled: var(--color-warning-item-disabled);
 
-  --color-context-secondary: var(--background-color-orange-10);
-  --color-context-secondary-hover: var(--background-color-orange-20);
-  --color-context-secondary-active: var(--background-color-orange-30);
+  --color-context-secondary: var(--color-warning-background-selected);
+  --color-context-secondary-hover: var(--color-warning-background-selected);
+  --color-context-secondary-active: var(--color-warning-background-active);
 
-  --color-context-tertiary: var(--background-color-primary);
+  --color-context-tertiary: var(--color-neutral-background-primary);
 }
 
 .color-context-error {
-  --color-context-primary: var(--color-red-base);
-  --color-context-primary-hover: var(--color-red-d20);
-  --color-context-primary-active: var(--color-red-d40);
-  --color-context-primary-disabled: var(--color-red-l60);
+  --color-context-primary: var(--color-danger-txt-base);
+  --color-context-primary-hover: var(--color-danger-txt-hover);
+  --color-context-primary-active: var(--color-danger-txt-active);
+  --color-context-primary-disabled: var(--color-danger-item-disabled);
 
-  --color-context-secondary: var(--background-color-red-10);
-  --color-context-secondary-hover: var(--background-color-red-20);
-  --color-context-secondary-active: var(--background-color-red-30);
+  --color-context-secondary: var(--color-danger-background-selected);
+  --color-context-secondary-hover: var(--color-danger-background-selected);
+  --color-context-secondary-active: var(--color-danger-background-active);
 
-  --color-context-tertiary: var(--background-color-primary);
+  --color-context-tertiary: var(--color-neutral-background-primary);
 }

package/lib/assets/css/base.pcss

@@ -6,8 +6,8 @@
 @import '_typography.pcss';
 
 :root {
-  color: var(--color-grey-100);
-  background-color: var(--background-color-primary);
+  color: var(--color-neutral-txt-primary);
+  background-color: var(--color-neutral-background-primary);
   text-rendering: optimizeLegibility;
   font-weight: normal;
   -webkit-font-smoothing: antialiased;
@@ -19,14 +19,15 @@
 
   --scrollbar-width: 1.4rem;
   --scrollbar-border: 0.4rem;
-  --scrollbar-thumb-color: var(--color-purple-l40);
-  --scrollbar-track-color: var(--background-color-purple-10);
+  --scrollbar-thumb-color: var(--color-normal-item-active);
+  --scrollbar-track-color: var(--color-normal-background-selected);
 
   /* Firefox/Gecko and Chrome versions >= 121 */
   scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
   scrollbar-width: auto;
 
   /* Chrome/Webkit */
+
   ::-webkit-scrollbar {
     width: var(--scrollbar-width);
   }
@@ -44,7 +45,7 @@
 }
 
 a {
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
 }
 
 code,
@@ -61,17 +62,17 @@ pre {
 
 .link {
   text-decoration: underline;
-  color: var(--color-purple-base);
+  color: var(--color-normal-txt-base);
   cursor: pointer;
 }
 
 .link:hover {
-  color: var(--color-purple-d20);
+  color: var(--color-normal-txt-hover);
 }
 
 .link:active,
 .link.router-link-active {
-  color: var(--color-purple-d40);
+  color: var(--color-normal-txt-active);
 }
 
 .link.router-link-active {

package/lib/assets/no-data.svg

@@ -0,0 +1,67 @@
+<svg width="383" height="400" viewBox="0 0 383 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1388_31654)">
+    <path
+      d="M147.951 400C229.6 400 295.79 388.304 295.79 373.876C295.79 359.449 229.6 347.753 147.951 347.753C66.3013 347.753 0.111328 359.449 0.111328 373.876C0.111328 388.304 66.3013 400 147.951 400Z"
+      fill="#3F3D56"/>
+    <path
+      d="M237.805 289.035C317.601 289.035 382.289 224.333 382.289 144.518C382.289 64.7028 317.601 0 237.805 0C158.008 0 93.3196 64.7028 93.3196 144.518C93.3196 224.333 158.008 289.035 237.805 289.035Z"
+      fill="#3F3D56"/>
+    <path opacity="0.05"
+          d="M237.805 263.822C303.68 263.822 357.082 210.407 357.082 144.518C357.082 78.628 303.68 25.2138 237.805 25.2138C171.93 25.2138 118.528 78.628 118.528 144.518C118.528 210.407 171.93 263.822 237.805 263.822Z"
+          fill="black"/>
+    <path opacity="0.05"
+          d="M237.804 242.298C291.795 242.298 335.562 198.52 335.562 144.518C335.562 90.5152 291.795 46.7376 237.804 46.7376C183.814 46.7376 140.047 90.5152 140.047 144.518C140.047 198.52 183.814 242.298 237.804 242.298Z"
+          fill="black"/>
+    <path opacity="0.05"
+          d="M237.804 214.624C276.514 214.624 307.895 183.236 307.895 144.518C307.895 105.799 276.514 74.4113 237.804 74.4113C199.094 74.4113 167.714 105.799 167.714 144.518C167.714 183.236 199.094 214.624 237.804 214.624Z"
+          fill="black"/>
+    <path d="M94.5994 157.451C94.5994 157.451 83.2399 189.433 88.2886 200.795C93.3372 212.157 101.331 223.098 101.331 223.098C101.331 223.098 98.3858 159.555 94.5994 157.451Z"
+          fill="#D0CDE1"/>
+    <path opacity="0.1"
+          d="M94.5994 157.451C94.5994 157.451 83.2399 189.433 88.2886 200.795C93.3372 212.157 101.331 223.098 101.331 223.098C101.331 223.098 98.3858 159.555 94.5994 157.451Z"
+          fill="black"/>
+    <path
+      d="M102.593 231.514C102.593 231.514 101.752 239.51 101.331 239.931C100.91 240.351 101.752 241.193 101.331 242.455C100.91 243.718 100.489 245.401 101.331 245.822C102.172 246.243 96.7029 283.275 96.7029 283.275C96.7029 283.275 83.2399 300.949 88.7092 328.722L90.3921 356.917C90.3921 356.917 103.434 357.759 103.434 353.13C103.434 353.13 102.593 347.659 102.593 345.134C102.593 342.609 104.697 342.609 103.434 341.347C102.172 340.084 102.172 339.243 102.172 339.243C102.172 339.243 104.276 337.56 103.855 337.139C103.434 336.718 107.642 306.84 107.642 306.84C107.642 306.84 112.269 302.211 112.269 299.686V297.161C112.269 297.161 114.373 291.691 114.373 291.27C114.373 290.849 125.732 265.179 125.732 265.179L130.36 283.695L135.409 310.207C135.409 310.207 137.933 334.193 142.982 343.451C142.982 343.451 151.817 373.75 151.817 372.908C151.817 372.066 166.542 369.962 166.121 366.175C165.701 362.388 157.286 309.365 157.286 309.365L159.39 230.673L102.593 231.514Z"
+      fill="#2F2E41"/>
+    <path
+      d="M91.2337 354.813C91.2337 354.813 79.8742 377.116 87.4472 377.958C95.0201 378.799 97.9652 378.799 101.331 375.433C103.171 373.592 106.897 371.123 109.897 369.263C111.675 368.178 113.111 366.614 114.041 364.751C114.97 362.887 115.356 360.799 115.154 358.726C114.932 356.667 114.163 354.971 112.27 354.813C107.221 354.392 101.331 349.763 101.331 349.763L91.2337 354.813Z"
+      fill="#2F2E41"/>
+    <path
+      d="M153.921 371.225C153.921 371.225 142.561 393.528 150.134 394.369C157.707 395.211 160.652 395.211 164.018 391.844C165.858 390.004 169.584 387.535 172.584 385.674C174.362 384.589 175.798 383.026 176.728 381.162C177.657 379.298 178.043 377.211 177.841 375.138C177.619 373.079 176.85 371.382 174.957 371.225C169.908 370.804 164.018 366.175 164.018 366.175L153.921 371.225Z"
+      fill="#2F2E41"/>
+    <path
+      d="M141.915 120.953C151.682 120.953 159.6 113.033 159.6 103.263C159.6 93.4935 151.682 85.5736 141.915 85.5736C132.148 85.5736 124.229 93.4935 124.229 103.263C124.229 113.033 132.148 120.953 141.915 120.953Z"
+      fill="#FFB8B8"/>
+    <path
+      d="M130.546 109.075C130.546 109.075 117.913 132.324 116.903 132.324C115.892 132.324 139.641 139.906 139.641 139.906C139.641 139.906 146.21 117.667 147.221 115.646L130.546 109.075Z"
+      fill="#FFB8B8"/>
+    <path
+      d="M149.924 134.517C149.924 134.517 124.681 120.63 122.156 121.051C119.632 121.471 92.706 145.037 93.1267 154.716C93.5474 164.394 96.9132 180.385 96.9132 180.385C96.9132 180.385 98.1753 224.992 100.7 225.413C103.224 225.833 100.279 233.408 101.12 233.408C101.962 233.408 160.021 233.408 160.442 232.146C160.862 230.883 149.924 134.517 149.924 134.517Z"
+      fill="#D0CDE1"/>
+    <path d="M164.018 234.46C164.018 234.46 172.012 258.867 165.28 258.026C158.549 257.184 155.604 236.985 155.604 236.985L164.018 234.46Z" fill="#FFB8B8"/>
+    <path
+      d="M142.561 133.044C142.561 133.044 126.995 136.411 129.519 157.451C132.043 178.492 136.671 199.533 136.671 199.533L152.238 233.619L153.921 239.931L165.28 236.985L156.866 188.171C156.866 188.171 153.921 135.99 150.134 134.307C147.746 133.288 145.15 132.856 142.561 133.044Z"
+      fill="#D0CDE1"/>
+    <path opacity="0.1" d="M133.095 198.902L152.448 233.408L136.143 197.048L133.095 198.902Z" fill="black"/>
+    <path
+      d="M159.522 98.0544L159.581 96.7026L162.269 97.3719C162.24 96.9379 162.118 96.5154 161.91 96.1335C161.702 95.7516 161.413 95.4193 161.064 95.1597L163.928 94.9996C161.525 91.584 158.455 88.691 154.903 86.4954C151.351 84.2997 147.391 82.847 143.262 82.2248C137.068 81.3268 130.17 82.6263 125.923 87.2244C123.863 89.4547 122.568 92.291 121.647 95.1846C119.951 100.514 119.605 106.867 123.142 111.199C126.737 115.601 133.015 116.464 138.672 117.009C140.662 117.2 142.748 117.379 144.592 116.606C144.797 114.49 144.527 112.355 143.8 110.357C143.497 109.739 143.352 109.055 143.378 108.367C143.63 106.684 145.875 106.26 147.561 106.487C149.247 106.715 151.275 107.063 152.383 105.771C153.146 104.881 153.101 103.586 153.202 102.418C153.477 99.2379 159.493 98.721 159.522 98.0544Z"
+      fill="#2F2E41"/>
+    <path
+      d="M267.995 377.472C279.376 377.472 288.602 368.244 288.602 356.861C288.602 345.477 279.376 336.249 267.995 336.249C256.615 336.249 247.389 345.477 247.389 356.861C247.389 368.244 256.615 377.472 267.995 377.472Z"
+      fill="#8F84FF"/>
+    <path
+      d="M25.9892 370.282C37.3698 370.282 46.5956 361.054 46.5956 349.67C46.5956 338.287 37.3698 329.059 25.9892 329.059C14.6085 329.059 5.38269 338.287 5.38269 349.67C5.38269 361.054 14.6085 370.282 25.9892 370.282Z"
+      fill="#8F84FF"/>
+    <path
+      d="M25.9893 337.208C34.1939 337.208 40.8451 330.555 40.8451 322.349C40.8451 314.142 34.1939 307.49 25.9893 307.49C17.7846 307.49 11.1334 314.142 11.1334 322.349C11.1334 330.555 17.7846 337.208 25.9893 337.208Z"
+      fill="#8F84FF"/>
+    <path
+      d="M25.9891 309.886C31.8118 309.886 36.532 305.165 36.532 299.341C36.532 293.517 31.8118 288.796 25.9891 288.796C20.1665 288.796 15.4463 293.517 15.4463 299.341C15.4463 305.165 20.1665 309.886 25.9891 309.886Z"
+      fill="#8F84FF"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1388_31654">
+      <rect width="382.178" height="400" fill="white" transform="translate(0.111328)"/>
+    </clipPath>
+  </defs>
+</svg>

package/lib/components/CardNumbers.vue

@@ -53,11 +53,11 @@ const percentValue = computed(() => {
 /* COLOR VARIANTS */
 .card-numbers {
   &.small {
-    --label-color: var(--color-grey-100);
+    --label-color: var(--color-neutral-txt-primary);
   }
 
   &.medium {
-    --label-color: var(--color-grey-300);
+    --label-color: var(--color-neutral-txt-secondary);
   }
 }
 
@@ -89,13 +89,13 @@ const percentValue = computed(() => {
 }
 
 .value {
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
   display: flex;
   gap: 0.2rem;
   align-items: center;
 }
 
 .unit {
-  color: var(--color-grey-100);
+  color: var(--color-neutral-txt-primary);
 }
 </style>

package/lib/components/LegendTitle.vue

@@ -2,12 +2,12 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" />
+    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="brand" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
@@ -25,7 +25,7 @@ defineSlots<{
 
 <style lang="postcss" scoped>
 .legend-title {
-  color: var(--color-grey-200);
+  color: var(--color-neutral-txt-secondary);
   display: flex;
   gap: 0.8rem;
   align-items: center;