kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): standardize AG Grid Odd/Even Zebra Stripes, Sky Blue hover and active row selection tokens in tokens.css and AGENTS.md

Browse Source
This commit is contained in:
김재현
2026-08-15 22:03:20 +09:00
parent 8d817de082
commit 358ad7aa65
3 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/design-system/tokens.css
+40 -3
View File
@@ -190,14 +190,31 @@
--ag-row-height: 28px !important;
--ag-font-size: var(--ks-font-grid) !important;
--ag-font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif !important;
--ag-border-color: var(--ks-color-border) !important;
--ag-border-color: var(--ks-color-neutral-200) !important;
--ag-header-background-color: #f1f5f9 !important;
--ag-header-foreground-color: var(--ks-color-neutral-800) !important;
--ag-row-hover-color: var(--ks-color-neutral-100) !important;
--ag-selected-row-background-color: rgba(59, 130, 246, 0.1) !important;
--ag-row-hover-color: #e0f2fe !important; /* Premium Sky Light Blue Hover */
--ag-selected-row-background-color: #dbeafe !important; /* Premium Active Selected Row Sky Blue (#dbeafe) */
--ag-odd-row-background-color: #f8fafc !important; /* KBX Odd Row Zebra Stripe Background (#f8fafc) */
--ag-background-color: #ffffff !important; /* Even Row Background (#ffffff) */
--ag-range-selection-border-color: #2563eb !important;
font-size: var(--ks-font-grid) !important;
}
/* AG Grid Dark Mode Theme Tokens Overrides */
[data-theme='dark'] .ag-theme-quartz,
[data-theme='dark'] .ag-theme-alpine,
[data-theme='dark'] [class*="ag-theme-"],
[data-theme='dark'] .ag-root-wrapper {
--ag-border-color: #334155 !important;
--ag-header-background-color: #1e293b !important;
--ag-header-foreground-color: #f8fafc !important;
--ag-row-hover-color: #334155 !important;
--ag-selected-row-background-color: #1e3a8a !important;
--ag-odd-row-background-color: #0f172a !important;
--ag-background-color: #090d16 !important;
}
.ag-header, .ag-header-row, .ag-header-cell {
background-color: #f1f5f9 !important; /* KBX Standard Premium Header Gray (#f1f5f9) */
color: var(--ks-color-neutral-800) !important;
@@ -205,6 +222,13 @@
font-size: var(--ks-font-grid) !important;
}
[data-theme='dark'] .ag-header,
[data-theme='dark'] .ag-header-row,
[data-theme='dark'] .ag-header-cell {
background-color: #1e293b !important;
color: #f8fafc !important;
}
.ag-header-cell {
border-right: 1px solid var(--ks-color-neutral-200) !important;
}
@@ -213,6 +237,19 @@
border-bottom: 1px solid var(--ks-color-neutral-300) !important;
}
/* Odd row zebra stripe override for legacy/custom grid cells */
.ag-row-odd {
background-color: #f8fafc !important;
}
.ag-row-even {
background-color: #ffffff !important;
}
.ag-row-selected {
background-color: #dbeafe !important;
color: #1e3a8a !important;
font-weight: 600 !important;
}
/* Raw Table Standard Grid Class for legacy fallback tables */
.grid-table, .kbx-grid-table, .models-table, .shadow-runs-table {
width: 100%;