@sage/design-tokens 13.2.0 → 14.0.0

package/json/flat/product/large/light/components/progress.json

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

package/json/flat/product/small/dark/components/badge.json

@@ -4,6 +4,11 @@
   "badgeColorNotificationBgAlt": "#007ED9",
   "badgeColorNotificationLabelDefault": "#000000",
   "badgeColorNotificationLabelAlt": "#000000",
+  "badgeColorNotificationInverseBorderDefault": "#FFFFFF",
+  "badgeColorNotificationInverseBgDefault": "#CD384B",
+  "badgeColorNotificationInverseBgAlt": "#0060A7",
+  "badgeColorNotificationInverseLabelDefault": "#FFFFFF",
+  "badgeColorNotificationInverseLabelAlt": "#FFFFFF",
   "badgeSizeMicroDot": 8,
   "badgeSizeMicroNumberedMin": 16,
   "badgeSizeMicroNumberedMax": 32,

package/json/flat/product/small/dark/components/logo.json

@@ -1,8 +1,6 @@
 {
   "logoColorSageBgDefault": "#00D639",
   "logoColorSageBgAlt": "#FFFFFF",
-  "logoColorTrustBgDefault": "#009023",
-  "logoColorTrustOutline": "#FFFFFF",
   "logoColorCopilotNoBgFgDefault": "#FFFFFF",
   "logoColorAiIdentifierBgStar": "#FFFFFF",
   "logoColorAiIdentifierBgDot": "#00D639",

package/json/flat/product/small/dark/components/progress.json

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

package/json/flat/product/small/light/components/badge.json

@@ -4,6 +4,11 @@
   "badgeColorNotificationBgAlt": "#0060A7",
   "badgeColorNotificationLabelDefault": "#FFFFFF",
   "badgeColorNotificationLabelAlt": "#FFFFFF",
+  "badgeColorNotificationInverseBorderDefault": "#000000",
+  "badgeColorNotificationInverseBgDefault": "#E13E53",
+  "badgeColorNotificationInverseBgAlt": "#007ED9",
+  "badgeColorNotificationInverseLabelDefault": "#000000",
+  "badgeColorNotificationInverseLabelAlt": "#000000",
   "badgeSizeMicroDot": 8,
   "badgeSizeMicroNumberedMin": 16,
   "badgeSizeMicroNumberedMax": 32,

package/json/flat/product/small/light/components/logo.json

@@ -1,8 +1,6 @@
 {
   "logoColorSageBgDefault": "#000000",
   "logoColorSageBgAlt": "#000000",
-  "logoColorTrustBgDefault": "#00811F",
-  "logoColorTrustOutline": "#000000",
   "logoColorCopilotNoBgFgDefault": "#000000",
   "logoColorAiIdentifierBgStar": "#000000",
   "logoColorAiIdentifierBgDot": "#00D639",

package/json/flat/product/small/light/components/progress.json

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

package/json/nested/frozenproduct/large/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/frozenproduct/large/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/frozenproduct/large/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/frozenproduct/large/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/frozenproduct/large/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/frozenproduct/large/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/frozenproduct/small/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/frozenproduct/small/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/frozenproduct/small/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/frozenproduct/small/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/frozenproduct/small/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/frozenproduct/small/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/marketing/large/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/marketing/large/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/marketing/large/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/marketing/large/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/marketing/large/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/marketing/large/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/marketing/small/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/marketing/small/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/marketing/small/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/marketing/small/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/marketing/small/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/marketing/small/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/product/large/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/product/large/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/product/large/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/product/large/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/product/large/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/product/large/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/product/small/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/product/small/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/product/small/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/product/small/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/product/small/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/product/small/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "13.2.0",
+  "version": "14.0.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/frozenproduct/large/components/badge.scss

@@ -8,11 +8,16 @@
 $badge-radius-badge: $global-radius-circle; // Badge
 $badge-color-notification-bg-default: $modes-color-status-negative-default; // Used in global nav notification badges
 $badge-color-notification-bg-alt: $modes-color-status-info-default;
+$badge-color-notification-inverse-border-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-bg-default: $modes-color-status-negative-inverse-default; // Used in global nav notification badges
+$badge-color-notification-inverse-bg-alt: $modes-color-status-info-inverse-default;
+$badge-color-notification-inverse-label-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-label-alt: $modes-color-generic-content-extreme;
 $badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
 $badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
-$badge-color-notification-border-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-alt: $modes-color-generic-fg-nought;
+$badge-color-notification-border-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-alt: $modes-color-generic-content-nought;
 $badge-size-micro-dot: $global-size-micro-m; // Micro dot badge size
 $badge-size-micro-numbered-min: $global-size-macro-xxs; // Micro dot badge size with numbering
 $badge-size-micro-numbered-max: $global-size-macro-s; // Micro dot badge size max width

package/scss/frozenproduct/large/components/logo.scss

@@ -8,8 +8,6 @@
 $logo-size-ai-m: 14px; // AI star
 $logo-color-sage-bg-default: $modes-color-brand-default; // sage logo
 $logo-color-sage-bg-alt: $modes-color-brand-default-alt;
-$logo-color-trust-bg-default: $modes-color-status-positive-default; // filled
-$logo-color-trust-outline: $modes-color-generic-content-extreme;
 $logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-monochrome;
 $logo-color-ai-identifier-bg-star: $modes-color-brand-copilot-ai-identifier-default; // star bg color
 $logo-color-ai-identifier-bg-dot: $modes-color-brand-copilot-ai-identifier-with-default;

package/scss/frozenproduct/large/components/progress.scss

@@ -69,9 +69,10 @@ $progress-size-carouselselector-dot-m: $global-size-micro-l;
 $progress-size-carouselselector-activedot-m: $global-size-macro-xxs;
 $progress-size-carouselselector-hitarea-m: $global-size-macro-xs;
 $progress-size-carouselslide-x-m: $global-size-macro-xl; // Inactive slide
-$progress-size-ring-s: $global-size-macro-s; // Loader ring
-$progress-size-ring-m: $global-size-macro-s * 2; // Loader ring
-$progress-size-ring-l: $global-size-macro-xs * 4; // Loader ring
+$progress-size-spinner-xs: $global-size-macro-xs - $global-size-micro-xs; // Loader ring for XS size loader spinners
+$progress-size-spinner-s: $global-size-macro-s; // Loader ring
+$progress-size-spinner-m: $global-size-macro-s * 2; // Loader ring
+$progress-size-spinner-l: $global-size-macro-xs * 4; // Loader ring
 $progress-size-stepflow-m: $global-size-micro-m; // Step height
 $progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
 $progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator