@madgex/design-system
Advanced tools
Comparing version 1.10.1 to 1.11.0
/** | ||
* Do not edit directly | ||
* Generated on Mon, 08 Jul 2019 16:03:51 GMT | ||
* Generated on Wed, 10 Jul 2019 13:44:30 GMT | ||
*/ | ||
@@ -8,154 +8,443 @@ | ||
"color": { | ||
"base": { | ||
"value": "#71767a", | ||
"comment": "Base colour", | ||
"original": { | ||
"value": "#71767a", | ||
"comment": "Base colour" | ||
"brand": { | ||
"1": { | ||
"base": { | ||
"value": "#1b75bb", | ||
"original": { | ||
"value": "#1B75BB" | ||
}, | ||
"name": "MdsColorBrand1Base", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "1", | ||
"subitem": "base" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"1", | ||
"base" | ||
] | ||
}, | ||
"light": { | ||
"value": "#2990e0", | ||
"scssColorFunction": "lighten($mds-color-brand-1-base,10%)", | ||
"original": { | ||
"value": "#2990e0", | ||
"scssColorFunction": "lighten($mds-color-brand-1-base,10%)" | ||
}, | ||
"name": "MdsColorBrand1Light", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "1", | ||
"subitem": "light" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"1", | ||
"light" | ||
] | ||
}, | ||
"lightest": { | ||
"value": "#e9f3fc", | ||
"scssColorFunction": "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))", | ||
"original": { | ||
"value": "#e9f3fc", | ||
"scssColorFunction": "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))" | ||
}, | ||
"name": "MdsColorBrand1Lightest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "1", | ||
"subitem": "lightest" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"1", | ||
"lightest" | ||
] | ||
}, | ||
"dark": { | ||
"value": "#15598e", | ||
"scssColorFunction": "darken($mds-color-brand-1-base,10%)", | ||
"original": { | ||
"value": "#15598e", | ||
"scssColorFunction": "darken($mds-color-brand-1-base,10%)" | ||
}, | ||
"name": "MdsColorBrand1Dark", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "1", | ||
"subitem": "dark" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"1", | ||
"dark" | ||
] | ||
}, | ||
"darkest": { | ||
"value": "#082135", | ||
"scssColorFunction": "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))", | ||
"original": { | ||
"value": "#082135", | ||
"scssColorFunction": "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))" | ||
}, | ||
"name": "MdsColorBrand1Darkest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "1", | ||
"subitem": "darkest" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"1", | ||
"darkest" | ||
] | ||
} | ||
}, | ||
"name": "MdsColorBase", | ||
"attributes": { | ||
"category": "color", | ||
"type": "base" | ||
"2": { | ||
"base": { | ||
"value": "#f0af11", | ||
"original": { | ||
"value": "#f0af11" | ||
}, | ||
"name": "MdsColorBrand2Base", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "2", | ||
"subitem": "base" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"2", | ||
"base" | ||
] | ||
}, | ||
"light": { | ||
"value": "#f3bf41", | ||
"scssColorFunction": "lighten($mds-color-brand-2-base,10%)", | ||
"original": { | ||
"value": "#f3bf41", | ||
"scssColorFunction": "lighten($mds-color-brand-2-base,10%)" | ||
}, | ||
"name": "MdsColorBrand2Light", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "2", | ||
"subitem": "light" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"2", | ||
"light" | ||
] | ||
}, | ||
"lightest": { | ||
"value": "#fdf7e7", | ||
"scssColorFunction": "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))", | ||
"original": { | ||
"value": "#fdf7e7", | ||
"scssColorFunction": "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))" | ||
}, | ||
"name": "MdsColorBrand2Lightest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "2", | ||
"subitem": "lightest" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"2", | ||
"lightest" | ||
] | ||
}, | ||
"dark": { | ||
"value": "#c28d0c", | ||
"scssColorFunction": "darken($mds-color-brand-2-base,10%)", | ||
"original": { | ||
"value": "#c28d0c", | ||
"scssColorFunction": "darken($mds-color-brand-2-base,10%)" | ||
}, | ||
"name": "MdsColorBrand2Dark", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "2", | ||
"subitem": "dark" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"2", | ||
"dark" | ||
] | ||
}, | ||
"darkest": { | ||
"value": "#3a2a04", | ||
"scssColorFunction": "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))", | ||
"original": { | ||
"value": "#3a2a04", | ||
"scssColorFunction": "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))" | ||
}, | ||
"name": "MdsColorBrand2Darkest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "2", | ||
"subitem": "darkest" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"2", | ||
"darkest" | ||
] | ||
} | ||
}, | ||
"path": [ | ||
"color", | ||
"base" | ||
] | ||
"3": { | ||
"base": { | ||
"value": "#16c1b4", | ||
"original": { | ||
"value": "#16C1B4" | ||
}, | ||
"name": "MdsColorBrand3Base", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "3", | ||
"subitem": "base" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"3", | ||
"base" | ||
] | ||
}, | ||
"light": { | ||
"value": "#24e6d7", | ||
"scssColorFunction": "lighten($mds-color-brand-3-base,10%)", | ||
"original": { | ||
"value": "#24e6d7", | ||
"scssColorFunction": "lighten($mds-color-brand-3-base,10%)" | ||
}, | ||
"name": "MdsColorBrand3Light", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "3", | ||
"subitem": "light" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"3", | ||
"light" | ||
] | ||
}, | ||
"lightest": { | ||
"value": "#e8fcfb", | ||
"scssColorFunction": "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))", | ||
"original": { | ||
"value": "#e8fcfb", | ||
"scssColorFunction": "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))" | ||
}, | ||
"name": "MdsColorBrand3Lightest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "3", | ||
"subitem": "lightest" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"3", | ||
"lightest" | ||
] | ||
}, | ||
"dark": { | ||
"value": "#119389", | ||
"scssColorFunction": "darken($mds-color-brand-3-base,10%)", | ||
"original": { | ||
"value": "#119389", | ||
"scssColorFunction": "darken($mds-color-brand-3-base,10%)" | ||
}, | ||
"name": "MdsColorBrand3Dark", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "3", | ||
"subitem": "dark" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"3", | ||
"dark" | ||
] | ||
}, | ||
"darkest": { | ||
"value": "#063733", | ||
"scssColorFunction": "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))", | ||
"original": { | ||
"value": "#063733", | ||
"scssColorFunction": "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))" | ||
}, | ||
"name": "MdsColorBrand3Darkest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "brand", | ||
"item": "3", | ||
"subitem": "darkest" | ||
}, | ||
"path": [ | ||
"color", | ||
"brand", | ||
"3", | ||
"darkest" | ||
] | ||
} | ||
} | ||
}, | ||
"white": { | ||
"value": "#ffffff", | ||
"original": { | ||
"value": "#FFFFFF" | ||
"background": { | ||
"body": { | ||
"value": "#f0f0f0", | ||
"original": { | ||
"value": "{color.background.site-container.value}" | ||
}, | ||
"name": "MdsColorBackgroundBody", | ||
"attributes": { | ||
"category": "color", | ||
"type": "background", | ||
"item": "body" | ||
}, | ||
"path": [ | ||
"color", | ||
"background", | ||
"body" | ||
] | ||
}, | ||
"name": "MdsColorWhite", | ||
"attributes": { | ||
"category": "color", | ||
"type": "white" | ||
"site-container": { | ||
"value": "#f0f0f0", | ||
"original": { | ||
"value": "#f0f0f0" | ||
}, | ||
"name": "MdsColorBackgroundSiteContainer", | ||
"attributes": { | ||
"category": "color", | ||
"type": "background", | ||
"item": "site-container" | ||
}, | ||
"path": [ | ||
"color", | ||
"background", | ||
"site-container" | ||
] | ||
}, | ||
"path": [ | ||
"color", | ||
"white" | ||
] | ||
"surface": { | ||
"value": "#ffffff", | ||
"original": { | ||
"value": "#ffffff" | ||
}, | ||
"name": "MdsColorBackgroundSurface", | ||
"attributes": { | ||
"category": "color", | ||
"type": "background", | ||
"item": "surface" | ||
}, | ||
"path": [ | ||
"color", | ||
"background", | ||
"surface" | ||
] | ||
} | ||
}, | ||
"black": { | ||
"value": "#000000", | ||
"text": { | ||
"value": "#222222", | ||
"original": { | ||
"value": "#000000" | ||
"value": "#222" | ||
}, | ||
"name": "MdsColorBlack", | ||
"name": "MdsColorText", | ||
"attributes": { | ||
"category": "color", | ||
"type": "black" | ||
"type": "text" | ||
}, | ||
"path": [ | ||
"color", | ||
"black" | ||
"text" | ||
] | ||
}, | ||
"primary": { | ||
"value": "#2c608a", | ||
"border": { | ||
"value": "#979797", | ||
"original": { | ||
"value": "#2c608a" | ||
"value": "{color.neutral.base.value}" | ||
}, | ||
"name": "MdsColorPrimary", | ||
"name": "MdsColorBorder", | ||
"attributes": { | ||
"category": "color", | ||
"type": "primary" | ||
"type": "border" | ||
}, | ||
"path": [ | ||
"color", | ||
"primary" | ||
"border" | ||
] | ||
}, | ||
"secondary": { | ||
"value": "#d83933", | ||
"white": { | ||
"value": "#ffffff", | ||
"original": { | ||
"value": "#d83933" | ||
"value": "#FFFFFF" | ||
}, | ||
"name": "MdsColorSecondary", | ||
"name": "MdsColorWhite", | ||
"attributes": { | ||
"category": "color", | ||
"type": "secondary" | ||
"type": "white" | ||
}, | ||
"path": [ | ||
"color", | ||
"secondary" | ||
"white" | ||
] | ||
}, | ||
"destructive": { | ||
"value": "#ff0000", | ||
"black": { | ||
"value": "#000000", | ||
"original": { | ||
"value": "red" | ||
"value": "#000000" | ||
}, | ||
"name": "MdsColorDestructive", | ||
"name": "MdsColorBlack", | ||
"attributes": { | ||
"category": "color", | ||
"type": "destructive" | ||
"type": "black" | ||
}, | ||
"path": [ | ||
"color", | ||
"destructive" | ||
"black" | ||
] | ||
}, | ||
"text": { | ||
"primary": { | ||
"value": "#000000", | ||
"original": { | ||
"value": "{color.black.value}" | ||
}, | ||
"name": "MdsColorTextPrimary", | ||
"attributes": { | ||
"category": "color", | ||
"type": "text", | ||
"item": "primary" | ||
}, | ||
"path": [ | ||
"color", | ||
"text", | ||
"primary" | ||
] | ||
} | ||
}, | ||
"accent-warm": { | ||
"value": "#fa9441", | ||
"original": { | ||
"value": "#fa9441" | ||
}, | ||
"name": "MdsColorAccentWarm", | ||
"attributes": { | ||
"category": "color", | ||
"type": "accent-warm" | ||
}, | ||
"path": [ | ||
"color", | ||
"accent-warm" | ||
] | ||
}, | ||
"accent-cool": { | ||
"value": "#00bde3", | ||
"original": { | ||
"value": "#00bde3" | ||
}, | ||
"name": "MdsColorAccentCool", | ||
"attributes": { | ||
"category": "color", | ||
"type": "accent-cool" | ||
}, | ||
"path": [ | ||
"color", | ||
"accent-cool" | ||
] | ||
}, | ||
"neutral": { | ||
"15": { | ||
"value": "#262626", | ||
"base": { | ||
"value": "#979797", | ||
"original": { | ||
"value": "#262626" | ||
"value": "#979797" | ||
}, | ||
"name": "MdsColorNeutral15", | ||
"name": "MdsColorNeutralBase", | ||
"attributes": { | ||
"category": "color", | ||
"type": "neutral", | ||
"item": "15" | ||
"item": "base" | ||
}, | ||
@@ -165,15 +454,15 @@ "path": [ | ||
"neutral", | ||
"15" | ||
"base" | ||
] | ||
}, | ||
"20": { | ||
"value": "#323232", | ||
"lightest": { | ||
"value": "#f0f0f0", | ||
"original": { | ||
"value": "#323232" | ||
"value": "#F0F0F0" | ||
}, | ||
"name": "MdsColorNeutral20", | ||
"name": "MdsColorNeutralLightest", | ||
"attributes": { | ||
"category": "color", | ||
"type": "neutral", | ||
"item": "20" | ||
"item": "lightest" | ||
}, | ||
@@ -183,15 +472,15 @@ "path": [ | ||
"neutral", | ||
"20" | ||
"lightest" | ||
] | ||
}, | ||
"30": { | ||
"value": "#4d4d4d", | ||
"darker": { | ||
"value": "#333333", | ||
"original": { | ||
"value": "#4d4d4d" | ||
"value": "#333333" | ||
}, | ||
"name": "MdsColorNeutral30", | ||
"name": "MdsColorNeutralDarker", | ||
"attributes": { | ||
"category": "color", | ||
"type": "neutral", | ||
"item": "30" | ||
"item": "darker" | ||
}, | ||
@@ -201,38 +490,4 @@ "path": [ | ||
"neutral", | ||
"30" | ||
"darker" | ||
] | ||
}, | ||
"53": { | ||
"value": "#888888", | ||
"original": { | ||
"value": "#888888" | ||
}, | ||
"name": "MdsColorNeutral53", | ||
"attributes": { | ||
"category": "color", | ||
"type": "neutral", | ||
"item": "53" | ||
}, | ||
"path": [ | ||
"color", | ||
"neutral", | ||
"53" | ||
] | ||
}, | ||
"95": { | ||
"value": "#f3f1f1", | ||
"original": { | ||
"value": "#f3f1f1" | ||
}, | ||
"name": "MdsColorNeutral95", | ||
"attributes": { | ||
"category": "color", | ||
"type": "neutral", | ||
"item": "95" | ||
}, | ||
"path": [ | ||
"color", | ||
"neutral", | ||
"95" | ||
] | ||
} | ||
@@ -239,0 +494,0 @@ } |
const path = require('path'); | ||
const StyleDictionary = require('style-dictionary').extend(path.resolve('./src/tokens/_config.js')); | ||
StyleDictionary.registerTransform({ | ||
name: 'color/scssColorFunctions', | ||
type: 'value', | ||
matcher(prop) { | ||
return prop.attributes.category === 'color' && prop.scssColorFunction; | ||
}, | ||
transformer(prop) { | ||
return prop.scssColorFunction; | ||
}, | ||
}); | ||
function tokens(cb) { | ||
@@ -5,0 +16,0 @@ StyleDictionary.buildAllPlatforms(); |
{ | ||
"name": "@madgex/design-system", | ||
"version": "1.10.1", | ||
"version": "1.11.0", | ||
"scripts": { | ||
@@ -5,0 +5,0 @@ "clean": "rimraf dist public tokens/build", |
@@ -22,3 +22,3 @@ # Madgex Design System | ||
```scss | ||
$mds-color-primary: #ff0000; // my primary brand colour is RED | ||
$mds-color-brand-colour-1: #ff0000; // my primary brand colour is RED | ||
$mds-size-font-md: 20px; // my base font-size is 20px | ||
@@ -25,0 +25,0 @@ |
@@ -19,3 +19,3 @@ const config = { | ||
// transforms: ['size/px'], | ||
transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'], | ||
transforms: ['attribute/cti', 'name/cti/kebab', 'color/css', 'color/scssColorFunctions'], | ||
buildPath: 'dist/_tokens/scss/', | ||
@@ -22,0 +22,0 @@ prefix: 'mds', |
{ | ||
"color": { | ||
"base": { | ||
"value": "#71767a", | ||
"comment": "Base colour" | ||
"brand": { | ||
"1" : { | ||
"base": { "value" : "#1B75BB" }, | ||
"light": { | ||
"value" : "#2990e0", | ||
"scssColorFunction" : "lighten($mds-color-brand-1-base,10%)" | ||
}, | ||
"lightest" : { | ||
"value" : "#e9f3fc", | ||
"scssColorFunction" : "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))" | ||
}, | ||
"dark" : { | ||
"value" : "#15598e", | ||
"scssColorFunction" : "darken($mds-color-brand-1-base,10%)" | ||
}, | ||
"darkest" : { | ||
"value" : "#082135", | ||
"scssColorFunction" : "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))" | ||
} | ||
}, | ||
"2" : { | ||
"base": { "value" : "#f0af11" }, | ||
"light": { | ||
"value" : "#f3bf41", | ||
"scssColorFunction" : "lighten($mds-color-brand-2-base,10%)" | ||
}, | ||
"lightest" : { | ||
"value" : "#fdf7e7", | ||
"scssColorFunction" : "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))" | ||
}, | ||
"dark" : { | ||
"value" : "#c28d0c", | ||
"scssColorFunction" : "darken($mds-color-brand-2-base,10%)" | ||
}, | ||
"darkest" : { | ||
"value" : "#3a2a04", | ||
"scssColorFunction" : "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))" | ||
} | ||
}, | ||
"3" : { | ||
"base": { "value" : "#16C1B4" }, | ||
"light": { | ||
"value" : "#24e6d7", | ||
"scssColorFunction" : "lighten($mds-color-brand-3-base,10%)" | ||
}, | ||
"lightest" : { | ||
"value" : "#e8fcfb", | ||
"scssColorFunction" : "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))" | ||
}, | ||
"dark" : { | ||
"value" : "#119389", | ||
"scssColorFunction" : "darken($mds-color-brand-3-base,10%)" | ||
}, | ||
"darkest" : { | ||
"value" : "#063733", | ||
"scssColorFunction" : "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))" | ||
} | ||
} | ||
}, | ||
"background" : { | ||
"body" : { "value" : "{color.background.site-container.value}" }, | ||
"site-container" : { "value" : "#f0f0f0" }, | ||
"surface" : { "value" : "#ffffff" } | ||
}, | ||
"text" : { "value" : "#222" }, | ||
"border" : { "value" : "{color.neutral.base.value}" }, | ||
"white": { "value": "#FFFFFF" }, | ||
"black": { "value": "#000000" }, | ||
"primary": { "value": "#2c608a" }, | ||
"secondary": { "value": "#d83933" }, | ||
"destructive": { "value": "red" }, | ||
"text": { | ||
"primary": { "value": "{color.black.value}" } | ||
}, | ||
"accent-warm": { "value": "#fa9441" }, | ||
"accent-cool": { "value": "#00bde3" }, | ||
"neutral": { | ||
"15": { "value": "#262626" }, | ||
"20": { "value": "#323232" }, | ||
"30": { "value": "#4d4d4d" }, | ||
"53": { "value": "#888888" }, | ||
"95": { "value": "#f3f1f1" } | ||
"base": { "value": "#979797" }, | ||
"lightest": { "value": "#F0F0F0" }, | ||
"darker": { "value": "#333333" } | ||
} | ||
} | ||
} |
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 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 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 not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
349579
7222