@idds/styles 1.0.26

package/src/colors/product/index.css

@@ -0,0 +1,205 @@
+/* Base Colors - Light Mode (Default) */
+:root,
+[data-theme='light'] {
+  /* Base Colors */
+  --ina-white: var(--ina-neutral-25);
+  --ina-black: var(--ina-neutral-900);
+
+  /* Background Colors */
+  --ina-background-primary: var(--ina-neutral-25);
+  --ina-background-secondary: var(--ina-neutral-50);
+  --ina-background-tertiary: var(--ina-neutral-100);
+  --ina-background-overlay: var(--ina-overlay);
+
+  /* Content Colors */
+  --ina-content-primary: var(--ina-neutral-800);
+  --ina-content-secondary: var(--ina-neutral-600);
+  --ina-content-tertiary: var(--ina-neutral-400);
+  --ina-content-guide: var(--ina-blue-500);
+  --ina-content-negative: var(--ina-red-600);
+  --ina-content-positive: var(--ina-green-600);
+
+  /* Stroke Colors */
+  --ina-stroke-primary: var(--ina-neutral-200);
+  --ina-stroke-secondary: var(--ina-neutral-400);
+  --ina-stroke-tertiary: var(--ina-neutral-900);
+
+  /* Guide Colors */
+  --ina-guide-50: var(--ina-blue-50);
+  --ina-guide-100: var(--ina-blue-100);
+  --ina-guide-200: var(--ina-blue-200);
+  --ina-guide-300: var(--ina-blue-300);
+  --ina-guide-400: var(--ina-blue-400);
+  --ina-guide-500: var(--ina-blue-500);
+  --ina-guide-600: var(--ina-blue-600);
+  --ina-guide-700: var(--ina-blue-700);
+  --ina-guide-800: var(--ina-blue-800);
+  --ina-guide-900: var(--ina-blue-900);
+
+  /* Negative Colors */
+  --ina-negative-50: var(--ina-red-50);
+  --ina-negative-100: var(--ina-red-100);
+  --ina-negative-200: var(--ina-red-200);
+  --ina-negative-300: var(--ina-red-300);
+  --ina-negative-400: var(--ina-red-400);
+  --ina-negative-500: var(--ina-red-500);
+  --ina-negative-600: var(--ina-red-600);
+  --ina-negative-700: var(--ina-red-700);
+  --ina-negative-800: var(--ina-red-800);
+  --ina-negative-900: var(--ina-red-900);
+  --ina-sentiment-negative-50: var(--ina-red-50);
+  --ina-sentiment-negative-100: var(--ina-red-100);
+  --ina-sentiment-negative-200: var(--ina-red-200);
+  --ina-sentiment-negative-300: var(--ina-red-300);
+  --ina-sentiment-negative-400: var(--ina-red-400);
+  --ina-sentiment-negative-500: var(--ina-red-500);
+  --ina-sentiment-negative-600: var(--ina-red-600);
+  --ina-sentiment-negative-700: var(--ina-red-700);
+  --ina-sentiment-negative-800: var(--ina-red-800);
+  --ina-sentiment-negative-900: var(--ina-red-900);
+
+  /* Positive Colors */
+  --ina-positive-50: var(--ina-green-50);
+  --ina-positive-100: var(--ina-green-100);
+  --ina-positive-200: var(--ina-green-200);
+  --ina-positive-300: var(--ina-green-300);
+  --ina-positive-400: var(--ina-green-400);
+  --ina-positive-500: var(--ina-green-500);
+  --ina-positive-600: var(--ina-green-600);
+  --ina-positive-700: var(--ina-green-700);
+  --ina-positive-800: var(--ina-green-800);
+  --ina-positive-900: var(--ina-green-900);
+  --ina-sentiment-positive-50: var(--ina-green-50);
+  --ina-sentiment-positive-100: var(--ina-green-100);
+  --ina-sentiment-positive-200: var(--ina-green-200);
+  --ina-sentiment-positive-300: var(--ina-green-300);
+  --ina-sentiment-positive-400: var(--ina-green-400);
+  --ina-sentiment-positive-500: var(--ina-green-500);
+  --ina-sentiment-positive-600: var(--ina-green-600);
+  --ina-sentiment-positive-700: var(--ina-green-700);
+  --ina-sentiment-positive-800: var(--ina-green-800);
+
+  /* Warning Colors */
+  --ina-warning-50: var(--ina-orange-50);
+  --ina-warning-100: var(--ina-orange-100);
+  --ina-warning-200: var(--ina-orange-200);
+  --ina-warning-300: var(--ina-orange-300);
+  --ina-warning-400: var(--ina-orange-400);
+  --ina-warning-500: var(--ina-orange-500);
+  --ina-warning-600: var(--ina-orange-600);
+  --ina-warning-700: var(--ina-orange-700);
+  --ina-warning-800: var(--ina-orange-800);
+  --ina-warning-900: var(--ina-orange-900);
+  --ina-sentiment-warning-50: var(--ina-orange-50);
+  --ina-sentiment-warning-100: var(--ina-orange-100);
+  --ina-sentiment-warning-200: var(--ina-orange-200);
+  --ina-sentiment-warning-300: var(--ina-orange-300);
+  --ina-sentiment-warning-400: var(--ina-orange-400);
+  --ina-sentiment-warning-500: var(--ina-orange-500);
+  --ina-sentiment-warning-600: var(--ina-orange-600);
+  --ina-sentiment-warning-700: var(--ina-orange-700);
+  --ina-sentiment-warning-800: var(--ina-orange-800);
+}
+
+/* Base Colors - Dark Mode */
+[data-theme='dark'] {
+  /* Base Colors */
+  --ina-white: var(--ina-neutral-900);
+  --ina-black: var(--ina-neutral-25);
+
+  /* Background Colors */
+  --ina-background-primary: var(--ina-neutral-900);
+  --ina-background-secondary: var(--ina-neutral-800);
+  --ina-background-tertiary: var(--ina-neutral-700);
+  --ina-background-overlay: var(--ina-overlay);
+
+  /* Content Colors */
+  --ina-content-primary: var(--ina-neutral-25);
+  --ina-content-secondary: var(--ina-neutral-400);
+  --ina-content-tertiary: var(--ina-neutral-500);
+  --ina-content-guide: var(--ina-blue-400);
+  --ina-content-negative: var(--ina-red-400);
+  --ina-content-positive: var(--ina-green-400);
+
+  /* Stroke Colors */
+  --ina-stroke-primary: var(--ina-neutral-700);
+  --ina-stroke-secondary: var(--ina-neutral-400);
+  --ina-stroke-tertiary: var(--ina-neutral-200);
+
+  /* Guide Colors */
+  --ina-guide-50: var(--ina-blue-50);
+  --ina-guide-100: var(--ina-blue-100);
+  --ina-guide-200: var(--ina-blue-200);
+  --ina-guide-300: var(--ina-blue-300);
+  --ina-guide-400: var(--ina-blue-400);
+  --ina-guide-500: var(--ina-blue-500);
+  --ina-guide-600: var(--ina-blue-600);
+  --ina-guide-700: var(--ina-blue-700);
+  --ina-guide-800: var(--ina-blue-800);
+  --ina-guide-900: var(--ina-blue-900);
+
+  /* Negative Colors */
+  --ina-negative-50: var(--ina-red-50);
+  --ina-negative-100: var(--ina-red-100);
+  --ina-negative-200: var(--ina-red-200);
+  --ina-negative-300: var(--ina-red-300);
+  --ina-negative-400: var(--ina-red-400);
+  --ina-negative-500: var(--ina-red-500);
+  --ina-negative-600: var(--ina-red-600);
+  --ina-negative-700: var(--ina-red-700);
+  --ina-negative-800: var(--ina-red-800);
+  --ina-negative-900: var(--ina-red-900);
+  --ina-sentiment-negative-50: var(--ina-red-50);
+  --ina-sentiment-negative-100: var(--ina-red-100);
+  --ina-sentiment-negative-200: var(--ina-red-200);
+  --ina-sentiment-negative-300: var(--ina-red-300);
+  --ina-sentiment-negative-400: var(--ina-red-400);
+  --ina-sentiment-negative-500: var(--ina-red-500);
+  --ina-sentiment-negative-600: var(--ina-red-600);
+  --ina-sentiment-negative-700: var(--ina-red-700);
+  --ina-sentiment-negative-800: var(--ina-red-800);
+  --ina-sentiment-negative-900: var(--ina-red-900);
+
+  /* Positive Colors */
+  --ina-positive-50: var(--ina-green-50);
+  --ina-positive-100: var(--ina-green-100);
+  --ina-positive-200: var(--ina-green-200);
+  --ina-positive-300: var(--ina-green-300);
+  --ina-positive-400: var(--ina-green-400);
+  --ina-positive-500: var(--ina-green-500);
+  --ina-positive-600: var(--ina-green-600);
+  --ina-positive-700: var(--ina-green-700);
+  --ina-positive-800: var(--ina-green-800);
+  --ina-positive-900: var(--ina-green-900);
+  --ina-sentiment-positive-50: var(--ina-green-50);
+  --ina-sentiment-positive-100: var(--ina-green-100);
+  --ina-sentiment-positive-200: var(--ina-green-200);
+  --ina-sentiment-positive-300: var(--ina-green-300);
+  --ina-sentiment-positive-400: var(--ina-green-400);
+  --ina-sentiment-positive-500: var(--ina-green-500);
+  --ina-sentiment-positive-600: var(--ina-green-600);
+  --ina-sentiment-positive-700: var(--ina-green-700);
+  --ina-sentiment-positive-800: var(--ina-green-800);
+
+  /* Warning Colors */
+  --ina-warning-50: var(--ina-orange-50);
+  --ina-warning-100: var(--ina-orange-100);
+  --ina-warning-200: var(--ina-orange-200);
+  --ina-warning-300: var(--ina-orange-300);
+  --ina-warning-400: var(--ina-orange-400);
+  --ina-warning-500: var(--ina-orange-500);
+  --ina-warning-600: var(--ina-orange-600);
+  --ina-warning-700: var(--ina-orange-700);
+  --ina-warning-800: var(--ina-orange-800);
+  --ina-warning-900: var(--ina-orange-900);
+  --ina-sentiment-warning-50: var(--ina-orange-50);
+  --ina-sentiment-warning-100: var(--ina-orange-100);
+  --ina-sentiment-warning-200: var(--ina-orange-200);
+  --ina-sentiment-warning-300: var(--ina-orange-300);
+  --ina-sentiment-warning-400: var(--ina-orange-400);
+  --ina-sentiment-warning-500: var(--ina-orange-500);
+  --ina-sentiment-warning-600: var(--ina-orange-600);
+  --ina-sentiment-warning-700: var(--ina-orange-700);
+  --ina-sentiment-warning-800: var(--ina-orange-800);
+  --ina-sentiment-warning-900: var(--ina-orange-900);
+}

