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.1.0 to 0.1.1

dist/cjs/tokens/atlassian-dark/utility/utility.js
dist/cjs/tokens/atlassian-light/utility/utility.js
dist/cjs/tokens/default/color/accent.js
dist/cjs/tokens/default/color/background.js
dist/cjs/tokens/default/color/border.js
dist/cjs/tokens/default/color/icon-border.js
dist/cjs/tokens/default/color/overlay.js
dist/cjs/tokens/default/color/text.js
dist/cjs/tokens/default/shadow/shadow.js
dist/cjs/tokens/default/utility/utility.js
dist/es2019/tokens/atlassian-dark/utility/utility.js
dist/es2019/tokens/atlassian-light/utility/utility.js
dist/es2019/tokens/default/color/accent.js
dist/es2019/tokens/default/color/background.js
dist/es2019/tokens/default/color/border.js
dist/es2019/tokens/default/color/icon-border.js
dist/es2019/tokens/default/color/overlay.js
dist/es2019/tokens/default/color/text.js
dist/es2019/tokens/default/shadow/shadow.js
dist/es2019/tokens/default/utility/utility.js
dist/esm/tokens/atlassian-dark/utility/utility.js
dist/esm/tokens/atlassian-light/utility/utility.js
dist/esm/tokens/default/color/accent.js
dist/esm/tokens/default/color/background.js
dist/esm/tokens/default/color/border.js
dist/esm/tokens/default/color/icon-border.js
dist/esm/tokens/default/color/overlay.js
dist/esm/tokens/default/color/text.js
dist/esm/tokens/default/shadow/shadow.js
dist/esm/tokens/default/utility/utility.js
dist/types/tokens/atlassian-dark/utility/utility.d.ts
dist/types/tokens/atlassian-light/utility/utility.d.ts
dist/types/tokens/default/color/accent.d.ts
dist/types/tokens/default/color/background.d.ts
dist/types/tokens/default/color/border.d.ts
dist/types/tokens/default/color/icon-border.d.ts
dist/types/tokens/default/color/overlay.d.ts
dist/types/tokens/default/color/text.d.ts
dist/types/tokens/default/shadow/shadow.d.ts
dist/types/tokens/default/utility/utility.d.ts

18

