matcha-theme 1.0.9 → 1.0.11

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.
@@ -179,11 +179,11 @@
179
179
  $display-1: matcha-typography-level(34px, 40px, 400),
180
180
  $headline: matcha-typography-level(24px, 32px, 400),
181
181
  $title: matcha-typography-level(20px, 32px, 700),
182
- $subheading-2: matcha-typography-level(16px, 28px, 700),
183
- $subheading-1: matcha-typography-level(15px, 24px, 700),
182
+ $subheading-2: matcha-typography-level(16px, 28px, 900),
183
+ $subheading-1: matcha-typography-level(15px, 24px, 900),
184
184
  $body-2: matcha-typography-level(14px, 24px, 500),
185
185
  $body-1: matcha-typography-level(14px, 20px, 400),
186
- $caption: matcha-typography-level(12px, 20px, 400),
186
+ $caption: matcha-typography-level(12px, 20px, 500),
187
187
  $button: matcha-typography-level(14px, 14px, 500),
188
188
  $input: matcha-typography-level(inherit, 1.125, 400)
189
189
  ) {
@@ -32,11 +32,19 @@
32
32
 
33
33
  @for $i from 0 through 12 {
34
34
  $size: $i * 4;
35
-
36
35
  .gap-#{$size} {
37
36
  column-gap: #{$size}px;
38
37
  row-gap: #{$size}px;
39
38
  }
39
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
40
+ @include media-breakpoint($materialBreakpoint) {
41
+ $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
42
+ .gap#{$infix}-#{$size} {
43
+ column-gap: #{$size}px;
44
+ row-gap: #{$size}px;
45
+ }
46
+ }
47
+ }
40
48
  }
41
49
 
42
50
  @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
@@ -77,8 +77,8 @@
77
77
  .h2,
78
78
  h2 {
79
79
  font-size: px-to-rem(32px);
80
- font-family: matcha-font-family($config, title);
81
- font-weight: matcha-font-weight($config, title);
80
+ font-family: matcha-font-family($config, body-2);
81
+ font-weight: matcha-font-weight($config, body-2);
82
82
  }
83
83
 
84
84
  .h3,
@@ -104,25 +104,9 @@
104
104
 
105
105
  .h6,
106
106
  h6 {
107
- font-size: px-to-rem(14px);
108
- font-family: matcha-font-family($config, title);
109
- font-weight: matcha-font-weight($config, title);
110
- }
111
-
112
- .h7,
113
- .subheading-2 {
114
107
  font-size: px-to-rem(12px);
115
- font-family: matcha-font-family($config, title);
116
- font-weight: matcha-font-weight($config, title);
117
- }
118
-
119
- .h8,
120
- .subheading-1 {
121
- font-size: px-to-rem(12px);
122
- font-family: matcha-font-family($config, title);
123
- font-weight: matcha-font-weight($config, title);
124
- text-transform: uppercase;
125
- letter-spacing: px-to-rem(0.8px);
108
+ font-family: matcha-font-family($config, subheading-2);
109
+ font-weight: matcha-font-weight($config, subheading-2);
126
110
  }
127
111
 
128
112
  .text-bold,
@@ -173,17 +173,22 @@ How to use
173
173
  .par-xl {
174
174
  font-size: 24px !important;
175
175
  }
176
-
176
+ .text-medium,
177
177
  .text-semibold {
178
- font-weight: 600;
178
+ font-weight: 500;
179
179
  }
180
180
 
181
- .text-regular {
181
+ .text-regular,
182
+ .text-book {
182
183
  font-weight: 400;
183
184
  }
184
185
 
185
- .text-book {
186
- font-weight: 500;
186
+ .text-bold {
187
+ font-weight: 700;
188
+ }
189
+
190
+ .text-black {
191
+ font-weight: 900;
187
192
  }
188
193
 
189
194
  .matcha-message-box,
@@ -113,7 +113,8 @@ How to use
113
113
  // matcha-header__content__title
114
114
  &__title {
115
115
  font-size: 20px;
116
- font-family: "CircularStd-Bold", "Helvetica Neue", "Arial", sans-serif;
116
+ font-family: "CircularStd", "Helvetica Neue", "Arial", sans-serif;
117
+ font-weight: 700;
117
118
  margin: 0 16px 0 0;
118
119
  line-height: 48px;
119
120
  min-height: 48px;
@@ -149,7 +149,8 @@
149
149
  align-items: center;
150
150
  letter-spacing: 0.08em;
151
151
  text-transform: uppercase;
152
- font-family: "CircularStd-Bold";
152
+ font-family: "CircularStd";
153
+ font-weight: 700;
153
154
 
154
155
  &-bullet {
155
156
  height: 16px;
@@ -226,7 +227,8 @@
226
227
 
227
228
  &-begin {
228
229
  font-size: 16px;
229
- font-family: "CircularStd-Bold";
230
+ font-family: "CircularStd";
231
+ font-weight: 700;
230
232
  line-height: 16px;
231
233
  display: -webkit-box;
232
234
  -webkit-line-clamp: 2;
@@ -189,7 +189,8 @@
189
189
 
190
190
  .mat-header-cell {
191
191
  color: map-get($foreground, text);
192
- font-family: "CircularStd-Bold";
192
+ font-family: "CircularStd";
193
+ font-weight: 700;
193
194
  font-size: 16px;
194
195
  padding-left: 8px;
195
196
  padding-right: 8px;
Binary file