@amboss/design-system 1.20.4 → 1.21.1--canary-1

package/README.md

@@ -7,7 +7,7 @@
 ## Quick start
 
 **Development**
-Make sure you use npm >= 7.0.0 before running `npm install`
+Ensure that you are using `npm` >= 7.0.0 before running `npm install`
 
 To start the project run `npm run start`
 
@@ -165,16 +165,16 @@ The configuration for `style-dictionary` is inside `./style-dictionary/{platform
 
 ### Bundle all exported components
 
-Before publish the design system for npm we run `npm run build` that bundles everything that is exported from `./src/index.ts`.
+Before publishing the design system for NPM, we run `npm run build`. This runs the script at ``bundles everything that is exported from`.ts`and`.tsx` files within the source.
 
-We use webpack + babel for bundling. For all `/\.ts(x?)$/` files webpack uses a babel-loader as a rule which is implicitly using `tsconfig.json` and `.babelrc`.
+For this, we use `tsup`, which runs `esbuild` under the hood. We also use a lenient browserslist config to ensure compatibility with older browsers.
 
-For styles we use emotion.js.
+For styles, we use emotion.js.
 
 What in the bundle?
 
-- JS code that is compiled from .tsx files (includes common components and emotion.js styled components)
-- I svg icons that are inlined
+- JS code that is compiled from `.tsx` files (includes common components and emotion.js styled components)
+- SVG icons that are inlined
 
 fonts that are base64-ed currently taken off the build
 
@@ -182,10 +182,10 @@ fonts that are base64-ed currently taken off the build
 
 Currently, we have 4 types of tokens:
 
-- atomic values, like colors, sizes, shadows.
-- font assets, that are basically base64 of font files. (not used in production)
-- theme values, that are referencing atomic different atomic values
-- svg icon assets, that are inlined to a json file
+- Atomic values, like colors, sizes, shadows.
+- Font assets, that are basically base64 of font files. (not used in production)
+- Theme values, that are referencing atomic different atomic values
+- Svg icon assets, that are inlined to a `.json` file
 
 As we use Emotion.js all tokenized values are accessible via theme provider. <br />
 
@@ -193,16 +193,17 @@ Basically during the build phase we generate big objects of variables and themed
 
 We call this object `ambossVisualConfiguration`.
 
-Particular themes from ambossVisualConfiguration has to be imported and passed to the theme provider at the consumer side.<br />
+Particular themes from `ambossVisualConfiguration` has to be imported and passed to the theme provider at the consumer side.<br />
 
 <br />
+
 Atomic values are straight forward and simply converted to `variables`.
 
 After build all atomic values are passed to `theme.variables` by emotion.
 
 Example:
 
-```
+```ts
 const StyledContainer - styled.div(
   ({ theme }) => ({
     marginTop: theme.variables.size.spacing.s
@@ -216,7 +217,7 @@ After build all themes values are passed to `theme.values` by emotion.
 
 Example:
 
-```
+```ts
 const StyledContainer - styled.div(
   ({ theme }) => ({
     backgroundColor: theme.values.color.background.primary.default
@@ -224,18 +225,18 @@ const StyledContainer - styled.div(
 );
 ```
 
-Sub-themes are folowing the same concept as themes. Developer can fully rely on `theme.values` object. As long as component in runtime is wrapped in `SubThemeProvider` and it's tokens listed in "tokens/themes/sub-themes/...", all values will be set correctly and automaticaly.
+Sub-themes are following the same concept as themes. Developer can fully rely on `theme.values` object. As long as component in runtime is wrapped in `SubThemeProvider` and its tokens listed in "tokens/themes/sub-themes/...", all values will be set correctly and automatically.
 
 > Note that not all tokens are enabled in sub-themes. Make sure to add missing ones to "tokens/themes/sub-themes/...".
 
-> Components that has "Sub-themed" badge are already in.
+> Components that have a "Sub-themed" badge are already in.
 
 ## Assets
 
 - assets are defined in `tokens/assets.json`
-- with the help from style-dictionary we create a json file with tokens (`/build-tokens/assets/`)
-- those json files supposed to be imported in the ts module (see Icons.tsx)
-- in order to secure `d.ts` filed in the build we "manually" copy asset jsons on the `postbuild` phase (see package.json)
+- with the help from style-dictionary we create a `json` file with tokens (`/build-tokens/assets/`)
+- those `json` files supposed to be imported in the ts module (see `Icons.tsx`)
+- in order to secure `d.ts` filed in the build we "manually" copy asset `json`s on the `postbuild` phase (see `package.json`)
 
 ## Media queries