From 4553a288ccc8702be3fdc504d3bf425be791e4a0 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 19 Jan 2023 17:50:49 +0100 Subject: [PATCH] latest --- package-lock.json | 141 ++- packages/ui/style-token copy.js | 491 -------- packages/ui/style-token--old.js | 153 +++ packages/ui/style-token.js | 582 +++++++-- packages/ui/styles-v2/themes/dark.css | 117 ++ packages/ui/styles-v2/themes/light.css | 99 ++ packages/ui/styles/tokens/01_base/global.json | 1036 +++++++++++++++++ packages/ui/styles/tokens/02_themes/dark.json | 432 +++++++ .../ui/styles/tokens/02_themes/light.json | 354 ++++++ .../styles/tokens/03_semantic/typography.json | 355 ++++++ .../ui/styles/tokens/v2/01_base/global.json | 1036 +++++++++++++++++ .../ui/styles/tokens/v2/02_themes/dark.json | 432 +++++++ .../ui/styles/tokens/v2/02_themes/light.json | 354 ++++++ .../tokens/v2/03_semantic/typography.json | 355 ++++++ 14 files changed, 5314 insertions(+), 623 deletions(-) delete mode 100644 packages/ui/style-token copy.js create mode 100644 packages/ui/style-token--old.js create mode 100644 packages/ui/styles-v2/themes/dark.css create mode 100644 packages/ui/styles-v2/themes/light.css create mode 100644 packages/ui/styles/tokens/01_base/global.json create mode 100644 packages/ui/styles/tokens/02_themes/dark.json create mode 100644 packages/ui/styles/tokens/02_themes/light.json create mode 100644 packages/ui/styles/tokens/03_semantic/typography.json create mode 100644 packages/ui/styles/tokens/v2/01_base/global.json create mode 100644 packages/ui/styles/tokens/v2/02_themes/dark.json create mode 100644 packages/ui/styles/tokens/v2/02_themes/light.json create mode 100644 packages/ui/styles/tokens/v2/03_semantic/typography.json diff --git a/package-lock.json b/package-lock.json index e8330caece1..4b029a10031 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/packages/ui/style-token copy.js b/packages/ui/style-token copy.js deleted file mode 100644 index e97a53b8f66..00000000000 --- a/packages/ui/style-token copy.js +++ /dev/null @@ -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!') diff --git a/packages/ui/style-token--old.js b/packages/ui/style-token--old.js new file mode 100644 index 00000000000..38eb65b93f5 --- /dev/null +++ b/packages/ui/style-token--old.js @@ -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!') diff --git a/packages/ui/style-token.js b/packages/ui/style-token.js index 38eb65b93f5..a6f2238c6ea 100644 --- a/packages/ui/style-token.js +++ b/packages/ui/style-token.js @@ -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!') diff --git a/packages/ui/styles-v2/themes/dark.css b/packages/ui/styles-v2/themes/dark.css new file mode 100644 index 00000000000..417eae271f3 --- /dev/null +++ b/packages/ui/styles-v2/themes/dark.css @@ -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; +} \ No newline at end of file diff --git a/packages/ui/styles-v2/themes/light.css b/packages/ui/styles-v2/themes/light.css new file mode 100644 index 00000000000..f6d14acb80c --- /dev/null +++ b/packages/ui/styles-v2/themes/light.css @@ -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; +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/01_base/global.json b/packages/ui/styles/tokens/01_base/global.json new file mode 100644 index 00000000000..ef326d248da --- /dev/null +++ b/packages/ui/styles/tokens/01_base/global.json @@ -0,0 +1,1036 @@ +{ + "spacing": { + "scale": { + "value": 2, + "type": "spacing" + }, + "xs": { + "value": 4, + "type": "spacing" + }, + "sm": { + "value": 8, + "type": "spacing" + }, + "md": { + "value": 16, + "type": "spacing" + }, + "lg": { + "value": 32, + "type": "spacing" + }, + "xl": { + "value": 64, + "type": "spacing" + } + }, + "sizing": { + "scale": { + "value": 1.5, + "type": "sizing" + }, + "xs": { + "value": 4, + "type": "sizing" + }, + "sm": { + "value": 6, + "type": "sizing" + }, + "md": { + "value": 9, + "type": "sizing" + }, + "lg": { + "value": 13.5, + "type": "sizing" + }, + "xl": { + "value": 20.25, + "type": "sizing" + } + }, + "borderRadius": { + "sm": { + "value": 4, + "type": "borderRadius" + }, + "lg": { + "value": 8, + "type": "borderRadius" + }, + "xl": { + "value": 16, + "type": "borderRadius" + }, + "xs": { + "value": 2, + "type": "borderRadius" + }, + "tableHeader": { + "value": 4, + "type": "borderRadius" + } + }, + "borderWidth": { + "none": { + "value": 0, + "type": "borderWidth" + }, + "xs": { + "value": 1, + "type": "borderWidth" + }, + "sm": { + "value": 2, + "type": "borderWidth" + }, + "md": { + "value": 4, + "type": "borderWidth" + }, + "lg": { + "value": 8, + "type": "borderWidth" + } + }, + "colors": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "Gray": { + "Dark": { + "1": { + "value": "#161616", + "type": "color", + "description": "161616" + }, + "2": { + "value": "#1c1c1c", + "type": "color", + "description": "1C1C1C" + }, + "3": { + "value": "#232323", + "type": "color", + "description": "232323" + }, + "4": { + "value": "#282828", + "type": "color", + "description": "282828" + }, + "5": { + "value": "#2e2e2e", + "type": "color", + "description": "2E2E2E" + }, + "6": { + "value": "#343434", + "type": "color", + "description": "343434" + }, + "7": { + "value": "#3e3e3e", + "type": "color", + "description": "3E3E3E" + }, + "8": { + "value": "#505050", + "type": "color", + "description": "505050" + }, + "9": { + "value": "#707070", + "type": "color", + "description": "707070" + }, + "10": { + "value": "#7e7e7e", + "type": "color", + "description": "7E7E7E" + }, + "11": { + "value": "#a0a0a0", + "type": "color", + "description": "A0A0A0" + }, + "12": { + "value": "#ededed", + "type": "color", + "description": "EDEDED" + }, + "Alpha": { + "1": { + "value": "#00000000", + "type": "color", + "description": "000000" + }, + "2": { + "value": "#ffffff08", + "type": "color", + "description": "FFFFFF" + }, + "3": { + "value": "#ffffff0f", + "type": "color", + "description": "FFFFFF" + }, + "4": { + "value": "#ffffff14", + "type": "color", + "description": "FFFFFF" + }, + "5": { + "value": "#ffffff1a", + "type": "color", + "description": "FFFFFF" + }, + "6": { + "value": "#ffffff21", + "type": "color", + "description": "FFFFFF" + }, + "7": { + "value": "#ffffff2b", + "type": "color", + "description": "FFFFFF" + }, + "8": { + "value": "#ffffff40", + "type": "color", + "description": "FFFFFF" + }, + "9": { + "value": "#ffffff63", + "type": "color", + "description": "FFFFFF" + }, + "10": { + "value": "#ffffff73", + "type": "color", + "description": "FFFFFF" + }, + "11": { + "value": "#ffffff96", + "type": "color", + "description": "FFFFFF" + }, + "12": { + "value": "#ffffffeb", + "type": "color", + "description": "FFFFFF" + } + } + }, + "Light": { + "1": { + "value": "#fcfcfc", + "type": "color", + "description": "FCFCFC" + }, + "2": { + "value": "#f8f8f8", + "type": "color", + "description": "F8F8F8" + }, + "3": { + "value": "#f3f3f3", + "type": "color", + "description": "F3F3F3" + }, + "4": { + "value": "#ededed", + "type": "color", + "description": "EDEDED" + }, + "5": { + "value": "#e8e8e8", + "type": "color", + "description": "E8E8E8" + }, + "6": { + "value": "#e2e2e2", + "type": "color", + "description": "E2E2E2" + }, + "7": { + "value": "#dbdbdb", + "type": "color", + "description": "DBDBDB" + }, + "8": { + "value": "#c7c7c7", + "type": "color", + "description": "C7C7C7" + }, + "9": { + "value": "#8f8f8f", + "type": "color", + "description": "8F8F8F" + }, + "10": { + "value": "#858585", + "type": "color", + "description": "858585" + }, + "11": { + "value": "#6f6f6f", + "type": "color", + "description": "6F6F6F" + }, + "12": { + "value": "#171717", + "type": "color", + "description": "171717" + }, + "Alpha": { + "1": { + "value": "#00000003", + "type": "color", + "description": "000000" + }, + "2": { + "value": "#00000008", + "type": "color", + "description": "000000" + }, + "3": { + "value": "#0000000d", + "type": "color", + "description": "000000" + }, + "4": { + "value": "#00000012", + "type": "color", + "description": "000000" + }, + "5": { + "value": "#00000017", + "type": "color", + "description": "000000" + }, + "6": { + "value": "#0000001c", + "type": "color", + "description": "000000" + }, + "7": { + "value": "#00000024", + "type": "color", + "description": "000000" + }, + "8": { + "value": "#00000038", + "type": "color", + "description": "000000" + }, + "9": { + "value": "#00000070", + "type": "color", + "description": "000000" + }, + "10": { + "value": "#0000007a", + "type": "color", + "description": "000000" + }, + "11": { + "value": "#0000008f", + "type": "color", + "description": "000000" + }, + "12": { + "value": "#000000e8", + "type": "color", + "description": "000000" + } + } + } + }, + "Slate": { + "Dark": { + "1": { + "value": "#151718", + "type": "color", + "description": "151718" + }, + "2": { + "value": "#1a1d1e", + "type": "color", + "description": "1A1D1E" + }, + "3": { + "value": "#202425", + "type": "color", + "description": "202425" + }, + "4": { + "value": "#26292b", + "type": "color", + "description": "26292B" + }, + "5": { + "value": "#2b2f31", + "type": "color", + "description": "2B2F31" + }, + "6": { + "value": "#313538", + "type": "color", + "description": "313538" + }, + "7": { + "value": "#3a3f42", + "type": "color", + "description": "3A3F42" + }, + "8": { + "value": "#4c5155", + "type": "color", + "description": "4C5155" + }, + "9": { + "value": "#697177", + "type": "color", + "description": "697177" + }, + "10": { + "value": "#787f85", + "type": "color", + "description": "787F85" + }, + "11": { + "value": "#9ba1a6", + "type": "color", + "description": "9BA1A6" + }, + "12": { + "value": "#ecedee", + "type": "color", + "description": "ECEDEE" + }, + "Alpha": { + "1": { + "value": "#00000000", + "type": "color", + "description": "000000" + }, + "2": { + "value": "#d5feff08", + "type": "color", + "description": "D5FEFF" + }, + "3": { + "value": "#d6fbfc0f", + "type": "color", + "description": "D6FBFC" + }, + "4": { + "value": "#e2f0fd14", + "type": "color", + "description": "E2F0FD" + }, + "5": { + "value": "#dff3fd1c", + "type": "color", + "description": "DFF3FD" + }, + "6": { + "value": "#dfeffe24", + "type": "color", + "description": "DFEFFE" + }, + "7": { + "value": "#e0f3ff2e", + "type": "color", + "description": "E0F3FF" + }, + "8": { + "value": "#e5f2fe42", + "type": "color", + "description": "E5F2FE" + }, + "9": { + "value": "#e1f1ff69", + "type": "color", + "description": "E1F1FF" + }, + "10": { + "value": "#e7f3ff78", + "type": "color", + "description": "E7F3FF" + }, + "11": { + "value": "#eff7ff9e", + "type": "color", + "description": "EFF7FF" + }, + "12": { + "value": "#fdfeffed", + "type": "color", + "description": "FDFEFF" + } + } + }, + "Light": { + "1": { + "value": "#fbfcfd", + "type": "color", + "description": "FBFCFD" + }, + "2": { + "value": "#f8f9fa", + "type": "color", + "description": "F8F9FA" + }, + "3": { + "value": "#f1f3f5", + "type": "color", + "description": "F1F3F5" + }, + "4": { + "value": "#eceef0", + "type": "color", + "description": "ECEEF0" + }, + "5": { + "value": "#e6e8eb", + "type": "color", + "description": "E6E8EB" + }, + "6": { + "value": "#dfe3e6", + "type": "color", + "description": "DFE3E6" + }, + "7": { + "value": "#d7dbdf", + "type": "color", + "description": "D7DBDF" + }, + "8": { + "value": "#c1c8cd", + "type": "color", + "description": "C1C8CD" + }, + "9": { + "value": "#889096", + "type": "color", + "description": "889096" + }, + "10": { + "value": "#7e868c", + "type": "color", + "description": "7E868C" + }, + "11": { + "value": "#687076", + "type": "color", + "description": "687076" + }, + "12": { + "value": "#11181c", + "type": "color", + "description": "11181C" + }, + "Alpha": { + "1": { + "value": "#05448205", + "type": "color", + "description": "054482" + }, + "2": { + "value": "#05294d08", + "type": "color", + "description": "05294D" + }, + "3": { + "value": "#0025490d", + "type": "color", + "description": "002549" + }, + "4": { + "value": "#021c3714", + "type": "color", + "description": "021C37" + }, + "5": { + "value": "#0217351a", + "type": "color", + "description": "021735" + }, + "6": { + "value": "#01213921", + "type": "color", + "description": "012139" + }, + "7": { + "value": "#001a3329", + "type": "color", + "description": "001A33" + }, + "8": { + "value": "#011e323d", + "type": "color", + "description": "011E32" + }, + "9": { + "value": "#00111e78", + "type": "color", + "description": "00111E" + }, + "10": { + "value": "#00101b82", + "type": "color", + "description": "00101B" + }, + "11": { + "value": "#000e1896", + "type": "color", + "description": "000E18" + }, + "12": { + "value": "#00080ced", + "type": "color", + "description": "00080C" + } + } + } + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Inter", + "type": "fontFamilies" + }, + "body": { + "value": "Circular Std", + "type": "fontFamilies" + }, + "roboto": { + "value": "Roboto", + "type": "fontFamilies" + }, + "body2": { + "value": "Circular Std", + "type": "fontFamilies" + }, + "mono": { + "value": "Office Code Pro", + "type": "fontFamilies" + } + }, + "lineHeights": { + "0": { + "value": "110%", + "type": "lineHeights" + }, + "heading": { + "value": "110%", + "type": "lineHeights" + }, + "base": { + "value": 24, + "type": "lineHeights" + }, + "xs": { + "value": 16, + "type": "lineHeights" + }, + "sm": { + "value": 20, + "type": "lineHeights" + }, + "lg": { + "value": 28, + "type": "lineHeights" + }, + "xl": { + "value": 28, + "type": "lineHeights" + }, + "2xl": { + "value": 32, + "type": "lineHeights" + }, + "3xl": { + "value": 36, + "type": "lineHeights" + }, + "4xl": { + "value": 40, + "type": "lineHeights" + }, + "5xl": { + "value": 48, + "type": "lineHeights" + }, + "6xl": { + "value": 60, + "type": "lineHeights" + }, + "7xl": { + "value": 72, + "type": "lineHeights" + }, + "8xl": { + "value": 96, + "type": "lineHeights" + }, + "9xl": { + "value": 128, + "type": "lineHeights" + } + }, + "letterSpacing": { + "0": { + "value": "0%", + "type": "letterSpacing" + }, + "1": { + "value": "-2%", + "type": "letterSpacing" + }, + "default": { + "value": 0, + "type": "letterSpacing" + }, + "increased": { + "value": "10%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + }, + "+8": { + "value": "8%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "0": { + "value": 26, + "type": "paragraphSpacing" + }, + "1": { + "value": 32, + "type": "paragraphSpacing" + }, + "h1": { + "value": 32, + "type": "paragraphSpacing" + }, + "h2": { + "value": 26, + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + }, + "roboto-0": { + "value": "Regular", + "type": "fontWeights" + }, + "inter-1": { + "value": "Medium", + "type": "fontWeights" + }, + "inter-2": { + "value": "Book", + "type": "fontWeights" + }, + "heading-mono": { + "value": "Medium", + "type": "fontWeights" + } + }, + "fontSizes": { + "5xl": { + "value": 48, + "type": "fontSizes" + }, + "4xl": { + "value": 36, + "type": "fontSizes" + }, + "3xl": { + "value": 30, + "type": "fontSizes" + }, + "2xl": { + "value": 24, + "type": "fontSizes" + }, + "xl": { + "value": 20, + "type": "fontSizes" + }, + "lg": { + "value": 18, + "type": "fontSizes" + }, + "base": { + "value": 16, + "type": "fontSizes" + }, + "sm": { + "value": 14, + "type": "fontSizes" + }, + "xs": { + "value": 12, + "type": "fontSizes" + }, + "6xl": { + "value": 60, + "type": "fontSizes" + }, + "7xl": { + "value": 72, + "type": "fontSizes" + }, + "8xl": { + "value": 96, + "type": "fontSizes" + }, + "9xl": { + "value": 128, + "type": "fontSizes" + } + }, + "inner shadow label-copy": { + "value": { + "color": "#858585", + "type": "innerShadow", + "x": 0, + "y": 1, + "blur": 1, + "spread": 0 + }, + "type": "boxShadow" + }, + "inner-shadow-text-new": { + "value": { + "color": "#00000026", + "type": "innerShadow", + "x": 0, + "y": 0.5, + "blur": 0.5, + "spread": 0 + }, + "type": "boxShadow" + }, + "fontSize": { + "0": { + "value": 14, + "type": "fontSizes" + }, + "1": { + "value": 39.063, + "type": "fontSizes" + }, + "2": { + "value": 48.829, + "type": "fontSizes" + } + }, + "textCase": { + "none": { + "value": "none", + "type": "textCase" + }, + "uppercase": { + "value": "uppercase", + "type": "textCase" + } + }, + "textDecoration": { + "none": { + "value": "none", + "type": "textDecoration" + } + }, + "variables": { + "colors": { + "brand": { + "primary": { + "value": "#3ecf8e", + "type": "color" + }, + "accent": { + "value": "#34b97d", + "type": "color" + } + } + } + }, + "icon": { + "xs": { + "value": 12, + "type": "sizing" + }, + "sm": { + "value": 16, + "type": "sizing" + }, + "md": { + "value": 18, + "type": "sizing" + }, + "bg": { + "value": 0.15, + "type": "opacity", + "description": "Transuclent bg of icons" + } + }, + "iconWidth": { + "default": { + "value": 1, + "type": "borderWidth" + } + }, + "form": { + "input-disabled": { + "value": "33%", + "type": "opacity" + } + }, + "Modal Drop Shadow": { + "value": { + "x": 1, + "y": 4, + "blur": 4, + "spread": 4, + "color": "#00000026", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "panel": { + "value": 2, + "type": "borderRadius", + "horizontal": { + "value": "{spacing.lg}", + "type": "spacing" + }, + "vertical": { + "value": "{spacing.lg}", + "type": "spacing" + } + }, + "datatable": { + "headericon": { + "value": 16, + "type": "sizing" + }, + "rowheight": { + "value": 28, + "type": "sizing", + "description": "Height of datatable rows" + } + }, + "options": { + "icon": { + "value": 18, + "type": "sizing", + "description": "Size of product/dropdown icons icons" + } + }, + "input": { + "sm": { + "height": { + "value": 28, + "type": "sizing" + } + } + }, + "panel2": { + "value": 4, + "type": "borderRadius" + }, + "base": { + "value": 16, + "type": "other" + }, + "xxl": { + "value": 128, + "type": "spacing" + }, + "actionBar": { + "vertical": { + "value": 21, + "type": "spacing" + }, + "horizontal": { + "value": 32, + "type": "spacing" + } + }, + "table": { + "header": { + "horizontal": { + "value": 32, + "type": "spacing" + } + } + }, + "tabs": { + "horizontal": { + "value": 16, + "type": "spacing" + } + }, + "content": { + "vertical": { + "value": 32, + "type": "spacing" + }, + "horizontal": { + "value": 32, + "type": "spacing" + } + }, + "controller": { + "vertical": { + "value": 16, + "type": "spacing" + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/02_themes/dark.json b/packages/ui/styles/tokens/02_themes/dark.json new file mode 100644 index 00000000000..01cba1530f0 --- /dev/null +++ b/packages/ui/styles/tokens/02_themes/dark.json @@ -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" + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/02_themes/light.json b/packages/ui/styles/tokens/02_themes/light.json new file mode 100644 index 00000000000..a6bb13f6eaa --- /dev/null +++ b/packages/ui/styles/tokens/02_themes/light.json @@ -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" + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/03_semantic/typography.json b/packages/ui/styles/tokens/03_semantic/typography.json new file mode 100644 index 00000000000..e487a3ec610 --- /dev/null +++ b/packages/ui/styles/tokens/03_semantic/typography.json @@ -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" + } + } + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/v2/01_base/global.json b/packages/ui/styles/tokens/v2/01_base/global.json new file mode 100644 index 00000000000..ef326d248da --- /dev/null +++ b/packages/ui/styles/tokens/v2/01_base/global.json @@ -0,0 +1,1036 @@ +{ + "spacing": { + "scale": { + "value": 2, + "type": "spacing" + }, + "xs": { + "value": 4, + "type": "spacing" + }, + "sm": { + "value": 8, + "type": "spacing" + }, + "md": { + "value": 16, + "type": "spacing" + }, + "lg": { + "value": 32, + "type": "spacing" + }, + "xl": { + "value": 64, + "type": "spacing" + } + }, + "sizing": { + "scale": { + "value": 1.5, + "type": "sizing" + }, + "xs": { + "value": 4, + "type": "sizing" + }, + "sm": { + "value": 6, + "type": "sizing" + }, + "md": { + "value": 9, + "type": "sizing" + }, + "lg": { + "value": 13.5, + "type": "sizing" + }, + "xl": { + "value": 20.25, + "type": "sizing" + } + }, + "borderRadius": { + "sm": { + "value": 4, + "type": "borderRadius" + }, + "lg": { + "value": 8, + "type": "borderRadius" + }, + "xl": { + "value": 16, + "type": "borderRadius" + }, + "xs": { + "value": 2, + "type": "borderRadius" + }, + "tableHeader": { + "value": 4, + "type": "borderRadius" + } + }, + "borderWidth": { + "none": { + "value": 0, + "type": "borderWidth" + }, + "xs": { + "value": 1, + "type": "borderWidth" + }, + "sm": { + "value": 2, + "type": "borderWidth" + }, + "md": { + "value": 4, + "type": "borderWidth" + }, + "lg": { + "value": 8, + "type": "borderWidth" + } + }, + "colors": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "Gray": { + "Dark": { + "1": { + "value": "#161616", + "type": "color", + "description": "161616" + }, + "2": { + "value": "#1c1c1c", + "type": "color", + "description": "1C1C1C" + }, + "3": { + "value": "#232323", + "type": "color", + "description": "232323" + }, + "4": { + "value": "#282828", + "type": "color", + "description": "282828" + }, + "5": { + "value": "#2e2e2e", + "type": "color", + "description": "2E2E2E" + }, + "6": { + "value": "#343434", + "type": "color", + "description": "343434" + }, + "7": { + "value": "#3e3e3e", + "type": "color", + "description": "3E3E3E" + }, + "8": { + "value": "#505050", + "type": "color", + "description": "505050" + }, + "9": { + "value": "#707070", + "type": "color", + "description": "707070" + }, + "10": { + "value": "#7e7e7e", + "type": "color", + "description": "7E7E7E" + }, + "11": { + "value": "#a0a0a0", + "type": "color", + "description": "A0A0A0" + }, + "12": { + "value": "#ededed", + "type": "color", + "description": "EDEDED" + }, + "Alpha": { + "1": { + "value": "#00000000", + "type": "color", + "description": "000000" + }, + "2": { + "value": "#ffffff08", + "type": "color", + "description": "FFFFFF" + }, + "3": { + "value": "#ffffff0f", + "type": "color", + "description": "FFFFFF" + }, + "4": { + "value": "#ffffff14", + "type": "color", + "description": "FFFFFF" + }, + "5": { + "value": "#ffffff1a", + "type": "color", + "description": "FFFFFF" + }, + "6": { + "value": "#ffffff21", + "type": "color", + "description": "FFFFFF" + }, + "7": { + "value": "#ffffff2b", + "type": "color", + "description": "FFFFFF" + }, + "8": { + "value": "#ffffff40", + "type": "color", + "description": "FFFFFF" + }, + "9": { + "value": "#ffffff63", + "type": "color", + "description": "FFFFFF" + }, + "10": { + "value": "#ffffff73", + "type": "color", + "description": "FFFFFF" + }, + "11": { + "value": "#ffffff96", + "type": "color", + "description": "FFFFFF" + }, + "12": { + "value": "#ffffffeb", + "type": "color", + "description": "FFFFFF" + } + } + }, + "Light": { + "1": { + "value": "#fcfcfc", + "type": "color", + "description": "FCFCFC" + }, + "2": { + "value": "#f8f8f8", + "type": "color", + "description": "F8F8F8" + }, + "3": { + "value": "#f3f3f3", + "type": "color", + "description": "F3F3F3" + }, + "4": { + "value": "#ededed", + "type": "color", + "description": "EDEDED" + }, + "5": { + "value": "#e8e8e8", + "type": "color", + "description": "E8E8E8" + }, + "6": { + "value": "#e2e2e2", + "type": "color", + "description": "E2E2E2" + }, + "7": { + "value": "#dbdbdb", + "type": "color", + "description": "DBDBDB" + }, + "8": { + "value": "#c7c7c7", + "type": "color", + "description": "C7C7C7" + }, + "9": { + "value": "#8f8f8f", + "type": "color", + "description": "8F8F8F" + }, + "10": { + "value": "#858585", + "type": "color", + "description": "858585" + }, + "11": { + "value": "#6f6f6f", + "type": "color", + "description": "6F6F6F" + }, + "12": { + "value": "#171717", + "type": "color", + "description": "171717" + }, + "Alpha": { + "1": { + "value": "#00000003", + "type": "color", + "description": "000000" + }, + "2": { + "value": "#00000008", + "type": "color", + "description": "000000" + }, + "3": { + "value": "#0000000d", + "type": "color", + "description": "000000" + }, + "4": { + "value": "#00000012", + "type": "color", + "description": "000000" + }, + "5": { + "value": "#00000017", + "type": "color", + "description": "000000" + }, + "6": { + "value": "#0000001c", + "type": "color", + "description": "000000" + }, + "7": { + "value": "#00000024", + "type": "color", + "description": "000000" + }, + "8": { + "value": "#00000038", + "type": "color", + "description": "000000" + }, + "9": { + "value": "#00000070", + "type": "color", + "description": "000000" + }, + "10": { + "value": "#0000007a", + "type": "color", + "description": "000000" + }, + "11": { + "value": "#0000008f", + "type": "color", + "description": "000000" + }, + "12": { + "value": "#000000e8", + "type": "color", + "description": "000000" + } + } + } + }, + "Slate": { + "Dark": { + "1": { + "value": "#151718", + "type": "color", + "description": "151718" + }, + "2": { + "value": "#1a1d1e", + "type": "color", + "description": "1A1D1E" + }, + "3": { + "value": "#202425", + "type": "color", + "description": "202425" + }, + "4": { + "value": "#26292b", + "type": "color", + "description": "26292B" + }, + "5": { + "value": "#2b2f31", + "type": "color", + "description": "2B2F31" + }, + "6": { + "value": "#313538", + "type": "color", + "description": "313538" + }, + "7": { + "value": "#3a3f42", + "type": "color", + "description": "3A3F42" + }, + "8": { + "value": "#4c5155", + "type": "color", + "description": "4C5155" + }, + "9": { + "value": "#697177", + "type": "color", + "description": "697177" + }, + "10": { + "value": "#787f85", + "type": "color", + "description": "787F85" + }, + "11": { + "value": "#9ba1a6", + "type": "color", + "description": "9BA1A6" + }, + "12": { + "value": "#ecedee", + "type": "color", + "description": "ECEDEE" + }, + "Alpha": { + "1": { + "value": "#00000000", + "type": "color", + "description": "000000" + }, + "2": { + "value": "#d5feff08", + "type": "color", + "description": "D5FEFF" + }, + "3": { + "value": "#d6fbfc0f", + "type": "color", + "description": "D6FBFC" + }, + "4": { + "value": "#e2f0fd14", + "type": "color", + "description": "E2F0FD" + }, + "5": { + "value": "#dff3fd1c", + "type": "color", + "description": "DFF3FD" + }, + "6": { + "value": "#dfeffe24", + "type": "color", + "description": "DFEFFE" + }, + "7": { + "value": "#e0f3ff2e", + "type": "color", + "description": "E0F3FF" + }, + "8": { + "value": "#e5f2fe42", + "type": "color", + "description": "E5F2FE" + }, + "9": { + "value": "#e1f1ff69", + "type": "color", + "description": "E1F1FF" + }, + "10": { + "value": "#e7f3ff78", + "type": "color", + "description": "E7F3FF" + }, + "11": { + "value": "#eff7ff9e", + "type": "color", + "description": "EFF7FF" + }, + "12": { + "value": "#fdfeffed", + "type": "color", + "description": "FDFEFF" + } + } + }, + "Light": { + "1": { + "value": "#fbfcfd", + "type": "color", + "description": "FBFCFD" + }, + "2": { + "value": "#f8f9fa", + "type": "color", + "description": "F8F9FA" + }, + "3": { + "value": "#f1f3f5", + "type": "color", + "description": "F1F3F5" + }, + "4": { + "value": "#eceef0", + "type": "color", + "description": "ECEEF0" + }, + "5": { + "value": "#e6e8eb", + "type": "color", + "description": "E6E8EB" + }, + "6": { + "value": "#dfe3e6", + "type": "color", + "description": "DFE3E6" + }, + "7": { + "value": "#d7dbdf", + "type": "color", + "description": "D7DBDF" + }, + "8": { + "value": "#c1c8cd", + "type": "color", + "description": "C1C8CD" + }, + "9": { + "value": "#889096", + "type": "color", + "description": "889096" + }, + "10": { + "value": "#7e868c", + "type": "color", + "description": "7E868C" + }, + "11": { + "value": "#687076", + "type": "color", + "description": "687076" + }, + "12": { + "value": "#11181c", + "type": "color", + "description": "11181C" + }, + "Alpha": { + "1": { + "value": "#05448205", + "type": "color", + "description": "054482" + }, + "2": { + "value": "#05294d08", + "type": "color", + "description": "05294D" + }, + "3": { + "value": "#0025490d", + "type": "color", + "description": "002549" + }, + "4": { + "value": "#021c3714", + "type": "color", + "description": "021C37" + }, + "5": { + "value": "#0217351a", + "type": "color", + "description": "021735" + }, + "6": { + "value": "#01213921", + "type": "color", + "description": "012139" + }, + "7": { + "value": "#001a3329", + "type": "color", + "description": "001A33" + }, + "8": { + "value": "#011e323d", + "type": "color", + "description": "011E32" + }, + "9": { + "value": "#00111e78", + "type": "color", + "description": "00111E" + }, + "10": { + "value": "#00101b82", + "type": "color", + "description": "00101B" + }, + "11": { + "value": "#000e1896", + "type": "color", + "description": "000E18" + }, + "12": { + "value": "#00080ced", + "type": "color", + "description": "00080C" + } + } + } + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Inter", + "type": "fontFamilies" + }, + "body": { + "value": "Circular Std", + "type": "fontFamilies" + }, + "roboto": { + "value": "Roboto", + "type": "fontFamilies" + }, + "body2": { + "value": "Circular Std", + "type": "fontFamilies" + }, + "mono": { + "value": "Office Code Pro", + "type": "fontFamilies" + } + }, + "lineHeights": { + "0": { + "value": "110%", + "type": "lineHeights" + }, + "heading": { + "value": "110%", + "type": "lineHeights" + }, + "base": { + "value": 24, + "type": "lineHeights" + }, + "xs": { + "value": 16, + "type": "lineHeights" + }, + "sm": { + "value": 20, + "type": "lineHeights" + }, + "lg": { + "value": 28, + "type": "lineHeights" + }, + "xl": { + "value": 28, + "type": "lineHeights" + }, + "2xl": { + "value": 32, + "type": "lineHeights" + }, + "3xl": { + "value": 36, + "type": "lineHeights" + }, + "4xl": { + "value": 40, + "type": "lineHeights" + }, + "5xl": { + "value": 48, + "type": "lineHeights" + }, + "6xl": { + "value": 60, + "type": "lineHeights" + }, + "7xl": { + "value": 72, + "type": "lineHeights" + }, + "8xl": { + "value": 96, + "type": "lineHeights" + }, + "9xl": { + "value": 128, + "type": "lineHeights" + } + }, + "letterSpacing": { + "0": { + "value": "0%", + "type": "letterSpacing" + }, + "1": { + "value": "-2%", + "type": "letterSpacing" + }, + "default": { + "value": 0, + "type": "letterSpacing" + }, + "increased": { + "value": "10%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + }, + "+8": { + "value": "8%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "0": { + "value": 26, + "type": "paragraphSpacing" + }, + "1": { + "value": 32, + "type": "paragraphSpacing" + }, + "h1": { + "value": 32, + "type": "paragraphSpacing" + }, + "h2": { + "value": 26, + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + }, + "roboto-0": { + "value": "Regular", + "type": "fontWeights" + }, + "inter-1": { + "value": "Medium", + "type": "fontWeights" + }, + "inter-2": { + "value": "Book", + "type": "fontWeights" + }, + "heading-mono": { + "value": "Medium", + "type": "fontWeights" + } + }, + "fontSizes": { + "5xl": { + "value": 48, + "type": "fontSizes" + }, + "4xl": { + "value": 36, + "type": "fontSizes" + }, + "3xl": { + "value": 30, + "type": "fontSizes" + }, + "2xl": { + "value": 24, + "type": "fontSizes" + }, + "xl": { + "value": 20, + "type": "fontSizes" + }, + "lg": { + "value": 18, + "type": "fontSizes" + }, + "base": { + "value": 16, + "type": "fontSizes" + }, + "sm": { + "value": 14, + "type": "fontSizes" + }, + "xs": { + "value": 12, + "type": "fontSizes" + }, + "6xl": { + "value": 60, + "type": "fontSizes" + }, + "7xl": { + "value": 72, + "type": "fontSizes" + }, + "8xl": { + "value": 96, + "type": "fontSizes" + }, + "9xl": { + "value": 128, + "type": "fontSizes" + } + }, + "inner shadow label-copy": { + "value": { + "color": "#858585", + "type": "innerShadow", + "x": 0, + "y": 1, + "blur": 1, + "spread": 0 + }, + "type": "boxShadow" + }, + "inner-shadow-text-new": { + "value": { + "color": "#00000026", + "type": "innerShadow", + "x": 0, + "y": 0.5, + "blur": 0.5, + "spread": 0 + }, + "type": "boxShadow" + }, + "fontSize": { + "0": { + "value": 14, + "type": "fontSizes" + }, + "1": { + "value": 39.063, + "type": "fontSizes" + }, + "2": { + "value": 48.829, + "type": "fontSizes" + } + }, + "textCase": { + "none": { + "value": "none", + "type": "textCase" + }, + "uppercase": { + "value": "uppercase", + "type": "textCase" + } + }, + "textDecoration": { + "none": { + "value": "none", + "type": "textDecoration" + } + }, + "variables": { + "colors": { + "brand": { + "primary": { + "value": "#3ecf8e", + "type": "color" + }, + "accent": { + "value": "#34b97d", + "type": "color" + } + } + } + }, + "icon": { + "xs": { + "value": 12, + "type": "sizing" + }, + "sm": { + "value": 16, + "type": "sizing" + }, + "md": { + "value": 18, + "type": "sizing" + }, + "bg": { + "value": 0.15, + "type": "opacity", + "description": "Transuclent bg of icons" + } + }, + "iconWidth": { + "default": { + "value": 1, + "type": "borderWidth" + } + }, + "form": { + "input-disabled": { + "value": "33%", + "type": "opacity" + } + }, + "Modal Drop Shadow": { + "value": { + "x": 1, + "y": 4, + "blur": 4, + "spread": 4, + "color": "#00000026", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "panel": { + "value": 2, + "type": "borderRadius", + "horizontal": { + "value": "{spacing.lg}", + "type": "spacing" + }, + "vertical": { + "value": "{spacing.lg}", + "type": "spacing" + } + }, + "datatable": { + "headericon": { + "value": 16, + "type": "sizing" + }, + "rowheight": { + "value": 28, + "type": "sizing", + "description": "Height of datatable rows" + } + }, + "options": { + "icon": { + "value": 18, + "type": "sizing", + "description": "Size of product/dropdown icons icons" + } + }, + "input": { + "sm": { + "height": { + "value": 28, + "type": "sizing" + } + } + }, + "panel2": { + "value": 4, + "type": "borderRadius" + }, + "base": { + "value": 16, + "type": "other" + }, + "xxl": { + "value": 128, + "type": "spacing" + }, + "actionBar": { + "vertical": { + "value": 21, + "type": "spacing" + }, + "horizontal": { + "value": 32, + "type": "spacing" + } + }, + "table": { + "header": { + "horizontal": { + "value": 32, + "type": "spacing" + } + } + }, + "tabs": { + "horizontal": { + "value": 16, + "type": "spacing" + } + }, + "content": { + "vertical": { + "value": 32, + "type": "spacing" + }, + "horizontal": { + "value": 32, + "type": "spacing" + } + }, + "controller": { + "vertical": { + "value": 16, + "type": "spacing" + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/v2/02_themes/dark.json b/packages/ui/styles/tokens/v2/02_themes/dark.json new file mode 100644 index 00000000000..01cba1530f0 --- /dev/null +++ b/packages/ui/styles/tokens/v2/02_themes/dark.json @@ -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" + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/v2/02_themes/light.json b/packages/ui/styles/tokens/v2/02_themes/light.json new file mode 100644 index 00000000000..a6bb13f6eaa --- /dev/null +++ b/packages/ui/styles/tokens/v2/02_themes/light.json @@ -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" + } + } +} \ No newline at end of file diff --git a/packages/ui/styles/tokens/v2/03_semantic/typography.json b/packages/ui/styles/tokens/v2/03_semantic/typography.json new file mode 100644 index 00000000000..e487a3ec610 --- /dev/null +++ b/packages/ui/styles/tokens/v2/03_semantic/typography.json @@ -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" + } + } + } + } +} \ No newline at end of file