@atlaskit/tokens 1.3.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/artifacts/theme-import-map.js +13 -1
  3. package/dist/cjs/artifacts/themes/atlassian-dark-new-input-border.js +13 -0
  4. package/dist/cjs/artifacts/themes/atlassian-light-new-input-border.js +13 -0
  5. package/dist/cjs/get-token-value.js +1 -1
  6. package/dist/cjs/get-token.js +1 -1
  7. package/dist/cjs/set-global-theme.js +3 -0
  8. package/dist/cjs/theme-config.js +20 -0
  9. package/dist/cjs/tokens/atlassian-dark-new-input-border/color/border.js +53 -0
  10. package/dist/cjs/tokens/atlassian-light-new-input-border/color/border.js +53 -0
  11. package/dist/cjs/version.json +1 -1
  12. package/dist/es2019/artifacts/theme-import-map.js +6 -2
  13. package/dist/es2019/artifacts/themes/atlassian-dark-new-input-border.js +24 -0
  14. package/dist/es2019/artifacts/themes/atlassian-light-new-input-border.js +24 -0
  15. package/dist/es2019/get-token-value.js +1 -1
  16. package/dist/es2019/get-token.js +1 -1
  17. package/dist/es2019/set-global-theme.js +3 -0
  18. package/dist/es2019/theme-config.js +20 -0
  19. package/dist/es2019/tokens/atlassian-dark-new-input-border/color/border.js +46 -0
  20. package/dist/es2019/tokens/atlassian-light-new-input-border/color/border.js +46 -0
  21. package/dist/es2019/version.json +1 -1
  22. package/dist/esm/artifacts/theme-import-map.js +9 -1
  23. package/dist/esm/artifacts/themes/atlassian-dark-new-input-border.js +6 -0
  24. package/dist/esm/artifacts/themes/atlassian-light-new-input-border.js +6 -0
  25. package/dist/esm/get-token-value.js +1 -1
  26. package/dist/esm/get-token.js +1 -1
  27. package/dist/esm/set-global-theme.js +3 -0
  28. package/dist/esm/theme-config.js +20 -0
  29. package/dist/esm/tokens/atlassian-dark-new-input-border/color/border.js +46 -0
  30. package/dist/esm/tokens/atlassian-light-new-input-border/color/border.js +46 -0
  31. package/dist/esm/version.json +1 -1
  32. package/dist/types/artifacts/theme-import-map.d.ts +1 -1
  33. package/dist/types/artifacts/themes/atlassian-dark-new-input-border.d.ts +7 -0
  34. package/dist/types/artifacts/themes/atlassian-light-new-input-border.d.ts +7 -0
  35. package/dist/types/theme-config.d.ts +22 -2
  36. package/dist/types/tokens/atlassian-dark-new-input-border/color/border.d.ts +4 -0
  37. package/dist/types/tokens/atlassian-light-new-input-border/color/border.d.ts +4 -0
  38. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`36158b8bcb9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/36158b8bcb9) - [ux] update color.border.input to meet 3:1 contrast
8
+
3
9
  ## 1.3.2
4
10
 
5
11
  ### Patch Changes
@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
16
16
  * This allows users to compose their themes and only use the tokens that are requested.
17
17
  * When a new theme is created, the import should automatically be added to the map
18
18
  *
19
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
19
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
20
20
  * @codegenCommand yarn build tokens
21
21
  */
22
22
 
@@ -68,6 +68,18 @@ var themeImportsMap = {
68
68
  return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
69
69
  './themes/atlassian-dark-iteration'));
70
70
  });
71
+ },
72
+ 'light-new-input-border': function lightNewInputBorder() {
73
+ return Promise.resolve().then(function () {
74
+ return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
75
+ './themes/atlassian-light-new-input-border'));
76
+ });
77
+ },
78
+ 'dark-new-input-border': function darkNewInputBorder() {
79
+ return Promise.resolve().then(function () {
80
+ return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
81
+ './themes/atlassian-dark-new-input-border'));
82
+ });
71
83
  }
72
84
  };
73
85
  var _default = themeImportsMap;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ /**
8
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
9
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
10
+ * @codegenCommand yarn build tokens
11
+ */
12
+ var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n color-scheme: dark;\n --ds-border: #A6C5E229;\n --ds-border-disabled: #A1BDD914;\n --ds-border-focused: #85B8FF;\n --ds-border-input: #738496;\n --ds-border-inverse: #161A1D;\n --ds-border-selected: #579DFF;\n --ds-border-brand: #579DFF;\n --ds-border-danger: #EF5C48;\n --ds-border-warning: #CF9F02;\n --ds-border-success: #2ABB7F;\n --ds-border-discovery: #8F7EE7;\n --ds-border-information: #388BFF;\n --ds-border-bold: #738496;\n}\n";
13
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ /**
8
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
9
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
10
+ * @codegenCommand yarn build tokens
11
+ */
12
+ var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n color-scheme: light;\n --ds-border: #091E4224;\n --ds-border-disabled: #091E420F;\n --ds-border-focused: #388BFF;\n --ds-border-input: #758195;\n --ds-border-inverse: #FFFFFF;\n --ds-border-selected: #0C66E4;\n --ds-border-brand: #0C66E4;\n --ds-border-danger: #E34935;\n --ds-border-warning: #D97008;\n --ds-border-success: #22A06B;\n --ds-border-discovery: #8270DB;\n --ds-border-information: #1D7AFC;\n --ds-border-bold: #758195;\n}\n";
13
+ exports.default = _default;
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var name = "@atlaskit/tokens";
11
- var version = "1.3.2";
11
+ var version = "1.4.0";
12
12
  /**
13
13
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
14
14
  * resulting CSS Custom Property.
@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var _constants = require("./constants");
11
11
  var name = "@atlaskit/tokens";
12
- var version = "1.3.2";
12
+ var version = "1.4.0";
13
13
  /**
14
14
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
15
15
  * This should be used to implement design decisions throughout your application.
@@ -52,6 +52,9 @@ var getThemePreferences = function getThemePreferences(themeState) {
52
52
  themePreferences.push(themeId);
53
53
  }
54
54
  });
55
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1')) {
56
+ themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
57
+ }
55
58
  return (0, _toConsumableArray2.default)(new Set(themePreferences));
56
59
  };
57
60
 
@@ -125,6 +125,26 @@ var themeOverrideConfig = {
125
125
  type: 'color',
126
126
  mode: 'dark'
127
127
  }
128
+ },
129
+ 'atlassian-light-new-input-border': {
130
+ id: 'light-new-input-border',
131
+ displayName: 'Light Theme New Input Border',
132
+ palette: 'defaultPalette',
133
+ overrideTheme: 'light',
134
+ attributes: {
135
+ type: 'color',
136
+ mode: 'light'
137
+ }
138
+ },
139
+ 'atlassian-dark-new-input-border': {
140
+ id: 'dark-new-input-border',
141
+ displayName: 'Dark Theme New Input Border',
142
+ palette: 'defaultPalette',
143
+ overrideTheme: 'dark',
144
+ attributes: {
145
+ type: 'color',
146
+ mode: 'dark'
147
+ }
128
148
  }
129
149
  };
130
150
  exports.themeOverrideConfig = themeOverrideConfig;
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ border: {
10
+ '[default]': {
11
+ value: 'DarkNeutral300A'
12
+ },
13
+ bold: {
14
+ value: 'DarkNeutral600'
15
+ },
16
+ inverse: {
17
+ value: 'DarkNeutral0'
18
+ },
19
+ focused: {
20
+ value: 'Blue300'
21
+ },
22
+ input: {
23
+ value: 'DarkNeutral600'
24
+ },
25
+ disabled: {
26
+ value: 'DarkNeutral200A'
27
+ },
28
+ brand: {
29
+ value: 'Blue400'
30
+ },
31
+ selected: {
32
+ value: 'Blue400'
33
+ },
34
+ danger: {
35
+ value: 'Red500'
36
+ },
37
+ warning: {
38
+ value: 'Yellow500'
39
+ },
40
+ success: {
41
+ value: 'Green500'
42
+ },
43
+ discovery: {
44
+ value: 'Purple500'
45
+ },
46
+ information: {
47
+ value: 'Blue500'
48
+ }
49
+ }
50
+ }
51
+ };
52
+ var _default = color;
53
+ exports.default = _default;
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ border: {
10
+ '[default]': {
11
+ value: 'Neutral300A'
12
+ },
13
+ bold: {
14
+ value: 'Neutral600'
15
+ },
16
+ inverse: {
17
+ value: 'Neutral0'
18
+ },
19
+ focused: {
20
+ value: 'Blue500'
21
+ },
22
+ input: {
23
+ value: 'Neutral600'
24
+ },
25
+ disabled: {
26
+ value: 'Neutral200A'
27
+ },
28
+ brand: {
29
+ value: 'Blue700'
30
+ },
31
+ selected: {
32
+ value: 'Blue700'
33
+ },
34
+ danger: {
35
+ value: 'Red600'
36
+ },
37
+ warning: {
38
+ value: 'Orange600'
39
+ },
40
+ success: {
41
+ value: 'Green600'
42
+ },
43
+ discovery: {
44
+ value: 'Purple600'
45
+ },
46
+ information: {
47
+ value: 'Blue600'
48
+ }
49
+ }
50
+ }
51
+ };
52
+ var _default = color;
53
+ exports.default = _default;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -6,7 +6,7 @@
6
6
  * This allows users to compose their themes and only use the tokens that are requested.
7
7
  * When a new theme is created, the import should automatically be added to the map
8
8
  *
9
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
9
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
10
10
  * @codegenCommand yarn build tokens
11
11
  */
12
12
 
@@ -26,6 +26,10 @@ const themeImportsMap = {
26
26
  'shape': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
27
27
  './themes/atlassian-shape'),
28
28
  'dark-iteration': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
29
- './themes/atlassian-dark-iteration')
29
+ './themes/atlassian-dark-iteration'),
30
+ 'light-new-input-border': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
31
+ './themes/atlassian-light-new-input-border'),
32
+ 'dark-new-input-border': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
33
+ './themes/atlassian-dark-new-input-border')
30
34
  };
31
35
  export default themeImportsMap;
@@ -0,0 +1,24 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
4
+ * @codegenCommand yarn build tokens
5
+ */
6
+ export default `
7
+ html[data-color-mode="light"][data-theme~="light:dark"],
8
+ html[data-color-mode="dark"][data-theme~="dark:dark"] {
9
+ color-scheme: dark;
10
+ --ds-border: #A6C5E229;
11
+ --ds-border-disabled: #A1BDD914;
12
+ --ds-border-focused: #85B8FF;
13
+ --ds-border-input: #738496;
14
+ --ds-border-inverse: #161A1D;
15
+ --ds-border-selected: #579DFF;
16
+ --ds-border-brand: #579DFF;
17
+ --ds-border-danger: #EF5C48;
18
+ --ds-border-warning: #CF9F02;
19
+ --ds-border-success: #2ABB7F;
20
+ --ds-border-discovery: #8F7EE7;
21
+ --ds-border-information: #388BFF;
22
+ --ds-border-bold: #738496;
23
+ }
24
+ `;
@@ -0,0 +1,24 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
4
+ * @codegenCommand yarn build tokens
5
+ */
6
+ export default `
7
+ html[data-color-mode="light"][data-theme~="light:light"],
8
+ html[data-color-mode="dark"][data-theme~="dark:light"] {
9
+ color-scheme: light;
10
+ --ds-border: #091E4224;
11
+ --ds-border-disabled: #091E420F;
12
+ --ds-border-focused: #388BFF;
13
+ --ds-border-input: #758195;
14
+ --ds-border-inverse: #FFFFFF;
15
+ --ds-border-selected: #0C66E4;
16
+ --ds-border-brand: #0C66E4;
17
+ --ds-border-danger: #E34935;
18
+ --ds-border-warning: #D97008;
19
+ --ds-border-success: #22A06B;
20
+ --ds-border-discovery: #8270DB;
21
+ --ds-border-information: #1D7AFC;
22
+ --ds-border-bold: #758195;
23
+ }
24
+ `;
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  const name = "@atlaskit/tokens";
4
- const version = "1.3.2";
4
+ const version = "1.4.0";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  const name = "@atlaskit/tokens";
5
- const version = "1.3.2";
5
+ const version = "1.4.0";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.
@@ -43,6 +43,9 @@ const getThemePreferences = themeState => {
43
43
  themePreferences.push(themeId);
44
44
  }
45
45
  });
46
+ if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
47
+ themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
48
+ }
46
49
  return [...new Set(themePreferences)];
47
50
  };
48
51
 
@@ -118,6 +118,26 @@ export const themeOverrideConfig = {
118
118
  type: 'color',
119
119
  mode: 'dark'
120
120
  }
121
+ },
122
+ 'atlassian-light-new-input-border': {
123
+ id: 'light-new-input-border',
124
+ displayName: 'Light Theme New Input Border',
125
+ palette: 'defaultPalette',
126
+ overrideTheme: 'light',
127
+ attributes: {
128
+ type: 'color',
129
+ mode: 'light'
130
+ }
131
+ },
132
+ 'atlassian-dark-new-input-border': {
133
+ id: 'dark-new-input-border',
134
+ displayName: 'Dark Theme New Input Border',
135
+ palette: 'defaultPalette',
136
+ overrideTheme: 'dark',
137
+ attributes: {
138
+ type: 'color',
139
+ mode: 'dark'
140
+ }
121
141
  }
122
142
  };
123
143
  export default themeConfig;
@@ -0,0 +1,46 @@
1
+ const color = {
2
+ color: {
3
+ border: {
4
+ '[default]': {
5
+ value: 'DarkNeutral300A'
6
+ },
7
+ bold: {
8
+ value: 'DarkNeutral600'
9
+ },
10
+ inverse: {
11
+ value: 'DarkNeutral0'
12
+ },
13
+ focused: {
14
+ value: 'Blue300'
15
+ },
16
+ input: {
17
+ value: 'DarkNeutral600'
18
+ },
19
+ disabled: {
20
+ value: 'DarkNeutral200A'
21
+ },
22
+ brand: {
23
+ value: 'Blue400'
24
+ },
25
+ selected: {
26
+ value: 'Blue400'
27
+ },
28
+ danger: {
29
+ value: 'Red500'
30
+ },
31
+ warning: {
32
+ value: 'Yellow500'
33
+ },
34
+ success: {
35
+ value: 'Green500'
36
+ },
37
+ discovery: {
38
+ value: 'Purple500'
39
+ },
40
+ information: {
41
+ value: 'Blue500'
42
+ }
43
+ }
44
+ }
45
+ };
46
+ export default color;
@@ -0,0 +1,46 @@
1
+ const color = {
2
+ color: {
3
+ border: {
4
+ '[default]': {
5
+ value: 'Neutral300A'
6
+ },
7
+ bold: {
8
+ value: 'Neutral600'
9
+ },
10
+ inverse: {
11
+ value: 'Neutral0'
12
+ },
13
+ focused: {
14
+ value: 'Blue500'
15
+ },
16
+ input: {
17
+ value: 'Neutral600'
18
+ },
19
+ disabled: {
20
+ value: 'Neutral200A'
21
+ },
22
+ brand: {
23
+ value: 'Blue700'
24
+ },
25
+ selected: {
26
+ value: 'Blue700'
27
+ },
28
+ danger: {
29
+ value: 'Red600'
30
+ },
31
+ warning: {
32
+ value: 'Orange600'
33
+ },
34
+ success: {
35
+ value: 'Green600'
36
+ },
37
+ discovery: {
38
+ value: 'Purple600'
39
+ },
40
+ information: {
41
+ value: 'Blue600'
42
+ }
43
+ }
44
+ }
45
+ };
46
+ export default color;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -6,7 +6,7 @@
6
6
  * This allows users to compose their themes and only use the tokens that are requested.
7
7
  * When a new theme is created, the import should automatically be added to the map
8
8
  *
9
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
9
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
10
10
  * @codegenCommand yarn build tokens
11
11
  */
12
12
 
@@ -42,6 +42,14 @@ var themeImportsMap = {
42
42
  'dark-iteration': function darkIteration() {
43
43
  return import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
44
44
  './themes/atlassian-dark-iteration');
45
+ },
46
+ 'light-new-input-border': function lightNewInputBorder() {
47
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
48
+ './themes/atlassian-light-new-input-border');
49
+ },
50
+ 'dark-new-input-border': function darkNewInputBorder() {
51
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
52
+ './themes/atlassian-dark-new-input-border');
45
53
  }
46
54
  };
47
55
  export default themeImportsMap;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
4
+ * @codegenCommand yarn build tokens
5
+ */
6
+ export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n color-scheme: dark;\n --ds-border: #A6C5E229;\n --ds-border-disabled: #A1BDD914;\n --ds-border-focused: #85B8FF;\n --ds-border-input: #738496;\n --ds-border-inverse: #161A1D;\n --ds-border-selected: #579DFF;\n --ds-border-brand: #579DFF;\n --ds-border-danger: #EF5C48;\n --ds-border-warning: #CF9F02;\n --ds-border-success: #2ABB7F;\n --ds-border-discovery: #8F7EE7;\n --ds-border-information: #388BFF;\n --ds-border-bold: #738496;\n}\n";
@@ -0,0 +1,6 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
4
+ * @codegenCommand yarn build tokens
5
+ */
6
+ export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n color-scheme: light;\n --ds-border: #091E4224;\n --ds-border-disabled: #091E420F;\n --ds-border-focused: #388BFF;\n --ds-border-input: #758195;\n --ds-border-inverse: #FFFFFF;\n --ds-border-selected: #0C66E4;\n --ds-border-brand: #0C66E4;\n --ds-border-danger: #E34935;\n --ds-border-warning: #D97008;\n --ds-border-success: #22A06B;\n --ds-border-discovery: #8270DB;\n --ds-border-information: #1D7AFC;\n --ds-border-bold: #758195;\n}\n";
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  var name = "@atlaskit/tokens";
4
- var version = "1.3.2";
4
+ var version = "1.4.0";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  var name = "@atlaskit/tokens";
5
- var version = "1.3.2";
5
+ var version = "1.4.0";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.
@@ -46,6 +46,9 @@ var getThemePreferences = function getThemePreferences(themeState) {
46
46
  themePreferences.push(themeId);
47
47
  }
48
48
  });
49
+ if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
50
+ themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
51
+ }
49
52
  return _toConsumableArray(new Set(themePreferences));
50
53
  };
51
54
 
@@ -118,6 +118,26 @@ export var themeOverrideConfig = {
118
118
  type: 'color',
119
119
  mode: 'dark'
120
120
  }
121
+ },
122
+ 'atlassian-light-new-input-border': {
123
+ id: 'light-new-input-border',
124
+ displayName: 'Light Theme New Input Border',
125
+ palette: 'defaultPalette',
126
+ overrideTheme: 'light',
127
+ attributes: {
128
+ type: 'color',
129
+ mode: 'light'
130
+ }
131
+ },
132
+ 'atlassian-dark-new-input-border': {
133
+ id: 'dark-new-input-border',
134
+ displayName: 'Dark Theme New Input Border',
135
+ palette: 'defaultPalette',
136
+ overrideTheme: 'dark',
137
+ attributes: {
138
+ type: 'color',
139
+ mode: 'dark'
140
+ }
121
141
  }
122
142
  };
123
143
  export default themeConfig;
@@ -0,0 +1,46 @@
1
+ var color = {
2
+ color: {
3
+ border: {
4
+ '[default]': {
5
+ value: 'DarkNeutral300A'
6
+ },
7
+ bold: {
8
+ value: 'DarkNeutral600'
9
+ },
10
+ inverse: {
11
+ value: 'DarkNeutral0'
12
+ },
13
+ focused: {
14
+ value: 'Blue300'
15
+ },
16
+ input: {
17
+ value: 'DarkNeutral600'
18
+ },
19
+ disabled: {
20
+ value: 'DarkNeutral200A'
21
+ },
22
+ brand: {
23
+ value: 'Blue400'
24
+ },
25
+ selected: {
26
+ value: 'Blue400'
27
+ },
28
+ danger: {
29
+ value: 'Red500'
30
+ },
31
+ warning: {
32
+ value: 'Yellow500'
33
+ },
34
+ success: {
35
+ value: 'Green500'
36
+ },
37
+ discovery: {
38
+ value: 'Purple500'
39
+ },
40
+ information: {
41
+ value: 'Blue500'
42
+ }
43
+ }
44
+ }
45
+ };
46
+ export default color;
@@ -0,0 +1,46 @@
1
+ var color = {
2
+ color: {
3
+ border: {
4
+ '[default]': {
5
+ value: 'Neutral300A'
6
+ },
7
+ bold: {
8
+ value: 'Neutral600'
9
+ },
10
+ inverse: {
11
+ value: 'Neutral0'
12
+ },
13
+ focused: {
14
+ value: 'Blue500'
15
+ },
16
+ input: {
17
+ value: 'Neutral600'
18
+ },
19
+ disabled: {
20
+ value: 'Neutral200A'
21
+ },
22
+ brand: {
23
+ value: 'Blue700'
24
+ },
25
+ selected: {
26
+ value: 'Blue700'
27
+ },
28
+ danger: {
29
+ value: 'Red600'
30
+ },
31
+ warning: {
32
+ value: 'Orange600'
33
+ },
34
+ success: {
35
+ value: 'Green600'
36
+ },
37
+ discovery: {
38
+ value: 'Purple600'
39
+ },
40
+ information: {
41
+ value: 'Blue600'
42
+ }
43
+ }
44
+ }
45
+ };
46
+ export default color;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -6,7 +6,7 @@
6
6
  * This allows users to compose their themes and only use the tokens that are requested.
7
7
  * When a new theme is created, the import should automatically be added to the map
8
8
  *
9
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
9
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
10
10
  * @codegenCommand yarn build tokens
11
11
  */
12
12
  import { ThemeIds, ThemeOverrideIds } from '../theme-config';
@@ -0,0 +1,7 @@
1
+ declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n color-scheme: dark;\n --ds-border: #A6C5E229;\n --ds-border-disabled: #A1BDD914;\n --ds-border-focused: #85B8FF;\n --ds-border-input: #738496;\n --ds-border-inverse: #161A1D;\n --ds-border-selected: #579DFF;\n --ds-border-brand: #579DFF;\n --ds-border-danger: #EF5C48;\n --ds-border-warning: #CF9F02;\n --ds-border-success: #2ABB7F;\n --ds-border-discovery: #8F7EE7;\n --ds-border-information: #388BFF;\n --ds-border-bold: #738496;\n}\n";
2
+ /**
3
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
5
+ * @codegenCommand yarn build tokens
6
+ */
7
+ export default _default;
@@ -0,0 +1,7 @@
1
+ declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n color-scheme: light;\n --ds-border: #091E4224;\n --ds-border-disabled: #091E420F;\n --ds-border-focused: #388BFF;\n --ds-border-input: #758195;\n --ds-border-inverse: #FFFFFF;\n --ds-border-selected: #0C66E4;\n --ds-border-brand: #0C66E4;\n --ds-border-danger: #E34935;\n --ds-border-warning: #D97008;\n --ds-border-success: #22A06B;\n --ds-border-discovery: #8270DB;\n --ds-border-information: #1D7AFC;\n --ds-border-bold: #758195;\n}\n";
2
+ /**
3
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
5
+ * @codegenCommand yarn build tokens
6
+ */
7
+ export default _default;
@@ -8,7 +8,7 @@
8
8
  */
9
9
  export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
10
10
  export declare type ThemeFileNames = Themes;
11
- export declare type ThemeOverrides = 'atlassian-dark-iteration';
11
+ export declare type ThemeOverrides = 'atlassian-dark-iteration' | 'atlassian-light-new-input-border' | 'atlassian-dark-new-input-border';
12
12
  /**
13
13
  * Theme kinds: The type of theme.
14
14
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
@@ -32,7 +32,7 @@ export declare type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
32
32
  */
33
33
  export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];
34
34
  export declare type ThemeIds = (typeof themeIds)[number];
35
- export declare type ThemeOverrideIds = 'dark-iteration';
35
+ export declare type ThemeOverrideIds = 'dark-iteration' | 'light-new-input-border' | 'dark-new-input-border';
36
36
  /**
37
37
  * Theme to use a base. This will create the theme as
38
38
  * an extension with all token values marked as optional
@@ -74,5 +74,25 @@ export declare const themeOverrideConfig: {
74
74
  mode: string;
75
75
  };
76
76
  };
77
+ 'atlassian-light-new-input-border': {
78
+ id: string;
79
+ displayName: string;
80
+ palette: string;
81
+ overrideTheme: string;
82
+ attributes: {
83
+ type: string;
84
+ mode: string;
85
+ };
86
+ };
87
+ 'atlassian-dark-new-input-border': {
88
+ id: string;
89
+ displayName: string;
90
+ palette: string;
91
+ overrideTheme: string;
92
+ attributes: {
93
+ type: string;
94
+ mode: string;
95
+ };
96
+ };
77
97
  };
78
98
  export default themeConfig;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
3
+ declare const color: ValueSchema<BorderColorTokenSchema<BaseToken>>;
4
+ export default color;
@@ -0,0 +1,4 @@
1
+ import type { BaseToken } from '../../../palettes/palette';
2
+ import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
3
+ declare const color: ValueSchema<BorderColorTokenSchema<BaseToken>>;
4
+ export default color;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
4
4
  "author": "Atlassian Pty Ltd",
5
5
  "description": "Design tokens are the single source of truth to name and store design decisions.",
6
6
  "license": "Apache-2.0",
@@ -67,7 +67,7 @@
67
67
  "@atlaskit/avatar": "^21.3.0",
68
68
  "@atlaskit/badge": "^15.1.0",
69
69
  "@atlaskit/button": "^16.7.0",
70
- "@atlaskit/checkbox": "^12.5.0",
70
+ "@atlaskit/checkbox": "^12.6.0",
71
71
  "@atlaskit/code": "^14.6.0",
72
72
  "@atlaskit/docs": "^9.1.0",
73
73
  "@atlaskit/dropdown-menu": "^11.8.0",
@@ -75,7 +75,7 @@
75
75
  "@atlaskit/dynamic-table": "^14.9.0",
76
76
  "@atlaskit/empty-state": "^7.5.0",
77
77
  "@atlaskit/focus-ring": "^1.3.0",
78
- "@atlaskit/grid": "^0.9.0",
78
+ "@atlaskit/grid": "^0.10.0",
79
79
  "@atlaskit/heading": "^1.3.0",
80
80
  "@atlaskit/icon": "^21.12.0",
81
81
  "@atlaskit/lozenge": "^11.4.0",
@@ -138,6 +138,9 @@
138
138
  },
139
139
  "platform.design-system-team.dark-iteration-confluence_e2t22": {
140
140
  "type": "boolean"
141
+ },
142
+ "platform.design-system-team.update-border-input_ff9l1": {
143
+ "type": "boolean"
141
144
  }
142
145
  },
143
146
  "homepage": "https://atlassian.design/components/tokens",