@sage/design-tokens 8.2.0 → 8.4.0

package/js/umd/marketing/large/dark/components/form.js

@@ -3250,6 +3250,748 @@
             path: ["form", "color", "calendar", "textAlt-enabled"],
           },
         },
+        colorpicker: {
+          "label-default": {
+            $type: "color",
+            $value: "#FFFFFF",
+            $description: "Accessible on colorpicker bg-default colors.",
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.generic.content.extreme}",
+              $description: "Accessible on colorpicker bg-default colors.",
+            },
+            name: "formColorColorpickerLabelDefault",
+            attributes: {},
+            path: ["form", "color", "colorpicker", "label-default"],
+          },
+          "label-alt": {
+            $type: "color",
+            $value: "#FFFFFF",
+            $description: "Accessible on colorpicker bg-alt colors.",
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.generic.content.extreme}",
+              $description: "Accessible on colorpicker bg-alt colors.",
+            },
+            name: "formColorColorpickerLabelAlt",
+            attributes: {},
+            path: ["form", "color", "colorpicker", "label-alt"],
+          },
+          blue: {
+            border: {
+              $type: "color",
+              $value: "#0071c3",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.blue.rich}",
+              },
+              name: "formColorColorpickerBlueBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "blue", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#0071c3",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.blue.rich}",
+              },
+              name: "formColorColorpickerBlueBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "blue", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#00293F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.blue.muted}",
+              },
+              name: "formColorColorpickerBlueBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "blue", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#0071c3",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.blue.rich}",
+              },
+              name: "formColorColorpickerBluePattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "blue", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#007FD9",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.blue.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerBlueLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "blue", "label-default"],
+            },
+          },
+          teal: {
+            border: {
+              $type: "color",
+              $value: "#007C7B",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.teal.rich}",
+              },
+              name: "formColorColorpickerTealBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "teal", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#007C7B",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.teal.rich}",
+              },
+              name: "formColorColorpickerTealBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "teal", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#002B2A",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.teal.muted}",
+              },
+              name: "formColorColorpickerTealBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "teal", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#007C7B",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.teal.rich}",
+              },
+              name: "formColorColorpickerTealPattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "teal", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#008A89",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.teal.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerTealLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "teal", "label-default"],
+            },
+          },
+          green: {
+            border: {
+              $type: "color",
+              $value: "#00811F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.green.rich}",
+              },
+              name: "formColorColorpickerGreenBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "green", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#00811F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.green.rich}",
+              },
+              name: "formColorColorpickerGreenBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "green", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#002D05",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.green.muted}",
+              },
+              name: "formColorColorpickerGreenBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "green", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#00811F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.green.rich}",
+              },
+              name: "formColorColorpickerGreenPattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "green", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#009023",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.green.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerGreenLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "green", "label-default"],
+            },
+          },
+          lime: {
+            border: {
+              $type: "color",
+              $value: "#637700",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.lime.rich}",
+              },
+              name: "formColorColorpickerLimeBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "lime", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#637700",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.lime.rich}",
+              },
+              name: "formColorColorpickerLimeBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "lime", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#171e00",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.lime.muted}",
+              },
+              name: "formColorColorpickerLimeBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "lime", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#637700",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.lime.rich}",
+              },
+              name: "formColorColorpickerLimePattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "lime", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#6E8500",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.lime.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerLimeLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "lime", "label-default"],
+            },
+          },
+          orange: {
+            border: {
+              $type: "color",
+              $value: "#C54300",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.orange.rich}",
+              },
+              name: "formColorColorpickerOrangeBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "orange", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#C54300",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.orange.rich}",
+              },
+              name: "formColorColorpickerOrangeBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "orange", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#380D00",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.orange.muted}",
+              },
+              name: "formColorColorpickerOrangeBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "orange", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#C54300",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.orange.rich}",
+              },
+              name: "formColorColorpickerOrangePattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "orange", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#DB4B00",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.orange.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerOrangeLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "orange", "label-default"],
+            },
+          },
+          red: {
+            border: {
+              $type: "color",
+              $value: "#DC004E",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.red.rich}",
+              },
+              name: "formColorColorpickerRedBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "red", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#DC004E",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.red.rich}",
+              },
+              name: "formColorColorpickerRedBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "red", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#400011",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.red.muted}",
+              },
+              name: "formColorColorpickerRedBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "red", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#DC004E",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.red.rich}",
+              },
+              name: "formColorColorpickerRedPattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "red", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#F50058",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.red.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerRedLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "red", "label-default"],
+            },
+          },
+          pink: {
+            border: {
+              $type: "color",
+              $value: "#C8269A",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.pink.rich}",
+              },
+              name: "formColorColorpickerPinkBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "pink", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#C8269A",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.pink.rich}",
+              },
+              name: "formColorColorpickerPinkBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "pink", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#3C002C",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.pink.muted}",
+              },
+              name: "formColorColorpickerPinkBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "pink", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#C8269A",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.pink.rich}",
+              },
+              name: "formColorColorpickerPinkPattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "pink", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#DD2BAB",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.pink.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerPinkLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "pink", "label-default"],
+            },
+          },
+          purple: {
+            border: {
+              $type: "color",
+              $value: "#8F4CD7",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.purple.rich}",
+              },
+              name: "formColorColorpickerPurpleBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "purple", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#8F4CD7",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.purple.rich}",
+              },
+              name: "formColorColorpickerPurpleBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "purple", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#270E41",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.purple.muted}",
+              },
+              name: "formColorColorpickerPurpleBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "purple", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#8F4CD7",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.purple.rich}",
+              },
+              name: "formColorColorpickerPurplePattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "purple", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#985FDC",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.purple.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerPurpleLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "purple", "label-default"],
+            },
+          },
+          slate: {
+            border: {
+              $type: "color",
+              $value: "#527386",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.slate.rich}",
+              },
+              name: "formColorColorpickerSlateBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "slate", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#527386",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.slate.rich}",
+              },
+              name: "formColorColorpickerSlateBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "slate", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#121D23",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.slate.muted}",
+              },
+              name: "formColorColorpickerSlateBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "slate", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#527386",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.slate.rich}",
+              },
+              name: "formColorColorpickerSlatePattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "slate", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#5C8196",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.slate.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerSlateLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "slate", "label-default"],
+            },
+          },
+          gray: {
+            border: {
+              $type: "color",
+              $value: "#6F6F6F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.gray.rich}",
+              },
+              name: "formColorColorpickerGrayBorder",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "gray", "border"],
+            },
+            "bg-alt": {
+              $type: "color",
+              $value: "#6F6F6F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.gray.rich}",
+              },
+              name: "formColorColorpickerGrayBgAlt",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "gray", "bg-alt"],
+            },
+            "bg-default": {
+              $type: "color",
+              $value: "#1b1b1b",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.gray.muted}",
+              },
+              name: "formColorColorpickerGrayBgDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "gray", "bg-default"],
+            },
+            pattern: {
+              $type: "color",
+              $value: "#6F6F6F",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.gray.rich}",
+              },
+              name: "formColorColorpickerGrayPattern",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "gray", "pattern"],
+            },
+            "label-default": {
+              $type: "color",
+              $value: "#7C7C7C",
+              $description:
+                "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.colorcode.gray.deep}",
+                $description:
+                  "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default.",
+              },
+              name: "formColorColorpickerGrayLabelDefault",
+              attributes: {},
+              path: ["form", "color", "colorpicker", "gray", "label-default"],
+            },
+          },
+        },
         dropdown: {
           "bg-hover": {
             $type: "color",