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

package/lib/theme-base.css

@@ -193,18 +193,18 @@
   --color-marsh-1000: hsl(147, 17%, 18%);
   --color-marsh-1100: hsl(147, 24%, 13%);
   --color-marsh-1200: hsl(147, 14%, 7%);
-  --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%);
+  --color-coolGrey-100: hsl(206, 47%, 97%);
+  --color-coolGrey-200: hsl(205, 35%, 93%);
+  --color-coolGrey-300: hsl(206, 27%, 90%);
+  --color-coolGrey-400: hsl(205, 20%, 83%);
+  --color-coolGrey-500: hsl(207, 16%, 76%);
+  --color-coolGrey-600: hsl(207, 14%, 65%);
+  --color-coolGrey-700: hsl(206, 9%, 49%);
+  --color-coolGrey-800: hsl(207, 11%, 35%);
+  --color-coolGrey-900: hsl(208, 15%, 22%);
+  --color-coolGrey-1000: hsl(208, 19%, 14%);
+  --color-coolGrey-1100: hsl(207, 20%, 11%);
+  --color-coolGrey-1200: hsl(210, 18%, 7%);
   --color-alpha-100: hsla(0, 0%, 20%, 0.1);
   --color-alpha-150: hsla(0, 0%, 20%, 0.15);
   --color-alpha-200: hsla(0, 0%, 20%, 0.2);
@@ -235,9 +235,10 @@
   --color-subject-creative-writing: hsl(35, 95%, 50%);
   --color-subject-exam-skills: hsl(257, 53%, 35%);
   --color-subject-gcse-english-literature: hsl(333, 75%, 59%);
+  --color-subject-gcse-english-language: hsl(256, 65%, 62%);
   --color-subject-gcse-maths: hsl(214, 100%, 58%);
   --color-subject-gcse-chemistry: hsl(35, 95%, 50%);
-  --color-subject-gcse-physics: hsl(0, 0%, 46%);
+  --color-subject-gcse-physics: hsl(206, 9%, 49%);
   --color-subject-gcse-biology: hsl(148, 84%, 36%);
   --color-gl-light: hsl(222, 68%, 78%);
   --color-gl-primary: hsl(222, 56%, 55%);
@@ -254,6 +255,15 @@
   --text-2xl: 2.3125rem;
   --text-3xl: 3.125rem;
   --text-4xl: 5.625rem;
+  --text-xs--line-height: 1.6;
+  --text-sm--line-height: 1.53;
+  --text-md--line-height: 1.5;
+  --text-lg--line-height: 1.52;
+  --text-xl--line-height: 1.42;
+  --text-2xl--line-height: 1.08;
+  --text-3xl--line-height: 1.12;
+  --text-4xl--line-height: 1;
+  --spacing: 0.25rem;
   --radius-sm: 0.25rem;
   --radius-md: 0.5rem;
   --radius-lg: 0.75rem;

package/lib/theme-base.d.ts

