@progressiveui/react 1.22.0

package/src/globals/data/colors.js

@@ -0,0 +1,716 @@
+const colors = {
+  main: {
+    name: "main",
+    hex: "#007DBC", // previously 0A6EB4
+    scss: "$color__main",
+    type: "communications",
+  },
+  "sequential-default-07": {
+    name: "sequential-default-07",
+    hex: "#9DEAFF",
+    scss: "$color__sequential-default-07",
+    type: "sequential-default",
+    shortDescription: "sequential default 07",
+  },
+  "sequential-default-06": {
+    name: "sequential-default-06",
+    hex: "#73C3FE",
+    scss: "$color__sequential-default-06",
+    type: "sequential-default",
+    shortDescription: "sequential default 06",
+  },
+  "sequential-default-05": {
+    name: "sequential-default-05",
+    hex: "#4AA1E2",
+    scss: "$color__sequential-default-05",
+    type: "sequential-default",
+    shortDescription: "sequential default 05",
+  },
+  "sequential-default-04": {
+    name: "sequential-default-04",
+    hex: "#0780C0",
+    scss: "$color__sequential-default-04",
+    type: "sequential-default",
+    shortDescription: "sequential default 04",
+  },
+  "sequential-default-03": {
+    name: "sequential-default-03",
+    hex: "#005F9B",
+    scss: "$color__sequential-default-03",
+    type: "sequential-default",
+    shortDescription: "sequential default 03",
+  },
+  "sequential-default-02": {
+    name: "sequential-default-02",
+    hex: "#003F76",
+    scss: "$color__sequential-default-02",
+    type: "sequential-default",
+    shortDescription: "sequential default 02",
+  },
+  "sequential-default-01": {
+    name: "sequential-default-01",
+    hex: "#002153",
+    scss: "$color__sequential-default-01",
+    type: "sequential-default",
+    shortDescription: "sequential default 01",
+  },
+  "sequential-secondary-07": {
+    name: "sequential-secondary-07",
+    hex: "#bdf9c4",
+    scss: "$color__sequential-secondary-07",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 07",
+  },
+  "sequential-secondary-06": {
+    name: "sequential-secondary-06",
+    hex: "#89eaa8",
+    scss: "$color__sequential-secondary-06",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 06",
+  },
+  "sequential-secondary-05": {
+    name: "sequential-secondary-05",
+    hex: "#5fd79a",
+    scss: "$color__sequential-secondary-05",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 05",
+  },
+  "sequential-secondary-04": {
+    name: "sequential-secondary-04",
+    hex: "#41c196",
+    scss: "$color__sequential-secondary-04",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 04",
+  },
+  "sequential-secondary-03": {
+    name: "sequential-secondary-03",
+    hex: "#33aa96",
+    scss: "$color__sequential-secondary-03",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 03",
+  },
+  "sequential-secondary-02": {
+    name: "sequential-secondary-02",
+    hex: "#319298",
+    scss: "$color__sequential-secondary-02",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 02",
+  },
+  "sequential-secondary-01": {
+    name: "sequential-secondary-01",
+    hex: "#367a96",
+    scss: "$color__sequential-secondary-01",
+    type: "sequential-secondary",
+    shortDescription: "sequential secondary 01",
+  },
+  "categorical-corporate-01": {
+    name: "categorical-01",
+    hex: "#007DBC",
+    scss: "$color__categorical-corporate-01",
+    type: "categorical",
+    shortDescription: "categorical-01",
+  },
+  "categorical-corporate-02": {
+    name: "categorical-02",
+    hex: "#36B5C5",
+    scss: "$color__categorical-corporate-02",
+    type: "categorical",
+    shortDescription: "categorical-02",
+  },
+  "categorical-corporate-03": {
+    name: "categorical-03",
+    hex: "#00B485",
+    scss: "$color__categorical-corporate-03",
+    type: "categorical",
+    shortDescription: "categorical-03",
+  },
+  "categorical-corporate-04": {
+    name: "categorical-04",
+    hex: "#008868",
+    scss: "$color__categorical-corporate-04",
+    type: "categorical",
+    shortDescription: "categorical-04",
+  },
+  "categorical-corporate-05": {
+    name: "categorical-05",
+    hex: "#1A4262",
+    scss: "$color__categorical-corporate-05",
+    type: "categorical",
+    shortDescription: "categorical-05",
+  },
+  "categorical-corporate-06": {
+    name: "categorical-06",
+    hex: "#982B56",
+    scss: "$color__categorical-corporate-06",
+    type: "categorical",
+    shortDescription: "categorical-06",
+  },
+  "categorical-corporate-07": {
+    name: "categorical-07",
+    hex: "#EF404C",
+    scss: "$color__categorical-corporate-07",
+    type: "categorical",
+    shortDescription: "categorical-07",
+  },
+  "categorical-corporate-08": {
+    name: "categorical-08",
+    hex: "#F47847",
+    scss: "$color__categorical-corporate-08",
+    type: "categorical",
+    shortDescription: "categorical-08",
+  },
+  "categorical-corporate-09": {
+    name: "categorical-09",
+    hex: "#B79F8D",
+    scss: "$color__categorical-corporate-09",
+    type: "categorical",
+    shortDescription: "categorical-09",
+  },
+  "categorical-corporate-10": {
+    name: "categorical-10",
+    hex: "#ECDFBB",
+    scss: "$color__categorical-corporate-10",
+    type: "categorical",
+    shortDescription: "categorical-10",
+  },
+  female: {
+    name: "female",
+    hex: "#3f7e44",
+    scss: "$color__female",
+    type: "symbolic",
+    shortDescription: "Indicate female",
+  },
+  male: {
+    name: "male",
+    hex: "#26bde2",
+    scss: "$color__male",
+    type: "symbolic",
+    shortDescription: "Indicate male",
+  },
+  national: {
+    name: "national",
+    hex: "#3C5979",
+    scss: "$color__national",
+    type: "symbolic",
+    shortDescription: "Indicate national staff",
+  },
+  international: {
+    name: "international",
+    hex: "#fcc30b",
+    scss: "$color__international",
+    type: "symbolic",
+    shortDescription: "Indicate international staff",
+  },
+  "brand-01": {
+    name: "brand-01",
+    hex: "#007DBC", //previously 0A6EB4
+    scss: "var(--brand-01)",
+    css: "color__brand-01",
+    type: "brand",
+    shortDescription: "WFP brand color",
+  },
+  "interactive-01": {
+    name: "interactive-01",
+    hex: "#0b77c2",
+    scss: "var(--interactive-01)",
+    css: "color__interactive-01",
+    type: "brand",
+    shortDescription: "Primary interactive color, Primary buttons",
+  },
+  "interactive-02": {
+    name: "interactive-02",
+    hex: "#085387",
+    scss: "$action-default-fill-primary-default-02",
+    css: "color__interactive-02",
+    type: "brand",
+    shortDescription: "BannerNavigation",
+  },
+  "accent-01": {
+    name: "accent-01",
+    hex: "#f7b825",
+    scss: "$accent-01",
+    css: "color__accent-01",
+    type: "brand-accent", //replaced type brand to brand-accent to prevent it from showing it
+    shortDescription: "Accent colour (recommended)",
+  },
+  "brand-01-20": {
+    name: "brand-01-20",
+    hex: "#c2dbec",
+    scss: "$brand-01-20",
+    css: "color__brand-01-20",
+    type: "brand-extended",
+  },
+  "brand-01-30": {
+    name: "brand-01-30",
+    hex: "#85b7da",
+    scss: "$brand-01-30",
+    css: "color__brand-01-30",
+    type: "brand-extended",
+  },
+  "brand-01-40": {
+    name: "brand-01-40",
+    hex: "#4792c7",
+    scss: "$brand-01-40",
+    css: "color__brand-01-40",
+    type: "brand-extended",
+  },
+  "brand-01-60": {
+    name: "brand-01-60",
+    hex: "#085387",
+    scss: "$brand-01-60",
+    css: "color__brand-01-60",
+    type: "brand-extended",
+  },
+  "brand-01-70": {
+    name: "brand-01-70",
+    hex: "#05375a",
+    scss: "$brand-01-70",
+    css: "color__brand-01-70",
+    type: "brand-extended",
+  },
+  "brand-01-80": {
+    name: "brand-01-80",
+    hex: "#031c2d",
+    scss: "$brand-01-80",
+    css: "color__brand-01-80",
+    type: "brand-extended",
+  },
+  "ui-01": {
+    name: "ui-01",
+    hex: "#ffffff",
+    scss: "$ui-01",
+    css: "color__ui-01",
+    type: "ui",
+    shortDescription: "Primary container background; Secondary page background",
+    description:
+      "This colour is used as the page background if there are no Modules on top of it.",
+  },
+  "ui-02": {
+    name: "ui-02",
+    hex: "#eff2f5",
+    scss: "var(--ui-02)",
+    css: "color__ui-02",
+    type: "ui",
+    shortDescription: "Primary page background; Secondary container background",
+    description:
+      "Use this colour as page background if there are modules on top of it to increase the contrast between the modules.",
+  },
+  "ui-03": {
+    name: "ui-03",
+    hex: "#f0f3f6",
+    scss: "$ui-03",
+    css: "color__ui-03",
+    type: "ui",
+    shortDescription: "Subtle border, Tertiary background color",
+  },
+  "ui-04": {
+    name: "ui-04",
+    hex: "#dfe3e6",
+    scss: "$ui-04",
+    css: "color__ui-04",
+    type: "ui",
+    shortDescription: "3:1 AA element contrast; Medium contrast border",
+  },
+  "ui-05": {
+    name: "ui-05",
+    hex: "#8c9ba5",
+    scss: "$ui-03",
+    css: "color__ui-05",
+    type: "ui",
+    shortDescription:
+      "4.5:1 AA element contrast; High contrast border; Emphasis elements",
+  },
+  "ui-06": {
+    name: "ui-06",
+    hex: "#0b1923",
+    scss: "$ui-06",
+    css: "color__ui-06",
+    type: "ui",
+    shortDescription: "",
+  },
+  "text-01": {
+    name: "text-01",
+    hex: "#031c2d",
+    scss: "$text-01",
+    css: "color__text-01",
+    type: "ui",
+    shortDescription: "Primary text colour; Input labels;",
+  },
+  "text-02": {
+    name: "text-02",
+    hex: "#5a6872",
+    scss: "$text-02",
+    css: "color__text-02",
+    type: "ui",
+    shortDescription: "Secondary text; Help text",
+  },
+  "text-03": {
+    name: "text-03",
+    hex: "#dfe6eb",
+    scss: "$text-03",
+    css: "color__text-03",
+    type: "ui",
+    shortDescription: "Placeholder text",
+  },
+  "text-04": {
+    name: "text-04",
+    hex: "#ffffff",
+    scss: "$text-04",
+    css: "color__text-04",
+    type: "ui",
+    shortDescription: "",
+  },
+  "inverse-01": {
+    name: "inverse-01",
+    hex: "#ffffff",
+    scss: "$inverse-01",
+    css: "color__inverse-01",
+    type: "ui",
+    shortDescription: "Inverse text color; Inverse icon color",
+  },
+  // 'inverse-02': {
+  //   name: 'inverse-02',
+  //   hex: '#f0f3f6',
+  //   scss: '$inverse-02',
+  //   css: 'color__inverse-02',
+  //   type: 'ui',
+  //   shortDescription: 'High contrast backgrounds; High contrast elements',
+  // },
+  "field-01": {
+    name: "field-01",
+    hex: "#ffffff",
+    scss: "$field-02",
+    css: "color__field-01",
+    type: "ui",
+    shortDescription: "Default input fields; Fields on $ui-backgrounds",
+  },
+  /*'field-02': {
+    name: 'field-02',
+    hex: '#fbfcfc',
+    scss: '$field-02',
+    css: 'color__field-02',
+    type: 'ui',
+  },*/
+  "field-border-01": {
+    name: "field-border-01",
+    hex: "#d4d7d9",
+    scss: "$field-border-01",
+    css: "color__field-border-01",
+    type: "ui",
+    shortDescription: "",
+  },
+  "disabled-01": {
+    name: "disabled-01",
+    hex: "#f9fbfc",
+    scss: "$disabled-01",
+    css: "color__disabled-01",
+    type: "ui",
+    shortDescription: "",
+  },
+  "disabled-02": {
+    name: "disabled-02",
+    hex: "#dfe6eb",
+    scss: "$disabled-02",
+    css: "color__disabled-02",
+    type: "ui",
+    shortDescription: "",
+  },
+  "sdg-01": {
+    name: "sdg-01",
+    hex: "#E5243B",
+    scss: "$sdg-01",
+    css: "color__sdg-01",
+    type: "sdg",
+    shortDescription: "No poverty, red",
+  },
+  "sdg-02": {
+    name: "sdg-02",
+    hex: "#DDA63A",
+    scss: "$sdg-02",
+    css: "color__sdg-02",
+    type: "sdg",
+    shortDescription: "Zero hunger, mustard",
+  },
+  "sdg-03": {
+    name: "sdg-03",
+    hex: "#4C9F38",
+    scss: "$sdg-03",
+    css: "color__sdg-03",
+    type: "sdg",
+    shortDescription: "Good health and well-being, kelly green",
+  },
+  "sdg-04": {
+    name: "sdg-04",
+    hex: "#C5192D",
+    scss: "$sdg-04",
+    css: "color__sdg-04",
+    type: "sdg",
+    shortDescription: "Quality education, dark red",
+  },
+  "sdg-05": {
+    name: "sdg-05",
+    hex: "#FF3A21",
+    scss: "$sdg-05",
+    css: "color__sdg-05",
+    type: "sdg",
+    shortDescription: "Gender equality, red orange",
+  },
+  "sdg-06": {
+    name: "sdg-06",
+    hex: "#26BDE2",
+    scss: "$sdg-06",
+    css: "color__sdg-06",
+    type: "sdg",
+    shortDescription: "Clean water and sanitation, bright blue",
+  },
+  "sdg-07": {
+    name: "sdg-07",
+    hex: "#FCC30B",
+    scss: "$sdg-07",
+    css: "color__sdg-07",
+    type: "sdg",
+    shortDescription: "Affordable and clean energy, yellow",
+  },
+  "sdg-08": {
+    name: "sdg-08",
+    hex: "#A21942",
+    scss: "$sdg-08",
+    css: "color__sdg-08",
+    type: "sdg",
+    shortDescription: "Decent work and economic growth, burgundy red",
+  },
+  "sdg-09": {
+    name: "sdg-09",
+    hex: "#FD6925",
+    scss: "$sdg-09",
+    css: "color__sdg-09",
+    type: "sdg",
+    shortDescription: "Industry, innovation and infrastructure, orange",
+  },
+  "sdg-10": {
+    name: "sdg-10",
+    hex: "#DD1367",
+    scss: "$sdg-10",
+    css: "color__sdg-10",
+    type: "sdg",
+    shortDescription: "Reduced inequalities, magentas",
+  },
+  "sdg-11": {
+    name: "sdg-11",
+    hex: "#FD9D24",
+    scss: "$sdg-11",
+    css: "color__sdg-11",
+    type: "sdg",
+    shortDescription: "Sustainable cities and communities, golden yellow",
+  },
+  "sdg-12": {
+    name: "sdg-12",
+    hex: "#BF8B2E",
+    scss: "$sdg-12",
+    css: "color__sdg-12",
+    type: "sdg",
+    shortDescription: "Responsible consumption and production, dark mustard",
+  },
+  "sdg-13": {
+    name: "sdg-13",
+    hex: "#3F7E44",
+    scss: "$sdg-10",
+    css: "color__sdg-13",
+    type: "sdg",
+    shortDescription: "Climate action, dark green",
+  },
+  "sdg-14": {
+    name: "sdg-14",
+    hex: "#0A97D9",
+    scss: "$sdg-14",
+    css: "color__sdg-14",
+    type: "sdg",
+    shortDescription: "Life below water, blue",
+  },
+  "sdg-15": {
+    name: "sdg-15",
+    hex: "#56C02B",
+    scss: "$sdg-15",
+    css: "color__sdg-15",
+    type: "sdg",
+    shortDescription: "Life on land, lime green",
+  },
+  "sdg-16": {
+    name: "sdg-16",
+    hex: "#00689D",
+    scss: "$sdg-16",
+    css: "color__sdg-16",
+    type: "sdg",
+    shortDescription: "Peace, justice and stron institutions, royal blue",
+  },
+  "sdg-17": {
+    name: "sdg-17",
+    hex: "#19486A",
+    scss: "$sdg-17",
+    css: "color__sdg-17",
+    type: "sdg",
+    shortDescription: "Partnership for the goals, navy blue",
+  },
+  "support-01": {
+    name: "support-01",
+    hex: "#c5192d",
+    scss: "$support-01",
+    css: "color__support-01",
+    type: "support",
+    shortDescription: "Error (same as color__red)",
+    description:
+      "Use the error color to indicate an error or to focus the attention on something which is crucial to see. Paired with a cross icon, red delivers the message that something went wrong.",
+  },
+  "support-light-01": {
+    name: "support-light-01",
+    hex: "#f1c6cb",
+    scss: "$support-light-01",
+    css: "color__support-light-01",
+    type: "support",
+    shortDescription: "Lighter version of color-red",
+    description: "",
+  },
+  "support-02": {
+    name: "support-02",
+    hex: "#689e18",
+    scss: "$support-02",
+    css: "color__support-02",
+    type: "support",
+    shortDescription: "Success",
+    description:
+      "Use green to indicate success state. Paired with a checkmark icon the user knows that the operation was successfully completed.",
+  },
+  "support-light-02": {
+    name: "support-light-02",
+    hex: "#ccdbcd",
+    scss: "$support-light-02",
+    css: "color__support-light-02",
+    type: "support",
+    shortDescription: "Lighter version of green",
+    description: "",
+  },
+  "support-03": {
+    name: "support-03",
+    hex: "#f7b825",
+    scss: "$support-03",
+    css: "color__support-03",
+    type: "support",
+    shortDescription: "Warning (same as color__yellow)",
+    description:
+      "Use yellow to indicate a transient warning which is less important than an error message. Yellow typically consists of items which require the user’s immediate attention, or indicate a waiting period. Although this overlaps with the use of red, yellow is more transient in nature.",
+  },
+  "support-light-03": {
+    name: "support-light-03",
+    hex: "#fdedc9",
+    scss: "$support-light-03",
+    css: "color__support-light-03",
+    type: "support",
+    shortDescription: "Lighter version of yellow",
+    description: "",
+  },
+  "support-04": {
+    name: "support-04",
+    hex: "#85b7da",
+    scss: "$support-04",
+    css: "color__support-04",
+    type: "support",
+    shortDescription: "Info",
+    description: "",
+  },
+  "support-light-04": {
+    name: "support-light-04",
+    hex: "#c2dbec",
+    scss: "$support-light-04",
+    css: "color__support-light-04",
+    type: "support",
+    shortDescription: "",
+    description: "",
+  },
+};
+
+export default colors;
+
+// main: {
+//   name: 'main',
+//   hex: '#0A6EB4',
+//   scss: '$color__main',
+//   type: 'communications',
+// },
+// navy: {
+//   name: 'navy',
+//   hex: '#19486a',
+//   scss: '$color__navy',
+//   // shortDescription: 'Same as SDG 17',
+//   shortDescription: '',
+//   type: 'communications',
+// },
+// aqua: {
+//   name: 'aqua',
+//   hex: '#26bde2',
+//   // shortDescription: 'Same as SDG 6',
+//   shortDescription: '',
+//   scss: '$color__aqua',
+//   type: 'communications',
+// },
+// 'dark-green': {
+//   name: 'dark-green',
+//   hex: '#3f7e44',
+//   // shortDescription: 'Same as SDG 13',
+//   shortDescription: '',
+//   scss: '$color__dark-green',
+//   type: 'communications',
+// },
+// lime: {
+//   name: 'lime',
+//   hex: '#97d700',
+//   scss: '$color__lime',
+//   type: 'communications',
+// },
+// yellow: {
+//   name: 'yellow',
+//   hex: '#fcc30b',
+//   // shortDescription: 'Same as SDG 7',
+//   shortDescription: '',
+//   scss: '$color__yellow',
+//   type: 'communications',
+// },
+// ochre: {
+//   name: 'ochre',
+//   hex: '#dda63a',
+//   // shortDescription: 'Same as SDG 2',
+//   shortDescription: '',
+//   scss: '$color__ochre',
+//   type: 'communications',
+// },
+// orange: {
+//   name: 'orange',
+//   hex: '#fd6925',
+//   // shortDescription: 'Same as SDG 9',
+//   shortDescription: '',
+//   scss: '$color__orange',
+//   type: 'communications',
+// },
+// red: {
+//   name: 'red',
+//   hex: '#c5192d',
+//   // shortDescription: 'Same as SDG 1',
+//   shortDescription: '',
+//   scss: '$color__red',
+//   type: 'communications',
+// },
+// 'dark-red': {
+//   name: 'dark-red',
+//   hex: '#a21942',
+//   // shortDescription: 'Same as SDG 8',
+//   shortDescription: '',
+//   scss: '$color__dark-red',
+//   type: 'communications',
+// },
+// magenta: {
+//   name: 'magenta',
+//   hex: '#dd1367',
+//   // shortDescription: 'Same as SDG 10',
+//   shortDescription: '',
+//   scss: '$color__magenta',
+//   type: 'communications',
+// },