@sage/design-tokens 15.2.2 → 15.4.0

package/js/common/product/large/dark/components/table.js

@@ -180,12 +180,15 @@ module.exports = {
       row: {
         "bg-activated": {
           $type: "color",
-          $value: "#00D639",
+          $value: "#f0f",
+          $description: "TO BE DEPRECATED (was #00D639)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.default}",
+            $value: "#f0f",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.primary.default})",
           },
           name: "tableColorRowBgActivated",
           attributes: {},
@@ -193,12 +196,15 @@ module.exports = {
         },
         "bg-active": {
           $type: "color",
-          $value: "#FFFFFF",
+          $value: "#F6F",
+          $description: "TO BE DEPRECATED (was #FFFFFF)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "#F6F",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.active})",
           },
           name: "tableColorRowBgActive",
           attributes: {},
@@ -235,13 +241,15 @@ module.exports = {
         "bg-alt2": {
           $type: "color",
           $value: "#1f1f1f",
-          $description: "Zebra stripes combined with child rows.",
+          $description:
+            "Zebra stripes combined with child rows. Highlighted rows.",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
             $value: "{modes.color.generic.bg.soft}",
-            $description: "Zebra stripes combined with child rows.",
+            $description:
+              "Zebra stripes combined with child rows. Highlighted rows.",
           },
           name: "tableColorRowBgAlt2",
           attributes: {},
@@ -264,17 +272,30 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#1f1f1f",
+          $value: "#282828",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.soft}",
+            $value: "{modes.color.generic.bg.moderate}",
           },
           name: "tableColorRowBgHover",
           attributes: {},
           path: ["table", "color", "row", "bg-hover"],
         },
+        "bg-selected": {
+          $type: "color",
+          $value: "#FFFFFF",
+          filePath: "data/tokens/components/table.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.active}",
+          },
+          name: "tableColorRowBgSelected",
+          attributes: {},
+          path: ["table", "color", "row", "bg-selected"],
+        },
         "border-default": {
           $type: "color",
           $value: "#282828",
@@ -290,12 +311,15 @@ module.exports = {
         },
         "label-activated": {
           $type: "color",
-          $value: "#000000",
+          $value: "#FAF",
+          $description: "TO BE DEPRECATED (was #000000)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "#FAF",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
           },
           name: "tableColorRowLabelActivated",
           attributes: {},
@@ -303,12 +327,15 @@ module.exports = {
         },
         "label-active": {
           $type: "color",
-          $value: "#000000",
+          $value: "#FDF",
+          $description: "TO BE DEPRECATED (was #000000)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "#FDF",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
           },
           name: "tableColorRowLabelActive",
           attributes: {},
@@ -340,16 +367,29 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "label-hover"],
         },
+        "label-selected": {
+          $type: "color",
+          $value: "#000000",
+          filePath: "data/tokens/components/table.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.withActive}",
+          },
+          name: "tableColorRowLabelSelected",
+          attributes: {},
+          path: ["table", "color", "row", "label-selected"],
+        },
       },
       footer: {
         "bg-default": {
           $type: "color",
-          $value: "#1f1f1f",
+          $value: "#282828",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.soft}",
+            $value: "{modes.color.generic.bg.moderate}",
           },
           name: "tableColorFooterBgDefault",
           attributes: {},

package/js/common/product/large/light/components/form.d.ts

@@ -241,6 +241,15 @@ declare const tokens: {
           };
         };
       };
+      labelset: {
+        inline: {
+          pt: {
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+        };
+      };
       rating: {
         xg: {
           M: DesignToken;

package/js/common/product/large/light/components/form.js

@@ -1768,6 +1768,57 @@ module.exports = {
           },
         },
       },
+      labelset: {
+        inline: {
+          pt: {
+            S: {
+              $type: "spacing",
+              $value: "31",
+              $description: "top padding on S inline input labelsets",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "31",
+                $description: "top padding on S inline input labelsets",
+              },
+              name: "formSpaceLabelsetInlinePtS",
+              attributes: {},
+              path: ["form", "space", "labelset", "inline", "pt", "S"],
+            },
+            M: {
+              $type: "spacing",
+              $value: "35",
+              $description: "top padding on inline input labelsets",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "35",
+                $description: "top padding on inline input labelsets",
+              },
+              name: "formSpaceLabelsetInlinePtM",
+              attributes: {},
+              path: ["form", "space", "labelset", "inline", "pt", "M"],
+            },
+            L: {
+              $type: "spacing",
+              $value: "35",
+              $description: "top padding on inline L input labelsets",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "35",
+                $description: "top padding on inline L input labelsets",
+              },
+              name: "formSpaceLabelsetInlinePtL",
+              attributes: {},
+              path: ["form", "space", "labelset", "inline", "pt", "L"],
+            },
+          },
+        },
+      },
       rating: {
         xg: {
           M: {

package/js/common/product/large/light/components/table.d.ts

@@ -47,11 +47,13 @@ declare const tokens: {
         "bg-alt2": DesignToken;
         "bg-alt3": DesignToken;
         "bg-hover": DesignToken;
+        "bg-selected": DesignToken;
         "border-default": DesignToken;
         "label-activated": DesignToken;
         "label-active": DesignToken;
         "label-default": DesignToken;
         "label-hover": DesignToken;
+        "label-selected": DesignToken;
       };
       footer: {
         "bg-default": DesignToken;

package/js/common/product/large/light/components/table.js

@@ -180,12 +180,15 @@ module.exports = {
       row: {
         "bg-activated": {
           $type: "color",
-          $value: "#00811F",
+          $value: "#f0f",
+          $description: "TO BE DEPRECATED (was #00811F)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.default}",
+            $value: "#f0f",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.primary.default})",
           },
           name: "tableColorRowBgActivated",
           attributes: {},
@@ -193,12 +196,15 @@ module.exports = {
         },
         "bg-active": {
           $type: "color",
-          $value: "#000000",
+          $value: "#F6F",
+          $description: "TO BE DEPRECATED (was #000000)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "#F6F",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.active})",
           },
           name: "tableColorRowBgActive",
           attributes: {},
@@ -235,13 +241,15 @@ module.exports = {
         "bg-alt2": {
           $type: "color",
           $value: "#dedede",
-          $description: "Zebra stripes combined with child rows.",
+          $description:
+            "Zebra stripes combined with child rows. Highlighted rows.",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
             $value: "{modes.color.generic.bg.soft}",
-            $description: "Zebra stripes combined with child rows.",
+            $description:
+              "Zebra stripes combined with child rows. Highlighted rows.",
           },
           name: "tableColorRowBgAlt2",
           attributes: {},
@@ -264,17 +272,30 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#dedede",
+          $value: "#d1d1d1",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.soft}",
+            $value: "{modes.color.generic.bg.moderate}",
           },
           name: "tableColorRowBgHover",
           attributes: {},
           path: ["table", "color", "row", "bg-hover"],
         },
+        "bg-selected": {
+          $type: "color",
+          $value: "#000000",
+          filePath: "data/tokens/components/table.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.active}",
+          },
+          name: "tableColorRowBgSelected",
+          attributes: {},
+          path: ["table", "color", "row", "bg-selected"],
+        },
         "border-default": {
           $type: "color",
           $value: "#d1d1d1",
@@ -290,12 +311,15 @@ module.exports = {
         },
         "label-activated": {
           $type: "color",
-          $value: "#FFFFFF",
+          $value: "#FAF",
+          $description: "TO BE DEPRECATED (was #FFFFFF)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "#FAF",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
           },
           name: "tableColorRowLabelActivated",
           attributes: {},
@@ -303,12 +327,15 @@ module.exports = {
         },
         "label-active": {
           $type: "color",
-          $value: "#FFFFFF",
+          $value: "#FDF",
+          $description: "TO BE DEPRECATED (was #FFFFFF)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "#FDF",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
           },
           name: "tableColorRowLabelActive",
           attributes: {},
@@ -340,16 +367,29 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "label-hover"],
         },
+        "label-selected": {
+          $type: "color",
+          $value: "#FFFFFF",
+          filePath: "data/tokens/components/table.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.withActive}",
+          },
+          name: "tableColorRowLabelSelected",
+          attributes: {},
+          path: ["table", "color", "row", "label-selected"],
+        },
       },
       footer: {
         "bg-default": {
           $type: "color",
-          $value: "#dedede",
+          $value: "#d1d1d1",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.soft}",
+            $value: "{modes.color.generic.bg.moderate}",
           },
           name: "tableColorFooterBgDefault",
           attributes: {},

package/js/common/product/small/dark/components/form.d.ts

@@ -241,6 +241,15 @@ declare const tokens: {
           };
         };
       };