@@ -188,18 +188,18 @@ export const theme: {
     marsh1000: "hsl(147, 17%, 18%)"
     marsh1100: "hsl(147, 24%, 13%)"
     marsh1200: "hsl(147, 14%, 7%)"
-    primary100: "hsl(215, 100%, 98%)"
-    primary200: "hsl(212, 100%, 95%)"
-    primary300: "hsl(211, 100%, 92%)"
-    primary400: "hsl(211, 100%, 88%)"
-    primary500: "hsl(212, 100%, 80%)"
-    primary600: "hsl(213, 100%, 71%)"
-    primary700: "hsl(214, 100%, 58%)"
-    primary800: "hsl(217, 92%, 51%)"
-    primary900: "hsl(223, 79%, 44%)"
-    primary1000: "hsl(228, 82%, 35%)"
-    primary1100: "hsl(228, 63%, 23%)"
-    primary1200: "hsl(227, 57%, 11%)"
+    coolGrey100: "hsl(206, 47%, 97%)"
+    coolGrey200: "hsl(205, 35%, 93%)"
+    coolGrey300: "hsl(206, 27%, 90%)"
+    coolGrey400: "hsl(205, 20%, 83%)"
+    coolGrey500: "hsl(207, 16%, 76%)"
+    coolGrey600: "hsl(207, 14%, 65%)"
+    coolGrey700: "hsl(206, 9%, 49%)"
+    coolGrey800: "hsl(207, 11%, 35%)"
+    coolGrey900: "hsl(208, 15%, 22%)"
+    coolGrey1000: "hsl(208, 19%, 14%)"
+    coolGrey1100: "hsl(207, 20%, 11%)"
+    coolGrey1200: "hsl(210, 18%, 7%)"
     alpha100: "hsla(0, 0%, 20%, 0.1)"
     alpha150: "hsla(0, 0%, 20%, 0.15)"
     alpha200: "hsla(0, 0%, 20%, 0.2)"
@@ -230,16 +230,17 @@ export const theme: {
     subjectCreativeWriting: "hsl(35, 95%, 50%)"
     subjectExamSkills: "hsl(257, 53%, 35%)"
     subjectGcseEnglishLiterature: "hsl(333, 75%, 59%)"
+    subjectGcseEnglishLanguage: "hsl(256, 65%, 62%)"
     subjectGcseMaths: "hsl(214, 100%, 58%)"
     subjectGcseChemistry: "hsl(35, 95%, 50%)"
-    subjectGcsePhysics: "hsl(0, 0%, 46%)"
+    subjectGcsePhysics: "hsl(206, 9%, 49%)"
     subjectGcseBiology: "hsl(148, 84%, 36%)"
     glBlueLight: "hsl(222, 68%, 78%)"
     glBluePrimary: "hsl(222, 56%, 55%)"
     glBlueDark: "hsl(222, 35%, 43%)"
   }
   space: {
-    base: "0.25"
+    base: "0.25rem"
   }
   fontSizes: {
     xs: "0.75rem"
@@ -257,11 +258,21 @@ export const theme: {
     display: "system-ui, -apple-system, \'Helvetica Neue\', sans-serif"
     body: "system-ui, -apple-system, \'Helvetica Neue\', sans-serif"
   }
+  lineHeights: {
+    xs: "1.6"
+    sm: "1.53"
+    md: "1.5"
+    lg: "1.52"
+    xl: "1.42"
+    '2xl': "1.08"
+    '3xl': "1.12"
+    '4xl': "1"
+  }
   radii: {
-    sm: "0.25"
-    md: "0.5"
-    lg: "0.75"
-    xl: "1"
+    sm: "0.25rem"
+    md: "0.5rem"
+    lg: "0.75rem"
+    xl: "1rem"
   }
   shadows: {
     sm: "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)"
@@ -462,18 +473,18 @@ export const properties: {
   '--color-marsh-1000': "hsl(147, 17%, 18%)"
   '--color-marsh-1100': "hsl(147, 24%, 13%)"
   '--color-marsh-1200': "hsl(147, 14%, 7%)"
-  '--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%)"
+  '--color-cool-grey-100': "hsl(206, 47%, 97%)"
+  '--color-cool-grey-200': "hsl(205, 35%, 93%)"
+  '--color-cool-grey-300': "hsl(206, 27%, 90%)"
+  '--color-cool-grey-400': "hsl(205, 20%, 83%)"
+  '--color-cool-grey-500': "hsl(207, 16%, 76%)"
+  '--color-cool-grey-600': "hsl(207, 14%, 65%)"
+  '--color-cool-grey-700': "hsl(206, 9%, 49%)"
+  '--color-cool-grey-800': "hsl(207, 11%, 35%)"
+  '--color-cool-grey-900': "hsl(208, 15%, 22%)"
+  '--color-cool-grey-1000': "hsl(208, 19%, 14%)"
+  '--color-cool-grey-1100': "hsl(207, 20%, 11%)"
+  '--color-cool-grey-1200': "hsl(210, 18%, 7%)"
   '--color-alpha-100': "hsla(0, 0%, 20%, 0.1)"
   '--color-alpha-150': "hsla(0, 0%, 20%, 0.15)"
   '--color-alpha-200': "hsla(0, 0%, 20%, 0.2)"
@@ -504,9 +515,10 @@ export const properties: {
   '--color-subject-creative-writing': "hsl(35, 95%, 50%)"
   '--color-subject-exam-skills': "hsl(257, 53%, 35%)"
   '--color-subject-gcse-english-literature': "hsl(333, 75%, 59%)"
+  '--color-subject-gcse-english-language': "hsl(256, 65%, 62%)"
   '--color-subject-gcse-maths': "hsl(214, 100%, 58%)"
   '--color-subject-gcse-chemistry': "hsl(35, 95%, 50%)"
-  '--color-subject-gcse-physics': "hsl(0, 0%, 46%)"
+  '--color-subject-gcse-physics': "hsl(206, 9%, 49%)"
   '--color-subject-gcse-biology': "hsl(148, 84%, 36%)"
   '--color-gl-light': "hsl(222, 68%, 78%)"
   '--color-gl-primary': "hsl(222, 56%, 55%)"
@@ -523,10 +535,19 @@ export const properties: {
   '--text-2xl': "2.3125rem"
   '--text-3xl': "3.125rem"
   '--text-4xl': "5.625rem"
-  '--radius-sm': "0.25"
-  '--radius-md': "0.5"
-  '--radius-lg': "0.75"
-  '--radius-xl': "1"
+  '--text-xs--line-height': "1.6"
+  '--text-sm--line-height': "1.53"
+  '--text-md--line-height': "1.5"
+  '--text-lg--line-height': "1.52"
+  '--text-xl--line-height': "1.42"
+  '--text-2xl--line-height': "1.08"
+  '--text-3xl--line-height': "1.12"
+  '--text-4xl--line-height': "1"
+  '--spacing': "0.25rem"
+  '--radius-sm': "0.25rem"
+  '--radius-md': "0.5rem"
+  '--radius-lg': "0.75rem"
+  '--radius-xl': "1rem"
   '--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

@@ -188,18 +188,18 @@ export const theme = {
     "marsh1000": "hsl(147, 17%, 18%)",
     "marsh1100": "hsl(147, 24%, 13%)",
     "marsh1200": "hsl(147, 14%, 7%)",
-    "primary100": "hsl(215, 100%, 98%)",
-    "primary200": "hsl(212, 100%, 95%)",
-    "primary300": "hsl(211, 100%, 92%)",
-    "primary400": "hsl(211, 100%, 88%)",
-    "primary500": "hsl(212, 100%, 80%)",
-    "primary600": "hsl(213, 100%, 71%)",
-    "primary700": "hsl(214, 100%, 58%)",
-    "primary800": "hsl(217, 92%, 51%)",
-    "primary900": "hsl(223, 79%, 44%)",
-    "primary1000": "hsl(228, 82%, 35%)",
-    "primary1100": "hsl(228, 63%, 23%)",
-    "primary1200": "hsl(227, 57%, 11%)",
+    "coolGrey100": "hsl(206, 47%, 97%)",
+    "coolGrey200": "hsl(205, 35%, 93%)",
+    "coolGrey300": "hsl(206, 27%, 90%)",
+    "coolGrey400": "hsl(205, 20%, 83%)",
+    "coolGrey500": "hsl(207, 16%, 76%)",
+    "coolGrey600": "hsl(207, 14%, 65%)",
+    "coolGrey700": "hsl(206, 9%, 49%)",
+    "coolGrey800": "hsl(207, 11%, 35%)",
+    "coolGrey900": "hsl(208, 15%, 22%)",
+    "coolGrey1000": "hsl(208, 19%, 14%)",
+    "coolGrey1100": "hsl(207, 20%, 11%)",
+    "coolGrey1200": "hsl(210, 18%, 7%)",
     "alpha100": "hsla(0, 0%, 20%, 0.1)",
     "alpha150": "hsla(0, 0%, 20%, 0.15)",
     "alpha200": "hsla(0, 0%, 20%, 0.2)",
@@ -230,16 +230,17 @@ export const theme = {
     "subjectCreativeWriting": "hsl(35, 95%, 50%)",
     "subjectExamSkills": "hsl(257, 53%, 35%)",
     "subjectGcseEnglishLiterature": "hsl(333, 75%, 59%)",
+    "subjectGcseEnglishLanguage": "hsl(256, 65%, 62%)",
     "subjectGcseMaths": "hsl(214, 100%, 58%)",
     "subjectGcseChemistry": "hsl(35, 95%, 50%)",
-    "subjectGcsePhysics": "hsl(0, 0%, 46%)",
+    "subjectGcsePhysics": "hsl(206, 9%, 49%)",
     "subjectGcseBiology": "hsl(148, 84%, 36%)",
     "glBlueLight": "hsl(222, 68%, 78%)",
     "glBluePrimary": "hsl(222, 56%, 55%)",
     "glBlueDark": "hsl(222, 35%, 43%)"
   },
   "space": {
-    "base": "0.25"
+    "base": "0.25rem"
   },
   "fontSizes": {
     "xs": "0.75rem",
@@ -257,11 +258,21 @@ export const theme = {
     "display": "system-ui, -apple-system, 'Helvetica Neue', sans-serif",
     "body": "system-ui, -apple-system, 'Helvetica Neue', sans-serif"
   },
+  "lineHeights": {
+    "xs": "1.6",
+    "sm": "1.53",
+    "md": "1.5",
+    "lg": "1.52",
+    "xl": "1.42",
+    "2xl": "1.08",
+    "3xl": "1.12",
+    "4xl": "1"
+  },
   "radii": {
-    "sm": "0.25",
-    "md": "0.5",
-    "lg": "0.75",
-    "xl": "1"
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "xl": "1rem"
   },
   "shadows": {
     "sm": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
@@ -460,18 +471,18 @@ export const properties = {
   "--color-marsh-1000": "hsl(147, 17%, 18%)",
   "--color-marsh-1100": "hsl(147, 24%, 13%)",
   "--color-marsh-1200": "hsl(147, 14%, 7%)",
-  "--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%)",
+  "--color-cool-grey-100": "hsl(206, 47%, 97%)",
+  "--color-cool-grey-200": "hsl(205, 35%, 93%)",
+  "--color-cool-grey-300": "hsl(206, 27%, 90%)",
+  "--color-cool-grey-400": "hsl(205, 20%, 83%)",
+  "--color-cool-grey-500": "hsl(207, 16%, 76%)",
+  "--color-cool-grey-600": "hsl(207, 14%, 65%)",
+  "--color-cool-grey-700": "hsl(206, 9%, 49%)",
+  "--color-cool-grey-800": "hsl(207, 11%, 35%)",
+  "--color-cool-grey-900": "hsl(208, 15%, 22%)",
+  "--color-cool-grey-1000": "hsl(208, 19%, 14%)",
+  "--color-cool-grey-1100": "hsl(207, 20%, 11%)",
+  "--color-cool-grey-1200": "hsl(210, 18%, 7%)",
   "--color-alpha-100": "hsla(0, 0%, 20%, 0.1)",
   "--color-alpha-150": "hsla(0, 0%, 20%, 0.15)",
   "--color-alpha-200": "hsla(0, 0%, 20%, 0.2)",
@@ -502,9 +513,10 @@ export const properties = {
   "--color-subject-creative-writing": "hsl(35, 95%, 50%)",
   "--color-subject-exam-skills": "hsl(257, 53%, 35%)",
   "--color-subject-gcse-english-literature": "hsl(333, 75%, 59%)",
+  "--color-subject-gcse-english-language": "hsl(256, 65%, 62%)",
   "--color-subject-gcse-maths": "hsl(214, 100%, 58%)",
   "--color-subject-gcse-chemistry": "hsl(35, 95%, 50%)",
-  "--color-subject-gcse-physics": "hsl(0, 0%, 46%)",
+  "--color-subject-gcse-physics": "hsl(206, 9%, 49%)",
   "--color-subject-gcse-biology": "hsl(148, 84%, 36%)",
   "--color-gl-light": "hsl(222, 68%, 78%)",
   "--color-gl-primary": "hsl(222, 56%, 55%)",
@@ -521,10 +533,19 @@ export const properties = {
   "--text-2xl": "2.3125rem",
   "--text-3xl": "3.125rem",
   "--text-4xl": "5.625rem",
-  "--radius-sm": "0.25",
-  "--radius-md": "0.5",
-  "--radius-lg": "0.75",
-  "--radius-xl": "1",
+  "--text-xs--line-height": "1.6",
+  "--text-sm--line-height": "1.53",
+  "--text-md--line-height": "1.5",
+  "--text-lg--line-height": "1.52",
+  "--text-xl--line-height": "1.42",
+  "--text-2xl--line-height": "1.08",
+  "--text-3xl--line-height": "1.12",
+  "--text-4xl--line-height": "1",
+  "--spacing": "0.25rem",
+  "--radius-sm": "0.25rem",
+  "--radius-md": "0.5rem",
+  "--radius-lg": "0.75rem",
+  "--radius-xl": "1rem",
   "--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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atom-learning/theme",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0",
   "description": "Design tokens and assets for Atom Learning and Quest",
   "type": "module",
   "main": "lib/theme-base.js",