From af2ec69a85fbca6b316741196a425ebe61934fe5 Mon Sep 17 00:00:00 2001
From: Iyyafi Qolbi
Date: Sun, 6 Oct 2024 15:53:33 +0700
Subject: i18n(id): Update css-and-tailwind.mdx translation (#2436)

---
 .../content/docs/id/guides/css-and-tailwind.mdx    | 29 ++++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/docs/src/content/docs/id/guides/css-and-tailwind.mdx b/docs/src/content/docs/id/guides/css-and-tailwind.mdx
index b28f1304..6475fc79 100644
--- a/docs/src/content/docs/id/guides/css-and-tailwind.mdx
+++ b/docs/src/content/docs/id/guides/css-and-tailwind.mdx
@@ -3,12 +3,16 @@ title: CSS dan Styling
 description: Pelajari bagaimana cara styling website Starlight Anda dengan custom css dan mengintegrasikannya dengan Tailwind CSS.
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 Anda dapat menggunakan custom CSS atau menggunakan plugin Tailwind Starlight untuk styling website Starlight Anda.
 
 ## Custom CSS styles
 
 Sesuaikan style yang diterapkan pada website Starlight Anda dengan memberikan file CSS tambahan untuk memodifikasi atau menambahkan style ke style default dari Starlight.
 
+<Steps>
+
 1. Tambakan sebuah file CSS ke direktori `src/` Anda.
    Sebagai contoh, Anda dapat mengatur lebar kolom default yang lebih lebar dan ukuran teks yang lebih besar untuk judul halaman:
 
@@ -22,7 +26,7 @@ Sesuaikan style yang diterapkan pada website Starlight Anda dengan memberikan fi
 
 2. Tambahkan path file CSS Anda ke dalam array `customCss` pada config Starlight di `astro.config.mjs`.
 
-   ```js
+   ```diff lang="js"
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
@@ -32,14 +36,16 @@ Sesuaikan style yang diterapkan pada website Starlight Anda dengan memberikan fi
    		starlight({
    			title: 'Website Dokumentasi Dengan Custom CSS',
    			customCss: [
-   				// Path relative ke custom CSS file Anda
-   				'./src/styles/custom.css',
+   +				// Path relative ke custom CSS file Anda
+   +				'./src/styles/custom.css',
    			],
    		}),
    	],
    });
    ```
 
+</Steps>
+
 Anda dapat melihat semua properti custom CSS yang dapat Anda atur yang digunakan oleh Starlight untuk menyesuaikan website dokumentasi Anda di dalam file [`props.css` di GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
 
 ## Tailwind CSS
@@ -55,11 +61,9 @@ Plugin Tailwind Starlight menerapkan konfigurasi berikut:
 
 ### Membuat proyek baru dengan Tailwind
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 Mulai proyek Starlight baru dengan konfigurasi awal Tailwind CSS menggunakan `create astro`:
 
-<Tabs>
+<Tabs syncKey="pkg">
 <TabItem label="npm">
 
 ```sh
@@ -87,9 +91,11 @@ yarn create astro --template starlight/tailwind
 
 Jika Anda sudah memiliki website Starlight dan ingin menambahkan Tailwind CSS, ikuti langkah-langkah berikut.
 
+<Steps>
+
 1.  Tambahkan Integrasi Tailwind Astro
 
-    <Tabs>
+    <Tabs syncKey="pkg">
 
     <TabItem label="npm">
 
@@ -119,7 +125,7 @@ Jika Anda sudah memiliki website Starlight dan ingin menambahkan Tailwind CSS, i
 
 2.  Instal plugin Tailwind Starlight
 
-    <Tabs>
+    <Tabs syncKey="pkg">
 
     <TabItem label="npm">
 
@@ -194,6 +200,8 @@ Jika Anda sudah memiliki website Starlight dan ingin menambahkan Tailwind CSS, i
     };
     ```
 
+</Steps>
+
 ### Styling Starlight dengan Tailwind
 
 Starlight akan menggunakan nilai-nilai dari konfigurasi tema [Tailwind Anda](https://tailwindcss.com/docs/theme) di dalam UI-nya.
@@ -243,6 +251,8 @@ Variabel-variabel ini digunakan di seluruh UI dengan berbagai nuansa abu-abu yan
 Gunakan slider di bawah ini untuk mengubah palet warna aksen dan abu-abu Starlight.
 Preview gelap dan terang akan menampilkan warna-warna hasilnya, dan seluruh halaman juga akan diperbarui untuk menyesuaikan dengan perubahan yang Anda lakukan.
 
+Gunakan opsi Tingkat Kontras untuk menentukan [standar kontras warna](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) Pedoman Aksesibilitas Konten Web mana yang dipenuhi.
+
 Saat Anda puas dengan perubahan Anda, salin CSS atau kode Tailwind di bawah ini dan gunakan di proyek Anda.
 
 import ThemeDesigner from '~/components/theme-designer.astro';
@@ -258,6 +268,9 @@ import ThemeDesigner from '~/components/theme-designer.astro';
 			default: 'Default',
 			random: 'Acak',
 		},
+		contrast: {
+			label: 'Tingkat Kontras',
+		},
 		editor: {
 			accentColor: 'Aksen',
 			grayColor: 'Abu-abu',
-- 
cgit