@imaginario27/air-ui-ds 1.0.0

package/assets/css/theme/ui-theme.css

@@ -0,0 +1,454 @@
+:root {
+    /* UI Theme - Colors */
+    --color-background-container-surface: var(--color-theme-neutral-white);
+    --color-background-overlay: #1829531f;
+    --color-background-surface: var(--color-theme-neutral-white);
+    --color-background-danger-bold: var(--color-theme-danger-700);
+    --color-background-danger-subtler: var(--color-theme-danger-100);
+    --color-background-danger-subtlest: var(--color-theme-danger-50);
+    --color-background-delete-default: var(--color-theme-danger-600);
+    --color-background-delete-hover: var(--color-theme-danger-500);
+    --color-background-delete-on-neutral-hover: var(--color-theme-danger-100);
+    --color-background-delete-soft: var(--color-theme-danger-100);
+    --color-background-delete-soft-hover: var(--color-theme-danger-200);
+    --color-background-info-bold: var(--color-theme-info-700);
+    --color-background-info-subtler: var(--color-theme-info-100);
+    --color-background-info-subtlest: var(--color-theme-info-50);
+    --color-background-neutral-active: var(--color-theme-neutral-100);
+    --color-background-neutral-bold: var(--color-theme-neutral-500);
+    --color-background-neutral-default: var(--color-theme-neutral-white);
+    --color-background-neutral-disabled: var(--color-theme-neutral-100);
+    --color-background-neutral-filled-transparent: #182953d9;
+    --color-background-neutral-hover: var(--color-theme-neutral-100);
+    --color-background-neutral-hover-subtle: var(--color-theme-neutral-100);
+    --color-background-neutral-sublter: var(--color-theme-neutral-100);
+    --color-background-neutral-subtle: var(--color-theme-neutral-200);
+    --color-background-neutral-subtlest: var(--color-theme-neutral-50);
+    --color-background-neutral-subtlest-on-container-surface: var(--color-theme-neutral-50);
+    --color-background-neutral-filled-default: var(--color-theme-neutral-950);
+    --color-background-neutral-filled-hover: var(--color-theme-neutral-800);
+    --color-background-primary-brand-active: var(--color-theme-primary-brand-600);
+    --color-background-primary-brand-checked: var(--color-theme-primary-brand-600);
+    --color-background-primary-brand-checked-subtlest: var(--color-theme-primary-brand-50);
+    --color-background-primary-brand-default: var(--color-theme-primary-brand-700);
+    --color-background-primary-brand-hover: var(--color-theme-primary-brand-500);
+    --color-background-primary-brand-on-checked-subtle-bg: var(--color-theme-primary-brand-100);
+    --color-background-primary-brand-soft: var(--color-theme-primary-brand-100);
+    --color-background-primary-brand-soft-hover: var(--color-theme-primary-brand-200);
+    --color-background-primary-brand-subtle-active: var(--color-theme-primary-brand-100);
+    --color-background-secondary-brand-checked: var(--color-theme-secondary-brand-600);
+    --color-background-secondary-brand-checked-subtlest: var(--color-theme-secondary-brand-50);
+    --color-background-secondary-brand-default: var(--color-theme-secondary-brand-600);
+    --color-background-secondary-brand-hover: var(--color-theme-secondary-brand-800);
+    --color-background-secondary-brand-on-checked-subtle-bg: var(--color-theme-secondary-brand-100);
+    --color-background-secondary-brand-soft: var(--color-theme-secondary-brand-100);
+    --color-background-success-bold: var(--color-theme-success-700);
+    --color-background-success-subtler: var(--color-theme-success-100);
+    --color-background-success-subtlest: var(--color-theme-success-50);
+    --color-background-warning-bold: var(--color-theme-warning-500);
+    --color-background-warning-subtler: var(--color-theme-warning-100);
+    --color-background-warning-subtlest: var(--color-theme-warning-50);
+    --color-border-danger: var(--color-theme-danger-300);
+    --color-border-default: var(--color-theme-neutral-200);
+    --color-border-error: var(--color-theme-danger-700);
+    --color-border-inactive: var(--color-theme-neutral-200);
+    --color-border-info: var(--color-theme-info-300);
+    --color-border-secondary-brand: var(--color-theme-secondary-brand-700);
+    --color-border-success: var(--color-theme-success-300);
+    --color-border-warning: var(--color-theme-warning-300);
+    --color-border-delete-default: var(--color-theme-danger-600);
+    --color-border-delete-subtle: var(--color-theme-danger-200);
+    --color-border-neutral-disabled: var(--color-theme-neutral-200);
+    --color-border-neutral-hover: var(--color-theme-neutral-400);
+    --color-border-neutral-on-filled: var(--color-theme-neutral-white);
+    --color-border-neutral-stacked: var(--color-theme-neutral-white);
+    --color-border-neutral-subtle: var(--color-theme-neutral-100);
+    --color-border-primary-brand-active: var(--color-theme-primary-brand-600);
+    --color-border-primary-brand-default: var(--color-theme-primary-brand-700);
+    --color-border-primary-brand-hover: var(--color-theme-primary-brand-500);
+    --color-chart-variant-five: #e6bb45;
+    --color-chart-variant-four: #e65a45;
+    --color-chart-variant-one: #5f45e6;
+    --color-chart-variant-six: #e64590;
+    --color-chart-variant-three: #45e663;
+    --color-chart-variant-two: #45e6de;
+    --color-icon-danger: var(--color-theme-danger-700);
+    --color-icon-danger-subtle: var(--color-theme-danger-400);
+    --color-icon-default: var(--color-theme-neutral-950);
+    --color-icon-delete: var(--color-theme-danger-600);
+    --color-icon-error: var(--color-theme-danger-600);
+    --color-icon-info: var(--color-theme-info-700);
+    --color-icon-info-subtle-strong: var(--color-theme-info-400);
+    --color-icon-rating: #e6c300;
+    --color-icon-success: var(--color-theme-success-700);
+    --color-icon-success-subtle: var(--color-theme-success-400);
+    --color-icon-warning: var(--color-theme-warning-700);
+    --color-icon-warning-on-bg: var(--color-theme-warning-700);
+    --color-icon-warning-subtle: var(--color-theme-warning-500);
+    --color-icon-neutral-disabled: var(--color-theme-neutral-400);
+    --color-icon-neutral-inactive: var(--color-theme-neutral-400);
+    --color-icon-neutral-on-filled-bg: var(--color-theme-neutral-white);
+    --color-icon-neutral-on-filled-secondary-brand-bg: var(--color-theme-neutral-white);
+    --color-icon-neutral-on-monochrome-active-bg: var(--color-theme-neutral-700);
+    --color-icon-neutral-on-monochrome-hover-bg: var(--color-theme-neutral-600);
+    --color-icon-neutral-on-neutral-bg: var(--color-theme-neutral-950);
+    --color-icon-neutral-on-primary-brand-soft-bg: var(--color-theme-neutral-400);
+    --color-icon-neutral-on-subtlest-bg: var(--color-theme-neutral-400);
+    --color-icon-neutral-subtle: var(--color-theme-neutral-600);
+    --color-icon-neutral-subtle-on-subtler-bg: var(--color-theme-neutral-600);
+    --color-icon-neutral-subtler: var(--color-theme-neutral-400);
+    --color-icon-neutral-subtlest: var(--color-theme-neutral-300);
+    --color-icon-primary-brand-active: var(--color-theme-primary-brand-500);
+    --color-icon-primary-brand-default: var(--color-theme-primary-brand-700);
+    --color-icon-primary-brand-hover: var(--color-theme-primary-brand-500);
+    --color-icon-primary-brand-on-neutral-hover-bg: var(--color-theme-primary-brand-500);
+    --color-icon-primary-brand-on-soft-bg: var(--color-theme-primary-brand-700);
+    --color-icon-primary-brand-rating: var(--color-theme-primary-brand-500);
+    --color-icon-secondary-brand-active: var(--color-theme-secondary-brand-500);
+    --color-icon-secondary-brand-default: var(--color-theme-secondary-brand-500);
+    --color-text-danger: var(--color-theme-danger-700);
+    --color-text-default: var(--color-theme-neutral-950);
+    --color-text-delete: var(--color-theme-danger-600);
+    --color-text-error: var(--color-theme-danger-700);
+    --color-text-info: var(--color-theme-info-700);
+    --color-text-success: var(--color-theme-success-700);
+    --color-text-warning: var(--color-theme-warning-700);
+    --color-text-warning-on-bg: var(--color-theme-warning-700);
+    --color-text-neutral-disabled: var(--color-theme-neutral-400);
+    --color-text-neutral-inactive: var(--color-theme-neutral-400);
+    --color-text-neutral-on-filled: var(--color-theme-neutral-white);
+    --color-text-neutral-on-monochrome-active-bg: var(--color-theme-neutral-700);
+    --color-text-neutral-on-monochrome-hover-bg: var(--color-theme-neutral-600);
+    --color-text-neutral-on-neutral-bg: var(--color-theme-neutral-950);
+    --color-text-neutral-on-neutral-filled-bg: var(--color-theme-neutral-white);
+    --color-text-neutral-on-primary-brand-soft-bg: var(--color-theme-neutral-950);
+    --color-text-neutral-subtle: var(--color-theme-neutral-600);
+    --color-text-neutral-subtle-on-disabled-bg: var(--color-theme-neutral-600);
+    --color-text-neutral-subtle-on-subtler-bg: var(--color-theme-neutral-600);
+    --color-text-neutral-subtler: var(--color-theme-neutral-400);
+    --color-text-neutral-subtlest: var(--color-theme-neutral-300);
+    --color-text-primary-brand-active: var(--color-theme-primary-brand-600);
+    --color-text-primary-brand-default: var(--color-theme-primary-brand-700);
+    --color-text-primary-brand-hover: var(--color-theme-primary-brand-500);
+    --color-text-primary-brand-on-checked-subtlest: var(--color-theme-primary-brand-700);
+    --color-text-primary-brand-on-neutral-hover-bg: var(--color-theme-primary-brand-500);
+    --color-text-primary-brand-on-soft-bg: var(--color-theme-primary-brand-700);
+    --color-text-secondary-brand-default: var(--color-theme-secondary-brand-700);
+    --color-text-secondary-brand-on-checked-subtlest: var(--color-theme-secondary-brand-700);
+    --color-text-secondary-brand-on-soft-bg: var(--color-theme-secondary-brand-700);
+    --color-theme-danger-100: var(--coral-red-100);
+    --color-theme-danger-200: var(--coral-red-200);
+    --color-theme-danger-300: var(--coral-red-300);
+    --color-theme-danger-400: var(--coral-red-400);
+    --color-theme-danger-50: var(--coral-red-50);
+    --color-theme-danger-500: var(--coral-red-500);
+    --color-theme-danger-600: var(--coral-red-600);
+    --color-theme-danger-700: var(--coral-red-700);
+    --color-theme-danger-800: var(--coral-red-800);
+    --color-theme-danger-900: var(--coral-red-900);
+    --color-theme-danger-950: var(--coral-red-950);
+    --color-theme-info-100: var(--prussian-blue-100);
+    --color-theme-info-200: var(--prussian-blue-200);
+    --color-theme-info-300: var(--prussian-blue-300);
+    --color-theme-info-400: var(--prussian-blue-400);
+    --color-theme-info-50: var(--prussian-blue-50);
+    --color-theme-info-500: var(--prussian-blue-500);
+    --color-theme-info-600: var(--prussian-blue-600);
+    --color-theme-info-700: var(--prussian-blue-700);
+    --color-theme-info-800: var(--prussian-blue-800);
+    --color-theme-info-900: var(--prussian-blue-900);
+    --color-theme-info-950: var(--prussian-blue-950);
+    --color-theme-neutral-100: var(--wild-blue-yonder-100);
+    --color-theme-neutral-200: var(--wild-blue-yonder-200);
+    --color-theme-neutral-300: var(--wild-blue-yonder-300);
+    --color-theme-neutral-400: var(--wild-blue-yonder-400);
+    --color-theme-neutral-50: var(--wild-blue-yonder-50);
+    --color-theme-neutral-500: var(--wild-blue-yonder-500);
+    --color-theme-neutral-600: var(--wild-blue-yonder-600);
+    --color-theme-neutral-700: var(--wild-blue-yonder-700);
+    --color-theme-neutral-800: var(--wild-blue-yonder-800);
+    --color-theme-neutral-900: var(--wild-blue-yonder-900);
+    --color-theme-neutral-950: var(--wild-blue-yonder-950);
+    --color-theme-neutral-black: #000000;
+    --color-theme-neutral-white: #ffffff;
+    --color-theme-primary-brand-100: var(--dark-blue-100);
+    --color-theme-primary-brand-200: var(--dark-blue-200);
+    --color-theme-primary-brand-300: var(--dark-blue-300);
+    --color-theme-primary-brand-400: var(--dark-blue-400);
+    --color-theme-primary-brand-50: var(--dark-blue-50);
+    --color-theme-primary-brand-500: var(--dark-blue-500);
+    --color-theme-primary-brand-600: var(--dark-blue-600);
+    --color-theme-primary-brand-700: var(--dark-blue-700);
+    --color-theme-primary-brand-800: var(--dark-blue-800);
+    --color-theme-primary-brand-900: var(--dark-blue-900);
+    --color-theme-primary-brand-950: var(--dark-blue-950);
+    --color-theme-secondary-brand-100: var(--purple-heart-100);
+    --color-theme-secondary-brand-200: var(--purple-heart-200);
+    --color-theme-secondary-brand-300: var(--purple-heart-300);
+    --color-theme-secondary-brand-400: var(--purple-heart-400);
+    --color-theme-secondary-brand-50: var(--purple-heart-50);
+    --color-theme-secondary-brand-500: var(--purple-heart-500);
+    --color-theme-secondary-brand-600: var(--purple-heart-600);
+    --color-theme-secondary-brand-700: var(--purple-heart-700);
+    --color-theme-secondary-brand-800: var(--purple-heart-800);
+    --color-theme-secondary-brand-900: var(--purple-heart-900);
+    --color-theme-secondary-brand-950: var(--purple-heart-950);
+    --color-theme-success-100: var(--emerald-100);
+    --color-theme-success-200: var(--emerald-200);
+    --color-theme-success-300: var(--emerald-300);
+    --color-theme-success-400: var(--emerald-400);
+    --color-theme-success-50: var(--emerald-50);
+    --color-theme-success-500: var(--emerald-500);
+    --color-theme-success-600: var(--emerald-600);
+    --color-theme-success-700: var(--emerald-700);
+    --color-theme-success-800: var(--emerald-800);
+    --color-theme-success-900: var(--emerald-900);
+    --color-theme-success-950: var(--emerald-950);
+    --color-theme-warning-100: var(--amber-100);
+    --color-theme-warning-200: var(--amber-200);
+    --color-theme-warning-300: var(--amber-300);
+    --color-theme-warning-400: var(--amber-400);
+    --color-theme-warning-50: var(--amber-50);
+    --color-theme-warning-500: var(--amber-500);
+    --color-theme-warning-600: var(--amber-600);
+    --color-theme-warning-700: var(--amber-700);
+    --color-theme-warning-800: var(--amber-800);
+    --color-theme-warning-900: var(--amber-900);
+    --color-theme-warning-950: var(--amber-950);
+}
+
+
+/* Dark mode */
+.dark {
+    /* UI Theme - Colors */
+    --color-background-container-surface: var(--color-theme-neutral-50);
+    --color-background-overlay: #1829531f;
+    --color-background-surface: var(--color-theme-neutral-white);
+    --color-background-danger-bold: var(--color-theme-danger-400);
+    --color-background-danger-subtler: var(--color-theme-danger-100);
+    --color-background-danger-subtlest: var(--color-theme-danger-200);
+    --color-background-delete-default: var(--color-theme-danger-400);
+    --color-background-delete-hover: var(--color-theme-danger-500);
+    --color-background-delete-on-neutral-hover: var(--color-theme-danger-800);
+    --color-background-delete-soft: var(--color-theme-danger-900);
+    --color-background-delete-soft-hover: var(--color-theme-danger-800);
+    --color-background-info-bold: var(--color-theme-info-400);
+    --color-background-info-subtler: var(--color-theme-info-100);
+    --color-background-info-subtlest: var(--color-theme-info-200);
+    --color-background-neutral-active: var(--color-theme-neutral-100);
+    --color-background-neutral-bold: var(--color-theme-neutral-500);
+    --color-background-neutral-default: var(--color-theme-neutral-white);
+    --color-background-neutral-disabled: var(--color-theme-neutral-100);
+    --color-background-neutral-filled-transparent: #182953d9;
+    --color-background-neutral-hover: var(--color-theme-neutral-50);
+    --color-background-neutral-hover-subtle: var(--color-theme-neutral-200);
+    --color-background-neutral-sublter: var(--color-theme-neutral-100);
+    --color-background-neutral-subtle: var(--color-theme-neutral-200);
+    --color-background-neutral-subtlest: var(--color-theme-neutral-50);
+    --color-background-neutral-subtlest-on-container-surface: var(--color-theme-neutral-100);
+    --color-background-neutral-filled-default: var(--color-theme-neutral-950);
+    --color-background-neutral-filled-hover: var(--color-theme-neutral-800);
+    --color-background-primary-brand-active: var(--color-theme-primary-brand-600);
+    --color-background-primary-brand-checked: var(--color-theme-primary-brand-600);
+    --color-background-primary-brand-checked-subtlest: var(--color-theme-primary-brand-100);
+    --color-background-primary-brand-default: var(--color-theme-primary-brand-300);
+    --color-background-primary-brand-hover: var(--color-theme-primary-brand-500);
+    --color-background-primary-brand-on-checked-subtle-bg: var(--color-theme-primary-brand-50);
+    --color-background-primary-brand-soft: var(--color-theme-primary-brand-900);
+    --color-background-primary-brand-soft-hover: var(--color-theme-primary-brand-800);
+    --color-background-primary-brand-subtle-active: var(--color-theme-primary-brand-700);
+    --color-background-secondary-brand-checked: var(--color-theme-secondary-brand-600);
+    --color-background-secondary-brand-checked-subtlest: var(--color-theme-secondary-brand-100);
+    --color-background-secondary-brand-default: var(--color-theme-secondary-brand-400);
+    --color-background-secondary-brand-hover: var(--color-theme-secondary-brand-600);
+    --color-background-secondary-brand-on-checked-subtle-bg: var(--color-theme-secondary-brand-50);
+    --color-background-secondary-brand-soft: var(--color-theme-secondary-brand-700);
+    --color-background-success-bold: var(--color-theme-success-400);
+    --color-background-success-subtler: var(--color-theme-success-100);
+    --color-background-success-subtlest: var(--color-theme-success-200);
+    --color-background-warning-bold: var(--color-theme-warning-400);
+    --color-background-warning-subtler: var(--color-theme-warning-800);
+    --color-background-warning-subtlest: var(--color-theme-warning-900);
+    --color-border-danger: var(--color-theme-danger-200);
+    --color-border-default: var(--color-theme-neutral-100);
+    --color-border-error: var(--color-theme-danger-500);
+    --color-border-inactive: var(--color-theme-neutral-200);
+    --color-border-info: var(--color-theme-info-200);
+    --color-border-secondary-brand: var(--color-theme-secondary-brand-700);
+    --color-border-success: var(--color-theme-success-200);
+    --color-border-warning: var(--color-theme-warning-600);
+    --color-border-delete-default: var(--color-theme-danger-400);
+    --color-border-delete-subtle: var(--color-theme-danger-800);
+    --color-border-neutral-disabled: var(--color-theme-neutral-400);
+    --color-border-neutral-hover: var(--color-theme-neutral-700);
+    --color-border-neutral-on-filled: var(--color-theme-neutral-950);
+    --color-border-neutral-stacked: var(--color-theme-neutral-white);
+    --color-border-neutral-subtle: var(--color-theme-neutral-50);
+    --color-border-primary-brand-active: var(--color-theme-primary-brand-500);
+    --color-border-primary-brand-default: var(--color-theme-primary-brand-500);
+    --color-border-primary-brand-hover: var(--color-theme-primary-brand-700);
+    --color-chart-variant-five: #e6bb45;
+    --color-chart-variant-four: #e65a45;
+    --color-chart-variant-one: #5f45e6;
+    --color-chart-variant-six: #e64590;
+    --color-chart-variant-three: #45e663;
+    --color-chart-variant-two: #45e6de;
+    --color-icon-danger: var(--color-theme-danger-700);
+    --color-icon-danger-subtle: var(--color-theme-danger-400);
+    --color-icon-default: var(--color-theme-neutral-950);
+    --color-icon-delete: var(--color-theme-danger-400);
+    --color-icon-error: var(--color-theme-danger-500);
+    --color-icon-info: var(--color-theme-info-700);
+    --color-icon-info-subtle-strong: var(--color-theme-info-400);
+    --color-icon-rating: #e6c300;
+    --color-icon-success: var(--color-theme-success-700);
+    --color-icon-success-subtle: var(--color-theme-success-400);
+    --color-icon-warning: var(--color-theme-warning-700);
+    --color-icon-warning-on-bg: var(--color-theme-warning-300);
+    --color-icon-warning-subtle: var(--color-theme-warning-500);
+    --color-icon-neutral-disabled: var(--color-theme-neutral-400);
+    --color-icon-neutral-inactive: var(--color-theme-neutral-400);
+    --color-icon-neutral-on-filled-bg: var(--color-theme-neutral-950);
+    --color-icon-neutral-on-filled-secondary-brand-bg: var(--color-theme-neutral-white);
+    --color-icon-neutral-on-monochrome-active-bg: var(--color-theme-neutral-700);
+    --color-icon-neutral-on-monochrome-hover-bg: var(--color-theme-neutral-600);
+    --color-icon-neutral-on-neutral-bg: var(--color-theme-neutral-950);
+    --color-icon-neutral-on-primary-brand-soft-bg: var(--color-theme-neutral-600);
+    --color-icon-neutral-on-subtlest-bg: var(--color-theme-neutral-400);
+    --color-icon-neutral-subtle: var(--color-theme-neutral-700);
+    --color-icon-neutral-subtle-on-subtler-bg: var(--color-theme-neutral-700);
+    --color-icon-neutral-subtler: var(--color-theme-neutral-500);
+    --color-icon-neutral-subtlest: var(--color-theme-neutral-200);
+    --color-icon-primary-brand-active: var(--color-theme-primary-brand-600);
+    --color-icon-primary-brand-default: var(--color-theme-primary-brand-600);
+    --color-icon-primary-brand-hover: var(--color-theme-primary-brand-700);
+    --color-icon-primary-brand-on-neutral-hover-bg: var(--color-theme-primary-brand-700);
+    --color-icon-primary-brand-on-soft-bg: var(--color-theme-primary-brand-300);
+    --color-icon-primary-brand-rating: var(--color-theme-primary-brand-600);
+    --color-icon-secondary-brand-active: var(--color-theme-secondary-brand-600);
+    --color-icon-secondary-brand-default: var(--color-theme-secondary-brand-400);
+    --color-text-danger: var(--color-theme-danger-700);
+    --color-text-default: var(--color-theme-neutral-950);
+    --color-text-delete: var(--color-theme-danger-400);
+    --color-text-error: var(--color-theme-danger-500);
+    --color-text-info: var(--color-theme-info-700);
+    --color-text-success: var(--color-theme-success-700);
+    --color-text-warning: var(--color-theme-warning-700);
+    --color-text-warning-on-bg: var(--color-theme-warning-300);
+    --color-text-neutral-disabled: var(--color-theme-neutral-400);
+    --color-text-neutral-inactive: var(--color-theme-neutral-400);
+    --color-text-neutral-on-filled: var(--color-theme-neutral-950);
+    --color-text-neutral-on-monochrome-active-bg: var(--color-theme-neutral-700);
+    --color-text-neutral-on-monochrome-hover-bg: var(--color-theme-neutral-600);
+    --color-text-neutral-on-neutral-bg: var(--color-theme-neutral-950);
+    --color-text-neutral-on-neutral-filled-bg: var(--color-theme-neutral-white);
+    --color-text-neutral-on-primary-brand-soft-bg: var(--color-theme-neutral-200);
+    --color-text-neutral-subtle: var(--color-theme-neutral-700);
+    --color-text-neutral-subtle-on-disabled-bg: var(--color-theme-neutral-500);
+    --color-text-neutral-subtle-on-subtler-bg: var(--color-theme-neutral-600);
+    --color-text-neutral-subtler: var(--color-theme-neutral-400);
+    --color-text-neutral-subtlest: var(--color-theme-neutral-400);
+    --color-text-primary-brand-active: var(--color-theme-primary-brand-600);
+    --color-text-primary-brand-default: var(--color-theme-primary-brand-600);
+    --color-text-primary-brand-hover: var(--color-theme-primary-brand-700);
+    --color-text-primary-brand-on-checked-subtlest: var(--color-theme-primary-brand-900);
+    --color-text-primary-brand-on-neutral-hover-bg: var(--color-theme-primary-brand-700);
+    --color-text-primary-brand-on-soft-bg: var(--color-theme-primary-brand-300);
+    --color-text-secondary-brand-default: var(--color-theme-secondary-brand-400);
+    --color-text-secondary-brand-on-checked-subtlest: var(--color-theme-secondary-brand-900);
+    --color-text-secondary-brand-on-soft-bg: var(--color-theme-secondary-brand-300);
+    --color-theme-danger-100: var(--coral-red-900);
+    --color-theme-danger-200: var(--coral-red-800);
+    --color-theme-danger-300: var(--coral-red-700);
+    --color-theme-danger-400: var(--coral-red-600);
+    --color-theme-danger-50: var(--coral-red-950);
+    --color-theme-danger-500: var(--coral-red-500);
+    --color-theme-danger-600: var(--coral-red-400);
+    --color-theme-danger-700: var(--coral-red-300);
+    --color-theme-danger-800: var(--coral-red-200);
+    --color-theme-danger-900: var(--coral-red-100);
+    --color-theme-danger-950: var(--coral-red-50);
+    --color-theme-info-100: var(--prussian-blue-900);
+    --color-theme-info-200: var(--prussian-blue-800);
+    --color-theme-info-300: var(--prussian-blue-700);
+    --color-theme-info-400: var(--prussian-blue-600);
+    --color-theme-info-50: var(--prussian-blue-950);
+    --color-theme-info-500: var(--prussian-blue-500);
+    --color-theme-info-600: var(--prussian-blue-400);
+    --color-theme-info-700: var(--prussian-blue-300);
+    --color-theme-info-800: var(--prussian-blue-200);
+    --color-theme-info-900: var(--prussian-blue-100);
+    --color-theme-info-950: var(--prussian-blue-50);
+    --color-theme-neutral-100: var(--wild-blue-yonder-900);
+    --color-theme-neutral-200: var(--wild-blue-yonder-800);
+    --color-theme-neutral-300: var(--wild-blue-yonder-700);
+    --color-theme-neutral-400: var(--wild-blue-yonder-600);
+    --color-theme-neutral-50: var(--wild-blue-yonder-950);
+    --color-theme-neutral-500: var(--wild-blue-yonder-500);
+    --color-theme-neutral-600: var(--wild-blue-yonder-400);
+    --color-theme-neutral-700: var(--wild-blue-yonder-300);
+    --color-theme-neutral-800: var(--wild-blue-yonder-200);
+    --color-theme-neutral-900: var(--wild-blue-yonder-100);
+    --color-theme-neutral-950: var(--wild-blue-yonder-50);
+    --color-theme-neutral-black: #000000;
+    --color-theme-neutral-white: #1f212d;
+    --color-theme-primary-brand-100: var(--dark-blue-900);
+    --color-theme-primary-brand-200: var(--dark-blue-800);
+    --color-theme-primary-brand-300: var(--dark-blue-700);
+    --color-theme-primary-brand-400: var(--dark-blue-600);
+    --color-theme-primary-brand-50: var(--dark-blue-950);
+    --color-theme-primary-brand-500: var(--dark-blue-500);
+    --color-theme-primary-brand-600: var(--dark-blue-400);
+    --color-theme-primary-brand-700: var(--dark-blue-300);
+    --color-theme-primary-brand-800: var(--dark-blue-200);
+    --color-theme-primary-brand-900: var(--dark-blue-100);
+    --color-theme-primary-brand-950: var(--dark-blue-50);
+    --color-theme-secondary-brand-100: var(--purple-heart-900);
+    --color-theme-secondary-brand-200: var(--purple-heart-800);
+    --color-theme-secondary-brand-300: var(--purple-heart-700);
+    --color-theme-secondary-brand-400: var(--purple-heart-600);
+    --color-theme-secondary-brand-50: var(--purple-heart-950);
+    --color-theme-secondary-brand-500: var(--purple-heart-500);
+    --color-theme-secondary-brand-600: var(--purple-heart-400);
+    --color-theme-secondary-brand-700: var(--purple-heart-300);
+    --color-theme-secondary-brand-800: var(--purple-heart-200);
+    --color-theme-secondary-brand-900: var(--purple-heart-100);
+    --color-theme-secondary-brand-950: var(--purple-heart-50);
+    --color-theme-success-100: var(--emerald-900);
+    --color-theme-success-200: var(--emerald-800);
+    --color-theme-success-300: var(--emerald-700);
+    --color-theme-success-400: var(--emerald-600);
+    --color-theme-success-50: var(--emerald-950);
+    --color-theme-success-500: var(--emerald-500);
+    --color-theme-success-600: var(--emerald-400);
+    --color-theme-success-700: var(--emerald-300);
+    --color-theme-success-800: var(--emerald-200);
+    --color-theme-success-900: var(--emerald-100);
+    --color-theme-success-950: var(--emerald-50);
+    --color-theme-warning-100: var(--amber-900);
+    --color-theme-warning-200: var(--amber-800);
+    --color-theme-warning-300: var(--amber-700);
+    --color-theme-warning-400: var(--amber-600);
+    --color-theme-warning-50: var(--amber-950);
+    --color-theme-warning-500: var(--amber-500);
+    --color-theme-warning-600: var(--amber-400);
+    --color-theme-warning-700: var(--amber-300);
+    --color-theme-warning-800: var(--amber-200);
+    --color-theme-warning-900: var(--amber-100);
+    --color-theme-warning-950: var(--amber-50);
+}
+
+:root {
+    /* number */
+    --opacity-disabled: var(--opacity-50);
+    --radius-button: var(--rounded-base);
+    --spacing-column-gap: var(--space-5);
+    --spacing-content-body-bottom-padding: var(--space-6);
+    --spacing-content-side-padding: var(--space-8);
+    --spacing-content-side-padding-mobile: var(--space-6);
+    --spacing-section-xs: var(--space-8);
+    --spacing-section-sm: var(--space-10);
+    --spacing-section-md: var(--space-16);
+    --spacing-section-lg: var(--space-20);
+    --spacing-section-xl: var(--space-28);
+}

package/components/accordions/Accordion.vue

@@ -0,0 +1,31 @@
+<template>
+    <div 
+        v-if="items"
+        :class="[
+            'flex',
+            'flex-col',
+            'w-full',
+            'gap-0',
+            'divide-y',
+            'divide-border-neutral-subtle',
+            'border-t',
+            'border-b',
+            'border-border-neutral-subtle'
+        ]"
+    >
+        <AccordionItem 
+            v-for="item in items" :key="item.id" 
+            :title="item.title"
+            :content="item.content"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    items: {
+        type: Array as PropType<AccordionItem[]>,
+        required: true
+    }
+})
+</script>

package/components/accordions/AccordionGroup.vue

@@ -0,0 +1,78 @@
+<template >
+    <div 
+        v-if="Object.keys(groupedAccordeons).length"
+        class="flex flex-col gap-3 w-full"
+    >
+        <div 
+            v-for="(groupKey, index) in sortedGroupKeys" 
+            :key="groupKey"
+            class="accordion-group flex flex-col gap-3 w-full"
+        >
+            <component
+                :is="titleTag"
+                :class="[
+                    titleCustomClass,
+                    { 'mt-4': index !== 0 }
+                ]"
+            >
+                {{ groupKey }}
+            </component>
+            <Accordion :items="groupedAccordeons[groupKey]" />
+        </div>
+    </div>
+    
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    items: {
+        type: Array as PropType<AccordionItem[]>,
+        required: true
+    },
+    defaultGroupName: {
+        type: String as PropType<string>,
+        default: 'Group title'
+    },
+    defaultGroupPosition: {
+        type: String as PropType<OrderPosition>,
+        default: OrderPosition.START,
+        validator: (value: OrderPosition) => Object.values(OrderPosition).includes(value),
+    },
+    titleCustomClass: {
+        type: String as PropType<string>,
+        default: 'font-semibold text-lg text-text-neutral-subtle'
+    },
+    titleTag: {
+        type: String as PropType<'h3' | 'h4' | 'h5' | 'h6'>,
+        default: 'h3',
+        validator: (value: string) => ['h3', 'h4', 'h5', 'h6'].includes(value),
+    },
+})
+
+// Groups accordion items by their `group` property
+const groupedAccordeons = computed(() => {
+    return props.items.reduce((acc, item) => {
+        const groupKey = item.group || props.defaultGroupName
+        if (!acc[groupKey]) {
+            acc[groupKey] = []
+        }
+        acc[groupKey].push(item)
+        return acc
+    }, {} as Record<string, AccordionItem[]>)
+})
+
+// Sorts the group keys based on the `defaultGroupPosition` prop
+const sortedGroupKeys = computed(() => {
+    const keys = Object.keys(groupedAccordeons.value)
+
+    const compare = (a: string, b: string) => {
+        if (a === props.defaultGroupName) return props.defaultGroupPosition === OrderPosition.START ? -1 : 1
+        if (b === props.defaultGroupName) return props.defaultGroupPosition === OrderPosition.START ? 1 : -1
+        return 0
+    }
+
+    return keys.sort(compare)
+})
+
+</script>

package/components/accordions/AccordionItem.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="w-full flex flex-col gap-2 py-3">
+        <div class="accordion-header flex justify-between gap-4 hover:cursor-pointer" @click="toggle">
+            <span class="font-semibold mt-1">
+                {{ title }}
+            </span>
+            
+            <!-- This button does not have click event because the toggle is being controlled by the accordeon header div-->
+            <ActionIconButton 
+                :icon="isOpen ? 'mdiMinus' : 'mdiPlus'"
+                :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+                :size="ButtonSize.MD" 
+            />
+        </div>
+
+        <VerticalExpansionTransition v-show="isOpen">
+            <p class="text-sm">
+                {{ content }}
+            </p>
+        </VerticalExpansionTransition>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Item title'
+    },
+    content: {
+        type: String as PropType<string>,
+        default: 'Item content'
+    }
+})
+
+// Composables
+const { isOpen, toggle } = useAccordion()
+</script>

package/components/action-panels/ActionPanel.vue

@@ -0,0 +1,49 @@
+<template>
+    <Card 
+        :hasBorder 
+        :hasShadow 
+        :class="[
+            hasShadow ? '!shadow-sm' : undefined,
+            '!p-6',
+            orientation === Orientation.HORIZONTAL ? 'md:!flex-row' : undefined
+        ]"
+    >
+        <div class="flex flex-col gap-2 w-full">
+            <CardHeader>
+                <CardTitle :title />
+            </CardHeader>
+            <CardBody>
+                <p class="text-sm text-text-neutral-subtle">{{ description }}</p>
+            </CardBody>
+        </div>
+        <CardActions v-if="$slots['actions']">
+            <slot name="actions" />
+        </CardActions>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+    description: {
+        type: String as PropType<string>,
+        default: 'Description',
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.VERTICAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    hasShadow: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    }
+})
+</script>