@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 Tue, 21 Apr 2020 07:34:07 GMT

@button-size-medium-height: 32px;
@button-size-medium-text-padding-x: 12px;
@button-size-medium-text-padding-y: 5px;
@button-size-large-height: 40px;
@button-size-large-text-padding-x: 16px;
@button-size-large-text-padding-y: 9px;
@button-text-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@button-text-font-weight: 600;
@button-text-font-size: 16px;
@button-text-line-height: 1.25;
@button-text-color-disabled: #ffffff;
@button-background-color-disabled: #c8ccd1;
@button-border-color-disabled: #c8ccd1;
@button-border-radius: 2px;
@button-border-width-default: 1px;
@button-cursor-hover-enabled: pointer;
@button-cursor-hover-disabled: default;
@button-transition-hover-property: background-color, border-color, box-shadow;
@button-transition-hover-duration: 100ms;
@button-neutral-text-color-default: #202122;
@button-neutral-text-color-active: #000000;
@button-neutral-background-color-default: #f8f9fa;
@button-neutral-background-color-hover: #ffffff;
@button-neutral-background-color-active: #c8ccd1;
@button-neutral-background-color-focus: #f8f9fa;
@button-neutral-border-color-default: #a2a9b1;
@button-neutral-border-color-hover: #a2a9b1;
@button-neutral-border-color-active: #72777d;
@button-neutral-border-color-focus: #3366cc;
@button-neutral-box-shadow-focus: inset 0 0 0 1px #3366cc;
@button-primary-text-color-default: #ffffff;
@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-border-color-default: #3366cc;
@button-primary-border-color-hover: #447ff5;
@button-primary-border-color-active: #2a4b8d;
@button-primary-border-color-focus: #3366cc;
@button-primary-box-shadow-focus: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff;
@button-destructive-text-color-default: #ffffff;
@button-destructive-background-color-default: #dd3333;
@button-destructive-background-color-hover: #b32424;
@button-destructive-background-color-active: #d11d13;
@button-destructive-background-color-focus: #dd3333;
@button-destructive-border-color-default: #dd3333;
@button-destructive-border-color-hover: #b32424;
@button-destructive-border-color-active: #d11d13;
@button-destructive-border-color-focus: #dd3333;
@button-destructive-box-shadow-focus: inset 0 0 0 1px #dd3333, inset 0 0 0 2px #ffffff;
@text-color-base: #202122;
@text-color-emphasized: #000000;
@text-color-secondary: #72777d;
@text-style-h-1-font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
@text-style-h-1-size: 32px;
@text-style-h-1-line-height: 1.25;
@text-style-h-1-color: #202122;
@text-style-h-1-font-weight: 400;
@text-style-h-2-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-h-2-size: 24px;
@text-style-h-2-line-height: 1.25;
@text-style-h-2-color: #202122;
@text-style-h-2-font-weight: 600;
@text-style-h-3-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-h-3-size: 20px;
@text-style-h-3-line-height: 1.25;
@text-style-h-3-color: #202122;
@text-style-h-3-font-weight: 600;
@text-style-h-4-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-h-4-size: 18px;
@text-style-h-4-line-height: 1.25;
@text-style-h-4-color: #202122;
@text-style-h-4-font-weight: 600;
@text-style-h-5-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-h-5-size: 18px;
@text-style-h-5-line-height: 1.25;
@text-style-h-5-color: #202122;
@text-style-h-5-font-weight: 600;
@text-style-h-6-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-h-6-size: 16px;
@text-style-h-6-line-height: 1.25;
@text-style-h-6-color: #202122;
@text-style-h-6-font-weight: 400;
@text-style-body-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-body-size: 16px;
@text-style-body-line-height: 1.5;
@text-style-body-color: #202122;
@text-style-body-font-weight: 400;
@text-style-description-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@text-style-description-size: 14px;
@text-style-description-line-height: 1.6;
@text-style-description-color: #72777d;
@text-style-description-font-weight: 400;
@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-small: 2px;
@border-radius-medium: 4px;
@border-width-thin: 1px;
@border-width-thick: 2px;
@cta-text-line-height: 1.25;
@cta-text-font-size: 16px;
@cta-text-font-weight: 600;
@cta-text-padding-medium-x: 12px;
@cta-text-padding-medium-y: 5px;
@cta-text-padding-large-x: 16px;
@cta-text-padding-large-y: 9px;
@cta-text-color-positive: #202122;
@cta-text-color-reversed: #ffffff;
@cta-height-medium: 32px;
@cta-height-large: 40px;
@cta-border-color-disabled: #c8ccd1;
@cta-box-shadow-inset-default: inset 0 0 0 1px #3366cc;
@cta-box-shadow-inset-destructive: inset 0 0 0 1px #dd3333;
@cta-box-shadow-inset-filled: inset 0 0 0 2px #ffffff;
@cta-background-color-disabled: #c8ccd1;
@cta-cursor-hover-enabled: pointer;
@cta-cursor-hover-disabled: default;
@cta-transition-hover-property: background-color, border-color, box-shadow;
@cta-transition-hover-duration: 100ms;
@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;
@transition-property-background-color: background-color;
@transition-property-border-color: border-color;
@transition-property-box-shadow: box-shadow;
@box-shadow-inset-thin: inset 0 0 0 1px;
@box-shadow-inset-thick: inset 0 0 0 2px;
@cursor-default: default;
@cursor-grab: grab;
@cursor-pointer: pointer;
@cursor-not-allowed: not-allowed;