mediawiki-skins-Citizen/resources/skins.citizen.styles/common/theme.less

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

/**
 * Base theme
 */
:root {
	--color-primary__h: @color-primary__h;
	--color-primary__s: @color-primary__s;
	--color-primary__l: @color-primary__l;

	--color-surface-0: @color-surface-0;
	--color-surface-1: @color-surface-1;
	--color-surface-2: @color-surface-2;
	--color-surface-3: @color-surface-3;
	--color-surface-4: @color-surface-4;

	--color-primary: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
	--color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 1.2 ) )';
	--color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 0.8 ) )';
	--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
	--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 90% )';

	--color-surface-2--hover: @color-surface-2--hover;
	--color-surface-2--active: @color-surface-2--active;

	--box-shadow-card: @box-shadow-card;
	--box-shadow-dialog: @box-shadow-dialog;

	--surface-shadow: var( --color-primary__h ) 10% 20%;
	--shadow-strength: 0.02;
}

a {
	--color-link: ~'var( --color-primary )';
	--color-link--hover: ~'var( --color-primary--hover )';
	--color-link--active: ~'var( --color-primary--active )';
}

/**
 * Dark theme
 */
:root.skin-citizen-dark {
	--color-primary__l: 60%;

	--color-surface-0: ~'hsl( var( --color-primary__h ) 20% 10% )';
	--color-surface-1: ~'hsl( var( --color-primary__h ) 25% 12% )';
	--color-surface-2: ~'hsl( var( --color-primary__h ) 25% 15% )';
	--color-surface-3: ~'hsl( var( --color-primary__h ) 15%  20% )';
	--color-surface-4: ~'hsl( var( --color-primary__h ) 15% 25% )';

	--color-base--emphasized: ~'hsl( var( --color-primary__h ) 80% 95% )';
	--color-base: ~'hsl( var( --color-primary__h ) 10% 75% )';
	--color-base--subtle: ~'hsl( var( --color-primary__h ) 25% 65% )';

	--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
	--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 20% )';

	--background-color-overlay: ~'hsla( var( --color-primary__h ) 20% 10% / 95% )';
	--background-color-overlay--lighter: ~'hsl( var( --color-primary__h ) 20% 10% / 60% )';

	--color-surface-2--hover: ~'hsl( var( --color-primary__h ) 30% 19% )';
	--color-surface-2--active: ~'hsl( var( --color-primary__h ) 30% 11% )';

	--surface-shadow: var( --color-primary__h ) 50% 3%;
	--shadow-strength: 0.8;

	// FIXME: Browsers seem to treat GRAD differently, disabling for now
	// Dark theme usually have an illusion of thicker fonts
	// So we have to tune it back
	// font-variation-settings: 'GRAD' -90;
}