@atlaskit/tokens 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/tokens
 
+## 0.6.2
+
+### Patch Changes
+
+- [`899fd622557`](https://bitbucket.org/atlassian/atlassian-frontend/commits/899fd622557) - Re-introduces the selected and selected.bold tokens:
+
+  - `color.text.selected`
+  - `color.icon.selected`
+  - `color.border.selected`
+  - `color.background.selected`
+  - `color.background.selected.hovered`
+  - `color.background.selected.pressed`
+  - `color.background.selected.bold`
+  - `color.background.selected.bold.hovered`
+  - `color.background.selected.bold.pressed`
+
+  The following tokens are _deprecated_:
+
+  - `color.background.brand`
+  - `color.background.brand.hovered`
+  - `color.background.brand.pressed`
+
+  **IMPORTANT (Manual verification required):**
+
+  Please ensure all usages of the following tokens are replaced with their `selected` counterpart, wherever a brand token is used to represent a selected state.
+
+  - `color.background.brand.[default|hovered|pressed]` => `color.background.selected.[default|hovered|pressed]`
+  - `color.background.brand.bold.[default|hovered|pressed]` => `color.background.selected.bold.[default|hovered|pressed]`
+  - `color.text.brand` => `color.text.selected`
+  - `color.icon.brand` => `color.icon.selected`
+  - `color.border.brand` => `color.border.selected`
+
 ## 0.6.1
 
 ### Patch Changes

package/css/atlassian-dark.css

@@ -15,6 +15,7 @@ html[data-theme="dark"] {
   --ds-text-disabled: #5C6C7A;
   --ds-text-inverse: #161A1D;
   --ds-text-brand: #579DFF;
+  --ds-text-selected: #579DFF;
   --ds-text-danger: #FF9C8F;
   --ds-text-warning: #F5CD47;
   --ds-text-warning-inverse: #161A1D;
@@ -28,7 +29,6 @@ html[data-theme="dark"] {
   --ds-text-mediumEmphasis: #9FADBC;
   --ds-text-onBold: #161A1D;
   --ds-text-onBoldWarning: #161A1D;
-  --ds-text-selected: #579DFF;
   --ds-icon-accent-blue: #388BFF;
   --ds-icon-accent-red: #EF5C48;
   --ds-icon-accent-orange: #F18D13;
@@ -42,6 +42,7 @@ html[data-theme="dark"] {
   --ds-icon-inverse: #161A1D;
   --ds-icon-disabled: #5C6C7A;
   --ds-icon-brand: #579DFF;
+  --ds-icon-selected: #579DFF;
   --ds-icon-danger: #EF5C48;
   --ds-icon-warning: #CF9F02;
   --ds-icon-warning-inverse: #161A1D;
@@ -61,6 +62,7 @@ html[data-theme="dark"] {
   --ds-border-input: #A6C5E229;
   --ds-border-disabled: #A1BDD914;
   --ds-border-brand: #579DFF;
+  --ds-border-selected: #579DFF;
   --ds-border-danger: #EF5C48;
   --ds-border-warning: #CF9F02;
   --ds-border-success: #2ABB7F;
@@ -98,12 +100,20 @@ html[data-theme="dark"] {
   --ds-background-neutral-bold: #9FADBC;
   --ds-background-neutral-bold-hovered: #B6C2CF;
   --ds-background-neutral-bold-pressed: #C7D1DB;
-  --ds-background-brand: #A1BDD914;
-  --ds-background-brand-hovered: #A6C5E229;
-  --ds-background-brand-pressed: #BFDBF847;
   --ds-background-brand-bold: #579DFF;
   --ds-background-brand-bold-hovered: #85B8FF;
   --ds-background-brand-bold-pressed: #CCE0FF;
+  --ds-background-brand: #A1BDD914;
+  --ds-background-brand-hovered: #A6C5E229;
+  --ds-background-brand-pressed: #BFDBF847;
+  --ds-background-selected: #082145;
+  --ds-background-selected-hovered: #09326C;
+  --ds-background-selected-pressed: #0055CC;
+  --ds-background-selected-bold: #579DFF;
+  --ds-background-selected-bold-hovered: #85B8FF;
+  --ds-background-selected-bold-pressed: #CCE0FF;
+  --ds-background-selected-resting: #A1BDD914;
+  --ds-background-selected-hover: #A6C5E229;
   --ds-background-danger: #391813;
   --ds-background-danger-hovered: #601E16;
   --ds-background-danger-pressed: #AE2A19;
@@ -156,9 +166,6 @@ html[data-theme="dark"] {
   --ds-background-card: #1D2125;
   --ds-background-default: #161A1D;
   --ds-background-overlay: #22272B;
-  --ds-background-selected-resting: #A1BDD914;
-  --ds-background-selected-hover: #A6C5E229;
-  --ds-background-selected-pressed: #BFDBF847;
   --ds-background-subtleBorderedNeutral-pressed: #A1BDD914;
   --ds-background-subtleBorderedNeutral-resting: #BCD6F00A;
   --ds-background-subtleBrand-hover: #09326C;

package/css/atlassian-light.css

@@ -15,6 +15,7 @@
   --ds-text-disabled: #8993A5;
   --ds-text-inverse: #FFFFFF;
   --ds-text-brand: #0C66E4;
+  --ds-text-selected: #0C66E4;
   --ds-text-danger: #AE2A19;
   --ds-text-warning: #974F0C;
   --ds-text-warning-inverse: #172B4D;
@@ -28,7 +29,6 @@
   --ds-text-mediumEmphasis: #44546F;
   --ds-text-onBold: #FFFFFF;
   --ds-text-onBoldWarning: #172B4D;
-  --ds-text-selected: #0C66E4;
   --ds-icon-accent-blue: #1D7AFC;
   --ds-icon-accent-red: #E34935;
   --ds-icon-accent-orange: #D97008;
@@ -42,6 +42,7 @@
   --ds-icon-inverse: #FFFFFF;
   --ds-icon-disabled: #8993A5;
   --ds-icon-brand: #0C66E4;
+  --ds-icon-selected: #0C66E4;
   --ds-icon-danger: #E34935;
   --ds-icon-warning: #D97008;
   --ds-icon-warning-inverse: #172B4D;
@@ -61,6 +62,7 @@
   --ds-border-input: #091E4224;
   --ds-border-disabled: #091E420F;
   --ds-border-brand: #0C66E4;
+  --ds-border-selected: #0C66E4;
   --ds-border-danger: #E34935;
   --ds-border-warning: #D97008;
   --ds-border-success: #22A06B;
@@ -98,12 +100,20 @@
   --ds-background-neutral-bold: #44546F;
   --ds-background-neutral-bold-hovered: #2C3E5D;
   --ds-background-neutral-bold-pressed: #172B4D;
-  --ds-background-brand: #E9F2FF;
-  --ds-background-brand-hovered: #CCE0FF;
-  --ds-background-brand-pressed: #85B8FF;
   --ds-background-brand-bold: #0C66E4;
   --ds-background-brand-bold-hovered: #0055CC;
   --ds-background-brand-bold-pressed: #09326C;
+  --ds-background-brand: #E9F2FF;
+  --ds-background-brand-hovered: #CCE0FF;
+  --ds-background-brand-pressed: #85B8FF;
+  --ds-background-selected: #E9F2FF;
+  --ds-background-selected-hovered: #CCE0FF;
+  --ds-background-selected-pressed: #85B8FF;
+  --ds-background-selected-bold: #0C66E4;
+  --ds-background-selected-bold-hovered: #0055CC;
+  --ds-background-selected-bold-pressed: #09326C;
+  --ds-background-selected-resting: #E9F2FF;
+  --ds-background-selected-hover: #CCE0FF;
   --ds-background-danger: #FFEDEB;
   --ds-background-danger-hovered: #FFD2CC;
   --ds-background-danger-pressed: #FF9C8F;
@@ -156,9 +166,6 @@
   --ds-background-card: #FFFFFF;
   --ds-background-default: #FFFFFF;
   --ds-background-overlay: #FFFFFF;
-  --ds-background-selected-resting: #E9F2FF;
-  --ds-background-selected-hover: #CCE0FF;
-  --ds-background-selected-pressed: #85B8FF;
   --ds-background-subtleBorderedNeutral-pressed: #091E420F;
   --ds-background-subtleBorderedNeutral-resting: #091E4208;
   --ds-background-subtleBrand-hover: #CCE0FF;

package/dist/cjs/artifacts/rename-mapping.js

@@ -46,10 +46,6 @@ var renameMapper = [{
   "path": "color.text.onBoldWarning",
   "state": "deprecated",
   "replacement": "color.text.warning.inverse"
-}, {
-  "path": "color.text.selected",
-  "state": "deprecated",
-  "replacement": "color.text.brand"
 }, {
   "path": "color.border.focus",
   "state": "deprecated",
@@ -58,6 +54,26 @@ var renameMapper = [{
   "path": "color.border.neutral",
   "state": "deprecated",
   "replacement": "color.border.[default]"
+}, {
+  "path": "color.background.brand.[default].[default]",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].[default]"
+}, {
+  "path": "color.background.brand.[default].hovered",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].hovered"
+}, {
+  "path": "color.background.brand.[default].pressed",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].pressed"
+}, {
+  "path": "color.background.selected.resting",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].[default]"
+}, {
+  "path": "color.background.selected.hover",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.blanket",
   "state": "deprecated",
@@ -146,18 +162,6 @@ var renameMapper = [{
   "path": "color.background.overlay",
   "state": "deprecated",
   "replacement": "elevation.surface.overlay"
-}, {
-  "path": "color.background.selected.resting",
-  "state": "deprecated",
-  "replacement": "color.background.brand.[default].[default]"
-}, {
-  "path": "color.background.selected.hover",
-  "state": "deprecated",
-  "replacement": "color.background.brand.[default].hovered"
-}, {
-  "path": "color.background.selected.pressed",
-  "state": "deprecated",
-  "replacement": "color.background.brand.[default].pressed"
 }, {
   "path": "color.background.subtleBorderedNeutral.pressed",
   "state": "deprecated",
@@ -169,15 +173,15 @@ var renameMapper = [{
 }, {
   "path": "color.background.subtleBrand.hover",
   "state": "deprecated",
-  "replacement": "color.background.brand.[default].hovered"
+  "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.subtleBrand.pressed",
   "state": "deprecated",
-  "replacement": "color.background.brand.[default].pressed"
+  "replacement": "color.background.selected.[default].pressed"
 }, {
   "path": "color.background.subtleBrand.resting",
   "state": "deprecated",
-  "replacement": "color.background.brand.[default].[default]"
+  "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.subtleDanger.hover",
   "state": "deprecated",

package/dist/cjs/artifacts/token-default-values.js

@@ -25,6 +25,7 @@ var defaultTokenValues = {
   'color.text.disabled': '#8993A5',
   'color.text.inverse': '#FFFFFF',
   'color.text.brand': '#0C66E4',
+  'color.text.selected': '#0C66E4',
   'color.text.danger': '#AE2A19',
   'color.text.warning': '#974F0C',
   'color.text.warning.inverse': '#172B4D',
@@ -38,7 +39,6 @@ var defaultTokenValues = {
   'color.text.mediumEmphasis': '#44546F',
   'color.text.onBold': '#FFFFFF',
   'color.text.onBoldWarning': '#172B4D',
-  'color.text.selected': '#0C66E4',
   'color.icon.accent.blue': '#1D7AFC',
   'color.icon.accent.red': '#E34935',
   'color.icon.accent.orange': '#D97008',
@@ -52,6 +52,7 @@ var defaultTokenValues = {
   'color.icon.inverse': '#FFFFFF',
   'color.icon.disabled': '#8993A5',
   'color.icon.brand': '#0C66E4',
+  'color.icon.selected': '#0C66E4',
   'color.icon.danger': '#E34935',
   'color.icon.warning': '#D97008',
   'color.icon.warning.inverse': '#172B4D',
@@ -71,6 +72,7 @@ var defaultTokenValues = {
   'color.border.input': '#091E4224',
   'color.border.disabled': '#091E420F',
   'color.border.brand': '#0C66E4',
+  'color.border.selected': '#0C66E4',
   'color.border.danger': '#E34935',
   'color.border.warning': '#D97008',
   'color.border.success': '#22A06B',
@@ -108,12 +110,20 @@ var defaultTokenValues = {
   'color.background.neutral.bold': '#44546F',
   'color.background.neutral.bold.hovered': '#2C3E5D',
   'color.background.neutral.bold.pressed': '#172B4D',
-  'color.background.brand': '#E9F2FF',
-  'color.background.brand.hovered': '#CCE0FF',
-  'color.background.brand.pressed': '#85B8FF',
   'color.background.brand.bold': '#0C66E4',
   'color.background.brand.bold.hovered': '#0055CC',
   'color.background.brand.bold.pressed': '#09326C',
+  'color.background.brand': '#E9F2FF',
+  'color.background.brand.hovered': '#CCE0FF',
+  'color.background.brand.pressed': '#85B8FF',
+  'color.background.selected': '#E9F2FF',
+  'color.background.selected.hovered': '#CCE0FF',
+  'color.background.selected.pressed': '#85B8FF',
+  'color.background.selected.bold': '#0C66E4',
+  'color.background.selected.bold.hovered': '#0055CC',
+  'color.background.selected.bold.pressed': '#09326C',
+  'color.background.selected.resting': '#E9F2FF',
+  'color.background.selected.hover': '#CCE0FF',
   'color.background.danger': '#FFEDEB',
   'color.background.danger.hovered': '#FFD2CC',
   'color.background.danger.pressed': '#FF9C8F',
@@ -166,9 +176,6 @@ var defaultTokenValues = {
   'color.background.card': '#FFFFFF',
   'color.background.default': '#FFFFFF',
   'color.background.overlay': '#FFFFFF',
-  'color.background.selected.resting': '#E9F2FF',
-  'color.background.selected.hover': '#CCE0FF',
-  'color.background.selected.pressed': '#85B8FF',
   'color.background.subtleBorderedNeutral.pressed': '#091E420F',
   'color.background.subtleBorderedNeutral.resting': '#091E4208',
   'color.background.subtleBrand.hover': '#CCE0FF',

package/dist/cjs/artifacts/token-names.js

@@ -21,6 +21,7 @@ var tokens = {
   'color.text.disabled': '--ds-text-disabled',
   'color.text.inverse': '--ds-text-inverse',
   'color.text.brand': '--ds-text-brand',
+  'color.text.selected': '--ds-text-selected',
   'color.text.danger': '--ds-text-danger',
   'color.text.warning': '--ds-text-warning',
   'color.text.warning.inverse': '--ds-text-warning-inverse',
@@ -34,7 +35,6 @@ var tokens = {
   'color.text.mediumEmphasis': '--ds-text-mediumEmphasis',
   'color.text.onBold': '--ds-text-onBold',
   'color.text.onBoldWarning': '--ds-text-onBoldWarning',
-  'color.text.selected': '--ds-text-selected',
   'color.icon.accent.blue': '--ds-icon-accent-blue',
   'color.icon.accent.red': '--ds-icon-accent-red',
   'color.icon.accent.orange': '--ds-icon-accent-orange',
@@ -48,6 +48,7 @@ var tokens = {
   'color.icon.inverse': '--ds-icon-inverse',
   'color.icon.disabled': '--ds-icon-disabled',
   'color.icon.brand': '--ds-icon-brand',
+  'color.icon.selected': '--ds-icon-selected',
   'color.icon.danger': '--ds-icon-danger',
   'color.icon.warning': '--ds-icon-warning',
   'color.icon.warning.inverse': '--ds-icon-warning-inverse',
@@ -67,6 +68,7 @@ var tokens = {
   'color.border.input': '--ds-border-input',
   'color.border.disabled': '--ds-border-disabled',
   'color.border.brand': '--ds-border-brand',
+  'color.border.selected': '--ds-border-selected',
   'color.border.danger': '--ds-border-danger',
   'color.border.warning': '--ds-border-warning',
   'color.border.success': '--ds-border-success',
@@ -104,12 +106,20 @@ var tokens = {
   'color.background.neutral.bold': '--ds-background-neutral-bold',
   'color.background.neutral.bold.hovered': '--ds-background-neutral-bold-hovered',
   'color.background.neutral.bold.pressed': '--ds-background-neutral-bold-pressed',
-  'color.background.brand': '--ds-background-brand',
-  'color.background.brand.hovered': '--ds-background-brand-hovered',
-  'color.background.brand.pressed': '--ds-background-brand-pressed',
   'color.background.brand.bold': '--ds-background-brand-bold',
   'color.background.brand.bold.hovered': '--ds-background-brand-bold-hovered',
   'color.background.brand.bold.pressed': '--ds-background-brand-bold-pressed',
+  'color.background.brand': '--ds-background-brand',
+  'color.background.brand.hovered': '--ds-background-brand-hovered',
+  'color.background.brand.pressed': '--ds-background-brand-pressed',
+  'color.background.selected': '--ds-background-selected',
+  'color.background.selected.hovered': '--ds-background-selected-hovered',
+  'color.background.selected.pressed': '--ds-background-selected-pressed',
+  'color.background.selected.bold': '--ds-background-selected-bold',
+  'color.background.selected.bold.hovered': '--ds-background-selected-bold-hovered',
+  'color.background.selected.bold.pressed': '--ds-background-selected-bold-pressed',
+  'color.background.selected.resting': '--ds-background-selected-resting',
+  'color.background.selected.hover': '--ds-background-selected-hover',
   'color.background.danger': '--ds-background-danger',
   'color.background.danger.hovered': '--ds-background-danger-hovered',
   'color.background.danger.pressed': '--ds-background-danger-pressed',
@@ -162,9 +172,6 @@ var tokens = {
   'color.background.card': '--ds-background-card',
   'color.background.default': '--ds-background-default',
   'color.background.overlay': '--ds-background-overlay',
-  'color.background.selected.resting': '--ds-background-selected-resting',
-  'color.background.selected.hover': '--ds-background-selected-hover',
-  'color.background.selected.pressed': '--ds-background-selected-pressed',
   'color.background.subtleBorderedNeutral.pressed': '--ds-background-subtleBorderedNeutral-pressed',
   'color.background.subtleBorderedNeutral.resting': '--ds-background-subtleBorderedNeutral-resting',
   'color.background.subtleBrand.hover': '--ds-background-subtleBrand-hover',