@atlaskit/tokens 0.6.3 → 0.7.0

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

@@ -9,59 +9,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.'
+            }
           }
         }
       }
@@ -132,14 +204,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: {
@@ -189,131 +261,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.'
+            }
           }
         }
       }