Sitemas menggunakan CSS Custom Properties (variables) untuk theming yang konsisten. Artikel ini adalah referensi lengkap semua tokens yang tersedia.

Lokasi File

FileFungsi
src/styles/m3-tokens.cssM3 color, shape, motion tokens
src/styles/global.cssTypography, spacing, layout
src/styles/fonts.cssFont definitions

Color Tokens

Primary Colors

Primary colors
css 
:root {
    --md-sys-color-primary: #7438D2;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005E;
    --md-sys-color-inverse-primary: #CFBCFF;
}

[data-theme="dark"] {
    --md-sys-color-primary: #CFBCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
}

Secondary Colors

Secondary colors
css 
:root {
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1E192B;
}

Tertiary Colors

Tertiary colors
css 
:root {
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-on-tertiary-container: #370B1E;
}

Surface Colors

Surface colors
css 
:root {
    --md-sys-color-surface: #FFFBFE;
    --md-sys-color-surface-dim: #DED8E1;
    --md-sys-color-surface-bright: #FFFBFE;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F7F2FA;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-surface-container-high: #ECE6F0;
    --md-sys-color-surface-container-highest: #E6E0E9;
    --md-sys-color-on-surface: #1C1B1F;
    --md-sys-color-on-surface-variant: #49454F;
}

Error Colors

Error colors
css 
:root {
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;
}

Outline Colors

Outline colors
css 
:root {
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;
}

Category Colors

Category colors
css 
:root {
    --md-ext-color-dokumentasi: #8b5cf6;
    --md-ext-color-tutorial: #3b82f6;
    --md-ext-color-insight: #f59e0b;
    --md-ext-color-tips: #10b981;
}

Shape Tokens

Shape tokens mengontrol border-radius komponen.

Shape tokens
css 
:root {
    /* Corner radius */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
}

Penggunaan:

.card {
    border-radius: var(--md-sys-shape-corner-large);
}

.button {
    border-radius: var(--md-sys-shape-corner-full);
}

Motion Tokens

Motion tokens mengontrol animasi dan transisi.

Motion tokens
css 
:root {
    /* Duration */
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    
    /* Easing */
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
}

Penggunaan:

.element {
    transition: transform var(--md-sys-motion-duration-medium2) 
                var(--md-sys-motion-easing-emphasized);
}

Typography Tokens

Typography tokens
css 
:root {
    /* Font Family */
    --font-sans: 'Google Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
}

Spacing Tokens

Spacing tokens
css 
:root {
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
}

Penggunaan:

.container {
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-8);
    gap: var(--spacing-2);
}

Layout Tokens

Layout tokens
css 
:root {
    /* Navbar */
    --navbar-height: 64px;
    
    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 24px;
    
    /* Content */
    --content-max-width: 720px;
    --article-max-width: 800px;
    
    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 150;
    --z-fixed: 200;
    --z-modal-backdrop: 250;
    --z-modal: 300;
    --z-popover: 400;
    --z-tooltip: 500;
}

Legacy/Semantic Tokens

Untuk backward compatibility dan readability:

Semantic tokens
css 
:root {
    /* Colors */
    --color-accent: var(--md-sys-color-primary);
    --color-accent-subtle: var(--md-sys-color-primary-container);
    --color-bg-primary: var(--md-sys-color-surface);
    --color-bg-secondary: var(--md-sys-color-surface-container);
    --color-bg-tertiary: var(--md-sys-color-surface-container-high);
    --color-text-primary: var(--md-sys-color-on-surface);
    --color-text-secondary: var(--md-sys-color-on-surface-variant);
    --color-text-muted: var(--md-sys-color-outline);
    --color-border: var(--md-sys-color-outline-variant);
    
    /* Status colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: var(--md-sys-color-error);
    --color-info: #3b82f6;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

Menggunakan Tokens

Dalam Komponen Astro

<style>
    .my-button {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        padding: var(--spacing-2) var(--spacing-4);
        border-radius: var(--md-sys-shape-corner-full);
        transition: all var(--md-sys-motion-duration-short4)
                    var(--md-sys-motion-easing-standard);
    }
    
    .my-button:hover {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }
</style>

Dalam Global CSS

/* src/styles/global.css */
body {
    font-family: var(--font-sans);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

Dark Mode

Semua M3 tokens otomatis berubah di dark mode:

[data-theme="dark"] {
    --md-sys-color-primary: #CFBCFF;      /* Lighter in dark */
    --md-sys-color-surface: #1C1B1F;       /* Dark background */
    --md-sys-color-on-surface: #E6E0E9;    /* Light text */
    /* ... dan seterusnya */
}
Auto Dark Mode

Anda tidak perlu menulis CSS terpisah untuk dark mode. Cukup gunakan tokens, dan warna akan menyesuaikan otomatis saat user toggle theme.

Menambahkan Token Baru

Untuk konsistensi, tambahkan custom tokens di m3-tokens.css:

Custom tokens
css 
:root {
    /* Custom brand colors */
    --brand-primary: #FF6B6B;
    --brand-secondary: #4ECDC4;
    
    /* Custom spacing */
    --spacing-header: 80px;
}

[data-theme="dark"] {
    --brand-primary: #FF8E8E;
    --brand-secondary: #6EE7DE;
}

Changelog

Lihat changelog dan roadmap pengembangan Sitemas.

Lihat Changelog

Kesimpulan

CSS tokens memberikan konsistensi dan maintainability:

  1. Konsistensi — Semua komponen menggunakan nilai yang sama
  2. Theming — Ubah satu token, berubah di mana-mana
  3. Dark mode — Otomatis tanpa CSS terpisah
  4. Readability — Nama semantic lebih mudah dipahami

Gunakan tokens untuk semua nilai yang mungkin berulang. Hindari hardcode warna, ukuran, atau timing di komponen individual.

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.