@enact/moonstone/styles/colors-light.less

Large-screen/TV support library for Enact, containing a variety of UI components.

// colors-light.less (light skin)
//
// Base our light skin off of the dark (default) skin
@import (multiple) "./colors.less";

// ---------------------------------------
// Universal Color Definitions
// ---------------------------------------
@moon-darker-gray: #262626;
@moon-dark-gray:   #4d4d4d;
@moon-gray:        #bbb;   // Updated from #a6a6a6, potentially this needs to be broken into a different variable to be used with any floating components with border (as their border)
@moon-light-gray:  #ededed;
@moon-black:       #000;
@moon-accent:      #cf0652;
@moon-white:       #fff;
@moon-red:         #f00;

@moon-remote-button-red-color:     #e1777e; // #ff6d78; // #da3c3c; // #e71b1c;
@moon-remote-button-green-color:   #7fd563; // #6ff467; // #21c171; // #339966;
@moon-remote-button-yellow-color:  #d3b85f; // #ffc600; // #dac139; // #fddb24;
@moon-remote-button-blue-color:    #5185c1; // #0084ff; // #5677d0; // #4764b4;


// UI Conceptual Colors
// ---------------------------------------
@moon-bg-color:      @moon-light-gray;
@moon-text-color:    @moon-dark-gray;
@moon-border-color:  @moon-dark-gray;
@moon-overlay-text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);

// Disabled Opacity
// ---------------------------------------
@moon-disabled-opacity: 0.4;
@moon-disabled-translucent-opacity: 0.4;

// Spotlight and State
// ---------------------------------------
@moon-spotlight-text-color:           @moon-white;
@moon-spotlight-disabled-text-color:  fade(@moon-spotlight-text-color, 40%);
@moon-spotlight-text-color:           @moon-white;
@moon-spotlight-bg-color:             @moon-accent;
@moon-spotlight-border-color:         @moon-accent;
@moon-spotlight-color:                @moon-accent;
@moon-active-border-color:            @moon-gray;
@moon-active-spotlight-border-color:  @moon-white;


// ---------------------------------------
// Component Colors
// ---------------------------------------

// Body Text
// ---------------------------------------
@moon-body-text-color:                @moon-text-color;

// Button
// ---------------------------------------
@moon-button-text-color: @moon-white;
@moon-button-bg-color: #686868;
@moon-button-translucent-bg-color: fade(@moon-black, 56%);
@moon-button-lightTranslucent-bg-color: fade(@moon-white, 22%);
@moon-button-transparent-bg-color: transparent;
@moon-button-transparent-active-text-color: @moon-text-color;
@moon-button-transparent-disabled-bg-color: @moon-button-disabled-bg-color;
@moon-button-disabled-text-color: #cdcdcd;
@moon-button-disabled-bg-color: @moon-button-bg-color;
@moon-button-focus-text-color: @moon-spotlight-text-color;
@moon-button-focus-bg-color: @moon-spotlight-bg-color;
@moon-button-disabled-focus-text-color: @moon-button-focus-text-color;
@moon-button-disabled-focus-icon-color: @moon-button-focus-text-color;
@moon-button-disabled-focus-bg-color: @moon-spotlight-bg-color;
@moon-button-selected-text-color: @moon-button-text-color;
@moon-button-selected-bg-color: @moon-dark-gray;
@moon-button-selected-border-color: @moon-spotlight-border-color;
@moon-button-selected-focus-text-color: @moon-spotlight-text-color;
@moon-button-selected-focus-bg-color: @moon-spotlight-bg-color;
@moon-button-selected-focus-border-color: @moon-active-spotlight-border-color;

// ContextualPopup
// ---------------------------------------
@moon-contextual-popup-bg-color: @moon-bg-color;
@moon-contextual-popup-border-color: #bbb;
@moon-contextual-popup-box-shadow-color: fade(@moon-black, 30%);

// Checkbox
// ---------------------------------------
@moon-checkbox-text-color: @moon-white;
@moon-checkbox-bg-color: #686868;
@moon-checkbox-focus-text-color: @moon-spotlight-text-color;
@moon-checkbox-focus-bg-color: fade(@moon-white, 30%);

// DaySelector
// ---------------------------------------
@moon-day-selector-selected-bg-color: @moon-button-bg-color;
@moon-day-selector-checkbox-bg-color: @moon-formcheckbox-bg-color;
@moon-day-selector-checkbox-text-color: @moon-formcheckbox-text-color;

// Dropdown
// ---------------------------------------
@moon-dropdown-selected-text-color: @moon-spotlight-color;

// FormCheckbox
// ---------------------------------------
@moon-formcheckbox-bg-color: #a2a2a2;
@moon-formcheckbox-text-color: @moon-white;
@moon-formcheckbox-border-color: #888888;
@moon-formcheckbox-focus-bg-color: @moon-spotlight-color;
@moon-formcheckbox-focus-text-color: @moon-spotlight-text-color;

