@atlaskit/tokens 0.6.1 → 0.7.0

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

@@ -3,59 +3,131 @@ var color = {
     text: {
       accent: {
         blue: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold blue accent backgrounds.'
+            }
           }
         },
         red: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold red accent backgrounds.'
+            }
           }
         },
         orange: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold orange accent backgrounds.'
+            }
           }
         },
         yellow: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold yellow accent backgrounds.'
+            }
           }
         },
         green: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold green accent backgrounds.'
+            }
           }
         },
         purple: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold purple accent backgrounds.'
+            }
           }
         },
         teal: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold teal accent backgrounds.'
+            }
           }
         },
         magenta: {
-          attributes: {
-            group: 'paint',
-            state: 'active',
-            description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use on bold magenta accent backgrounds.'
+            }
           }
         }
       }
@@ -126,14 +198,14 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
-            description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
+            description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
         red: {
           attributes: {
             group: 'paint',
             state: 'active',
-            description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
+            description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
         orange: {
@@ -183,131 +255,243 @@ var color = {
     background: {
       accent: {
         blue: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         red: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         orange: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         yellow: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         green: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         teal: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         purple: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         },
         magenta: {
-          '[default]': {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
-          bold: {
+          subtle: {
             attributes: {
               group: 'paint',
               state: 'active',
               description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
           }
         }
       }

package/dist/esm/tokens/default/color/background.js

@@ -117,6 +117,31 @@ var color = {
         }
       },
       brand: {
+        bold: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Hovered state of color.background.brand.bold'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              description: 'Pressed state of color.background.brand.bold'
+            }
+          }
+        }
+      },
+      selected: {
         '[default]': {
           '[default]': {
             attributes: {
@@ -129,14 +154,14 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Hovered state for color.background.brand'
+              description: 'Hovered state for color.background.selected'
             }
           },
           pressed: {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Pressed state for color.background.brand'
+              description: 'Pressed state for color.background.selected'
             }
           }
         },
@@ -145,21 +170,21 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Use for the backgrounds of primary buttons or elements in a selected state, such as checkboxed and radio buttons.'
+              description: 'Use for the backgrounds of elements in a selected state, such as checkboxed and radio buttons.'
             }
           },
           hovered: {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Hovered state of color.background.brand.bold'
+              description: 'Hovered state of color.background.selected.bold'
             }
           },
           pressed: {
             attributes: {
               group: 'paint',
               state: 'active',
-              description: 'Pressed state of color.background.brand.bold'
+              description: 'Pressed state of color.background.selected.bold'
             }
           }
         }

package/dist/esm/tokens/default/color/border.js

@@ -30,6 +30,13 @@ var color = {
         }
       },
       brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.'
+        }
+      },
+      selected: {
         attributes: {
           group: 'paint',
           state: 'active',

package/dist/esm/tokens/default/color/icon.js

@@ -30,6 +30,13 @@ var color = {
         }
       },
       brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons that reinforce our brand.'
+        }
+      },
+      selected: {
         attributes: {
           group: 'paint',
           state: 'active',

package/dist/esm/tokens/default/color/text.js

@@ -37,6 +37,13 @@ var color = {
         }
       },
       brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for text that reinforces our brand.'
+        }
+      },
+      selected: {
         attributes: {
           group: 'paint',
           state: 'active',