Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@atlaskit/tokens

Package Overview
Dependencies
Maintainers
1
Versions
222
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/tokens - npm Package Compare versions

Comparing version 0.6.3 to 0.7.0

26

CHANGELOG.md
# @atlaskit/tokens
## 0.7.0
### Minor Changes
- [`220aa7f8aab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/220aa7f8aab) - [ux] Dark Mode token colours changed for the background of elements in a selected state (color.background.brand)
### Patch Changes
- [`c2ec60d6a1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ec60d6a1b) - [ux] Updating existing 16 background accent colors
- Rename default to subtler (Light:200 / Dark:900)
- Rename bold renamed to subtle (Light:400 / Dark:700)
- Update this ⤴ base token for dark mode from 700 to 800 (so it is now Light:400 / Dark:800)
16 new accent background colors:
- color.background.accent.[color].subtlest (Light: 100 / Dark:1000)
- color.background.accent.[color].bolder (Light: 700 / Dark: 400)
8 new text accent colors:
- color.text.accent.[color].bolder (Light:900 / Dark:200)
- [`7b6b994bef5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b6b994bef5) - Correct shorthand hex code conversion in Figma synchronisation script
- [`91a3f179e8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/91a3f179e8c) - Prefix warnings to deprecated tokens in the Figma synchronizer script
## 0.6.3

@@ -4,0 +30,0 @@

90

dist/cjs/artifacts/rename-mapping.js

@@ -58,2 +58,66 @@ "use strict";

}, {
"path": "color.background.accent.blue.[default]",
"state": "deprecated",
"replacement": "color.background.accent.blue.subtler"
}, {
"path": "color.background.accent.blue.bold",
"state": "deprecated",
"replacement": "color.background.accent.blue.subtle"
}, {
"path": "color.background.accent.red.[default]",
"state": "deprecated",
"replacement": "color.background.accent.red.subtler"
}, {
"path": "color.background.accent.red.bold",
"state": "deprecated",
"replacement": "color.background.accent.red.subtle"
}, {
"path": "color.background.accent.orange.[default]",
"state": "deprecated",
"replacement": "color.background.accent.orange.subtler"
}, {
"path": "color.background.accent.orange.bold",
"state": "deprecated",
"replacement": "color.background.accent.orange.subtle"
}, {
"path": "color.background.accent.yellow.[default]",
"state": "deprecated",
"replacement": "color.background.accent.yellow.subtler"
}, {
"path": "color.background.accent.yellow.bold",
"state": "deprecated",
"replacement": "color.background.accent.yellow.subtle"
}, {
"path": "color.background.accent.green.[default]",
"state": "deprecated",
"replacement": "color.background.accent.green.subtler"
}, {
"path": "color.background.accent.green.bold",
"state": "deprecated",
"replacement": "color.background.accent.green.subtle"
}, {
"path": "color.background.accent.teal.[default]",
"state": "deprecated",
"replacement": "color.background.accent.teal.subtler"
}, {
"path": "color.background.accent.teal.bold",
"state": "deprecated",
"replacement": "color.background.accent.teal.subtle"
}, {
"path": "color.background.accent.purple.[default]",
"state": "deprecated",
"replacement": "color.background.accent.purple.subtler"
}, {
"path": "color.background.accent.purple.bold",
"state": "deprecated",
"replacement": "color.background.accent.purple.subtle"
}, {
"path": "color.background.accent.magenta.[default]",
"state": "deprecated",
"replacement": "color.background.accent.magenta.subtler"
}, {
"path": "color.background.accent.magenta.bold",
"state": "deprecated",
"replacement": "color.background.accent.magenta.subtle"
}, {
"path": "color.background.brand.[default].[default]",

@@ -261,51 +325,51 @@ "state": "deprecated",

"state": "deprecated",
"replacement": "color.background.accent.blue.bold"
"replacement": "color.background.accent.blue.bolder"
}, {
"path": "color.accent.boldGreen",
"state": "deprecated",
"replacement": "color.background.accent.green.bold"
"replacement": "color.background.accent.green.bolder"
}, {
"path": "color.accent.boldOrange",
"state": "deprecated",
"replacement": "color.background.accent.orange.bold"
"replacement": "color.background.accent.orange.bolder"
}, {
"path": "color.accent.boldPurple",
"state": "deprecated",
"replacement": "color.background.accent.purple.bold"
"replacement": "color.background.accent.purple.bolder"
}, {
"path": "color.accent.boldRed",
"state": "deprecated",
"replacement": "color.background.accent.red.bold"
"replacement": "color.background.accent.red.bolder"
}, {
"path": "color.accent.boldTeal",
"state": "deprecated",
"replacement": "color.background.accent.teal.bold"
"replacement": "color.background.accent.teal.bolder"
}, {
"path": "color.accent.subtleBlue",
"state": "deprecated",
"replacement": "color.background.accent.blue.[default]"
"replacement": "color.background.accent.blue.subtler"
}, {
"path": "color.accent.subtleGreen",
"state": "deprecated",
"replacement": "color.background.accent.green.[default]"
"replacement": "color.background.accent.green.subtler"
}, {
"path": "color.accent.subtleMagenta",
"state": "deprecated",
"replacement": "color.background.accent.magenta.[default]"
"replacement": "color.background.accent.magenta.subtler"
}, {
"path": "color.accent.subtleOrange",
"state": "deprecated",
"replacement": "color.background.accent.orange.[default]"
"replacement": "color.background.accent.orange.subtler"
}, {
"path": "color.accent.subtlePurple",
"state": "deprecated",
"replacement": "color.background.accent.purple.[default]"
"replacement": "color.background.accent.purple.subtler"
}, {
"path": "color.accent.subtleRed",
"state": "deprecated",
"replacement": "color.background.accent.red.[default]"
"replacement": "color.background.accent.red.subtler"
}, {
"path": "color.accent.subtleTeal",
"state": "deprecated",
"replacement": "color.background.accent.teal.[default]"
"replacement": "color.background.accent.teal.subtler"
}, {

@@ -312,0 +376,0 @@ "path": "color.iconBorder.brand",

40

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

@@ -15,9 +15,17 @@ "use strict";

'color.text.accent.blue': '#0055CC',
'color.text.accent.blue.bolder': '#09326C',
'color.text.accent.red': '#AE2A19',
'color.text.accent.red.bolder': '#601E16',
'color.text.accent.orange': '#974F0C',
'color.text.accent.orange.bolder': '#5F3811',
'color.text.accent.yellow': '#7F5F01',
'color.text.accent.yellow.bolder': '#533F04',
'color.text.accent.green': '#216E4E',
'color.text.accent.green.bolder': '#164B35',
'color.text.accent.purple': '#5E4DB2',
'color.text.accent.purple.bolder': '#352C63',
'color.text.accent.teal': '#206B74',
'color.text.accent.teal.bolder': '#1D474C',
'color.text.accent.magenta': '#943D73',
'color.text.accent.magenta.bolder': '#50253F',
'color.text': '#172B4D',

@@ -84,16 +92,48 @@ 'color.text.subtle': '#44546F',

'color.border.neutral': '#091E4224',
'color.background.accent.blue.subtlest': '#E9F2FF',
'color.background.accent.blue.subtler': '#CCE0FF',
'color.background.accent.blue.subtle': '#579DFF',
'color.background.accent.blue.bolder': '#0C66E4',
'color.background.accent.blue': '#CCE0FF',
'color.background.accent.blue.bold': '#579DFF',
'color.background.accent.red.subtlest': '#FFEDEB',
'color.background.accent.red.subtler': '#FFD2CC',
'color.background.accent.red.subtle': '#F87462',
'color.background.accent.red.bolder': '#CA3521',
'color.background.accent.red': '#FFD2CC',
'color.background.accent.red.bold': '#F87462',
'color.background.accent.orange.subtlest': '#FFF4E5',
'color.background.accent.orange.subtler': '#FFE2BD',
'color.background.accent.orange.subtle': '#FAA53D',
'color.background.accent.orange.bolder': '#B65C02',
'color.background.accent.orange': '#FFE2BD',
'color.background.accent.orange.bold': '#FAA53D',
'color.background.accent.yellow.subtlest': '#FFF7D6',
'color.background.accent.yellow.subtler': '#F8E6A0',
'color.background.accent.yellow.subtle': '#E2B203',
'color.background.accent.yellow.bolder': '#946F00',
'color.background.accent.yellow': '#F8E6A0',
'color.background.accent.yellow.bold': '#E2B203',
'color.background.accent.green.subtlest': '#DFFCF0',
'color.background.accent.green.subtler': '#BAF3DB',
'color.background.accent.green.subtle': '#4BCE97',
'color.background.accent.green.bolder': '#1F845A',
'color.background.accent.green': '#BAF3DB',
'color.background.accent.green.bold': '#4BCE97',
'color.background.accent.teal.subtlest': '#E3FAFC',
'color.background.accent.teal.subtler': '#C1F0F5',
'color.background.accent.teal.subtle': '#60C6D2',
'color.background.accent.teal.bolder': '#1D7F8C',
'color.background.accent.teal': '#C1F0F5',
'color.background.accent.teal.bold': '#60C6D2',
'color.background.accent.purple.subtlest': '#F3F0FF',
'color.background.accent.purple.subtler': '#DFD8FD',
'color.background.accent.purple.subtle': '#9F8FEF',
'color.background.accent.purple.bolder': '#6E5DC6',
'color.background.accent.purple': '#DFD8FD',
'color.background.accent.purple.bold': '#9F8FEF',
'color.background.accent.magenta.subtlest': '#FFECF8',
'color.background.accent.magenta.subtler': '#FDD0EC',
'color.background.accent.magenta.subtle': '#E774BB',
'color.background.accent.magenta.bolder': '#AE4787',
'color.background.accent.magenta': '#FDD0EC',

@@ -100,0 +140,0 @@ 'color.background.accent.magenta.bold': '#E774BB',

40

dist/cjs/artifacts/token-names.js

@@ -11,9 +11,17 @@ "use strict";

'color.text.accent.blue': '--ds-text-accent-blue',
'color.text.accent.blue.bolder': '--ds-text-accent-blue-bolder',
'color.text.accent.red': '--ds-text-accent-red',
'color.text.accent.red.bolder': '--ds-text-accent-red-bolder',
'color.text.accent.orange': '--ds-text-accent-orange',
'color.text.accent.orange.bolder': '--ds-text-accent-orange-bolder',
'color.text.accent.yellow': '--ds-text-accent-yellow',
'color.text.accent.yellow.bolder': '--ds-text-accent-yellow-bolder',
'color.text.accent.green': '--ds-text-accent-green',
'color.text.accent.green.bolder': '--ds-text-accent-green-bolder',
'color.text.accent.purple': '--ds-text-accent-purple',
'color.text.accent.purple.bolder': '--ds-text-accent-purple-bolder',
'color.text.accent.teal': '--ds-text-accent-teal',
'color.text.accent.teal.bolder': '--ds-text-accent-teal-bolder',
'color.text.accent.magenta': '--ds-text-accent-magenta',
'color.text.accent.magenta.bolder': '--ds-text-accent-magenta-bolder',
'color.text': '--ds-text',

@@ -80,16 +88,48 @@ 'color.text.subtle': '--ds-text-subtle',

'color.border.neutral': '--ds-border-neutral',
'color.background.accent.blue.subtlest': '--ds-background-accent-blue-subtlest',
'color.background.accent.blue.subtler': '--ds-background-accent-blue-subtler',
'color.background.accent.blue.subtle': '--ds-background-accent-blue-subtle',
'color.background.accent.blue.bolder': '--ds-background-accent-blue-bolder',
'color.background.accent.blue': '--ds-background-accent-blue',
'color.background.accent.blue.bold': '--ds-background-accent-blue-bold',
'color.background.accent.red.subtlest': '--ds-background-accent-red-subtlest',
'color.background.accent.red.subtler': '--ds-background-accent-red-subtler',
'color.background.accent.red.subtle': '--ds-background-accent-red-subtle',
'color.background.accent.red.bolder': '--ds-background-accent-red-bolder',
'color.background.accent.red': '--ds-background-accent-red',
'color.background.accent.red.bold': '--ds-background-accent-red-bold',
'color.background.accent.orange.subtlest': '--ds-background-accent-orange-subtlest',
'color.background.accent.orange.subtler': '--ds-background-accent-orange-subtler',
'color.background.accent.orange.subtle': '--ds-background-accent-orange-subtle',
'color.background.accent.orange.bolder': '--ds-background-accent-orange-bolder',
'color.background.accent.orange': '--ds-background-accent-orange',
'color.background.accent.orange.bold': '--ds-background-accent-orange-bold',
'color.background.accent.yellow.subtlest': '--ds-background-accent-yellow-subtlest',
'color.background.accent.yellow.subtler': '--ds-background-accent-yellow-subtler',
'color.background.accent.yellow.subtle': '--ds-background-accent-yellow-subtle',
'color.background.accent.yellow.bolder': '--ds-background-accent-yellow-bolder',
'color.background.accent.yellow': '--ds-background-accent-yellow',
'color.background.accent.yellow.bold': '--ds-background-accent-yellow-bold',
'color.background.accent.green.subtlest': '--ds-background-accent-green-subtlest',
'color.background.accent.green.subtler': '--ds-background-accent-green-subtler',
'color.background.accent.green.subtle': '--ds-background-accent-green-subtle',
'color.background.accent.green.bolder': '--ds-background-accent-green-bolder',
'color.background.accent.green': '--ds-background-accent-green',
'color.background.accent.green.bold': '--ds-background-accent-green-bold',
'color.background.accent.teal.subtlest': '--ds-background-accent-teal-subtlest',
'color.background.accent.teal.subtler': '--ds-background-accent-teal-subtler',
'color.background.accent.teal.subtle': '--ds-background-accent-teal-subtle',
'color.background.accent.teal.bolder': '--ds-background-accent-teal-bolder',
'color.background.accent.teal': '--ds-background-accent-teal',
'color.background.accent.teal.bold': '--ds-background-accent-teal-bold',
'color.background.accent.purple.subtlest': '--ds-background-accent-purple-subtlest',
'color.background.accent.purple.subtler': '--ds-background-accent-purple-subtler',
'color.background.accent.purple.subtle': '--ds-background-accent-purple-subtle',
'color.background.accent.purple.bolder': '--ds-background-accent-purple-bolder',
'color.background.accent.purple': '--ds-background-accent-purple',
'color.background.accent.purple.bold': '--ds-background-accent-purple-bold',
'color.background.accent.magenta.subtlest': '--ds-background-accent-magenta-subtlest',
'color.background.accent.magenta.subtler': '--ds-background-accent-magenta-subtler',
'color.background.accent.magenta.subtle': '--ds-background-accent-magenta-subtle',
'color.background.accent.magenta.bolder': '--ds-background-accent-magenta-bolder',
'color.background.accent.magenta': '--ds-background-accent-magenta',

@@ -96,0 +136,0 @@ 'color.background.accent.magenta.bold': '--ds-background-accent-magenta-bold',

43

dist/cjs/figma/synchronize-figma-tokens.js

@@ -35,4 +35,6 @@ "use strict";

if (hexValue.length === 4) {
// We have a half hex, double it!
hexValue = "".concat(hexValue).concat(hexValue.slice(1));
// We have a 3 character shorthand hex, expand it!
hexValue = hexValue.split('').map(function (char) {
return char === '#' ? char : "".concat(char).concat(char);
}).join('');
}

@@ -85,2 +87,26 @@

/**
* Formats a token description for use in Figma,
* including deprecated warnings
*
* @param token
*/
function formatDescription(token) {
var description = token.attributes.description.trim() || '';
if (token.attributes.state === 'deprecated') {
// The token is deprecated. Prefix a warning to the description!
// If the token has multiple replacement options,
// flatten them into a string
var replacements = Array.isArray(token.attributes.replacement) ? token.attributes.replacement.join(' | ') : token.attributes.replacement; // If the token has replacements, prefix them to the description
var prefix = replacements ? "use ".concat(replacements, " instead") : 'do not use';
description = "DEPRECATED ".concat(prefix, ". \n").concat(description);
}
return description;
}
/**
* Adds tokens under a specified theme as paint styles to Figma.

@@ -92,4 +118,2 @@ *

*/
function synchronizeFigmaTokens(themeName, tokens) {

@@ -128,3 +152,3 @@ var renameMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

style.effects = createEffects(token.value);
style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.

@@ -166,3 +190,3 @@ delete tokens[style.name];

style.paints = [createPaint(token.value)];
style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.

@@ -178,3 +202,3 @@ delete tokens[style.name];

newStyle.name = key;
newStyle.description = (token.attributes.description || '').trim();
newStyle.description = formatDescription(token);
newStyle.paints = [createPaint(token.value)];

@@ -188,3 +212,3 @@ console.log("=> ".concat(key, " paint style has been added!"));

_newStyle.name = key;
_newStyle.description = (token.attributes.description || '').trim();
_newStyle.description = formatDescription(token);
_newStyle.effects = createEffects(token.value);

@@ -200,4 +224,5 @@ console.log("=> ".concat(key, " shadow style has been added!"));

createPaint: createPaint,
createEffects: createEffects
createEffects: createEffects,
formatDescription: formatDescription
};
}

