mediawiki-skins-Citizen/resources/variables.less

/*
 * Citizen - LESS variables
 * https://starcitizen.tools
*/

// Import MediaWiki-supplied mixins
@import 'mediawiki.mixins';

/* == Colors == */
/**
 * Based WikimediaUI (`wmui`) color palette
 * See https://design.wikimedia.org/style-guide/visual-style_colors.html
 * Don't use those variables directly, instead define your vars
 * referring to them as applied further below.
 */

@color-base0:    #000;    // = HSB 0°, 0%, 0%
@color-base10:   #202122; // = HSB 210°, 6%, 13%
@color-base20:   #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@color-base30:   #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@color-base50:   #a2a9b1; // = HSB 212°, 8%, 69%
@color-base70:   #c8ccd1; // = HSB 213°, 4%, 82%
@color-base80:   #eaecf0; // = HSB 220°, 3%, 94%
@color-base90:   #f8f9fa; // = HSB 210°, 1%, 98%
@color-base100:  #fff;    // = HSB 0°, 0%, 100%

@color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@color-accent50: #36c;    // = HSB 220°, 75%, 80%
@color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%

@color-red30:    #b32424; // = HSB 360°, 80%, 70%
@color-red50:    #d33;    // = HSB 360°, 77%, 87%
@color-red90:    #fee7e6; // = HSB 3°, 9%, 100%

@color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
@color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%

@color-green30:  #14866d; // = HSB 167°, 85%, 53%
@color-green50:  #00af89; // = HSB 167°, 100%, 69%
@color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%

@color-accent50--lighten: #5b84d6;
@color-red50--lighten: #e35b5b;

@color-accent-30--darken: #26437f;

/**
 * Dark theme color palette
 * Background color is used instead of shadow to show elevation
 * and hierarchy in dark theme
 * See https://material.io/design/color/dark-theme.html#properties
 */
@dark-color-base0:	#131a21;	// Surface color
@dark-color-base10: #1f262c; 	// 5% white overlay
@dark-color-base20: #242a31;	// 7% white overlay
@dark-color-base30: #262c32;	// 8% white overlay
@dark-color-base40: #282f35;	// 9% white overlay
@dark-color-base50: #2d3339;	// 11% white overlay
@dark-color-base60: #30363c;	// 12% white overlay
@dark-color-base70: #343a40;	// 14% white overlay
@dark-color-base80: #363c42;	// 15% white overlay
@dark-color-base90: #393f45;	// 16% white overlay

/* Background Colors */
@background-color-dp-00:			@color-base100;
@background-color-dp-01:			@color-base100;
@background-color-dp-02:			@color-base100;
@background-color-dp-03:			@color-base100;
@background-color-dp-04:			@color-base100;
@background-color-dp-06:			@color-base100;
@background-color-dp-08:			@color-base100;
@background-color-dp-12:			@color-base100;
@background-color-dp-16:			@color-base100;
@background-color-dp-24:			@color-base100;

@background-color-framed:			@color-base90;
@background-color-framed--hover:	@color-base80;
@background-color-framed--active:	@color-base70;
@background-color-icon:				rgba( 0, 0, 0, 0.4 );
@background-color-icon--hover:		rgba( 0, 0, 0, 0.6 );
@background-color-icon--active:		rgba( 0, 0, 0, 0.8 );
@background-color-quiet: 			transparent;
@background-color-quiet--hover:		rgba( 0, 0, 0, 0.04 );
@background-color-quiet--active:	rgba( 0, 0, 0, 0.06 );

@background-color-primary--hover:	@color-accent90;
@background-color-primary--active:	rgba( 41, 98, 204, 0.1 );
@background-color-destructive:		@color-red90;

/* Foreground Colors */
@color-base:				@color-base20;
@color-base--emphasized:	@color-base10;
@color-base--subtle:		@color-base30;

@color-link-new: 			@color-red50;
@color-link-new--hover: 	@color-red50--lighten;
@color-link-new--active:	@color-red30;

@color-primary:				@color-accent50;
@color-primary--hover:		@color-accent50--lighten;
@color-primary--active:		@color-accent30;

/* Opacity */
@opacity-icon-base:			0.4;
@opacity-icon-base--hover:	0.6;
@opacity-icon-base--active:	0.8;

