awx/awx/ui/client/lib/theme/_variables.less

/**
 * All base variables used. These should only be referenced by the contextual variables defined
 * below. In development, unless you are intentionally making a fundamental change, these variables
 * should not be modified, removed, or added to.
 *
 * These variables should not be used directly in development of components or features. If an
 * alias doesn't exist for the context you're working within, check with UX to create a new alias
 * or to define a more applicable alias.
 *
 * The goal is for UX to define the contexts for the contextual variables, so it's easy to make
 * modifications like, "Change heading text to be smaller" or "Make all warnings a lighter shade
 * of orange"
 *
 * 1. Colors
 * 2. Typography
 * 3. Layout
 * 4. Breakpoints
 *
 */

// 1. Colors --------------------------------------------------------------------------------------

@at-gray-fc: #fcfcfc;
@at-gray-fa: #fafafa;
@at-gray-f2: #f2f2f2;
@at-gray-f6: #f6f6f6;
@at-gray-eb: #ebebeb;
@at-gray-e1: #e1e1e1;
@at-gray-d7: #d7d7d7;
@at-gray-b7: #b7b7b7;
@at-gray-a9: #a9a9a9;
@at-gray-848992: #848992;
@at-gray-70: #707070;
@at-gray-161b1f: #161b1f;

@at-white: #ffffff;
@at-white-hover: #f2f2f2;

@at-blue: #337ab7;
@at-blue-hover: #286090;

@at-green: #5cb85c;
@at-green-hover: #449d44;

@at-orange: #f0ad4e;
@at-orange-hover: #ec971f;

@at-red: #d9534f;
@at-red-hover: #c9302c;

@at-red-bright: #ff0000;
@at-red-bright-hover: #d81f1f;

// 2. Typography ----------------------------------------------------------------------------------

@at-font-size: 12px;
@at-font-size-2x: 13px;
@at-font-size-3x: 14px;
@at-font-size-4x: 16px;
@at-font-size-5x: 20px;

@at-font-weight: 400;
@at-font-weight-2x: 700;

// 3. Layout --------------------------------------------------------------------------------------

@at-space: 5px;
@at-space-2x: 10px;
@at-space-3x: 15px;
@at-space-4x: 20px;
@at-space-5x: 25px;
@at-space-10x: 50px;

// 4. Breakpoints ---------------------------------------------------------------------------------

@at-breakpoint-sm: 700px;

/**
 * All variables used in the UI. Use these variables directly during the development of components
 * and features. Be sure the context of the variable name applies to the work that's being done.
 * For example, it wouldn't make sense to use `@at-input-height` to describe the height of a
 * button. Either add an alias if it makes sense to use the same base variable, or add a new
 * base variable to reference.
 *
 * Keep in mind the goal is to be able to modify an item by referencing its context instead of
 * an arbitrary variable name. For example, tt should be a simple change when an ask comes in to
 * "increase the height of inputs"
 *
 * 1. Colors
 * 2. Typography
 * 3. Layout
 * 4. Buttons
 * 5. Misc
 * 6. Breakpoints
 *
 */

// 1. Colors --------------------------------------------------------------------------------------

@at-color-default: @at-white;
@at-color-default-hover: @at-white-hover;

@at-color-unreachable: @at-red-bright;
@at-color-unreachable-hover: @at-red-bright-hover;

@at-color-error: @at-red;
@at-color-error-hover: @at-red-hover;

@at-color-warning: @at-orange;
@at-color-warning-hover: @at-orange-hover;

@at-color-info: @at-blue;
@at-color-info-hover: @at-blue-hover;

@at-color-success: @at-green;
@at-color-success-hover: @at-green-hover;

@at-color-disabled: @at-gray-b7;

@at-color-body-background-dark: @at-gray-70;
@at-color-body-background-light: @at-gray-eb;
@at-color-body-text-dark: @at-white;
@at-color-body-background: @at-gray-fc;
@at-color-body-text: @at-gray-70;

@at-color-button-border-default: @at-gray-b7;
@at-color-button-text-default: @at-gray-70;

@at-color-tab-default-active: @at-gray-848992;
@at-color-tab-border-default-active: @at-gray-848992;
@at-color-tab-text-default-active: @at-white;

@at-color-tab-default-disabled: @at-white;
@at-color-tab-border-default-disabled: @at-gray-b7;
@at-color-tab-text-default-disabled: @at-gray-70;

@at-color-form-label: @at-gray-70;

