@entur/tokens
Advanced tools
@entur/tokens - npm Package Compare versions
Comparing version 3.12.0 to 3.12.1-alpha.0
@@ -1,276 +0,5 @@ | ||
| export declare const colors: { | ||
| brand: { | ||
| blue: string; | ||
| lavender: string; | ||
| white: string; | ||
| coral: string; | ||
| peach: string; | ||
| }; | ||
| blues: { | ||
| blue10: string; | ||
| blue20: string; | ||
| blue30: string; | ||
| blue40: string; | ||
| blue45: string; | ||
| blue50: string; | ||
| blue60: string; | ||
| blue70: string; | ||
| blue80: string; | ||
| blue90: string; | ||
| }; | ||
| greys: { | ||
| grey: string; | ||
| grey10: string; | ||
| grey20: string; | ||
| grey30: string; | ||
| grey40: string; | ||
| grey45: string; | ||
| grey50: string; | ||
| grey60: string; | ||
| grey70: string; | ||
| grey80: string; | ||
| grey90: string; | ||
| }; | ||
| validation: { | ||
| sky: string; | ||
| skyContrast: string; | ||
| skyTint: string; | ||
| lava: string; | ||
| lavaContrast: string; | ||
| lavaTint: string; | ||
| mint: string; | ||
| mintContrast: string; | ||
| mintTint: string; | ||
| canary: string; | ||
| canaryContrast: string; | ||
| canaryTint: string; | ||
| }; | ||
| misc: { | ||
| focus: string; | ||
| black: string; | ||
| }; | ||
| transport: { | ||
| default: { | ||
| metro: string; | ||
| bus: string; | ||
| plane: string; | ||
| helicopter: string; | ||
| tram: string; | ||
| funicular: string; | ||
| cableway: string; | ||
| taxi: string; | ||
| bicycle: string; | ||
| walk: string; | ||
| train: string; | ||
| ferry: string; | ||
| carferry: string; | ||
| mobility: string; | ||
| }; | ||
| contrast: { | ||
| metro: string; | ||
| bus: string; | ||
| plane: string; | ||
| helicopter: string; | ||
| tram: string; | ||
| funicular: string; | ||
| cableway: string; | ||
| taxi: string; | ||
| bicycle: string; | ||
| walk: string; | ||
| train: string; | ||
| ferry: string; | ||
| carferry: string; | ||
| mobility: string; | ||
| }; | ||
| }; | ||
| data: { | ||
| default: { | ||
| blue: string; | ||
| coral: string; | ||
| jungle: string; | ||
| azure: string; | ||
| lavender: string; | ||
| peach: string; | ||
| spring: string; | ||
| lilac: string; | ||
| }; | ||
| contrast: { | ||
| blue: string; | ||
| coral: string; | ||
| jungle: string; | ||
| azure: string; | ||
| lavender: string; | ||
| peach: string; | ||
| spring: string; | ||
| lilac: string; | ||
| }; | ||
| }; | ||
| }; | ||
| export declare const space: { | ||
| none: number; | ||
| default: number; | ||
| extraSmall2: number; | ||
| extraSmall: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| extraLarge: number; | ||
| extraLarge2: number; | ||
| extraLarge3: number; | ||
| extraLarge4: number; | ||
| extraLarge5: number; | ||
| extraLarge6: number; | ||
| extraLarge7: number; | ||
| extraLarge8: number; | ||
| extraLarge9: number; | ||
| rem: { | ||
| none: number; | ||
| default: number; | ||
| extraSmall2: number; | ||
| extraSmall: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| extraLarge: number; | ||
| extraLarge2: number; | ||
| extraLarge3: number; | ||
| extraLarge4: number; | ||
| extraLarge5: number; | ||
| extraLarge6: number; | ||
| extraLarge7: number; | ||
| extraLarge8: number; | ||
| extraLarge9: number; | ||
| }; | ||
| }; | ||
| export declare const fontWeights: { | ||
| body: string; | ||
| heading: string; | ||
| }; | ||
| export declare const fontSizes: { | ||
| extraSmall: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| extraLarge: number; | ||
| extraLarge2: number; | ||
| extraLarge3: number; | ||
| extraLarge4: number; | ||
| extraLarge5: number; | ||
| rem: { | ||
| extraSmall: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| extraLarge: number; | ||
| extraLarge2: number; | ||
| extraLarge3: number; | ||
| extraLarge4: number; | ||
| extraLarge5: number; | ||
| }; | ||
| }; | ||
| export declare const lineHeights: { | ||
| extraSmall: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| extraLarge: number; | ||
| extraLarge2: number; | ||
| extraLarge3: number; | ||
| extraLarge4: number; | ||
| extraLarge5: number; | ||
| extraLarge6: number; | ||
| extraLarge7: number; | ||
| rem: { | ||
| extraSmall: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| extraLarge: number; | ||
| extraLarge2: number; | ||
| extraLarge3: number; | ||
| extraLarge4: number; | ||
| extraLarge5: number; | ||
| extraLarge6: number; | ||
| extraLarge7: number; | ||
| }; | ||
| }; | ||
| export declare const breakpoints: { | ||
| large: number; | ||
| extraLarge: number; | ||
| rem: { | ||
| large: number; | ||
| extraLarge: number; | ||
| }; | ||
| }; | ||
| export declare const borderWidths: { | ||
| default: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| rem: { | ||
| default: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| }; | ||
| }; | ||
| export declare const borderRadiuses: { | ||
| default: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| rem: { | ||
| default: number; | ||
| small: number; | ||
| medium: number; | ||
| large: number; | ||
| }; | ||
| }; | ||
| export declare const shadows: { | ||
| focus: string; | ||
| focusContrast: string; | ||
| cardShadow: string; | ||
| cardShadowHover: string; | ||
| cardShadowContrast: string; | ||
| cardShadowHoverContrast: string; | ||
| boxShadow: string; | ||
| boxShadowContrast: string; | ||
| }; | ||
| export declare const zIndexes: { | ||
| behind: number; | ||
| default: number; | ||
| sticky: number; | ||
| popover: number; | ||
| overlay: number; | ||
| modal: number; | ||
| toast: number; | ||
| }; | ||
| export declare const timings: { | ||
| fast: string; | ||
| medium: string; | ||
| slow: string; | ||
| }; | ||
| export declare const outlines: { | ||
| focus: string; | ||
| focusContrast: string; | ||
| }; | ||
| export declare const outlineOffsets: { | ||
| focus: number; | ||
| rem: { | ||
| focus: number; | ||
| }; | ||
| }; | ||
| type colorTokens = { | ||
| light: { | ||
| colors: Record<string, string>; | ||
| }; | ||
| dark: { | ||
| colors: Record<string, string>; | ||
| }; | ||
| }; | ||
| /** | ||
| * THESE COLOUR ARE A PRE-RELEASE OF THE NEW COLOUR | ||
| * VARIABLES AND SEMANTIC TOKENS | ||
| */ | ||
| export declare const componentColors: colorTokens; | ||
| export {}; | ||
| export * from './primitive'; | ||
| export * from './semantic'; | ||
| export * from './base'; | ||
| export * from './componentColors'; | ||
| export * from './legacy-tokens'; |
| { | ||
| "name": "@entur/tokens", | ||
| "version": "3.12.0", | ||
| "version": "3.12.1-alpha.0", | ||
| "license": "EUPL-1.2", | ||
@@ -20,5 +20,7 @@ "main": "dist/index.js", | ||
| "scripts": { | ||
| "build": "yarn build:tokens && yarn build:css", | ||
| "build:tokens": "dts build", | ||
| "build:css": "ts-node -O '{\"module\": \"commonjs\"}' bin/build-tokens.ts" | ||
| "build": "yarn build:js-variables && (yarn build:variables & yarn build:legacy-tokens) && yarn cleanup-temp-files", | ||
| "build:legacy-tokens": "ts-node -O '{\"module\": \"commonjs\"}' bin/build-legacy-tokens.ts", | ||
| "build:js-variables": "(ts-node -O '{\"module\": \"commonjs\"}' bin/build-js-variables.ts) && dts build", | ||
| "build:variables": "ts-node -O '{\"module\": \"commonjs\"}' bin/build-variables.ts", | ||
| "cleanup-temp-files": "ts-node -e \"['src/primitive.ts', 'src/semantic.ts', 'src/base.ts', 'src/componentColors.ts'].forEach(file => require('fs-extra').removeSync(file)); \"" | ||
| }, | ||
@@ -37,3 +39,3 @@ "devDependencies": { | ||
| }, | ||
| "gitHead": "85dd6dbaf86fc2488dd2152c213788f9d4a8a64f" | ||
| "gitHead": "d6797c03d0ad7c0629f3851445759d9552660dcd" | ||
| } |
| # Entur design tokens | ||
| This package contains all design tokens used throughout the design system. You'l find all of them in the `src/tokens.ts` file. | ||
| This package contains all design tokens and design variables used throughout the design system. We are currently in a process to migrate over to a new design variable system based on [Figma Variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma). | ||
| Since not all values are available as a variable yet and to avoid breaking changes, all previous design tokens will be kept around for a while. These are built from the `src/legacy-tokens.ts` file. | ||
| > 💡 Looking for the [documentation](https://design.entur.no/komponenter/resources/tokens)? | ||
@@ -100,1 +102,21 @@ | ||
| These values are mainly provided in pixels. If you need the values in rem instead, add a `.rem` after the token name, e.g. `space.rem.large` for rem value and `space.large` for pixel value. | ||
| ## [For maintainers] Updating design variables | ||
| There are three steps needed to update the set of available designs variables in this repo: | ||
| 1. generate a JSON-export of the variable set from Figma | ||
| 2. Update the corresponding JSON-file in the `src` folder | ||
| 3. Build the new variables and commit the changes | ||
| ### 1. Generate a JSON export | ||
| The JSON is exported from Figma using the [variabels2css-plugin](https://www.figma.com/community/plugin/1261234393153346915), download the plugin if you haven't already. Go to the Figma file containing the variables you want to export, eg. [Semantic Colors](https://www.figma.com/file/zFFjH3gKGON6vFJZQK5ltr/Tokens-Semantic-colors?type=design&mode=design&t=M9cT0w0kaaxyBHiq-1). In you menu bar, select 'Plugins' and choose 'variables2css' – this opens a modal. Under 'choose your collection' choose the variable set you want to export. Under 'type' choose 'JSON', and under 'color' and 'unit' choose 'hex' and 'rem'. Then click 'Generate' and copy the result. | ||
| ### 2. Update JSON file | ||
| Back in this repo, find the JSON-variables file you want to update, eg. `semantic.json`, delete its content and paste the generated result you copied in step 1. Then save the file. | ||
| ### 3. Build variables | ||
| When the JSON-file content is updated, run the script `yarn build` inside this package or `yarn build:packages` from root. This will generate new files with updated values in both this package and in all other packages where the component color value has been updated. Once the build is finished, commit all changes and push the commit. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by100%
28
- Lines of code
- increased by51.81%
10548
- Number of lines in readme file
- increased by22%
122
Worsened metrics
- Total package byte prevSize
- decreased by-38.82%
939285
- Number of low quality alerts
- increased by50%
3
No dependency changes