@itamar.wmde/wikit-css/build/tokens/_variables.less

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

@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;