@payfit/unity-themes 2.2.5 → 2.2.7

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/dist/css/unity.css +18 -8
  2. package/package.json +1 -1
  3. package/tokens/colors.json +14 -8
  4. package/tokens/shadows.json +53 -17
package/dist/css/unity.css CHANGED
@@ -187,10 +187,12 @@
187
187
  --color-orange-l11: oklch(28.891% 0.10112 35.093);
188
188
  --color-orange-l12: oklch(16.65% 0.04887 43.496);
189
189
  --color-utility-backdrop: oklch(16.172% 0.03703 253.15 / 0.6);
190
- --color-utility-shadow-raising: oklch(24.357% 0.06952 254.17 / 0.04);
191
- --color-utility-shadow-floating: oklch(24.357% 0.06952 254.17 / 0.08);
192
- --color-utility-shadow-flying: oklch(24.357% 0.06952 254.17 / 0.1);
193
- --color-utility-shadow-soaring: oklch(24.357% 0.06952 254.17 / 0.12);
190
+ --color-utility-shadow-100: oklch(0% 0 none / 0.06);
191
+ --color-utility-shadow-200: oklch(0% 0 none / 0.08);
192
+ --color-utility-shadow-300: oklch(0% 0 none / 0.08);
193
+ --color-utility-shadow-400: oklch(0% 0 none / 0.1);
194
+ --color-utility-shadow-500: oklch(0% 0 none / 0.12);
195
+ --color-utility-shadow-600: oklch(0% 0 none / 0.12);
194
196
  --grid-layout-columns--default: 6;
195
197
  --grid-layout-columns--md: 12;
196
198
  --grid-layout-columns--lg: 12;
@@ -534,10 +536,12 @@
534
536
  --radius-md: var(--uy-radius-100);
535
537
  --radius-lg: var(--uy-radius-200);
536
538
  --radius-xl: var(--uy-radius-300);
537
- --shadow-raising: 0px 1px 2px 0px var(--uy-color-utility-shadow-raising);
538
- --shadow-floating: 0px 6px 20px -4px var(--uy-color-utility-shadow-floating);
539
- --shadow-flying: 0px 8px 20px 4px var(--uy-color-utility-shadow-flying);
540
- --shadow-soaring: 0px 24px 32px -8px var(--uy-color-utility-shadow-soaring);
539
+ --shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
540
+ --shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
541
+ --shadow-300: 0px 5px 10px 1px var(--uy-color-utility-shadow-300);
542
+ --shadow-400: 0px 8px 18px 2px var(--uy-color-utility-shadow-400);
543
+ --shadow-500: 0px 8px 24px 4px var(--uy-color-utility-shadow-500);
544
+ --shadow-600: 0px 15px 30px 5px var(--uy-color-utility-shadow-600);
541
545
  --typography-default-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
542
546
  --typography-sm-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
543
547
  --typography-default-h1: var(--uy-font-weight-semibold) var(--uy-text-800) / 1.2 var(--uy-font-sans);
@@ -574,6 +578,12 @@
574
578
  --typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
575
579
  --typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
576
580
  --typography-sm-action-large: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
581
+ --shadow-raising: var(--uy-shadow-100);
582
+ --shadow-floating: var(--uy-shadow-200);
583
+ --shadow-levitating: var(--uy-shadow-300);
584
+ --shadow-flying: var(--uy-shadow-400);
585
+ --shadow-soaring: var(--uy-shadow-500);
586
+ --shadow-summit: var(--uy-shadow-600);
577
587
  }
578
588
 
579
589
  @utility grid-layout {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-themes",
3
- "version": "2.2.5",
3
+ "version": "2.2.7",
4
4
  "main": "./dist/esm/index.js",
5
5
  "types": "./dist/esm/index.d.ts",
6
6
  "style": "./dist/css/unity.css",
package/tokens/colors.json CHANGED
@@ -1371,17 +1371,23 @@
1371
1371
  "$value": "#030E1D99"
1372
1372
  },
