@financial-times/o-colors - npm Package Compare versions

Comparing version 6.2.0 to 6.3.0

CHANGELOG.md

 # Changelog
 
+## [6.3.0](https://www.github.com/Financial-Times/origami/compare/o-colors-v6.2.1...o-colors-v6.3.0) (2021-11-08)
+
+
+### Features
+
+* Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
+
+### [6.2.1](https://www.github.com/Financial-Times/origami/compare/o-colors-v6.2.0...o-colors-v6.2.1) (2021-11-02)
+
+
+### Bug Fixes
+
+* import o-colors mixer demo markup ([a90427b](https://www.github.com/Financial-Times/origami/commit/a90427b3c709964b0043b1b0e10a22fd79b659a6))
+* remove console.log from o-colors demo ([e4ae412](https://www.github.com/Financial-Times/origami/commit/e4ae4124e438564d8f24f9d76a3116827c4fb839))
+* Update `o-brand` in components, replace "master" with "core" ([322617e](https://www.github.com/Financial-Times/origami/commit/322617ea80f30a6825d9c36872e05574b871ea82))
+
 ## [6.2.0](https://www.github.com/Financial-Times/origami/compare/o-colors-v6.1.1...o-colors-v6.2.0) (2021-09-24)
@@ -8,3 +24,3 @@
 
-* add wheat-100 to o-colors master brand palette ([ffb5781](https://www.github.com/Financial-Times/origami/commit/ffb57819342a4c9ec9daec4004a09689d5227454))
+* add wheat-100 to o-colors core brand palette ([ffb5781](https://www.github.com/Financial-Times/origami/commit/ffb57819342a4c9ec9daec4004a09689d5227454))
 
@@ -11,0 +27,0 @@ ### [6.1.1](https://www.github.com/Financial-Times/origami/compare/o-colors-v6.1.0...o-colors-v6.1.1) (2021-09-21)

demos/src/color-mixer/color-mixer.js

@@ -5,7 +5,7 @@ import { getContrastRatio } from '../shared/contrast-ratio.js';
 document.addEventListener('DOMContentLoaded', function() {
-	const forms = document.forms;
-	const mixer = forms[0]['mixer'];
-	const base = forms[0]['base'];
+	const form = document.getElementById('color-mix-form');
+	const mixer = form['mixer'];
+	const base = form['base'];
 
-	forms[0].addEventListener('change', () => {
+	form.addEventListener('change', () => {
 		mixColors(mixer.value, base.value);
@@ -21,3 +21,3 @@
 	//set visible hex value and sass function to default values of mixColors
-	forms[1]['range'][5].checked = true;
+	form['range'][5].checked = true;
 	const defaultHex = getComputedStyle(document.documentElement).getPropertyValue(`--o-colors-${mixer.value}-50`);
@@ -51,3 +51,3 @@ fillCodeSnippets(defaultHex, mixer.value, base.value, 50);
 const fillSwatches = (hexes, mixer, base) => {
-	const range = document.forms[1]['range'];
+	const range = document.forms[0]['range'];
 	hexes.forEach((hex, index) => {
@@ -54,0 +54,0 @@ const swatch = range[index];

origami.json

@@ -6,3 +6,3 @@ {
 	"brands": [
-		"master",
+		"core",
 		"internal",
@@ -28,5 +28,5 @@ "whitelabel"
 		{
-			"name": "master-contrast-checker",
+			"name": "core-contrast-checker",
 			"title": "Contrast ratio checker",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"js": "demos/src/contrast-checker/contrast-checker.js",
@@ -48,9 +48,9 @@ "sass": "demos/src/contrast-checker/contrast-checker.scss",
 			"brands": [
-				"master"
+				"core"
 			]
 		},
 		{
-			"name": "master-color-mixer",
+			"name": "core-color-mixer",
 			"title": "Color Mixer",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"js": "demos/src/color-mixer/color-mixer.js",
@@ -70,9 +70,9 @@ "sass": "demos/src/color-mixer/color-mixer.scss",
 			"brands": [
-				"master"
+				"core"
 			]
 		},
 		{
-			"name": "master-primary-palette",
+			"name": "core-primary-palette",
 			"title": "Primary Palette",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/primary-palette.mustache",
@@ -82,9 +82,9 @@ "description": "The primary FT brand colours are FT pink, FT grey, black, and white. These are the established colours that make up the FT corporate identity and FT brand. FT pink and FT grey are not used for digital UI, but may be helpful for use alongside FT branded static assets such as the FT logo. For example, FT Pink could be used to prevent a flash of the wrong colour as the logo loads",
 			"brands": [
-				"master"
+				"core"
 			]
 		},
 		{
-			"name": "master-secondary-palette",
+			"name": "core-secondary-palette",
 			"title": "Secondary Palette",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/secondary-palette.mustache",
@@ -94,9 +94,9 @@ "description": "Secondary colors provide visual hierarchy to differentiate content and are brand identifiers of the FT.",
 			"brands": [
-				"master"
+				"core"
 			]
 		},
 		{
-			"name": "master-tertiary-palette",
+			"name": "core-tertiary-palette",
 			"title": "Tertiary Palette",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/tertiary-palette.mustache",
@@ -106,9 +106,9 @@ "description": "Used sparingly, these colors provide contrast for highlighting and messaging.",
 			"brands": [
-				"master"
+				"core"
 			]
 		},
 		{
-			"name": "master-b2c-palette",
+			"name": "core-b2c-palette",
 			"title": "B2C Palette",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/b2c-palette.mustache",
@@ -118,3 +118,3 @@ "description": "A candidate for deprecation. These colors were specifically designed for use in B2C products.",
 			"brands": [
-				"master"
+				"core"
 			],
@@ -124,5 +124,5 @@ "hidden": true
 		{
-			"name": "master-partner-content-palette",
+			"name": "core-partner-content-palette",
 			"title": "Partner Content Palette",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/partner-content-palette.mustache",
@@ -132,9 +132,9 @@ "description": "",
 			"brands": [
-				"master"
+				"core"
 			]
 		},
 		{
-			"name": "master-tones",
+			"name": "core-tones",
 			"title": "Tones and Mixes",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/tones-mixes.mustache",
@@ -144,3 +144,3 @@ "description": "Tones (colours with modified brightness using the HSB colour space) can be used to produce a broad spectrum of lighter and darker variations of palette colours for creating scale and depth to your designs. To reduce our number of colour combinations not all colours may be toned, but mixes of black/white may be used instead.",
 			"brands": [
-				"master"
+				"core"
 			]
@@ -261,3 +261,3 @@ },
 			"title": "Pa11y",
-			"data": "demos/src/palettes/master-palette.json",
+			"data": "demos/src/palettes/core-palette.json",
 			"template": "demos/src/pa11y.mustache",
@@ -264,0 +264,0 @@ "hidden": true,

package.json

 {
   "name": "@financial-times/o-colors",
   "type": "module",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "The default colour palette for all FT products. The palette supports colour contrast checking, colour mixing and toneing.",
@@ -30,7 +30,9 @@ "keywords": [
     "@financial-times/o-brand": "^4.0.1",
-    "mathsass": "^0.10.1"
+    "@financial-times/math": "^1.0.0"
   },
   "scripts": {
     "start": "npx serve ./demos/local",
-    "build": "npm_config_yes=true npx \"origami-build-tools@11\" install && npm_config_yes=true npx \"origami-build-tools@11\" demo"
+    "build": "bash ../../scripts/component/build.bash",
+    "test": "bash ../../scripts/component/test.bash",
+    "lint": "bash ../../scripts/component/lint.bash"
   },
@@ -37,0 +39,0 @@ "volta": {

README.md

@@ -30,3 +30,3 @@ # o-colors [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
 	<!-- default background colour set -->
-	<!-- e.g. for the master brand `background: #fff1e5;` -->
+	<!-- e.g. for the core brand `background: #fff1e5;` -->
 </body>
@@ -87,25 +87,25 @@ ```
 ---|---
-black | master, internal, whitelabel
-white | master, internal, whitelabel
-oxford | master, internal
-teal | master, internal
-slate | master, internal,
-lemon | master, internal,
-jade | master, internal
-mandarin | master, internal
-crimson | master, internal
-paper | master
-claret | master
-wheat | master
-sky | master
-velvet | master
-candy | master
-wasabi | master
-light-blue | master
-graphics-dark-blue | master
-ft-pink (previously brand-ft-pink) | master
-ft-grey | master
-org-b2c | master
-org-b2c-dark | master
-org-b2c-light | master
+black | core, internal, whitelabel
+white | core, internal, whitelabel
+oxford | core, internal
+teal | core, internal
+slate | core, internal,
+lemon | core, internal,
+jade | core, internal
+mandarin | core, internal
+crimson | core, internal
+paper | core
+claret | core
+wheat | core
+sky | core
+velvet | core
+candy | core
+wasabi | core
+light-blue | core
+graphics-dark-blue | core
+ft-pink (previously brand-ft-pink) | core
+ft-grey | core
+org-b2c | core
+org-b2c-dark | core
+org-b2c-light | core
 
@@ -173,3 +173,3 @@ There are additional colours in the palette by default including tones and mixes. [See the registry demos](https://registry.origami.ft.com/components/o-colors) for a full list.
 
-See [o-colors SassDoc](https://registry.origami.ft.com/components/o-colors/sassdoc?brand=master#o-colors-mixin-ocolorssetusecase) for more details and examples.
+See [o-colors SassDoc](https://registry.origami.ft.com/components/o-colors/sassdoc?brand=core#o-colors-mixin-ocolorssetusecase) for more details and examples.
 
@@ -182,29 +182,29 @@ ### Usecases
 ---|---|---
-page |                  background | master, internal, whitelabel
-focus |                 outline | master, internal
-box |                   background | master, internal
-link |                  text | master, internal
-link-hover |            text | master, internal
-link-title |            text | master, internal
-link-title-hover |      text | master, internal
-title |                 text | master, internal
-body |                  text | master, internal
-muted |                 text | master, internal
-tag-link |              text | master
-tag-link-hover |        text | master
-opinion-tag-link |      text | master
-opinion-tag-link-hover |text | master
-opinion |               background | master
-hero |                  background | master
-hero-opinion |          background | master
-hero-highlight |        background | master
+page |                  background | core, internal, whitelabel
+focus |                 outline | core, internal
+box |                   background | core, internal
+link |                  text | core, internal
+link-hover |            text | core, internal
+link-title |            text | core, internal
+link-title-hover |      text | core, internal
+title |                 text | core, internal
+body |                  text | core, internal
+muted |                 text | core, internal
+tag-link |              text | core
+tag-link-hover |        text | core
+opinion-tag-link |      text | core
+opinion-tag-link-hover |text | core
+opinion |               background | core
+hero |                  background | core
+hero-opinion |          background | core
+hero-highlight |        background | core
 **Section colors** |
-section-life-arts |     all | master
-section-life-arts-alt | all | master
-section-magazine |      all | master
-section-magazine-alt |  all | master
-section-house-home |    all | master
-section-house-home-alt |all | master
-section-money |         all | master
-section-money-alt |     all | master
+section-life-arts |     all | core
+section-life-arts-alt | all | core
+section-magazine |      all | core
+section-magazine-alt |  all | core
+section-house-home |    all | core
+section-house-home-alt |all | core
+section-money |         all | core
+section-money-alt |     all | core
 
@@ -211,0 +211,0 @@ #### Default Usecases

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116480

increased by0.88%

Worsened metrics

Number of package files

36

decreased by-2.7%

Lines of code

648

decreased by-1.82%

No dependency changes