Archive of DS4 LESS variables in Skin v13

skin-13-ds4-variables.less

// SCREEN
@screen-size-1: 320px;
@screen-size-2: 480px;
@screen-size-3: 600px;
@screen-size-4: 768px;
@screen-size-5: 960px;
@screen-size-6: 1280px;

// GRID
@page-grid-cols-small: 8;
@page-grid-cols-large: 16;
@page-grid-gutter-width-small: @spacing-100;
@page-grid-gutter-width-large: @spacing-200;

// MARKETSANS
@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
@marketsans-fontname: "Market Sans";
@marketsans-filename-regular: "MarketSans-Regular-WebS";
@marketsans-filename-bold: "MarketSans-SemiBold-WebS";

// FONT-FAMILY
@font-family-default: @marketsans-fontname, Arial, sans-serif;

// TYPOGRAPHY
@font-size-12: 0.75rem;
@font-size-14: 0.875rem;
@font-size-16: 1rem;
@font-size-18: 1.125rem; // secret size
@font-size-20: 1.25rem;
@font-size-24: 1.5rem;
@font-size-30: 1.875rem;
@font-size-36: 2.25rem;
@font-size-46: 2.875rem;

// SPACING
@spacing-25: @spacing-100 * 0.25;
@spacing-50: @spacing-100 * 0.5;
@spacing-100: 8px;
@spacing-200: @spacing-100 * 2;
@spacing-300: @spacing-100 * 3;
@spacing-400: @spacing-100 * 4;
@spacing-600: @spacing-100 * 6;
@spacing-800: @spacing-100 * 8;

// BORDER
@border-radius-none: 0;
@border-radius-extra-small: 4px;
@border-radius-small: 8px;
@border-radius-medium: 16px;

// YELLOW
@color-y1: #fcf2bd;
@color-y2: #f7e376;
@color-y3: #fbcd25;
@color-y4: #f7b100;
@color-y5: #e58c02;
@color-y6: #aa5404;
@color-y7: #592e13;

// TEAL
@color-t1: #c2f2ef;
@color-t2: #71e3e2;
@color-t3: #1dcbca;
@color-t4: #02a2ac;
@color-t5: #01718f;
@color-t6: #0e4a6c;
@color-t7: #003147;

// LIME
@color-l1: #f4fabe;
@color-l2: #e9f577;
@color-l3: #c9e43b;
@color-l4: #accf02;
@color-l5: #86b300;
@color-l6: #4b7d06;
@color-l7: #364f03;

// RED
@color-r4: #e0103a;
@color-r5: #c4003a;
@color-r6: #a00739;

// Dark mode grey
@color-black-dark-mode: #171717;
@color-grey1-dark-mode: #212121;
@color-grey2-dark-mode: #393939;
@color-grey3-dark-mode: #4d4d4d;
@color-grey4-dark-mode: #6a6a6a;
@color-grey5-dark-mode: #9c9c9c;
@color-grey6-dark-mode: #a8a8a8;
@color-grey7-dark-mode: #dcdcdc;
@color-white-dark-mode: #171717;

// Dark mode color
@color-b4-dark-mode: #5192ff;
@color-b5-dark-mode: #80afff;
@color-b6-dark-mode: #bdd5ff;
@color-m4-dark-mode: #d2a4cf;
@color-r4-dark-mode: #e95367;
@color-r5-dark-mode: #ef8392;
@color-r6-dark-mode: #f4acb6;
@color-g4-dark-mode: #24bc6b;
@color-g6-dark-mode: #30c550;

@url-image-progress-spinner: url("https://ir.ebaystatic.com/cr/v/c1/skin/svg/spinner/v2/spinner-small.svg");
@url-image-progress-spinner-large: url("https://ir.ebaystatic.com/cr/v/c1/skin/svg/spinner/v2/spinner-large.svg");
@url-image-progress-spinner-dark-mode: url("https://ir.ebaystatic.com/cr/v/c1/skin/svg/spinner/v2/spinner-dark-mode.svg");
@url-image-progress-spinner-large-dark-mode: url("https://ir.ebaystatic.com/cr/v/c1/skin/svg/spinner/v2/spinner-large-dark-mode.svg");

// DEPRECATED
@spacing-extra-small: @spacing-100;
@spacing-small: @spacing-200;
@spacing-medium: @spacing-300;
@spacing-large: @spacing-400;
@spacing-extra-large: @spacing-800;

