MediaWiki:Gadget-DesignTokens.css

/** "Reset" */
* {
  box-sizing: border-box;
}

/** Definition of Design Tokens **/
:root {
	--iopw-ref-typeface-base: Helvetica;
	--iopw-ref-typeface-base-alt: Arial;
	--iopw-ref-typeface-base-fallback: sans-serif;
	--iopw-ref-typeface-fancy: Times;
	--iopw-ref-typeface-fancy-fallback:serif;
	--iopw-ref-typeface-mono: "Courier New";
	--iopw-ref-typeface-mono-alt: Courier;
	--iopw-ref-typeface-mono-fallback: monospace;
	
	--iopw-ref-border-width: thin;
	--iopw-ref-border-width-thick: thick;
	--iopw-ref-border-style: solid;
	
	--iopw-ref-transparency-00: 0%;
	--iopw-ref-transparency-25: 25%;
	--iopw-ref-transparency-50: 50%;
	--iopw-ref-transparency-75: 75%;
	--iopw-ref-transparency-99: 100%;
	
	--iopw-ref-palette-gray-00: #000000;
	--iopw-ref-palette-gray-10: #1F1F1F;
	--iopw-ref-palette-gray-20: #333333;
	--iopw-ref-palette-gray-30: #4A4A4A;
	--iopw-ref-palette-gray-40: #646464;
	--iopw-ref-palette-gray-50: #7F7F7F;
	--iopw-ref-palette-gray-60: #AAAAAA;
	--iopw-ref-palette-gray-70: #BBBBBB;
	--iopw-ref-palette-gray-80: #DADADA;
	--iopw-ref-palette-gray-90: #EDEDED;
	--iopw-ref-palette-gray-99: #FFFFFF;
	
	--iopw-ref-palette-primary: #F0B000;
	--iopw-ref-palette-primary-lighter: #FFCC00;
	--iopw-ref-palette-primary-darker: #EEAA00;
	--iopw-ref-palette-primary-darkest: #4E443C;
	--iopw-ref-palette-on-primary: #000000;
	
	--iopw-ref-palette-secondary: #FF0000;
	--iopw-ref-palette-secondary-darker: #BD0B0B;
	
	--iopw-ref-palette-tertiary: #0000FF;
	--iopw-ref-palette-tertiary-darker: #00007F;
	
	--iopw-ref-palette-quaternary: #00FF00;
	--iopw-ref-palette-quaternary-darker: #007F00;
	
	--iopw-ref-palette-input: #F5F5EF;
	--iopw-ref-palette-on-input: #5A5A55;
	
	--iopw-ref-palette-surface: #808080;
	--iopw-ref-palette-on-surface: #FFFFFF;
	--iopw-ref-palette-surface-container: #474747;
	
	--iopw-ref-palette-surface-dim: #4E443C;
	--iopw-ref-palette-on-surface-dim: #A2A2A2;
	
	--iopw-ref-palette-font-sidenote: #71FDFF;
	--iopw-ref-palette-font-positive: #ADFF2F;
	--iopw-ref-palette-font-negative: #FF0000;
	
	--iopw-ref-palette-obtain-construct-normal: #008000;
	--iopw-ref-palette-obtain-construct-heavy: #FFA500;
	--iopw-ref-palette-obtain-construct-drop: #FFFF00;
	--iopw-ref-palette-obtain-construct-reward: #FF8C69;
	--iopw-ref-palette-obtain-construct-dormitory: #F9D988;
	--iopw-ref-palette-obtain-construct-assimilation: #8ABFEE;
	
	/** Values specific to PNC */
	
	--pnc-ref-palette-rarity-1star: #2999F3;
	--pnc-ref-palette-rarity-2star: #B470E1;
	--pnc-ref-palette-rarity-3star: #FC8C10;
	--pnc-ref-palette-card-level1: #6293E3;
	--pnc-ref-palette-card-level2: #9450D9;
	--pnc-ref-palette-card-level3: #DEC743;
	
	/** Values specific to GFL */
	
	--gfl-ref-palette-rarity-extra: #DFB6FF;
	--gfl-ref-palette-rarity-2star: #DDDDDD;
	--gfl-ref-palette-rarity-3star: #6BDFCE;
	--gfl-ref-palette-rarity-4star: #D6E35A;
	--gfl-ref-palette-rarity-5star: #FFCD4A;
	--gfl-ref-palette-rarity-mod3: #FF4F00;
	
	--gfl-ref-palette-unit-enemy: #FF0012;
	--gfl-ref-palette-unit-enemy-alt: #EC5151;
	--gfl-ref-palette-unit-hoc-orange: #F89736;
	--gfl-ref-palette-unit-hoc-blue: #85B6DF;
	--gfl-ref-palette-unit-fairy-battle: #F76529;
	--gfl-ref-palette-unit-fairy-strategy: #739EE7;
	
	--gfl-ref-palette-hoc-chip-orange: #DD786C;
	--gfl-ref-palette-hoc-chip-orange-alt: #79644C;
	--gfl-ref-palette-hoc-chip-blue: #6C6CDD;
	--gfl-ref-palette-hoc-chip-blue-alt: #4C4C79;
	
	--gfl-ref-palette-tile-container: #333333;
	--gfl-ref-palette-tile: #1F1F1F;
	--gfl-ref-palette-tile-stand: #FFFFFF;
	--gfl-ref-palette-tile-buffed: #00FFDE;
}

