@hug/hospitality 1.0.0-alpha.35 → 1.0.0-alpha.38

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.
@@ -4515,28 +4515,28 @@ var spacing = {
4515
4515
  var stateLayers = {
4516
4516
  references: [
4517
4517
  {
4518
- id: "VariableID:62969:4636",
4519
- name: "hy-state-layer-small",
4518
+ id: "VariableID:62969:4639",
4519
+ name: "hy-state-layer-highest",
4520
4520
  type: "FLOAT",
4521
- value: "8%"
4521
+ value: "38%"
4522
4522
  },
4523
4523
  {
4524
- id: "VariableID:62969:4637",
4525
- name: "hy-state-layer-medium",
4524
+ id: "VariableID:62969:4638",
4525
+ name: "hy-state-layer-high",
4526
4526
  type: "FLOAT",
4527
- value: "10%"
4527
+ value: "16%"
4528
4528
  },
4529
4529
  {
4530
- id: "VariableID:62969:4638",
4531
- name: "hy-state-layer-large",
4530
+ id: "VariableID:62969:4637",
4531
+ name: "hy-state-layer-low",
4532
4532
  type: "FLOAT",
4533
- value: "16%"
4533
+ value: "10%"
4534
4534
  },
4535
4535
  {
4536
- id: "VariableID:62969:4639",
4537
- name: "hy-state-layer-x-large",
4536
+ id: "VariableID:62969:4636",
4537
+ name: "hy-state-layer-lowest",
4538
4538
  type: "FLOAT",
4539
- value: "38%"
4539
+ value: "8%"
4540
4540
  }
4541
4541
  ]
4542
4542
  };
@@ -7,7 +7,7 @@
7
7
  text-color: var(--mat-sys-on-tertiary),
8
8
  disabled-state-background-color: color-mix(
9
9
  in srgb,
10
- var(--mat-sys-tertiary) var(--hy-state-layer-x-large),
10
+ var(--mat-sys-tertiary) var(--hy-state-layer-highest),
11
11
  transparent
12
12
  ),
13
13
  )
@@ -20,7 +20,7 @@
20
20
  text-color: var(--hy-color-on-warning),
21
21
  disabled-state-background-color: color-mix(
22
22
  in srgb,
23
- var(--hy-color-warning) var(--hy-state-layer-x-large),
23
+ var(--hy-color-warning) var(--hy-state-layer-highest),
24
24
  transparent
25
25
  ),
26
26
  )
@@ -34,7 +34,7 @@
34
34
  text-color: var(--mat-sys-on-error),
35
35
  disabled-state-background-color: color-mix(
36
36
  in srgb,
37
- var(--mat-sys-error) var(--hy-state-layer-x-large),
37
+ var(--mat-sys-error) var(--hy-state-layer-highest),
38
38
  transparent
39
39
  ),
40
40
  )
@@ -27,12 +27,12 @@ button {
27
27
  outlined-disabled-outline-color: var(--mat-sys-outline-variant),
28
28
  outlined-state-layer-color: color-mix(
29
29
  in srgb,
30
- var(--mat-sys-on-surface) var(--hy-state-layer-x-large),
30
+ var(--mat-sys-on-surface) var(--hy-state-layer-highest),
31
31
  transparent
32
32
  ),
33
33
  outlined-ripple-color: color-mix(
34
34
  in srgb,
35
- var(--mat-sys-on-surface) var(--hy-state-layer-medium),
35
+ var(--mat-sys-on-surface) var(--hy-state-layer-low),
36
36
  transparent
37
37
  ),
38
38
  )
@@ -49,7 +49,7 @@ button {
49
49
  &:disabled {
50
50
  background-color: color-mix(
51
51
  in srgb,
52
- var(--mat-sys-on-surface) var(--hy-state-layer-medium),
52
+ var(--mat-sys-on-surface) var(--hy-state-layer-low),
53
53
  transparent
54
54
  );
55
55
  }
@@ -146,14 +146,14 @@ button {
146
146
  filled-state-layer-color: var(--hy-color-on-warning),
147
147
  filled-ripple-color: color-mix(
148
148
  in srgb,
149
- var(--hy-color-on-warning) var(--hy-state-layer-medium),
149
+ var(--hy-color-on-warning) var(--hy-state-layer-low),
150
150
  transparent
151
151
  ),
152
152
  text-label-text-color: var(--hy-color-warning),
153
153
  text-state-layer-color: var(--hy-color-warning),
154
154
  text-ripple-color: color-mix(
155
155
  in srgb,
156
- var(--hy-color-warning) var(--hy-state-layer-medium),
156
+ var(--hy-color-warning) var(--hy-state-layer-low),
157
157
  transparent
158
158
  ),
159
159
  )
@@ -165,7 +165,7 @@ button {
165
165
  state-layer-color: var(--hy-color-warning),
166
166
  ripple-color: color-mix(
167
167
  in srgb,
168
- var(--hy-color-warning) var(--hy-state-layer-medium),
168
+ var(--hy-color-warning) var(--hy-state-layer-low),
169
169
  transparent
170
170
  ),
171
171
  )
@@ -180,7 +180,7 @@ button {
180
180
  state-layer-color: var(--hy-color-on-warning),
181
181
  ripple-color: color-mix(
182
182
  in srgb,
183
- var(--hy-color-on-warning) var(--hy-state-layer-medium),
183
+ var(--hy-color-on-warning) var(--hy-state-layer-low),
184
184
  transparent
185
185
  ),
186
186
  )
@@ -199,7 +199,7 @@ button {
199
199
  ripple-color: color-mix(
200
200
  in srgb,
201
201
  var(--mat-sys-on-secondary-container)
202
- var(--hy-state-layer-medium),
202
+ var(--hy-state-layer-low),
203
203
  transparent
204
204
  ),
205
205
  )
@@ -219,7 +219,7 @@ button {
219
219
  state-layer-color: var(--mat-sys-on-primary),
220
220
  ripple-color: color-mix(
221
221
  in srgb,
222
- var(--mat-sys-on-primary) var(--hy-state-layer-medium),
222
+ var(--mat-sys-on-primary) var(--hy-state-layer-low),
223
223
  transparent
224
224
  ),
225
225
  )
@@ -232,7 +232,7 @@ button {
232
232
  &:disabled {
233
233
  background-color: color-mix(
234
234
  in srgb,
235
- var(--mat-sys-on-surface) var(--hy-state-layer-medium),
235
+ var(--mat-sys-on-surface) var(--hy-state-layer-low),
236
236
  transparent
237
237
  );
238
238
  }
@@ -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) var(--hy-state-layer-x-large),
77
+ var(--mat-sys-on-surface-variant) var(--hy-state-layer-highest),
78
78
  transparent
79
79
  );
80
80
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hug/hospitality",
3
- "version": "1.0.0-alpha.35",
3
+ "version": "1.0.0-alpha.38",
4
4
  "description": "Hospitality Design System",
5
5
  "homepage": "https://github.com/dsi-hug/hospitality",
6
6
  "license": "GPL-3.0-only",
package/tokens/tokens.css CHANGED
@@ -727,8 +727,8 @@
727
727
  * STATE LAYERS TOKENS
728
728
  * =================================================================================
729
729
  */
730
- --hy-state-layer-small: 8%;
731
- --hy-state-layer-medium: 10%;
732
- --hy-state-layer-large: 16%;
733
- --hy-state-layer-x-large: 38%;
730
+ --hy-state-layer-highest: 38%;
731
+ --hy-state-layer-high: 16%;
732
+ --hy-state-layer-low: 10%;
733
+ --hy-state-layer-lowest: 8%;
734
734
  }