@netlify/netlify-design-tokens
Advanced tools
Comparing version
@@ -1,90 +0,90 @@ | ||
export const ColorNeutralLight100 : string; | ||
export const ColorNeutralLight200 : string; | ||
export const ColorNeutralLight300 : string; | ||
export const ColorNeutralLight400 : string; | ||
export const ColorNeutralLight500 : string; | ||
export const ColorNeutralLight600 : string; | ||
export const ColorNeutralLight700 : string; | ||
export const ColorNeutralLight800 : string; | ||
export const ColorNeutralLight000 : string; | ||
export const ColorNeutralDark100 : string; | ||
export const ColorNeutralDark200 : string; | ||
export const ColorNeutralDark300 : string; | ||
export const ColorNeutralDark400 : string; | ||
export const ColorNeutralDark500 : string; | ||
export const ColorNeutralDark600 : string; | ||
export const ColorNeutralDark700 : string; | ||
export const ColorNeutralDark800 : string; | ||
export const ColorNeutralDark900 : string; | ||
export const ColorNeutralDark000 : string; | ||
export const ColorTeal100 : string; | ||
export const ColorTeal200 : string; | ||
export const ColorTeal300 : string; | ||
export const ColorTeal400 : string; | ||
export const ColorTeal500 : string; | ||
export const ColorTeal600 : string; | ||
export const ColorTeal700 : string; | ||
export const ColorTeal800 : string; | ||
export const ColorTeal900 : string; | ||
export const ColorTeal000 : string; | ||
export const ColorGreen100 : string; | ||
export const ColorGreen200 : string; | ||
export const ColorGreen300 : string; | ||
export const ColorGreen400 : string; | ||
export const ColorGreen500 : string; | ||
export const ColorGreen600 : string; | ||
export const ColorGreen700 : string; | ||
export const ColorGreen800 : string; | ||
export const ColorGreen900 : string; | ||
export const ColorGreen000 : string; | ||
export const ColorGold100 : string; | ||
export const ColorGold200 : string; | ||
export const ColorGold300 : string; | ||
export const ColorGold400 : string; | ||
export const ColorGold500 : string; | ||
export const ColorGold600 : string; | ||
export const ColorGold700 : string; | ||
export const ColorGold800 : string; | ||
export const ColorGold900 : string; | ||
export const ColorGold000 : string; | ||
export const ColorRed100 : string; | ||
export const ColorRed200 : string; | ||
export const ColorRed300 : string; | ||
export const ColorRed400 : string; | ||
export const ColorRed500 : string; | ||
export const ColorRed600 : string; | ||
export const ColorRed700 : string; | ||
export const ColorRed800 : string; | ||
export const ColorRed900 : string; | ||
export const ColorRed000 : string; | ||
export const ColorPink100 : string; | ||
export const ColorPink200 : string; | ||
export const ColorPink300 : string; | ||
export const ColorPink400 : string; | ||
export const ColorPink500 : string; | ||
export const ColorPink600 : string; | ||
export const ColorPink700 : string; | ||
export const ColorPink800 : string; | ||
export const ColorPink900 : string; | ||
export const ColorPink000 : string; | ||
export const ColorPurple100 : string; | ||
export const ColorPurple200 : string; | ||
export const ColorPurple300 : string; | ||
export const ColorPurple400 : string; | ||
export const ColorPurple500 : string; | ||
export const ColorPurple600 : string; | ||
export const ColorPurple700 : string; | ||
export const ColorPurple800 : string; | ||
export const ColorPurple900 : string; | ||
export const ColorPurple000 : string; | ||
export const ColorBlue100 : string; | ||
export const ColorBlue200 : string; | ||
export const ColorBlue300 : string; | ||
export const ColorBlue400 : string; | ||
export const ColorBlue500 : string; | ||
export const ColorBlue600 : string; | ||
export const ColorBlue700 : string; | ||
export const ColorBlue800 : string; | ||
export const ColorBlue900 : string; | ||
export const ColorBlue000 : string; | ||
export const FacetsNeutralLight100 : string; | ||
export const FacetsNeutralLight200 : string; | ||
export const FacetsNeutralLight300 : string; | ||
export const FacetsNeutralLight400 : string; | ||
export const FacetsNeutralLight500 : string; | ||
export const FacetsNeutralLight600 : string; | ||
export const FacetsNeutralLight700 : string; | ||
export const FacetsNeutralLight800 : string; | ||
export const FacetsNeutralLight000 : string; | ||
export const FacetsNeutralDark100 : string; | ||
export const FacetsNeutralDark200 : string; | ||
export const FacetsNeutralDark300 : string; | ||
export const FacetsNeutralDark400 : string; | ||
export const FacetsNeutralDark500 : string; | ||
export const FacetsNeutralDark600 : string; | ||
export const FacetsNeutralDark700 : string; | ||
export const FacetsNeutralDark800 : string; | ||
export const FacetsNeutralDark900 : string; | ||
export const FacetsNeutralDark000 : string; | ||
export const FacetsTeal100 : string; | ||
export const FacetsTeal200 : string; | ||
export const FacetsTeal300 : string; | ||
export const FacetsTeal400 : string; | ||
export const FacetsTeal500 : string; | ||
export const FacetsTeal600 : string; | ||
export const FacetsTeal700 : string; | ||
export const FacetsTeal800 : string; | ||
export const FacetsTeal900 : string; | ||
export const FacetsTeal000 : string; | ||
export const FacetsGreen100 : string; | ||
export const FacetsGreen200 : string; | ||
export const FacetsGreen300 : string; | ||
export const FacetsGreen400 : string; | ||
export const FacetsGreen500 : string; | ||
export const FacetsGreen600 : string; | ||
export const FacetsGreen700 : string; | ||
export const FacetsGreen800 : string; | ||
export const FacetsGreen900 : string; | ||
export const FacetsGreen000 : string; | ||
export const FacetsGold100 : string; | ||
export const FacetsGold200 : string; | ||
export const FacetsGold300 : string; | ||
export const FacetsGold400 : string; | ||
export const FacetsGold500 : string; | ||
export const FacetsGold600 : string; | ||
export const FacetsGold700 : string; | ||
export const FacetsGold800 : string; | ||
export const FacetsGold900 : string; | ||
export const FacetsGold000 : string; | ||
export const FacetsRed100 : string; | ||
export const FacetsRed200 : string; | ||
export const FacetsRed300 : string; | ||
export const FacetsRed400 : string; | ||
export const FacetsRed500 : string; | ||
export const FacetsRed600 : string; | ||
export const FacetsRed700 : string; | ||
export const FacetsRed800 : string; | ||
export const FacetsRed900 : string; | ||
export const FacetsRed000 : string; | ||
export const FacetsPink100 : string; | ||
export const FacetsPink200 : string; | ||
export const FacetsPink300 : string; | ||
export const FacetsPink400 : string; | ||
export const FacetsPink500 : string; | ||
export const FacetsPink600 : string; | ||
export const FacetsPink700 : string; | ||
export const FacetsPink800 : string; | ||
export const FacetsPink900 : string; | ||
export const FacetsPink000 : string; | ||
export const FacetsPurple100 : string; | ||
export const FacetsPurple200 : string; | ||
export const FacetsPurple300 : string; | ||
export const FacetsPurple400 : string; | ||
export const FacetsPurple500 : string; | ||
export const FacetsPurple600 : string; | ||
export const FacetsPurple700 : string; | ||
export const FacetsPurple800 : string; | ||
export const FacetsPurple900 : string; | ||
export const FacetsPurple000 : string; | ||
export const FacetsBlue100 : string; | ||
export const FacetsBlue200 : string; | ||
export const FacetsBlue300 : string; | ||
export const FacetsBlue400 : string; | ||
export const FacetsBlue500 : string; | ||
export const FacetsBlue600 : string; | ||
export const FacetsBlue700 : string; | ||
export const FacetsBlue800 : string; | ||
export const FacetsBlue900 : string; | ||
export const FacetsBlue000 : string; | ||
/** renamed from opacity0 from the app */ | ||
@@ -91,0 +91,0 @@ export const EffectOpacity0 : number; |
module.exports = { | ||
"color": { | ||
"facets": { | ||
"neutral": { | ||
@@ -12,5 +12,5 @@ "light": { | ||
}, | ||
"name": "ColorNeutralLight100", | ||
"name": "FacetsNeutralLight100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -21,3 +21,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -35,5 +35,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight200", | ||
"name": "FacetsNeutralLight200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -44,3 +44,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -58,5 +58,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight300", | ||
"name": "FacetsNeutralLight300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -67,3 +67,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -81,5 +81,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight400", | ||
"name": "FacetsNeutralLight400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -90,3 +90,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -104,5 +104,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight500", | ||
"name": "FacetsNeutralLight500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -113,3 +113,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -127,5 +127,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight600", | ||
"name": "FacetsNeutralLight600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -136,3 +136,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -150,5 +150,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight700", | ||
"name": "FacetsNeutralLight700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -159,3 +159,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -173,5 +173,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight800", | ||
"name": "FacetsNeutralLight800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -182,3 +182,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -196,5 +196,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralLight000", | ||
"name": "FacetsNeutralLight000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -205,3 +205,3 @@ "item": "light", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -221,5 +221,5 @@ "light", | ||
}, | ||
"name": "ColorNeutralDark100", | ||
"name": "FacetsNeutralDark100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -230,3 +230,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -244,5 +244,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark200", | ||
"name": "FacetsNeutralDark200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -253,3 +253,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -267,5 +267,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark300", | ||
"name": "FacetsNeutralDark300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -276,3 +276,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -290,5 +290,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark400", | ||
"name": "FacetsNeutralDark400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -299,3 +299,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -313,5 +313,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark500", | ||
"name": "FacetsNeutralDark500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -322,3 +322,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -336,5 +336,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark600", | ||
"name": "FacetsNeutralDark600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -345,3 +345,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -359,5 +359,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark700", | ||
"name": "FacetsNeutralDark700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -368,3 +368,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -382,5 +382,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark800", | ||
"name": "FacetsNeutralDark800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -391,3 +391,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -405,5 +405,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark900", | ||
"name": "FacetsNeutralDark900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -414,3 +414,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -428,5 +428,5 @@ "dark", | ||
}, | ||
"name": "ColorNeutralDark000", | ||
"name": "FacetsNeutralDark000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "neutral", | ||
@@ -437,3 +437,3 @@ "item": "dark", | ||
"path": [ | ||
"color", | ||
"facets", | ||
"neutral", | ||
@@ -454,5 +454,5 @@ "dark", | ||
}, | ||
"name": "ColorTeal100", | ||
"name": "FacetsTeal100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -462,3 +462,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -475,5 +475,5 @@ "100" | ||
}, | ||
"name": "ColorTeal200", | ||
"name": "FacetsTeal200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -483,3 +483,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -496,5 +496,5 @@ "200" | ||
}, | ||
"name": "ColorTeal300", | ||
"name": "FacetsTeal300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -504,3 +504,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -517,5 +517,5 @@ "300" | ||
}, | ||
"name": "ColorTeal400", | ||
"name": "FacetsTeal400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -525,3 +525,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -538,5 +538,5 @@ "400" | ||
}, | ||
"name": "ColorTeal500", | ||
"name": "FacetsTeal500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -546,3 +546,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -559,5 +559,5 @@ "500" | ||
}, | ||
"name": "ColorTeal600", | ||
"name": "FacetsTeal600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -567,3 +567,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -580,5 +580,5 @@ "600" | ||
}, | ||
"name": "ColorTeal700", | ||
"name": "FacetsTeal700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -588,3 +588,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -601,5 +601,5 @@ "700" | ||
}, | ||
"name": "ColorTeal800", | ||
"name": "FacetsTeal800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -609,3 +609,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -622,5 +622,5 @@ "800" | ||
}, | ||
"name": "ColorTeal900", | ||
"name": "FacetsTeal900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -630,3 +630,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -643,5 +643,5 @@ "900" | ||
}, | ||
"name": "ColorTeal000", | ||
"name": "FacetsTeal000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "teal", | ||
@@ -651,3 +651,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"teal", | ||
@@ -666,5 +666,5 @@ "000" | ||
}, | ||
"name": "ColorGreen100", | ||
"name": "FacetsGreen100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -674,3 +674,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -687,5 +687,5 @@ "100" | ||
}, | ||
"name": "ColorGreen200", | ||
"name": "FacetsGreen200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -695,3 +695,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -708,5 +708,5 @@ "200" | ||
}, | ||
"name": "ColorGreen300", | ||
"name": "FacetsGreen300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -716,3 +716,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -729,5 +729,5 @@ "300" | ||
}, | ||
"name": "ColorGreen400", | ||
"name": "FacetsGreen400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -737,3 +737,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -750,5 +750,5 @@ "400" | ||
}, | ||
"name": "ColorGreen500", | ||
"name": "FacetsGreen500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -758,3 +758,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -771,5 +771,5 @@ "500" | ||
}, | ||
"name": "ColorGreen600", | ||
"name": "FacetsGreen600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -779,3 +779,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -792,5 +792,5 @@ "600" | ||
}, | ||
"name": "ColorGreen700", | ||
"name": "FacetsGreen700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -800,3 +800,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -813,5 +813,5 @@ "700" | ||
}, | ||
"name": "ColorGreen800", | ||
"name": "FacetsGreen800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -821,3 +821,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -834,5 +834,5 @@ "800" | ||
}, | ||
"name": "ColorGreen900", | ||
"name": "FacetsGreen900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -842,3 +842,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -855,5 +855,5 @@ "900" | ||
}, | ||
"name": "ColorGreen000", | ||
"name": "FacetsGreen000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "green", | ||
@@ -863,3 +863,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"green", | ||
@@ -878,5 +878,5 @@ "000" | ||
}, | ||
"name": "ColorGold100", | ||
"name": "FacetsGold100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -886,3 +886,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -899,5 +899,5 @@ "100" | ||
}, | ||
"name": "ColorGold200", | ||
"name": "FacetsGold200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -907,3 +907,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -920,5 +920,5 @@ "200" | ||
}, | ||
"name": "ColorGold300", | ||
"name": "FacetsGold300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -928,3 +928,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -941,5 +941,5 @@ "300" | ||
}, | ||
"name": "ColorGold400", | ||
"name": "FacetsGold400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -949,3 +949,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -962,5 +962,5 @@ "400" | ||
}, | ||
"name": "ColorGold500", | ||
"name": "FacetsGold500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -970,3 +970,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -983,5 +983,5 @@ "500" | ||
}, | ||
"name": "ColorGold600", | ||
"name": "FacetsGold600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -991,3 +991,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -1004,5 +1004,5 @@ "600" | ||
}, | ||
"name": "ColorGold700", | ||
"name": "FacetsGold700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -1012,3 +1012,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -1025,5 +1025,5 @@ "700" | ||
}, | ||
"name": "ColorGold800", | ||
"name": "FacetsGold800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -1033,3 +1033,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -1046,5 +1046,5 @@ "800" | ||
}, | ||
"name": "ColorGold900", | ||
"name": "FacetsGold900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -1054,3 +1054,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -1067,5 +1067,5 @@ "900" | ||
}, | ||
"name": "ColorGold000", | ||
"name": "FacetsGold000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "gold", | ||
@@ -1075,3 +1075,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"gold", | ||
@@ -1090,5 +1090,5 @@ "000" | ||
}, | ||
"name": "ColorRed100", | ||
"name": "FacetsRed100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1098,3 +1098,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1111,5 +1111,5 @@ "100" | ||
}, | ||
"name": "ColorRed200", | ||
"name": "FacetsRed200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1119,3 +1119,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1132,5 +1132,5 @@ "200" | ||
}, | ||
"name": "ColorRed300", | ||
"name": "FacetsRed300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1140,3 +1140,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1153,5 +1153,5 @@ "300" | ||
}, | ||
"name": "ColorRed400", | ||
"name": "FacetsRed400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1161,3 +1161,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1174,5 +1174,5 @@ "400" | ||
}, | ||
"name": "ColorRed500", | ||
"name": "FacetsRed500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1182,3 +1182,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1195,5 +1195,5 @@ "500" | ||
}, | ||
"name": "ColorRed600", | ||
"name": "FacetsRed600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1203,3 +1203,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1216,5 +1216,5 @@ "600" | ||
}, | ||
"name": "ColorRed700", | ||
"name": "FacetsRed700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1224,3 +1224,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1237,5 +1237,5 @@ "700" | ||
}, | ||
"name": "ColorRed800", | ||
"name": "FacetsRed800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1245,3 +1245,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1258,5 +1258,5 @@ "800" | ||
}, | ||
"name": "ColorRed900", | ||
"name": "FacetsRed900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1266,3 +1266,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1279,5 +1279,5 @@ "900" | ||
}, | ||
"name": "ColorRed000", | ||
"name": "FacetsRed000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "red", | ||
@@ -1287,3 +1287,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"red", | ||
@@ -1302,5 +1302,5 @@ "000" | ||
}, | ||
"name": "ColorPink100", | ||
"name": "FacetsPink100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1310,3 +1310,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1323,5 +1323,5 @@ "100" | ||
}, | ||
"name": "ColorPink200", | ||
"name": "FacetsPink200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1331,3 +1331,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1344,5 +1344,5 @@ "200" | ||
}, | ||
"name": "ColorPink300", | ||
"name": "FacetsPink300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1352,3 +1352,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1365,5 +1365,5 @@ "300" | ||
}, | ||
"name": "ColorPink400", | ||
"name": "FacetsPink400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1373,3 +1373,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1386,5 +1386,5 @@ "400" | ||
}, | ||
"name": "ColorPink500", | ||
"name": "FacetsPink500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1394,3 +1394,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1407,5 +1407,5 @@ "500" | ||
}, | ||
"name": "ColorPink600", | ||
"name": "FacetsPink600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1415,3 +1415,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1428,5 +1428,5 @@ "600" | ||
}, | ||
"name": "ColorPink700", | ||
"name": "FacetsPink700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1436,3 +1436,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1449,5 +1449,5 @@ "700" | ||
}, | ||
"name": "ColorPink800", | ||
"name": "FacetsPink800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1457,3 +1457,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1470,5 +1470,5 @@ "800" | ||
}, | ||
"name": "ColorPink900", | ||
"name": "FacetsPink900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1478,3 +1478,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1491,5 +1491,5 @@ "900" | ||
}, | ||
"name": "ColorPink000", | ||
"name": "FacetsPink000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "pink", | ||
@@ -1499,3 +1499,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"pink", | ||
@@ -1514,5 +1514,5 @@ "000" | ||
}, | ||
"name": "ColorPurple100", | ||
"name": "FacetsPurple100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1522,3 +1522,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1535,5 +1535,5 @@ "100" | ||
}, | ||
"name": "ColorPurple200", | ||
"name": "FacetsPurple200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1543,3 +1543,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1556,5 +1556,5 @@ "200" | ||
}, | ||
"name": "ColorPurple300", | ||
"name": "FacetsPurple300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1564,3 +1564,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1577,5 +1577,5 @@ "300" | ||
}, | ||
"name": "ColorPurple400", | ||
"name": "FacetsPurple400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1585,3 +1585,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1598,5 +1598,5 @@ "400" | ||
}, | ||
"name": "ColorPurple500", | ||
"name": "FacetsPurple500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1606,3 +1606,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1619,5 +1619,5 @@ "500" | ||
}, | ||
"name": "ColorPurple600", | ||
"name": "FacetsPurple600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1627,3 +1627,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1640,5 +1640,5 @@ "600" | ||
}, | ||
"name": "ColorPurple700", | ||
"name": "FacetsPurple700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1648,3 +1648,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1661,5 +1661,5 @@ "700" | ||
}, | ||
"name": "ColorPurple800", | ||
"name": "FacetsPurple800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1669,3 +1669,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1682,5 +1682,5 @@ "800" | ||
}, | ||
"name": "ColorPurple900", | ||
"name": "FacetsPurple900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1690,3 +1690,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1703,5 +1703,5 @@ "900" | ||
}, | ||
"name": "ColorPurple000", | ||
"name": "FacetsPurple000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "purple", | ||
@@ -1711,3 +1711,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"purple", | ||
@@ -1726,5 +1726,5 @@ "000" | ||
}, | ||
"name": "ColorBlue100", | ||
"name": "FacetsBlue100", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1734,3 +1734,3 @@ "item": "100" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1747,5 +1747,5 @@ "100" | ||
}, | ||
"name": "ColorBlue200", | ||
"name": "FacetsBlue200", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1755,3 +1755,3 @@ "item": "200" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1768,5 +1768,5 @@ "200" | ||
}, | ||
"name": "ColorBlue300", | ||
"name": "FacetsBlue300", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1776,3 +1776,3 @@ "item": "300" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1789,5 +1789,5 @@ "300" | ||
}, | ||
"name": "ColorBlue400", | ||
"name": "FacetsBlue400", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1797,3 +1797,3 @@ "item": "400" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1810,5 +1810,5 @@ "400" | ||
}, | ||
"name": "ColorBlue500", | ||
"name": "FacetsBlue500", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1818,3 +1818,3 @@ "item": "500" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1831,5 +1831,5 @@ "500" | ||
}, | ||
"name": "ColorBlue600", | ||
"name": "FacetsBlue600", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1839,3 +1839,3 @@ "item": "600" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1852,5 +1852,5 @@ "600" | ||
}, | ||
"name": "ColorBlue700", | ||
"name": "FacetsBlue700", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1860,3 +1860,3 @@ "item": "700" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1873,5 +1873,5 @@ "700" | ||
}, | ||
"name": "ColorBlue800", | ||
"name": "FacetsBlue800", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1881,3 +1881,3 @@ "item": "800" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1894,5 +1894,5 @@ "800" | ||
}, | ||
"name": "ColorBlue900", | ||
"name": "FacetsBlue900", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1902,3 +1902,3 @@ "item": "900" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1915,5 +1915,5 @@ "900" | ||
}, | ||
"name": "ColorBlue000", | ||
"name": "FacetsBlue000", | ||
"attributes": { | ||
"category": "color", | ||
"category": "facets", | ||
"type": "blue", | ||
@@ -1923,3 +1923,3 @@ "item": "000" | ||
"path": [ | ||
"color", | ||
"facets", | ||
"blue", | ||
@@ -1926,0 +1926,0 @@ "000" |
{ | ||
"color": { | ||
"facets": { | ||
"neutral": { | ||
@@ -4,0 +4,0 @@ "light": { |
{ | ||
"color": { | ||
"facets": { | ||
"neutral": { | ||
@@ -4,0 +4,0 @@ "light": { |
{ | ||
"name": "@netlify/netlify-design-tokens", | ||
"version": "6.0.0-beta.3", | ||
"version": "6.0.0-beta.4", | ||
"private": false, | ||
@@ -5,0 +5,0 @@ "description": "Netlify's design tokens for sharing across products and repos", |
@@ -15,20 +15,53 @@ # Netlify Design Tokens [](https://npmjs.com/@netlify/netlify-design-tokens) | ||
Basic usage: | ||
```css | ||
@import '@netlify/netlify-design-tokens/dist/css/colors'; | ||
@import '@netlify/netlify-design-tokens/dist/css/colors.css'; | ||
.myComponent { | ||
color: var(--color-teal-200); | ||
} | ||
``` | ||
Global dark mode support: | ||
```css | ||
@import '@netlify/netlify-design-tokens/dist/css/colors.css'; | ||
:root { | ||
--colorBlack: var(--color-black-default); | ||
--colorTeal: var(--facets-teal-200); | ||
} | ||
@media (prefers-color-scheme: dark) { | ||
:root { | ||
--colorTeal: var(--facets-teal-500); | ||
} | ||
} | ||
.myComponent { | ||
color: var(--colorTeal); | ||
} | ||
``` | ||
### SCSS | ||
Alternatively, use the `rgb(<color> / <alpha>)` notation to vary color opacity: | ||
```scss | ||
@import '@netlify/netlify-design-tokens/dist/scss/colors'; | ||
```css | ||
@import '@netlify/netlify-design-tokens/dist/css/facets.tailwind.css'; | ||
:root { | ||
--colorTeal: var(--facetsTeal200); | ||
} | ||
$black: $color-black-default; | ||
@media (prefers-color-scheme: dark) { | ||
:root { | ||
--colorTeal: var(--facetsTeal200); | ||
} | ||
} | ||
.myComponent { | ||
color: rgb(var(--colorTeal) / 50%); | ||
} | ||
``` | ||
### Javascript | ||
### JavaScript | ||
@@ -38,3 +71,3 @@ ```js | ||
const black = tokens.color.black.default; | ||
const teal = tokens.facets.teal.500; | ||
``` |
Sorry, the diff of this file is not supported yet
72
84.62%88189
-4.55%13
-31.58%