@mohasinac/appkit 2.4.11 → 2.5.1

package/dist/ui/components/RowActionMenu.style.css

@@ -1,91 +1,91 @@
-/* RowActionMenu — kebab menu with dropdown action list */
-
-.appkit-row-action-menu {
-  position: relative;
-  display: inline-block;
-}
-
-.appkit-row-action-menu__trigger {
-  border-radius: 0.5rem;
-  padding: 0.375rem;
-}
-
-.appkit-row-action-menu__dropdown {
-  position: absolute;
-  z-index: 50;
-  margin-top: 0.25rem;
-  min-width: 160px;
-  border-radius: 0.75rem;
-  border: 1px solid #e4e4e7;
-  background: white;
-  padding-block: 0.375rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-}
-
-:is(.dark) .appkit-row-action-menu__dropdown {
-  border-color: #334155;
-  background: #0f172a;
-}
-
-.appkit-row-action-menu__dropdown--left {
-  left: 0;
-}
-
-.appkit-row-action-menu__dropdown--right {
-  right: 0;
-}
-
-.appkit-row-action-menu__separator {
-  margin-block: 0.25rem;
-  height: 1px;
-  background: #e4e4e7;
-}
-
-:is(.dark) .appkit-row-action-menu__separator {
-  background: #334155;
-}
-
-.appkit-row-action-menu__item {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.875rem;
-  text-align: left;
-  font-size: 0.875rem;
-  color: #3f3f46;
-}
-
-.appkit-row-action-menu__item:hover {
-  background: #f4f4f5;
-}
-
-:is(.dark) .appkit-row-action-menu__item {
-  color: #f4f4f5;
-}
-
-:is(.dark) .appkit-row-action-menu__item:hover {
-  background: #1e293b;
-}
-
-.appkit-row-action-menu__item--destructive {
-  color: #dc2626;
-}
-
-.appkit-row-action-menu__item--destructive:hover {
-  background: #fef2f2;
-}
-
-:is(.dark) .appkit-row-action-menu__item--destructive {
-  color: #f87171;
-}
-
-:is(.dark) .appkit-row-action-menu__item--destructive:hover {
-  background: rgba(127, 29, 29, 0.4);
-}
-
-.appkit-row-action-menu__icon {
-  height: 1rem;
-  width: 1rem;
-  flex-shrink: 0;
-}
+/* RowActionMenu — kebab menu with dropdown action list */
+
+.appkit-row-action-menu {
+  position: relative;
+  display: inline-block;
+}
+
+.appkit-row-action-menu__trigger {
+  border-radius: 0.5rem;
+  padding: 0.375rem;
+}
+
+.appkit-row-action-menu__dropdown {
+  position: absolute;
+  z-index: var(--appkit-z-sidebar);
+  margin-top: 0.25rem;
+  min-width: 160px;
+  border-radius: 0.75rem;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  padding-block: 0.375rem;
+  box-shadow: var(--appkit-shadow-xl);
+}
+
+:is(.dark) .appkit-row-action-menu__dropdown {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+}
+
+.appkit-row-action-menu__dropdown--left {
+  left: 0;
+}
+
+.appkit-row-action-menu__dropdown--right {
+  right: 0;
+}
+
+.appkit-row-action-menu__separator {
+  margin-block: 0.25rem;
+  height: 1px;
+  background: var(--appkit-color-border);
+}
+
+:is(.dark) .appkit-row-action-menu__separator {
+  background: var(--appkit-color-border);
+}
+
+.appkit-row-action-menu__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.875rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: var(--appkit-color-zinc-700);
+}
+
+.appkit-row-action-menu__item:hover {
+  background: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-row-action-menu__item {
+  color: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-row-action-menu__item:hover {
+  background: var(--appkit-color-slate-800);
+}
+
+.appkit-row-action-menu__item--destructive {
+  color: var(--appkit-color-error);
+}
+
+.appkit-row-action-menu__item--destructive:hover {
+  background: var(--appkit-color-error-surface);
+}
+
+:is(.dark) .appkit-row-action-menu__item--destructive {
+  color: var(--appkit-color-rose-400);
+}
+
+:is(.dark) .appkit-row-action-menu__item--destructive:hover {
+  background: rgba(127, 29, 29, 0.4);
+}
+
+.appkit-row-action-menu__icon {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}

package/dist/ui/components/SectionTabs.style.css

@@ -1,15 +1,15 @@
 .appkit-section-tabs {
   position: sticky;
   top: var(--header-height, 0px);
-  z-index: 10;
-  background: #ffffff;
-  border-bottom: 1px solid #e4e4e7;
+  z-index: var(--appkit-z-raised);
+  background: var(--appkit-color-surface);
+  border-bottom: 1px solid var(--appkit-color-border);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
 .dark .appkit-section-tabs {
-  background: #020617;
-  border-bottom-color: #334155;
+  background: var(--appkit-color-bg);
+  border-bottom-color: var(--appkit-color-border);
 }
 
 .appkit-section-tabs--admin {
@@ -104,22 +104,22 @@
 
 .appkit-section-tabs__tab--active {
   border-color: rgba(80, 156, 2, 0.35);
-  background: #509c02;
-  color: #ffffff;
+  background: var(--appkit-color-secondary-600);
+  color: var(--appkit-color-text-on-primary);
   box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
 }
 
 .dark .appkit-section-tabs__tab--active {
   border-color: rgba(233, 30, 140, 0.4);
-  background: #e91e8c;
-  color: #ffffff;
+  background: var(--appkit-color-primary);
+  color: var(--appkit-color-text-on-primary);
   box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
 }
 
 .appkit-section-tabs__tab--inactive {
   border-color: rgba(80, 156, 2, 0.2);
   background: rgba(80, 156, 2, 0.1);
-  color: #509c02;
+  color: var(--appkit-color-secondary-600);
 }
 
 .appkit-section-tabs__tab--inactive:hover {
@@ -127,14 +127,14 @@
 }
 
 .dark .appkit-section-tabs__tab--inactive {
-  border-color: #334155;
+  border-color: var(--appkit-color-border);
   background: rgba(30, 41, 59, 0.8);
-  color: #f79dd2;
+  color: var(--appkit-color-primary-300);
 }
 
 .dark .appkit-section-tabs__tab--inactive:hover {
   background: rgba(51, 65, 85, 0.9);
-  color: #fce7f3;
+  color: var(--appkit-color-primary-100);
 }
 
 .appkit-section-tabs__icon {
@@ -150,15 +150,15 @@
 
 .appkit-section-tabs__count--active {
   background: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
+  color: var(--appkit-color-text-on-primary);
 }
 
 .appkit-section-tabs__count--inactive {
-  background: #f4f4f5;
-  color: #71717a;
+  background: var(--appkit-color-zinc-100);
+  color: var(--appkit-color-zinc-500);
 }
 
 .dark .appkit-section-tabs__count--inactive {
-  background: #334155;
-  color: #cbd5e1;
+  background: var(--appkit-color-slate-700);
+  color: var(--appkit-color-slate-300);
 }

package/dist/ui/components/Select.style.css

@@ -1,177 +1,177 @@
-.appkit-select {
-  position: relative;
-  width: 100%;
-}
-
-.appkit-select__label {
-  color: #3f3f46;
-}
-
-.dark .appkit-select__label {
-  color: #d4d4d8;
-}
-
-.appkit-select__trigger {
-  width: 100%;
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 0.5rem;
-  border: 1px solid #e4e4e7;
-  background: #ffffff;
-  color: #18181b;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.dark .appkit-select__trigger {
-  border-color: #334155;
-  background: rgba(30, 41, 59, 0.6);
-  color: #f8fafc;
-}
-
-.appkit-select__trigger--default:focus-visible {
-  border-color: #65c408;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
-}
-
-.dark .appkit-select__trigger--default:focus-visible {
-  border-color: #e91e8c;
-  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
-}
-
-.appkit-select__trigger--error {
-  border-color: #f87171;
-}
-
-.appkit-select__trigger--error:focus-visible {
-  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
-}
-
-.appkit-select__trigger--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.appkit-select__trigger--enabled {
-  cursor: pointer;
-}
-
-.appkit-select__value {
-  display: inline-flex;
-  align-items: center;
-}
-
-.appkit-select__value--selected {
-  color: #18181b;
-}
-
-.appkit-select__value--placeholder {
-  color: #a1a1aa;
-}
-
-.dark .appkit-select__value--selected {
-  color: #fafafa;
-}
-
-.dark .appkit-select__value--placeholder {
-  color: #737373;
-}
-
-.appkit-select__chevron {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  color: #a1a1aa;
-  transition: transform 0.2s ease;
-}
-
-.appkit-select__chevron--open {
-  transform: rotate(180deg);
-}
-
-.appkit-select__list {
-  position: absolute;
-  z-index: 50;
-  width: 100%;
-  max-height: 15rem;
-  overflow: auto;
-  border-radius: 0.5rem;
-  border: 1px solid #e4e4e7;
-  background: #ffffff;
-  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.25);
-  padding: 0.25rem 0;
-}
-
-.dark .appkit-select__list {
-  border-color: #334155;
-  background: #1e293b;
-}
-
-.appkit-select__list--up {
-  bottom: 100%;
-  margin-bottom: 0.25rem;
-}
-
-.appkit-select__list--down {
-  top: 100%;
-  margin-top: 0.25rem;
-}
-
-.appkit-select__option {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  user-select: none;
-}
-
-.appkit-select__option--disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.appkit-select__option--default {
-  color: #3f3f46;
-  cursor: pointer;
-}
-
-.appkit-select__option--default:hover {
-  background: #fafafa;
-}
-
-.dark .appkit-select__option--default {
-  color: #d4d4d8;
-}
-
-.dark .appkit-select__option--default:hover {
-  background: #334155;
-}
-
-.appkit-select__option--selected {
-  background: #f3ffe3;
-  color: #3e7708;
-}
-
-.dark .appkit-select__option--selected {
-  background: rgba(233, 30, 140, 0.15);
-  color: #f79dd2;
-}
-
-.appkit-select__option-label {
-  flex: 1;
-}
-
-.appkit-select__check {
-  width: 1rem;
-  height: 1rem;
-  margin-left: 0.5rem;
-  flex-shrink: 0;
-}
-
-.appkit-select__error {
-  margin-top: 0.375rem;
-}
+.appkit-select {
+  position: relative;
+  width: 100%;
+}
+
+.appkit-select__label {
+  color: var(--appkit-color-zinc-700);
+}
+
+.dark .appkit-select__label {
+  color: var(--appkit-color-zinc-300);
+}
+
+.appkit-select__trigger {
+  width: 100%;
+  min-height: var(--appkit-size-input-md);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-text);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dark .appkit-select__trigger {
+  border-color: var(--appkit-color-border);
+  background: rgba(30, 41, 59, 0.6);
+  color: var(--appkit-color-text);
+}
+
+.appkit-select__trigger--default:focus-visible {
+  border-color: var(--appkit-color-secondary);
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+}
+
+.dark .appkit-select__trigger--default:focus-visible {
+  border-color: var(--appkit-color-primary);
+  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
+}
+
+.appkit-select__trigger--error {
+  border-color: var(--appkit-color-error);
+}
+
+.appkit-select__trigger--error:focus-visible {
+  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
+}
+
+.appkit-select__trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.appkit-select__trigger--enabled {
+  cursor: pointer;
+}
+
+.appkit-select__value {
+  display: inline-flex;
+  align-items: center;
+}
+
+.appkit-select__value--selected {
+  color: var(--appkit-color-text);
+}
+
+.appkit-select__value--placeholder {
+  color: var(--appkit-color-text-faint);
+}
+
+.dark .appkit-select__value--selected {
+  color: var(--appkit-color-text);
+}
+
+.dark .appkit-select__value--placeholder {
+  color: var(--appkit-color-text-muted);
+}
+
+.appkit-select__chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--appkit-color-text-faint);
+  transition: transform 0.2s ease;
+}
+
+.appkit-select__chevron--open {
+  transform: rotate(180deg);
+}
+
+.appkit-select__list {
+  position: absolute;
+  z-index: var(--appkit-z-sidebar);
+  width: 100%;
+  max-height: 15rem;
+  overflow: auto;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.25);
+  padding: 0.25rem 0;
+}
+
+.dark .appkit-select__list {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-slate-800);
+}
+
+.appkit-select__list--up {
+  bottom: 100%;
+  margin-bottom: 0.25rem;
+}
+
+.appkit-select__list--down {
+  top: 100%;
+  margin-top: 0.25rem;
+}
+
+.appkit-select__option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+.appkit-select__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.appkit-select__option--default {
+  color: var(--appkit-color-zinc-700);
+  cursor: pointer;
+}
+
+.appkit-select__option--default:hover {
+  background: var(--appkit-color-bg);
+}
+
+.dark .appkit-select__option--default {
+  color: var(--appkit-color-zinc-300);
+}
+
+.dark .appkit-select__option--default:hover {
+  background: var(--appkit-color-slate-700);
+}
+
+.appkit-select__option--selected {
+  background: var(--appkit-color-secondary-50);
+  color: var(--appkit-color-secondary-700);
+}
+
+.dark .appkit-select__option--selected {
+  background: rgba(233, 30, 140, 0.15);
+  color: var(--appkit-color-primary-300);
+}
+
+.appkit-select__option-label {
+  flex: 1;
+}
+
+.appkit-select__check {
+  width: 1rem;
+  height: 1rem;
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+.appkit-select__error {
+  margin-top: 0.375rem;
+}