// FONT
@font-weight-regular: 400;
@font-weight-bold: 500;

// Grey
@color-white: #fff;
@color-grey1: #eee;
@color-grey2: #ddd;
@color-grey3: #ccc;
@color-grey4: #999;
@color-grey5: #707070;
@color-grey6: #333;
@color-grey7: #111820;
@color-black: #000;

// Orange
@color-o1: fade(@color-o4, 20%);
@color-o2: fade(@color-o4, 40%);
@color-o3: fade(@color-o4, 60%);
@color-o4: #f18e0c;
@color-o5: #f18e0c; // for token-system compatibility
@color-o6: #d36c07;
@color-o7: #d36c07; // for token-system compatibility

// Red
@color-r1: fade(@color-r4, 20%);
@color-r2: fade(@color-r4, 40%);
@color-r3: fade(@color-r4, 60%);
@color-r4: #dd1e31;
@color-r5: #dd1e31; // for token-system compatibility
@color-r6: #ad1f3a;
@color-r7: #ad1f3a; // for token-system compatibility

// Magenta/Purple
@color-m1: fade(@color-m4, 20%);
@color-m2: fade(@color-m4, 40%);
@color-m3: fade(@color-m4, 60%);
@color-m4: #6a29b9;
@color-m5: #6a29b9; // for token-system compatibility
@color-m6: #3d1c7c;
@color-m7: #3d1c7c; // for token-system compatibility

// Blue
@color-b1: fade(@color-b4, 20%);
@color-b2: fade(@color-b4, 40%);
@color-b3: fade(@color-b4, 60%);
@color-b4: #0654ba;
@color-b5: #0654ba; // for token-system compatibility
@color-b6: #00489f;
@color-b7: #00489f; // for token-system compatibility

// Green
@color-g1: fade(@color-g4, 20%);
@color-g2: fade(@color-g4, 40%);
@color-g3: fade(@color-g4, 60%);
@color-g4: #5ba71b;
@color-g5: #5ba71b; // for token-system compatibility
@color-g6: #457016;
@color-g7: #457016; // for token-system compatibility

// breakpoints
@breakpoint-1: ~"only screen and (min-width: @{screen-size-1})";
@breakpoint-2: ~"only screen and (min-width: @{screen-size-2})";
@breakpoint-3: ~"only screen and (min-width: @{screen-size-3})";
@breakpoint-4: ~"only screen and (min-width: @{screen-size-4})";
@breakpoint-5: ~"only screen and (min-width: @{screen-size-5})";
@breakpoint-6: ~"only screen and (min-width: @{screen-size-6})";

// backgrounds
@color-background-default: @color-white;
@color-background-highlight: @color-grey1;
@color-mask-unfaded: fade(@color-text-default, 0%);
@color-mask-faded: fade(@color-text-default, 70%);

// text / foregrounds
@color-text-primary: @color-text-default;
@color-text-secondary: @color-grey5;
@color-text-confirmation: @color-g6;

// actions
@color-action-disabled: @color-grey3;
@color-action-primary: @color-b4;
@color-action-secondary: @color-grey5;
@color-action-secondary-background: transparent;
@color-action-tertiary: @color-grey1;
@color-action-active: @color-b6;
@color-action-hover: @color-b5;
@color-action-disabled: @color-grey3;
@color-action-destroy: @color-r4;

// destructive
@color-destructive-primary-text: @color-white;
@color-destructive-primary-disabled-text: @color-white;
@color-destructive-primary-disabled-background: @color-grey3;
@color-destructive-secondary-text: @color-r4;
@color-destructive-secondary-hover-text: @color-r5;
@color-destructive-secondary-active-text: @color-r6;
@color-destructive: @color-r4;
@color-destructive-hover: @color-r5;
@color-destructive-active: @color-r6;

// destructive spinners
@color-destructive-primary-spinner-background: #ec7089; // short section
@color-destructive-primary-spinner-foreground: @color-white;
@color-destructive-secondary-spinner-background: #f39fb0; // short section
@color-destructive-secondary-spinner-foreground: #e0103a;
@color-destructive-tertiary-spinner-background: #ee9aab; // short section
@color-destructive-tertiary-spinner-foreground: #e0103a;

