Socket
Socket
Sign inDemoInstall

@financial-times/o-colors

Package Overview
Dependencies
Maintainers
10
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 6.6.3 to 6.6.4

7

CHANGELOG.md
# Changelog
## [6.6.4](https://github.com/Financial-Times/origami/compare/o-colors-v6.6.3...o-colors-v6.6.4) (2024-03-27)
### Bug Fixes
* replace o3-web-token mentions with o3-foundation ([#1506](https://github.com/Financial-Times/origami/issues/1506)) ([2289423](https://github.com/Financial-Times/origami/commit/2289423450a6ab7b281435af90e7b492273a20cf))
## [6.6.3](https://github.com/Financial-Times/origami/compare/o-colors-v6.6.2...o-colors-v6.6.3) (2023-10-27)

@@ -4,0 +11,0 @@

374

MIGRATION.md
## Migration Guide
### Migrating from v6 to o3-foundation
#### Mixins
##### `oColors`
###### Replace `o-colors-*` classes.
`o3-foundation` provides [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) but no utility CSS classes. Instead, author your own CSS to apply the correct colours to either `background` or `color`.
| o-colors class | o3-foundation CSS |
| ------------------------ | ---------------------------------------------------- |
| o-colors-page-background | background: var(--o3-color-use-case-page-background) |
| o-colors-body-text | color: var(--o3-color-use-case-body-text) |
| o-colors-muted-text | color: var(--o3-color-use-case-muted-text) |
For example, to set a page background colour:
```scss
$o-brand: '[your-brand]';
@import '@financial-times/o-colors/main';
@include oColors();
```
```html
<body class="o-colors-page-background"></body>
```
Becomes:
```css
@import '@financial-times/o3-foundation/[your-brand].css';
body {
background-color: var(--o3-color-use-case-page-background);
}
```
###### Replace `--o-colors-*` CSS Custom Properties.
Instead, use `o3-foundation` [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
| o-colors | o3-foundation |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| --o-colors-page-background | --o3-color-use-case-page-background |
| --o-colors-box-background | Removed. Use the palette directly (core brand: --o3-color-palette-wheat; --o3-color-palette-slate-white-5 for the internal brand) |
| --o-colors-body-text | --o3-color-use-case-body-text |
| --o-colors-muted-text | --o3-color-use-case-body-text |
| --o-colors-link-text | --o3-color-use-case-link-text |
| --o-colors-link-hover-text | --o3-color-use-case-link-text-hover |
Some colour use-case CSS Custom Properties have no direct replacement. Instead use the colour palette directly, according to your brand.
| o-colors | o3-foundation (core) | o3-foundation (internal) |
| ------------------------- | ------------------------ | -------------------------------- |
| --o-colors-box-background | --o3-color-palette-wheat | --o3-color-palette-slate-white-5 |
For example, to set a page background colour:
```diff
body {
- background-color: var(--o-colors-page-background)
+ background-color: var(--o3-color-use-case-page-background)
}
```
##### `oColorsSetColor`
There is no direct equivalent. Instead we recommend creating your own [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), prefixed with your project name.
E.g. if working on a project `ft-example-project` to define a custom `pink` colour:
```diff
-@include oColorsSetColor($color-name: 'ft-example-project/pink', $color-value: #ff69b4);
-color: oColorsGetByName('ft-example-project/pink');
+--ft-example-project-pink: #ff69b4;
+color: var(--ft-example-project-pink);
```
##### `oColorsSetUseCase`
There is no direct equivalent. Instead we recommend creating your own [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), prefixed with your project name.
E.g. if working on a project `ft-example-project` to define a custom usecase for a `card` `background` colour:
```diff
-@include oColorsSetUseCase('ft-example-project-card', (
- 'background': red,
-));
-background: oColorsByUsecase($usecase: 'ft-example-project-card', $property: background);
+--ft-example-project-card-background: red;
+background: var(--ft-example-project-card-background);
```
#### Functions
##### `oColorsByName`
Use `o3-foundation` CSS Custom Properties instead, `--o3-color-palette-[name]`.
```diff
-color: oColorsByName('ft-pink');
+color: var(--o3-color-palette-ft-pink);
```
See our [colour design guidelines](https://origami-for-everyone.ft.com/guides/colours/) for a full list of supported palette colours for your brand. Please contact the Origami team should you find a missing colour.
##### `oColorsByUsecase`
Use `o3-foundation` CSS Custom Properties instead, `--o3-color-use-case-[usecase]`.
| o-colors | o3-foundation |
| ----------------------------------------------- | ------------------------------------------------ |
| oColorsByUsecase('focus', 'outline'); | var(--o3-color-use-case-focus-outline-standard) |
| oColorsByUsecase('page', 'background'); | var(--o3-color-use-case-page-background) |
| oColorsByUsecase('page-inverse', 'background'); | var(--o3-color-use-case-page-inverse-background) |
| oColorsByUsecase('link', 'text'); | var(--o3-color-use-case-link-text) |
| oColorsByUsecase('link-hover', 'text'); | var(--o3-color-use-case-link-text-hover) |
| oColorsByUsecase('body', 'text'); | var(--o3-color-use-case-body-text) |
| oColorsByUsecase('body-inverse', 'text'); | var(--o3-color-use-case-body-inverse-text) |
| oColorsByUsecase('muted', 'text'); | var(--o3-color-use-case-muted-text) |
Some colour use-cases have no direct replacement. Instead use the colour palette directly, according to your brand.
| o-colors | o3-foundation (core) | o3-foundation (internal) |
| ------------------------------------------------------------- | --------------------------------- | -------------------------------------- |
| oColorsByUsecase('box', 'background'); | var(--o3-color-palette-wheat) | var(--o3-color-palette-slate-white-5) |
| oColorsByUsecase('link-title', 'text'); | var(--o3-color-palette-black-80) | var(--o3-color-palette-slate-white-15) |
| oColorsByUsecase('link-title-hover', 'text'); | var(--o3-color-palette-black-70) | var(--o3-color-palette-slate-white-15) |
| oColorsByUsecase('title', 'text'); | var(--o3-color-palette-black) | var(--o3-color-palette-slate) |
| oColorsByUsecase('tag-link', 'text'); | var(--o3-color-palette-claret) | n/a |
| oColorsByUsecase('tag-link-hover', 'text'); | var(--o3-color-palette-claret-30) | n/a |
| oColorsByUsecase('opinion-tag-link', 'text'); | var(--o3-color-palette-oxford) | n/a |
| oColorsByUsecase('opinion-tag-link-hover', 'text'); | var(--o3-color-palette-oxford-30) | n/a |
| oColorsByUsecase('opinion', 'background'); | var(--o3-color-palette-sky) | n/a |
| oColorsByUsecase('hero', 'background'); | var(--o3-color-palette-wheat) | n/a |
| oColorsByUsecase('hero-opinion', 'background'); | var(--o3-color-palette-oxford) | n/a |
| oColorsByUsecase('hero-highlight', 'background'); | var(--o3-color-palette-claret) | n/a |
| oColorsByUsecase('section-life-arts', \[any-property\]); | var(--o3-color-palette-velvet) | n/a |
| oColorsByUsecase('section-life-arts-alt', \[any-property\]); | var(--o3-color-palette-candy) | n/a |
| oColorsByUsecase('section-magazine', \[any-property\]); | var(--o3-color-palette-oxford) | n/a |
| oColorsByUsecase('section-magazine-alt', \[any-property\]); | var(--o3-color-palette-sky) | n/a |
| oColorsByUsecase('section-house-home', \[any-property\]); | var(--o3-color-palette-jade) | n/a |
| oColorsByUsecase('section-house-home-alt', \[any-property\]); | var(--o3-color-palette-wasabi) | n/a |
| oColorsByUsecase('section-money', \[any-property\]); | var(--o3-color-palette-crimson) | n/a |
| oColorsByUsecase('section-money-alt', \[any-property\]); | var(--o3-color-palette-white) | n/a |
See our [colour design guidelines](https://origami-for-everyone.ft.com/guides/colours/) for a full list of supported colour usecases for your brand. Please contact the Origami team should you find a missing use-case, or would like to propose another.
E.g:
```diff
-color: oColorsByUsecase($usecase: 'page', $background: 'property');
+color: var(--o3-color-use-case-page-background);
```
```diff
-outline-color: oColorsByUsecase($usecase: 'focus', $background: 'outline');
+outline-color: var(--o3-color-use-case-focus-outline-standard);
```
##### `oColorsGetTone`
use `o3-foundation` CSS Custom Properties for tints (also known as tones), use these instead of `oColorsGetTone`.
E.g:
```diff
-background-color: oColorsGetTone($color-name: 'teal', $brightness: '100');
+background-color: var(--o3-color-palette-teal-100);
```
A limited set of tints are now available. See our [colour design guidelines](https://origami-for-everyone.ft.com/guides/colours/) for a full list of supported tints for your brand. If your tint value is no longer supported, please consult with a design team member or the Origami team to pick an alternative. Please reach out to the Origami team for support as needed.
```diff
-background-color: oColorsGetTone($color-name: 'claret', $brightness: '27');
+background-color: var(--o3-color-palette-claret-30);
```
##### `oColorsGetToneDetails`
There is no direct replacement for `oColorsGetToneDetails`. Please contact the Origami team for support if your product relies on this function.
##### `oColorsMix`
There is no direct replacement for `oColorsMix`. We recommend using the compiled value directly, with a CSS comment.
For example instead of this Sass:
```scss
color: oColorsMix('slate', 'white', 60);
```
Write instead the generated value `#7d7f85` and a comment to explain `/* mix: slate, white, 60 */`:
```css
color: #7d7f85; /* mix: slate, white, 60 */
```
We recommend this path as [we found there is little consistency in how these mixes are used](https://docs.google.com/document/d/1jbb33VDeSN1qG-oF3AyUhn3oBEgNOIldkkp0qe18Fto/edit). In the future we intend to review these mixes as we audit components and patterns. We are also open to introducing CSS based functionality to lighten or darken our palette colours (i.e. mix with black or white) or enable our colour palette to have transparency (i.e mix with `transparent`). Please contact the Origami team if you would like to request this feature.
##### `oColorsGetTextColor`
There is no direct replacement for `oColorsGetTextColor`. We recommend manually using the `o3-foundation` CSS Custom Property `--o3-color-use-case-body` for light backgrounds and `--o3-color-use-case-body-inverse` for dark backgrounds.
Please contact the Origami team for support if this is not possible or practical.
##### `oColorsColorBrightness`
There is no direct replacement for `oColorsColorBrightness`, we [recommend moving away from Sass logic](https://docs.google.com/document/d/1RuGduWdX0zGsgsp9C7lIhXgqEia6sWK900_3XVwYDIM/edit#heading=h.1f3yolavobef). Please contact the Origami team for support if you still rely on this Sass feature.
##### `oColorsColorLuminance`
There is no direct replacement for `oColorsColorLuminance`, we [recommend moving away from Sass logic](https://docs.google.com/document/d/1RuGduWdX0zGsgsp9C7lIhXgqEia6sWK900_3XVwYDIM/edit#heading=h.1f3yolavobef). Please contact the Origami team for support if you still rely on this Sass feature.
##### `oColorsGetContrastRatio`
There is no direct replacement for `oColorsGetContrastRatio`, we [recommend moving away from Sass logic](https://docs.google.com/document/d/1RuGduWdX0zGsgsp9C7lIhXgqEia6sWK900_3XVwYDIM/edit#heading=h.1f3yolavobef). Please contact the Origami team for support if you still rely on this Sass feature.
##### `oColorsGetPaletteDetails`
There is no direct replacement for `oColorsGetPaletteDetails`. Please contact the Origami team for support if your product relies on this function.
#### Variables
##### `o-colors-is-silent`
Follow the migration steps above to safely delete this variable. If set to `false` ensure you follow the steps outlined in the [oColors](#oColors) mixin guide.
### Migrating from v5 to v6

@@ -71,2 +299,3 @@

Deprecated internal and whitelabel brand palette colours were removed. Please contact Origami if your product has a usecase for one of the removed colours:
- Internal brand: candy, wasabi, org-b2c, org-b2c-dark, org-b2c-light, paper, wheat, sky, velvet, claret.

@@ -86,2 +315,3 @@ - Whitelabel brand: all colours except black and white have been removed.

The following mixins have been removed:
- [oColorsFor](#oColorsFor)

@@ -92,5 +322,7 @@

The following functions have changed:
- [oColorsGetTextColor](#oColorsGetTextColor)
The following functions have been removed:
- [oColorsGetTint](#oColorsGetTint)

@@ -134,2 +366,3 @@ - [oColorsGetPaletteColor](#oColorsGetPaletteColor)

`oColorsGetTextColor` now errors if the contrast between the given background and text colour does not pass WCAG 2.1 level AA for [normal text](https://www.w3.org/TR/WCAG21/#contrast-minimum). Previously it would only throw a warning provided the contrast check passed for [large text](https://www.w3.org/TR/WCAG21/#dfn-large-scale). Accordingly, the third `$warnings` argument is now `$minimum-contrast`. This can be set to one of `aa-normal` (default), `aa-large`, `aaa-normal`, `aaa-large`, or `null` to remove the contrast check. To migrate update the third `$warnings` argument of `oColorsGetTextColor` to `$minimum-contrast`:
- **not set**: no changes are needed unless contrast errors are thrown. If an error is thrown set `$minimum-contrast` to `aa-large` if creating a colour for [large text](https://www.w3.org/TR/WCAG21/#dfn-large-scale), or `null` to ignore the contrast of the resulting text colour. Only ignore contrast errors for [incidental or logo text](https://www.w3.org/TR/WCAG21/#contrast-minimum), otherwise your project may be inaccessible.

@@ -140,2 +373,3 @@ - **true**: remove the argument, it's optional and checks contrast for [normal text](https://www.w3.org/TR/WCAG21/#contrast-minimum) by default. If a contrast error is thrown refer to the point "not set" above.

E.g. If generating a colour for [large text](https://www.w3.org/TR/WCAG21/#dfn-large-scale), error if the contrast between the background `paper` is lower than 3:1 (see [WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum))
```diff

@@ -147,2 +381,3 @@ - color: oColorsGetTextColor('paper', 80, $warnings: false);

Or set to `null` to never error, e.g. for [incidental or logo text](https://www.w3.org/TR/WCAG21/#contrast-minimum), regardless of the contrast between the given background `paper` and the result:
```diff

@@ -167,2 +402,3 @@ - color: oColorsGetTextColor($backgroundd: 'paper', $warnings: false);

To fetch a default `o-colors` colour.
```diff

@@ -174,2 +410,3 @@ -color: oColorsGetPaletteColor('paper');

To fetch a colour set by a component or project other that `o-colors` include the namespace followed by a forward slash.
```diff

@@ -182,2 +419,3 @@ // Fetch the colour 'stormy' from the component 'o-example'.

Or with argument names:
```diff

@@ -195,2 +433,3 @@ // Fetch the colour 'stormy' from the component 'o-example'.

A namespace, for your project or component, must now be given with a forward slash:
```diff

@@ -203,2 +442,3 @@ // Setting a custom colour 'pink' within a component 'o-example'.

The color name argument no longer accepts a list to deprecate colours. Instead use the new `$opts` argument.
```diff

@@ -232,2 +472,3 @@ // Setting a custom colour 'pink', which is deprecated.

To deprecate a usecase pass a second options argument:
```diff

@@ -250,2 +491,3 @@ -@include oColorsSetUseCase('o-example-stripe', 'text', 'white');

E.g. setting the page background colour from o-colors. In this example no properties have been given to the second argument of `oColorsFor`, so we replace with calls to `oColorsByUsecase` for all properties the usecase supports.
```diff

@@ -257,2 +499,3 @@ -@include oColorsFor(page);

E.g. setting multiple colour properties to match a 'row-stripe' from an example component o-example.
```diff

@@ -269,2 +512,3 @@ -@include oColorsFor(o-example-row-stripe, background border);

E.g. when requesting the page background from o-colors:
```diff

@@ -276,2 +520,3 @@ -background: oColorsGetColorFor('page', 'background');

E.g. if no property is requested by `oColorsGetColorFor` explicitly choose one when migrating to `oColorsByUsecase` (one of 'text', 'background', 'border', or 'outline'):
```diff

@@ -283,2 +528,3 @@ -color: oColorsGetColorFor('section-life-arts');

E.g. set fallback colours using `$fallback`:
```diff

@@ -335,65 +581,65 @@ -background-color: oColorsGetColorFor('page', 'background', $options: ('default': 'white'));

| Old name | Switch to |
| --------------------- |----------------------------------|
| pink | paper |
| blue | oxford |
| dark-blue | oxford-60 |
| orange | mandarin |
| grey-tint1 | black-30 |
| grey-tint2 | black-40 |
| grey-tint3 | black-50 |
| grey-tint4 | black-70 |
| grey-tint5 | black-80 |
| pink-tint1 | black-5 |
| pink-tint2 | black-10 |
| pink-tint3 | black-20 |
| pink-tint4 | black-30 |
| pink-tint5 | black-50 |
| red | crimson |
| green | jade |
| orange-tint1 | _consult a designer_ |
| brown-tint1 | _consult a designer_ |
| yellow-tint1 | _consult a designer_ |
| green-tint1 | _consult a designer_ |
| bluegreen-tint1 | _consult a designer_ |
| silver-tint1 | _consult a designer_ |
| purple-tint1 | _consult a designer_ |
| purple-tint2 | black-50 (_consult a designer_) |
| red-tint1 | _consult a designer_ |
| red-tint2 | _consult a designer_ |
| red-tint3 | _consult a designer_ |
| red-tint4 | _consult a designer_ |
| red-tint5 | _consult a designer_ |
| blue-tint1 | _consult a designer_ |
| blue-tint2 | _consult a designer_ |
| blue-tint3 | _consult a designer_ |
| blue-tint4 | _consult a designer_ |
| blue-tint5 | _consult a designer_ |
| section-purple | velvet |
| section-light-purple | _consult a designer_ |
| section-blue | blue-80 |
| section-light-blue | sky |
| section-green | use `oColorsGetTint('jade', 65)` |
| section-light-green | _consult a designer_ |
| section-red | crimson |
| warm-1 | wheat |
| warm-2 | black-5 |
| warm-3 | black-20 |
| warm-4 | black-90 |
| warm-5 | white-60 |
| warm-6 | black-80 (_consult a designer_) |
| cold-1 | black-70 |
| cold-2 | black-80 |
| cold-3 | black-90 |
| blue-1 | oxford-30 |
| blue-2 | _consult a designer_ |
| purple-1 | velvet |
| purple-2 | _consult a designer_ |
| teal-1 | teal-40 |
| teal-2 | teal-80 |
| claret-1 | claret |
| claret-2 | candy |
| claret-inverse | claret-30 |
| org-b2b | org-b2c |
| org-b2c-dark | org-b2c-dark |
| org-b2c-light | org-b2c-light |
| Old name | Switch to |
| -------------------- | -------------------------------- |
| pink | paper |
| blue | oxford |
| dark-blue | oxford-60 |
| orange | mandarin |
| grey-tint1 | black-30 |
| grey-tint2 | black-40 |
| grey-tint3 | black-50 |
| grey-tint4 | black-70 |
| grey-tint5 | black-80 |
| pink-tint1 | black-5 |
| pink-tint2 | black-10 |
| pink-tint3 | black-20 |
| pink-tint4 | black-30 |
| pink-tint5 | black-50 |
| red | crimson |
| green | jade |
| orange-tint1 | _consult a designer_ |
| brown-tint1 | _consult a designer_ |
| yellow-tint1 | _consult a designer_ |
| green-tint1 | _consult a designer_ |
| bluegreen-tint1 | _consult a designer_ |
| silver-tint1 | _consult a designer_ |
| purple-tint1 | _consult a designer_ |
| purple-tint2 | black-50 (_consult a designer_) |
| red-tint1 | _consult a designer_ |
| red-tint2 | _consult a designer_ |
| red-tint3 | _consult a designer_ |
| red-tint4 | _consult a designer_ |
| red-tint5 | _consult a designer_ |
| blue-tint1 | _consult a designer_ |
| blue-tint2 | _consult a designer_ |
| blue-tint3 | _consult a designer_ |
| blue-tint4 | _consult a designer_ |
| blue-tint5 | _consult a designer_ |
| section-purple | velvet |
| section-light-purple | _consult a designer_ |
| section-blue | blue-80 |
| section-light-blue | sky |
| section-green | use `oColorsGetTint('jade', 65)` |
| section-light-green | _consult a designer_ |
| section-red | crimson |
| warm-1 | wheat |
| warm-2 | black-5 |
| warm-3 | black-20 |
| warm-4 | black-90 |
| warm-5 | white-60 |
| warm-6 | black-80 (_consult a designer_) |
| cold-1 | black-70 |
| cold-2 | black-80 |
| cold-3 | black-90 |
| blue-1 | oxford-30 |
| blue-2 | _consult a designer_ |
| purple-1 | velvet |
| purple-2 | _consult a designer_ |
| teal-1 | teal-40 |
| teal-2 | teal-80 |
| claret-1 | claret |
| claret-2 | candy |
| claret-inverse | claret-30 |
| org-b2b | org-b2c |
| org-b2c-dark | org-b2c-dark |
| org-b2c-light | org-b2c-light |

2

package.json
{
"name": "@financial-times/o-colors",
"type": "module",
"version": "6.6.3",
"version": "6.6.4",
"description": "The default colour palette for all FT products. The palette supports colour contrast checking, colour mixing and toneing.",

@@ -6,0 +6,0 @@ "keywords": [

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc