MediaWiki:Common.less/variables.less: Difference between revisions

/* ======================
      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;

// BROWN dark mode
@ebony-brown: #1b1612;
@mocha-brown: #28221d;
@cacao-brown: #312a25;
@sable-brown: #3e362f;
@driftwood-brown: #5e5248;
@taupe-brown: #736559;
@kharid-sand: #b79d7e;
@slate-grey: #98a2b6;
@ivory-white: #f4eaea;

// brighter shore colors
@mine-shaft: #2F2828; /* text-color */
@hopeport: #FFE233;
@hopeport-dark: #3b382f;
@mantuban: #68ABF1;
@mantuban-dark: #26323d;
@hopeforest: #72D757;
@hopeforest-dark: #2e3930;
@crenopolis: #979797;
@crenopolis-dark: #3f3f3f;

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

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

// Twitter
@twitter-bg: rgb(21, 32, 43);
@twitter-bg-dark: darken(rgb(21, 32, 43), 1.5%);

/* -------------------
      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:      'Lora', 'Palatino', 'Georgia', serif;
@sans-serif-stack: 'Helvetica Neue', 'Arial', sans-serif;

@BODY_MAIN: var(--body-main);
@BODY_LIGHT: var(--body-light);
@BODY_MID: var(--body-mid);
@BODY_DARK: var(--body-dark);
@BODY_DARKER: var(--body-darker);
@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);

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

@infobox-card-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.5);
@infobox-outer-radius: .6em;
@infobox-inner-radius: 1.2em;