// links
@color-link-default: @color-action-primary;
@color-link-hover: @color-action-hover;
@color-link-visited: @color-m4;

// dialogs
@max-width-lightbox: 616px;

// paddles
@color-background-paddle: @color-background-default;
@color-border-paddle: @color-grey2;
@color-foreground-paddle: @color-text-default;
@color-background-hover-paddle: @color-grey5;
@color-foreground-hover-paddle: @color-background-default;
@color-background-active-paddle: @color-grey6;

// pause/play
@color-background-playback: rgba(0, 0, 0, 0.45);
@color-foreground-playback: @color-background-default;

// status
@color-status-attention: @color-r4;
@color-status-information: @color-b4;
@color-selection-list-item-hover-foreground: @color-text-primary;

// disabled
@color-disabled: @color-action-disabled;
@color-disabled-icon: @color-grey3;

// form controls
@color-form-control-background: @color-grey1;
@color-form-control-border: #949494; // non-palette colour
@color-form-control-focus-border: @color-black; // non-palette colour
@color-form-control-underline: @color-grey5;
@color-form-control-foreground: @color-text-default;
@color-form-control-disabled-placeholder: @color-grey4;
@color-form-control-readonly-foreground: @color-grey4;
@color-form-control-disabled-background: @color-grey1;
@color-form-control-disabled-foregound: @color-grey4;
@color-form-control-label: @color-grey6;
@color-textbox-icon: @color-text-default;
@height-textbox: 40px;
@font-size-button-large: @font-size-medium;

// Icons
@color-social-icons-background: @color-black;
@color-social-icons-foreground: @color-white;
@color-star-rating-icon-unfilled-foreground: #ccc;
@color-star-rating-icon-filled-foreground: @color-black;

// selection controls
@dimensions-checkbox: 18px;
@dimensions-checkbox-large: 24px;
@dimensions-radio: 18px;
@dimensions-radio-large: 24px;

// buttons
@min-width-button: 128px;
@padding-vertical-button: 9.5px;
@padding-horizontal-button: 16px;
@padding-vertical-button-large: 13px;
@padding-horizontal-button-large: 16px;
@padding-horizontal-button-wide: 48px;

// selection lists
@color-selection-list-background: @color-background-default;
@color-selection-list-item-background: @color-selection-list-background;
@color-selection-list-item-foreground: @color-text-default;
@color-selection-list-item-hover-foreground: @color-text-default;
@color-selection-list-anchor: @color-text-default;
@color-selection-list-separator: @color-separator;
@color-selection-list-item-border: @color-selection-list-background;
@color-selection-list-button-background: @color-background-default;
@color-selection-list-button-foreground: @color-text-default;
@color-selection-list-item-active-status: @color-selection-list-item-active-background;

// typeramp
@font-size-giant-3: @font-size-46;
@font-size-giant-2: @font-size-36;
@font-size-giant-1: @font-size-30;
@font-size-large-2: @font-size-24;
@font-size-large-1: @font-size-20;
@font-size-medium: @font-size-16;
@font-size-regular: @font-size-14;
@font-size-small: @font-size-12;

// typography
@typography-bold-text-font-weight: @font-weight-bold;
@typography-secondary-text-color: @color-text-secondary;
@typography-emphasis-color: @color-status-attention;
@typography-negative-color: @color-status-attention;
@typography-positive-color: @color-text-confirmation;
@typography-disabled-text-color: @color-text-disabled;

// outlines
@color-outline: @color-grey5;

//
// DARK MODE
//

// backgrounds
@color-background-default-dark-mode: @color-black-dark-mode;
@color-background-highlight-dark-mode: @color-grey1-dark-mode;

// text
@color-text-default-dark-mode: @color-grey7-dark-mode;
@color-text-primary-dark-mode: @color-text-default-dark-mode;
@color-text-secondary-dark-mode: @color-grey5-dark-mode;
@color-text-disabled-dark-mode: @color-grey3-dark-mode;
@color-text-confirmation-dark-mode: @color-g4-dark-mode;

// actions
@color-action-primary-dark-mode: @color-b4-dark-mode;
@color-action-secondary-dark-mode: @color-grey5-dark-mode;
@color-action-tertiary-dark-mode: @color-grey1-dark-mode;
@color-action-destroy-dark-mode: @color-r4-dark-mode;
@color-action-disabled-dark-mode: @color-grey3-dark-mode;
@color-action-active-dark-mode: @color-b6-dark-mode;
@color-action-hover-dark-mode: @color-b5-dark-mode;

