@atlaskit/tokens 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/tokens
 
+## 1.8.0
+
+### Minor Changes
+
+- [`e200f2340ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e200f2340ed) - Introduces new lime token set.
+
+  - `color.text.accent.lime` - Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.
+  - `color.text.accent.lime.bolder` - Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.
+  - `color.background.accent.lime.subtlest` - Use for lime backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.
+  - `color.background.accent.lime.subtler` - Use for lime backgrounds when there is no meaning tied to the color, such as colored tags.
+  - `color.background.accent.lime.subtle` - Use for vibrant lime backgrounds when there is no meaning tied to the color, such as colored tags.
+  - `color.background.accent.lime.bolder` - Use for lime backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.
+  - `color.icon.accent.lime` - Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.
+  - `color.border.accent.lime` - Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.
+  - `color.chart.lime` - For data visualisation only.
+  - `color.chart.lime.hovered` - Hovered state of color.chart.lime
+  - `color.chart.lime.bolder` - For data visualisation only.
+  - `color.chart.lime.bolder.hovered` - Hovered state of color.chart.lime.bolder
+  - `color.chart.lime.boldest` - For data visualisation only.
+  - `color.chart.lime.boldest.hovered` - Hovered state of color.chart.lime.boldest
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/artifacts/generated-pairs.js

@@ -10,10 +10,18 @@ exports.generatedPairs = exports.default = void 0;
  * Auto-generated list of token pairings that may need to have sufficient contrast.
  * Not currently used by tests, but is used by the custom theme contrast checker example
  *
- * @codegen <<SignedSource::ec8e2d34c5152b1b66186e14b261c0f1>>
+ * @codegen <<SignedSource::411fd07bb804a9703b71946f1557b2a1>>
  * @codegenCommand yarn build tokens
  */
 var generatedPairs = [{
+  foreground: 'color.text',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 4.5
+}, {
   foreground: 'color.text',
   background: 'color.background.accent.red.subtlest',
   desiredContrast: 4.5
@@ -169,6 +177,26 @@ var generatedPairs = [{
   foreground: 'color.text',
   background: 'color.background.information.pressed',
   desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'color.background.accent.lime.subtle',
+  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.red',
   background: 'color.background.accent.red.subtlest',
@@ -349,6 +377,10 @@ var generatedPairs = [{
   foreground: 'color.text.accent.gray.bolder',
   background: 'color.background.accent.gray.subtle',
   desiredContrast: 4.5
+}, {
+  foreground: 'color.text.inverse',
+  background: 'color.background.accent.lime.bolder',
+  desiredContrast: 4.5
 }, {
   foreground: 'color.text.inverse',
   background: 'color.background.accent.red.bolder',
@@ -553,6 +585,14 @@ var generatedPairs = [{
   foreground: 'color.text.information',
   background: 'color.background.information.pressed',
   desiredContrast: 4.5
+}, {
+  foreground: 'color.text.subtlest',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.subtlest',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 4.5
 }, {
   foreground: 'color.text.subtlest',
   background: 'color.background.accent.red.subtlest',
@@ -709,6 +749,14 @@ var generatedPairs = [{
   foreground: 'color.text.subtlest',
   background: 'color.background.information.pressed',
   desiredContrast: 4.5
+}, {
+  foreground: 'color.text.subtle',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.subtle',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 4.5
 }, {
   foreground: 'color.text.subtle',
   background: 'color.background.accent.red.subtlest',
@@ -865,6 +913,14 @@ var generatedPairs = [{
   foreground: 'color.text.subtle',
   background: 'color.background.information.pressed',
   desiredContrast: 4.5
+}, {
+  foreground: 'color.link',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.link',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.link',
   background: 'color.background.accent.red.subtlest',
@@ -1021,6 +1077,14 @@ var generatedPairs = [{
   foreground: 'color.link',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.icon',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.icon',
   background: 'color.background.accent.red.subtlest',
@@ -1177,6 +1241,14 @@ var generatedPairs = [{
   foreground: 'color.icon',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.icon.accent.red',
   background: 'color.background.accent.red.subtlest',
@@ -1249,6 +1321,10 @@ var generatedPairs = [{
   foreground: 'color.icon.accent.gray',
   background: 'color.background.accent.gray.subtler',
   desiredContrast: 3
+}, {
+  foreground: 'color.icon.inverse',
+  background: 'color.background.accent.lime.bolder',
+  desiredContrast: 3
 }, {
   foreground: 'color.icon.inverse',
   background: 'color.background.accent.red.bolder',
@@ -1453,6 +1529,14 @@ var generatedPairs = [{
   foreground: 'color.icon.information',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.icon.subtle',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.subtle',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.icon.subtle',
   background: 'color.background.accent.red.subtlest',
@@ -1609,6 +1693,14 @@ var generatedPairs = [{
   foreground: 'color.icon.subtle',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.border.accent.red',
   background: 'color.background.accent.red.subtlest',
@@ -1681,6 +1773,10 @@ var generatedPairs = [{
   foreground: 'color.border.accent.gray',
   background: 'color.background.accent.gray.subtler',
   desiredContrast: 3
+}, {
+  foreground: 'color.border.inverse',
+  background: 'color.background.accent.lime.bolder',
+  desiredContrast: 3
 }, {
   foreground: 'color.border.inverse',
   background: 'color.background.accent.red.bolder',
@@ -1873,6 +1969,14 @@ var generatedPairs = [{
   foreground: 'color.border.information',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.border.bold',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.bold',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.border.bold',
   background: 'color.background.accent.red.subtlest',
@@ -2029,6 +2133,14 @@ var generatedPairs = [{
   foreground: 'color.border.bold',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'color.background.accent.lime.subtlest',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'color.background.accent.lime.subtler',
+  desiredContrast: 3
 }, {
   foreground: 'color.background.accent.red.bolder',
   background: 'color.background.accent.red.subtlest',
@@ -2317,6 +2429,46 @@ var generatedPairs = [{
   foreground: 'color.background.information.bold.pressed',
   background: 'color.background.information.pressed',
   desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.overlay',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.overlay.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.overlay.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.raised',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.raised.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.raised.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.background.accent.lime.bolder',
+  background: 'elevation.surface.sunken',
+  desiredContrast: 3
 }, {
   foreground: 'color.background.accent.red.bolder',
   background: 'elevation.surface',
@@ -3677,6 +3829,86 @@ var generatedPairs = [{
   foreground: 'color.text',
   background: 'elevation.surface.sunken',
   desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.hovered',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.pressed',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.overlay',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.overlay.hovered',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.overlay.pressed',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.raised',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.raised.hovered',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.raised.pressed',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime',
+  background: 'elevation.surface.sunken',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.hovered',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.pressed',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.overlay',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.overlay.hovered',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.overlay.pressed',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.raised',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.raised.hovered',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.raised.pressed',
+  desiredContrast: 4.5
+}, {
+  foreground: 'color.text.accent.lime.bolder',
+  background: 'elevation.surface.sunken',
+  desiredContrast: 4.5
 }, {
   foreground: 'color.text.accent.red',
   background: 'elevation.surface',
@@ -4877,6 +5109,46 @@ var generatedPairs = [{
   foreground: 'color.icon',
   background: 'elevation.surface.sunken',
   desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.overlay',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.overlay.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.overlay.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.raised',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.raised.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.raised.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.icon.accent.lime',
+  background: 'elevation.surface.sunken',
+  desiredContrast: 3
 }, {
   foreground: 'color.icon.accent.red',
   background: 'elevation.surface',
@@ -5557,6 +5829,46 @@ var generatedPairs = [{
   foreground: 'color.icon.subtle',
   background: 'elevation.surface.sunken',
   desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.overlay',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.overlay.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.overlay.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.raised',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.raised.hovered',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.raised.pressed',
+  desiredContrast: 3
+}, {
+  foreground: 'color.border.accent.lime',
+  background: 'elevation.surface.sunken',
+  desiredContrast: 3
 }, {
   foreground: 'color.border.accent.red',
   background: 'elevation.surface',

package/dist/cjs/artifacts/palettes-raw/palette.js

@@ -6,10 +6,180 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c144bfcbb2df5e70994524a9f6da2dfa>>
+ * @codegen <<SignedSource::9c6b0dc194cd08f14bf3fd6a258b05a5>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
+  "value": "#EEFBDA",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#EEFBDA",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime100",
+  "path": ["color", "palette", "Lime100"]
+}, {
+  "value": "#D3F1A7",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#D3F1A7",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime200",
+  "path": ["color", "palette", "Lime200"]
+}, {
+  "value": "#B3DF72",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#B3DF72",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime300",
+  "path": ["color", "palette", "Lime300"]
+}, {
+  "value": "#94C748",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#94C748",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime400",
+  "path": ["color", "palette", "Lime400"]
+}, {
+  "value": "#82B536",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#82B536",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime500",
+  "path": ["color", "palette", "Lime500"]
+}, {
+  "value": "#6A9A23",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#6A9A23",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime600",
+  "path": ["color", "palette", "Lime600"]
+}, {
+  "value": "#5B7F24",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#5B7F24",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime700",
+  "path": ["color", "palette", "Lime700"]
+}, {
+  "value": "#4C6B1F",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#4C6B1F",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime800",
+  "path": ["color", "palette", "Lime800"]
+}, {
+  "value": "#37471F",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#37471F",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime900",
+  "path": ["color", "palette", "Lime900"]
+}, {
+  "value": "#2A3818",
+  "attributes": {
+    "group": "palette",
+    "category": "lime"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "#2A3818",
+    "attributes": {
+      "group": "palette",
+      "category": "lime"
+    }
+  },
+  "name": "color.palette.Lime1000",
+  "path": ["color", "palette", "Lime1000"]
+}, {
   "value": "#FFEDEB",
   "attributes": {
     "group": "palette",