2

dist/cjs/get-token.js

@@ -15,3 +15,3 @@ "use strict";

var name = "@atlaskit/tokens";
var version = "0.6.3";
var version = "0.7.0";

@@ -18,0 +18,0 @@ function token(path, fallback) {

152

dist/cjs/tokens/atlassian-dark/color/accent.js

@@ -12,24 +12,64 @@ "use strict";

blue: {
value: 'B300'
'[default]': {
value: 'B300'
},
bolder: {
value: 'B200'
}
},
red: {
value: 'R300'
'[default]': {
value: 'R300'
},
bolder: {
value: 'R200'
}
},
orange: {
value: 'O300'
'[default]': {
value: 'O300'
},
bolder: {
value: 'O200'
}
},
yellow: {
value: 'Y300'
'[default]': {
value: 'Y300'
},
bolder: {
value: 'Y200'
}
},
green: {
value: 'G300'
'[default]': {
value: 'G300'
},
bolder: {
value: 'G200'
}
},
purple: {
value: 'P300'
'[default]': {
value: 'P300'
},
bolder: {
value: 'P200'
}
},
teal: {
value: 'T300'
'[default]': {
value: 'T300'
},
bolder: {
value: 'T200'
}
},
magenta: {
value: 'M300'
'[default]': {
value: 'M300'
},
bolder: {
value: 'M200'
}
}

@@ -97,63 +137,111 @@ }

