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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @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

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)",
@@ -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)",

package/dist/json/variables.json

@@ -6836,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.57",
+  "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

@@ -493,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"
+      }
+    }
   }
-}
+}