### Progressive Enhancement Example in Citizen CSS

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6

Illustrates progressive enhancement by providing base styles that work without JavaScript and enhanced styles for clients with JavaScript enabled. This ensures core functionality is always available.

```css
// Base styles work without JS
.component {
    // Basic styling
}

// Enhanced styles for JS-enabled clients
.client-js .component {
    // Enhanced functionality
}
```

--------------------------------

### PHP for ResourceLoaderHooks Configuration

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6-extension-integration

PHP code demonstrating how to integrate extension-specific configuration variables using the ResourceLoaderHooks class. This enables feature detection and conditional behavior in JavaScript modules.

```php
class ResourceLoaderHooks {
    public static function onResourceLoaderRegister (\ResourceLoader &$rl) {
        // Example: Registering a configuration variable
        $rl->registerConfig('wgCitizenSearchGateway', $config['wgCitizenSearchGateway'] ?? 'default');
        $rl->registerConfig('wgCitizenOverflowNowrapClasses', $config['wgCitizenOverflowNowrapClasses'] ?? []);
    }
}
```

--------------------------------

### Configure Progressive Web App Options (PHP)

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3-configuration

Sets up an array of options for the Progressive Web App manifest, including background color, theme color, and icon configurations. This is used to customize the PWA's appearance and behavior.

```php
$wgCitizenManifestOptions = [
    'background_color' => '#0d0e12',
    'description' => '',
    'short_name' => '',
    'theme_color' => '#0d0e12',
    'icons' => [],
];
```

--------------------------------

### Importing Design Tokens in LESS

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6-extension-integration

Demonstrates how to import Citizen's design system variables and mixins into LESS files. This provides access to CSS custom properties, typography mixins, and layout utilities for consistent styling.

```less
@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';
```

--------------------------------

### LESS Mixins for Visual Effects

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/4

This section highlights several LESS mixins used for applying visual effects and specific styling patterns. These include glassmorphism, sticky headers, progressive button styling, and screen-reader-only accessibility.

```less
.mixin-citizen-frosted-glass() {
  backdrop-filter: blur(10px);
  /* Additional properties for gradient masks */
}

.mixin-citizen-sticky-header() {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* May include background blur for effect */
}

.mixin-citizen-button-progressive() {
  /* Styles for a progressive color scheme */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.mixin-citizen-screen-reader-only() {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
```

--------------------------------

### Base Theme Tokens CSS with OKLCH

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/4

Defines foundational design tokens using OKLCH color space with HSL fallbacks for browser compatibility. It includes surface colors, text colors, state colors, and spacing variables, with key surface color calculations using relative lightness modifiers.

```css
--color-surface-1-oklch__l: calc( var( --color-surface-0-oklch__l ) + var( --delta-lightness-surface-base ) );
--color-surface-2-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 2 ) );
```

--------------------------------

### Map Client Theme Preferences (JavaScript)

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3-configuration

Provides a mapping between client-side theme preference keys and legacy CSS class names. This ensures backward compatibility with older theme selectors while transitioning to new client preference classes.

```javascript
const CLIENTPREFS_THEME_MAP = {
    os: 'auto',
    day: 'light',
    night: 'dark'
};
```

--------------------------------

### Legacy Theme Mapping (JavaScript)

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3

Provides a JavaScript mapping for backward compatibility with legacy theme names. It maps 'auto', 'light', and 'dark' to 'os', 'day', and 'night' respectively.

```javascript
const CLIENTPREFS_THEME_MAP = {
    auto: 'os',
    light: 'day',
    dark: 'night'
};
```

--------------------------------

### LESS for TemplateData Extension Styling

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6-extension-integration

LESS code snippet for styling the TemplateData extension. It likely provides styles for displaying parameter documentation and edit links in a button-like format.

```less
.template-data {
  .template-data-parameter {
    .edit-link {
      display: inline-block;
      padding: var(--space-xs) var(--space-sm);
      background-color: var(--color-surface-1);
      border-radius: var(--border-radius-base);
      text-decoration: none;
      color: var(--color-base);
    }
  }
}
```

--------------------------------

### Essential Messages for Citizen Skin

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3-configuration

Defines essential interface messages preloaded by the Citizen skin. These messages ensure immediate availability of common UI elements like toggles for actions, drawers, search, and preferences, improving user experience.

```json
{
  "messages": [
    "citizen-actions-more-toggle",
    "citizen-drawer-toggle", 
    "citizen-jumptotop",
    "citizen-preferences-toggle",
    "citizen-search-toggle",
    "search",
    "toc"
  ]
}
```

--------------------------------

### Basic Citizen Skin LESS Template

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6

A standard template for Citizen skin styles, including header comments and import statements for variables and mixins. This structure ensures consistent theming and modularity.

```less
/*
 * Citizen
 *
 * SkinStyles for [Extension/Module Name]
 * Module: [module.name]
 * Version: [MW version]
 *
 * Date: [YYYY-MM-DD]
 */

@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';

// Extension-specific styling here
```

--------------------------------

### Skin Registration in skin.json

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3-configuration

Registers the Citizen skin with MediaWiki, defining its class, responsiveness, heading structure support, section link template, and table of contents behavior. This is crucial for MediaWiki to recognize and load the skin correctly.

```json
{
  "skins": {
    "citizen": {
      "class": "MediaWiki\Skins\Citizen\SkinCitizen",
      "responsive": true,
      "supportsMwHeading": true,
      "templateSectionLinks": "Template:SectionLink",
      "toc": false
    }
  }
}
```

--------------------------------

### LESS Font Stack Definition

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/4

Defines the base font stack for the Citizen skin using CSS variables. It prioritizes Citizen-specific fonts, then language fallbacks, and finally system UI fonts for broad compatibility.

```less
@font-family-base: var( --font-family-citizen-base ), var( --font-family-language-base ), system-ui, -apple-system, sans-serif;
```

--------------------------------

### Client Preferences Storage Structure (JavaScript)

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3

Demonstrates the structure for storing client theme preferences in browser localStorage. Preferences are stored as a comma-separated string of CSS classes.

```javascript
// Example: "skin-theme-clientpref-night,citizen-feature-custom-width-clientpref-wide"
```

--------------------------------

### Client-Side Theme Detection Script

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3

The inline.js script is responsible for retrieving user preferences from localStorage and applying theme classes to the document's root element. It ensures immediate theme application before the page fully renders and includes support for legacy theme class names.

```javascript
const mwclientpreferences = JSON.parse(localStorage.getItem('mwclientpreferences') || '{}');
const theme = mwclientpreferences.theme;
const colorscheme = mwclientpreferences.colorscheme;

document.documentElement.classList.add(theme || 'theme-light');
document.documentElement.classList.add(colorscheme || 'colorscheme-base');

// Legacy support for old theme class names
if (mwclientpreferences.oldTheme) {
    document.documentElement.classList.add('theme-' + mwclientpreferences.oldTheme);
}

// Apply custom font size if set
if (mwclientpreferences.fontSize) {
    document.documentElement.classList.add('citizen-feature-custom-font-size-clientpref-' + mwclientpreferences.fontSize);
}

// Apply pure black mode if enabled
if (mwclientpreferences.pureBlack) {
    document.documentElement.classList.add('citizen-feature-pure-black-clientpref-1');
}
```

--------------------------------

### LESS for TabberNeue Extension Styling

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6-extension-integration

LESS code snippet for styling the TabberNeue extension. It includes specific styling rules for the extension, likely to integrate with the Citizen skin's design system.

```less
.tabberneue-container {
  .tabberneue-tabs {
    li {
      a {
        &:hover {
          color: var(--color-link);
        }
      }
    }
  }
}
```

--------------------------------

### LESS for Search Component Styling

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/4

This LESS code defines styles for the search component, setting custom properties for its width and height. It utilizes a variable for the search bar width and a fixed value for its height.

```less
.citizen-search {
  --width-search-bar: @width-search-bar; /* Using a legacy LESS variable */
  --height-search-bar: 2.75rem;
  width: var(--width-search-bar);
  height: var(--height-search-bar);
  /* Other search component styles */
}
```

--------------------------------

### Theme Compatibility Mixin in Citizen LESS

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6

Utilizes a theme mixin for styles that need to adapt to both light and dark themes. This ensures visual consistency regardless of user preference.

```less
.mixin-citizen-css-theme-clientpref-all(property, value);
```

--------------------------------

### LESS Mixin for Font Styles

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/4

The .mixin-citizen-font-styles() mixin in LESS is used to apply consistent typography scaling across different text elements. It takes a style type (e.g., 'heading-1', 'body') as an argument and applies corresponding font size and line height tokens.

```less
.mixin-citizen-font-styles( @style-type: 'body' ) {
  font-size: var( --font-size-@{style-type} );
  line-height: var( --line-height-@{style-type} );
}

.heading-1 {
  .mixin-citizen-font-styles( 'heading-1' );
}

.heading-4 {
  .mixin-citizen-font-styles( 'heading-4' );
}

.body {
  .mixin-citizen-font-styles( 'body' );
}

.small {
  .mixin-citizen-font-styles( 'small' );
}

.overline {
  .mixin-citizen-font-styles( 'overline' );
}
```

--------------------------------

### Pure Black Mode CSS Variables

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/3

This LESS mixin defines CSS variables for the 'Pure Black Mode' feature. It sets specific color and shadow properties to achieve a true black appearance, optimized for OLED displays and accessibility. This feature is applied via the '.citizen-feature-pure-black-clientpref-1' class.

```less
.feature-pure-black() {
    --color-surface-0-oklch__l: 0%;
    --color-surface-0-oklch__c: 0;
    --border-color-base: rgba(255, 255, 255, 0.1);
    --shadow-opacity: 0.2;
}
```

--------------------------------

### Scoping Third-Party Extension Styles in Citizen LESS

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6

Demonstrates how to scope styles for third-party extensions within the Citizen skin to prevent naming conflicts with other skins or core MediaWiki styles. This is crucial for maintainability.

--------------------------------

### LESS for CommentStreams Extension Styling

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/6-extension-integration

LESS code snippet for styling the CommentStreams extension. This code defines styles for comment threads, ensuring proper nesting and thematic integration with the Citizen skin.

```less
.comment-streams {
  .comment {
    .nested-comments {
      margin-left: var(--space-md);
      border-left: 1px solid var(--color-border);
    }
  }
}
```

--------------------------------

### LESS for Table of Contents Styling

Source: https://deepwiki.com/StarCitizenTools/mediawiki-skins-Citizen/4

This LESS snippet styles the table of contents (TOC) component. It calculates the size for the TOC toggle element using CSS variables and applies small font styles using a mixin.

```less
.citizen-toc {
  --citizen-toc-toggle-size: calc( var( --line-height-small ) + var( --space-xs ) * 2 );
  .mixin-citizen-font-styles( 'small' );
  /* Other TOC styles */
}
```