@atlaskit/tokens 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/tokens
 
+## 0.9.0
+
+### Minor Changes
+
+- [`54180abbf55`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54180abbf55) - [ux] Add a new `color.border.inverse` token. Use for borders on bold backgrounds
+
+## 0.8.3
+
+### Patch Changes
+
+- [`530455156a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/530455156a8) - Deprecating color.background.inverse in favour of the new color.background.inverse.subtle token instead. Also introduced color.background.inverse.subtle.hovered and color.background.inverse.subtle.pressed tokens to supplement it.
+
+## 0.8.2
+
+### Patch Changes
+
+- [`b170565a618`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b170565a618) - [ux] Update to input token colors: `color.background.input`, `color.background.input.hovered`, `color.background.input.pressed`.
+
 ## 0.8.1
 
 ### Patch Changes

package/css/atlassian-dark.css

@@ -66,6 +66,7 @@ html[data-theme="dark"] {
   --ds-border-accent-teal: #37B4C3;
   --ds-border-accent-magenta: #DA62AC;
   --ds-border: #A6C5E229;
+  --ds-border-inverse: #161A1D;
   --ds-border-focused: #85B8FF;
   --ds-border-input: #A6C5E229;
   --ds-border-disabled: #A1BDD914;
@@ -127,10 +128,13 @@ html[data-theme="dark"] {
   --ds-background-accent-magenta: #50253F;
   --ds-background-accent-magenta-bold: #AE4787;
   --ds-background-disabled: #A1BDD914;
-  --ds-background-inverse: #ffffff33;
-  --ds-background-input: #BCD6F00A;
-  --ds-background-input-hovered: #161A1D;
-  --ds-background-input-pressed: #A1BDD914;
+  --ds-background-inverse-subtle: #FFFFFF29;
+  --ds-background-inverse-subtle-hovered: #FFFFFF3D;
+  --ds-background-inverse-subtle-pressed: #FFFFFF52;
+  --ds-background-inverse: #00000029;
+  --ds-background-input: #1D2125;
+  --ds-background-input-hovered: #22272B;
+  --ds-background-input-pressed: #1D2125;
   --ds-background-neutral: #A1BDD914;
   --ds-background-neutral-hovered: #A6C5E229;
   --ds-background-neutral-pressed: #BFDBF847;

package/css/atlassian-light.css

@@ -66,6 +66,7 @@
   --ds-border-accent-teal: #1D9AAA;
   --ds-border-accent-magenta: #CD519D;
   --ds-border: #091E4224;
+  --ds-border-inverse: #FFFFFF;
   --ds-border-focused: #388BFF;
   --ds-border-input: #091E4224;
   --ds-border-disabled: #091E420F;
@@ -127,10 +128,13 @@
   --ds-background-accent-magenta: #FDD0EC;
   --ds-background-accent-magenta-bold: #E774BB;
   --ds-background-disabled: #091E420F;
-  --ds-background-inverse: #00000029;
-  --ds-background-input: #091E4208;
-  --ds-background-input-hovered: #FFFFFF;
-  --ds-background-input-pressed: #091E420F;
+  --ds-background-inverse-subtle: #00000029;
+  --ds-background-inverse-subtle-hovered: #0000003D;
+  --ds-background-inverse-subtle-pressed: #00000052;
+  --ds-background-inverse: #FFFFFF29;
+  --ds-background-input: #FFFFFF;
+  --ds-background-input-hovered: #F7F8F9;
+  --ds-background-input-pressed: #FFFFFF;
   --ds-background-neutral: #091E420F;
   --ds-background-neutral-hovered: #091E4224;
   --ds-background-neutral-pressed: #091E424F;

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

@@ -118,6 +118,10 @@ var renameMapper = [{
   "path": "color.background.accent.magenta.bold",
   "state": "deleted",
   "replacement": "color.background.accent.magenta.subtle"
+}, {
+  "path": "color.background.inverse.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.inverse.subtle.[default]"
 }, {
   "path": "color.background.brand.[default].[default]",
   "state": "deprecated",

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

@@ -76,6 +76,7 @@ var defaultTokenValues = {
   'color.border.accent.teal': '#1D9AAA',
   'color.border.accent.magenta': '#CD519D',
   'color.border': '#091E4224',
+  'color.border.inverse': '#FFFFFF',
   'color.border.focused': '#388BFF',
   'color.border.input': '#091E4224',
   'color.border.disabled': '#091E420F',
@@ -137,10 +138,13 @@ var defaultTokenValues = {
   'color.background.accent.magenta': '#FDD0EC',
   'color.background.accent.magenta.bold': '#E774BB',
   'color.background.disabled': '#091E420F',
-  'color.background.inverse': '#00000029',
-  'color.background.input': '#091E4208',
-  'color.background.input.hovered': '#FFFFFF',
-  'color.background.input.pressed': '#091E420F',
+  'color.background.inverse.subtle': '#00000029',
+  'color.background.inverse.subtle.hovered': '#0000003D',
+  'color.background.inverse.subtle.pressed': '#00000052',
+  'color.background.inverse': '#FFFFFF29',
+  'color.background.input': '#FFFFFF',
+  'color.background.input.hovered': '#F7F8F9',
+  'color.background.input.pressed': '#FFFFFF',
   'color.background.neutral': '#091E420F',
   'color.background.neutral.hovered': '#091E4224',
   'color.background.neutral.pressed': '#091E424F',

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

@@ -72,6 +72,7 @@ var tokens = {
   'color.border.accent.teal': '--ds-border-accent-teal',
   'color.border.accent.magenta': '--ds-border-accent-magenta',
   'color.border': '--ds-border',
+  'color.border.inverse': '--ds-border-inverse',
   'color.border.focused': '--ds-border-focused',
   'color.border.input': '--ds-border-input',
   'color.border.disabled': '--ds-border-disabled',
@@ -133,6 +134,9 @@ var tokens = {
   'color.background.accent.magenta': '--ds-background-accent-magenta',
   'color.background.accent.magenta.bold': '--ds-background-accent-magenta-bold',
   'color.background.disabled': '--ds-background-disabled',
+  'color.background.inverse.subtle': '--ds-background-inverse-subtle',
+  'color.background.inverse.subtle.hovered': '--ds-background-inverse-subtle-hovered',
+  'color.background.inverse.subtle.pressed': '--ds-background-inverse-subtle-pressed',
   'color.background.inverse': '--ds-background-inverse',
   'color.background.input': '--ds-background-input',
   'color.background.input.hovered': '--ds-background-input-hovered',