blue: {
'[default]': {
subtlest: {
value: 'B1000'
},
subtler: {
value: 'B900'
},
bold: {
value: 'B700'
subtle: {
value: 'B800'
},
bolder: {
value: 'B400'
}
},
red: {
'[default]': {
subtlest: {
value: 'R1000'
},
subtler: {
value: 'R900'
},
bold: {
value: 'R700'
subtle: {
value: 'R800'
},
bolder: {
value: 'R400'
}
},
orange: {
'[default]': {
subtlest: {
value: 'O1000'
},
subtler: {
value: 'O900'
},
bold: {
value: 'O700'
subtle: {
value: 'O800'
},
bolder: {
value: 'O400'
}
},
yellow: {
'[default]': {
subtlest: {
value: 'Y1000'
},
subtler: {
value: 'Y900'
},
bold: {
value: 'Y700'
subtle: {
value: 'Y800'
},
bolder: {
value: 'Y400'
}
},
green: {
'[default]': {
subtlest: {
value: 'G1000'
},
subtler: {
value: 'G900'
},
bold: {
value: 'G700'
subtle: {
value: 'G800'
},
bolder: {
value: 'G400'
}
},
purple: {
'[default]': {
subtlest: {
value: 'P1000'
},
subtler: {
value: 'P900'
},
bold: {
value: 'P700'
subtle: {
value: 'P800'
},
bolder: {
value: 'P400'
}
},
teal: {
'[default]': {
subtlest: {
value: 'T1000'
},
subtler: {
value: 'T900'
},
bold: {
value: 'T700'
subtle: {
value: 'T800'
},
bolder: {
value: 'T400'
}
},
magenta: {
'[default]': {
subtlest: {
value: 'M1000'
},
subtler: {
value: 'M900'
},
bold: {
value: 'M700'
subtle: {
value: 'M800'
},
bolder: {
value: 'M400'
}

@@ -160,0 +248,0 @@ }

72

dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js

@@ -51,2 +51,68 @@ "use strict";

background: {
accent: {
blue: {
'[default]': {
value: 'B900'
},
bold: {
value: 'B700'
}
},
red: {
'[default]': {
value: 'R900'
},
bold: {
value: 'R700'
}
},
orange: {
'[default]': {
value: 'O900'
},
bold: {
value: 'O700'
}
},
yellow: {
'[default]': {
value: 'Y900'
},
bold: {
value: 'Y700'
}
},
green: {
'[default]': {
value: 'G900'
},
bold: {
value: 'G700'
}
},
purple: {
'[default]': {
value: 'P900'
},
bold: {
value: 'P700'
}
},
teal: {
'[default]': {
value: 'T900'
},
bold: {
value: 'T700'
}
},
magenta: {
'[default]': {
value: 'M900'
},
bold: {
value: 'M700'
}
}
},
blanket: {

@@ -58,9 +124,9 @@ value: 'DN-100A'

'[default]': {
value: 'DN200A'
value: 'B1000'
},
hovered: {
value: 'DN300A'
value: 'B900'
},
pressed: {
value: 'DN400A'
value: 'B800'
}

@@ -67,0 +133,0 @@ }

136

dist/cjs/tokens/atlassian-light/color/accent.js

@@ -12,24 +12,64 @@ "use strict";

blue: {
value: 'B800'
'[default]': {
value: 'B800'
},
bolder: {
value: 'B900'
}
},
red: {
value: 'R800'
'[default]': {
value: 'R800'
},
bolder: {
value: 'R900'
}
},
orange: {
value: 'O800'
'[default]': {
value: 'O800'
},
bolder: {
value: 'O900'
}
},
yellow: {
value: 'Y800'
'[default]': {
value: 'Y800'
},
bolder: {
value: 'Y900'
}
},
green: {
value: 'G800'
'[default]': {
value: 'G800'
},
bolder: {
value: 'G900'
}
},
purple: {
value: 'P800'
'[default]': {
value: 'P800'
},
bolder: {
value: 'P900'
}
},
teal: {
value: 'T800'
'[default]': {
value: 'T800'
},
bolder: {
value: 'T900'
}
},
magenta: {
value: 'M800'
'[default]': {
value: 'M800'
},
bolder: {
value: 'M900'
}
}

@@ -97,63 +137,111 @@ }

blue: {
'[default]': {
subtlest: {
value: 'B100'
},
subtler: {
value: 'B200'
},
bold: {
subtle: {
value: 'B400'
},
bolder: {
value: 'B700'
}
},
red: {
'[default]': {
subtlest: {
value: 'R100'
},
subtler: {
value: 'R200'
},
bold: {
subtle: {
value: 'R400'
},
bolder: {
value: 'R700'
}
},
orange: {
'[default]': {
subtlest: {
value: 'O100'
},
subtler: {
value: 'O200'
},
bold: {
subtle: {
value: 'O400'
},
bolder: {
value: 'O700'
}
},
yellow: {
'[default]': {
subtlest: {
value: 'Y100'
},
subtler: {
value: 'Y200'
},
bold: {
subtle: {
value: 'Y400'
},
bolder: {
value: 'Y700'
}
},
green: {
'[default]': {
subtlest: {
value: 'G100'
},
subtler: {
value: 'G200'
},
bold: {
subtle: {
value: 'G400'
},
bolder: {
value: 'G700'
}
},
purple: {
'[default]': {
subtlest: {
value: 'P100'
},
subtler: {
value: 'P200'
},
bold: {
subtle: {
value: 'P400'
},
bolder: {
value: 'P700'
}
},
teal: {
'[default]': {
subtlest: {
value: 'T100'
},
subtler: {
value: 'T200'
},
bold: {
subtle: {
value: 'T400'
},
bolder: {
value: 'T700'
}
},
magenta: {
'[default]': {
subtlest: {
value: 'M100'
},
subtler: {
value: 'M200'
},
bold: {
subtle: {
value: 'M400'
},
bolder: {
value: 'M700'
}

@@ -160,0 +248,0 @@ }

66

dist/cjs/tokens/atlassian-light/deprecated/deprecated.js

@@ -51,2 +51,68 @@ "use strict";

background: {
accent: {
blue: {
'[default]': {
value: 'B200'
},
bold: {
value: 'B400'
}
},
red: {
'[default]': {
value: 'R200'
},
bold: {
value: 'R400'
}
},
orange: {
'[default]': {
value: 'O200'
},
bold: {
value: 'O400'
}
},
yellow: {
'[default]': {
value: 'Y200'
},
bold: {
value: 'Y400'
}
},
green: {
'[default]': {
value: 'G200'
},
bold: {
value: 'G400'
}
},
purple: {
'[default]': {
value: 'P200'
},
bold: {
value: 'P400'
}
},
teal: {
'[default]': {
value: 'T200'
},
bold: {
value: 'T400'
}
},
magenta: {
'[default]': {
value: 'M200'
},
bold: {
value: 'M400'
}
}
},
blanket: {

@@ -53,0 +119,0 @@ value: 'N500A'

284

dist/cjs/tokens/default/color/accent.js

@@ -12,55 +12,127 @@ "use strict";

blue: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold blue accent backgrounds.'
}
}
},
red: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold red accent backgrounds.'
}
}
},
orange: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold orange accent backgrounds.'
}
}
},
yellow: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold yellow accent backgrounds.'
}
}
},
green: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold green accent backgrounds.'
}
}
},
purple: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold purple accent backgrounds.'
}
}
},
teal: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold teal accent backgrounds.'
}
}
},
magenta: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold magenta accent backgrounds.'
}
}

@@ -136,3 +208,3 @@ }

state: 'active',
description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
}

@@ -144,3 +216,3 @@ },

state: 'active',
description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
}

@@ -195,10 +267,17 @@ },

blue: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -209,13 +288,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
red: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -226,13 +319,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
orange: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -243,13 +350,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
yellow: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -260,13 +381,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
green: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -277,13 +412,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
teal: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -294,13 +443,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
purple: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -311,13 +474,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
magenta: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -328,2 +505,9 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
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.'
}
}

@@ -330,0 +514,0 @@ }

172

dist/cjs/tokens/default/deprecated/deprecated.js

@@ -14,3 +14,3 @@ "use strict";

state: 'deprecated',
replacement: 'color.background.accent.blue.bold',
replacement: 'color.background.accent.blue.bolder',
description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -23,3 +23,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.green.bold',
replacement: 'color.background.accent.green.bolder',
description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -32,3 +32,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.orange.bold',
replacement: 'color.background.accent.orange.bolder',
description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -41,3 +41,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.purple.bold',
replacement: 'color.background.accent.purple.bolder',
description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -50,3 +50,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.red.bold',
replacement: 'color.background.accent.red.bolder',
description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -59,3 +59,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.teal.bold',
replacement: 'color.background.accent.teal.bolder',
description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -68,3 +68,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.blue.[default]',
replacement: 'color.background.accent.blue.subtler',
description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -77,3 +77,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.green.[default]',
replacement: 'color.background.accent.green.subtler',
description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -86,3 +86,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.magenta.[default]',
replacement: 'color.background.accent.magenta.subtler',
description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -95,3 +95,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.orange.[default]',
replacement: 'color.background.accent.orange.subtler',
description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -104,3 +104,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.purple.[default]',
replacement: 'color.background.accent.purple.subtler',
description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -113,3 +113,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.red.[default]',
replacement: 'color.background.accent.red.subtler',
description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -122,3 +122,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.teal.[default]',
replacement: 'color.background.accent.teal.subtler',
description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -129,2 +129,148 @@ }

background: {
accent: {
blue: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.blue.subtler',
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.blue.subtle',
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
red: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.red.subtler',
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.red.subtle',
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
orange: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.orange.subtler',
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.orange.subtle',
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
yellow: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.yellow.subtler',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.yellow.subtle',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
green: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.green.subtler',
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.green.subtle',
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
teal: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.teal.subtler',
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.teal.subtle',
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
purple: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.purple.subtler',
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.purple.subtle',
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
magenta: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.magenta.subtler',
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.magenta.subtle',
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.'
}
}
}
},
blanket: {

@@ -131,0 +277,0 @@ attributes: {

2

dist/cjs/version.json
{
"name": "@atlaskit/tokens",
"version": "0.6.3",
"version": "0.7.0",
"sideEffects": false
}

90

dist/es2019/artifacts/rename-mapping.js

@@ -52,2 +52,66 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY

}, {
"path": "color.background.accent.blue.[default]",
"state": "deprecated",
"replacement": "color.background.accent.blue.subtler"
}, {
"path": "color.background.accent.blue.bold",
"state": "deprecated",
"replacement": "color.background.accent.blue.subtle"
}, {
"path": "color.background.accent.red.[default]",
"state": "deprecated",
"replacement": "color.background.accent.red.subtler"
}, {
"path": "color.background.accent.red.bold",
"state": "deprecated",
"replacement": "color.background.accent.red.subtle"
}, {
"path": "color.background.accent.orange.[default]",
"state": "deprecated",
"replacement": "color.background.accent.orange.subtler"
}, {
"path": "color.background.accent.orange.bold",
"state": "deprecated",
"replacement": "color.background.accent.orange.subtle"
}, {
"path": "color.background.accent.yellow.[default]",
"state": "deprecated",
"replacement": "color.background.accent.yellow.subtler"
}, {
"path": "color.background.accent.yellow.bold",
"state": "deprecated",
"replacement": "color.background.accent.yellow.subtle"
}, {
"path": "color.background.accent.green.[default]",
"state": "deprecated",
"replacement": "color.background.accent.green.subtler"
}, {
"path": "color.background.accent.green.bold",
"state": "deprecated",
"replacement": "color.background.accent.green.subtle"
}, {
"path": "color.background.accent.teal.[default]",
"state": "deprecated",
"replacement": "color.background.accent.teal.subtler"
}, {
"path": "color.background.accent.teal.bold",
"state": "deprecated",
"replacement": "color.background.accent.teal.subtle"
}, {
"path": "color.background.accent.purple.[default]",
"state": "deprecated",
"replacement": "color.background.accent.purple.subtler"
}, {
"path": "color.background.accent.purple.bold",
"state": "deprecated",
"replacement": "color.background.accent.purple.subtle"
}, {
"path": "color.background.accent.magenta.[default]",
"state": "deprecated",
"replacement": "color.background.accent.magenta.subtler"
}, {
"path": "color.background.accent.magenta.bold",
"state": "deprecated",
"replacement": "color.background.accent.magenta.subtle"
}, {
"path": "color.background.brand.[default].[default]",

@@ -255,51 +319,51 @@ "state": "deprecated",

"state": "deprecated",
"replacement": "color.background.accent.blue.bold"
"replacement": "color.background.accent.blue.bolder"
}, {
"path": "color.accent.boldGreen",
"state": "deprecated",
"replacement": "color.background.accent.green.bold"
"replacement": "color.background.accent.green.bolder"
}, {
"path": "color.accent.boldOrange",
"state": "deprecated",
"replacement": "color.background.accent.orange.bold"
"replacement": "color.background.accent.orange.bolder"
}, {
"path": "color.accent.boldPurple",
"state": "deprecated",
"replacement": "color.background.accent.purple.bold"
"replacement": "color.background.accent.purple.bolder"
}, {
"path": "color.accent.boldRed",
"state": "deprecated",
"replacement": "color.background.accent.red.bold"
"replacement": "color.background.accent.red.bolder"
}, {
"path": "color.accent.boldTeal",
"state": "deprecated",
"replacement": "color.background.accent.teal.bold"
"replacement": "color.background.accent.teal.bolder"
}, {
"path": "color.accent.subtleBlue",
"state": "deprecated",
"replacement": "color.background.accent.blue.[default]"
"replacement": "color.background.accent.blue.subtler"
}, {
"path": "color.accent.subtleGreen",
"state": "deprecated",
"replacement": "color.background.accent.green.[default]"
"replacement": "color.background.accent.green.subtler"
}, {
"path": "color.accent.subtleMagenta",
"state": "deprecated",
"replacement": "color.background.accent.magenta.[default]"
"replacement": "color.background.accent.magenta.subtler"
}, {
"path": "color.accent.subtleOrange",
"state": "deprecated",
"replacement": "color.background.accent.orange.[default]"
"replacement": "color.background.accent.orange.subtler"
}, {
"path": "color.accent.subtlePurple",
"state": "deprecated",
"replacement": "color.background.accent.purple.[default]"
"replacement": "color.background.accent.purple.subtler"
}, {
"path": "color.accent.subtleRed",
"state": "deprecated",
"replacement": "color.background.accent.red.[default]"
"replacement": "color.background.accent.red.subtler"
}, {
"path": "color.accent.subtleTeal",
"state": "deprecated",
"replacement": "color.background.accent.teal.[default]"
"replacement": "color.background.accent.teal.subtler"
}, {

@@ -306,0 +370,0 @@ "path": "color.iconBorder.brand",

40

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

@@ -9,9 +9,17 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY

'color.text.accent.blue': '#0055CC',
'color.text.accent.blue.bolder': '#09326C',
'color.text.accent.red': '#AE2A19',
'color.text.accent.red.bolder': '#601E16',
'color.text.accent.orange': '#974F0C',
'color.text.accent.orange.bolder': '#5F3811',
'color.text.accent.yellow': '#7F5F01',
'color.text.accent.yellow.bolder': '#533F04',
'color.text.accent.green': '#216E4E',
'color.text.accent.green.bolder': '#164B35',
'color.text.accent.purple': '#5E4DB2',
'color.text.accent.purple.bolder': '#352C63',
'color.text.accent.teal': '#206B74',
'color.text.accent.teal.bolder': '#1D474C',
'color.text.accent.magenta': '#943D73',
'color.text.accent.magenta.bolder': '#50253F',
'color.text': '#172B4D',

@@ -78,16 +86,48 @@ 'color.text.subtle': '#44546F',

'color.border.neutral': '#091E4224',
'color.background.accent.blue.subtlest': '#E9F2FF',
'color.background.accent.blue.subtler': '#CCE0FF',
'color.background.accent.blue.subtle': '#579DFF',
'color.background.accent.blue.bolder': '#0C66E4',
'color.background.accent.blue': '#CCE0FF',
'color.background.accent.blue.bold': '#579DFF',
'color.background.accent.red.subtlest': '#FFEDEB',
'color.background.accent.red.subtler': '#FFD2CC',
'color.background.accent.red.subtle': '#F87462',
'color.background.accent.red.bolder': '#CA3521',
'color.background.accent.red': '#FFD2CC',
'color.background.accent.red.bold': '#F87462',
'color.background.accent.orange.subtlest': '#FFF4E5',
'color.background.accent.orange.subtler': '#FFE2BD',
'color.background.accent.orange.subtle': '#FAA53D',
'color.background.accent.orange.bolder': '#B65C02',
'color.background.accent.orange': '#FFE2BD',
'color.background.accent.orange.bold': '#FAA53D',
'color.background.accent.yellow.subtlest': '#FFF7D6',
'color.background.accent.yellow.subtler': '#F8E6A0',
'color.background.accent.yellow.subtle': '#E2B203',
'color.background.accent.yellow.bolder': '#946F00',
'color.background.accent.yellow': '#F8E6A0',
'color.background.accent.yellow.bold': '#E2B203',
'color.background.accent.green.subtlest': '#DFFCF0',
'color.background.accent.green.subtler': '#BAF3DB',
'color.background.accent.green.subtle': '#4BCE97',
'color.background.accent.green.bolder': '#1F845A',
'color.background.accent.green': '#BAF3DB',
'color.background.accent.green.bold': '#4BCE97',
'color.background.accent.teal.subtlest': '#E3FAFC',
'color.background.accent.teal.subtler': '#C1F0F5',
'color.background.accent.teal.subtle': '#60C6D2',
'color.background.accent.teal.bolder': '#1D7F8C',
'color.background.accent.teal': '#C1F0F5',
'color.background.accent.teal.bold': '#60C6D2',
'color.background.accent.purple.subtlest': '#F3F0FF',
'color.background.accent.purple.subtler': '#DFD8FD',
'color.background.accent.purple.subtle': '#9F8FEF',
'color.background.accent.purple.bolder': '#6E5DC6',
'color.background.accent.purple': '#DFD8FD',
'color.background.accent.purple.bold': '#9F8FEF',
'color.background.accent.magenta.subtlest': '#FFECF8',
'color.background.accent.magenta.subtler': '#FDD0EC',
'color.background.accent.magenta.subtle': '#E774BB',
'color.background.accent.magenta.bolder': '#AE4787',
'color.background.accent.magenta': '#FDD0EC',

@@ -94,0 +134,0 @@ 'color.background.accent.magenta.bold': '#E774BB',

40

dist/es2019/artifacts/token-names.js

@@ -5,9 +5,17 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY

'color.text.accent.blue': '--ds-text-accent-blue',
'color.text.accent.blue.bolder': '--ds-text-accent-blue-bolder',
'color.text.accent.red': '--ds-text-accent-red',
'color.text.accent.red.bolder': '--ds-text-accent-red-bolder',
'color.text.accent.orange': '--ds-text-accent-orange',
'color.text.accent.orange.bolder': '--ds-text-accent-orange-bolder',
'color.text.accent.yellow': '--ds-text-accent-yellow',
'color.text.accent.yellow.bolder': '--ds-text-accent-yellow-bolder',
'color.text.accent.green': '--ds-text-accent-green',
'color.text.accent.green.bolder': '--ds-text-accent-green-bolder',
'color.text.accent.purple': '--ds-text-accent-purple',
'color.text.accent.purple.bolder': '--ds-text-accent-purple-bolder',
'color.text.accent.teal': '--ds-text-accent-teal',
'color.text.accent.teal.bolder': '--ds-text-accent-teal-bolder',
'color.text.accent.magenta': '--ds-text-accent-magenta',
'color.text.accent.magenta.bolder': '--ds-text-accent-magenta-bolder',
'color.text': '--ds-text',

@@ -74,16 +82,48 @@ 'color.text.subtle': '--ds-text-subtle',

'color.border.neutral': '--ds-border-neutral',
'color.background.accent.blue.subtlest': '--ds-background-accent-blue-subtlest',
'color.background.accent.blue.subtler': '--ds-background-accent-blue-subtler',
'color.background.accent.blue.subtle': '--ds-background-accent-blue-subtle',
'color.background.accent.blue.bolder': '--ds-background-accent-blue-bolder',
'color.background.accent.blue': '--ds-background-accent-blue',
'color.background.accent.blue.bold': '--ds-background-accent-blue-bold',
'color.background.accent.red.subtlest': '--ds-background-accent-red-subtlest',
'color.background.accent.red.subtler': '--ds-background-accent-red-subtler',
'color.background.accent.red.subtle': '--ds-background-accent-red-subtle',
'color.background.accent.red.bolder': '--ds-background-accent-red-bolder',
'color.background.accent.red': '--ds-background-accent-red',
'color.background.accent.red.bold': '--ds-background-accent-red-bold',
'color.background.accent.orange.subtlest': '--ds-background-accent-orange-subtlest',
'color.background.accent.orange.subtler': '--ds-background-accent-orange-subtler',
'color.background.accent.orange.subtle': '--ds-background-accent-orange-subtle',
'color.background.accent.orange.bolder': '--ds-background-accent-orange-bolder',
'color.background.accent.orange': '--ds-background-accent-orange',
'color.background.accent.orange.bold': '--ds-background-accent-orange-bold',
'color.background.accent.yellow.subtlest': '--ds-background-accent-yellow-subtlest',
'color.background.accent.yellow.subtler': '--ds-background-accent-yellow-subtler',
'color.background.accent.yellow.subtle': '--ds-background-accent-yellow-subtle',
'color.background.accent.yellow.bolder': '--ds-background-accent-yellow-bolder',
'color.background.accent.yellow': '--ds-background-accent-yellow',
'color.background.accent.yellow.bold': '--ds-background-accent-yellow-bold',
'color.background.accent.green.subtlest': '--ds-background-accent-green-subtlest',
'color.background.accent.green.subtler': '--ds-background-accent-green-subtler',
'color.background.accent.green.subtle': '--ds-background-accent-green-subtle',
'color.background.accent.green.bolder': '--ds-background-accent-green-bolder',
'color.background.accent.green': '--ds-background-accent-green',
'color.background.accent.green.bold': '--ds-background-accent-green-bold',
'color.background.accent.teal.subtlest': '--ds-background-accent-teal-subtlest',
'color.background.accent.teal.subtler': '--ds-background-accent-teal-subtler',
'color.background.accent.teal.subtle': '--ds-background-accent-teal-subtle',
'color.background.accent.teal.bolder': '--ds-background-accent-teal-bolder',
'color.background.accent.teal': '--ds-background-accent-teal',
'color.background.accent.teal.bold': '--ds-background-accent-teal-bold',
'color.background.accent.purple.subtlest': '--ds-background-accent-purple-subtlest',
'color.background.accent.purple.subtler': '--ds-background-accent-purple-subtler',
'color.background.accent.purple.subtle': '--ds-background-accent-purple-subtle',
'color.background.accent.purple.bolder': '--ds-background-accent-purple-bolder',
'color.background.accent.purple': '--ds-background-accent-purple',
'color.background.accent.purple.bold': '--ds-background-accent-purple-bold',
'color.background.accent.magenta.subtlest': '--ds-background-accent-magenta-subtlest',
'color.background.accent.magenta.subtler': '--ds-background-accent-magenta-subtler',
'color.background.accent.magenta.subtle': '--ds-background-accent-magenta-subtle',
'color.background.accent.magenta.bolder': '--ds-background-accent-magenta-bolder',
'color.background.accent.magenta': '--ds-background-accent-magenta',

@@ -90,0 +130,0 @@ 'color.background.accent.magenta.bold': '--ds-background-accent-magenta-bold',

41

dist/es2019/figma/synchronize-figma-tokens.js

@@ -29,4 +29,4 @@ // ----------------------------------------------------

if (hexValue.length === 4) {
// We have a half hex, double it!
hexValue = `${hexValue}${hexValue.slice(1)}`;
// We have a 3 character shorthand hex, expand it!
hexValue = hexValue.split('').map(char => char === '#' ? char : `${char}${char}`).join('');
}

@@ -79,2 +79,26 @@

/**
* Formats a token description for use in Figma,
* including deprecated warnings
*
* @param token
*/
function formatDescription(token) {
let description = token.attributes.description.trim() || '';
if (token.attributes.state === 'deprecated') {
// The token is deprecated. Prefix a warning to the description!
// If the token has multiple replacement options,
// flatten them into a string
const replacements = Array.isArray(token.attributes.replacement) ? token.attributes.replacement.join(' | ') : token.attributes.replacement; // If the token has replacements, prefix them to the description
const prefix = replacements ? `use ${replacements} instead` : 'do not use';
description = `DEPRECATED ${prefix}. \n${description}`;
}
return description;
}
/**
* Adds tokens under a specified theme as paint styles to Figma.

@@ -86,4 +110,2 @@ *

*/
function synchronizeFigmaTokens(themeName, tokens, renameMap = {}) {

@@ -121,3 +143,3 @@ const figma = window.figma;

style.effects = createEffects(token.value);
style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.

@@ -159,3 +181,3 @@ delete tokens[style.name];

style.paints = [createPaint(token.value)];
style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.

@@ -171,3 +193,3 @@ delete tokens[style.name];

newStyle.name = key;
newStyle.description = (token.attributes.description || '').trim();
newStyle.description = formatDescription(token);
newStyle.paints = [createPaint(token.value)];

@@ -180,3 +202,3 @@ console.log(`=> ${key} paint style has been added!`);

newStyle.name = key;
newStyle.description = (token.attributes.description || '').trim();
newStyle.description = formatDescription(token);
newStyle.effects = createEffects(token.value);

@@ -192,3 +214,4 @@ console.log(`=> ${key} shadow style has been added!`);

createPaint,
createEffects
createEffects,
formatDescription
};

@@ -195,0 +218,0 @@ }

2

dist/es2019/get-token.js
import warnOnce from '@atlaskit/ds-lib/warn-once';
import tokens from './artifacts/token-names';
const name = "@atlaskit/tokens";
const version = "0.6.3";
const version = "0.7.0";

@@ -6,0 +6,0 @@ function token(path, fallback) {

152

dist/es2019/tokens/atlassian-dark/color/accent.js

@@ -6,24 +6,64 @@ const color = {

blue: {
value: 'B300'
'[default]': {
value: 'B300'
},
bolder: {
value: 'B200'
}
},
red: {
value: 'R300'
'[default]': {
value: 'R300'
},
bolder: {
value: 'R200'
}
},
orange: {
value: 'O300'
'[default]': {
value: 'O300'
},
bolder: {
value: 'O200'
}
},
yellow: {
value: 'Y300'
'[default]': {
value: 'Y300'
},
bolder: {
value: 'Y200'
}
},
green: {
value: 'G300'
'[default]': {
value: 'G300'
},
bolder: {
value: 'G200'
}
},
purple: {
value: 'P300'
'[default]': {
value: 'P300'
},
bolder: {
value: 'P200'
}
},
teal: {
value: 'T300'
'[default]': {
value: 'T300'
},
bolder: {
value: 'T200'
}
},
magenta: {
value: 'M300'
'[default]': {
value: 'M300'
},
bolder: {
value: 'M200'
}
}

@@ -91,63 +131,111 @@ }

blue: {
'[default]': {
subtlest: {
value: 'B1000'
},
subtler: {
value: 'B900'
},
bold: {
value: 'B700'
subtle: {
value: 'B800'
},
bolder: {
value: 'B400'
}
},
red: {
'[default]': {
subtlest: {
value: 'R1000'
},
subtler: {
value: 'R900'
},
bold: {
value: 'R700'
subtle: {
value: 'R800'
},
bolder: {
value: 'R400'
}
},
orange: {
'[default]': {
subtlest: {
value: 'O1000'
},
subtler: {
value: 'O900'
},
bold: {
value: 'O700'
subtle: {
value: 'O800'
},
bolder: {
value: 'O400'
}
},
yellow: {
'[default]': {
subtlest: {
value: 'Y1000'
},
subtler: {
value: 'Y900'
},
bold: {
value: 'Y700'
subtle: {
value: 'Y800'
},
bolder: {
value: 'Y400'
}
},
green: {
'[default]': {
subtlest: {
value: 'G1000'
},
subtler: {
value: 'G900'
},
bold: {
value: 'G700'
subtle: {
value: 'G800'
},
bolder: {
value: 'G400'
}
},
purple: {
'[default]': {
subtlest: {
value: 'P1000'
},
subtler: {
value: 'P900'
},
bold: {
value: 'P700'
subtle: {
value: 'P800'
},
bolder: {
value: 'P400'
}
},
teal: {
'[default]': {
subtlest: {
value: 'T1000'
},
subtler: {
value: 'T900'
},
bold: {
value: 'T700'
subtle: {
value: 'T800'
},
bolder: {
value: 'T400'
}
},
magenta: {
'[default]': {
subtlest: {
value: 'M1000'
},
subtler: {
value: 'M900'
},
bold: {
value: 'M700'
subtle: {
value: 'M800'
},
bolder: {
value: 'M400'
}

@@ -154,0 +242,0 @@ }

72

dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js

@@ -45,2 +45,68 @@ const color = {

background: {
accent: {
blue: {
'[default]': {
value: 'B900'
},
bold: {
value: 'B700'
}
},
red: {
'[default]': {
value: 'R900'
},
bold: {
value: 'R700'
}
},
orange: {
'[default]': {
value: 'O900'
},
bold: {
value: 'O700'
}
},
yellow: {
'[default]': {
value: 'Y900'
},
bold: {
value: 'Y700'
}
},
green: {
'[default]': {
value: 'G900'
},
bold: {
value: 'G700'
}
},
purple: {
'[default]': {
value: 'P900'
},
bold: {
value: 'P700'
}
},
teal: {
'[default]': {
value: 'T900'
},
bold: {
value: 'T700'
}
},
magenta: {
'[default]': {
value: 'M900'
},
bold: {
value: 'M700'
}
}
},
blanket: {

@@ -52,9 +118,9 @@ value: 'DN-100A'

'[default]': {
value: 'DN200A'
value: 'B1000'
},
hovered: {
value: 'DN300A'
value: 'B900'
},
pressed: {
value: 'DN400A'
value: 'B800'
}

@@ -61,0 +127,0 @@ }

136

dist/es2019/tokens/atlassian-light/color/accent.js

@@ -6,24 +6,64 @@ const color = {

blue: {
value: 'B800'
'[default]': {
value: 'B800'
},
bolder: {
value: 'B900'
}
},
red: {
value: 'R800'
'[default]': {
value: 'R800'
},
bolder: {
value: 'R900'
}
},
orange: {
value: 'O800'
'[default]': {
value: 'O800'
},
bolder: {
value: 'O900'
}
},
yellow: {
value: 'Y800'
'[default]': {
value: 'Y800'
},
bolder: {
value: 'Y900'
}
},
green: {
value: 'G800'
'[default]': {
value: 'G800'
},
bolder: {
value: 'G900'
}
},
purple: {
value: 'P800'
'[default]': {
value: 'P800'
},
bolder: {
value: 'P900'
}
},
teal: {
value: 'T800'
'[default]': {
value: 'T800'
},
bolder: {
value: 'T900'
}
},
magenta: {
value: 'M800'
'[default]': {
value: 'M800'
},
bolder: {
value: 'M900'
}
}

@@ -91,63 +131,111 @@ }

blue: {
'[default]': {
subtlest: {
value: 'B100'
},
subtler: {
value: 'B200'
},
bold: {
subtle: {
value: 'B400'
},
bolder: {
value: 'B700'
}
},
red: {
'[default]': {
subtlest: {
value: 'R100'
},
subtler: {
value: 'R200'
},
bold: {
subtle: {
value: 'R400'
},
bolder: {
value: 'R700'
}
},
orange: {
'[default]': {
subtlest: {
value: 'O100'
},
subtler: {
value: 'O200'
},
bold: {
subtle: {
value: 'O400'
},
bolder: {
value: 'O700'
}
},
yellow: {
'[default]': {
subtlest: {
value: 'Y100'
},
subtler: {
value: 'Y200'
},
bold: {
subtle: {
value: 'Y400'
},
bolder: {
value: 'Y700'
}
},
green: {
'[default]': {
subtlest: {
value: 'G100'
},
subtler: {
value: 'G200'
},
bold: {
subtle: {
value: 'G400'
},
bolder: {
value: 'G700'
}
},
purple: {
'[default]': {
subtlest: {
value: 'P100'
},
subtler: {
value: 'P200'
},
bold: {
subtle: {
value: 'P400'
},
bolder: {
value: 'P700'
}
},
teal: {
'[default]': {
subtlest: {
value: 'T100'
},
subtler: {
value: 'T200'
},
bold: {
subtle: {
value: 'T400'
},
bolder: {
value: 'T700'
}
},
magenta: {
'[default]': {
subtlest: {
value: 'M100'
},
subtler: {
value: 'M200'
},
bold: {
subtle: {
value: 'M400'
},
bolder: {
value: 'M700'
}

@@ -154,0 +242,0 @@ }

66

dist/es2019/tokens/atlassian-light/deprecated/deprecated.js

@@ -45,2 +45,68 @@ const color = {

background: {
accent: {
blue: {
'[default]': {
value: 'B200'
},
bold: {
value: 'B400'
}
},
red: {
'[default]': {
value: 'R200'
},
bold: {
value: 'R400'
}
},
orange: {
'[default]': {
value: 'O200'
},
bold: {
value: 'O400'
}
},
yellow: {
'[default]': {
value: 'Y200'
},
bold: {
value: 'Y400'
}
},
green: {
'[default]': {
value: 'G200'
},
bold: {
value: 'G400'
}
},
purple: {
'[default]': {
value: 'P200'
},
bold: {
value: 'P400'
}
},
teal: {
'[default]': {
value: 'T200'
},
bold: {
value: 'T400'
}
},
magenta: {
'[default]': {
value: 'M200'
},
bold: {
value: 'M400'
}
}
},
blanket: {

@@ -47,0 +113,0 @@ value: 'N500A'

284

dist/es2019/tokens/default/color/accent.js

@@ -6,55 +6,127 @@ const color = {

blue: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold blue accent backgrounds.'
}
}
},
red: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold red accent backgrounds.'
}
}
},
orange: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold orange accent backgrounds.'
}
}
},
yellow: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold yellow accent backgrounds.'
}
}
},
green: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold green accent backgrounds.'
}
}
},
purple: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold purple accent backgrounds.'
}
}
},
teal: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold teal accent backgrounds.'
}
}
},
magenta: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold magenta accent backgrounds.'
}
}

@@ -130,3 +202,3 @@ }

state: 'active',
description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
}

@@ -138,3 +210,3 @@ },

state: 'active',
description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
}

@@ -189,10 +261,17 @@ },

blue: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -203,13 +282,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
red: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -220,13 +313,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
orange: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -237,13 +344,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
yellow: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -254,13 +375,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
green: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -271,13 +406,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
teal: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -288,13 +437,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
purple: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -305,13 +468,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
magenta: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -322,2 +499,9 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
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.'
}
}

@@ -324,0 +508,0 @@ }

172

dist/es2019/tokens/default/deprecated/deprecated.js

@@ -8,3 +8,3 @@ const color = {

state: 'deprecated',
replacement: 'color.background.accent.blue.bold',
replacement: 'color.background.accent.blue.bolder',
description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -17,3 +17,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.green.bold',
replacement: 'color.background.accent.green.bolder',
description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -26,3 +26,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.orange.bold',
replacement: 'color.background.accent.orange.bolder',
description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -35,3 +35,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.purple.bold',
replacement: 'color.background.accent.purple.bolder',
description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -44,3 +44,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.red.bold',
replacement: 'color.background.accent.red.bolder',
description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -53,3 +53,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.teal.bold',
replacement: 'color.background.accent.teal.bolder',
description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -62,3 +62,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.blue.[default]',
replacement: 'color.background.accent.blue.subtler',
description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -71,3 +71,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.green.[default]',
replacement: 'color.background.accent.green.subtler',
description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -80,3 +80,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.magenta.[default]',
replacement: 'color.background.accent.magenta.subtler',
description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -89,3 +89,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.orange.[default]',
replacement: 'color.background.accent.orange.subtler',
description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -98,3 +98,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.purple.[default]',
replacement: 'color.background.accent.purple.subtler',
description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -107,3 +107,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.red.[default]',
replacement: 'color.background.accent.red.subtler',
description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -116,3 +116,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.teal.[default]',
replacement: 'color.background.accent.teal.subtler',
description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -123,2 +123,148 @@ }

background: {
accent: {
blue: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.blue.subtler',
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.blue.subtle',
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
red: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.red.subtler',
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.red.subtle',
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
orange: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.orange.subtler',
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.orange.subtle',
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
yellow: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.yellow.subtler',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.yellow.subtle',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
green: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.green.subtler',
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.green.subtle',
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
teal: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.teal.subtler',
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.teal.subtle',
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
purple: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.purple.subtler',
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.purple.subtle',
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
magenta: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.magenta.subtler',
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.magenta.subtle',
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.'
}
}
}
},
blanket: {

@@ -125,0 +271,0 @@ attributes: {

2

dist/es2019/version.json
{
"name": "@atlaskit/tokens",
"version": "0.6.3",
"version": "0.7.0",
"sideEffects": false
}

90

dist/esm/artifacts/rename-mapping.js

@@ -52,2 +52,66 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY

}, {
"path": "color.background.accent.blue.[default]",
"state": "deprecated",
"replacement": "color.background.accent.blue.subtler"
}, {
"path": "color.background.accent.blue.bold",
"state": "deprecated",
"replacement": "color.background.accent.blue.subtle"
}, {
"path": "color.background.accent.red.[default]",
"state": "deprecated",
"replacement": "color.background.accent.red.subtler"
}, {
"path": "color.background.accent.red.bold",
"state": "deprecated",
"replacement": "color.background.accent.red.subtle"
}, {
"path": "color.background.accent.orange.[default]",
"state": "deprecated",
"replacement": "color.background.accent.orange.subtler"
}, {
"path": "color.background.accent.orange.bold",
"state": "deprecated",
"replacement": "color.background.accent.orange.subtle"
}, {
"path": "color.background.accent.yellow.[default]",
"state": "deprecated",
"replacement": "color.background.accent.yellow.subtler"
}, {
"path": "color.background.accent.yellow.bold",
"state": "deprecated",
"replacement": "color.background.accent.yellow.subtle"
}, {
"path": "color.background.accent.green.[default]",
"state": "deprecated",
"replacement": "color.background.accent.green.subtler"
}, {
"path": "color.background.accent.green.bold",
"state": "deprecated",
"replacement": "color.background.accent.green.subtle"
}, {
"path": "color.background.accent.teal.[default]",
"state": "deprecated",
"replacement": "color.background.accent.teal.subtler"
}, {
"path": "color.background.accent.teal.bold",
"state": "deprecated",
"replacement": "color.background.accent.teal.subtle"
}, {
"path": "color.background.accent.purple.[default]",
"state": "deprecated",
"replacement": "color.background.accent.purple.subtler"
}, {
"path": "color.background.accent.purple.bold",
"state": "deprecated",
"replacement": "color.background.accent.purple.subtle"
}, {
"path": "color.background.accent.magenta.[default]",
"state": "deprecated",
"replacement": "color.background.accent.magenta.subtler"
}, {
"path": "color.background.accent.magenta.bold",
"state": "deprecated",
"replacement": "color.background.accent.magenta.subtle"
}, {
"path": "color.background.brand.[default].[default]",

@@ -255,51 +319,51 @@ "state": "deprecated",

"state": "deprecated",
"replacement": "color.background.accent.blue.bold"
"replacement": "color.background.accent.blue.bolder"
}, {
"path": "color.accent.boldGreen",
"state": "deprecated",
"replacement": "color.background.accent.green.bold"
"replacement": "color.background.accent.green.bolder"
}, {
"path": "color.accent.boldOrange",
"state": "deprecated",
"replacement": "color.background.accent.orange.bold"
"replacement": "color.background.accent.orange.bolder"
}, {
"path": "color.accent.boldPurple",
"state": "deprecated",
"replacement": "color.background.accent.purple.bold"
"replacement": "color.background.accent.purple.bolder"
}, {
"path": "color.accent.boldRed",
"state": "deprecated",
"replacement": "color.background.accent.red.bold"
"replacement": "color.background.accent.red.bolder"
}, {
"path": "color.accent.boldTeal",
"state": "deprecated",
"replacement": "color.background.accent.teal.bold"
"replacement": "color.background.accent.teal.bolder"
}, {
"path": "color.accent.subtleBlue",
"state": "deprecated",
"replacement": "color.background.accent.blue.[default]"
"replacement": "color.background.accent.blue.subtler"
}, {
"path": "color.accent.subtleGreen",
"state": "deprecated",
"replacement": "color.background.accent.green.[default]"
"replacement": "color.background.accent.green.subtler"
}, {
"path": "color.accent.subtleMagenta",
"state": "deprecated",
"replacement": "color.background.accent.magenta.[default]"
"replacement": "color.background.accent.magenta.subtler"
}, {
"path": "color.accent.subtleOrange",
"state": "deprecated",
"replacement": "color.background.accent.orange.[default]"
"replacement": "color.background.accent.orange.subtler"
}, {
"path": "color.accent.subtlePurple",
"state": "deprecated",
"replacement": "color.background.accent.purple.[default]"
"replacement": "color.background.accent.purple.subtler"
}, {
"path": "color.accent.subtleRed",
"state": "deprecated",
"replacement": "color.background.accent.red.[default]"
"replacement": "color.background.accent.red.subtler"
}, {
"path": "color.accent.subtleTeal",
"state": "deprecated",
"replacement": "color.background.accent.teal.[default]"
"replacement": "color.background.accent.teal.subtler"
}, {

@@ -306,0 +370,0 @@ "path": "color.iconBorder.brand",

40

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

@@ -9,9 +9,17 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY

'color.text.accent.blue': '#0055CC',
'color.text.accent.blue.bolder': '#09326C',
'color.text.accent.red': '#AE2A19',
'color.text.accent.red.bolder': '#601E16',
'color.text.accent.orange': '#974F0C',
'color.text.accent.orange.bolder': '#5F3811',
'color.text.accent.yellow': '#7F5F01',
'color.text.accent.yellow.bolder': '#533F04',
'color.text.accent.green': '#216E4E',
'color.text.accent.green.bolder': '#164B35',
'color.text.accent.purple': '#5E4DB2',
'color.text.accent.purple.bolder': '#352C63',
'color.text.accent.teal': '#206B74',
'color.text.accent.teal.bolder': '#1D474C',
'color.text.accent.magenta': '#943D73',
'color.text.accent.magenta.bolder': '#50253F',
'color.text': '#172B4D',

@@ -78,16 +86,48 @@ 'color.text.subtle': '#44546F',

'color.border.neutral': '#091E4224',
'color.background.accent.blue.subtlest': '#E9F2FF',
'color.background.accent.blue.subtler': '#CCE0FF',
'color.background.accent.blue.subtle': '#579DFF',
'color.background.accent.blue.bolder': '#0C66E4',
'color.background.accent.blue': '#CCE0FF',
'color.background.accent.blue.bold': '#579DFF',
'color.background.accent.red.subtlest': '#FFEDEB',
'color.background.accent.red.subtler': '#FFD2CC',
'color.background.accent.red.subtle': '#F87462',
'color.background.accent.red.bolder': '#CA3521',
'color.background.accent.red': '#FFD2CC',
'color.background.accent.red.bold': '#F87462',
'color.background.accent.orange.subtlest': '#FFF4E5',
'color.background.accent.orange.subtler': '#FFE2BD',
'color.background.accent.orange.subtle': '#FAA53D',
'color.background.accent.orange.bolder': '#B65C02',
'color.background.accent.orange': '#FFE2BD',
'color.background.accent.orange.bold': '#FAA53D',
'color.background.accent.yellow.subtlest': '#FFF7D6',
'color.background.accent.yellow.subtler': '#F8E6A0',
'color.background.accent.yellow.subtle': '#E2B203',
'color.background.accent.yellow.bolder': '#946F00',
'color.background.accent.yellow': '#F8E6A0',
'color.background.accent.yellow.bold': '#E2B203',
'color.background.accent.green.subtlest': '#DFFCF0',
'color.background.accent.green.subtler': '#BAF3DB',
'color.background.accent.green.subtle': '#4BCE97',
'color.background.accent.green.bolder': '#1F845A',
'color.background.accent.green': '#BAF3DB',
'color.background.accent.green.bold': '#4BCE97',
'color.background.accent.teal.subtlest': '#E3FAFC',
'color.background.accent.teal.subtler': '#C1F0F5',
'color.background.accent.teal.subtle': '#60C6D2',
'color.background.accent.teal.bolder': '#1D7F8C',
'color.background.accent.teal': '#C1F0F5',
'color.background.accent.teal.bold': '#60C6D2',
'color.background.accent.purple.subtlest': '#F3F0FF',
'color.background.accent.purple.subtler': '#DFD8FD',
'color.background.accent.purple.subtle': '#9F8FEF',
'color.background.accent.purple.bolder': '#6E5DC6',
'color.background.accent.purple': '#DFD8FD',
'color.background.accent.purple.bold': '#9F8FEF',
'color.background.accent.magenta.subtlest': '#FFECF8',
'color.background.accent.magenta.subtler': '#FDD0EC',
'color.background.accent.magenta.subtle': '#E774BB',
'color.background.accent.magenta.bolder': '#AE4787',
'color.background.accent.magenta': '#FDD0EC',

@@ -94,0 +134,0 @@ 'color.background.accent.magenta.bold': '#E774BB',

40

dist/esm/artifacts/token-names.js

@@ -5,9 +5,17 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY

'color.text.accent.blue': '--ds-text-accent-blue',
'color.text.accent.blue.bolder': '--ds-text-accent-blue-bolder',
'color.text.accent.red': '--ds-text-accent-red',
'color.text.accent.red.bolder': '--ds-text-accent-red-bolder',
'color.text.accent.orange': '--ds-text-accent-orange',
'color.text.accent.orange.bolder': '--ds-text-accent-orange-bolder',
'color.text.accent.yellow': '--ds-text-accent-yellow',
'color.text.accent.yellow.bolder': '--ds-text-accent-yellow-bolder',
'color.text.accent.green': '--ds-text-accent-green',
'color.text.accent.green.bolder': '--ds-text-accent-green-bolder',
'color.text.accent.purple': '--ds-text-accent-purple',
'color.text.accent.purple.bolder': '--ds-text-accent-purple-bolder',
'color.text.accent.teal': '--ds-text-accent-teal',
'color.text.accent.teal.bolder': '--ds-text-accent-teal-bolder',
'color.text.accent.magenta': '--ds-text-accent-magenta',
'color.text.accent.magenta.bolder': '--ds-text-accent-magenta-bolder',
'color.text': '--ds-text',

@@ -74,16 +82,48 @@ 'color.text.subtle': '--ds-text-subtle',

'color.border.neutral': '--ds-border-neutral',
'color.background.accent.blue.subtlest': '--ds-background-accent-blue-subtlest',
'color.background.accent.blue.subtler': '--ds-background-accent-blue-subtler',
'color.background.accent.blue.subtle': '--ds-background-accent-blue-subtle',
'color.background.accent.blue.bolder': '--ds-background-accent-blue-bolder',
'color.background.accent.blue': '--ds-background-accent-blue',
'color.background.accent.blue.bold': '--ds-background-accent-blue-bold',
'color.background.accent.red.subtlest': '--ds-background-accent-red-subtlest',
'color.background.accent.red.subtler': '--ds-background-accent-red-subtler',
'color.background.accent.red.subtle': '--ds-background-accent-red-subtle',
'color.background.accent.red.bolder': '--ds-background-accent-red-bolder',
'color.background.accent.red': '--ds-background-accent-red',
'color.background.accent.red.bold': '--ds-background-accent-red-bold',
'color.background.accent.orange.subtlest': '--ds-background-accent-orange-subtlest',
'color.background.accent.orange.subtler': '--ds-background-accent-orange-subtler',
'color.background.accent.orange.subtle': '--ds-background-accent-orange-subtle',
'color.background.accent.orange.bolder': '--ds-background-accent-orange-bolder',
'color.background.accent.orange': '--ds-background-accent-orange',
'color.background.accent.orange.bold': '--ds-background-accent-orange-bold',
'color.background.accent.yellow.subtlest': '--ds-background-accent-yellow-subtlest',
'color.background.accent.yellow.subtler': '--ds-background-accent-yellow-subtler',
'color.background.accent.yellow.subtle': '--ds-background-accent-yellow-subtle',
'color.background.accent.yellow.bolder': '--ds-background-accent-yellow-bolder',
'color.background.accent.yellow': '--ds-background-accent-yellow',
'color.background.accent.yellow.bold': '--ds-background-accent-yellow-bold',
'color.background.accent.green.subtlest': '--ds-background-accent-green-subtlest',
'color.background.accent.green.subtler': '--ds-background-accent-green-subtler',
'color.background.accent.green.subtle': '--ds-background-accent-green-subtle',
'color.background.accent.green.bolder': '--ds-background-accent-green-bolder',
'color.background.accent.green': '--ds-background-accent-green',
'color.background.accent.green.bold': '--ds-background-accent-green-bold',
'color.background.accent.teal.subtlest': '--ds-background-accent-teal-subtlest',
'color.background.accent.teal.subtler': '--ds-background-accent-teal-subtler',
'color.background.accent.teal.subtle': '--ds-background-accent-teal-subtle',
'color.background.accent.teal.bolder': '--ds-background-accent-teal-bolder',
'color.background.accent.teal': '--ds-background-accent-teal',
'color.background.accent.teal.bold': '--ds-background-accent-teal-bold',
'color.background.accent.purple.subtlest': '--ds-background-accent-purple-subtlest',
'color.background.accent.purple.subtler': '--ds-background-accent-purple-subtler',
'color.background.accent.purple.subtle': '--ds-background-accent-purple-subtle',
'color.background.accent.purple.bolder': '--ds-background-accent-purple-bolder',
'color.background.accent.purple': '--ds-background-accent-purple',
'color.background.accent.purple.bold': '--ds-background-accent-purple-bold',
'color.background.accent.magenta.subtlest': '--ds-background-accent-magenta-subtlest',
'color.background.accent.magenta.subtler': '--ds-background-accent-magenta-subtler',
'color.background.accent.magenta.subtle': '--ds-background-accent-magenta-subtle',
'color.background.accent.magenta.bolder': '--ds-background-accent-magenta-bolder',
'color.background.accent.magenta': '--ds-background-accent-magenta',

@@ -90,0 +130,0 @@ 'color.background.accent.magenta.bold': '--ds-background-accent-magenta-bold',

43

dist/esm/figma/synchronize-figma-tokens.js

@@ -29,4 +29,6 @@ // ----------------------------------------------------

if (hexValue.length === 4) {
// We have a half hex, double it!
hexValue = "".concat(hexValue).concat(hexValue.slice(1));
// We have a 3 character shorthand hex, expand it!
hexValue = hexValue.split('').map(function (char) {
return char === '#' ? char : "".concat(char).concat(char);
}).join('');
}

@@ -79,2 +81,26 @@

/**
* Formats a token description for use in Figma,
* including deprecated warnings
*
* @param token
*/
function formatDescription(token) {
var description = token.attributes.description.trim() || '';
if (token.attributes.state === 'deprecated') {
// The token is deprecated. Prefix a warning to the description!
// If the token has multiple replacement options,
// flatten them into a string
var replacements = Array.isArray(token.attributes.replacement) ? token.attributes.replacement.join(' | ') : token.attributes.replacement; // If the token has replacements, prefix them to the description
var prefix = replacements ? "use ".concat(replacements, " instead") : 'do not use';
description = "DEPRECATED ".concat(prefix, ". \n").concat(description);
}
return description;
}
/**
* Adds tokens under a specified theme as paint styles to Figma.

@@ -86,4 +112,2 @@ *

*/
function synchronizeFigmaTokens(themeName, tokens) {

@@ -122,3 +146,3 @@ var renameMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

style.effects = createEffects(token.value);
style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.

@@ -160,3 +184,3 @@ delete tokens[style.name];

style.paints = [createPaint(token.value)];
style.description = (token.attributes.description || '').trim(); // Remove from themeValues so it isn't picked up as a new token.
style.description = formatDescription(token); // Remove from themeValues so it isn't picked up as a new token.

@@ -172,3 +196,3 @@ delete tokens[style.name];

newStyle.name = key;
newStyle.description = (token.attributes.description || '').trim();
newStyle.description = formatDescription(token);
newStyle.paints = [createPaint(token.value)];

@@ -182,3 +206,3 @@ console.log("=> ".concat(key, " paint style has been added!"));

_newStyle.name = key;
_newStyle.description = (token.attributes.description || '').trim();
_newStyle.description = formatDescription(token);
_newStyle.effects = createEffects(token.value);

@@ -194,3 +218,4 @@ console.log("=> ".concat(key, " shadow style has been added!"));

createPaint: createPaint,
createEffects: createEffects
createEffects: createEffects,
formatDescription: formatDescription
};

@@ -197,0 +222,0 @@ }

2

dist/esm/get-token.js
import warnOnce from '@atlaskit/ds-lib/warn-once';
import tokens from './artifacts/token-names';
var name = "@atlaskit/tokens";
var version = "0.6.3";
var version = "0.7.0";

@@ -6,0 +6,0 @@ function token(path, fallback) {

152

dist/esm/tokens/atlassian-dark/color/accent.js

@@ -6,24 +6,64 @@ var color = {

blue: {
value: 'B300'
'[default]': {
value: 'B300'
},
bolder: {
value: 'B200'
}
},
red: {
value: 'R300'
'[default]': {
value: 'R300'
},
bolder: {
value: 'R200'
}
},
orange: {
value: 'O300'
'[default]': {
value: 'O300'
},
bolder: {
value: 'O200'
}
},
yellow: {
value: 'Y300'
'[default]': {
value: 'Y300'
},
bolder: {
value: 'Y200'
}
},
green: {
value: 'G300'
'[default]': {
value: 'G300'
},
bolder: {
value: 'G200'
}
},
purple: {
value: 'P300'
'[default]': {
value: 'P300'
},
bolder: {
value: 'P200'
}
},
teal: {
value: 'T300'
'[default]': {
value: 'T300'
},
bolder: {
value: 'T200'
}
},
magenta: {
value: 'M300'
'[default]': {
value: 'M300'
},
bolder: {
value: 'M200'
}
}

@@ -91,63 +131,111 @@ }

blue: {
'[default]': {
subtlest: {
value: 'B1000'
},
subtler: {
value: 'B900'
},
bold: {
value: 'B700'
subtle: {
value: 'B800'
},
bolder: {
value: 'B400'
}
},
red: {
'[default]': {
subtlest: {
value: 'R1000'
},
subtler: {
value: 'R900'
},
bold: {
value: 'R700'
subtle: {
value: 'R800'
},
bolder: {
value: 'R400'
}
},
orange: {
'[default]': {
subtlest: {
value: 'O1000'
},
subtler: {
value: 'O900'
},
bold: {
value: 'O700'
subtle: {
value: 'O800'
},
bolder: {
value: 'O400'
}
},
yellow: {
'[default]': {
subtlest: {
value: 'Y1000'
},
subtler: {
value: 'Y900'
},
bold: {
value: 'Y700'
subtle: {
value: 'Y800'
},
bolder: {
value: 'Y400'
}
},
green: {
'[default]': {
subtlest: {
value: 'G1000'
},
subtler: {
value: 'G900'
},
bold: {
value: 'G700'
subtle: {
value: 'G800'
},
bolder: {
value: 'G400'
}
},
purple: {
'[default]': {
subtlest: {
value: 'P1000'
},
subtler: {
value: 'P900'
},
bold: {
value: 'P700'
subtle: {
value: 'P800'
},
bolder: {
value: 'P400'
}
},
teal: {
'[default]': {
subtlest: {
value: 'T1000'
},
subtler: {
value: 'T900'
},
bold: {
value: 'T700'
subtle: {
value: 'T800'
},
bolder: {
value: 'T400'
}
},
magenta: {
'[default]': {
subtlest: {
value: 'M1000'
},
subtler: {
value: 'M900'
},
bold: {
value: 'M700'
subtle: {
value: 'M800'
},
bolder: {
value: 'M400'
}

@@ -154,0 +242,0 @@ }

72

dist/esm/tokens/atlassian-dark/deprecated/deprecated.js

@@ -45,2 +45,68 @@ var color = {

background: {
accent: {
blue: {
'[default]': {
value: 'B900'
},
bold: {
value: 'B700'
}
},
red: {
'[default]': {
value: 'R900'
},
bold: {
value: 'R700'
}
},
orange: {
'[default]': {
value: 'O900'
},
bold: {
value: 'O700'
}
},
yellow: {
'[default]': {
value: 'Y900'
},
bold: {
value: 'Y700'
}
},
green: {
'[default]': {
value: 'G900'
},
bold: {
value: 'G700'
}
},
purple: {
'[default]': {
value: 'P900'
},
bold: {
value: 'P700'
}
},
teal: {
'[default]': {
value: 'T900'
},
bold: {
value: 'T700'
}
},
magenta: {
'[default]': {
value: 'M900'
},
bold: {
value: 'M700'
}
}
},
blanket: {

@@ -52,9 +118,9 @@ value: 'DN-100A'

'[default]': {
value: 'DN200A'
value: 'B1000'
},
hovered: {
value: 'DN300A'
value: 'B900'
},
pressed: {
value: 'DN400A'
value: 'B800'
}

@@ -61,0 +127,0 @@ }

136

dist/esm/tokens/atlassian-light/color/accent.js

@@ -6,24 +6,64 @@ var color = {

blue: {
value: 'B800'
'[default]': {
value: 'B800'
},
bolder: {
value: 'B900'
}
},
red: {
value: 'R800'
'[default]': {
value: 'R800'
},
bolder: {
value: 'R900'
}
},
orange: {
value: 'O800'
'[default]': {
value: 'O800'
},
bolder: {
value: 'O900'
}
},
yellow: {
value: 'Y800'
'[default]': {
value: 'Y800'
},
bolder: {
value: 'Y900'
}
},
green: {
value: 'G800'
'[default]': {
value: 'G800'
},
bolder: {
value: 'G900'
}
},
purple: {
value: 'P800'
'[default]': {
value: 'P800'
},
bolder: {
value: 'P900'
}
},
teal: {
value: 'T800'
'[default]': {
value: 'T800'
},
bolder: {
value: 'T900'
}
},
magenta: {
value: 'M800'
'[default]': {
value: 'M800'
},
bolder: {
value: 'M900'
}
}

@@ -91,63 +131,111 @@ }

blue: {
'[default]': {
subtlest: {
value: 'B100'
},
subtler: {
value: 'B200'
},
bold: {
subtle: {
value: 'B400'
},
bolder: {
value: 'B700'
}
},
red: {
'[default]': {
subtlest: {
value: 'R100'
},
subtler: {
value: 'R200'
},
bold: {
subtle: {
value: 'R400'
},
bolder: {
value: 'R700'
}
},
orange: {
'[default]': {
subtlest: {
value: 'O100'
},
subtler: {
value: 'O200'
},
bold: {
subtle: {
value: 'O400'
},
bolder: {
value: 'O700'
}
},
yellow: {
'[default]': {
subtlest: {
value: 'Y100'
},
subtler: {
value: 'Y200'
},
bold: {
subtle: {
value: 'Y400'
},
bolder: {
value: 'Y700'
}
},
green: {
'[default]': {
subtlest: {
value: 'G100'
},
subtler: {
value: 'G200'
},
bold: {
subtle: {
value: 'G400'
},
bolder: {
value: 'G700'
}
},
purple: {
'[default]': {
subtlest: {
value: 'P100'
},
subtler: {
value: 'P200'
},
bold: {
subtle: {
value: 'P400'
},
bolder: {
value: 'P700'
}
},
teal: {
'[default]': {
subtlest: {
value: 'T100'
},
subtler: {
value: 'T200'
},
bold: {
subtle: {
value: 'T400'
},
bolder: {
value: 'T700'
}
},
magenta: {
'[default]': {
subtlest: {
value: 'M100'
},
subtler: {
value: 'M200'
},
bold: {
subtle: {
value: 'M400'
},
bolder: {
value: 'M700'
}

@@ -154,0 +242,0 @@ }

66

dist/esm/tokens/atlassian-light/deprecated/deprecated.js

@@ -45,2 +45,68 @@ var color = {

background: {
accent: {
blue: {
'[default]': {
value: 'B200'
},
bold: {
value: 'B400'
}
},
red: {
'[default]': {
value: 'R200'
},
bold: {
value: 'R400'
}
},
orange: {
'[default]': {
value: 'O200'
},
bold: {
value: 'O400'
}
},
yellow: {
'[default]': {
value: 'Y200'
},
bold: {
value: 'Y400'
}
},
green: {
'[default]': {
value: 'G200'
},
bold: {
value: 'G400'
}
},
purple: {
'[default]': {
value: 'P200'
},
bold: {
value: 'P400'
}
},
teal: {
'[default]': {
value: 'T200'
},
bold: {
value: 'T400'
}
},
magenta: {
'[default]': {
value: 'M200'
},
bold: {
value: 'M400'
}
}
},
blanket: {

@@ -47,0 +113,0 @@ value: 'N500A'

284

dist/esm/tokens/default/color/accent.js

@@ -6,55 +6,127 @@ var color = {

blue: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold blue accent backgrounds.'
}
}
},
red: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold red accent backgrounds.'
}
}
},
orange: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold orange accent backgrounds.'
}
}
},
yellow: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold yellow accent backgrounds.'
}
}
},
green: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold green accent backgrounds.'
}
}
},
purple: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold purple accent backgrounds.'
}
}
},
teal: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold teal accent backgrounds.'
}
}
},
magenta: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
'[default]': {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use on bold magenta accent backgrounds.'
}
}

@@ -130,3 +202,3 @@ }

state: 'active',
description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
}

@@ -138,3 +210,3 @@ },

state: 'active',
description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
}

@@ -189,10 +261,17 @@ },

blue: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -203,13 +282,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
red: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -220,13 +313,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
orange: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -237,13 +344,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
yellow: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -254,13 +375,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
green: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -271,13 +406,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
teal: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -288,13 +437,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
purple: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -305,13 +468,27 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
magenta: {
'[default]': {
subtlest: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
}
},
subtler: {
attributes: {
group: 'paint',
state: 'active',
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
subtle: {
attributes: {

@@ -322,2 +499,9 @@ group: 'paint',

}
},
bolder: {
attributes: {
group: 'paint',
state: 'active',
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.'
}
}

@@ -324,0 +508,0 @@ }

172

dist/esm/tokens/default/deprecated/deprecated.js

@@ -8,3 +8,3 @@ var color = {

state: 'deprecated',
replacement: 'color.background.accent.blue.bold',
replacement: 'color.background.accent.blue.bolder',
description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -17,3 +17,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.green.bold',
replacement: 'color.background.accent.green.bolder',
description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -26,3 +26,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.orange.bold',
replacement: 'color.background.accent.orange.bolder',
description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -35,3 +35,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.purple.bold',
replacement: 'color.background.accent.purple.bolder',
description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -44,3 +44,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.red.bold',
replacement: 'color.background.accent.red.bolder',
description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -53,3 +53,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.teal.bold',
replacement: 'color.background.accent.teal.bolder',
description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'

@@ -62,3 +62,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.blue.[default]',
replacement: 'color.background.accent.blue.subtler',
description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -71,3 +71,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.green.[default]',
replacement: 'color.background.accent.green.subtler',
description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -80,3 +80,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.magenta.[default]',
replacement: 'color.background.accent.magenta.subtler',
description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -89,3 +89,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.orange.[default]',
replacement: 'color.background.accent.orange.subtler',
description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -98,3 +98,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.purple.[default]',
replacement: 'color.background.accent.purple.subtler',
description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -107,3 +107,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.red.[default]',
replacement: 'color.background.accent.red.subtler',
description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -116,3 +116,3 @@ }

state: 'deprecated',
replacement: 'color.background.accent.teal.[default]',
replacement: 'color.background.accent.teal.subtler',
description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'

@@ -123,2 +123,148 @@ }

background: {
accent: {
blue: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.blue.subtler',
description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.blue.subtle',
description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
red: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.red.subtler',
description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.red.subtle',
description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
orange: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.orange.subtler',
description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.orange.subtle',
description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
yellow: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.yellow.subtler',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.yellow.subtle',
description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
green: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.green.subtler',
description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.green.subtle',
description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
teal: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.teal.subtler',
description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.teal.subtle',
description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
purple: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.purple.subtler',
description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.purple.subtle',
description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
}
}
},
magenta: {
'[default]': {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.magenta.subtler',
description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
}
},
bold: {
attributes: {
group: 'paint',
state: 'deprecated',
replacement: 'color.background.accent.magenta.subtle',
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.'
}
}
}
},
blanket: {

@@ -125,0 +271,0 @@ attributes: {

2

dist/esm/version.json
{
"name": "@atlaskit/tokens",
"version": "0.6.3",
"version": "0.7.0",
"sideEffects": false
}

40

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

@@ -6,9 +6,17 @@ /**

readonly 'color.text.accent.blue': "#0055CC";
readonly 'color.text.accent.blue.bolder': "#09326C";
readonly 'color.text.accent.red': "#AE2A19";
readonly 'color.text.accent.red.bolder': "#601E16";
readonly 'color.text.accent.orange': "#974F0C";
readonly 'color.text.accent.orange.bolder': "#5F3811";
readonly 'color.text.accent.yellow': "#7F5F01";
readonly 'color.text.accent.yellow.bolder': "#533F04";
readonly 'color.text.accent.green': "#216E4E";
readonly 'color.text.accent.green.bolder': "#164B35";
readonly 'color.text.accent.purple': "#5E4DB2";
readonly 'color.text.accent.purple.bolder': "#352C63";
readonly 'color.text.accent.teal': "#206B74";
readonly 'color.text.accent.teal.bolder': "#1D474C";
readonly 'color.text.accent.magenta': "#943D73";
readonly 'color.text.accent.magenta.bolder': "#50253F";
readonly 'color.text': "#172B4D";

@@ -75,16 +83,48 @@ readonly 'color.text.subtle': "#44546F";

readonly 'color.border.neutral': "#091E4224";
readonly 'color.background.accent.blue.subtlest': "#E9F2FF";
readonly 'color.background.accent.blue.subtler': "#CCE0FF";
readonly 'color.background.accent.blue.subtle': "#579DFF";
readonly 'color.background.accent.blue.bolder': "#0C66E4";
readonly 'color.background.accent.blue': "#CCE0FF";
readonly 'color.background.accent.blue.bold': "#579DFF";
readonly 'color.background.accent.red.subtlest': "#FFEDEB";
readonly 'color.background.accent.red.subtler': "#FFD2CC";
readonly 'color.background.accent.red.subtle': "#F87462";
readonly 'color.background.accent.red.bolder': "#CA3521";
readonly 'color.background.accent.red': "#FFD2CC";
readonly 'color.background.accent.red.bold': "#F87462";
readonly 'color.background.accent.orange.subtlest': "#FFF4E5";
readonly 'color.background.accent.orange.subtler': "#FFE2BD";
readonly 'color.background.accent.orange.subtle': "#FAA53D";
readonly 'color.background.accent.orange.bolder': "#B65C02";
readonly 'color.background.accent.orange': "#FFE2BD";
readonly 'color.background.accent.orange.bold': "#FAA53D";
readonly 'color.background.accent.yellow.subtlest': "#FFF7D6";
readonly 'color.background.accent.yellow.subtler': "#F8E6A0";
readonly 'color.background.accent.yellow.subtle': "#E2B203";
readonly 'color.background.accent.yellow.bolder': "#946F00";
readonly 'color.background.accent.yellow': "#F8E6A0";
readonly 'color.background.accent.yellow.bold': "#E2B203";
readonly 'color.background.accent.green.subtlest': "#DFFCF0";
readonly 'color.background.accent.green.subtler': "#BAF3DB";
readonly 'color.background.accent.green.subtle': "#4BCE97";
readonly 'color.background.accent.green.bolder': "#1F845A";
readonly 'color.background.accent.green': "#BAF3DB";
readonly 'color.background.accent.green.bold': "#4BCE97";
readonly 'color.background.accent.teal.subtlest': "#E3FAFC";
readonly 'color.background.accent.teal.subtler': "#C1F0F5";
readonly 'color.background.accent.teal.subtle': "#60C6D2";
readonly 'color.background.accent.teal.bolder': "#1D7F8C";
readonly 'color.background.accent.teal': "#C1F0F5";
readonly 'color.background.accent.teal.bold': "#60C6D2";
readonly 'color.background.accent.purple.subtlest': "#F3F0FF";
readonly 'color.background.accent.purple.subtler': "#DFD8FD";
readonly 'color.background.accent.purple.subtle': "#9F8FEF";
readonly 'color.background.accent.purple.bolder': "#6E5DC6";
readonly 'color.background.accent.purple': "#DFD8FD";
readonly 'color.background.accent.purple.bold': "#9F8FEF";
readonly 'color.background.accent.magenta.subtlest': "#FFECF8";
readonly 'color.background.accent.magenta.subtler': "#FDD0EC";
readonly 'color.background.accent.magenta.subtle': "#E774BB";
readonly 'color.background.accent.magenta.bolder': "#AE4787";
readonly 'color.background.accent.magenta': "#FDD0EC";

@@ -91,0 +131,0 @@ readonly 'color.background.accent.magenta.bold': "#E774BB";

80

dist/types/artifacts/token-names.d.ts
declare const tokens: {
readonly 'color.text.accent.blue': "--ds-text-accent-blue";
readonly 'color.text.accent.blue.bolder': "--ds-text-accent-blue-bolder";
readonly 'color.text.accent.red': "--ds-text-accent-red";
readonly 'color.text.accent.red.bolder': "--ds-text-accent-red-bolder";
readonly 'color.text.accent.orange': "--ds-text-accent-orange";
readonly 'color.text.accent.orange.bolder': "--ds-text-accent-orange-bolder";
readonly 'color.text.accent.yellow': "--ds-text-accent-yellow";
readonly 'color.text.accent.yellow.bolder': "--ds-text-accent-yellow-bolder";
readonly 'color.text.accent.green': "--ds-text-accent-green";
readonly 'color.text.accent.green.bolder': "--ds-text-accent-green-bolder";
readonly 'color.text.accent.purple': "--ds-text-accent-purple";
readonly 'color.text.accent.purple.bolder': "--ds-text-accent-purple-bolder";
readonly 'color.text.accent.teal': "--ds-text-accent-teal";
readonly 'color.text.accent.teal.bolder': "--ds-text-accent-teal-bolder";
readonly 'color.text.accent.magenta': "--ds-text-accent-magenta";
readonly 'color.text.accent.magenta.bolder': "--ds-text-accent-magenta-bolder";
readonly 'color.text': "--ds-text";

@@ -71,16 +79,48 @@ readonly 'color.text.subtle': "--ds-text-subtle";

readonly 'color.border.neutral': "--ds-border-neutral";
readonly 'color.background.accent.blue.subtlest': "--ds-background-accent-blue-subtlest";
readonly 'color.background.accent.blue.subtler': "--ds-background-accent-blue-subtler";
readonly 'color.background.accent.blue.subtle': "--ds-background-accent-blue-subtle";
readonly 'color.background.accent.blue.bolder': "--ds-background-accent-blue-bolder";
readonly 'color.background.accent.blue': "--ds-background-accent-blue";
readonly 'color.background.accent.blue.bold': "--ds-background-accent-blue-bold";
readonly 'color.background.accent.red.subtlest': "--ds-background-accent-red-subtlest";
readonly 'color.background.accent.red.subtler': "--ds-background-accent-red-subtler";
readonly 'color.background.accent.red.subtle': "--ds-background-accent-red-subtle";
readonly 'color.background.accent.red.bolder': "--ds-background-accent-red-bolder";
readonly 'color.background.accent.red': "--ds-background-accent-red";
readonly 'color.background.accent.red.bold': "--ds-background-accent-red-bold";
readonly 'color.background.accent.orange.subtlest': "--ds-background-accent-orange-subtlest";
readonly 'color.background.accent.orange.subtler': "--ds-background-accent-orange-subtler";
readonly 'color.background.accent.orange.subtle': "--ds-background-accent-orange-subtle";
readonly 'color.background.accent.orange.bolder': "--ds-background-accent-orange-bolder";
readonly 'color.background.accent.orange': "--ds-background-accent-orange";
readonly 'color.background.accent.orange.bold': "--ds-background-accent-orange-bold";
readonly 'color.background.accent.yellow.subtlest': "--ds-background-accent-yellow-subtlest";
readonly 'color.background.accent.yellow.subtler': "--ds-background-accent-yellow-subtler";
readonly 'color.background.accent.yellow.subtle': "--ds-background-accent-yellow-subtle";
readonly 'color.background.accent.yellow.bolder': "--ds-background-accent-yellow-bolder";
readonly 'color.background.accent.yellow': "--ds-background-accent-yellow";
readonly 'color.background.accent.yellow.bold': "--ds-background-accent-yellow-bold";
readonly 'color.background.accent.green.subtlest': "--ds-background-accent-green-subtlest";
readonly 'color.background.accent.green.subtler': "--ds-background-accent-green-subtler";
readonly 'color.background.accent.green.subtle': "--ds-background-accent-green-subtle";
readonly 'color.background.accent.green.bolder': "--ds-background-accent-green-bolder";
readonly 'color.background.accent.green': "--ds-background-accent-green";
readonly 'color.background.accent.green.bold': "--ds-background-accent-green-bold";
readonly 'color.background.accent.teal.subtlest': "--ds-background-accent-teal-subtlest";
readonly 'color.background.accent.teal.subtler': "--ds-background-accent-teal-subtler";
readonly 'color.background.accent.teal.subtle': "--ds-background-accent-teal-subtle";
readonly 'color.background.accent.teal.bolder': "--ds-background-accent-teal-bolder";
readonly 'color.background.accent.teal': "--ds-background-accent-teal";
readonly 'color.background.accent.teal.bold': "--ds-background-accent-teal-bold";
readonly 'color.background.accent.purple.subtlest': "--ds-background-accent-purple-subtlest";
readonly 'color.background.accent.purple.subtler': "--ds-background-accent-purple-subtler";
readonly 'color.background.accent.purple.subtle': "--ds-background-accent-purple-subtle";
readonly 'color.background.accent.purple.bolder': "--ds-background-accent-purple-bolder";
readonly 'color.background.accent.purple': "--ds-background-accent-purple";
readonly 'color.background.accent.purple.bold': "--ds-background-accent-purple-bold";
readonly 'color.background.accent.magenta.subtlest': "--ds-background-accent-magenta-subtlest";
readonly 'color.background.accent.magenta.subtler': "--ds-background-accent-magenta-subtler";
readonly 'color.background.accent.magenta.subtle': "--ds-background-accent-magenta-subtle";
readonly 'color.background.accent.magenta.bolder': "--ds-background-accent-magenta-bolder";
readonly 'color.background.accent.magenta': "--ds-background-accent-magenta";

@@ -231,9 +271,17 @@ readonly 'color.background.accent.magenta.bold': "--ds-background-accent-magenta-bold";

'color.text.accent.blue': 'var(--ds-text-accent-blue)';
'color.text.accent.blue.bolder': 'var(--ds-text-accent-blue-bolder)';
'color.text.accent.red': 'var(--ds-text-accent-red)';
'color.text.accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
'color.text.accent.orange': 'var(--ds-text-accent-orange)';
'color.text.accent.orange.bolder': 'var(--ds-text-accent-orange-bolder)';
'color.text.accent.yellow': 'var(--ds-text-accent-yellow)';
'color.text.accent.yellow.bolder': 'var(--ds-text-accent-yellow-bolder)';
'color.text.accent.green': 'var(--ds-text-accent-green)';
'color.text.accent.green.bolder': 'var(--ds-text-accent-green-bolder)';
'color.text.accent.purple': 'var(--ds-text-accent-purple)';
'color.text.accent.purple.bolder': 'var(--ds-text-accent-purple-bolder)';
'color.text.accent.teal': 'var(--ds-text-accent-teal)';
'color.text.accent.teal.bolder': 'var(--ds-text-accent-teal-bolder)';
'color.text.accent.magenta': 'var(--ds-text-accent-magenta)';
'color.text.accent.magenta.bolder': 'var(--ds-text-accent-magenta-bolder)';
'color.text': 'var(--ds-text)';

@@ -300,16 +348,48 @@ 'color.text.subtle': 'var(--ds-text-subtle)';

'color.border.neutral': 'var(--ds-border-neutral)';
'color.background.accent.blue.subtlest': 'var(--ds-background-accent-blue-subtlest)';
'color.background.accent.blue.subtler': 'var(--ds-background-accent-blue-subtler)';
'color.background.accent.blue.subtle': 'var(--ds-background-accent-blue-subtle)';
'color.background.accent.blue.bolder': 'var(--ds-background-accent-blue-bolder)';
'color.background.accent.blue': 'var(--ds-background-accent-blue)';
'color.background.accent.blue.bold': 'var(--ds-background-accent-blue-bold)';
'color.background.accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
'color.background.accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
'color.background.accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
'color.background.accent.red.bolder': 'var(--ds-background-accent-red-bolder)';
'color.background.accent.red': 'var(--ds-background-accent-red)';
'color.background.accent.red.bold': 'var(--ds-background-accent-red-bold)';
'color.background.accent.orange.subtlest': 'var(--ds-background-accent-orange-subtlest)';
'color.background.accent.orange.subtler': 'var(--ds-background-accent-orange-subtler)';
'color.background.accent.orange.subtle': 'var(--ds-background-accent-orange-subtle)';
'color.background.accent.orange.bolder': 'var(--ds-background-accent-orange-bolder)';
'color.background.accent.orange': 'var(--ds-background-accent-orange)';
'color.background.accent.orange.bold': 'var(--ds-background-accent-orange-bold)';
'color.background.accent.yellow.subtlest': 'var(--ds-background-accent-yellow-subtlest)';
'color.background.accent.yellow.subtler': 'var(--ds-background-accent-yellow-subtler)';
'color.background.accent.yellow.subtle': 'var(--ds-background-accent-yellow-subtle)';
'color.background.accent.yellow.bolder': 'var(--ds-background-accent-yellow-bolder)';
'color.background.accent.yellow': 'var(--ds-background-accent-yellow)';
'color.background.accent.yellow.bold': 'var(--ds-background-accent-yellow-bold)';
'color.background.accent.green.subtlest': 'var(--ds-background-accent-green-subtlest)';
'color.background.accent.green.subtler': 'var(--ds-background-accent-green-subtler)';
'color.background.accent.green.subtle': 'var(--ds-background-accent-green-subtle)';
'color.background.accent.green.bolder': 'var(--ds-background-accent-green-bolder)';
'color.background.accent.green': 'var(--ds-background-accent-green)';
'color.background.accent.green.bold': 'var(--ds-background-accent-green-bold)';
'color.background.accent.teal.subtlest': 'var(--ds-background-accent-teal-subtlest)';
'color.background.accent.teal.subtler': 'var(--ds-background-accent-teal-subtler)';
'color.background.accent.teal.subtle': 'var(--ds-background-accent-teal-subtle)';
'color.background.accent.teal.bolder': 'var(--ds-background-accent-teal-bolder)';
'color.background.accent.teal': 'var(--ds-background-accent-teal)';
'color.background.accent.teal.bold': 'var(--ds-background-accent-teal-bold)';
'color.background.accent.purple.subtlest': 'var(--ds-background-accent-purple-subtlest)';
'color.background.accent.purple.subtler': 'var(--ds-background-accent-purple-subtler)';
'color.background.accent.purple.subtle': 'var(--ds-background-accent-purple-subtle)';
'color.background.accent.purple.bolder': 'var(--ds-background-accent-purple-bolder)';
'color.background.accent.purple': 'var(--ds-background-accent-purple)';
'color.background.accent.purple.bold': 'var(--ds-background-accent-purple-bold)';
'color.background.accent.magenta.subtlest': 'var(--ds-background-accent-magenta-subtlest)';
'color.background.accent.magenta.subtler': 'var(--ds-background-accent-magenta-subtler)';
'color.background.accent.magenta.subtle': 'var(--ds-background-accent-magenta-subtle)';
'color.background.accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
'color.background.accent.magenta': 'var(--ds-background-accent-magenta)';

@@ -316,0 +396,0 @@ 'color.background.accent.magenta.bold': 'var(--ds-background-accent-magenta-bold)';

2

dist/types/artifacts/types-internal.d.ts
/**
* Internally types used for handling token ids
*/
export declare type InternalTokenIds = 'color.text.accent.blue' | 'color.text.accent.red' | 'color.text.accent.orange' | 'color.text.accent.yellow' | 'color.text.accent.green' | 'color.text.accent.purple' | 'color.text.accent.teal' | 'color.text.accent.magenta' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.[default]' | 'color.background.accent.blue.bold' | 'color.background.accent.red.[default]' | 'color.background.accent.red.bold' | 'color.background.accent.orange.[default]' | 'color.background.accent.orange.bold' | 'color.background.accent.yellow.[default]' | 'color.background.accent.yellow.bold' | 'color.background.accent.green.[default]' | 'color.background.accent.green.bold' | 'color.background.accent.teal.[default]' | 'color.background.accent.teal.bold' | 'color.background.accent.purple.[default]' | 'color.background.accent.purple.bold' | 'color.background.accent.magenta.[default]' | 'color.background.accent.magenta.bold' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

2

dist/types/artifacts/types.d.ts
/**
* Type representing the currently active tokens
*/
export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.red' | 'color.text.accent.orange' | 'color.text.accent.yellow' | 'color.text.accent.green' | 'color.text.accent.purple' | 'color.text.accent.teal' | 'color.text.accent.magenta' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue' | 'color.background.accent.blue.bold' | 'color.background.accent.red' | 'color.background.accent.red.bold' | 'color.background.accent.orange' | 'color.background.accent.orange.bold' | 'color.background.accent.yellow' | 'color.background.accent.yellow.bold' | 'color.background.accent.green' | 'color.background.accent.green.bold' | 'color.background.accent.teal' | 'color.background.accent.teal.bold' | 'color.background.accent.purple' | 'color.background.accent.purple.bold' | 'color.background.accent.magenta' | 'color.background.accent.magenta.bold' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

10

dist/types/figma/synchronize-figma-tokens.d.ts
import type { PaintToken, ShadowToken } from '../types';
import type { FigmaEffect, FigmaPaint } from './types';
declare function createPaint(hex: string): FigmaPaint;
declare function createEffects(value: ShadowToken<string>['value']): FigmaEffect[];
/**
* Formats a token description for use in Figma,
* including deprecated warnings
*
* @param token
*/
declare function formatDescription(token: PaintToken<string> | ShadowToken<string>): string;
export declare type CreateEffects = typeof createEffects;
export declare type CreatePaint = typeof createPaint;
declare function createEffects(value: ShadowToken<string>['value']): FigmaEffect[];
export declare type FormatDescription = typeof formatDescription;
/**

@@ -8,0 +16,0 @@ * Adds tokens under a specified theme as paint styles to Figma.

122

dist/types/types.d.ts

@@ -364,10 +364,34 @@ import { InternalTokenIds } from './artifacts/types-internal';

accent: {
blue: PaintToken;
red: PaintToken;
orange: PaintToken;
yellow: PaintToken;
green: PaintToken;
purple: PaintToken;
teal: PaintToken;
magenta: PaintToken;
blue: {
'[default]': PaintToken;
bolder: PaintToken;
};
red: {
'[default]': PaintToken;
bolder: PaintToken;
};
orange: {
'[default]': PaintToken;
bolder: PaintToken;
};
yellow: {
'[default]': PaintToken;
bolder: PaintToken;
};
green: {
'[default]': PaintToken;
bolder: PaintToken;
};
purple: {
'[default]': PaintToken;
bolder: PaintToken;
};
teal: {
'[default]': PaintToken;
bolder: PaintToken;
};
magenta: {
'[default]': PaintToken;
bolder: PaintToken;
};
};

@@ -402,32 +426,48 @@ };

blue: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
red: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
orange: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
yellow: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
green: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
teal: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
purple: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};
magenta: {
'[default]': PaintToken;
bold: PaintToken;
subtlest: PaintToken;
subtler: PaintToken;
subtle: PaintToken;
bolder: PaintToken;
};

@@ -492,2 +532,36 @@ };

background: {
accent: {
blue: {
'[default]': PaintToken;
bold: PaintToken;
};
red: {
'[default]': PaintToken;
bold: PaintToken;
};
orange: {
'[default]': PaintToken;
bold: PaintToken;
};
yellow: {
'[default]': PaintToken;
bold: PaintToken;
};
green: {
'[default]': PaintToken;
bold: PaintToken;
};
teal: {
'[default]': PaintToken;
bold: PaintToken;
};
purple: {
'[default]': PaintToken;
bold: PaintToken;
};
magenta: {
'[default]': PaintToken;
bold: PaintToken;
};
};
default: PaintToken;

@@ -494,0 +568,0 @@ sunken: PaintToken;

2

package.json
{
"name": "@atlaskit/tokens",
"version": "0.6.3",
"version": "0.7.0",
"author": "Atlassian Pty Ltd",

@@ -5,0 +5,0 @@ "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",

css/atlassian-dark.css

Sorry, the diff of this file is not supported yet

css/atlassian-light.css

Sorry, the diff of this file is not supported yet

dist/cjs/artifacts/tokens-raw/atlassian-dark.js

Sorry, the diff of this file is too big to display

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

Sorry, the diff of this file is too big to display

dist/es2019/artifacts/tokens-raw/atlassian-dark.js

Sorry, the diff of this file is too big to display

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

Sorry, the diff of this file is too big to display

dist/esm/artifacts/tokens-raw/atlassian-dark.js

Sorry, the diff of this file is too big to display

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

Sorry, the diff of this file is too big to display

dist/types/tokens/default/utility/utility.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc