@atom-learning/theme - npm Package Compare versions

Comparing version 2.0.0-beta.0 to 2.0.0

lib/index.d.ts

@@ -8,2 +8,134 @@ export type Theme = {
     "backgroundAccent": string
+    "grey100": string
+    "grey200": string
+    "grey300": string
+    "grey400": string
+    "grey500": string
+    "grey600": string
+    "grey700": string
+    "grey800": string
+    "grey900": string
+    "grey1000": string
+    "grey1100": string
+    "grey1200": string
+    "blue100": string
+    "blue200": string
+    "blue300": string
+    "blue400": string
+    "blue500": string
+    "blue600": string
+    "blue700": string
+    "blue800": string
+    "blue900": string
+    "blue1000": string
+    "blue1100": string
+    "blue1200": string
+    "purple100": string
+    "purple200": string
+    "purple300": string
+    "purple400": string
+    "purple500": string
+    "purple600": string
+    "purple700": string
+    "purple800": string
+    "purple900": string
+    "purple1000": string
+    "purple1100": string
+    "purple1200": string
+    "cyan100": string
+    "cyan200": string
+    "cyan300": string
+    "cyan400": string
+    "cyan500": string
+    "cyan600": string
+    "cyan700": string
+    "cyan800": string
+    "cyan900": string
+    "cyan1000": string
+    "cyan1100": string
+    "cyan1200": string
+    "green100": string
+    "green200": string
+    "green300": string
+    "green400": string
+    "green500": string
+    "green600": string
+    "green700": string
+    "green800": string
+    "green900": string
+    "green1000": string
+    "green1100": string
+    "green1200": string
+    "magenta100": string
+    "magenta200": string
+    "magenta300": string
+    "magenta400": string
+    "magenta500": string
+    "magenta600": string
+    "magenta700": string
+    "magenta800": string
+    "magenta900": string
+    "magenta1000": string
+    "magenta1100": string
+    "magenta1200": string
+    "red100": string
+    "red200": string
+    "red300": string
+    "red400": string
+    "red500": string
+    "red600": string
+    "red700": string
+    "red800": string
+    "red900": string
+    "red1000": string
+    "red1100": string
+    "red1200": string
+    "teal100": string
+    "teal200": string
+    "teal300": string
+    "teal400": string
+    "teal500": string
+    "teal600": string
+    "teal700": string
+    "teal800": string
+    "teal900": string
+    "teal1000": string
+    "teal1100": string
+    "teal1200": string
+    "orange100": string
+    "orange200": string
+    "orange300": string
+    "orange400": string
+    "orange500": string
+    "orange600": string
+    "orange700": string
+    "orange800": string
+    "orange900": string
+    "orange1000": string
+    "orange1100": string
+    "orange1200": string
+    "yellow100": string
+    "yellow200": string
+    "yellow300": string
+    "yellow400": string
+    "yellow500": string
+    "yellow600": string
+    "yellow700": string
+    "yellow800": string
+    "yellow900": string
+    "yellow1000": string
+    "yellow1100": string
+    "yellow1200": string
+    "lime100": string
+    "lime200": string
+    "lime300": string
+    "lime400": string
+    "lime500": string
+    "lime600": string
+    "lime700": string
+    "lime800": string
+    "lime900": string
+    "lime1000": string
+    "lime1100": string
+    "lime1200": string
     "tonal50": string
@@ -54,2 +186,5 @@ "tonal100": string
     "subjectExamSkills": string
+    "glBlueLight": string
+    "glBluePrimary": string
+    "glBlueDark": string
   },
@@ -67,3 +202,3 @@ "space": {
     "9": string
-    "10": string
+    "24": string
   },
@@ -109,3 +244,10 @@ "fontSizes": {
     "3": string
+  },
+  "ratios": {
+    "16-9": string
+    "3-2": string
+    "4-3": string
+    "1-1": string
+    "3-4": string
   }
 }

lib/index.js

