@atlaskit/tokens 0.10.6 → 0.10.7
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 +15 -0
- package/css/atlassian-dark.css +9 -1
- package/css/atlassian-light.css +9 -1
- package/dist/cjs/artifacts/token-default-values.js +9 -1
- package/dist/cjs/artifacts/token-names.js +9 -1
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +175 -7
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +175 -7
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/tokens/atlassian-dark/color/accent.js +28 -0
- package/dist/cjs/tokens/atlassian-light/color/accent.js +28 -0
- package/dist/cjs/tokens/default/color/accent.js +70 -2
- package/dist/cjs/tokens/default/deprecated/deprecated.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/artifacts/token-default-values.js +9 -1
- package/dist/es2019/artifacts/token-names.js +9 -1
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +175 -7
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +175 -7
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/tokens/atlassian-dark/color/accent.js +28 -0
- package/dist/es2019/tokens/atlassian-light/color/accent.js +28 -0
- package/dist/es2019/tokens/default/color/accent.js +70 -2
- package/dist/es2019/tokens/default/deprecated/deprecated.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/artifacts/token-default-values.js +9 -1
- package/dist/esm/artifacts/token-names.js +9 -1
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +175 -7
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +175 -7
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/tokens/atlassian-dark/color/accent.js +28 -0
- package/dist/esm/tokens/atlassian-light/color/accent.js +28 -0
- package/dist/esm/tokens/default/color/accent.js +70 -2
- package/dist/esm/tokens/default/deprecated/deprecated.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/token-default-values.d.ts +9 -1
- package/dist/types/artifacts/token-names.d.ts +17 -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 +2 -2
- package/dist/types/artifacts/types.d.ts +2 -2
- package/dist/types/types.d.ts +12 -0
- package/package.json +1 -1
|
@@ -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::9b6960398363032e220473a356d04712>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
var tokens = [{
|
|
@@ -339,6 +339,48 @@ var tokens = [{
|
|
|
339
339
|
},
|
|
340
340
|
"name": "color.text.accent.magenta.bolder",
|
|
341
341
|
"path": ["color", "text", "accent", "magenta", "bolder"]
|
|
342
|
+
}, {
|
|
343
|
+
"attributes": {
|
|
344
|
+
"group": "paint",
|
|
345
|
+
"state": "active",
|
|
346
|
+
"introduced": "0.10.5",
|
|
347
|
+
"description": "Use for text on non-bold gray accent backgrounds, such as colored tags."
|
|
348
|
+
},
|
|
349
|
+
"value": "#44546F",
|
|
350
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
351
|
+
"isSource": true,
|
|
352
|
+
"original": {
|
|
353
|
+
"attributes": {
|
|
354
|
+
"group": "paint",
|
|
355
|
+
"state": "active",
|
|
356
|
+
"introduced": "0.10.5",
|
|
357
|
+
"description": "Use for text on non-bold gray accent backgrounds, such as colored tags."
|
|
358
|
+
},
|
|
359
|
+
"value": "N800"
|
|
360
|
+
},
|
|
361
|
+
"name": "color.text.accent.gray.[default]",
|
|
362
|
+
"path": ["color", "text", "accent", "gray", "[default]"]
|
|
363
|
+
}, {
|
|
364
|
+
"attributes": {
|
|
365
|
+
"group": "paint",
|
|
366
|
+
"state": "active",
|
|
367
|
+
"introduced": "0.10.5",
|
|
368
|
+
"description": "Use for text and icons on gray subtle accent backgrounds."
|
|
369
|
+
},
|
|
370
|
+
"value": "#172B4D",
|
|
371
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
372
|
+
"isSource": true,
|
|
373
|
+
"original": {
|
|
374
|
+
"attributes": {
|
|
375
|
+
"group": "paint",
|
|
376
|
+
"state": "active",
|
|
377
|
+
"introduced": "0.10.5",
|
|
378
|
+
"description": "Use for text and icons on gray subtle accent backgrounds."
|
|
379
|
+
},
|
|
380
|
+
"value": "N1000"
|
|
381
|
+
},
|
|
382
|
+
"name": "color.text.accent.gray.bolder",
|
|
383
|
+
"path": ["color", "text", "accent", "gray", "bolder"]
|
|
342
384
|
}, {
|
|
343
385
|
"attributes": {
|
|
344
386
|
"group": "paint",
|
|
@@ -969,6 +1011,27 @@ var tokens = [{
|
|
|
969
1011
|
},
|
|
970
1012
|
"name": "color.icon.accent.magenta",
|
|
971
1013
|
"path": ["color", "icon", "accent", "magenta"]
|
|
1014
|
+
}, {
|
|
1015
|
+
"attributes": {
|
|
1016
|
+
"group": "paint",
|
|
1017
|
+
"state": "active",
|
|
1018
|
+
"introduced": "0.10.5",
|
|
1019
|
+
"description": "Use for icons on non-bold gray accent backgrounds, such as file type icons."
|
|
1020
|
+
},
|
|
1021
|
+
"value": "#758195",
|
|
1022
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
1023
|
+
"isSource": true,
|
|
1024
|
+
"original": {
|
|
1025
|
+
"attributes": {
|
|
1026
|
+
"group": "paint",
|
|
1027
|
+
"state": "active",
|
|
1028
|
+
"introduced": "0.10.5",
|
|
1029
|
+
"description": "Use for icons on non-bold gray accent backgrounds, such as file type icons."
|
|
1030
|
+
},
|
|
1031
|
+
"value": "N600"
|
|
1032
|
+
},
|
|
1033
|
+
"name": "color.icon.accent.gray",
|
|
1034
|
+
"path": ["color", "icon", "accent", "gray"]
|
|
972
1035
|
}, {
|
|
973
1036
|
"attributes": {
|
|
974
1037
|
"group": "paint",
|
|
@@ -1389,6 +1452,27 @@ var tokens = [{
|
|
|
1389
1452
|
},
|
|
1390
1453
|
"name": "color.border.accent.magenta",
|
|
1391
1454
|
"path": ["color", "border", "accent", "magenta"]
|
|
1455
|
+
}, {
|
|
1456
|
+
"attributes": {
|
|
1457
|
+
"group": "paint",
|
|
1458
|
+
"state": "active",
|
|
1459
|
+
"introduced": "0.10.5",
|
|
1460
|
+
"description": "Use for borders on non-bold gray accent backgrounds."
|
|
1461
|
+
},
|
|
1462
|
+
"value": "#758195",
|
|
1463
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
1464
|
+
"isSource": true,
|
|
1465
|
+
"original": {
|
|
1466
|
+
"attributes": {
|
|
1467
|
+
"group": "paint",
|
|
1468
|
+
"state": "active",
|
|
1469
|
+
"introduced": "0.10.5",
|
|
1470
|
+
"description": "Use for borders on non-bold gray accent backgrounds."
|
|
1471
|
+
},
|
|
1472
|
+
"value": "N600"
|
|
1473
|
+
},
|
|
1474
|
+
"name": "color.border.accent.gray",
|
|
1475
|
+
"path": ["color", "border", "accent", "gray"]
|
|
1392
1476
|
}, {
|
|
1393
1477
|
"attributes": {
|
|
1394
1478
|
"group": "paint",
|
|
@@ -1721,7 +1805,7 @@ var tokens = [{
|
|
|
1721
1805
|
"group": "paint",
|
|
1722
1806
|
"state": "active",
|
|
1723
1807
|
"introduced": "0.7.0",
|
|
1724
|
-
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
1808
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1725
1809
|
},
|
|
1726
1810
|
"value": "#CCE0FF",
|
|
1727
1811
|
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
@@ -1731,7 +1815,7 @@ var tokens = [{
|
|
|
1731
1815
|
"group": "paint",
|
|
1732
1816
|
"state": "active",
|
|
1733
1817
|
"introduced": "0.7.0",
|
|
1734
|
-
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
1818
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1735
1819
|
},
|
|
1736
1820
|
"value": "B200"
|
|
1737
1821
|
},
|
|
@@ -1742,7 +1826,7 @@ var tokens = [{
|
|
|
1742
1826
|
"group": "paint",
|
|
1743
1827
|
"state": "active",
|
|
1744
1828
|
"introduced": "0.7.0",
|
|
1745
|
-
"description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as
|
|
1829
|
+
"description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1746
1830
|
},
|
|
1747
1831
|
"value": "#579DFF",
|
|
1748
1832
|
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
@@ -1752,7 +1836,7 @@ var tokens = [{
|
|
|
1752
1836
|
"group": "paint",
|
|
1753
1837
|
"state": "active",
|
|
1754
1838
|
"introduced": "0.7.0",
|
|
1755
|
-
"description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as
|
|
1839
|
+
"description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1756
1840
|
},
|
|
1757
1841
|
"value": "B400"
|
|
1758
1842
|
},
|
|
@@ -1787,7 +1871,7 @@ var tokens = [{
|
|
|
1787
1871
|
"deprecated": "0.7.0",
|
|
1788
1872
|
"deleted": "0.8.0",
|
|
1789
1873
|
"replacement": "color.background.accent.blue.subtler",
|
|
1790
|
-
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
1874
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1791
1875
|
},
|
|
1792
1876
|
"value": "#CCE0FF",
|
|
1793
1877
|
"filePath": "src/tokens/atlassian-light/deprecated/deprecated.tsx",
|
|
@@ -1800,7 +1884,7 @@ var tokens = [{
|
|
|
1800
1884
|
"deprecated": "0.7.0",
|
|
1801
1885
|
"deleted": "0.8.0",
|
|
1802
1886
|
"replacement": "color.background.accent.blue.subtler",
|
|
1803
|
-
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
1887
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1804
1888
|
},
|
|
1805
1889
|
"value": "B200"
|
|
1806
1890
|
},
|
|
@@ -2799,6 +2883,90 @@ var tokens = [{
|
|
|
2799
2883
|
},
|
|
2800
2884
|
"name": "color.background.accent.magenta.bold",
|
|
2801
2885
|
"path": ["color", "background", "accent", "magenta", "bold"]
|
|
2886
|
+
}, {
|
|
2887
|
+
"attributes": {
|
|
2888
|
+
"group": "paint",
|
|
2889
|
+
"state": "active",
|
|
2890
|
+
"introduced": "0.7.0",
|
|
2891
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
2892
|
+
},
|
|
2893
|
+
"value": "#F1F2F4",
|
|
2894
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
2895
|
+
"isSource": true,
|
|
2896
|
+
"original": {
|
|
2897
|
+
"attributes": {
|
|
2898
|
+
"group": "paint",
|
|
2899
|
+
"state": "active",
|
|
2900
|
+
"introduced": "0.7.0",
|
|
2901
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
2902
|
+
},
|
|
2903
|
+
"value": "N200"
|
|
2904
|
+
},
|
|
2905
|
+
"name": "color.background.accent.gray.subtlest",
|
|
2906
|
+
"path": ["color", "background", "accent", "gray", "subtlest"]
|
|
2907
|
+
}, {
|
|
2908
|
+
"attributes": {
|
|
2909
|
+
"group": "paint",
|
|
2910
|
+
"state": "active",
|
|
2911
|
+
"introduced": "0.7.0",
|
|
2912
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
2913
|
+
},
|
|
2914
|
+
"value": "#DCDFE4",
|
|
2915
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
2916
|
+
"isSource": true,
|
|
2917
|
+
"original": {
|
|
2918
|
+
"attributes": {
|
|
2919
|
+
"group": "paint",
|
|
2920
|
+
"state": "active",
|
|
2921
|
+
"introduced": "0.7.0",
|
|
2922
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
2923
|
+
},
|
|
2924
|
+
"value": "N300"
|
|
2925
|
+
},
|
|
2926
|
+
"name": "color.background.accent.gray.subtler",
|
|
2927
|
+
"path": ["color", "background", "accent", "gray", "subtler"]
|
|
2928
|
+
}, {
|
|
2929
|
+
"attributes": {
|
|
2930
|
+
"group": "paint",
|
|
2931
|
+
"state": "active",
|
|
2932
|
+
"introduced": "0.7.0",
|
|
2933
|
+
"description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
2934
|
+
},
|
|
2935
|
+
"value": "#8993A5",
|
|
2936
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
2937
|
+
"isSource": true,
|
|
2938
|
+
"original": {
|
|
2939
|
+
"attributes": {
|
|
2940
|
+
"group": "paint",
|
|
2941
|
+
"state": "active",
|
|
2942
|
+
"introduced": "0.7.0",
|
|
2943
|
+
"description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
2944
|
+
},
|
|
2945
|
+
"value": "N500"
|
|
2946
|
+
},
|
|
2947
|
+
"name": "color.background.accent.gray.subtle",
|
|
2948
|
+
"path": ["color", "background", "accent", "gray", "subtle"]
|
|
2949
|
+
}, {
|
|
2950
|
+
"attributes": {
|
|
2951
|
+
"group": "paint",
|
|
2952
|
+
"state": "active",
|
|
2953
|
+
"introduced": "0.7.0",
|
|
2954
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
2955
|
+
},
|
|
2956
|
+
"value": "#626F86",
|
|
2957
|
+
"filePath": "src/tokens/atlassian-light/color/accent.tsx",
|
|
2958
|
+
"isSource": true,
|
|
2959
|
+
"original": {
|
|
2960
|
+
"attributes": {
|
|
2961
|
+
"group": "paint",
|
|
2962
|
+
"state": "active",
|
|
2963
|
+
"introduced": "0.7.0",
|
|
2964
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
2965
|
+
},
|
|
2966
|
+
"value": "N700"
|
|
2967
|
+
},
|
|
2968
|
+
"name": "color.background.accent.gray.bolder",
|
|
2969
|
+
"path": ["color", "background", "accent", "gray", "bolder"]
|
|
2802
2970
|
}, {
|
|
2803
2971
|
"attributes": {
|
|
2804
2972
|
"group": "paint",
|
package/dist/esm/get-token.js
CHANGED
|
@@ -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 = "0.10.
|
|
5
|
+
var version = "0.10.7";
|
|
6
6
|
|
|
7
7
|
function token(path, fallback) {
|
|
8
8
|
var token = tokens[path];
|
|
@@ -65,6 +65,14 @@ var color = {
|
|
|
65
65
|
bolder: {
|
|
66
66
|
value: 'M200'
|
|
67
67
|
}
|
|
68
|
+
},
|
|
69
|
+
gray: {
|
|
70
|
+
'[default]': {
|
|
71
|
+
value: 'DN800'
|
|
72
|
+
},
|
|
73
|
+
bolder: {
|
|
74
|
+
value: 'DN1000'
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
},
|
|
@@ -93,6 +101,9 @@ var color = {
|
|
|
93
101
|
},
|
|
94
102
|
magenta: {
|
|
95
103
|
value: 'M500'
|
|
104
|
+
},
|
|
105
|
+
gray: {
|
|
106
|
+
value: 'DN600'
|
|
96
107
|
}
|
|
97
108
|
}
|
|
98
109
|
},
|
|
@@ -121,6 +132,9 @@ var color = {
|
|
|
121
132
|
},
|
|
122
133
|
magenta: {
|
|
123
134
|
value: 'M500'
|
|
135
|
+
},
|
|
136
|
+
gray: {
|
|
137
|
+
value: 'DN600'
|
|
124
138
|
}
|
|
125
139
|
}
|
|
126
140
|
},
|
|
@@ -237,6 +251,20 @@ var color = {
|
|
|
237
251
|
bolder: {
|
|
238
252
|
value: 'M400'
|
|
239
253
|
}
|
|
254
|
+
},
|
|
255
|
+
gray: {
|
|
256
|
+
subtlest: {
|
|
257
|
+
value: 'DN300'
|
|
258
|
+
},
|
|
259
|
+
subtler: {
|
|
260
|
+
value: 'DN400'
|
|
261
|
+
},
|
|
262
|
+
subtle: {
|
|
263
|
+
value: 'DN500'
|
|
264
|
+
},
|
|
265
|
+
bolder: {
|
|
266
|
+
value: 'DN700'
|
|
267
|
+
}
|
|
240
268
|
}
|
|
241
269
|
}
|
|
242
270
|
}
|
|
@@ -65,6 +65,14 @@ var color = {
|
|
|
65
65
|
bolder: {
|
|
66
66
|
value: 'M900'
|
|
67
67
|
}
|
|
68
|
+
},
|
|
69
|
+
gray: {
|
|
70
|
+
'[default]': {
|
|
71
|
+
value: 'N800'
|
|
72
|
+
},
|
|
73
|
+
bolder: {
|
|
74
|
+
value: 'N1000'
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
},
|
|
@@ -93,6 +101,9 @@ var color = {
|
|
|
93
101
|
},
|
|
94
102
|
magenta: {
|
|
95
103
|
value: 'M600'
|
|
104
|
+
},
|
|
105
|
+
gray: {
|
|
106
|
+
value: 'N600'
|
|
96
107
|
}
|
|
97
108
|
}
|
|
98
109
|
},
|
|
@@ -121,6 +132,9 @@ var color = {
|
|
|
121
132
|
},
|
|
122
133
|
magenta: {
|
|
123
134
|
value: 'M600'
|
|
135
|
+
},
|
|
136
|
+
gray: {
|
|
137
|
+
value: 'N600'
|
|
124
138
|
}
|
|
125
139
|
}
|
|
126
140
|
},
|
|
@@ -237,6 +251,20 @@ var color = {
|
|
|
237
251
|
bolder: {
|
|
238
252
|
value: 'M700'
|
|
239
253
|
}
|
|
254
|
+
},
|
|
255
|
+
gray: {
|
|
256
|
+
subtlest: {
|
|
257
|
+
value: 'N200'
|
|
258
|
+
},
|
|
259
|
+
subtler: {
|
|
260
|
+
value: 'N300'
|
|
261
|
+
},
|
|
262
|
+
subtle: {
|
|
263
|
+
value: 'N500'
|
|
264
|
+
},
|
|
265
|
+
bolder: {
|
|
266
|
+
value: 'N700'
|
|
267
|
+
}
|
|
240
268
|
}
|
|
241
269
|
}
|
|
242
270
|
}
|
|
@@ -145,6 +145,24 @@ var color = {
|
|
|
145
145
|
description: 'Use on bold magenta accent backgrounds.'
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
+
},
|
|
149
|
+
gray: {
|
|
150
|
+
'[default]': {
|
|
151
|
+
attributes: {
|
|
152
|
+
group: 'paint',
|
|
153
|
+
state: 'active',
|
|
154
|
+
introduced: '0.10.5',
|
|
155
|
+
description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.'
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
bolder: {
|
|
159
|
+
attributes: {
|
|
160
|
+
group: 'paint',
|
|
161
|
+
state: 'active',
|
|
162
|
+
introduced: '0.10.5',
|
|
163
|
+
description: 'Use for text and icons on gray subtle accent backgrounds.'
|
|
164
|
+
}
|
|
165
|
+
}
|
|
148
166
|
}
|
|
149
167
|
}
|
|
150
168
|
},
|
|
@@ -213,6 +231,14 @@ var color = {
|
|
|
213
231
|
introduced: '0.6.0',
|
|
214
232
|
description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
|
|
215
233
|
}
|
|
234
|
+
},
|
|
235
|
+
gray: {
|
|
236
|
+
attributes: {
|
|
237
|
+
group: 'paint',
|
|
238
|
+
state: 'active',
|
|
239
|
+
introduced: '0.10.5',
|
|
240
|
+
description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.'
|
|
241
|
+
}
|
|
216
242
|
}
|
|
217
243
|
}
|
|
218
244
|
},
|
|
@@ -281,6 +307,14 @@ var color = {
|
|
|
281
307
|
introduced: '0.6.0',
|
|
282
308
|
description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
|
|
283
309
|
}
|
|
310
|
+
},
|
|
311
|
+
gray: {
|
|
312
|
+
attributes: {
|
|
313
|
+
group: 'paint',
|
|
314
|
+
state: 'active',
|
|
315
|
+
introduced: '0.10.5',
|
|
316
|
+
description: 'Use for borders on non-bold gray accent backgrounds.'
|
|
317
|
+
}
|
|
284
318
|
}
|
|
285
319
|
}
|
|
286
320
|
},
|
|
@@ -300,7 +334,7 @@ var color = {
|
|
|
300
334
|
group: 'paint',
|
|
301
335
|
state: 'active',
|
|
302
336
|
introduced: '0.7.0',
|
|
303
|
-
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
337
|
+
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
304
338
|
}
|
|
305
339
|
},
|
|
306
340
|
subtle: {
|
|
@@ -308,7 +342,7 @@ var color = {
|
|
|
308
342
|
group: 'paint',
|
|
309
343
|
state: 'active',
|
|
310
344
|
introduced: '0.7.0',
|
|
311
|
-
description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as
|
|
345
|
+
description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
312
346
|
}
|
|
313
347
|
},
|
|
314
348
|
bolder: {
|
|
@@ -557,6 +591,40 @@ var color = {
|
|
|
557
591
|
description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
558
592
|
}
|
|
559
593
|
}
|
|
594
|
+
},
|
|
595
|
+
gray: {
|
|
596
|
+
subtlest: {
|
|
597
|
+
attributes: {
|
|
598
|
+
group: 'paint',
|
|
599
|
+
state: 'active',
|
|
600
|
+
introduced: '0.7.0',
|
|
601
|
+
description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
|
|
602
|
+
}
|
|
603
|
+
},
|
|
604
|
+
subtler: {
|
|
605
|
+
attributes: {
|
|
606
|
+
group: 'paint',
|
|
607
|
+
state: 'active',
|
|
608
|
+
introduced: '0.7.0',
|
|
609
|
+
description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
610
|
+
}
|
|
611
|
+
},
|
|
612
|
+
subtle: {
|
|
613
|
+
attributes: {
|
|
614
|
+
group: 'paint',
|
|
615
|
+
state: 'active',
|
|
616
|
+
introduced: '0.7.0',
|
|
617
|
+
description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
618
|
+
}
|
|
619
|
+
},
|
|
620
|
+
bolder: {
|
|
621
|
+
attributes: {
|
|
622
|
+
group: 'paint',
|
|
623
|
+
state: 'active',
|
|
624
|
+
introduced: '0.7.0',
|
|
625
|
+
description: 'Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
|
|
626
|
+
}
|
|
627
|
+
}
|
|
560
628
|
}
|
|
561
629
|
}
|
|
562
630
|
}
|
|
@@ -156,7 +156,7 @@ var color = {
|
|
|
156
156
|
deprecated: '0.7.0',
|
|
157
157
|
deleted: '0.8.0',
|
|
158
158
|
replacement: 'color.background.accent.blue.subtler',
|
|
159
|
-
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as
|
|
159
|
+
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
bold: {
|
package/dist/esm/version.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Token names mapped to their value in the default Atlassian theme ('light')
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::a819b31f00d394be417445acd67bd024>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
declare const defaultTokenValues: {
|
|
@@ -23,6 +23,8 @@ declare const defaultTokenValues: {
|
|
|
23
23
|
readonly 'color.text.accent.teal.bolder': "#1D474C";
|
|
24
24
|
readonly 'color.text.accent.magenta': "#943D73";
|
|
25
25
|
readonly 'color.text.accent.magenta.bolder': "#50253F";
|
|
26
|
+
readonly 'color.text.accent.gray': "#44546F";
|
|
27
|
+
readonly 'color.text.accent.gray.bolder': "#172B4D";
|
|
26
28
|
readonly 'color.text': "#172B4D";
|
|
27
29
|
readonly 'color.text.subtle': "#44546F";
|
|
28
30
|
readonly 'color.text.subtlest': "#626F86";
|
|
@@ -51,6 +53,7 @@ declare const defaultTokenValues: {
|
|
|
51
53
|
readonly 'color.icon.accent.purple': "#8270DB";
|
|
52
54
|
readonly 'color.icon.accent.teal': "#1D9AAA";
|
|
53
55
|
readonly 'color.icon.accent.magenta': "#CD519D";
|
|
56
|
+
readonly 'color.icon.accent.gray': "#758195";
|
|
54
57
|
readonly 'color.icon': "#44546F";
|
|
55
58
|
readonly 'color.icon.subtle': "#626F86";
|
|
56
59
|
readonly 'color.icon.inverse': "#FFFFFF";
|
|
@@ -71,6 +74,7 @@ declare const defaultTokenValues: {
|
|
|
71
74
|
readonly 'color.border.accent.purple': "#8270DB";
|
|
72
75
|
readonly 'color.border.accent.teal': "#1D9AAA";
|
|
73
76
|
readonly 'color.border.accent.magenta': "#CD519D";
|
|
77
|
+
readonly 'color.border.accent.gray': "#758195";
|
|
74
78
|
readonly 'color.border': "#091E4224";
|
|
75
79
|
readonly 'color.border.inverse': "#FFFFFF";
|
|
76
80
|
readonly 'color.border.focused': "#388BFF";
|
|
@@ -133,6 +137,10 @@ declare const defaultTokenValues: {
|
|
|
133
137
|
readonly 'color.background.accent.magenta.bolder': "#AE4787";
|
|
134
138
|
readonly 'color.background.accent.magenta': "#FDD0EC";
|
|
135
139
|
readonly 'color.background.accent.magenta.bold': "#E774BB";
|
|
140
|
+
readonly 'color.background.accent.gray.subtlest': "#F1F2F4";
|
|
141
|
+
readonly 'color.background.accent.gray.subtler': "#DCDFE4";
|
|
142
|
+
readonly 'color.background.accent.gray.subtle': "#8993A5";
|
|
143
|
+
readonly 'color.background.accent.gray.bolder': "#626F86";
|
|
136
144
|
readonly 'color.background.disabled': "#091E420F";
|
|
137
145
|
readonly 'color.background.inverse.subtle': "#00000029";
|
|
138
146
|
readonly 'color.background.inverse.subtle.hovered': "#0000003D";
|
|
@@ -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::b251fc1793ba7f689b4c3707310c1556>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: {
|
|
@@ -20,6 +20,8 @@ declare const tokens: {
|
|
|
20
20
|
readonly 'color.text.accent.teal.bolder': "--ds-text-accent-teal-bolder";
|
|
21
21
|
readonly 'color.text.accent.magenta': "--ds-text-accent-magenta";
|
|
22
22
|
readonly 'color.text.accent.magenta.bolder': "--ds-text-accent-magenta-bolder";
|
|
23
|
+
readonly 'color.text.accent.gray': "--ds-text-accent-gray";
|
|
24
|
+
readonly 'color.text.accent.gray.bolder': "--ds-text-accent-gray-bolder";
|
|
23
25
|
readonly 'color.text': "--ds-text";
|
|
24
26
|
readonly 'color.text.subtle': "--ds-text-subtle";
|
|
25
27
|
readonly 'color.text.subtlest': "--ds-text-subtlest";
|
|
@@ -48,6 +50,7 @@ declare const tokens: {
|
|
|
48
50
|
readonly 'color.icon.accent.purple': "--ds-icon-accent-purple";
|
|
49
51
|
readonly 'color.icon.accent.teal': "--ds-icon-accent-teal";
|
|
50
52
|
readonly 'color.icon.accent.magenta': "--ds-icon-accent-magenta";
|
|
53
|
+
readonly 'color.icon.accent.gray': "--ds-icon-accent-gray";
|
|
51
54
|
readonly 'color.icon': "--ds-icon";
|
|
52
55
|
readonly 'color.icon.subtle': "--ds-icon-subtle";
|
|
53
56
|
readonly 'color.icon.inverse': "--ds-icon-inverse";
|
|
@@ -68,6 +71,7 @@ declare const tokens: {
|
|
|
68
71
|
readonly 'color.border.accent.purple': "--ds-border-accent-purple";
|
|
69
72
|
readonly 'color.border.accent.teal': "--ds-border-accent-teal";
|
|
70
73
|
readonly 'color.border.accent.magenta': "--ds-border-accent-magenta";
|
|
74
|
+
readonly 'color.border.accent.gray': "--ds-border-accent-gray";
|
|
71
75
|
readonly 'color.border': "--ds-border";
|
|
72
76
|
readonly 'color.border.inverse': "--ds-border-inverse";
|
|
73
77
|
readonly 'color.border.focused': "--ds-border-focused";
|
|
@@ -130,6 +134,10 @@ declare const tokens: {
|
|
|
130
134
|
readonly 'color.background.accent.magenta.bolder': "--ds-background-accent-magenta-bolder";
|
|
131
135
|
readonly 'color.background.accent.magenta': "--ds-background-accent-magenta";
|
|
132
136
|
readonly 'color.background.accent.magenta.bold': "--ds-background-accent-magenta-bold";
|
|
137
|
+
readonly 'color.background.accent.gray.subtlest': "--ds-background-accent-gray-subtlest";
|
|
138
|
+
readonly 'color.background.accent.gray.subtler': "--ds-background-accent-gray-subtler";
|
|
139
|
+
readonly 'color.background.accent.gray.subtle': "--ds-background-accent-gray-subtle";
|
|
140
|
+
readonly 'color.background.accent.gray.bolder': "--ds-background-accent-gray-bolder";
|
|
133
141
|
readonly 'color.background.disabled': "--ds-background-disabled";
|
|
134
142
|
readonly 'color.background.inverse.subtle': "--ds-background-inverse-subtle";
|
|
135
143
|
readonly 'color.background.inverse.subtle.hovered': "--ds-background-inverse-subtle-hovered";
|
|
@@ -296,6 +304,8 @@ export declare type CSSTokenMap = {
|
|
|
296
304
|
'color.text.accent.teal.bolder': 'var(--ds-text-accent-teal-bolder)';
|
|
297
305
|
'color.text.accent.magenta': 'var(--ds-text-accent-magenta)';
|
|
298
306
|
'color.text.accent.magenta.bolder': 'var(--ds-text-accent-magenta-bolder)';
|
|
307
|
+
'color.text.accent.gray': 'var(--ds-text-accent-gray)';
|
|
308
|
+
'color.text.accent.gray.bolder': 'var(--ds-text-accent-gray-bolder)';
|
|
299
309
|
'color.text': 'var(--ds-text)';
|
|
300
310
|
'color.text.subtle': 'var(--ds-text-subtle)';
|
|
301
311
|
'color.text.subtlest': 'var(--ds-text-subtlest)';
|
|
@@ -324,6 +334,7 @@ export declare type CSSTokenMap = {
|
|
|
324
334
|
'color.icon.accent.purple': 'var(--ds-icon-accent-purple)';
|
|
325
335
|
'color.icon.accent.teal': 'var(--ds-icon-accent-teal)';
|
|
326
336
|
'color.icon.accent.magenta': 'var(--ds-icon-accent-magenta)';
|
|
337
|
+
'color.icon.accent.gray': 'var(--ds-icon-accent-gray)';
|
|
327
338
|
'color.icon': 'var(--ds-icon)';
|
|
328
339
|
'color.icon.subtle': 'var(--ds-icon-subtle)';
|
|
329
340
|
'color.icon.inverse': 'var(--ds-icon-inverse)';
|
|
@@ -344,6 +355,7 @@ export declare type CSSTokenMap = {
|
|
|
344
355
|
'color.border.accent.purple': 'var(--ds-border-accent-purple)';
|
|
345
356
|
'color.border.accent.teal': 'var(--ds-border-accent-teal)';
|
|
346
357
|
'color.border.accent.magenta': 'var(--ds-border-accent-magenta)';
|
|
358
|
+
'color.border.accent.gray': 'var(--ds-border-accent-gray)';
|
|
347
359
|
'color.border': 'var(--ds-border)';
|
|
348
360
|
'color.border.inverse': 'var(--ds-border-inverse)';
|
|
349
361
|
'color.border.focused': 'var(--ds-border-focused)';
|
|
@@ -406,6 +418,10 @@ export declare type CSSTokenMap = {
|
|
|
406
418
|
'color.background.accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
|
|
407
419
|
'color.background.accent.magenta': 'var(--ds-background-accent-magenta)';
|
|
408
420
|
'color.background.accent.magenta.bold': 'var(--ds-background-accent-magenta-bold)';
|
|
421
|
+
'color.background.accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
|
|
422
|
+
'color.background.accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
|
|
423
|
+
'color.background.accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
|
|
424
|
+
'color.background.accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
|
|
409
425
|
'color.background.disabled': 'var(--ds-background-disabled)';
|
|
410
426
|
'color.background.inverse.subtle': 'var(--ds-background-inverse-subtle)';
|
|
411
427
|
'color.background.inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';
|
|
@@ -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::3354689a803bcf6799054d3faa65df85>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare 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::9b6960398363032e220473a356d04712>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: ({
|