CSS ComponentThe latest version of this package is: 14.0.0, Opens in new window

The If color palette reflects the tonality of the brand: uncomplicated, warm and personal. It fulfills specific functions and manages content effectively.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/color@14.0.0

Table of Contents

Edit this section, Opens in new window

Accessibility

Typography

For every background color, we have found a corresponding AA compliant text color as the default text color. We use a ratio threshold of 5. We recommend this tool to check your color contrasts: https://webaim.org/resources/contrastchecker/.

Below is the Stylus mixin we use to generate AA compliant text colors while generating background color classes.

$color-text-wcag-ratio = 5

IDS_COLOR_GetCorrectContrastColor($color)
  if(contrast($color, $color-text-lightest-beige).ratio > $color-text-wcag-ratio){
    color $color-text-lightest-beige
  } else if(contrast($color, $color-text-brown).ratio > $color-text-wcag-ratio){
    color $color-text-brown
  } else {
    color $color-text-lightest-beige
  }

And here is how we do it with a SCSS/SASS mixin:

@import 'sass-color-helpers/stylesheets/_color-helpers.scss';

$color-text-wcag-ratio: 5;

@mixin IDS_COLOR_GetCorrectContrastColor($backgroundColor) {
  $contrast1: ch-color-contrast($backgroundColor, $color-text-lightest-beige);
  $contrast2: ch-color-contrast($backgroundColor, $color-text-brown);

  @if $contrast1 > $color-text-wcag-ratio {
    color: $color-text-lightest-beige;
  } @else if $contrast2 > $color-text-wcag-ratio {
    color: $color-text-brown;
  } @else {
    color: $color-text-lightest-beige;
  }
}

And LESS:

@color-text-wcag-ratio: 5;

.ch-color-luminance-raw(@rgb) {
  @result: if((@rgb < 0.03928), @rgb / 12.92, pow((@rgb + 0.055) / 1.055, 2.4, 16));
}

.ch-color-luminance(@color) {
  @red: red(@color) / 255;
  @green: green(@color) / 255;
  @blue: blue(@color) / 255;

  @rgba-lum-raw-red: .ch-color-luminance-raw(@red) [ @result];
  @rgba-lum-raw-green: .ch-color-luminance-raw(@green) [ @result];
  @rgba-lum-raw-blue: .ch-color-luminance-raw(@blue) [ @result];

  @result: 0.2126 * @rgba-lum-raw-red + 0.7152 * @rgba-lum-raw-green + 0.0722 * @rgba-lum-raw-blue;
}

.ch-color-contrast(@color1, @color2) {
  @luminance1: .ch-color-luminance(@color1) [ @result] + 0.05;
  @luminance2: .ch-color-luminance(@color2) [ @result] + 0.05;
  @ratio1: @luminance1 / @luminance2;
  @ratio: if((@luminance2 > @luminance1), 1 / @ratio1, @ratio1);

  @result: round(@ratio * 10) / 10;
}

.IDS_COLOR_GetCorrectContrastColor(@backgroundColor) {
  @contrast1: .ch-color-contrast(@backgroundColor, @color-text-lightest-beige) [ @result];
  @contrast2: .ch-color-contrast(@backgroundColor, @color-text-brown) [ @result];

  .contrastColor() when (@contrast1 > @color-text-wcag-ratio) {
    color: @color-text-lightest-beige;
  }

  .contrastColor() when (@contrast2 > @color-text-wcag-ratio) {
    color: @color-text-brown;
  }

  .contrastColor() when (default()) {
    color: @color-text-lightest-beige;
  }

  .contrastColor();
}
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor variables

Base

