UNPKG

@enact/sandstone

Version:

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

enactjs.com

enactjs/sandstone

56 lines (41 loc) • 1.98 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
// colors-game.less (game skin) // (violet) // --------------------------------------- // Universal Color Definitions // --------------------------------------- // colors @sand-game-skin-color-01: #a273c8; @sand-game-skin-color-02: #8b31d7; @sand-game-skin-heading-border-color: #8151ff; @sand-game-skin-item-focus-bg-gradient-1: fade(#603091, 0%); @sand-game-skin-item-focus-bg-gradient-2: #6d2fa1; // UI Conceptual Colors // --------------------------------------- // common colors @sand-component-bg-color: var(--sand-component-bg-color, #2d224c); @sand-focus-bg-color: var(--sand-focus-bg-color, #6d2fa1); @sand-component-focus-text-color-rgb: var(--sand-component-focus-text-color-rgb, 230, 230, 230); // #e6e6e6 // --------------------------------------- // Component Colors // --------------------------------------- // Alert // --------------------------------------- @sand-alert-overlay-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 255, 255, 255); // #ffffff @sand-alert-overlay-bg-color-rgb: var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0); // #000000 @sand-alert-overlay-bg-color-opacity: 75%; @sand-alert-overlay-shadow: 0 36px 24px fade(#000, 30%), inset 0 0 0 3px fade(@sand-game-skin-color-01, 75%); // Button // -------------------------------------- @sand-button-border-color: fade(@sand-game-skin-color-01, 50%); @sand-button-focus-icononly-bg-color: fade(@sand-game-skin-color-02, 50%); // Heading // --------------------------------------- @sand-heading-border-color: @sand-game-skin-heading-border-color; // Item // --------------------------------------- @sand-item-focus-background: linear-gradient(270deg, @sand-game-skin-item-focus-bg-gradient-1, @sand-game-skin-item-focus-bg-gradient-2); @sand-item-focus-label-color: #abaeb3; // RadioItem // --------------------------------------- @sand-radioitem-selected-indicator-bg-color: @sand-game-skin-color-02; @sand-radioitem-selected-indicator-border-color: @sand-game-skin-color-02;