@sumup/design-tokens - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

dist/cjs/themes/light.js

@@ -92,4 +92,4 @@ "use strict";
     shadow: '#0C0F14',
-    bodyBg: neutrals.n900,
-    bodyColor: white,
+    bodyBg: neutrals.n100,
+    bodyColor: black,
     danger: reds.r500,
@@ -96,0 +96,0 @@ success: greens.g700,

dist/cjs/themes/shared.js

@@ -103,5 +103,3 @@ "use strict";
 exports.fontStack = {
-    default: 
-    // eslint-disable-next-line
-    'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    default: 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     mono: 'Consolas, monaco, monospace',
@@ -108,0 +106,0 @@ };

dist/es/themes/light.js

@@ -87,4 +87,4 @@ /**
     shadow: '#0C0F14',
-    bodyBg: neutrals.n900,
-    bodyColor: white,
+    bodyBg: neutrals.n100,
+    bodyColor: black,
     danger: reds.r500,
@@ -91,0 +91,0 @@ success: greens.g700,

dist/es/themes/shared.js

@@ -101,5 +101,3 @@ /**
 export const fontStack = {
-    default: 
-    // eslint-disable-next-line
-    'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    default: 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     mono: 'Consolas, monaco, monospace',
@@ -106,0 +104,0 @@ };

package.json

 {
   "name": "@sumup/design-tokens",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
@@ -23,2 +23,4 @@ "main": "dist/cjs/index.js",
     "lint:ci": "yarn lint --format junit -o __reports__/eslint-results.xml",
+    "test": "jest --watch",
+    "test:ci": "jest --ci --json --runInBand --coverage --outputFile=__reports__/jest-results.json",
     "prerelease": "yarn build",
@@ -29,4 +31,8 @@ "release": "foundry run semantic-release"
     "@sumup/foundry": "^2.1.0",
+    "@types/jest": "^25.2.1",
+    "jest": "^25.4.0",
+    "jest-extended": "^0.11.5",
+    "ts-jest": "^25.4.0",
     "typescript": "^3.8.3"
   }
 }

README.md

@@ -16,3 +16,3 @@ [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/design-tokens/LICENSE)
 - [Usage](#usage)
-- [API/CLI documentation](#api-cli-documentation)
+- [Code of Conduct](#code-of-conduct)
 - [About SumUp](#about-sumup)
@@ -22,6 +22,10 @@
 
-How to install this project?
+The SumUp design tokens can be installed as a node module. Depending on your preference, run one of the following in your terminal:
 
-```bash
-# Example code to get people started
+```sh
+# With Yarn
+$ yarn add @sumup/design-tokens
+
+# With npm
+$ npm install @sumup/design-tokens
 ```
@@ -31,8 +35,33 @@
 
-- How do you use this?
-- If there’s a CLI, what are the commands?
-- What’s the public API of the project?
+The package currently exports a single `light` theme that is meant to be used in combination with the [`emotion-theming`](https://emotion.sh/docs/theming) package.
 
-## Code of conduct (CoC)
+```jsx
+import { light } from '@sumup/design-tokens';
+import { ThemeProvider } from 'emotion-theming';
+import styled from '@emotion/styled';
 
+const App = () => (
+  <ThemeProvider theme={light}>
+    <Bold>This styled component has access to the theme.</Bold>
+  </ThemeProvider>
+);
+
+const Bold = styled.strong`
+  font-weight: ${(p) => p.theme.fontWeight.bold};
+`;
+```
+
+### With TypeScript
+
+The package exports a `Theme` interface which can be used to type Emotion's `styled` function. Create a custom `styled` instance as described in the [Emotion docs](https://emotion.sh/docs/typescript):
+
+```tsx
+import styled, { CreateStyled } from '@emotion/styled';
+import { Theme } from '@sumup/design-tokens';
+
+export default styled as CreateStyled<Theme>;
+```
+
+## Code of Conduct
+
 We want to foster an inclusive and friendly community around our Open Source efforts. Like all SumUp Open Source projects, this project follows the Contributor Covenant Code of Conduct. Please, [read it and follow it](CODE_OF_CONDUCT.md).
@@ -39,0 +68,0 @@

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

Improved metrics

Total package byte prevSize

57876

increased by10.11%

Number of package files

28

increased by16.67%

Lines of code

1499

increased by7%

Number of lines in readme file

79

increased by58%

Worsened metrics

Dev dependency count

6

increased by200%

No dependency changes