@atom-learning/theme 6.0.0-beta.6 → 6.0.0-beta.8

package/lib/media.d.ts

@@ -0,0 +1,8 @@
+export const media: {
+  sm: "(min-width: 34.375rem)"
+  md: "(min-width: 50rem)"
+  lg: "(min-width: 68.75rem)"
+  xl: "(min-width: 84.375rem)"
+}
+
+export type Media = typeof media

package/lib/media.js

@@ -0,0 +1,6 @@
+export const media = {
+  "sm": "(min-width: 34.375rem)",
+  "md": "(min-width: 50rem)",
+  "lg": "(min-width: 68.75rem)",
+  "xl": "(min-width: 84.375rem)"
+}

package/lib/theme-base.css

@@ -11,8 +11,8 @@
   --color-text-minimal: hsl(0, 0%, 46%);
   --color-background: hsl(0, 0%, 96%);
   --color-background-accent: hsl(215, 100%, 98%);
-  --color-black: hsl(0, 0%, 0%);
-  --color-white: hsl(0, 0%, 100%);
+  --color-black: #000;
+  --color-white: #fff;
   --color-grey-100: hsl(0, 0%, 96%);
   --color-grey-200: hsl(0, 0%, 92%);
   --color-grey-300: hsl(0, 0%, 88%);
@@ -84,7 +84,7 @@
   --color-green-900: hsl(166, 71%, 24%);
   --color-green-1000: hsl(166, 67%, 20%);
   --color-green-1100: hsl(169, 88%, 10%);
-  --color-green-1200: hsl(155, 92%, 5%);
+  --color-green-1200: hsl(155, 93%, 5%);
   --color-magenta-100: hsl(330, 100%, 99%);
   --color-magenta-200: hsl(329, 100%, 96%);
   --color-magenta-300: hsl(332, 100%, 92%);

package/lib/theme-base.d.ts