// destructive
@color-destructive-primary-text-dark-mode: @color-black;
@color-destructive-secondary-text-dark-mode: @color-r4-dark-mode;
@color-destructive-secondary-hover-text-dark-mode: @color-r5-dark-mode;
@color-destructive-secondary-active-text-dark-mode: @color-r6-dark-mode;
@color-destructive-dark-mode: @color-r4-dark-mode;
@color-destructive-hover-dark-mode: @color-r5-dark-mode;
@color-destructive-active-dark-mode: @color-r6-dark-mode;
@color-destructive-primary-disabled-background-dark-mode: @color-grey3-dark-mode;

// destructive spinners
@color-destructive-primary-spinner-background-dark-mode: #953b47;
@color-destructive-primary-spinner-foreground-dark-mode: @color-black-dark-mode; // short section
@color-destructive-secondary-spinner-background-dark-mode: #f6bac2; // short section
@color-destructive-secondary-spinner-foreground-dark-mode: #e95367;
@color-destructive-tertiary-spinner-background-dark-mode: #71353d; // short section
@color-destructive-tertiary-spinner-foreground-dark-mode: #e95367;

// dividers
@color-separator-dark-mode: @color-grey2-dark-mode;
@color-image-border-dark-mode: @color-grey2-dark-mode;

// links
@color-link-default-dark-mode: @color-b4-dark-mode;
@color-link-hover-dark-mode: @color-action-hover-dark-mode;
@color-link-visited-dark-mode: @color-m4-dark-mode;

// status
@color-status-attention-dark-mode: @color-r4-dark-mode;
@color-status-confirmation-dark-mode: @color-g4-dark-mode;
@color-status-information-dark-mode: @color-b4-dark-mode;
@color-status-general-dark-mode: @color-grey6-dark-mode;
@color-status-invalid-dark-mode: #2a191c;

// form controls
@color-form-control-background-dark-mode: @color-grey2-dark-mode;
@color-form-control-disabled-background-dark-mode: @color-grey2-dark-mode;

// selection lists
@color-selection-list-background-dark-mode: @color-black-dark-mode;
@color-selection-list-item-foreground-dark-mode: @color-text-default-dark-mode;
@color-selection-list-item-hover-foreground-dark-mode: @color-background-default-dark-mode;

// icons
@color-star-rating-icon-unfilled-foreground-dark-mode: #484848;
@color-star-rating-icon-filled-foreground-dark-mode: @color-white;

// text
@color-text-default: @color-grey6;
@color-text-disabled: #999;

// dividers
@color-separator: @color-grey1;
@color-image-border: @color-grey1;

// status
@color-status-confirmation: @color-g4;
@color-status-description: @color-text-default;
@color-status-general: @color-grey4;

// secret colours
@color-status-attention-light: @color-r1;
@color-status-confirmation-light: @color-g1;
@color-status-information-light: @color-b1;
@color-status-invalid: @color-r1;

// actions
@color-action-primary-disabled: @color-action-primary;
@opacity-action-disabled: 0.5;
@font-weight-action-primary: normal;

// buttons
@border-radius-button: @border-radius-extra-small;
@border-radius-button-icon-only: @border-radius-extra-small;
@border-radius-dropdown-button: 4px;

// dropdowns
@color-dropdown-border-radius-border: @color-grey3;
@color-dropdown-border: @color-grey3;
@border-radius-dropdown: @border-radius-none;
@box-shadow-dropdown: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
@box-shadow-dropdown-border-radius: 0 2px 4px 0 rgba(199, 199, 199, 0.5);

// flyouts
@color-flyout-box-shadow: rgba(0, 0, 0, 0.15);

// dialogs
@border-radius-dialog: 0;

// labels
@color-label: @color-text-secondary;
@color-label-focus: @color-text-secondary;
@color-label-invalid: @color-text-secondary;
@color-label-disabled: #555;

// form controls
@border-radius-form-control: @border-radius-extra-small;
@font-size-form-control-large: @font-size-medium;

// selection lists
@color-selection-list-item-hover-background: @color-grey1;
@color-selection-list-item-active-background: @color-grey3;
@font-weight-selection-list-item-active: normal;