@atlaskit/tokens 1.44.1 → 1.45.1
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.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js +1 -1
- package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js +1 -1
- package/dist/cjs/artifacts/generated-pairs.js +2 -2
- package/dist/cjs/artifacts/theme-import-map.js +1 -13
- package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +2 -2
- package/dist/cjs/artifacts/token-names.js +1 -1
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3 -3
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3 -3
- package/dist/cjs/get-token-value.js +1 -3
- package/dist/cjs/get-token.js +1 -3
- package/dist/cjs/theme-config.js +1 -21
- package/dist/cjs/utils/get-theme-preferences.js +0 -11
- package/dist/es2019/artifacts/atlassian-dark-token-value-for-contrast-check.js +1 -1
- package/dist/es2019/artifacts/atlassian-light-token-value-for-contrast-check.js +1 -1
- package/dist/es2019/artifacts/generated-pairs.js +2 -2
- package/dist/es2019/artifacts/theme-import-map.js +1 -5
- package/dist/es2019/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/es2019/artifacts/themes/atlassian-light.js +2 -2
- package/dist/es2019/artifacts/token-default-values.js +2 -2
- package/dist/es2019/artifacts/token-names.js +1 -1
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3 -3
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3 -3
- package/dist/es2019/get-token-value.js +1 -3
- package/dist/es2019/get-token.js +1 -3
- package/dist/es2019/theme-config.js +1 -21
- package/dist/es2019/utils/get-theme-preferences.js +0 -13
- package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js +1 -1
- package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js +1 -1
- package/dist/esm/artifacts/generated-pairs.js +2 -2
- package/dist/esm/artifacts/theme-import-map.js +1 -9
- package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +2 -2
- package/dist/esm/artifacts/token-names.js +1 -1
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3 -3
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3 -3
- package/dist/esm/get-token-value.js +1 -3
- package/dist/esm/get-token.js +1 -3
- package/dist/esm/theme-config.js +1 -21
- package/dist/esm/utils/get-theme-preferences.js +0 -11
- package/dist/types/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +1 -1
- package/dist/types/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +1 -1
- package/dist/types/artifacts/generated-pairs.d.ts +1 -1
- package/dist/types/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +2 -2
- package/dist/types/artifacts/token-names.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types/artifacts/types-internal.d.ts +1 -1
- package/dist/types/artifacts/types.d.ts +1 -1
- package/dist/types/entry-points/css-type-schema.codegen.d.ts +1 -1
- package/dist/types/theme-config.d.ts +3 -3
- package/dist/types-ts4.5/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/generated-pairs.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-names.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/types-internal.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/types.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +1 -1
- package/dist/types-ts4.5/theme-config.d.ts +2 -6
- package/figma/atlassian-dark.json +1 -1
- package/figma/atlassian-light.json +1 -1
- package/package.json +3 -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::
|
|
9
|
+
* @codegen <<SignedSource::63d467c8d0d48afd8fdc4e213175480c>>
|
|
10
10
|
* @codegenCommand yarn build tokens
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -33,10 +33,6 @@ const themeImportsMap = {
|
|
|
33
33
|
'./themes/atlassian-typography-adg3'),
|
|
34
34
|
'shape': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
|
|
35
35
|
'./themes/atlassian-shape'),
|
|
36
|
-
'light-new-input-border': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
|
|
37
|
-
'./themes/atlassian-light-new-input-border'),
|
|
38
|
-
'dark-new-input-border': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
|
|
39
|
-
'./themes/atlassian-dark-new-input-border'),
|
|
40
36
|
'typography-minor3': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-typography-minor3" */
|
|
41
37
|
'./themes/atlassian-typography-minor3')
|
|
42
38
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::bedf13dfb458956bcc31c32e7a96df13>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
export default `
|
|
@@ -79,7 +79,7 @@ html[data-color-mode="dark"][data-theme~="dark:dark"] {
|
|
|
79
79
|
--ds-border-accent-gray: #738496;
|
|
80
80
|
--ds-border-disabled: #A1BDD914;
|
|
81
81
|
--ds-border-focused: #85B8FF;
|
|
82
|
-
--ds-border-input: #
|
|
82
|
+
--ds-border-input: #738496;
|
|
83
83
|
--ds-border-inverse: #161A1D;
|
|
84
84
|
--ds-border-selected: #579DFF;
|
|
85
85
|
--ds-border-brand: #579DFF;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::ce98235c36b768192d87afe4e3c81ead>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
export default `
|
|
@@ -79,7 +79,7 @@ html[data-color-mode="dark"][data-theme~="dark:light"] {
|
|
|
79
79
|
--ds-border-accent-gray: #758195;
|
|
80
80
|
--ds-border-disabled: #091E420F;
|
|
81
81
|
--ds-border-focused: #388BFF;
|
|
82
|
-
--ds-border-input: #
|
|
82
|
+
--ds-border-input: #8590A2;
|
|
83
83
|
--ds-border-inverse: #FFFFFF;
|
|
84
84
|
--ds-border-selected: #0C66E4;
|
|
85
85
|
--ds-border-brand: #0C66E4;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* Token names mapped to their value in the default Atlassian themes ('light').
|
|
8
8
|
* These default values are used by the Babel plugin to optionally provide automatic fallbacks.
|
|
9
9
|
*
|
|
10
|
-
* @codegen <<SignedSource::
|
|
10
|
+
* @codegen <<SignedSource::a763f59076bcdd12f8056f497588016e>>
|
|
11
11
|
* @codegenCommand yarn build tokens
|
|
12
12
|
*/
|
|
13
13
|
const defaultTokenValues = {
|
|
@@ -83,7 +83,7 @@ const defaultTokenValues = {
|
|
|
83
83
|
'color.border.accent.gray': '#758195',
|
|
84
84
|
'color.border.disabled': '#091E420F',
|
|
85
85
|
'color.border.focused': '#388BFF',
|
|
86
|
-
'color.border.input': '#
|
|
86
|
+
'color.border.input': '#8590A2',
|
|
87
87
|
'color.border.inverse': '#FFFFFF',
|
|
88
88
|
'color.border.selected': '#0C66E4',
|
|
89
89
|
'color.border.brand': '#0C66E4',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::c079f4a5016671e0268eea9534acc82e>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
const tokens = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::3ca806368e7b33dc377306694b87dcc9>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
const tokens = [{
|
|
@@ -1594,7 +1594,7 @@ const tokens = [{
|
|
|
1594
1594
|
"introduced": "0.6.0",
|
|
1595
1595
|
"description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
1596
1596
|
},
|
|
1597
|
-
"value": "#
|
|
1597
|
+
"value": "#738496",
|
|
1598
1598
|
"filePath": "schema/themes/atlassian-dark/color/border.tsx",
|
|
1599
1599
|
"isSource": true,
|
|
1600
1600
|
"original": {
|
|
@@ -1604,7 +1604,7 @@ const tokens = [{
|
|
|
1604
1604
|
"introduced": "0.6.0",
|
|
1605
1605
|
"description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
1606
1606
|
},
|
|
1607
|
-
"value": "
|
|
1607
|
+
"value": "DarkNeutral600"
|
|
1608
1608
|
},
|
|
1609
1609
|
"name": "color.border.input",
|
|
1610
1610
|
"path": ["color", "border", "input"],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::c674e43d7ff4f992a02fe117eeeae704>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
const tokens = [{
|
|
@@ -1594,7 +1594,7 @@ const tokens = [{
|
|
|
1594
1594
|
"introduced": "0.6.0",
|
|
1595
1595
|
"description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
1596
1596
|
},
|
|
1597
|
-
"value": "#
|
|
1597
|
+
"value": "#8590A2",
|
|
1598
1598
|
"filePath": "schema/themes/atlassian-light/color/border.tsx",
|
|
1599
1599
|
"isSource": true,
|
|
1600
1600
|
"original": {
|
|
@@ -1604,7 +1604,7 @@ const tokens = [{
|
|
|
1604
1604
|
"introduced": "0.6.0",
|
|
1605
1605
|
"description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
1606
1606
|
},
|
|
1607
|
-
"value": "
|
|
1607
|
+
"value": "Neutral500"
|
|
1608
1608
|
},
|
|
1609
1609
|
"name": "color.border.input",
|
|
1610
1610
|
"path": ["color", "border", "input"],
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import warnOnce from '@atlaskit/ds-lib/warn-once';
|
|
2
2
|
import tokens from './artifacts/token-names';
|
|
3
|
-
const name = "@atlaskit/tokens";
|
|
4
|
-
const version = "1.44.1";
|
|
5
3
|
/**
|
|
6
4
|
* Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
|
|
7
5
|
* resulting CSS Custom Property.
|
|
@@ -27,7 +25,7 @@ function getTokenValue(tokenId, fallback = '') {
|
|
|
27
25
|
let token = tokens[tokenId];
|
|
28
26
|
let tokenValue = fallback;
|
|
29
27
|
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
|
|
30
|
-
warnOnce(`Unknown token id at path: ${tokenId}
|
|
28
|
+
warnOnce(`Unknown token id at path: ${tokenId} in @atlaskit/tokens`);
|
|
31
29
|
}
|
|
32
30
|
if (typeof window === 'undefined') {
|
|
33
31
|
return tokenValue;
|
package/dist/es2019/get-token.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
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
|
-
const name = "@atlaskit/tokens";
|
|
5
|
-
const version = "1.44.1";
|
|
6
4
|
/**
|
|
7
5
|
* Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
|
|
8
6
|
* This should be used to implement design decisions throughout your application.
|
|
@@ -28,7 +26,7 @@ const version = "1.44.1";
|
|
|
28
26
|
function token(path, fallback) {
|
|
29
27
|
let token = tokens[path];
|
|
30
28
|
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
|
|
31
|
-
warnOnce(`Unknown token id at path: ${path}
|
|
29
|
+
warnOnce(`Unknown token id at path: ${path} in @atlaskit/tokens`);
|
|
32
30
|
}
|
|
33
31
|
|
|
34
32
|
// if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
|
|
@@ -43,7 +43,7 @@ export const themeIds = ['light-increased-contrast', 'light', 'light-future', 'd
|
|
|
43
43
|
* Theme override ids: the equivalent of themeIds for theme overrides.
|
|
44
44
|
* Theme overrides are temporary and there may not be any defined at times.
|
|
45
45
|
*/
|
|
46
|
-
export const themeOverrideIds = [
|
|
46
|
+
export const themeOverrideIds = [];
|
|
47
47
|
export const themeIdsWithOverrides = [...themeIds, ...themeOverrideIds];
|
|
48
48
|
|
|
49
49
|
/**
|
|
@@ -166,26 +166,6 @@ const themeConfig = {
|
|
|
166
166
|
type: 'shape'
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
|
-
'atlassian-light-new-input-border': {
|
|
170
|
-
id: 'light-new-input-border',
|
|
171
|
-
displayName: 'Light Theme New Input Border',
|
|
172
|
-
palette: 'defaultPalette',
|
|
173
|
-
override: 'light',
|
|
174
|
-
attributes: {
|
|
175
|
-
type: 'color',
|
|
176
|
-
mode: 'light'
|
|
177
|
-
}
|
|
178
|
-
},
|
|
179
|
-
'atlassian-dark-new-input-border': {
|
|
180
|
-
id: 'dark-new-input-border',
|
|
181
|
-
displayName: 'Dark Theme New Input Border',
|
|
182
|
-
palette: 'defaultPalette',
|
|
183
|
-
override: 'dark',
|
|
184
|
-
attributes: {
|
|
185
|
-
type: 'color',
|
|
186
|
-
mode: 'dark'
|
|
187
|
-
}
|
|
188
|
-
},
|
|
189
169
|
'atlassian-typography-minor3': {
|
|
190
170
|
id: 'typography-minor3',
|
|
191
171
|
displayName: 'Atlassian Typography (Minor Third)',
|
|
@@ -39,19 +39,6 @@ export const getThemePreferences = themeState => {
|
|
|
39
39
|
return [...new Set(themePreferences)];
|
|
40
40
|
};
|
|
41
41
|
export const getThemeOverridePreferences = themeState => {
|
|
42
|
-
const {
|
|
43
|
-
colorMode
|
|
44
|
-
} = themeState;
|
|
45
42
|
const themeOverridePreferences = [];
|
|
46
|
-
if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
|
|
47
|
-
if (colorMode === 'auto') {
|
|
48
|
-
themeOverridePreferences.push('light-new-input-border');
|
|
49
|
-
themeOverridePreferences.push('dark-new-input-border');
|
|
50
|
-
} else if (colorMode === 'dark') {
|
|
51
|
-
themeOverridePreferences.push('dark-new-input-border');
|
|
52
|
-
} else {
|
|
53
|
-
themeOverridePreferences.push('light-new-input-border');
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
43
|
return [...new Set(themeOverridePreferences)];
|
|
57
44
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Token names mapped to their values, used for contrast checking when generating custom themes
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::3d22a7e3bd86119c52f9c93c78a0f24c>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
var tokenValues = {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Token names mapped to their values, used for contrast checking when generating custom themes
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::195bcc5463e7bac70239087ec0359ea2>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
var tokenValues = {
|