commit ebd73ecc6a6121cf7a2d21c3db35457bd9010e27 · anil.recoil.org/slop

+8 -19

arod-web/arod-sidenotes.js

···

       43
       43
        
                 --content-width: 40rem;

     

       44
       44
        
                 --sidenote-width: 18rem;

     

       45
       45
        
                 --gap: 2.5rem;

     

       46
       46
       -
                 --bg: #fffffc;

     

       47
       47
       -
                 --text: #1a1a1a;

     

       48
       48
       -
                 --text-muted: #666;

     

       49
       49
       -
                 --accent: #090c8d;

     

       50
       50
       -
                 --sidenote-bg: #fafafa;

     

       51
       51
       -
                 --border: #e0e0e0;

     

       46
       46
       +
                 --bg: var(--color-bg-primary, #fffffc);

     

       47
       47
       +
                 --text: var(--color-text-primary, #1a1a1a);

     

       48
       48
       +
                 --text-muted: var(--color-text-muted, #666);

     

       49
       49
       +
                 --accent: var(--color-accent, #090c8d);

     

       50
       50
       +
                 --sidenote-bg: var(--color-bg-secondary, #fafafa);

     

       51
       51
       +
                 --border: var(--color-border, #e0e0e0);

     

       52
       52
        
       

     

       53
       53
        
                 display: block;

     

       54
       54
        
                 position: relative;

     

       55
       55
        
                 max-width: calc(var(--content-width) + var(--gap) + var(--sidenote-width));

     

       56
       56
        
                 margin: 0 auto;

     

       57
       57
        
                 padding: 0 1rem;

     

       58
       58
       -
               }

     

       59
       59
       -
       

     

       60
       60
       -
               @media (prefers-color-scheme: dark) {

     

       61
       61
       -
                 :host {

     

       62
       62
       -
                   --bg: #1a1a1a;

     

       63
       63
       -
                   --text: #e0e0e0;

     

       64
       64
       -
                   --text-muted: #999;

     

       65
       65
       -
                   --accent: #4db8ff;

     

       66
       66
       -
                   --sidenote-bg: #252525;

     

       67
       67
       -
                   --border: #444;

     

       68
       68
       -
                 }

     

       69
       58
        
               }

     

       70
       59
        
       

     

       71
       60
        
               .content {

     
···

       141
       130
        
                 }

     

       142
       131
        
       

     

       143
       132
        
                 .sidenote-content pre {

     

       144
       144
       -
                   background: var(--sidenote-bg);

     

       133
       133
       +
                   background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));

     

       145
       134
        
                   padding: 0.5rem;

     

       146
       135
        
                   border-radius: 4px;

     

       147
       136
        
                   overflow-x: auto;

     
···

       514
       503
        
               }

     

       515
       504
        
       

     

       516
       505
        
               ::slotted(pre) {

     

       517
       517
       -
                 background: rgba(0, 0, 0, 0.05);

     

       506
       506
       +
                 background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));

     

       518
       507
        
                 padding: 0.5rem;

     

       519
       508
        
                 border-radius: 4px;

     

       520
       509
        
                 overflow-x: auto;

+119 -34

arod-web/arod-theme.js

···

       17
       17
        
         constructor() {

     

       18
       18
        
           super();

     

       19
       19
        
           this.attachShadow({ mode: 'open' });

     

       20
       20
       -
           this.themes = ['light', 'dark', 'system'];

     

       20
       20
       +
           this.themes = ['system', 'light', 'dark', 'high-contrast', 'colorblind', 'sepia'];

     

       21
       21
        
           this.currentTheme = 'system';

     

       22
       22
        
         }

     

       23
       23
        
       

     
···

       38
       38
        
             <style>

     

       39
       39
        
               :host {

     

       40
       40
        
                 display: inline-block;

     

       41
       41
       +
                 position: relative;

     

       41
       42
        
               }

     

       42
       43
        
       

     

       43
       44
        
               .theme-toggle {

     
···

       95
       96
        
               /* Hover rotation effect */

     

       96
       97
        
               .theme-toggle:hover .theme-icon svg.entering {

     

       97
       98
        
                 transform: rotate(20deg) scale(1);

     

       99
       99
       +
               }

     

       100
       100
       +
       

     

       101
       101
       +
               /* Tooltip */

     

       102
       102
       +
               .tooltip {

     

       103
       103
       +
                 position: absolute;

     

       104
       104
       +
                 top: calc(100% + 8px);

     

       105
       105
       +
                 left: 50%;

     

       106
       106
       +
                 transform: translateX(-50%) scale(0.8);

     

       107
       107
       +
                 background: #333;

     

       108
       108
       +
                 color: white;

     

       109
       109
       +
                 padding: 0.25rem 0.5rem;

     

       110
       110
       +
                 border-radius: 4px;

     

       111
       111
       +
                 font-size: 0.75rem;

     

       112
       112
       +
                 white-space: nowrap;

     

       113
       113
       +
                 pointer-events: none;

     

       114
       114
       +
                 opacity: 0;

     

       115
       115
       +
                 transition: opacity 0.2s ease, transform 0.2s ease;

     

       116
       116
       +
                 z-index: 1000;

     

       117
       117
       +
               }

     

       118
       118
       +
       

     

       119
       119
       +
               .tooltip::after {

     

       120
       120
       +
                 content: '';

     

       121
       121
       +
                 position: absolute;

     

       122
       122
       +
                 bottom: 100%;

     

       123
       123
       +
                 left: 50%;

     

       124
       124
       +
                 transform: translateX(-50%);

     

       125
       125
       +
                 width: 0;

     

       126
       126
       +
                 height: 0;

     

       127
       127
       +
                 border-left: 4px solid transparent;

     

       128
       128
       +
                 border-right: 4px solid transparent;

     

       129
       129
       +
                 border-bottom: 4px solid #333;

     

       130
       130
       +
               }

     

       131
       131
       +
       

     

       132
       132
       +
               .theme-toggle:hover .tooltip {

     

       133
       133
       +
                 opacity: 1;

     

       134
       134
       +
                 transform: translateX(-50%) scale(1);

     

       98
       135
        
               }

     

       99
       136
        
       

     

       100
       137
        
               /* Dark mode overrides when active */

     
···

       111
       148
        
       

     

       112
       149
        
             <button class="theme-toggle" aria-label="Toggle theme">

     

       113
       150
        
               <span class="theme-icon"></span>

     

       151
       151
       +
               <span class="tooltip"></span>

     

       114
       152
        
             </button>

     

       115
       153
        
           `;

     

       116
       154
        
         }

     
···

       124
       162
        
         }

     

       125
       163
        
       

     

       126
       164
        
         cycleTheme() {

     

       127
       127
       -
           const themes = ['system', 'light', 'dark'];

     

       128
       128
       -
           const currentIndex = themes.indexOf(this.currentTheme);

     

       129
       129
       -
           const nextIndex = (currentIndex + 1) % themes.length;

     

       130
       130
       -
           const nextTheme = themes[nextIndex];

     

       165
       165
       +
           const currentIndex = this.themes.indexOf(this.currentTheme);

     

       166
       166
       +
           const nextIndex = (currentIndex + 1) % this.themes.length;

     

       167
       167
       +
           const nextTheme = this.themes[nextIndex];

     

       131
       168
        
       

     

       132
       169
        
           this.setTheme(nextTheme);

     

       133
       170
        
         }

     
···

       177
       214
        
         updateUI() {

     

       178
       215
        
           const icon = this.shadowRoot.querySelector('.theme-icon');

     

       179
       216
        
           const toggle = this.shadowRoot.querySelector('.theme-toggle');

     

       217
       217
       +
           const tooltip = this.shadowRoot.querySelector('.tooltip');

     

       180
       218
        
       

     

       181
       219
        
           // Clear existing icon with animation

     

       182
       220
        
           const existingIcons = icon.querySelectorAll('svg');

     
···

       189
       227
        
           setTimeout(() => {

     

       190
       228
        
             let iconSvg;

     

       191
       229
        
             let ariaLabel;

     

       230
       230
       +
             let themeName;

     

       192
       231
        
       

     

       193
       193
       -
             if (this.currentTheme === 'system') {

     

       194
       194
       -
               // Hybrid icon for system mode - half sun, half moon

     

       195
       195
       -
               iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       196
       196
       -
                 <defs>

     

       197
       197
       -
                   <clipPath id="halfClip">

     

       198
       198
       -
                     <rect x="0" y="0" width="12" height="24"/>

     

       199
       199
       -
                   </clipPath>

     

       200
       200
       -
                 </defs>

     

       201
       201
       -
                 <!-- Half sun (left side) -->

     

       202
       202
       -
                 <g clip-path="url(#halfClip)">

     

       203
       203
       -
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"></path>

     

       204
       204
       -
                   <circle cx="12" cy="12" r="4" stroke-width="2"/>

     

       205
       205
       -
                 </g>

     

       206
       206
       -
                 <!-- Half moon (right side) -->

     

       207
       207
       -
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12c0-2.21 1.79-4 4-4 .35 0 .69.04 1.01.13A7 7 0 1112 19c0-.34.03-.67.08-1 2.21 0 4-1.79 4-4z" opacity="0.8"></path>

     

       208
       208
       -
               </svg>`;

     

       209
       209
       -
               ariaLabel = 'Toggle theme (System)';

     

       210
       210
       -
             } else if (this.currentTheme === 'light') {

     

       211
       211
       -
               // Sun icon for light mode

     

       212
       212
       -
               iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       213
       213
       -
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>

     

       214
       214
       -
               </svg>`;

     

       215
       215
       -
               ariaLabel = 'Toggle theme (Light)';

     

       216
       216
       -
             } else {

     

       217
       217
       -
               // Moon icon for dark mode

     

       218
       218
       -
               iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       219
       219
       -
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>

     

       220
       220
       -
               </svg>`;

     

       221
       221
       -
               ariaLabel = 'Toggle theme (Dark)';

     

       232
       232
       +
             switch (this.currentTheme) {

     

       233
       233
       +
               case 'system':

     

       234
       234
       +
                 // Hybrid icon for system mode

     

       235
       235
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       236
       236
       +
                   <defs>

     

       237
       237
       +
                     <clipPath id="halfClip">

     

       238
       238
       +
                       <rect x="0" y="0" width="12" height="24"/>

     

       239
       239
       +
                     </clipPath>

     

       240
       240
       +
                   </defs>

     

       241
       241
       +
                   <!-- Half sun (left side) -->

     

       242
       242
       +
                   <g clip-path="url(#halfClip)">

     

       243
       243
       +
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"></path>

     

       244
       244
       +
                     <circle cx="12" cy="12" r="4" stroke-width="2"/>

     

       245
       245
       +
                   </g>

     

       246
       246
       +
                   <!-- Half moon (right side) -->

     

       247
       247
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12c0-2.21 1.79-4 4-4 .35 0 .69.04 1.01.13A7 7 0 1112 19c0-.34.03-.67.08-1 2.21 0 4-1.79 4-4z" opacity="0.8"></path>

     

       248
       248
       +
                 </svg>`;

     

       249
       249
       +
                 ariaLabel = 'Toggle theme (System)';

     

       250
       250
       +
                 themeName = 'System';

     

       251
       251
       +
                 break;

     

       252
       252
       +
       

     

       253
       253
       +
               case 'light':

     

       254
       254
       +
                 // Sun icon for light mode

     

       255
       255
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       256
       256
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>

     

       257
       257
       +
                 </svg>`;

     

       258
       258
       +
                 ariaLabel = 'Toggle theme (Light)';

     

       259
       259
       +
                 themeName = 'Light';

     

       260
       260
       +
                 break;

     

       261
       261
       +
       

     

       262
       262
       +
               case 'dark':

     

       263
       263
       +
                 // Moon icon for dark mode

     

       264
       264
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       265
       265
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>

     

       266
       266
       +
                 </svg>`;

     

       267
       267
       +
                 ariaLabel = 'Toggle theme (Dark)';

     

       268
       268
       +
                 themeName = 'Dark';

     

       269
       269
       +
                 break;

     

       270
       270
       +
       

     

       271
       271
       +
               case 'high-contrast':

     

       272
       272
       +
                 // Eye icon for high contrast

     

       273
       273
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       274
       274
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>

     

       275
       275
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>

     

       276
       276
       +
                 </svg>`;

     

       277
       277
       +
                 ariaLabel = 'Toggle theme (High Contrast)';

     

       278
       278
       +
                 themeName = 'High Contrast';

     

       279
       279
       +
                 break;

     

       280
       280
       +
       

     

       281
       281
       +
               case 'colorblind':

     

       282
       282
       +
                 // Palette icon for colorblind mode

     

       283
       283
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       284
       284
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>

     

       285
       285
       +
                 </svg>`;

     

       286
       286
       +
                 ariaLabel = 'Toggle theme (Colorblind)';

     

       287
       287
       +
                 themeName = 'Colorblind';

     

       288
       288
       +
                 break;

     

       289
       289
       +
       

     

       290
       290
       +
               case 'sepia':

     

       291
       291
       +
                 // Book icon for sepia/reading mode

     

       292
       292
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       293
       293
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>

     

       294
       294
       +
                 </svg>`;

     

       295
       295
       +
                 ariaLabel = 'Toggle theme (Sepia)';

     

       296
       296
       +
                 themeName = 'Sepia';

     

       297
       297
       +
                 break;

     

       298
       298
       +
       

     

       299
       299
       +
               default:

     

       300
       300
       +
                 // Default to system icon

     

       301
       301
       +
                 iconSvg = `<svg class="entering" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       302
       302
       +
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>

     

       303
       303
       +
                 </svg>`;

     

       304
       304
       +
                 ariaLabel = 'Toggle theme';

     

       305
       305
       +
                 themeName = 'System';

     

       222
       306
        
             }

     

       223
       307
        
       

     

       224
       308
        
             icon.innerHTML = iconSvg;

     

       225
       309
        
             toggle.setAttribute('aria-label', ariaLabel);

     

       310
       310
       +
             tooltip.textContent = themeName;

     

       226
       311
        
           }, 150);

     

       227
       312
        
         }

     

       228
       313

