@sage/design-tokens 13.2.0 → 14.0.0

package/js/umd/frozenproduct/large/light/components/progress.js

@@ -133,7 +133,22 @@
             },
           },
         },
-        ring: {
+        spinner: {
+          XS: {
+            $type: "sizing",
+            $value: 20,
+            $description: "Loader ring for XS size loader spinners",
+            filePath: "data/tokens/components/progress.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "{global.size.macro.XS} - {global.size.micro.XS}",
+              $description: "Loader ring for XS size loader spinners",
+            },
+            name: "progressSizeSpinnerXs",
+            attributes: {},
+            path: ["progress", "size", "spinner", "XS"],
+          },
           S: {
             $type: "sizing",
             $value: 32,
@@ -145,9 +160,9 @@
               $value: "{global.size.macro.S}",
               $description: "Loader ring",
             },
-            name: "progressSizeRingS",
+            name: "progressSizeSpinnerS",
             attributes: {},
-            path: ["progress", "size", "ring", "S"],
+            path: ["progress", "size", "spinner", "S"],
           },
           M: {
             $type: "sizing",
@@ -160,9 +175,9 @@
               $value: "{global.size.macro.S} * 2",
               $description: "Loader ring",
             },
-            name: "progressSizeRingM",
+            name: "progressSizeSpinnerM",
             attributes: {},
-            path: ["progress", "size", "ring", "M"],
+            path: ["progress", "size", "spinner", "M"],
           },
           L: {
             $type: "sizing",
@@ -175,9 +190,9 @@
               $value: "{global.size.macro.XS} * 4",
               $description: "Loader ring",
             },
-            name: "progressSizeRingL",
+            name: "progressSizeSpinnerL",
             attributes: {},
-            path: ["progress", "size", "ring", "L"],
+            path: ["progress", "size", "spinner", "L"],
           },
         },
         skeleton: {

package/js/umd/frozenproduct/small/dark/components/badge.js

@@ -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/frozenproduct/small/dark/components/logo.js

@@ -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/frozenproduct/small/dark/components/progress.js

@@ -133,7 +133,22 @@
             },
           },
         },
-        ring: {
+        spinner: {
+          XS: {
+            $type: "sizing",
+            $value: 20,
+            $description: "Loader ring for XS size loader spinners",
+            filePath: "data/tokens/components/progress.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "{global.size.macro.XS} - {global.size.micro.XS}",
+              $description: "Loader ring for XS size loader spinners",
+            },
+            name: "progressSizeSpinnerXs",
+            attributes: {},
+            path: ["progress", "size", "spinner", "XS"],
+          },
           S: {
             $type: "sizing",
             $value: 32,
@@ -145,9 +160,9 @@
               $value: "{global.size.macro.S}",
               $description: "Loader ring",
             },
-            name: "progressSizeRingS",
+            name: "progressSizeSpinnerS",
             attributes: {},
-            path: ["progress", "size", "ring", "S"],
+            path: ["progress", "size", "spinner", "S"],
           },
           M: {
             $type: "sizing",
@@ -160,9 +175,9 @@
               $value: "{global.size.macro.S} * 2",
               $description: "Loader ring",
             },
-            name: "progressSizeRingM",
+            name: "progressSizeSpinnerM",
             attributes: {},
-            path: ["progress", "size", "ring", "M"],
+            path: ["progress", "size", "spinner", "M"],
           },
           L: {
             $type: "sizing",
@@ -175,9 +190,9 @@
               $value: "{global.size.macro.XS} * 4",
               $description: "Loader ring",
             },
-            name: "progressSizeRingL",
+            name: "progressSizeSpinnerL",
             attributes: {},
-            path: ["progress", "size", "ring", "L"],
+            path: ["progress", "size", "spinner", "L"],
           },
         },
         skeleton: {

package/js/umd/frozenproduct/small/light/components/badge.js

@@ -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: "#000000",
+              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: "#E13E53",
+              $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: "#007ED9",
+              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: "#000000",
+              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: "#000000",
+              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/frozenproduct/small/light/components/logo.js

@@ -50,36 +50,6 @@
             path: ["logo", "color", "sage", "bg-alt"],
           },
         },
-        trust: {
-          "bg-default": {
-            $type: "color",
-            $value: "#00811F",
-            $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: "#000000",
-            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/frozenproduct/small/light/components/progress.js

@@ -133,7 +133,22 @@
             },
           },
         },
-        ring: {
+        spinner: {
+          XS: {
+            $type: "sizing",
+            $value: 20,
+            $description: "Loader ring for XS size loader spinners",
+            filePath: "data/tokens/components/progress.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "{global.size.macro.XS} - {global.size.micro.XS}",
+              $description: "Loader ring for XS size loader spinners",
+            },
+            name: "progressSizeSpinnerXs",
+            attributes: {},
+            path: ["progress", "size", "spinner", "XS"],
+          },
           S: {
             $type: "sizing",
             $value: 32,
@@ -145,9 +160,9 @@
               $value: "{global.size.macro.S}",
               $description: "Loader ring",
             },
-            name: "progressSizeRingS",
+            name: "progressSizeSpinnerS",
             attributes: {},
-            path: ["progress", "size", "ring", "S"],
+            path: ["progress", "size", "spinner", "S"],
           },
           M: {
             $type: "sizing",
@@ -160,9 +175,9 @@
               $value: "{global.size.macro.S} * 2",
               $description: "Loader ring",
             },
-            name: "progressSizeRingM",
+            name: "progressSizeSpinnerM",
             attributes: {},
-            path: ["progress", "size", "ring", "M"],
+            path: ["progress", "size", "spinner", "M"],
           },
           L: {
             $type: "sizing",
@@ -175,9 +190,9 @@
               $value: "{global.size.macro.XS} * 4",
               $description: "Loader ring",
             },
-            name: "progressSizeRingL",
+            name: "progressSizeSpinnerL",
             attributes: {},
-            path: ["progress", "size", "ring", "L"],
+            path: ["progress", "size", "spinner", "L"],
           },
         },
         skeleton: {

package/js/umd/marketing/large/dark/components/badge.js

@@ -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/marketing/large/dark/components/logo.js

@@ -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": {