resources/lib/codex-design-tokens/theme-wikimedia-ui-mixin-dark.less

   1 /**
   2  * Codex Design Tokens v1.18.0
   3  * Design System for Wikimedia
   4  * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
   5  */
   6
   7 .cdx-mode-dark() {
   8   --color-base: #eaecf0;
   9   --color-base--hover: #f8f9fa;
  10   --color-emphasized: #f8f9fa;
  11   --color-subtle: #a2a9b1;
  12   --color-disabled: #54595d;
  13   --color-disabled-emphasized: #72777d;
  14   --color-inverted: #101418;
  15   --color-progressive: #88a3e8; /* 'Progressive' Color and states */
  16   --color-progressive--hover: #b0c1f0;
  17   --color-progressive--active: #cbd6f6;
  18   --color-destructive: #fd7865; /* 'Destructive' Color and states */
  19   --color-destructive--hover: #fea898;
  20   --color-destructive--active: #ffc8bd;
  21   --color-visited: #a799cd; /* 'Visited' color. In combination with progressive. Used for default links. */
  22   --color-visited--hover: #c5b9dd;
  23   --color-visited--active: #d9d0e9;
  24   --color-destructive--visited: #c99391; /* Red link 'Visited' color. Used for visited red links. */
  25   --color-destructive--visited--hover: #dcb5b3;
  26   --color-destructive--visited--active: #e8cecd;
  27   --color-error: #fd7865;
  28   --color-error--hover: #fea898;
  29   --color-error--active: #ffc8bd;
  30   --color-warning: #ca982e;
  31   --color-success: #2cb491;
  32   --color-notice: #a2a9b1;
  33   --color-content-added: #80cdb3;
  34   --color-content-removed: #fd7865;
  35   --color-base--subtle: #a2a9b1;
  36   --box-shadow-color-base: #fff;
  37   --box-shadow-color-progressive--focus: #6485d1;
  38   --box-shadow-color-progressive-selected: #88a3e8;
  39   --box-shadow-color-progressive-selected--hover: #b0c1f0;
  40   --box-shadow-color-progressive-selected--active: #cbd6f6;
  41   --box-shadow-color-destructive--focus: #6485d1;
  42   --box-shadow-color-inverted: #000;
  43   --mix-blend-mode-blend: screen;
  44   --background-color-base: #101418; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
  45   --background-color-neutral: #27292d;
  46   --background-color-neutral-subtle: #202122;
  47   --background-color-interactive: #27292d;
  48   --background-color-interactive--hover: #404244;
  49   --background-color-interactive--active: #54595d;
  50   --background-color-interactive-subtle: #202122;
  51   --background-color-interactive-subtle--hover: #27292d;
  52   --background-color-interactive-subtle--active: #404244;
  53   --background-color-disabled: #404244; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
  54   --background-color-disabled-subtle: #27292d; /* Components like TextInputs, Selects…. */
  55   --background-color-inverted: #f8f9fa;
  56   --background-color-progressive--focus: #6485d1;
  57   --background-color-progressive-subtle: #1b223d;
  58   --background-color-progressive-subtle--hover: #233566;
  59   --background-color-progressive-subtle--active: #3056a9;
  60   --background-color-destructive--focus: #6485d1;
  61   --background-color-destructive-subtle: #3c1a13;
  62   --background-color-destructive-subtle--hover: #612419;
  63   --background-color-destructive-subtle--active: #9f3526;
  64   --background-color-error-subtle: #3c1a13;
  65   --background-color-error-subtle--hover: #612419;
  66   --background-color-error-subtle--active: #9f3526;
  67   --background-color-warning-subtle: #2d2212;
  68   --background-color-success-subtle: #132821;
  69   --background-color-notice-subtle: #27292d;
  70   --background-color-content-added: #233566;
  71   --background-color-content-removed: #453217;
  72   --background-color-backdrop-light: rgba( 0, 0, 0, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
  73   --background-color-backdrop-dark: rgba( 255, 255, 255, 0.65 );
  74   --border-color-base: #72777d;
  75   --border-color-subtle: #54595d;
  76   --border-color-muted: #404244;
  77   --border-color-interactive--hover: #a2a9b1;
  78   --border-color-interactive--active: #c8ccd1;
  79   --border-color-disabled: #54595d;
  80   --border-color-inverted: #101418;
  81   --border-color-progressive--hover: #88a3e8;
  82   --border-color-progressive--active: #b0c1f0;
  83   --border-color-progressive--focus: #6485d1;
  84   --border-color-destructive--hover: #fd7865;
  85   --border-color-destructive--active: #fea898;
  86   --border-color-destructive--focus: #6485d1;
  87   --border-color-error--hover: #fd7865;
  88   --border-color-error--active: #fea898;
  89   --border-color-content-added: #233566;
  90   --border-color-content-removed: #987027;
  91 }