Adom Theme - tokens.css

Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

/*
 * Adom theme tokens - all five schemes, extracted VERBATIM from the reference
 * implementation (hydrogen-desktop src/routes/styles.css @ a4c764be, pack v7.2.0).
 * The base :root block IS Adom Studio Dark; each [data-scheme] block overrides it.
 * Apply as <html data-scheme="studio|studio-bright|studio-dark|kickstand|slate">
 * (studio-dark needs no block - it is the base).
 * Comments were stripped mechanically; the values are byte-exact.
 * Living source + full rationale: https://wiki.adom.inc/adom/adom-theme-system
 */
:root {
    
    --font-body: 'DM Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'DM Mono', monospace;
    
    --brand-heading: 'Familjen Grotesk', var(--font-body);
    --brand-body: 'Satoshi', var(--font-body);
    --brand-teal: var(--accent);
    --brand-teal-dark: #003c3f;
    --brand-blue: #0061ef;
    --brand-navy: #00204f;
    --brand-black: #191919;

    
    --bg: #0d1117;            
    --surface: #161b22;       
    --elevated: #1c2128;      
    --overlay: #21262d;       
    --border: #30363d;        

    --text: #e6edf3;          
    --text-body: #c9d1d9;     
    --text-2: #8b949e;        
    --text-3: #484f58;        

    --accent: #00b8b1;        
    --accent-hover: #00d4cb;
    --accent-bright: #00e6dc;
    --on-accent: #05221f;     

    --blue: #64abff;          
    --blue-fill: #0061ef;     
    --purple: #8c6bf7;
    --green: #3fb950;         
    --red: #f85149;           
    --yellow: #d29922;        

    
    --color-text: rgba(0, 0, 0, 0.7);

    overscroll-behavior: none;
}

:root[data-scheme='studio'] {
    
    --text-2: #c9d1d9;
    --text-3: #6e7681;

    
    --bg: #161b22;            
    --surface: #0d1117;       
}

:root[data-scheme='studio-bright'] {
    --text-2: #c9d1d9;        
    --text-3: #6e7681;        
}

:root[data-scheme='kickstand'] {
    
    --bg: #191919;
    --surface: #202127;
    --elevated: #282a30;
    
    --overlay: #0e1c31;
    --border: #3d3f46;

    --text: #f5f7f9;
    --text-body: #d7dde3;
    --text-2: #97a0aa;
    --text-3: #5a626b;

    --accent: #00b8b1;
    --accent-hover: #00d4cb;
    --accent-bright: #8fd3d4;
    --on-accent: #003c3f;

    --blue: #64abff;
    --blue-fill: #0061ef;
    --purple: #8c6bf7;
    --green: #3fb950;
    --red: #f85149;
    --yellow: #d29922;
}

:root[data-scheme='slate'] {
    --bg: #17212e;
    --surface: #202a37;
    --elevated: #28323f;
    --overlay: #313b48;
    --border: #3d4754;

    --text: #f0f6fc;
    --text-body: #d3e0ef;
    --text-2: #93a6bd;
    --text-3: #4a5a70;

    --accent: #00b8b1;
    --accent-hover: #00d4cb;
    --accent-bright: #5fe6de;
    --on-accent: #04211f;

    --blue: #64abff;
    --blue-fill: #0061ef;
    --purple: #8c6bf7;
    --green: #3fb950;
    --red: #f85149;
    --yellow: #d29922;
}