@adobe/spectrum-tokens 13.0.0-beta.56 → 13.0.0-beta.58

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @adobe/spectrum-tokens
 
+## 13.0.0-beta.58
+
+### Minor Changes
+
+- [#470](https://github.com/adobe/spectrum-tokens/pull/470) [`8de8921`](https://github.com/adobe/spectrum-tokens/commit/8de89219fe13a2a70a20ac230e6181be916bad1f) Thanks [@larz0](https://github.com/larz0)! - Added action bar border color.
+
+  ## Design Motivation
+
+  Similar to the issues reported for popovers (SDS-14251), there isn't sufficient visual contrast of action bars on top of backgrounds in dark theme when used on background-color-layer-2.
+
+  The solution to this issue in both popovers and action bars should be the same (Popover update has been merged)
+
+  This issue was originally reported by the React team. Attached reference images from their implementation, one without border and one with border that matches the current popover border in dark.
+
+  ## Token Diff
+
+  _Tokens added (7):_
+
+  - `action-bar-border-color`
+
+## 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

package/dist/json/drover.json

@@ -39,6 +39,7 @@
       "accent-content-color-selected": "rgb(39, 77, 234)",
       "accent-subtle-background-color-default": "rgb(229, 240, 254)",
       "accent-visual-color": "rgb(75, 117, 255)",
+      "action-bar-border-color": "rgba(255, 255, 255, 0)",
       "avatar-border-color": "rgb(255, 255, 255)",
       "background-base-color": "rgb(255, 255, 255)",
       "background-elevated-color": "rgb(255, 255, 255)",
@@ -524,7 +525,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)",
@@ -752,6 +753,7 @@
       "accent-content-color-selected": "rgb(105, 149, 254)",
       "accent-subtle-background-color-default": "rgb(12, 33, 117)",
       "accent-visual-color": "rgb(86, 129, 255)",
+      "action-bar-border-color": "rgb(68, 68, 68)",
       "avatar-border-color": "rgb(17, 17, 17)",
       "background-base-color": "rgb(17, 17, 17)",
       "background-elevated-color": "rgb(34, 34, 34)",
@@ -1237,7 +1239,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)",

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": {
@@ -6827,6 +6836,33 @@
     "value": "0.1",
     "uuid": "be8fac27-b644-492e-a89d-6c87cfecb8a1"
   },
+  "action-bar-border-color": {
+    "sets": {
+      "light": {
+        "ref": "{transparent-white-25}",
+        "value": "rgba(255, 255, 255, 0)",
+        "uuid": "166159cc-9353-4d22-90f0-64718533d73a"
+      },
+      "dark": {
+        "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": "dac0d761-d8c1-4b1f-bfbe-766651122ecf"
+      }
+    }
+  },
   "white": {
     "value": "rgb(255, 255, 255)",
     "uuid": "9b799da8-2130-417e-b7ee-5e1154a89837"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "13.0.0-beta.56",
+  "version": "13.0.0-beta.58",
   "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",
@@ -483,5 +493,21 @@
     "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/opacity.json",
     "value": "0.1",
     "uuid": "be8fac27-b644-492e-a89d-6c87cfecb8a1"
+  },
+  "action-bar-border-color": {
+    "component": "action-bar",
+    "$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": "166159cc-9353-4d22-90f0-64718533d73a"
+      },
+      "dark": {
+        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
+        "value": "{gray-400}",
+        "uuid": "dac0d761-d8c1-4b1f-bfbe-766651122ecf"
+      }
+    }
   }
 }