matcha-theme 1.0.24 → 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 -149
- package/abstracts/_functions.scss +27 -1
- package/abstracts/_typography.scss +3 -0
- package/base/_helpers.scss +0 -2
- package/components/matcha-buttons.scss +76 -94
- 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);
|
|
@@ -172,7 +198,7 @@
|
|
|
172
198
|
// Note: The spec doesn't mention letter spacing. The values here come from
|
|
173
199
|
// eyeballing it until it looked exactly like the spec examples.
|
|
174
200
|
@function matcha-typography-config(
|
|
175
|
-
$font-family: '
|
|
201
|
+
$font-family: 'CircularStd, "Helvetica Neue", "Arial", sans-serif, "angular";',
|
|
176
202
|
$display-4: matcha-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
|
|
177
203
|
$display-3: matcha-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
|
|
178
204
|
$display-2: matcha-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
|
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,53 +5,69 @@
|
|
|
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;
|
|
14
11
|
overflow: hidden;
|
|
15
12
|
position: relative;
|
|
13
|
+
font-size: 16px;
|
|
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
|
+
}
|
|
16
32
|
&-xs {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
33
|
+
padding: 0 px-to-rem(32px);
|
|
34
|
+
border-radius: px-to-rem(8px);
|
|
35
|
+
line-height: px-to-rem(32px);
|
|
36
|
+
max-height: px-to-rem(32px);
|
|
21
37
|
}
|
|
22
38
|
|
|
23
39
|
&-sm {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
40
|
+
padding: 0 px-to-rem(32px);
|
|
41
|
+
border-radius: px-to-rem(8px);
|
|
42
|
+
line-height: px-to-rem(40px);
|
|
43
|
+
max-height: px-to-rem(40px);
|
|
28
44
|
}
|
|
29
45
|
|
|
30
46
|
&-md {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
47
|
+
padding: 0 px-to-rem(32px);
|
|
48
|
+
border-radius: px-to-rem(8px);
|
|
49
|
+
line-height: px-to-rem(48px);
|
|
50
|
+
max-height: px-to-rem(48px);
|
|
35
51
|
}
|
|
36
52
|
|
|
37
53
|
&-lg {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
54
|
+
padding: 0 px-to-rem(32px);
|
|
55
|
+
border-radius: px-to-rem(8px);
|
|
56
|
+
line-height: px-to-rem(56px);
|
|
57
|
+
max-height: px-to-rem(56px);
|
|
42
58
|
}
|
|
43
59
|
|
|
44
60
|
&-xl {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
61
|
+
padding: 0 px-to-rem(32px);
|
|
62
|
+
border-radius: px-to-rem(8px);
|
|
63
|
+
line-height: px-to-rem(56px);
|
|
64
|
+
max-height: px-to-rem(56px);
|
|
49
65
|
}
|
|
50
66
|
|
|
51
67
|
&-main {
|
|
52
68
|
background: map-get($background, background);
|
|
53
|
-
line-height: 32px;
|
|
54
|
-
padding: 0 16px;
|
|
69
|
+
line-height: px-to-rem(32px);
|
|
70
|
+
padding: 0 px-to-rem(16px);
|
|
55
71
|
}
|
|
56
72
|
|
|
57
73
|
&-xs,
|
|
@@ -59,24 +75,19 @@
|
|
|
59
75
|
&-md,
|
|
60
76
|
&-lg,
|
|
61
77
|
&-xl {
|
|
62
|
-
min-width:
|
|
78
|
+
min-width: 24px;
|
|
63
79
|
|
|
64
80
|
&.stroked {
|
|
65
81
|
box-shadow: 0px 0px 0px 2px inset;
|
|
66
82
|
|
|
67
83
|
&.color-label {
|
|
68
|
-
box-shadow: 0px 0px 0px 2px inset map-
|
|
69
|
-
color: map-
|
|
84
|
+
box-shadow: 0px 0px 0px 2px inset map-get($foreground, label);
|
|
85
|
+
color: map-get($foreground, label);
|
|
70
86
|
}
|
|
71
87
|
|
|
72
88
|
&.color-placeholder {
|
|
73
|
-
box-shadow: 0px 0px 0px 2px inset map-
|
|
74
|
-
color: map-
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
&.color-primary {
|
|
78
|
-
box-shadow: 0px 0px 0px 2px inset map-color($primary, default);
|
|
79
|
-
color: map-color($primary, default);
|
|
89
|
+
box-shadow: 0px 0px 0px 2px inset map-get($foreground, placeholder);
|
|
90
|
+
color: map-get($foreground, placeholder);
|
|
80
91
|
}
|
|
81
92
|
}
|
|
82
93
|
}
|
|
@@ -88,12 +99,23 @@
|
|
|
88
99
|
// filter: brightness(0.9);
|
|
89
100
|
}
|
|
90
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
|
+
|
|
91
114
|
&-outline {
|
|
92
115
|
border: 0px solid currentColor;
|
|
93
116
|
box-shadow: 0px 0px 0px 2px inset;
|
|
94
117
|
background: transparent !important;
|
|
95
118
|
}
|
|
96
|
-
|
|
97
119
|
|
|
98
120
|
&-pill {
|
|
99
121
|
border-radius: $border-radius-wider;
|
|
@@ -101,21 +123,34 @@
|
|
|
101
123
|
|
|
102
124
|
&-link {
|
|
103
125
|
background-color: transparent;
|
|
104
|
-
color: map-
|
|
126
|
+
color: map-get($foreground, label);
|
|
105
127
|
text-transform: initial;
|
|
106
128
|
letter-spacing: 0;
|
|
107
129
|
text-decoration: underline;
|
|
108
130
|
padding: 0;
|
|
109
131
|
}
|
|
132
|
+
|
|
133
|
+
&-icon {
|
|
134
|
+
aspect-ratio: 1;
|
|
135
|
+
padding: 0 !important;
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: center;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&.color-unset{
|
|
142
|
+
.ripple {
|
|
143
|
+
background: rgba(0,0,0,.15);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
110
146
|
.ripple {
|
|
111
147
|
position: absolute;
|
|
112
|
-
background: rgba(0,0,0,.15);
|
|
113
148
|
border-radius: 999px;
|
|
114
149
|
transform: scale(0);
|
|
115
150
|
pointer-events: none;
|
|
116
151
|
}
|
|
117
152
|
.ripple.show {
|
|
118
|
-
animation: ripple
|
|
153
|
+
animation: ripple 400ms ease-out;
|
|
119
154
|
}
|
|
120
155
|
|
|
121
156
|
@keyframes ripple {
|
|
@@ -123,8 +158,8 @@
|
|
|
123
158
|
opacity: 0;
|
|
124
159
|
transform: scale(0);
|
|
125
160
|
}
|
|
126
|
-
|
|
127
|
-
opacity:
|
|
161
|
+
25% {
|
|
162
|
+
opacity: 1;
|
|
128
163
|
}
|
|
129
164
|
100% {
|
|
130
165
|
opacity: 0;
|
|
@@ -132,57 +167,4 @@
|
|
|
132
167
|
}
|
|
133
168
|
}
|
|
134
169
|
}
|
|
135
|
-
|
|
136
|
-
.matcha-button.matcha-button-outline{
|
|
137
|
-
.ripple {
|
|
138
|
-
opacity: 0.2;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
.matcha-button.primary:not(.matcha-button-outline) {
|
|
142
|
-
.ripple {
|
|
143
|
-
background: map-color($primary, default-contrast)!important;
|
|
144
|
-
opacity: 0.2;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
.matcha-button.accent:not(.matcha-button-outline) {
|
|
148
|
-
.ripple {
|
|
149
|
-
background: map-color($accent, default-contrast)!important;
|
|
150
|
-
opacity: 0.2;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
.matcha-button.warn:not(.matcha-button-outline) {
|
|
154
|
-
.ripple {
|
|
155
|
-
background: map-color($warn, default-contrast)!important;
|
|
156
|
-
opacity: 0.2;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
.matcha-button.primary.matcha-button-outline {
|
|
160
|
-
.ripple {
|
|
161
|
-
background: map-color($primary, default)!important;
|
|
162
|
-
opacity: 0.2;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
.matcha-button.accent.matcha-button-outline {
|
|
166
|
-
.ripple {
|
|
167
|
-
background: map-color($accent, default)!important;
|
|
168
|
-
opacity: 0.2;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
.matcha-button.warn.matcha-button-outline {
|
|
172
|
-
.ripple {
|
|
173
|
-
background: map-color($warn, default)!important;
|
|
174
|
-
opacity: 0.2;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
@each $color in $colorNames {
|
|
179
|
-
.matcha-button.#{$color} {
|
|
180
|
-
.ripple {
|
|
181
|
-
background: map-color($background, $color)!important;
|
|
182
|
-
opacity: 0.5;
|
|
183
|
-
filter: brightness(0.7);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
188
170
|
}
|