@progressiveui/react 2.0.2 → 2.0.4

package/src/globals/data/colors.js

@@ -1,716 +0,0 @@
-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',
-// },