@twentyfirstmedia/halo 0.4.0 → 0.6.0

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 (13) hide show
  1. package/dist/fonts/og/ibm-plex-mono-latin-500-normal.woff +0 -0
  2. package/dist/fonts/og/ibm-plex-mono-latin-600-normal.woff +0 -0
  3. package/dist/fonts/og/plus-jakarta-sans-latin-400-normal.woff +0 -0
  4. package/dist/fonts/og/plus-jakarta-sans-latin-500-normal.woff +0 -0
  5. package/dist/fonts/og/plus-jakarta-sans-latin-600-normal.woff +0 -0
  6. package/dist/fonts/og/plus-jakarta-sans-latin-700-normal.woff +0 -0
  7. package/dist/fonts/og/plus-jakarta-sans-latin-800-normal.woff +0 -0
  8. package/dist/scoped.css +1121 -38
  9. package/dist/styles.css +1121 -38
  10. package/dist/tailwind.css +5 -0
  11. package/dist/tokens.css +30 -0
  12. package/dist/tokens.json +40 -0
  13. package/package.json +3 -2
package/dist/tailwind.css CHANGED
@@ -95,6 +95,11 @@
95
95
  --color-chart-lilac: var(--chart-lilac);
96
96
  --color-chart-butter: var(--chart-butter);
97
97
  --color-chart-blush: var(--chart-blush);
98
+ --color-ramp-1: var(--ramp-1);
99
+ --color-ramp-2: var(--ramp-2);
100
+ --color-ramp-3: var(--ramp-3);
101
+ --color-ramp-4: var(--ramp-4);
102
+ --color-ramp-5: var(--ramp-5);
98
103
  --color-ok: var(--ok);
99
104
  --color-ok-bg: var(--ok-bg);
100
105
  --color-info: var(--info);
package/dist/tokens.css CHANGED
@@ -268,6 +268,11 @@
268
268
  --chart-lilac: var(--lilac);
269
269
  --chart-butter: var(--butter);
270
270
  --chart-blush: var(--blush);
271
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
272
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
273
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
274
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
275
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
271
276
  --ok: #2f5d16;
272
277
  --ok-bg: #d6efc3;
273
278
  --info: #1f4f8a;
@@ -416,6 +421,11 @@
416
421
  --chart-lilac: var(--lilac-ink);
417
422
  --chart-butter: var(--butter-ink);
418
423
  --chart-blush: var(--blush-ink);
424
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
425
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
426
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
427
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
428
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
419
429
  --ok: #a8db86;
420
430
  --ok-bg: #24401a;
421
431
  --info: #9cc6f7;
@@ -565,6 +575,11 @@
565
575
  --chart-lilac: var(--lilac-ink);
566
576
  --chart-butter: var(--butter-ink);
567
577
  --chart-blush: var(--blush-ink);
578
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
579
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
580
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
581
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
582
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
568
583
  --ok: #a8db86;
569
584
  --ok-bg: #24401a;
570
585
  --info: #9cc6f7;
@@ -714,6 +729,11 @@
714
729
  --chart-lilac: var(--lilac);
715
730
  --chart-butter: var(--butter);
716
731
  --chart-blush: var(--blush);
732
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
733
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
734
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
735
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
736
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
717
737
  --ok: #2f5d16;
718
738
  --ok-bg: #d6efc3;
719
739
  --info: #1f4f8a;
@@ -862,6 +882,11 @@
862
882
  --chart-lilac: var(--lilac-ink);
863
883
  --chart-butter: var(--butter-ink);
864
884
  --chart-blush: var(--blush-ink);
885
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
886
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
887
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
888
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
889
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
865
890
  --ok: #a8db86;
866
891
  --ok-bg: #24401a;
867
892
  --info: #9cc6f7;
@@ -1009,6 +1034,11 @@
1009
1034
  --chart-lilac: var(--lilac);
1010
1035
  --chart-butter: var(--butter);
1011
1036
  --chart-blush: var(--blush);
1037
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
1038
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
1039
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
1040
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
1041
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
1012
1042
  --ok: #2f5d16;
1013
1043
  --ok-bg: #d6efc3;
1014
1044
  --info: #1f4f8a;
package/dist/tokens.json CHANGED
@@ -739,6 +739,46 @@
739
739
  },
740
740
  "usage": "Chart bars and segments tinted blush: the tint in light, its -ink partner in dark."
741
741
  },
742
+ {
743
+ "name": "ramp-1",
744
+ "value": {
745
+ "light": "color-mix(in oklab, {chart-1} 12%, {background})",
746
+ "dark": "color-mix(in oklab, {chart-1} 12%, {background})"
747
+ },
748
+ "usage": "Map and heatmap ramp, step 1 of 5 (lightest): calm sequential colours for values such as price per m² or density, mixed from `chart-1` and the background."
749
+ },
750
+ {
751
+ "name": "ramp-2",
752
+ "value": {
753
+ "light": "color-mix(in oklab, {chart-1} 28%, {background})",
754
+ "dark": "color-mix(in oklab, {chart-1} 28%, {background})"
755
+ },
756
+ "usage": "Map and heatmap ramp, step 2 of 5 (middle): calm sequential colours for values such as price per m² or density, mixed from `chart-1` and the background."
757
+ },
758
+ {
759
+ "name": "ramp-3",
760
+ "value": {
761
+ "light": "color-mix(in oklab, {chart-1} 46%, {background})",
762
+ "dark": "color-mix(in oklab, {chart-1} 46%, {background})"
763
+ },
764
+ "usage": "Map and heatmap ramp, step 3 of 5 (middle): calm sequential colours for values such as price per m² or density, mixed from `chart-1` and the background."
765
+ },
766
+ {
767
+ "name": "ramp-4",
768
+ "value": {
769
+ "light": "color-mix(in oklab, {chart-1} 66%, {background})",
770
+ "dark": "color-mix(in oklab, {chart-1} 66%, {background})"
771
+ },
772
+ "usage": "Map and heatmap ramp, step 4 of 5 (middle): calm sequential colours for values such as price per m² or density, mixed from `chart-1` and the background."
773
+ },
774
+ {
775
+ "name": "ramp-5",
776
+ "value": {
777
+ "light": "color-mix(in oklab, {chart-1} 88%, {background})",
778
+ "dark": "color-mix(in oklab, {chart-1} 88%, {background})"
779
+ },
780
+ "usage": "Map and heatmap ramp, step 5 of 5 (strongest): calm sequential colours for values such as price per m² or density, mixed from `chart-1` and the background."
781
+ },
742
782
  {
743
783
  "name": "ok",
744
784
  "value": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twentyfirstmedia/halo",
3
- "version": "0.4.0",
3
+ "version": "0.6.0",
4
4
  "description": "Halo: soft, rounded, light-first. Same components and props as Pro.",
5
5
  "license": "MIT",
6
6
  "author": "Twentyfirst Media (https://twentyfirst.media)",
@@ -54,7 +54,7 @@
54
54
  "dist"
55
55
  ],
56
56
  "dependencies": {
57
- "@twentyfirstmedia/ui-core": "0.4.0"
57
+ "@twentyfirstmedia/ui-core": "0.6.0"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "react": ">=18.3",
@@ -63,6 +63,7 @@
63
63
  "devDependencies": {
64
64
  "@fontsource-variable/plus-jakarta-sans": "5.3.0",
65
65
  "@fontsource/ibm-plex-mono": "5.3.0",
66
+ "@fontsource/plus-jakarta-sans": "5.3.0",
66
67
  "@types/node": "26.6.6",
67
68
  "typescript": "6.0.3",
68
69
  "vitest": "5.1.0"