chore: pr feedback

packages/paste-core/primitives/box/type-docs.json

@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

packages/paste-core/primitives/sibling-box/type-docs.json

@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

packages/paste-core/primitives/text/type-docs.json

@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 84 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

packages/paste-design-tokens/tokens/aliases/color-palette.yml

@@ -41,7 +41,7 @@ aliases:
   palette-gray-80: "#394762"
   palette-gray-85: "#25395b"
   palette-gray-90: "#1f304c"
-  palette-gray-95: "#17243a"
+  palette-gray-95: "#19273E"
   palette-gray-100: "#121c2d"
   palette-gray-110: "#0F1621"
 
@@ -58,7 +58,6 @@ aliases:
   palette-gray-0-transparent-100: "rgba(255, 255, 255, 1)"
 
   ## Grays transparent based on dark gray
-  palette-gray-100-transparent-05: "rgba(18, 28, 45, 0.05)"
   palette-gray-100-transparent-10: "rgba(18, 28, 45, 0.1)"
   palette-gray-100-transparent-20: "rgba(18, 28, 45, 0.2)"
   palette-gray-100-transparent-30: "rgba(18, 28, 45, 0.3)"
@@ -71,8 +70,11 @@ aliases:
   palette-gray-100-transparent-100: "rgba(18, 28, 45, 1)"
 
   ## Grays transparent based on darkest gray
-  palette-gray-110-transparent-05: "rgba(15,22,33 0.05)"
-  palette-gray-110-transparent-10: "rgba(15,22,33 0.1)"
+  palette-gray-110-transparent-05: "rgba(15, 22, 33, 0.05)"
+  palette-gray-110-transparent-10: "rgba(15, 22, 33, 0.1)"
+
+  ## Blacks transparent
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
 
   ## Blues transparent based on darkest blue
   palette-blue-100-transparent-10: "rgba(6, 3, 58, 0.1)"

packages/paste-design-tokens/tokens/aliases/color.yml

@@ -11,4 +11,3 @@ aliases:
   sun: "#FF7A00"
   white: "#FFFFFF"
   white-accent: "#F6FBFE"
-  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"

packages/paste-design-tokens/tokens/global/background-color.yml

@@ -35,7 +35,7 @@ props:
     comment: Weak background color used for containers.
   color-background-weaker:
     value: "{!palette-gray-0}"
-    comment: Weaker background color used for containers.
+    comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
 
   # brand backgrounds
   color-background-brand:

packages/paste-design-tokens/tokens/global/box-shadow.yml

@@ -4,7 +4,6 @@ global:
 imports:
   - ../aliases/box-shadow.yml
   - ../aliases/offset.yml
-  - ../aliases/color.yml
 props:
   shadow-high:
     value: "{!shadow-elevation-30}"
@@ -262,28 +261,31 @@ props:
   # Elevation
   shadow-elevation-05:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-15}"
-    comment: Shadow border for elevation.
+    comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-top-05:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-15}"
-    comment: Top shadow border for elevation.
+    comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-bottom-05:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-15}"
-    comment: Bottom shadow border for elevation.
+    comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-inverse-05:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}"
-    comment: Shadow border for inverse elevation.
-  shadow-elevation-inverse-left-05:
+    comment: Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations.
+  shadow-elevation-bottom-inverse-05:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Left shadow border for inverse elevation.
+    comment: Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.
+  shadow-elevation-right-inverse-05:
+    value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
+    comment: Accent shadows that subtly define the left edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-10:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-10}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
-    comment: Shadow border for elevation.
-  shadow-inverse-elevation-10:
-    value: "{!offset-negative-05} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
-    comment: Shadow border for inverse elevation.
+    comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
+  shadow-elevation-inverse-10:
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
+    comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Shadow border for elevation.
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Left shadow border for elevation.
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.

packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml

@@ -2,7 +2,6 @@ imports:
   - ../../../aliases/box-shadow.yml
   - ../../../aliases/offset.yml
   - ./color-palette.yml
