CSS ComponentThe latest version of this package is: 17.0.30-alpha.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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/color@17.0.30-alpha.0
Preview

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

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 tokens from '@ids-core/color/src/variables/js/variables.module.js';

const myTitle = ({ title }) => (<h1 style={{ color: tokens.ids.color.text.primary['on-light'].value }})>
{
    title
}
</h1>)
;

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

…
export const IDS_COLOR_INFOGRAPHIC_1100 = "rgb(76, 176, 211)";
export const IDS_COLOR_INFOGRAPHIC_1200 = "rgb(83, 146, 178)";
export const IDS_COLOR_SHADOW_LIGHT = "rgb(110, 98, 94)";
export const IDS_COLOR_SHADOW_DARK = "rgb(51, 30, 17)";
export const IDS_COLOR_STATES_DISABLED = "rgba(110,98,94,0.3)";
export const IDS_COLOR_STATES_ACTIVE = "rgb(0, 64, 128)";
…

This can be used like so:

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

const myTitle = ({ title }) => (<h1 style={{ color: IDS_COLOR_TEXT_PRIMARY_ON_LIGHT }})>
{
    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="ids_color_light_blue_300">#ff5392b2</color>
    <color name="ids_color_blue_100">#ff0054f0</color>
    <color name="ids_color_blue_200">#ff004080</color>
    <color name="ids_color_orange_100">#fff09c00</color>
    <color name="ids_color_beige_100">#fffaf9f7</color>
    <color name="ids_color_beige_200">#fff6f3f0</color>
    <!-- ... -->
</resources>

IOS

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

Flutter

We also have ids-color.dart under src/variables/flutter.

Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Base tokens

NameValueIs aliased in
ids-color-light-blue-100rgb(151, 226, 247)
rgb(151, 226, 247)
ids-color-light-blue-200rgb(76, 176, 211)
rgb(76, 176, 211)
ids-color-light-blue-300rgb(83, 146, 178)
rgb(83, 146, 178)
ids-color-blue-100rgb(0, 84, 240)
rgb(0, 84, 240)
ids-color-blue-200rgb(0, 64, 128)
rgb(0, 64, 128)
ids-color-orange-100rgb(240, 156, 0)
rgb(240, 156, 0)
ids-color-beige-100rgb(250, 249, 247)
rgb(250, 249, 247)
ids-color-beige-200rgb(246, 243, 240)
rgb(246, 243, 240)
ids-color-beige-300rgb(241, 236, 232)
rgb(241, 236, 232)
ids-color-beige-400rgb(237, 230, 225)
rgb(237, 230, 225)
ids-color-beige-500rgb(232, 224, 217)
rgb(232, 224, 217)
ids-color-pink-100rgb(255, 201, 166)
rgb(255, 201, 166)
ids-color-pink-200rgb(255, 133, 105)
rgb(255, 133, 105)
ids-color-pink-300rgb(128, 92, 92)
rgb(128, 92, 92)
ids-color-green-100rgb(33, 115, 49)
rgb(33, 115, 49)
ids-color-red-100rgb(187, 50, 12)
rgb(187, 50, 12)
ids-color-brown-100rgb(110, 98, 94)
rgb(110, 98, 94)
ids-color-brown-200rgb(51, 30, 17)
rgb(51, 30, 17)
ids-color-teal-100rgb(181, 237, 232)
rgb(181, 237, 232)
ids-color-teal-200rgb(135, 199, 186)
rgb(135, 199, 186)
ids-color-teal-300rgb(107, 153, 148)
rgb(107, 153, 148)
ids-color-yellow-100rgb(255, 224, 130)
rgb(255, 224, 130)
ids-color-yellow-200rgb(252, 199, 79)
rgb(252, 199, 79)
ids-color-yellow-300rgb(176, 135, 89)
rgb(176, 135, 89)
ids-color-whitergb(255, 255, 255)
rgb(255, 255, 255)

Accent tokens

NameValueIs aliased in
ids-color-accent
rgb(0, 84, 240)

Background tokens

NameValueIs aliased in
ids-color-background-100
rgb(250, 249, 247)
ids-color-background-200
rgb(246, 243, 240)
ids-color-background-300
rgb(241, 236, 232)
ids-color-background-400
rgb(237, 230, 225)
ids-color-background-500
rgb(232, 224, 217)

Cta tokens

NameValueIs aliased in
ids-color-cta
rgb(0, 84, 240)

Infographic tokens

NameValueIs aliased in
ids-color-infographic-100
rgb(255, 201, 166)
ids-color-infographic-200
rgb(255, 133, 105)
ids-color-infographic-300
rgb(128, 92, 92)
ids-color-infographic-400
rgb(255, 224, 130)
ids-color-infographic-500
rgb(252, 199, 79)
ids-color-infographic-600
rgb(176, 135, 89)
ids-color-infographic-700
rgb(181, 237, 232)
ids-color-infographic-800
rgb(135, 199, 186)
ids-color-infographic-900
rgb(107, 153, 148)
ids-color-infographic-1000
rgb(151, 226, 247)
ids-color-infographic-1100
rgb(76, 176, 211)
ids-color-infographic-1200
rgb(83, 146, 178)

Shadow tokens

NameValueIs aliased in
ids-color-shadow-light
rgb(110, 98, 94)
ids-color-shadow-dark
rgb(51, 30, 17)

States tokens

NameValueIs aliased in
ids-color-states-disabled
rgba(110,98,94,0.3)
ids-color-states-active
rgb(0, 64, 128)
ids-color-states-hover
rgb(0, 64, 128)
ids-color-states-focus
rgb(0, 84, 240)

Status tokens

NameValueIs aliased in
ids-color-status-error
rgb(187, 50, 12)
ids-color-status-warning
rgb(252, 199, 79)
ids-color-status-success
rgb(33, 115, 49)

Text tokens

NameValueIs aliased in
ids-color-text-subtle
rgb(110, 98, 94)
ids-color-text-primary-on-light
rgb(51, 30, 17)
ids-color-text-primary-on-dark
rgb(250, 249, 247)
ids-color-text-primary-normal
rgb(51, 30, 17)
ids-color-text-primary-inverse
rgb(250, 249, 247)
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.22.4 (2022-05-06)

Documentation Updates

  • color: update App Development section with new references (ec50984)
  • color: use different set of props to be able to group tokens (d9020d7)

Code Refactoring

  • color: remove the local generation of design token documenentation files (0048891) , closes #597319
  • design-token: adjust import for view generation (9e50b20)

14.22.3 (2022-05-04)

Documentation Updates

  • color: adjust the color documentation generation for the color package (3b1d552)

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.19.0 (2022-04-13)

Documentation Updates

  • ✏️ Update documentation elements to prepare for Dark Mode (7b0b859) . We are utilizing some of the IDS components when documenting our components, and these elements needed to be updated with the .ids-doc CSS flag so we can add themes to them. In the same change, we also ammended some of the documentation to be more up to speed with current state.

Code Refactoring

  • 💡 Improve the palette documentation generation (94026c3) . We've created some React Component helpers for the palette and did some restructuring on how to present the palette.

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Code Refactoring

  • 💡 Add updated alias for on-light/dark mode .> inverse (5e27712)

14.9.0 (2022-03-03)

Miscellaneous chores

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

14.4.0 (2022-02-11)

Bug Fixes

  • Make sure CSS Variables are imported separately (2c8ff6c)

reinstall (eafd162)

14.3.0 (2022-02-09)

Features

  • 🎸 Use new design token structure (305b95d)

Bug Fixes

  • 🐛 Fix css var import (15dc2e6)

  • Use a better order for infographics colors (9626c36)

  • Use correct variable generation transforms (a97d31c)

Code Refactoring

  • 💡 Move generation away from mixin declaration (344dee0)

  • 💡 Remove interaction colors, no longer needed (fcbc292)

  • Dedupe code (b5ca2e8)

  • Let the css variables be inlcuded with the var file (9525437)

  • Use css file for css variables (fc16ac8)

  • Add engines for all packages (e95dfff)

  • generate variables (3d27972)

Regenerate (5dae788)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • 💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

  • Readd orange color, deprecate it later (534a92e)

  • rebuild and reinstall (f9fb687)

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

14.0.0 (2021-11-10)

Documentation Updates

  • Adjust navigational cards (4bd7693)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ 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!

Documentation Updates

  • ✏️ Adjust documentation (8e77c36)

  • ✏️ Clean up for frontmatter and token generation (5fff306) , closes #490579

  • ✏️ Documentation adjustments (73c09e3) , closes #467386

  • ✏️ Update CSS documentation (75a34a9) , closes #467386

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

Code Refactoring

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Remove manual box-shadow on example (5cd6477)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

  • 🤖 Prune changelogs (2c660c2)

  • 🤖 Use correct routing for color, breakpoint, icons and typography (237027f) , closes #467386

bootstrap (6fc1ed8)

  • prepare for merge (0184490)

  • rebuild after fixing navigation structure (3995914)

reinstall (da80dba)

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.6.3 (2021-09-17)

Bug Fixes

  • 🐛 Update repository urls (3dae3a3) , closes #465976

  • 🤖 Rearrange diffs for test, use grey color for unaffected (1834399)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

  • 🤖 Replace node-sass with dart-sass (078262c) , closes #434376

  • 🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Rebuild variables (846fa3e)

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

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)