@@ -6,8 +6,8 @@ export const theme: {
     textMinimal: "hsl(0, 0%, 46%)"
     background: "hsl(0, 0%, 96%)"
     backgroundAccent: "hsl(215, 100%, 98%)"
-    black: "hsl(0, 0%, 0%)"
-    white: "hsl(0, 0%, 100%)"
+    black: "#000"
+    white: "#fff"
     grey100: "hsl(0, 0%, 96%)"
     grey200: "hsl(0, 0%, 92%)"
     grey300: "hsl(0, 0%, 88%)"
@@ -79,7 +79,7 @@ export const theme: {
     green900: "hsl(166, 71%, 24%)"
     green1000: "hsl(166, 67%, 20%)"
     green1100: "hsl(169, 88%, 10%)"
-    green1200: "hsl(155, 92%, 5%)"
+    green1200: "hsl(155, 93%, 5%)"
     magenta100: "hsl(330, 100%, 99%)"
     magenta200: "hsl(329, 100%, 96%)"
     magenta300: "hsl(332, 100%, 92%)"
@@ -239,7 +239,7 @@ export const theme: {
     glBlueDark: "hsl(222, 35%, 43%)"
   }
   space: {
-    base: "0.25rem"
+    base: "0.25"
   }
   fontSizes: {
     xs: "0.75rem"
@@ -258,10 +258,10 @@ export const theme: {
     body: "system-ui, -apple-system, \'Helvetica Neue\', sans-serif"
   }
   radii: {
-    sm: "0.25rem"
-    md: "0.5rem"
-    lg: "0.75rem"
-    xl: "1rem"
+    sm: "0.25"
+    md: "0.5"
+    lg: "0.75"
+    xl: "1"
   }
   shadows: {
     sm: "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)"
@@ -280,8 +280,8 @@ export const properties: {
   '--color-text-minimal': "hsl(0, 0%, 46%)"
   '--color-background': "hsl(0, 0%, 96%)"
   '--color-background-accent': "hsl(215, 100%, 98%)"
-  '--color-black': "hsl(0, 0%, 0%)"
-  '--color-white': "hsl(0, 0%, 100%)"
+  '--color-black': "#000"
+  '--color-white': "#fff"
   '--color-grey-100': "hsl(0, 0%, 96%)"
   '--color-grey-200': "hsl(0, 0%, 92%)"
   '--color-grey-300': "hsl(0, 0%, 88%)"
@@ -353,7 +353,7 @@ export const properties: {
   '--color-green-900': "hsl(166, 71%, 24%)"
   '--color-green-1000': "hsl(166, 67%, 20%)"
   '--color-green-1100': "hsl(169, 88%, 10%)"
-  '--color-green-1200': "hsl(155, 92%, 5%)"
+  '--color-green-1200': "hsl(155, 93%, 5%)"
   '--color-magenta-100': "hsl(330, 100%, 99%)"
   '--color-magenta-200': "hsl(329, 100%, 96%)"
   '--color-magenta-300': "hsl(332, 100%, 92%)"
@@ -523,10 +523,10 @@ export const properties: {
   '--text-2xl': "2.3125rem"
   '--text-3xl': "3.125rem"
   '--text-4xl': "5.625rem"
-  '--radius-sm': "0.25rem"
-  '--radius-md': "0.5rem"
-  '--radius-lg': "0.75rem"
-  '--radius-xl': "1rem"
+  '--radius-sm': "0.25"
+  '--radius-md': "0.5"
+  '--radius-lg': "0.75"
+  '--radius-xl': "1"
   '--shadow-sm': "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)"
   '--shadow-md': "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)"
   '--shadow-lg': "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)"

package/lib/theme-base.js

@@ -6,8 +6,8 @@ export const theme = {
     "textMinimal": "hsl(0, 0%, 46%)",
     "background": "hsl(0, 0%, 96%)",
     "backgroundAccent": "hsl(215, 100%, 98%)",
-    "black": "hsl(0, 0%, 0%)",
-    "white": "hsl(0, 0%, 100%)",
+    "black": "#000",
+    "white": "#fff",
     "grey100": "hsl(0, 0%, 96%)",
     "grey200": "hsl(0, 0%, 92%)",
     "grey300": "hsl(0, 0%, 88%)",
@@ -79,7 +79,7 @@ export const theme = {
     "green900": "hsl(166, 71%, 24%)",
     "green1000": "hsl(166, 67%, 20%)",
     "green1100": "hsl(169, 88%, 10%)",
-    "green1200": "hsl(155, 92%, 5%)",
+    "green1200": "hsl(155, 93%, 5%)",
     "magenta100": "hsl(330, 100%, 99%)",
     "magenta200": "hsl(329, 100%, 96%)",
     "magenta300": "hsl(332, 100%, 92%)",
@@ -239,7 +239,7 @@ export const theme = {
     "glBlueDark": "hsl(222, 35%, 43%)"
   },
   "space": {
-    "base": "0.25rem"
+    "base": "0.25"
   },
   "fontSizes": {
     "xs": "0.75rem",
@@ -258,10 +258,10 @@ export const theme = {
     "body": "system-ui, -apple-system, 'Helvetica Neue', sans-serif"
   },
   "radii": {
-    "sm": "0.25rem",
-    "md": "0.5rem",
-    "lg": "0.75rem",
-    "xl": "1rem"
+    "sm": "0.25",
+    "md": "0.5",
+    "lg": "0.75",
+    "xl": "1"
   },
   "shadows": {
     "sm": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
@@ -278,8 +278,8 @@ export const properties = {
   "--color-text-minimal": "hsl(0, 0%, 46%)",
   "--color-background": "hsl(0, 0%, 96%)",
   "--color-background-accent": "hsl(215, 100%, 98%)",
-  "--color-black": "hsl(0, 0%, 0%)",
-  "--color-white": "hsl(0, 0%, 100%)",
+  "--color-black": "#000",
+  "--color-white": "#fff",
   "--color-grey-100": "hsl(0, 0%, 96%)",
   "--color-grey-200": "hsl(0, 0%, 92%)",
   "--color-grey-300": "hsl(0, 0%, 88%)",
@@ -351,7 +351,7 @@ export const properties = {
   "--color-green-900": "hsl(166, 71%, 24%)",
   "--color-green-1000": "hsl(166, 67%, 20%)",
   "--color-green-1100": "hsl(169, 88%, 10%)",
-  "--color-green-1200": "hsl(155, 92%, 5%)",
+  "--color-green-1200": "hsl(155, 93%, 5%)",
   "--color-magenta-100": "hsl(330, 100%, 99%)",
   "--color-magenta-200": "hsl(329, 100%, 96%)",
   "--color-magenta-300": "hsl(332, 100%, 92%)",
@@ -521,10 +521,10 @@ export const properties = {
   "--text-2xl": "2.3125rem",
   "--text-3xl": "3.125rem",
   "--text-4xl": "5.625rem",
-  "--radius-sm": "0.25rem",
-  "--radius-md": "0.5rem",
-  "--radius-lg": "0.75rem",
-  "--radius-xl": "1rem",
+  "--radius-sm": "0.25",
+  "--radius-md": "0.5",
+  "--radius-lg": "0.75",
+  "--radius-xl": "1",
   "--shadow-sm": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
   "--shadow-md": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
   "--shadow-lg": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",

package/lib/themes.css

@@ -0,0 +1,64 @@
+@layer theme {
+  .theme-atom {
+  --color-primary-100: hsl(215, 100%, 98%);
+  --color-primary-200: hsl(212, 100%, 95%);
+  --color-primary-300: hsl(211, 100%, 92%);
+  --color-primary-400: hsl(211, 100%, 88%);
+  --color-primary-500: hsl(212, 100%, 80%);
+  --color-primary-600: hsl(213, 100%, 71%);
+  --color-primary-700: hsl(214, 100%, 58%);
+  --color-primary-800: hsl(217, 92%, 51%);
+  --color-primary-900: hsl(223, 79%, 44%);
+  --color-primary-1000: hsl(228, 82%, 35%);
+  --color-primary-1100: hsl(228, 63%, 23%);
+  --color-primary-1200: hsl(227, 57%, 11%);
+  --font-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  }
+}
+
+@layer theme {
+  .theme-quest-reports {
+  --color-primary-100: hsl(151, 70%, 96%);
+  --color-primary-200: hsl(151, 62%, 92%);
+  --color-primary-300: hsl(151, 53%, 83%);
+  --color-primary-400: hsl(151, 50%, 75%);
+  --color-primary-500: hsl(151, 46%, 64%);
+  --color-primary-600: hsl(158, 42%, 49%);
+  --color-primary-700: hsl(162, 51%, 35%);
+  --color-primary-800: hsl(162, 69%, 28%);
+  --color-primary-900: hsl(164, 100%, 15%);
+  --color-primary-1000: hsl(164, 100%, 13%);
+  --color-primary-1100: hsl(150, 34%, 15%);
+  --color-primary-1200: hsl(150, 30%, 9%);
+  --text-xs: 0.625rem;
+  --text-sm: 0.75rem;
+  --text-md: 0.875rem;
+  --text-lg: 1rem;
+  --text-xl: 1.3125rem;
+  --text-2xl: 1.75rem;
+  --text-3xl: 2.3125rem;
+  --text-4xl: 3.125rem;
+  --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  }
+}
+
+@layer theme {
+  .theme-quest {
+  --color-primary-100: hsl(151, 70%, 96%);
+  --color-primary-200: hsl(151, 62%, 92%);
+  --color-primary-300: hsl(151, 53%, 83%);
+  --color-primary-400: hsl(151, 50%, 75%);
+  --color-primary-500: hsl(151, 46%, 64%);
+  --color-primary-600: hsl(158, 42%, 49%);
+  --color-primary-700: hsl(162, 51%, 35%);
+  --color-primary-800: hsl(162, 69%, 28%);
+  --color-primary-900: hsl(164, 100%, 15%);
+  --color-primary-1000: hsl(164, 100%, 13%);
+  --color-primary-1100: hsl(150, 34%, 15%);
+  --color-primary-1200: hsl(150, 30%, 9%);
+  --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  }
+}

package/package.json

@@ -1,30 +1,33 @@
 {
   "name": "@atom-learning/theme",
-  "version": "6.0.0-beta.6",
+  "version": "6.0.0-beta.8",
   "description": "Design tokens and assets for Atom Learning and Quest",
+  "type": "module",
   "main": "lib/theme-base.js",
   "types": "lib/theme-base.d.ts",
   "scripts": {
-    "build": "node ./scripts/build.js --path=./src/themes",
+    "build": "node ./src/build.ts --path=./src/themes",
     "prepublishOnly": "run-s clean build test:run",
     "clean": "del ./lib",
     "test": "vitest",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "validate:types": "tsc --noEmit"
   },
   "files": [
-    "lib",
-    "theme-map.js"
+    "lib"
   ],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@types/node": "^20.0.0",
     "del-cli": "^3.0.1",
     "dree": "^5.1.5",
     "npm-run-all": "^4.1.5",
     "pascal-case": "^3.1.2",
-    "style-dictionary": "^3.0.1",
-    "vitest": "^4.0.16",
-    "yargs": "^17.7.2"
+    "style-dictionary": "^5.1.1",
+    "tsx": "^4.7.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
   },
   "dependencies": {},
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",
@@ -34,25 +37,28 @@
       "style": "./lib/theme-base.css",
       "default": "./lib/theme-base.js"
     },
-    "./base.css": "./lib/theme-base.css",
+    "./media": {
+      "types": "./lib/media.d.ts",
+      "default": "./lib/media.js"
+    },
     "./quest": {
       "types": "./lib/theme-quest.d.ts",
       "style": "./lib/theme-quest.css",
       "default": "./lib/theme-quest.js"
     },
-    "./quest.css": "./lib/theme-quest.css",
     "./atom": {
       "types": "./lib/theme-atom.d.ts",
       "style": "./lib/theme-atom.css",
       "default": "./lib/theme-atom.js"
     },
-    "./atom.css": "./lib/theme-atom.css",
     "./quest-reports": {
       "types": "./lib/theme-quest-reports.d.ts",
       "style": "./lib/theme-quest-reports.css",
       "default": "./lib/theme-quest-reports.js"
     },
-    "./quest-reports.css": "./lib/theme-quest-reports.css",
+    "./themes": {
+      "style": "./lib/themes.css"
+    },
     "./assets/fonts/national-2-condensed-bold.woff2": "./lib/assets/fonts/national-2-condensed-bold.woff2",
     "./assets/logos/atom/atom-home-light.svg": "./lib/assets/logos/atom/atom-home-light.svg",
     "./assets/logos/atom/atom-home-primary.svg": "./lib/assets/logos/atom/atom-home-primary.svg",
@@ -87,6 +93,9 @@
       ],
       "quest-reports": [
         "./lib/theme-quest-reports.d.ts"
+      ],
+      "media": [
+        "./lib/media.d.ts"
       ]
     }
   }

package/theme-map.js

@@ -1,5 +0,0 @@
-module.exports = {
-  themeMap: {
-    aspectRatio: 'ratios'
-  }
-}