mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
latest
This commit is contained in:
Jonathan Summers-Muir committed
1 parent
0d53c05b54
commit
4553a288cc
14 files changed
+5314
-623
No files matched your search
Generated
+130
-11
@@ -13451,6 +13451,7 @@
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
|
||||
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
@@ -13579,6 +13580,11 @@
|
||||
"color-support": "bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/color2k": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.1.tgz",
|
||||
"integrity": "sha512-iCg+xrEqtYISsSJZN1z44fyhv4EfX8lSkcDhodt6VnMf1+iMwZxAtmGXchTCeMUnTbXunGvUVK6E3skkApPnZw=="
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
@@ -13875,6 +13881,7 @@
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
|
||||
"integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"glob": "^7.0.5",
|
||||
"minimatch": "^3.0.3",
|
||||
@@ -13893,6 +13900,7 @@
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"mkdirp": "bin/cmd.js"
|
||||
},
|
||||
@@ -13904,6 +13912,7 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
|
||||
"integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
@@ -17511,6 +17520,11 @@
|
||||
"@types/yargs-parser": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expr-eval": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/expr-eval/-/expr-eval-2.0.2.tgz",
|
||||
"integrity": "sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg=="
|
||||
},
|
||||
"node_modules/express": {
|
||||
"version": "4.18.2",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
|
||||
@@ -18497,6 +18511,7 @@
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "6.* || 8.* || >= 10.*"
|
||||
}
|
||||
@@ -26110,6 +26125,7 @@
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
|
||||
"integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.1",
|
||||
"readable-stream": "~1.0.31"
|
||||
@@ -26118,12 +26134,14 @@
|
||||
"node_modules/noms/node_modules/isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
|
||||
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/noms/node_modules/readable-stream": {
|
||||
"version": "1.0.34",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
|
||||
"integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.1",
|
||||
@@ -26134,7 +26152,8 @@
|
||||
"node_modules/noms/node_modules/string_decoder": {
|
||||
"version": "0.10.31",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
|
||||
"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
|
||||
"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/non-layered-tidy-tree-layout": {
|
||||
"version": "2.0.2",
|
||||
@@ -32092,6 +32111,7 @@
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -37118,6 +37138,7 @@
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
@@ -37227,6 +37248,7 @@
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
@@ -37256,6 +37278,7 @@
|
||||
"version": "16.2.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
|
||||
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cliui": "^7.0.2",
|
||||
"escalade": "^3.1.1",
|
||||
@@ -37273,6 +37296,7 @@
|
||||
"version": "20.2.9",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
|
||||
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
@@ -37427,9 +37451,11 @@
|
||||
"@tailwindcss/forms": "^0.4.0",
|
||||
"@tailwindcss/typography": "^0.5.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"copyfiles": "^2.4.1",
|
||||
"color2k": "^2.0.1",
|
||||
"deepmerge": "^4.2.2",
|
||||
"expr-eval": "^2.0.2",
|
||||
"formik": "^2.2.9",
|
||||
"glob": "^8.1.0",
|
||||
"lodash": "^4.17.20",
|
||||
"postcss": "^8.4.5",
|
||||
"prop-types": "^15.7.2",
|
||||
@@ -37440,6 +37466,7 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"copyfiles": "^2.4.1",
|
||||
"style-dictionary": "^3.7.1",
|
||||
"typescript": "4.3.4"
|
||||
}
|
||||
@@ -37708,6 +37735,43 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"packages/ui/node_modules/brace-expansion": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"packages/ui/node_modules/glob": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
|
||||
"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
|
||||
"dependencies": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
"inherits": "2",
|
||||
"minimatch": "^5.0.1",
|
||||
"once": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"packages/ui/node_modules/minimatch": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
|
||||
"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
|
||||
"dependencies": {
|
||||
"brace-expansion": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"packages/ui/node_modules/typescript": {
|
||||
"version": "4.3.4",
|
||||
"dev": true,
|
||||
@@ -47760,6 +47824,7 @@
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
|
||||
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
@@ -47851,6 +47916,11 @@
|
||||
"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
|
||||
"dev": true
|
||||
},
|
||||
"color2k": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.1.tgz",
|
||||
"integrity": "sha512-iCg+xrEqtYISsSJZN1z44fyhv4EfX8lSkcDhodt6VnMf1+iMwZxAtmGXchTCeMUnTbXunGvUVK6E3skkApPnZw=="
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
@@ -48147,6 +48217,7 @@
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
|
||||
"integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.0.5",
|
||||
"minimatch": "^3.0.3",
|
||||
@@ -48160,12 +48231,14 @@
|
||||
"mkdirp": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true
|
||||
},
|
||||
"untildify": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
|
||||
"integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw=="
|
||||
"integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -51523,6 +51596,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"expr-eval": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/expr-eval/-/expr-eval-2.0.2.tgz",
|
||||
"integrity": "sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg=="
|
||||
},
|
||||
"express": {
|
||||
"version": "4.18.2",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
|
||||
@@ -52288,7 +52366,8 @@
|
||||
"get-caller-file": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
|
||||
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
|
||||
"dev": true
|
||||
},
|
||||
"get-intrinsic": {
|
||||
"version": "1.1.3",
|
||||
@@ -58009,6 +58088,7 @@
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
|
||||
"integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.1",
|
||||
"readable-stream": "~1.0.31"
|
||||
@@ -58017,12 +58097,14 @@
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
|
||||
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "1.0.34",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
|
||||
"integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.1",
|
||||
@@ -58033,7 +58115,8 @@
|
||||
"string_decoder": {
|
||||
"version": "0.10.31",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
|
||||
"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
|
||||
"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -62372,7 +62455,8 @@
|
||||
"require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||
"dev": true
|
||||
},
|
||||
"require-from-string": {
|
||||
"version": "2.0.2",
|
||||
@@ -65110,9 +65194,12 @@
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"color2k": "^2.0.1",
|
||||
"copyfiles": "^2.4.1",
|
||||
"deepmerge": "^4.2.2",
|
||||
"expr-eval": "^2.0.2",
|
||||
"formik": "^2.2.9",
|
||||
"glob": "*",
|
||||
"lodash": "^4.17.20",
|
||||
"postcss": "^8.4.5",
|
||||
"prop-types": "^15.7.2",
|
||||
@@ -65338,6 +65425,34 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"glob": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
|
||||
"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
|
||||
"requires": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
"inherits": "2",
|
||||
"minimatch": "^5.0.1",
|
||||
"once": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
|
||||
"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
|
||||
"requires": {
|
||||
"brace-expansion": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.3.4",
|
||||
"dev": true
|
||||
@@ -66904,6 +67019,7 @@
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
@@ -67150,7 +67266,8 @@
|
||||
"y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
|
||||
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
|
||||
"dev": true
|
||||
},
|
||||
"yaeti": {
|
||||
"version": "0.0.6",
|
||||
@@ -67171,6 +67288,7 @@
|
||||
"version": "16.2.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
|
||||
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cliui": "^7.0.2",
|
||||
"escalade": "^3.1.1",
|
||||
@@ -67184,7 +67302,8 @@
|
||||
"yargs-parser": {
|
||||
"version": "20.2.9",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
|
||||
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
|
||||
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
|
||||
"dev": true
|
||||
},
|
||||
"yn": {
|
||||
"version": "3.1.1",
|
||||
|
||||
@@ -1,491 +0,0 @@
|
||||
const glob = require('glob')
|
||||
const StyleDictionary = require('style-dictionary')
|
||||
const baseFiles = glob.sync(`tokens/01_base/**/*.json`)
|
||||
const themeFiles = glob.sync(`tokens/02_themes/**/*.json`)
|
||||
const semanticFiles = glob.sync(`tokens/03_semantic/**/*.json`)
|
||||
const componentFiles = glob.sync('tokens/04_component/**/*.json')
|
||||
const { Parser } = require('expr-eval')
|
||||
const { parseToRgba } = require('color2k')
|
||||
const fs = require('fs')
|
||||
|
||||
console.log('Build started...')
|
||||
console.log('\n==============================================')
|
||||
|
||||
const fontWeightMap = {
|
||||
thin: 100,
|
||||
extralight: 200,
|
||||
ultralight: 200,
|
||||
extraleicht: 200,
|
||||
light: 300,
|
||||
leicht: 300,
|
||||
normal: 400,
|
||||
regular: 400,
|
||||
buch: 400,
|
||||
medium: 500,
|
||||
kraeftig: 500,
|
||||
kräftig: 500,
|
||||
semibold: 600,
|
||||
demibold: 600,
|
||||
halbfett: 600,
|
||||
bold: 700,
|
||||
dreiviertelfett: 700,
|
||||
extrabold: 800,
|
||||
ultabold: 800,
|
||||
fett: 800,
|
||||
black: 900,
|
||||
heavy: 900,
|
||||
super: 900,
|
||||
extrafett: 900,
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms math like Figma Tokens
|
||||
*/
|
||||
const parser = new Parser()
|
||||
|
||||
function checkAndEvaluateMath(expr) {
|
||||
try {
|
||||
parser.evaluate(expr)
|
||||
return +parser.evaluate(expr).toFixed(3)
|
||||
} catch (ex) {
|
||||
return expr
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms dimensions to px
|
||||
*/
|
||||
function transformDimension(value) {
|
||||
if (value.endsWith('px')) {
|
||||
return value
|
||||
}
|
||||
return value + 'px'
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms letter spacing % to em
|
||||
*/
|
||||
function transformLetterSpacing(value) {
|
||||
if (value.endsWith('%')) {
|
||||
const percentValue = value.slice(0, -1)
|
||||
return `${percentValue / 100}em`
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms letter spacing % to em
|
||||
*/
|
||||
function transformFontWeights(value) {
|
||||
const mapped = fontWeightMap[value.toLowerCase()]
|
||||
return `${mapped}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms hex rgba colors used in figma tokens: rgba(#ffffff, 0.5) =? rgba(255, 255, 255, 0.5). This is kind of like an alpha() function.
|
||||
*/
|
||||
function transformHEXRGBa(value) {
|
||||
if (value.startsWith('rgba(#')) {
|
||||
const [hex, alpha] = value.replace(')', '').split('rgba(').pop().split(', ')
|
||||
const [r, g, b] = parseToRgba(hex)
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms boxShadow object to shadow shorthand
|
||||
* This currently works fine if every value uses an alias, but if any one of these use a raw value, it will not be transformed.
|
||||
*/
|
||||
function transformShadow(shadow) {
|
||||
const { x, y, blur, spread, color } = shadow
|
||||
return `${x} ${y} ${blur} ${spread} ${color}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms typography object to typography shorthand
|
||||
* This currently works fine if every value uses an alias, but if any one of these use a raw value, it will not be transformed.
|
||||
* If you'd like to output all typography values, you'd rather need to return the typography properties itself
|
||||
*/
|
||||
function transformTypography(value) {
|
||||
const { fontWeight, fontSize, lineHeight, fontFamily } = value
|
||||
return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform typography shorthands for css variables
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'typography/shorthand',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token.type === 'typography',
|
||||
transformer: (token) => transformTypography(token.original.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform shadow shorthands for css variables
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'shadow/shorthand',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => ['boxShadow'].includes(token.type),
|
||||
transformer: (token) => {
|
||||
return Array.isArray(token.original.value)
|
||||
? token.original.value.map((single) => transformShadow(single)).join(', ')
|
||||
: transformShadow(token.original.value)
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform fontSizes to px
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'size/px',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => ['fontSizes', 'dimension', 'borderRadius', 'spacing'].includes(token.type),
|
||||
transformer: (token) => transformDimension(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform letterSpacing to em
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'size/letterspacing',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token.type === 'letterSpacing',
|
||||
transformer: (token) => transformLetterSpacing(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform fontWeights to numerical
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'type/fontWeight',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token.type === 'fontWeights',
|
||||
transformer: (token) => transformFontWeights(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform rgba colors to usable rgba
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'color/hexrgba',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => typeof token.value === 'string' && token.value.startsWith('rgba(#'),
|
||||
transformer: (token) => transformHEXRGBa(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform to resolve math across all tokens
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'resolveMath',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token,
|
||||
// Putting this in strings seems to be required
|
||||
transformer: (token) => `${checkAndEvaluateMath(token.value)}`,
|
||||
})
|
||||
|
||||
/**
|
||||
* Format for css variables
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/variables',
|
||||
formatter: function (dictionary, config) {
|
||||
return `${this.selector} {
|
||||
${dictionary.allProperties.map((prop) => ` --${prop.name}: ${prop.value};`).join('\n')}
|
||||
}`
|
||||
},
|
||||
})
|
||||
|
||||
function convertToVariableIfNeeded(value) {
|
||||
if (value.startsWith('{') && value.endsWith('}')) {
|
||||
return `var(--${value.slice(1, -1).split('.').join('-')})`
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
function mapPropertyToCSSOutput(key, inputValue) {
|
||||
let value = convertCompositionValue(key, inputValue)
|
||||
switch (key) {
|
||||
case 'paddingTop':
|
||||
return `padding-top: ${value};`
|
||||
case 'paddingRight':
|
||||
return `padding-right: ${value};`
|
||||
case 'paddingBottom':
|
||||
return `padding-bottom: ${value};`
|
||||
case 'paddingLeft':
|
||||
return `padding-left: ${value};`
|
||||
case 'spacing':
|
||||
return `padding: ${value};`
|
||||
case 'itemSpacing':
|
||||
return `gap: ${value};`
|
||||
case 'horizontalPadding':
|
||||
return `padding-left: ${value};\n padding-right: ${value};`
|
||||
case 'verticalPadding':
|
||||
return `padding-top: ${value};\n padding-bottom: ${value};`
|
||||
case 'fontSize':
|
||||
return `font-size: ${value};`
|
||||
case 'lineHeight':
|
||||
return `line-height: ${value};`
|
||||
case 'fontWeight':
|
||||
return `font-weight: ${value};`
|
||||
case 'fontFamily':
|
||||
return `font-family: ${value};`
|
||||
case 'letterSpacing':
|
||||
return `letter-spacing: ${value};`
|
||||
case 'boxShadow':
|
||||
return `box-shadow: ${value};`
|
||||
case 'typography':
|
||||
return `font: ${value};`
|
||||
case 'fill':
|
||||
return `background-color: ${value};`
|
||||
case 'border':
|
||||
return `border-color: ${value};`
|
||||
case 'borderRadius':
|
||||
return `border-radius: ${value};`
|
||||
case 'borderRadiusTopLeft':
|
||||
return `border-top-left-radius: ${value};`
|
||||
case 'borderRadiusTopRight':
|
||||
return `border-top-right-radius: ${value};`
|
||||
case 'borderRadiusBottomRight':
|
||||
return `border-bottom-right-radius: ${value};`
|
||||
case 'borderRadiusBottomLeft':
|
||||
return `border-bottom-left-radius: ${value};`
|
||||
case 'borderWidth':
|
||||
return `border-width: ${value};`
|
||||
case 'borderWidthTop':
|
||||
return `border-top-width: ${value};`
|
||||
case 'borderWidthRight':
|
||||
return `border-right-width: ${value};`
|
||||
case 'borderWidthBottom':
|
||||
return `border-bottom-width: ${value};`
|
||||
case 'borderWidthLeft':
|
||||
return `border-left-width: ${value};`
|
||||
// Note: For border style we'd also need to set a border-style property to work correctly, which will be part of an upcoming release.
|
||||
// For now I'd suggest to have that in your composition token JSON even though we can't use it in Figma just yet.
|
||||
// Or keep this following line which hard-codes it to solid.
|
||||
case 'borderStyle':
|
||||
return `border-style: solid;`
|
||||
}
|
||||
}
|
||||
|
||||
function convertCompositionValue(key, value) {
|
||||
if (value.startsWith('{') && value.endsWith('}')) {
|
||||
console.log('converting comp value', value.slice(1, -1).split('.').join('-'))
|
||||
return `var(--${value.slice(1, -1).split('.').join('-')})`
|
||||
}
|
||||
// If we're not using an alias we need to transform values.
|
||||
// As composition tokens don't have a dedicated type defined for each value,
|
||||
// we can use the name of the property to determine what transformation needs to take place.
|
||||
// All used properties can be found here: https://github.com/six7/figma-tokens/blob/main/src/constants/Properties.ts
|
||||
// Each of these can only be of a specific type, so this can be safely done.
|
||||
switch (key) {
|
||||
case 'fontSize':
|
||||
case 'padding':
|
||||
case 'paddingTop':
|
||||
case 'paddingRight':
|
||||
case 'paddingBottom':
|
||||
case 'paddingLeft':
|
||||
case 'itemSpacing':
|
||||
case 'horizontalPadding':
|
||||
case 'verticalPadding':
|
||||
case 'width':
|
||||
case 'height':
|
||||
case 'sizing':
|
||||
case 'borderRadius':
|
||||
case 'borderRadiusTopLeft':
|
||||
case 'borderRadiusTopRight':
|
||||
case 'borderRadiusBottomRight':
|
||||
case 'borderRadiusBottomLeft':
|
||||
case 'borderWidth':
|
||||
case 'borderWidthTop':
|
||||
case 'borderWidthRight':
|
||||
case 'borderWidthBottom':
|
||||
case 'borderWidthLeft':
|
||||
return transformDimension(value)
|
||||
case 'letterSpacing':
|
||||
return transformLetterSpacing(value)
|
||||
case 'fontWeight':
|
||||
return transformFontWeights(value)
|
||||
case 'color':
|
||||
case 'border':
|
||||
return transformHEXRGBa(value)
|
||||
case 'boxShadow':
|
||||
return transformShadow(value)
|
||||
case 'typography':
|
||||
return transformTypography(value)
|
||||
default:
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format for css typography classes
|
||||
* This generates theme-independent css classes so we're fine with just using css variables here
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/typographyClasses',
|
||||
formatter: (dictionary, config) =>
|
||||
dictionary.allProperties
|
||||
.map(
|
||||
(prop) => `
|
||||
.${prop.name} {
|
||||
font: var(--${prop.name});
|
||||
letter-spacing: ${convertToVariableIfNeeded(prop.original.value.letterSpacing)};
|
||||
text-transform: ${convertToVariableIfNeeded(prop.original.value.textCase)};
|
||||
text-decoration: ${convertToVariableIfNeeded(prop.original.value.textDecoration)};
|
||||
}`
|
||||
)
|
||||
.join('\n'),
|
||||
})
|
||||
|
||||
/**
|
||||
* Format for css compisition classes
|
||||
* This generates theme-independent css classes so we're fine with just using css variables here
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/compositionClasses',
|
||||
formatter: (dictionary, config) =>
|
||||
dictionary.allProperties.map(
|
||||
(prop) => `
|
||||
.${prop.name} {
|
||||
${Object.entries(prop.original.value)
|
||||
.map((property) => {
|
||||
const [key, value] = property
|
||||
return mapPropertyToCSSOutput(key, value)
|
||||
})
|
||||
.join('\n ')}
|
||||
}`
|
||||
),
|
||||
})
|
||||
|
||||
function getTypographyConfig() {
|
||||
return {
|
||||
source: ['tokens/01_base/**/*.+(json)', 'tokens/03_semantic/typography.json'],
|
||||
platforms: {
|
||||
css: {
|
||||
transforms: [
|
||||
'resolveMath',
|
||||
'size/px',
|
||||
'type/fontWeight',
|
||||
'size/letterspacing',
|
||||
'name/cti/kebab',
|
||||
],
|
||||
buildPath: `dist/css/`,
|
||||
files: [
|
||||
{
|
||||
destination: `v2/base/typography-classes.css`,
|
||||
format: 'css/typographyClasses',
|
||||
selector: ':root',
|
||||
filter: (token) => token.type === 'typography',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function getCompositionConfig() {
|
||||
return {
|
||||
source: [
|
||||
'tokens/01_base/**/*.+(json)',
|
||||
'tokens/02_themes/**/*.+(json)',
|
||||
'tokens/03_semantic/**/*.+(json)',
|
||||
'tokens/04_components/button.json',
|
||||
],
|
||||
platforms: {
|
||||
css: {
|
||||
transforms: [
|
||||
'resolveMath',
|
||||
'size/px',
|
||||
'type/fontWeight',
|
||||
'size/letterspacing',
|
||||
'name/cti/kebab',
|
||||
],
|
||||
buildPath: `dist/css/`,
|
||||
files: [
|
||||
{
|
||||
destination: `v2/base/compositions.css`,
|
||||
format: 'css/compositionClasses',
|
||||
selector: ':root',
|
||||
filter: (token) => token.type === 'composition',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function getStyleDictionaryConfig(themePath, baseOnly = false) {
|
||||
console.log('Building: ', themePath, `${baseOnly ? 'Base Only' : 'All sets'}`)
|
||||
const fileName = themePath.split('/').pop().replace('.json', '')
|
||||
const sourceFiles = baseOnly
|
||||
? ['tokens/01_base/**/*.+(json)']
|
||||
: [
|
||||
'tokens/01_base/**/*.+(json)',
|
||||
themePath,
|
||||
...semanticFiles,
|
||||
'tokens/04_component/**/*.+(json)',
|
||||
]
|
||||
|
||||
return {
|
||||
source: sourceFiles,
|
||||
platforms: {
|
||||
css: {
|
||||
transforms: [
|
||||
'resolveMath',
|
||||
'size/px',
|
||||
'size/letterspacing',
|
||||
'type/fontWeight',
|
||||
'color/hexrgba',
|
||||
'typography/shorthand',
|
||||
'shadow/shorthand',
|
||||
'name/cti/kebab',
|
||||
],
|
||||
buildPath: `dist/css/`,
|
||||
files: [
|
||||
{
|
||||
destination: baseOnly ? `v2/base/${fileName}.css` : `v2/themes/${fileName}.css`,
|
||||
format: 'css/variables',
|
||||
selector: baseOnly ? ':root' : `.${fileName}-theme`,
|
||||
filter: (token) =>
|
||||
[themePath, ...semanticFiles, ...componentFiles].includes(token.filePath),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
themeFiles.map(function (theme) {
|
||||
const SD = StyleDictionary.extend(getStyleDictionaryConfig(theme))
|
||||
|
||||
SD.buildAllPlatforms()
|
||||
})
|
||||
|
||||
baseFiles.map(function (file) {
|
||||
const SD = StyleDictionary.extend(getStyleDictionaryConfig(file, true))
|
||||
|
||||
SD.buildAllPlatforms()
|
||||
})
|
||||
|
||||
let typographyBuild = StyleDictionary.extend(getTypographyConfig())
|
||||
|
||||
typographyBuild.buildAllPlatforms()
|
||||
|
||||
const compositionBuild = StyleDictionary.extend(getCompositionConfig())
|
||||
|
||||
compositionBuild.buildAllPlatforms()
|
||||
|
||||
console.log('\n==============================================')
|
||||
console.log('\nBuild completed!')
|
||||
@@ -0,0 +1,153 @@
|
||||
/* eslint-disable no-console */
|
||||
const StyleDictionaryPackage = require('style-dictionary')
|
||||
const global = require('./styles/tokens/global.json')
|
||||
const typography = require('./styles/tokens/typography.json')
|
||||
const light = require('./styles/tokens/light.json')
|
||||
const dark = require('./styles/tokens/dark.json')
|
||||
|
||||
const supportedTokenTypeList = ['color', 'typography']
|
||||
|
||||
const formatValue = (tokenType, value) => {
|
||||
let formattedValue
|
||||
switch (tokenType) {
|
||||
case 'color':
|
||||
default:
|
||||
formattedValue = value
|
||||
}
|
||||
return formattedValue
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom format that handle reference in css variables
|
||||
*/
|
||||
StyleDictionaryPackage.registerFormat({
|
||||
name: 'css/variables',
|
||||
formatter({ dictionary }) {
|
||||
return `${this.selectorName} {
|
||||
${dictionary.allProperties
|
||||
.map((token) => {
|
||||
const value = formatValue(token.type, token.value)
|
||||
|
||||
if (dictionary.usesReference(token.original.value)) {
|
||||
const reference = dictionary.getReferences(token.original.value)
|
||||
const referenceName = reference[0].name
|
||||
return ` --${token.name}: var(--${referenceName}, ${value});`
|
||||
}
|
||||
|
||||
return ` --${token.name}: ${value};`
|
||||
})
|
||||
.join('\n')}
|
||||
}`
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Custom format that generate tailwind color config based on css variables
|
||||
*/
|
||||
StyleDictionaryPackage.registerFormat({
|
||||
name: 'tw/css-variables',
|
||||
formatter({ dictionary }) {
|
||||
return (
|
||||
'module.exports = ' +
|
||||
`{\n${dictionary.allProperties
|
||||
.map((token) => {
|
||||
const value = formatValue(token.type, token.value)
|
||||
return ` "UI-${token.path.slice(1).join('-')}": "var(--${token.name}, ${value});"`
|
||||
})
|
||||
.join(',\n')}\n}`
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Returns the files configuration
|
||||
* for generating seperated tailwind files.
|
||||
*/
|
||||
function getConfigTailwindFilesByType(typeList) {
|
||||
console.log('typeList', typeList)
|
||||
return typeList.map((typeName) => {
|
||||
return {
|
||||
destination: `tw-extend/${typeName}.js`,
|
||||
format: 'tw/css-variables',
|
||||
filter: {
|
||||
type: typeName,
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED
|
||||
function getStyleDictionaryConfig(tokensConfig = {}) {
|
||||
const { brand, buildTailwindFiles, tokens, selectorName } = tokensConfig
|
||||
|
||||
let configTailwindFilesByType = []
|
||||
|
||||
if (buildTailwindFiles) {
|
||||
configTailwindFilesByType = getConfigTailwindFilesByType(supportedTokenTypeList)
|
||||
}
|
||||
|
||||
return {
|
||||
tokens,
|
||||
platforms: {
|
||||
web: {
|
||||
transformGroup: 'web',
|
||||
prefix: 'ui',
|
||||
buildPath: './styles/',
|
||||
files: [
|
||||
{
|
||||
destination: `${brand}-variables.css`,
|
||||
format: 'css/variables',
|
||||
selectorName,
|
||||
},
|
||||
...configTailwindFilesByType,
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Build started...')
|
||||
|
||||
const configs = [
|
||||
// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS
|
||||
{
|
||||
brand: 'global',
|
||||
buildTailwindFiles: false,
|
||||
selectorName: ':root',
|
||||
tokens: global,
|
||||
},
|
||||
{
|
||||
brand: 'typography',
|
||||
buildTailwindFiles: true,
|
||||
selectorName: ':root',
|
||||
tokens: typography,
|
||||
},
|
||||
{
|
||||
brand: 'dark',
|
||||
buildTailwindFiles: true,
|
||||
// selectorName: '[data-theme="dark"]',
|
||||
selectorName: '.dark',
|
||||
tokens: dark,
|
||||
},
|
||||
{
|
||||
brand: 'light',
|
||||
buildTailwindFiles: false,
|
||||
// selectorName: '[data-theme="light"]',
|
||||
selectorName: ':root',
|
||||
tokens: light,
|
||||
},
|
||||
]
|
||||
|
||||
configs.map((config) => {
|
||||
console.log('\n==============================================')
|
||||
console.log(`\nProcessing: [Web] [${config.brand}]`)
|
||||
|
||||
const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(config))
|
||||
|
||||
StyleDictionary.buildPlatform('web')
|
||||
|
||||
console.log('\nEnd processing')
|
||||
})
|
||||
|
||||
console.log('\n==============================================')
|
||||
console.log('\nBuild completed!')
|
||||
+461
-121
@@ -1,153 +1,493 @@
|
||||
/* eslint-disable no-console */
|
||||
const StyleDictionaryPackage = require('style-dictionary')
|
||||
const global = require('./styles/tokens/global.json')
|
||||
const typography = require('./styles/tokens/typography.json')
|
||||
const light = require('./styles/tokens/light.json')
|
||||
const dark = require('./styles/tokens/dark.json')
|
||||
const glob = require('glob')
|
||||
const StyleDictionary = require('style-dictionary')
|
||||
const baseFiles = glob.sync(`styles/tokens/01_base/**/*.json`)
|
||||
const themeFiles = glob.sync(`styles/tokens/02_themes/**/*.json`)
|
||||
const semanticFiles = glob.sync(`styles/tokens/03_semantic/**/*.json`)
|
||||
const componentFiles = glob.sync('styles/tokens/04_component/**/*.json')
|
||||
const { Parser } = require('expr-eval')
|
||||
const { parseToRgba } = require('color2k')
|
||||
const fs = require('fs')
|
||||
|
||||
const supportedTokenTypeList = ['color', 'typography']
|
||||
const basePath = 'styles-v2/'
|
||||
|
||||
const formatValue = (tokenType, value) => {
|
||||
let formattedValue
|
||||
switch (tokenType) {
|
||||
case 'color':
|
||||
default:
|
||||
formattedValue = value
|
||||
}
|
||||
return formattedValue
|
||||
console.log('Build started...')
|
||||
console.log('\n==============================================')
|
||||
|
||||
const fontWeightMap = {
|
||||
thin: 100,
|
||||
extralight: 200,
|
||||
ultralight: 200,
|
||||
extraleicht: 200,
|
||||
light: 300,
|
||||
leicht: 300,
|
||||
normal: 400,
|
||||
regular: 400,
|
||||
buch: 400,
|
||||
medium: 500,
|
||||
kraeftig: 500,
|
||||
kräftig: 500,
|
||||
semibold: 600,
|
||||
demibold: 600,
|
||||
halbfett: 600,
|
||||
bold: 700,
|
||||
dreiviertelfett: 700,
|
||||
extrabold: 800,
|
||||
ultabold: 800,
|
||||
fett: 800,
|
||||
black: 900,
|
||||
heavy: 900,
|
||||
super: 900,
|
||||
extrafett: 900,
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom format that handle reference in css variables
|
||||
* Helper: Transforms math like Figma Tokens
|
||||
*/
|
||||
StyleDictionaryPackage.registerFormat({
|
||||
const parser = new Parser()
|
||||
|
||||
function checkAndEvaluateMath(expr) {
|
||||
try {
|
||||
parser.evaluate(expr)
|
||||
return +parser.evaluate(expr).toFixed(3)
|
||||
} catch (ex) {
|
||||
return expr
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms dimensions to px
|
||||
*/
|
||||
function transformDimension(value) {
|
||||
if (value.endsWith('px')) {
|
||||
return value
|
||||
}
|
||||
return value + 'px'
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms letter spacing % to em
|
||||
*/
|
||||
function transformLetterSpacing(value) {
|
||||
if (value.endsWith('%')) {
|
||||
const percentValue = value.slice(0, -1)
|
||||
return `${percentValue / 100}em`
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms letter spacing % to em
|
||||
*/
|
||||
function transformFontWeights(value) {
|
||||
const mapped = fontWeightMap[value.toLowerCase()]
|
||||
return `${mapped}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms hex rgba colors used in figma tokens: rgba(#ffffff, 0.5) =? rgba(255, 255, 255, 0.5). This is kind of like an alpha() function.
|
||||
*/
|
||||
function transformHEXRGBa(value) {
|
||||
if (value.startsWith('rgba(#')) {
|
||||
const [hex, alpha] = value.replace(')', '').split('rgba(').pop().split(', ')
|
||||
const [r, g, b] = parseToRgba(hex)
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms boxShadow object to shadow shorthand
|
||||
* This currently works fine if every value uses an alias, but if any one of these use a raw value, it will not be transformed.
|
||||
*/
|
||||
function transformShadow(shadow) {
|
||||
const { x, y, blur, spread, color } = shadow
|
||||
return `${x} ${y} ${blur} ${spread} ${color}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Transforms typography object to typography shorthand
|
||||
* This currently works fine if every value uses an alias, but if any one of these use a raw value, it will not be transformed.
|
||||
* If you'd like to output all typography values, you'd rather need to return the typography properties itself
|
||||
*/
|
||||
function transformTypography(value) {
|
||||
const { fontWeight, fontSize, lineHeight, fontFamily } = value
|
||||
return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform typography shorthands for css variables
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'typography/shorthand',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token.type === 'typography',
|
||||
transformer: (token) => transformTypography(token.original.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform shadow shorthands for css variables
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'shadow/shorthand',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => ['boxShadow'].includes(token.type),
|
||||
transformer: (token) => {
|
||||
return Array.isArray(token.original.value)
|
||||
? token.original.value.map((single) => transformShadow(single)).join(', ')
|
||||
: transformShadow(token.original.value)
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform fontSizes to px
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'size/px',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => ['fontSizes', 'dimension', 'borderRadius', 'spacing'].includes(token.type),
|
||||
transformer: (token) => transformDimension(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform letterSpacing to em
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'size/letterspacing',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token.type === 'letterSpacing',
|
||||
transformer: (token) => transformLetterSpacing(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform fontWeights to numerical
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'type/fontWeight',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token.type === 'fontWeights',
|
||||
transformer: (token) => transformFontWeights(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform rgba colors to usable rgba
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'color/hexrgba',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => typeof token.value === 'string' && token.value.startsWith('rgba(#'),
|
||||
transformer: (token) => transformHEXRGBa(token.value),
|
||||
})
|
||||
|
||||
/**
|
||||
* Transform to resolve math across all tokens
|
||||
*/
|
||||
StyleDictionary.registerTransform({
|
||||
name: 'resolveMath',
|
||||
type: 'value',
|
||||
transitive: true,
|
||||
matcher: (token) => token,
|
||||
// Putting this in strings seems to be required
|
||||
transformer: (token) => `${checkAndEvaluateMath(token.value)}`,
|
||||
})
|
||||
|
||||
/**
|
||||
* Format for css variables
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/variables',
|
||||
formatter({ dictionary }) {
|
||||
return `${this.selectorName} {
|
||||
${dictionary.allProperties
|
||||
.map((token) => {
|
||||
const value = formatValue(token.type, token.value)
|
||||
|
||||
if (dictionary.usesReference(token.original.value)) {
|
||||
const reference = dictionary.getReferences(token.original.value)
|
||||
const referenceName = reference[0].name
|
||||
return ` --${token.name}: var(--${referenceName}, ${value});`
|
||||
}
|
||||
|
||||
return ` --${token.name}: ${value};`
|
||||
})
|
||||
.join('\n')}
|
||||
}`
|
||||
formatter: function (dictionary, config) {
|
||||
return `${this.selector} {
|
||||
${dictionary.allProperties.map((prop) => ` --${prop.name}: ${prop.value};`).join('\n')}
|
||||
}`
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Custom format that generate tailwind color config based on css variables
|
||||
*/
|
||||
StyleDictionaryPackage.registerFormat({
|
||||
name: 'tw/css-variables',
|
||||
formatter({ dictionary }) {
|
||||
return (
|
||||
'module.exports = ' +
|
||||
`{\n${dictionary.allProperties
|
||||
.map((token) => {
|
||||
const value = formatValue(token.type, token.value)
|
||||
return ` "UI-${token.path.slice(1).join('-')}": "var(--${token.name}, ${value});"`
|
||||
})
|
||||
.join(',\n')}\n}`
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Returns the files configuration
|
||||
* for generating seperated tailwind files.
|
||||
*/
|
||||
function getConfigTailwindFilesByType(typeList) {
|
||||
console.log('typeList', typeList)
|
||||
return typeList.map((typeName) => {
|
||||
return {
|
||||
destination: `tw-extend/${typeName}.js`,
|
||||
format: 'tw/css-variables',
|
||||
filter: {
|
||||
type: typeName,
|
||||
},
|
||||
}
|
||||
})
|
||||
function convertToVariableIfNeeded(value) {
|
||||
if (value.startsWith('{') && value.endsWith('}')) {
|
||||
return `var(--${value.slice(1, -1).split('.').join('-')})`
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED
|
||||
function getStyleDictionaryConfig(tokensConfig = {}) {
|
||||
const { brand, buildTailwindFiles, tokens, selectorName } = tokensConfig
|
||||
|
||||
let configTailwindFilesByType = []
|
||||
|
||||
if (buildTailwindFiles) {
|
||||
configTailwindFilesByType = getConfigTailwindFilesByType(supportedTokenTypeList)
|
||||
function mapPropertyToCSSOutput(key, inputValue) {
|
||||
let value = convertCompositionValue(key, inputValue)
|
||||
switch (key) {
|
||||
case 'paddingTop':
|
||||
return `padding-top: ${value};`
|
||||
case 'paddingRight':
|
||||
return `padding-right: ${value};`
|
||||
case 'paddingBottom':
|
||||
return `padding-bottom: ${value};`
|
||||
case 'paddingLeft':
|
||||
return `padding-left: ${value};`
|
||||
case 'spacing':
|
||||
return `padding: ${value};`
|
||||
case 'itemSpacing':
|
||||
return `gap: ${value};`
|
||||
case 'horizontalPadding':
|
||||
return `padding-left: ${value};\n padding-right: ${value};`
|
||||
case 'verticalPadding':
|
||||
return `padding-top: ${value};\n padding-bottom: ${value};`
|
||||
case 'fontSize':
|
||||
return `font-size: ${value};`
|
||||
case 'lineHeight':
|
||||
return `line-height: ${value};`
|
||||
case 'fontWeight':
|
||||
return `font-weight: ${value};`
|
||||
case 'fontFamily':
|
||||
return `font-family: ${value};`
|
||||
case 'letterSpacing':
|
||||
return `letter-spacing: ${value};`
|
||||
case 'boxShadow':
|
||||
return `box-shadow: ${value};`
|
||||
case 'typography':
|
||||
return `font: ${value};`
|
||||
case 'fill':
|
||||
return `background-color: ${value};`
|
||||
case 'border':
|
||||
return `border-color: ${value};`
|
||||
case 'borderRadius':
|
||||
return `border-radius: ${value};`
|
||||
case 'borderRadiusTopLeft':
|
||||
return `border-top-left-radius: ${value};`
|
||||
case 'borderRadiusTopRight':
|
||||
return `border-top-right-radius: ${value};`
|
||||
case 'borderRadiusBottomRight':
|
||||
return `border-bottom-right-radius: ${value};`
|
||||
case 'borderRadiusBottomLeft':
|
||||
return `border-bottom-left-radius: ${value};`
|
||||
case 'borderWidth':
|
||||
return `border-width: ${value};`
|
||||
case 'borderWidthTop':
|
||||
return `border-top-width: ${value};`
|
||||
case 'borderWidthRight':
|
||||
return `border-right-width: ${value};`
|
||||
case 'borderWidthBottom':
|
||||
return `border-bottom-width: ${value};`
|
||||
case 'borderWidthLeft':
|
||||
return `border-left-width: ${value};`
|
||||
// Note: For border style we'd also need to set a border-style property to work correctly, which will be part of an upcoming release.
|
||||
// For now I'd suggest to have that in your composition token JSON even though we can't use it in Figma just yet.
|
||||
// Or keep this following line which hard-codes it to solid.
|
||||
case 'borderStyle':
|
||||
return `border-style: solid;`
|
||||
}
|
||||
}
|
||||
|
||||
function convertCompositionValue(key, value) {
|
||||
if (value.startsWith('{') && value.endsWith('}')) {
|
||||
console.log('converting comp value', value.slice(1, -1).split('.').join('-'))
|
||||
return `var(--${value.slice(1, -1).split('.').join('-')})`
|
||||
}
|
||||
// If we're not using an alias we need to transform values.
|
||||
// As composition tokens don't have a dedicated type defined for each value,
|
||||
// we can use the name of the property to determine what transformation needs to take place.
|
||||
// All used properties can be found here: https://github.com/six7/figma-tokens/blob/main/src/constants/Properties.ts
|
||||
// Each of these can only be of a specific type, so this can be safely done.
|
||||
switch (key) {
|
||||
case 'fontSize':
|
||||
case 'padding':
|
||||
case 'paddingTop':
|
||||
case 'paddingRight':
|
||||
case 'paddingBottom':
|
||||
case 'paddingLeft':
|
||||
case 'itemSpacing':
|
||||
case 'horizontalPadding':
|
||||
case 'verticalPadding':
|
||||
case 'width':
|
||||
case 'height':
|
||||
case 'sizing':
|
||||
case 'borderRadius':
|
||||
case 'borderRadiusTopLeft':
|
||||
case 'borderRadiusTopRight':
|
||||
case 'borderRadiusBottomRight':
|
||||
case 'borderRadiusBottomLeft':
|
||||
case 'borderWidth':
|
||||
case 'borderWidthTop':
|
||||
case 'borderWidthRight':
|
||||
case 'borderWidthBottom':
|
||||
case 'borderWidthLeft':
|
||||
return transformDimension(value)
|
||||
case 'letterSpacing':
|
||||
return transformLetterSpacing(value)
|
||||
case 'fontWeight':
|
||||
return transformFontWeights(value)
|
||||
case 'color':
|
||||
case 'border':
|
||||
return transformHEXRGBa(value)
|
||||
case 'boxShadow':
|
||||
return transformShadow(value)
|
||||
case 'typography':
|
||||
return transformTypography(value)
|
||||
default:
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format for css typography classes
|
||||
* This generates theme-independent css classes so we're fine with just using css variables here
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/typographyClasses',
|
||||
formatter: (dictionary, config) =>
|
||||
dictionary.allProperties
|
||||
.map(
|
||||
(prop) => `
|
||||
.${prop.name} {
|
||||
font: var(--${prop.name});
|
||||
letter-spacing: ${convertToVariableIfNeeded(prop.original.value.letterSpacing)};
|
||||
text-transform: ${convertToVariableIfNeeded(prop.original.value.textCase)};
|
||||
text-decoration: ${convertToVariableIfNeeded(prop.original.value.textDecoration)};
|
||||
}`
|
||||
)
|
||||
.join('\n'),
|
||||
})
|
||||
|
||||
/**
|
||||
* Format for css compisition classes
|
||||
* This generates theme-independent css classes so we're fine with just using css variables here
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/compositionClasses',
|
||||
formatter: (dictionary, config) =>
|
||||
dictionary.allProperties.map(
|
||||
(prop) => `
|
||||
.${prop.name} {
|
||||
${Object.entries(prop.original.value)
|
||||
.map((property) => {
|
||||
const [key, value] = property
|
||||
return mapPropertyToCSSOutput(key, value)
|
||||
})
|
||||
.join('\n ')}
|
||||
}`
|
||||
),
|
||||
})
|
||||
|
||||
function getTypographyConfig() {
|
||||
console.log('Building: typography')
|
||||
return {
|
||||
tokens,
|
||||
source: ['tokens/01_base/**/*.+(json)', 'tokens/03_semantic/typography.json'],
|
||||
platforms: {
|
||||
web: {
|
||||
transformGroup: 'web',
|
||||
prefix: 'ui',
|
||||
buildPath: './styles/',
|
||||
css: {
|
||||
transforms: [
|
||||
'resolveMath',
|
||||
'size/px',
|
||||
'type/fontWeight',
|
||||
'size/letterspacing',
|
||||
'name/cti/kebab',
|
||||
],
|
||||
buildPath: basePath,
|
||||
files: [
|
||||
{
|
||||
destination: `${brand}-variables.css`,
|
||||
format: 'css/variables',
|
||||
selectorName,
|
||||
destination: `base/typography-classes.css`,
|
||||
format: 'css/typographyClasses',
|
||||
selector: ':root',
|
||||
filter: (token) => token.type === 'typography',
|
||||
},
|
||||
...configTailwindFilesByType,
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Build started...')
|
||||
function getCompositionConfig() {
|
||||
return {
|
||||
source: [
|
||||
'tokens/01_base/**/*.+(json)',
|
||||
'tokens/02_themes/**/*.+(json)',
|
||||
'tokens/03_semantic/**/*.+(json)',
|
||||
'tokens/04_components/button.json',
|
||||
],
|
||||
platforms: {
|
||||
css: {
|
||||
transforms: [
|
||||
'resolveMath',
|
||||
'size/px',
|
||||
'type/fontWeight',
|
||||
'size/letterspacing',
|
||||
'name/cti/kebab',
|
||||
],
|
||||
buildPath: basePath,
|
||||
files: [
|
||||
{
|
||||
destination: `base/compositions.css`,
|
||||
format: 'css/compositionClasses',
|
||||
selector: ':root',
|
||||
filter: (token) => token.type === 'composition',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const configs = [
|
||||
// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS
|
||||
{
|
||||
brand: 'global',
|
||||
buildTailwindFiles: false,
|
||||
selectorName: ':root',
|
||||
tokens: global,
|
||||
},
|
||||
{
|
||||
brand: 'typography',
|
||||
buildTailwindFiles: true,
|
||||
selectorName: ':root',
|
||||
tokens: typography,
|
||||
},
|
||||
{
|
||||
brand: 'dark',
|
||||
buildTailwindFiles: true,
|
||||
// selectorName: '[data-theme="dark"]',
|
||||
selectorName: '.dark',
|
||||
tokens: dark,
|
||||
},
|
||||
{
|
||||
brand: 'light',
|
||||
buildTailwindFiles: false,
|
||||
// selectorName: '[data-theme="light"]',
|
||||
selectorName: ':root',
|
||||
tokens: light,
|
||||
},
|
||||
]
|
||||
function getStyleDictionaryConfig(themePath, baseOnly = false) {
|
||||
console.log('Building: ', themePath, `${baseOnly ? 'Base Only' : 'All sets'}`)
|
||||
const fileName = themePath.split('/').pop().replace('.json', '')
|
||||
const sourceFiles = baseOnly
|
||||
? ['tokens/01_base/**/*.+(json)']
|
||||
: [
|
||||
'tokens/01_base/**/*.+(json)',
|
||||
themePath,
|
||||
...semanticFiles,
|
||||
'tokens/04_component/**/*.+(json)',
|
||||
]
|
||||
|
||||
configs.map((config) => {
|
||||
console.log('\n==============================================')
|
||||
console.log(`\nProcessing: [Web] [${config.brand}]`)
|
||||
return {
|
||||
source: sourceFiles,
|
||||
platforms: {
|
||||
css: {
|
||||
transforms: [
|
||||
'resolveMath',
|
||||
'size/px',
|
||||
'size/letterspacing',
|
||||
'type/fontWeight',
|
||||
'color/hexrgba',
|
||||
'typography/shorthand',
|
||||
'shadow/shorthand',
|
||||
'name/cti/kebab',
|
||||
],
|
||||
buildPath: basePath,
|
||||
files: [
|
||||
{
|
||||
destination: baseOnly ? `base/${fileName}.css` : `themes/${fileName}.css`,
|
||||
format: 'css/variables',
|
||||
selector: baseOnly ? ':root' : `.${fileName}-theme`,
|
||||
filter: (token) =>
|
||||
[themePath, ...semanticFiles, ...componentFiles].includes(token.filePath),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(config))
|
||||
|
||||
StyleDictionary.buildPlatform('web')
|
||||
|
||||
console.log('\nEnd processing')
|
||||
baseFiles.map(function (file) {
|
||||
const SD = StyleDictionary.extend(getStyleDictionaryConfig(file, true))
|
||||
SD.buildAllPlatforms()
|
||||
})
|
||||
|
||||
themeFiles.map(function (theme) {
|
||||
const SD = StyleDictionary.extend(getStyleDictionaryConfig(theme))
|
||||
|
||||
SD.buildAllPlatforms()
|
||||
})
|
||||
|
||||
let typographyBuild = StyleDictionary.extend(getTypographyConfig())
|
||||
|
||||
typographyBuild.buildAllPlatforms()
|
||||
|
||||
const compositionBuild = StyleDictionary.extend(getCompositionConfig())
|
||||
|
||||
compositionBuild.buildAllPlatforms()
|
||||
|
||||
console.log('\n==============================================')
|
||||
console.log('\nBuild completed!')
|
||||
@@ -0,0 +1,117 @@
|
||||
.dark-theme {
|
||||
--variables-form-input-error-bg: #1f1315;
|
||||
--variables-form-input-error-border: #822025;
|
||||
--variables-form-input-bg: #ffffff08;
|
||||
--variables-form-input-border: #3e3e3e;
|
||||
--variables-form-input-disabled-bg: #ffffff14;
|
||||
--variables-form-input-icon: #8f8f8f;
|
||||
--variables-form-label: #ededed;
|
||||
--variables-form-label-secondary: #707070;
|
||||
--variables-text-body: #ededed;
|
||||
--variables-text-secondary: #a0a0a0;
|
||||
--variables-text-light: #707070;
|
||||
--variables-text-link: #3ecf8e;
|
||||
--variables-text-gradient: linear-gradient(90deg, #fcfcfc 0%, #fcfcfc80 100%);
|
||||
--variables-text-green-gradient: linear-gradient(45deg, #34B97D 0%, #3ECF8E 100%);
|
||||
--variables-panel-bg: #232323;
|
||||
--variables-panel-border: #282828;
|
||||
--variables-panel-bg-alt: #282828;
|
||||
--variables-panel-border-alt: #2e2e2e;
|
||||
--variables-panel-bg-accent: #262626;
|
||||
--variables-panel-divider: linear-gradient(90deg, #16161680 0%, #505050 100%);
|
||||
--variables-panel-warning-bg: #ffb224;
|
||||
--variables-panel-warning-text: #271700;
|
||||
--variables-panel-warning-text-secondary: #824e00;
|
||||
--variables-panel-danger-bg: #e5484d;
|
||||
--variables-panel-danger-text: #FFFCFC;
|
||||
--variables-panel-danger-text-secondary: #f9c6c6;
|
||||
--variables-background-primary: #1c1c1c;
|
||||
--variables-background-border: #282828;
|
||||
--variables-background-alt: #161616;
|
||||
--variables-button-danger-bg: #e5484d;
|
||||
--variables-button-danger-border: #822025;
|
||||
--variables-button-danger-text: #ededed;
|
||||
--variables-button-warning-bg: #3f2200;
|
||||
--variables-button-warning-border: #693f05;
|
||||
--variables-button-warning-text: #ffb224;
|
||||
--variables-button-default-bg: #2e2e2e;
|
||||
--variables-button-default-border: #3e3e3e;
|
||||
--variables-button-default-text: #ededed;
|
||||
--variables-button-outline-border: #343434;
|
||||
--variables-datatable-input-default: #ededed;
|
||||
--variables-datatable-header-label: #a0a0a0;
|
||||
--variables-datatable-header-bg: #282828;
|
||||
--variables-datatable-header-icon: #707070;
|
||||
--variables-datatable-row-bg: #232323;
|
||||
--variables-datatable-separator: #2e2e2e;
|
||||
--variables-illustration-background: #232323;
|
||||
--variables-illustration-background-lighter: #343434;
|
||||
--variables-illustration-background-lighter-low-opacity: #343434;
|
||||
--variables-illustration-border: #3e3e3e;
|
||||
--variables-illustration-text: #ecedee;
|
||||
--variables-illustration-text-gray: #a0a0a0;
|
||||
--variables-illustration-dialog-box-light: #282828;
|
||||
--variables-illustration-dialog-box-2: #282828;
|
||||
--variables-illustration-dialog-box-1: #2e2e2e;
|
||||
--variables-illustration-gradient-line: linear-gradient(90deg, #232323 0%, #ecedee 100%);
|
||||
--variables-icon-background: #232323;
|
||||
--variables-icon-outline: #707070;
|
||||
--variables-icon-fill-1: #1c1c1c;
|
||||
--variables-icon-fill-2: #2e2e2e;
|
||||
--variables-icon-outline-green: #4cc38a;
|
||||
--variables-icon-fill-1-green: #133929;
|
||||
--variables-icon-fill-2-green: #1b543a;
|
||||
--variables-icon-negative-icons: linear-gradient(45deg, #ededed80 0%, #ffffff 100%);
|
||||
--variables-code-highlight1: #98C1FE;
|
||||
--variables-code-highlight2: #F2AFE3;
|
||||
--variables-code-highlight3: #3ecf8e;
|
||||
--variables-code-highlight4: #D4D4D4;
|
||||
--variables-charts-primary: #cbf5ff;
|
||||
--variables-charts-warning: #ffa600db;
|
||||
--variables-charts-danger: #e5484d;
|
||||
--variables-charts-multi-1: #7ff4f0;
|
||||
--variables-charts-multi-2: #cb77fd;
|
||||
--variables-badge-text: #4cc38a;
|
||||
--variables-badge-background: #113123;
|
||||
--variables-badge-secondary-background: #2e2e2e;
|
||||
--variables-badge-secondary-text: #707070;
|
||||
--variables-card-alt-background: #121212;
|
||||
--variables-card-border: linear-gradient(30deg, #2e2e2e 0%, #232323 100%);
|
||||
--variables-card-border-active: linear-gradient(30deg, #3e3e3e 0%, #232323 100%);
|
||||
--variables-card-background-active: #232323;
|
||||
--variables-card-text: linear-gradient(45deg, #ffffff 0%, #CCEBD7 100%);
|
||||
--variables-card-pill-label: linear-gradient(90deg, #3432321a 0%, #d0d0d01a 100%);
|
||||
--variables-card-pill-label-border: linear-gradient(90deg, #3432321a 0%, #ffffff00 100%);
|
||||
--variables-card-lw6-illustration-dark-fill: linear-gradient(60deg, #121212 0%, #232323 100%);
|
||||
--variables-card-lw6-illustration-border-highlight: linear-gradient(45deg, #232323 50%, #3fcfb5 100%);
|
||||
--variables-card-lw6-illustration-teal-fill: linear-gradient(45deg, #12121200 0%, #08b8b24d 100%);
|
||||
--variables-card-lw6-illustration-accent-color: #4DA08B;
|
||||
--164430: #164430;
|
||||
--button-default-shadow: 0 -1 0 1 #343434;
|
||||
--button-primary-shadow: 0 -1 0 1 #62dba5;
|
||||
--typography-h1-bold: Medium 48/48 Circular Std;
|
||||
--typography-h1-regular: Book 48/48 Circular Std;
|
||||
--typography-h2-bold: Medium 36/40 Circular Std;
|
||||
--typography-h2-regular: Book 36/40 Circular Std;
|
||||
--typography-h3-bold: Medium 30/36 Circular Std;
|
||||
--typography-h3-regular: Book 30/36 Circular Std;
|
||||
--typography-h4-bold: Medium 24/32 Circular Std;
|
||||
--typography-h4-regular: Book 24/32 Circular Std;
|
||||
--typography-h4-mono: Medium 24/32 Office Code Pro;
|
||||
--typography-h5-bold: Medium 20/28 Circular Std;
|
||||
--typography-h5-regular: Book 20/28 Circular Std;
|
||||
--typography-body-base-normal: Book 16/24 Circular Std;
|
||||
--typography-body-lg-normal: Book 18/28 Circular Std;
|
||||
--typography-body-lg-mono: Medium 18/32 Office Code Pro;
|
||||
--typography-body-xs-normal: Book 12/16 Circular Std;
|
||||
--typography-body-xs-code-header: Medium 12/20 Office Code Pro;
|
||||
--typography-body-sm-normal: Book 14/20 Circular Std;
|
||||
--typography-body-sm-code-header: Regular 14/20 Office Code Pro;
|
||||
--typography-body-sm-code-normal: Regular 14/20 Office Code Pro;
|
||||
--typography-body-sm-bullet-points: Book 14/20 Circular Std;
|
||||
--typography-button-xs: Book 12/16 Circular Std;
|
||||
--typography-button-sm: Book 14/20 Circular Std;
|
||||
--typography-form-label: Book 14/20 Circular Std;
|
||||
--typography-form-label-secondary: Book 14/20 Circular Std;
|
||||
--typography-table-header: Book 12/20 Circular Std;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
.light-theme {
|
||||
--variables-form-input-error-bg: #FFFCFC;
|
||||
--variables-form-input-error-border: #f3aeaf;
|
||||
--variables-form-input-bg: #fbfcfd;
|
||||
--variables-form-input-border: #d7dbdf;
|
||||
--variables-form-input-disabled-bg: #021c3714;
|
||||
--variables-form-input-icon: #889096;
|
||||
--variables-form-label: #11181c;
|
||||
--variables-form-label-secondary: #889096;
|
||||
--variables-text-body: #11181c;
|
||||
--variables-text-secondary: #7e868c;
|
||||
--variables-text-light: #889096;
|
||||
--variables-text-link: #4cc38a;
|
||||
--variables-text-gradient: linear-gradient(90deg, #161616 0%, #16161680 100%);
|
||||
--variables-text-green-gradient: linear-gradient(45deg, #3cb179 0%, #62ffb3bd 100%);
|
||||
--variables-panel-bg: #fbfcfd;
|
||||
--variables-panel-border: #eceef0;
|
||||
--variables-panel-bg-alt: #f8f8f8;
|
||||
--variables-panel-border-alt: #dfe3e6;
|
||||
--variables-panel-divider: linear-gradient(90deg, #ededed80 0%, #232323 100%);
|
||||
--variables-panel-warning-bg: #ffb224;
|
||||
--variables-panel-warning-text: #4e2009;
|
||||
--variables-panel-warning-bg-alt: #ffecbc;
|
||||
--variables-panel-danger-bg: #dc3d43;
|
||||
--variables-panel-danger-bg-alt: #eb9091;
|
||||
--variables-panel-danger-text: #FFFCFC;
|
||||
--variables-background-primary: #f8f9fa;
|
||||
--variables-background-border: #e6e8eb;
|
||||
--variables-background-alt: #ffffff;
|
||||
--variables-button-danger-bg: #e5484d;
|
||||
--variables-button-danger-border: #822025;
|
||||
--variables-button-danger-text: #11181c;
|
||||
--variables-button-warning-bg: #3f2200;
|
||||
--variables-button-warning-border: #693f05;
|
||||
--variables-button-warning-text: #ffb224;
|
||||
--variables-button-default-bg: #fbfcfd;
|
||||
--variables-button-default-border: #e6e8eb;
|
||||
--variables-button-default-text: #11181c;
|
||||
--variables-button-outline-border: #313538;
|
||||
--variables-datatable-input-default: #11181c;
|
||||
--variables-datatable-header-label: #687076;
|
||||
--variables-datatable-header-bg: #f1f3f5;
|
||||
--variables-datatable-header-icon: #889096;
|
||||
--variables-datatable-row-bg: #f1f3f5;
|
||||
--variables-datatable-separator: #e6e8eb;
|
||||
--variables-illustration-background: #f1f3f5;
|
||||
--variables-illustration-background-lighter: #ffffff;
|
||||
--variables-illustration-border: #eceef0;
|
||||
--variables-illustration-text: #202425;
|
||||
--variables-illustration-text-gray: #9ba1a6;
|
||||
--variables-illustration-dialog-box-light: #d7dbdf;
|
||||
--variables-illustration-dialog-box-2: #e6e8eb;
|
||||
--variables-illustration-dialog-box-1: #eceef0;
|
||||
--variables-icon-background: #fcfcfc;
|
||||
--variables-icon-outline: #c7c7c7;
|
||||
--variables-icon-fill-1: #e8e8e8;
|
||||
--variables-icon-fill-2: #dbdbdb;
|
||||
--variables-icon-background-green: #b4dfc4;
|
||||
--variables-icon-outline-green: #299764;
|
||||
--variables-icon-fill-1-green: #92ceac;
|
||||
--variables-icon-fill-2-green: #92ceac;
|
||||
--variables-icon-negative-icons: linear-gradient(45deg, #17171780 0%, #000000 100%);
|
||||
--variables-badge-text: #4cc38a;
|
||||
--variables-badge-background: #ddf3e4;
|
||||
--variables-card-alt-background: #ffffff;
|
||||
--variables-card-pill-label: linear-gradient(90deg, #3432321a 0%, #d0d0d01a 100%);
|
||||
--variables-card-text: linear-gradient(45deg, #000000 0%, #82978D 100%);
|
||||
--variables-card-lw6-illustration-dark-fill: linear-gradient(60deg, #ffffff1a 0%, #08b8b24d 100%);
|
||||
--variables-card-lw6-illustration-border-highlight: linear-gradient(45deg, #4040401a 50%, #3fcfb5 100%);
|
||||
--variables-card-lw6-illustration-teal-fill: linear-gradient(45deg, #ffffff80 0%, #08b8b24d 100%);
|
||||
--variables-card-lw6-illustration-accent-color: #249C95;
|
||||
--button-default-shadow: 0 -1 0 1 #313538;
|
||||
--button-primary-shadow: 0 -1 0 1 #62dba5;
|
||||
--typography-h1-bold: Medium 48/48 Circular Std;
|
||||
--typography-h1-regular: Book 48/48 Circular Std;
|
||||
--typography-h2-bold: Medium 36/40 Circular Std;
|
||||
--typography-h2-regular: Book 36/40 Circular Std;
|
||||
--typography-h3-bold: Medium 30/36 Circular Std;
|
||||
--typography-h3-regular: Book 30/36 Circular Std;
|
||||
--typography-h4-bold: Medium 24/32 Circular Std;
|
||||
--typography-h4-regular: Book 24/32 Circular Std;
|
||||
--typography-h4-mono: Medium 24/32 Office Code Pro;
|
||||
--typography-h5-bold: Medium 20/28 Circular Std;
|
||||
--typography-h5-regular: Book 20/28 Circular Std;
|
||||
--typography-body-base-normal: Book 16/24 Circular Std;
|
||||
--typography-body-lg-normal: Book 18/28 Circular Std;
|
||||
--typography-body-lg-mono: Medium 18/32 Office Code Pro;
|
||||
--typography-body-xs-normal: Book 12/16 Circular Std;
|
||||
--typography-body-xs-code-header: Medium 12/20 Office Code Pro;
|
||||
--typography-body-sm-normal: Book 14/20 Circular Std;
|
||||
--typography-body-sm-code-header: Regular 14/20 Office Code Pro;
|
||||
--typography-body-sm-code-normal: Regular 14/20 Office Code Pro;
|
||||
--typography-body-sm-bullet-points: Book 14/20 Circular Std;
|
||||
--typography-button-xs: Book 12/16 Circular Std;
|
||||
--typography-button-sm: Book 14/20 Circular Std;
|
||||
--typography-form-label: Book 14/20 Circular Std;
|
||||
--typography-form-label-secondary: Book 14/20 Circular Std;
|
||||
--typography-table-header: Book 12/20 Circular Std;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,432 @@
|
||||
{
|
||||
"variables": {
|
||||
"form": {
|
||||
"input": {
|
||||
"error": {
|
||||
"bg": {
|
||||
"value": "#1f1315",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#822025",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"bg": {
|
||||
"value": "#ffffff08",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#3e3e3e",
|
||||
"type": "color"
|
||||
},
|
||||
"disabled": {
|
||||
"bg": {
|
||||
"value": "#ffffff14",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"value": "#8f8f8f",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
},
|
||||
"labelSecondary": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"body": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#a0a0a0",
|
||||
"type": "color"
|
||||
},
|
||||
"light": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
},
|
||||
"link": {
|
||||
"value": "#3ecf8e",
|
||||
"type": "color"
|
||||
},
|
||||
"gradient": {
|
||||
"value": "linear-gradient(90deg, #fcfcfc 0%, #fcfcfc80 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"green-gradient": {
|
||||
"value": "linear-gradient(45deg, #34B97D 0%, #3ECF8E 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"panel": {
|
||||
"bg": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"border-alt": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-accent": {
|
||||
"value": "#262626",
|
||||
"type": "color"
|
||||
},
|
||||
"divider": {
|
||||
"value": "linear-gradient(90deg, #16161680 0%, #505050 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#271700",
|
||||
"type": "color"
|
||||
},
|
||||
"text-secondary": {
|
||||
"value": "#824e00",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#FFFCFC",
|
||||
"type": "color"
|
||||
},
|
||||
"text-secondary": {
|
||||
"value": "#f9c6c6",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"primary": {
|
||||
"value": "#1c1c1c",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"alt": {
|
||||
"value": "#161616",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#822025",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#3f2200",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#693f05",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"default": {
|
||||
"bg": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#3e3e3e",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"border": {
|
||||
"value": "#343434",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
"input": {
|
||||
"default": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
"label": {
|
||||
"value": "#a0a0a0",
|
||||
"type": "color"
|
||||
},
|
||||
"bg": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"icon": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"row": {
|
||||
"bg": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"separator": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"illustration": {
|
||||
"background": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"background-lighter": {
|
||||
"value": "#343434",
|
||||
"type": "color"
|
||||
},
|
||||
"background-lighter-low-opacity": {
|
||||
"value": "#343434",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#3e3e3e",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ecedee",
|
||||
"type": "color"
|
||||
},
|
||||
"text-gray": {
|
||||
"value": "#a0a0a0",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-light": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-2": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-1": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"gradientLine": {
|
||||
"value": "linear-gradient(90deg, #232323 0%, #ecedee 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"background": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"outline": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1": {
|
||||
"value": "#1c1c1c",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"outline-green": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1-green": {
|
||||
"value": "#133929",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2-green": {
|
||||
"value": "#1b543a",
|
||||
"type": "color"
|
||||
},
|
||||
"negative-icons": {
|
||||
"value": "linear-gradient(45deg, #ededed80 0%, #ffffff 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"code": {
|
||||
"highlight1": {
|
||||
"value": "#98C1FE",
|
||||
"type": "color"
|
||||
},
|
||||
"highlight2": {
|
||||
"value": "#F2AFE3",
|
||||
"type": "color"
|
||||
},
|
||||
"highlight3": {
|
||||
"value": "#3ecf8e",
|
||||
"type": "color"
|
||||
},
|
||||
"highlight4": {
|
||||
"value": "#D4D4D4",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"charts": {
|
||||
"primary": {
|
||||
"value": "#cbf5ff",
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#ffa600db",
|
||||
"type": "color"
|
||||
},
|
||||
"danger": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"multi": {
|
||||
"1": {
|
||||
"value": "#7ff4f0",
|
||||
"type": "color"
|
||||
},
|
||||
"2": {
|
||||
"value": "#cb77fd",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"badge": {
|
||||
"text": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"background": {
|
||||
"value": "#113123",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary-background": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary-text": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"alt-background": {
|
||||
"value": "#121212",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "linear-gradient(30deg, #2e2e2e 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"border-active": {
|
||||
"value": "linear-gradient(30deg, #3e3e3e 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"background-active": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "linear-gradient(45deg, #ffffff 0%, #CCEBD7 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"pill-label": {
|
||||
"value": "linear-gradient(90deg, #3432321a 0%, #d0d0d01a 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"pill-label-border": {
|
||||
"value": "linear-gradient(90deg, #3432321a 0%, #ffffff00 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"lw6-illustration": {
|
||||
"dark-fill": {
|
||||
"value": "linear-gradient(60deg, #121212 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"border-highlight": {
|
||||
"value": "linear-gradient(45deg, #232323 50%, #3fcfb5 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"teal-fill": {
|
||||
"value": "linear-gradient(45deg, #12121200 0%, #08b8b24d 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"accent-color": {
|
||||
"value": "#4DA08B",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"#164430": {
|
||||
"value": "#164430",
|
||||
"type": "color"
|
||||
},
|
||||
"Button": {
|
||||
"DefaultShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#343434",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
},
|
||||
"PrimaryShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#62dba5",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,354 @@
|
||||
{
|
||||
"variables": {
|
||||
"form": {
|
||||
"input": {
|
||||
"error": {
|
||||
"bg": {
|
||||
"value": "#FFFCFC",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#f3aeaf",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"bg": {
|
||||
"value": "#fbfcfd",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#d7dbdf",
|
||||
"type": "color"
|
||||
},
|
||||
"disabled": {
|
||||
"bg": {
|
||||
"value": "#021c3714",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
},
|
||||
"labelSecondary": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"body": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#7e868c",
|
||||
"type": "color"
|
||||
},
|
||||
"light": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
},
|
||||
"link": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"gradient": {
|
||||
"value": "linear-gradient(90deg, #161616 0%, #16161680 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"green-gradient": {
|
||||
"value": "linear-gradient(45deg, #3cb179 0%, #62ffb3bd 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"panel": {
|
||||
"bg": {
|
||||
"value": "#fbfcfd",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#eceef0",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#f8f8f8",
|
||||
"type": "color"
|
||||
},
|
||||
"border-alt": {
|
||||
"value": "#dfe3e6",
|
||||
"type": "color"
|
||||
},
|
||||
"divider": {
|
||||
"value": "linear-gradient(90deg, #ededed80 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#4e2009",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#ffecbc",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#dc3d43",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#eb9091",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#FFFCFC",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"primary": {
|
||||
"value": "#f8f9fa",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
},
|
||||
"alt": {
|
||||
"value": "#ffffff",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#822025",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#3f2200",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#693f05",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"default": {
|
||||
"bg": {
|
||||
"value": "#fbfcfd",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"border": {
|
||||
"value": "#313538",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
"input": {
|
||||
"default": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
"label": {
|
||||
"value": "#687076",
|
||||
"type": "color"
|
||||
},
|
||||
"bg": {
|
||||
"value": "#f1f3f5",
|
||||
"type": "color"
|
||||
},
|
||||
"icon": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"row": {
|
||||
"bg": {
|
||||
"value": "#f1f3f5",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"separator": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"illustration": {
|
||||
"background": {
|
||||
"value": "#f1f3f5",
|
||||
"type": "color"
|
||||
},
|
||||
"background-lighter": {
|
||||
"value": "#ffffff",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#eceef0",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#202425",
|
||||
"type": "color"
|
||||
},
|
||||
"text-gray": {
|
||||
"value": "#9ba1a6",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-light": {
|
||||
"value": "#d7dbdf",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-2": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-1": {
|
||||
"value": "#eceef0",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"background": {
|
||||
"value": "#fcfcfc",
|
||||
"type": "color"
|
||||
},
|
||||
"outline": {
|
||||
"value": "#c7c7c7",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1": {
|
||||
"value": "#e8e8e8",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2": {
|
||||
"value": "#dbdbdb",
|
||||
"type": "color"
|
||||
},
|
||||
"background-green": {
|
||||
"value": "#b4dfc4",
|
||||
"type": "color"
|
||||
},
|
||||
"outline-green": {
|
||||
"value": "#299764",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1-green": {
|
||||
"value": "#92ceac",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2-green": {
|
||||
"value": "#92ceac",
|
||||
"type": "color"
|
||||
},
|
||||
"negative-icons": {
|
||||
"value": "linear-gradient(45deg, #17171780 0%, #000000 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"badge": {
|
||||
"text": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"background": {
|
||||
"value": "#ddf3e4",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"alt-background": {
|
||||
"value": "#ffffff",
|
||||
"type": "color"
|
||||
},
|
||||
"pill-label": {
|
||||
"value": "linear-gradient(90deg, #3432321a 0%, #d0d0d01a 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "linear-gradient(45deg, #000000 0%, #82978D 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"lw6-illustration": {
|
||||
"dark-fill": {
|
||||
"value": "linear-gradient(60deg, #ffffff1a 0%, #08b8b24d 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"border-highlight": {
|
||||
"value": "linear-gradient(45deg, #4040401a 50%, #3fcfb5 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"teal-fill": {
|
||||
"value": "linear-gradient(45deg, #ffffff80 0%, #08b8b24d 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"accent-color": {
|
||||
"value": "#249C95",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Button": {
|
||||
"DefaultShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#313538",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
},
|
||||
"PrimaryShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#62dba5",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,355 @@
|
||||
{
|
||||
"typography": {
|
||||
"H1": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 48,
|
||||
"fontSize": 48,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 32,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 48,
|
||||
"fontSize": 48,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 32,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"H2": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 40,
|
||||
"fontSize": 36,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 40,
|
||||
"fontSize": 36,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"H3": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 36,
|
||||
"fontSize": 30,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 36,
|
||||
"fontSize": 30,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"H4": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"mono": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Medium",
|
||||
"textCase": "uppercase",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"letterSpacing": "-2%"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"H5": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 28,
|
||||
"fontSize": 20,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 28,
|
||||
"fontSize": 20,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"base": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 24,
|
||||
"fontSize": 16,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"lg": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 28,
|
||||
"fontSize": 18,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"mono": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 18,
|
||||
"letterSpacing": "8%",
|
||||
"textCase": "uppercase"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"xs": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 16,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"code": {
|
||||
"header": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": "10%",
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sm": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"code": {
|
||||
"header": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Regular",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "10%",
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Regular",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"bullet-points": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 12,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"xs": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 16,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"sm": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"form": {
|
||||
"label": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"label-secondary": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"table": {
|
||||
"header": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,432 @@
|
||||
{
|
||||
"variables": {
|
||||
"form": {
|
||||
"input": {
|
||||
"error": {
|
||||
"bg": {
|
||||
"value": "#1f1315",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#822025",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"bg": {
|
||||
"value": "#ffffff08",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#3e3e3e",
|
||||
"type": "color"
|
||||
},
|
||||
"disabled": {
|
||||
"bg": {
|
||||
"value": "#ffffff14",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"value": "#8f8f8f",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
},
|
||||
"labelSecondary": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"body": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#a0a0a0",
|
||||
"type": "color"
|
||||
},
|
||||
"light": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
},
|
||||
"link": {
|
||||
"value": "#3ecf8e",
|
||||
"type": "color"
|
||||
},
|
||||
"gradient": {
|
||||
"value": "linear-gradient(90deg, #fcfcfc 0%, #fcfcfc80 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"green-gradient": {
|
||||
"value": "linear-gradient(45deg, #34B97D 0%, #3ECF8E 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"panel": {
|
||||
"bg": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"border-alt": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-accent": {
|
||||
"value": "#262626",
|
||||
"type": "color"
|
||||
},
|
||||
"divider": {
|
||||
"value": "linear-gradient(90deg, #16161680 0%, #505050 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#271700",
|
||||
"type": "color"
|
||||
},
|
||||
"text-secondary": {
|
||||
"value": "#824e00",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#FFFCFC",
|
||||
"type": "color"
|
||||
},
|
||||
"text-secondary": {
|
||||
"value": "#f9c6c6",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"primary": {
|
||||
"value": "#1c1c1c",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"alt": {
|
||||
"value": "#161616",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#822025",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#3f2200",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#693f05",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"default": {
|
||||
"bg": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#3e3e3e",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"border": {
|
||||
"value": "#343434",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
"input": {
|
||||
"default": {
|
||||
"value": "#ededed",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
"label": {
|
||||
"value": "#a0a0a0",
|
||||
"type": "color"
|
||||
},
|
||||
"bg": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"icon": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"row": {
|
||||
"bg": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"separator": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"illustration": {
|
||||
"background": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"background-lighter": {
|
||||
"value": "#343434",
|
||||
"type": "color"
|
||||
},
|
||||
"background-lighter-low-opacity": {
|
||||
"value": "#343434",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#3e3e3e",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ecedee",
|
||||
"type": "color"
|
||||
},
|
||||
"text-gray": {
|
||||
"value": "#a0a0a0",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-light": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-2": {
|
||||
"value": "#282828",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-1": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"gradientLine": {
|
||||
"value": "linear-gradient(90deg, #232323 0%, #ecedee 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"background": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"outline": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1": {
|
||||
"value": "#1c1c1c",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"outline-green": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1-green": {
|
||||
"value": "#133929",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2-green": {
|
||||
"value": "#1b543a",
|
||||
"type": "color"
|
||||
},
|
||||
"negative-icons": {
|
||||
"value": "linear-gradient(45deg, #ededed80 0%, #ffffff 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"code": {
|
||||
"highlight1": {
|
||||
"value": "#98C1FE",
|
||||
"type": "color"
|
||||
},
|
||||
"highlight2": {
|
||||
"value": "#F2AFE3",
|
||||
"type": "color"
|
||||
},
|
||||
"highlight3": {
|
||||
"value": "#3ecf8e",
|
||||
"type": "color"
|
||||
},
|
||||
"highlight4": {
|
||||
"value": "#D4D4D4",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"charts": {
|
||||
"primary": {
|
||||
"value": "#cbf5ff",
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#ffa600db",
|
||||
"type": "color"
|
||||
},
|
||||
"danger": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"multi": {
|
||||
"1": {
|
||||
"value": "#7ff4f0",
|
||||
"type": "color"
|
||||
},
|
||||
"2": {
|
||||
"value": "#cb77fd",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"badge": {
|
||||
"text": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"background": {
|
||||
"value": "#113123",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary-background": {
|
||||
"value": "#2e2e2e",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary-text": {
|
||||
"value": "#707070",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"alt-background": {
|
||||
"value": "#121212",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "linear-gradient(30deg, #2e2e2e 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"border-active": {
|
||||
"value": "linear-gradient(30deg, #3e3e3e 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"background-active": {
|
||||
"value": "#232323",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "linear-gradient(45deg, #ffffff 0%, #CCEBD7 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"pill-label": {
|
||||
"value": "linear-gradient(90deg, #3432321a 0%, #d0d0d01a 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"pill-label-border": {
|
||||
"value": "linear-gradient(90deg, #3432321a 0%, #ffffff00 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"lw6-illustration": {
|
||||
"dark-fill": {
|
||||
"value": "linear-gradient(60deg, #121212 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"border-highlight": {
|
||||
"value": "linear-gradient(45deg, #232323 50%, #3fcfb5 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"teal-fill": {
|
||||
"value": "linear-gradient(45deg, #12121200 0%, #08b8b24d 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"accent-color": {
|
||||
"value": "#4DA08B",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"#164430": {
|
||||
"value": "#164430",
|
||||
"type": "color"
|
||||
},
|
||||
"Button": {
|
||||
"DefaultShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#343434",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
},
|
||||
"PrimaryShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#62dba5",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,354 @@
|
||||
{
|
||||
"variables": {
|
||||
"form": {
|
||||
"input": {
|
||||
"error": {
|
||||
"bg": {
|
||||
"value": "#FFFCFC",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#f3aeaf",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"bg": {
|
||||
"value": "#fbfcfd",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#d7dbdf",
|
||||
"type": "color"
|
||||
},
|
||||
"disabled": {
|
||||
"bg": {
|
||||
"value": "#021c3714",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
},
|
||||
"labelSecondary": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"body": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#7e868c",
|
||||
"type": "color"
|
||||
},
|
||||
"light": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
},
|
||||
"link": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"gradient": {
|
||||
"value": "linear-gradient(90deg, #161616 0%, #16161680 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"green-gradient": {
|
||||
"value": "linear-gradient(45deg, #3cb179 0%, #62ffb3bd 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"panel": {
|
||||
"bg": {
|
||||
"value": "#fbfcfd",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#eceef0",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#f8f8f8",
|
||||
"type": "color"
|
||||
},
|
||||
"border-alt": {
|
||||
"value": "#dfe3e6",
|
||||
"type": "color"
|
||||
},
|
||||
"divider": {
|
||||
"value": "linear-gradient(90deg, #ededed80 0%, #232323 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#4e2009",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#ffecbc",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#dc3d43",
|
||||
"type": "color"
|
||||
},
|
||||
"bg-alt": {
|
||||
"value": "#eb9091",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#FFFCFC",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"primary": {
|
||||
"value": "#f8f9fa",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
},
|
||||
"alt": {
|
||||
"value": "#ffffff",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"danger": {
|
||||
"bg": {
|
||||
"value": "#e5484d",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#822025",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"bg": {
|
||||
"value": "#3f2200",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#693f05",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#ffb224",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"default": {
|
||||
"bg": {
|
||||
"value": "#fbfcfd",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"border": {
|
||||
"value": "#313538",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
"input": {
|
||||
"default": {
|
||||
"value": "#11181c",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
"label": {
|
||||
"value": "#687076",
|
||||
"type": "color"
|
||||
},
|
||||
"bg": {
|
||||
"value": "#f1f3f5",
|
||||
"type": "color"
|
||||
},
|
||||
"icon": {
|
||||
"value": "#889096",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"row": {
|
||||
"bg": {
|
||||
"value": "#f1f3f5",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"separator": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"illustration": {
|
||||
"background": {
|
||||
"value": "#f1f3f5",
|
||||
"type": "color"
|
||||
},
|
||||
"background-lighter": {
|
||||
"value": "#ffffff",
|
||||
"type": "color"
|
||||
},
|
||||
"border": {
|
||||
"value": "#eceef0",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "#202425",
|
||||
"type": "color"
|
||||
},
|
||||
"text-gray": {
|
||||
"value": "#9ba1a6",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-light": {
|
||||
"value": "#d7dbdf",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-2": {
|
||||
"value": "#e6e8eb",
|
||||
"type": "color"
|
||||
},
|
||||
"dialog-box-1": {
|
||||
"value": "#eceef0",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"background": {
|
||||
"value": "#fcfcfc",
|
||||
"type": "color"
|
||||
},
|
||||
"outline": {
|
||||
"value": "#c7c7c7",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1": {
|
||||
"value": "#e8e8e8",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2": {
|
||||
"value": "#dbdbdb",
|
||||
"type": "color"
|
||||
},
|
||||
"background-green": {
|
||||
"value": "#b4dfc4",
|
||||
"type": "color"
|
||||
},
|
||||
"outline-green": {
|
||||
"value": "#299764",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-1-green": {
|
||||
"value": "#92ceac",
|
||||
"type": "color"
|
||||
},
|
||||
"fill-2-green": {
|
||||
"value": "#92ceac",
|
||||
"type": "color"
|
||||
},
|
||||
"negative-icons": {
|
||||
"value": "linear-gradient(45deg, #17171780 0%, #000000 100%)",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"badge": {
|
||||
"text": {
|
||||
"value": "#4cc38a",
|
||||
"type": "color"
|
||||
},
|
||||
"background": {
|
||||
"value": "#ddf3e4",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"alt-background": {
|
||||
"value": "#ffffff",
|
||||
"type": "color"
|
||||
},
|
||||
"pill-label": {
|
||||
"value": "linear-gradient(90deg, #3432321a 0%, #d0d0d01a 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"text": {
|
||||
"value": "linear-gradient(45deg, #000000 0%, #82978D 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"lw6-illustration": {
|
||||
"dark-fill": {
|
||||
"value": "linear-gradient(60deg, #ffffff1a 0%, #08b8b24d 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"border-highlight": {
|
||||
"value": "linear-gradient(45deg, #4040401a 50%, #3fcfb5 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"teal-fill": {
|
||||
"value": "linear-gradient(45deg, #ffffff80 0%, #08b8b24d 100%)",
|
||||
"type": "color"
|
||||
},
|
||||
"accent-color": {
|
||||
"value": "#249C95",
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Button": {
|
||||
"DefaultShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#313538",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
},
|
||||
"PrimaryShadow": {
|
||||
"value": {
|
||||
"x": 0,
|
||||
"y": -1,
|
||||
"blur": 0,
|
||||
"spread": 1,
|
||||
"color": "#62dba5",
|
||||
"type": "innerShadow"
|
||||
},
|
||||
"type": "boxShadow"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,355 @@
|
||||
{
|
||||
"typography": {
|
||||
"H1": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 48,
|
||||
"fontSize": 48,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 32,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 48,
|
||||
"fontSize": 48,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 32,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"H2": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 40,
|
||||
"fontSize": 36,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 40,
|
||||
"fontSize": 36,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"H3": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 36,
|
||||
"fontSize": 30,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 36,
|
||||
"fontSize": 30,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"H4": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"mono": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Medium",
|
||||
"textCase": "uppercase",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"letterSpacing": "-2%"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"H5": {
|
||||
"Bold": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 28,
|
||||
"fontSize": 20,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"Regular": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 28,
|
||||
"fontSize": 20,
|
||||
"letterSpacing": "-2%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"base": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 24,
|
||||
"fontSize": 16,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"lg": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 28,
|
||||
"fontSize": 18,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"mono": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 32,
|
||||
"fontSize": 18,
|
||||
"letterSpacing": "8%",
|
||||
"textCase": "uppercase"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"xs": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 16,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"code": {
|
||||
"header": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Medium",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": "10%",
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sm": {
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"code": {
|
||||
"header": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Regular",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "10%",
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
},
|
||||
"normal": {
|
||||
"value": {
|
||||
"fontFamily": "Office Code Pro",
|
||||
"fontWeight": "Regular",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 26,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
},
|
||||
"bullet-points": {
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": 0,
|
||||
"paragraphSpacing": 12,
|
||||
"textDecoration": "none",
|
||||
"textCase": "none"
|
||||
},
|
||||
"type": "typography"
|
||||
}
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"xs": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 16,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"sm": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"form": {
|
||||
"label": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
},
|
||||
"label-secondary": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
"table": {
|
||||
"header": {
|
||||
"type": "typography",
|
||||
"value": {
|
||||
"fontFamily": "Circular Std",
|
||||
"fontWeight": "Book",
|
||||
"lineHeight": 20,
|
||||
"fontSize": 12,
|
||||
"letterSpacing": "0%",
|
||||
"paragraphSpacing": 26,
|
||||
"textCase": "none",
|
||||
"textDecoration": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user