@sage/design-tokens 8.2.0 → 8.4.0

package/js/common/marketing/small/dark/components/container.js

@@ -9,267 +9,407 @@
 module.exports = {
   container: {
     color: {
-      standard: {
-        "bg-alt": {
+      AI: {
+        borderhorizontal: {
           $type: "color",
-          $value: "#0e0e0e",
+          $value:
+            "linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
+          $description: "top and bottom border for AI dialog component",
           filePath: "data/tokens/components/container.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.faint}",
+            $value: "{modes.color.status.ai.default-horizontal}",
+            $description: "top and bottom border for AI dialog component",
           },
-          name: "containerColorStandardBgAlt",
+          name: "containerColorAiBorderhorizontal",
           attributes: {},
-          path: ["container", "color", "standard", "bg-alt"],
+          path: ["container", "color", "AI", "borderhorizontal"],
         },
-        "bg-default": {
+        bordervertical: {
           $type: "color",
-          $value: "#000000",
+          $value:
+            "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
+          $description: "left and right border for dialog and insight bubbles.",
           filePath: "data/tokens/components/container.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.bg.nought}",
+            $value: "{modes.color.status.ai.default-vertical}",
+            $description:
+              "left and right border for dialog and insight bubbles.",
           },
-          name: "containerColorStandardBgDefault",
+          name: "containerColorAiBordervertical",
           attributes: {},
-          path: ["container", "color", "standard", "bg-default"],
+          path: ["container", "color", "AI", "bordervertical"],
         },
-        "bgFooter-default": {
-          $type: "color",
-          $value: "#0e0e0e",
-          $description: "tile footer bg color ",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        nudge: {
+          "borderAi-horizontal": {
             $type: "color",
-            $value: "{modes.color.generic.bg.faint}",
-            $description: "tile footer bg color ",
+            $value:
+              "linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
+            $description:
+              "top and bottom border for AI nudge message component",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.ai.default-horizontal}",
+              $description:
+                "top and bottom border for AI nudge message component",
+            },
+            name: "containerColorAiNudgeBorderAiHorizontal",
+            attributes: {},
+            path: ["container", "color", "AI", "nudge", "borderAi-horizontal"],
           },
-          name: "containerColorStandardBgFooterDefault",
-          attributes: {},
-          path: ["container", "color", "standard", "bgFooter-default"],
-        },
-        "border-active": {
-          $type: "color",
-          $value: "#FFFFFF",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+          "borderAi-vertical": {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.generic.active}",
+            $value:
+              "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
+            $description:
+              "left and right border for AI nudge message component",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.ai.default-vertical}",
+              $description:
+                "left and right border for AI nudge message component",
+            },
+            name: "containerColorAiNudgeBorderAiVertical",
+            attributes: {},
+            path: ["container", "color", "AI", "nudge", "borderAi-vertical"],
           },
-          name: "containerColorStandardBorderActive",
-          attributes: {},
-          path: ["container", "color", "standard", "border-active"],
         },
-        "border-alt": {
+      },
+      blockquote: {
+        border: {
           $type: "color",
-          $value: "#4b4b4b",
+          $value: "#00D639",
           filePath: "data/tokens/components/container.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.fg.soft}",
+            $value: "{modes.color.interactive.primary.default}",
           },
-          name: "containerColorStandardBorderAlt",
+          name: "containerColorBlockquoteBorder",
           attributes: {},
-          path: ["container", "color", "standard", "border-alt"],
+          path: ["container", "color", "blockquote", "border"],
         },
-        "border-default": {
+      },
+      calendar: {
+        "label-default": {
           $type: "color",
-          $value: "#181818",
+          $value: "#FFFFFF",
+          $description: "Accessible on calendar bg-default colors.",
           filePath: "data/tokens/components/container.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.fg.faint}",
+            $value: "{modes.color.generic.content.extreme}",
+            $description: "Accessible on calendar bg-default colors.",
           },
-          name: "containerColorStandardBorderDefault",
+          name: "containerColorCalendarLabelDefault",
           attributes: {},
-          path: ["container", "color", "standard", "border-default"],
+          path: ["container", "color", "calendar", "label-default"],
         },
-        dimmer: {
+        "label-alt": {
           $type: "color",
           $value: "#FFFFFF",
-          $description: "dimmed mask for dialogs",
+          $description: "Accessible on calendar bg-alt colors.",
           filePath: "data/tokens/components/container.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.inactive.mask}",
-            $description: "dimmed mask for dialogs",
+            $value: "{modes.color.generic.content.extreme}",
+            $description: "Accessible on calendar bg-alt colors.",
           },
-          name: "containerColorStandardDimmer",
+          name: "containerColorCalendarLabelAlt",
           attributes: {},
-          path: ["container", "color", "standard", "dimmer"],
+          path: ["container", "color", "calendar", "label-alt"],
         },
-        icon: {
-          $type: "color",
-          $value: "#777",
-          $description: "Link preview image thumbnail",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        blue: {
+          "bg-default": {
             $type: "color",
-            $value: "{modes.color.generic.fg.moderate}",
-            $description: "Link preview image thumbnail",
+            $value: "#00293F",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.blue.muted}",
+            },
+            name: "containerColorCalendarBlueBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "blue", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#0071c3",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.blue.rich}",
+            },
+            name: "containerColorCalendarBluePattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "blue", "pattern"],
           },