Documentation Updates

  • ✏️ Add more documentation regarding tokens (d2ceec0)

  • ✏️ Documentation fixes (01216c0)

Miscellaneous chores

  • 🤖 Improve look and feel of tokens (93a6322)

12.0.0 (2021-05-05)

⚠ 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

Features

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

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)

Documentation Updates

  • ✏️ Rearrange documentation structure (47ea594)

  • ✏️ Update documentation references to tokens (07d1440)

Code Refactoring

  • 💡 Remove styling for .if.heading.sub (3adc2c2)

  • 💡 Remove Teasers, added Text and Lifestyle cards (1247479) , closes #336508

  • 💡 Rename and consolidate mixins (67cf470) , closes #268081

  • 💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

  • 🤖 Convert typography tokens from theo to SD (e48f255)

  • 🤖 Finalize breakpoint token conversion (f50ea0d)

  • 🤖 Rebuild after fix (501a947)

  • 🤖 Regeneration of variable files without dates (5182c6e)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Reinstall (69e1a5b)

  • 🤖 Remove old generated preprocessor files (9b7fcaa)

  • 🤖 Update all design token references (c640d15)

  • 🤖 Updating links (70f166e)

  • Adjust npm scripts and regenerate (b731d5c)

rebuild (7edb430)

  • 🤖 Rename Change Log to Changelog (d412e63)

  • 🤖 Remove all references to sketch (35fc554) , closes #339203

  • 🤖 Update package fields (200c0af)

  • reinstall packages (fcfacf4)

7.1.0 (2020-11-16)

Features

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

7.0.0 (2020-11-16)

⚠ 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.

  • 🤖 Remove old colors from code (f3eae5f) , closes #311123

6.43.3 (2020-11-03)

Miscellaneous chores

  • 🤖 Manually set version (e4d9ca6)

  • 🤖 Remove references to ligatures (4894639) , closes #307377

  • 🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.0 (2020-10-12)

Miscellaneous chores

  • 🤖 Add what-input to demo and dev files (56801b7)

6.31.0 (2020-09-25)

Miscellaneous chores

  • 🤖 Adjust color package documentation (c43a967)

  • 🤖 Remove old doc files (a0cc4b7)

6.29.3 (2020-09-07)

Documentation Updates

  • ✏️ Merge atoms/molecules/organisms into components (90ed590)

6.26.12 (2020-08-03)

Documentation Updates

  • ✏️ Update documentation for the new registry (3e7ba20)

Miscellaneous chores

  • 🤖 lerna bootstrap (d835ec9)

  • 🤖 Temporarily remove package-lock.json-files (87b3f7f)

  • 🤖 Update references to new scope (b5575dd)

6.26.10 (2020-07-14)

Miscellaneous chores

  • 🤖 Manually update some links (ecc0133)

  • 🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)

6.25.0 (2020-07-07)

Miscellaneous chores

  • 🤖 Update some html and generation to fit new ds logo (1f5f0a6)

6.23.2 (2020-07-02)

Bug Fixes

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

Miscellaneous chores

  • 🤖 Add missing tests for colors (716f88e)

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)

Features

  • 🎸 Add lightbrown 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)

Documentation Updates

  • ✏️ Update color documentation, more examples + guidelines (40aa854)

  • ✏️ Update documentation for colors (3faeaad)

  • ✏️ Use correct shortname for background in color doc (a563998)

  • ✏️ Use correct tokens for color design token documentation (36b1737)

Miscellaneous chores

  • 🤖 Add description of color package to package.json (db9ee3e)

  • 🤖 Add new generated files (dfaafc5)

  • 🤖 Prepare color package for new color structure (133632a)

  • 🤖 Remove old preprocessor files (5429f70)

  • 🤖 Rename darkRed to red for status color (ba76a92)

6.21.6 (2020-06-11)

Miscellaneous chores

  • 🤖 Remove .zip files from .npmignore (b3bc7dc)

6.21.0 (2020-06-04)

Documentation Updates

  • ✏️ Improvements for documentation site (83680e4)

6.19.0 (2020-06-02)

Documentation Updates

  • ✏️ Add documentation regarding token files and classes (130ebaa)

Miscellaneous chores

  • 🤖 Give notice that files are not ment to be edited (a6cebb9)

reinstall (3416c65)

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)

Documentation Updates

  • ✏️ Separate color docs into design and components (4a6ca36)

6.15.5 (2020-05-15)

Miscellaneous chores

  • add frontmatter data (3e9b8ca)

  • move files (2dffb3f)

  • move files (c2a825e)

  • prepped and ready to separate documentation site from code (d3e1fd9)

  • pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

  • Use correct customPath in frontmatter (c092c82)

  • Use correct subcategory in frontmatter (2a8908d)

6.15.4 (2020-05-14)

Miscellaneous chores

6.15.2 (2020-05-11)

Miscellaneous chores

6.15.0 (2020-05-07)

Miscellaneous chores

6.10.9 (2020-04-22)

Miscellaneous chores

  • 🤖 Add *.zip-files to .npmignore-files (062b8b0)

  • 🤖 Remove references to verb in package.json files (cfdaaec)

6.10.6 (2020-04-17)

Miscellaneous chores

6.9.1 (2020-04-16)

Documentation Updates

  • ✏️ Use correct badge color in README.md (03b563e)

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.6.0 (2020-04-09)

Documentation Updates

  • ✏️ Change edit this document to edit this section (791b646)

6.5.4 (2020-04-08)

Bug Fixes

6.5.3 (2020-04-06)

Documentation Updates

  • ✏️ Some more sg updates and tweaks (d1d6802)

6.3.4 (2020-04-01)

Documentation Updates

  • ✏️ Add CSS class name to color palette (a993fcf)

Miscellaneous chores

  • 🤖 Use more of if styling on documentation site (2eaf386)

6.3.1 (2020-03-30)

Documentation Updates

  • ✏️ Update documentation sections for sketch and xd libs (e66061b)

5.0.4 (2020-03-14)

Miscellaneous chores

  • 🤖 Delete really old install files, update README files (c5d4893)

  • 🤖 Remove .npmrc fles (4e26249)

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

Miscellaneous chores

5.0.1-alpha.150 (2020-03-05)

Miscellaneous chores

  • 🤖 Merge similar support colors (adaf9b8)

5.0.1-alpha.149 (2020-03-05)

Miscellaneous chores

  • 🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables

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

Features

  • 🎸 Add notification component (3b1a25e)

  • 🎸 Make the documentation a bit more responsive (2d4278e)

Miscellaneous chores

  • 🤖 Add back lightGreen (2e68e66)

  • 🤖 Reorder color nomenclature for newest support blue (57c1656)

  • lerna bootstrap (218a647)

  • lerna bootstrap (672c766)

  • lerna bootstrap (4d64d70)

  • testing hardcoded value (a881763)

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

5.0.1-alpha.117 (2020-02-06)

Documentation Updates

  • ✏️ Add edit links to documentation files (7c6e770)

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

Bug Fixes

  • 🐛 Remove duplicate support color (a7f346d)

  • Use correct name (2defa33)

