@sage/design-tokens 8.2.0 → 8.4.0

package/js/umd/frozenproduct/small/dark/components/container.js

@@ -20,274 +20,414 @@
   return {
     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": {
+          nudge: {
+            "borderAi-horizontal": {
+              $type: "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",
+              ],
+            },
+            "borderAi-vertical": {
+              $type: "color",
+              $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"],
+            },
+          },
+        },
+        blockquote: {
+          border: {
             $type: "color",
-            $value: "#0e0e0e",
-            $description: "tile footer bg color ",
+            $value: "#00D639",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.bg.faint}",
-              $description: "tile footer bg color ",
+              $value: "{modes.color.interactive.primary.default}",
             },
-            name: "containerColorStandardBgFooterDefault",
+            name: "containerColorBlockquoteBorder",
             attributes: {},
-            path: ["container", "color", "standard", "bgFooter-default"],
+            path: ["container", "color", "blockquote", "border"],
           },
-          "border-active": {
+        },
+        calendar: {
+          "label-default": {
             $type: "color",
             $value: "#FFFFFF",
+            $description: "Accessible on calendar bg-default colors.",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.generic.active}",
+              $value: "{modes.color.generic.content.extreme}",
+              $description: "Accessible on calendar bg-default colors.",
             },
-            name: "containerColorStandardBorderActive",
+            name: "containerColorCalendarLabelDefault",
             attributes: {},
-            path: ["container", "color", "standard", "border-active"],
+            path: ["container", "color", "calendar", "label-default"],
           },
-          "border-alt": {
+          "label-alt": {
             $type: "color",
-            $value: "#4b4b4b",
+            $value: "#FFFFFF",
+            $description: "Accessible on calendar bg-alt colors.",
             filePath: "data/tokens/components/container.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.fg.soft}",
+              $value: "{modes.color.generic.content.extreme}",
+              $description: "Accessible on calendar bg-alt colors.",
             },
-            name: "containerColorStandardBorderAlt",
+            name: "containerColorCalendarLabelAlt",
             attributes: {},
-            path: ["container", "color", "standard", "border-alt"],
+            path: ["container", "color", "calendar", "label-alt"],
           },
-          "border-default": {
-            $type: "color",
-            $value: "#181818",
-            filePath: "data/tokens/components/container.json",
-            isSource: true,
-            original: {
+          blue: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.generic.fg.faint}",
+              $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: "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: {
+          teal: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.interactive.inactive.mask}",
-              $description: "dimmed mask for dialogs",
+              $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: "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: {
+          green: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.generic.fg.moderate}",
-              $description: "Link preview image thumbnail",
+              $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: "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: {
+          lime: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.generic.content.moderate}",
-              $description: "for subheadings etc",
+              $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: "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: {
+          orange: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.generic.content.harsh}",
-              $description: "for headings, paragraph text etc ",
+              $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: "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: {
+          red: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.status.ai.default-horizontal}",
-              $description: "top and bottom border for AI dialog 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"],
             },
-            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: {
+          pink: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.status.ai.default-vertical}",
-              $description:
-                "left and right border for dialog and insight bubbles.",
+              $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"],
             },
-            name: "containerColorAiBordervertical",
-            attributes: {},
-            path: ["container", "color", "AI", "bordervertical"],
           },
-          nudge: {
-            "borderAi-horizontal": {
+          purple: {
+            "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: "#270E41",
+              filePath: "data/tokens/components/container.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.purple.muted}",
+              },
+              name: "containerColorCalendarPurpleBgDefault",
+              attributes: {},
+              path: ["container", "color", "calendar", "purple", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#8F4CD7",
               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.rich}",
               },
-              name: "containerColorAiNudgeBorderAiHorizontal",
+              name: "containerColorCalendarPurplePattern",
               attributes: {},
-              path: [
-                "container",
-                "color",
-                "AI",
-                "nudge",
-                "borderAi-horizontal",
-              ],
+              path: ["container", "color", "calendar", "purple", "pattern"],
             },
-            "borderAi-vertical": {
+          },
+          slate: {
+            "bg-default": {
               $type: "color",
-              $value:
-                "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)",
-              $description:
-                "left and right border for AI nudge message component",
+              $value: "#121D23",
               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.slate.muted}",
               },
-              name: "containerColorAiNudgeBorderAiVertical",
+              name: "containerColorCalendarSlateBgDefault",
               attributes: {},
-              path: ["container", "color", "AI", "nudge", "borderAi-vertical"],
+              path: ["container", "color", "calendar", "slate", "bg-default"],
             },
-          },
-        },
-        scrollbar: {
-          "bg-default": {
-            $type: "color",
-            $value: "#0e0e0e",
-            filePath: "data/tokens/components/container.json",
-            isSource: true,
-            original: {
+            pattern: {
               $type: "color",
-              $value: "{modes.color.generic.bg.faint}",
+              $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: "containerColorScrollbarBgDefault",
-            attributes: {},
-            path: ["container", "color", "scrollbar", "bg-default"],
           },
-          "fg-default": {
-            $type: "color",
-            $value: "#777",
-            filePath: "data/tokens/components/container.json",
-            isSource: true,
-            original: {
+          gray: {
+            "bg-default": {
               $type: "color",
-              $value: "{modes.color.generic.fg.moderate}",
+              $value: "#1b1b1b",
+              filePath: "data/tokens/components/container.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.gray.muted}",
+              },
+              name: "containerColorCalendarGrayBgDefault",
+              attributes: {},
+              path: ["container", "color", "calendar", "gray", "bg-default"],
             },
-            name: "containerColorScrollbarFgDefault",
-            attributes: {},
-            path: ["container", "color", "scrollbar", "fg-default"],
-          },
-        },
-        interactive: {
-          detailedicon: {
-            bg: {
+            pattern: {
               $type: "color",
-              $value: "#00D639",
-              $description: " ",
+              $value: "#6F6F6F",
               filePath: "data/tokens/components/container.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.custom.default}",
-                $description: " ",
+                $value: "{modes.color.colorcode.gray.rich}",
               },
-              name: "containerColorInteractiveDetailediconBg",
+              name: "containerColorCalendarGrayPattern",
               attributes: {},
-              path: ["container", "color", "interactive", "detailedicon", "bg"],
+              path: ["container", "color", "calendar", "gray", "pattern"],
             },
           },
+        },
+        interactive: {
           "bgFooter-activated": {
             $type: "color",
             $value: "#009023",
@@ -639,20 +779,192 @@
             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"],
           },
         },
       },