-          name: "containerColorStandardIcon",
-          attributes: {},
-          path: ["container", "color", "standard", "icon"],
         },
-        "text-alt": {
-          $type: "color",
-          $value: "#ffffff8c",
-          $description: "for subheadings etc",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        teal: {
+          "bg-default": {
             $type: "color",
-            $value: "{modes.color.generic.content.moderate}",
-            $description: "for subheadings etc",
+            $value: "#002B2A",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.teal.muted}",
+            },
+            name: "containerColorCalendarTealBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "teal", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#007C7B",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.teal.rich}",
+            },
+            name: "containerColorCalendarTealPattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "teal", "pattern"],
           },
-          name: "containerColorStandardTextAlt",
-          attributes: {},
-          path: ["container", "color", "standard", "text-alt"],
         },
-        "text-default": {
-          $type: "color",
-          $value: "#fffffff2",
-          $description: "for headings, paragraph text etc ",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        green: {
+          "bg-default": {
             $type: "color",
-            $value: "{modes.color.generic.content.harsh}",
-            $description: "for headings, paragraph text etc ",
+            $value: "#002D05",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.green.muted}",
+            },
+            name: "containerColorCalendarGreenBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "green", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#00811F",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.green.rich}",
+            },
+            name: "containerColorCalendarGreenPattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "green", "pattern"],
           },
-          name: "containerColorStandardTextDefault",
-          attributes: {},
-          path: ["container", "color", "standard", "text-default"],
         },
-      },
-      AI: {
-        borderhorizontal: {
-          $type: "color",
-          $value:
-            "linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
-          $description: "top and bottom border for AI dialog component",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        lime: {
+          "bg-default": {
             $type: "color",
-            $value: "{modes.color.status.ai.default-horizontal}",
-            $description: "top and bottom border for AI dialog component",
+            $value: "#171e00",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.lime.muted}",
+            },
+            name: "containerColorCalendarLimeBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "lime", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#637700",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.lime.rich}",
+            },
+            name: "containerColorCalendarLimePattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "lime", "pattern"],
           },
-          name: "containerColorAiBorderhorizontal",
-          attributes: {},
-          path: ["container", "color", "AI", "borderhorizontal"],
         },
-        bordervertical: {
-          $type: "color",
-          $value:
-            "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
-          $description: "left and right border for dialog and insight bubbles.",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        orange: {
+          "bg-default": {
             $type: "color",
-            $value: "{modes.color.status.ai.default-vertical}",
-            $description:
-              "left and right border for dialog and insight bubbles.",
+            $value: "#380D00",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.orange.muted}",
+            },
+            name: "containerColorCalendarOrangeBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "orange", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#C54300",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.orange.rich}",
+            },
+            name: "containerColorCalendarOrangePattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "orange", "pattern"],
           },
-          name: "containerColorAiBordervertical",
-          attributes: {},
-          path: ["container", "color", "AI", "bordervertical"],
         },