/* Border Colors */
@border-color-base:				rgba( 0, 0, 0, 0.05 );
@border-color-base--lighter:	rgba( 0, 0, 0, 0.02 );
@border-color-base--darker:		rgba( 0, 0, 0, 0.08 );

/* Background Colors */
@dark-background-color-dp-00:			@dark-color-base0;
@dark-background-color-dp-01:			@dark-color-base10;
@dark-background-color-dp-02:			@dark-color-base20;
@dark-background-color-dp-03:			@dark-color-base30;
@dark-background-color-dp-04:			@dark-color-base40;
@dark-background-color-dp-06:			@dark-color-base50;
@dark-background-color-dp-08:			@dark-color-base60;
@dark-background-color-dp-12:			@dark-color-base70;
@dark-background-color-dp-16:			@dark-color-base80;
@dark-background-color-dp-24:			@dark-color-base90;

@dark-background-color-framed:			@dark-color-base20;
@dark-background-color-framed--hover:	@dark-color-base30;
@dark-background-color-framed--active:	@dark-color-base10;
@dark-background-color-icon:			rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon--hover:		rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--active:	rgba( 255, 255, 255, 0.2 );
// @dark-background-color-quiet: 			transparent;
@dark-background-color-quiet--hover:	rgba( 255, 255, 255, 0.04 );
@dark-background-color-quiet--active:	rgba( 255, 255, 255, 0.06 );

@dark-background-color-primary--hover:	@color-accent30;
@dark-background-color-primary--active:	@color-accent-30--darken;

@dark-background-color-destructive:	@color-red30;

/* Foreground Colors */
@dark-color-base:				rgba( 255, 255, 255, 0.6 );
@dark-color-base--emphasized:	rgba( 255, 255, 255, 0.87 );
@dark-color-base--subtle:		rgba( 255, 255, 255, 0.38 );

/* Opacity */
// @dark-opacity-icon-base:			0.4;
// @dark-opacity-icon-base--hover:		0.6;
@dark-opacity-icon-base--active:	0.2;

/* Border Colors */
@dark-border-color-base:			rgba( 255, 255, 255, 0.05 );
@dark-border-color-base--lighter:	rgba( 255, 255, 255, 0.02 );
@dark-border-color-base--darker:	rgba( 255, 255, 255, 0.08 );

/* Technical debt below */
/*
 * Framework
*/
@html-font-size: 100%;
@margin-side: 20px;
@page-width: 860px;
@footer-width: 1290px;
@icon-size: 18px;
@icon-box-size: @icon-size + @icon-margin * 2;
@icon-margin: 3px;
@icon-padding: 15px;
@header-height: 56px;
@sidebar-sitename-height: 69px;
@drawer-width: 300px;
@padding-menu-item: 10px 15px;
@padding-menu-item-big: 10px 20px;
@negative-margin: (@footer-width - @page-width) / -2;

@search-bar-width: 500px;
@search-bar-height: 42px;
@search-loader-progress-bar-height: 2px;

@border-radius-small: 4px;
@border-radius-medium: @border-radius-small * 2;
@border-radius-large: @border-radius-small * 3;

/*
 * Colors
*/

// Wikimedia colors
@base-0: #000;
@base-10: #202122;
@base-20: #54595d;
@base-30: #72777d;
@base-50: #a2a9b1;
@base-70: #c8ccd1;
@base-80: #eaecf0;
@base-90: #f8f9fa;
@base-100: #fff;

@accent-10: #2a4b8d;
@accent-50: #36c;
@accent-90: #eaf3ff;

@red-30: #b32424;
@red-50: #d33;
@red-90: #fee7e6;

@green-30: #14866d;
@green-50: #00af89;
@green-90: #d5fdf4;

@yellow-30: #ac6600;
@yellow-50: #fc3;
@yellow-90: #fef6e7;

@menu-background: @base-100;
@opacity-icon: 0.3;
@opacity-icon-active: 0.5;
@color-item-text: @base-30;
@color-item-text-hover: @base-20;
@color-item-text-active: @accent-50;
@color-item-header: @base-10;
@menu-item-link-hover: @base-80;
@menu-item-link-active: @accent-90;

@color-content-text: @base-20;
@color-content-header: @base-10;
@color-content-caption: @base-30;

// Citizen colors
@header-background-color-light: @base-100;
@header-background-color-dark: @dark-bg-0;

@color-footer-background-40: #0f1418;
@color-footer-background-50: #131a21;
@color-footer-background-60: #1a252d;
@color-footer-text: #979c9f;
@color-footer-link: #cfdee8;
@color-footer-link-active: @base-80;

// Dark mode colors
@dark-bg-0: #11151d;
@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;
@dark-bg-30: #24272f;
@dark-bg-40: #2b2f36;
@dark-bg-50: #33363d;
@dark-bg-60: #34383f;

@dark-text-100: #e0e1e2;
@dark-text-90: #c1c2c5;
@dark-text-80: #a0a1a5;
@dark-text-70: #86888c;
@dark-text-60: #6c6e73;

/*
 * Transitions
*/
@transition-color: color 0.55s ease;
@transition-color-quick: color 0.2s ease;
@transition-transform: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-transform-quick: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-width: width 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-width-quick: width 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-height: height 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-height-quick: height 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-margin: margin 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-margin-quick: margin 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-padding: padding 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-padding-quick: padding 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
@transition-background: background 0.55s ease;
@transition-background-quick: background 0.2s ease;
@transition-opacity: opacity 0.55s ease;
@transition-opacity-quick: opacity 0.2s ease;
@transition-border: border 0.55s ease;
@transition-border-quick: border 0.2s ease;
@transition-box-shadow: box-shadow 0.55s ease;
@transition-box-shadow-quick: box-shadow 0.2s ease;
@transition-border-color: border-color 0.55s ease;
@transition-border-color-quick: border-color 0.2s ease;
@transition-filter: filter 0.55s ease;
@transition-filter-quick: filter 0.2s ease;

/*
 * Fonts
*/

/**
 * Citizen font stack for sans-serif fonts
 *
 * `Roboto` – Default font
 * system-ui - System UI font stack
 * `-apple-system` - Firefox fallback for System UI font stack
 */
@fonts: 'Roboto', system-ui, -apple-system, sans-serif;
/**
 * Citizen serif font stack
 *
 * `Georgia` – Windows, Mac
 * `serif` – (Generic) web font fallback
 */
@fonts-serif: Georgia, serif;
/**
 * System font stack for monospace fonts
 *
 * `SFMono-Regular` - macOS 10.12+
 * `Menlo` – macOS 10.6+
 * `Roboto Mono` - Android 4.0+
 * `Consolas` – Windows Vista & newer
 * `Liberation Mono` – Fedora, Ubuntu, … OFL licensed
 * `'Courier New', monospace` – (Generic) web font fallback
 */
@fonts-monospace: 'SFMono-Regular', 'Menlo', 'Roboto Mono', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

/*
 * Text hierarchy
*/

// Scaling for content text
@content-scaling: 0.625;
@toc-scaling: 0.75;

// Wikimedia scale - https://design.wikimedia.org/style-guide/visual-style_typography.html
@content-h1-size: 3.2rem * @content-scaling;
@content-h2-size: 2.4rem * @content-scaling;
@content-h3-size: 2rem * @content-scaling;
@content-h4-size: 1.8rem * @content-scaling;
@content-h5-size: 1.6rem * @content-scaling;
@content-h6-size: 1.6rem * @content-scaling;
@content-body-size: 1.6rem * @content-scaling;
@content-lead-paragraph-size: 1.8rem * @content-scaling;
@content-quote-primary-size: 2rem * @content-scaling;
@content-quote-secondary-size: 1.4rem * @content-scaling;
@content-caption-size: 1.3rem * @content-scaling;
@content-small-text-size: 1.3rem * @content-scaling;
@content-monospace-size: 1.4rem * @content-scaling;
@content-line-height: 1.6;
@content-margin-top: 0.8rem;

@ui-menu-text: 14px;
@ui-menu-text-big: 15px;
@ui-menu-header: 16px;

@footer-line-height: 1.4;

/*
 * Viewports
 */

@screen0: @page-width - @margin-side * 7; // 720px
@screen1: @page-width + @margin-side * 2; // 900px
@screen2: @footer-width; // 1290px
@screen3: @footer-width + @margin-side * 8; // 1450px
@screen4: @footer-width - (@negative-margin * 2); // 1720px