🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@netlify/netlify-design-tokens

Package Overview
Dependencies
Maintainers
18
Versions
28
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@netlify/netlify-design-tokens - npm Package Compare versions

Comparing version

6.0.0-beta.6
to
6.0.0-beta.7

dist/js/index.cjs

264

dist/js/index.d.ts

@@ -1,148 +0,148 @@

export const ColorFacetsNeutralLight100 : string;
export const ColorFacetsNeutralLight200 : string;
export const ColorFacetsNeutralLight300 : string;
export const ColorFacetsNeutralLight400 : string;
export const ColorFacetsNeutralLight500 : string;
export const ColorFacetsNeutralLight600 : string;
export const ColorFacetsNeutralLight700 : string;
export const ColorFacetsNeutralLight800 : string;
export const ColorFacetsNeutralLight000 : string;
export const ColorFacetsNeutralDark100 : string;
export const ColorFacetsNeutralDark200 : string;
export const ColorFacetsNeutralDark300 : string;
export const ColorFacetsNeutralDark400 : string;
export const ColorFacetsNeutralDark500 : string;
export const ColorFacetsNeutralDark600 : string;
export const ColorFacetsNeutralDark700 : string;
export const ColorFacetsNeutralDark800 : string;
export const ColorFacetsNeutralDark900 : string;
export const ColorFacetsNeutralDark000 : string;
export const ColorFacetsTeal100 : string;
export const ColorFacetsTeal200 : string;
export const ColorFacetsTeal300 : string;
export const ColorFacetsTeal400 : string;
export const ColorFacetsTeal500 : string;
export const ColorFacetsTeal600 : string;
export const ColorFacetsTeal700 : string;
export const ColorFacetsTeal800 : string;
export const ColorFacetsTeal900 : string;
export const ColorFacetsTeal000 : string;
export const ColorFacetsGreen100 : string;
export const ColorFacetsGreen200 : string;
export const ColorFacetsGreen300 : string;
export const ColorFacetsGreen400 : string;
export const ColorFacetsGreen500 : string;
export const ColorFacetsGreen600 : string;
export const ColorFacetsGreen700 : string;
export const ColorFacetsGreen800 : string;
export const ColorFacetsGreen900 : string;
export const ColorFacetsGreen000 : string;
export const ColorFacetsGold100 : string;
export const ColorFacetsGold200 : string;
export const ColorFacetsGold300 : string;
export const ColorFacetsGold400 : string;
export const ColorFacetsGold500 : string;
export const ColorFacetsGold600 : string;
export const ColorFacetsGold700 : string;
export const ColorFacetsGold800 : string;
export const ColorFacetsGold900 : string;
export const ColorFacetsGold000 : string;
export const ColorFacetsRed100 : string;
export const ColorFacetsRed200 : string;
export const ColorFacetsRed300 : string;
export const ColorFacetsRed400 : string;
export const ColorFacetsRed500 : string;
export const ColorFacetsRed600 : string;
export const ColorFacetsRed700 : string;
export const ColorFacetsRed800 : string;
export const ColorFacetsRed900 : string;
export const ColorFacetsRed000 : string;
export const ColorFacetsPink100 : string;
export const ColorFacetsPink200 : string;
export const ColorFacetsPink300 : string;
export const ColorFacetsPink400 : string;
export const ColorFacetsPink500 : string;
export const ColorFacetsPink600 : string;
export const ColorFacetsPink700 : string;
export const ColorFacetsPink800 : string;
export const ColorFacetsPink900 : string;
export const ColorFacetsPink000 : string;
export const ColorFacetsPurple100 : string;
export const ColorFacetsPurple200 : string;
export const ColorFacetsPurple300 : string;
export const ColorFacetsPurple400 : string;
export const ColorFacetsPurple500 : string;
export const ColorFacetsPurple600 : string;
export const ColorFacetsPurple700 : string;
export const ColorFacetsPurple800 : string;
export const ColorFacetsPurple900 : string;
export const ColorFacetsPurple000 : string;
export const ColorFacetsBlue100 : string;
export const ColorFacetsBlue200 : string;
export const ColorFacetsBlue300 : string;
export const ColorFacetsBlue400 : string;
export const ColorFacetsBlue500 : string;
export const ColorFacetsBlue600 : string;
export const ColorFacetsBlue700 : string;
export const ColorFacetsBlue800 : string;
export const ColorFacetsBlue900 : string;
export const ColorFacetsBlue000 : string;
export const colorFacetsNeutralLight100 : string;
export const colorFacetsNeutralLight200 : string;
export const colorFacetsNeutralLight300 : string;
export const colorFacetsNeutralLight400 : string;
export const colorFacetsNeutralLight500 : string;
export const colorFacetsNeutralLight600 : string;
export const colorFacetsNeutralLight700 : string;
export const colorFacetsNeutralLight800 : string;
export const colorFacetsNeutralLight000 : string;
export const colorFacetsNeutralDark100 : string;
export const colorFacetsNeutralDark200 : string;
export const colorFacetsNeutralDark300 : string;
export const colorFacetsNeutralDark400 : string;
export const colorFacetsNeutralDark500 : string;
export const colorFacetsNeutralDark600 : string;
export const colorFacetsNeutralDark700 : string;
export const colorFacetsNeutralDark800 : string;
export const colorFacetsNeutralDark900 : string;
export const colorFacetsNeutralDark000 : string;
export const colorFacetsTeal100 : string;
export const colorFacetsTeal200 : string;
export const colorFacetsTeal300 : string;
export const colorFacetsTeal400 : string;
export const colorFacetsTeal500 : string;
export const colorFacetsTeal600 : string;
export const colorFacetsTeal700 : string;
export const colorFacetsTeal800 : string;
export const colorFacetsTeal900 : string;
export const colorFacetsTeal000 : string;
export const colorFacetsGreen100 : string;
export const colorFacetsGreen200 : string;
export const colorFacetsGreen300 : string;
export const colorFacetsGreen400 : string;
export const colorFacetsGreen500 : string;
export const colorFacetsGreen600 : string;
export const colorFacetsGreen700 : string;
export const colorFacetsGreen800 : string;
export const colorFacetsGreen900 : string;
export const colorFacetsGreen000 : string;
export const colorFacetsGold100 : string;
export const colorFacetsGold200 : string;
export const colorFacetsGold300 : string;
export const colorFacetsGold400 : string;
export const colorFacetsGold500 : string;
export const colorFacetsGold600 : string;
export const colorFacetsGold700 : string;
export const colorFacetsGold800 : string;
export const colorFacetsGold900 : string;
export const colorFacetsGold000 : string;
export const colorFacetsRed100 : string;
export const colorFacetsRed200 : string;
export const colorFacetsRed300 : string;
export const colorFacetsRed400 : string;
export const colorFacetsRed500 : string;
export const colorFacetsRed600 : string;
export const colorFacetsRed700 : string;
export const colorFacetsRed800 : string;
export const colorFacetsRed900 : string;
export const colorFacetsRed000 : string;
export const colorFacetsPink100 : string;
export const colorFacetsPink200 : string;
export const colorFacetsPink300 : string;
export const colorFacetsPink400 : string;
export const colorFacetsPink500 : string;
export const colorFacetsPink600 : string;
export const colorFacetsPink700 : string;
export const colorFacetsPink800 : string;
export const colorFacetsPink900 : string;
export const colorFacetsPink000 : string;
export const colorFacetsPurple100 : string;
export const colorFacetsPurple200 : string;
export const colorFacetsPurple300 : string;
export const colorFacetsPurple400 : string;
export const colorFacetsPurple500 : string;
export const colorFacetsPurple600 : string;
export const colorFacetsPurple700 : string;
export const colorFacetsPurple800 : string;
export const colorFacetsPurple900 : string;
export const colorFacetsPurple000 : string;
export const colorFacetsBlue100 : string;
export const colorFacetsBlue200 : string;
export const colorFacetsBlue300 : string;
export const colorFacetsBlue400 : string;
export const colorFacetsBlue500 : string;
export const colorFacetsBlue600 : string;
export const colorFacetsBlue700 : string;
export const colorFacetsBlue800 : string;
export const colorFacetsBlue900 : string;
export const colorFacetsBlue000 : string;
/** renamed from opacity0 from the app */
export const EffectOpacity0 : number;
export const effectOpacity0 : number;
/** renamed from opacity10 from the app */
export const EffectOpacity10 : number;
export const effectOpacity10 : number;
/** renamed from opacity10 from the app */
export const EffectOpacity20 : number;
export const effectOpacity20 : number;
/** renamed from opacity20 from the app */
export const EffectOpacity38 : number;
export const effectOpacity38 : number;
/** renamed from opacity54 from the app */
export const EffectOpacity54 : number;
export const effectOpacity54 : number;
/** renamed from opacity100 from the app */
export const EffectOpacity100 : number;
export const EffectShadowLightShallow : string;
export const effectOpacity100 : number;
export const effectShadowLightShallow : string;
/** Use for modals, dropdowns, and other components that need to be elevated above the page. */
export const EffectShadowLightDeep : string;
export const EffectShadowDarkShallow : string;
export const effectShadowLightDeep : string;
export const effectShadowDarkShallow : string;
/** Use for modals, dropdowns, and other components that need to be elevated above the page. */
export const EffectShadowDarkDeep : string;
export const SizeBorderRadiusSmall : string;
export const SizeBorderRadiusBig : string;
export const SizeSpacingNano : string;
export const SizeSpacingMicro : string;
export const SizeSpacingTiny : string;
export const SizeSpacingSmall : string;
export const SizeSpacingMedium : string;
export const SizeSpacingLarge : string;
export const SizeSpacingXl : string;
export const SizeSpacingXxl : string;
export const SizeSpacing3xl : string;
export const SizeSpacing4xl : string;
export const SizeSpacing5xl : string;
export const effectShadowDarkDeep : string;
export const sizeBorderRadiusSmall : string;
export const sizeBorderRadiusBig : string;
export const sizeSpacingNano : string;
export const sizeSpacingMicro : string;
export const sizeSpacingTiny : string;
export const sizeSpacingSmall : string;
export const sizeSpacingMedium : string;
export const sizeSpacingLarge : string;
export const sizeSpacingXl : string;
export const sizeSpacingXxl : string;
export const sizeSpacing3xl : string;
export const sizeSpacing4xl : string;
export const sizeSpacing5xl : string;
/** renamed from tinyText in the app */
export const TypographySizeTiny : string;
export const typographySizeTiny : string;
/** renamed from smallText in the app */
export const TypographySizeSmall : string;
export const typographySizeSmall : string;
/** renamed from mediumText in the app */
export const TypographySizeMedium : string;
export const typographySizeMedium : string;
/** renamed from largeText in the app */
export const TypographySizeLarge : string;
export const typographySizeLarge : string;
/** renamed from xlText in the app */
export const TypographySizeXl : string;
export const typographySizeXl : string;
/** renamed from xxlText in the app */
export const TypographySizeXxl : string;
export const typographySizeXxl : string;
/** renamed from xxxlText in the app */
export const TypographySizeXxxl : string;
export const typographySizeXxxl : string;
/** renamed from 4xlText in the app */
export const TypographySize4xl : string;
export const TypographyWeightThin : number;
export const TypographyWeightLight : number;
export const TypographyWeightRegular : number;
export const TypographyWeightMedium : number;
export const TypographyWeightSemibold : number;
export const TypographyWeightBold : number;
export const TypographyWeightBlack : number;
export const TypographyLetterSpacingTight : string;
export const TypographyLetterSpacingNormal : number;
export const TypographyLetterSpacingWide : string;
export const TypographyFontsSans : string;
export const TypographyFontsMono : string;
export const typographySize4xl : string;
export const typographyWeightThin : number;
export const typographyWeightLight : number;
export const typographyWeightRegular : number;
export const typographyWeightMedium : number;
export const typographyWeightSemibold : number;
export const typographyWeightBold : number;
export const typographyWeightBlack : number;
export const typographyLetterSpacingTight : string;
export const typographyLetterSpacingNormal : number;
export const typographyLetterSpacingWide : string;
export const typographyFontsSans : string;
export const typographyFontsMono : string;

