@atlaskit/tokens - npm Package Compare versions

Comparing version 0.0.18 to 0.1.0

CHANGELOG.md

 # @atlaskit/tokens
 
+## 0.1.0
+
+### Minor Changes
+
+- [`642f26d0f0c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/642f26d0f0c) - Adds rename-mapping as an entry point for @atlaskit/tokens. rename-mapping is an object mapping old token names to their new replacements
+
+### Patch Changes
+
+- [`c784665d01d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c784665d01d) - Removes `color.border.overlay` token and replaces it with a third shadow inside `shadow.overlay`.
+- [`76b718b72e1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76b718b72e1) - [ux] Fixes incorrect values in the palette and token definitions.
+- [`855d6afb3d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/855d6afb3d3) - Parsing of alpha hex in the Figma synchronizer is fixed.
+- [`8d0cb37bfe0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d0cb37bfe0) - Updates: `text.link.pressed` values to `B800/B300`
+  Removes: `text.link.hover`
+  Combines: `border.disabled` and `background.disabled` → `background.disabled`
+  Updates: `background.disabled` token value to `N/DN200A`
+  Renames: All accents from `color.accent.blueSubtle` → `color.accent.subtleBlue`
+  Renames: `background.selected` to `background.selected.resting`
+  Adds: `background.selected.hover`, `background.selected.pressed`
+- [`53749f08286`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53749f08286) - Adds tokens:
+
+  - `color.overlay.hover`
+  - `color.overlay.pressed`
+
 ## 0.0.18
@@ -4,0 +27,0 @@

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

@@ -21,2 +21,8 @@ "use strict";
 /* eslint-disable no-console */
+function hexToPercent(hex) {
+  var percent = parseInt(hex, 16) * 100; // Ensure the value is capped between 0 and 100
+
+  return Math.max(0, Math.min(Math.round(percent / 255), 100));
+}
+
 function createPaint(hex) {
@@ -42,3 +48,3 @@ var hexValue = hex;
   var alphaHex = hexValue.slice(7, 9);
-  var opacity = alphaHex ? parseInt(alphaHex, 16) : 100;
+  var opacity = alphaHex ? hexToPercent(alphaHex) : 100;
   return {
@@ -74,3 +80,3 @@ type: 'SOLID',
       spread: shadow.spread,
-      type: 'DROP_SHADOW',
+      type: shadow.inset ? 'INNER_SHADOW' : 'DROP_SHADOW',
       visible: true
@@ -187,4 +193,5 @@ };
     synchronizeFigmaTokens: synchronizeFigmaTokens,
-    createPaint: createPaint
+    createPaint: createPaint,
+    createEffects: createEffects
   };
 }

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

@@ -10,3 +10,3 @@ "use strict";
     accent: {
-      blueSubtle: {
+      subtleBlue: {
         value: 'B900',
@@ -17,3 +17,3 @@ attributes: {
       },
-      greenSubtle: {
+      subtleGreen: {
         value: 'G900',
@@ -24,3 +24,3 @@ attributes: {
       },
-      magentaSubtle: {
+      subtleMagenta: {
         value: 'M900',
@@ -31,3 +31,3 @@ attributes: {
       },
-      orangeSubtle: {
+      subtleOrange: {
         value: 'O900',
@@ -38,3 +38,3 @@ attributes: {
       },
-      purpleSubtle: {
+      subtlePurple: {
         value: 'P900',
@@ -45,3 +45,3 @@ attributes: {
       },
-      redSubtle: {
+      subtleRed: {
         value: 'R900',
@@ -52,3 +52,3 @@ attributes: {
       },
-      tealSubtle: {
+      subtleTeal: {
         value: 'T900',
@@ -55,0 +55,0 @@ attributes: {

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

@@ -35,5 +35,19 @@ "use strict";
       selected: {
-        value: 'DN200A',
-        attributes: {
-          group: 'paint'
+        resting: {
+          value: 'DN200A',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        hover: {
+          value: 'DN300A',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        pressed: {
+          value: 'DN400A',
+          attributes: {
+            group: 'paint'
+          }
         }
@@ -40,0 +54,0 @@ },

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

@@ -21,14 +21,2 @@ "use strict";
         }
-      },
-      disabled: {
-        value: 'N100A',
-        attributes: {
-          group: 'paint'
-        }
-      },
-      overlay: {
-        value: 'DN100A',
-        attributes: {
-          group: 'paint'
-        }
       }
@@ -35,0 +23,0 @@ }

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

@@ -53,3 +53,3 @@ "use strict";
         },
-        hover: {
+        pressed: {
           value: 'B300',
@@ -59,8 +59,2 @@ attributes: {
           }
-        },
-        pressed: {
-          value: 'B200',
-          attributes: {
-            group: 'paint'
-          }
         }
@@ -67,0 +61,0 @@ },

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

@@ -14,6 +14,7 @@ "use strict";
           x: 0,
-          y: 0
+          y: 1
         },
-        color: 'DN100',
-        opacity: 0.36
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.5
       }, {
@@ -23,5 +24,6 @@ radius: 1,
           x: 0,
-          y: 1
+          y: 0
         },
-        color: 'DN100',
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
         opacity: 0.5
@@ -35,3 +37,5 @@ }],
       value: [{
-        radius: 1,
+        radius: 0,
+        spread: 1,
+        color: 'DN100A',
         offset: {
@@ -41,4 +45,4 @@ x: 0,
         },
-        color: 'DN0',
-        opacity: 0.5
+        opacity: 0.04,
+        inset: true
       }, {
@@ -50,3 +54,13 @@ radius: 12,
         },
-        color: 'DN0',
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.36
+      }, {
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 0
+        },
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
         opacity: 0.5
@@ -53,0 +67,0 @@ }],

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

@@ -10,3 +10,3 @@ "use strict";
     accent: {
-      blueSubtle: {
+      subtleBlue: {
         value: 'B200',
@@ -17,3 +17,3 @@ attributes: {
       },
-      greenSubtle: {
+      subtleGreen: {
         value: 'G200',
@@ -24,3 +24,3 @@ attributes: {
       },
-      magentaSubtle: {
+      subtleMagenta: {
         value: 'M200',
@@ -31,3 +31,3 @@ attributes: {
       },
-      orangeSubtle: {
+      subtleOrange: {
         value: 'O200',
@@ -38,3 +38,3 @@ attributes: {
       },
-      purpleSubtle: {
+      subtlePurple: {
         value: 'P200',
@@ -45,3 +45,3 @@ attributes: {
       },
-      redSubtle: {
+      subtleRed: {
         value: 'R200',
@@ -52,3 +52,3 @@ attributes: {
       },
-      tealSubtle: {
+      subtleTeal: {
         value: 'T200',
@@ -55,0 +55,0 @@ attributes: {

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

@@ -35,5 +35,19 @@ "use strict";
       selected: {
-        value: 'B100',
-        attributes: {
-          group: 'paint'
+        resting: {
+          value: 'B100',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        hover: {
+          value: 'B200',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        pressed: {
+          value: 'B300',
+          attributes: {
+            group: 'paint'
+          }
         }
@@ -40,0 +54,0 @@ },

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

@@ -21,14 +21,2 @@ "use strict";
         }
-      },
-      disabled: {
-        value: 'N100A',
-        attributes: {
-          group: 'paint'
-        }
-      },
-      overlay: {
-        value: 'N0',
-        attributes: {
-          group: 'paint'
-        }
       }
@@ -35,0 +23,0 @@ }

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

@@ -53,3 +53,3 @@ "use strict";
         },
-        hover: {
+        pressed: {
           value: 'B800',
@@ -59,8 +59,2 @@ attributes: {
           }
-        },
-        pressed: {
-          value: 'B900',
-          attributes: {
-            group: 'paint'
-          }
         }
@@ -67,0 +61,0 @@ },

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

@@ -14,6 +14,6 @@ "use strict";
           x: 0,
-          y: 0
+          y: 1
         },
         color: 'N1100',
-        opacity: 0.3
+        opacity: 0.25
       }, {
@@ -23,6 +23,6 @@ radius: 1,
           x: 0,
-          y: 1
+          y: 0
         },
         color: 'N1100',
-        opacity: 0.25
+        opacity: 0.31
       }],
@@ -35,17 +35,17 @@ attributes: {
       value: [{
-        radius: 1,
+        radius: 12,
         offset: {
           x: 0,
-          y: 0
+          y: 8
         },
         color: 'N1100',
-        opacity: 0.3
+        opacity: 0.15
       }, {
-        radius: 12,
+        radius: 1,
         offset: {
           x: 0,
-          y: 8
+          y: 0
         },
         color: 'N1100',
-        opacity: 0.15
+        opacity: 0.31
       }],
@@ -52,0 +52,0 @@ attributes: {

dist/cjs/tokens/palette.js

@@ -571,3 +571,4 @@ "use strict";
       'DN-100A': {
-        value: '#03040421',
+        // #030404 33%
+        value: '#03040454',
         attributes: {
@@ -593,3 +594,4 @@ group: 'paint',
       DN100A: {
-        value: '#BCD6F004',
+        // #BCD6F0 4%
+        value: '#BCD6F00A',
         attributes: {
@@ -608,3 +610,4 @@ group: 'paint',
       DN200A: {
-        value: '#A1BDD908',
+        // #A1BDD9 8%
+        value: '#A1BDD914',
         attributes: {
@@ -623,3 +626,4 @@ group: 'paint',
       DN300A: {
-        value: '#A6C5E210',
+        // #A6C5E2 16%
+        value: '#A6C5E229',
         attributes: {
@@ -638,3 +642,4 @@ group: 'paint',
       DN400A: {
-        value: '#BFDBF81C',
+        // #BFDBF8 28%
+        value: '#BFDBF847',
         attributes: {
@@ -653,3 +658,4 @@ group: 'paint',
       DN500A: {
-        value: '#A3C0DB30',
+        // #A3C0DB 48%
+        value: '#A3C0DB7A',
         attributes: {
@@ -667,9 +673,2 @@ group: 'paint',
       },
-      DN600A: {
-        value: '#BDD9F538',
-        attributes: {
-          group: 'paint',
-          isPalette: true
-        }
-      },
       DN700: {
@@ -725,3 +724,4 @@ value: '#8696A7',
       N100A: {
-        value: '#091E4204',
+        // #091E42 3%
+        value: '#091E4208',
         attributes: {
@@ -740,3 +740,4 @@ group: 'paint',
       N200A: {
-        value: '#091E4206',
+        // #091E42 6%
+        value: '#091E420F',
         attributes: {
@@ -755,3 +756,4 @@ group: 'paint',
       N300A: {
-        value: '#091E420E',
+        // #091E42 14%
+        value: '#091E4224',
         attributes: {
@@ -770,3 +772,4 @@ group: 'paint',
       N400A: {
-        value: '#091E421F',
+        // #091E42 31%
+        value: '#091E424F',
         attributes: {
@@ -785,3 +788,4 @@ group: 'paint',
       N500A: {
-        value: '#091E4230',
+        // #091E42 48%
+        value: '#091E427A',
         attributes: {
@@ -788,0 +792,0 @@ group: 'paint',

dist/cjs/tokens/rename-mapping.js

@@ -28,82 +28,13 @@ "use strict";
 var renameMapping = {
-  'color.accentBlueSubtle': 'color.accent.blueSubtle',
-  'color.accentGreenSubtle': 'color.accent.greenSubtle',
-  'color.accentMagentaSubtle': 'color.accent.magentaSubtle',
-  'color.accentOrangeSubtle': 'color.accent.orangeSubtle',
-  'color.accentPurpleSubtle': 'color.accent.purpleSubtle',
-  'color.accentRedSubtle': 'color.accent.redSubtle',
-  'color.accentTealSubtle': 'color.accent.tealSubtle',
-  'color.backgroundSunken': 'color.background.sunken',
-  'color.backgroundDefault': 'color.background.default',
-  'color.backgroundCard': 'color.background.card',
-  'color.backgroundOverlay': 'color.background.overlay',
-  'color.backgroundSelected': 'color.background.selected',
-  'color.backgroundBlanket': 'color.background.blanket',
-  'color.backgroundDisabled': 'color.background.disabled',
-  'color.backgroundBoldBrand.resting': 'color.background.boldBrand.resting',
-  'color.backgroundBoldBrand.hover': 'color.background.boldBrand.hover',
-  'color.backgroundBoldBrand.pressed': 'color.background.boldBrand.pressed',
-  'color.backgroundSubtleBrand.resting': 'color.background.subtleBrand.resting',
-  'color.backgroundSubtleBrand.hover': 'color.background.subtleBrand.hover',
-  'color.backgroundSubtleBrand.pressed': 'color.background.subtleBrand.pressed',
-  'color.backgroundBoldDanger.resting': 'color.background.boldDanger.resting',
-  'color.backgroundBoldDanger.hover': 'color.background.boldDanger.hover',
-  'color.backgroundBoldDanger.pressed': 'color.background.boldDanger.pressed',
-  'color.backgroundSubtleDanger.resting': 'color.background.subtleDanger.resting',
-  'color.backgroundSubtleDanger.hover': 'color.background.subtleDanger.hover',
-  'color.backgroundSubtleDanger.pressed': 'color.background.subtleDanger.pressed',
-  'color.backgroundBoldWarning.resting': 'color.background.boldWarning.resting',
-  'color.backgroundBoldWarning.hover': 'color.background.boldWarning.hover',
-  'color.backgroundBoldWarning.pressed': 'color.background.boldWarning.pressed',
-  'color.backgroundSubtleWarning.resting': 'color.background.subtleWarning.resting',
-  'color.backgroundSubtleWarning.hover': 'color.background.subtleWarning.hover',
-  'color.backgroundSubtleWarning.pressed': 'color.background.subtleWarning.pressed',
-  'color.backgroundBoldSuccess.resting': 'color.background.boldSuccess.resting',
-  'color.backgroundBoldSuccess.hover': 'color.background.boldSuccess.hover',
-  'color.backgroundBoldSuccess.pressed': 'color.background.boldSuccess.pressed',
-  'color.backgroundSubtleSuccess.resting': 'color.background.subtleSuccess.resting',
-  'color.backgroundSubtleSuccess.hover': 'color.background.subtleSuccess.hover',
-  'color.backgroundSubtleSuccess.pressed': 'color.background.subtleSuccess.pressed',
-  'color.backgroundBoldDiscovery.resting': 'color.background.boldDiscovery.resting',
-  'color.backgroundBoldDiscovery.hover': 'color.background.boldDiscovery.hover',
-  'color.backgroundBoldDiscovery.pressed': 'color.background.boldDiscovery.pressed',
-  'color.backgroundSubtleDiscovery.resting': 'color.background.subtleDiscovery.resting',
-  'color.backgroundSubtleDiscovery.hover': 'color.background.subtleDiscovery.hover',
-  'color.backgroundSubtleDiscovery.pressed': 'color.background.subtleDiscovery.pressed',
-  'color.backgroundBoldNeutral.resting': 'color.background.boldNeutral.resting',
-  'color.backgroundBoldNeutral.hover': 'color.background.boldNeutral.hover',
-  'color.backgroundBoldNeutral.pressed': 'color.background.boldNeutral.pressed',
-  'color.backgroundTransparentNeutral.hover': 'color.background.transparentNeutral.hover',
-  'color.backgroundTransparentNeutral.pressed': 'color.background.transparentNeutral.pressed',
-  'color.backgroundSubtleNeutral.resting': 'color.background.subtleNeutral.resting',
-  'color.backgroundSubtleNeutral.hover': 'color.background.subtleNeutral.hover',
-  'color.backgroundSubtleNeutral.pressed': 'color.background.subtleNeutral.pressed',
-  'color.backgroundSubtleBorderedNeutral.resting': 'color.background.subtleBorderedNeutral.resting',
-  'color.backgroundSubtleBorderedNeutral.pressed': 'color.background.subtleBorderedNeutral.pressed',
-  'color.borderFocus': 'color.border.focus',
-  'color.borderTextSelected': 'color.text.selected',
-  'color.borderNeutral': 'color.border.neutral',
-  'color.borderDisabled': 'color.border.disabled',
-  'color.borderOverlay': 'color.border.overlay',
-  'color.iconBorderBrand': 'color.iconBorder.brand',
-  'color.iconBorderDanger': 'color.iconBorder.danger',
-  'color.iconBorderWarning': 'color.iconBorder.warning',
-  'color.iconBorderSuccess': 'color.iconBorder.success',
-  'color.iconBorderDiscovery': 'color.iconBorder.discovery',
-  'color.textHighEmphasis': 'color.text.highEmphasis',
-  'color.textMediumEmphasis': 'color.text.mediumEmphasis',
-  'color.textLowEmphasis': 'color.text.lowEmphasis',
-  'color.textOnBold': 'color.text.onBold',
-  'color.textOnBoldWarning': 'color.text.onBoldWarning',
-  'color.textLink.resting': 'color.text.link.resting',
-  'color.textLink.hover': 'color.text.link.hover',
-  'color.textLink.pressed': 'color.text.link.pressed',
-  'color.textBrand': 'color.text.brand',
-  'color.textWarning': 'color.text.warning',
-  'color.textDanger': 'color.text.danger',
-  'color.textSuccess': 'color.text.success',
-  'color.textDiscovery': 'color.text.discovery',
-  'color.textDisabled': 'color.text.disabled'
+  '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 _default = renameMapping;
 exports.default = _default;

dist/cjs/tokens/token-names.js

@@ -10,9 +10,9 @@ "use strict";
 var tokens = {
-  'color.accent.blueSubtle': '--accent-blueSubtle',
-  'color.accent.greenSubtle': '--accent-greenSubtle',
-  'color.accent.magentaSubtle': '--accent-magentaSubtle',
-  'color.accent.orangeSubtle': '--accent-orangeSubtle',
-  'color.accent.purpleSubtle': '--accent-purpleSubtle',
-  'color.accent.redSubtle': '--accent-redSubtle',
-  'color.accent.tealSubtle': '--accent-tealSubtle',
+  'color.accent.subtleBlue': '--accent-subtleBlue',
+  'color.accent.subtleGreen': '--accent-subtleGreen',
+  'color.accent.subtleMagenta': '--accent-subtleMagenta',
+  'color.accent.subtleOrange': '--accent-subtleOrange',
+  'color.accent.subtlePurple': '--accent-subtlePurple',
+  'color.accent.subtleRed': '--accent-subtleRed',
+  'color.accent.subtleTeal': '--accent-subtleTeal',
   'color.background.sunken': '--background-sunken',
@@ -22,3 +22,5 @@ 'color.background.default': '--background-default',
   'color.background.overlay': '--background-overlay',
-  'color.background.selected': '--background-selected',
+  'color.background.selected.resting': '--background-selected-resting',
+  'color.background.selected.hover': '--background-selected-hover',
+  'color.background.selected.pressed': '--background-selected-pressed',
   'color.background.blanket': '--background-blanket',
@@ -68,4 +70,2 @@ 'color.background.disabled': '--background-disabled',
   'color.border.neutral': '--border-neutral',
-  'color.border.disabled': '--border-disabled',
-  'color.border.overlay': '--border-overlay',
   'color.iconBorder.brand': '--iconBorder-brand',
@@ -76,2 +76,4 @@ 'color.iconBorder.danger': '--iconBorder-danger',
   'color.iconBorder.discovery': '--iconBorder-discovery',
+  'color.overlay.hover': '--overlay-hover',
+  'color.overlay.pressed': '--overlay-pressed',
   'color.text.selected': '--text-selected',
@@ -84,3 +86,2 @@ 'color.text.highEmphasis': '--text-highEmphasis',
   'color.text.link.resting': '--text-link-resting',
-  'color.text.link.hover': '--text-link-hover',
   'color.text.link.pressed': '--text-link-pressed',
@@ -87,0 +88,0 @@ 'color.text.brand': '--text-brand',

dist/cjs/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.0.18",
+	"version": "0.1.0",
 	"sideEffects": false
 }

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

@@ -15,2 +15,8 @@ // ----------------------------------------------------
 /* eslint-disable no-console */
+function hexToPercent(hex) {
+  const percent = parseInt(hex, 16) * 100; // Ensure the value is capped between 0 and 100
+
+  return Math.max(0, Math.min(Math.round(percent / 255), 100));
+}
+
 function createPaint(hex) {
@@ -36,3 +42,3 @@ let hexValue = hex;
   const alphaHex = hexValue.slice(7, 9);
-  const opacity = alphaHex ? parseInt(alphaHex, 16) : 100;
+  const opacity = alphaHex ? hexToPercent(alphaHex) : 100;
   return {
@@ -68,3 +74,3 @@ type: 'SOLID',
       spread: shadow.spread,
-      type: 'DROP_SHADOW',
+      type: shadow.inset ? 'INNER_SHADOW' : 'DROP_SHADOW',
       visible: true
@@ -179,3 +185,4 @@ };
     synchronizeFigmaTokens,
-    createPaint
+    createPaint,
+    createEffects
   };
@@ -182,0 +189,0 @@ }

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

 const color = {
   color: {
     accent: {
-      blueSubtle: {
+      subtleBlue: {
         value: 'B900',
@@ -10,3 +10,3 @@ attributes: {
       },
-      greenSubtle: {
+      subtleGreen: {
         value: 'G900',
@@ -17,3 +17,3 @@ attributes: {
       },
-      magentaSubtle: {
+      subtleMagenta: {
         value: 'M900',
@@ -24,3 +24,3 @@ attributes: {
       },
-      orangeSubtle: {
+      subtleOrange: {
         value: 'O900',
@@ -31,3 +31,3 @@ attributes: {
       },
-      purpleSubtle: {
+      subtlePurple: {
         value: 'P900',
@@ -38,3 +38,3 @@ attributes: {
       },
-      redSubtle: {
+      subtleRed: {
         value: 'R900',
@@ -45,3 +45,3 @@ attributes: {
       },
-      tealSubtle: {
+      subtleTeal: {
         value: 'T900',
@@ -48,0 +48,0 @@ attributes: {

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

@@ -29,5 +29,19 @@ const color = {
       selected: {
-        value: 'DN200A',
-        attributes: {
-          group: 'paint'
+        resting: {
+          value: 'DN200A',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        hover: {
+          value: 'DN300A',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        pressed: {
+          value: 'DN400A',
+          attributes: {
+            group: 'paint'
+          }
         }
@@ -34,0 +48,0 @@ },

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

@@ -15,14 +15,2 @@ const color = {
         }
-      },
-      disabled: {
-        value: 'N100A',
-        attributes: {
-          group: 'paint'
-        }
-      },
-      overlay: {
-        value: 'DN100A',
-        attributes: {
-          group: 'paint'
-        }
       }
@@ -29,0 +17,0 @@ }

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

@@ -47,3 +47,3 @@ const color = {
         },
-        hover: {
+        pressed: {
           value: 'B300',
@@ -53,8 +53,2 @@ attributes: {
           }
-        },
-        pressed: {
-          value: 'B200',
-          attributes: {
-            group: 'paint'
-          }
         }
@@ -61,0 +55,0 @@ },

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

@@ -8,6 +8,7 @@ const shadow = {
           x: 0,
-          y: 0
+          y: 1
         },
-        color: 'DN100',
-        opacity: 0.36
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.5
       }, {
@@ -17,5 +18,6 @@ radius: 1,
           x: 0,
-          y: 1
+          y: 0
         },
-        color: 'DN100',
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
         opacity: 0.5
@@ -29,3 +31,5 @@ }],
       value: [{
-        radius: 1,
+        radius: 0,
+        spread: 1,
+        color: 'DN100A',
         offset: {
@@ -35,4 +39,4 @@ x: 0,
         },
-        color: 'DN0',
-        opacity: 0.5
+        opacity: 0.04,
+        inset: true
       }, {
@@ -44,3 +48,13 @@ radius: 12,
         },
-        color: 'DN0',
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.36
+      }, {
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 0
+        },
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
         opacity: 0.5
@@ -47,0 +61,0 @@ }],

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

 const color = {
   color: {
     accent: {
-      blueSubtle: {
+      subtleBlue: {
         value: 'B200',
@@ -10,3 +10,3 @@ attributes: {
       },
-      greenSubtle: {
+      subtleGreen: {
         value: 'G200',
@@ -17,3 +17,3 @@ attributes: {
       },
-      magentaSubtle: {
+      subtleMagenta: {
         value: 'M200',
@@ -24,3 +24,3 @@ attributes: {
       },
-      orangeSubtle: {
+      subtleOrange: {
         value: 'O200',
@@ -31,3 +31,3 @@ attributes: {
       },
-      purpleSubtle: {
+      subtlePurple: {
         value: 'P200',
@@ -38,3 +38,3 @@ attributes: {
       },
-      redSubtle: {
+      subtleRed: {
         value: 'R200',
@@ -45,3 +45,3 @@ attributes: {
       },
-      tealSubtle: {
+      subtleTeal: {
         value: 'T200',
@@ -48,0 +48,0 @@ attributes: {

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

@@ -29,5 +29,19 @@ const color = {
       selected: {
-        value: 'B100',
-        attributes: {
-          group: 'paint'
+        resting: {
+          value: 'B100',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        hover: {
+          value: 'B200',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        pressed: {
+          value: 'B300',
+          attributes: {
+            group: 'paint'
+          }
         }
@@ -34,0 +48,0 @@ },

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

@@ -15,14 +15,2 @@ const color = {
         }
-      },
-      disabled: {
-        value: 'N100A',
-        attributes: {
-          group: 'paint'
-        }
-      },
-      overlay: {
-        value: 'N0',
-        attributes: {
-          group: 'paint'
-        }
       }
@@ -29,0 +17,0 @@ }

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

@@ -47,3 +47,3 @@ const color = {
         },
-        hover: {
+        pressed: {
           value: 'B800',
@@ -53,8 +53,2 @@ attributes: {
           }
-        },
-        pressed: {
-          value: 'B900',
-          attributes: {
-            group: 'paint'
-          }
         }
@@ -61,0 +55,0 @@ },

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

@@ -8,6 +8,6 @@ const shadow = {
           x: 0,
-          y: 0
+          y: 1
         },
         color: 'N1100',
-        opacity: 0.3
+        opacity: 0.25
       }, {
@@ -17,6 +17,6 @@ radius: 1,
           x: 0,
-          y: 1
+          y: 0
         },
         color: 'N1100',
-        opacity: 0.25
+        opacity: 0.31
       }],
@@ -29,17 +29,17 @@ attributes: {
       value: [{
-        radius: 1,
+        radius: 12,
         offset: {
           x: 0,
-          y: 0
+          y: 8
         },
         color: 'N1100',
-        opacity: 0.3
+        opacity: 0.15
       }, {
-        radius: 12,
+        radius: 1,
         offset: {
           x: 0,
-          y: 8
+          y: 0
         },
         color: 'N1100',
-        opacity: 0.15
+        opacity: 0.31
       }],
@@ -46,0 +46,0 @@ attributes: {

dist/es2019/tokens/palette.js

@@ -565,3 +565,4 @@ const palette = {
       'DN-100A': {
-        value: '#03040421',
+        // #030404 33%
+        value: '#03040454',
         attributes: {
@@ -587,3 +588,4 @@ group: 'paint',
       DN100A: {
-        value: '#BCD6F004',
+        // #BCD6F0 4%
+        value: '#BCD6F00A',
         attributes: {
@@ -602,3 +604,4 @@ group: 'paint',
       DN200A: {
-        value: '#A1BDD908',
+        // #A1BDD9 8%
+        value: '#A1BDD914',
         attributes: {
@@ -617,3 +620,4 @@ group: 'paint',
       DN300A: {
-        value: '#A6C5E210',
+        // #A6C5E2 16%
+        value: '#A6C5E229',
         attributes: {
@@ -632,3 +636,4 @@ group: 'paint',
       DN400A: {
-        value: '#BFDBF81C',
+        // #BFDBF8 28%
+        value: '#BFDBF847',
         attributes: {
@@ -647,3 +652,4 @@ group: 'paint',
       DN500A: {
-        value: '#A3C0DB30',
+        // #A3C0DB 48%
+        value: '#A3C0DB7A',
         attributes: {
@@ -661,9 +667,2 @@ group: 'paint',
       },
-      DN600A: {
-        value: '#BDD9F538',
-        attributes: {
-          group: 'paint',
-          isPalette: true
-        }
-      },
       DN700: {
@@ -719,3 +718,4 @@ value: '#8696A7',
       N100A: {
-        value: '#091E4204',
+        // #091E42 3%
+        value: '#091E4208',
         attributes: {
@@ -734,3 +734,4 @@ group: 'paint',
       N200A: {
-        value: '#091E4206',
+        // #091E42 6%
+        value: '#091E420F',
         attributes: {
@@ -749,3 +750,4 @@ group: 'paint',
       N300A: {
-        value: '#091E420E',
+        // #091E42 14%
+        value: '#091E4224',
         attributes: {
@@ -764,3 +766,4 @@ group: 'paint',
       N400A: {
-        value: '#091E421F',
+        // #091E42 31%
+        value: '#091E424F',
         attributes: {
@@ -779,3 +782,4 @@ group: 'paint',
       N500A: {
-        value: '#091E4230',
+        // #091E42 48%
+        value: '#091E427A',
         attributes: {
@@ -782,0 +786,0 @@ group: 'paint',

dist/es2019/tokens/rename-mapping.js

@@ -21,81 +21,12 @@ /**
 const renameMapping = {
-  'color.accentBlueSubtle': 'color.accent.blueSubtle',
-  'color.accentGreenSubtle': 'color.accent.greenSubtle',
-  'color.accentMagentaSubtle': 'color.accent.magentaSubtle',
-  'color.accentOrangeSubtle': 'color.accent.orangeSubtle',
-  'color.accentPurpleSubtle': 'color.accent.purpleSubtle',
-  'color.accentRedSubtle': 'color.accent.redSubtle',
-  'color.accentTealSubtle': 'color.accent.tealSubtle',
-  'color.backgroundSunken': 'color.background.sunken',
-  'color.backgroundDefault': 'color.background.default',
-  'color.backgroundCard': 'color.background.card',
-  'color.backgroundOverlay': 'color.background.overlay',
-  'color.backgroundSelected': 'color.background.selected',
-  'color.backgroundBlanket': 'color.background.blanket',
-  'color.backgroundDisabled': 'color.background.disabled',
-  'color.backgroundBoldBrand.resting': 'color.background.boldBrand.resting',
-  'color.backgroundBoldBrand.hover': 'color.background.boldBrand.hover',
-  'color.backgroundBoldBrand.pressed': 'color.background.boldBrand.pressed',
-  'color.backgroundSubtleBrand.resting': 'color.background.subtleBrand.resting',
-  'color.backgroundSubtleBrand.hover': 'color.background.subtleBrand.hover',
-  'color.backgroundSubtleBrand.pressed': 'color.background.subtleBrand.pressed',
-  'color.backgroundBoldDanger.resting': 'color.background.boldDanger.resting',
-  'color.backgroundBoldDanger.hover': 'color.background.boldDanger.hover',
-  'color.backgroundBoldDanger.pressed': 'color.background.boldDanger.pressed',
-  'color.backgroundSubtleDanger.resting': 'color.background.subtleDanger.resting',
-  'color.backgroundSubtleDanger.hover': 'color.background.subtleDanger.hover',
-  'color.backgroundSubtleDanger.pressed': 'color.background.subtleDanger.pressed',
-  'color.backgroundBoldWarning.resting': 'color.background.boldWarning.resting',
-  'color.backgroundBoldWarning.hover': 'color.background.boldWarning.hover',
-  'color.backgroundBoldWarning.pressed': 'color.background.boldWarning.pressed',
-  'color.backgroundSubtleWarning.resting': 'color.background.subtleWarning.resting',
-  'color.backgroundSubtleWarning.hover': 'color.background.subtleWarning.hover',
-  'color.backgroundSubtleWarning.pressed': 'color.background.subtleWarning.pressed',
-  'color.backgroundBoldSuccess.resting': 'color.background.boldSuccess.resting',
-  'color.backgroundBoldSuccess.hover': 'color.background.boldSuccess.hover',
-  'color.backgroundBoldSuccess.pressed': 'color.background.boldSuccess.pressed',
-  'color.backgroundSubtleSuccess.resting': 'color.background.subtleSuccess.resting',
-  'color.backgroundSubtleSuccess.hover': 'color.background.subtleSuccess.hover',
-  'color.backgroundSubtleSuccess.pressed': 'color.background.subtleSuccess.pressed',
-  'color.backgroundBoldDiscovery.resting': 'color.background.boldDiscovery.resting',
-  'color.backgroundBoldDiscovery.hover': 'color.background.boldDiscovery.hover',
-  'color.backgroundBoldDiscovery.pressed': 'color.background.boldDiscovery.pressed',
-  'color.backgroundSubtleDiscovery.resting': 'color.background.subtleDiscovery.resting',
-  'color.backgroundSubtleDiscovery.hover': 'color.background.subtleDiscovery.hover',
-  'color.backgroundSubtleDiscovery.pressed': 'color.background.subtleDiscovery.pressed',
-  'color.backgroundBoldNeutral.resting': 'color.background.boldNeutral.resting',
-  'color.backgroundBoldNeutral.hover': 'color.background.boldNeutral.hover',
-  'color.backgroundBoldNeutral.pressed': 'color.background.boldNeutral.pressed',
-  'color.backgroundTransparentNeutral.hover': 'color.background.transparentNeutral.hover',
-  'color.backgroundTransparentNeutral.pressed': 'color.background.transparentNeutral.pressed',
-  'color.backgroundSubtleNeutral.resting': 'color.background.subtleNeutral.resting',
-  'color.backgroundSubtleNeutral.hover': 'color.background.subtleNeutral.hover',
-  'color.backgroundSubtleNeutral.pressed': 'color.background.subtleNeutral.pressed',
-  'color.backgroundSubtleBorderedNeutral.resting': 'color.background.subtleBorderedNeutral.resting',
-  'color.backgroundSubtleBorderedNeutral.pressed': 'color.background.subtleBorderedNeutral.pressed',
-  'color.borderFocus': 'color.border.focus',
-  'color.borderTextSelected': 'color.text.selected',
-  'color.borderNeutral': 'color.border.neutral',
-  'color.borderDisabled': 'color.border.disabled',
-  'color.borderOverlay': 'color.border.overlay',
-  'color.iconBorderBrand': 'color.iconBorder.brand',
-  'color.iconBorderDanger': 'color.iconBorder.danger',
-  'color.iconBorderWarning': 'color.iconBorder.warning',
-  'color.iconBorderSuccess': 'color.iconBorder.success',
-  'color.iconBorderDiscovery': 'color.iconBorder.discovery',
-  'color.textHighEmphasis': 'color.text.highEmphasis',
-  'color.textMediumEmphasis': 'color.text.mediumEmphasis',
-  'color.textLowEmphasis': 'color.text.lowEmphasis',
-  'color.textOnBold': 'color.text.onBold',
-  'color.textOnBoldWarning': 'color.text.onBoldWarning',
-  'color.textLink.resting': 'color.text.link.resting',
-  'color.textLink.hover': 'color.text.link.hover',
-  'color.textLink.pressed': 'color.text.link.pressed',
-  'color.textBrand': 'color.text.brand',
-  'color.textWarning': 'color.text.warning',
-  'color.textDanger': 'color.text.danger',
-  'color.textSuccess': 'color.text.success',
-  'color.textDiscovery': 'color.text.discovery',
-  'color.textDisabled': 'color.text.disabled'
+  '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'
 };
 export default renameMapping;

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.blueSubtle': '--accent-blueSubtle',
-  'color.accent.greenSubtle': '--accent-greenSubtle',
-  'color.accent.magentaSubtle': '--accent-magentaSubtle',
-  'color.accent.orangeSubtle': '--accent-orangeSubtle',
-  'color.accent.purpleSubtle': '--accent-purpleSubtle',
-  'color.accent.redSubtle': '--accent-redSubtle',
-  'color.accent.tealSubtle': '--accent-tealSubtle',
+  'color.accent.subtleBlue': '--accent-subtleBlue',
+  'color.accent.subtleGreen': '--accent-subtleGreen',
+  'color.accent.subtleMagenta': '--accent-subtleMagenta',
+  'color.accent.subtleOrange': '--accent-subtleOrange',
+  'color.accent.subtlePurple': '--accent-subtlePurple',
+  'color.accent.subtleRed': '--accent-subtleRed',
+  'color.accent.subtleTeal': '--accent-subtleTeal',
   'color.background.sunken': '--background-sunken',
@@ -15,3 +15,5 @@ 'color.background.default': '--background-default',
   'color.background.overlay': '--background-overlay',
-  'color.background.selected': '--background-selected',
+  'color.background.selected.resting': '--background-selected-resting',
+  'color.background.selected.hover': '--background-selected-hover',
+  'color.background.selected.pressed': '--background-selected-pressed',
   'color.background.blanket': '--background-blanket',
@@ -61,4 +63,2 @@ 'color.background.disabled': '--background-disabled',
   'color.border.neutral': '--border-neutral',
-  'color.border.disabled': '--border-disabled',
-  'color.border.overlay': '--border-overlay',
   'color.iconBorder.brand': '--iconBorder-brand',
@@ -69,2 +69,4 @@ 'color.iconBorder.danger': '--iconBorder-danger',
   'color.iconBorder.discovery': '--iconBorder-discovery',
+  'color.overlay.hover': '--overlay-hover',
+  'color.overlay.pressed': '--overlay-pressed',
   'color.text.selected': '--text-selected',
@@ -77,3 +79,2 @@ 'color.text.highEmphasis': '--text-highEmphasis',
   'color.text.link.resting': '--text-link-resting',
-  'color.text.link.hover': '--text-link-hover',
   'color.text.link.pressed': '--text-link-pressed',
@@ -80,0 +81,0 @@ 'color.text.brand': '--text-brand',

dist/es2019/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.0.18",
+	"version": "0.1.0",
 	"sideEffects": false
 }

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

@@ -15,2 +15,8 @@ // ----------------------------------------------------
 /* eslint-disable no-console */
+function hexToPercent(hex) {
+  var percent = parseInt(hex, 16) * 100; // Ensure the value is capped between 0 and 100
+
+  return Math.max(0, Math.min(Math.round(percent / 255), 100));
+}
+
 function createPaint(hex) {
@@ -36,3 +42,3 @@ var hexValue = hex;
   var alphaHex = hexValue.slice(7, 9);
-  var opacity = alphaHex ? parseInt(alphaHex, 16) : 100;
+  var opacity = alphaHex ? hexToPercent(alphaHex) : 100;
   return {
@@ -68,3 +74,3 @@ type: 'SOLID',
       spread: shadow.spread,
-      type: 'DROP_SHADOW',
+      type: shadow.inset ? 'INNER_SHADOW' : 'DROP_SHADOW',
       visible: true
@@ -181,3 +187,4 @@ };
     synchronizeFigmaTokens: synchronizeFigmaTokens,
-    createPaint: createPaint
+    createPaint: createPaint,
+    createEffects: createEffects
   };
@@ -184,0 +191,0 @@ }

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

 var color = {
   color: {
     accent: {
-      blueSubtle: {
+      subtleBlue: {
         value: 'B900',
@@ -10,3 +10,3 @@ attributes: {
       },
-      greenSubtle: {
+      subtleGreen: {
         value: 'G900',
@@ -17,3 +17,3 @@ attributes: {
       },
-      magentaSubtle: {
+      subtleMagenta: {
         value: 'M900',
@@ -24,3 +24,3 @@ attributes: {
       },
-      orangeSubtle: {
+      subtleOrange: {
         value: 'O900',
@@ -31,3 +31,3 @@ attributes: {
       },
-      purpleSubtle: {
+      subtlePurple: {
         value: 'P900',
@@ -38,3 +38,3 @@ attributes: {
       },
-      redSubtle: {
+      subtleRed: {
         value: 'R900',
@@ -45,3 +45,3 @@ attributes: {
       },
-      tealSubtle: {
+      subtleTeal: {
         value: 'T900',
@@ -48,0 +48,0 @@ attributes: {

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

@@ -29,5 +29,19 @@ var color = {
       selected: {
-        value: 'DN200A',
-        attributes: {
-          group: 'paint'
+        resting: {
+          value: 'DN200A',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        hover: {
+          value: 'DN300A',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        pressed: {
+          value: 'DN400A',
+          attributes: {
+            group: 'paint'
+          }
         }
@@ -34,0 +48,0 @@ },

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

@@ -15,14 +15,2 @@ var color = {
         }
-      },
-      disabled: {
-        value: 'N100A',
-        attributes: {
-          group: 'paint'
-        }
-      },
-      overlay: {
-        value: 'DN100A',
-        attributes: {
-          group: 'paint'
-        }
       }
@@ -29,0 +17,0 @@ }

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

@@ -47,3 +47,3 @@ var color = {
         },
-        hover: {
+        pressed: {
           value: 'B300',
@@ -53,8 +53,2 @@ attributes: {
           }
-        },
-        pressed: {
-          value: 'B200',
-          attributes: {
-            group: 'paint'
-          }
         }
@@ -61,0 +55,0 @@ },

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

@@ -8,6 +8,7 @@ var shadow = {
           x: 0,
-          y: 0
+          y: 1
         },
-        color: 'DN100',
-        opacity: 0.36
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.5
       }, {
@@ -17,5 +18,6 @@ radius: 1,
           x: 0,
-          y: 1
+          y: 0
         },
-        color: 'DN100',
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
         opacity: 0.5
@@ -29,3 +31,5 @@ }],
       value: [{
-        radius: 1,
+        radius: 0,
+        spread: 1,
+        color: 'DN100A',
         offset: {
@@ -35,4 +39,4 @@ x: 0,
         },
-        color: 'DN0',
-        opacity: 0.5
+        opacity: 0.04,
+        inset: true
       }, {
@@ -44,3 +48,13 @@ radius: 12,
         },
-        color: 'DN0',
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.36
+      }, {
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 0
+        },
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
         opacity: 0.5
@@ -47,0 +61,0 @@ }],

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

 var color = {
   color: {
     accent: {
-      blueSubtle: {
+      subtleBlue: {
         value: 'B200',
@@ -10,3 +10,3 @@ attributes: {
       },
-      greenSubtle: {
+      subtleGreen: {
         value: 'G200',
@@ -17,3 +17,3 @@ attributes: {
       },
-      magentaSubtle: {
+      subtleMagenta: {
         value: 'M200',
@@ -24,3 +24,3 @@ attributes: {
       },
-      orangeSubtle: {
+      subtleOrange: {
         value: 'O200',
@@ -31,3 +31,3 @@ attributes: {
       },
-      purpleSubtle: {
+      subtlePurple: {
         value: 'P200',
@@ -38,3 +38,3 @@ attributes: {
       },
-      redSubtle: {
+      subtleRed: {
         value: 'R200',
@@ -45,3 +45,3 @@ attributes: {
       },
-      tealSubtle: {
+      subtleTeal: {
         value: 'T200',
@@ -48,0 +48,0 @@ attributes: {

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

@@ -29,5 +29,19 @@ var color = {
       selected: {
-        value: 'B100',
-        attributes: {
-          group: 'paint'
+        resting: {
+          value: 'B100',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        hover: {
+          value: 'B200',
+          attributes: {
+            group: 'paint'
+          }
+        },
+        pressed: {
+          value: 'B300',
+          attributes: {
+            group: 'paint'
+          }
         }
@@ -34,0 +48,0 @@ },

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

@@ -15,14 +15,2 @@ var color = {
         }
-      },
-      disabled: {
-        value: 'N100A',
-        attributes: {
-          group: 'paint'
-        }
-      },
-      overlay: {
-        value: 'N0',
-        attributes: {
-          group: 'paint'
-        }
       }
@@ -29,0 +17,0 @@ }

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

@@ -47,3 +47,3 @@ var color = {
         },
-        hover: {
+        pressed: {
           value: 'B800',
@@ -53,8 +53,2 @@ attributes: {
           }
-        },
-        pressed: {
-          value: 'B900',
-          attributes: {
-            group: 'paint'
-          }
         }
@@ -61,0 +55,0 @@ },

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

@@ -8,6 +8,6 @@ var shadow = {
           x: 0,
-          y: 0
+          y: 1
         },
         color: 'N1100',
-        opacity: 0.3
+        opacity: 0.25
       }, {
@@ -17,6 +17,6 @@ radius: 1,
           x: 0,
-          y: 1
+          y: 0
         },
         color: 'N1100',
-        opacity: 0.25
+        opacity: 0.31
       }],
@@ -29,17 +29,17 @@ attributes: {
       value: [{
-        radius: 1,
+        radius: 12,
         offset: {
           x: 0,
-          y: 0
+          y: 8
         },
         color: 'N1100',
-        opacity: 0.3
+        opacity: 0.15
       }, {
-        radius: 12,
+        radius: 1,
         offset: {
           x: 0,
-          y: 8
+          y: 0
         },
         color: 'N1100',
-        opacity: 0.15
+        opacity: 0.31
       }],
@@ -46,0 +46,0 @@ attributes: {

dist/esm/tokens/palette.js

@@ -565,3 +565,4 @@ var palette = {
       'DN-100A': {
-        value: '#03040421',
+        // #030404 33%
+        value: '#03040454',
         attributes: {
@@ -587,3 +588,4 @@ group: 'paint',
       DN100A: {
-        value: '#BCD6F004',
+        // #BCD6F0 4%
+        value: '#BCD6F00A',
         attributes: {
@@ -602,3 +604,4 @@ group: 'paint',
       DN200A: {
-        value: '#A1BDD908',
+        // #A1BDD9 8%
+        value: '#A1BDD914',
         attributes: {
@@ -617,3 +620,4 @@ group: 'paint',
       DN300A: {
-        value: '#A6C5E210',
+        // #A6C5E2 16%
+        value: '#A6C5E229',
         attributes: {
@@ -632,3 +636,4 @@ group: 'paint',
       DN400A: {
-        value: '#BFDBF81C',
+        // #BFDBF8 28%
+        value: '#BFDBF847',
         attributes: {
@@ -647,3 +652,4 @@ group: 'paint',
       DN500A: {
-        value: '#A3C0DB30',
+        // #A3C0DB 48%
+        value: '#A3C0DB7A',
         attributes: {
@@ -661,9 +667,2 @@ group: 'paint',
       },
-      DN600A: {
-        value: '#BDD9F538',
-        attributes: {
-          group: 'paint',
-          isPalette: true
-        }
-      },
       DN700: {
@@ -719,3 +718,4 @@ value: '#8696A7',
       N100A: {
-        value: '#091E4204',
+        // #091E42 3%
+        value: '#091E4208',
         attributes: {
@@ -734,3 +734,4 @@ group: 'paint',
       N200A: {
-        value: '#091E4206',
+        // #091E42 6%
+        value: '#091E420F',
         attributes: {
@@ -749,3 +750,4 @@ group: 'paint',
       N300A: {
-        value: '#091E420E',
+        // #091E42 14%
+        value: '#091E4224',
         attributes: {
@@ -764,3 +766,4 @@ group: 'paint',
       N400A: {
-        value: '#091E421F',
+        // #091E42 31%
+        value: '#091E424F',
         attributes: {
@@ -779,3 +782,4 @@ group: 'paint',
       N500A: {
-        value: '#091E4230',
+        // #091E42 48%
+        value: '#091E427A',
         attributes: {
@@ -782,0 +786,0 @@ group: 'paint',

dist/esm/tokens/rename-mapping.js

@@ -21,81 +21,12 @@ /**
 var renameMapping = {
-  'color.accentBlueSubtle': 'color.accent.blueSubtle',
-  'color.accentGreenSubtle': 'color.accent.greenSubtle',
-  'color.accentMagentaSubtle': 'color.accent.magentaSubtle',
-  'color.accentOrangeSubtle': 'color.accent.orangeSubtle',
-  'color.accentPurpleSubtle': 'color.accent.purpleSubtle',
-  'color.accentRedSubtle': 'color.accent.redSubtle',
-  'color.accentTealSubtle': 'color.accent.tealSubtle',
-  'color.backgroundSunken': 'color.background.sunken',
-  'color.backgroundDefault': 'color.background.default',
-  'color.backgroundCard': 'color.background.card',
-  'color.backgroundOverlay': 'color.background.overlay',
-  'color.backgroundSelected': 'color.background.selected',
-  'color.backgroundBlanket': 'color.background.blanket',
-  'color.backgroundDisabled': 'color.background.disabled',
-  'color.backgroundBoldBrand.resting': 'color.background.boldBrand.resting',
-  'color.backgroundBoldBrand.hover': 'color.background.boldBrand.hover',
-  'color.backgroundBoldBrand.pressed': 'color.background.boldBrand.pressed',
-  'color.backgroundSubtleBrand.resting': 'color.background.subtleBrand.resting',
-  'color.backgroundSubtleBrand.hover': 'color.background.subtleBrand.hover',
-  'color.backgroundSubtleBrand.pressed': 'color.background.subtleBrand.pressed',
-  'color.backgroundBoldDanger.resting': 'color.background.boldDanger.resting',
-  'color.backgroundBoldDanger.hover': 'color.background.boldDanger.hover',
-  'color.backgroundBoldDanger.pressed': 'color.background.boldDanger.pressed',
-  'color.backgroundSubtleDanger.resting': 'color.background.subtleDanger.resting',
-  'color.backgroundSubtleDanger.hover': 'color.background.subtleDanger.hover',
-  'color.backgroundSubtleDanger.pressed': 'color.background.subtleDanger.pressed',
-  'color.backgroundBoldWarning.resting': 'color.background.boldWarning.resting',
-  'color.backgroundBoldWarning.hover': 'color.background.boldWarning.hover',
-  'color.backgroundBoldWarning.pressed': 'color.background.boldWarning.pressed',
-  'color.backgroundSubtleWarning.resting': 'color.background.subtleWarning.resting',
-  'color.backgroundSubtleWarning.hover': 'color.background.subtleWarning.hover',
-  'color.backgroundSubtleWarning.pressed': 'color.background.subtleWarning.pressed',
-  'color.backgroundBoldSuccess.resting': 'color.background.boldSuccess.resting',
-  'color.backgroundBoldSuccess.hover': 'color.background.boldSuccess.hover',
-  'color.backgroundBoldSuccess.pressed': 'color.background.boldSuccess.pressed',
-  'color.backgroundSubtleSuccess.resting': 'color.background.subtleSuccess.resting',
-  'color.backgroundSubtleSuccess.hover': 'color.background.subtleSuccess.hover',
-  'color.backgroundSubtleSuccess.pressed': 'color.background.subtleSuccess.pressed',
-  'color.backgroundBoldDiscovery.resting': 'color.background.boldDiscovery.resting',
-  'color.backgroundBoldDiscovery.hover': 'color.background.boldDiscovery.hover',
-  'color.backgroundBoldDiscovery.pressed': 'color.background.boldDiscovery.pressed',
-  'color.backgroundSubtleDiscovery.resting': 'color.background.subtleDiscovery.resting',
-  'color.backgroundSubtleDiscovery.hover': 'color.background.subtleDiscovery.hover',
-  'color.backgroundSubtleDiscovery.pressed': 'color.background.subtleDiscovery.pressed',
-  'color.backgroundBoldNeutral.resting': 'color.background.boldNeutral.resting',
-  'color.backgroundBoldNeutral.hover': 'color.background.boldNeutral.hover',
-  'color.backgroundBoldNeutral.pressed': 'color.background.boldNeutral.pressed',
-  'color.backgroundTransparentNeutral.hover': 'color.background.transparentNeutral.hover',
-  'color.backgroundTransparentNeutral.pressed': 'color.background.transparentNeutral.pressed',
-  'color.backgroundSubtleNeutral.resting': 'color.background.subtleNeutral.resting',
-  'color.backgroundSubtleNeutral.hover': 'color.background.subtleNeutral.hover',
-  'color.backgroundSubtleNeutral.pressed': 'color.background.subtleNeutral.pressed',
-  'color.backgroundSubtleBorderedNeutral.resting': 'color.background.subtleBorderedNeutral.resting',
-  'color.backgroundSubtleBorderedNeutral.pressed': 'color.background.subtleBorderedNeutral.pressed',
-  'color.borderFocus': 'color.border.focus',
-  'color.borderTextSelected': 'color.text.selected',
-  'color.borderNeutral': 'color.border.neutral',
-  'color.borderDisabled': 'color.border.disabled',
-  'color.borderOverlay': 'color.border.overlay',
-  'color.iconBorderBrand': 'color.iconBorder.brand',
-  'color.iconBorderDanger': 'color.iconBorder.danger',
-  'color.iconBorderWarning': 'color.iconBorder.warning',
-  'color.iconBorderSuccess': 'color.iconBorder.success',
-  'color.iconBorderDiscovery': 'color.iconBorder.discovery',
-  'color.textHighEmphasis': 'color.text.highEmphasis',
-  'color.textMediumEmphasis': 'color.text.mediumEmphasis',
-  'color.textLowEmphasis': 'color.text.lowEmphasis',
-  'color.textOnBold': 'color.text.onBold',
-  'color.textOnBoldWarning': 'color.text.onBoldWarning',
-  'color.textLink.resting': 'color.text.link.resting',
-  'color.textLink.hover': 'color.text.link.hover',
-  'color.textLink.pressed': 'color.text.link.pressed',
-  'color.textBrand': 'color.text.brand',
-  'color.textWarning': 'color.text.warning',
-  'color.textDanger': 'color.text.danger',
-  'color.textSuccess': 'color.text.success',
-  'color.textDiscovery': 'color.text.discovery',
-  'color.textDisabled': 'color.text.disabled'
+  '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'
 };
 export default renameMapping;

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.blueSubtle': '--accent-blueSubtle',
-  'color.accent.greenSubtle': '--accent-greenSubtle',
-  'color.accent.magentaSubtle': '--accent-magentaSubtle',
-  'color.accent.orangeSubtle': '--accent-orangeSubtle',
-  'color.accent.purpleSubtle': '--accent-purpleSubtle',
-  'color.accent.redSubtle': '--accent-redSubtle',
-  'color.accent.tealSubtle': '--accent-tealSubtle',
+  'color.accent.subtleBlue': '--accent-subtleBlue',
+  'color.accent.subtleGreen': '--accent-subtleGreen',
+  'color.accent.subtleMagenta': '--accent-subtleMagenta',
+  'color.accent.subtleOrange': '--accent-subtleOrange',
+  'color.accent.subtlePurple': '--accent-subtlePurple',
+  'color.accent.subtleRed': '--accent-subtleRed',
+  'color.accent.subtleTeal': '--accent-subtleTeal',
   'color.background.sunken': '--background-sunken',
@@ -15,3 +15,5 @@ 'color.background.default': '--background-default',
   'color.background.overlay': '--background-overlay',
-  'color.background.selected': '--background-selected',
+  'color.background.selected.resting': '--background-selected-resting',
+  'color.background.selected.hover': '--background-selected-hover',
+  'color.background.selected.pressed': '--background-selected-pressed',
   'color.background.blanket': '--background-blanket',
@@ -61,4 +63,2 @@ 'color.background.disabled': '--background-disabled',
   'color.border.neutral': '--border-neutral',
-  'color.border.disabled': '--border-disabled',
-  'color.border.overlay': '--border-overlay',
   'color.iconBorder.brand': '--iconBorder-brand',
@@ -69,2 +69,4 @@ 'color.iconBorder.danger': '--iconBorder-danger',
   'color.iconBorder.discovery': '--iconBorder-discovery',
+  'color.overlay.hover': '--overlay-hover',
+  'color.overlay.pressed': '--overlay-pressed',
   'color.text.selected': '--text-selected',
@@ -77,3 +79,2 @@ 'color.text.highEmphasis': '--text-highEmphasis',
   'color.text.link.resting': '--text-link-resting',
-  'color.text.link.hover': '--text-link-hover',
   'color.text.link.pressed': '--text-link-pressed',
@@ -80,0 +81,0 @@ 'color.text.brand': '--text-brand',

dist/esm/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.0.18",
+	"version": "0.1.0",
 	"sideEffects": false
 }

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;
+export declare type CreateEffects = typeof createEffects;
+export declare type CreatePaint = typeof createPaint;
+declare function createEffects(value: ShadowToken<string>['value']): FigmaEffect[];
 /**
@@ -3,0 +8,0 @@ * Adds tokens under a specified theme as paint styles to Figma.

dist/types/figma/types.d.ts

@@ -32,3 +32,3 @@ export interface FigmaPaint {
     spread?: number;
-    type: 'DROP_SHADOW';
+    type: 'DROP_SHADOW' | 'INNER_SHADOW';
     visible: boolean;
@@ -35,0 +35,0 @@ }

dist/types/tokens/token-names.d.ts

 declare const tokens: {
-    readonly 'color.accent.blueSubtle': "--accent-blueSubtle";
-    readonly 'color.accent.greenSubtle': "--accent-greenSubtle";
-    readonly 'color.accent.magentaSubtle': "--accent-magentaSubtle";
-    readonly 'color.accent.orangeSubtle': "--accent-orangeSubtle";
-    readonly 'color.accent.purpleSubtle': "--accent-purpleSubtle";
-    readonly 'color.accent.redSubtle': "--accent-redSubtle";
-    readonly 'color.accent.tealSubtle': "--accent-tealSubtle";
+    readonly 'color.accent.subtleBlue': "--accent-subtleBlue";
+    readonly 'color.accent.subtleGreen': "--accent-subtleGreen";
+    readonly 'color.accent.subtleMagenta': "--accent-subtleMagenta";
+    readonly 'color.accent.subtleOrange': "--accent-subtleOrange";
+    readonly 'color.accent.subtlePurple': "--accent-subtlePurple";
+    readonly 'color.accent.subtleRed': "--accent-subtleRed";
+    readonly 'color.accent.subtleTeal': "--accent-subtleTeal";
     readonly 'color.background.sunken': "--background-sunken";
@@ -13,3 +13,5 @@ readonly 'color.background.default': "--background-default";
     readonly 'color.background.overlay': "--background-overlay";
-    readonly 'color.background.selected': "--background-selected";
+    readonly 'color.background.selected.resting': "--background-selected-resting";
+    readonly 'color.background.selected.hover': "--background-selected-hover";
+    readonly 'color.background.selected.pressed': "--background-selected-pressed";
     readonly 'color.background.blanket': "--background-blanket";
@@ -59,4 +61,2 @@ readonly 'color.background.disabled': "--background-disabled";
     readonly 'color.border.neutral': "--border-neutral";
-    readonly 'color.border.disabled': "--border-disabled";
-    readonly 'color.border.overlay': "--border-overlay";
     readonly 'color.iconBorder.brand': "--iconBorder-brand";
@@ -67,2 +67,4 @@ readonly 'color.iconBorder.danger': "--iconBorder-danger";
     readonly 'color.iconBorder.discovery': "--iconBorder-discovery";
+    readonly 'color.overlay.hover': "--overlay-hover";
+    readonly 'color.overlay.pressed': "--overlay-pressed";
     readonly 'color.text.selected': "--text-selected";
@@ -75,3 +77,2 @@ readonly 'color.text.highEmphasis': "--text-highEmphasis";
     readonly 'color.text.link.resting': "--text-link-resting";
-    readonly 'color.text.link.hover': "--text-link-hover";
     readonly 'color.text.link.pressed': "--text-link-pressed";
@@ -88,9 +89,9 @@ readonly 'color.text.brand': "--text-brand";
 export declare type CSSTokenMap = {
-    'color.accent.blueSubtle': 'var(--accent-blueSubtle)';
-    'color.accent.greenSubtle': 'var(--accent-greenSubtle)';
-    'color.accent.magentaSubtle': 'var(--accent-magentaSubtle)';
-    'color.accent.orangeSubtle': 'var(--accent-orangeSubtle)';
-    'color.accent.purpleSubtle': 'var(--accent-purpleSubtle)';
-    'color.accent.redSubtle': 'var(--accent-redSubtle)';
-    'color.accent.tealSubtle': 'var(--accent-tealSubtle)';
+    'color.accent.subtleBlue': 'var(--accent-subtleBlue)';
+    'color.accent.subtleGreen': 'var(--accent-subtleGreen)';
+    'color.accent.subtleMagenta': 'var(--accent-subtleMagenta)';
+    'color.accent.subtleOrange': 'var(--accent-subtleOrange)';
+    'color.accent.subtlePurple': 'var(--accent-subtlePurple)';
+    'color.accent.subtleRed': 'var(--accent-subtleRed)';
+    'color.accent.subtleTeal': 'var(--accent-subtleTeal)';
     'color.background.sunken': 'var(--background-sunken)';
@@ -100,3 +101,5 @@ 'color.background.default': 'var(--background-default)';
     'color.background.overlay': 'var(--background-overlay)';
-    'color.background.selected': 'var(--background-selected)';
+    'color.background.selected.resting': 'var(--background-selected-resting)';
+    'color.background.selected.hover': 'var(--background-selected-hover)';
+    'color.background.selected.pressed': 'var(--background-selected-pressed)';
     'color.background.blanket': 'var(--background-blanket)';
@@ -146,4 +149,2 @@ 'color.background.disabled': 'var(--background-disabled)';
     'color.border.neutral': 'var(--border-neutral)';
-    'color.border.disabled': 'var(--border-disabled)';
-    'color.border.overlay': 'var(--border-overlay)';
     'color.iconBorder.brand': 'var(--iconBorder-brand)';
@@ -154,2 +155,4 @@ 'color.iconBorder.danger': 'var(--iconBorder-danger)';
     'color.iconBorder.discovery': 'var(--iconBorder-discovery)';
+    'color.overlay.hover': 'var(--overlay-hover)';
+    'color.overlay.pressed': 'var(--overlay-pressed)';
     'color.text.selected': 'var(--text-selected)';
@@ -162,3 +165,2 @@ 'color.text.highEmphasis': 'var(--text-highEmphasis)';
     'color.text.link.resting': 'var(--text-link-resting)';
-    'color.text.link.hover': 'var(--text-link-hover)';
     'color.text.link.pressed': 'var(--text-link-pressed)';
@@ -165,0 +167,0 @@ 'color.text.brand': 'var(--text-brand)';

dist/types/types.d.ts

@@ -8,3 +8,4 @@ export interface Token<TValue, TGroup extends string> {
 }
-export declare type PaintToken<Value extends string = keyof PaletteColorTokenSchema['color']['palette']> = Token<Value, 'paint'>;
+export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
+export declare type PaintToken<Value extends string = ColorPalette> = Token<Value, 'paint'>;
 export declare type PaletteToken = Token<string, 'paint'> & {
@@ -15,3 +16,3 @@ attributes: {
 };
-export declare type ShadowToken<Value extends string = keyof PaletteColorTokenSchema['color']['palette']> = Token<Array<{
+export declare type ShadowToken<Value extends string = ColorPalette> = Token<Array<{
     color: Value;
@@ -25,2 +26,3 @@ opacity: number;
     spread?: number;
+    inset?: boolean;
 }>, 'shadow'>;
@@ -123,3 +125,2 @@ export interface PaletteColorTokenSchema {
             DN600: PaletteToken;
-            DN600A: PaletteToken;
             DN700: PaletteToken;
@@ -157,3 +158,7 @@ DN800: PaletteToken;
             overlay: PaintToken;
-            selected: PaintToken;
+            selected: {
+                resting: PaintToken;
+                hover: PaintToken;
+                pressed: PaintToken;
+            };
             disabled: PaintToken;
@@ -237,4 +242,2 @@ blanket: PaintToken;
             neutral: PaintToken;
-            disabled: PaintToken;
-            overlay: PaintToken;
         };
@@ -265,3 +268,2 @@ };
                 resting: PaintToken;
-                hover: PaintToken;
                 pressed: PaintToken;
@@ -281,12 +283,20 @@ };
         accent: {
-            blueSubtle: PaintToken;
-            redSubtle: PaintToken;
-            greenSubtle: PaintToken;
-            orangeSubtle: PaintToken;
-            tealSubtle: PaintToken;
-            purpleSubtle: PaintToken;
-            magentaSubtle: PaintToken;
+            subtleBlue: PaintToken;
+            subtleRed: PaintToken;
+            subtleGreen: PaintToken;
+            subtleOrange: PaintToken;
+            subtleTeal: PaintToken;
+            subtlePurple: PaintToken;
+            subtleMagenta: PaintToken;
         };
     };
 }
+export interface OverlayColorTokenSchema {
+    color: {
+        overlay: {
+            pressed: PaintToken;
+            hover: PaintToken;
+        };
+    };
+}
 export interface ShadowTokenSchema {
@@ -293,0 +303,0 @@ shadow: {

package.json

 {
   "name": "@atlaskit/tokens",
-  "version": "0.0.18",
+  "version": "0.1.0",
   "author": "Atlassian Pty Ltd",
@@ -22,3 +22,4 @@ "license": "Apache-2.0",
     ".": "./src/index.tsx",
-    "./token-names": "./src/entry-points/token-names.tsx"
+    "./token-names": "./src/entry-points/token-names.tsx",
+    "./rename-mapping": "./src/entry-points/rename-mapping.tsx"
   },
@@ -25,0 +26,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

111

increased by13.27%

Worsened metrics

Total package byte prevSize

201976

decreased by-3.21%

Lines of code

7893

decreased by-0.03%

No dependency changes