UNPKG

@enact/moonstone

Version:

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

enactjs.com

enactjs/moonstone

91 lines (70 loc) • 3.4 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// colors-highcontast.less (light skin - high contrast) // @import (multiple) './colors-light.less'; @high-contrast-dark-gray: #6f6f6f; @high-contrast-gray: #7a7a7a; @high-contrast-light-gray: #ccc; @high-contrast-black: #000; @high-contrast-white: #fff; @high-contrast-text-color: @high-contrast-white; @moon-accent: @high-contrast-black; // Button // --------------------------------------- @moon-button-bg-color: @high-contrast-dark-gray; @moon-button-disabled-spotlight-bg-color: @high-contrast-gray; // Checkbox // --------------------------------------- @moon-checkbox-check-color: @high-contrast-text-color; @moon-checkbox-bg-color: @high-contrast-gray; @moon-checkbox-spotlight-bg-color: @moon-checkbox-bg-color; @moon-checkbox-spotlight-color: @moon-checkbox-check-color; // DaySelector // --------------------------------------- @moon-day-selector-border-color: @high-contrast-light-gray; @moon-day-selector-selected-bg-color: @high-contrast-dark-gray; // EditableIntegerPicker // --------------------------------------- @moon-editable-integer-picker-shadow: inset 0 0 0 6px; // FormCheckbox // --------------------------------------- @moon-formcheckbox-text-color: @high-contrast-text-color; // Header // --------------------------------------- @moon-header-border-color: #404040; @moon-header-bottom-border-color: @moon-header-border-color; // Input // --------------------------------------- @moon-input-border-active-border-color: @moon-accent; @moon-input-border-active-shadow: 0px 0px 0px 6px @moon-input-border-active-border-color; // Picker // --------------------------------------- @moon-picker-joined-fingernail-border-color: fade(@moon-white, 40%); // Progress Bar // --------------------------------------- @moon-progress-bar-fill-bg-color: @high-contrast-black; @moon-progress-bar-highlighted-fill-bg-color: @high-contrast-black; // Scroller // --------------------------------------- @moon-scroller-scrollthumb-bg-color: @high-contrast-black; // Slider // --------------------------------------- @moon-slider-knob-active-bg-color: @high-contrast-white; // Switch // --------------------------------------- @moon-checkbox-toggle-switch-selected-color: @high-contrast-white; @moon-checkbox-toggle-switch-selected-bg-color: #4d4d4d; @moon-checkbox-toggle-switch-spotlight-selected-bg-color: @moon-checkbox-toggle-switch-selected-bg-color; @moon-checkbox-toggle-switch-spotlight-selected-color: @moon-checkbox-toggle-switch-selected-color; // Toggle Colors // --------------------------------------- @moon-toggle-button-switch-on-bg-color: transparent; @moon-toggle-button-switch-dot-on-color: @high-contrast-text-color; @moon-toggle-button-switch-dot-disabled-border-color: @moon-toggle-button-switch-disabled-border-color; @moon-toggle-button-switch-on-spotlight-bg-color: transparent; @moon-toggle-button-switch-on-spotlight-border-color: @high-contrast-white; @moon-toggle-button-switch-dot-on-spotlight-color: @moon-toggle-button-switch-on-spotlight-border-color; @moon-toggle-button-switch-off-spotlight-bg-color: transparent; @moon-toggle-button-switch-off-spotlight-border-color: @moon-toggle-button-switch-on-spotlight-border-color; // VideoPlayer // --------------------------------------- @moon-video-player-high-contrast-scrim-gradient-color: linear-gradient(fade(@high-contrast-light-gray, 0%) 0%, fade(@high-contrast-light-gray, 60%) 100%);