refactor(tokens): ♻️ Added color token type to references

[mimarz]

resolves #1036

Added tokens of type color to references so they are outputted as reference to other css variables.

Found these tokens to be missing a referenced token:

  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
  
  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);

[github-actions]

Preview deployments for this pull request:

📖 Storybook 30. Jan 2024 - 15:38 (Norwegian time)

🖥 Storefront 30. Jan 2024 - 15:39 (Norwegian time)

See all deployments at https://dev.designsystemet.no

[mimarz]

The implication for this is that core color tokens are also exported with the tokens.css when maybe they shouldn't, is this okay or should we not include them? @mrosvik @Febakke

This might be confusing for users looking directly at the css variable tokens and know which ones to override.

/** Referenced source tokens */ 
  --fds-colors-blue-100: #e6eff8;
  --fds-colors-blue-200: #b3d0ea;
  --fds-colors-blue-700: #0062ba;
  --fds-colors-blue-800: #004e95;
  --fds-colors-blue-900: #00315d;
  --fds-colors-white: #ffffff;
  --fds-colors-grey-100: #f4f5f6;
  --fds-colors-grey-200: #e9eaec;
  --fds-colors-grey-600: #68707c;
  --fds-colors-grey-700: #4b5563;
  --fds-colors-grey-800: #1e2b3c;
  --fds-colors-green-200: #d1f4e1;
  --fds-colors-green-300: #8be4b5;
  --fds-colors-green-700: #118849;
  --fds-colors-green-800: #0c6536;
  --fds-colors-green-900: #084826;
  --fds-colors-yellow-100: #fffbe6;
  --fds-colors-yellow-200: #fff4b4;
  --fds-colors-yellow-300: #ffed83;
  --fds-colors-red-100: #f9d5db;
  --fds-colors-red-200: #f3abb6;
  --fds-colors-red-500: #e02e49;
  --fds-colors-red-600: #b3253a;
  --fds-colors-red-700: #861c2c;
  --fds-colors-blue-400: #66a1d6;
  --fds-colors-grey-300: #d2d5d8;
  --fds-colors-orange-600: #cc7005;
  --fds-colors-orange-700: #995404;
  --fds-colors-orange-800: #663802;
  --fds-colors-yellow-500: #ffda06;
  --fds-colors-grey-400: #bcbfc5;
  --fds-colors-red-800: #5a121d;
  --fds-colors-purple-700: #7a1265;

  /** Tokens */ 
  --fds-brand-alt1-100: #feefef;
  --fds-brand-alt1-200: #fddfe0;
  --fds-brand-alt1-300: #fbbfc1;
  --fds-brand-alt1-400: #f89fa1;
  --fds-brand-alt1-500: #f67f82;
  --fds-brand-alt1-600: #f45f63;
  --fds-brand-alt1-700: #dc5659;
  --fds-brand-alt1-800: #c34c4f;
  --fds-brand-alt1-900: #B83D41;
  --fds-brand-alt2-100: #fcf7e9;
  --fds-brand-alt2-200: #faeec2;
  --fds-brand-alt2-300: #f5dda6;
  --fds-brand-alt2-400: #efcc79;
  --fds-brand-alt2-500: #eabb4d;
  --fds-brand-alt2-600: #e5aa20;
  --fds-brand-alt2-700: #ce991d;
  --fds-brand-alt2-800: #b7881a;
  --fds-brand-alt2-900: #A17717;
  --fds-brand-alt3-100: #e9f5ff;
  --fds-brand-alt3-200: #d2eafd;
  --fds-brand-alt3-300: #a5d6fb;
  --fds-brand-alt3-400: #78c1f9;
  --fds-brand-alt3-500: #4badf7;
  --fds-brand-alt3-600: #1e98f5;
  --fds-brand-alt3-700: #1b88dd;
  --fds-brand-alt3-800: #156aac;
  --fds-brand-alt3-900: #125A91;

[mimarz]

resolves #1036

Added tokens of type color to references so they are outputted as reference to other css variables.

