@itamar.wmde/wikit-css/build/tokens/variables.css

Prototype for a Design System and UI toolkit for WMDE Wikibase

/**
 * Do not edit directly
 * Generated on Fri, 17 Apr 2020 15:53:40 GMT
 */

:root {
  --button-primary-size-medium-height: 32px;
  --button-primary-size-medium-text-padding-x: 12px;
  --button-primary-size-medium-text-padding-y: 5px;
  --button-primary-size-large-height: 40px;
  --button-primary-size-large-text-padding-x: 16px;
  --button-primary-size-large-text-padding-y: 9px;
  --button-primary-text-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;;
  --button-primary-text-color-default: #ffffff;
  --button-primary-text-color-disabled: #ffffff;
  --button-primary-text-font-weight: 600;
  --button-primary-text-font-size: 16px;
  --button-primary-text-line-height: 1.25;
  --button-primary-background-color-default: #3366cc;
  --button-primary-background-color-hover: #447ff5;
  --button-primary-background-color-active: #2a4b8d;
  --button-primary-background-color-focus: #3366cc;
  --button-primary-background-color-disabled: #c8ccd1;
  --button-primary-border-color-default: #3366cc;
  --button-primary-border-color-hover: #447ff5;
  --button-primary-border-color-active: #2a4b8d;
  --button-primary-border-color-focus: #3366cc;
  --button-primary-border-color-disabled: #c8ccd1;
  --button-primary-border-radius: 2px;
  --button-primary-border-width-default: 1px;
  --button-primary-border-width-increase: 2px;
  --button-text-line-height: 1.25;
  --button-text-font-size: 16px;
  --button-text-font-weight: 600;
  --button-text-padding-medium-x: 12px;
  --button-text-padding-medium-y: 5px;
  --button-text-padding-large-x: 16px;
  --button-text-padding-large-y: 9px;
  --button-text-color-positive: #202122;
  --button-text-color-reversed: #ffffff;
  --button-height-medium: 32px;
  --button-height-large: 40px;
  --button-border-color-disabled: #c8ccd1;
  --button-background-color-disabled: #c8ccd1;
  --text-color-base: #202122;
  --text-color-emphasized: #000000;
  --text-color-secondary: #72777d;
  --background-color-unframed-base: #ffffff;
  --background-color-unframed-hover: #eaecf0;
  --background-color-unframed-focus: #ffffff;
  --background-color-unframed-disabled: #eaecf0;
  --background-color-framed-base: #f8f9fa;
  --background-color-framed-hover: #ffffff;
  --background-color-framed-active: #72777d;
  --background-color-framed-disabled: #c8ccd1;
  --border-color-base: #a2a9b1;
  --border-color-hover: #72777d;
  --border-color-active: #72777d;
  --border-color-focus: #a2a9b1;
  --border-color-disabled: #c8ccd1;
  --border-radius-none: 0px;
  --border-radius-round: 2px;
  --border-radius-rounder: 4px;
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  --font-family-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;;
  --font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;;
  --font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --font-line-height-small: 1.25;
  --font-line-height-medium: 1.5;
  --font-line-height-large: 1.6;
  --color-base-0: #000000;
  --color-base-10: #202122;
  --color-base-20: #54595d;
  --color-base-30: #72777d;
  --color-base-50: #a2a9b1;
  --color-base-70: #c8ccd1;
  --color-base-80: #eaecf0;
  --color-base-90: #f8f9fa;
  --color-base-100: #ffffff;
  --color-accent-30: #2a4b8d;
  --color-accent-50: #3366cc;
  --color-accent-90: #eaf3ff;
  --color-utility-red-30: #b32424;
  --color-utility-red-50: #dd3333;
  --color-utility-red-90: #fee7e6;
  --color-utility-green-30: #14866d;
  --color-utility-green-50: #00af89;
  --color-utility-green-90: #d5fdf4;
  --color-utility-yellow-30: #ac6600;
  --color-utility-yellow-50: #ffcc33;
  --color-utility-yellow-90: #fef6e7;
  --color-interaction-primary-hover: #447ff5;
  --color-interaction-destructive-active: #d11d13;
  --dimension-font-size-xsmall: 13px;
  --dimension-font-size-small: 14px;
  --dimension-font-size-medium: 16px;
  --dimension-font-size-large: 18px;
  --dimension-font-size-xlarge: 20px;
  --dimension-font-size-xxlarge: 24px;
  --dimension-font-size-xxxlarge: 32px;
  --dimension-static-size-0: 0px;
  --dimension-static-size-10: 1px;
  --dimension-static-size-25: 2px;
  --dimension-static-size-50: 4px;
  --dimension-static-size-65: 5px;
  --dimension-static-size-100: 8px;
  --dimension-static-size-110: 9px;
  --dimension-static-size-150: 12px;
  --dimension-static-size-200: 16px;
  --dimension-static-size-250: 20px;
  --dimension-static-size-300: 24px;
  --dimension-static-size-400: 32px;
  --dimension-static-size-500: 40px;
  --transition-duration-fast: 100ms;
  --transition-duration-regular: 200ms;
  --transition-duration-slower: 300ms;
  --transition-duration-slowest: 400ms;
}