@twentyfirstmedia/pro 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 (12) hide show
  1. package/dist/fonts/og/geist-latin-400-normal.woff +0 -0
  2. package/dist/fonts/og/geist-latin-500-normal.woff +0 -0
  3. package/dist/fonts/og/geist-latin-600-normal.woff +0 -0
  4. package/dist/fonts/og/geist-latin-700-normal.woff +0 -0
  5. package/dist/fonts/og/geist-mono-latin-500-normal.woff +0 -0
  6. package/dist/fonts/og/geist-mono-latin-600-normal.woff +0 -0
  7. package/dist/scoped.css +1124 -38
  8. package/dist/styles.css +1124 -38
  9. package/dist/tailwind.css +5 -0
  10. package/dist/tokens.css +25 -0
  11. package/dist/tokens.json +40 -0
  12. package/package.json +4 -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(--fg-300);
269
269
  --chart-butter: var(--fg-200);
270
270
  --chart-blush: var(--line-300);
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: #5cc28f;
272
277
  --ok-bg: rgba(92,194,143,0.12);
273
278
  --info: #7aa7f5;
@@ -416,6 +421,11 @@
416
421
  --chart-lilac: var(--fg-300);
417
422
  --chart-butter: var(--fg-200);
418
423
  --chart-blush: var(--line-300);
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: #5cc28f;
420
430
  --ok-bg: rgba(92,194,143,0.12);
421
431
  --info: #7aa7f5;
@@ -565,6 +575,11 @@
565
575
  --chart-lilac: var(--fg-300);
566
576
  --chart-butter: var(--fg-200);
567
577
  --chart-blush: var(--line-300);
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: #177447;
569
584
  --ok-bg: rgba(23,116,71,0.09);
570
585
  --info: #2856b0;
@@ -713,6 +728,11 @@
713
728
  --chart-lilac: var(--fg-300);
714
729
  --chart-butter: var(--fg-200);
715
730
  --chart-blush: var(--line-300);
731
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
732
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
733
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
734
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
735
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
716
736
  --ok: #5cc28f;
717
737
  --ok-bg: rgba(92,194,143,0.12);
718
738
  --info: #7aa7f5;
@@ -860,6 +880,11 @@
860
880
  --chart-lilac: var(--fg-300);
861
881
  --chart-butter: var(--fg-200);
862
882
  --chart-blush: var(--line-300);
883
+ --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
884
+ --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
885
+ --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
886
+ --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
887
+ --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
863
888
  --ok: #177447;
864
889
  --ok-bg: rgba(23,116,71,0.09);
865
890
  --info: #2856b0;
package/dist/tokens.json CHANGED
@@ -739,6 +739,46 @@
739
739
  },
740
740
  "usage": "Chart series tinted blush: a step of the monochrome ramp (charts carry no decorative colour)."
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/pro",
3
- "version": "0.4.0",
3
+ "version": "0.6.0",
4
4
  "description": "Pro: sharp, dense, hairline grid, dark-first. Same components and props as Halo.",
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,8 @@
63
63
  "devDependencies": {
64
64
  "@fontsource-variable/geist": "5.3.0",
65
65
  "@fontsource-variable/geist-mono": "5.3.0",
66
+ "@fontsource/geist": "5.3.0",
67
+ "@fontsource/geist-mono": "5.3.0",
66
68
  "@types/node": "26.6.6",
67
69
  "typescript": "6.0.3",
68
70
  "vitest": "5.1.0"