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

Comparing version 6.6.4 to 6.7.0

CHANGELOG.md

 # Changelog
 
+## [6.7.0](https://github.com/Financial-Times/origami/compare/o-colors-v6.6.4...o-colors-v6.7.0) (2024-07-31)
+
+
+### Features
+
+* Add new colour usecase for ad slots ([#1763](https://github.com/Financial-Times/origami/issues/1763)) ([f338463](https://github.com/Financial-Times/origami/commit/f3384632108c6d998c6da2fddb6cda5b15d9d484))
+
 ## [6.6.4](https://github.com/Financial-Times/origami/compare/o-colors-v6.6.3...o-colors-v6.6.4) (2024-03-27)
@@ -4,0 +11,0 @@

package.json

 {
   "name": "@financial-times/o-colors",
   "type": "module",
-  "version": "6.6.4",
+  "version": "6.7.0",
   "description": "The default colour palette for all FT products. The palette supports colour contrast checking, colour mixing and toneing.",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -22,2 +22,3 @@ # o-colors [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
 A limited number of colour [usecases](#usecases) are available as CSS classes, including:
+
 - `.o-colors-page-background`
@@ -55,2 +56,3 @@ - `.o-colors-box-background`
 A limited number of colour [usecases](#usecases) are also available as CSS Custom Properties (CSS Variables), including:
+
 - `--o-colors-page-background`
@@ -75,7 +77,11 @@ - `--o-colors-box-background`
 @import '@financial-times/o-colors/main';
-@include oColors($opts: (
-	'palette-custom-properties': true, // e.g. --o-colors-paper
-	'usecase-custom-properties': true, // e.g. --o-colors-page-background
-	'usecase-classes': true // e.g. .o-colors-page-background
-));
+@include oColors(
+	$opts: (
+		'palette-custom-properties': true,
+		// e.g. --o-colors-paper
+		'usecase-custom-properties': true,
+		// e.g. --o-colors-page-background
+		'usecase-classes': true // e.g. .o-colors-page-background,
+	)
+);
 ```
@@ -87,28 +93,28 @@
 
-Color Name | Brand Support |
----|---
-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
-mint | core
+| Color Name                         | Brand Support              |
+| ---------------------------------- | -------------------------- |
+| 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                       |
+| mint                               | core                       |
 
@@ -156,3 +162,5 @@ 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.
 	$color-value: #ff69b4,
-	$opts: ('allow-tones': true)
+	$opts: (
+		'allow-tones': true,
+	)
 );
@@ -173,3 +181,5 @@
 	$color-value #ff69b4,
-	$opts: ('deprecated': 'Use the default colour claret instead.')
+	$opts: (
+		'deprecated': 'Use the default colour claret instead.',
+	)
 );
@@ -184,31 +194,32 @@ ```
 
-Usecase | Property | Brand Support |
----|---|---
-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 | 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
+| Usecase                | Property   | Brand Support              |
+| ---------------------- | ---------- | -------------------------- |
+| 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                       |
+| ads                    | background | core                       |
+| **Section colors**     |
+| 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                       |
 
@@ -220,11 +231,11 @@ #### Default Usecases
 ```scss
-	html {
-		// get the background colour for the page usecase
-		background: oColorsByUsecase('page', 'background');
-	}
+html {
+	// get the background colour for the page usecase
+	background: oColorsByUsecase('page', 'background');
+}
 
-	.paragraph {
-		// get the text colour for the body usecase
-		color: oColorsByUsecase('body', 'text');
-	}
+.paragraph {
+	// get the text colour for the body usecase
+	color: oColorsByUsecase('body', 'text');
+}
 ```
@@ -236,14 +247,17 @@
 
-- `$usecase`:  The name of the usecase, e.g. 'page'. This must include a namespace for your component or project followed by a forward slash.
-- `$colors`:  A map of properties ('text', 'background', 'border', or 'outline') to a palette color name.
+- `$usecase`: The name of the usecase, e.g. 'page'. This must include a namespace for your component or project followed by a forward slash.
+- `$colors`: A map of properties ('text', 'background', 'border', or 'outline') to a palette color name.
 - `$opts` (optional):
-	- `deprecated`: A deprecation message for the usecase.
+  - `deprecated`: A deprecation message for the usecase.
 
 ```scss
-	// set colours for a "stripes" in o-example.
-	@include oColorsSetUseCase('o-example/stripes', (
+// set colours for a "stripes" in o-example.
+@include oColorsSetUseCase(
+	'o-example/stripes',
+	(
 		'text': 'white',
 		'background': 'black',
-		'border': 'black-50'
-	));
+		'border': 'black-50',
+	)
+);
 ```
@@ -254,19 +268,38 @@
 Deprecate all usecase properties:
+
 ```scss
-	// deprecate all usecase properties for the o-example custom usecase "stripes".
-	@include oColorsSetUseCase('o-example', 'stripes', (
+// deprecate all usecase properties for the o-example custom usecase "stripes".
+@include oColorsSetUseCase(
+	'o-example',
+	'stripes',
+	(
 		'text': 'white',
 		'background': 'black',
-		'border': 'black-50'
-	), ('deprecated': 'o-example has no stripes anymore, use a different colour'));
+		'border': 'black-50',
+	),
+	(
+		'deprecated': 'o-example has no stripes anymore, use a different colour',
+	)
+);
 ```
 
 Deprecate individual usecase properties:
+
 ```scss
-	// deprecate only the background property for the o-example custom usecase "stripes".
-	@include oColorsSetUseCase('o-example', 'stripes', (
+// deprecate only the background property for the o-example custom usecase "stripes".
+@include oColorsSetUseCase(
+	'o-example',
+	'stripes',
+	(
 		'text': 'white',
 		'background': 'black',
-		'border': 'black-50'
-	), ('deprecated': ('background': 'o-example stripes has no background anymore, use a different colour')));
+		'border': 'black-50',
+	),
+	(
+		'deprecated': (
+			'background':
+				'o-example stripes has no background anymore, use a different colour',
+		),
+	)
+);
 ```
@@ -313,9 +346,18 @@
 By default `oColorsMix` mixes with the page background colour usecase:
+
 ```scss
-$color: oColorsMix($color: 'black', $percentage: 30); // same as black-30
+$color: oColorsMix(
+	$color: 'black',
+	$percentage: 30,
+); // same as black-30
 ```
 
 But two colours may be given. For example to mix claret over slate at 20%:
+
 ```scss
-$color: oColorsMix($color: 'claret', $background: 'slate', $percentage: 20);
+$color: oColorsMix(
+	$color: 'claret',
+	$background: 'slate',
+	$percentage: 20,
+);
 ```
@@ -349,13 +391,12 @@
 
-State | Major Version | Last Minor Release | Migration guide |
-:---: | :---: | :---: | :---:
-✨ active | 6 | N/A | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
-⚠ maintained | 5 | N/A | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
-╳ deprecated | 4 | 4.10 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
-╳ deprecated | 3 | 3.6 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
-╳ deprecated | 2 | 2.5 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
-╳ deprecated | 1 | 1.1 | [migrate to v1](MIGRATION.md#migrating-from-v0-to-v1) |
-╳ deprecated | 0 | 0.2 | N/A |
+|    State     | Major Version | Last Minor Release |                    Migration guide                    |
+| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
+|  ✨ active   |       6       |        N/A         | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
+| ⚠ maintained |       5       |        N/A         | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
+| ╳ deprecated |       4       |        4.10        | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
+| ╳ deprecated |       3       |        3.6         | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
+| ╳ deprecated |       2       |        2.5         | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
+| ╳ deprecated |       1       |        1.1         | [migrate to v1](MIGRATION.md#migrating-from-v0-to-v1) |
+| ╳ deprecated |       0       |        0.2         |                          N/A                          |
 
-
 ## Contact
@@ -365,3 +406,3 @@
 
-***
+---
 
@@ -368,0 +409,0 @@ ## Licence

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

139049

increased by2.18%

Number of lines in readme file

399

increased by11.45%

No dependency changes