@adobe/spectrum-tokens 12.0.0-beta.60 → 12.0.0-beta.61

package/CHANGELOG.md

@@ -1,7 +1,9 @@
-# [12.0.0-beta.60](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.59...v12.0.0-beta.60) (2022-11-29)
+# [12.0.0-beta.61](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.60...v12.0.0-beta.61) (2022-12-14)
 
 
-### Bug Fixes
+### Features
 
-* heading-cjk-light-strong-emphasized-font-weight should be font-weight-extra-bold ([db7ce60](https://github.com/adobe/spectrum-tokens/commit/db7ce6071bf643387d4dfa129614d95e50187195))
-* typo in typography - changed `spectrum for express` to `express` ([e19eea3](https://github.com/adobe/spectrum-tokens/commit/e19eea3f8253096f031897a5c69c7e86fee555ea))
+* adding color area tokens (DNA-1234) ([28f42bc](https://github.com/adobe/spectrum-tokens/commit/28f42bcc06e5b0be5c6ce26d01c607a3c6b2b90b))
+* adds navigational indicator tokens (DNA-1236) ([c4eb51c](https://github.com/adobe/spectrum-tokens/commit/c4eb51c4e0deb62c11aac5e18f91ccc4a27c42e8))
+* color-slider tokens (DNA-1238) ([524feaf](https://github.com/adobe/spectrum-tokens/commit/524feaf43ead77ffb681e8ca35dc69182064ef95))
+* color-wheeeeeeeeeeeeeeeeel tokens (DNA-1235) ([9c8daac](https://github.com/adobe/spectrum-tokens/commit/9c8daace803665f1cd5196deb5c016dba33a2fb1))

package/dist/json/drover.json

@@ -88,6 +88,8 @@
       "chartreuse-900": "rgb(87, 116, 0)",
       "chartreuse-background-color-default": "rgb(152, 197, 10)",
       "chartreuse-visual-color": "rgb(135, 177, 3)",
+      "color-area-border-color": "rgb(0, 0, 0)",
+      "color-area-border-width": "1px",
       "cyan-100": "rgb(197, 248, 255)",
       "cyan-1000": "rgb(0, 93, 137)",
       "cyan-1100": "rgb(0, 74, 115)",
@@ -487,6 +489,8 @@
       "chartreuse-900": "rgb(148, 192, 8)",
       "chartreuse-background-color-default": "rgb(148, 192, 8)",
       "chartreuse-visual-color": "rgb(148, 192, 8)",
+      "color-area-border-color": "rgb(255, 255, 255)",
+      "color-area-border-width": "1px",
       "cyan-100": "rgb(0, 61, 98)",
       "cyan-1000": "rgb(84, 211, 241)",
       "cyan-1100": "rgb(127, 228, 249)",
@@ -886,6 +890,8 @@
       "chartreuse-900": "rgb(138, 180, 3)",
       "chartreuse-background-color-default": "rgb(138, 180, 3)",
       "chartreuse-visual-color": "rgb(138, 180, 3)",
+      "color-area-border-color": "rgb(255, 255, 255)",
+      "color-area-border-width": "1px",
       "cyan-100": "rgb(0, 41, 68)",
       "cyan-1000": "rgb(57, 199, 234)",
       "cyan-1100": "rgb(96, 216, 243)",
@@ -1293,6 +1299,19 @@
     "code-size-s": "14px",
     "code-size-xl": "20px",
     "code-size-xs": "12px",
+    "color-area-border-opacity": "0.1",
+    "color-area-border-width": "1px",
+    "color-area-height": "192px",
+    "color-area-minimum-height": "64px",
+    "color-area-minimum-width": "64px",
+    "color-area-width": "192px",
+    "color-control-track-width": "24px",
+    "color-slider-border-rounding": "4px",
+    "color-slider-border-width": "1px",
+    "color-slider-length": "192px",
+    "color-slider-minimum-length": "200px",
+    "color-wheel-area-margin": "12px",
+    "color-wheel-minimum-width": "192px",
     "combo-box-minimum-width-multiplier": "2.5",
     "combo-box-visual-to-field-button-extra-large": "10px",
     "combo-box-visual-to-field-button-large": "9px",
@@ -1484,6 +1503,10 @@
     "meter-minimum-width": "48px",
     "meter-thickness-large": "6px",
     "meter-thickness-small": "4px",
+    "navigational-indicator-top-to-back-icon-extra-large": "17px",
+    "navigational-indicator-top-to-back-icon-large": "14px",
+    "navigational-indicator-top-to-back-icon-medium": "11px",
+    "navigational-indicator-top-to-back-icon-small": "7px",
     "opacity-checkerboard-square-size": "8px",
     "opacity-disabled": "0.3",
     "picker-visual-to-disclosure-icon-extra-large": "10px",

package/dist/json/variables.json

@@ -5547,6 +5547,26 @@
       }
     }
   },
+  "color-area-border-color": {
+    "ref": "{gray-900}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 0, 0)"
+      },
+      "dark": {
+        "value": "rgb(255, 255, 255)"
+      },
+      "darkest": {
+        "value": "rgb(255, 255, 255)"
+      },
+      "wireframe": {
+        "value": "rgb(72, 110, 194)"
+      }
+    }
+  },
+  "color-area-border-opacity": {
+    "value": "0.1"
+  },
   "swatch-border-color": {
     "ref": "{gray-900}",
     "sets": {
@@ -9001,6 +9021,106 @@
       }
     }
   },
+  "color-area-width": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-area-minimum-width": {
+    "sets": {
+      "desktop": {
+        "value": "64px"
+      },
+      "mobile": {
+        "value": "80px"
+      }
+    }
+  },
+  "color-area-height": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-area-minimum-height": {
+    "sets": {
+      "desktop": {
+        "value": "64px"
+      },
+      "mobile": {
+        "value": "80px"
+      }
+    }
+  },
+  "color-area-border-width": {
+    "ref": "{border-width-100}",
+    "sets": {
+      "spectrum": {
+        "value": "1px"
+      },
+      "express": {
+        "value": "2px"
+      }
+    }
+  },
+  "color-area-border-rounding": {
+    "ref": "{corner-radius-100}",
+    "sets": {
+      "spectrum": {},
+      "express": {}
+    }
+  },
+  "color-wheel-minimum-width": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-wheel-area-margin": {
+    "value": "12px"
+  },
+  "color-control-track-width": {
+    "sets": {
+      "desktop": {
+        "value": "24px"
+      },
+      "mobile": {
+        "value": "30px"
+      }
+    }
+  },
+  "color-slider-length": {
+    "sets": {
+      "desktop": {
+        "value": "192px"
+      },
+      "mobile": {
+        "value": "240px"
+      }
+    }
+  },
+  "color-slider-minimum-length": {
+    "value": "200px"
+  },
+  "color-slider-border-width": {
+    "value": "1px"
+  },
+  "color-slider-border-rounding": {
+    "value": "4px"
+  },
   "switch-control-width-small": {
     "sets": {
       "spectrum": {
@@ -10129,6 +10249,46 @@
       }
     }
   },
+  "navigational-indicator-top-to-back-icon-small": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-medium": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-large": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "navigational-indicator-top-to-back-icon-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
   "in-line-alert-minimum-width": {
     "value": "240px"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.0.0-beta.60",
+  "version": "12.0.0-beta.61",
   "description": "",
   "main": "config.js",
   "tokens": "dist/json/variables.json",

package/src/color-component.json

@@ -1,29 +1,46 @@
 {
+  "color-area-border-color": {
+    "component": "color-area",
+    "value": "{gray-900}"
+  },
+  "color-area-border-opacity": {
+    "component": "color-area",
+    "value": "0.1"
+  },
   "swatch-border-color": {
+    "component": "swatch",
     "value": "{gray-900}"
   },
   "swatch-border-opacity": {
+    "component": "swatch",
     "value": "0.51"
   },
   "swatch-disabled-icon-border-color": {
+    "component": "swatch",
     "value": "{black}"
   },
   "swatch-disabled-icon-border-opacity": {
+    "component": "swatch",
     "value": "0.51"
   },
   "thumbnail-border-color": {
+    "component": "thumbnail",
     "value": "{gray-800}"
   },
   "thumbnail-border-opacity": {
+    "component": "thumbnail",
     "value": "0.1"
   },
   "thumbnail-opacity-disabled": {
+    "component": "thumbnail",
     "value": "{opacity-disabled}"
   },
   "opacity-checkerboard-square-light": {
+    "component": "opacity-checkerboard",
     "value": "{white}"
   },
   "opacity-checkerboard-square-dark": {
+    "component": "opacity-checkerboard",
     "sets": {
       "light": {
         "value": "{gray-200}"
@@ -37,6 +54,7 @@
     }
   },
   "avatar-opacity-disabled": {
+    "component": "avatar",
     "value": "{opacity-disabled}"
   }
 }