🚀 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-rc.2
to
6.0.0-rc.3

dist/json/color.nested.json
dist/json/color.object.json
dist/json/index.nested.json
dist/json/index.object.json

4

dist/js/index.d.ts

@@ -98,6 +98,6 @@ export const colorFacetsNeutralLight100 : "#f6f6f7";

/** Use for modals, dropdowns, and other components that need to be elevated above the page. */
export const effectShadowLightDeep : "0 16px 24px rgb(0 0 0 / 7%), 0 6px 30px rgb(0 0 0 / 6%), 0 8px 10px rgb(0 0 0 / 10%)";
export const effectShadowLightDeep : "0 16px 24px rgb(24 26 28 / 7%), 0 6px 30px rgb(24 26 28 / 6%), 0 8px 10px rgb(24 26 28 / 10%)";
export const effectShadowDarkShallow : "0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%)";
/** Use for modals, dropdowns, and other components that need to be elevated above the page. */
export const effectShadowDarkDeep : "0 16px 24px rgb(0 0 0 / 7%), 0 6px 30px rgb(0 0 0 / 6%), 0 8px 10px rgb(0 0 0 / 10%)";
export const effectShadowDarkDeep : "0 16px 24px rgb(6 11 16 / 20%), 0 6px 30px rgb(6 11 16 / 30%), 0 8px 10px rgb(6 11 16 / 40%)";
export const sizeBorderRadiusSmall : "6px";

@@ -104,0 +104,0 @@ export const sizeBorderRadiusBig : "8px";

4

dist/js/index.js

@@ -97,5 +97,5 @@ export const colorFacetsNeutralLight100 = "#f6f6f7";

export const effectShadowLightShallow = "0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%)";
export const effectShadowLightDeep = "0 16px 24px rgb(0 0 0 / 7%), 0 6px 30px rgb(0 0 0 / 6%), 0 8px 10px rgb(0 0 0 / 10%)"; // Use for modals, dropdowns, and other components that need to be elevated above the page.
export const effectShadowLightDeep = "0 16px 24px rgb(24 26 28 / 7%), 0 6px 30px rgb(24 26 28 / 6%), 0 8px 10px rgb(24 26 28 / 10%)"; // Use for modals, dropdowns, and other components that need to be elevated above the page.
export const effectShadowDarkShallow = "0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%)";
export const effectShadowDarkDeep = "0 16px 24px rgb(0 0 0 / 7%), 0 6px 30px rgb(0 0 0 / 6%), 0 8px 10px rgb(0 0 0 / 10%)"; // Use for modals, dropdowns, and other components that need to be elevated above the page.
export const effectShadowDarkDeep = "0 16px 24px rgb(6 11 16 / 20%), 0 6px 30px rgb(6 11 16 / 30%), 0 8px 10px rgb(6 11 16 / 40%)"; // Use for modals, dropdowns, and other components that need to be elevated above the page.
export const sizeBorderRadiusSmall = "6px";

@@ -102,0 +102,0 @@ export const sizeBorderRadiusBig = "8px";

202