// FormCheckboxItem
// ---------------------------------------
@moon-formcheckboxitem-focus-text-color: @moon-black;
@moon-formcheckboxitem-focus-bg-color: transparent;

// GridListImageItem
// ---------------------------------------
@moon-gridlist-item-selection-color: #404040;

// Header
// ---------------------------------------
@moon-header-text-color:              #383838;
@moon-header-title-below-text-color:  @moon-text-color;
@moon-header-border-color:            @moon-border-color;
@moon-header-bottom-border-color:     #404040;
@moon-header-full-bleed-border-color: fade(@moon-white, 25%);
@moon-header-full-bleed-text-color:   #f5f5f5;
@moon-header-title-below-full-bleed-text-color: @moon-header-full-bleed-text-color;
@moon-header-controls-border-color:   @moon-border-color;

// Heading
// ---------------------------------------
@moon-heading-text-color: @moon-text-color;
@moon-heading-border-color: #686868;

// IconButton
// ---------------------------------------
@moon-icon-button-text-color:           @moon-button-text-color;
@moon-icon-button-bg-color:             @moon-button-bg-color;
@moon-icon-button-active-border-color:  @moon-spotlight-color;
@moon-icon-button-active-bg-color:      @moon-button-bg-color;
@moon-icon-button-active-text-color:    @moon-spotlight-text-color;
@moon-icon-button-spotlight-bg-color:   @moon-spotlight-color;

// Input
// ---------------------------------------
@moon-input-border-color:             #eaeaea;
@moon-input-textarea-color:           @moon-dark-gray;
@moon-input-placeholder-color:        @moon-white;
@moon-input-placeholder-focus-color:  @moon-input-decorator-bg-color;
@moon-input-placeholder-active-color: @moon-input-placeholder-focus-color;
@moon-input-focus-text-color:         @moon-black;
@moon-input-disabled-focus-text-color: fade(@moon-input-text-color, @moon-disabled-opacity-percentage);
@moon-input-disabled-text-color:      inherit;
@moon-input-decorator-bg-color:       #aaa;
@moon-input-decorator-border-color:   @moon-light-gray;
@moon-input-decorator-focus-bg-color: @moon-white;
@moon-input-decorator-active-bg-color: @moon-input-decorator-focus-bg-color;
@moon-input-decorator-disabled-focus-bg-color: fade(@moon-input-decorator-bg-color, @moon-disabled-opacity-percentage);
@moon-input-border-focus-border-color: @moon-spotlight-border-color;
@moon-input-border-active-border-color: transparent;
@moon-input-border-active-shadow: 0 0 0 3px @moon-input-border-focus-border-color;

// LabeledItem
// ---------------------------------------
@moon-labeled-item-label-color: inherit;

// Notification
// ---------------------------------------
@moon-notification-border-color: #bbb;
@moon-notification-box-shadow-color: fade(@moon-black, 30%);

// Panels
// ---------------------------------------
@moon-panels-scrim-always-viewing-bg-color: fade(@moon-bg-color, 75%);
@moon-panels-scrim-activity-bg-color: @moon-bg-color;
@moon-panels-spot-fg-color: @moon-accent;
@moon-panels-spot-bg-color: @moon-dark-gray;
@moon-panels-handle-bg-color: @moon-dark-gray;

// Picker
// ---------------------------------------
@moon-picker-text-color: @moon-text-color;
@moon-picker-joined-text-color: @moon-text-color;
@moon-picker-joined-bg-color: transparent;

// Popup
// ---------------------------------------
@moon-popup-bg-color: @moon-bg-color;
@moon-popup-bg-opacity: 95%;
@moon-popup-close-text-color: @moon-text-color;

