This repository was archived by the owner on Oct 9, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathapi.scss
More file actions
132 lines (128 loc) · 7.85 KB
/
api.scss
File metadata and controls
132 lines (128 loc) · 7.85 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// BTN API
$button-font-weight: $eps-font-weight-medium;
$button-line-height: 16px;
$button-padding-y: 0.5em;
$button-padding-x: 1.5em;
$button-border-radius: $eps-radius;
$button-hover-constant: 5%;
$button-active-constant: 3%;
// sizing
// -- sm
$button-sm-font-size: type(text,xs);
$button-sm-line-height: 14px;
// --lg
$button-lg-font-size: type(text,lg);
$button-lg-line-height: 18px;
//Semantic Colors
$button-primary-background-color: theme-colors(success);
$button-primary-hover-background-color: darken($button-primary-background-color, $button-hover-constant);
$button-primary-active-background-color: darken($button-primary-background-color, $button-active-constant);
$button-primary-color: theme-colors(light);
$button-secondary-background-color: tints(400);
$button-secondary-hover-background-color: darken($button-secondary-background-color, $button-hover-constant);
$button-secondary-active-background-color: darken($button-secondary-background-color, $button-active-constant);
$button-secondary-color: theme-colors(light);
$button-danger-background-color: theme-colors(danger);
$button-danger-hover-background-color: darken($button-danger-background-color, $button-hover-constant);
$button-danger-active-background-color: darken($button-danger-background-color, $button-active-constant);
$button-danger-color: theme-colors(light);
$button-cta-background-color: theme-colors(cta);
$button-cta-hover-background-color: darken($button-cta-background-color, $button-hover-constant);
$button-cta-active-background-color: darken($button-cta-background-color, $button-active-constant);
$button-cta-color: theme-colors(light);
$button-link-background-color: theme-elements-colors(link-color);
$button-link-hover-background-color: darken($button-link-background-color, $button-hover-constant);
$button-link-active-background-color: darken($button-link-background-color, $button-active-constant);
$button-link-color: theme-colors(light);
$button-disabled-background-color: theme-colors(disabled);
$button-disabled-hover-background-color: darken($button-disabled-background-color, $button-hover-constant);
$button-disabled-active-background-color: darken($button-disabled-background-color, $button-active-constant);
$button-disabled-color: theme-colors(light);
// -- dark
$button-dark-primary-background-color: dark-theme-colors(success);
$button-dark-primary-color: dark-theme-colors(light);
$button-dark-primary-hover-background-color: darken($button-dark-primary-background-color, $button-hover-constant);
$button-dark-primary-active-background-color: darken($button-dark-primary-background-color, $button-active-constant);
$button-dark-secondary-background-color: dark-tints(400);
$button-dark-secondary-hover-background-color: darken($button-dark-secondary-background-color, $button-hover-constant);
$button-dark-secondary-active-background-color: darken($button-dark-secondary-background-color, $button-active-constant);
$button-dark-secondary-color: dark-theme-colors(light);
$button-dark-danger-background-color: dark-theme-colors(danger);
$button-dark-danger-hover-background-color: darken($button-dark-danger-background-color, $button-hover-constant);
$button-dark-danger-active-background-color: darken($button-dark-danger-background-color, $button-active-constant);
$button-dark-danger-color: dark-theme-colors(light);
$button-dark-cta-background-color: dark-theme-colors(cta);
$button-dark-cta-hover-background-color: darken($button-dark-cta-background-color, $button-hover-constant);
$button-dark-cta-active-background-color: darken($button-dark-cta-background-color, $button-active-constant);
$button-dark-cta-color: dark-theme-colors(light);
$button-dark-link-background-color: theme-elements-colors(link-color);
$button-dark-link-hover-background-color: darken($button-dark-link-background-color, $button-hover-constant);
$button-dark-link-active-background-color: darken($button-dark-link-background-color, $button-active-constant);
$button-dark-link-color: theme-colors(light);
$button-dark-disabled-background-color: dark-theme-colors(disabled);
$button-dark-disabled-hover-background-color: darken($button-dark-disabled-background-color, $button-hover-constant);
$button-dark-disabled-active-background-color: darken($button-dark-disabled-background-color, $button-active-constant);
$button-dark-disabled-color: dark-theme-colors(light);
// using mixing to transfer custom properties
@mixin button-custom-properties() {
--button-line-height: #{$button-line-height};
--button-padding-y: #{$button-padding-y};
--button-padding-x: #{$button-padding-x};
// primary
--button-primary-background-color: #{$button-primary-background-color};
--button-primary-hover-background-color: #{$button-primary-hover-background-color};
--button-primary-active-background-color: #{$button-primary-active-background-color};
--button-primary-color: #{$button-primary-color};
// secondary
--button-secondary-background-color: #{$button-secondary-background-color};
--button-secondary-hover-background-color: #{$button-secondary-hover-background-color};
--button-secondary-active-background-color: #{$button-secondary-active-background-color};
--button-secondary-color: #{$button-secondary-color};
// danger
--button-danger-background-color: #{$button-danger-background-color};
--button-danger-hover-background-color: #{$button-danger-hover-background-color};
--button-danger-active-background-color: #{$button-danger-active-background-color};
--button-danger-color: #{$button-danger-color};
// cta
--button-cta-background-color: #{$button-cta-background-color};
--button-cta-hover-background-color: #{$button-cta-hover-background-color};
--button-cta-active-background-color: #{$button-cta-active-background-color};
--button-cta-color: #{$button-cta-color};
// link
--button-link-background-color: #{$button-link-background-color};
--button-link-hover-background-color: #{$button-link-hover-background-color};
--button-link-active-background-color: #{$button-link-active-background-color};
--button-link-color: #{$button-link-color};
// disabled
--button-disabled-background-color: #{$button-disabled-background-color};
--button-disabled-hover-background-color: #{$button-disabled-hover-background-color};
--button-disabled-active-background-color: #{$button-disabled-active-background-color};
--button-disabled-color: #{$button-disabled-color};
}
@mixin button-dark-custom-properties() {
// primary
--button-primary-background-color: #{$button-dark-primary-background-color};
--button-primary-color: #{$button-dark-primary-color};
--button-primary-hover-background-color: #{$button-dark-primary-hover-background-color};
--button-primary-active-background-color: #{$button-dark-primary-active-background-color};
// secondary
--button-secondary-background-color: #{$button-dark-secondary-background-color};
--button-secondary-color: #{$button-dark-secondary-color};
--button-secondary-hover-background-color: #{$button-dark-secondary-hover-background-color};
--button-secondary-active-background-color: #{$button-dark-secondary-active-background-color};
// cta
--button-cta-background-color: #{$button-dark-cta-background-color};
--button-cta-hover-background-color: #{$button-dark-cta-hover-background-color};
--button-cta-active-background-color: #{$button-dark-cta-active-background-color};
--button-cta-color: #{$button-dark-cta-color};
// link
--button-link-background-color: #{$button-dark-link-background-color};
--button-link-hover-background-color: #{$button-dark-link-hover-background-color};
--button-link-active-background-color: #{$button-dark-link-active-background-color};
--button-link-color: #{$button-dark-link-color};
// disabled
--button-disabled-background-color: #{$button-dark-disabled-background-color};
--button-disabled-hover-background-color: #{$button-dark-disabled-hover-background-color};
--button-disabled-active-background-color: #{$button-dark-disabled-active-background-color};
--button-disabled-color: #{$button-dark-disabled-color};
}