@sage/design-tokens 13.1.0 → 14.0.0

package/ios/product/small/light/components/focus.h

@@ -13,6 +13,10 @@
 #define focusColorBorderalt #000000
 #define focusColorBorder #FFB500
 #define focusColorLabel #000000
+#define focusColorInverseBg #926916
+#define focusColorInverseBorderalt #FFB500
+#define focusColorInverseBorder #000000
+#define focusColorInverseLabel #FFFFFF
 #define focusSizeUnderline 4
 #define focusBorderwidthSecondary 2
 #define focusBorderwidthInner 2

package/ios/product/small/light/components/link.h

@@ -11,6 +11,8 @@
 
 #define linkColorDestructiveLabelDefault #b23342
 #define linkColorDestructiveLabelHover #a3303d
+#define linkColorDestructiveInverseLabelDefault #e85b66
+#define linkColorDestructiveInverseLabelHover #ec6a71
 #define linkColorTypicalLabelDefault #0c711d
 #define linkColorTypicalLabelHover #125e1b
 #define linkColorTypicalInverseLabelDefault #4cdc55

package/ios/product/small/light/components/logo.h

@@ -11,8 +11,6 @@
 
 #define logoColorSageBgDefault #000000
 #define logoColorSageBgAlt #000000
-#define logoColorTrustBgDefault #00811F
-#define logoColorTrustOutline #000000
 #define logoColorCopilotNoBgFgDefault #000000
 #define logoColorAiIdentifierBgStar #000000
 #define logoColorAiIdentifierBgDot #00D639

package/ios/product/small/light/components/progress.h

@@ -16,9 +16,10 @@
 #define progressSizeCarouselselectorActivedotM 16
 #define progressSizeCarouselselectorHitareaM 24
 #define progressSizeCarouselslideXM 56
-#define progressSizeRingS 32
-#define progressSizeRingM 64
-#define progressSizeRingL 96
+#define progressSizeSpinnerXs 20
+#define progressSizeSpinnerS 32
+#define progressSizeSpinnerM 64
+#define progressSizeSpinnerL 96
 #define progressSizeSkeletonResponsiveTextXs clamp(0.875rem, 0.875rem + 0vw, 0.875rem)
 #define progressSizeSkeletonResponsiveTextS clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)
 #define progressSizeSkeletonResponsiveTextM clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)

package/ios/product/small/light/components/table.h

@@ -44,6 +44,7 @@
 #define tableBorderwidthThin 1
 #define tableBorderwidthThick 2
 #define tableSpaceNone 0
+#define tableSpaceYg 4
 #define tableSpaceRowXXs 8
 #define tableSpaceRowXS 12.8
 #define tableSpaceRowXM 12.8

package/ios/product/small/light/mode.h

@@ -73,10 +73,18 @@
 #define modesColorInteractiveDangerDefault #CD384B
 #define modesColorInteractiveDangerDefaultAlt #b23342
 #define modesColorInteractiveDangerHover #aa323f
-#define modesColorInteractiveDangerHoverAlt #f9d1cf
+#define modesColorInteractiveDangerHoverAlt #cd384b14
 #define modesColorInteractiveDangerHoverAlt2 #a3303d
 #define modesColorInteractiveDangerWithActive #FFFFFF
 #define modesColorInteractiveDangerWithDefault #FFFFFF
+#define modesColorInteractiveDangerInverseActive #f28486
+#define modesColorInteractiveDangerInverseDefault #E13E53
+#define modesColorInteractiveDangerInverseDefaultAlt #e85b66
+#define modesColorInteractiveDangerInverseHover #eb646c
+#define modesColorInteractiveDangerInverseHoverAlt #e13e5314
+#define modesColorInteractiveDangerInverseHoverAlt2 #ec6a71
+#define modesColorInteractiveDangerInverseWithActive #000000
+#define modesColorInteractiveDangerInverseWithDefault #000000
 #define modesColorInteractiveDataEntryDefault #FFFFFF
 #define modesColorInteractiveDataEntryWithActive #000000
 #define modesColorInteractiveDataEntryWithActiveAlt #FFFFFF