Found these tokens to be missing a referenced token:

  --fds-semantic-surface-action-second-hover: rgba(0, 49, 93, 0.9);
  --fds-semantic-surface-action-second-active: rgba(0, 49, 93, 0.8);
  
  --fds-semantic-surface-action-second-no_fill-hover: rgba(0, 49, 93, 0.1);
  --fds-semantic-surface-action-second-no_fill-active: rgba(0, 49, 93, 0.2);

This will be fixed by #736

[mimarz]

The implication for this is that core color tokens are also exported with the tokens.css when maybe they shouldn't, is this okay or should we not include them? @mrosvik @Febakke

This might be confusing for users looking directly at the css variable tokens and know which ones to override.

/** Referenced source tokens */ 
  --fds-colors-blue-100: #e6eff8;
  --fds-colors-blue-200: #b3d0ea;
  --fds-colors-blue-700: #0062ba;
  --fds-colors-blue-800: #004e95;
  --fds-colors-blue-900: #00315d;
  --fds-colors-white: #ffffff;
  --fds-colors-grey-100: #f4f5f6;
  --fds-colors-grey-200: #e9eaec;
  --fds-colors-grey-600: #68707c;
  --fds-colors-grey-700: #4b5563;
  --fds-colors-grey-800: #1e2b3c;
  --fds-colors-green-200: #d1f4e1;
  --fds-colors-green-300: #8be4b5;
  --fds-colors-green-700: #118849;
  --fds-colors-green-800: #0c6536;
  --fds-colors-green-900: #084826;
  --fds-colors-yellow-100: #fffbe6;
  --fds-colors-yellow-200: #fff4b4;
  --fds-colors-yellow-300: #ffed83;
  --fds-colors-red-100: #f9d5db;
  --fds-colors-red-200: #f3abb6;
  --fds-colors-red-500: #e02e49;
  --fds-colors-red-600: #b3253a;
  --fds-colors-red-700: #861c2c;
  --fds-colors-blue-400: #66a1d6;
  --fds-colors-grey-300: #d2d5d8;
  --fds-colors-orange-600: #cc7005;
  --fds-colors-orange-700: #995404;
  --fds-colors-orange-800: #663802;
  --fds-colors-yellow-500: #ffda06;
  --fds-colors-grey-400: #bcbfc5;
  --fds-colors-red-800: #5a121d;
  --fds-colors-purple-700: #7a1265;

  /** Tokens */ 
  --fds-brand-alt1-100: #feefef;
  --fds-brand-alt1-200: #fddfe0;
  --fds-brand-alt1-300: #fbbfc1;
  --fds-brand-alt1-400: #f89fa1;
  --fds-brand-alt1-500: #f67f82;
  --fds-brand-alt1-600: #f45f63;
  --fds-brand-alt1-700: #dc5659;
  --fds-brand-alt1-800: #c34c4f;
  --fds-brand-alt1-900: #B83D41;
  --fds-brand-alt2-100: #fcf7e9;
  --fds-brand-alt2-200: #faeec2;
  --fds-brand-alt2-300: #f5dda6;
  --fds-brand-alt2-400: #efcc79;
  --fds-brand-alt2-500: #eabb4d;
  --fds-brand-alt2-600: #e5aa20;
  --fds-brand-alt2-700: #ce991d;
  --fds-brand-alt2-800: #b7881a;
  --fds-brand-alt2-900: #A17717;
  --fds-brand-alt3-100: #e9f5ff;
  --fds-brand-alt3-200: #d2eafd;
  --fds-brand-alt3-300: #a5d6fb;
  --fds-brand-alt3-400: #78c1f9;
  --fds-brand-alt3-500: #4badf7;
  --fds-brand-alt3-600: #1e98f5;
  --fds-brand-alt3-700: #1b88dd;
  --fds-brand-alt3-800: #156aac;
  --fds-brand-alt3-900: #125A91;

We added a disclaimer to not edit the core tokens. This should suffice for now 🤪