vtex-tachyons - npm Package Compare versions

Comparing version 2.5.1 to 2.6.0

config.json

 {
   "typeScale": [
-    3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
+    3,
+    2.25,
+    1.5,
+    1.25,
+    1,
+    0.875,
+    0.75
   ],
-  "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
+  "spacing": [
+    0.125,
+    0.25,
+    0.5,
+    0.75,
+    1,
+    1.5,
+    2,
+    3,
+    4,
+    8,
+    16
+  ],
   "customMedia": [
-    { "s": 20 },
-    { "ns": {
+    {
+      "s": 20
+    },
+    {
+      "ns": {
         "value": 40,
@@ -13,3 +34,4 @@ "minWidth": true
     },
-    { "m": {
+    {
+      "m": {
         "value": 40,
@@ -19,8 +41,10 @@ "minWidth": true
     },
-    { "l": {
-      "value": 64,
-      "minWidth": true
-    }
+    {
+      "l": {
+        "value": 64,
+        "minWidth": true
+      }
     },
-    { "xl": {
+    {
+      "xl": {
         "value": 80,
@@ -57,3 +81,2 @@ "minWidth": true
     "washed-yellow": "#FFF6E0",
-
     "black-90": "rgba(0,0,0,.9)",
@@ -71,3 +94,2 @@ "black-80": "rgba(0,0,0,.8)",
     "black-0125": "rgba(0,0,0,.0125)",
-
     "white-90": "rgba(255,255,255,.9)",
@@ -86,11 +108,256 @@ "white-80": "rgba(255,255,255,.8)",
   },
-  "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
-  "borderRadius": [0, 0.125, 0.25, 0.5, 1],
-  "widths": [1, 2, 4, 8, 16],
-  "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
-  "heights": [1, 2, 4, 8, 16],
-  "typography":{
-    "measure": [30, 34, 20]
+  "colorTokens": {
+    "background": {
+      "base": "#ffffff",
+      "base--inverted": "#3f3f40",
+      "action-primary": "#134cd8",
+      "action-secondary": "#eef3f7",
+      "emphasis": "#f71963",
+      "disabled": "#e3e4e6",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-background": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#e13232",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "active-background": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "text": {
+      "link": "#134cd8",
+      "link--visited": "#0c389f",
+      "emphasis": "#f71963",
+      "disabled": "#979899",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-text": {
+      "link": "#0c389f",
+      "emphasis": "#dd1659",
+      "disabled": "#979899",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0"
+    },
+    "active-text": {
+      "link": "#0c389f",
+      "emphasis": "#dd1659",
+      "disabled": "#979899",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0"
+    },
+    "border": {
+      "action-primary": "#1346d8",
+      "action-secondary": "#eef3f7",
+      "emphasis": "#f71963",
+      "disabled": "#e3e4e6",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "hover-border": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "active-border": {
+      "action-primary": "#0c389f",
+      "action-secondary": "#dbe9fd",
+      "emphasis": "#dd1659",
+      "success": "#8bc34a",
+      "success--faded": "#eafce3",
+      "danger": "#ff4c4c",
+      "danger--faded": "#ffe6e6",
+      "warning": "#ffb100",
+      "warning--faded": "#fff6e0",
+      "muted-1": "#727273",
+      "muted-2": "#979899",
+      "muted-3": "#cacbcc",
+      "muted-4": "#e3e4e6",
+      "muted-5": "#f2f4f5"
+    },
+    "on": {
+      "base": "#3f3f40",
+      "base--inverted": "#ffffff",
+      "action-primary": "#ffffff",
+      "action-secondary": "#134cd8",
+      "emphasis": "#ffffff",
+      "disabled": "#979899",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a",
+      "muted-1": "#ffffff",
+      "muted-2": "#ffffff",
+      "muted-3": "#3f3f40",
+      "muted-4": "#3f3f40",
+      "muted-5": "#3f3f40"
+    },
+    "hover-on": {
+      "action-primary": "#ffffff",
+      "action-secondary": "#134cd8",
+      "emphasis": "#ffffff",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a",
+      "muted-1": "#ffffff",
+      "muted-2": "#ffffff",
+      "muted-3": "#3f3f40",
+      "muted-4": "#3f3f40",
+      "muted-5": "#3f3f40"
+    },
+    "active-on": {
+      "action-primary": "#ffffff",
+      "action-secondary": "#134cd8",
+      "emphasis": "#ffffff",
+      "success": "#ffffff",
+      "success--faded": "#3f3f40",
+      "danger": "#ffffff",
+      "danger--faded": "#3f3f40",
+      "warning": "#ffffff",
+      "warning--faded": "#1a1a1a",
+      "muted-1": "#ffffff",
+      "muted-2": "#ffffff",
+      "muted-3": "#3f3f40",
+      "muted-4": "#3f3f40",
+      "muted-5": "#3f3f40"
+    }
   },
-  "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
-}
+  "borderWidths": [
+    0,
+    0.125,
+    0.25,
+    0.5,
+    1,
+    2
+  ],
+  "borderRadius": [
+    0,
+    0.125,
+    0.25,
+    0.5,
+    1
+  ],
+  "widths": [
+    1,
+    2,
+    4,
+    8,
+    16
+  ],
+  "maxWidths": [
+    1,
+    2,
+    4,
+    8,
+    16,
+    32,
+    48,
+    64,
+    96
+  ],
+  "heights": [
+    1,
+    2,
+    4,
+    8,
+    16
+  ],
+  "typography": {
+    "measure": [
+      30,
+      34,
+      20
+    ]
+  },
+  "opacity": [
+    1,
+    0.9,
+    0.8,
+    0.7,
+    0.6,
+    0.5,
+    0.4,
+    0.3,
+    0.2,
+    0.1,
+    0.05,
+    0.025,
+    0
+  ]
+}

index.js

 const fs = require('fs')
+const path = require('path')
 const tachyonsGenerator = require('tachyons-generator')
-const config = require('./config.json')
+const config = require('./config.js')
 
+// Write config file as JSON to keep API compatibility
+fs.writeFileSync(
+  path.join(__dirname, 'config.json'),
+  JSON.stringify(config, null, 2),
+  'utf8'
+)
+
 const generate = async () => {
   const tachy = tachyonsGenerator(config)
 
-  const out = await tachy.generate()
-  
-  fs.writeFileSync('index.html', out.docs)
-  fs.writeFileSync('tachyons.css', out.css)
-  fs.writeFileSync('tachyons.min.css', out.min)
+  const docs = await tachy.docs()
+  const css = await tachy.generate()
+  const cssMin = await tachy.generate({ minify: true })
+
+  fs.writeFileSync('index.html', docs)
+  fs.writeFileSync('tachyons.css', css)
+  fs.writeFileSync('tachyons.min.css', cssMin)
 }
 
-generate()
+generate()
+
+const generateScoped = async () => {
+  const namespace = 'onda-v1'
+  const scopedConfig = Object.assign({}, { namespace }, config)
+  const tachy = tachyonsGenerator(scopedConfig)
+
+  const css = await tachy.generate()
+  const cssMin = await tachy.generate({ minify: true })
+
+  fs.writeFileSync('tachyons-scoped.css', css)
+  fs.writeFileSync('tachyons-scoped.min.css', cssMin)
+}
+
+generateScoped()

package.json

 {
   "name": "vtex-tachyons",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "A custom Tachyons for VTEX",
@@ -24,4 +24,4 @@ "main": "tachyons.css",
   "devDependencies": {
-    "tachyons-generator": "git+https://github.com/vtex/tachyons-generator.git#v0.22.1-vtex"
+    "tachyons-generator": "git+https://github.com/vtex/tachyons-generator.git#v0.23.1-vtex"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1286867

increased by32.8%

Number of package files

12

increased by50%

Lines of code

9168

increased by113.51%

No dependency changes