@@ -87,10 +95,14 @@
 #define modesColorInteractiveDataEntryContent #000000f2
 #define modesColorInteractiveDataEntryContentAlt #0000008c
 #define modesColorInteractiveDataEntryFrozenWithDefault #698495
-#define modesColorInteractiveFocusWithDefault #FFB500
-#define modesColorInteractiveFocusWithDefaultAlt #ffd27e
 #define modesColorInteractiveFocusDefault #000000
 #define modesColorInteractiveFocusContent #000000
+#define modesColorInteractiveFocusWithDefault #FFB500
+#define modesColorInteractiveFocusWithDefaultAlt #ffd27e
+#define modesColorInteractiveFocusInverseDefault #FFB500
+#define modesColorInteractiveFocusInverseContent #FFFFFF
+#define modesColorInteractiveFocusInverseWithDefault #000000
+#define modesColorInteractiveFocusInverseWithDefaultAlt #926916
 #define modesColorInteractiveInactiveDefault #a6a6a6
 #define modesColorInteractiveInactiveMask #000000
 #define modesColorInteractiveInactiveDefaultAlt #f3f3f3
@@ -101,6 +113,7 @@
 #define modesColorInteractiveInactiveFrozenDefaultAlt #e5eaed
 #define modesColorInteractiveInactiveInverseDefault #4b4b4b
 #define modesColorInteractiveInactiveInverseContent #ffffff6b
+#define modesColorInteractiveInactiveInverseContentAlt #000000
 #define modesColorInteractiveMonochromeActive #000000
 #define modesColorInteractiveMonochromeActiveAlt #00000029
 #define modesColorInteractiveMonochromeDefault #000000e6

package/js/common/frozenproduct/large/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/frozenproduct/large/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/frozenproduct/large/dark/components/button.d.ts