+      labelset: {
+        inline: {
+          pt: {
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+        };
+      };
       rating: {
         xg: {
           M: DesignToken;

package/js/common/product/small/dark/components/form.js

@@ -1768,6 +1768,57 @@ module.exports = {
           },
         },
       },
+      labelset: {
+        inline: {
+          pt: {
+            S: {
+              $type: "spacing",
+              $value: "31",
+              $description: "top padding on S inline input labelsets",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "31",
+                $description: "top padding on S inline input labelsets",
+              },
+              name: "formSpaceLabelsetInlinePtS",
+              attributes: {},
+              path: ["form", "space", "labelset", "inline", "pt", "S"],
+            },
+            M: {
+              $type: "spacing",
+              $value: "35",
+              $description: "top padding on inline input labelsets",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "35",
+                $description: "top padding on inline input labelsets",
+              },
+              name: "formSpaceLabelsetInlinePtM",
+              attributes: {},
+              path: ["form", "space", "labelset", "inline", "pt", "M"],
+            },
+            L: {
+              $type: "spacing",
+              $value: "35",
+              $description: "top padding on inline L input labelsets",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "35",
+                $description: "top padding on inline L input labelsets",
+              },
+              name: "formSpaceLabelsetInlinePtL",
+              attributes: {},
+              path: ["form", "space", "labelset", "inline", "pt", "L"],
+            },
+          },
+        },
+      },
       rating: {
         xg: {
           M: {

package/js/common/product/small/dark/components/table.d.ts

@@ -47,11 +47,13 @@ declare const tokens: {
         "bg-alt2": DesignToken;
         "bg-alt3": DesignToken;
         "bg-hover": DesignToken;
+        "bg-selected": DesignToken;
         "border-default": DesignToken;
         "label-activated": DesignToken;
         "label-active": DesignToken;
         "label-default": DesignToken;
         "label-hover": DesignToken;
+        "label-selected": DesignToken;
       };
       footer: {
         "bg-default": DesignToken;

package/js/common/product/small/dark/components/table.js

@@ -180,12 +180,15 @@ module.exports = {
       row: {
         "bg-activated": {
           $type: "color",
-          $value: "#00D639",
+          $value: "#f0f",
+          $description: "TO BE DEPRECATED (was #00D639)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.default}",
+            $value: "#f0f",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.primary.default})",
           },
           name: "tableColorRowBgActivated",
           attributes: {},
@@ -193,12 +196,15 @@ module.exports = {
         },
         "bg-active": {
           $type: "color",
-          $value: "#FFFFFF",
+          $value: "#F6F",
+          $description: "TO BE DEPRECATED (was #FFFFFF)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "#F6F",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.active})",
           },
           name: "tableColorRowBgActive",
           attributes: {},
@@ -235,13 +241,15 @@ module.exports = {
         "bg-alt2": {
           $type: "color",
           $value: "#1f1f1f",
-          $description: "Zebra stripes combined with child rows.",
+          $description:
+            "Zebra stripes combined with child rows. Highlighted rows.",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
             $value: "{modes.color.generic.bg.soft}",
-            $description: "Zebra stripes combined with child rows.",
+            $description:
+              "Zebra stripes combined with child rows. Highlighted rows.",
           },
           name: "tableColorRowBgAlt2",
           attributes: {},
@@ -264,17 +272,30 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#1f1f1f",
+          $value: "#282828",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.soft}",
+            $value: "{modes.color.generic.bg.moderate}",
           },
           name: "tableColorRowBgHover",
           attributes: {},
           path: ["table", "color", "row", "bg-hover"],
         },
+        "bg-selected": {
+          $type: "color",
+          $value: "#FFFFFF",
+          filePath: "data/tokens/components/table.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.active}",
+          },
+          name: "tableColorRowBgSelected",
+          attributes: {},
+          path: ["table", "color", "row", "bg-selected"],
+        },
         "border-default": {
           $type: "color",
           $value: "#282828",
@@ -290,12 +311,15 @@ module.exports = {
         },
         "label-activated": {
           $type: "color",
-          $value: "#000000",
+          $value: "#FAF",
+          $description: "TO BE DEPRECATED (was #000000)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "#FAF",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
           },
           name: "tableColorRowLabelActivated",
           attributes: {},
@@ -303,12 +327,15 @@ module.exports = {
         },
         "label-active": {
           $type: "color",
-          $value: "#000000",
+          $value: "#FDF",
+          $description: "TO BE DEPRECATED (was #000000)",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "#FDF",
+            $description:
+              "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
           },
           name: "tableColorRowLabelActive",
           attributes: {},
@@ -340,16 +367,29 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "label-hover"],
         },
+        "label-selected": {
+          $type: "color",
+          $value: "#000000",
+          filePath: "data/tokens/components/table.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.withActive}",
+          },
+          name: "tableColorRowLabelSelected",
+          attributes: {},
+          path: ["table", "color", "row", "label-selected"],
+        },
       },
       footer: {
         "bg-default": {
           $type: "color",
-          $value: "#1f1f1f",
+          $value: "#282828",
           filePath: "data/tokens/components/table.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.soft}",
+            $value: "{modes.color.generic.bg.moderate}",
           },
           name: "tableColorFooterBgDefault",
           attributes: {},

package/js/common/product/small/light/components/form.d.ts

@@ -241,6 +241,15 @@ declare const tokens: {
           };
         };
       };
+      labelset: {
+        inline: {
+          pt: {
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+        };
+      };
       rating: {
         xg: {
           M: DesignToken;