@atom-learning/theme 3.0.0-beta.1 → 3.0.1

package/lib/theme-atom.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Jan 2024 16:15:37 GMT
+// Generated on Fri, 12 Jan 2024 09:32:03 GMT
 
 $color-text-bold: #1f1f1f;
 $color-text-regular: #333333;

package/lib/theme-quest.js

@@ -224,8 +224,8 @@ module.exports = {
   "fonts": {
     "sans": "system-ui, -apple-system, 'Helvetica Neue', sans-serif",
     "mono": "'SFMono-Regular', Consolas, Menlo, monospace",
-    "display": "'Make', system-ui, -apple-system, 'Helvetica Neue', sans-serif",
-    "body": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif"
+    "display": "'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 Tue, 09 Jan 2024 16:15:37 GMT
+// Generated on Fri, 12 Jan 2024 09:32:03 GMT
 
 $color-text-bold: #1f1f1f;
 $color-text-regular: #333333;
@@ -201,8 +201,8 @@ $color-primary-1100: #162c22;
 $color-primary-1200: #0e1612;
 $font-families-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
 $font-families-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
-$font-families-display: 'Make', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
-$font-families-body: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+$font-families-display: '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-beta.1",
+  "version": "3.0.1",
   "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>
-```