@@ -7,6 +7,138 @@ module.exports = {
     "background": "hsl(0, 0%, 96%)",
-    "backgroundAccent": "hsl(217, 92%, 97%)",
+    "backgroundAccent": "hsl(215, 100%, 98%)",
+    "grey100": "hsl(0, 0%, 96%)",
+    "grey200": "hsl(0, 0%, 92%)",
+    "grey300": "hsl(0, 0%, 88%)",
+    "grey400": "hsl(0, 0%, 81%)",
+    "grey500": "hsl(0, 0%, 73%)",
+    "grey600": "hsl(0, 0%, 62%)",
+    "grey700": "hsl(0, 0%, 46%)",
+    "grey800": "hsl(0, 0%, 33%)",
+    "grey900": "hsl(0, 0%, 20%)",
+    "grey1000": "hsl(0, 0%, 12%)",
+    "grey1100": "hsl(0, 0%, 10%)",
+    "grey1200": "hsl(0, 0%, 6%)",
+    "blue100": "hsl(215, 100%, 98%)",
+    "blue200": "hsl(212, 100%, 95%)",
+    "blue300": "hsl(211, 100%, 92%)",
+    "blue400": "hsl(211, 100%, 88%)",
+    "blue500": "hsl(212, 100%, 80%)",
+    "blue600": "hsl(213, 100%, 71%)",
+    "blue700": "hsl(214, 100%, 58%)",
+    "blue800": "hsl(217, 92%, 51%)",
+    "blue900": "hsl(223, 78%, 44%)",
+    "blue1000": "hsl(228, 82%, 35%)",
+    "blue1100": "hsl(228, 63%, 23%)",
+    "blue1200": "hsl(227, 57%, 11%)",
+    "purple100": "hsl(282, 100%, 98%)",
+    "purple200": "hsl(270, 100%, 95%)",
+    "purple300": "hsl(271, 100%, 92%)",
+    "purple400": "hsl(270, 100%, 89%)",
+    "purple500": "hsl(270, 90%, 81%)",
+    "purple600": "hsl(271, 97%, 69%)",
+    "purple700": "hsl(273, 84%, 47%)",
+    "purple800": "hsl(273, 94%, 48%)",
+    "purple900": "hsl(268, 79%, 42%)",
+    "purple1000": "hsl(266, 82%, 32%)",
+    "purple1100": "hsl(265, 63%, 23%)",
+    "purple1200": "hsl(265, 61%, 14%)",
+    "cyan100": "hsl(198, 100%, 97%)",
+    "cyan200": "hsl(199, 100%, 94%)",
+    "cyan300": "hsl(201, 100%, 89%)",
+    "cyan400": "hsl(200, 100%, 84%)",
+    "cyan500": "hsl(201, 96%, 73%)",
+    "cyan600": "hsl(202, 85%, 60%)",
+    "cyan700": "hsl(204, 81%, 46%)",
+    "cyan800": "hsl(205, 100%, 38%)",
+    "cyan900": "hsl(206, 100%, 30%)",
+    "cyan1000": "hsl(205, 100%, 21%)",
+    "cyan1100": "hsl(206, 97%, 15%)",
+    "cyan1200": "hsl(207, 73%, 9%)",
+    "green100": "hsl(135, 80%, 96%)",
+    "green200": "hsl(135, 72%, 92%)",
+    "green300": "hsl(135, 68%, 83%)",
+    "green400": "hsl(135, 65%, 76%)",
+    "green500": "hsl(136, 56%, 62%)",
+    "green600": "hsl(137, 42%, 49%)",
+    "green700": "hsl(138, 51%, 35%)",
+    "green800": "hsl(138, 68%, 29%)",
+    "green900": "hsl(138, 74%, 21%)",
+    "green1000": "hsl(138, 89%, 14%)",
+    "green1100": "hsl(135, 91%, 9%)",
+    "green1200": "hsl(123, 56%, 6%)",
+    "magenta100": "hsl(330, 100%, 99%)",
+    "magenta200": "hsl(329, 100%, 96%)",
+    "magenta300": "hsl(332, 100%, 92%)",
+    "magenta400": "hsl(333, 100%, 90%)",
+    "magenta500": "hsl(333, 90%, 80%)",
+    "magenta600": "hsl(333, 87%, 72%)",
+    "magenta700": "hsl(333, 75%, 59%)",
+    "magenta800": "hsl(333, 69%, 49%)",
+    "magenta900": "hsl(333, 74%, 36%)",
+    "magenta1000": "hsl(333, 86%, 25%)",
+    "magenta1100": "hsl(333, 95%, 16%)",
+    "magenta1200": "hsl(334, 62%, 10%)",
+    "red100": "hsl(0, 100%, 99%)",
+    "red200": "hsl(0, 100%, 96%)",
+    "red300": "hsl(357, 100%, 93%)",
+    "red400": "hsl(356, 100%, 90%)",
+    "red500": "hsl(356, 96%, 83%)",
+    "red600": "hsl(357, 90%, 73%)",
+    "red700": "hsl(357, 80%, 59%)",
+    "red800": "hsl(357, 76%, 49%)",
+    "red900": "hsl(357, 73%, 37%)",
+    "red1000": "hsl(357, 79%, 26%)",
+    "red1100": "hsl(357, 91%, 17%)",
+    "red1200": "hsl(357, 73%, 10%)",
+    "teal100": "hsl(180, 83%, 95%)",
+    "teal200": "hsl(180, 75%, 88%)",
+    "teal300": "hsl(180, 71%, 78%)",
+    "teal400": "hsl(179, 70%, 71%)",
+    "teal500": "hsl(179, 65%, 52%)",
+    "teal600": "hsl(179, 76%, 41%)",
+    "teal700": "hsl(179, 91%, 31%)",
+    "teal800": "hsl(178, 100%, 25%)",
+    "teal900": "hsl(180, 100%, 18%)",
+    "teal1000": "hsl(183, 100%, 13%)",
+    "teal1100": "hsl(187, 92%, 10%)",
+    "teal1200": "hsl(186, 56%, 7%)",
+    "orange100": "hsl(38, 100%, 95%)",
+    "orange200": "hsl(38, 100%, 90%)",
+    "orange300": "hsl(37, 100%, 84%)",
+    "orange400": "hsl(36, 96%, 78%)",
+    "orange500": "hsl(33, 100%, 67%)",
+    "orange600": "hsl(31, 97%, 57%)",
+    "orange700": "hsl(30, 92%, 46%)",
+    "orange800": "hsl(29, 100%, 43%)",
+    "orange900": "hsl(27, 100%, 36%)",
+    "orange1000": "hsl(24, 100%, 26%)",
+    "orange1100": "hsl(20, 97%, 15%)",
+    "orange1200": "hsl(20, 96%, 11%)",
+    "yellow100": "hsl(53, 94%, 93%)",
+    "yellow200": "hsl(54, 92%, 85%)",
+    "yellow300": "hsl(54, 92%, 75%)",
+    "yellow400": "hsl(52, 97%, 63%)",
+    "yellow500": "hsl(51, 100%, 46%)",
+    "yellow600": "hsl(49, 100%, 39%)",
+    "yellow700": "hsl(48, 100%, 35%)",
+    "yellow800": "hsl(46, 100%, 30%)",
+    "yellow900": "hsl(44, 100%, 22%)",
+    "yellow1000": "hsl(44, 100%, 18%)",
+    "yellow1100": "hsl(41, 100%, 11%)",
+    "yellow1200": "hsl(39, 100%, 8%)",
+    "lime100": "hsl(73, 94%, 93%)",
+    "lime200": "hsl(73, 94%, 87%)",
+    "lime300": "hsl(73, 90%, 77%)",
+    "lime400": "hsl(74, 82%, 69%)",
+    "lime500": "hsl(74, 68%, 58%)",
+    "lime600": "hsl(74, 77%, 41%)",
+    "lime700": "hsl(75, 100%, 31%)",
+    "lime800": "hsl(75, 100%, 27%)",
+    "lime900": "hsl(75, 100%, 19%)",
+    "lime1000": "hsl(75, 100%, 15%)",
+    "lime1100": "hsl(75, 100%, 9%)",
+    "lime1200": "hsl(74, 100%, 6%)",
     "tonal50": "hsl(0, 0%, 96%)",
-    "tonal100": "hsl(0, 0%, 93%)",
-    "tonal200": "hsl(0, 0%, 69%)",
+    "tonal100": "hsl(0, 0%, 92%)",
+    "tonal200": "hsl(0, 0%, 62%)",
     "tonal300": "hsl(0, 0%, 46%)",
@@ -21,5 +153,5 @@ "tonal400": "hsl(0, 0%, 33%)",
     "alpha600": "hsla(0, 0%, 20%, 0.6)",
-    "primaryLight": "hsl(217, 92%, 97%)",
+    "primaryLight": "hsl(215, 100%, 98%)",
     "primary": "hsl(217, 92%, 51%)",
-    "primaryMid": "hsl(223, 78%, 45%)",
+    "primaryMid": "hsl(223, 78%, 44%)",
     "primaryDark": "hsl(228, 82%, 35%)",
@@ -54,3 +186,6 @@ "secondary": "hsl(204, 100%, 72%)",
     "subjectCreativeWriting": "hsl(33, 100%, 50%)",
-    "subjectExamSkills": "hsl(256, 93%, 35%)"
+    "subjectExamSkills": "hsl(256, 93%, 35%)",
+    "glBlueLight": "hsl(222, 68%, 78%)",
+    "glBluePrimary": "hsl(222, 56%, 55%)",
+    "glBlueDark": "hsl(222, 35%, 43%)"
   },
