New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@madgex/design-system
Advanced tools
@madgex/design-system - npm Package Compare versions
Comparing version 6.3.11 to 7.0.0
@@ -1,1 +0,1 @@ | ||
| [{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"search"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"undo"},{"name":"upload"},{"name":"user"}] | ||
| [{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"question-mark"},{"name":"plus"},{"name":"redo"},{"name":"search"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"undo"},{"name":"upload"},{"name":"user"}] |
@@ -5,3 +5,3 @@ { | ||
| "license": "UNLICENSED", | ||
| "version": "6.3.11", | ||
| "version": "7.0.0", | ||
| "main": "dist/js/index.js", | ||
@@ -102,3 +102,3 @@ "exports": { | ||
| }, | ||
| "gitHead": "8c53f3cf3d2f8228770a434b635d8707ce281023" | ||
| "gitHead": "80ad04cc8ad302e9984d285b55d09191174ca856" | ||
| } |
@@ -37,3 +37,3 @@ module.exports = { | ||
| triggerIsHeader: 'h3', | ||
| triggerClasses: 'mds-font-great-primer', | ||
| triggerClasses: 'mds-font-s2', | ||
| content: | ||
@@ -40,0 +40,0 @@ '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>', |
@@ -36,3 +36,3 @@ module.exports = { | ||
| fractalTitle: 'Next link', | ||
| classes: 'mds-font-long-primer', | ||
| classes: 'mds-font-s-1', | ||
| nextUrl: '/next-page', | ||
@@ -52,3 +52,3 @@ nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time', | ||
| fractalTitle: 'Previous link', | ||
| classes: 'mds-font-long-primer', | ||
| classes: 'mds-font-s-1', | ||
| prevUrl: '/prev-page', | ||
@@ -68,3 +68,3 @@ prevExtraLabel: 'Part Time Sales Assistant', | ||
| fractalTitle: 'Translated', | ||
| classes: 'mds-font-long-primer', | ||
| classes: 'mds-font-s-1', | ||
| prevUrl: '/prev-page', | ||
@@ -71,0 +71,0 @@ prevExtraLabel: "Agent / Agente d'entretien de nettoyage industriel", |
@@ -9,11 +9,3 @@ const path = require('path'); | ||
| // transformGroup: 'css', | ||
| transforms: [ | ||
| 'attribute/cti', | ||
| 'name/cti/kebab', | ||
| 'time/seconds', | ||
| 'content/icon', | ||
| 'color/css', | ||
| 'css/rawData', | ||
| 'custom/pxToRem', | ||
| ], | ||
| transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css', 'css/rawData'], | ||
| buildPath: `${path.resolve(__dirname, '../../dist/_tokens/css/')}/`, | ||
@@ -85,3 +77,3 @@ prefix: 'mds', | ||
| 'js-module': { | ||
| transforms: ['attribute/cti', 'name/cti/pascal', 'custom/pxToRem'], | ||
| transforms: ['attribute/cti', 'name/cti/pascal'], | ||
| buildPath: `${path.resolve(__dirname, '../../dist/_tokens/js/')}/`, | ||
@@ -88,0 +80,0 @@ prefix: 'mds', |
@@ -78,222 +78,97 @@ { | ||
| }, | ||
| "size": { | ||
| "base": { | ||
| "value": "16px" | ||
| } | ||
| }, | ||
| "type": { | ||
| "canon": { | ||
| "default": { | ||
| "size": { | ||
| "value": "28px" | ||
| }, | ||
| "line-height": { "value": "1.15" } | ||
| "s-2": { | ||
| "size": { | ||
| "value": "0.75rem" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "32px" }, | ||
| "line-height": { "value": "1.13" } | ||
| "line-height": { | ||
| "value": "1.35" | ||
| } | ||
| }, | ||
| "s-1": { | ||
| "size": { | ||
| "value": "0.875rem" | ||
| }, | ||
| "md": { | ||
| "size": { "value": "52px" }, | ||
| "line-height": { "value": "1.08" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "44px" }, | ||
| "line-height": { "value": "1.1" } | ||
| "line-height": { | ||
| "value": "1.35" | ||
| } | ||
| }, | ||
| "trafalgar": { | ||
| "default": { | ||
| "size": { "value": "20px" }, | ||
| "line-height": { "value": "1.2" } | ||
| "s0": { | ||
| "size": { | ||
| "value": "1rem" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "24px" }, | ||
| "line-height": { "value": "1.17" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "36px" }, | ||
| "line-height": { "value": "1.12" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "32px" }, | ||
| "line-height": { "value": "1.13" } | ||
| "line-height": { | ||
| "value": "1.4" | ||
| } | ||
| }, | ||
| "paragon": { | ||
| "default": { | ||
| "size": { "value": "20px" }, | ||
| "line-height": { "value": "1.2" } | ||
| "s1": { | ||
| "size": { | ||
| "value": "clamp(1.067rem, 1.0468rem + 0.1009vi, 1.125rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "22px" }, | ||
| "line-height": { "value": "1.19" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "28px" }, | ||
| "line-height": { "value": "1.15" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "28px" }, | ||
| "line-height": { "value": "1.15" } | ||
| "line-height": { | ||
| "value": "1.4" | ||
| } | ||
| }, | ||
| "double-pica": { | ||
| "default": { | ||
| "size": { "value": "20px" }, | ||
| "line-height": { "value": "1.2" } | ||
| "s2": { | ||
| "size": { | ||
| "value": "clamp(1.1385rem, 1.0943rem + 0.2211vi, 1.2656rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "20px" }, | ||
| "line-height": { "value": "1.2" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "26px" }, | ||
| "line-height": { "value": "1.16" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "24px" }, | ||
| "line-height": { "value": "1.17" } | ||
| "line-height": { | ||
| "value": "1.2" | ||
| } | ||
| }, | ||
| "great-primer": { | ||
| "default": { | ||
| "size": { "value": "18px" }, | ||
| "line-height": { "value": "1.23" } | ||
| "s3": { | ||
| "size": { | ||
| "value": "clamp(1.2148rem, 1.1421rem + 0.3636vi, 1.4238rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "18px" }, | ||
| "line-height": { "value": "1.23" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "21px" }, | ||
| "line-height": { "value": "1.15" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "20px" }, | ||
| "line-height": { "value": "1.2" } | ||
| "line-height": { | ||
| "value": "1.2" | ||
| } | ||
| }, | ||
| "body-copy": { | ||
| "default": { | ||
| "size": { "value": "16px" }, | ||
| "line-height": { "value": "1.38" } | ||
| "s4": { | ||
| "size": { | ||
| "value": "clamp(1.2962rem, 1.1898rem + 0.5316vi, 1.6018rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "16px" }, | ||
| "line-height": { "value": "1.38" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "18px" }, | ||
| "line-height": { "value": "1.34" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "16px" }, | ||
| "line-height": { "value": "1.38" } | ||
| "line-height": { | ||
| "value": "1.2" | ||
| } | ||
| }, | ||
| "body-copy-bulk": { | ||
| "default": { | ||
| "size": { | ||
| "value": "16px" | ||
| }, | ||
| "line-height": { | ||
| "value": "1.75" | ||
| } | ||
| "s5": { | ||
| "size": { | ||
| "value": "clamp(1.383rem, 1.2372rem + 0.7288vi, 1.802rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { | ||
| "value": "16px" | ||
| }, | ||
| "line-height": { | ||
| "value": "1.75" | ||
| } | ||
| }, | ||
| "md": { | ||
| "size": { | ||
| "value": "18px" | ||
| }, | ||
| "line-height": { | ||
| "value": "1.67" | ||
| } | ||
| }, | ||
| "lg": { | ||
| "size": { | ||
| "value": "16px" | ||
| }, | ||
| "line-height": { | ||
| "value": "1.75" | ||
| } | ||
| "line-height": { | ||
| "value": "1.2" | ||
| } | ||
| }, | ||
| "pica": { | ||
| "default": { | ||
| "size": { "value": "15px" }, | ||
| "line-height": { "value": "1.34" } | ||
| "s6": { | ||
| "size": { | ||
| "value": "clamp(1.4757rem, 1.2838rem + 0.9593vi, 2.0273rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "16px" }, | ||
| "line-height": { "value": "1.25" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "18px" }, | ||
| "line-height": { "value": "1.23" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "16px" }, | ||
| "line-height": { "value": "1.25" } | ||
| "line-height": { | ||
| "value": "1.15" | ||
| } | ||
| }, | ||
| "long-primer": { | ||
| "default": { | ||
| "size": { "value": "15px" }, | ||
| "line-height": { "value": "1.2" } | ||
| "s7": { | ||
| "size": { | ||
| "value": "clamp(1.5745rem, 1.3289rem + 1.2281vi, 2.2807rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "15px" }, | ||
| "line-height": { "value": "1.2" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "15px" }, | ||
| "line-height": { "value": "1.34" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "14px" }, | ||
| "line-height": { "value": "1.29" } | ||
| "line-height": { | ||
| "value": "1.15" | ||
| } | ||
| }, | ||
| "brevier": { | ||
| "default": { | ||
| "size": { "value": "14px" }, | ||
| "line-height": { "value": "1.15" } | ||
| "s8": { | ||
| "size": { | ||
| "value": "clamp(1.68rem, 1.3719rem + 1.5405vi, 2.5658rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "14px" }, | ||
| "line-height": { "value": "1.29" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "14px" }, | ||
| "line-height": { "value": "1.29" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "13px" }, | ||
| "line-height": { "value": "1.24" } | ||
| "line-height": { | ||
| "value": "1.15" | ||
| } | ||
| }, | ||
| "minion": { | ||
| "default": { | ||
| "size": { "value": "12px" }, | ||
| "line-height": { "value": "1.34" } | ||
| "s9": { | ||
| "size": { | ||
| "value": "clamp(1.7926rem, 1.4121rem + 1.9025vi, 2.8865rem)" | ||
| }, | ||
| "sm": { | ||
| "size": { "value": "12px" }, | ||
| "line-height": { "value": "1.34" } | ||
| }, | ||
| "md": { | ||
| "size": { "value": "13px" }, | ||
| "line-height": { "value": "1.24" } | ||
| }, | ||
| "lg": { | ||
| "size": { "value": "12px" }, | ||
| "line-height": { "value": "1.34" } | ||
| "line-height": { | ||
| "value": "1.15" | ||
| } | ||
@@ -300,0 +175,0 @@ } |
| { | ||
| "notes": "## Usage\n\n- Canon: H1\n\n- Trafalgar: H4, section header\n\n- Paragon: Primary headline\n\n- Double Pica: Sub header\n\n- Great Primer: Headline title or subtitle\n\n- Body copy: Body copy\n\n- Body copy bulk: Body copy long text\n\n- Pica: Index links, titles or headlines\n\n- Long Primer: Index body copy and image captions\n\n- Brevier: Time stamps and bylines\n\n- Minion: Small header capitals" | ||
| "notes": "We're using Utopia fluid type scale: https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.125,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12\n\nWe customised font `s-2` and `s-1` so they have a fixed value and don't change depending on the size of the viewport.\nThose 2 fonts being already quite small, we didn't want them getting smaller for accessibility or bigger as they would get too close to the base size and we would lose the visual hierarchy of the text." | ||
| } |
@@ -1,2 +0,2 @@ | ||
| function registerTransforms(StyleDictionary, tokenBaseFontSize) { | ||
| function registerTransforms(StyleDictionary) { | ||
| return new Promise((resolve) => { | ||
@@ -13,29 +13,2 @@ StyleDictionary.registerTransform({ | ||
| }); | ||
| StyleDictionary.registerTransform({ | ||
| name: 'custom/pxToRem', | ||
| type: 'value', | ||
| matcher(token) { | ||
| return ( | ||
| token.attributes.category === 'font' && token.attributes.type === 'type' && token.attributes.state === 'size' | ||
| ); | ||
| }, | ||
| transformer(token) { | ||
| const baseFontSize = tokenBaseFontSize ? parseFloat(tokenBaseFontSize) : 16; // default to 16px | ||
| const tokenValue = parseFloat(token.value); | ||
| if (Number.isNaN(tokenBaseFontSize)) { | ||
| throw new Error(`Invalid number for base font size: ${tokenBaseFontSize}`); | ||
| } | ||
| if (Number.isNaN(tokenValue)) { | ||
| throw new Error(`Invalid number: ${token.value}. Could not convert ${token.name} to rem`); | ||
| } | ||
| if (tokenValue === 0) { | ||
| return '0'; | ||
| } | ||
| return `${(tokenValue / baseFontSize).toFixed(3)}rem`; | ||
| }, | ||
| }); | ||
| resolve('Transform registered'); | ||
@@ -42,0 +15,0 @@ }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
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
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
No alert changes
Improved metrics
- Number of package files
- increased by0.63%
319
Worsened metrics
- Total package byte prevSize
- decreased by-7.54%
741490
- Lines of code
- decreased by-17.99%
8528
No dependency changes