@atlaskit/tokens 0.4.2 → 0.6.2

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

@@ -1,49 +1,54 @@
 const color = {
   color: {
     text: {
-      selected: {
-        value: 'B400'
-      },
-      highEmphasis: {
+      '[default]': {
         value: 'DN1000'
       },
-      mediumEmphasis: {
+      subtle: {
         value: 'DN800'
       },
-      lowEmphasis: {
+      subtlest: {
         value: 'DN700'
       },
-      onBold: {
+      inverse: {
         value: 'DN0'
       },
-      onBoldWarning: {
-        value: 'DN0'
-      },
-      link: {
-        resting: {
-          value: 'B400'
-        },
-        pressed: {
-          value: 'B300'
-        }
+      disabled: {
+        value: 'DN500'
       },
       brand: {
-        value: 'B300'
+        value: 'B400'
       },
-      warning: {
-        value: 'Y300'
+      selected: {
+        value: 'B400'
       },
       danger: {
         value: 'R300'
       },
+      warning: {
+        '[default]': {
+          value: 'Y300'
+        },
+        inverse: {
+          value: 'DN0'
+        }
+      },
       success: {
         value: 'G300'
       },
+      information: {
+        value: 'B300'
+      },
       discovery: {
         value: 'P300'
+      }
+    },
+    link: {
+      '[default]': {
+        value: 'B400'
       },
-      disabled: {
-        value: 'DN500'
+      pressed: {
+        value: 'B300'
       }
     }
   }

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

@@ -0,0 +1,344 @@
+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'
+      },
+      subtleGreen: {
+        value: 'G900'
+      },
+      subtleMagenta: {
+        value: 'M900'
+      },
+      subtleOrange: {
+        value: 'O900'
+      },
+      subtlePurple: {
+        value: 'P900'
+      },
+      subtleRed: {
+        value: 'R900'
+      },
+      subtleTeal: {
+        value: 'T900'
+      }
+    },
+    background: {
+      blanket: {
+        value: 'DN-100A'
+      },
+      brand: {
+        '[default]': {
+          '[default]': {
+            value: 'DN200A'
+          },
+          hovered: {
+            value: 'DN300A'
+          },
+          pressed: {
+            value: 'DN400A'
+          }
+        }
+      },
+      boldBrand: {
+        resting: {
+          value: 'B400'
+        },
+        hover: {
+          value: 'B300'
+        },
+        pressed: {
+          value: 'B200'
+        }
+      },
+      boldDanger: {
+        resting: {
+          value: 'R400'
+        },
+        hover: {
+          value: 'R300'
+        },
+        pressed: {
+          value: 'R200'
+        }
+      },
+      boldDiscovery: {
+        resting: {
+          value: 'P400'
+        },
+        hover: {
+          value: 'P300'
+        },
+        pressed: {
+          value: 'P200'
+        }
+      },
+      boldNeutral: {
+        resting: {
+          value: 'DN800'
+        },
+        hover: {
+          value: 'DN900'
+        },
+        pressed: {
+          value: 'DN1000'
+        }
+      },
+      boldSuccess: {
+        resting: {
+          value: 'G400'
+        },
+        hover: {
+          value: 'G300'
+        },
+        pressed: {
+          value: 'G200'
+        }
+      },
+      boldWarning: {
+        resting: {
+          value: 'Y400'
+        },
+        hover: {
+          value: 'Y300'
+        },
+        pressed: {
+          value: 'Y200'
+        }
+      },
+      default: {
+        value: 'DN0'
+      },
+      card: {
+        value: 'DN100'
+      },
+      overlay: {
+        value: 'DN200'
+      },
+      selected: {
+        resting: {
+          value: 'DN200A'
+        },
+        hover: {
+          value: 'DN300A'
+        }
+      },
+      subtleBorderedNeutral: {
+        resting: {
+          value: 'DN100A'
+        },
+        pressed: {
+          value: 'DN200A'
+        }
+      },
+      subtleBrand: {
+        resting: {
+          value: 'B1000'
+        },
+        hover: {
+          value: 'B900'
+        },
+        pressed: {
+          value: 'B800'
+        }
+      },
+      subtleDanger: {
+        resting: {
+          value: 'R1000'
+        },
+        hover: {
+          value: 'R900'
+        },
+        pressed: {
+          value: 'R800'
+        }
+      },
+      subtleDiscovery: {
+        resting: {
+          value: 'P1000'
+        },
+        hover: {
+          value: 'P900'
+        },
+        pressed: {
+          value: 'P800'
+        }
+      },
+      subtleNeutral: {
+        resting: {
+          value: 'DN200A'
+        },
+        hover: {
+          value: 'DN300A'
+        },
+        pressed: {
+          value: 'DN400A'
+        }
+      },
+      subtleSuccess: {
+        resting: {
+          value: 'G1000'
+        },
+        hover: {
+          value: 'G900'
+        },
+        pressed: {
+          value: 'G800'
+        }
+      },
+      subtleWarning: {
+        resting: {
+          value: 'Y1000'
+        },
+        hover: {
+          value: 'Y900'
+        },
+        pressed: {
+          value: 'Y800'
+        }
+      },
+      sunken: {
+        value: 'DN-100A'
+      },
+      transparentNeutral: {
+        hover: {
+          value: 'DN200A'
+        },
+        pressed: {
+          value: 'DN300A'
+        }
+      }
+    },
+    text: {
+      highEmphasis: {
+        value: 'DN1000'
+      },
+      mediumEmphasis: {
+        value: 'DN800'
+      },
+      lowEmphasis: {
+        value: 'DN700'
+      },
+      link: {
+        resting: {
+          value: 'B400'
+        },
+        pressed: {
+          value: 'B300'
+        }
+      },
+      onBold: {
+        value: 'DN0'
+      },
+      onBoldWarning: {
+        value: 'DN0'
+      }
+    },
+    border: {
+      focus: {
+        value: 'B300'
+      },
+      neutral: {
+        value: 'DN300A'
+      }
+    },
+    iconBorder: {
+      brand: {
+        value: 'B500'
+      },
+      danger: {
+        value: 'R500'
+      },
+      warning: {
+        value: 'Y500'
+      },
+      success: {
+        value: 'G500'
+      },
+      discovery: {
+        value: 'P500'
+      }
+    },
+    overlay: {
+      hover: {
+        value: 'DN400A'
+      },
+      pressed: {
+        value: 'DN500A'
+      }
+    }
+  },
+  shadow: {
+    card: {
+      value: [{
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 1
+        },
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.5
+      }, {
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 0
+        },
+        color: 'DN-100A',
+        // This opacity overrides the color alpha.
+        opacity: 0.5
+      }]
+    },
+    overlay: {
+      value: [{
+        radius: 0,
+        spread: 1,
+        color: 'DN100A',
+        offset: {
+          x: 0,
+          y: 0
+        },
+        opacity: 0.04,
+        inset: true
+      }, {
+        radius: 12,
+        offset: {
+          x: 0,
+          y: 8
+        },
+        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
+      }]
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,59 @@
+const shadow = {
+  elevation: {
+    shadow: {
+      raised: {
+        value: [{
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 1
+          },
+          color: 'DN-100A',
+          // This opacity overrides the color alpha.
+          opacity: 0.5
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'DN-100A',
+          // This opacity overrides the color alpha.
+          opacity: 0.5
+        }]
+      },
+      overlay: {
+        value: [{
+          radius: 0,
+          spread: 1,
+          color: 'DN100A',
+          offset: {
+            x: 0,
+            y: 0
+          },
+          opacity: 0.04,
+          inset: true
+        }, {
+          radius: 12,
+          offset: {
+            x: 0,
+            y: 8
+          },
+          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
+        }]
+      }
+    }
+  }
+};
+export default shadow;

package/dist/es2019/tokens/atlassian-dark/elevation/surface.js

@@ -0,0 +1,19 @@
+const elevation = {
+  elevation: {
+    surface: {
+      '[default]': {
+        value: 'DN0'
+      },
+      sunken: {
+        value: 'DN-100A'
+      },
+      raised: {
+        value: 'DN100'
+      },
+      overlay: {
+        value: 'DN200'
+      }
+    }
+  }
+};
+export default elevation;

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

@@ -1,44 +1,155 @@
 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'
-      },
-      subtleGreen: {
-        value: 'G200'
-      },
-      subtleMagenta: {
-        value: 'M200'
-      },
-      subtleOrange: {
-        value: 'O200'
-      },
-      subtlePurple: {
-        value: 'P200'
-      },
-      subtleRed: {
-        value: 'R200'
-      },
-      subtleTeal: {
-        value: 'T200'
+    text: {
+      accent: {
+        blue: {
+          value: 'B800'
+        },
+        red: {
+          value: 'R800'
+        },
+        orange: {
+          value: 'O800'
+        },
+        yellow: {
+          value: 'Y800'
+        },
+        green: {
+          value: 'G800'
+        },
+        purple: {
+          value: 'P800'
+        },
+        teal: {
+          value: 'T800'
+        },
+        magenta: {
+          value: 'M800'
+        }
+      }
+    },
+    icon: {
+      accent: {
+        blue: {
+          value: 'B600'
+        },
+        red: {
+          value: 'R600'
+        },
+        orange: {
+          value: 'O600'
+        },
+        yellow: {
+          value: 'Y600'
+        },
+        green: {
+          value: 'G600'
+        },
+        purple: {
+          value: 'P600'
+        },
+        teal: {
+          value: 'T600'
+        },
+        magenta: {
+          value: 'M600'
+        }
+      }
+    },
+    border: {
+      accent: {
+        blue: {
+          value: 'B600'
+        },
+        red: {
+          value: 'R600'
+        },
+        orange: {
+          value: 'O600'
+        },
+        yellow: {
+          value: 'Y600'
+        },
+        green: {
+          value: 'G600'
+        },
+        purple: {
+          value: 'P600'
+        },
+        teal: {
+          value: 'T600'
+        },
+        magenta: {
+          value: 'M600'
+        }
+      }
+    },
+    background: {
+      accent: {
+        blue: {
+          '[default]': {
+            value: 'B200'
+          },
+          bold: {
+            value: 'B400'
+          }
+        },
+        red: {
+          '[default]': {
+            value: 'R200'
+          },
+          bold: {
+            value: 'R400'
+          }
+        },
+        orange: {
+          '[default]': {
+            value: 'O200'
+          },
+          bold: {
+            value: 'O400'
+          }
+        },
+        yellow: {
+          '[default]': {
+            value: 'Y200'
+          },
+          bold: {
+            value: 'Y400'
+          }
+        },
+        green: {
+          '[default]': {
+            value: 'G200'
+          },
+          bold: {
+            value: 'G400'
+          }
+        },
+        purple: {
+          '[default]': {
+            value: 'P200'
+          },
+          bold: {
+            value: 'P400'
+          }
+        },
+        teal: {
+          '[default]': {
+            value: 'T200'
+          },
+          bold: {
+            value: 'T400'
+          }
+        },
+        magenta: {
+          '[default]': {
+            value: 'M200'
+          },
+          bold: {
+            value: 'M400'
+          }
+        }
       }
     }
   }