CHANGELOG.md
# @atlaskit/tokens
## 0.1.1
### Patch Changes
- [`6f3632e65d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f3632e65d4) - Updates README with MVP instructions for usage.
- [`c1498cb226e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1498cb226e) - Removes previous rename map
- [`0936217160c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0936217160c) - Add bold accent tokens:
- `color.accent.boldBlue`
- `color.accent.boldRed`
- `color.accent.boldGreen`
- `color.accent.boldOrange`
- `color.accent.boldTeal`
- `color.accent.boldPurple`
- [`6d72bea69a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d72bea69a0) - Descriptions and other token metadata is now stored in the "default" theme.
- [`addf9436414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/addf9436414) - [ux] Introduced a restricted util token for use during the initial token migration. This token is for internal use only and will be removed in a future version of `@atlaskit/tokens`.
## 0.1.0

@@ -4,0 +22,0 @@

8

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

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

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

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

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

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

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

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

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

@@ -186,0 +186,0 @@ console.log("=> ".concat(key, " shadow style has been added!"));

53

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

@@ -10,43 +10,40 @@ "use strict";

accent: {
boldBlue: {
value: 'B700'
},
boldGreen: {
value: 'G700'
},
boldOrange: {
value: 'O700'
},
boldPurple: {
value: 'P700'
},
boldRed: {
value: 'R700'
},
boldTeal: {
value: 'T700'
},
subtleBlue: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
},
subtleGreen: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
},
subtleMagenta: {
value: 'M900',
attributes: {
group: 'paint'
}
value: 'M900'
},
subtleOrange: {
value: 'O900',
attributes: {
group: 'paint'
}
value: 'O900'
},
subtlePurple: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
},
subtleRed: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
},
subtleTeal: {
value: 'T900',
attributes: {
group: 'paint'
}
value: 'T900'
}

@@ -53,0 +50,0 @@ }

245

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

@@ -11,75 +11,39 @@ "use strict";

sunken: {
value: 'DN-100A',
attributes: {
group: 'paint'
}
value: 'DN-100A'
},
default: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
card: {
value: 'DN100',
attributes: {
group: 'paint'
}
value: 'DN100'
},
overlay: {
value: 'DN200',
attributes: {
group: 'paint'
}
value: 'DN200'
},
selected: {
resting: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
hover: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
},
pressed: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
}
},
blanket: {
value: 'DN-100A',
attributes: {
group: 'paint'
}
value: 'DN-100A'
},
disabled: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
boldBrand: {
resting: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
hover: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
pressed: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
}

@@ -89,18 +53,9 @@ },

resting: {
value: 'B1000',
attributes: {
group: 'paint'
}
value: 'B1000'
},
hover: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
},
pressed: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
}

@@ -110,18 +65,9 @@ },

resting: {
value: 'R400',
attributes: {
group: 'paint'
}
value: 'R400'
},
hover: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
},
pressed: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
}

@@ -131,18 +77,9 @@ },

resting: {
value: 'R1000',
attributes: {
group: 'paint'
}
value: 'R1000'
},
hover: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
},
pressed: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
}

@@ -152,18 +89,9 @@ },

resting: {
value: 'Y400',
attributes: {
group: 'paint'
}
value: 'Y400'
},
hover: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
},
pressed: {
value: 'Y200',
attributes: {
group: 'paint'
}
value: 'Y200'
}

@@ -173,18 +101,9 @@ },

resting: {
value: 'Y1000',
attributes: {
group: 'paint'
}
value: 'Y1000'
},
hover: {
value: 'Y900',
attributes: {
group: 'paint'
}
value: 'Y900'
},
pressed: {
value: 'Y800',
attributes: {
group: 'paint'
}
value: 'Y800'
}

@@ -194,18 +113,9 @@ },

resting: {
value: 'G400',
attributes: {
group: 'paint'
}
value: 'G400'
},
hover: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
},
pressed: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
}

@@ -215,18 +125,9 @@ },

resting: {
value: 'G1000',
attributes: {
group: 'paint'
}
value: 'G1000'
},
hover: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
},
pressed: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
}

@@ -236,18 +137,9 @@ },

resting: {
value: 'P400',
attributes: {
group: 'paint'
}
value: 'P400'
},
hover: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
},
pressed: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
}

@@ -257,18 +149,9 @@ },

resting: {
value: 'P1000',
attributes: {
group: 'paint'
}
value: 'P1000'
},
hover: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
},
pressed: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
}

@@ -278,18 +161,9 @@ },

resting: {
value: 'DN800',
attributes: {
group: 'paint'
}
value: 'DN800'
},
hover: {
value: 'DN900',
attributes: {
group: 'paint'
}
value: 'DN900'
},
pressed: {
value: 'DN1000',
attributes: {
group: 'paint'
}
value: 'DN1000'
}

@@ -299,12 +173,6 @@ },

hover: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
pressed: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
}

@@ -314,18 +182,9 @@ },

resting: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
hover: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
},
pressed: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
}

@@ -335,12 +194,6 @@ },

resting: {
value: 'DN100A',
attributes: {
group: 'paint'
}
value: 'DN100A'
},
pressed: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
}

@@ -347,0 +200,0 @@ }

10

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

@@ -11,12 +11,6 @@ "use strict";

focus: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
neutral: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
}

@@ -23,0 +17,0 @@ }

25

dist/cjs/tokens/atlassian-dark/color/icon-border.js

@@ -11,30 +11,15 @@ "use strict";

brand: {
value: 'B500',
attributes: {
group: 'paint'
}
value: 'B500'
},
danger: {
value: 'R500',
attributes: {
group: 'paint'
}
value: 'R500'
},
warning: {
value: 'Y500',
attributes: {
group: 'paint'
}
value: 'Y500'
},
success: {
value: 'G500',
attributes: {
group: 'paint'
}
value: 'G500'
},
discovery: {
value: 'P500',
attributes: {
group: 'paint'
}
value: 'P500'
}

@@ -41,0 +26,0 @@ }

10

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

@@ -11,12 +11,6 @@ "use strict";

hover: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
},
pressed: {
value: 'DN500A',
attributes: {
group: 'paint'
}
value: 'DN500A'
}

@@ -23,0 +17,0 @@ }

70

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

@@ -11,86 +11,44 @@ "use strict";

selected: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
highEmphasis: {
value: 'DN1000',
attributes: {
group: 'paint'
}
value: 'DN1000'
},
mediumEmphasis: {
value: 'DN800',
attributes: {
group: 'paint'
}
value: 'DN800'
},
lowEmphasis: {
value: 'DN700',
attributes: {
group: 'paint'
}
value: 'DN700'
},
onBold: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
onBoldWarning: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
link: {
resting: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}
},
brand: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
warning: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
},
danger: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
},
success: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
},
discovery: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
},
disabled: {
value: 'DN500',
attributes: {
group: 'paint'
}
value: 'DN500'
}

@@ -97,0 +55,0 @@ }

10

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

@@ -28,6 +28,3 @@ "use strict";

opacity: 0.5
}],
attributes: {
group: 'shadow'
}
}]
},

@@ -63,6 +60,3 @@ overlay: {

opacity: 0.5
}],
attributes: {
group: 'shadow'
}
}]
}

@@ -69,0 +63,0 @@ }

53

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

@@ -10,43 +10,40 @@ "use strict";

accent: {
boldBlue: {
value: 'B400'
},
boldGreen: {
value: 'G400'
},
boldOrange: {
value: 'O400'
},
boldPurple: {
value: 'P400'
},
boldRed: {
value: 'R400'
},
boldTeal: {
value: 'T400'
},
subtleBlue: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
subtleGreen: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
},
subtleMagenta: {
value: 'M200',
attributes: {
group: 'paint'
}
value: 'M200'
},
subtleOrange: {
value: 'O200',
attributes: {
group: 'paint'
}
value: 'O200'
},
subtlePurple: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
},
subtleRed: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
},
subtleTeal: {
value: 'T200',
attributes: {
group: 'paint'
}
value: 'T200'
}

@@ -53,0 +50,0 @@ }

245

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

@@ -11,75 +11,39 @@ "use strict";

sunken: {
value: 'N100A',
attributes: {
group: 'paint'
}
value: 'N100A'
},
default: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
card: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
overlay: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
selected: {
resting: {
value: 'B100',
attributes: {
group: 'paint'
}
value: 'B100'
},
hover: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}
},
blanket: {
value: 'N500A',
attributes: {
group: 'paint'
}
value: 'N500A'
},
disabled: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
boldBrand: {
resting: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
hover: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
},
pressed: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
}

@@ -89,18 +53,9 @@ },

resting: {
value: 'B100',
attributes: {
group: 'paint'
}
value: 'B100'
},
hover: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}

@@ -110,18 +65,9 @@ },

resting: {
value: 'R700',
attributes: {
group: 'paint'
}
value: 'R700'
},
hover: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
},
pressed: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
}

@@ -131,18 +77,9 @@ },

resting: {
value: 'R100',
attributes: {
group: 'paint'
}
value: 'R100'
},
hover: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
},
pressed: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
}

@@ -152,18 +89,9 @@ },

resting: {
value: 'Y400',
attributes: {
group: 'paint'
}
value: 'Y400'
},
hover: {
value: 'Y500',
attributes: {
group: 'paint'
}
value: 'Y500'
},
pressed: {
value: 'Y600',
attributes: {
group: 'paint'
}
value: 'Y600'
}

@@ -173,18 +101,9 @@ },

resting: {
value: 'Y100',
attributes: {
group: 'paint'
}
value: 'Y100'
},
hover: {
value: 'Y200',
attributes: {
group: 'paint'
}
value: 'Y200'
},
pressed: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
}

@@ -194,18 +113,9 @@ },

resting: {
value: 'G700',
attributes: {
group: 'paint'
}
value: 'G700'
},
hover: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
},
pressed: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
}

@@ -215,18 +125,9 @@ },

resting: {
value: 'G100',
attributes: {
group: 'paint'
}
value: 'G100'
},
hover: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
},
pressed: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
}

@@ -236,18 +137,9 @@ },

resting: {
value: 'P700',
attributes: {
group: 'paint'
}
value: 'P700'
},
hover: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
},
pressed: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
}

@@ -257,18 +149,9 @@ },

resting: {
value: 'P100',
attributes: {
group: 'paint'
}
value: 'P100'
},
hover: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
},
pressed: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
}

@@ -278,18 +161,9 @@ },

resting: {
value: 'N800',
attributes: {
group: 'paint'
}
value: 'N800'
},
hover: {
value: 'N900',
attributes: {
group: 'paint'
}
value: 'N900'
},
pressed: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
}

@@ -299,12 +173,6 @@ },

hover: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
pressed: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
}

@@ -314,18 +182,9 @@ },

resting: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
hover: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
},
pressed: {
value: 'N400A',
attributes: {
group: 'paint'
}
value: 'N400A'
}

@@ -335,12 +194,6 @@ },

resting: {
value: 'N100A',
attributes: {
group: 'paint'
}
value: 'N100A'
},
pressed: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
}

@@ -347,0 +200,0 @@ }

10

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

@@ -11,12 +11,6 @@ "use strict";

focus: {
value: 'B500',
attributes: {
group: 'paint'
}
value: 'B500'
},
neutral: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
}

@@ -23,0 +17,0 @@ }

25

dist/cjs/tokens/atlassian-light/color/icon-border.js

@@ -11,30 +11,15 @@ "use strict";

brand: {
value: 'B600',
attributes: {
group: 'paint'
}
value: 'B600'
},
danger: {
value: 'R600',
attributes: {
group: 'paint'
}
value: 'R600'
},
warning: {
value: 'O600',
attributes: {
group: 'paint'
}
value: 'O600'
},
success: {
value: 'G600',
attributes: {
group: 'paint'
}
value: 'G600'
},
discovery: {
value: 'P600',
attributes: {
group: 'paint'
}
value: 'P600'
}

@@ -41,0 +26,0 @@ }

10

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

@@ -11,12 +11,6 @@ "use strict";

hover: {
value: 'N400A',
attributes: {
group: 'paint'
}
value: 'N400A'
},
pressed: {
value: 'N500A',
attributes: {
group: 'paint'
}
value: 'N500A'
}

@@ -23,0 +17,0 @@ }

70

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

@@ -11,86 +11,44 @@ "use strict";

selected: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
highEmphasis: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
},
mediumEmphasis: {
value: 'N800',
attributes: {
group: 'paint'
}
value: 'N800'
},
lowEmphasis: {
value: 'N700',
attributes: {
group: 'paint'
}
value: 'N700'
},
onBold: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
onBoldWarning: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
},
link: {
resting: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
pressed: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
}
},
brand: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
},
warning: {
value: 'O800',
attributes: {
group: 'paint'
}
value: 'O800'
},
danger: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
},
success: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
},
discovery: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
},
disabled: {
value: 'N500',
attributes: {
group: 'paint'
}
value: 'N500'
}

@@ -97,0 +55,0 @@ }

10

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

@@ -26,6 +26,3 @@ "use strict";

opacity: 0.31
}],
attributes: {
group: 'shadow'
}
}]
},

@@ -49,6 +46,3 @@ overlay: {

opacity: 0.31
}],
attributes: {
group: 'shadow'
}
}]
}

@@ -55,0 +49,0 @@ }

12

dist/cjs/tokens/rename-mapping.js

@@ -27,14 +27,4 @@ "use strict";

*/
var renameMapping = {
'color.accent.blueSubtle': 'color.accent.subtleBlue',
'color.accent.greenSubtle': 'color.accent.subtleGreen',
'color.accent.magentaSubtle': 'color.accent.subtleMagenta',
'color.accent.orangeSubtle': 'color.accent.subtleOrange',
'color.accent.purpleSubtle': 'color.accent.subtlePurple',
'color.accent.redSubtle': 'color.accent.subtleRed',
'color.accent.tealSubtle': 'color.accent.subtleTeal',
'color.background.selected': 'color.background.selected.resting',
'color.border.disabled': 'color.background.disabled'
};
var renameMapping = {};
var _default = renameMapping;
exports.default = _default;

9

dist/cjs/tokens/token-names.js

@@ -10,2 +10,8 @@ "use strict";

var tokens = {
'color.accent.boldBlue': '--accent-boldBlue',
'color.accent.boldGreen': '--accent-boldGreen',
'color.accent.boldOrange': '--accent-boldOrange',
'color.accent.boldPurple': '--accent-boldPurple',
'color.accent.boldRed': '--accent-boldRed',
'color.accent.boldTeal': '--accent-boldTeal',
'color.accent.subtleBlue': '--accent-subtleBlue',

@@ -91,5 +97,6 @@ 'color.accent.subtleGreen': '--accent-subtleGreen',

'shadow.card': '--card',
'shadow.overlay': '--overlay'
'shadow.overlay': '--overlay',
'utility.UNSAFE_util.transparent': '--UNSAFE_util-transparent'
};
var _default = tokens;
exports.default = _default;

2

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

8

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

@@ -110,3 +110,3 @@ // ----------------------------------------------------

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

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

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

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

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

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

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

@@ -178,0 +178,0 @@ console.log(`=> ${key} shadow style has been added!`);

53

dist/es2019/tokens/atlassian-dark/color/accent.js
const color = {
color: {
accent: {
boldBlue: {
value: 'B700'
},
boldGreen: {
value: 'G700'
},
boldOrange: {
value: 'O700'
},
boldPurple: {
value: 'P700'
},
boldRed: {
value: 'R700'
},
boldTeal: {
value: 'T700'
},
subtleBlue: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
},
subtleGreen: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
},
subtleMagenta: {
value: 'M900',
attributes: {
group: 'paint'
}
value: 'M900'
},
subtleOrange: {
value: 'O900',
attributes: {
group: 'paint'
}
value: 'O900'
},
subtlePurple: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
},
subtleRed: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
},
subtleTeal: {
value: 'T900',
attributes: {
group: 'paint'
}
value: 'T900'
}

@@ -46,0 +43,0 @@ }

245

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

@@ -5,75 +5,39 @@ const color = {

sunken: {
value: 'DN-100A',
attributes: {
group: 'paint'
}
value: 'DN-100A'
},
default: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
card: {
value: 'DN100',
attributes: {
group: 'paint'
}
value: 'DN100'
},
overlay: {
value: 'DN200',
attributes: {
group: 'paint'
}
value: 'DN200'
},
selected: {
resting: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
hover: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
},
pressed: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
}
},
blanket: {
value: 'DN-100A',
attributes: {
group: 'paint'
}
value: 'DN-100A'
},
disabled: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
boldBrand: {
resting: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
hover: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
pressed: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
}

@@ -83,18 +47,9 @@ },

resting: {
value: 'B1000',
attributes: {
group: 'paint'
}
value: 'B1000'
},
hover: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
},
pressed: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
}

@@ -104,18 +59,9 @@ },

resting: {
value: 'R400',
attributes: {
group: 'paint'
}
value: 'R400'
},
hover: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
},
pressed: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
}

@@ -125,18 +71,9 @@ },

resting: {
value: 'R1000',
attributes: {
group: 'paint'
}
value: 'R1000'
},
hover: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
},
pressed: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
}

@@ -146,18 +83,9 @@ },

resting: {
value: 'Y400',
attributes: {
group: 'paint'
}
value: 'Y400'
},
hover: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
},
pressed: {
value: 'Y200',
attributes: {
group: 'paint'
}
value: 'Y200'
}

@@ -167,18 +95,9 @@ },

resting: {
value: 'Y1000',
attributes: {
group: 'paint'
}
value: 'Y1000'
},
hover: {
value: 'Y900',
attributes: {
group: 'paint'
}
value: 'Y900'
},
pressed: {
value: 'Y800',
attributes: {
group: 'paint'
}
value: 'Y800'
}

@@ -188,18 +107,9 @@ },

resting: {
value: 'G400',
attributes: {
group: 'paint'
}
value: 'G400'
},
hover: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
},
pressed: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
}

@@ -209,18 +119,9 @@ },

resting: {
value: 'G1000',
attributes: {
group: 'paint'
}
value: 'G1000'
},
hover: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
},
pressed: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
}

@@ -230,18 +131,9 @@ },

resting: {
value: 'P400',
attributes: {
group: 'paint'
}
value: 'P400'
},
hover: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
},
pressed: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
}

@@ -251,18 +143,9 @@ },

resting: {
value: 'P1000',
attributes: {
group: 'paint'
}
value: 'P1000'
},
hover: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
},
pressed: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
}

@@ -272,18 +155,9 @@ },

resting: {
value: 'DN800',
attributes: {
group: 'paint'
}
value: 'DN800'
},
hover: {
value: 'DN900',
attributes: {
group: 'paint'
}
value: 'DN900'
},
pressed: {
value: 'DN1000',
attributes: {
group: 'paint'
}
value: 'DN1000'
}

@@ -293,12 +167,6 @@ },

hover: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
pressed: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
}

@@ -308,18 +176,9 @@ },

resting: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
hover: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
},
pressed: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
}

@@ -329,12 +188,6 @@ },

resting: {
value: 'DN100A',
attributes: {
group: 'paint'
}
value: 'DN100A'
},
pressed: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
}

@@ -341,0 +194,0 @@ }

10

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

@@ -5,12 +5,6 @@ const color = {

focus: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
neutral: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
}

@@ -17,0 +11,0 @@ }

25

dist/es2019/tokens/atlassian-dark/color/icon-border.js

@@ -5,30 +5,15 @@ const color = {

brand: {
value: 'B500',
attributes: {
group: 'paint'
}
value: 'B500'
},
danger: {
value: 'R500',
attributes: {
group: 'paint'
}
value: 'R500'
},
warning: {
value: 'Y500',
attributes: {
group: 'paint'
}
value: 'Y500'
},
success: {
value: 'G500',
attributes: {
group: 'paint'
}
value: 'G500'
},
discovery: {
value: 'P500',
attributes: {
group: 'paint'
}
value: 'P500'
}

@@ -35,0 +20,0 @@ }

10

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

@@ -5,12 +5,6 @@ const color = {

hover: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
},
pressed: {
value: 'DN500A',
attributes: {
group: 'paint'
}
value: 'DN500A'
}

@@ -17,0 +11,0 @@ }

70

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

@@ -5,86 +5,44 @@ const color = {

selected: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
highEmphasis: {
value: 'DN1000',
attributes: {
group: 'paint'
}
value: 'DN1000'
},
mediumEmphasis: {
value: 'DN800',
attributes: {
group: 'paint'
}
value: 'DN800'
},
lowEmphasis: {
value: 'DN700',
attributes: {
group: 'paint'
}
value: 'DN700'
},
onBold: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
onBoldWarning: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
link: {
resting: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}
},
brand: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
warning: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
},
danger: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
},
success: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
},
discovery: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
},
disabled: {
value: 'DN500',
attributes: {
group: 'paint'
}
value: 'DN500'
}

@@ -91,0 +49,0 @@ }

10

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

@@ -22,6 +22,3 @@ const shadow = {

opacity: 0.5
}],
attributes: {
group: 'shadow'
}
}]
},

@@ -57,6 +54,3 @@ overlay: {

opacity: 0.5
}],
attributes: {
group: 'shadow'
}
}]
}

@@ -63,0 +57,0 @@ }

53

dist/es2019/tokens/atlassian-light/color/accent.js
const color = {
color: {
accent: {
boldBlue: {
value: 'B400'
},
boldGreen: {
value: 'G400'
},
boldOrange: {
value: 'O400'
},
boldPurple: {
value: 'P400'
},
boldRed: {
value: 'R400'
},
boldTeal: {
value: 'T400'
},
subtleBlue: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
subtleGreen: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
},
subtleMagenta: {
value: 'M200',
attributes: {
group: 'paint'
}
value: 'M200'
},
subtleOrange: {
value: 'O200',
attributes: {
group: 'paint'
}
value: 'O200'
},
subtlePurple: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
},
subtleRed: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
},
subtleTeal: {
value: 'T200',
attributes: {
group: 'paint'
}
value: 'T200'
}

@@ -46,0 +43,0 @@ }

245

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

@@ -5,75 +5,39 @@ const color = {

sunken: {
value: 'N100A',
attributes: {
group: 'paint'
}
value: 'N100A'
},
default: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
card: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
overlay: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
selected: {
resting: {
value: 'B100',
attributes: {
group: 'paint'
}
value: 'B100'
},
hover: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}
},
blanket: {
value: 'N500A',
attributes: {
group: 'paint'
}
value: 'N500A'
},
disabled: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
boldBrand: {
resting: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
hover: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
},
pressed: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
}

@@ -83,18 +47,9 @@ },

resting: {
value: 'B100',
attributes: {
group: 'paint'
}
value: 'B100'
},
hover: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}

@@ -104,18 +59,9 @@ },

resting: {
value: 'R700',
attributes: {
group: 'paint'
}
value: 'R700'
},
hover: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
},
pressed: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
}

@@ -125,18 +71,9 @@ },

resting: {
value: 'R100',
attributes: {
group: 'paint'
}
value: 'R100'
},
hover: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
},
pressed: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
}

@@ -146,18 +83,9 @@ },

resting: {
value: 'Y400',
attributes: {
group: 'paint'
}
value: 'Y400'
},
hover: {
value: 'Y500',
attributes: {
group: 'paint'
}
value: 'Y500'
},
pressed: {
value: 'Y600',
attributes: {
group: 'paint'
}
value: 'Y600'
}

@@ -167,18 +95,9 @@ },

resting: {
value: 'Y100',
attributes: {
group: 'paint'
}
value: 'Y100'
},
hover: {
value: 'Y200',
attributes: {
group: 'paint'
}
value: 'Y200'
},
pressed: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
}

@@ -188,18 +107,9 @@ },

resting: {
value: 'G700',
attributes: {
group: 'paint'
}
value: 'G700'
},
hover: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
},
pressed: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
}

@@ -209,18 +119,9 @@ },

resting: {
value: 'G100',
attributes: {
group: 'paint'
}
value: 'G100'
},
hover: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
},
pressed: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
}

@@ -230,18 +131,9 @@ },

resting: {
value: 'P700',
attributes: {
group: 'paint'
}
value: 'P700'
},
hover: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
},
pressed: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
}

@@ -251,18 +143,9 @@ },

resting: {
value: 'P100',
attributes: {
group: 'paint'
}
value: 'P100'
},
hover: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
},
pressed: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
}

@@ -272,18 +155,9 @@ },

resting: {
value: 'N800',
attributes: {
group: 'paint'
}
value: 'N800'
},
hover: {
value: 'N900',
attributes: {
group: 'paint'
}
value: 'N900'
},
pressed: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
}

@@ -293,12 +167,6 @@ },

hover: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
pressed: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
}

@@ -308,18 +176,9 @@ },

resting: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
hover: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
},
pressed: {
value: 'N400A',
attributes: {
group: 'paint'
}
value: 'N400A'
}

@@ -329,12 +188,6 @@ },

resting: {
value: 'N100A',
attributes: {
group: 'paint'
}
value: 'N100A'
},
pressed: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
}

@@ -341,0 +194,0 @@ }

10

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

@@ -5,12 +5,6 @@ const color = {

focus: {
value: 'B500',
attributes: {
group: 'paint'
}
value: 'B500'
},
neutral: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
}

@@ -17,0 +11,0 @@ }

25

dist/es2019/tokens/atlassian-light/color/icon-border.js

@@ -5,30 +5,15 @@ const color = {

brand: {
value: 'B600',
attributes: {
group: 'paint'
}
value: 'B600'
},
danger: {
value: 'R600',
attributes: {
group: 'paint'
}
value: 'R600'
},
warning: {
value: 'O600',
attributes: {
group: 'paint'
}
value: 'O600'
},
success: {
value: 'G600',
attributes: {
group: 'paint'
}
value: 'G600'
},
discovery: {
value: 'P600',
attributes: {
group: 'paint'
}
value: 'P600'
}

@@ -35,0 +20,0 @@ }

10

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

@@ -5,12 +5,6 @@ const color = {

hover: {
value: 'N400A',
attributes: {
group: 'paint'
}
value: 'N400A'
},
pressed: {
value: 'N500A',
attributes: {
group: 'paint'
}
value: 'N500A'
}

@@ -17,0 +11,0 @@ }

70

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

@@ -5,86 +5,44 @@ const color = {

selected: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
highEmphasis: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
},
mediumEmphasis: {
value: 'N800',
attributes: {
group: 'paint'
}
value: 'N800'
},
lowEmphasis: {
value: 'N700',
attributes: {
group: 'paint'
}
value: 'N700'
},
onBold: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
onBoldWarning: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
},
link: {
resting: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
pressed: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
}
},
brand: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
},
warning: {
value: 'O800',
attributes: {
group: 'paint'
}
value: 'O800'
},
danger: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
},
success: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
},
discovery: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
},
disabled: {
value: 'N500',
attributes: {
group: 'paint'
}
value: 'N500'
}

@@ -91,0 +49,0 @@ }

10

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

@@ -20,6 +20,3 @@ const shadow = {

opacity: 0.31
}],
attributes: {
group: 'shadow'
}
}]
},

@@ -43,6 +40,3 @@ overlay: {

opacity: 0.31
}],
attributes: {
group: 'shadow'
}
}]
}

@@ -49,0 +43,0 @@ }

12

dist/es2019/tokens/rename-mapping.js

@@ -20,13 +20,3 @@ /**

*/
const renameMapping = {
'color.accent.blueSubtle': 'color.accent.subtleBlue',
'color.accent.greenSubtle': 'color.accent.subtleGreen',
'color.accent.magentaSubtle': 'color.accent.subtleMagenta',
'color.accent.orangeSubtle': 'color.accent.subtleOrange',
'color.accent.purpleSubtle': 'color.accent.subtlePurple',
'color.accent.redSubtle': 'color.accent.subtleRed',
'color.accent.tealSubtle': 'color.accent.subtleTeal',
'color.background.selected': 'color.background.selected.resting',
'color.border.disabled': 'color.background.disabled'
};
const renameMapping = {};
export default renameMapping;

9

dist/es2019/tokens/token-names.js
// THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
// Re-generate by running `yarn build tokens`.
const tokens = {
'color.accent.boldBlue': '--accent-boldBlue',
'color.accent.boldGreen': '--accent-boldGreen',
'color.accent.boldOrange': '--accent-boldOrange',
'color.accent.boldPurple': '--accent-boldPurple',
'color.accent.boldRed': '--accent-boldRed',
'color.accent.boldTeal': '--accent-boldTeal',
'color.accent.subtleBlue': '--accent-subtleBlue',

@@ -84,4 +90,5 @@ 'color.accent.subtleGreen': '--accent-subtleGreen',

'shadow.card': '--card',
'shadow.overlay': '--overlay'
'shadow.overlay': '--overlay',
'utility.UNSAFE_util.transparent': '--UNSAFE_util-transparent'
};
export default tokens;

2

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

8

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

@@ -111,3 +111,3 @@ // ----------------------------------------------------

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

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

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

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

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

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

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

@@ -180,0 +180,0 @@ console.log("=> ".concat(key, " shadow style has been added!"));

53

dist/esm/tokens/atlassian-dark/color/accent.js
var color = {
color: {
accent: {
boldBlue: {
value: 'B700'
},
boldGreen: {
value: 'G700'
},
boldOrange: {
value: 'O700'
},
boldPurple: {
value: 'P700'
},
boldRed: {
value: 'R700'
},
boldTeal: {
value: 'T700'
},
subtleBlue: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
},
subtleGreen: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
},
subtleMagenta: {
value: 'M900',
attributes: {
group: 'paint'
}
value: 'M900'
},
subtleOrange: {
value: 'O900',
attributes: {
group: 'paint'
}
value: 'O900'
},
subtlePurple: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
},
subtleRed: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
},
subtleTeal: {
value: 'T900',
attributes: {
group: 'paint'
}
value: 'T900'
}

@@ -46,0 +43,0 @@ }

245

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

@@ -5,75 +5,39 @@ var color = {

sunken: {
value: 'DN-100A',
attributes: {
group: 'paint'
}
value: 'DN-100A'
},
default: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
card: {
value: 'DN100',
attributes: {
group: 'paint'
}
value: 'DN100'
},
overlay: {
value: 'DN200',
attributes: {
group: 'paint'
}
value: 'DN200'
},
selected: {
resting: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
hover: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
},
pressed: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
}
},
blanket: {
value: 'DN-100A',
attributes: {
group: 'paint'
}
value: 'DN-100A'
},
disabled: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
boldBrand: {
resting: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
hover: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
pressed: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
}

@@ -83,18 +47,9 @@ },

resting: {
value: 'B1000',
attributes: {
group: 'paint'
}
value: 'B1000'
},
hover: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
},
pressed: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
}

@@ -104,18 +59,9 @@ },

resting: {
value: 'R400',
attributes: {
group: 'paint'
}
value: 'R400'
},
hover: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
},
pressed: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
}

@@ -125,18 +71,9 @@ },

resting: {
value: 'R1000',
attributes: {
group: 'paint'
}
value: 'R1000'
},
hover: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
},
pressed: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
}

@@ -146,18 +83,9 @@ },

resting: {
value: 'Y400',
attributes: {
group: 'paint'
}
value: 'Y400'
},
hover: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
},
pressed: {
value: 'Y200',
attributes: {
group: 'paint'
}
value: 'Y200'
}

@@ -167,18 +95,9 @@ },

resting: {
value: 'Y1000',
attributes: {
group: 'paint'
}
value: 'Y1000'
},
hover: {
value: 'Y900',
attributes: {
group: 'paint'
}
value: 'Y900'
},
pressed: {
value: 'Y800',
attributes: {
group: 'paint'
}
value: 'Y800'
}

@@ -188,18 +107,9 @@ },

resting: {
value: 'G400',
attributes: {
group: 'paint'
}
value: 'G400'
},
hover: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
},
pressed: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
}

@@ -209,18 +119,9 @@ },

resting: {
value: 'G1000',
attributes: {
group: 'paint'
}
value: 'G1000'
},
hover: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
},
pressed: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
}

@@ -230,18 +131,9 @@ },

resting: {
value: 'P400',
attributes: {
group: 'paint'
}
value: 'P400'
},
hover: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
},
pressed: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
}

@@ -251,18 +143,9 @@ },

resting: {
value: 'P1000',
attributes: {
group: 'paint'
}
value: 'P1000'
},
hover: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
},
pressed: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
}

@@ -272,18 +155,9 @@ },

resting: {
value: 'DN800',
attributes: {
group: 'paint'
}
value: 'DN800'
},
hover: {
value: 'DN900',
attributes: {
group: 'paint'
}
value: 'DN900'
},
pressed: {
value: 'DN1000',
attributes: {
group: 'paint'
}
value: 'DN1000'
}

@@ -293,12 +167,6 @@ },

hover: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
pressed: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
}

@@ -308,18 +176,9 @@ },

resting: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
},
hover: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
},
pressed: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
}

@@ -329,12 +188,6 @@ },

resting: {
value: 'DN100A',
attributes: {
group: 'paint'
}
value: 'DN100A'
},
pressed: {
value: 'DN200A',
attributes: {
group: 'paint'
}
value: 'DN200A'
}

@@ -341,0 +194,0 @@ }

10

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

@@ -5,12 +5,6 @@ var color = {

focus: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
neutral: {
value: 'DN300A',
attributes: {
group: 'paint'
}
value: 'DN300A'
}

@@ -17,0 +11,0 @@ }

25

dist/esm/tokens/atlassian-dark/color/icon-border.js

@@ -5,30 +5,15 @@ var color = {

brand: {
value: 'B500',
attributes: {
group: 'paint'
}
value: 'B500'
},
danger: {
value: 'R500',
attributes: {
group: 'paint'
}
value: 'R500'
},
warning: {
value: 'Y500',
attributes: {
group: 'paint'
}
value: 'Y500'
},
success: {
value: 'G500',
attributes: {
group: 'paint'
}
value: 'G500'
},
discovery: {
value: 'P500',
attributes: {
group: 'paint'
}
value: 'P500'
}

@@ -35,0 +20,0 @@ }

10

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

@@ -5,12 +5,6 @@ var color = {

hover: {
value: 'DN400A',
attributes: {
group: 'paint'
}
value: 'DN400A'
},
pressed: {
value: 'DN500A',
attributes: {
group: 'paint'
}
value: 'DN500A'
}

@@ -17,0 +11,0 @@ }

70

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

@@ -5,86 +5,44 @@ var color = {

selected: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
highEmphasis: {
value: 'DN1000',
attributes: {
group: 'paint'
}
value: 'DN1000'
},
mediumEmphasis: {
value: 'DN800',
attributes: {
group: 'paint'
}
value: 'DN800'
},
lowEmphasis: {
value: 'DN700',
attributes: {
group: 'paint'
}
value: 'DN700'
},
onBold: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
onBoldWarning: {
value: 'DN0',
attributes: {
group: 'paint'
}
value: 'DN0'
},
link: {
resting: {
value: 'B400',
attributes: {
group: 'paint'
}
value: 'B400'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}
},
brand: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
},
warning: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
},
danger: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
},
success: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
},
discovery: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
},
disabled: {
value: 'DN500',
attributes: {
group: 'paint'
}
value: 'DN500'
}

@@ -91,0 +49,0 @@ }

10

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

@@ -22,6 +22,3 @@ var shadow = {

opacity: 0.5
}],
attributes: {
group: 'shadow'
}
}]
},

@@ -57,6 +54,3 @@ overlay: {

opacity: 0.5
}],
attributes: {
group: 'shadow'
}
}]
}

@@ -63,0 +57,0 @@ }

53

dist/esm/tokens/atlassian-light/color/accent.js
var color = {
color: {
accent: {
boldBlue: {
value: 'B400'
},
boldGreen: {
value: 'G400'
},
boldOrange: {
value: 'O400'
},
boldPurple: {
value: 'P400'
},
boldRed: {
value: 'R400'
},
boldTeal: {
value: 'T400'
},
subtleBlue: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
subtleGreen: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
},
subtleMagenta: {
value: 'M200',
attributes: {
group: 'paint'
}
value: 'M200'
},
subtleOrange: {
value: 'O200',
attributes: {
group: 'paint'
}
value: 'O200'
},
subtlePurple: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
},
subtleRed: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
},
subtleTeal: {
value: 'T200',
attributes: {
group: 'paint'
}
value: 'T200'
}

@@ -46,0 +43,0 @@ }

245

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

@@ -5,75 +5,39 @@ var color = {

sunken: {
value: 'N100A',
attributes: {
group: 'paint'
}
value: 'N100A'
},
default: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
card: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
overlay: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
selected: {
resting: {
value: 'B100',
attributes: {
group: 'paint'
}
value: 'B100'
},
hover: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}
},
blanket: {
value: 'N500A',
attributes: {
group: 'paint'
}
value: 'N500A'
},
disabled: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
boldBrand: {
resting: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
hover: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
},
pressed: {
value: 'B900',
attributes: {
group: 'paint'
}
value: 'B900'
}

@@ -83,18 +47,9 @@ },

resting: {
value: 'B100',
attributes: {
group: 'paint'
}
value: 'B100'
},
hover: {
value: 'B200',
attributes: {
group: 'paint'
}
value: 'B200'
},
pressed: {
value: 'B300',
attributes: {
group: 'paint'
}
value: 'B300'
}

@@ -104,18 +59,9 @@ },

resting: {
value: 'R700',
attributes: {
group: 'paint'
}
value: 'R700'
},
hover: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
},
pressed: {
value: 'R900',
attributes: {
group: 'paint'
}
value: 'R900'
}

@@ -125,18 +71,9 @@ },

resting: {
value: 'R100',
attributes: {
group: 'paint'
}
value: 'R100'
},
hover: {
value: 'R200',
attributes: {
group: 'paint'
}
value: 'R200'
},
pressed: {
value: 'R300',
attributes: {
group: 'paint'
}
value: 'R300'
}

@@ -146,18 +83,9 @@ },

resting: {
value: 'Y400',
attributes: {
group: 'paint'
}
value: 'Y400'
},
hover: {
value: 'Y500',
attributes: {
group: 'paint'
}
value: 'Y500'
},
pressed: {
value: 'Y600',
attributes: {
group: 'paint'
}
value: 'Y600'
}

@@ -167,18 +95,9 @@ },

resting: {
value: 'Y100',
attributes: {
group: 'paint'
}
value: 'Y100'
},
hover: {
value: 'Y200',
attributes: {
group: 'paint'
}
value: 'Y200'
},
pressed: {
value: 'Y300',
attributes: {
group: 'paint'
}
value: 'Y300'
}

@@ -188,18 +107,9 @@ },

resting: {
value: 'G700',
attributes: {
group: 'paint'
}
value: 'G700'
},
hover: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
},
pressed: {
value: 'G900',
attributes: {
group: 'paint'
}
value: 'G900'
}

@@ -209,18 +119,9 @@ },

resting: {
value: 'G100',
attributes: {
group: 'paint'
}
value: 'G100'
},
hover: {
value: 'G200',
attributes: {
group: 'paint'
}
value: 'G200'
},
pressed: {
value: 'G300',
attributes: {
group: 'paint'
}
value: 'G300'
}

@@ -230,18 +131,9 @@ },

resting: {
value: 'P700',
attributes: {
group: 'paint'
}
value: 'P700'
},
hover: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
},
pressed: {
value: 'P900',
attributes: {
group: 'paint'
}
value: 'P900'
}

@@ -251,18 +143,9 @@ },

resting: {
value: 'P100',
attributes: {
group: 'paint'
}
value: 'P100'
},
hover: {
value: 'P200',
attributes: {
group: 'paint'
}
value: 'P200'
},
pressed: {
value: 'P300',
attributes: {
group: 'paint'
}
value: 'P300'
}

@@ -272,18 +155,9 @@ },

resting: {
value: 'N800',
attributes: {
group: 'paint'
}
value: 'N800'
},
hover: {
value: 'N900',
attributes: {
group: 'paint'
}
value: 'N900'
},
pressed: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
}

@@ -293,12 +167,6 @@ },

hover: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
pressed: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
}

@@ -308,18 +176,9 @@ },

resting: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
},
hover: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
},
pressed: {
value: 'N400A',
attributes: {
group: 'paint'
}
value: 'N400A'
}

@@ -329,12 +188,6 @@ },

resting: {
value: 'N100A',
attributes: {
group: 'paint'
}
value: 'N100A'
},
pressed: {
value: 'N200A',
attributes: {
group: 'paint'
}
value: 'N200A'
}

@@ -341,0 +194,0 @@ }

10

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

@@ -5,12 +5,6 @@ var color = {

focus: {
value: 'B500',
attributes: {
group: 'paint'
}
value: 'B500'
},
neutral: {
value: 'N300A',
attributes: {
group: 'paint'
}
value: 'N300A'
}

@@ -17,0 +11,0 @@ }

25

dist/esm/tokens/atlassian-light/color/icon-border.js

@@ -5,30 +5,15 @@ var color = {

brand: {
value: 'B600',
attributes: {
group: 'paint'
}
value: 'B600'
},
danger: {
value: 'R600',
attributes: {
group: 'paint'
}
value: 'R600'
},
warning: {
value: 'O600',
attributes: {
group: 'paint'
}
value: 'O600'
},
success: {
value: 'G600',
attributes: {
group: 'paint'
}
value: 'G600'
},
discovery: {
value: 'P600',
attributes: {
group: 'paint'
}
value: 'P600'
}

@@ -35,0 +20,0 @@ }

10

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

@@ -5,12 +5,6 @@ var color = {

hover: {
value: 'N400A',
attributes: {
group: 'paint'
}
value: 'N400A'
},
pressed: {
value: 'N500A',
attributes: {
group: 'paint'
}
value: 'N500A'
}

@@ -17,0 +11,0 @@ }

70

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

@@ -5,86 +5,44 @@ var color = {

selected: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
highEmphasis: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
},
mediumEmphasis: {
value: 'N800',
attributes: {
group: 'paint'
}
value: 'N800'
},
lowEmphasis: {
value: 'N700',
attributes: {
group: 'paint'
}
value: 'N700'
},
onBold: {
value: 'N0',
attributes: {
group: 'paint'
}
value: 'N0'
},
onBoldWarning: {
value: 'N1000',
attributes: {
group: 'paint'
}
value: 'N1000'
},
link: {
resting: {
value: 'B700',
attributes: {
group: 'paint'
}
value: 'B700'
},
pressed: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
}
},
brand: {
value: 'B800',
attributes: {
group: 'paint'
}
value: 'B800'
},
warning: {
value: 'O800',
attributes: {
group: 'paint'
}
value: 'O800'
},
danger: {
value: 'R800',
attributes: {
group: 'paint'
}
value: 'R800'
},
success: {
value: 'G800',
attributes: {
group: 'paint'
}
value: 'G800'
},
discovery: {
value: 'P800',
attributes: {
group: 'paint'
}
value: 'P800'
},
disabled: {
value: 'N500',
attributes: {
group: 'paint'
}
value: 'N500'
}

@@ -91,0 +49,0 @@ }

10

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

@@ -20,6 +20,3 @@ var shadow = {

opacity: 0.31
}],
attributes: {
group: 'shadow'
}
}]
},

@@ -43,6 +40,3 @@ overlay: {

opacity: 0.31
}],
attributes: {
group: 'shadow'
}
}]
}

@@ -49,0 +43,0 @@ }

12

dist/esm/tokens/rename-mapping.js

@@ -20,13 +20,3 @@ /**

*/
var renameMapping = {
'color.accent.blueSubtle': 'color.accent.subtleBlue',
'color.accent.greenSubtle': 'color.accent.subtleGreen',
'color.accent.magentaSubtle': 'color.accent.subtleMagenta',
'color.accent.orangeSubtle': 'color.accent.subtleOrange',
'color.accent.purpleSubtle': 'color.accent.subtlePurple',
'color.accent.redSubtle': 'color.accent.subtleRed',
'color.accent.tealSubtle': 'color.accent.subtleTeal',
'color.background.selected': 'color.background.selected.resting',
'color.border.disabled': 'color.background.disabled'
};
var renameMapping = {};
export default renameMapping;

9

dist/esm/tokens/token-names.js
// THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
// Re-generate by running `yarn build tokens`.
var tokens = {
'color.accent.boldBlue': '--accent-boldBlue',
'color.accent.boldGreen': '--accent-boldGreen',
'color.accent.boldOrange': '--accent-boldOrange',
'color.accent.boldPurple': '--accent-boldPurple',
'color.accent.boldRed': '--accent-boldRed',
'color.accent.boldTeal': '--accent-boldTeal',
'color.accent.subtleBlue': '--accent-subtleBlue',

@@ -84,4 +90,5 @@ 'color.accent.subtleGreen': '--accent-subtleGreen',

'shadow.card': '--card',
'shadow.overlay': '--overlay'
'shadow.overlay': '--overlay',
'utility.UNSAFE_util.transparent': '--UNSAFE_util-transparent'
};
export default tokens;

2

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

4

dist/types/tokens/atlassian-dark/color/accent.d.ts

@@ -1,3 +0,3 @@

import type { AccentColorTokenSchema } from '../../../types';
declare const color: AccentColorTokenSchema;
import type { AccentColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<AccentColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-dark/color/background.d.ts

@@ -1,3 +0,3 @@

import type { BackgroundColorTokenSchema } from '../../../types';
declare const color: BackgroundColorTokenSchema;
import type { BackgroundColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<BackgroundColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-dark/color/border.d.ts

@@ -1,3 +0,3 @@

import type { BorderColorTokenSchema } from '../../../types';
declare const color: BorderColorTokenSchema;
import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<BorderColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-dark/color/icon-border.d.ts

@@ -1,3 +0,3 @@

import type { IconBorderColorTokenSchema } from '../../../types';
declare const color: IconBorderColorTokenSchema;
import type { IconBorderColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<IconBorderColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-dark/color/overlay.d.ts

@@ -1,3 +0,3 @@

import type { OverlayColorTokenSchema } from '../../../types';
declare const color: OverlayColorTokenSchema;
import type { OverlayColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<OverlayColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-dark/color/text.d.ts

@@ -1,3 +0,3 @@

import type { TextColorTokenSchema } from '../../../types';
declare const color: TextColorTokenSchema;
import type { TextColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<TextColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-dark/shadow/shadow.d.ts

@@ -1,3 +0,3 @@

import type { ShadowTokenSchema } from '../../../types';
declare const shadow: ShadowTokenSchema;
import type { ShadowTokenSchema, ValueSchema } from '../../../types';
declare const shadow: ValueSchema<ShadowTokenSchema>;
export default shadow;

4

dist/types/tokens/atlassian-light/color/accent.d.ts

@@ -1,3 +0,3 @@

import type { AccentColorTokenSchema } from '../../../types';
declare const color: AccentColorTokenSchema;
import type { AccentColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<AccentColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-light/color/background.d.ts

@@ -1,3 +0,3 @@

import type { BackgroundColorTokenSchema } from '../../../types';
declare const color: BackgroundColorTokenSchema;
import type { BackgroundColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<BackgroundColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-light/color/border.d.ts

@@ -1,3 +0,3 @@

import type { BorderColorTokenSchema } from '../../../types';
declare const color: BorderColorTokenSchema;
import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<BorderColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-light/color/icon-border.d.ts

@@ -1,3 +0,3 @@

import type { IconBorderColorTokenSchema } from '../../../types';
declare const color: IconBorderColorTokenSchema;
import type { IconBorderColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<IconBorderColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-light/color/overlay.d.ts

@@ -1,3 +0,3 @@

import type { OverlayColorTokenSchema } from '../../../types';
declare const color: OverlayColorTokenSchema;
import type { OverlayColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<OverlayColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-light/color/text.d.ts

@@ -1,3 +0,3 @@

import type { TextColorTokenSchema } from '../../../types';
declare const color: TextColorTokenSchema;
import type { TextColorTokenSchema, ValueSchema } from '../../../types';
declare const color: ValueSchema<TextColorTokenSchema>;
export default color;

4

dist/types/tokens/atlassian-light/shadow/shadow.d.ts

@@ -1,3 +0,3 @@

import type { ShadowTokenSchema } from '../../../types';
declare const shadow: ShadowTokenSchema;
import type { ShadowTokenSchema, ValueSchema } from '../../../types';
declare const shadow: ValueSchema<ShadowTokenSchema>;
export default shadow;

14

dist/types/tokens/token-names.d.ts
declare const tokens: {
readonly 'color.accent.boldBlue': "--accent-boldBlue";
readonly 'color.accent.boldGreen': "--accent-boldGreen";
readonly 'color.accent.boldOrange': "--accent-boldOrange";
readonly 'color.accent.boldPurple': "--accent-boldPurple";
readonly 'color.accent.boldRed': "--accent-boldRed";
readonly 'color.accent.boldTeal': "--accent-boldTeal";
readonly 'color.accent.subtleBlue': "--accent-subtleBlue";

@@ -83,4 +89,11 @@ readonly 'color.accent.subtleGreen': "--accent-subtleGreen";

readonly 'shadow.overlay': "--overlay";
readonly 'utility.UNSAFE_util.transparent': "--UNSAFE_util-transparent";
};
export declare type CSSTokenMap = {
'color.accent.boldBlue': 'var(--accent-boldBlue)';
'color.accent.boldGreen': 'var(--accent-boldGreen)';
'color.accent.boldOrange': 'var(--accent-boldOrange)';
'color.accent.boldPurple': 'var(--accent-boldPurple)';
'color.accent.boldRed': 'var(--accent-boldRed)';
'color.accent.boldTeal': 'var(--accent-boldTeal)';
'color.accent.subtleBlue': 'var(--accent-subtleBlue)';

@@ -167,4 +180,5 @@ 'color.accent.subtleGreen': 'var(--accent-subtleGreen)';

'shadow.overlay': 'var(--overlay)';
'utility.UNSAFE_util.transparent': 'var(--UNSAFE_util-transparent)';
};
export declare type CSSToken = CSSTokenMap[keyof CSSTokenMap];
export default tokens;

26

dist/types/types.d.ts

@@ -1,6 +0,6 @@

export interface Token<TValue, TGroup extends string> {
export interface Token<TValue, Group extends string> {
value: TValue;
comment?: string;
attributes: {
group: TGroup;
group?: Group;
description?: string;
};

@@ -15,2 +15,8 @@ }

};
export declare type ValueSchema<Schema extends object> = {
[Key in keyof Schema]: ValueSchema<Omit<Schema[Key], 'attributes'>>;
};
export declare type AttributeSchema<Schema extends object> = {
[Key in keyof Schema]: AttributeSchema<Omit<Schema[Key], 'value'>>;
};
export declare type ShadowToken<Value extends string = ColorPalette> = Token<Array<{

@@ -27,2 +33,3 @@ color: Value;

}>, 'shadow'>;
export declare type RawToken = Token<string, 'raw'>;
export interface PaletteColorTokenSchema {

@@ -278,2 +285,8 @@ color: {

accent: {
boldBlue: PaintToken;
boldGreen: PaintToken;
boldOrange: PaintToken;
boldPurple: PaintToken;
boldRed: PaintToken;
boldTeal: PaintToken;
subtleBlue: PaintToken;

@@ -303,3 +316,8 @@ subtleRed: PaintToken;

}
export declare type ColorTokenSchema = BackgroundColorTokenSchema & BorderColorTokenSchema & IconBorderColorTokenSchema & TextColorTokenSchema & AccentColorTokenSchema;
export interface UtilTokenSchema {
UNSAFE_util: {
transparent: RawToken;
};
}
export declare type ColorTokenSchema = BackgroundColorTokenSchema & BorderColorTokenSchema & IconBorderColorTokenSchema & TextColorTokenSchema & AccentColorTokenSchema & UtilTokenSchema;
export declare type TokenSchema = PaletteColorTokenSchema & ColorTokenSchema & ShadowTokenSchema;

5

package.json
{
"name": "@atlaskit/tokens",
"version": "0.1.0",
"version": "0.1.1",
"author": "Atlassian Pty Ltd",
"description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
"license": "Apache-2.0",

@@ -11,3 +12,3 @@ "publishConfig": {

"team": "Design System Team",
"releaseModel": "continuous"
"releaseModel": "scheduled"
},

@@ -14,0 +15,0 @@ "repository": "https://bitbucket.org/atlassian/atlassian-frontend",

45

README.md
# Tokens
This is an internal package with common functionality used in the Atlassian Design System Team.
This package comes with no support and semver guarantees,
your app will break if you use this directly!
> ⚠️ This package is under development and comes with no semver guarantees,
> your app will break if you use this directly.
Tokens are a single source of truth to name and store Atlassian design decisions.
## Installation
```sh
yarn add @atlaskit/tokens
```
## Usage
### Setup your environment
Before continuing ensure the CSS themes are installed,
depending on your bundler configuration may differ.
```tsx
import '@atlaskit/tokens/css/atlassian-light.css';
import '@atlaskit/tokens/css/atlassian-dark.css';
```
### Token
Use the `token` function to get a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for the named token.
```tsx
import { token } from '@atlaskit/tokens';
token('color.background.default');
```
### Set global theme
Change the global theme during runtime.
```tsx
import { setGlobalTheme } from '@atlaskit/tokens';
setGlobalTheme('light');
```
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

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