Name Hex Rgb Example
$color-base-light-blue-10097e2f7
#97e2f7 rgb(151, 226, 247)
$color-base-light-blue-2004cb0d3
#4cb0d3 rgb(76, 176, 211)
$color-base-light-blue-3005392b2
#5392b2 rgb(83, 146, 178)
$color-base-blue-1000054f0
#0054f0 rgb(0,84,240)
$color-base-blue-200004080
#004080 rgb(0, 64, 128)
$color-base-orange-100f09c00
#f09c00 rgb(240, 156, 0)
$color-base-beige-100faf9f7
#faf9f7 rgb(250,249,247)
$color-base-beige-200f6f3f0
#f6f3f0 rgb(246,243,240)
$color-base-beige-300f1ece8
#f1ece8 rgb(241,236,232)
$color-base-beige-400ede6e1
#ede6e1 rgb(237,230,225)
$color-base-beige-500e8e0d9
#e8e0d9 rgb(232,224,217)
$color-base-pink-100ffc9a6
#ffc9a6 rgb(255, 201, 166)
$color-base-pink-200ff8569
#ff8569 rgb(255, 133, 105)
$color-base-pink-300805c5c
#805c5c rgb(128, 92, 92)
$color-base-green-100217331
#217331 rgb(33, 115, 49)
$color-base-red-100bb320c
#bb320c rgb(187, 50, 12)
$color-base-brown-1006e625e
#6e625e rgb(110,98,94)
$color-base-brown-200331e11
#331e11 rgb(51,30,17)
$color-base-teal-100b5ede8
#b5ede8 rgb(181, 237, 232)
$color-base-teal-20087c7ba
#87c7ba rgb(135, 199, 186)
$color-base-teal-3006b9994
#6b9994 rgb(107, 153, 148)
$color-base-yellow-100ffe082
#ffe082 rgb(255, 224, 130)
$color-base-yellow-200fcc74f
#fcc74f rgb(252, 199, 79)
$color-base-yellow-300b08759
#b08759 rgb(176, 135, 89)

Accent

Name Value Example
$color-accent-blue
#0054f0

Background

Name Value Example
$color-background-lightest-beige
#faf9f7
$color-background-lighter-beige
#f6f3f0
$color-background-light-beige
#f1ece8
$color-background-beige
#ede6e1
$color-background-dark-beige
#e8e0d9

Text

Name Value Example
$color-text-lightest-beige
#faf9f7
$color-text-light-brown
#6e625e
$color-text-brown
#331e11

Status

Name Value Example
$color-status-red
#bb320c
$color-status-green
#217331

Infographic

Name Value Example
$color-infographic-dark-red
#805c5c
$color-infographic-red
#ff8569
$color-infographic-light-red
#ffc9a6
$color-infographic-dark-yellow
#b08759
$color-infographic-yellow
#fcc74f
$color-infographic-light-yellow
#ffe082
$color-infographic-dark-green
#6b9994
$color-infographic-green
#87c7ba
$color-infographic-light-green
#b5ede8
$color-infographic-dark-blue
#5392b2
$color-infographic-blue
#4cb0d3
$color-infographic-light-blue
#97e2f7

Interaction

Name Value Example
$color-interaction-dark-blue
#004080
$color-interaction-orange
#f09c00

Cta

Name Value Example
$color-cta
#0054f0

Shadow

Name Value Example
$color-shadow-light
#6e625e
$color-shadow-dark
#331e11
Edit this section, Opens in new window

Classnames

Here you will see the full reference of exposed classnames to be utilised as helper classes for your html styling.

NOTE!

These are not class helpers to be used freely. Follow our design guidelines on how to use the colors correctly.

Background-color class helpers Example
class="if color accent blue"
class="if color interaction dark-blue"
class="if color background dark-beige"
class="if color background beige"
class="if color background light-beige"
class="if color background lighter-beige"
class="if color background lightest-beige"
class="if color text lightest-beige"
class="if color text brown"
class="if color text light-brown"
class="if color infographic dark-red"
class="if color infographic red"
class="if color infographic light-red"
class="if color infographic dark-yellow"
class="if color infographic yellow"
class="if color infographic light-yellow"
class="if color infographic dark-green"
class="if color infographic green"
class="if color infographic light-green"
class="if color infographic dark-blue"
class="if color infographic blue"
class="if color infographic light-blue"
class="if color status green"
class="if color status red"
Edit this section, Opens in new window

App development

For application development, we also expose tokens for native app development, like Android and IOS. We also expose tokens for JavaScript development.

JavaScript

We expose this file: @ids-core/color/src/variables/js/variables.esm.js, in this format:

