matcha-theme 19.65.0 → 19.67.0

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.
Files changed (3) hide show
  1. package/components/matcha-cards.scss +60 -112
  2. package/package.json +1 -1
  3. package/tokens/_color-tokens.scss +6 -0
package/components/matcha-cards.scss CHANGED
@@ -1,62 +1,55 @@
1
1
  @mixin matcha-cards-theme($theme) {
2
- $is-dark: map-get($theme, is-dark);
3
- $palettes: getBaseColorsPalettes();
4
- // colors from base palette
5
- $red: map-get($palettes, red);
6
- $red-contrast: map-get($red, 'contrast');
7
- $pink: map-get($palettes, pink);
8
- $pink-contrast: map-get($pink, 'contrast');
9
- $purple: map-get($palettes, purple);
10
- $purple-contrast: map-get($purple, 'contrast');
11
- $deep-purple: map-get($palettes, deep-purple);
12
- $deep-purple-contrast: map-get($deep-purple, 'contrast');
13
- $indigo: map-get($palettes, indigo);
14
- $indigo-contrast: map-get($indigo, 'contrast');
15
- $blue: map-get($palettes, blue);
16
- $blue-contrast: map-get($blue, 'contrast');
17
- $light-blue: map-get($palettes, light-blue);
18
- $light-blue-contrast: map-get($light-blue, 'contrast');
19
- $cyan: map-get($palettes, cyan);
20
- $cyan-contrast: map-get($cyan, 'contrast');
21
- $teal: map-get($palettes, teal);
22
- $teal-contrast: map-get($teal, 'contrast');
23
- $green: map-get($palettes, green);
24
- $green-contrast: map-get($green, 'contrast');
25
- $light-green: map-get($palettes, light-green);
26
- $light-green-contrast: map-get($light-green, 'contrast');
27
- $lime: map-get($palettes, lime);
28
- $lime-contrast: map-get($lime, 'contrast');
29
- $yellow: map-get($palettes, yellow);
30
- $yellow-contrast: map-get($yellow, 'contrast');
31
- $amber: map-get($palettes, amber);
32
- $amber-contrast: map-get($amber, 'contrast');
33
- $orange: map-get($palettes, orange);
34
- $orange-contrast: map-get($orange, 'contrast');
35
- $deep-orange: map-get($palettes, deep-orange);
36
- $deep-orange-contrast: map-get($deep-orange, 'contrast');
37
- $brown: map-get($palettes, brown);
38
- $brown-contrast: map-get($brown, 'contrast');
39
- $grey: map-get($palettes, grey);
40
- $grey-contrast: map-get($grey, 'contrast');
41
- $blue-grey: map-get($palettes, blue-grey);
42
- $blue-grey-contrast: map-get($blue-grey, 'contrast');
43
-
44
- // colors from theme
45
- $primary: map-get($theme, primary);
46
- $primary-contrast: map-get($primary, 'contrast');
47
- $accent: map-get($theme, accent);
48
- $accent-contrast: map-get($accent, 'contrast');
49
- $warn: map-get($theme, warn);
50
- $warn-contrast: map-get($warn, 'contrast');
51
-
52
- $background: map-get($theme, background);
53
- $foreground: map-get($theme, foreground);
54
-
55
- $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
2
+ $color-functions: (
3
+ red: getRed,
4
+ pink: getPink,
5
+ purple: getPurple,
6
+ deep-purple: getDeepPurple,
7
+ indigo: getIndigo,
8
+ blue: getBlue,
9
+ light-blue: getLightBlue,
10
+ cyan: getCyan,
11
+ teal: getTeal,
12
+ green: getGreen,
13
+ light-green: getLightGreen,
14
+ lime: getLime,
15
+ yellow: getYellow,
16
+ amber: getAmber,
17
+ orange: getOrange,
18
+ deep-orange: getDeepOrange,
19
+ brown: getBrown,
20
+ grey: getGrey,
21
+ blue-grey: getBlueGrey,
22
+ primary: getPrimary,
23
+ accent: getAccent,
24
+ warn: getWarn,
25
+ disabled: getDisabled,
26
+ );
56
27
 
57
28
  matcha-card,
58
29
  .matcha-card,
59
30
  .matcha-card-flat {
31
+ @each $colorName, $colorFn in $color-functions {
32
+ &[color="#{$colorName}"][tint]:not([tint="false"]) {
33
+ background: call(#{$colorFn}Alpha, $theme);
34
+ color: call(#{$colorFn}, $theme);
35
+ }
36
+ &[color="#{$colorName}"][outline]:not([outline="false"]),
37
+ &[color="#{$colorName}"][link]:not([link="false"]),
38
+ &[color="#{$colorName}"][basic]:not([basic="false"]) {
39
+ color: call(#{$colorFn}, $theme);
40
+ }
41
+
42
+ &[color="#{$colorName}"] {
43
+ background: call(#{$colorFn}, $theme);
44
+ color: call(#{$colorFn}Contrast, $theme);
45
+ &[alpha]:not([alpha="false"]) {
46
+ background: call(#{$colorFn}Alpha, $theme);
47
+ color: getForeground($theme);
48
+ }
49
+ }
50
+ }
51
+
52
+
60
53
  &[basic]:not([basic="false"]) {
61
54
  box-shadow: 0px 0px 0px 0px inset;
62
55
  }
@@ -70,13 +63,13 @@
70
63
 
71
64
  &[basic="true"]:not([icon="false"]) {
72
65
  border: 0px solid currentColor;
73
- background: map-get($background, card);
66
+ background: getSurface($theme);
74
67
  &:not([color]){
75
68
  border-color: getForeground($theme);
76
69
  background: transparent !important;
77
70
  }
78
71
  &[color]:not([outline]){
79
- background: map-get($background, card)!important;
72
+ background: getSurface($theme)!important;
80
73
  }
81
74
  }
82
75
 
@@ -91,60 +84,16 @@
91
84
  }
92
85
 
93
86
  &:not([color]) {
94
- background: map-get($background, card);
87
+ background: getSurface($theme);
95
88
  color: getForeground($theme);
96
89
  }
97
90
 
98
- $color-functions: (
99
- red: getRed,
100
- pink: getPink,
101
- purple: getPurple,
102
- deep-purple: getDeepPurple,
103
- indigo: getIndigo,
104
- blue: getBlue,
105
- light-blue: getLightBlue,
106
- cyan: getCyan,
107
- teal: getTeal,
108
- green: getGreen,
109
- light-green: getLightGreen,
110
- lime: getLime,
111
- yellow: getYellow,
112
- amber: getAmber,
113
- orange: getOrange,
114
- deep-orange: getDeepOrange,
115
- brown: getBrown,
116
- grey: getGrey,
117
- blue-grey: getBlueGrey,
118
- primary: getPrimary,
119
- accent: getAccent,
120
- warn: getWarn,
121
- disabled: getDisabled,
122
- );
123
91
 
124
- @each $colorName, $colorFn in $color-functions {
125
- &[color="#{$colorName}"][alpha]:not([alpha="false"]) {
126
- background: call(#{$colorFn}Alpha, $theme);
127
- color: getForeground($theme);
128
- }
129
- &[color="#{$colorName}"][tint]:not([tint="false"]) {
130
- background: call(#{$colorFn}Alpha, $theme);
131
- color: call(#{$colorFn}, $theme);
132
- }
133
- &[color="#{$colorName}"][outline]:not([outline="false"]),
134
- &[color="#{$colorName}"][link]:not([link="false"]),
135
- &[color="#{$colorName}"][basic]:not([basic="false"]) {
136
- color: call(#{$colorFn}, $theme);
137
- }
138
- &[color="#{$colorName}"] {
139
- background: call(#{$colorFn}, $theme);
140
- color: call(#{$colorFn}Contrast, $theme);
141
- }
142
- }
143
92
 
144
93
  // bg
145
94
  &[color="bg"][alpha]:not([alpha="false"]){
146
95
  background: getBackgroundAlpha($theme);
147
- color: map-get($foreground, foreground)
96
+ color:getForeground($theme);
148
97
  }
149
98
  &[color="bg"][tint]:not([tint="false"]){
150
99
  background: getBackgroundAlpha($theme);
@@ -156,14 +105,14 @@
156
105
  color: getForeground($theme);
157
106
  }
158
107
  &[color="bg"]{
159
- background: map-get($background, background);
108
+ background: getBackground($theme);
160
109
  color: getForeground($theme);
161
110
  }
162
111
 
163
112
  // surface
164
113
  &[color="surface"][alpha]:not([alpha="false"]){
165
114
  background: getSurfaceAlpha($theme);
166
- color: map-get($foreground, foreground)
115
+ color:getForeground($theme);
167
116
  }
168
117
  &[color="surface"][tint]:not([tint="false"]){
169
118
  background: getSurfaceAlpha($theme);
@@ -175,18 +124,18 @@
175
124
  color: getForeground($theme);
176
125
  }
177
126
  &[color="surface"]{
178
- background: map-get($background, card);
127
+ background: getSurface($theme);
179
128
  color: getForeground($theme);
180
129
  }
181
130
 
182
131
  // fg
183
132
  &[color="fg"][alpha]:not([alpha="false"]){
184
133
  background: getForegroundAlpha($theme);
185
- color: map-get($foreground, foreground)
134
+ color:getForeground($theme);
186
135
  }
187
136
  &[color="fg"][tint]:not([tint="false"]){
188
137
  background: getForegroundAlpha($theme);
189
- color: map-get($foreground, foreground);
138
+ color:getForeground($theme);
190
139
  }
191
140
  &[color="fg"][outline]:not([outline="false"]),
192
141
  &[color="fg"][link]:not([link="false"]),
@@ -195,13 +144,13 @@
195
144
  }
196
145
  &[color="fg"]{
197
146
  background: getForeground($theme);
198
- color: map-get($foreground, foreground-inverse);
147
+ color:getForegroundInverse($theme);
199
148
  }
200
149
 
201
150
  //basic
202
151
  &[color="basic"][alpha]:not([alpha="false"]){
203
152
  background: getForegroundAlpha($theme);
204
- color: map-get($foreground, foreground)
153
+ color:getForeground($theme);
205
154
  }
206
155
  &[color="basic"][tint]:not([tint="false"]){
207
156
  background: getForegroundAlpha($theme);
@@ -213,11 +162,11 @@
213
162
  color: getForeground($theme);
214
163
  }
215
164
  &[color="basic"]{
216
- background: map-get($background, card);
165
+ background: getSurface($theme);
217
166
  color: getForeground($theme);
218
167
  }
219
168
  &[color="basic"]{
220
- background: map-get($background, card);
169
+ background: getSurface($theme);
221
170
  &:not([color]){
222
171
  color: getForeground($theme);
223
172
  }
@@ -233,7 +182,6 @@ matcha-card,
233
182
  .matcha-card-flat {
234
183
  padding: 16px;
235
184
  border-radius: 8px;
236
- display: flex;
237
185
 
238
186
  &-border,
239
187
  &-border-left {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "19.65.0",
3
+ "version": "19.67.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/tokens/_color-tokens.scss CHANGED
@@ -1109,6 +1109,9 @@ $dark-theme-background-palette: (
1109
1109
 
1110
1110
  // Foreground palette for light themes.
1111
1111
  $light-theme-foreground-palette: (
1112
+ base: $color-base-blue-grey-900,
1113
+ base-inverse: $color-base-blue-grey-100,
1114
+
1112
1115
  foreground: $color-base-blue-grey-900,
1113
1116
  foreground-inverse: $color-base-blue-grey-100,
1114
1117
  foreground-alpha: rgba($color-base-blue-grey-900, 0.5),
@@ -1144,6 +1147,9 @@ $light-theme-foreground-palette: (
1144
1147
 
1145
1148
  // Foreground palette for dark themes.
1146
1149
  $dark-theme-foreground-palette: (
1150
+ base: $color-base-blue-grey-100,
1151
+ base-inverse: $color-base-blue-grey-900,
1152
+
1147
1153
  foreground: $color-base-blue-grey-100,
1148
1154
  foreground-inverse: $color-base-blue-grey-900,
1149
1155
  foreground-alpha: rgba($color-base-blue-grey-50, 0.5),