Miscellaneous chores

  • 🤖 Update sketch generation for colors (55ac950)

regenerate (ad04d03)

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

Features

  • 🎸 Add sketch generation for colors (40cda3e)

Miscellaneous chores

  • 🤖 Fixing script and finalize sketch color gen (f5ae0db)

  • 🤖 Temporarily remove sketch symbols from color (8ef5953)

  • testing sketch (003a233)

5.0.1-alpha.107 (2020-01-15)

Miscellaneous chores

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

Bug Fixes

  • 🐛 Fix missing color.less functionality (d1a333f)

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

Features

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

Bug Fixes

  • 🐛 Use correct color for buttons (b6a938b)

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

Features

  • 🎸 Add more support colors (79c9758)

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

Documentation Updates

  • ✏️ Use correct Bold Name for blue color (d4274d4)

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

Documentation Updates

  • ✏️ Scope all examples to .if (26bd7cd)

5.0.1-alpha.70 (2019-11-28)

Miscellaneous chores

  • 🤖 Remove polymer, updated styling accordingly (04e1941)

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)

Miscellaneous chores

5.0.1-alpha.48 (2019-11-12)

Miscellaneous chores

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

Features

  • 🎸 Add color scss generation (33f976e)

Documentation Updates

  • ✏️ Make stylus and scss vars available in docs and code (35281f4)

Miscellaneous chores

  • 🤖 Add sass deps (9c53946)

  • 🤖 Some styling generation fixes (fa1a733)

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

Features

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

Bug Fixes

  • 🐛 Adjustments to suppor colors (1c67e53)

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

Miscellaneous chores

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

Bug Fixes

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

5.0.1-alpha.32 (2019-10-31)

Miscellaneous chores

  • 🤖 Update components and documentation from sketches (1b8b6f6)

5.0.1-alpha.22 (2019-10-23)

Documentation Updates

  • ✏️ Update VID documentation (3b1fdd7) . Updated from pdf file. Added .ase file downloads, logotype downloads

5.0.1-alpha.20 (2019-10-22)

Miscellaneous chores

5.0.1-alpha.16 (2019-10-16)

Documentation Updates

  • ✏️ Update color documentation for background colors (45753e5)

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

  • 🤖 More updates to layout and documentation PT 4 (4ccd4a0)

  • 🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

  • 🤖 lerna bootstrap (2aba4f1)

  • 🤖 npm i && lerna bootstrap (135f0ac)

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

Features

  • 🎸 Documentation update and add some icons (df1cc97)

Miscellaneous chores

  • 🤖 lerna bootstrap (50ad9ae)

  • 🤖 Regenerate documentation for colors (2977b81)

  • 🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Replace .gb prefix with .if (c5e7edb)

  • 🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Finalized documentation for colors (8cd236c)

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add color to subheading (8e60e43)

  • 🎸 Added new colors from VID (880aed7) , closes #72358 . NO DOCUMENTATION ADDED

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

  • 🤖 More updates to layout and documentation PT 4 (4ccd4a0)

  • 🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

  • 🤖 lerna bootstrap (2aba4f1)

  • 🤖 npm i && lerna bootstrap (135f0ac)

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

Features

  • 🎸 Documentation update and add some icons (df1cc97)

Miscellaneous chores

  • 🤖 lerna bootstrap (50ad9ae)

  • 🤖 Regenerate documentation for colors (2977b81)

  • 🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Replace .gb prefix with .if (c5e7edb)

  • 🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Finalized documentation for colors (8cd236c)

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add color to subheading (8e60e43)

  • 🎸 Added new colors from VID (880aed7) , closes #72358 . NO DOCUMENTATION ADDED

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

  • 🤖 lerna bootstrap (2aba4f1)

  • 🤖 npm i && lerna bootstrap (135f0ac)

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

Features

  • 🎸 Documentation update and add some icons (df1cc97)

