@adobe/spectrum-tokens 13.0.0-beta.55 → 13.0.0-beta.57

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @adobe/spectrum-tokens
 
+## 13.0.0-beta.57
+
+### Minor Changes
+
+- [#466](https://github.com/adobe/spectrum-tokens/pull/466) [`53ac0c8`](https://github.com/adobe/spectrum-tokens/commit/53ac0c8ffb8836c636ca990d5802b61eb4ad7c61) Thanks [@larz0](https://github.com/larz0)! - Updated popover border colors:
+
+  popover-border-color: transparent-white-25 (light theme)
+  popover-border-color: gray-400 (dark theme)
+
+  ## Design Motivation
+
+  We've received feedback from Adobe Concept (Kelly Hurlburt) that `1px` `gray-200` border in dark theme doesn't provide sufficient visual contrast when used on `background-color-layer-2`.
+
+  ## Token Diff
+
+  Updated (1)
+
+  `popover-border-color`:
+
+  - `schema`: `alias.json` -> `color-set.json`
+  - `value`: `gray-200` ->
+    - `light.value`: `transparent-white-25`
+    - `dark.value`: `gray-400`
+
+## 13.0.0-beta.56
+
+### Minor Changes
+
+- [#463](https://github.com/adobe/spectrum-tokens/pull/463) [`1ae8051`](https://github.com/adobe/spectrum-tokens/commit/1ae80516c48b70b87a8cd81cde75af8755188d45) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added a component-size-maximum-perspective-down token, which defines that components larger than 96px would appear to scale down more.
+
+  ## Design Motivation
+
+  This token is used in larger components that support a down state that scales, like the select box.
+
+  ## Token Diff
+
+  <details open><summary>Added (1)</summary>
+
+  - `component-size-maximum-perspective-down`
+
+  </details>
+
 ## 13.0.0-beta.55
 
 ### Minor Changes

package/dist/json/drover.json

@@ -524,7 +524,7 @@
       "pink-background-color-default": "rgb(206, 42, 146)",
       "pink-subtle-background-color-default": "rgb(255, 232, 247)",
       "pink-visual-color": "rgb(228, 52, 163)",
-      "popover-border-color": "rgb(225, 225, 225)",
+      "popover-border-color": "rgba(255, 255, 255, 0)",
       "popover-border-opacity": "0",
       "positive-background-color-default": "rgb(5, 131, 78)",
       "positive-background-color-down": "rgb(3, 110, 69)",
@@ -1237,7 +1237,7 @@
       "pink-background-color-default": "rgb(213, 45, 151)",
       "pink-subtle-background-color-default": "rgb(90, 0, 57)",
       "pink-visual-color": "rgb(236, 67, 175)",
-      "popover-border-color": "rgb(50, 50, 50)",
+      "popover-border-color": "rgb(68, 68, 68)",
       "popover-border-opacity": "1.0",
       "positive-background-color-default": "rgb(6, 136, 80)",
       "positive-background-color-down": "rgb(4, 124, 75)",
@@ -1824,6 +1824,7 @@
     "component-pill-edge-to-visual-only-300": "11px",
     "component-pill-edge-to-visual-only-75": "4px",
     "component-size-difference-down": "-2px",
+    "component-size-maximum-perspective-down": "96px",
     "component-size-minimum-perspective-down": "24px",
     "component-size-width-ratio-down": 0.3333,
     "component-to-menu-extra-large": "8px",

package/dist/json/variables.json

@@ -6514,22 +6514,31 @@
     }
   },
   "popover-border-color": {
-    "ref": "{gray-200}",
     "sets": {
       "light": {
-        "value": "rgb(225, 225, 225)",
-        "uuid": "8de4888d-8da5-45a0-8d5d-64a734993ae4"
+        "ref": "{transparent-white-25}",
+        "value": "rgba(255, 255, 255, 0)",
+        "uuid": "66da6f53-5446-43c1-bbe0-73b46763fde1"
       },
       "dark": {
-        "value": "rgb(50, 50, 50)",
-        "uuid": "0a676e7a-8a89-4607-a918-3abcfb0234a2"
-      },
-      "wireframe": {
-        "value": "rgb(230, 236, 248)",
-        "uuid": "eaad36fe-2827-4404-8876-060de75c2b34"
+        "ref": "{gray-400}",
+        "sets": {
+          "light": {
+            "value": "rgb(198, 198, 198)",
+            "uuid": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e"
+          },
+          "dark": {
+            "value": "rgb(68, 68, 68)",
+            "uuid": "c34dd99f-e576-4c98-a89d-86dd47514c55"
+          },
+          "wireframe": {
+            "value": "rgb(183, 200, 235)",
+            "uuid": "4634f126-2240-4de9-b244-ab2b833d70ef"
+          }
+        },
+        "uuid": "825dc035-7b1c-4ddd-b1a9-be1546dae7e3"
       }
-    },
-    "uuid": "66da6f53-5446-43c1-bbe0-73b46763fde1"
+    }
   },
   "popover-border-opacity": {
     "sets": {
@@ -26129,6 +26138,10 @@
     "value": "40px",
     "uuid": "a3e53161-c38a-4ee0-88c2-4a36fd530e51"
   },
+  "component-size-maximum-perspective-down": {
+    "value": "96px",
+    "uuid": "437f2e57-2aa6-41b5-bdcc-e4993dc42168"
+  },
   "accent-color-100": {
     "ref": "{blue-100}",
     "sets": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "13.0.0-beta.55",
+  "version": "13.0.0-beta.57",
   "description": "Design tokens for Spectrum, Adobe's design system",
   "type": "module",
   "main": "index.js",

package/src/color-component.json

@@ -375,9 +375,19 @@
   },
   "popover-border-color": {
     "component": "popover",
-    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
-    "value": "{gray-200}",
-    "uuid": "66da6f53-5446-43c1-bbe0-73b46763fde1"
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
+    "sets": {
+      "light": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+        "value": "{transparent-white-25}",
+        "uuid": "66da6f53-5446-43c1-bbe0-73b46763fde1"
+      },
+      "dark": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+        "value": "{gray-400}",
+        "uuid": "825dc035-7b1c-4ddd-b1a9-be1546dae7e3"
+      }
+    }
   },
   "popover-border-opacity": {
     "component": "popover",
@@ -484,4 +494,4 @@
     "value": "0.1",
     "uuid": "be8fac27-b644-492e-a89d-6c87cfecb8a1"
   }
-}
+}

package/src/layout.json

@@ -2413,5 +2413,10 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
     "value": "{spacing-600}",
     "uuid": "a3e53161-c38a-4ee0-88c2-4a36fd530e51"
+  },
+  "component-size-maximum-perspective-down": {
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
+    "value": "96px",
+    "uuid": "437f2e57-2aa6-41b5-bdcc-e4993dc42168"
   }
-}
+}