New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@madgex/design-system

Package Overview
Dependencies
Maintainers
11
Versions
350
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@madgex/design-system - npm Package Compare versions

Comparing version 1.10.1 to 1.11.0

559

dist/_tokens/js/_tokens-module.js
/**
* 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc