/* ========================================================================== bridge.css — Jembatan antara Design System dan CSS Lama ERP -------------------------------------------------------------------------- FILE INI JANGAN DIUBAH OLEH TANGAN. Kalau mau ubah warna brand, ubah di: /design-system/tokens/_colors.css Kalau mau ubah nama variabel lama, ubah di: /css/01-variable.css File ini hanya jadi "penerjemah" antara keduanya. CARA KERJA: DS menggunakan --brand-500, --gray-300, --radius-md, dll CSS lama pakai --color-brand-1, --color-grey75, --radius-50, dll Bridge ini memetakan yang satu ke yang lain, DUA ARAH. URUTAN LOAD DI : 1. /design-system/tokens/index.css ← definisi --brand-500, dll 2. /design-system/base/index.css 3. /design-system/components/** 4. /css/bridge.css ← FILE INI (setelah DS, sebelum CSS lama) 5. /css/01-variable.css ← definisi --color-brand-1, dll 6. /css/02-layout.css 7. ... ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 1: BRAND COLOR ───────────────────────────────────────────────────────────────────────── Warna brand Swansima: --color-brand-1 : #18a1f7 (biru terang) DS placeholder: --brand-500 : hsl(220, 65%, 46%) (biru tua) Bridge ini MENGAMBIL nilai dari CSS lama (#18a1f7) dan MEMASUKKANNYA ke semua slot DS, agar komponen DS (button, link, focus ring) juga tampil dalam warna brand yang benar. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Injeksi brand Swansima ke dalam skala primitif DS ── */ --brand-50: #ebf7fe; /* tint sangat muda (#18a1f7 + 95% white) */ --brand-100: #c5e8fd; --brand-200: #9dd8fb; --brand-300: #5fbef8; --brand-400: #35adf8; /* sedikit lebih terang dari main */ --brand-500: #18a1f7; /* ← MAIN BRAND → sama dengan --color-brand-1 */ --brand-600: #1798e9; /* ← sama dengan --color-brand-3 */ --brand-700: #1280c8; --brand-800: #0d659e; --brand-900: #084a74; /* ── Alias agar CSS lama & DS bicara nama yang sama ── */ /* CSS lama → DS */ --color-brand-1: var(--brand-500); /* #18a1f7 */ --color-brand-2: var(--brand-400); /* #69bcf9 ≈ */ --color-brand-3: var(--brand-600); /* #1798e9 */ } /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 2: WARNA SISTEM (abu, merah, hijau, kuning) ───────────────────────────────────────────────────────────────────────── DS memakai semantic token: --color-error, --color-success, dst CSS lama memakai: --color-red, --color-green, --color-yellow ══════════════════════════════════════════════════════════════════════════ */ :root { /* CSS lama → DS semantic */ --color-red: var(--error-500, hsl(3, 100%, 69%)); --color-green: var(--success-400, hsl(120, 73%, 75%)); --color-yellow: var(--warning-400, hsl(59, 87%, 51%)); /* DS neutral → CSS lama nama */ --color-white: var(--gray-0); /* hsl(0,0%,100%) */ --color-grey-light: var(--gray-100); /* #f5f5f7 ≈ hsl(240,11%,96%) */ --color-grey75: var(--gray-300); /* hsl(0,0%,80%) ≈ #bfbfbf */ --color-grey50: var(--gray-500); /* hsl(0,0%,50%) = #808080 */ --color-grey25: var(--gray-700, hsl(0,0%,25%)); --color-black: var(--gray-950, hsl(0,0%,0%)); /* Warna abu bernuansa (tetap dari CSS lama, DS tidak punya padanan) */ --color-grey: hsl(228, 7%, 43%); /* #676a76 */ --color-grey-modern: hsl(0, 0%, 20%); /* #333333 */ --color-grey-yellow-warm: hsl(30, 5%, 25%); --color-grey-blue-cool: hsl(210, 5%, 20%); } /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 3: SPACING / SIZE ───────────────────────────────────────────────────────────────────────── CSS lama: --size-100 s/d --size-1200 (4px–128px, skala 4px) DS: --size-100 s/d --size-800 (sama persis di overlap) Skala 100–800 sudah identik antara DS dan CSS lama. Bridge hanya perlu menambahkan ukuran yang ada di CSS lama tapi tidak ada di DS (900–1200). ══════════════════════════════════════════════════════════════════════════ */ :root { /* Ukuran yang ada di CSS lama tapi tidak di DS tokens */ --size-900: 5rem; /* 80px */ --size-1000: 6rem; /* 96px */ --size-1100: 7rem; /* 112px */ --size-1200: 8rem; /* 128px */ /* Catatan: --size-100 s/d --size-800 sudah didefinisikan di DS tokens/_spacing.css dan nilai-nya IDENTIK dengan CSS lama. Tidak perlu di-override. */ } /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 4: RADIUS / SUDUT LENGKUNG ───────────────────────────────────────────────────────────────────────── CSS lama: --radius-25 (4px) --radius-50 (8px) --radius-75 (12px) --radius-100 (16px) DS: --radius-sm --radius-md --radius-lg --radius-xl (dll) ══════════════════════════════════════════════════════════════════════════ */ :root { /* DS → nama CSS lama (agar class .radius-50, .radius-100 tetap bisa pakai) */ --radius-25: var(--radius-sm, 0.25rem); /* 4px */ --radius-50: var(--radius-md, 0.5rem); /* 8px */ --radius-75: var(--radius-lg, 0.75rem); /* 12px */ --radius-100: var(--radius-xl, 1rem); /* 16px */ --capsul: var(--radius-full, 100vmax); /* CSS lama nama → DS nama (agar komponen DS pakai radius yang sama) */ /* (DS sudah punya --radius-sm/md/lg/xl/2xl, tidak perlu override) */ } /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 5: TIPOGRAFI / FONT SIZE ───────────────────────────────────────────────────────────────────────── CSS lama: --font-size-50 s/d --font-size-1000 DS: --text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl… Pemetaan aproximasi supaya kalau ada komponen DS yang pakai --text-sm nilainya tidak jauh berbeda dari font lama. ══════════════════════════════════════════════════════════════════════════ */ :root { /* DS font scale → CSS lama nama (opsional, untuk konsistensi lintas sistem) */ --font-size-50: var(--text-2xs, 0.438rem); --font-size-75: var(--text-xs, 0.75rem); --font-size-100: var(--text-sm, 0.875rem); --font-size-200: var(--text-base, 1rem); --font-size-300: var(--text-lg, 1.125rem); --font-size-400: var(--text-xl, 1.25rem); --font-size-500: var(--text-2xl, 1.5rem); --font-size-600: var(--text-3xl, 1.75rem); --font-size-700: var(--text-4xl, 2rem); --font-size-800: var(--text-5xl, 2.5rem); --font-size-900: var(--text-6xl, 3rem); --font-size-1000: var(--text-7xl, 3.815rem); /* Font weight — identik antara keduanya, tidak perlu bridge */ /* --font-weight-regular: 400 */ /* --font-weight-semi-bold: 500 */ /* --font-weight-bold: 700 */ } /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 6: KOMPONEN FLASH MESSAGE ───────────────────────────────────────────────────────────────────────── flash-message.css memakai --radius-50 dan --color-green / --color-red. Bagian 2 & 4 sudah mengisi keduanya. Tidak ada override tambahan. Satu penyesuaian: posisi flash-message agar tidak tertutup navbar. Tinggi navbar DS = --navbar-height (default 56px / 3.5rem). ══════════════════════════════════════════════════════════════════════════ */ .flash-message { /* Override posisi top agar di bawah navbar DS (bukan hardcode 5rem) */ top: calc(var(--navbar-height, 3.5rem) + var(--size-300)); } /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 7: SPINNER (app-core.js & CSS lama) ───────────────────────────────────────────────────────────────────────── .spinner di 01-variable.css pakai --color-grey-light dan --color-brand-3. Bridge sudah mengisi keduanya. Tidak perlu override tambahan. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ BAGIAN 8: OVERRIDE KONFLIK RINGAN ───────────────────────────────────────────────────────────────────────── Kedua sistem punya reset CSS. DS base/reset.css dan CSS lama 01-variable.css keduanya set box-sizing, margin:0, img display:block, dsb. DS reset lebih modern (menggunakan :where() agar spesifisitas 0). CSS lama langsung pakai *, yang punya spesifisitas lebih tinggi. Bridge membiarkan CSS lama menang di sini (tidak ada konflik). Yang perlu diperhatikan: - CSS lama set body ke grid (header/main/footer) - main-layout.php override body grid di