1373
1373
  "shadow": {
1374
- "raising": {
1375
- "$value": "#0420400A"
1374
+ "100": {
1375
+ "$value": "#0000000f"
1376
1376
  },
1377
- "floating": {
1378
- "$value": "#04204014"
1377
+ "200": {
1378
+ "$value": "#00000014"
1379
1379
  },
1380
- "flying": {
1381
- "$value": "#0420401A"
1380
+ "300": {
1381
+ "$value": "#00000014"
1382
1382
  },
1383
- "soaring": {
1384
- "$value": "#0420401f"
1383
+ "400": {
1384
+ "$value": "#0000001a"
1385
+ },
1386
+ "500": {
1387
+ "$value": "#0000001f"
1388
+ },
1389
+ "600": {
1390
+ "$value": "#0000001f"
1385
1391
  }
1386
1392
  }
1387
1393
  }
package/tokens/shadows.json CHANGED
@@ -5,41 +5,77 @@
5
5
  "canvas": {
6
6
  "$value": "none"
7
7
  },
8
- "raising": {
8
+ "100": {
9
9
  "$value": {
10
- "color": "{color.utility.shadow.raising}",
10
+ "color": "{color.utility.shadow.100}",
11
11
  "offsetX": "0px",
12
12
  "offsetY": "1px",
13
- "blur": "2px",
14
- "spread": "0px"
13
+ "blur": "4px",
14
+ "spread": "1px"
15
15
  }
16
16
  },
17
- "floating": {
17
+ "200": {
18
18
  "$value": {
19
- "color": "{color.utility.shadow.floating}",
19
+ "color": "{color.utility.shadow.200}",
20
20
  "offsetX": "0px",
21
- "offsetY": "6px",
22
- "blur": "20px",
23
- "spread": "-4px"
21
+ "offsetY": "2px",
22
+ "blur": "8px",
23
+ "spread": "1px"
24
24
  }
25
25
  },
26
- "flying": {
26
+ "300": {
27
+ "$value": {
28
+ "color": "{color.utility.shadow.300}",
29
+ "offsetX": "0px",
30
+ "offsetY": "5px",
31
+ "blur": "10px",
32
+ "spread": "1px"
33
+ }
34
+ },
35
+ "400": {
36
+ "$value": {
37
+ "color": "{color.utility.shadow.400}",
38
+ "offsetX": "0px",
39
+ "offsetY": "8px",
40
+ "blur": "18px",
41
+ "spread": "2px"
42
+ }
43
+ },
44
+ "500": {
27
45
  "$value": {
28
- "color": "{color.utility.shadow.flying}",
46
+ "color": "{color.utility.shadow.500}",
29
47
  "offsetX": "0px",
30
48
  "offsetY": "8px",
31
- "blur": "20px",
49
+ "blur": "24px",
32
50
  "spread": "4px"
33
51
  }
34
52
  },
35
- "soaring": {
53
+ "600": {
36
54
  "$value": {
37
- "color": "{color.utility.shadow.soaring}",
55
+ "color": "{color.utility.shadow.600}",
38
56
  "offsetX": "0px",
39
- "offsetY": "24px",
40
- "blur": "32px",
41
- "spread": "-8px"
57
+ "offsetY": "15px",
58
+ "blur": "30px",
59
+ "spread": "5px"
42
60
  }
61
+ },
62
+ "raising": {
63
+ "$value": "{shadow.100}"
64
+ },
65
+ "floating": {
66
+ "$value": "{shadow.200}"
67
+ },
68
+ "levitating": {
69
+ "$value": "{shadow.300}"
70
+ },
71
+ "flying": {
72
+ "$value": "{shadow.400}"
73
+ },
74
+ "soaring": {
75
+ "$value": "{shadow.500}"
76
+ },
77
+ "summit": {
78
+ "$value": "{shadow.600}"
43
79
  }
44
80
  }
45
81
  }