From 8ee154644fd36218e07aba1df25e611c4b03b2be Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Wed, 6 May 2020 12:26:43 +0100 Subject: [PATCH] Bump origami-ci-tools from 1.3.12 to 2.0.0 (#261) * Bump origami-ci-tools from 1.3.12 to 2.0.0 Bumps [origami-ci-tools](https://github.com/Financial-Times/origami-ci-tools) from 1.3.12 to 2.0.0. - [Release notes](https://github.com/Financial-Times/origami-ci-tools/releases) - [Commits](https://github.com/Financial-Times/origami-ci-tools/compare/v1.3.12...v2.0.0) Signed-off-by: dependabot-preview[bot] * add stylelint config * fix stylelint issues * update to latest stylelint origami config * fix stylelint issues * fix stylelint issues * remove circle badge * update to latest stylelint origami config * remove package-lock.json file Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Jake Champion Co-authored-by: Jake Champion --- .stylelintrc.js | 3 + README.md | 2 +- demos/src/color-mixer/color-mixer.scss | 2 +- .../contrast-checker/contrast-checker.scss | 13 +- demos/src/demo.scss | 2 +- package-lock.json | 279 ------------------ package.json | 3 +- src/scss/_functions.scss | 29 +- src/scss/_mixins.scss | 32 +- src/scss/_use-cases.scss | 6 +- test/scss/_functions.test.scss | 82 ++--- test/scss/_mixins.test.scss | 80 ++--- test/scss/_palette.test.scss | 4 +- 13 files changed, 130 insertions(+), 407 deletions(-) create mode 100644 .stylelintrc.js delete mode 100644 package-lock.json diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 00000000..53330b26 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + "extends": "stylelint-config-origami-component" +}; \ No newline at end of file diff --git a/README.md b/README.md index ffd78bd7..562ed763 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# o-colors [![Build Status](https://circleci.com/gh/Financial-Times/o-colors.png?style=shield&circle-token=0d3884dacba2fdd8aec8afbd2eaa84c79040ddd5)](https://circleci.com/gh/Financial-Times/o-colors) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence) +# o-colors [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence) A component to manage colours. Includes the FT colour palette. diff --git a/demos/src/color-mixer/color-mixer.scss b/demos/src/color-mixer/color-mixer.scss index f2e5345c..8bba59c3 100644 --- a/demos/src/color-mixer/color-mixer.scss +++ b/demos/src/color-mixer/color-mixer.scss @@ -41,7 +41,7 @@ body { } } -input[type=radio] { //sass-lint:disable-line no-qualifying-elements +input[type=radio] { // stylelint-disable-line selector-no-qualifying-type appearance: none; border: 1px solid var(--color); display: inline-block; diff --git a/demos/src/contrast-checker/contrast-checker.scss b/demos/src/contrast-checker/contrast-checker.scss index 3d2d70ca..750ecae8 100644 --- a/demos/src/contrast-checker/contrast-checker.scss +++ b/demos/src/contrast-checker/contrast-checker.scss @@ -80,7 +80,7 @@ $o-colors-is-silent: false; } [role=tab][aria-selected=true] { - background-color: oColorsByName('black-10'); + background-color: oColorsByName('black-10'); a { font-weight: 600; @@ -102,11 +102,12 @@ $o-colors-is-silent: false; } } - input[type=radio] { //sass-lint:disable-line no-qualifying-elements + input[type=radio] { // stylelint-disable-line selector-no-qualifying-type @include swatchStyle(); + // stylelint-disable-next-line selector-no-qualifying-type &.o-overlay-trigger, - &.trigger-input { + &.trigger-input { // stylelint-disable-line selector-no-qualifying-type background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1%3Aplus?source=o-colors&width=24&height=24&tint=gray'); } } @@ -120,7 +121,7 @@ $o-colors-is-silent: false; right: 20px; } - #add-mix { //sass-lint:disable-line no-ids + #add-mix { //stylelint-disable-line selector-max-id background-image: none; font-size: inherit; float: none; @@ -132,10 +133,10 @@ $o-colors-is-silent: false; padding: 0; } - input[type=radio] { //sass-lint:disable-line no-qualifying-elements + input[type=radio] { // stylelint-disable-line selector-no-qualifying-type @include swatchStyle(); - &[name=range] { + &[name=range] { // stylelint-disable-line selector-no-qualifying-type height: 48px; width: 22px; } diff --git a/demos/src/demo.scss b/demos/src/demo.scss index 4dffbbac..b9b2d632 100644 --- a/demos/src/demo.scss +++ b/demos/src/demo.scss @@ -20,7 +20,7 @@ body { .o-colors-border-#{$name} { border-width: 2px 2px 0; border-style: solid; - border-color: oColorsByName($name); + border-color: oColorsByName($name); @if $name == 'white' { border-color: oColorsMix(black, white, 20); diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 143f275b..00000000 --- a/package-lock.json +++ /dev/null @@ -1,279 +0,0 @@ -{ - "name": "o-colors", - "requires": true, - "lockfileVersion": 1, - "dependencies": { - "chownr": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", - "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", - "dev": true - }, - "cross-spawn": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz", - "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==", - "dev": true, - "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - } - }, - "end-of-stream": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", - "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", - "dev": true, - "requires": { - "once": "^1.4.0" - } - }, - "eslint-config-origami-component": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/eslint-config-origami-component/-/eslint-config-origami-component-2.0.1.tgz", - "integrity": "sha512-H7qxqmOeVxop3bG+xsf51Ho+gmNN2hKtsBqDlgXRk5gIaieuP3l/dPSYGQ4FQxU2ktdPesS5dOVTuuQAIuQpMw==", - "dev": true - }, - "esm": { - "version": "3.2.25", - "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", - "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", - "dev": true - }, - "execa": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.0.tgz", - "integrity": "sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==", - "dev": true, - "requires": { - "cross-spawn": "^7.0.0", - "get-stream": "^5.0.0", - "human-signals": "^1.1.1", - "is-stream": "^2.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^4.0.0", - "onetime": "^5.1.0", - "signal-exit": "^3.0.2", - "strip-final-newline": "^2.0.0" - } - }, - "fs-minipass": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", - "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "dev": true, - "requires": { - "minipass": "^3.0.0" - } - }, - "get-stream": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz", - "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==", - "dev": true, - "requires": { - "pump": "^3.0.0" - } - }, - "human-signals": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", - "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==", - "dev": true - }, - "is-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz", - "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==", - "dev": true - }, - "isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true - }, - "merge-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", - "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", - "dev": true - }, - "mimic-fn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", - "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", - "dev": true - }, - "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, - "minipass": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz", - "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==", - "dev": true, - "requires": { - "yallist": "^4.0.0" - } - }, - "minizlib": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.0.tgz", - "integrity": "sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==", - "dev": true, - "requires": { - "minipass": "^3.0.0", - "yallist": "^4.0.0" - } - }, - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "dev": true - }, - "ncp": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz", - "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=", - "dev": true - }, - "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==", - "dev": true - }, - "npm-run-path": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", - "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", - "dev": true, - "requires": { - "path-key": "^3.0.0" - } - }, - "once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dev": true, - "requires": { - "wrappy": "1" - } - }, - "onetime": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz", - "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==", - "dev": true, - "requires": { - "mimic-fn": "^2.1.0" - } - }, - "origami-ci-tools": { - "version": "1.3.12", - "resolved": "https://registry.npmjs.org/origami-ci-tools/-/origami-ci-tools-1.3.12.tgz", - "integrity": "sha512-PTJwkMwFKXKRIJLR7cu2uSjd+8a/G2/hMJ+5BBwaeZgSK5UpYh6eZlAhVq1doqqfs5hTs/caUplq49KY5TxzHw==", - "dev": true, - "requires": { - "esm": "^3.2.25", - "execa": "^4.0.0", - "minimist": "^1.2.0", - "ncp": "^2.0.0", - "node-fetch": "^2.6.0", - "semver": "^7.1.3", - "tar": "^6.0.1" - } - }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true - }, - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dev": true, - "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - }, - "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true - }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "requires": { - "shebang-regex": "^3.0.0" - } - }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true - }, - "signal-exit": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", - "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==", - "dev": true - }, - "strip-final-newline": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", - "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==", - "dev": true - }, - "tar": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.1.tgz", - "integrity": "sha512-bKhKrrz2FJJj5s7wynxy/fyxpE0CmCjmOQ1KV4KkgXFWOgoIT/NbTMnB1n+LFNrNk0SSBVGGxcK5AGsyC+pW5Q==", - "dev": true, - "requires": { - "chownr": "^1.1.3", - "fs-minipass": "^2.0.0", - "minipass": "^3.0.0", - "minizlib": "^2.1.0", - "mkdirp": "^1.0.3", - "yallist": "^4.0.0" - } - }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - }, - "wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true - }, - "yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - } - } -} diff --git a/package.json b/package.json index 5d1621c7..baae22ac 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "name": "o-colors", "devDependencies": { "eslint-config-origami-component": "^2.0.1", - "origami-ci-tools": "^1.3.12" + "origami-ci-tools": "^2.0.0", + "stylelint-config-origami-component": "^1.0.2" } } diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss index a6ac53a6..42e7c3e9 100644 --- a/src/scss/_functions.scss +++ b/src/scss/_functions.scss @@ -69,11 +69,11 @@ @if(not index($_o-colors-deprecation-warnings-output, $deprecated-key)) { @if (type-of($deprecated) == 'string') { @warn 'Color usecase "#{inspect($usecase)}" is deprecated ' + - '(property "#{inspect($property)}" was requested): #{inspect($deprecated)}'; + '(property "#{inspect($property)}" was requested): #{inspect($deprecated)}'; } @if (type-of($deprecated) == 'map' and map-has-key($deprecated, $property)) { @warn 'The "#{inspect($property)}" property of the "#{inspect($usecase)}" ' + - 'color usecase is deprecated. #{inspect(map-get($deprecated, $property))}'; + 'color usecase is deprecated. #{inspect(map-get($deprecated, $property))}'; } $_o-colors-deprecation-warnings-output: append($_o-colors-deprecation-warnings-output, $deprecated-key) !global; } @@ -121,20 +121,20 @@ // Error for colours which have no hue, such as white and black, which we do not allow tones of. @if (hue($color) == 0 and saturation($color) == 0) { @return _oColorsError('"#{$color-name}" does not support tones. ' + - 'Use a mix instead: ' + - '`oColorsMix(\'#{$color-name}\', $percentage: #{$brightness})`'); + 'Use a mix instead: ' + + '`oColorsMix(\'#{$color-name}\', $percentage: #{$brightness})`'); } // Error for any palette colour which hasn't been configured to allow tones. $allows-tones: map-get($color-meta, 'allow-tones'); @if (not $allows-tones) { @return _oColorsError('"#{$color-name}" does not allow tones. ' + - 'We only allow tones for some colours, to reduce the number ' + - 'of different colours used across sites. ' + - 'For custom colours, set the `allow-tones` option ' + - 'of `oColorsSetColor` to enable tones. ' + - 'If using a default o-colors colour consider using the `oColorsMix` ' + - 'function to mix with black to darken or white to lighten.'); + 'We only allow tones for some colours, to reduce the number ' + + 'of different colours used across sites. ' + + 'For custom colours, set the `allow-tones` option ' + + 'of `oColorsSetColor` to enable tones. ' + + 'If using a default o-colors colour consider using the `oColorsMix` ' + + 'function to mix with black to darken or white to lighten.'); } // Convert the given colour to the HSB colour space. @@ -230,10 +230,7 @@ @return _oColorsError("'#{inspect($opacity)}' is not a valid opacity, set to a number.'"); } - $contrast-ratio-aim: map-get( - $contrast-levels, - if($minimum-contrast, $minimum-contrast, 'aa-normal') - ); + $contrast-ratio-aim: map-get($contrast-levels, if($minimum-contrast, $minimum-contrast, 'aa-normal')); // Calculate text colour for background and opacity. $base-color-a: if(oColorsColorBrightness($background) < 65%, 'white', 'black'); @@ -373,7 +370,7 @@ } @error('#{$message}'); -}; +} /// Get a namespace from a colour name. /// Returns null if there is no namespace. @@ -458,5 +455,5 @@ $saturation: if($max == 0, 0, $delta / $max); $brightness: $max / 255; - @return ('h': $hue, 's': $saturation * 100, 'b': $brightness * 100); + @return ('h': $hue, 's': $saturation * 100, 'b': $brightness * 100); } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index e4f52c1c..7b4aebdc 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -28,8 +28,8 @@ $namespace: _oColorsGetNameSpace($color-name); @if not $namespace { @error 'The `$color-name` "#{inspect($color-name)}" has no namespace. ' + - 'Prepend your color name with a namespace for your project e.g. for a component "o-example": ' + - '"o-example/#{inspect($color-name)}".'; + 'Prepend your color name with a namespace for your project e.g. for a component "o-example": ' + + '"o-example/#{inspect($color-name)}".'; } // Get deprecation message. @@ -48,9 +48,9 @@ // So only error if it's being set again with a new colour. @if ($existing-current-color != $color-value) { @error 'A palette colour "#{$color-name}" has already been set. ' + - 'Only default o-colors palette colours may be overridden with `oColorsSetColor`. ' + - 'If you would like to customise "#{$namespace}" colours, check its README for ' + - 'customisation options, or contact the Origami team to propose new customisation features.'; + 'Only default o-colors palette colours may be overridden with `oColorsSetColor`. ' + + 'If you would like to customise "#{$namespace}" colours, check its README for ' + + 'customisation options, or contact the Origami team to propose new customisation features.'; } } // Set the new colour to the colour palette. @@ -66,7 +66,7 @@ ) )); $_o-colors-palette: map-merge($_o-colors-palette, $new-color) !global; -}; +} /// Add a custom use case property. /// @@ -104,8 +104,8 @@ $namespace: _oColorsGetNameSpace($usecase); @if not $namespace { @error 'The `$usecase` "#{inspect($usecase)}" has no namespace. ' + - 'Prepend your usecase with a namespace for your project e.g. for a component "o-example": ' + - '"o-example/#{inspect($usecase)}".'; + 'Prepend your usecase with a namespace for your project e.g. for a component "o-example": ' + + '"o-example/#{inspect($usecase)}".'; } // Error if usecase colours are not a map. @@ -119,17 +119,17 @@ @each $property, $color in $colors { @if(not index($valid-properties, $property)) { @error 'A property "#{inspect($property)}" cannot be set for usecase "#{$usecase}".' + - 'A property may be one of "#{$valid-properties}".'; + 'A property may be one of "#{$valid-properties}".'; } @if(type-of($color) != 'string' and type-of($color) != 'color') { @error 'The "#{$usecase}" usecase property "#{inspect($property)}" ' + - 'cannot be set to "#{inspect($color)}". A usecase property may ' + - 'only be set to an o-colors colour or colour name such as "paper".'; + 'cannot be set to "#{inspect($color)}". A usecase property may ' + + 'only be set to an o-colors colour or colour name such as "paper".'; } @if(type-of($color) == 'string' and not _oColorsNameExists($color)) { @error 'The "#{$usecase}" usecase property "#{inspect($property)}" ' + - 'cannot be set to "#{inspect($color)}". The colour "#{inspect($color)}" ' + - 'does not exist.'; + 'cannot be set to "#{inspect($color)}". The colour "#{inspect($color)}" ' + + 'does not exist.'; } } @@ -152,9 +152,9 @@ $current-usecase-config: map-get($_o-colors-usecases, $usecase); @if ($namespace != 'o-colors' and $current-usecase-config and $current-usecase-config != $new-usecase-config) { @error 'A usecase "#{$usecase}" has already been set. ' + - 'Only default o-colors usecases may be overridden with `oColorsSetUseCase`. ' + - 'If you would like to customise "#{$namespace}" colours, check its README for ' + - 'customisation options, or contact the Origami team to propose new customisation features.'; + 'Only default o-colors usecases may be overridden with `oColorsSetUseCase`. ' + + 'If you would like to customise "#{$namespace}" colours, check its README for ' + + 'customisation options, or contact the Origami team to propose new customisation features.'; } // Add the use-case and its properties to the global use-case map. diff --git a/src/scss/_use-cases.scss b/src/scss/_use-cases.scss index 15e76543..91bad00e 100644 --- a/src/scss/_use-cases.scss +++ b/src/scss/_use-cases.scss @@ -70,7 +70,7 @@ 'outline': 'white' )), ); -}; +} // Internal brand usecases. @if oBrandGetCurrentBrand() == internal { @@ -86,11 +86,11 @@ ('body', ('text': 'slate')), ('muted', ('text': 'black-20')), ); -}; +} // Whitelabel brand usecases. @if oBrandGetCurrentBrand() == whitelabel { $_o-colors-default-usecases: ( ('page', ('background': 'white')), ); -}; +} diff --git a/test/scss/_functions.test.scss b/test/scss/_functions.test.scss index 61435db5..6da27e95 100644 --- a/test/scss/_functions.test.scss +++ b/test/scss/_functions.test.scss @@ -20,12 +20,12 @@ @include assert-equal(oColorsByName('org-b2c-dark'), (#3a70af)); @include assert-equal(oColorsByName('org-b2c-light'), (#99c6fb)); @include assert-equal(oColorsByName('transparent'), (transparent)); - }; + } @include it('returns an error if `$color-name` is not a string') { @include assert-equal(oColorsByName(null), ('ERROR: `$color-name` should be a string but found "null" of type "null".')); - }; - }; + } + } @include describe('oColorsMix') { @include it('returns a color based on background and base color') { @@ -37,8 +37,8 @@ @include assert-equal(oColorsMix($color: 'claret', $background: 'wheat', $percentage: 50), (#c67786)); @include assert-equal(oColorsMix('claret', 'wheat', 50), (#c67786)); @include assert-equal(oColorsMix('black', 'transparent', 50), rgba(0, 0, 0, 0.5)); - }; - }; + } + } @include describe('oColorsByUsecase') { @include it('returns the palette color for a use case') { @@ -68,21 +68,21 @@ @include assert-equal(oColorsByUsecase(section-house-home-alt, text), oColorsByName('wasabi')); @include assert-equal(oColorsByUsecase(section-money, text), oColorsByName('crimson')); @include assert-equal(oColorsByUsecase(section-money-alt, text), oColorsByName('white')); - }; + } @include it('returns a fallback for a usecase which does not exist') { @include assert-equal(oColorsByUsecase('fake-usecase-does-not-exist', 'text', $fallback: null), null); @include assert-equal(oColorsByUsecase('fake-usecase-does-not-exist', 'text', $fallback: 'teal'), oColorsByName('teal')); @include assert-equal(oColorsByUsecase('fake-usecase-does-not-exist', 'text', $fallback: #ffffff), #ffffff); - }; - }; + } + } @include describe('oColorsGetTone') { @include it('returns a tone for default palette colours that allow tones') { @include assert-equal(oColorsGetTone('claret', 30), #4d081f, $inspect: true); @include assert-equal(oColorsGetTone('claret', 30), #4d081f, $inspect: true); @include assert-equal(oColorsGetTone('wheat', 100), #ffebd9, $inspect: true); - }; + } @include it('returns a tone for custom palette colours that allow tones') { @include oColorsSetColor( @@ -95,19 +95,19 @@ yellow, $inspect: true ); - }; + } @include it('returns an error for default palette colours which do not allow tones') { @include assert-equal(oColorsGetTone('black', 10), ('ERROR: "black" does not support tones. Use a mix instead: `oColorsMix(\'black\', $percentage: 10)`'), - $inspect: true); + $inspect: true); @include assert-equal(oColorsGetTone('white', 10), ('ERROR: "white" does not support tones. Use a mix instead: `oColorsMix(\'white\', $percentage: 10)`'), - $inspect: true); + $inspect: true); @include assert-equal(oColorsGetTone('slate', 10), ('ERROR: "slate" does not allow tones. We only allow tones for some colours, to reduce the number of different colours used across sites. For custom colours, set the `allow-tones` option of `oColorsSetColor` to enable tones. If using a default o-colors colour consider using the `oColorsMix` function to mix with black to darken or white to lighten.'), - $inspect: true); - }; + $inspect: true); + } @include it('returns an error for default palette colours which do not allow tones') { @include oColorsSetColor( @@ -116,20 +116,20 @@ ); @include assert-equal(oColorsGetTone('o-example/olive-without-tones', 100), ('ERROR: "o-example/olive-without-tones" does not allow tones. We only allow tones for some colours, to reduce the number of different colours used across sites. For custom colours, set the `allow-tones` option of `oColorsSetColor` to enable tones. If using a default o-colors colour consider using the `oColorsMix` function to mix with black to darken or white to lighten.'), - $inspect: true); - }; - }; + $inspect: true); + } + } @include describe('oColorsGetToneDetails') { @include it('returns tone details for a palette colour name which is a tone') { @include assert-equal(oColorsGetToneDetails('claret-80'), ('color-name': 'claret', 'brightness': 80)); @include assert-equal(oColorsGetToneDetails('claret'), ('color-name': 'claret', 'brightness': 60)); - }; + } @include it('returns null for a palette colour name which is not a tone') { @include assert-equal(oColorsGetToneDetails('paper'), null); - }; - }; + } + } @include describe('oColorsGetPaletteDetails') { @include it('returns default palette colours without a namespace') { @@ -140,7 +140,7 @@ } $has-paper: index($palette-names, 'paper') != null; @include assert-equal($has-paper, true); - }; + } @include it('returns custom palette colours with a namespace') { $example-color: #808000; @@ -153,65 +153,65 @@ } $has-test-color: index($palette-names, 'o-example/palette-details-test') != null; @include assert-equal($has-test-color, true); - }; - }; + } + } @include describe('oColorsGetTextColor') { @include it('returns a text color based on background colour and opacity percentage') { @include assert-equal(oColorsGetTextColor(oColorsByName('paper')), #1a1817); @include assert-equal(oColorsGetTextColor(oColorsByName('oxford-80'), 100), white); @include assert-equal(oColorsGetTextColor(oColorsByName('oxford-90'), 100), black); - }; + } @include it('returns a text color based on background colour name and opacity percentage') { @include assert-equal(oColorsGetTextColor('paper'), #1a1817); @include assert-equal(oColorsGetTextColor('oxford-80', 100), white); @include assert-equal(oColorsGetTextColor('oxford-90', 100), black); - }; + } @include it('throws an error if a text color and background does not pass WCAG contrast guidelines') { @include assert-equal(oColorsGetTextColor('black-40', 50), ('ERROR: The text colour generated for black-40 at 50% opacity has a contrast ratio of "2.87" and does not pass the WCAG 2.1 aa-normal required contrast ratio of at least 4.5:1. Update the `$minimum-contrast` argument if a lower contrast is acceptable.')); - }; + } @include it('throws an error for an invalid contrast ratio check') { @include assert-equal(oColorsGetTextColor('black-40', 50, 'aaaaaaaa-large'), ('ERROR: The minimum contrast must by one of "aa-normal, aa-large, aaa-normal, aaa-large" or `null`. Found "aaaaaaaa-large".')); - }; + } @include it('throws an error if a text color and background does not pass a custom contrast ratio check') { @include assert-equal(oColorsGetTextColor('black-40', 50, 'aa-large'), ('ERROR: The text colour generated for black-40 at 50% opacity has a contrast ratio of "2.87" and does not pass the WCAG 2.1 aa-large required contrast ratio of at least 3:1. Update the `$minimum-contrast` argument if a lower contrast is acceptable.')); - }; + } @include it('does not throw an error when a text color and background does not pass WCAG contrast guidelines and `$minimum-contrast` is set the `null`') { @include assert-equal(oColorsGetTextColor(oColorsByName('black-40'), 50, $minimum-contrast: null), #4d4945); - }; - }; + } + } @include describe('oColorsColorBrightness') { @include test('returns the % of brightness in a color') { @include assert-equal(round(oColorsColorBrightness(#ffffff)), 100%); @include assert-equal(round(oColorsColorBrightness(#000000)), 0%); @include assert-equal(round(oColorsColorBrightness(#fff1e5)), 96%); - }; + } @include test('returns the % of brightness in a palette color') { @include assert-equal(round(oColorsColorBrightness('teal')), 41%); - }; - }; + } + } - @include describe('oColorsColorLuminance') { + @include describe('oColorsColorLuminance') { @include test('returns luminance of a color as float') { @include assert-equal(oColorsColorLuminance(#ffffff), 1); @include assert-equal(oColorsColorLuminance(#000000), 0); - }; + } @include test('returns luminance of a palette color as float') { @include assert-equal(oColorsColorLuminance('teal'), 0.14601, $inspect: true); - }; - }; + } + } @include describe('oColorsGetContrastRatio') { @include test('calculate the contrast ratio between two colors') { @include assert-equal(oColorsGetContrastRatio(#ffffff, #fff1e5), 1.1, $inspect: true); @include assert-equal(oColorsGetContrastRatio(#000000, #fff1e5), 18.96, $inspect: true); - }; + } @include test('calculate the contrast ratio between two palette colors') { @include assert-equal(oColorsGetContrastRatio('paper', 'black-10'), 1.24, $inspect: true); - }; - }; -}; + } + } +} diff --git a/test/scss/_mixins.test.scss b/test/scss/_mixins.test.scss index 9daf9e51..0a2694a8 100644 --- a/test/scss/_mixins.test.scss +++ b/test/scss/_mixins.test.scss @@ -4,41 +4,41 @@ @include assert() { @include output($selector: false) { @include oColors(); - }; + } @include contains($selector: false) { :root { --o-colors-white: #ffffff; } - }; - }; - }; + } + } + } @include it('outputs usecase custom properties by default') { @include assert() { @include output($selector: false) { @include oColors(); - }; + } @include contains($selector: false) { :root { --o-colors-page-background: #fff1e5; } - }; - }; - }; + } + } + } @include it('outputs usecase classes by default') { @include assert() { @include output($selector: false) { @include oColors(); - }; + } @include contains($selector: false) { .o-colors-page-background { background: #fff1e5; } - }; - }; - }; + } + } + } @include it('outputs palette custom properties with only the "palette-custom-properties" option') { @include assert() { @@ -46,15 +46,15 @@ @include oColors($opts: ( 'palette-custom-properties': true )); - }; + } @include contains($selector: false) { :root { --o-colors-white: #ffffff; } - }; - }; - }; + } + } + } @include it('outputs only usecase custom properties with only the "usecase-custom-properties" option') { @include assert() { @@ -62,7 +62,7 @@ @include oColors($opts: ( 'usecase-custom-properties': true )); - }; + } @include expect($selector: false) { :root { @@ -73,9 +73,9 @@ --o-colors-link-text: #0d7680; --o-colors-link-hover-text: #08474d; } - }; - }; - }; + } + } + } @include it('outputs only usecase classes with only the "usecase-classes" option') { @include assert() { @@ -83,47 +83,47 @@ @include oColors($opts: ( 'usecase-classes': true )); - }; + } @include expect($selector: false) { .o-colors-page-background { - background: #fff1e5; + background: #fff1e5; } .o-colors-box-background { - background: #f2dfce; + background: #f2dfce; } .o-colors-body-text { - color: #33302e; + color: #33302e; } .o-colors-muted-text { - color: #ccc1b7; + color: #ccc1b7; } - }; - }; - }; + } + } + } } @include describe('oColorsSetColor') { @include it('adds a custom palette color') { @include oColorsSetColor('o-example/olive', #808000); @include assert-equal(oColorsByName('o-example/olive'), (#808000)); - }; + } @include it('override a default o-colors palette color') { @include oColorsSetColor('o-colors/paper', #808000); @include assert-equal(oColorsByName('paper'), (#808000)); // reset paper color @include oColorsSetColor('o-colors/paper', #fff1e5); - }; + } @include it('set a custom color twice with the same value') { // if a component is imported twice it may attempt // to set a colour twice @include oColorsSetColor('o-demo-twice/paper', hotpink); @include oColorsSetColor('o-demo-twice/paper', hotpink); - }; - }; + } + } @include describe('oColorSetUseCase') { @include it('add a custom use case property') { @@ -131,7 +131,7 @@ 'text': 'candy' )); @include assert-equal(oColorsByUsecase(test-case, text), oColorsByName('candy')); - }; + } @include it('add a custom use case property for a custom colour') { // A custom colour set by an "o-example" component. $example-color: #808000; @@ -145,21 +145,21 @@ oColorsByUsecase('o-example/page', 'background'), $example-color ); - }; + } @include it('add a custom use case property for a colour mix') { $mix: oColorsMix('teal', 'slate', 50); @include oColorsSetUseCase('o-example/mix', ( - 'background': $mix + 'background': $mix )); // Assert able to get the new "o-example" mix usecase. @include assert-equal(oColorsByUsecase('o-example/mix', 'background'), $mix); - }; + } @include it('override a default o-colors custom use case property') { @include oColorsSetUseCase('o-colors/page', ( 'background': 'candy' )); @include assert-equal(oColorsByUsecase('page', 'background'), oColorsByName('candy')); - }; + } @include it('set a usecase twice with the same value') { // if a component is imported twice it may attempt // to set a usecase twice @@ -170,6 +170,6 @@ 'background': 'candy' )); @include assert-equal(oColorsByUsecase('o-example/page-set-twice', 'background'), oColorsByName('candy')); - }; - }; -}; + } + } +} diff --git a/test/scss/_palette.test.scss b/test/scss/_palette.test.scss index c9f2babf..6a89d3ef 100644 --- a/test/scss/_palette.test.scss +++ b/test/scss/_palette.test.scss @@ -9,11 +9,11 @@ @include assert-equal(oColorsByName('org-b2c'), (#4e96eb)); @include assert-equal(oColorsByName('org-b2c-dark'), (#3a70af)); @include assert-equal(oColorsByName('org-b2c-light'), (#99c6fb)); - }; + } @include test('does not have internal brand colours') { // errors return as strings in test mode @include assert-equal(type-of(oColorsByName('slate-white-15')), 'string'); @include assert-equal(type-of(oColorsByName('slate-white-5')), 'string'); - }; + } }