From 95102589e5af0979657e845b02807ba94a7807b9 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Fri, 9 Jul 2021 16:02:14 +0100 Subject: [PATCH 1/9] 8709 task: design token prototyping (WIP) * initial work with using design tokens and style dictionary to output css variables for styling and js modules for documentation --- .storybook/styles/_storybook-swatches.scss | 34 ++ .storybook/styles/storybook-app.scss | 2 + config.json | 41 ++ package-lock.json | 422 +++++++++++++++++++++ package.json | 2 + src/build/css/colours.css | 92 +++++ src/build/js/colours.js | 92 +++++ src/components/Icon/IconGroups.stories.tsx | 3 +- src/stories/Colours.stories.mdx | 13 + src/stories/Colours.stories.tsx | 44 +++ src/styles/10-settings/__manifest.scss | 3 +- src/styles/10-settings/_spacing.scss | 2 +- src/tokens/colour/base.json | 105 +++++ src/tokens/spacing/base.json | 39 ++ src/utils/change-case.ts | 33 ++ 15 files changed, 923 insertions(+), 4 deletions(-) create mode 100644 .storybook/styles/_storybook-swatches.scss create mode 100644 config.json create mode 100644 src/build/css/colours.css create mode 100644 src/build/js/colours.js create mode 100644 src/stories/Colours.stories.mdx create mode 100644 src/tokens/colour/base.json create mode 100644 src/tokens/spacing/base.json create mode 100644 src/utils/change-case.ts diff --git a/.storybook/styles/_storybook-swatches.scss b/.storybook/styles/_storybook-swatches.scss new file mode 100644 index 0000000..97693fc --- /dev/null +++ b/.storybook/styles/_storybook-swatches.scss @@ -0,0 +1,34 @@ +.sb-table { + border-collapse: collapse; + width: 100%; + + td, + th { + padding: var(--space-md); + text-align: left; + } + + tbody tr:nth-child(odd) { + background-color: var(--colour-grey-05); + } +} + +.sb-swatch { + align-items: center; + display: flex; + margin: 0; +} + +.sb-swatch__colour { + border: 1px solid var(--colour-grey-20); + flex-shrink: 0; + height: calc(6 * var(--space-unit)); + width: calc(6 * var(--space-unit)); +} + +.sb-swatch__name { + color: var(--colour-grey-60); + display: block; + font-size: var(--font-size-body-xs); + margin-left: var(--space-lg) +} diff --git a/.storybook/styles/storybook-app.scss b/.storybook/styles/storybook-app.scss index 961894e..f5e19b0 100644 --- a/.storybook/styles/storybook-app.scss +++ b/.storybook/styles/storybook-app.scss @@ -1,5 +1,7 @@ @import 'styles/core'; @import 'styles/theme'; @import 'styles/common'; + @import './storybook-global'; @import './storybook-icons'; +@import './storybook-swatches'; diff --git a/config.json b/config.json new file mode 100644 index 0000000..e11d165 --- /dev/null +++ b/config.json @@ -0,0 +1,41 @@ +{ + "source": ["src/tokens/**/*.json"], + "platforms": { + "js": { + "transformGroup": "js", + "buildPath": "src/build/js/", + "files": [ + { + "destination": "colours.js", + "format": "javascript/module-flat", + "options": { + "outputReferences": true + }, + "filter": { + "attributes": { + "category": "colour" + } + } + } + ] + }, + "css": { + "transformGroup": "css", + "buildPath": "src/build/css/", + "files": [ + { + "destination": "colours.css", + "format": "css/variables", + "options": { + "outputReferences": true + }, + "filter": { + "attributes": { + "category": "colour" + } + } + } + ] + } + } +} diff --git a/package-lock.json b/package-lock.json index a126acb..8d0f252 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,6 +79,7 @@ "sass": "^1.29.0", "sass-loader": "^8.0.0", "sass-mq": "^5.0.1", + "style-dictionary": "^3.0.1", "style-loader": "^1.1.2", "stylelint": "^12.0.1", "stylelint-config-sass-guidelines": "^6.2.0", @@ -9317,6 +9318,17 @@ "url": "https://opencollective.com/browserslist" } }, + "node_modules/capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", @@ -9362,6 +9374,26 @@ "node": ">=4" } }, + "node_modules/change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "dependencies": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -10004,6 +10036,26 @@ "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true }, + "node_modules/constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, + "node_modules/constant-case/node_modules/upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -14916,6 +14968,16 @@ "he": "bin/he" } }, + "node_modules/header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "dependencies": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -22869,6 +22931,16 @@ "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==", "dev": true }, + "node_modules/path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-dirname": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", @@ -28206,6 +28278,17 @@ "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true }, + "node_modules/sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/serialize-javascript": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", @@ -28434,6 +28517,16 @@ "node": ">=0.10.0" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -29093,6 +29186,124 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-dictionary": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.0.1.tgz", + "integrity": "sha512-t6FzcaIY9gCTDufFMP3sUPMqHAA6vW0sHY7p39ckox8y5X8y/0xKbH3Y88QBJN4hKYWuejSLpDf48EVeA0LTiQ==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^5.1.0", + "fs-extra": "^8.1.0", + "glob": "^7.1.6", + "json5": "^2.1.3", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "bin": { + "style-dictionary": "bin/style-dictionary" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/style-dictionary/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/style-dictionary/node_modules/chalk": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", + "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/style-dictionary/node_modules/commander": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/style-dictionary/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/style-dictionary/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/style-dictionary/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.6" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/style-dictionary/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/style-dictionary/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/style-loader": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz", @@ -30343,6 +30554,15 @@ "dev": true, "optional": true }, + "node_modules/tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -31155,6 +31375,15 @@ "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", "dev": true }, + "node_modules/upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -39718,6 +39947,17 @@ "integrity": "sha512-o0PRQSrSCGJKCPZcgMzl5fUaj5xHe8qA2m4QRvnyY4e1lITqoNkr7q/Oh1NcpGSy0Th97UZ35yoKcINPoq7YOQ==", "dev": true }, + "capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", @@ -39750,6 +39990,26 @@ "supports-color": "^5.3.0" } }, + "change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "requires": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -40257,6 +40517,28 @@ "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true }, + "constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + }, + "dependencies": { + "upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + } + } + }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -44154,6 +44436,16 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "requires": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -50269,6 +50561,16 @@ "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==", "dev": true }, + "path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "path-dirname": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", @@ -54386,6 +54688,17 @@ } } }, + "sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "serialize-javascript": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", @@ -54581,6 +54894,16 @@ "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, + "snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -55126,6 +55449,90 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "style-dictionary": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.0.1.tgz", + "integrity": "sha512-t6FzcaIY9gCTDufFMP3sUPMqHAA6vW0sHY7p39ckox8y5X8y/0xKbH3Y88QBJN4hKYWuejSLpDf48EVeA0LTiQ==", + "dev": true, + "requires": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^5.1.0", + "fs-extra": "^8.1.0", + "glob": "^7.1.6", + "json5": "^2.1.3", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", + "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "commander": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", + "dev": true + }, + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true + } + } + }, "style-loader": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz", @@ -56099,6 +56506,12 @@ "dev": true, "optional": true }, + "tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "dev": true + }, "tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -56733,6 +57146,15 @@ "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", "dev": true }, + "upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, "uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 3561549..68d18d3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ ], "scripts": { "build:clean": "rm -rf dist ssr", + "build:tokens": "style-dictionary build", "build:types": "tsc --emitDeclarationOnly", "build": "npm run build:clean && rollup -c ./config/rollup.config.js && node ./ssr/html.js && npm run build:types", "dev": "npm run build:types && rollup -c ./config/rollup.config.js -w", @@ -118,6 +119,7 @@ "sass": "^1.29.0", "sass-loader": "^8.0.0", "sass-mq": "^5.0.1", + "style-dictionary": "^3.0.1", "style-loader": "^1.1.2", "stylelint": "^12.0.1", "stylelint-config-sass-guidelines": "^6.2.0", diff --git a/src/build/css/colours.css b/src/build/css/colours.css new file mode 100644 index 0000000..1f71e04 --- /dev/null +++ b/src/build/css/colours.css @@ -0,0 +1,92 @@ +/** + * Do not edit directly + * Generated on Thu, 08 Jul 2021 17:30:59 GMT + */ + +:root { + --colour-yellow-05: #fffef0; + --colour-yellow-90: #3d3800; + --colour-yellow-80: #574f00; + --colour-yellow-70: #706601; + --colour-yellow-60: #817818; + --colour-yellow-50: #bfa70d; + --colour-yellow-40: #ffea00; + --colour-yellow-30: #fff266; + --colour-yellow-20: #fff9a6; + --colour-yellow-10: #fffde2; + --colour-red-05: #fff0f2; + --colour-red-90: #40120d; + --colour-red-80: #6c131d; + --colour-red-70: #b3001e; + --colour-red-60: #e10f2d; + --colour-red-50: #e72343; + --colour-red-40: #f04763; + --colour-red-30: #f2637b; + --colour-red-20: #ed858e; + --colour-red-10: #f9cdca; + --colour-orange-05: #fff7f0; + --colour-orange-90: #331e0f; + --colour-orange-80: #572b00; + --colour-orange-70: #8a471e; + --colour-orange-60: #b45c04; + --colour-orange-50: #f07f0a; + --colour-orange-40: #ffa64d; + --colour-orange-30: #ffbf80; + --colour-orange-20: #ffd9b2; + --colour-orange-10: #ffeddb; + --colour-grey-05: #f2f2f2; + --colour-grey-60-rgb: 118, 118, 118; + --colour-grey-90: #000; + --colour-grey-80: #292929; + --colour-grey-70: #5c5c5c; + --colour-grey-60: #767676; + --colour-grey-50: #878787; + --colour-grey-40: #999; + --colour-grey-30: #b3b3b3; + --colour-grey-20: #ccc; + --colour-grey-10: #e6e6e6; + --colour-green-05: #f7fcf2; + --colour-green-90: #133800; + --colour-green-80: #2a512c; + --colour-green-70: #236126; + --colour-green-60: #4c8026; + --colour-green-50: #6ba136; + --colour-green-40: #8cc059; + --colour-green-30: #b6d99c; + --colour-green-20: #e6f1d3; + --colour-green-10: #f0f9e7; + --colour-cyan-05: #f1fcfd; + --colour-cyan-90: #002c33; + --colour-cyan-80: #00424d; + --colour-cyan-70: #005361; + --colour-cyan-60: #006272; + --colour-cyan-50: #009bb2; + --colour-cyan-40: #71bdd0; + --colour-cyan-30: #9dd8e7; + --colour-cyan-20: #beebf4; + --colour-cyan-10: #dcf4f9; + --colour-blue-05: #f0f6ff; + --colour-blue-90: #002e45; + --colour-blue-80: #003170; + --colour-blue-70: #004099; + --colour-blue-60: #05c; + --colour-blue-50: #1672f3; + --colour-blue-40: #4d97ff; + --colour-blue-30: #80b5ff; + --colour-blue-20: #b3d2ff; + --colour-blue-10: #dbeaff; + --colour-amber-05: #fffbf0; + --colour-amber-90: #382a00; + --colour-amber-80: #4d3900; + --colour-amber-70: #705400; + --colour-amber-60: #946f00; + --colour-amber-50: #c29207; + --colour-amber-40: #e7ae04; + --colour-amber-30: #fec200; + --colour-amber-20: #ffe699; + --colour-amber-10: #fff4d1; + --colour-white-rgb: 255, 255, 255; + --colour-white: #fff; + --colour-black-rgb: 0, 0, 0; + --colour-black: #000; +} diff --git a/src/build/js/colours.js b/src/build/js/colours.js new file mode 100644 index 0000000..24390d5 --- /dev/null +++ b/src/build/js/colours.js @@ -0,0 +1,92 @@ +/** + * Do not edit directly + * Generated on Thu, 08 Jul 2021 17:30:59 GMT + */ + +module.exports = { + "ColourBlack": "#000", + "ColourBlackRgb": "0, 0, 0", + "ColourWhite": "#fff", + "ColourWhiteRgb": "255, 255, 255", + "ColourAmber10": "#fff4d1", + "ColourAmber20": "#ffe699", + "ColourAmber30": "#fec200", + "ColourAmber40": "#e7ae04", + "ColourAmber50": "#c29207", + "ColourAmber60": "#946f00", + "ColourAmber70": "#705400", + "ColourAmber80": "#4d3900", + "ColourAmber90": "#382a00", + "ColourAmber05": "#fffbf0", + "ColourBlue10": "#dbeaff", + "ColourBlue20": "#b3d2ff", + "ColourBlue30": "#80b5ff", + "ColourBlue40": "#4d97ff", + "ColourBlue50": "#1672f3", + "ColourBlue60": "#05c", + "ColourBlue70": "#004099", + "ColourBlue80": "#003170", + "ColourBlue90": "#002e45", + "ColourBlue05": "#f0f6ff", + "ColourCyan10": "#dcf4f9", + "ColourCyan20": "#beebf4", + "ColourCyan30": "#9dd8e7", + "ColourCyan40": "#71bdd0", + "ColourCyan50": "#009bb2", + "ColourCyan60": "#006272", + "ColourCyan70": "#005361", + "ColourCyan80": "#00424d", + "ColourCyan90": "#002c33", + "ColourCyan05": "#f1fcfd", + "ColourGreen10": "#f0f9e7", + "ColourGreen20": "#e6f1d3", + "ColourGreen30": "#b6d99c", + "ColourGreen40": "#8cc059", + "ColourGreen50": "#6ba136", + "ColourGreen60": "#4c8026", + "ColourGreen70": "#236126", + "ColourGreen80": "#2a512c", + "ColourGreen90": "#133800", + "ColourGreen05": "#f7fcf2", + "ColourGrey10": "#e6e6e6", + "ColourGrey20": "#ccc", + "ColourGrey30": "#b3b3b3", + "ColourGrey40": "#999", + "ColourGrey50": "#878787", + "ColourGrey60": "#767676", + "ColourGrey70": "#5c5c5c", + "ColourGrey80": "#292929", + "ColourGrey90": "#000", + "ColourGrey60Rgb": "118, 118, 118", + "ColourGrey05": "#f2f2f2", + "ColourOrange10": "#ffeddb", + "ColourOrange20": "#ffd9b2", + "ColourOrange30": "#ffbf80", + "ColourOrange40": "#ffa64d", + "ColourOrange50": "#f07f0a", + "ColourOrange60": "#b45c04", + "ColourOrange70": "#8a471e", + "ColourOrange80": "#572b00", + "ColourOrange90": "#331e0f", + "ColourOrange05": "#fff7f0", + "ColourRed10": "#f9cdca", + "ColourRed20": "#ed858e", + "ColourRed30": "#f2637b", + "ColourRed40": "#f04763", + "ColourRed50": "#e72343", + "ColourRed60": "#e10f2d", + "ColourRed70": "#b3001e", + "ColourRed80": "#6c131d", + "ColourRed90": "#40120d", + "ColourRed05": "#fff0f2", + "ColourYellow10": "#fffde2", + "ColourYellow20": "#fff9a6", + "ColourYellow30": "#fff266", + "ColourYellow40": "#ffea00", + "ColourYellow50": "#bfa70d", + "ColourYellow60": "#817818", + "ColourYellow70": "#706601", + "ColourYellow80": "#574f00", + "ColourYellow90": "#3d3800", + "ColourYellow05": "#fffef0" +}; \ No newline at end of file diff --git a/src/components/Icon/IconGroups.stories.tsx b/src/components/Icon/IconGroups.stories.tsx index f8f1e44..e6f7c53 100644 --- a/src/components/Icon/IconGroups.stories.tsx +++ b/src/components/Icon/IconGroups.stories.tsx @@ -2,9 +2,8 @@ import React from 'react'; /* * IconGallery and IconItem do not present the icons very well - code is not - * massively accessible and icon names overlap + * massively accessible and icon names overlap, hence not using them */ - // import { IconGallery, IconItem } from '@storybook/addon-docs/blocks'; import { Icon } from './Icon'; diff --git a/src/stories/Colours.stories.mdx b/src/stories/Colours.stories.mdx new file mode 100644 index 0000000..b4f0dd1 --- /dev/null +++ b/src/stories/Colours.stories.mdx @@ -0,0 +1,13 @@ +import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; + +import { ColoursPaletteStatus, ColourVariables } from './Colours.stories'; +import colourTokens from '../../build/js/colours'; + + + +# Colour palette + + + + + diff --git a/src/stories/Colours.stories.tsx b/src/stories/Colours.stories.tsx index cc9ec02..06d4385 100644 --- a/src/stories/Colours.stories.tsx +++ b/src/stories/Colours.stories.tsx @@ -1,6 +1,50 @@ import React from 'react'; import { ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; +import colourTokens from 'src/build/js/colours'; +import { toCssVariable } from 'utils/change-case'; + +type TokensProps = { + [key: string]: string; +}; + +export const ColourVariables = ({ tokens }: TokensProps) => { + // const tokenKeys = Object.keys(colourTokens) as Array; + const tokenKeys = Object.keys(tokens); + + return ( + + + + + + + + + + {/* {tokenKeys.map((key: keyof typeof colourTokens) => { */} + {tokenKeys.map((key) => { + const value = colourTokens[key]; + const cssValue = /rgb/i.test(key) ? `rgb(${value})` : value; + const cssVariable = toCssVariable(key); + return ( + + + + + + ) + })} + +
Token nameCSS variableSwatch and value
{key}{cssVariable} +
+
+
{value}
+
+
+ ) +} + export const ColoursPaletteStatus = () => ( { + return str.replace(/([-_\s]+[a-z])/gi, $1 => { + return $1 + .toUpperCase() + .replace(/-/g, '') + .replace(/_/g, '') + .replace(/\s/g, ''); + }); +}; + +/** + * Converts a string to camelCase format + * + * @param {string} str String to be converted + * @returns converted string + * + * @see {@link https://regex101.com/r/EMrqS7/1} + */ +export const toCssVariable = (str: string) => { + return `-${str.replace(/([_\s]+\w|(?<=[a-z])[A-Z\d]|^\w)/g, $1 => { + return `-${$1.toLowerCase()}`; + })}`; +}; + +export default { + toCamelCase +} From c524c72967988fba21f29585541c478e66a7add9 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Fri, 9 Jul 2021 16:30:15 +0100 Subject: [PATCH 2/9] 8709 task: design token prototyping (WIP) * initial work with using design tokens and style dictionary to output css variables for styling and js modules for documentation --- .gitignore | 3 +- config.json | 9 ++++ src/build/css/colours.css | 2 +- src/build/js/colours.d.ts | 90 +++++++++++++++++++++++++++++++++ src/build/js/colours.js | 2 +- src/stories/Colours.stories.mdx | 8 +-- src/stories/Colours.stories.tsx | 8 +-- tsconfig.json | 5 +- 8 files changed, 113 insertions(+), 14 deletions(-) create mode 100644 src/build/js/colours.d.ts diff --git a/.gitignore b/.gitignore index f326b25..902960d 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules/ # Build/output files .dist/ *.sass-cache* +/build dist /ssr coverage @@ -26,4 +27,4 @@ storybook-static # Misc temp/ -audit.txt +audit.txt \ No newline at end of file diff --git a/config.json b/config.json index e11d165..77cd699 100644 --- a/config.json +++ b/config.json @@ -16,6 +16,15 @@ "category": "colour" } } + }, + { + "destination": "colours.d.ts", + "format": "typescript/es6-declarations", + "filter": { + "attributes": { + "category": "colour" + } + } } ] }, diff --git a/src/build/css/colours.css b/src/build/css/colours.css index 1f71e04..4621ca0 100644 --- a/src/build/css/colours.css +++ b/src/build/css/colours.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 08 Jul 2021 17:30:59 GMT + * Generated on Fri, 09 Jul 2021 15:05:58 GMT */ :root { diff --git a/src/build/js/colours.d.ts b/src/build/js/colours.d.ts new file mode 100644 index 0000000..a828aa9 --- /dev/null +++ b/src/build/js/colours.d.ts @@ -0,0 +1,90 @@ +/** + * Do not edit directly + * Generated on Fri, 09 Jul 2021 15:05:58 GMT + */ + +export const ColourBlack : string; +export const ColourBlackRgb : string; +export const ColourWhite : string; +export const ColourWhiteRgb : string; +export const ColourAmber10 : string; +export const ColourAmber20 : string; +export const ColourAmber30 : string; +export const ColourAmber40 : string; +export const ColourAmber50 : string; +export const ColourAmber60 : string; +export const ColourAmber70 : string; +export const ColourAmber80 : string; +export const ColourAmber90 : string; +export const ColourAmber05 : string; +export const ColourBlue10 : string; +export const ColourBlue20 : string; +export const ColourBlue30 : string; +export const ColourBlue40 : string; +export const ColourBlue50 : string; +export const ColourBlue60 : string; +export const ColourBlue70 : string; +export const ColourBlue80 : string; +export const ColourBlue90 : string; +export const ColourBlue05 : string; +export const ColourCyan10 : string; +export const ColourCyan20 : string; +export const ColourCyan30 : string; +export const ColourCyan40 : string; +export const ColourCyan50 : string; +export const ColourCyan60 : string; +export const ColourCyan70 : string; +export const ColourCyan80 : string; +export const ColourCyan90 : string; +export const ColourCyan05 : string; +export const ColourGreen10 : string; +export const ColourGreen20 : string; +export const ColourGreen30 : string; +export const ColourGreen40 : string; +export const ColourGreen50 : string; +export const ColourGreen60 : string; +export const ColourGreen70 : string; +export const ColourGreen80 : string; +export const ColourGreen90 : string; +export const ColourGreen05 : string; +export const ColourGrey10 : string; +export const ColourGrey20 : string; +export const ColourGrey30 : string; +export const ColourGrey40 : string; +export const ColourGrey50 : string; +export const ColourGrey60 : string; +export const ColourGrey70 : string; +export const ColourGrey80 : string; +export const ColourGrey90 : string; +export const ColourGrey60Rgb : string; +export const ColourGrey05 : string; +export const ColourOrange10 : string; +export const ColourOrange20 : string; +export const ColourOrange30 : string; +export const ColourOrange40 : string; +export const ColourOrange50 : string; +export const ColourOrange60 : string; +export const ColourOrange70 : string; +export const ColourOrange80 : string; +export const ColourOrange90 : string; +export const ColourOrange05 : string; +export const ColourRed10 : string; +export const ColourRed20 : string; +export const ColourRed30 : string; +export const ColourRed40 : string; +export const ColourRed50 : string; +export const ColourRed60 : string; +export const ColourRed70 : string; +export const ColourRed80 : string; +export const ColourRed90 : string; +export const ColourRed05 : string; +export const ColourYellow10 : string; +export const ColourYellow20 : string; +export const ColourYellow30 : string; +export const ColourYellow40 : string; +export const ColourYellow50 : string; +export const ColourYellow60 : string; +export const ColourYellow70 : string; +export const ColourYellow80 : string; +export const ColourYellow90 : string; +export const ColourYellow05 : string; \ No newline at end of file diff --git a/src/build/js/colours.js b/src/build/js/colours.js index 24390d5..b24de66 100644 --- a/src/build/js/colours.js +++ b/src/build/js/colours.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 08 Jul 2021 17:30:59 GMT + * Generated on Fri, 09 Jul 2021 15:05:58 GMT */ module.exports = { diff --git a/src/stories/Colours.stories.mdx b/src/stories/Colours.stories.mdx index b4f0dd1..087bcb5 100644 --- a/src/stories/Colours.stories.mdx +++ b/src/stories/Colours.stories.mdx @@ -1,13 +1,9 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; -import { ColoursPaletteStatus, ColourVariables } from './Colours.stories'; -import colourTokens from '../../build/js/colours'; +import { ColourVariables } from './Colours.stories'; # Colour palette - - - - + diff --git a/src/stories/Colours.stories.tsx b/src/stories/Colours.stories.tsx index 06d4385..a2d8f89 100644 --- a/src/stories/Colours.stories.tsx +++ b/src/stories/Colours.stories.tsx @@ -1,16 +1,17 @@ import React from 'react'; import { ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; -import colourTokens from 'src/build/js/colours'; +import colourTokens from 'build/js/colours'; import { toCssVariable } from 'utils/change-case'; type TokensProps = { [key: string]: string; }; +// TODO: Ideally we would import tokens as a prop but type declarations +// are not implicit at the node level i.e. `tokenKeys.map((key) =>` export const ColourVariables = ({ tokens }: TokensProps) => { - // const tokenKeys = Object.keys(colourTokens) as Array; - const tokenKeys = Object.keys(tokens); + const tokenKeys = Object.keys(colourTokens) as Array; return ( @@ -22,7 +23,6 @@ export const ColourVariables = ({ tokens }: TokensProps) => { - {/* {tokenKeys.map((key: keyof typeof colourTokens) => { */} {tokenKeys.map((key) => { const value = colourTokens[key]; const cssValue = /rgb/i.test(key) ? `rgb(${value})` : value; diff --git a/tsconfig.json b/tsconfig.json index a6a0df9..ce6125c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,12 +8,15 @@ "/", "components/*", ], + "build/*": [ + "build/*" + ], "data/*": [ "data/*" ], "utils/*": [ "utils/*" - ], + ] }, "moduleResolution": "node", "noImplicitAny": true, From c0e2ec69201d1e04260a2f97a6122e7f080b869b Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Fri, 9 Jul 2021 17:04:26 +0100 Subject: [PATCH 3/9] chore: added newline to gitignore end --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 902960d..1096309 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,4 @@ storybook-static # Misc temp/ -audit.txt \ No newline at end of file +audit.txt From e2ab937d63a5fcec611df0558bbabf791e2c7277 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Tue, 13 Jul 2021 09:58:35 +0100 Subject: [PATCH 4/9] 8709 task(chore): updated git ignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 1096309..f326b25 100644 --- a/.gitignore +++ b/.gitignore @@ -5,7 +5,6 @@ node_modules/ # Build/output files .dist/ *.sass-cache* -/build dist /ssr coverage From 5f6db7da79d8e31408ee3b07510b9f6aa3b063af Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Tue, 13 Jul 2021 16:41:44 +0100 Subject: [PATCH 5/9] 8709 task(chore): PR feedback - removed token build files from repo --- .gitignore | 1 + src/build/css/colours.css | 92 --------------------------------------- src/build/js/colours.d.ts | 90 -------------------------------------- src/build/js/colours.js | 92 --------------------------------------- 4 files changed, 1 insertion(+), 274 deletions(-) delete mode 100644 src/build/css/colours.css delete mode 100644 src/build/js/colours.d.ts delete mode 100644 src/build/js/colours.js diff --git a/.gitignore b/.gitignore index f326b25..e49a187 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules/ # Build/output files .dist/ *.sass-cache* +/src/build dist /ssr coverage diff --git a/src/build/css/colours.css b/src/build/css/colours.css deleted file mode 100644 index 4621ca0..0000000 --- a/src/build/css/colours.css +++ /dev/null @@ -1,92 +0,0 @@ -/** - * Do not edit directly - * Generated on Fri, 09 Jul 2021 15:05:58 GMT - */ - -:root { - --colour-yellow-05: #fffef0; - --colour-yellow-90: #3d3800; - --colour-yellow-80: #574f00; - --colour-yellow-70: #706601; - --colour-yellow-60: #817818; - --colour-yellow-50: #bfa70d; - --colour-yellow-40: #ffea00; - --colour-yellow-30: #fff266; - --colour-yellow-20: #fff9a6; - --colour-yellow-10: #fffde2; - --colour-red-05: #fff0f2; - --colour-red-90: #40120d; - --colour-red-80: #6c131d; - --colour-red-70: #b3001e; - --colour-red-60: #e10f2d; - --colour-red-50: #e72343; - --colour-red-40: #f04763; - --colour-red-30: #f2637b; - --colour-red-20: #ed858e; - --colour-red-10: #f9cdca; - --colour-orange-05: #fff7f0; - --colour-orange-90: #331e0f; - --colour-orange-80: #572b00; - --colour-orange-70: #8a471e; - --colour-orange-60: #b45c04; - --colour-orange-50: #f07f0a; - --colour-orange-40: #ffa64d; - --colour-orange-30: #ffbf80; - --colour-orange-20: #ffd9b2; - --colour-orange-10: #ffeddb; - --colour-grey-05: #f2f2f2; - --colour-grey-60-rgb: 118, 118, 118; - --colour-grey-90: #000; - --colour-grey-80: #292929; - --colour-grey-70: #5c5c5c; - --colour-grey-60: #767676; - --colour-grey-50: #878787; - --colour-grey-40: #999; - --colour-grey-30: #b3b3b3; - --colour-grey-20: #ccc; - --colour-grey-10: #e6e6e6; - --colour-green-05: #f7fcf2; - --colour-green-90: #133800; - --colour-green-80: #2a512c; - --colour-green-70: #236126; - --colour-green-60: #4c8026; - --colour-green-50: #6ba136; - --colour-green-40: #8cc059; - --colour-green-30: #b6d99c; - --colour-green-20: #e6f1d3; - --colour-green-10: #f0f9e7; - --colour-cyan-05: #f1fcfd; - --colour-cyan-90: #002c33; - --colour-cyan-80: #00424d; - --colour-cyan-70: #005361; - --colour-cyan-60: #006272; - --colour-cyan-50: #009bb2; - --colour-cyan-40: #71bdd0; - --colour-cyan-30: #9dd8e7; - --colour-cyan-20: #beebf4; - --colour-cyan-10: #dcf4f9; - --colour-blue-05: #f0f6ff; - --colour-blue-90: #002e45; - --colour-blue-80: #003170; - --colour-blue-70: #004099; - --colour-blue-60: #05c; - --colour-blue-50: #1672f3; - --colour-blue-40: #4d97ff; - --colour-blue-30: #80b5ff; - --colour-blue-20: #b3d2ff; - --colour-blue-10: #dbeaff; - --colour-amber-05: #fffbf0; - --colour-amber-90: #382a00; - --colour-amber-80: #4d3900; - --colour-amber-70: #705400; - --colour-amber-60: #946f00; - --colour-amber-50: #c29207; - --colour-amber-40: #e7ae04; - --colour-amber-30: #fec200; - --colour-amber-20: #ffe699; - --colour-amber-10: #fff4d1; - --colour-white-rgb: 255, 255, 255; - --colour-white: #fff; - --colour-black-rgb: 0, 0, 0; - --colour-black: #000; -} diff --git a/src/build/js/colours.d.ts b/src/build/js/colours.d.ts deleted file mode 100644 index a828aa9..0000000 --- a/src/build/js/colours.d.ts +++ /dev/null @@ -1,90 +0,0 @@ -/** - * Do not edit directly - * Generated on Fri, 09 Jul 2021 15:05:58 GMT - */ - -export const ColourBlack : string; -export const ColourBlackRgb : string; -export const ColourWhite : string; -export const ColourWhiteRgb : string; -export const ColourAmber10 : string; -export const ColourAmber20 : string; -export const ColourAmber30 : string; -export const ColourAmber40 : string; -export const ColourAmber50 : string; -export const ColourAmber60 : string; -export const ColourAmber70 : string; -export const ColourAmber80 : string; -export const ColourAmber90 : string; -export const ColourAmber05 : string; -export const ColourBlue10 : string; -export const ColourBlue20 : string; -export const ColourBlue30 : string; -export const ColourBlue40 : string; -export const ColourBlue50 : string; -export const ColourBlue60 : string; -export const ColourBlue70 : string; -export const ColourBlue80 : string; -export const ColourBlue90 : string; -export const ColourBlue05 : string; -export const ColourCyan10 : string; -export const ColourCyan20 : string; -export const ColourCyan30 : string; -export const ColourCyan40 : string; -export const ColourCyan50 : string; -export const ColourCyan60 : string; -export const ColourCyan70 : string; -export const ColourCyan80 : string; -export const ColourCyan90 : string; -export const ColourCyan05 : string; -export const ColourGreen10 : string; -export const ColourGreen20 : string; -export const ColourGreen30 : string; -export const ColourGreen40 : string; -export const ColourGreen50 : string; -export const ColourGreen60 : string; -export const ColourGreen70 : string; -export const ColourGreen80 : string; -export const ColourGreen90 : string; -export const ColourGreen05 : string; -export const ColourGrey10 : string; -export const ColourGrey20 : string; -export const ColourGrey30 : string; -export const ColourGrey40 : string; -export const ColourGrey50 : string; -export const ColourGrey60 : string; -export const ColourGrey70 : string; -export const ColourGrey80 : string; -export const ColourGrey90 : string; -export const ColourGrey60Rgb : string; -export const ColourGrey05 : string; -export const ColourOrange10 : string; -export const ColourOrange20 : string; -export const ColourOrange30 : string; -export const ColourOrange40 : string; -export const ColourOrange50 : string; -export const ColourOrange60 : string; -export const ColourOrange70 : string; -export const ColourOrange80 : string; -export const ColourOrange90 : string; -export const ColourOrange05 : string; -export const ColourRed10 : string; -export const ColourRed20 : string; -export const ColourRed30 : string; -export const ColourRed40 : string; -export const ColourRed50 : string; -export const ColourRed60 : string; -export const ColourRed70 : string; -export const ColourRed80 : string; -export const ColourRed90 : string; -export const ColourRed05 : string; -export const ColourYellow10 : string; -export const ColourYellow20 : string; -export const ColourYellow30 : string; -export const ColourYellow40 : string; -export const ColourYellow50 : string; -export const ColourYellow60 : string; -export const ColourYellow70 : string; -export const ColourYellow80 : string; -export const ColourYellow90 : string; -export const ColourYellow05 : string; \ No newline at end of file diff --git a/src/build/js/colours.js b/src/build/js/colours.js deleted file mode 100644 index b24de66..0000000 --- a/src/build/js/colours.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * Do not edit directly - * Generated on Fri, 09 Jul 2021 15:05:58 GMT - */ - -module.exports = { - "ColourBlack": "#000", - "ColourBlackRgb": "0, 0, 0", - "ColourWhite": "#fff", - "ColourWhiteRgb": "255, 255, 255", - "ColourAmber10": "#fff4d1", - "ColourAmber20": "#ffe699", - "ColourAmber30": "#fec200", - "ColourAmber40": "#e7ae04", - "ColourAmber50": "#c29207", - "ColourAmber60": "#946f00", - "ColourAmber70": "#705400", - "ColourAmber80": "#4d3900", - "ColourAmber90": "#382a00", - "ColourAmber05": "#fffbf0", - "ColourBlue10": "#dbeaff", - "ColourBlue20": "#b3d2ff", - "ColourBlue30": "#80b5ff", - "ColourBlue40": "#4d97ff", - "ColourBlue50": "#1672f3", - "ColourBlue60": "#05c", - "ColourBlue70": "#004099", - "ColourBlue80": "#003170", - "ColourBlue90": "#002e45", - "ColourBlue05": "#f0f6ff", - "ColourCyan10": "#dcf4f9", - "ColourCyan20": "#beebf4", - "ColourCyan30": "#9dd8e7", - "ColourCyan40": "#71bdd0", - "ColourCyan50": "#009bb2", - "ColourCyan60": "#006272", - "ColourCyan70": "#005361", - "ColourCyan80": "#00424d", - "ColourCyan90": "#002c33", - "ColourCyan05": "#f1fcfd", - "ColourGreen10": "#f0f9e7", - "ColourGreen20": "#e6f1d3", - "ColourGreen30": "#b6d99c", - "ColourGreen40": "#8cc059", - "ColourGreen50": "#6ba136", - "ColourGreen60": "#4c8026", - "ColourGreen70": "#236126", - "ColourGreen80": "#2a512c", - "ColourGreen90": "#133800", - "ColourGreen05": "#f7fcf2", - "ColourGrey10": "#e6e6e6", - "ColourGrey20": "#ccc", - "ColourGrey30": "#b3b3b3", - "ColourGrey40": "#999", - "ColourGrey50": "#878787", - "ColourGrey60": "#767676", - "ColourGrey70": "#5c5c5c", - "ColourGrey80": "#292929", - "ColourGrey90": "#000", - "ColourGrey60Rgb": "118, 118, 118", - "ColourGrey05": "#f2f2f2", - "ColourOrange10": "#ffeddb", - "ColourOrange20": "#ffd9b2", - "ColourOrange30": "#ffbf80", - "ColourOrange40": "#ffa64d", - "ColourOrange50": "#f07f0a", - "ColourOrange60": "#b45c04", - "ColourOrange70": "#8a471e", - "ColourOrange80": "#572b00", - "ColourOrange90": "#331e0f", - "ColourOrange05": "#fff7f0", - "ColourRed10": "#f9cdca", - "ColourRed20": "#ed858e", - "ColourRed30": "#f2637b", - "ColourRed40": "#f04763", - "ColourRed50": "#e72343", - "ColourRed60": "#e10f2d", - "ColourRed70": "#b3001e", - "ColourRed80": "#6c131d", - "ColourRed90": "#40120d", - "ColourRed05": "#fff0f2", - "ColourYellow10": "#fffde2", - "ColourYellow20": "#fff9a6", - "ColourYellow30": "#fff266", - "ColourYellow40": "#ffea00", - "ColourYellow50": "#bfa70d", - "ColourYellow60": "#817818", - "ColourYellow70": "#706601", - "ColourYellow80": "#574f00", - "ColourYellow90": "#3d3800", - "ColourYellow05": "#fffef0" -}; \ No newline at end of file From c374eb6aa42bc67ae0513b07e957e848517dfbda Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Tue, 13 Jul 2021 16:44:09 +0100 Subject: [PATCH 6/9] 8709 task(chore): Replaced camelcase util with lodash --- package-lock.json | 14 ++++++++++++++ package.json | 2 ++ src/utils/change-case.ts | 29 ++++++----------------------- 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d0f252..a4d634b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@types/jest": "^26.0.23", + "@types/lodash": "^4.14.171", "@types/node": "^12.12.22", "@types/react": "^16.9.17", "@types/react-dom": "^16.9.4", @@ -63,6 +64,7 @@ "husky": "^3.1.0", "jest": "^27.0.3", "lint-staged": "^9.5.0", + "lodash": "^4.17.21", "markdown-loader-jest": "^0.1.1", "postcss": "^8.0.9", "postcss-calc": "^7.0.4", @@ -6158,6 +6160,12 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.171", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.171.tgz", + "integrity": "sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==", + "dev": true + }, "node_modules/@types/markdown-to-jsx": { "version": "6.11.3", "resolved": "https://registry.npmjs.org/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz", @@ -37401,6 +37409,12 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "@types/lodash": { + "version": "4.14.171", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.171.tgz", + "integrity": "sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==", + "dev": true + }, "@types/markdown-to-jsx": { "version": "6.11.3", "resolved": "https://registry.npmjs.org/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz", diff --git a/package.json b/package.json index 68d18d3..5965482 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@types/jest": "^26.0.23", + "@types/lodash": "^4.14.171", "@types/node": "^12.12.22", "@types/react": "^16.9.17", "@types/react-dom": "^16.9.4", @@ -103,6 +104,7 @@ "husky": "^3.1.0", "jest": "^27.0.3", "lint-staged": "^9.5.0", + "lodash": "^4.17.21", "markdown-loader-jest": "^0.1.1", "postcss": "^8.0.9", "postcss-calc": "^7.0.4", diff --git a/src/utils/change-case.ts b/src/utils/change-case.ts index fb0030e..7c861a5 100644 --- a/src/utils/change-case.ts +++ b/src/utils/change-case.ts @@ -1,33 +1,16 @@ -/** - * Converts a string to camelCase format - * - * @param {string} str String to be converted - * @returns converted string - */ -export const toCamelCase = (str: string) => { - return str.replace(/([-_\s]+[a-z])/gi, $1 => { - return $1 - .toUpperCase() - .replace(/-/g, '') - .replace(/_/g, '') - .replace(/\s/g, ''); - }); -}; +import kebabCase from 'lodash/fp/kebabCase'; /** - * Converts a string to camelCase format + * Converts a string to CSS variable format + * (hyphens and lowercase letters with a "--" prefix) * * @param {string} str String to be converted * @returns converted string - * - * @see {@link https://regex101.com/r/EMrqS7/1} */ -export const toCssVariable = (str: string) => { - return `-${str.replace(/([_\s]+\w|(?<=[a-z])[A-Z\d]|^\w)/g, $1 => { - return `-${$1.toLowerCase()}`; - })}`; +export const toCssVariable = (str: string): string => { + return `--${kebabCase(str)}`; }; export default { - toCamelCase + toCssVariable } From 41ae07c421ced346db0939688f128e8b940010e1 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Wed, 14 Jul 2021 12:04:33 +0100 Subject: [PATCH 7/9] 8709 task: Replaced camelCase and toCssVariable utils with lodash equivalent for better robustness --- src/stories/Colours.stories.tsx | 21 +++++++++++++-------- src/utils/change-case.ts | 16 ---------------- 2 files changed, 13 insertions(+), 24 deletions(-) delete mode 100644 src/utils/change-case.ts diff --git a/src/stories/Colours.stories.tsx b/src/stories/Colours.stories.tsx index a2d8f89..597a50a 100644 --- a/src/stories/Colours.stories.tsx +++ b/src/stories/Colours.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; import colourTokens from 'build/js/colours'; -import { toCssVariable } from 'utils/change-case'; +import kebabCase from 'lodash/fp/kebabCase'; type TokensProps = { [key: string]: string; @@ -11,7 +11,9 @@ type TokensProps = { // TODO: Ideally we would import tokens as a prop but type declarations // are not implicit at the node level i.e. `tokenKeys.map((key) =>` export const ColourVariables = ({ tokens }: TokensProps) => { - const tokenKeys = Object.keys(colourTokens) as Array; + const tokenKeys = Object.keys(colourTokens) as Array< + keyof typeof colourTokens + >; return (
@@ -23,27 +25,30 @@ export const ColourVariables = ({ tokens }: TokensProps) => { - {tokenKeys.map((key) => { + {tokenKeys.map(key => { const value = colourTokens[key]; const cssValue = /rgb/i.test(key) ? `rgb(${value})` : value; - const cssVariable = toCssVariable(key); + const cssVariable = `--${kebabCase(key)}`; return ( - ) + ); })}
{key} {cssVariable}
-
+
{value}
- ) -} + ); +}; export const ColoursPaletteStatus = () => ( diff --git a/src/utils/change-case.ts b/src/utils/change-case.ts deleted file mode 100644 index 7c861a5..0000000 --- a/src/utils/change-case.ts +++ /dev/null @@ -1,16 +0,0 @@ -import kebabCase from 'lodash/fp/kebabCase'; - -/** - * Converts a string to CSS variable format - * (hyphens and lowercase letters with a "--" prefix) - * - * @param {string} str String to be converted - * @returns converted string - */ -export const toCssVariable = (str: string): string => { - return `--${kebabCase(str)}`; -}; - -export default { - toCssVariable -} From d436a4cef99820c4d6f36d77a5a4202c1dd2e107 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Fri, 30 Jul 2021 15:04:20 +0100 Subject: [PATCH 8/9] 8709 task: design token prototyping pr feedback * added token build process to build and dev processes to ensure generated variables are always available * removed rgb colour values from tokens list --- package.json | 4 ++-- src/tokens/colour/base.json | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index fb47677..06f20c6 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "build:clean": "rm -rf dist ssr", "build:tokens": "style-dictionary build", "build:types": "tsc --emitDeclarationOnly", - "build": "npm run build:clean && npm run build:types && rollup -c ./config/rollup.config.js --environment NODE_ENV:production && node ./ssr/html.js", - "dev": "npm run build:types && rollup -c ./config/rollup.config.js -w", + "build": "npm run build:clean && npm run build:types && npm run build:tokens && rollup -c ./config/rollup.config.js --environment NODE_ENV:production && node ./ssr/html.js", + "dev": "npm run build:types && npm run build:tokens && rollup -c ./config/rollup.config.js -w", "lint": "npm run lint:style && npm run lint:js", "lint:js": "eslint --fix ./src --ext .js,.jsx,.ts,.tsx && echo 'JS linting complete'", "lint:style": "stylelint --fix '**/*.scss' && echo 'Style linting complete'", diff --git a/src/tokens/colour/base.json b/src/tokens/colour/base.json index edded42..eeb75a9 100644 --- a/src/tokens/colour/base.json +++ b/src/tokens/colour/base.json @@ -1,9 +1,7 @@ { "colour": { - "black": { "value": "#000" }, - "black-rgb": { "value": "0, 0, 0" }, - "white": { "value": "#fff" }, - "white-rgb": { "value": "255, 255, 255" }, + "black": { "value": "#000" }, + "white": { "value": "#fff" }, "amber": { "90": { "value": "#382a00" }, "80": { "value": "#4d3900" }, @@ -57,7 +55,6 @@ "80": { "value": "#292929" }, "70": { "value": "#5c5c5c" }, "60": { "value": "#767676" }, - "60-rgb": { "value": "118, 118, 118" }, "50": { "value": "#878787" }, "40": { "value": "#999" }, "30": { "value": "#b3b3b3" }, From 757ca49fefe99501a98e264c8f0f767ef40423d0 Mon Sep 17 00:00:00 2001 From: Chris Reid Date: Fri, 6 Aug 2021 15:06:11 +0100 Subject: [PATCH 9/9] 8709 task: design token prototyping - updated colour variable and file naming to US English --- config.json | 12 ++++++------ src/styles/10-settings/__manifest.scss | 2 +- src/tokens/{colour => color}/base.json | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) rename src/tokens/{colour => color}/base.json (99%) diff --git a/config.json b/config.json index 77cd699..d63e944 100644 --- a/config.json +++ b/config.json @@ -6,23 +6,23 @@ "buildPath": "src/build/js/", "files": [ { - "destination": "colours.js", + "destination": "colors.js", "format": "javascript/module-flat", "options": { "outputReferences": true }, "filter": { "attributes": { - "category": "colour" + "category": "color" } } }, { - "destination": "colours.d.ts", + "destination": "colors.d.ts", "format": "typescript/es6-declarations", "filter": { "attributes": { - "category": "colour" + "category": "color" } } } @@ -33,14 +33,14 @@ "buildPath": "src/build/css/", "files": [ { - "destination": "colours.css", + "destination": "colors.css", "format": "css/variables", "options": { "outputReferences": true }, "filter": { "attributes": { - "category": "colour" + "category": "color" } } } diff --git a/src/styles/10-settings/__manifest.scss b/src/styles/10-settings/__manifest.scss index ef54cd8..da246ac 100644 --- a/src/styles/10-settings/__manifest.scss +++ b/src/styles/10-settings/__manifest.scss @@ -7,7 +7,7 @@ @import 'mq'; // must be first import // @import 'colors'; -@import '../../build/css/colours'; +@import '../../build/css/colors'; @import 'grid'; @import 'spacing'; @import 'typography'; diff --git a/src/tokens/colour/base.json b/src/tokens/color/base.json similarity index 99% rename from src/tokens/colour/base.json rename to src/tokens/color/base.json index eeb75a9..adfc78f 100644 --- a/src/tokens/colour/base.json +++ b/src/tokens/color/base.json @@ -1,5 +1,5 @@ { - "colour": { + "color": { "black": { "value": "#000" }, "white": { "value": "#fff" }, "amber": {