@@ -300,6 +300,17 @@ declare const tokens: {
           "label-disabled": DesignToken;
           "label-enabled": DesignToken;
           "label-hover": DesignToken;
+          inverse: {
+            "bg-active": DesignToken;
+            "bg-default": DesignToken;
+            "bg-disabled": DesignToken;
+            "bg-enabled": DesignToken;
+            "bg-hover": DesignToken;
+            "label-active": DesignToken;
+            "label-disabled": DesignToken;
+            "label-enabled": DesignToken;
+            "label-hover": DesignToken;
+          };
         };
         secondary: {
           "bg-active": DesignToken;

package/js/common/frozenproduct/large/dark/components/button.js

@@ -2234,7 +2234,7 @@ module.exports = {
         secondary: {
           "bg-hover": {
             $type: "color",
-            $value: "#3f1a1c",
+            $value: "#e13e5314",
             filePath: "data/tokens/components/button.json",
             isSource: true,
             original: {
@@ -2482,6 +2482,190 @@ module.exports = {
             attributes: {},
             path: ["button", "color", "typical", "primary", "label-hover"],
           },
+          inverse: {
+            "bg-active": {
+              $type: "color",
+              $value: "#14571a",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.active}",
+              },
+              name: "buttonColorTypicalPrimaryInverseBgActive",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "bg-active",
+              ],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#FFFFFF",
+              $description: "For spacer in Split button",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.withDefault}",
+                $description: "For spacer in Split button",
+              },
+              name: "buttonColorTypicalPrimaryInverseBgDefault",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "bg-default",
+              ],
+            },
+            "bg-disabled": {
+              $type: "color",
+              $value: "#a6a6a6",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.inactive.inverse.default}",
+              },
+              name: "buttonColorTypicalPrimaryInverseBgDisabled",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "bg-disabled",
+              ],
+            },
+            "bg-enabled": {
+              $type: "color",
+              $value: "#00811F",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.default}",
+              },
+              name: "buttonColorTypicalPrimaryInverseBgEnabled",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "bg-enabled",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#0e6b1d",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.hover}",
+              },
+              name: "buttonColorTypicalPrimaryInverseBgHover",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "bg-hover",
+              ],
+            },
+            "label-active": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.withActive}",
+              },
+              name: "buttonColorTypicalPrimaryInverseLabelActive",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "label-active",
+              ],
+            },
+            "label-disabled": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.inactive.inverse.contentAlt}",
+              },
+              name: "buttonColorTypicalPrimaryInverseLabelDisabled",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "label-disabled",
+              ],
+            },
+            "label-enabled": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.withDefault}",
+              },
+              name: "buttonColorTypicalPrimaryInverseLabelEnabled",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "label-enabled",
+              ],
+            },
+            "label-hover": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/button.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.primary.inverse.withDefault}",
+              },
+              name: "buttonColorTypicalPrimaryInverseLabelHover",
+              attributes: {},
+              path: [
+                "button",
+                "color",
+                "typical",
+                "primary",
+                "inverse",
+                "label-hover",
+              ],
+            },
+          },
         },
         secondary: {
           "bg-active": {

package/js/common/frozenproduct/large/dark/components/focus.d.ts

@@ -25,6 +25,12 @@ declare const tokens: {
       borderalt: DesignToken;
       border: DesignToken;
       label: DesignToken;
+      inverse: {
+        bg: DesignToken;
+        borderalt: DesignToken;
+        border: DesignToken;
+        label: DesignToken;
+      };
     };
     size: {
       underline: DesignToken;

package/js/common/frozenproduct/large/dark/components/focus.js

@@ -61,6 +61,60 @@ module.exports = {
         attributes: {},
         path: ["focus", "color", "label"],
       },
+      inverse: {
+        bg: {
+          $type: "color",
+          $value: "#ffd27e",
+          filePath: "data/tokens/components/focus.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.focus.inverse.withDefaultAlt}",
+          },
+          name: "focusColorInverseBg",
+          attributes: {},
+          path: ["focus", "color", "inverse", "bg"],
+        },
+        borderalt: {
+          $type: "color",
+          $value: "#000000",
+          filePath: "data/tokens/components/focus.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.focus.inverse.default}",
+          },
+          name: "focusColorInverseBorderalt",
+          attributes: {},
+          path: ["focus", "color", "inverse", "borderalt"],
+        },
+        border: {
+          $type: "color",
+          $value: "#FFB500",
+          filePath: "data/tokens/components/focus.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.focus.inverse.withDefault}",
+          },
+          name: "focusColorInverseBorder",
+          attributes: {},
+          path: ["focus", "color", "inverse", "border"],
+        },
+        label: {
+          $type: "color",
+          $value: "#000000",
+          filePath: "data/tokens/components/focus.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.focus.inverse.content}",
+          },
+          name: "focusColorInverseLabel",
+          attributes: {},
+          path: ["focus", "color", "inverse", "label"],
+        },
+      },
     },
     size: {
       underline: {

package/js/common/frozenproduct/large/dark/components/link.d.ts

@@ -24,6 +24,10 @@ declare const tokens: {
       destructive: {
         "label-default": DesignToken;
         "label-hover": DesignToken;
+        inverse: {
+          "label-default": DesignToken;
+          "label-hover": DesignToken;
+        };
       };
       typical: {
         "label-default": DesignToken;

package/js/common/frozenproduct/large/dark/components/link.js

@@ -38,6 +38,36 @@ module.exports = {
           attributes: {},
           path: ["link", "color", "destructive", "label-hover"],
         },
+        inverse: {
+          "label-default": {
+            $type: "color",
+            $value: "#b23342",
+            $description: ".",
+            filePath: "data/tokens/components/link.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.interactive.danger.inverse.defaultAlt}",
+              $description: ".",
+            },
+            name: "linkColorDestructiveInverseLabelDefault",
+            attributes: {},
+            path: ["link", "color", "destructive", "inverse", "label-default"],
+          },
+          "label-hover": {
+            $type: "color",
+            $value: "#a3303d",
+            filePath: "data/tokens/components/link.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.interactive.danger.inverse.hoverAlt2}",
+            },
+            name: "linkColorDestructiveInverseLabelHover",
+            attributes: {},
+            path: ["link", "color", "destructive", "inverse", "label-hover"],
+          },
+        },
       },
       typical: {
         "label-default": {

package/js/common/frozenproduct/large/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/frozenproduct/large/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": {

package/js/common/frozenproduct/large/dark/components/progress.d.ts

@@ -42,7 +42,8 @@ declare const tokens: {
           M: DesignToken;
         };
       };
-      ring: {
+      spinner: {
+        XS: DesignToken;
         S: DesignToken;
         M: DesignToken;
         L: DesignToken;