-        nudge: {
-          "borderAi-horizontal": {
+        red: {
+          "bg-default": {
             $type: "color",
-            $value:
-              "linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
-            $description:
-              "top and bottom border for AI nudge message component",
+            $value: "#400011",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.red.muted}",
+            },
+            name: "containerColorCalendarRedBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "red", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#DC004E",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.red.rich}",
+            },
+            name: "containerColorCalendarRedPattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "red", "pattern"],
+          },
+        },
+        pink: {
+          "bg-default": {
+            $type: "color",
+            $value: "#3C002C",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.pink.muted}",
+            },
+            name: "containerColorCalendarPinkBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "pink", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#C8269A",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.pink.rich}",
+            },
+            name: "containerColorCalendarPinkPattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "pink", "pattern"],
+          },
+        },
+        purple: {
+          "bg-default": {
+            $type: "color",
+            $value: "#270E41",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.ai.default-horizontal}",
-              $description:
-                "top and bottom border for AI nudge message component",
+              $value: "{modes.color.colorcode.purple.muted}",
             },
-            name: "containerColorAiNudgeBorderAiHorizontal",
+            name: "containerColorCalendarPurpleBgDefault",
             attributes: {},
-            path: ["container", "color", "AI", "nudge", "borderAi-horizontal"],
+            path: ["container", "color", "calendar", "purple", "bg-default"],
           },
-          "borderAi-vertical": {
+          pattern: {
             $type: "color",
-            $value:
-              "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
-            $description:
-              "left and right border for AI nudge message component",
+            $value: "#8F4CD7",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.ai.default-vertical}",
-              $description:
-                "left and right border for AI nudge message component",
+              $value: "{modes.color.colorcode.purple.rich}",
             },
-            name: "containerColorAiNudgeBorderAiVertical",
+            name: "containerColorCalendarPurplePattern",
             attributes: {},
-            path: ["container", "color", "AI", "nudge", "borderAi-vertical"],
+            path: ["container", "color", "calendar", "purple", "pattern"],
           },
         },
-      },
-      scrollbar: {
-        "bg-default": {
-          $type: "color",
-          $value: "#0e0e0e",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+        slate: {
+          "bg-default": {
             $type: "color",
-            $value: "{modes.color.generic.bg.faint}",
+            $value: "#121D23",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.slate.muted}",
+            },
+            name: "containerColorCalendarSlateBgDefault",
+            attributes: {},
+            path: ["container", "color", "calendar", "slate", "bg-default"],
           },
-          name: "containerColorScrollbarBgDefault",
-          attributes: {},
-          path: ["container", "color", "scrollbar", "bg-default"],
-        },
-        "fg-default": {
-          $type: "color",
-          $value: "#777",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
+          pattern: {
             $type: "color",
-            $value: "{modes.color.generic.fg.moderate}",
+            $value: "#527386",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.slate.rich}",
+            },
+            name: "containerColorCalendarSlatePattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "slate", "pattern"],
           },
-          name: "containerColorScrollbarFgDefault",
-          attributes: {},
-          path: ["container", "color", "scrollbar", "fg-default"],
         },
-      },
-      interactive: {
-        detailedicon: {
-          bg: {
+        gray: {
+          "bg-default": {
             $type: "color",
-            $value: "#00D639",
-            $description: " ",
+            $value: "#1b1b1b",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.custom.default}",
-              $description: " ",
+              $value: "{modes.color.colorcode.gray.muted}",
             },
-            name: "containerColorInteractiveDetailediconBg",
+            name: "containerColorCalendarGrayBgDefault",
             attributes: {},
-            path: ["container", "color", "interactive", "detailedicon", "bg"],
+            path: ["container", "color", "calendar", "gray", "bg-default"],
+          },
+          pattern: {
+            $type: "color",
+            $value: "#6F6F6F",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.colorcode.gray.rich}",
+            },
+            name: "containerColorCalendarGrayPattern",
+            attributes: {},
+            path: ["container", "color", "calendar", "gray", "pattern"],
           },
         },
