@atlaskit/tokens 0.6.1 → 0.6.2

package/dist/cjs/tokens/atlassian-light/color/background.js

@@ -65,6 +65,19 @@ var color = {
         }
       },
       brand: {
+        bold: {
+          '[default]': {
+            value: 'B700'
+          },
+          hovered: {
+            value: 'B800'
+          },
+          pressed: {
+            value: 'B900'
+          }
+        }
+      },
+      selected: {
         '[default]': {
           '[default]': {
             value: 'B100'

package/dist/cjs/tokens/atlassian-light/color/border.js

@@ -22,6 +22,9 @@ var color = {
       brand: {
         value: 'B700'
       },
+      selected: {
+        value: 'B700'
+      },
       danger: {
         value: 'R600'
       },

package/dist/cjs/tokens/atlassian-light/color/icon.js

@@ -22,6 +22,9 @@ var color = {
       brand: {
         value: 'B700'
       },
+      selected: {
+        value: 'B700'
+      },
       danger: {
         value: 'R600'
       },

package/dist/cjs/tokens/atlassian-light/color/text.js

@@ -25,6 +25,9 @@ var color = {
       brand: {
         value: 'B700'
       },
+      selected: {
+        value: 'B700'
+      },
       danger: {
         value: 'R800'
       },

package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js

@@ -51,6 +51,19 @@ var color = {
       blanket: {
         value: 'N500A'
       },
+      brand: {
+        '[default]': {
+          '[default]': {
+            value: 'B100'
+          },
+          hovered: {
+            value: 'B200'
+          },
+          pressed: {
+            value: 'B300'
+          }
+        }
+      },
       boldBrand: {
         resting: {
           value: 'B700'
@@ -132,9 +145,6 @@ var color = {
         },
         hover: {
           value: 'B200'
-        },
-        pressed: {
-          value: 'B300'
         }
       },
       subtleBorderedNeutral: {
@@ -246,9 +256,6 @@ var color = {
       },
       onBoldWarning: {
         value: 'N1000'
-      },
-      selected: {
-        value: 'B700'
       }
     },
     border: {

package/dist/cjs/tokens/default/color/background.js

@@ -123,6 +123,31 @@ var color = {
         }
       },
       brand: {
+        bold: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Hovered state of color.background.brand.bold'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Pressed state of color.background.brand.bold'
+            }
+          }
+        }
+      },
+      selected: {
         '[default]': {
           '[default]': {
             attributes: {
@@ -135,14 +160,14 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Hovered state for color.background.brand'
+              description: 'Hovered state for color.background.selected'
             }
           },
           pressed: {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Pressed state for color.background.brand'
+              description: 'Pressed state for color.background.selected'
             }
           }
         },
@@ -151,21 +176,21 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Use for the backgrounds of primary buttons or elements in a selected state, such as checkboxed and radio buttons.'
+              description: 'Use for the backgrounds of elements in a selected state, such as checkboxed and radio buttons.'
             }
           },
           hovered: {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Hovered state of color.background.brand.bold'
+              description: 'Hovered state of color.background.selected.bold'
             }
           },
           pressed: {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Pressed state of color.background.brand.bold'
+              description: 'Pressed state of color.background.selected.bold'
             }
           }
         }

package/dist/cjs/tokens/default/color/border.js

@@ -36,6 +36,13 @@ var color = {
         }
       },
       brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.'
+        }
+      },
+      selected: {
         attributes: {
           group: 'paint',
           state: 'active',

package/dist/cjs/tokens/default/color/icon.js

@@ -36,6 +36,13 @@ var color = {
         }
       },
       brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons that reinforce our brand.'
+        }
+      },
+      selected: {
         attributes: {
           group: 'paint',
           state: 'active',

package/dist/cjs/tokens/default/color/text.js

@@ -43,6 +43,13 @@ var color = {
         }
       },
       brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for text that reinforces our brand.'
+        }
+      },
+      selected: {
         attributes: {
           group: 'paint',
           state: 'active',

package/dist/cjs/tokens/default/deprecated/deprecated.js

@@ -121,6 +121,34 @@ var color = {
           description: 'Use for the screen overlay that appears with modal dialogs'
         }
       },
+      brand: {
+        '[default]': {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.selected.[default].[default]',
+              description: 'Use for the background of elements used to reinforce our brand.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.selected.[default].hovered',
+              description: 'Hovered state for color.background.brand'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.selected.[default].pressed',
+              description: 'Pressed state for color.background.brand'
+            }
+          }
+        }
+      },
       boldBrand: {
         hover: {
           attributes: {
@@ -306,7 +334,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].[default]',
+            replacement: 'color.background.selected.[default].[default]',
             description: 'Use for backgrounds of elements in a selected state'
           }
         },
@@ -314,17 +342,9 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].hovered',
+            replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for color.background.selected'
           }
-        },
-        pressed: {
-          attributes: {
-            group: 'paint',
-            state: 'deprecated',
-            replacement: 'color.background.brand.[default].pressed',
-            description: 'Pressed state for color.background.selected'
-          }
         }
       },
       subtleBorderedNeutral: {
@@ -350,7 +370,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].hovered',
+            replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for background.subtleBrand'
           }
         },
@@ -358,7 +378,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].pressed',
+            replacement: 'color.background.selected.[default].pressed',
             description: 'Pressed state for background.subtleBrand'
           }
         },
@@ -366,7 +386,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].[default]',
+            replacement: 'color.background.selected.[default].[default]',
             description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
           }
         }
@@ -586,14 +606,6 @@ var color = {
           replacement: 'color.text.warning.inverse',
           description: 'Use for text and icons when on bold warning backgrounds'
         }
-      },
-      selected: {
-        attributes: {
-          group: 'paint',
-          state: 'deprecated',
-          replacement: 'color.text.brand',
-          description: 'Use for text, icons, borders, or other visual indicators in selected states'
-        }
       }
     },
     border: {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.6.1",
+	"version": "0.6.2",
 	"sideEffects": false
 }

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

@@ -40,10 +40,6 @@ const 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",
@@ -52,6 +48,26 @@ const 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",
@@ -140,18 +156,6 @@ const 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",
@@ -163,15 +167,15 @@ const 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/es2019/artifacts/token-default-values.js

@@ -19,6 +19,7 @@ const 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',
@@ -32,7 +33,6 @@ const 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',
@@ -46,6 +46,7 @@ const 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',
@@ -65,6 +66,7 @@ const 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',
@@ -102,12 +104,20 @@ const 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',
@@ -160,9 +170,6 @@ const 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/es2019/artifacts/token-names.js

@@ -15,6 +15,7 @@ const 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',
@@ -28,7 +29,6 @@ const 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',
@@ -42,6 +42,7 @@ const 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',
@@ -61,6 +62,7 @@ const 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',
@@ -98,12 +100,20 @@ const 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',
@@ -156,9 +166,6 @@ const 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',