Miscellaneous chores

  • 🤖 lerna bootstrap (50ad9ae)

  • 🤖 Regenerate documentation for colors (2977b81)

  • 🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Replace .gb prefix with .if (c5e7edb)

  • 🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Finalized documentation for colors (8cd236c)

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add color to subheading (8e60e43)

  • 🎸 Added new colors from VID (880aed7) , closes #72358 . NO DOCUMENTATION ADDED

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Finalized documentation for colors (8cd236c)

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add color to subheading (8e60e43)

  • 🎸 Added new colors from VID (880aed7) , closes #72358 . NO DOCUMENTATION ADDED

4.2.0 (2019-07-08)

Features

  • 🎸 Add color to subheading (8e60e43)

  • 🎸 Added new colors from VID (880aed7) , closes #72358 . NO DOCUMENTATION ADDED

Miscellaneous chores

3.1.6 (2019-04-12)

Documentation Updates

  • ✏️ Clarify usage of npm token, and change name to gb (224fe32)

3.0.0 (2019-01-15)

⚠ BREAKING CHANGES

  • Class syntax has completely changed.

Features

Miscellaneous chores

  • 🤖 Cleanup and finalized scoping (9324126)

2.7.2 (2018-11-21)

Bug Fixes

  • 🐛 Remove all references to verb (2397d6b)

2.6.2 (2018-11-19)

Miscellaneous chores

  • 🤖 Remove references to guybrush in documentation, for nw (002e662)

2.6.1 (2018-11-19)

Documentation Updates

2.6.0 (2018-11-16)

Features

  • 🎸 Add new components for forms, text-fields and selects (5b69d5c)

2.4.6 (2018-10-26)

Documentation Updates

  • ✏️ Update documentation to reflect sandboxed examples (c16884f)

2.4.4 (2018-10-25)

Code Refactoring

  • 💡 Refactor styleguide, new theme (c202302)

2.4.1 (2018-09-27)

Code Refactoring

  • 💡 Use figure and figcaption for color palettes. Fixes #112 (05cb624)

2.4.0 (2018-09-27)

Features

  • 🎸 Add a darker tint of blue to support colors (9afb5e6)

Bug Fixes

  • 🐛 Add missing contrast text color to support colors (6173d7b)

Code Refactoring

  • 💡 Change color names to a scheme that has more colors (8755d0b)

Documentation Updates

  • ✏️ Add more color examples to color documentation (bfe3548)

1.20.0 (2018-09-21)

Miscellaneous chores

  • 🤖 Remove extra pound(#) from data-skecth-color attribute (155c9e4)

1.18.2 (2018-09-19)

Miscellaneous chores

  • 🤖 Make gulp run more silent (56e050e)

1.18.1 (2018-09-17)

Miscellaneous chores

  • 🤖 Add a .npmrc into each module (eed608f)

  • release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

  • release: :bookmark: publish v1.18.0 (aa3271d)

1.17.1 (2018-09-18)

Miscellaneous chores

  • release: :bookmark: publish v1.17.1 (2d8219c)

1.18.1 (2018-09-17)

Miscellaneous chores

  • 🤖 Add a .npmrc into each module (eed608f)

  • release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

  • release: :bookmark: publish v1.18.0 (aa3271d)

1.17.0 (2018-09-10)

Miscellaneous chores

  • release: :bookmark: publish v1.17.0 (01db781)

1.15.0 (2018-09-07)

Miscellaneous chores

  • release: :bookmark: publish v1.15.0 (31be150)

1.14.0 (2018-09-06)

Miscellaneous chores

  • release: :bookmark: publish v1.14.0 (7b15e64)

1.13.0 (2018-09-04)

Code Refactoring

  • 💡 Ease footprint of modules (70fe5c9)

Miscellaneous chores

  • release: :bookmark: publish v1.13.0 (b99e16d)

1.12.1 (2018-08-23)

Bug Fixes

  • 🐛 Fix sketch files generation (dcb614f)

Miscellaneous chores

  • 🤖 Some refactoring, added version to bundle, package def (e4ee4a8) . to stylus files, updated prism and templates

  • release: :bookmark: publish v1.12.1 (189057f)

1.12.0 (2018-08-22)

Miscellaneous chores

  • release: :bookmark: publish v1.12.0 (7c44ddc)

1.11.0 (2018-08-21)

Features

  • 🎸 Add new support color, milk punch, used for hover (4348788)

Bug Fixes

  • 🐛 Actually include documentation of support colors (85807d3)

  • 🐛 Fix faulty sketch symbol reference (a6f0ec2)

  • 🐛 No need to generate text colors for support colors (ba70319)

  • 🐛 Some fixes with missing ident in color generation (8ee18b4)

Miscellaneous chores

  • packages: don'tuse dist in filename (c65ce81)

  • release: :bookmark: publish v1.11.0 (cbd5359)

1.10.35 (2018-08-20)

Miscellaneous chores

  • release: :bookmark: publish v1.10.35 (719ac06)

1.10.34 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.34 (3af5229)

1.10.33 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.33 (adec027)

1.10.32 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.32 (994e8a8)

1.10.31 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.31 (7a31e83)

1.10.30 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.30 (2fbaba0)

1.10.29 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.29 (d9cdb30)

1.10.28 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.28 (70864a5)

1.10.27 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.27 (4ff395c)

1.10.26 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.26 (30d9bbc)

1.10.25 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.25 (a77f3e4)

1.10.24 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.24 (ff3fe91)

1.10.23 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.23 (a1df933)

1.10.22 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.22 (04a1fbc)

1.10.21 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.21 (94e201d)

1.10.20 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.20 (25c40aa)

1.10.19 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.19 (607b524)

1.10.18 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.18 (ef6b333)

1.10.17 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.17 (5e54e21)

1.10.16 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.16 (479e563)

1.10.15 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.15 (508bffb)

1.10.14 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.14 (585912a)

1.10.13 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.13 (9fc1d4b)

1.10.12 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.12 (e638d67)

1.10.11 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.11 (e329aea)

1.10.10 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.10 (b594d1e)

1.10.9 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.9 (6f68c59)

1.10.8 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.8 (1b7ef57)

1.10.7 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.7 (95bc695)

1.10.6 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.6 (ad7cbab)

1.10.5 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.5 (a7efeed)

1.10.4 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.4 (4f08bfa)

1.10.3 (2018-08-17)

Documentation Updates

  • ✏️ Update onboarding documentation (505ae9b)

Miscellaneous chores

  • release: :bookmark: publish v1.10.3 (7ca1bcf)

1.10.2 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.2 (781968c)

1.10.1 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.1 (aee140f)

1.10.0 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.0 (7dac7da)

  • table: scaffolding (1d06368)

1.9.1 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.9.1 (0516f24)

1.9.0 (2018-08-15)

Features

  • 🎸 Add support colors for notifications (ae7b761)

Miscellaneous chores

  • release: :bookmark: publish v1.9.0 (9718b47)

1.8.0 (2018-08-14)

Miscellaneous chores

  • release: :bookmark: publish v1.8.0 (35ff480)

1.7.0 (2018-08-13)

Features

  • 🎸 Add support color (af4f2e5)

  • 🎸 Generate AA compliant text colors with bg colors (99805e4) . Also update the documentation of colors to include text

Miscellaneous chores

  • release: :bookmark: publish v1.7.0 (6e2690f)

1.6.2 (2018-08-13)

Bug Fixes

  • button: use correct variables (bef7ce9)

  • color: Fix color generation, we needed to refactor so we can actually use the color variables (7d045a5)

  • color: Forgot to update variables in build (a6718eb)

Code Refactoring

  • 💡 only run clean when explicitly calling build (7bf3d25) . because the components are also building js files that got cleaned.

  • color: Use e instead of a for color name grey (186d850)

Miscellaneous chores

  • color: build doc (883811f)

  • release: :bookmark: publish v1.6.2 (574ab8c)

1.6.1 (2018-08-09)

Bug Fixes

  • color: Add missing newline (8c5fb9f)

  • color: Use correct variable (3cee822)

Miscellaneous chores

0.1.6 (2018-06-19)

Bug Fixes

  • npm: Use exact versions (653d9b9)

0.1.1 (2018-06-18)

0.1.2 (2018-06-18)

0.1.0 (2018-06-18)

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.

0.1.1 (2022-05-04)

Documentation Updates

  • color: adjust the documentation generation for color package (87f4f80)

0.1.0 (2022-05-03)

Features

Miscellaneous chores

Contact us, Opens in new window