+294

arod-web/arod-themes.css

···

       1
       1
       +
       /**

     

       2
       2
       +
        * Arod Theming System

     

       3
       3
       +
        * Semantic CSS variables for comprehensive theming support

     

       4
       4
       +
        */

     

       5
       5
       +
       

     

       6
       6
       +
       :root {

     

       7
       7
       +
         /* Typography */

     

       8
       8
       +
         --font-family-base: system-ui, -apple-system, sans-serif;

     

       9
       9
       +
         --font-family-mono: 'SF Mono', Consolas, monospace;

     

       10
       10
       +
         --font-size-base: 0.9em;

     

       11
       11
       +
         --font-size-small: 0.85em;

     

       12
       12
       +
         --font-size-tiny: 0.75em;

     

       13
       13
       +
         --line-height-base: 1.45;

     

       14
       14
       +
       

     

       15
       15
       +
         /* Spacing */

     

       16
       16
       +
         --spacing-xs: 0.25rem;

     

       17
       17
       +
         --spacing-sm: 0.5rem;

     

       18
       18
       +
         --spacing-md: 1rem;

     

       19
       19
       +
         --spacing-lg: 1.5rem;

     

       20
       20
       +
         --spacing-xl: 2rem;

     

       21
       21
       +
       

     

       22
       22
       +
         /* Border radius */

     

       23
       23
       +
         --radius-sm: 3px;

     

       24
       24
       +
         --radius-md: 4px;

     

       25
       25
       +
         --radius-lg: 8px;

     

       26
       26
       +
         --radius-full: 50%;

     

       27
       27
       +
       

     

       28
       28
       +
         /* Transitions */

     

       29
       29
       +
         --transition-fast: 0.2s ease;

     

       30
       30
       +
         --transition-medium: 0.3s ease;

     

       31
       31
       +
         --transition-slow: 0.5s ease;

     

       32
       32
       +
       }

     

       33
       33
       +
       

     

       34
       34
       +
       /* Light Theme (Default) */

     

       35
       35
       +
       [data-theme="light"] {

     

       36
       36
       +
         /* Primary colors */

     

       37
       37
       +
         --color-bg-primary: #fffffc;

     

       38
       38
       +
         --color-bg-secondary: #fafafa;

     

       39
       39
       +
         --color-bg-tertiary: #f5f5f5;

     

       40
       40
       +
       

     

       41
       41
       +
         /* Text colors */

     

       42
       42
       +
         --color-text-primary: #1a1a1a;

     

       43
       43
       +
         --color-text-secondary: #666;

     

       44
       44
       +
         --color-text-muted: #999;

     

       45
       45
       +
         --color-text-inverse: #ffffff;

     

       46
       46
       +
       

     

       47
       47
       +
         /* Interactive colors */

     

       48
       48
       +
         --color-link: #090c8d;

     

       49
       49
       +
         --color-link-hover: #0066cc;

     

       50
       50
       +
         --color-accent: #090c8d;

     

       51
       51
       +
         --color-accent-hover: #0066cc;

     

       52
       52
       +
       

     

       53
       53
       +
         /* UI colors */

     

       54
       54
       +
         --color-border: #e0e0e0;

     

       55
       55
       +
         --color-border-light: #f0f0f0;

     

       56
       56
       +
         --color-border-dark: #ccc;

     

       57
       57
       +
       

     

       58
       58
       +
         /* Code block colors */

     

       59
       59
       +
         --color-code-bg: rgba(0, 0, 0, 0.05);

     

       60
       60
       +
         --color-code-block-bg: rgba(0, 0, 0, 0.03);

     

       61
       61
       +
         --color-code-text: inherit;

     

       62
       62
       +
       

     

       63
       63
       +
         /* Sidenote colors */

     

       64
       64
       +
         --color-sidenote-bg: #fafafa;

     

       65
       65
       +
         --color-sidenote-border: #e0e0e0;

     

       66
       66
       +
         --color-sidenote-text: #666;

     

       67
       67
       +
         --color-sidenote-number: #090c8d;

     

       68
       68
       +
         --color-sidenote-highlight-bg: #090c8d;

     

       69
       69
       +
         --color-sidenote-highlight-text: #ffffff;

     

       70
       70
       +
         --color-sidenote-ref-bg: rgba(9, 12, 141, 0.08);

     

       71
       71
       +
         --color-sidenote-ref-border: rgba(9, 12, 141, 0.2);

     

       72
       72
       +
       

     

       73
       73
       +
         /* State colors */

     

       74
       74
       +
         --color-hover-bg: rgba(9, 12, 141, 0.05);

     

       75
       75
       +
         --color-active-bg: rgba(9, 12, 141, 0.1);

     

       76
       76
       +
         --color-selected-bg: rgba(9, 12, 141, 0.15);

     

       77
       77
       +
       

     

       78
       78
       +
         /* Shadow */

     

       79
       79
       +
         --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);

     

       80
       80
       +
         --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

     

       81
       81
       +
         --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

     

       82
       82
       +
       }

     

       83
       83
       +
       

     

       84
       84
       +
       /* Dark Theme */

     

       85
       85
       +
       [data-theme="dark"] {

     

       86
       86
       +
         /* Primary colors */

     

       87
       87
       +
         --color-bg-primary: #1a1a1a;

     

       88
       88
       +
         --color-bg-secondary: #252525;

     

       89
       89
       +
         --color-bg-tertiary: #2a2a2a;

     

       90
       90
       +
       

     

       91
       91
       +
         /* Text colors */

     

       92
       92
       +
         --color-text-primary: #e0e0e0;

     

       93
       93
       +
         --color-text-secondary: #999;

     

       94
       94
       +
         --color-text-muted: #777;

     

       95
       95
       +
         --color-text-inverse: #1a1a1a;

     

       96
       96
       +
       

     

       97
       97
       +
         /* Interactive colors */

     

       98
       98
       +
         --color-link: #4db8ff;

     

       99
       99
       +
         --color-link-hover: #66c7ff;

     

       100
       100
       +
         --color-accent: #4db8ff;

     

       101
       101
       +
         --color-accent-hover: #66c7ff;

     

       102
       102
       +
       

     

       103
       103
       +
         /* UI colors */

     

       104
       104
       +
         --color-border: #444;

     

       105
       105
       +
         --color-border-light: #333;

     

       106
       106
       +
         --color-border-dark: #555;

     

       107
       107
       +
       

     

       108
       108
       +
         /* Code block colors */

     

       109
       109
       +
         --color-code-bg: rgba(255, 255, 255, 0.04);

     

       110
       110
       +
         --color-code-block-bg: #0d0d0d;

     

       111
       111
       +
         --color-code-text: inherit;

     

       112
       112
       +
       

     

       113
       113
       +
         /* Sidenote colors */

     

       114
       114
       +
         --color-sidenote-bg: #1f1f1f;

     

       115
       115
       +
         --color-sidenote-border: #333;

     

       116
       116
       +
         --color-sidenote-text: #999;

     

       117
       117
       +
         --color-sidenote-number: #4db8ff;

     

       118
       118
       +
         --color-sidenote-highlight-bg: #4db8ff;

     

       119
       119
       +
         --color-sidenote-highlight-text: #1a1a1a;

     

       120
       120
       +
         --color-sidenote-ref-bg: rgba(77, 184, 255, 0.1);

     

       121
       121
       +
         --color-sidenote-ref-border: rgba(77, 184, 255, 0.3);

     

       122
       122
       +
       

     

       123
       123
       +
         /* State colors */

     

       124
       124
       +
         --color-hover-bg: rgba(77, 184, 255, 0.1);

     

       125
       125
       +
         --color-active-bg: rgba(77, 184, 255, 0.2);

     

       126
       126
       +
         --color-selected-bg: rgba(77, 184, 255, 0.3);

     

       127
       127
       +
       

     

       128
       128
       +
         /* Shadow */

     

       129
       129
       +
         --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);

     

       130
       130
       +
         --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

     

       131
       131
       +
         --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

     

       132
       132
       +
       }

     

       133
       133
       +
       

     

       134
       134
       +
       /* High Contrast Theme */

     

       135
       135
       +
       [data-theme="high-contrast"] {

     

       136
       136
       +
         /* Primary colors */

     

       137
       137
       +
         --color-bg-primary: #ffffff;

     

       138
       138
       +
         --color-bg-secondary: #f0f0f0;

     

       139
       139
       +
         --color-bg-tertiary: #e0e0e0;

     

       140
       140
       +
       

     

       141
       141
       +
         /* Text colors */

     

       142
       142
       +
         --color-text-primary: #000000;

     

       143
       143
       +
         --color-text-secondary: #333333;

     

       144
       144
       +
         --color-text-muted: #555555;

     

       145
       145
       +
         --color-text-inverse: #ffffff;

     

       146
       146
       +
       

     

       147
       147
       +
         /* Interactive colors */

     

       148
       148
       +
         --color-link: #0000ff;

     

       149
       149
       +
         --color-link-hover: #000080;

     

       150
       150
       +
         --color-accent: #0000ff;

     

       151
       151
       +
         --color-accent-hover: #000080;

     

       152
       152
       +
       

     

       153
       153
       +
         /* UI colors */

     

       154
       154
       +
         --color-border: #000000;

     

       155
       155
       +
         --color-border-light: #333333;

     

       156
       156
       +
         --color-border-dark: #000000;

     

       157
       157
       +
       

     

       158
       158
       +
         /* Code block colors */

     

       159
       159
       +
         --color-code-bg: #f0f0f0;

     

       160
       160
       +
         --color-code-block-bg: #e0e0e0;

     

       161
       161
       +
         --color-code-text: #000000;

     

       162
       162
       +
       

     

       163
       163
       +
         /* Sidenote colors */

     

       164
       164
       +
         --color-sidenote-bg: #f0f0f0;

     

       165
       165
       +
         --color-sidenote-border: #000000;

     

       166
       166
       +
         --color-sidenote-text: #000000;

     

       167
       167
       +
         --color-sidenote-number: #0000ff;

     

       168
       168
       +
         --color-sidenote-highlight-bg: #000000;

     

       169
       169
       +
         --color-sidenote-highlight-text: #ffffff;

     

       170
       170
       +
         --color-sidenote-ref-bg: #e0e0e0;

     

       171
       171
       +
         --color-sidenote-ref-border: #000000;

     

       172
       172
       +
       

     

       173
       173
       +
         /* State colors */

     

       174
       174
       +
         --color-hover-bg: #e0e0e0;

     

       175
       175
       +
         --color-active-bg: #d0d0d0;

     

       176
       176
       +
         --color-selected-bg: #c0c0c0;

     

       177
       177
       +
       

     

       178
       178
       +
         /* Shadow */

     

       179
       179
       +
         --shadow-sm: 0 0 0 1px #000000;

     

       180
       180
       +
         --shadow-md: 0 0 0 2px #000000;

     

       181
       181
       +
         --shadow-lg: 0 0 0 3px #000000;

     

       182
       182
       +
       }

     

       183
       183
       +
       

     

       184
       184
       +
       /* Colorblind-friendly Theme (Deuteranopia/Protanopia optimized) */

     

       185
       185
       +
       [data-theme="colorblind"] {

     

       186
       186
       +
         /* Primary colors */

     

       187
       187
       +
         --color-bg-primary: #fffffc;

     

       188
       188
       +
         --color-bg-secondary: #fafafa;

     

       189
       189
       +
         --color-bg-tertiary: #f5f5f5;

     

       190
       190
       +
       

     

       191
       191
       +
         /* Text colors */

     

       192
       192
       +
         --color-text-primary: #1a1a1a;

     

       193
       193
       +
         --color-text-secondary: #666;

     

       194
       194
       +
         --color-text-muted: #999;

     

       195
       195
       +
         --color-text-inverse: #ffffff;

     

       196
       196
       +
       

     

       197
       197
       +
         /* Interactive colors (Blue-Orange contrast) */

     

       198
       198
       +
         --color-link: #0066cc;

     

       199
       199
       +
         --color-link-hover: #0052a3;

     

       200
       200
       +
         --color-accent: #ff8800;

     

       201
       201
       +
         --color-accent-hover: #ff6600;

     

       202
       202
       +
       

     

       203
       203
       +
         /* UI colors */

     

       204
       204
       +
         --color-border: #e0e0e0;

     

       205
       205
       +
         --color-border-light: #f0f0f0;

     

       206
       206
       +
         --color-border-dark: #ccc;

     

       207
       207
       +
       

     

       208
       208
       +
         /* Code block colors */

     

       209
       209
       +
         --color-code-bg: rgba(0, 102, 204, 0.08);

     

       210
       210
       +
         --color-code-block-bg: rgba(0, 102, 204, 0.05);

     

       211
       211
       +
         --color-code-text: inherit;

     

       212
       212
       +
       

     

       213
       213
       +
         /* Sidenote colors */

     

       214
       214
       +
         --color-sidenote-bg: #f8f9fc;

     

       215
       215
       +
         --color-sidenote-border: #0066cc;

     

       216
       216
       +
         --color-sidenote-text: #666;

     

       217
       217
       +
         --color-sidenote-number: #ff8800;

     

       218
       218
       +
         --color-sidenote-highlight-bg: #ff8800;

     

       219
       219
       +
         --color-sidenote-highlight-text: #ffffff;

     

       220
       220
       +
         --color-sidenote-ref-bg: rgba(255, 136, 0, 0.1);

     

       221
       221
       +
         --color-sidenote-ref-border: rgba(255, 136, 0, 0.4);

     

       222
       222
       +
       

     

       223
       223
       +
         /* State colors */

     

       224
       224
       +
         --color-hover-bg: rgba(0, 102, 204, 0.1);

     

       225
       225
       +
         --color-active-bg: rgba(0, 102, 204, 0.2);

     

       226
       226
       +
         --color-selected-bg: rgba(255, 136, 0, 0.2);

     

       227
       227
       +
       

     

       228
       228
       +
         /* Shadow */

     

       229
       229
       +
         --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);

     

       230
       230
       +
         --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

     

       231
       231
       +
         --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

     

       232
       232
       +
       }

     

       233
       233
       +
       

     

       234
       234
       +
       /* Sepia Theme (Reading comfort) */

     

       235
       235
       +
       [data-theme="sepia"] {

     

       236
       236
       +
         /* Primary colors */

     

       237
       237
       +
         --color-bg-primary: #f4f1e8;

     

       238
       238
       +
         --color-bg-secondary: #ebe6d6;

     

       239
       239
       +
         --color-bg-tertiary: #e0dac8;

     

       240
       240
       +
       

     

       241
       241
       +
         /* Text colors */

     

       242
       242
       +
         --color-text-primary: #3a3328;

     

       243
       243
       +
         --color-text-secondary: #5a5345;

     

       244
       244
       +
         --color-text-muted: #7a7365;

     

       245
       245
       +
         --color-text-inverse: #f4f1e8;

     

       246
       246
       +
       

     

       247
       247
       +
         /* Interactive colors */

     

       248
       248
       +
         --color-link: #704214;

     

       249
       249
       +
         --color-link-hover: #5a3310;

     

       250
       250
       +
         --color-accent: #8b4513;

     

       251
       251
       +
         --color-accent-hover: #704214;

     

       252
       252
       +
       

     

       253
       253
       +
         /* UI colors */

     

       254
       254
       +
         --color-border: #d0c8b8;

     

       255
       255
       +
         --color-border-light: #e0d8c8;

     

       256
       256
       +
         --color-border-dark: #c0b8a8;

     

       257
       257
       +
       

     

       258
       258
       +
         /* Code block colors */

     

       259
       259
       +
         --color-code-bg: rgba(139, 69, 19, 0.08);

     

       260
       260
       +
         --color-code-block-bg: rgba(139, 69, 19, 0.05);

     

       261
       261
       +
         --color-code-text: inherit;

     

       262
       262
       +
       

     

       263
       263
       +
         /* Sidenote colors */

     

       264
       264
       +
         --color-sidenote-bg: #ebe6d6;

     

       265
       265
       +
         --color-sidenote-border: #c0b8a8;

     

       266
       266
       +
         --color-sidenote-text: #5a5345;

     

       267
       267
       +
         --color-sidenote-number: #8b4513;

     

       268
       268
       +
         --color-sidenote-highlight-bg: #8b4513;

     

       269
       269
       +
         --color-sidenote-highlight-text: #f4f1e8;

     

       270
       270
       +
         --color-sidenote-ref-bg: rgba(139, 69, 19, 0.1);

     

       271
       271
       +
         --color-sidenote-ref-border: rgba(139, 69, 19, 0.3);

     

       272
       272
       +
       

     

       273
       273
       +
         /* State colors */

     

       274
       274
       +
         --color-hover-bg: rgba(139, 69, 19, 0.1);

     

       275
       275
       +
         --color-active-bg: rgba(139, 69, 19, 0.15);

     

       276
       276
       +
         --color-selected-bg: rgba(139, 69, 19, 0.2);

     

       277
       277
       +
       

     

       278
       278
       +
         /* Shadow */

     

       279
       279
       +
         --shadow-sm: 0 2px 4px rgba(58, 51, 40, 0.1);

     

       280
       280
       +
         --shadow-md: 0 4px 12px rgba(58, 51, 40, 0.15);

     

       281
       281
       +
         --shadow-lg: 0 8px 24px rgba(58, 51, 40, 0.2);

     

       282
       282
       +
       }

     

       283
       283
       +
       

     

       284
       284
       +
       /* Apply system preference when theme is set to system */

     

       285
       285
       +
       [data-theme="system"] {

     

       286
       286
       +
         /* Will inherit from either light or dark based on JS logic */

     

       287
       287
       +
       }

     

       288
       288
       +
       

     

       289
       289
       +
       /* Ensure smooth transitions when changing themes */

     

       290
       290
       +
       * {

     

       291
       291
       +
         transition: background-color var(--transition-medium),

     

       292
       292
       +
                     color var(--transition-medium),

     

       293
       293
       +
                     border-color var(--transition-medium);

     

       294
       294
       +
       }

+30 -55

arod-web/example.html

···

       6
       6
        
         <title>Arod Web Components - Full Example</title>

     

       7
       7
        
       

     

       8
       8
        
         <!-- Import all Arod components -->

     

       9
       9
       +
         <link rel="stylesheet" href="arod-themes.css">

     

       9
       10
        
         <script src="arod-menu.js"></script>

     

       10
       11
        
         <script src="arod-search.js"></script>

     

       11
       12
        
         <script src="arod-theme.js"></script>

     

       12
       13
        
         <script src="arod-sidenotes.js"></script>

     

       13
       14
        
       

     

       14
       15
        
         <style>

     

       15
       15
       -
           /* Base styles that match anil.recoil.org */

     

       16
       16
       -
           :root {

     

       17
       17
       -
             --bg: #fffffc;

     

       18
       18
       -
             --text: #1a1a1a;

     

       19
       19
       -
             --text-muted: #666;

     

       20
       20
       -
             --accent: #01261b;

     

       21
       21
       -
             --link: #090c8d;

     

       22
       22
       -
             --border: #e0e0e0;

     

       23
       23
       -
             --secondary: #666;

     

       24
       24
       -
           }

     

       25
       25
       -
       

     

       26
       26
       -
           [data-theme="dark"] {

     

       27
       27
       -
             --bg: #1a1a1a;

     

       28
       28
       -
             --text: #e0e0e0;

     

       29
       29
       -
             --text-muted: #999;

     

       30
       30
       -
             --accent: #4db8ff;

     

       31
       31
       -
             --link: #4db8ff;

     

       32
       32
       -
             --border: #444;

     

       33
       33
       -
             --secondary: #999;

     

       34
       34
       -
           }

     

       16
       16
       +
           /* Base styles using semantic variables */

     

       35
       17
        
       

     

       36
       18
        
           * {

     

       37
       19
        
             margin: 0;

     
···

       40
       22
        
           }

     

       41
       23
        
       

     

       42
       24
        
           body {

     

       43
       43
       -
             font-family: system-ui, -apple-system, sans-serif;

     

       44
       44
       -
             line-height: 1.45;

     

       45
       45
       -
             color: var(--text);

     

       46
       46
       -
             background: var(--bg);

     

       47
       47
       -
             transition: background 0.3s ease, color 0.3s ease;

     

       25
       25
       +
             font-family: var(--font-family-base);

     

       26
       26
       +
             line-height: var(--line-height-base);

     

       27
       27
       +
             color: var(--color-text-primary);

     

       28
       28
       +
             background: var(--color-bg-primary);

     

       29
       29
       +
             transition: background var(--transition-medium), color var(--transition-medium);

     

       48
       30
        
           }

     

       49
       31
        
       

     

       50
       32
        
           /* Main content area */

     