package/src/colors/utilities/index.css

@@ -0,0 +1,77 @@
+:root {
+  /* Font Sizes */
+  --ina-font-3xs: 0.5rem; /* 8px */
+  --ina-font-2xs: 0.625rem; /* 10px */
+  --ina-font-xs: 0.75rem; /* 12px */
+  --ina-font-sm: 0.875rem; /* 14px */
+  --ina-font-base: 1rem; /* 16px */
+  --ina-font-lg: 1.125rem; /* 18px */
+  --ina-font-xl: 1.25rem; /* 20px */
+  --ina-font-2xl: 1.5rem; /* 24px */
+  --ina-font-3xl: 1.875rem; /* 30px */
+  --ina-font-4xl: 2.25rem; /* 36px */
+
+  /* Line Heights */
+  --ina-line-height-xs: 1rem; /* 16px */
+  --ina-line-height-sm: 1.25rem; /* 20px */
+  --ina-line-height-base: 1.5rem; /* 24px */
+  --ina-line-height-lg: 1.75rem; /* 28px */
+  --ina-line-height-xl: 2rem; /* 32px */
+
+  /* Font Weights */
+  --ina-font-thin: 100;
+  --ina-font-extralight: 200;
+  --ina-font-light: 300;
+  --ina-font-normal: 400;
+  --ina-font-medium: 500;
+  --ina-font-semibold: 600;
+  --ina-font-bold: 700;
+  --ina-font-extrabold: 800;
+  --ina-font-black: 900;
+
+  /* Spacing */
+  --ina-spacing-1: 0.25rem; /* 4px */
+  --ina-spacing-2: 0.5rem; /* 8px */
+  --ina-spacing-3: 0.75rem; /* 12px */
+  --ina-spacing-3-5: 0.875rem; /* 14px */
+  --ina-spacing-4: 1rem; /* 16px */
+  --ina-spacing-5: 1.25rem; /* 20px */
+  --ina-spacing-6: 1.5rem; /* 24px */
+  --ina-spacing-8: 2rem; /* 32px */
+  --ina-spacing-10: 2.5rem; /* 40px */
+  --ina-spacing-12: 3rem; /* 48px */
+  --ina-spacing-16: 4rem; /* 64px */
+  --ina-spacing-20: 5rem; /* 80px */
+  --ina-spacing-24: 6rem; /* 96px */
+
+  /* Border Radius */
+  --ina-radius-sm: 0.125rem; /* 2px */
+  --ina-radius-base: 0.25rem; /* 4px */
+  --ina-radius-md: 0.375rem; /* 6px */
+  --ina-radius-lg: 0.5rem; /* 8px */
+  --ina-radius-xl: 0.75rem; /* 12px */
+  --ina-radius-2xl: 1rem; /* 16px */
+  --ina-radius-full: 9999px;
+
+  /* Shadows */
+  --ina-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ina-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --ina-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --ina-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --ina-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+  /* Transition */
+  --ina-transition-fast: 150ms ease-in-out;
+  --ina-transition-base: 200ms ease-in-out;
+  --ina-transition-slow: 300ms ease-in-out;
+
+  /* Breakpoints untuk responsive design */
+  --ina-breakpoint-sm: 640px;
+  --ina-breakpoint-md: 768px;
+  --ina-breakpoint-lg: 1024px;
+  --ina-breakpoint-xl: 1280px;
+}

