@atlaskit/tokens 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 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

@@ -128,9 +128,9 @@ html[data-theme="dark"] {
   --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-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

@@ -128,9 +128,9 @@
   --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-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/token-default-values.js

@@ -138,9 +138,9 @@ var defaultTokenValues = {
   '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.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/tokens-raw/atlassian-dark.js

@@ -2475,7 +2475,7 @@ var tokens = [{
     "state": "active",
     "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#BCD6F00A",
+  "value": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2484,7 +2484,7 @@ var tokens = [{
       "state": "active",
       "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "DN100A"
+    "value": "DN100"
   },
   "name": "color.background.input.[default]",
   "path": ["color", "background", "input", "[default]"]
@@ -2494,7 +2494,7 @@ var tokens = [{
     "state": "active",
     "description": "Hovered state for color.background.input"
   },
-  "value": "#161A1D",
+  "value": "#22272B",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2503,7 +2503,7 @@ var tokens = [{
       "state": "active",
       "description": "Hovered state for color.background.input"
     },
-    "value": "DN0"
+    "value": "DN200"
   },
   "name": "color.background.input.hovered",
   "path": ["color", "background", "input", "hovered"]
@@ -2513,7 +2513,7 @@ var tokens = [{
     "state": "active",
     "description": "Pressed state for color.background.input"
   },
-  "value": "#A1BDD914",
+  "value": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2522,7 +2522,7 @@ var tokens = [{
       "state": "active",
       "description": "Pressed state for color.background.input"
     },
-    "value": "DN200A"
+    "value": "DN100"
   },
   "name": "color.background.input.pressed",
   "path": ["color", "background", "input", "pressed"]

package/dist/cjs/artifacts/tokens-raw/atlassian-light.js

@@ -2475,7 +2475,7 @@ var tokens = [{
     "state": "active",
     "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#091E4208",
+  "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2484,7 +2484,7 @@ var tokens = [{
       "state": "active",
       "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "N100A"
+    "value": "N0"
   },
   "name": "color.background.input.[default]",
   "path": ["color", "background", "input", "[default]"]
@@ -2494,7 +2494,7 @@ var tokens = [{
     "state": "active",
     "description": "Hovered state for color.background.input"
   },
-  "value": "#FFFFFF",
+  "value": "#F7F8F9",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2503,7 +2503,7 @@ var tokens = [{
       "state": "active",
       "description": "Hovered state for color.background.input"
     },
-    "value": "N0"
+    "value": "N100"
   },
   "name": "color.background.input.hovered",
   "path": ["color", "background", "input", "hovered"]
@@ -2513,7 +2513,7 @@ var tokens = [{
     "state": "active",
     "description": "Pressed state for color.background.input"
   },
-  "value": "#091E420F",
+  "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2522,7 +2522,7 @@ var tokens = [{
       "state": "active",
       "description": "Pressed state for color.background.input"
     },
-    "value": "N200A"
+    "value": "N0"
   },
   "name": "color.background.input.pressed",
   "path": ["color", "background", "input", "pressed"]

package/dist/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.8.1";
+var version = "0.8.2";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

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

@@ -29,13 +29,13 @@ var color = {
       },
       input: {
         '[default]': {
-          value: 'DN100A'
+          value: 'DN100'
         },
         hovered: {
-          value: 'DN0'
+          value: 'DN200'
         },
         pressed: {
-          value: 'DN200A'
+          value: 'DN100'
         }
       },
       neutral: {

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

@@ -29,13 +29,13 @@ var color = {
       },
       input: {
         '[default]': {
-          value: 'N100A'
+          value: 'N0'
         },
         hovered: {
-          value: 'N0'
+          value: 'N100'
         },
         pressed: {
-          value: 'N200A'
+          value: 'N0'
         }
       },
       neutral: {

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.1",
+	"version": "0.8.2",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -132,9 +132,9 @@ const defaultTokenValues = {
   '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.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/es2019/artifacts/tokens-raw/atlassian-dark.js

@@ -2469,7 +2469,7 @@ const tokens = [{
     "state": "active",
     "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#BCD6F00A",
+  "value": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2478,7 +2478,7 @@ const tokens = [{
       "state": "active",
       "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "DN100A"
+    "value": "DN100"
   },
   "name": "color.background.input.[default]",
   "path": ["color", "background", "input", "[default]"]
@@ -2488,7 +2488,7 @@ const tokens = [{
     "state": "active",
     "description": "Hovered state for color.background.input"
   },
-  "value": "#161A1D",
+  "value": "#22272B",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2497,7 +2497,7 @@ const tokens = [{
       "state": "active",
       "description": "Hovered state for color.background.input"
     },
-    "value": "DN0"
+    "value": "DN200"
   },
   "name": "color.background.input.hovered",
   "path": ["color", "background", "input", "hovered"]
@@ -2507,7 +2507,7 @@ const tokens = [{
     "state": "active",
     "description": "Pressed state for color.background.input"
   },
-  "value": "#A1BDD914",
+  "value": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2516,7 +2516,7 @@ const tokens = [{
       "state": "active",
       "description": "Pressed state for color.background.input"
     },
-    "value": "DN200A"
+    "value": "DN100"
   },
   "name": "color.background.input.pressed",
   "path": ["color", "background", "input", "pressed"]

package/dist/es2019/artifacts/tokens-raw/atlassian-light.js

@@ -2469,7 +2469,7 @@ const tokens = [{
     "state": "active",
     "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#091E4208",
+  "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2478,7 +2478,7 @@ const tokens = [{
       "state": "active",
       "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "N100A"
+    "value": "N0"
   },
   "name": "color.background.input.[default]",
   "path": ["color", "background", "input", "[default]"]
@@ -2488,7 +2488,7 @@ const tokens = [{
     "state": "active",
     "description": "Hovered state for color.background.input"
   },
-  "value": "#FFFFFF",
+  "value": "#F7F8F9",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2497,7 +2497,7 @@ const tokens = [{
       "state": "active",
       "description": "Hovered state for color.background.input"
     },
-    "value": "N0"
+    "value": "N100"
   },
   "name": "color.background.input.hovered",
   "path": ["color", "background", "input", "hovered"]
@@ -2507,7 +2507,7 @@ const tokens = [{
     "state": "active",
     "description": "Pressed state for color.background.input"
   },
-  "value": "#091E420F",
+  "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2516,7 +2516,7 @@ const tokens = [{
       "state": "active",
       "description": "Pressed state for color.background.input"
     },
-    "value": "N200A"
+    "value": "N0"
   },
   "name": "color.background.input.pressed",
   "path": ["color", "background", "input", "pressed"]

package/dist/es2019/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.8.1";
+const version = "0.8.2";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/tokens/atlassian-dark/color/background.js

@@ -23,13 +23,13 @@ const color = {
       },
       input: {
         '[default]': {
-          value: 'DN100A'
+          value: 'DN100'
         },
         hovered: {
-          value: 'DN0'
+          value: 'DN200'
         },
         pressed: {
-          value: 'DN200A'
+          value: 'DN100'
         }
       },
       neutral: {

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

@@ -23,13 +23,13 @@ const color = {
       },
       input: {
         '[default]': {
-          value: 'N100A'
+          value: 'N0'
         },
         hovered: {
-          value: 'N0'
+          value: 'N100'
         },
         pressed: {
-          value: 'N200A'
+          value: 'N0'
         }
       },
       neutral: {

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.1",
+	"version": "0.8.2",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -132,9 +132,9 @@ var defaultTokenValues = {
   '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.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/esm/artifacts/tokens-raw/atlassian-dark.js

@@ -2469,7 +2469,7 @@ var tokens = [{
     "state": "active",
     "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#BCD6F00A",
+  "value": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2478,7 +2478,7 @@ var tokens = [{
       "state": "active",
       "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "DN100A"
+    "value": "DN100"
   },
   "name": "color.background.input.[default]",
   "path": ["color", "background", "input", "[default]"]
@@ -2488,7 +2488,7 @@ var tokens = [{
     "state": "active",
     "description": "Hovered state for color.background.input"
   },
-  "value": "#161A1D",
+  "value": "#22272B",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2497,7 +2497,7 @@ var tokens = [{
       "state": "active",
       "description": "Hovered state for color.background.input"
     },
-    "value": "DN0"
+    "value": "DN200"
   },
   "name": "color.background.input.hovered",
   "path": ["color", "background", "input", "hovered"]
@@ -2507,7 +2507,7 @@ var tokens = [{
     "state": "active",
     "description": "Pressed state for color.background.input"
   },
-  "value": "#A1BDD914",
+  "value": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2516,7 +2516,7 @@ var tokens = [{
       "state": "active",
       "description": "Pressed state for color.background.input"
     },
-    "value": "DN200A"
+    "value": "DN100"
   },
   "name": "color.background.input.pressed",
   "path": ["color", "background", "input", "pressed"]

package/dist/esm/artifacts/tokens-raw/atlassian-light.js

@@ -2469,7 +2469,7 @@ var tokens = [{
     "state": "active",
     "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#091E4208",
+  "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2478,7 +2478,7 @@ var tokens = [{
       "state": "active",
       "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "N100A"
+    "value": "N0"
   },
   "name": "color.background.input.[default]",
   "path": ["color", "background", "input", "[default]"]
@@ -2488,7 +2488,7 @@ var tokens = [{
     "state": "active",
     "description": "Hovered state for color.background.input"
   },
-  "value": "#FFFFFF",
+  "value": "#F7F8F9",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2497,7 +2497,7 @@ var tokens = [{
       "state": "active",
       "description": "Hovered state for color.background.input"
     },
-    "value": "N0"
+    "value": "N100"
   },
   "name": "color.background.input.hovered",
   "path": ["color", "background", "input", "hovered"]
@@ -2507,7 +2507,7 @@ var tokens = [{
     "state": "active",
     "description": "Pressed state for color.background.input"
   },
-  "value": "#091E420F",
+  "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -2516,7 +2516,7 @@ var tokens = [{
       "state": "active",
       "description": "Pressed state for color.background.input"
     },
-    "value": "N200A"
+    "value": "N0"
   },
   "name": "color.background.input.pressed",
   "path": ["color", "background", "input", "pressed"]

package/dist/esm/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.8.1";
+var version = "0.8.2";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/tokens/atlassian-dark/color/background.js

@@ -23,13 +23,13 @@ var color = {
       },
       input: {
         '[default]': {
-          value: 'DN100A'
+          value: 'DN100'
         },
         hovered: {
-          value: 'DN0'
+          value: 'DN200'
         },
         pressed: {
-          value: 'DN200A'
+          value: 'DN100'
         }
       },
       neutral: {

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

@@ -23,13 +23,13 @@ var color = {
       },
       input: {
         '[default]': {
-          value: 'N100A'
+          value: 'N0'
         },
         hovered: {
-          value: 'N0'
+          value: 'N100'
         },
         pressed: {
-          value: 'N200A'
+          value: 'N0'
         }
       },
       neutral: {

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.1",
+	"version": "0.8.2",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/artifacts/token-default-values.d.ts

@@ -129,9 +129,9 @@ declare const defaultTokenValues: {
     readonly 'color.background.accent.magenta.bold': "#E774BB";
     readonly 'color.background.disabled': "#091E420F";
     readonly 'color.background.inverse': "#00000029";
-    readonly 'color.background.input': "#091E4208";
-    readonly 'color.background.input.hovered': "#FFFFFF";
-    readonly 'color.background.input.pressed': "#091E420F";
+    readonly 'color.background.input': "#FFFFFF";
+    readonly 'color.background.input.hovered': "#F7F8F9";
+    readonly 'color.background.input.pressed': "#FFFFFF";
     readonly 'color.background.neutral': "#091E420F";
     readonly 'color.background.neutral.hovered': "#091E4224";
     readonly 'color.background.neutral.pressed': "#091E424F";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",