npm - @sage/design-tokens - Versions diffs - 13.2.0 → 14.0.1 - Mend

@sage/design-tokens 13.2.0 → 14.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1186) hide show

package/js/umd/product/large/dark/components/badge.js CHANGED Viewed

@@ -28,7 +28,7 @@
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.fg.nought}",
+              $value: "{modes.color.generic.content.nought}",
             },
             name: "badgeColorNotificationBorderDefault",
             attributes: {},
@@ -69,7 +69,7 @@
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.fg.nought}",
+              $value: "{modes.color.generic.content.nought}",
             },
             name: "badgeColorNotificationLabelDefault",
             attributes: {},
@@ -82,12 +82,93 @@
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.fg.nought}",
+              $value: "{modes.color.generic.content.nought}",
             },
             name: "badgeColorNotificationLabelAlt",
             attributes: {},
             path: ["badge", "color", "notification", "label-alt"],
           },
+          inverse: {
+            "border-default": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/badge.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.generic.content.extreme}",
+              },
+              name: "badgeColorNotificationInverseBorderDefault",
+              attributes: {},
+              path: [
+                "badge",
+                "color",
+                "notification",
+                "inverse",
+                "border-default",
+              ],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#CD384B",
+              $description: "Used in global nav notification badges",
+              filePath: "data/tokens/components/badge.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.negative.inverse.default}",
+                $description: "Used in global nav notification badges",
+              },
+              name: "badgeColorNotificationInverseBgDefault",
+              attributes: {},
+              path: ["badge", "color", "notification", "inverse", "bg-default"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#0060A7",
+              filePath: "data/tokens/components/badge.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.info.inverse.default}",
+              },
+              name: "badgeColorNotificationInverseBgAlt",
+              attributes: {},
+              path: ["badge", "color", "notification", "inverse", "bg-alt"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/badge.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.generic.content.extreme}",
+              },
+              name: "badgeColorNotificationInverseLabelDefault",
+              attributes: {},
+              path: [
+                "badge",
+                "color",
+                "notification",
+                "inverse",
+                "label-default",
+              ],
+            },
+            "label-alt": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/badge.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.generic.content.extreme}",
+              },
+              name: "badgeColorNotificationInverseLabelAlt",
+              attributes: {},
+              path: ["badge", "color", "notification", "inverse", "label-alt"],
+            },
+          },
         },
       },
       size: {

package/js/umd/product/large/dark/components/button.js CHANGED Viewed

@@ -2191,7 +2191,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#eb646c",
+              $value: "#ea626a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2263,7 +2263,7 @@
           secondary: {
             "bg-hover": {
               $type: "color",
-              $value: "#e13e5314",
+              $value: "#e13e531a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2314,7 +2314,7 @@
             },
             "border-hover": {
               $type: "color",
-              $value: "#eb646c",
+              $value: "#ea626a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2371,7 +2371,7 @@
             },
             "label-hover": {
               $type: "color",
-              $value: "#eb646c",
+              $value: "#ea626a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2394,7 +2394,7 @@
           primary: {
             "bg-active": {
               $type: "color",
-              $value: "#81e57d",
+              $value: "#7ce47a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2448,7 +2448,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#58de5d",
+              $value: "#55dd5b",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2514,7 +2514,7 @@
             inverse: {
               "bg-active": {
                 $type: "color",
-                $value: "#14571a",
+                $value: "#13591a",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -2597,7 +2597,7 @@
               },
               "bg-hover": {
                 $type: "color",
-                $value: "#0e6b1d",
+                $value: "#0e6d1d",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -2704,7 +2704,7 @@
           secondary: {
             "bg-active": {
               $type: "color",
-              $value: "#00d63952",
+              $value: "#00d6394d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2715,9 +2715,22 @@
               attributes: {},
               path: ["button", "color", "typical", "secondary", "bg-active"],
             },
+            "bg-enabled": {
+              $type: "color",
+              $value: "#00d63908",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.defaultAlt3}",
+              },
+              name: "buttonColorTypicalSecondaryBgEnabled",
+              attributes: {},
+              path: ["button", "color", "typical", "secondary", "bg-enabled"],
+            },
             "bg-hover": {
               $type: "color",
-              $value: "#00d63914",
+              $value: "#00d6391a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2730,7 +2743,7 @@
             },
             "border-active": {
               $type: "color",
-              $value: "#81e57d",
+              $value: "#7ce47a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2787,7 +2800,7 @@
             },
             "border-hover": {
               $type: "color",
-              $value: "#58de5d",
+              $value: "#55dd5b",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2865,7 +2878,7 @@
             inverse: {
               "bg-active": {
                 $type: "color",
-                $value: "#00811f52",
+                $value: "#00811f4d",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -2883,9 +2896,30 @@
                   "bg-active",
                 ],
               },
+              "bg-enabled": {
+                $type: "color",
+                $value: "#00811f08",
+                filePath: "data/tokens/components/button.json",
+                isSource: true,
+                original: {
+                  $type: "color",
+                  $value:
+                    "{modes.color.interactive.primary.inverse.defaultAlt3}",
+                },
+                name: "buttonColorTypicalSecondaryInverseBgEnabled",
+                attributes: {},
+                path: [
+                  "button",
+                  "color",
+                  "typical",
+                  "secondary",
+                  "inverse",
+                  "bg-enabled",
+                ],
+              },
               "bg-hover": {
                 $type: "color",
-                $value: "#00811f14",
+                $value: "#0c711d1a",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -2905,7 +2939,7 @@
               },
               "border-active": {
                 $type: "color",
-                $value: "#14571a",
+                $value: "#13591a",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -2966,7 +3000,7 @@
               },
               "border-hover": {
                 $type: "color",
-                $value: "#0e6b1d",
+                $value: "#0e6d1d",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3072,7 +3106,7 @@
           tertiary: {
             "bg-active": {
               $type: "color",
-              $value: "#00d63952",
+              $value: "#00d6394d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3098,7 +3132,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#00d63914",
+              $value: "#00d6391a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3111,7 +3145,7 @@
             },
             "border-active": {
               $type: "color",
-              $value: "#81e57d",
+              $value: "#7ce47a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3143,12 +3177,12 @@
             },
             "border-enabled": {
               $type: "color",
-              $value: "#00d63980",
+              $value: "#00d639cc",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.interactive.primary.defaultAlt2}",
+                $value: "{modes.color.interactive.primary.defaultAlt}",
               },
               name: "buttonColorTypicalTertiaryBorderEnabled",
               attributes: {},
@@ -3162,7 +3196,7 @@
             },
             "border-hover": {
               $type: "color",
-              $value: "#58de5d",
+              $value: "#55dd5b",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3234,7 +3268,7 @@
             inverse: {
               "bg-active": {
                 $type: "color",
-                $value: "#00811f52",
+                $value: "#00811f4d",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3274,7 +3308,7 @@
               },
               "bg-hover": {
                 $type: "color",
-                $value: "#00811f14",
+                $value: "#0c711d1a",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3294,7 +3328,7 @@
               },
               "border-active": {
                 $type: "color",
-                $value: "#14571a",
+                $value: "#13591a",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3334,13 +3368,13 @@
               },
               "border-enabled": {
                 $type: "color",
-                $value: "#00811f80",
+                $value: "#00811fcc",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
                   $type: "color",
                   $value:
-                    "{modes.color.interactive.primary.inverse.defaultAlt2}",
+                    "{modes.color.interactive.primary.inverse.defaultAlt}",
                 },
                 name: "buttonColorTypicalTertiaryInverseBorderEnabled",
                 attributes: {},
@@ -3355,7 +3389,7 @@
               },
               "border-hover": {
                 $type: "color",
-                $value: "#0e6b1d",
+                $value: "#0e6d1d",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3461,7 +3495,7 @@
           subtle: {
             "bg-active": {
               $type: "color",
-              $value: "#ffffff29",
+              $value: "#ffffff26",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3474,7 +3508,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#ffffff14",
+              $value: "#ffffff1a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3540,7 +3574,7 @@
             inverse: {
               "bg-active": {
                 $type: "color",
-                $value: "#00000029",
+                $value: "#00000026",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3561,7 +3595,7 @@
               },
               "bg-hover": {
                 $type: "color",
-                $value: "#00000014",
+                $value: "#0000001a",
                 filePath: "data/tokens/components/button.json",
                 isSource: true,
                 original: {
@@ -3719,7 +3753,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#ffffff14",
+              $value: "#ffffff1a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3813,7 +3847,7 @@
         video: {
           "bg-blur": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {

package/js/umd/product/large/dark/components/container.js CHANGED Viewed

@@ -202,7 +202,7 @@
           },
           "bg-hover": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             $description: "Used for accordion hover backgrounds ",
             filePath: "data/tokens/components/container.json",
             isSource: true,
@@ -244,35 +244,14 @@
             path: ["container", "color", "interactive", "border-alt"],
           },
           "borderalt-hover": {
-            $extensions: {
-              "studio.tokens": {
-                modify: {
-                  type: "mix",
-                  value: "0.16",
-                  space: "lch",
-                  color: "#FFFFFF ",
-                  format: "hex",
-                },
-              },
-            },
             $type: "color",
-            $value: "#464646",
+            $value: "#ffffffe6",
             $description: "For hover border on Link preview.",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
-              $extensions: {
-                "studio.tokens": {
-                  modify: {
-                    type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
-                    space: "lch",
-                    color: "{modes.color.modifier.contrastMore} ",
-                  },
-                },
-              },
               $type: "color",
-              $value: "{container.color.interactive.border-alt}",
+              $value: "{modes.color.interactive.monochrome.default}",
               $description: "For hover border on Link preview.",
             },
             name: "containerColorInteractiveBorderaltHover",
@@ -4625,14 +4604,14 @@
         carousel: {
           hidden: {
             $type: "opacity",
-            $value: "0.30",
+            $value: "0.3",
             $description:
               "opacity applied to next and previous carousel slides",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "opacity",
-              $value: "{modes.color.modifiers.input.disabledFg}",
+              $value: "0.3",
               $description:
                 "opacity applied to next and previous carousel slides",
             },

package/js/umd/product/large/dark/components/form.js CHANGED Viewed

@@ -3169,7 +3169,7 @@
           },
           "bg-duration": {
             $type: "color",
-            $value: "#181818",
+            $value: "#1b1b1b",
             filePath: "data/tokens/components/form.json",
             isSource: true,
             original: {
@@ -3182,7 +3182,7 @@
           },
           "bg-hover": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             filePath: "data/tokens/components/form.json",
             isSource: true,
             original: {
@@ -3303,7 +3303,7 @@
         dropdown: {
           "bg-hover": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             $description: "REF POPOVER ",
             filePath: "data/tokens/components/form.json",
             isSource: true,
@@ -3510,7 +3510,7 @@
           },
           "bg-hover": {
             $type: "color",
-            $value: "#181818",
+            $value: "#1b1b1b",
             filePath: "data/tokens/components/form.json",
             isSource: true,
             original: {

package/js/umd/product/large/dark/components/link.js CHANGED Viewed

@@ -38,7 +38,7 @@
           },
           "label-hover": {
             $type: "color",
-            $value: "#ec6a71",
+            $value: "#ed6e74",
             filePath: "data/tokens/components/link.json",
             isSource: true,
             original: {
@@ -73,7 +73,7 @@
             },
             "label-hover": {
               $type: "color",
-              $value: "#a3303d",
+              $value: "#9f303c",
               filePath: "data/tokens/components/link.json",
               isSource: true,
               original: {
@@ -94,7 +94,7 @@
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.defaultAlt3}",
+              $value: "{modes.color.interactive.primary.defaultAlt2}",
             },
             name: "linkColorTypicalLabelDefault",
             attributes: {},
@@ -102,7 +102,7 @@
           },
           "label-hover": {
             $type: "color",
-            $value: "#73e372",
+            $value: "#71e270",
             filePath: "data/tokens/components/link.json",
             isSource: true,
             original: {
@@ -121,7 +121,7 @@
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.interactive.primary.inverse.defaultAlt3}",
+                $value: "{modes.color.interactive.primary.inverse.defaultAlt2}",
               },
               name: "linkColorTypicalInverseLabelDefault",
               attributes: {},
@@ -129,7 +129,7 @@
             },
             "label-hover": {
               $type: "color",
-              $value: "#10681c",
+              $value: "#11651c",
               filePath: "data/tokens/components/link.json",
               isSource: true,
               original: {

package/js/umd/product/large/dark/components/logo.js CHANGED Viewed

@@ -50,36 +50,6 @@
             path: ["logo", "color", "sage", "bg-alt"],
           },
         },
-        trust: {
-          "bg-default": {
-            $type: "color",
-            $value: "#009023",
-            $description: "filled",
-            filePath: "data/tokens/components/logo.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.status.positive.default}",
-              $description: "filled",
-            },
-            name: "logoColorTrustBgDefault",
-            attributes: {},
-            path: ["logo", "color", "trust", "bg-default"],
-          },
-          outline: {
-            $type: "color",
-            $value: "#FFFFFF",
-            filePath: "data/tokens/components/logo.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.generic.content.extreme}",
-            },
-            name: "logoColorTrustOutline",
-            attributes: {},
-            path: ["logo", "color", "trust", "outline"],
-          },
-        },
         copilot: {
           noBg: {
             "fg-default": {

package/js/umd/product/large/dark/components/nav.js CHANGED Viewed

@@ -51,7 +51,7 @@
           },
           "bg-activealt": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             filePath: "data/tokens/components/nav.json",
             isSource: true,
             original: {
@@ -77,7 +77,7 @@
           },
           "bg-hover": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             filePath: "data/tokens/components/nav.json",
             isSource: true,
             original: {
@@ -295,7 +295,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#ffffff29",
+              $value: "#ffffff26",
               filePath: "data/tokens/components/nav.json",
               isSource: true,
               original: {
@@ -426,7 +426,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#ffffff29",
+              $value: "#ffffff26",
               filePath: "data/tokens/components/nav.json",
               isSource: true,
               original: {
@@ -559,7 +559,7 @@
             },
             "bg-hover": {
               $type: "color",
-              $value: "#ffffff29",
+              $value: "#ffffff26",
               filePath: "data/tokens/components/nav.json",
               isSource: true,
               original: {