zu 0.3.3

Yew web components, implementing Material Design
Documentation 
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

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.


/* Dark Palette */

// Palette name
$zu-palette-mode: "dark" !default;

// primary
$zu-palette-primary-main: #90caf9 !default;
$zu-palette-primary-light: #e3f2fd !default;
$zu-palette-primary-dark: #42a5f5 !default;
$zu-palette-primary-contrastText: rgba(0, 0, 0, 0.87) !default;

// secondary
$zu-palette-secondary-main: #ce93d8 !default;
$zu-palette-secondary-light: #f3e5f5 !default;
$zu-palette-secondary-dark: #ab47bc !default;
$zu-palette-secondary-contrastText: rgba(0, 0, 0, 0.87) !default;

// success
$zu-palette-success-main: #66bb6a !default;
$zu-palette-success-light: #81c784 !default;
$zu-palette-success-dark: #388e3c !default;
$zu-palette-success-contrastText: rgba(0, 0, 0, 0.87) !default;

// info
$zu-palette-info-main: #29b6f6 !default;
$zu-palette-info-light: #4fc3f7 !default;
$zu-palette-info-dark: #0288d1 !default;
$zu-palette-info-contrastText: rgba(0, 0, 0, 0.87) !default;

// warning
$zu-palette-warning-main: #ffa726 !default;
$zu-palette-warning-light: #ffb74d !default;
$zu-palette-warning-dark: #f57c00 !default;
$zu-palette-warning-contrastText: rgba(0, 0, 0, 0.87) !default;

// error
$zu-palette-error-main: #f44336 !default;
$zu-palette-error-light: #e57373 !default;
$zu-palette-error-dark: #d32f2f !default;
$zu-palette-error-contrastText: #fff !default;

$zu-palette-contrastThreshold: 3 !default;
$zu-palette-totalOffset: 0.2 !default;

// The colors used to style the text.
$zu-palette-text-primary: #fff !default;
$zu-palette-text-secondary: rgba(255, 255, 255, 0.7) !default;
// Disabled text have even lower visual prominence.
$zu-palette-text-disabled: rgba(255, 255, 255, 0.5) !default;
$zu-palette-text-icon: rgba(255, 255, 255, 0.5) !default;

// The color used to divide different elements.
$zu-palette-divider: rgba(255, 255, 255, 0.12) !default;

// The background colors used to style the surfaces.
// Consistency between these values is important.
$zu-palette-background-paper: #121212 !default;
$zu-palette-background-default: #121212 !default;

// The colors used to style the action elements.
$zu-palette-action-active: #fff !default;
$zu-palette-action-hover: rgba(255, 255, 255, 0.08) !default;
$zu-palette-action-hoverOpacity: 0.08 !default;
$zu-palette-action-selected: rgba(255, 255, 255, 0.16) !default;
$zu-palette-action-selectedOpacity: 0.16 !default;
$zu-palette-action-disabled: rgba(255, 255, 255, 0.3) !default;
$zu-palette-action-disabledBackground: rgba(255, 255, 255, 0.12) !default;
$zu-palette-action-disabledOpacity: 0.38 !default;
$zu-palette-action-focus: rgba(255, 255, 255, 0.12) !default;
$zu-palette-action-focusOpacity: 0.12 !default;
$zu-palette-action-activatedOpacity: 0.24 !default;

:root {
  // Export specific variables
  --zu-palette-text-icon: #{$zu-palette-text-icon};
}