···

       74
       56
        
           }

     

       75
       57
        
       

     

       76
       58
        
           p {

     

       77
       77
       -
             font-size: 0.9em;

     

       59
       59
       +
             font-size: var(--font-size-base);

     

       78
       60
        
             margin-top: 0.2em;

     

       79
       79
       -
             margin-bottom: 0.5em;

     

       61
       61
       +
             margin-bottom: var(--spacing-sm);

     

       80
       62
        
             text-align: justify;

     

       81
       63
        
           }

     

       82
       64
        
       

     

       83
       65
        
           code {

     

       84
       84
       -
             font-family: 'SF Mono', Consolas, monospace;

     

       85
       85
       -
             font-size: 0.85em;

     

       66
       66
       +
             font-family: var(--font-family-mono);

     

       67
       67
       +
             font-size: var(--font-size-small);

     

       86
       68
        
             padding: 0.2em 0.4em;

     

       87
       87
       -
             background: rgba(0, 0, 0, 0.05);

     

       88
       88
       -
             border-radius: 3px;

     

       89
       89
       -
           }

     

       90
       90
       -
       

     

       91
       91
       -
           [data-theme="dark"] code {

     

       92
       92
       -
             background: rgba(255, 255, 255, 0.1);

     

       69
       69
       +
             background: var(--color-code-bg);

     

       70
       70
       +
             color: var(--color-code-text);

     

       71
       71
       +
             border-radius: var(--radius-sm);

     

       93
       72
        
           }

     

       94
       73
        
       

     

       95
       74
        
           pre {

     

       96
       96
       -
             padding: 1rem;

     

       97
       97
       -
             margin: 1.5rem 0;

     

       98
       98
       -
             background: rgba(0, 0, 0, 0.03);

     

       99
       99
       -
             border: 1px solid var(--border);

     

       100
       100
       -
             border-radius: 4px;

     

       75
       75
       +
             padding: var(--spacing-md);

     

       76
       76
       +
             margin: var(--spacing-lg) 0;

     

       77
       77
       +
             background: var(--color-code-block-bg);

     

       78
       78
       +
             border: 1px solid var(--color-border);

     

       79
       79
       +
             border-radius: var(--radius-md);

     

       101
       80
        
             overflow-x: auto;

     

       102
       102
       -
           }

     

       103
       103
       -
       

     

       104
       104
       -
           [data-theme="dark"] pre {

     

       105
       105
       -
             background: rgba(255, 255, 255, 0.05);

     

       106
       106
       -
             border-color: #444;

     

       107
       81
        
           }

     

       108
       82
        
       

     

       109
       83
        
           pre code {

     
···

       113
       87
        
       

     

       114
       88
        
           blockquote {

     

       115
       89
        
             position: relative;

     

       116
       116
       -
             padding: 0.5rem 1rem;

     

       90
       90
       +
             padding: var(--spacing-sm) var(--spacing-md);

     

       117
       91
        
             padding-top: 0;

     

       118
       118
       -
             margin: 0.5rem 0;

     

       119
       119
       -
             border-left: 4px solid #cdc;

     

       92
       92
       +
             margin: var(--spacing-sm) 0;

     

       93
       93
       +
             border-left: 4px solid var(--color-border);

     

       120
       94
        
             font-style: italic;

     

       121
       95
        
             padding-bottom: 0.1em;

     

       122
       122
       -
             color: var(--text-muted);

     

       96
       96
       +
             color: var(--color-text-muted);

     

       123
       97
        
           }

     

       124
       98
        
       

     

       125
       99
        
           .hero {

     

       126
       100
        
             text-align: center;

     

       127
       127
       -
             padding: 2rem 0;

     

       128
       128
       -
             background: linear-gradient(135deg, rgba(1,38,27,0.05) 0%, rgba(1,38,27,0.02) 100%);

     

       129
       129
       -
             border-radius: 8px;

     

       130
       130
       -
             margin: 1rem 0;

     

       101
       101
       +
             padding: var(--spacing-xl) 0;

     

       102
       102
       +
             background: var(--color-bg-secondary);

     

       103
       103
       +
             border-radius: var(--radius-lg);

     

       104
       104
       +
             margin: var(--spacing-md) 0;

     

       105
       105
       +
             border: 1px solid var(--color-border-light);

     

       131
       106
        
           }

     

       132
       107
        
       

     

       133
       108
        
           .hero h1 {

     
···

       137
       112
        
           }

     

       138
       113
        
       

     

       139
       114
        
           .hero p {

     

       140
       140
       -
             font-size: 0.9em;

     

       141
       141
       -
             color: var(--text-muted);

     

       115
       115
       +
             font-size: var(--font-size-base);

     

       116
       116
       +
             color: var(--color-text-secondary);

     

       142
       117
        
             text-align: center;

     

       143
       118
        
           }

     

       144
       119
        
         </style>