@adobe/spectrum-tokens 12.0.0-beta.13 → 12.0.0-beta.16

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-# [12.0.0-beta.13](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.12...v12.0.0-beta.13) (2022-04-06)
+# [12.0.0-beta.16](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.15...v12.0.0-beta.16) (2022-04-08)
 
 
 ### Features
 
-* adding accent and negative background color ([#16](https://github.com/adobe/spectrum-tokens/issues/16)) ([91afe66](https://github.com/adobe/spectrum-tokens/commit/91afe66f072d98722036caac9cde3c71c972f595))
+* adds informative background aliases ([f44be04](https://github.com/adobe/spectrum-tokens/commit/f44be04cf5220ecf8b90af72a27fa09909fc5c4d))

package/README.md

@@ -1,4 +1,18 @@
-# Spectrum Style Dictionary
+# Spectrum Tokens
+
+---
+  
+  
+# Note: This project is in beta right now.
+
+  
+  
+--- 
+
+Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.
+
+Design tokens are directly integrated into our component libraries, UI kits, and the Spectrum XD plugin. They cover the various options of platform scales, color themes, component states, and more. We also offer teams a variety of token types to use directly within their products if they are not using a Spectrum component library.
+
 
 ## Getting started
 

package/config.js

@@ -18,7 +18,7 @@ StyleDictionary.registerTransform(NameKebabTransfom);
 StyleDictionary.registerFormat(JsonSetsFormatter);
 
 module.exports = {
-  source: ["tokens/**/*.json"],
+  source: ["src/**/*.json"],
   platforms: {
     JSON: {
       buildPath: "dist/json/",

package/dist/json/variables.json

@@ -1580,6 +1580,280 @@
       }
     }
   },
+  "informative-background-color-default": {
+    "sets": {
+      "light": {
+        "ref": "{informative-color-900}",
+        "sets": {
+          "light": {
+            "value": "rgb(2, 101, 220)"
+          },
+          "dark": {
+            "value": "rgb(114, 183, 249)"
+          },
+          "darkest": {
+            "value": "rgb(94, 170, 247)"
+          },
+          "wireframe": {
+            "value": "rgb(154, 177, 227)"
+          }
+        }
+      },
+      "dark": {
+        "ref": "{informative-color-500}",
+        "sets": {
+          "light": {
+            "value": "rgb(120, 187, 250)"
+          },
+          "dark": {
+            "value": "rgb(3, 103, 224)"
+          },
+          "darkest": {
+            "value": "rgb(0, 92, 200)"
+          },
+          "wireframe": {
+            "value": "rgb(216, 225, 244)"
+          }
+        }
+      },
+      "darkest": {
+        "ref": "{informative-color-600}",
+        "sets": {
+          "light": {
+            "value": "rgb(89, 167, 246)"
+          },
+          "dark": {
+            "value": "rgb(19, 121, 243)"
+          },
+          "darkest": {
+            "value": "rgb(6, 108, 231)"
+          },
+          "wireframe": {
+            "value": "rgb(203, 215, 241)"
+          }
+        }
+      },
+      "wireframe": {
+        "ref": "{informative-color-900}",
+        "sets": {
+          "light": {
+            "value": "rgb(2, 101, 220)"
+          },
+          "dark": {
+            "value": "rgb(114, 183, 249)"
+          },
+          "darkest": {
+            "value": "rgb(94, 170, 247)"
+          },
+          "wireframe": {
+            "value": "rgb(154, 177, 227)"
+          }
+        }
+      }
+    }
+  },
+  "informative-background-color-hover": {
+    "sets": {
+      "light": {
+        "ref": "{informative-color-1000}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 84, 182)"
+          },
+          "dark": {
+            "value": "rgb(143, 202, 252)"
+          },
+          "darkest": {
+            "value": "rgb(124, 189, 250)"
+          },
+          "wireframe": {
+            "value": "rgb(133, 161, 219)"
+          }
+        }
+      },
+      "dark": {
+        "ref": "{informative-color-400}",
+        "sets": {
+          "light": {
+            "value": "rgb(150, 206, 253)"
+          },
+          "dark": {
+            "value": "rgb(0, 89, 194)"
+          },
+          "darkest": {
+            "value": "rgb(0, 78, 166)"
+          },
+          "wireframe": {
+            "value": "rgb(226, 232, 247)"
+          }
+        }
+      },
+      "darkest": {
+        "ref": "{informative-color-500}",
+        "sets": {
+          "light": {
+            "value": "rgb(120, 187, 250)"
+          },
+          "dark": {
+            "value": "rgb(3, 103, 224)"
+          },
+          "darkest": {
+            "value": "rgb(0, 92, 200)"
+          },
+          "wireframe": {
+            "value": "rgb(216, 225, 244)"
+          }
+        }
+      },
+      "wireframe": {
+        "ref": "{informative-color-1000}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 84, 182)"
+          },
+          "dark": {
+            "value": "rgb(143, 202, 252)"
+          },
+          "darkest": {
+            "value": "rgb(124, 189, 250)"
+          },
+          "wireframe": {
+            "value": "rgb(133, 161, 219)"
+          }
+        }
+      }
+    }
+  },
+  "informative-background-color-down": {
+    "sets": {
+      "light": {
+        "ref": "{informative-color-1100}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 68, 145)"
+          },
+          "dark": {
+            "value": "rgb(174, 219, 254)"
+          },
+          "darkest": {
+            "value": "rgb(152, 206, 253)"
+          },
+          "wireframe": {
+            "value": "rgb(114, 145, 211)"
+          }
+        }
+      },
+      "dark": {
+        "ref": "{informative-color-300}",
+        "sets": {
+          "light": {
+            "value": "rgb(181, 222, 255)"
+          },
+          "dark": {
+            "value": "rgb(0, 77, 163)"
+          },
+          "darkest": {
+            "value": "rgb(0, 64, 135)"
+          },
+          "wireframe": {
+            "value": "rgb(233, 238, 248)"
+          }
+        }
+      },
+      "darkest": {
+        "ref": "{informative-color-400}",
+        "sets": {
+          "light": {
+            "value": "rgb(150, 206, 253)"
+          },
+          "dark": {
+            "value": "rgb(0, 89, 194)"
+          },
+          "darkest": {
+            "value": "rgb(0, 78, 166)"
+          },
+          "wireframe": {
+            "value": "rgb(226, 232, 247)"
+          }
+        }
+      },
+      "wireframe": {
+        "ref": "{informative-color-1100}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 68, 145)"
+          },
+          "dark": {
+            "value": "rgb(174, 219, 254)"
+          },
+          "darkest": {
+            "value": "rgb(152, 206, 253)"
+          },
+          "wireframe": {
+            "value": "rgb(114, 145, 211)"
+          }
+        }
+      }
+    }
+  },
+  "informative-background-color-key-focus": {
+    "sets": {
+      "light": {
+        "ref": "{informative-color-1000}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 84, 182)"
+          },
+          "dark": {
+            "value": "rgb(143, 202, 252)"
+          },
+          "darkest": {
+            "value": "rgb(124, 189, 250)"
+          },
+          "wireframe": {
+            "value": "rgb(133, 161, 219)"
+          }
+        }
+      },
+      "dark": {
+        "ref": "{informative-color-400}",
+        "sets": {
+          "light": {
+            "value": "rgb(150, 206, 253)"
+          },
+          "dark": {
+            "value": "rgb(0, 89, 194)"
+          },
+          "darkest": {
+            "value": "rgb(0, 78, 166)"
+          },
+          "wireframe": {
+            "value": "rgb(226, 232, 247)"
+          }
+        }
+      },
+      "darkest": {
+        "value": "informativet-color-500}"
+      },
+      "wireframe": {
+        "ref": "{informative-color-1000}",
+        "sets": {
+          "light": {
+            "value": "rgb(0, 84, 182)"
+          },
+          "dark": {
+            "value": "rgb(143, 202, 252)"
+          },
+          "darkest": {
+            "value": "rgb(124, 189, 250)"
+          },
+          "wireframe": {
+            "value": "rgb(133, 161, 219)"
+          }
+        }
+      }
+    }
+  },
   "negative-content-color": {
     "ref": "{negative-color-900}",
     "sets": {
@@ -3270,6 +3544,244 @@
       }
     }
   },
