@sage/design-tokens 15.2.2 → 15.3.0

package/js/common/frozenproduct/small/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/frozenproduct/small/light/components/table.js

@@ -231,13 +231,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: {},
@@ -271,6 +273,19 @@ module.exports = {
           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",
@@ -336,16 +351,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/large/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/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/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/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/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;