@at-color-input-background: @at-gray-fc;
@at-color-input-border: @at-gray-b7;
@at-color-input-button: @at-white;
@at-color-input-button-hover: @at-gray-f2;
@at-color-input-disabled: @at-gray-eb;
@at-color-input-readonly: @at-color-input-background;

@at-color-input-error: @at-color-error;
@at-color-input-focus: @at-color-info;
@at-color-input-hint: @at-gray-848992;
@at-color-input-icon: @at-gray-b7;
@at-color-input-placeholder: @at-gray-848992;
@at-color-input-text: @at-gray-161b1f;
@at-color-input-slider-thumb: @at-blue;
@at-color-input-slider-track: @at-gray-b7;

@at-color-icon-dismiss: @at-gray-d7;
@at-color-icon-popover: @at-gray-848992;
@at-color-icon-hover: @at-gray-848992;

@at-color-panel-heading: @at-gray-70;
@at-color-panel-border: @at-gray-b7;

@at-color-search-key-active: @at-blue;

@at-color-table-header-background: @at-gray-eb;
@at-color-line-separator: @at-gray-e1;

@at-color-top-nav-background: @at-white;
@at-color-top-nav-border-bottom: @at-gray-b7;
@at-color-top-nav-item-text: @at-gray-70;
@at-color-top-nav-item-icon: @at-gray-848992;
@at-color-top-nav-item-icon-socket-outline: @at-white;
@at-color-top-nav-item-background-hover: @at-gray-fa;
@at-color-side-nav-background: @at-gray-848992;
@at-color-side-nav-content: @at-white;
@at-color-side-nav-item-background-hover: @at-gray-b7;
@at-color-side-nav-item-border-hover: @at-white;
@at-color-side-nav-item-icon: @at-white;
@at-color-side-nav-item-spacer: @at-gray-d7;
@at-color-side-nav-space-collapsed-border: @at-gray-b7;
@at-color-footer-background: @at-gray-fc;
@at-color-footer: @at-gray-70;

@at-color-list-empty-border: @at-gray-d7;
@at-color-list-empty-background: @at-gray-f6;
@at-color-list-empty: @at-gray-848992;
@at-color-list-border: @at-gray-b7;
@at-color-list-row-item-tag-background: @at-gray-eb;
@at-color-list-row-item-tag: @at-gray-70;
@at-color-list-row-item-label: @at-gray-848992;
@at-color-list-row-action-background: @at-white;
@at-color-list-row-action-icon: @at-gray-848992;
@at-color-list-row-action-hover: @at-blue;
@at-color-list-row-action-hover-danger: @at-red;
@at-color-list-row-action-icon-hover: @at-white;
@at-color-list-row-item-tag-primary-background: @at-blue;
@at-color-list-row-item-tag-primary: @at-white;

// 2. Typography ----------------------------------------------------------------------------------

@at-font-size-body: @at-font-size-3x;
@at-font-size-button: @at-font-size;
@at-font-size-breadcrumb: @at-font-size-3x;
@at-font-size-form-label: @at-font-size-2x;
@at-font-size-help-text: @at-font-size;
@at-font-size-icon: @at-font-size-4x;
@at-font-size-input: @at-font-size-3x;
@at-font-size-panel-heading: @at-font-size-3x;
@at-font-size-panel-inset-heading: @at-font-size-2x;
@at-font-size-modal-heading: @at-font-size-3x;
@at-font-size-modal-dismiss: @at-font-size-3x;
@at-font-size-navigation: @at-font-size-3x;
@at-font-size-table-heading: @at-font-size-3x;
@at-font-size-menu-icon: @at-font-size-5x;
@at-font-size-side-nav-icon: 19px;
@at-font-size-side-nav-space: 11px;
@at-font-size-list-row-item-tag: 10px;
@at-font-size-list-row-action: 19px;
@at-font-size-list-row-action-icon: 19px;
@at-font-size-jumbotron-heading: 24px;
@at-font-size-jumbotron-text: @at-font-size-4x;

@at-font-weight-body: @at-font-weight;
@at-font-weight-heading: @at-font-weight-2x;

// 3. Layout --------------------------------------------------------------------------------------

@at-padding-button-horizontal: @at-space-2x;
@at-padding-button-vertical: @at-space;
@at-padding-inset: @at-space-3x;
@at-padding-panel: @at-space-4x;
@at-padding-popover: @at-space-2x;
@at-padding-well: @at-space-2x;
@at-padding-input: @at-space-2x;
@at-padding-top-nav-item-sides: @at-space-4x;
@at-padding-side-nav-item-icon: @at-space-3x;
@at-padding-side-nav-item-icon: 10px 15px;
@at-padding-side-nav-item-spacer: 10px 10px 25px 15px;
@at-padding-bottom-side-nav-toggle-mobile: 15px;
@at-padding-top-side-nav-toggle: 5px;
@at-padding-left-side-nav-toggle-icon: 15px;
@at-padding-left-side-nav-item-icon: 10px;
@at-padding-left-side-nav-item-icon-expanded: 15px;
@at-padding-between-side-nav-icon-text: @at-space-3x;
@at-padding-footer-right: @at-space-4x;
@at-padding-footer-bottom: @at-space-4x;
@at-padding-list-empty: @at-space-2x;
@at-padding-list-row-item-tag: 0 @at-space-2x;
@at-padding-list-row-action: 7px;
@at-padding-list-row: 10px 20px 10px 10px;
@at-padding-bottom-instances-wrap: 30px;

@at-margin-input-message: @at-space;
@at-margin-item-column: @at-space-3x;
@at-margin-panel: @at-space-4x;
@at-margin-panel-inset: @at-space-3x;
@at-margin-popover: @at-space-2x;
@at-margin-tag: @at-space-2x;
@at-margin-form-label: @at-space;
@at-margin-form-label-hint: @at-space-2x;
@at-margin-top-nav-item-between-icon-and-name: @at-space-2x;
@at-margin-top-nav-item-icon-socket-top-makeup: -3px;
@at-margin-side-nav-space-collapsed: 5px 0;
@at-margin-after-footer-link: @at-space;
@at-margin-footer-top: @at-space-4x;

@at-margin-top-search-key: @at-space-2x;

@at-margin-top-list: @at-space-4x;
@at-margin-bottom-list-toolbar: @at-space-4x;
@at-margin-left-toolbar-action: @at-space-4x;
@at-margin-left-toolbar-carat: @at-space;
@at-margin-bottom-list-header: @at-space;
@at-margin-left-list-row-item-tag: @at-space-2x;
@at-margin-top-list-row-item-tag: 2.25px;
@at-margin-left-list-row-action: @at-space-4x;
@at-margin-right-list-row-item-tag-icon: 8px;
@at-margin-left-list-row-item-tag-container: -10px;
@at-margin-list-row-action-mobile: 10px;
@at-margin-right-list-row-item-status: @at-space-2x;
@at-margin-right-list-row-item-inline: @at-space-4x;
@at-margin-right-list-row-item-inline-label: @at-space-2x;

@at-height-divider: @at-margin-panel;
@at-height-input: 30px;
@at-height-textarea: 144px;
@at-height-button: 30px;
@at-height-tab: 30px;
@at-height-top-nav: 60px;
@at-height-top-nav-item-icon: 21px;
@at-height-top-nav-item-icon-socket: 18px;
@at-height-side-nav-item-icon: 19px;
@at-height-side-nav-spacer: 20px;
@at-height-top-side-nav-makeup: 55px;
@at-height-list-empty: 200px;
@at-height-toolbar-action: 30px;
@at-height-list-row-item: 27px;
@at-height-list-row-item-tag: 15px;
@at-height-list-row-action: 30px;
@at-height-side-nav-toggle-mobile: 40px;

@at-width-input-button-sm: 72px;
@at-width-input-button-md: 84px;
@at-width-collapsed-side-nav: 50px;
@at-width-expanded-side-nav: 180px;
@at-width-list-row-item-label: 120px;
@at-width-list-row-action: 30px;
@at-width-side-nav-toggle-mobile: 50px;

@at-line-height-list-row-item-header: @at-space-3x;
@at-line-height-list-row-item-labels: 17px;

// 4. Transitions ---------------------------------------------------------------------------------

@at-transition-icon-button: 0.2s;

// 5. Misc ----------------------------------------------------------------------------------------

@at-border-radius: 5px;
@at-border-default-style: solid;
@at-border-default-width: 1px;
@at-border-default-color: @at-gray-b7;
@at-border-style-list-active-indicator: 5px solid @at-color-info;
@at-popover-maxwidth: 320px;
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@at-line-height: 24px;
@at-highlight-left-border-size: 5px;
@at-highlight-left-border-margin-makeup: -5px;
@at-z-index-nav: 1040;
@at-z-index-side-nav: 1030;
@at-z-index-footer: 1020;
@at-line-height-list-row-item-tag: 22px;

// 6. Breakpoints ---------------------------------------------------------------------------------

@at-breakpoint-mobile-layout: @at-breakpoint-sm;
@at-breakpoint-compact-list: @at-breakpoint-sm;
@at-breakpoint-instances-wrap: 1036px;