-  - ./color.yml
 aliases:
   shadow-elevation-0: "none"
   shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"

packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml

@@ -99,6 +99,18 @@ aliases:
   palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)"
   palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)"
 
+  ## Blacks transparent
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
+  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
+  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
+  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
+  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
+  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
+  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
+  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
+
   ## Greens
   palette-green-10: "#edfdf3"
   palette-green-20: "#d1fae0"

packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml

@@ -3,7 +3,6 @@ global:
   category: background-color
 imports:
   - ../../../global/background-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # base background
@@ -33,6 +32,7 @@ props:
     comment: Weak default background color.
   color-background-weaker:
     value: "{!palette-gray-100}"
+    comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
 
   # brand backgrounds
   color-background-brand:

packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml

@@ -3,7 +3,6 @@ global:
   category: border-color
 imports:
   - ../../../global/border-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   color-border-strong:

packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml

@@ -188,19 +188,19 @@ props:
   # Elevation
   shadow-elevation-05:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}"
-    comment: Shadow border for elevation.
+    comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-top-05:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Top shadow border for elevation.
+    comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-bottom-05:
     value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}"
-    comment: Bottom shadow border for elevation.
+    comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations.
   shadow-elevation-10:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-20} {!offset-25} {!offset-0} {!palette-black-transparent-40}"
-    comment: Shadow border for elevation.
+    comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
-    comment: Shadow border for elevation.
+    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-100-transparent-05}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Left shadow border for elevation.
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.

packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml

@@ -3,7 +3,6 @@ global:
   category: text-color
 imports:
   - ../../../global/text-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # body text

packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml

@@ -2,7 +2,6 @@ imports:
   - ../../../aliases/box-shadow.yml
   - ../../../aliases/offset.yml
   - ./color-palette.yml
-  - ./color.yml
 aliases:
   shadow-elevation-0: "none"
   shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}"

packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml

@@ -99,6 +99,18 @@ aliases:
   palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)"
   palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)"
 
+  # Blacks transparent
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
+  palette-black-transparent-20: "rgba(0, 0, 0, 0.2)"
+  palette-black-transparent-30: "rgba(0, 0, 0, 0.3)"
+  palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
+  palette-black-transparent-50: "rgba(0, 0, 0, 0.5)"
+  palette-black-transparent-60: "rgba(0, 0, 0, 0.6)"
+  palette-black-transparent-70: "rgba(0, 0, 0, 0.7)"
+  palette-black-transparent-80: "rgba(0, 0, 0, 0.8)"
+  palette-black-transparent-90: "rgba(0, 0, 0, 0.9)"
+  palette-black-transparent-100: "rgba(0, 0, 0, 1)"
+
   ## Greens
   palette-green-10: "#edfdf3"
   palette-green-20: "#d1fae0"

packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml

@@ -3,7 +3,6 @@ global:
   category: background-color
 imports:
   - ../../../global/background-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # base background

packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml

@@ -3,7 +3,6 @@ global:
   category: border-color
 imports:
   - ../../../global/border-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   color-border-strong:

packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml

@@ -3,7 +3,6 @@ global:
   category: text-color
 imports:
   - ../../../global/text-color.yml
-  - ../aliases/color.yml
   - ../aliases/color-palette.yml
 props:
   # body text

packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml

@@ -12,7 +12,7 @@ props:
     value: "{!palette-gray-90}"
     comment: Strong inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-weaker:
-    value: "{!palette-gray-0}"
+    value: "{!palette-gray-100}"
 
   # brand backgrounds
   color-background-brand:

packages/paste-website/src/__tests__/colorGradient.test.tsx

@@ -4,7 +4,7 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20",
 const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"];
 const aliasValues = [
   "#121c2d",
-  "#17243a",
+  "#19273E",
   "#1f304c",
   "#25395b",
   "#394762",