package/src/components/accordion-card.css

@@ -0,0 +1,99 @@
+/**
+ * AccordionCard Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ */
+
+.ina-accordion-card {
+  /* Root container accordion card */
+  border: 1px solid var(--ina-stroke-primary);
+  padding: var(--ina-spacing-4);
+  border-radius: var(--ina-radius-lg);
+  overflow: hidden;
+}
+
+.ina-accordion-card__header {
+  /* Header area yang dapat diklik untuk toggle */
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  outline: none;
+  transition: var(--ina-transition-fast);
+}
+
+.ina-accordion-card__header:focus {
+  outline: 2px solid var(--ina-guide-500);
+  outline-offset: 2px;
+}
+
+.ina-accordion-card__icon {
+  /* Container untuk icon chevron */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem; /* 32px */
+  height: 2rem; /* 32px */
+  border-radius: var(--ina-radius-lg);
+  color: var(--ina-content-secondary);
+  background-color: var(--ina-background-secondary);
+  margin-right: var(--ina-spacing-4);
+}
+
+.ina-accordion-card__chevron {
+  /* Icon chevron dengan animasi rotation */
+  transition: transform 200ms ease;
+  transform: rotate(180deg);
+}
+
+.ina-accordion-card__chevron--open {
+  /* State terbuka: chevron menghadap atas */
+  transform: rotate(0deg);
+}
+.ina-accordion-card__title {
+  /* Judul accordion */
+  text-align: left;
+  font-weight: var(--ina-font-semibold);
+  font-size: var(--ina-font-sm);
+  color: var(--ina-content-primary);
+  width: 100%;
+}
+
+/* Responsive font size untuk title */
+@media (min-width: 640px) {
+  .ina-accordion-card__title {
+    font-size: var(--ina-font-base);
+  }
+}
+
+.ina-accordion-card__content {
+  /* Container untuk content dengan height animation */
+  height: 0px;
+  overflow: hidden;
+  transition: height 500ms ease;
+}
+
+.ina-accordion-card__content-body {
+  /* Body content dengan padding */
+  padding: 0.75rem var(--ina-spacing-4); /* py-3 px-4 equivalent */
+}
+
+/* Modifier untuk state terbuka */
+.ina-accordion-card--open .ina-accordion-card__content {
+  /* Height akan dikontrol melalui JavaScript inline style */
+}
+
+/* Focus styles untuk accessibility */
+.ina-accordion-card__header:focus-visible {
+  outline: 2px solid var(--ina-guide-500);
+  outline-offset: 2px;
+  border-radius: var(--ina-radius-base);
+}
+
+/* Hover effects */
+.ina-accordion-card__header:hover .ina-accordion-card__icon {
+  background-color: var(--ina-neutral-200);
+}
+
+.ina-accordion-card__header:hover .ina-accordion-card__title {
+  color: var(--ina-secondary);
+}

package/src/components/accordion.css

@@ -0,0 +1,120 @@
+/**
+ * Accordion Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ */
+
+.ina-accordion {
+  /* Root container accordion */
+  border-bottom: 1px solid var(--ina-stroke-primary);
+  background-color: inherit;
+  position: relative;
+}
+
+.ina-accordion__toggle {
+  /* Button untuk toggle accordion */
+  width: 100%;
+  font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-semibold);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ina-spacing-4) 0;
+  outline: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: var(--ina-transition-fast);
+  position: relative;
+  z-index: 1;
+}
+
+/* .ina-accordion__toggle:focus {
+  outline: 2px solid var(--ina-guide-500);
+  outline-offset: 2px;
+} */
+
+/* Responsive font size */
+@media (min-width: 1024px) {
+  .ina-accordion__toggle {
+    font-size: var(--ina-font-base);
+  }
+}
+
+.ina-accordion__title {
+  /* Title section di sebelah kiri */
+  color: var(--ina-content-primary);
+  transition: var(--ina-transition-fast);
+}
+
+.ina-accordion__title:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.ina-accordion__toggler {
+  /* Toggler section di sebelah kanan */
+  flex-shrink: 0;
+  color: var(--ina-content-guide);
+  transition: var(--ina-transition-fast);
+}
+
+.ina-accordion__toggler:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.ina-accordion__icon {
+  transition: transform 200ms ease;
+  transform: rotate(0deg);
+  color: var(--ina-content-guide);
+}
+
+.ina-accordion__icon--open {
+  transform: rotate(180deg);
+}
+
+.ina-accordion__content {
+  /* Content container yang muncul/muncul */
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  max-height: 0;
+  opacity: 0;
+}
+
+.ina-accordion__content--open {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+.ina-accordion__body {
+  /* Body content yang muncul saat accordion terbuka */
+  padding-bottom: var(--ina-spacing-4);
+  color: var(--ina-content-primary);
+  font-size: var(--ina-font-xs);
+}
+
+/* Responsive font size untuk body */
+@media (min-width: 1024px) {
+  .ina-accordion__body {
+    font-size: var(--ina-font-sm);
+  }
+}
+
+/* Modifier untuk state terbuka */
+.ina-accordion--open .ina-accordion__toggle {
+  /* Style tambahan saat accordion terbuka jika diperlukan */
+}
+
+/* Group hover effect untuk seluruh accordion toggle */
+.ina-accordion__toggle:hover .ina-accordion__title,
+.ina-accordion__toggle:hover .ina-accordion__toggler {
+  /* Hover effect sudah dihandle masing-masing element */
+}
+
+/* Accordion Group */
+.ina-accordion-group {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/action-dropdown.css

@@ -0,0 +1,140 @@
+/**
+ * ActionDropdown Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ */
+
+.ina-action-dropdown {
+  /* Root container dengan relative positioning */
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
+
+.ina-action-dropdown__trigger {
+  /* Default trigger button */
+  padding: var(--ina-spacing-1);
+  border-radius: var(--ina-radius-base);
+  outline: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: var(--ina-transition-fast);
+}
+
+.ina-action-dropdown__trigger:hover {
+  background-color: var(--ina-neutral-100);
+}
+
+.ina-action-dropdown__trigger:focus {
+  outline: 2px solid var(--ina-guide-500);
+  outline-offset: 2px;
+}
+
+.ina-action-dropdown__trigger:focus-visible {
+  outline: 2px solid var(--ina-guide-500);
+  outline-offset: 2px;
+}
+
+.ina-action-dropdown__menu {
+  /* Positioned dropdown menu */
+  position: absolute;
+  width: 10rem; /* 160px */
+  background-color: var(--ina-neutral-25); /* white */
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-lg);
+  box-shadow: var(--ina-shadow-lg);
+  z-index: 1000;
+}
+
+/* Vertical positioning */
+.ina-action-dropdown__menu--bottom {
+  top: calc(100% + 0.5rem); /* top-full mt-2 equivalent */
+}
+
+.ina-action-dropdown__menu--top {
+  bottom: calc(100% + 0.5rem); /* bottom-full mb-2 equivalent */
+}
+
+/* Horizontal positioning */
+.ina-action-dropdown__menu--left {
+  right: 0; /* right-0 equivalent */
+}
+
+.ina-action-dropdown__menu--right {
+  left: 0; /* left-0 equivalent */
+}
+
+.ina-action-dropdown__list {
+  /* List container untuk menu items */
+  padding: var(--ina-spacing-1) 0; /* py-1 equivalent */
+  margin: 0;
+  list-style: none;
+}
+
+.ina-action-dropdown__item {
+  /* Individual list item */
+  width: 100%;
+  text-align: left;
+  padding: var(--ina-spacing-2) var(--ina-spacing-4); /* px-4 py-2 equivalent */
+  font-size: var(--ina-font-sm);
+  user-select: none; /* select-none equivalent */
+  cursor: pointer;
+  transition: var(--ina-transition-fast);
+}
+
+.ina-action-dropdown__item:hover {
+  background-color: var(--ina-neutral-100);
+}
+
+.ina-action-dropdown__item:focus {
+  outline: none;
+  background-color: var(--ina-neutral-200);
+}
+
+/* Animation untuk dropdown appearance */
+.ina-action-dropdown__menu {
+  animation: fadeIn 150ms ease-in-out;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Focus styles untuk accessibility */
+.ina-action-dropdown__trigger[aria-expanded='true'] {
+  background-color: var(--ina-neutral-100);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-action-dropdown__item {
+    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
+  }
+
+  .ina-action-dropdown__menu {
+    width: 9rem; /* Sedikit lebih kecil di mobile */
+  }
+}
+
+/* Dark mode support (future consideration) */
+/* @media (prefers-color-scheme: dark) {
+  .ina-action-dropdown__menu {
+    background-color: var(--ina-neutral-900);
+    border-color: var(--ina-neutral-700);
+  }
+
+  .ina-action-dropdown__item:hover {
+    background-color: var(--ina-neutral-800);
+  }
+
+  .ina-action-dropdown__trigger:hover {
+    background-color: var(--ina-neutral-800);
+  }
+} */