@atom-learning/theme 3.0.0 → 3.1.0

package/lib/assets/quest/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="306" fill="none"><path fill="#162D22" d="M493.7 224.3c-6-7-6.4-9.7-6.4-16.8V59.7L407 73.6v6.3l12.7 16.5c5.6 7 6 10 6 17.2v84.1A35.5 35.5 0 0 1 396 215c-14.2 0-26.2-10.4-26.2-32.5V59.7l-80.4 13.8V80L302 96.3c5.6 7.1 6 10.1 6 17.2v79.3c0 44.9 29.2 64.4 59.5 64.4 27.3 0 44.5-13.5 58-34.4v34.8l81.6-11.6v-6.4l-13.5-15.3ZM677 184a52.7 52.7 0 0 1-49.4 31.3c-31.4 0-55-20.9-55.3-64h104.6c7.4 0 13.3-6.4 12.5-13.8-5-48.1-36.6-78.2-83.8-78.2-47.3 0-96.2 37.8-96.2 101.8 0 58.4 40.8 96.5 96.9 96.5 46.8 0 74.4-29.5 85.7-68.1l-15-5.6ZM604.8 81.3c16.5 0 25.1 13.8 25.1 27 0 13-7.5 19.8-23.5 19.8H573c2.2-28.8 14.6-46.8 31.8-46.8Zm192 49.1-8.3-3c-22.8-7.8-31.4-13.8-31.4-25.7 0-10.9 9-20.3 23.6-20.3 15.3 0 23.2 5.3 35.6 18l20.5 22.4h6.8l-2.2-52.4a205.9 205.9 0 0 0-58.8-9.7c-42.6 0-73.3 23.6-73.3 63.6 0 31 21 47.6 48.6 58l8.6 3.4c27.4 10.1 36 15.7 36 28.8 0 12.4-9.4 22.1-25.1 22.1-14.6 0-24-3.8-39-20.2L714.3 188h-6.8l2.2 58a221 221 0 0 0 65.9 11.2c41.9 0 76.3-22 76.3-66.6 0-33-21-48.7-55-60.3Zm193 75.3a26.7 26.7 0 0 1-23.5 11.5c-13 0-22.8-7-22.4-25l.3-104h51.6v-24h-51.6V11.4h-7l-76.8 70.4V88h23.2l-1.1 110.4c-.4 41.9 27.3 59.1 57.2 59.1 26.2 0 48.7-12.4 60.3-46l-10.1-6ZM190.6 7.8A156 156 0 0 0 141 0C61 0 0 58.4 0 137l.1 5.6c.1 2.4.2 4.8.5 7.2 4 50.9 32 91 73.4 111.3l3.4 1.6a151 151 0 0 0 61.8 12.9 154 154 0 0 0 57.3-10.7 134.2 134.2 0 0 0 71.3-69 143.3 143.3 0 0 0 12.3-48 153.8 153.8 0 0 0 .5-12.7c0-61.4-36-109.3-90-127.3ZM203 141.7v.1c0 2.4 0 4.7-.2 6.9-2.5 52.5-24.8 83.9-61.1 84h-.4c-40.6 0-61.2-33.8-63.7-87l-.2-5.3v-5.8c0-46.1 14.6-77.8 41-88.2l2.4-.8a56.4 56.4 0 0 1 18.3-2.9c43 0 64 37.8 64 95.8v3.3-.1Z"/><path fill="#162D22" d="M308.3 258 250 217.3a133.5 133.5 0 0 1-32.2 51l33.5 37.1 57-47.4Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="306" fill="none"><path fill="#185337" d="M493.7 224.3c-6-7-6.4-9.7-6.4-16.8V59.7L407 73.6v6.3l12.7 16.5c5.6 7 6 10 6 17.2v84.1A35.5 35.5 0 0 1 396 215c-14.2 0-26.2-10.4-26.2-32.5V59.7l-80.4 13.8V80L302 96.3c5.6 7.1 6 10.1 6 17.2v79.3c0 44.9 29.2 64.4 59.5 64.4 27.3 0 44.5-13.5 58-34.4v34.8l81.6-11.6v-6.4l-13.5-15.3ZM677 184a52.7 52.7 0 0 1-49.4 31.3c-31.4 0-55-20.9-55.3-64h104.6c7.4 0 13.3-6.4 12.5-13.8-5-48.1-36.6-78.2-83.8-78.2-47.3 0-96.2 37.8-96.2 101.8 0 58.4 40.8 96.5 96.9 96.5 46.8 0 74.4-29.5 85.7-68.1l-15-5.6ZM604.8 81.3c16.5 0 25.1 13.8 25.1 27 0 13-7.5 19.8-23.5 19.8H573c2.2-28.8 14.6-46.8 31.8-46.8Zm192 49.1-8.3-3c-22.8-7.8-31.4-13.8-31.4-25.7 0-10.9 9-20.3 23.6-20.3 15.3 0 23.2 5.3 35.6 18l20.5 22.4h6.8l-2.2-52.4a205.9 205.9 0 0 0-58.8-9.7c-42.6 0-73.3 23.6-73.3 63.6 0 31 21 47.6 48.6 58l8.6 3.4c27.4 10.1 36 15.7 36 28.8 0 12.4-9.4 22.1-25.1 22.1-14.6 0-24-3.8-39-20.2L714.3 188h-6.8l2.2 58a221 221 0 0 0 65.9 11.2c41.9 0 76.3-22 76.3-66.6 0-33-21-48.7-55-60.3Zm193 75.3a26.7 26.7 0 0 1-23.5 11.5c-13 0-22.8-7-22.4-25l.3-104h51.6v-24h-51.6V11.4h-7l-76.8 70.4V88h23.2l-1.1 110.4c-.4 41.9 27.3 59.1 57.2 59.1 26.2 0 48.7-12.4 60.3-46l-10.1-6ZM190.6 7.8A156 156 0 0 0 141 0C61 0 0 58.4 0 137l.1 5.6c.1 2.4.2 4.8.5 7.2 4 50.9 32 91 73.4 111.3l3.4 1.6a151 151 0 0 0 61.8 12.9 154 154 0 0 0 57.3-10.7 134.2 134.2 0 0 0 71.3-69 143.3 143.3 0 0 0 12.3-48 153.8 153.8 0 0 0 .5-12.7c0-61.4-36-109.3-90-127.3ZM203 141.7v.1c0 2.4 0 4.7-.2 6.9-2.5 52.5-24.8 83.9-61.1 84h-.4c-40.6 0-61.2-33.8-63.7-87l-.2-5.3v-5.8c0-46.1 14.6-77.8 41-88.2l2.4-.8a56.4 56.4 0 0 1 18.3-2.9c43 0 64 37.8 64 95.8v3.3-.1Z"/><path fill="#185337" d="M308.3 258 250 217.3a133.5 133.5 0 0 1-32.2 51l33.5 37.1 57-47.4Z"/></svg>

package/lib/theme-atom.d.ts

@@ -138,6 +138,42 @@ export type Theme = {
     "lime1000": string
     "lime1100": string
     "lime1200": string
+    "lapis100": string
+    "lapis200": string
+    "lapis300": string
+    "lapis400": string
+    "lapis500": string
+    "lapis600": string
+    "lapis700": string
+    "lapis800": string
+    "lapis900": string
+    "lapis1000": string
+    "lapis1100": string
+    "lapis1200": string
+    "maroon100": string
+    "maroon200": string
+    "maroon300": string
+    "maroon400": string
+    "maroon500": string
+    "maroon600": string
+    "maroon700": string
+    "maroon800": string
+    "maroon900": string
+    "maroon1000": string
+    "maroon1100": string
+    "maroon1200": string
+    "marsh100": string
+    "marsh200": string
+    "marsh300": string
+    "marsh400": string
+    "marsh500": string
+    "marsh600": string
+    "marsh700": string
+    "marsh800": string
+    "marsh900": string
+    "marsh1000": string
+    "marsh1100": string
+    "marsh1200": string
     "tonal50": string
     "tonal100": string
     "tonal200": string

package/lib/theme-atom.js

@@ -138,6 +138,42 @@ module.exports = {
     "lime1000": "hsl(75, 100%, 15%)",
     "lime1100": "hsl(75, 100%, 9%)",
     "lime1200": "hsl(74, 100%, 6%)",
+    "lapis100": "hsl(214, 100%, 97%)",
+    "lapis200": "hsl(215, 100%, 95%)",
+    "lapis300": "hsl(202, 100%, 87%)",
+    "lapis400": "hsl(212, 100%, 83%)",
+    "lapis500": "hsl(220, 95%, 76%)",
+    "lapis600": "hsl(230, 84%, 70%)",
+    "lapis700": "hsl(240, 79%, 66%)",
+    "lapis800": "hsl(240, 59%, 52%)",
+    "lapis900": "hsl(240, 58%, 38%)",
+    "lapis1000": "hsl(240, 63%, 29%)",
+    "lapis1100": "hsl(240, 87%, 18%)",
+    "lapis1200": "hsl(240, 97%, 12%)",
+    "maroon100": "hsl(15, 100%, 98%)",
+    "maroon200": "hsl(16, 100%, 93%)",
+    "maroon300": "hsl(16, 100%, 87%)",
+    "maroon400": "hsl(16, 100%, 80%)",
+    "maroon500": "hsl(7, 89%, 70%)",
+    "maroon600": "hsl(7, 78%, 60%)",
+    "maroon700": "hsl(7, 67%, 44%)",
+    "maroon800": "hsl(7, 95%, 32%)",
+    "maroon900": "hsl(349, 89%, 28%)",
+    "maroon1000": "hsl(346, 77%, 26%)",
+    "maroon1100": "hsl(335, 73%, 20%)",
+    "maroon1200": "hsl(335, 81%, 12%)",
+    "marsh100": "hsl(147, 50%, 96%)",
+    "marsh200": "hsl(147, 27%, 88%)",
+    "marsh300": "hsl(147, 26%, 82%)",
+    "marsh400": "hsl(147, 25%, 73%)",
+    "marsh500": "hsl(147, 22%, 60%)",
+    "marsh600": "hsl(147, 15%, 48%)",
+    "marsh700": "hsl(147, 15%, 37%)",
+    "marsh800": "hsl(147, 23%, 29%)",
+    "marsh900": "hsl(147, 25%, 21%)",
+    "marsh1000": "hsl(147, 17%, 18%)",
+    "marsh1100": "hsl(147, 24%, 13%)",
+    "marsh1200": "hsl(147, 14%, 7%)",
     "tonal50": "hsl(0, 0%, 96%)",
     "tonal100": "hsl(0, 0%, 92%)",
     "tonal200": "hsl(0, 0%, 62%)",

package/lib/theme-atom.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Jan 2024 15:58:08 GMT
+// Generated on Wed, 08 May 2024 08:09:34 GMT
 
 $color-text-bold: #1f1f1f;
 $color-text-regular: #333333;
@@ -140,6 +140,42 @@ $color-lime-900: #496100;
 $color-lime-1000: #394d00;
 $color-lime-1100: #222e00;
 $color-lime-1200: #171f00;
+$color-lapis-100: #f0f6ff;
+$color-lapis-200: #e5f0ff;
+$color-lapis-300: #bde7ff;
+$color-lapis-400: #a8d1ff;
+$color-lapis-500: #88aefc;
+$color-lapis-600: #7288f3;
+$color-lapis-700: #6464ed;
+$color-lapis-800: #3c3ccd;
+$color-lapis-900: #292999;
+$color-lapis-1000: #1b1b79;
+$color-lapis-1100: #060656;
+$color-lapis-1200: #01013c;
+$color-maroon-100: #fff7f5;
+$color-maroon-200: #ffe5db;
+$color-maroon-300: #ffcebd;
+$color-maroon-400: #ffb499;
+$color-maroon-500: #f77e6e;
+$color-maroon-600: #e95c49;
+$color-maroon-700: #bb3725;
+$color-maroon-800: #9f1604;
+$color-maroon-900: #87081f;
+$color-maroon-1000: #750f27;
+$color-maroon-1100: #580e2d;
+$color-maroon-1200: #37061a;
+$color-marsh-100: #f0faf4;
+$color-marsh-200: #d8e9e0;
+$color-marsh-300: #c5ddd0;
+$color-marsh-400: #a9cbb8;
+$color-marsh-500: #83af97;
+$color-marsh-600: #688d79;
+$color-marsh-700: #506d5d;
+$color-marsh-800: #395b48;
+$color-marsh-900: #284334;
+$color-marsh-1000: #26362d;
+$color-marsh-1100: #192920;
+$color-marsh-1200: #0f1412;
 $color-tonal-50: #f5f5f5;
 $color-tonal-100: #ebebeb;
 $color-tonal-200: #9e9e9e;

package/lib/theme-quest.d.ts

@@ -138,6 +138,42 @@ export type Theme = {
     "lime1000": string
     "lime1100": string
     "lime1200": string
+    "lapis100": string
+    "lapis200": string
+    "lapis300": string
+    "lapis400": string
+    "lapis500": string
+    "lapis600": string
+    "lapis700": string
+    "lapis800": string
+    "lapis900": string
+    "lapis1000": string
+    "lapis1100": string
+    "lapis1200": string
+    "maroon100": string
+    "maroon200": string
+    "maroon300": string
+    "maroon400": string
+    "maroon500": string
+    "maroon600": string
+    "maroon700": string
+    "maroon800": string
+    "maroon900": string
+    "maroon1000": string
+    "maroon1100": string
+    "maroon1200": string
+    "marsh100": string
+    "marsh200": string
+    "marsh300": string
+    "marsh400": string
+    "marsh500": string
+    "marsh600": string
+    "marsh700": string
+    "marsh800": string
+    "marsh900": string
+    "marsh1000": string
+    "marsh1100": string
+    "marsh1200": string
     "tonal50": string
     "tonal100": string
     "tonal200": string

package/lib/theme-quest.js

@@ -138,6 +138,42 @@ module.exports = {
     "lime1000": "hsl(75, 100%, 15%)",
     "lime1100": "hsl(75, 100%, 9%)",
     "lime1200": "hsl(74, 100%, 6%)",
+    "lapis100": "hsl(214, 100%, 97%)",
+    "lapis200": "hsl(215, 100%, 95%)",
+    "lapis300": "hsl(202, 100%, 87%)",
+    "lapis400": "hsl(212, 100%, 83%)",
+    "lapis500": "hsl(220, 95%, 76%)",
+    "lapis600": "hsl(230, 84%, 70%)",
+    "lapis700": "hsl(240, 79%, 66%)",
+    "lapis800": "hsl(240, 59%, 52%)",
+    "lapis900": "hsl(240, 58%, 38%)",
+    "lapis1000": "hsl(240, 63%, 29%)",
+    "lapis1100": "hsl(240, 87%, 18%)",
+    "lapis1200": "hsl(240, 97%, 12%)",
+    "maroon100": "hsl(15, 100%, 98%)",
+    "maroon200": "hsl(16, 100%, 93%)",
+    "maroon300": "hsl(16, 100%, 87%)",
+    "maroon400": "hsl(16, 100%, 80%)",
+    "maroon500": "hsl(7, 89%, 70%)",
+    "maroon600": "hsl(7, 78%, 60%)",
+    "maroon700": "hsl(7, 67%, 44%)",
+    "maroon800": "hsl(7, 95%, 32%)",
+    "maroon900": "hsl(349, 89%, 28%)",
+    "maroon1000": "hsl(346, 77%, 26%)",
+    "maroon1100": "hsl(335, 73%, 20%)",
+    "maroon1200": "hsl(335, 81%, 12%)",
+    "marsh100": "hsl(147, 50%, 96%)",
+    "marsh200": "hsl(147, 27%, 88%)",
+    "marsh300": "hsl(147, 26%, 82%)",
+    "marsh400": "hsl(147, 25%, 73%)",
+    "marsh500": "hsl(147, 22%, 60%)",
+    "marsh600": "hsl(147, 15%, 48%)",
+    "marsh700": "hsl(147, 15%, 37%)",
+    "marsh800": "hsl(147, 23%, 29%)",
+    "marsh900": "hsl(147, 25%, 21%)",
+    "marsh1000": "hsl(147, 17%, 18%)",
+    "marsh1100": "hsl(147, 24%, 13%)",
+    "marsh1200": "hsl(147, 14%, 7%)",
     "tonal50": "hsl(0, 0%, 96%)",
     "tonal100": "hsl(0, 0%, 92%)",
     "tonal200": "hsl(0, 0%, 62%)",
@@ -190,13 +226,13 @@ module.exports = {
     "primary300": "hsl(151, 53%, 83%)",
     "primary400": "hsl(151, 50%, 75%)",
     "primary500": "hsl(151, 46%, 64%)",
-    "primary600": "hsl(151, 42%, 49%)",
-    "primary700": "hsl(151, 51%, 35%)",
-    "primary800": "hsl(151, 63%, 29%)",
-    "primary900": "hsl(151, 55%, 21%)",
-    "primary1000": "hsl(151, 47%, 18%)",
-    "primary1100": "hsl(151, 34%, 13%)",
-    "primary1200": "hsl(151, 24%, 7%)"
+    "primary600": "hsl(158, 42%, 49%)",
+    "primary700": "hsl(162, 51%, 35%)",
+    "primary800": "hsl(162, 69%, 28%)",
+    "primary900": "hsl(164, 100%, 15%)",
+    "primary1000": "hsl(164, 100%, 13%)",
+    "primary1100": "hsl(150, 34%, 15%)",
+    "primary1200": "hsl(150, 30%, 9%)"
   },
   "space": {
     "0": "0.125rem",
@@ -225,7 +261,7 @@ module.exports = {
     "sans": "system-ui, -apple-system, 'Helvetica Neue', sans-serif",
     "mono": "'SFMono-Regular', Consolas, Menlo, monospace",
     "display": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif",
-    "body": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif"
+    "body": "'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif"
   },
   "sizes": {
     "0": "0.5rem",

package/lib/theme-quest.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Jan 2024 15:58:08 GMT
+// Generated on Wed, 08 May 2024 08:09:34 GMT
 
 $color-text-bold: #1f1f1f;
 $color-text-regular: #333333;
@@ -140,6 +140,42 @@ $color-lime-900: #496100;
 $color-lime-1000: #394d00;
 $color-lime-1100: #222e00;
 $color-lime-1200: #171f00;
+$color-lapis-100: #f0f6ff;
+$color-lapis-200: #e5f0ff;
+$color-lapis-300: #bde7ff;
+$color-lapis-400: #a8d1ff;
+$color-lapis-500: #88aefc;
+$color-lapis-600: #7288f3;
+$color-lapis-700: #6464ed;
+$color-lapis-800: #3c3ccd;
+$color-lapis-900: #292999;
+$color-lapis-1000: #1b1b79;
+$color-lapis-1100: #060656;
+$color-lapis-1200: #01013c;
+$color-maroon-100: #fff7f5;
+$color-maroon-200: #ffe5db;
+$color-maroon-300: #ffcebd;
+$color-maroon-400: #ffb499;
+$color-maroon-500: #f77e6e;
+$color-maroon-600: #e95c49;
+$color-maroon-700: #bb3725;
+$color-maroon-800: #9f1604;
+$color-maroon-900: #87081f;
+$color-maroon-1000: #750f27;
+$color-maroon-1100: #580e2d;
+$color-maroon-1200: #37061a;
+$color-marsh-100: #f0faf4;
+$color-marsh-200: #d8e9e0;
+$color-marsh-300: #c5ddd0;
+$color-marsh-400: #a9cbb8;
+$color-marsh-500: #83af97;
+$color-marsh-600: #688d79;
+$color-marsh-700: #506d5d;
+$color-marsh-800: #395b48;
+$color-marsh-900: #284334;
+$color-marsh-1000: #26362d;
+$color-marsh-1100: #192920;
+$color-marsh-1200: #0f1412;
 $color-tonal-50: #f5f5f5;
 $color-tonal-100: #ebebeb;
 $color-tonal-200: #9e9e9e;
@@ -192,17 +228,17 @@ $color-primary-200: #def7eb;
 $color-primary-300: #bdebd4;
 $color-primary-400: #9fdfc0;
 $color-primary-500: #79cda5;
-$color-primary-600: #48b17f;
-$color-primary-700: #2c875b;
-$color-primary-800: #1b794c;
-$color-primary-900: #185337;
-$color-primary-1000: #18432f;
-$color-primary-1100: #162c22;
-$color-primary-1200: #0e1612;
+$color-primary-600: #48b18b;
+$color-primary-700: #2c876b;
+$color-primary-800: #16795b;
+$color-primary-900: #004d38;
+$color-primary-1000: #004231;
+$color-primary-1100: #193326;
+$color-primary-1200: #101e17;
 $font-families-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
 $font-families-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
 $font-families-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
-$font-families-body: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+$font-families-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
 
 $effects-shadows: (
   0: (0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15)),

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@atom-learning/theme",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Design tokens and assets for Atom Learning",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "build:lib": "node ./scripts/build.js --theme=atom && node ./scripts/build.js --theme=quest",
-    "build:docs": "cp -r ./src/documentation/. ./lib",
-    "prepublishOnly": "run-s clean build:lib build:docs",
+    "build": "node ./scripts/build.js --theme=atom && node ./scripts/build.js --theme=quest",
+    "prepublishOnly": "run-s clean build",
     "clean": "del ./lib"
   },
   "files": [

package/lib/Colours.mdx

@@ -1,5 +0,0 @@
----
-title: Colours
----
-
-<ColorPalette colors={theme.colors} />

package/lib/Effects.mdx

@@ -1,13 +0,0 @@
----
-title: Effects
----
-
-## Shadows
-
-<Scale scale={theme.shadows} css={{ mb: '$5' }} displayValue={false}>
-  {(value) => (
-    <Box
-      css={{ boxShadow: value, bg: 'white', borderRadius: '$1', size: '$5' }}
-    />
-  )}
-</Scale>

package/lib/Icons.mdx

@@ -1,8 +0,0 @@
----
-title: Icons
-description: Our icons are useful, easy to understand symbols for common actions and items
----
-
-The current icon set is from [Ikonate](https://ikonate.com/). To read about how to use these icons, go to the [Icon](/components/icon) component page and follow the instructions. You can click any of the icons below to copy the relevant `Icon` name.
-
-<IconTable css={{ my: '$5' }} />

package/lib/LayoutAndSpace.mdx

@@ -1,69 +0,0 @@
----
-title: Layout and space
-description: Visualising the space in and around components is tricky. This page demonstrates the levels of spacing that can be applied through our space and size scales.
----
-
-## Space
-
-This scale will apply to the space between and internal to elements, it applies to the following common CSS layout properties, `margin`, `padding`, `grid-gap` and flexbox `gap`.
-
-<Scale scale={theme.space} css={{ mb: '$5' }}>
-  {(value) => <Box css={{ height: '$1', width: value, bg: '$primary' }} />}
-</Scale>
-
-## Size
-
-The size scale is used when defining the dimensions of an element, it applies to the following common CSS properties, `width` and `height`, including the `max` and `min` of both.
-
-<Scale scale={theme.sizes} css={{ mb: '$5' }}>
-  {(value) => <Box css={{ size: value, bg: '$primary' }} />}
-</Scale>
-
-## Radius
-
-The radii scale uses similar scale values for applying a border-radius.
-
-<Scale scale={theme.radii} css={{ mb: '$5' }}>
-  {(value) => (
-    <Box
-      css={{
-        borderRadius: value,
-        bg: '$primary',
-        size: '$5'
-      }}
-    />
-  )}
-</Scale>
-
-## Example
-
-The following "Avatar" style component is created using the size, space and radii scale. A `size` of `$3` is used to set the `height` and `width`, `mr` and `mb` are used to set the spacing between elements, and the `$round` token is used to apply a circluar border-radius.
-
-```jsx preview
-<Flex
-  css={{
-    alignItems: 'center',
-    border: '1px solid $tonal300',
-    borderRadius: '$2',
-    p: '$3',
-    width: '320px'
-  }}
->
-  <Box
-    css={{
-      bg: '$primary',
-      borderRadius: '$round',
-      size: '$5',
-      mr: '$3'
-    }}
-  />
-  <Flex css={{ flexDirection: 'column' }}>
-    <Heading size="sm" css={{ mb: '$3' }}>
-      Steve Brusatte
-    </Heading>
-    <Text size="sm" css={{ color: '$tonal600' }}>
-      @SteveBrusatte
-    </Text>
-  </Flex>
-</Flex>
-```

package/lib/Typography.mdx

@@ -1,46 +0,0 @@
----
-title: Typography
-description: We have a variety of Text components to provide consistent typography throughout the application. You can read more about those specific font styles in the Text component documentation.
----
-
-## Fonts
-
-<Scale scale={theme.fonts} css={{ mb: '$6' }} displayValue={false}>
-  {(value) => (
-    <Box css={{ pl: '$3', textAlign: 'right' }}>
-      <Text
-        css={{
-          fontFamily: value,
-          fontSize: '$2xl',
-          mb: '$4',
-          '@md': { fontSize: '$3xl' }
-        }}
-      >
-        Abc-Xyz
-      </Text>
-      <Text size="sm" css={{ color: '$tonal600', fontFamily: '$body' }}>
-        {value}
-      </Text>
-    </Box>
-  )}
-</Scale>
-
-## Sizes
-
-This typographic sizing scale represents the `font-size` values used in our components. It loosely follows the [Perfect Fourth](https://type-scale.com/?scale=1.333&font=Inter) scale and can be accessed by using t-shirt notation
-
-<Scale scale={theme.fontSizes} css={{ mb: '$6' }}>
-  {(value) => (
-    <Text css={{ fontSize: value, whiteSpace: 'nowrap' }}>Hello World</Text>
-  )}
-</Scale>
-
-Note that most of our typography components (`Text`, `Heading`, `Label` and others) use [capsize](https://seek-oss.github.io/capsize/) to offset the white-space between the cap-height and the line-height. This means that spacing in and around our text will be tight to the characters.
-
-```jsx preview
-<Box css={{ bg: '$tonal100', p: '$5' }}>
-  <Text size="xl" css={{ bg: 'white' }}>
-    Hello World
-  </Text>
-</Box>
-```