/** Setting up theme */
:root {
	/** Base */
	--iopw-sys-size-0-5: 0.125rem;
	--iopw-sys-size-1: 0.25rem;
	--iopw-sys-size-2: 0.5rem;
	--iopw-sys-size-3: 0.75rem;
	--iopw-sys-size-4: 1rem;
	--iopw-sys-size-5: 1.25rem;
	--iopw-sys-size-6: 1.5rem;
	--iopw-sys-size-7: 1.75rem;
	--iopw-sys-size-8: calc(var(--iopw-sys-size-4) * 2);
	--iopw-sys-size-12: calc(var(--iopw-sys-size-4) * 3);
	--iopw-sys-size-16: calc(var(--iopw-sys-size-4) * 4);
	--iopw-sys-size-24: calc(var(--iopw-sys-size-4) * 6);
	--iopw-sys-size-32: calc(var(--iopw-sys-size-4) * 8);
	
	--iopw-sys-font-weight-lighter: 100;
	--iopw-sys-font-weight-light: 200;
	--iopw-sys-font-weight-normal: 400;
	--iopw-sys-font-weight-bold: 700;
	--iopw-sys-font-weight-bolder: 900;
	
	--iopw-sys-typeface-base: var(--iopw-ref-typeface-base);
	--iopw-sys-typeface-base-alt: var(--iopw-ref-typeface-base-alt);
	--iopw-sys-typeface-base-fallback: var(--iopw-ref-typeface-base-fallback);
	--iopw-sys-typeface-fancy: var(--iopw-ref-typeface-fancy);
	--iopw-sys-typeface-fancy-fallback: var(--iopw-ref-typeface-fancy-fallback);
	--iopw-sys-typeface-mono: var(--iopw-ref-typeface-mono);
	--iopw-sys-typeface-mono-alt: var(--iopw-ref-typeface-mono-alt);
	--iopw-sys-typeface-mono-fallback: var(--iopw-ref-typeface-mono-fallback);
	
	--iopw-sys-transparency-00: var(--iopw-ref-transparency-00);
	--iopw-sys-transparency-25: var(--iopw-ref-transparency-25);
	--iopw-sys-transparency-50: var(--iopw-ref-transparency-50);
	--iopw-sys-transparency-75: var(--iopw-ref-transparency-75);
	--iopw-sys-transparency-99: var(--iopw-ref-transparency-99);
	
	--iopw-sys-border-width: var(--iopw-ref-border-width);
	--iopw-sys-border-width-thick: var(--iopw-ref-border-width-thick);
	--iopw-sys-border-style: var(--iopw-ref-border-style);
	
	--iopw-sys-palette-gray-00: var(--iopw-ref-palette-gray-00);
	--iopw-sys-palette-gray-10: var(--iopw-ref-palette-gray-10);
	--iopw-sys-palette-gray-20: var(--iopw-ref-palette-gray-20);
	--iopw-sys-palette-gray-30: var(--iopw-ref-palette-gray-30);
	--iopw-sys-palette-gray-40: var(--iopw-ref-palette-gray-40);
	--iopw-sys-palette-gray-50: var(--iopw-ref-palette-gray-50);
	--iopw-sys-palette-gray-60: var(--iopw-ref-palette-gray-60);
	--iopw-sys-palette-gray-70: var(--iopw-ref-palette-gray-70);
	--iopw-sys-palette-gray-80: var(--iopw-ref-palette-gray-80);
	--iopw-sys-palette-gray-90: var(--iopw-ref-palette-gray-90);
	--iopw-sys-palette-gray-99: var(--iopw-ref-palette-gray-99);
	
	--iopw-sys-palette-primary: var(--iopw-ref-palette-primary);
	--iopw-sys-palette-primary-lighter: var(--iopw-ref-palette-primary-lighter);
	--iopw-sys-palette-primary-darker: var(--iopw-ref-palette-primary-darker);
	--iopw-sys-palette-primary-darkest: var(--iopw-ref-palette-primary-darkest);
	--iopw-sys-palette-on-primary: var(--iopw-ref-palette-on-primary);
	
	--iopw-sys-palette-secondary: var(--iopw-ref-palette-secondary);
	--iopw-sys-palette-secondary-darker: var(--iopw-ref-palette-secondary-darker);
	
	--iopw-sys-palette-tertiary: var(--iopw-ref-palette-tertiary);
	--iopw-sys-palette-tertiary-darker: var(--iopw-ref-palette-tertiary-darker);
	
	--iopw-sys-palette-quaternary: var(--iopw-ref-palette-quaternary);
	--iopw-sys-palette-quaternary-darker: var(--iopw-ref-palette-quaternary-darker);
	
	--iopw-sys-palette-input: var(--iopw-ref-palette-input);
	--iopw-sys-palette-on-input: var(--iopw-ref-palette-on-input);
	
	--iopw-sys-palette-surface: var(--iopw-ref-palette-surface);
	--iopw-sys-palette-on-surface: var(--iopw-ref-palette-on-surface);
	--iopw-sys-palette-surface-container: var(--iopw-ref-palette-surface-container);
	
	--iopw-sys-palette-surface-dim: var(--iopw-ref-palette-surface-dim);
	--iopw-sys-palette-on-surface-dim: var(--iopw-ref-palette-on-surface-dim);
	
	--iopw-sys-palette-font-sidenote: var(--iopw-ref-palette-font-sidenote);
	--iopw-sys-palette-font-positive: var(--iopw-ref-palette-font-positive);
	--iopw-sys-palette-font-negative: var(--iopw-ref-palette-font-negative);
	
	--iopw-sys-palette-obtain-construct-normal: var(--iopw-ref-palette-obtain-construct-normal);
	--iopw-sys-palette-obtain-construct-heavy: var(--iopw-ref-palette-obtain-construct-heavy);
	--iopw-sys-palette-obtain-construct-drop: var(--iopw-ref-palette-obtain-construct-drop);
	--iopw-sys-palette-obtain-construct-reward: var(--iopw-ref-palette-obtain-construct-reward);
	--iopw-sys-palette-obtain-construct-dormitory: var(--iopw-ref-palette-obtain-construct-dormitory);
	--iopw-sys-palette-obtain-construct-assimilation: var(--iopw-ref-palette-obtain-construct-assimilation);
	
	/** Values specific to PNC */
	
	--pnc-sys-rarity-1star: var(--pnc-ref-palette-rarity-1star);
	--pnc-sys-rarity-2star: var(--pnc-ref-palette-rarity-2star);
	--pnc-sys-rarity-3star: var(--pnc-ref-palette-rarity-3star);
	--pnc-sys-card-level1: var(--pnc-ref-palette-card-level1);
	--pnc-sys-card-level2: var(--pnc-ref-palette-card-level2);
	--pnc-sys-card-level3: var(--pnc-ref-palette-card-level3);
	
	/** Values specific to GFL */
	
	--gfl-sys-rarity-extra: var(--gfl-ref-palette-rarity-extra);
	--gfl-sys-rarity-2star: var(--gfl-ref-palette-rarity-2star);
	--gfl-sys-rarity-3star: var(--gfl-ref-palette-rarity-3star);
	--gfl-sys-rarity-4star: var(--gfl-ref-palette-rarity-4star);
	--gfl-sys-rarity-5star: var(--gfl-ref-palette-rarity-5star);
	--gfl-sys-rarity-mod3: var(--gfl-ref-palette-rarity-mod3);
	
	--gfl-sys-unit-enemy: var(--gfl-ref-palette-unit-enemy);
	--gfl-sys-unit-enemy-alt: var(--gfl-ref-palette-unit-enemy-alt);
	--gfl-sys-unit-hoc-orange: var(--gfl-ref-palette-unit-hoc-orange);
	--gfl-sys-unit-hoc-blue: var(--gfl-ref-palette-unit-hoc-blue);
	--gfl-sys-unit-fairy-battle: var(--gfl-ref-palette-unit-fairy-battle);
	--gfl-sys-unit-fairy-strategy: var(--gfl-ref-palette-unit-fairy-strategy);
	
	--gfl-sys-hoc-chip-orange: var(--gfl-ref-palette-hoc-chip-orange);
	--gfl-sys-hoc-chip-orange-alt: var(--gfl-ref-palette-hoc-chip-orange-alt);
	--gfl-sys-hoc-chip-blue: var(--gfl-ref-palette-hoc-chip-blue);
	--gfl-sys-hoc-chip-blue-alt: var(--gfl-ref-palette-hoc-chip-blue-alt);
	
	--gfl-sys-tile-buffed-container: var(--gfl-ref-palette-tile-container);
	--gfl-sys-tile: var(--gfl-ref-palette-tile);
	--gfl-sys-tile-stand: var(--gfl-ref-palette-tile-stand);
	--gfl-sys-tile-buffed: var(--gfl-ref-palette-tile-buffed);
}

/** Component Themes */
:root {
	/** Diagram (ex. Radar Chart) */
	--iopw-comp-diagram-grid-stroke: var(--iopw-sys-palette-gray-50);
	--iopw-comp-diagram-primary-stroke: var(--iopw-sys-palette-primary);
	--iopw-comp-diagram-primary-fill: color-mix(in srgb, var(--iopw-sys-palette-primary-darker) var(--iopw-sys-transparency-50), transparent);
	--iopw-comp-diagram-secondary-stroke: var(--iopw-sys-palette-secondary);
	--iopw-comp-diagram-secondary-fill: color-mix(in srgb, var(--iopw-sys-palette-secondary-darker) var(--iopw-sys-transparency-50), transparent);
	--iopw-comp-diagram-tertiary-stroke: var(--iopw-sys-palette-tertiary);
	--iopw-comp-diagram-tertiary-fill: color-mix(in srgb, var(--iopw-sys-palette-tertiary-darker) var(--iopw-sys-transparency-50), transparent);
	--iopw-comp-diagram-quaternary-stroke: var(--iopw-sys-palette-quaternary);
	--iopw-comp-diagram-quaternary-fill: color-mix(in srgb, var(--iopw-sys-palette-quaternary-darker) var(--iopw-sys-transparency-50), transparent);
	
	/** Flowthread (Comment plugin) **/
	--iopw-comp-comment-font-color: var(--iopw-sys-palette-on-surface);
	--iopw-comp-comment-font: var(--iopw-sys-typeface-base), var(--iopw-sys-typeface-base-alt), var(--iopw-sys-typeface-base-fallback);
	--iopw-comp-comment-border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
	--iopw-comp-comment-border-radius: 0;
	--iopw-comp-comment-control-font-size: var(--iopw-sys-size-3);
	--iopw-comp-comment-post-font-size: calc(var(--iopw-sys-size-3) + var(--iopw-sys-size-0-5));
}