+      },
+      interactive: {
         "bgFooter-activated": {
           $type: "color",
           $value: "#009023",
@@ -616,20 +756,192 @@ module.exports = {
           attributes: {},
           path: ["container", "color", "interactive", "text-hover"],
         },
+        detailedicon: {
+          bg: {
+            $type: "color",
+            $value: "#00D639",
+            $description: " ",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.custom.default}",
+              $description: " ",
+            },
+            name: "containerColorInteractiveDetailediconBg",
+            attributes: {},
+            path: ["container", "color", "interactive", "detailedicon", "bg"],
+          },
+        },
       },
-      blockquote: {
-        border: {
+      scrollbar: {
+        "bg-default": {
           $type: "color",
-          $value: "#00D639",
+          $value: "#0e0e0e",
           filePath: "data/tokens/components/container.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.default}",
+            $value: "{modes.color.generic.bg.faint}",
           },
-          name: "containerColorBlockquoteBorder",
+          name: "containerColorScrollbarBgDefault",
           attributes: {},
-          path: ["container", "color", "blockquote", "border"],
+          path: ["container", "color", "scrollbar", "bg-default"],
+        },
+        "fg-default": {
+          $type: "color",
+          $value: "#777",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.moderate}",
+          },
+          name: "containerColorScrollbarFgDefault",
+          attributes: {},
+          path: ["container", "color", "scrollbar", "fg-default"],
+        },
+      },
+      standard: {
+        "bg-alt": {
+          $type: "color",
+          $value: "#0e0e0e",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.bg.faint}",
+          },
+          name: "containerColorStandardBgAlt",
+          attributes: {},
+          path: ["container", "color", "standard", "bg-alt"],
+        },
+        "bg-default": {
+          $type: "color",
+          $value: "#000000",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.bg.nought}",
+          },
+          name: "containerColorStandardBgDefault",
+          attributes: {},
+          path: ["container", "color", "standard", "bg-default"],
+        },
+        "bgFooter-default": {
+          $type: "color",
+          $value: "#0e0e0e",
+          $description: "tile footer bg color ",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.bg.faint}",
+            $description: "tile footer bg color ",
+          },
+          name: "containerColorStandardBgFooterDefault",
+          attributes: {},
+          path: ["container", "color", "standard", "bgFooter-default"],
+        },
+        "border-active": {
+          $type: "color",
+          $value: "#FFFFFF",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.generic.active}",
+          },
+          name: "containerColorStandardBorderActive",
+          attributes: {},
+          path: ["container", "color", "standard", "border-active"],
+        },
+        "border-alt": {
+          $type: "color",
+          $value: "#4b4b4b",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.soft}",
+          },
+          name: "containerColorStandardBorderAlt",
+          attributes: {},
+          path: ["container", "color", "standard", "border-alt"],
+        },
+        "border-default": {
+          $type: "color",
+          $value: "#181818",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.faint}",
+          },
+          name: "containerColorStandardBorderDefault",
+          attributes: {},
+          path: ["container", "color", "standard", "border-default"],
+        },
+        dimmer: {
+          $type: "color",
+          $value: "#FFFFFF",
+          $description: "dimmed mask for dialogs",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.inactive.mask}",
+            $description: "dimmed mask for dialogs",
+          },
+          name: "containerColorStandardDimmer",
+          attributes: {},
+          path: ["container", "color", "standard", "dimmer"],
+        },
+        icon: {
+          $type: "color",
+          $value: "#777",
+          $description: "Link preview image thumbnail",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.moderate}",
+            $description: "Link preview image thumbnail",
+          },
+          name: "containerColorStandardIcon",
+          attributes: {},
+          path: ["container", "color", "standard", "icon"],
+        },
+        "text-alt": {
+          $type: "color",
+          $value: "#ffffff8c",
+          $description: "for subheadings etc",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.content.moderate}",
+            $description: "for subheadings etc",
+          },
+          name: "containerColorStandardTextAlt",
+          attributes: {},
+          path: ["container", "color", "standard", "text-alt"],
+        },
+        "text-default": {
+          $type: "color",
+          $value: "#fffffff2",
+          $description: "for headings, paragraph text etc ",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.content.harsh}",
+            $description: "for headings, paragraph text etc ",
+          },
+          name: "containerColorStandardTextDefault",
+          attributes: {},
+          path: ["container", "color", "standard", "text-default"],
         },
       },
     },