matcha-theme 1.0.2 → 1.0.4

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 (10) hide show
  1. package/abstracts/_colors.scss +147 -147
  2. package/abstracts/_functions.scss +95 -48
  3. package/abstracts/_grid.scss +18 -20
  4. package/abstracts/_sizes.scss +95 -47
  5. package/abstracts/_spacings.scss +65 -85
  6. package/main.scss +0 -2
  7. package/package.json +1 -1
  8. package/tokens/_breakpoints.scss +21 -29
  9. package/tokens/_color-tokens.scss +0 -26
  10. package/vendors/angular-material-fixes.scss +51 -1
package/abstracts/_spacings.scss CHANGED
@@ -2,13 +2,11 @@
2
2
  // @ Spacing - Margin and Padding
3
3
  // Generate spacing values from -64 to 64 jumping from 4 to 4
4
4
  // -----------------------------------------------------------------------------------------------------
5
- @each $breakpoint,
6
- $materialBreakpoint in $helper-breakpoints {
7
- @include media-breakpoint($materialBreakpoint) {
8
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
5
+ @each $breakpoint-infix, $media-size in $helper-breakpoints {
6
+ @include media-breakpoint($media-size) {
7
+ $infix: if($media-size ==null, "", "-#{$breakpoint-infix}");
9
8
 
10
- @each $prop,
11
- $abbrev in (margin: m, padding: p) {
9
+ @each $prop, $abbrev in (margin: m, padding: p) {
12
10
  @if ($prop ==margin) {
13
11
  @for $index from -16 through 16 {
14
12
  $size: $index * 4;
@@ -21,11 +19,6 @@ $materialBreakpoint in $helper-breakpoints {
21
19
  .#{$abbrev}#{$infix}-#{$size}--force {
22
20
  #{$prop}: $length !important;
23
21
  }
24
- }
25
-
26
- @for $index from -16 through 16 {
27
- $size: $index * 4;
28
- $length: #{$size}px;
29
22
 
30
23
  .#{$abbrev}x#{$infix}-#{$size} {
31
24
  #{$prop}-right: $length;
@@ -37,7 +30,6 @@ $materialBreakpoint in $helper-breakpoints {
37
30
  #{$prop}-bottom: $length;
38
31
  }
39
32
 
40
-
41
33
  .#{$abbrev}x#{$infix}-#{$size}--force {
42
34
  #{$prop}-right: $length !important;
43
35
  #{$prop}-left: $length !important;
@@ -47,11 +39,6 @@ $materialBreakpoint in $helper-breakpoints {
47
39
  #{$prop}-top: $length !important;
48
40
  #{$prop}-bottom: $length !important;
49
41
  }
50
- }
51
-
52
- @for $index from -16 through 16 {
53
- $size: $index * 4;
54
- $length: #{$size}px;
55
42
 
56
43
  .#{$abbrev}t#{$infix}-#{$size} {
57
44
  #{$prop}-top: $length;
@@ -69,7 +56,6 @@ $materialBreakpoint in $helper-breakpoints {
69
56
  #{$prop}-left: $length;
70
57
  }
71
58
 
72
-
73
59
  .#{$abbrev}t#{$infix}-#{$size}--force {
74
60
  #{$prop}-top: $length !important;
75
61
  }
@@ -86,6 +72,67 @@ $materialBreakpoint in $helper-breakpoints {
86
72
  #{$prop}-left: $length !important;
87
73
  }
88
74
  }
75
+
76
+ // Some special margin utils for flex alignments
77
+ .m#{$infix}-auto {
78
+ margin: auto;
79
+ }
80
+
81
+ .mt#{$infix}-auto {
82
+ margin-top: auto;
83
+ }
84
+
85
+ .mr#{$infix}-auto {
86
+ margin-right: auto;
87
+ }
88
+
89
+ .mb#{$infix}-auto {
90
+ margin-bottom: auto;
91
+ }
92
+
93
+ .ml#{$infix}-auto {
94
+ margin-left: auto;
95
+ }
96
+
97
+ .mx#{$infix}-auto {
98
+ margin-right: auto;
99
+ margin-left: auto;
100
+ }
101
+
102
+ .my#{$infix}-auto {
103
+ margin-top: auto;
104
+ margin-bottom: auto;
105
+ }
106
+
107
+ .m#{$infix}-auto--force {
108
+ margin: auto !important;
109
+ }
110
+
111
+ .mt#{$infix}-auto--force {
112
+ margin-top: auto !important;
113
+ }
114
+
115
+ .mr#{$infix}-auto--force {
116
+ margin-right: auto !important;
117
+ }
118
+
119
+ .mb#{$infix}-auto--force {
120
+ margin-bottom: auto !important;
121
+ }
122
+
123
+ .ml#{$infix}-auto--force {
124
+ margin-left: auto !important;
125
+ }
126
+
127
+ .mx#{$infix}-auto--force {
128
+ margin-right: auto !important;
129
+ margin-left: auto !important;
130
+ }
131
+
132
+ .my#{$infix}-auto--force {
133
+ margin-top: auto !important;
134
+ margin-bottom: auto !important;
135
+ }
89
136
  }
