@atlaskit/tokens 0.6.2 → 0.7.1

package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js

@@ -48,6 +48,72 @@ var color = {
       }
     },
     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'
+          }
+        }
+      },
       blanket: {
         value: 'N500A'
       },

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.'
+            }
           }
         }
       }

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

@@ -7,10 +7,26 @@ exports.default = void 0;
 var color = {
   color: {
     blanket: {
-      attributes: {
-        group: 'paint',
-        state: 'active',
-        description: 'Use for the screen overlay that appears with modal dialogs'
+      '[default]': {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for the screen overlay that appears with modal dialogs'
+        }
+      },
+      selected: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+        }
+      },
+      danger: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+        }
       }
     },
     background: {