@sage/design-tokens 13.2.0 → 14.0.1

package/js/common/marketing/small/dark/components/badge.d.ts

@@ -27,6 +27,13 @@ declare const tokens: {
         "bg-alt": DesignToken;
         "label-default": DesignToken;
         "label-alt": DesignToken;
+        inverse: {
+          "border-default": DesignToken;
+          "bg-default": DesignToken;
+          "bg-alt": DesignToken;
+          "label-default": DesignToken;
+          "label-alt": DesignToken;
+        };
       };
     };
     size: {

package/js/common/marketing/small/dark/components/badge.js

@@ -17,7 +17,7 @@ module.exports = {
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.fg.nought}",
+            $value: "{modes.color.generic.content.nought}",
           },
           name: "badgeColorNotificationBorderDefault",
           attributes: {},
@@ -58,7 +58,7 @@ module.exports = {
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.fg.nought}",
+            $value: "{modes.color.generic.content.nought}",
           },
           name: "badgeColorNotificationLabelDefault",
           attributes: {},
@@ -71,12 +71,93 @@ module.exports = {
           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/common/marketing/small/dark/components/button.d.ts

@@ -314,6 +314,7 @@ declare const tokens: {
         };
         secondary: {
           "bg-active": DesignToken;
+          "bg-enabled": DesignToken;
           "bg-hover": DesignToken;
           "border-active": DesignToken;
           "border-disabled": DesignToken;
@@ -325,6 +326,7 @@ declare const tokens: {
           "label-hover": DesignToken;
           inverse: {
             "bg-active": DesignToken;
+            "bg-enabled": DesignToken;
             "bg-hover": DesignToken;
             "border-active": DesignToken;
             "border-disabled": DesignToken;

package/js/common/marketing/small/dark/components/button.js

@@ -2168,7 +2168,7 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#eb646c",
+            $value: "#ea626a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2234,7 +2234,7 @@ module.exports = {
         secondary: {
           "bg-hover": {
             $type: "color",
-            $value: "#e13e5314",
+            $value: "#e13e531a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2285,7 +2285,7 @@ module.exports = {
           },
           "border-hover": {
             $type: "color",
-            $value: "#eb646c",
+            $value: "#ea626a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2342,7 +2342,7 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#eb646c",
+            $value: "#ea626a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2365,7 +2365,7 @@ module.exports = {
         primary: {
           "bg-active": {
             $type: "color",
-            $value: "#81e57d",
+            $value: "#7ce47a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2419,7 +2419,7 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#58de5d",
+            $value: "#55dd5b",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2485,7 +2485,7 @@ module.exports = {
           inverse: {
             "bg-active": {
               $type: "color",
-              $value: "#14571a",
+              $value: "#13591a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2567,7 +2567,7 @@ module.exports = {
             },
             "bg-hover": {
               $type: "color",
-              $value: "#0e6b1d",
+              $value: "#0e6d1d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2670,7 +2670,7 @@ module.exports = {
         secondary: {
           "bg-active": {
             $type: "color",
-            $value: "#00d63952",
+            $value: "#00d6394d",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2681,9 +2681,22 @@ module.exports = {
             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: {
@@ -2696,7 +2709,7 @@ module.exports = {
           },
           "border-active": {
             $type: "color",
-            $value: "#81e57d",
+            $value: "#7ce47a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2741,7 +2754,7 @@ module.exports = {
           },
           "border-hover": {
             $type: "color",
-            $value: "#58de5d",
+            $value: "#55dd5b",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2807,7 +2820,7 @@ module.exports = {
           inverse: {
             "bg-active": {
               $type: "color",
-              $value: "#00811f52",
+              $value: "#00811f4d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2825,9 +2838,29 @@ module.exports = {
                 "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: {
@@ -2847,7 +2880,7 @@ module.exports = {
             },
             "border-active": {
               $type: "color",
-              $value: "#14571a",
+              $value: "#13591a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -2907,7 +2940,7 @@ module.exports = {
             },
             "border-hover": {
               $type: "color",
-              $value: "#0e6b1d",
+              $value: "#0e6d1d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3012,7 +3045,7 @@ module.exports = {
         tertiary: {
           "bg-active": {
             $type: "color",
-            $value: "#00d63952",
+            $value: "#00d6394d",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3038,7 +3071,7 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#00d63914",
+            $value: "#00d6391a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3051,7 +3084,7 @@ module.exports = {
           },
           "border-active": {
             $type: "color",
-            $value: "#81e57d",
+            $value: "#7ce47a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3077,12 +3110,12 @@ module.exports = {
           },
           "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: {},
@@ -3090,7 +3123,7 @@ module.exports = {
           },
           "border-hover": {
             $type: "color",
-            $value: "#58de5d",
+            $value: "#55dd5b",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3156,7 +3189,7 @@ module.exports = {
           inverse: {
             "bg-active": {
               $type: "color",
-              $value: "#00811f52",
+              $value: "#00811f4d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3196,7 +3229,7 @@ module.exports = {
             },
             "bg-hover": {
               $type: "color",
-              $value: "#00811f14",
+              $value: "#0c711d1a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3216,7 +3249,7 @@ module.exports = {
             },
             "border-active": {
               $type: "color",
-              $value: "#14571a",
+              $value: "#13591a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3256,12 +3289,12 @@ module.exports = {
             },
             "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}",
+                $value: "{modes.color.interactive.primary.inverse.defaultAlt}",
               },
               name: "buttonColorTypicalTertiaryInverseBorderEnabled",
               attributes: {},
@@ -3276,7 +3309,7 @@ module.exports = {
             },
             "border-hover": {
               $type: "color",
-              $value: "#0e6b1d",
+              $value: "#0e6d1d",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3381,7 +3414,7 @@ module.exports = {
         subtle: {
           "bg-active": {
             $type: "color",
-            $value: "#ffffff29",
+            $value: "#ffffff26",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3394,7 +3427,7 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3460,7 +3493,7 @@ module.exports = {
           inverse: {
             "bg-active": {
               $type: "color",
-              $value: "#00000029",
+              $value: "#00000026",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3481,7 +3514,7 @@ module.exports = {
             },
             "bg-hover": {
               $type: "color",
-              $value: "#00000014",
+              $value: "#0000001a",
               filePath: "data/tokens/components/button.json",
               isSource: true,
               original: {
@@ -3631,7 +3664,7 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#ffffff14",
+            $value: "#ffffff1a",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -3725,7 +3758,7 @@ module.exports = {
       video: {
         "bg-blur": {
           $type: "color",
-          $value: "#ffffff14",
+          $value: "#ffffff1a",
           filePath: "data/tokens/components/button.json",
           isSource: true,
           original: {

package/js/common/marketing/small/dark/components/container.js

@@ -185,7 +185,7 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#ffffff14",
+          $value: "#ffffff1a",
           $description: "Used for accordion hover backgrounds ",
           filePath: "data/tokens/components/container.json",
           isSource: true,
@@ -227,35 +227,14 @@ module.exports = {
           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",
@@ -4530,13 +4509,13 @@ module.exports = {
       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/common/marketing/small/dark/components/form.js

@@ -3151,7 +3151,7 @@ module.exports = {
         },
         "bg-duration": {
           $type: "color",
-          $value: "#181818",
+          $value: "#1b1b1b",
           filePath: "data/tokens/components/form.json",
           isSource: true,
           original: {
@@ -3164,7 +3164,7 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#ffffff14",
+          $value: "#ffffff1a",
           filePath: "data/tokens/components/form.json",
           isSource: true,
           original: {
@@ -3285,7 +3285,7 @@ module.exports = {
       dropdown: {
         "bg-hover": {
           $type: "color",
-          $value: "#ffffff14",
+          $value: "#ffffff1a",
           $description: "REF POPOVER ",
           filePath: "data/tokens/components/form.json",
           isSource: true,
@@ -3492,7 +3492,7 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#181818",
+          $value: "#1b1b1b",
           filePath: "data/tokens/components/form.json",
           isSource: true,
           original: {

package/js/common/marketing/small/dark/components/link.js

@@ -27,7 +27,7 @@ module.exports = {
         },
         "label-hover": {
           $type: "color",
-          $value: "#ec6a71",
+          $value: "#ed6e74",
           filePath: "data/tokens/components/link.json",
           isSource: true,
           original: {
@@ -56,7 +56,7 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#a3303d",
+            $value: "#9f303c",
             filePath: "data/tokens/components/link.json",
             isSource: true,
             original: {
@@ -77,7 +77,7 @@ module.exports = {
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.defaultAlt3}",
+            $value: "{modes.color.interactive.primary.defaultAlt2}",
           },
           name: "linkColorTypicalLabelDefault",
           attributes: {},
@@ -85,7 +85,7 @@ module.exports = {
         },
         "label-hover": {
           $type: "color",
-          $value: "#73e372",
+          $value: "#71e270",
           filePath: "data/tokens/components/link.json",
           isSource: true,
           original: {
@@ -104,7 +104,7 @@ module.exports = {
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.inverse.defaultAlt3}",
+              $value: "{modes.color.interactive.primary.inverse.defaultAlt2}",
             },
             name: "linkColorTypicalInverseLabelDefault",
             attributes: {},
@@ -112,7 +112,7 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#10681c",
+            $value: "#11651c",
             filePath: "data/tokens/components/link.json",
             isSource: true,
             original: {

package/js/common/marketing/small/dark/components/logo.d.ts

@@ -25,10 +25,6 @@ declare const tokens: {
         "bg-default": DesignToken;
         "bg-alt": DesignToken;
       };
-      trust: {
-        "bg-default": DesignToken;
-        outline: DesignToken;
-      };
       copilot: {
         noBg: {
           "fg-default": DesignToken;

package/js/common/marketing/small/dark/components/logo.js

@@ -39,36 +39,6 @@ module.exports = {
           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": {