90
137
 
91
138
  @if ($prop ==padding) {
@@ -116,7 +163,6 @@ $materialBreakpoint in $helper-breakpoints {
116
163
  #{$prop}-bottom: $length;
117
164
  }
118
165
 
119
-
120
166
  .#{$abbrev}x#{$infix}-#{$size}--force {
121
167
  #{$prop}-right: $length !important;
122
168
  #{$prop}-left: $length !important;
@@ -148,7 +194,6 @@ $materialBreakpoint in $helper-breakpoints {
148
194
  #{$prop}-left: $length;
149
195
  }
150
196
 
151
-
152
197
  .#{$abbrev}t#{$infix}-#{$size}--force {
153
198
  #{$prop}-top: $length !important;
154
199
  }
@@ -166,71 +211,6 @@ $materialBreakpoint in $helper-breakpoints {
166
211
  }
167
212
  }
168
213
  }
169
-
170
- @if ($abbrev ==m) {
171
-
172
- // Some special margin utils for flex alignments
173
- .m#{$infix}-auto {
174
- margin: auto;
175
- }
176
-
177
- .mt#{$infix}-auto {
178
- margin-top: auto;
179
- }
180
-
181
- .mr#{$infix}-auto {
182
- margin-right: auto;
183
- }
184
-
185
- .mb#{$infix}-auto {
186
- margin-bottom: auto;
187
- }
188
-
189
- .ml#{$infix}-auto {
190
- margin-left: auto;
191
- }
192
-
193
- .mx#{$infix}-auto {
194
- margin-right: auto;
195
- margin-left: auto;
196
- }
197
-
198
- .my#{$infix}-auto {
199
- margin-top: auto;
200
- margin-bottom: auto;
201
- }
202
-
203
-
204
- .m#{$infix}-auto--force {
205
- margin: auto !important;
206
- }
207
-
208
- .mt#{$infix}-auto--force {
209
- margin-top: auto !important;
210
- }
211
-
212
- .mr#{$infix}-auto--force {
213
- margin-right: auto !important;
214
- }
215
-
216
- .mb#{$infix}-auto--force {
217
- margin-bottom: auto !important;
218
- }
219
-
220
- .ml#{$infix}-auto--force {
221
- margin-left: auto !important;
222
- }
223
-
224
- .mx#{$infix}-auto--force {
225
- margin-right: auto !important;
226
- margin-left: auto !important;
227
- }
228
-
229
- .my#{$infix}-auto--force {
230
- margin-top: auto !important;
231
- margin-bottom: auto !important;
232
- }
233
- }
234
214
  }
235
215
  }
236
216
  }
package/main.scss CHANGED
@@ -86,8 +86,6 @@
86
86
  // -------------------------------------------------------------------------------------------------------------------
87
87
  // @ CORE - Mixins and Includes
88
88
  // -------------------------------------------------------------------------------------------------------------------
