matcha-theme 18.1.42 → 18.1.43

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 (5) hide show
  1. package/abstracts/_mixins.scss +14 -0
  2. package/components/matcha-buttons.scss +109 -105
  3. package/main.scss +1 -0
  4. package/package.json +1 -1
  5. package/tokens/_breakpoints.scss +19 -31
package/abstracts/_mixins.scss ADDED
@@ -0,0 +1,14 @@
1
+ // -------------------------------------------------------------------------------------------------------------------
2
+ // @ Theme mixins
3
+ // --------------------------------------------------------------------------------------------------------------------
4
+ // for a full list of available breakpoints, see the $breakpoints map in the /tokens/_breakpoints.scss file
5
+ @mixin media-breakpoint($breakpointName) {
6
+ $mediaQuery: map-get($breakpoints, $breakpointName);
7
+ @if ($mediaQuery == null) {
8
+ @content;
9
+ } @else {
10
+ @media #{$mediaQuery} {
11
+ @content;
12
+ }
13
+ }
14
+ }
package/components/matcha-buttons.scss CHANGED
@@ -1,3 +1,47 @@
1
+ @mixin generate-matcha-button-size-classes($helper-breakpoints){
2
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
3
+ @include media-breakpoint($materialBreakpoint) {
4
+ $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
5
+
6
+ &#{$infix}-tiny {
7
+ padding: 0 px-to-rem(32px);
8
+ border-radius: px-to-rem(8px);
9
+ line-height: px-to-rem(32px);
10
+ max-height: px-to-rem(32px);
11
+ }
12
+
13
+ &#{$infix}-small {
14
+ padding: 0 px-to-rem(32px);
15
+ border-radius: px-to-rem(8px);
16
+ line-height: px-to-rem(40px);
17
+ max-height: px-to-rem(40px);
18
+ }
19
+
20
+ &#{$infix}-medium {
21
+ padding: 0 px-to-rem(32px);
22
+ border-radius: px-to-rem(8px);
23
+ line-height: px-to-rem(48px);
24
+ max-height: px-to-rem(48px);
25
+ }
26
+
27
+ &#{$infix}-large {
28
+ padding: 0 px-to-rem(32px);
29
+ border-radius: px-to-rem(8px);
30
+ line-height: px-to-rem(56px);
31
+ max-height: px-to-rem(56px);
32
+ }
33
+
34
+ &#{$infix}-huge {
35
+ padding: 0 px-to-rem(32px);
36
+ border-radius: px-to-rem(8px);
37
+ line-height: px-to-rem(56px);
38
+ max-height: px-to-rem(56px);
39
+ }
40
+ }
41
+ }
42
+ }
43
+
44
+
1
45
  @mixin matcha-button-theme($theme) {
2
46
 
3
47
  $primary: map-get($theme, primary);
@@ -25,45 +69,13 @@
25
69
  display: inline-block;
26
70
  text-align: center;
27
71
  align-items: flex-start;
28
- cursor: default;
72
+ cursor: pointer;
29
73
  box-sizing: border-box;
30
74
  *{
31
75
  pointer-events: none;
32
76
  }
33
- &-xs {
34
- padding: 0 px-to-rem(32px);
35
- border-radius: px-to-rem(8px);
36
- line-height: px-to-rem(32px);
37
- max-height: px-to-rem(32px);
38
- }
39
-
40
- &-sm {
41
- padding: 0 px-to-rem(32px);
42
- border-radius: px-to-rem(8px);
43
- line-height: px-to-rem(40px);
44
- max-height: px-to-rem(40px);
45
- }
46
-
47
- &-md {
48
- padding: 0 px-to-rem(32px);
49
- border-radius: px-to-rem(8px);
50
- line-height: px-to-rem(48px);
51
- max-height: px-to-rem(48px);
52
- }
53
-
54
- &-lg {
55
- padding: 0 px-to-rem(32px);
56
- border-radius: px-to-rem(8px);
57
- line-height: px-to-rem(56px);
58
- max-height: px-to-rem(56px);
59
- }
60
77
 
61
- &-xl {
62
- padding: 0 px-to-rem(32px);
63
- border-radius: px-to-rem(8px);
64
- line-height: px-to-rem(56px);
65
- max-height: px-to-rem(56px);
66
- }
78
+ @include generate-matcha-button-size-classes($helper-breakpoints);
67
79
 
68
80
  &-main {
69
81
  background: map-get($background, background);
@@ -71,11 +83,11 @@
71
83
  padding: 0 px-to-rem(16px);
72
84
  }
73
85
 
74
- &-xs,
75
- &-sm,
76
- &-md,
77
- &-lg,
78
- &-xl {
86
+ &-tiny,
87
+ &-small,
88
+ &-medium,
89
+ &-large,
90
+ &-huge {
79
91
  min-width: 24px;
80
92
 
81
93
  &.stroked {
@@ -91,8 +103,8 @@
91
103
  color: map-get($foreground, placeholder);
92
104
  }
93
105
  }
94
- @include _matcha-button-types($theme);
95
106
  }
107
+
96
108
  &:hover{
97
109
  filter: brightness(1.05);
98
110
  }
@@ -101,80 +113,72 @@
101
113
  filter: brightness(1.1);
102
114
  }
103
115
 