4

package.json
{
"name": "@netlify/netlify-design-tokens",
"version": "6.0.0-beta.6",
"version": "6.0.0-beta.7",
"private": false,

@@ -35,3 +35,3 @@ "description": "Netlify's design tokens for sharing across products and repos",

"prebuild": "rimraf dist",
"build": "style-dictionary build --config sd.config.js",
"build": "style-dictionary build --config style-dictionary.config.js",
"prebuild:docs": "yarn build",

@@ -38,0 +38,0 @@ "build:docs": "storybook build --output-dir docs --docs --quiet"

23

README.md

@@ -21,3 +21,3 @@ # Netlify Design Tokens [![NPM version](https://img.shields.io/npm/v/@netlify/netlify-design-tokens.svg)](https://npmjs.com/@netlify/netlify-design-tokens)

.myComponent {
color: var(--color-teal-200);
color: var(--colorFacetsTeal200);
}

@@ -32,3 +32,3 @@ ```

:root {
--colorTeal: var(--color-facets-teal-200);
--colorTeal: var(--colorFacetsTeal200);
}

@@ -38,3 +38,3 @@

:root {
--colorTeal: var(--color-facets-teal-500);
--colorTeal: var(--colorFacetsTeal500);
}

@@ -54,3 +54,3 @@ }

:root {
--colorTeal: var(--color-rgb-facets-teal-200);
--colorTeal: var(--colorRgbFacetsTeal200);
}

@@ -60,3 +60,3 @@

:root {
--colorTeal: var(--color-rgb-facets-teal-500);
--colorTeal: var(--colorRgbFacetsTeal200);
}

@@ -73,5 +73,14 @@ }

```js
import tokens from '@netlify/netlify-design-tokens';
import { colorFacetsTeal500 } from '@netlify/netlify-design-tokens';
const teal = tokens.color.facets.teal.500;
const teal = colorFacetsTeal500;
```
or:
```js
import * as tokens from '@netlify/netlify-design-tokens';
const teal = tokens.colorFacetsTeal500;
const boldText = tokens.typographyWeightBold;
```
dist/css/border.css

Sorry, the diff of this file is not supported yet

dist/css/color.css

Sorry, the diff of this file is not supported yet

dist/css/color.rgb.css

Sorry, the diff of this file is not supported yet

dist/css/opacity.css

Sorry, the diff of this file is not supported yet

dist/css/shadow.css

Sorry, the diff of this file is not supported yet

dist/css/spacing.css

Sorry, the diff of this file is not supported yet

dist/css/typography.css

Sorry, the diff of this file is not supported yet

dist/js/index.js

Sorry, the diff of this file is too big to display