89
- @include colors-classes-static($matchaPalettes);
90
-
91
89
  @mixin matcha-typography($config: null) {
92
90
  @if $config ==null {
93
91
  $config: matcha-typography-config();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "styles for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/tokens/_breakpoints.scss CHANGED
@@ -1,29 +1,27 @@
1
1
  // Media step breakpoint mixin based on Angular Material lib
2
2
  $breakpoints: (
3
- xs: 'screen and (max-width: 599px)',
4
- sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
5
- md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
6
- lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
7
- xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
8
- lt-sm: 'screen and (max-width: 599px)',
9
- lt-md: 'screen and (max-width: 1023px)',
10
- lt-lg: 'screen and (max-width: 1439px)',
11
- lt-xl: 'screen and (max-width: 1919px)',
12
- gt-xs: 'screen and (min-width: 600px)',
13
- gt-sm: 'screen and (min-width: 1024px)',
14
- //old size - 980px
15
- gt-md: 'screen and (min-width: 1440px)',
16
- //old size - 1280px
17
- gt-lg: 'screen and (min-width: 1920px)'
18
- ) !default;
3
+ xs: "screen and (max-width: 599px)",
4
+ sm: "screen and (min-width: 600px) and (max-width: 1023px)",
5
+ md: "screen and (min-width: 1024px) and (max-width: 1439px)",
6
+ lg: "screen and (min-width: 1440px) and (max-width: 1919px)",
7
+ xl: "screen and (min-width: 1920px) and (max-width: 5000px)",
8
+ lt-sm: "screen and (max-width: 599px)",
9
+ lt-md: "screen and (max-width: 1023px)",
10
+ lt-lg: "screen and (max-width: 1439px)",
11
+ lt-xl: "screen and (max-width: 1919px)",
12
+ gt-xs: "screen and (min-width: 600px)",
13
+ gt-sm: "screen and (min-width: 1024px)",
14
+ gt-md: "screen and (min-width: 1440px)",
15
+ gt-lg: "screen and (min-width: 1920px)"
16
+ ) !default;
19
17
 
20
18
  // Re-map the breakpoints for the helper classes
21
19
  $helper-breakpoints: (
22
20
  xs: null,
23
- sm: 'gt-xs',
24
- md: 'gt-sm',
25
- lg: 'gt-md',
26
- xl: 'gt-lg'
21
+ sm: "gt-xs",
22
+ md: "gt-sm",
23
+ lg: "gt-md",
24
+ xl: "gt-lg"
27
25
  );
28
26
 
29
27
  // Map the icon sizes for the helper classes
@@ -32,15 +30,9 @@ $helper-i-sizes: (
32
30
  sm: 16,
33
31
  md: 24,
34
32
  lg: 32,
35
- xl: 48,
33
+ xl: 48
36
34
  );
37
35
 
38
- $grid-prefix: 'col';
36
+ $grid-prefix: "col";
39
37
  $grid-length: 12;
40
- $grid-sizes: (
41
- xs 600px,
42
- sm 1024px,
43
- md 1440px,
44
- lg 1920px,
45
- xl 2560px
46
- );
38
+ $grid-sizes: (sm 600px, md 1024px, lg 1440px, xl 1920px);
package/tokens/_color-tokens.scss CHANGED
@@ -1119,32 +1119,6 @@ $mat-dark-grey: (
1119
1119
  // Alias for alternate spelling.
1120
1120
  $dark-grey: $mat-dark-grey;
1121
1121
 
1122
- // Color for static-colors classes generator
1123
- $matchaPalettes: (
1124
- "red": $red,
1125
- "pink": $pink,
1126
- "purple": $purple,
1127
- "deep-purple": $deep-purple,
1128
- "indigo": $indigo,
1129
- "blue": $blue,
1130
- "light-blue": $light-blue,
1131
- "cyan": $cyan,
1132
- "teal": $teal,
1133
- "green": $green,
1134
- "light-green": $light-green,
1135
- "lime": $lime,
1136
- "yellow": $yellow,
1137
- "amber": $amber,
1138
- "orange": $orange,
1139
- "deep-orange": $deep-orange,
1140
- "brown": $brown,
1141
- "grey": $grey,
1142
- "blue-grey": $blue-grey
1143
- );
1144
-
1145
- // Material color hues list
1146
- $matchaHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
1147
-
1148
1122
  // -------------------------------------------------------------------------------------------------------------------
1149
1123
  // @ Color palette for Surface & Base Colors.
1150
1124
  // --------------------------------------------------------------------------------------------------------------------
package/vendors/angular-material-fixes.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  $foreground: map-get($theme, foreground);
7
7
 
8
8
  // -------------------------------------------------------------------------------------------------------------------
9
- // @ ANGULAR MATERIAL - Matcha Style
9
+ // @ ANGULAR MATERIAL - To attempt to fix some of the issues with the Angular Material components we have to override
10
10
  // -------------------------------------------------------------------------------------------------------------------
11
11
  .mat-mdc-outlined-button {
12
12
  --mdc-outlined-button-container-shape: 8px;
@@ -22,4 +22,54 @@
22
22
  .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
23
23
  --mdc-outlined-text-field-outline-width: 2px;
24
24
  }
25
+ .mdc-text-field--outlined {
26
+ --mdc-outlined-text-field-container-shape: 8px;
27
+ }
28
+ .mat-mdc-text-field-wrapper.mdc-text-field--outlined
29
+ .mdc-notched-outline--upgraded
30
+ .mdc-floating-label--float-above {
31
+ --mat-mdc-form-field-label-transform: translateY(-29.75px)
32
+ scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
33
+ }
34
+
35
+ /* reduce the input height fom 56px to 48px */
36
+ .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
37
+ top: 22px;
38
+ }
39
+ .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
40
+ padding-top: 12px;
41
+ padding-bottom: 12px;
42
+ }
43
+ .mat-mdc-form-field-infix {
44
+ min-height: 48px;
45
+ }
46
+
47
+ /* align icons inside of buttons */
48
+ .mat-mdc-icon-button.mat-mdc-button-base {
49
+ padding: 0;
50
+ }
51
+ .mat-mdc-icon-button.mat-mdc-button-base {
52
+ display: flex;
53
+ align-content: center;
54
+ justify-content: center;
55
+ flex-wrap: wrap;
56
+ }
57
+
58
+ // /*error label*/
59
+ // mat-form-field-invalid
60
+ // .theme-default-dark .mat-mdc-form-field-subscript-wrapper,
61
+ // .theme-default-dark .mat-mdc-form-field-bottom-align::before {
62
+ // -moz-osx-font-smoothing: grayscale;
63
+ // -webkit-font-smoothing: antialiased;
64
+ // font-family: var(--mat-form-field-subscript-text-font);
65
+ // line-height: var(--mat-form-field-subscript-text-line-height);
66
+ // font-size: var(--mat-form-field-subscript-text-size);
67
+ // letter-spacing: var(--mat-form-field-subscript-text-tracking);
68
+ // font-weight: var(--mat-form-field-subscript-text-weight);
69
+ // }
70
+ // .mat-mdc-form-field-bottom-align::before {
71
+ // content: "";
72
+ // display: inline-block;
73
+ // height: 16px;
74
+ // }
25
75
  }