@atlaskit/tokens 0.1.0 → 0.3.0

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

@@ -2,327 +2,180 @@ const color = {
   color: {
     background: {
       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'
         }
       },
       subtleBrand: {
         resting: {
-          value: 'B100',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'B100'
         },
         hover: {
-          value: 'B200',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'B200'
         },
         pressed: {
-          value: 'B300',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'B300'
         }
       },
       boldDanger: {
         resting: {
-          value: 'R700',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'R700'
         },
         hover: {
-          value: 'R800',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'R800'
         },
         pressed: {
-          value: 'R900',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'R900'
         }
       },
       subtleDanger: {
         resting: {
-          value: 'R100',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'R100'
         },
         hover: {
-          value: 'R200',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'R200'
         },
         pressed: {
-          value: 'R300',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'R300'
         }
       },
       boldWarning: {
         resting: {
-          value: 'Y400',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'Y400'
         },
         hover: {
-          value: 'Y500',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'Y500'
         },
         pressed: {
-          value: 'Y600',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'Y600'
         }
       },
       subtleWarning: {
         resting: {
-          value: 'Y100',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'Y100'
         },
         hover: {
-          value: 'Y200',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'Y200'
         },
         pressed: {
-          value: 'Y300',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'Y300'
         }
       },
       boldSuccess: {
         resting: {
-          value: 'G700',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'G700'
         },
         hover: {
-          value: 'G800',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'G800'
         },
         pressed: {
-          value: 'G900',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'G900'
         }
       },
       subtleSuccess: {
         resting: {
-          value: 'G100',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'G100'
         },
         hover: {
-          value: 'G200',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'G200'
         },
         pressed: {
-          value: 'G300',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'G300'
         }
       },
       boldDiscovery: {
         resting: {
-          value: 'P700',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'P700'
         },
         hover: {
-          value: 'P800',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'P800'
         },
         pressed: {
-          value: 'P900',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'P900'
         }
       },
       subtleDiscovery: {
         resting: {
-          value: 'P100',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'P100'
         },
         hover: {
-          value: 'P200',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'P200'
         },
         pressed: {
-          value: 'P300',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'P300'
         }
       },
       boldNeutral: {
         resting: {
-          value: 'N800',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N800'
         },
         hover: {
-          value: 'N900',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N900'
         },
         pressed: {
-          value: 'N1000',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N1000'
         }
       },
       transparentNeutral: {
         hover: {
-          value: 'N200A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N200A'
         },
         pressed: {
-          value: 'N300A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N300A'
         }
       },
       subtleNeutral: {
         resting: {
-          value: 'N200A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N200A'
         },
         hover: {
-          value: 'N300A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N300A'
         },
         pressed: {
-          value: 'N400A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N400A'
         }
       },
       subtleBorderedNeutral: {
         resting: {
-          value: 'N100A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N100A'
         },
         pressed: {
-          value: 'N200A',
-          attributes: {
-            group: 'paint'
-          }
+          value: 'N200A'
         }
       }
     }

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

@@ -2,16 +2,10 @@ const color = {
   color: {
     border: {
       focus: {
-        value: 'B500',
-        attributes: {
-          group: 'paint'
-        }
+        value: 'B500'
       },
       neutral: {
-        value: 'N300A',
-        attributes: {
-          group: 'paint'
-        }
+        value: 'N300A'
       }
     }
   }

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

@@ -2,34 +2,19 @@ const color = {
   color: {
     iconBorder: {
       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'
       }
     }
   }

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

@@ -2,16 +2,10 @@ const color = {
   color: {
     overlay: {
       hover: {
-        value: 'N400A',
-        attributes: {
-          group: 'paint'
-        }
+        value: 'N400A'
       },
       pressed: {
-        value: 'N500A',
-        attributes: {
-          group: 'paint'
-        }
+        value: 'N500A'
       }
     }
   }

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

@@ -2,90 +2,48 @@ const color = {
   color: {
     text: {
       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'
       }
     }
   }

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

@@ -17,10 +17,7 @@ const shadow = {
         },
         color: 'N1100',
         opacity: 0.31
-      }],
-      attributes: {
-        group: 'shadow'
-      }
+      }]
     },
     overlay: {
       value: [{
@@ -39,10 +36,7 @@ const shadow = {
         },
         color: 'N1100',
         opacity: 0.31
-      }],
-      attributes: {
-        group: 'shadow'
-      }
+      }]
     }
   }
 };

package/dist/es2019/tokens/atlassian-light/utility/utility.js

@@ -0,0 +1,10 @@
+const utility = {
+  UNSAFE_util: {
+    transparent: {
+      value: 'transparent'
+    }
+  }
+};
+export default {
+  utility
+};

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

@@ -0,0 +1,85 @@
+const color = {
+  color: {
+    accent: {
+      boldBlue: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
+        }
+      },
+      boldGreen: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
+        }
+      },
+      boldOrange: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
+        }
+      },
+      boldPurple: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
+        }
+      },
+      boldRed: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
+        }
+      },
+      boldTeal: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
+        }
+      },
+      subtleBlue: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      },
+      subtleGreen: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      },
+      subtleMagenta: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      },
+      subtleOrange: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      },
+      subtlePurple: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      },
+      subtleRed: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      },
+      subtleTeal: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
+        }
+      }
+    }
+  }
+};
+export default color;