@@ -63,8 +198,8 @@ "space": {
     "4": "1rem",
-    "5": "1.5rem",
-    "6": "2rem",
-    "7": "2.5rem",
-    "8": "3rem",
-    "9": "4rem",
-    "10": "5rem"
+    "5": "2rem",
+    "6": "2.5rem",
+    "7": "3rem",
+    "8": "4rem",
+    "9": "5rem",
+    "24": "1.5rem"
   },
@@ -106,7 +241,14 @@ "fontSizes": {
   "shadows": {
-    "0": "0 1px 3px hsla(0, 0%, 20%, 0.15), 0 1px 2px hsla(0, 0%, 20%, 0.2)",
-    "1": "0 3px 6px hsla(0, 0%, 20%, 0.15), 0 3px 6px hsla(0, 0%, 20%, 0.2)",
-    "2": "0 10px 20px hsla(0, 0%, 20%, 0.2), 0 6px 6px hsla(0, 0%, 20%, 0.25)",
-    "3": "0 14px 28px hsla(0, 0%, 20%, 0.25), 0 10px 10px hsla(0, 0%, 20%, 0.2)"
+    "0": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
+    "1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
+    "2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
+    "3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
+  },
+  "ratios": {
+    "16-9": "16/9",
+    "3-2": "3/2",
+    "4-3": "4/3",
+    "1-1": "1/1",
+    "3-4": "3/4"
   }
 }