+  "positive-color-100": {
+    "ref": "{green-100}",
+    "sets": {
+      "light": {
+        "value": "rgb(206, 248, 224)"
+      },
+      "dark": {
+        "value": "rgb(4, 67, 41)"
+      },
+      "darkest": {
+        "value": "rgb(10, 44, 28)"
+      },
+      "wireframe": {
+        "value": "rgb(242, 245, 251)"
+      }
+    }
+  },
+  "positive-color-200": {
+    "ref": "{green-200}",
+    "sets": {
+      "light": {
+        "value": "rgb(173, 244, 206)"
+      },
+      "dark": {
+        "value": "rgb(0, 78, 47)"
+      },
+      "darkest": {
+        "value": "rgb(7, 59, 36)"
+      },
+      "wireframe": {
+        "value": "rgb(237, 241, 250)"
+      }
+    }
+  },
+  "positive-color-300": {
+    "ref": "{green-300}",
+    "sets": {
+      "light": {
+        "value": "rgb(137, 236, 188)"
+      },
+      "dark": {
+        "value": "rgb(0, 92, 56)"
+      },
+      "darkest": {
+        "value": "rgb(0, 76, 46)"
+      },
+      "wireframe": {
+        "value": "rgb(233, 238, 248)"
+      }
+    }
+  },
+  "positive-color-400": {
+    "ref": "{green-400}",
+    "sets": {
+      "light": {
+        "value": "rgb(103, 222, 168)"
+      },
+      "dark": {
+        "value": "rgb(0, 108, 67)"
+      },
+      "darkest": {
+        "value": "rgb(0, 93, 57)"
+      },
+      "wireframe": {
+        "value": "rgb(226, 232, 247)"
+      }
+    }
+  },
+  "positive-color-500": {
+    "ref": "{green-500}",
+    "sets": {
+      "light": {
+        "value": "rgb(73, 204, 147)"
+      },
+      "dark": {
+        "value": "rgb(0, 125, 78)"
+      },
+      "darkest": {
+        "value": "rgb(0, 111, 69)"
+      },
+      "wireframe": {
+        "value": "rgb(216, 225, 244)"
+      }
+    }
+  },
+  "positive-color-600": {
+    "ref": "{green-600}",
+    "sets": {
+      "light": {
+        "value": "rgb(47, 184, 128)"
+      },
+      "dark": {
+        "value": "rgb(0, 143, 93)"
+      },
+      "darkest": {
+        "value": "rgb(0, 130, 82)"
+      },
+      "wireframe": {
+        "value": "rgb(203, 215, 241)"
+      }
+    }
+  },
+  "positive-color-700": {
+    "ref": "{green-700}",
+    "sets": {
+      "light": {
+        "value": "rgb(21, 164, 110)"
+      },
+      "dark": {
+        "value": "rgb(18, 162, 108)"
+      },
+      "darkest": {
+        "value": "rgb(0, 149, 98)"
+      },
+      "wireframe": {
+        "value": "rgb(190, 205, 237)"
+      }
+    }
+  },
+  "positive-color-800": {
+    "ref": "{green-800}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 143, 93)"
+      },
+      "dark": {
+        "value": "rgb(43, 180, 125)"
+      },
+      "darkest": {
+        "value": "rgb(28, 168, 114)"
+      },
+      "wireframe": {
+        "value": "rgb(173, 192, 233)"
+      }
+    }
+  },
+  "positive-color-900": {
+    "ref": "{green-900}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 122, 77)"
+      },
+      "dark": {
+        "value": "rgb(67, 199, 143)"
+      },
+      "darkest": {
+        "value": "rgb(52, 187, 132)"
+      },
+      "wireframe": {
+        "value": "rgb(154, 177, 227)"
+      }
+    }
+  },
+  "positive-color-1000": {
+    "ref": "{green-1000}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 101, 62)"
+      },
+      "dark": {
+        "value": "rgb(94, 217, 162)"
+      },
+      "darkest": {
+        "value": "rgb(75, 205, 149)"
+      },
+      "wireframe": {
+        "value": "rgb(133, 161, 219)"
+      }
+    }
+  },
+  "positive-color-1100": {
+    "ref": "{green-1100}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 81, 50)"
+      },
+      "dark": {
+        "value": "rgb(129, 233, 184)"
+      },
+      "darkest": {
+        "value": "rgb(103, 222, 168)"
+      },
+      "wireframe": {
+        "value": "rgb(114, 145, 211)"
+      }
+    }
+  },
+  "positive-color-1200": {
+    "ref": "{green-1200}",
+    "sets": {
+      "light": {
+        "value": "rgb(5, 63, 39)"
+      },
+      "dark": {
+        "value": "rgb(177, 244, 209)"
+      },
+      "darkest": {
+        "value": "rgb(137, 236, 188)"
+      },
+      "wireframe": {
+        "value": "rgb(96, 130, 201)"
+      }
+    }
+  },
+  "positive-color-1300": {
+    "ref": "{green-1300}",
+    "sets": {
+      "light": {
+        "value": "rgb(10, 46, 29)"
+      },
+      "dark": {
+        "value": "rgb(223, 250, 234)"
+      },
+      "darkest": {
+        "value": "rgb(177, 244, 209)"
+      },
+      "wireframe": {
+        "value": "rgb(82, 117, 192)"
+      }
+    }
+  },
+  "positive-color-1400": {
+    "ref": "{green-1400}",
+    "sets": {
+      "light": {
+        "value": "rgb(10, 32, 21)"
+      },
+      "dark": {
+        "value": "rgb(254, 255, 252)"
+      },
+      "darkest": {
+        "value": "rgb(214, 249, 228)"
+      },
+      "wireframe": {
+        "value": "rgb(74, 109, 184)"
+      }
+    }
+  },
   "black": {
     "value": "rgb(0, 0, 0)"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.0.0-beta.13",
+  "version": "12.0.0-beta.16",
   "description": "",
   "main": "config.js",
   "scripts": {

package/{tokens → src}/color-alias.json

@@ -293,6 +293,70 @@
       }
     }
   },