dist/json/color.json
{
"color": {
"facets": {
"neutral": {
"light": {
"100": "#f6f6f7",
"200": "#e9ebed",
"300": "#d1d5da",
"400": "#9da7b2",
"500": "#778089",
"600": "#545a61",
"700": "#353a3e",
"800": "#181a1c",
"000": "#ffffff"
},
"dark": {
"100": "#e6ecf2",
"200": "#abb5bf",
"300": "#7e8792",
"400": "#4d565f",
"500": "#3b434c",
"600": "#272f38",
"700": "#1e242c",
"800": "#12181f",
"900": "#060b10",
"000": "#ffffff"
}
},
"teal": {
"100": "#8efbf7",
"200": "#32e6e2",
"300": "#14d8d4",
"400": "#05bdba",
"500": "#04a29f",
"600": "#02807d",
"700": "#016968",
"800": "#014847",
"900": "#0c2a2a",
"000": "#defffe"
},
"green": {
"100": "#bef9c6",
"200": "#93f5a5",
"300": "#64d87f",
"400": "#3ac364",
"500": "#31a855",
"600": "#228240",
"700": "#1a6b34",
"800": "#0f4a21",
"900": "#152a19",
"000": "#e7fce9"
},
"gold": {
"100": "#f6e0a5",
"200": "#facd6f",
"300": "#fbb13d",
"400": "#f98e21",
"500": "#d5771a",
"600": "#a85d13",
"700": "#8c4c0d",
"800": "#603408",
"900": "#332213",
"000": "#fdf5d8"
},
"red": {
"100": "#fbd3d0",
"200": "#ffbdba",
"300": "#ffada9",
"400": "#fe8382",
"500": "#fe4e5c",
"600": "#d62740",
"700": "#af2536",
"800": "#800a20",
"900": "#3d1c1b",
"000": "#fbeeed"
},
"pink": {
"100": "#f6d2f2",
"200": "#f7bcf3",
"300": "#f3a8ee",
"400": "#ef7feb",
"500": "#df5adc",
"600": "#b938b8",
"700": "#9a2d99",
"800": "#6c1d6b",
"900": "#381b37",
"000": "#fcf0fb"
},
"purple": {
"100": "#e2d9f7",
"200": "#d8c7ff",
"300": "#cab9f4",
"400": "#b49df1",
"500": "#9b80ed",
"600": "#775ce7",
"700": "#614aca",
"800": "#382aa4",
"900": "#292142",
"000": "#f5f2fc"
},
"blue": {
"100": "#cde2ff",
"200": "#b5d2fb",
"300": "#9cbef6",
"400": "#80abfa",
"500": "#5d8df5",
"600": "#316bf4",
"700": "#2e51ed",
"800": "#2036a1",
"900": "#1b205b",
"000": "#edf4ff"
}
}
}
"colorFacetsNeutralLight100": "#f6f6f7",
"colorFacetsNeutralLight200": "#e9ebed",
"colorFacetsNeutralLight300": "#d1d5da",
"colorFacetsNeutralLight400": "#9da7b2",
"colorFacetsNeutralLight500": "#778089",
"colorFacetsNeutralLight600": "#545a61",
"colorFacetsNeutralLight700": "#353a3e",
"colorFacetsNeutralLight800": "#181a1c",
"colorFacetsNeutralLight000": "#ffffff",
"colorFacetsNeutralDark100": "#e6ecf2",
"colorFacetsNeutralDark200": "#abb5bf",
"colorFacetsNeutralDark300": "#7e8792",
"colorFacetsNeutralDark400": "#4d565f",
"colorFacetsNeutralDark500": "#3b434c",
"colorFacetsNeutralDark600": "#272f38",
"colorFacetsNeutralDark700": "#1e242c",
"colorFacetsNeutralDark800": "#12181f",
"colorFacetsNeutralDark900": "#060b10",
"colorFacetsNeutralDark000": "#ffffff",
"colorFacetsTeal100": "#8efbf7",
"colorFacetsTeal200": "#32e6e2",
"colorFacetsTeal300": "#14d8d4",
"colorFacetsTeal400": "#05bdba",
"colorFacetsTeal500": "#04a29f",
"colorFacetsTeal600": "#02807d",
"colorFacetsTeal700": "#016968",
"colorFacetsTeal800": "#014847",
"colorFacetsTeal900": "#0c2a2a",
"colorFacetsTeal000": "#defffe",
"colorFacetsGreen100": "#bef9c6",
"colorFacetsGreen200": "#93f5a5",
"colorFacetsGreen300": "#64d87f",
"colorFacetsGreen400": "#3ac364",
"colorFacetsGreen500": "#31a855",
"colorFacetsGreen600": "#228240",
"colorFacetsGreen700": "#1a6b34",
"colorFacetsGreen800": "#0f4a21",
"colorFacetsGreen900": "#152a19",
"colorFacetsGreen000": "#e7fce9",
"colorFacetsGold100": "#f6e0a5",
"colorFacetsGold200": "#facd6f",
"colorFacetsGold300": "#fbb13d",
"colorFacetsGold400": "#f98e21",
"colorFacetsGold500": "#d5771a",
"colorFacetsGold600": "#a85d13",
"colorFacetsGold700": "#8c4c0d",
"colorFacetsGold800": "#603408",
"colorFacetsGold900": "#332213",
"colorFacetsGold000": "#fdf5d8",
"colorFacetsRed100": "#fbd3d0",
"colorFacetsRed200": "#ffbdba",
"colorFacetsRed300": "#ffada9",
"colorFacetsRed400": "#fe8382",
"colorFacetsRed500": "#fe4e5c",
"colorFacetsRed600": "#d62740",
"colorFacetsRed700": "#af2536",
"colorFacetsRed800": "#800a20",
"colorFacetsRed900": "#3d1c1b",
"colorFacetsRed000": "#fbeeed",
"colorFacetsPink100": "#f6d2f2",
"colorFacetsPink200": "#f7bcf3",
"colorFacetsPink300": "#f3a8ee",
"colorFacetsPink400": "#ef7feb",
"colorFacetsPink500": "#df5adc",
"colorFacetsPink600": "#b938b8",
"colorFacetsPink700": "#9a2d99",
"colorFacetsPink800": "#6c1d6b",
"colorFacetsPink900": "#381b37",
"colorFacetsPink000": "#fcf0fb",
"colorFacetsPurple100": "#e2d9f7",
"colorFacetsPurple200": "#d8c7ff",
"colorFacetsPurple300": "#cab9f4",
"colorFacetsPurple400": "#b49df1",
"colorFacetsPurple500": "#9b80ed",
"colorFacetsPurple600": "#775ce7",
"colorFacetsPurple700": "#614aca",
"colorFacetsPurple800": "#382aa4",
"colorFacetsPurple900": "#292142",
"colorFacetsPurple000": "#f5f2fc",
"colorFacetsBlue100": "#cde2ff",
"colorFacetsBlue200": "#b5d2fb",
"colorFacetsBlue300": "#9cbef6",
"colorFacetsBlue400": "#80abfa",
"colorFacetsBlue500": "#5d8df5",
"colorFacetsBlue600": "#316bf4",
"colorFacetsBlue700": "#2e51ed",
"colorFacetsBlue800": "#2036a1",
"colorFacetsBlue900": "#1b205b",
"colorFacetsBlue000": "#edf4ff"
}