module.exports = {
  "color": {"background": {
      "lightest-beige": {
        "value": "#faf9f7",
        "filePath": "./src/tokens/background.json",
        "isSource": true,
        "original": {
          "value": "{color.base.beige.100.value}"
        },
        "name": "ColorBackgroundLightestBeige",
        "attributes": {
          "category": "color",
          "type": "background",
          "item": "lightest-beige"
        },
        "path": [
          "color",
          "background",
          "lightest-beige"
        ]
      },},}
}

This can be used like so:

import colors from '@ids-core/color/src/variables/js/variables.module.js';

const myTitle = ({title}) => (<h1 style={{color: color.text.brown.value}})>{title}</h1>);

And we also expose this file: @ids-core/color/src/variables/js/variables.esm.js, in this format:

export const ColorBaseGreen100 = "#217331";
export const ColorBaseRed100 = "#bb320c";
export const ColorBaseBrown100 = "#6e625e";
export const ColorBaseBrown200 = "#331e11";
export const ColorBaseTeal100 = "#b5ede8";

This can be used like so:

import { ColorTextBrown } from '@ids-core/color/src/variables/js/variables.esm.js';

const myTitle = ({title}) => (<h1 style={{color: ColorTextBrown}})>{title}</h1>);

Android

For Android development, you might be interested in this file: @ids-core/color/src/variables/android/colors.xml, in this format:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <color name="color_background_lightest_beige">#fffaf9f7</color>
  <color name="color_background_lighter_beige">#fff6f3f0</color>
  <color name="color_background_light_beige">#fff1ece8</color>
  <color name="color_background_beige">#ffede6e1</color>
  <color name="color_background_dark_beige">#ffe8e0d9</color>
  <!-- ... -->
</resources>

IOS

For IOS development, we have IfDesignSystemColor.h and IfDesignSystemColor.m under src/variables/ios, and IfDesignSystem.swift and IfDesignSystemColor.swift under src/variables/ios-swift.

Flutter

We also have ifdesignsystem.dart under src/variables/flutter.

Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.6.3 (2021-09-17)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.1.0 (2021-05-07)

Features

  • 🎸 Add alias for state design tokens (6ab4ea1)
  • 🎸 Add new color, Wiener Schnitzel, the complement of BL1 (a7d0cb9)
  • 🎸 Add tokens for shadow colors (6ffbb85)
  • 🎸 Add typescript definition file for color variables (c42d6cf)

12.0.0 (2021-05-05)

Bug Fixes

  • 🐛 Do not add generated date on generated files (2708429)
  • 🐛 Do not generate a file header for tokens (ab5d86f)
  • 🐛 Fix some layout bugs with navigational cards (565db7f)
  • 🐛 Update references (c08f107)

Code Refactoring

Features

  • 🎸 Swapped theo out for style-dictionary (666ab57)

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Teasers are no more. It has been replaces with Lifestyle Navigational

Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks

  • 🧨 Notification is now renamed to Alert Banner

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

7.0.0 (2020-11-16)

  • Merged PR 31168: Remove old colors from code (cd7e1dc), closes #311123

chore

BREAKING CHANGES

  • 🧨 OLD COLORS ARE NOW REMOVED This change was first done by removing

the old colors from the documentation before summer 2020. This step removes the old colors from the code completely.

  • 🧨 OLD COLORS ARE NOW REMOVED This change was first done by removing

the old colors from the documentation before summer 2020. This step removes the old colors from the code completely.

6.23.2 (2020-07-02)

Bug Fixes

  • 🐛 Fix typo from acccent to accent for color.less (be13fd4)

6.22.0 (2020-07-01)

Features

  • 🎸 Add light-brown as background-color aswell (28d5f40)
  • 🎸 Add new color categories while keeping old (aff1508)
  • 🎸 Add new color categories, update documentation (5496822)
  • 🎸 Show custom edit links when available (5a4858d)

6.18.0 (2020-05-26)

Bug Fixes

  • 🐛 Remove redundant color from support colors (b59376f)

6.16.0 (2020-05-19)

Bug Fixes

  • 🐛 Use correct customPath for typo tokens for doc gen (f53294b)

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.5.4 (2020-04-08)

Bug Fixes

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.147 (2020-03-02)

Features

  • 🎸 Add notification component (3b1a25e)
  • 🎸 Make the documentation a bit more responsive (2d4278e)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • 🐛 Remove duplicate support color (a7f346d)
  • Use correct name (2defa33)

5.0.1-alpha.109 (2020-01-20)

Features

  • 🎸 Add sketch generation for colors (40cda3e)

5.0.1-alpha.106 (2020-01-14)

Bug Fixes

  • 🐛 Fix missing color.less functionality (d1a333f)

5.0.1-alpha.87 (2019-12-04)

Bug Fixes

  • 🐛 Use correct color for buttons (b6a938b)

Features

  • 🎸 Add two new support colors, used in buttons (2b5269b)

5.0.1-alpha.86 (2019-12-03)

Features

  • 🎸 Add more support colors (79c9758)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.1.0 (2021-05-07)

Features

  • 🎸 Add alias for state design tokens (6ab4ea1)
  • 🎸 Add new color, Wiener Schnitzel, the complement of BL1 (a7d0cb9)
  • 🎸 Add tokens for shadow colors (6ffbb85)
  • 🎸 Add typescript definition file for color variables (c42d6cf)

12.0.0 (2021-05-05)

Bug Fixes

  • 🐛 Do not add generated date on generated files (2708429)
  • 🐛 Do not generate a file header for tokens (ab5d86f)
  • 🐛 Fix some layout bugs with navigational cards (565db7f)
  • 🐛 Update references (c08f107)

Code Refactoring

Features

  • 🎸 Swapped theo out for style-dictionary (666ab57)

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Teasers are no more. It has been replaces with Lifestyle Navigational

Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks

  • 🧨 Notification is now renamed to Alert Banner

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

7.0.0 (2020-11-16)

  • Merged PR 31168: Remove old colors from code (cd7e1dc), closes #311123

chore

BREAKING CHANGES

  • 🧨 OLD COLORS ARE NOW REMOVED This change was first done by removing

the old colors from the documentation before summer 2020. This step removes the old colors from the code completely.

  • 🧨 OLD COLORS ARE NOW REMOVED This change was first done by removing

the old colors from the documentation before summer 2020. This step removes the old colors from the code completely.

6.23.2 (2020-07-02)

Bug Fixes

  • 🐛 Fix typo from acccent to accent for color.less (be13fd4)

6.22.0 (2020-07-01)

Features

  • 🎸 Add light-brown as background-color aswell (28d5f40)
  • 🎸 Add new color categories while keeping old (aff1508)
  • 🎸 Add new color categories, update documentation (5496822)
  • 🎸 Show custom edit links when available (5a4858d)

6.18.0 (2020-05-26)

Bug Fixes

  • 🐛 Remove redundant color from support colors (b59376f)

6.16.0 (2020-05-19)

Bug Fixes

  • 🐛 Use correct customPath for typo tokens for doc gen (f53294b)

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.5.4 (2020-04-08)

Bug Fixes

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.147 (2020-03-02)

Features

  • 🎸 Add notification component (3b1a25e)
  • 🎸 Make the documentation a bit more responsive (2d4278e)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • 🐛 Remove duplicate support color (a7f346d)
  • Use correct name (2defa33)

5.0.1-alpha.109 (2020-01-20)

Features

  • 🎸 Add sketch generation for colors (40cda3e)

5.0.1-alpha.106 (2020-01-14)

Bug Fixes

  • 🐛 Fix missing color.less functionality (d1a333f)

5.0.1-alpha.87 (2019-12-04)

Bug Fixes

  • 🐛 Use correct color for buttons (b6a938b)

Features

  • 🎸 Add two new support colors, used in buttons (2b5269b)

5.0.1-alpha.86 (2019-12-03)

Features

  • 🎸 Add more support colors (79c9758)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

5.0.1-alpha.46 (2019-11-09)

Features

  • 🎸 Add color scss generation (33f976e)

5.0.1-alpha.44 (2019-11-08)

Bug Fixes

  • 🐛 Adjustments to suppor colors (1c67e53)

Features

  • 🎸 Add support colors, replace hardcoded rgb to variables (32a2b9e)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)
Edit this section, Opens in new window
Contact us, Opens in new window