MediaWiki:Common.less/variables.less

//

/* ======================
      THEME VARIABLES
   ====================== */
// colors are sorted from darkest to lightest
// See <https://davidwalsh.name/sass-color-variables-dont-suck> for naming system

// Don't change any of this unless you know what you're doing

/* ------------------
      brand colors
   ------------------ */

// blues
@chathams-blue:    #115883;
@jelly-bean:       #246c97;
@steel-blue:       #438ab5;
@fountain-blue:    #6ba5c8;
@spindle:          #c1deee;
@selago:           #f6fbfe;
@nav-blue:         #d8e5ff;

// gray-blues
@grey-gray:        #ddd;
@river-bed:        #444e5a;
@shuttle-gray:     #5d6773;
@gray-chateau:     #949eaa;
@loblolly:         #bdc5cd;
@mystic:           #e4eaee;
@black-haze:       #f9fafa;

// grays
@mineshaft:        #333;
@tundora:          #4c4c4c;
@boulder:          #777;
@silver:           #ccc;
@gallery:          #eee;
@alabaster:        #f9f9f9;

// dark mode
@black-pearl:      #071022;
@big-stone:        #172136;
@cloud-burst:      #222e45;
@pickled-bluewood: #313e59;
@waikawa-grey:     #596e96;
@portage:          #8cabe6;

/* -------------------
       other brands
   ------------------- */

// Discord
@discord-bg: #5865f2;
@discord-bg-dark: #525ee0;
@discord-bg-darker: #4c57d0;

/* -------------------
      status colors
   ------------------- */

// reds
@mocaccino:        #801c13;
@old-brick:        #9f261e;
@flamingo:         #ee4231;
@apricot-peach:    #fbc0ba;
@bridesmaid:       #feecea;

// oranges
@antique-bronze:   #7a3f08;
@korma:            #b55e0c;
@ecstasy:          #f7861b;
@corvette:         #fbcfa6;
@lace:             #fef0e4;

// yellows
@cinnamon:         #786300;
@olive:            #a48900;
@supernova:        #f9d000;
@golden:           #fcea94;
@half-dutch:       #fef9de;

// greens
@san-felix:        #2e5e05;
@la-palma:         #3c780a;
@lima:             #6bc71f;
@caper:            #c3e8a3;
@frost:            #ecf8e3;

// blues
@regal-blue:       #03436b;
@venice-blue:      #0b5884;
@curious-blue:     #3ea6e6;
@jordy-blue:       #aad9f5;
@tropical-blue:    #e5f3fc;

// purples
@honey-flower:     #3d276b;
@seance:           #4f348b;
@medium-purple:    #855cd8;
@perfume:          #cfc0f0;
@heliotrope:       #f0ecfa;

// pinks
@cosmic:           #6d3662;
@cannon-pink:      #984c89;
@lavender:         #e874cf;
@cherub:           #f5c8ec;
@french-lilac:     #fceef9;

// other
@black:            #000;
@white:            #fff;

/* ----------------
       shadows
   ---------------- */

@box-shadow:       0 .25rem .35rem -0.25rem rgba(0,0,0,.1);
@box-shadow-dark:  0 .25rem .35rem -0.25rem rgba(0,0,0,.3);

/* ---------------------
       border-radius
   --------------------- */
// from wmui:
// <https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less>
@border-radius:          2px;
@border-radius-circle:   50%;
@border-radius-round:    9999px;

/* ---------------------
         breakpoints
   --------------------- */
// also from wmui

// mobile
@width-breakpoint-mobile: 320px;
// tablet
@width-breakpoint-tablet: 720px;
// desktop
@width-breakpoint-desktop: 1000px;
// Wider desktop
@width-breakpoint-desktop-wide: 1200px;
@width-breakpoint-desktop-extrawide: 2000px;

/* ------------------------
        easing curves
     <https://easings.net>
   ------------------------ */

@ease-out-quad:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
@ease-out-cubic:   cubic-bezier(0.215, 0.61, 0.355, 1);

/* -----------------
       typefaces
   ----------------- */
// imported in MediaWiki:Common.less/fonts.less

@serif-stack:      'PT Serif', 'Palatino', 'Georgia', serif;
@sans-serif-stack: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;


/* Weird gloop styles */

@BODY_MAIN: var(--body-main);
@BODY_LIGHT: var(--body-light);
@BODY_MID: var(--body-mid);
@BODY_DARK: var(--body-dark);
@BODY_BORDER: var(--body-border);

@BUTTON_BORDER: var(--button-border);
@BUTTON_DARK: var(--button-dark);
@BUTTON_LIGHT: var(--button-light);

@SIDEBAR: var(--sidebar);
@SEARCH_BOX: var(--search-box);

@LINK_COLOR: var(--link-color);
@REDLINK_COLOR: var(--redlink-color);
@TEXT_COLOR: var(--text-color);

// colours for /highlight.less
@ADMIN_BLUE: var(--admin-blue);
@BEARCAT_GREEN: var(--bearcat-green);
@AWB_PURPLE: var(--awb-purple);
@JMOD_CROWN: "Jagex_small_logo.png";

// Link colours
@RSW_BLUE: var(--rsw-blue);
@OSRSW_BROWN: var(--osrsw-brown);

@infobox-background: @BODY_LIGHT;
@infobox-header-color: @BODY_DARK;
@infobox-border-color: @BODY_BORDER;
@infobox-subheader-color: @BODY_DARK;