@sage/design-tokens 8.2.0 → 8.4.0

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

@@ -3232,6 +3232,748 @@ module.exports = {
           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",