104
- @include _matcha-button-types($theme); // include this properties event button don't have any size class
105
- }
106
- }
107
-
108
-
109
- @mixin _matcha-button-types($theme){
110
- $background: map-get($theme, background);
111
- $foreground: map-get($theme, foreground);
112
-
113
- &[disabled] {
114
- background-color: map-get($background, disabled);
115
- color: map-get($foreground, disabled);
116
- border-color: map-get($foreground, disabled);
117
- }
118
-
119
- &-basic {
120
- border: 0px solid currentColor;
121
- box-shadow: 0px 0px 0px 0px inset;
122
- background: transparent !important;
123
- color: map-get($foreground, base);
124
- border-color: map-get($foreground, base);
125
- }
116
+ &[disabled] {
117
+ background-color: map-get($background, disabled);
118
+ color: #b5bdc3 !important;
119
+ border-color: map-get($foreground, disabled);
120
+ pointer-events: none;
121
+ }
126
122
 
127
- &-outline {
128
- border: 0px solid currentColor;
129
- box-shadow: 0px 0px 0px 2px inset;
130
- background: transparent !important;
131
- color: map-get($foreground, base);
132
- border-color: map-get($foreground, base);
133
- }
123
+ &-basic {
124
+ border: 0px solid currentColor;
125
+ box-shadow: 0px 0px 0px 0px inset;
126
+ background: transparent !important;
127
+ color: map-get($foreground, base);
128
+ border-color: map-get($foreground, base);
129
+ }
134
130
 
135
- &-pill {
136
- border-radius: 999px;
137
- }
131
+ &-outline {
132
+ border: 0px solid currentColor;
133
+ box-shadow: 0px 0px 0px 2px inset;
134
+ background: transparent !important;
135
+ color: map-get($foreground, base);
136
+ border-color: map-get($foreground, base);
137
+ }
138
138
 
139
- &-link {
140
- background-color: transparent;
141
- color: map-get($foreground, label);
142
- text-transform: initial;
143
- letter-spacing: 0;
144
- text-decoration: underline;
145
- padding: 0;
146
- }
139
+ &-pill {
140
+ border-radius: 999px;
141
+ }
147
142
 
148
- &-icon {
149
- aspect-ratio: 1;
150
- padding: 0 !important;
151
- display: flex;
152
- align-items: center;
153
- justify-content: center;
154
- }
143
+ &-link {
144
+ background-color: transparent;
145
+ color: map-get($foreground, label);
146
+ text-transform: initial;
147
+ letter-spacing: 0;
148
+ text-decoration: underline;
149
+ padding: 0;
150
+ }
155
151
 
156
- .ripple {
157
- position: absolute;
158
- border-radius: 999px;
159
- transform: scale(0);
160
- pointer-events: none;
161
- }
162
- .ripple.show {
163
- animation: ripple 400ms ease-out;
164
- }
152
+ &-icon {
153
+ aspect-ratio: 1;
154
+ padding: 0 !important;
155
+ display: flex;
156
+ align-items: center;
157
+ justify-content: center;
158
+ }
165
159
 
166
- @keyframes ripple {
167
- 0% {
168
- opacity: 0;
160
+ .ripple {
161
+ position: absolute;
162
+ border-radius: 999px;
169
163
  transform: scale(0);
164
+ pointer-events: none;
170
165
  }
171
- 25% {
172
- opacity: 1;
166
+ .ripple.show {
167
+ animation: ripple 400ms ease-out;
173
168
  }
174
- 100% {
175
- opacity: 0;
176
- transform: scale(2);
169
+
170
+ @keyframes ripple {
171
+ 0% {
172
+ opacity: 0;
173
+ transform: scale(0);
174
+ }
175
+ 25% {
176
+ opacity: 1;
177
+ }
178
+ 100% {
179
+ opacity: 0;
180
+ transform: scale(2);
181
+ }
177
182
  }
178
183
  }
179
184
  }
180
-
package/main.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  // MIXINS
13
13
  @import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
14
14
  @import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
15
+ @import "./abstracts/mixins"; // media-breakpoint()
15
16
 
16
17
  // TYPOGRAPHY
17
18
  @import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "18.1.42",
3
+ "version": "18.1.43",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/tokens/_breakpoints.scss CHANGED
@@ -1,38 +1,26 @@
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
- gt-md: "screen and (min-width: 1440px)",
15
- gt-lg: "screen and (min-width: 1920px)"
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)', //old size - 980px
14
+ gt-md: 'screen and (min-width: 1440px)', //old size - 1280px
15
+ gt-lg: 'screen and (min-width: 1920px)'
16
16
  ) !default;
17
17
 
18
18
  // Re-map the breakpoints for the helper classes
19
19
  $helper-breakpoints: (
20
- xs: null,
21
- sm: "gt-xs",
22
- md: "gt-sm",
23
- lg: "gt-md",
24
- xl: "gt-lg"
20
+ initial: null,
21
+ xs: 'xs',
22
+ sm: 'gt-xs',
23
+ md: 'gt-sm',
24
+ lg: 'gt-md',
25
+ xl: 'gt-lg'
25
26
  );
26
-
27
- // Map the icon sizes for the helper classes
28
- $helper-i-sizes: (
29
- xs: 12,
30
- sm: 16,
31
- md: 24,
32
- lg: 32,
33
- xl: 48
34
- );
35
-
36
- $grid-prefix: "col";
37
- $grid-length: 12;
38
- $grid-sizes: (sm 600px, md 1024px, lg 1440px, xl 1920px);