feat(tokens): support for composite formats

Author: castastrophe

lint-staged.config.js

@@ -1,7 +1,7 @@
 module.exports = {
 	"*.css": [
 		"stylelint --fix --cache --allow-empty-input --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables",
-		"prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc",
+		"prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc",
 	],
 	"*.{js,json},!package.json": [
 		"eslint --fix --cache --no-error-on-unmatched-pattern"

tokens/custom/dark-vars.css

@@ -17,7 +17,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.spectrum {
+	:root {
 		/** COMPONENT-SPECIFIC OVERRIDES **/
 		--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
 		--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);

tokens/custom/global-vars.css

@@ -12,7 +12,7 @@
  */
 
 /* This file contains overrides and additions to core tokens */
-.spectrum {
+:root {
 	--spectrum-animation-duration-0: 0ms;
 	--spectrum-animation-duration-100: 130ms;
 	--spectrum-animation-duration-200: 160ms;

tokens/custom/light-vars.css

@@ -12,9 +12,7 @@
  */
 
 /* This file contains overrides and additions to core tokens */
-.spectrum {
-	color-scheme: light;
-
+:root {
 	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
 	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
 	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
@@ -58,4 +56,5 @@
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06);
 	--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
+	color-scheme: light;
 }

tokens/custom/medium-vars.css

@@ -13,7 +13,7 @@
 
 /* This file contains overrides and additions to core tokens */
 
-.spectrum {
+:root {
 	/* stylelint-disable-next-line custom-property-pattern -- context identification */
 	--scale: medium;