+  "informative-background-color-default": {
+    "sets": {
+      "light": {
+        "value": "{informative-color-900}"
+      },
+      "dark": {
+        "value": "{informative-color-500}"
+      },
+      "darkest": {
+        "value": "{informative-color-600}"
+      },
+      "wireframe": {
+        "value": "{informative-color-900}"
+      }
+    }
+  },
+  "informative-background-color-hover": {
+    "sets": {
+      "light": {
+        "value": "{informative-color-1000}"
+      },
+      "dark": {
+        "value": "{informative-color-400}"
+      },
+      "darkest": {
+        "value": "{informative-color-500}"
+      },
+      "wireframe": {
+        "value": "{informative-color-1000}"
+      }
+    }
+  },
+  "informative-background-color-down": {
+    "sets": {
+      "light": {
+        "value": "{informative-color-1100}"
+      },
+      "dark": {
+        "value": "{informative-color-300}"
+      },
+      "darkest": {
+        "value": "{informative-color-400}"
+      },
+      "wireframe": {
+        "value": "{informative-color-1100}"
+      }
+    }
+  },
+  "informative-background-color-key-focus": {
+    "sets": {
+      "light": {
+        "value": "{informative-color-1000}"
+      },
+      "dark": {
+        "value": "{informative-color-400}"
+      },
+      "darkest": {
+        "value": "informativet-color-500}"
+      },
+      "wireframe": {
+        "value": "{informative-color-1000}"
+      }
+    }
+  },
 
   "negative-content-color": {
     "value": "{negative-color-900}"

package/{tokens → src}/color-semantic.json

@@ -264,5 +264,47 @@
   },
   "notice-color-1400": {
     "value": "{orange-1400}"
+  },
+  "positive-color-100": {
+    "value": "{green-100}"
+  },
+  "positive-color-200": {
+    "value": "{green-200}"
+  },
+  "positive-color-300": {
+    "value": "{green-300}"
+  },
+  "positive-color-400": {
+    "value": "{green-400}"
+  },
+  "positive-color-500": {
+    "value": "{green-500}"
+  },
+  "positive-color-600": {
+    "value": "{green-600}"
+  },
+  "positive-color-700": {
+    "value": "{green-700}"
+  },
+  "positive-color-800": {
+    "value": "{green-800}"
+  },
+  "positive-color-900": {
+    "value": "{green-900}"
+  },
+  "positive-color-1000": {
+    "value": "{green-1000}"
+  },
+  "positive-color-1100": {
+    "value": "{green-1100}"
+  },
+  "positive-color-1200": {
+    "value": "{green-1200}"
+  },
+  "positive-color-1300": {
+    "value": "{green-1300}"
+  },
+  "positive-color-1400": {
+    "value": "{green-1400}"
   }
 }