matcha-theme 1.0.25 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/abstracts/_colors.scss +544 -162
- package/abstracts/_functions.scss +26 -0
- package/base/_helpers.scss +0 -2
- package/components/matcha-buttons.scss +44 -73
- package/components/matcha-table.scss +1 -1
- package/css/matcha-style.css +76772 -0
- package/package.json +1 -1
- package/tokens/_color-tokens.scss +20 -195
|
@@ -39,6 +39,32 @@
|
|
|
39
39
|
@return $result;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
@function getBaseColorsPalettes() {
|
|
43
|
+
// base colors
|
|
44
|
+
$palettes: (
|
|
45
|
+
red: $red,
|
|
46
|
+
pink: $pink,
|
|
47
|
+
purple: $purple,
|
|
48
|
+
deep-purple: $deep-purple,
|
|
49
|
+
indigo: $indigo,
|
|
50
|
+
blue: $blue,
|
|
51
|
+
light-blue: $light-blue,
|
|
52
|
+
cyan: $cyan,
|
|
53
|
+
teal: $teal,
|
|
54
|
+
green: $green,
|
|
55
|
+
light-green: $light-green,
|
|
56
|
+
lime: $lime,
|
|
57
|
+
yellow: $yellow,
|
|
58
|
+
amber: $amber,
|
|
59
|
+
orange: $orange,
|
|
60
|
+
deep-orange: $deep-orange,
|
|
61
|
+
brown: $brown,
|
|
62
|
+
grey: $grey,
|
|
63
|
+
blue-grey: $blue-grey
|
|
64
|
+
);
|
|
65
|
+
@return $palettes;
|
|
66
|
+
}
|
|
67
|
+
|
|
42
68
|
@function getAllPalettes($theme) {
|
|
43
69
|
$primary: map-get($theme, primary);
|
|
44
70
|
$accent: map-get($theme, accent);
|
package/base/_helpers.scss
CHANGED
|
@@ -1957,7 +1957,6 @@ $align-class-names: top, right, bottom, left;
|
|
|
1957
1957
|
// -----------------------------------------------------------------------------------------------------
|
|
1958
1958
|
// @ Letter spacing helpers
|
|
1959
1959
|
// -----------------------------------------------------------------------------------------------------
|
|
1960
|
-
|
|
1961
1960
|
.letter-spacing-condensed {
|
|
1962
1961
|
letter-spacing: -.08em !important;
|
|
1963
1962
|
}
|
|
@@ -1970,7 +1969,6 @@ $align-class-names: top, right, bottom, left;
|
|
|
1970
1969
|
letter-spacing: .08em !important;
|
|
1971
1970
|
}
|
|
1972
1971
|
|
|
1973
|
-
|
|
1974
1972
|
// -----------------------------------------------------------------------------------------------------
|
|
1975
1973
|
// @ Cursor helpers
|
|
1976
1974
|
// -----------------------------------------------------------------------------------------------------
|
|
@@ -5,9 +5,6 @@
|
|
|
5
5
|
$background: map-get($theme, background);
|
|
6
6
|
$foreground: map-get($theme, foreground);
|
|
7
7
|
|
|
8
|
-
$colorNames: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow,
|
|
9
|
-
amber, orange, deep-orange;
|
|
10
|
-
|
|
11
8
|
.matcha-button {
|
|
12
9
|
border: 0px solid currentColor;
|
|
13
10
|
transition: all 50ms linear;
|
|
@@ -15,6 +12,23 @@
|
|
|
15
12
|
position: relative;
|
|
16
13
|
font-size: 16px;
|
|
17
14
|
font-weight: 700;
|
|
15
|
+
height: 56px;
|
|
16
|
+
appearance: auto;
|
|
17
|
+
text-rendering: auto;
|
|
18
|
+
letter-spacing: normal;
|
|
19
|
+
word-spacing: normal;
|
|
20
|
+
line-height: normal;
|
|
21
|
+
text-transform: none;
|
|
22
|
+
text-indent: 0px;
|
|
23
|
+
text-shadow: none;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
text-align: center;
|
|
26
|
+
align-items: flex-start;
|
|
27
|
+
cursor: default;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
*{
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
18
32
|
&-xs {
|
|
19
33
|
padding: 0 px-to-rem(32px);
|
|
20
34
|
border-radius: px-to-rem(8px);
|
|
@@ -52,8 +66,8 @@
|
|
|
52
66
|
|
|
53
67
|
&-main {
|
|
54
68
|
background: map-get($background, background);
|
|
55
|
-
line-height: 32px;
|
|
56
|
-
padding: 0 16px;
|
|
69
|
+
line-height: px-to-rem(32px);
|
|
70
|
+
padding: 0 px-to-rem(16px);
|
|
57
71
|
}
|
|
58
72
|
|
|
59
73
|
&-xs,
|
|
@@ -67,18 +81,13 @@
|
|
|
67
81
|
box-shadow: 0px 0px 0px 2px inset;
|
|
68
82
|
|
|
69
83
|
&.color-label {
|
|
70
|
-
box-shadow: 0px 0px 0px 2px inset map-
|
|
71
|
-
color: map-
|
|
84
|
+
box-shadow: 0px 0px 0px 2px inset map-get($foreground, label);
|
|
85
|
+
color: map-get($foreground, label);
|
|
72
86
|
}
|
|
73
87
|
|
|
74
88
|
&.color-placeholder {
|
|
75
|
-
box-shadow: 0px 0px 0px 2px inset map-
|
|
76
|
-
color: map-
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
&.color-primary {
|
|
80
|
-
box-shadow: 0px 0px 0px 2px inset map-color($primary, default);
|
|
81
|
-
color: map-color($primary, default);
|
|
89
|
+
box-shadow: 0px 0px 0px 2px inset map-get($foreground, placeholder);
|
|
90
|
+
color: map-get($foreground, placeholder);
|
|
82
91
|
}
|
|
83
92
|
}
|
|
84
93
|
}
|
|
@@ -90,12 +99,23 @@
|
|
|
90
99
|
// filter: brightness(0.9);
|
|
91
100
|
}
|
|
92
101
|
|
|
102
|
+
&:disabled {
|
|
103
|
+
background-color: map-get($background, disabled);
|
|
104
|
+
color: map-get($foreground, disabled);
|
|
105
|
+
border-color: map-get($foreground, disabled);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&-basic {
|
|
109
|
+
border: 0px solid currentColor;
|
|
110
|
+
box-shadow: 0px 0px 0px 0px inset;
|
|
111
|
+
background: transparent !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
93
114
|
&-outline {
|
|
94
115
|
border: 0px solid currentColor;
|
|
95
116
|
box-shadow: 0px 0px 0px 2px inset;
|
|
96
117
|
background: transparent !important;
|
|
97
118
|
}
|
|
98
|
-
|
|
99
119
|
|
|
100
120
|
&-pill {
|
|
101
121
|
border-radius: $border-radius-wider;
|
|
@@ -103,7 +123,7 @@
|
|
|
103
123
|
|
|
104
124
|
&-link {
|
|
105
125
|
background-color: transparent;
|
|
106
|
-
color: map-
|
|
126
|
+
color: map-get($foreground, label);
|
|
107
127
|
text-transform: initial;
|
|
108
128
|
letter-spacing: 0;
|
|
109
129
|
text-decoration: underline;
|
|
@@ -118,15 +138,19 @@
|
|
|
118
138
|
justify-content: center;
|
|
119
139
|
}
|
|
120
140
|
|
|
141
|
+
&.color-unset{
|
|
142
|
+
.ripple {
|
|
143
|
+
background: rgba(0,0,0,.15);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
121
146
|
.ripple {
|
|
122
147
|
position: absolute;
|
|
123
|
-
background: rgba(0,0,0,.15);
|
|
124
148
|
border-radius: 999px;
|
|
125
149
|
transform: scale(0);
|
|
126
150
|
pointer-events: none;
|
|
127
151
|
}
|
|
128
152
|
.ripple.show {
|
|
129
|
-
animation: ripple
|
|
153
|
+
animation: ripple 400ms ease-out;
|
|
130
154
|
}
|
|
131
155
|
|
|
132
156
|
@keyframes ripple {
|
|
@@ -134,8 +158,8 @@
|
|
|
134
158
|
opacity: 0;
|
|
135
159
|
transform: scale(0);
|
|
136
160
|
}
|
|
137
|
-
|
|
138
|
-
opacity:
|
|
161
|
+
25% {
|
|
162
|
+
opacity: 1;
|
|
139
163
|
}
|
|
140
164
|
100% {
|
|
141
165
|
opacity: 0;
|
|
@@ -143,57 +167,4 @@
|
|
|
143
167
|
}
|
|
144
168
|
}
|
|
145
169
|
}
|
|
146
|
-
|
|
147
|
-
.matcha-button.matcha-button-outline{
|
|
148
|
-
.ripple {
|
|
149
|
-
opacity: 0.2;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
.matcha-button.primary:not(.matcha-button-outline) {
|
|
153
|
-
.ripple {
|
|
154
|
-
background: map-color($primary, default-contrast)!important;
|
|
155
|
-
opacity: 0.2;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
.matcha-button.accent:not(.matcha-button-outline) {
|
|
159
|
-
.ripple {
|
|
160
|
-
background: map-color($accent, default-contrast)!important;
|
|
161
|
-
opacity: 0.2;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
.matcha-button.warn:not(.matcha-button-outline) {
|
|
165
|
-
.ripple {
|
|
166
|
-
background: map-color($warn, default-contrast)!important;
|
|
167
|
-
opacity: 0.2;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
.matcha-button.primary.matcha-button-outline {
|
|
171
|
-
.ripple {
|
|
172
|
-
background: map-color($primary, default)!important;
|
|
173
|
-
opacity: 0.2;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
.matcha-button.accent.matcha-button-outline {
|
|
177
|
-
.ripple {
|
|
178
|
-
background: map-color($accent, default)!important;
|
|
179
|
-
opacity: 0.2;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
.matcha-button.warn.matcha-button-outline {
|
|
183
|
-
.ripple {
|
|
184
|
-
background: map-color($warn, default)!important;
|
|
185
|
-
opacity: 0.2;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
@each $color in $colorNames {
|
|
190
|
-
.matcha-button.#{$color} {
|
|
191
|
-
.ripple {
|
|
192
|
-
background: map-color($background, $color)!important;
|
|
193
|
-
opacity: 0.5;
|
|
194
|
-
filter: brightness(0.7);
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
|
|
199
170
|
}
|