316

dist/json/index.json
{
"color": {
"facets": {
"neutral": {
"light": {
"100": "#f6f6f7",
"200": "#e9ebed",
"300": "#d1d5da",
"400": "#9da7b2",
"500": "#778089",
"600": "#545a61",
"700": "#353a3e",
"800": "#181a1c",
"000": "#ffffff"
},
"dark": {
"100": "#e6ecf2",
"200": "#abb5bf",
"300": "#7e8792",
"400": "#4d565f",
"500": "#3b434c",
"600": "#272f38",
"700": "#1e242c",
"800": "#12181f",
"900": "#060b10",
"000": "#ffffff"
}
},
"teal": {
"100": "#8efbf7",
"200": "#32e6e2",
"300": "#14d8d4",
"400": "#05bdba",
"500": "#04a29f",
"600": "#02807d",
"700": "#016968",
"800": "#014847",
"900": "#0c2a2a",
"000": "#defffe"
},
"green": {
"100": "#bef9c6",
"200": "#93f5a5",
"300": "#64d87f",
"400": "#3ac364",
"500": "#31a855",
"600": "#228240",
"700": "#1a6b34",
"800": "#0f4a21",
"900": "#152a19",
"000": "#e7fce9"
},
"gold": {
"100": "#f6e0a5",
"200": "#facd6f",
"300": "#fbb13d",
"400": "#f98e21",
"500": "#d5771a",
"600": "#a85d13",
"700": "#8c4c0d",
"800": "#603408",
"900": "#332213",
"000": "#fdf5d8"
},
"red": {
"100": "#fbd3d0",
"200": "#ffbdba",
"300": "#ffada9",
"400": "#fe8382",
"500": "#fe4e5c",
"600": "#d62740",
"700": "#af2536",
"800": "#800a20",
"900": "#3d1c1b",
"000": "#fbeeed"
},
"pink": {
"100": "#f6d2f2",
"200": "#f7bcf3",
"300": "#f3a8ee",
"400": "#ef7feb",
"500": "#df5adc",
"600": "#b938b8",
"700": "#9a2d99",
"800": "#6c1d6b",
"900": "#381b37",
"000": "#fcf0fb"
},
"purple": {
"100": "#e2d9f7",
"200": "#d8c7ff",
"300": "#cab9f4",
"400": "#b49df1",
"500": "#9b80ed",
"600": "#775ce7",
"700": "#614aca",
"800": "#382aa4",
"900": "#292142",
"000": "#f5f2fc"
},
"blue": {
"100": "#cde2ff",
"200": "#b5d2fb",
"300": "#9cbef6",
"400": "#80abfa",
"500": "#5d8df5",
"600": "#316bf4",
"700": "#2e51ed",
"800": "#2036a1",
"900": "#1b205b",
"000": "#edf4ff"
}
}
},
"effect": {
"opacity": {
"0": 0,
"10": 0.1,
"20": 0.2,
"38": 0.38,
"54": 0.54,
"100": 1
},
"shadow": {
"light": {
"shallow": "0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%)",
"deep": "0 16px 24px rgb(0 0 0 / 7%), 0 6px 30px rgb(0 0 0 / 6%), 0 8px 10px rgb(0 0 0 / 10%)"
},
"dark": {
"shallow": "0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%)",
"deep": "0 16px 24px rgb(0 0 0 / 7%), 0 6px 30px rgb(0 0 0 / 6%), 0 8px 10px rgb(0 0 0 / 10%)"
}
}
},
"size": {
"border": {
"radius": {
"small": "6px",
"big": "8px"
}
},
"spacing": {
"nano": "4px",
"micro": "8px",
"tiny": "16px",
"small": "24px",
"medium": "40px",
"large": "64px",
"xl": "104px",
"xxl": "168px",
"3xl": "264px",
"4xl": "424px",
"5xl": "680px"
}
},
"typography": {
"size": {
"tiny": "12px",
"small": "14px",
"medium": "16px",
"large": "18px",
"xl": "22px",
"xxl": "36px",
"xxxl": "64px",
"4xl": "104px"
},
"weight": {
"thin": 100,
"light": 300,
"regular": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"black": 900
},
"letterSpacing": {
"tight": "-0.025em",
"normal": 0,
"wide": "1.5px"
},
"fonts": {
"sans": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"mono": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro','Fira Mono', 'Droid Sans Mono', 'Courier New', monospace"
}
}
"colorFacetsNeutralLight100": "#f6f6f7",
"colorFacetsNeutralLight200": "#e9ebed",
"colorFacetsNeutralLight300": "#d1d5da",
"colorFacetsNeutralLight400": "#9da7b2",
"colorFacetsNeutralLight500": "#778089",
"colorFacetsNeutralLight600": "#545a61",
"colorFacetsNeutralLight700": "#353a3e",
"colorFacetsNeutralLight800": "#181a1c",
"colorFacetsNeutralLight000": "#ffffff",
"colorFacetsNeutralDark100": "#e6ecf2",
"colorFacetsNeutralDark200": "#abb5bf",
"colorFacetsNeutralDark300": "#7e8792",
"colorFacetsNeutralDark400": "#4d565f",
"colorFacetsNeutralDark500": "#3b434c",
"colorFacetsNeutralDark600": "#272f38",
"colorFacetsNeutralDark700": "#1e242c",
"colorFacetsNeutralDark800": "#12181f",
"colorFacetsNeutralDark900": "#060b10",
"colorFacetsNeutralDark000": "#ffffff",
"colorFacetsTeal100": "#8efbf7",
"colorFacetsTeal200": "#32e6e2",
"colorFacetsTeal300": "#14d8d4",
"colorFacetsTeal400": "#05bdba",
"colorFacetsTeal500": "#04a29f",
"colorFacetsTeal600": "#02807d",
"colorFacetsTeal700": "#016968",
"colorFacetsTeal800": "#014847",
"colorFacetsTeal900": "#0c2a2a",
"colorFacetsTeal000": "#defffe",
"colorFacetsGreen100": "#bef9c6",
"colorFacetsGreen200": "#93f5a5",
"colorFacetsGreen300": "#64d87f",
"colorFacetsGreen400": "#3ac364",
"colorFacetsGreen500": "#31a855",
"colorFacetsGreen600": "#228240",
"colorFacetsGreen700": "#1a6b34",
"colorFacetsGreen800": "#0f4a21",
"colorFacetsGreen900": "#152a19",
"colorFacetsGreen000": "#e7fce9",
"colorFacetsGold100": "#f6e0a5",
"colorFacetsGold200": "#facd6f",
"colorFacetsGold300": "#fbb13d",
"colorFacetsGold400": "#f98e21",
"colorFacetsGold500": "#d5771a",
"colorFacetsGold600": "#a85d13",
"colorFacetsGold700": "#8c4c0d",
"colorFacetsGold800": "#603408",
"colorFacetsGold900": "#332213",
"colorFacetsGold000": "#fdf5d8",
"colorFacetsRed100": "#fbd3d0",
"colorFacetsRed200": "#ffbdba",
"colorFacetsRed300": "#ffada9",
"colorFacetsRed400": "#fe8382",
"colorFacetsRed500": "#fe4e5c",
"colorFacetsRed600": "#d62740",
"colorFacetsRed700": "#af2536",
"colorFacetsRed800": "#800a20",
"colorFacetsRed900": "#3d1c1b",
"colorFacetsRed000": "#fbeeed",
"colorFacetsPink100": "#f6d2f2",
"colorFacetsPink200": "#f7bcf3",
"colorFacetsPink300": "#f3a8ee",
"colorFacetsPink400": "#ef7feb",
"colorFacetsPink500": "#df5adc",
"colorFacetsPink600": "#b938b8",
"colorFacetsPink700": "#9a2d99",
"colorFacetsPink800": "#6c1d6b",
"colorFacetsPink900": "#381b37",
"colorFacetsPink000": "#fcf0fb",
"colorFacetsPurple100": "#e2d9f7",
"colorFacetsPurple200": "#d8c7ff",
"colorFacetsPurple300": "#cab9f4",
"colorFacetsPurple400": "#b49df1",
"colorFacetsPurple500": "#9b80ed",
"colorFacetsPurple600": "#775ce7",
"colorFacetsPurple700": "#614aca",
"colorFacetsPurple800": "#382aa4",
"colorFacetsPurple900": "#292142",
"colorFacetsPurple000": "#f5f2fc",
"colorFacetsBlue100": "#cde2ff",
"colorFacetsBlue200": "#b5d2fb",
"colorFacetsBlue300": "#9cbef6",
"colorFacetsBlue400": "#80abfa",
"colorFacetsBlue500": "#5d8df5",
"colorFacetsBlue600": "#316bf4",
"colorFacetsBlue700": "#2e51ed",
"colorFacetsBlue800": "#2036a1",
"colorFacetsBlue900": "#1b205b",
"colorFacetsBlue000": "#edf4ff",
"effectOpacity0": 0,
"effectOpacity10": 0.1,
"effectOpacity20": 0.2,
"effectOpacity38": 0.38,
"effectOpacity54": 0.54,
"effectOpacity100": 1,
"effectShadowLightShallow": "0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%)",
"effectShadowLightDeep": "0 16px 24px rgb(24 26 28 / 7%), 0 6px 30px rgb(24 26 28 / 6%), 0 8px 10px rgb(24 26 28 / 10%)",
"effectShadowDarkShallow": "0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%)",
"effectShadowDarkDeep": "0 16px 24px rgb(6 11 16 / 20%), 0 6px 30px rgb(6 11 16 / 30%), 0 8px 10px rgb(6 11 16 / 40%)",
"sizeBorderRadiusSmall": "6px",
"sizeBorderRadiusBig": "8px",
"sizeSpacingNano": "4px",
"sizeSpacingMicro": "8px",
"sizeSpacingTiny": "16px",
"sizeSpacingSmall": "24px",
"sizeSpacingMedium": "40px",
"sizeSpacingLarge": "64px",
"sizeSpacingXl": "104px",
"sizeSpacingXxl": "168px",
"sizeSpacing3xl": "264px",
"sizeSpacing4xl": "424px",
"sizeSpacing5xl": "680px",
"typographySizeTiny": "12px",
"typographySizeSmall": "14px",
"typographySizeMedium": "16px",
"typographySizeLarge": "18px",
"typographySizeXl": "22px",
"typographySizeXxl": "36px",
"typographySizeXxxl": "64px",
"typographySize4xl": "104px",
"typographyWeightThin": 100,
"typographyWeightLight": 300,
"typographyWeightRegular": 400,
"typographyWeightMedium": 500,
"typographyWeightSemibold": 600,
"typographyWeightBold": 700,
"typographyWeightBlack": 900,
"typographyLetterSpacingTight": "-0.025em",
"typographyLetterSpacingNormal": 0,
"typographyLetterSpacingWide": "1.5px",
"typographyFontsSans": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"typographyFontsMono": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro','Fira Mono', 'Droid Sans Mono', 'Courier New', monospace"
}

10

package.json
{
"name": "@netlify/netlify-design-tokens",
"version": "6.0.0-rc.2",
"version": "6.0.0-rc.3",
"private": false,

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

"devDependencies": {
"@storybook/addon-docs": "7.4.6",
"@storybook/html-webpack5": "7.4.6",
"@storybook/addon-docs": "7.5.1",
"@storybook/html-webpack5": "7.5.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"rimraf": "5.0.5",
"storybook": "7.4.6",
"style-dictionary": "3.8.0",
"storybook": "7.5.1",
"style-dictionary": "3.9.0",
"webpack": "5.89.0"
}
}
dist/css/shadow.css

Sorry, the diff of this file is not supported yet

dist/js/index.cjs

Sorry, the diff of this file is not supported yet