@hug/hospitality 1.0.0-alpha.22 → 1.0.0-alpha.23

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 (4) hide show
  1. package/material/button/button.scss +42 -28
  2. package/material/form-field/form-field.scss +9 -9
  3. package/material/scrollbar/scrollbar.scss +3 -3
  4. package/package.json +1 -1
package/material/button/button.scss CHANGED
@@ -1,26 +1,38 @@
1
1
  @use "@angular/material" as mat;
2
2
 
3
3
  button {
4
- gap: 0.5rem;
4
+ gap: var(--hy-spacing-small);
5
+
6
+ &.mat-mdc-button-base {
7
+ min-width: 0;
8
+ max-width: 100%;
9
+
10
+ > .mdc-button__label {
11
+ display: block;
12
+ overflow: hidden;
13
+ text-overflow: ellipsis;
14
+ white-space: nowrap;
15
+ }
16
+ }
5
17
 
6
18
  @include mat.button-overrides(
7
19
  (
8
- filled-horizontal-padding: 1rem,
9
- outlined-horizontal-padding: 1rem,
10
- tonal-horizontal-padding: 1rem,
11
- text-horizontal-padding: 1rem,
12
- text-with-icon-horizontal-padding: 1rem,
20
+ filled-horizontal-padding: var(--hy-spacing-medium),
21
+ outlined-horizontal-padding: var(--hy-spacing-medium),
22
+ tonal-horizontal-padding: var(--hy-spacing-medium),
23
+ text-horizontal-padding: var(--hy-spacing-medium),
24
+ text-with-icon-horizontal-padding: var(--hy-spacing-medium),
13
25
  outlined-label-text-color: var(--mat-sys-on-surface-variant),
14
26
  outlined-outline-color: var(--mat-sys-outline-variant),
15
27
  outlined-disabled-outline-color: var(--mat-sys-outline-variant),
16
28
  outlined-state-layer-color: color-mix(
17
29
  in srgb,
18
- var(--mat-sys-on-surface) 38%,
30
+ var(--mat-sys-on-surface) var(--hy-state-layer-x-large),
19
31
  transparent
20
32
  ),
21
33
  outlined-ripple-color: color-mix(
22
34
  in srgb,
23
- var(--mat-sys-on-surface) 10%,
35
+ var(--mat-sys-on-surface) var(--hy-state-layer-medium),
24
36
  transparent
25
37
  ),
26
38
  )
@@ -37,7 +49,7 @@ button {
37
49
  &:disabled {
38
50
  background-color: color-mix(
39
51
  in srgb,
40
- var(--mat-sys-on-surface) 12%,
52
+ var(--mat-sys-on-surface) var(--hy-state-layer-medium),
41
53
  transparent
42
54
  );
43
55
  }
@@ -46,16 +58,18 @@ button {
46
58
  /* Size variants, icon button and button */
47
59
 
48
60
  &[hySize="small"] {
49
- gap: 0.25rem;
61
+ gap: var(--hy-spacing-x-small);
50
62
 
51
63
  @include mat.button-density(-1);
52
64
  @include mat.button-overrides(
53
65
  (
54
- filled-horizontal-padding: 0.75rem,
55
- outlined-horizontal-padding: 0.75rem,
56
- tonal-horizontal-padding: 0.75rem,
57
- text-horizontal-padding: 0.75rem,
58
- text-with-icon-horizontal-padding: 0.75rem,
66
+ filled-horizontal-padding: var(--hy-spacing-medium-small),
67
+ outlined-horizontal-padding: var(--hy-spacing-medium-small),
68
+ tonal-horizontal-padding: var(--hy-spacing-medium-small),
69
+ text-horizontal-padding: var(--hy-spacing-medium-small),
70
+ text-with-icon-horizontal-padding: var(
71
+ --hy-spacing-medium-small
72
+ ),
59
73
  )
60
74
  );
61
75
  @include mat.icon-button-overrides(
@@ -82,12 +96,11 @@ button {
82
96
  tonal-container-height: 3.5rem,
83
97
  text-container-height: 3.5rem,
84
98
 
85
- filled-horizontal-padding: 1.5rem,
86
- outlined-horizontal-padding: 1.5rem,
87
- tonal-horizontal-padding: 1.5rem,
88
- text-horizontal-padding: 1.5rem,
89
- text-with-icon-horizontal-padding: 1.5rem,
90
-
99
+ filled-horizontal-padding: var(--hy-spacing-x-large),
100
+ outlined-horizontal-padding: var(--hy-spacing-x-large),
101
+ tonal-horizontal-padding: var(--hy-spacing-x-large),
102
+ text-horizontal-padding: var(--hy-spacing-x-large),
103
+ text-with-icon-horizontal-padding: var(--hy-spacing-x-large),
91
104
  filled-label-text-font: var(--mat-sys-title-medium-font),
92
105
  outlined-label-text-font: var(--mat-sys-title-medium-font),
93
106
  tonal-label-text-font: var(--mat-sys-title-medium-font),
@@ -133,14 +146,14 @@ button {
133
146
  filled-state-layer-color: var(--hy-color-on-warning),
134
147
  filled-ripple-color: color-mix(
135
148
  in srgb,
136
- var(--hy-color-on-warning) 10%,
149
+ var(--hy-color-on-warning) var(--hy-state-layer-medium),
137
150
  transparent
138
151
  ),
139
152
  text-label-text-color: var(--hy-color-warning),
140
153
  text-state-layer-color: var(--hy-color-warning),
141
154
  text-ripple-color: color-mix(
142
155
  in srgb,
143
- var(--hy-color-warning) 10%,
156
+ var(--hy-color-warning) var(--hy-state-layer-medium),
144
157
  transparent
145
158
  ),
146
159
  )
@@ -152,7 +165,7 @@ button {
152
165
  state-layer-color: var(--hy-color-warning),
153
166
  ripple-color: color-mix(
154
167
  in srgb,
155
- var(--hy-color-warning) 10%,
168
+ var(--hy-color-warning) var(--hy-state-layer-medium),
156
169
  transparent
157
170
  ),
158
171
  )
@@ -167,7 +180,7 @@ button {
167
180
  state-layer-color: var(--hy-color-on-warning),
168
181
  ripple-color: color-mix(
169
182
  in srgb,
170
- var(--hy-color-on-warning) 10%,
183
+ var(--hy-color-on-warning) var(--hy-state-layer-medium),
171
184
  transparent
172
185
  ),
173
186
  )
@@ -185,7 +198,8 @@ button {
185
198
  state-layer-color: var(--mat-sys-on-secondary-container),
186
199
  ripple-color: color-mix(
187
200
  in srgb,
188
- var(--mat-sys-on-secondary-container) 10%,
201
+ var(--mat-sys-on-secondary-container)
202
+ var(--hy-state-layer-medium),
189
203
  transparent
190
204
  ),
191
205
  )
@@ -205,7 +219,7 @@ button {
205
219
  state-layer-color: var(--mat-sys-on-primary),
206
220
  ripple-color: color-mix(
207
221
  in srgb,
208
- var(--mat-sys-on-primary) 10%,
222
+ var(--mat-sys-on-primary) var(--hy-state-layer-medium),
209
223
  transparent
210
224
  ),
211
225
  )
@@ -218,7 +232,7 @@ button {
218
232
  &:disabled {
219
233
  background-color: color-mix(
220
234
  in srgb,
221
- var(--mat-sys-on-surface) 10%,
235
+ var(--mat-sys-on-surface) var(--hy-state-layer-medium),
222
236
  transparent
223
237
  );
224
238
  }
package/material/form-field/form-field.scss CHANGED
@@ -24,17 +24,17 @@ mat-form-field {
24
24
  &:has(textarea) {
25
25
  &[hySize="small"] {
26
26
  .mat-mdc-form-field-icon-suffix {
27
- padding: 0.5rem 0;
27
+ padding: var(--hy-spacing-small) 0;
28
28
 
29
29
  mat-icon {
30
- padding-top: 0.125rem;
30
+ padding-top: var(--hy-spacing-xx-small);
31
31
  }
32
32
  }
33
33
  }
34
34
 
35
35
  &[hySize="large"] {
36
36
  .mat-mdc-form-field-icon-suffix {
37
- padding: 1rem 0;
37
+ padding: var(--hy-spacing-medium) 0;
38
38
  }
39
39
  }
40
40
 
@@ -43,9 +43,9 @@ mat-form-field {
43
43
  display: flex;
44
44
  align-items: flex-start;
45
45
  justify-content: center;
46
- padding-bottom: 0.75rem;
47
- padding-top: 0.75rem;
48
- margin-left: 0.25rem;
46
+ padding-bottom: var(--hy-spacing-medium-small);
47
+ padding-top: var(--hy-spacing-medium-small);
48
+ margin-left: var(--hy-spacing-x-small);
49
49
  }
50
50
  }
51
51
 
@@ -55,7 +55,7 @@ mat-form-field {
55
55
  .mat-mdc-form-field-icon-suffix,
56
56
  .mat-mdc-form-field-icon-prefix {
57
57
  button {
58
- margin: 0 0.5rem;
58
+ margin: 0 var(--hy-spacing-small);
59
59
  }
60
60
 
61
61
  mat-icon {
@@ -74,7 +74,7 @@ mat-form-field {
74
74
  mat-hint {
75
75
  color: color-mix(
76
76
  in srgb,
77
- var(--mat-sys-on-surface-variant) 38%,
77
+ var(--mat-sys-on-surface-variant) var(--hy-state-layer-x-large),
78
78
  transparent
79
79
  );
80
80
  }
@@ -88,7 +88,7 @@ mat-form-field {
88
88
  .mat-mdc-form-field-icon-prefix {
89
89
  width: 3rem;
90
90
  button {
91
- margin: 0 0.25rem;
91
+ margin: 0 var(--hy-spacing-x-small);
92
92
  }
93
93
  }
94
94
 
package/material/scrollbar/scrollbar.scss CHANGED
@@ -4,15 +4,15 @@
4
4
  }
5
5
 
6
6
  ::-webkit-scrollbar-track {
7
- margin-bottom: 12px;
7
+ margin-bottom: var(--hy-spacing-medium-small);
8
8
  }
9
9
 
10
10
  ::-webkit-scrollbar-thumb {
11
11
  transition: 0.3s ease-in-out;
12
12
  border-radius: 6px;
13
- background-color: var(--hy-color-outline-variant);
13
+ background-color: var(--mat-sys-outline-variant);
14
14
 
15
15
  &:hover {
16
- background-color: var(--hy-color-outline);
16
+ background-color: var(--mat-sys-outline);
17
17
  }
18
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hug/hospitality",
3
- "version": "1.0.0-alpha.22",
3
+ "version": "1.0.0-alpha.23",
4
4
  "description": "Hospitality Design System",
5
5
  "homepage": "https://github.com/dsi-hug/hospitality",
6
6
  "license": "GPL-3.0-only",