package.json

 {
   "name": "@atom-learning/theme",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0",
   "description": "Design tokens and assets for Atom Learning",
@@ -14,3 +14,4 @@ "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "theme-map.js"
   ],
@@ -17,0 +18,0 @@ "author": "",

README.md

@@ -1,1 +0,69 @@
-# theme
+# theme
+
+These repository contains the Atom Learning Design System tokens, like colours, sizes, spaces, font families and so on.
+
+## How to add new tokens that are not part of the theme specification
+
+If you need to add tokens that are not part of the [theme specification](https://github.com/system-ui/theme-specification#key-reference), follow the instruction below. You can also have a look at [this PR](https://github.com/Atom-Learning/theme/pull/25) where we did it for aspect ratios.
+
+* In `system-ui-theme.js`, in `schema` add a new field as an empty object, like `ratios: {}`
+* Also in `system-ui-theme.js`, in `matchSchema`, add a new field named `[category].[type]`, which value references the field you added to `schema` in the previous step. For example if the category is ratios, and the type is ratio, it would look like `'ratios.ratio': 'ratios`
+* Depending on what you are adding you might have to add it to an existing .json file or create a new one. In our example, we created a new one `src/properties/ratios.json`, and added all our tokens there. The json structure is as follow
+  - first level: the `category` mentioned in the step above
+  - second level: the `type` mentioned in the step above
+  - third level: the token name, as you would use it with `$`, e.g.: `$16-9`
+  - fourth level: `value`, the value the token will be replaced by.
+
+  e.g.:
+  ```json
+  {
+    "ratios": {
+      "ratio": {
+        "16-9": {
+          "value": "16/9"
+        },
+        "3-2": {
+          "value": "3/2"
+        },
+        "4-3": {
+          "value": "4/3"
+        },
+        "1-1": {
+          "value": "1/1"
+        },
+        "3-4": {
+          "value": "3/4"
+        }
+      }
+    }
+  }
+  ```
+
+  * In `style.config.js` add your new category (if you added a new category) to the filter of the formatter `'custom/format/scss-map-flat'`. So it's treated the same way than `'size'` and `'effects'`
+
+  * In `theme-map.js` add the (css property -> category) relation to `themeMap`, in this example, we added `aspectRatio: 'ratios'`. This `themeMap` config is exported and used by projects using our `theme` repo. It's used by `createStitches()` from `@stitches/react` so that we don't have to reference the `type`, so we can call the token like `'$16-9'` instead of `'$ratios$16-9'`
+
+### How is `themeMap` used?
+
+For example, in `components` repo we use it like this:
+
+```
+...
+import { createStitches, defaultThemeMap } from '@stitches/react'
+import { themeMap } from '@atom-learning/theme/theme-map'
+
+...
+
+const stitchesConfig = createStitches({
+  theme: atomTheme as Theme,
+  themeMap: {
+    ...defaultThemeMap,
+    ...themeMap
+  },
+  utils,
+  media
+})
+```
+
+### Why/When do we need `themeMap`?
+Some CSS properties are not included in the [defaultThemeMap](https://stitches.dev/docs/api#defaultthememap). If they are missing (e.g.: aspectRatio) you need to add them to our custom `themeMap` which we pass to stitches [themeMap](https://stitches.dev/docs/api#thememap) config

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38844

increased by64.14%

Number of package files

17

increased by6.25%

Lines of code

501

increased by136.32%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

70

increased by6900%

No dependency changes