// Progress Bar
// ---------------------------------------
@moon-progress-bar-bg-color: fade(#333, 20%);
@moon-progress-bar-loaded-bg-color: fade(#333, 30%);
@moon-progress-bar-fill-bg-color: @moon-spotlight-bg-color;
@moon-progress-bar-tooltip-text-color: @moon-progress-bar-fill-bg-color;
@moon-progress-bar-highlighted-fill-bg-color: @moon-dark-gray;

// RadioItem
// ---------------------------------------
@moon-radio-item-indicator-color: #333333;
@moon-radio-item-indicator-bg-color: fade(#888888, 50%);
@moon-radio-item-focus-indicator-color: @moon-spotlight-text-color;
@moon-radio-item-focus-indicator-bg-color: @moon-radio-item-indicator-bg-color;
@moon-radio-item-selected-indicator-color: @moon-radio-item-indicator-color;
@moon-radio-item-selected-indicator-bg-color: @moon-radio-item-indicator-bg-color;
@moon-radio-item-selected-focus-indicator-color: @moon-radio-item-focus-indicator-color;
@moon-radio-item-selected-focus-indicator-bg-color: @moon-radio-item-focus-indicator-bg-color;

// Scrollable
// ---------------------------------------
@moon-scrollable-overscroll-color: #454545;

// Slider
// ---------------------------------------
@moon-slider-bar-bg-color: @moon-progress-bar-bg-color;
@moon-slider-fill-bg-color: @moon-progress-bar-fill-bg-color;
@moon-slider-load-bg-color: @moon-progress-bar-loaded-bg-color;
@moon-slider-knob-bg-color: @moon-white;
@moon-slider-knob-border-color: transparent;
@moon-slider-focus-bar-bg-color: @moon-slider-bar-bg-color;
@moon-slider-focus-fill-bg-color: @moon-slider-fill-bg-color;
@moon-slider-focus-load-bg-color: @moon-slider-load-bg-color;
@moon-slider-focus-knob-bg-color: @moon-spotlight-bg-color;
@moon-slider-focus-knob-border-color: transparent;
@moon-slider-active-bar-bg-color: @moon-slider-bar-bg-color;
@moon-slider-active-fill-bg-color: @moon-slider-fill-bg-color;
@moon-slider-active-load-bg-color: @moon-slider-load-bg-color;
@moon-slider-active-knob-bg-color: @moon-white;
@moon-slider-active-knob-border-color: @moon-spotlight-color;
@moon-slider-disabled-bar-opacity: 0.4;
@moon-slider-disabled-bar-bg-color: fadeout(@moon-slider-bar-bg-color, percentage(@moon-slider-disabled-bar-opacity), relative);
@moon-slider-disabled-knob-bg-color: #666;
@moon-slider-disabled-knob-border-color: transparent;
@moon-slider-disabled-focus-bar-bg-color: fadeout(@moon-slider-focus-bar-bg-color, percentage(@moon-slider-disabled-bar-opacity), relative);
@moon-slider-disabled-focus-knob-bg-color: @moon-spotlight-bg-color;
@moon-slider-disabled-focus-knob-border-color: transparent;
@moon-slider-knob-shadow: 0 3px 6px fade(black, 50%);

// Spinner
// ---------------------------------------
@moon-spinner-color: @moon-white;
@moon-spinner-head-color: @moon-spinner-color;
@moon-spinner-empty-color: fade(@moon-spinner-color, 20%);
@moon-spinner-bg-color: @moon-button-bg-color;
@moon-spinner-text-color: @moon-white;
@moon-spinner-text-shadow-color: fade(@moon-black, 30%);
@moon-spinner-ball1-color: #69cdff;
@moon-spinner-ball2-color: #ff4a4a;
@moon-spinner-ball3-color: #ffb80d;

// Switch
// ---------------------------------------
@moon-checkbox-toggle-switch-color: #d3d3d3;
@moon-checkbox-toggle-switch-bg-color: #a6a6a6;
@moon-checkbox-toggle-switch-border-color: transparent;
@moon-checkbox-toggle-switch-selected-color: @moon-accent;
@moon-checkbox-toggle-switch-selected-border-color: @moon-dark-gray;
@moon-checkbox-toggle-switch-selected-bg-color: @moon-white;

// Toggle Colors
// ---------------------------------------
@moon-toggle-text-color: @moon-header-title-below-text-color;
@moon-toggle-button-switch-on-bg-color: @moon-accent;
@moon-toggle-button-switch-on-border-color: @moon-white;
@moon-toggle-button-switch-off-bg-color: @moon-dark-gray;
@moon-toggle-button-switch-off-border-color: @moon-white;
@moon-toggle-button-switch-disabled-color: @moon-darker-gray;
@moon-toggle-button-switch-disabled-border-color: #6c6c6c;

// Tooltip
// ---------------------------------------
@moon-tooltip-bg-color:               @moon-darker-gray;
@moon-tooltip-text-color:             #ccc;
@moon-tooltip-border-color:           @moon-dark-gray;
@moon-tooltip-shadow:                 0 7px 7px fade(@moon-black, 30%);

// VideoPlayer
// ---------------------------------------
@moon-video-slider-tooltip-thumbnail-border-color: @moon-black;
@moon-video-player-indicator-text-color: @moon-white;
@moon-video-player-bottom-bg-color: transparent;
@moon-video-player-redicon-bg-color: transparent;
@moon-video-player-redicon-text-color: #fe4a4b;
@moon-video-player-slider-bg-color: fade(@moon-darker-gray, 20%);
@moon-video-player-slider-fill-color: fade(@moon-accent, 80%);
@moon-video-player-slider-knob-color: @moon-white;
@moon-video-player-slider-load-color: fade(darken(@moon-accent, 30%), 30%);
@moon-video-player-subdued-text-color: #ccc;
@moon-video-player-title-color: @moon-white;
@moon-video-player-title-text-shadow: @moon-overlay-text-shadow;