From dc9e417d8f82540ceeb40d12f281532fecc9cdfc Mon Sep 17 00:00:00 2001
From: duncan <duncan@dtail-design.nl>
Date: Tue, 9 Apr 2024 11:01:25 +0000
Subject: [PATCH] fix(colors): new visualization colors, removed old entity and
relation colors
---
libs/config/src/colors.ts | 886 +++++++++-----
libs/config/styling/primitives.css | 54 +-
libs/config/styling/variables.css | 114 +-
.../components/DesignGuides/styleGuide.mdx | 1080 ++++++++---------
.../components/charts/Axis/axis.stories.tsx | 2 +-
.../queryBuilderRelatedNodesPanel.tsx | 5 +-
.../relationpill/relation-handles.tsx | 4 +-
.../relationpill/relationpill.module.scss | 12 +-
.../pills/nodes/entity/entity.module.scss | 2 +-
.../pills/nodes/relation/relation.module.scss | 3 +-
.../matrixvis/components/MatrixPixi.tsx | 5 +-
.../nodelinkvis/components/NLPixi.tsx | 15 +-
.../nodelinkvis/components/utils.tsx | 7 +-
.../vis/visualizations/paohvis/paohvis.tsx | 7 +-
.../semanticsubstratesvis.tsx | 10 +-
.../semanticsubstratesvis/utils.ts | 8 +-
16 files changed, 1234 insertions(+), 980 deletions(-)
diff --git a/libs/config/src/colors.ts b/libs/config/src/colors.ts
index 651c21dae..a1e3ace88 100644
--- a/libs/config/src/colors.ts
+++ b/libs/config/src/colors.ts
@@ -96,65 +96,623 @@ export const tailwindColors = {
light: 'hsl(var(--clr-light) / <alpha-value>)',
dark: 'hsl(var(--clr-dark) / <alpha-value>)',
+};
- entity: {
- // https://www.tailwindshades.com/#color=29.41176470588235%2C100%2C50&step-up=8&step-down=8&hue-shift=5&name=flush-orange&base-stop=6&v=1&overrides=e30%3D
- DEFAULT: '#FF7D00',
- 0: '#FFFAF9',
- 50: '#FFF3E6',
- 100: '#FFE7CC',
- 200: '#FFD3A3',
- 300: '#FFBF7A',
- 400: '#FFA952',
- 500: '#FF9429',
- 600: '#FF7D00', // primary
- 700: '#D66700',
- 800: '#AD5200',
- 900: '#853E00',
- 950: '#703400',
- },
- relation: {
- //https://www.tailwindshades.com/#color=207.97297297297297%2C62.184873949579824%2C46.666666666666664&step-up=9&step-down=10&hue-shift=0&name=mariner&base-stop=6&v=1&overrides=e30%3D
- DEFAULT: '#2D7CC1',
- 50: '#EFF6FB',
- 100: '#DDEBF7',
- 200: '#B7D5EE',
- 300: '#92BFE6',
- 400: '#6DA9DD',
- 500: '#4893D4',
- 600: '#2D7CC1',
- 700: '#236198',
- 800: '#1A476E',
- 900: '#102C45',
- 950: '#0B1F30',
+export const visualizationColors = {
+ GPPrimary: {
+ title: 'Primary',
+ type: ['default'],
+ colors: {
+ 1: ['#DA6601'],
+ },
},
- custom: {
- nodes: [
- '#181520', // black
- '#d49350', // orange
- '#1e9797', // blue
- '#d56a50', // red
- '#800000',
- '#fabed4',
- '#808000',
- '#ffe119',
- '#bfef45',
- '#3cb44b',
- '#42d4f4',
- '#000075',
- '#4363d8',
- '#911eb4',
- '#dcbeff',
- '#f032e6',
- '#a9a9a9',
- '#2d7c0b',
- '#00ff00',
- '#0000ff',
- ],
+ GPNeutral: {
+ title: 'Neutral',
+ type: ['default'],
+ colors: {
+ 1: ['#A2AAB9'],
+ 14: [
+ '#f9fafb',
+ '#f2f4f7',
+ '#eaecf1',
+ '#e1e4ea',
+ '#c4cbd4',
+ '#a2aab9',
+ '#838da0',
+ '#677283',
+ '#4e586a',
+ '#384457',
+ '#2a3646',
+ '#202c3c',
+ '#1a2233',
+ '#121621',
+ ],
+ },
+ },
+ GPSelected: {
+ title: 'Selected',
+ type: ['default'],
+ colors: {
+ 1: ['#DA6601'],
+ },
+ },
+ GPCat: {
+ title: 'Categorical',
+ type: ['default', 'categorical', 'multi-hue'],
+ colors: {
+ 14: [
+ '#FB9637',
+ '#A91919',
+ '#B69AEF',
+ '#0676C1',
+ '#E23C83',
+ '#F9CB4E',
+ '#0F9F9F',
+ '#76D079',
+ '#8363C5',
+ '#FD81B7',
+ '#267E28',
+ '#8CAFF8',
+ '#BB8F16',
+ '#51D2D2',
+ ],
+ },
+ },
+ GPCat2: {
+ title: 'Categorical Paired',
+ type: ['default', 'categorical', 'multi-hue'],
+ colors: {
+ 14: [
+ '#FB9637',
+ '#A91919',
+ '#8CAFF8',
+ '#0676C1',
+ '#F9CB4E',
+ '#BB8F16',
+ '#FD81B7',
+ '#E23C83',
+ '#76D079',
+ '#267E28',
+ '#B69AEF',
+ '#8363C5',
+ '#51D2D2',
+ '#0F9F9F',
+ ],
+ },
+ },
+ GPSeq: {
+ title: 'Sequential',
+ type: ['default', 'sequential', 'multi-hue'],
+ colors: {
+ 1: ['#DA6601'],
+ 2: ['#F9CB4E', '#A91919'],
+ 3: ['#F9CB4E', '#FB9637', '#A91919'],
+ 4: ['#F9CB4E', '#FB9637', '#DA6601', '#A91919'],
+ 5: ['#FBE5A7', '#F9CB4E', '#FB9637', '#DA6601', '#A91919'],
+ 6: ['#FBE5A7', '#F9CB4E', '#FB9637', '#DA6601', '#A91919', '#540729'],
+ 7: ['#FBE5A7', '#F9CB4E', '#FB9637', '#DA6601', '#A91919', '#850039', '#540729'],
+ 8: ['#FBE5A7', '#F9CB4E', '#FBB244', '#FB9637', '#DA6601', '#A91919', '#850039', '#540729'],
+ 9: ['#FDF3D8', '#FBE5A7', '#F9CB4E', '#FBB244', '#FB9637', '#DA6601', '#A91919', '#850039', '#540729'],
+ },
+ },
+ GPDiv: {
+ title: 'Diverging',
+ type: ['default', 'diverging', 'multi-hue'],
+ colors: {
+ 3: ['#FB7B04', '#FAFAFA', '#45A4E3'],
+ 4: ['#A94C0A', '#FFBF84', '#ABD6F3', '#0676C1'],
+ 5: ['#A94C0A', '#FFBF84', '#FAFAFA', '#ABD6F3', '#0676C1'],
+ 6: ['#A94C0A', '#FFBF84', '#FFDDBE', '#D1EAFA', '#45A4E3', '#0676C1'],
+ 7: ['#A94C0A', '#FFBF84', '#FFDDBE', '#FAFAFA', '#D1EAFA', '#45A4E3', '#0676C1'],
+ 8: ['#A94C0A', '#FB7B04', '#FFBF84', '#FFDDBE', '#D1EAFA', '#ABD6F3', '#45A4E3', '#0676C1'],
+ 9: ['#A94C0A', '#FB7B04', '#FFBF84', '#FFDDBE', '#FAFAFA', '#D1EAFA', '#ABD6F3', '#45A4E3', '#0676C1'],
+ 10: ['#572400', '#A94C0A', '#FB7B04', '#FFBF84', '#FFDDBE', '#D1EAFA', '#ABD6F3', '#45A4E3', '#0676C1', '#033D63'],
+ 11: ['#572400', '#A94C0A', '#FB7B04', '#FFBF84', '#FFDDBE', '#FAFAFA', '#D1EAFA', '#ABD6F3', '#45A4E3', '#0676C1', '#033D63'],
+ },
+ },
+ YlGn: {
+ title: 'Yellow-Green',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#f7fcb9', '#addd8e', '#31a354'],
+ 4: ['#ffffcc', '#c2e699', '#78c679', '#238443'],
+ 5: ['#ffffcc', '#c2e699', '#78c679', '#31a354', '#006837'],
+ 6: ['#ffffcc', '#d9f0a3', '#addd8e', '#78c679', '#31a354', '#006837'],
+ 7: ['#ffffcc', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#005a32'],
+ 8: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#005a32'],
+ 9: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
+ },
+ },
+ YlGnBu: {
+ title: 'Yellow-Green-Blue',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#edf8b1', '#7fcdbb', '#2c7fb8'],
+ 4: ['#ffffcc', '#a1dab4', '#41b6c4', '#225ea8'],
+ 5: ['#ffffcc', '#a1dab4', '#41b6c4', '#2c7fb8', '#253494'],
+ 6: ['#ffffcc', '#c7e9b4', '#7fcdbb', '#41b6c4', '#2c7fb8', '#253494'],
+ 7: ['#ffffcc', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#0c2c84'],
+ 8: ['#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#0c2c84'],
+ 9: ['#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#253494', '#081d58'],
+ },
+ },
+ GnBu: {
+ title: 'Green-Blue',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#e0f3db', '#a8ddb5', '#43a2ca'],
+ 4: ['#f0f9e8', '#bae4bc', '#7bccc4', '#2b8cbe'],
+ 5: ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac'],
+ 6: ['#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac'],
+ 7: ['#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e'],
+ 8: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e'],
+ 9: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081'],
+ },
+ },
+ BuGn: {
+ title: 'Blue-Green',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#e5f5f9', '#99d8c9', '#2ca25f'],
+ 4: ['#edf8fb', '#b2e2e2', '#66c2a4', '#238b45'],
+ 5: ['#edf8fb', '#b2e2e2', '#66c2a4', '#2ca25f', '#006d2c'],
+ 6: ['#edf8fb', '#ccece6', '#99d8c9', '#66c2a4', '#2ca25f', '#006d2c'],
+ 7: ['#edf8fb', '#ccece6', '#99d8c9', '#66c2a4', '#41ae76', '#238b45', '#005824'],
+ 8: ['#f7fcfd', '#e5f5f9', '#ccece6', '#99d8c9', '#66c2a4', '#41ae76', '#238b45', '#005824'],
+ 9: ['#f7fcfd', '#e5f5f9', '#ccece6', '#99d8c9', '#66c2a4', '#41ae76', '#238b45', '#006d2c', '#00441b'],
+ },
+ },
+ PuBuGn: {
+ title: 'Purple-Blue-Green',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#ece2f0', '#a6bddb', '#1c9099'],
+ 4: ['#f6eff7', '#bdc9e1', '#67a9cf', '#02818a'],
+ 5: ['#f6eff7', '#bdc9e1', '#67a9cf', '#1c9099', '#016c59'],
+ 6: ['#f6eff7', '#d0d1e6', '#a6bddb', '#67a9cf', '#1c9099', '#016c59'],
+ 7: ['#f6eff7', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016450'],
+ 8: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016450'],
+ 9: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
+ },
+ },
+ PuBu: {
+ title: 'Purple-Blue',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#ece7f2', '#a6bddb', '#2b8cbe'],
+ 4: ['#f1eef6', '#bdc9e1', '#74a9cf', '#0570b0'],
+ 5: ['#f1eef6', '#bdc9e1', '#74a9cf', '#2b8cbe', '#045a8d'],
+ 6: ['#f1eef6', '#d0d1e6', '#a6bddb', '#74a9cf', '#2b8cbe', '#045a8d'],
+ 7: ['#f1eef6', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#034e7b'],
+ 8: ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#034e7b'],
+ 9: ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858'],
+ },
+ },
+ BuPu: {
+ title: 'Blue-Purple',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#e0ecf4', '#9ebcda', '#8856a7'],
+ 4: ['#edf8fb', '#b3cde3', '#8c96c6', '#88419d'],
+ 5: ['#edf8fb', '#b3cde3', '#8c96c6', '#8856a7', '#810f7c'],
+ 6: ['#edf8fb', '#bfd3e6', '#9ebcda', '#8c96c6', '#8856a7', '#810f7c'],
+ 7: ['#edf8fb', '#bfd3e6', '#9ebcda', '#8c96c6', '#8c6bb1', '#88419d', '#6e016b'],
+ 8: ['#f7fcfd', '#e0ecf4', '#bfd3e6', '#9ebcda', '#8c96c6', '#8c6bb1', '#88419d', '#6e016b'],
+ 9: ['#f7fcfd', '#e0ecf4', '#bfd3e6', '#9ebcda', '#8c96c6', '#8c6bb1', '#88419d', '#810f7c', '#4d004b'],
+ },
+ },
+ RdPu: {
+ title: 'Red-Purple',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#fde0dd', '#fa9fb5', '#c51b8a'],
+ 4: ['#feebe2', '#fbb4b9', '#f768a1', '#ae017e'],
+ 5: ['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177'],
+ 6: ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#c51b8a', '#7a0177'],
+ 7: ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177'],
+ 8: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177'],
+ 9: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
+ },
+ },
+ PuRd: {
+ title: 'Purple-Red',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#e7e1ef', '#c994c7', '#dd1c77'],
+ 4: ['#f1eef6', '#d7b5d8', '#df65b0', '#ce1256'],
+ 5: ['#f1eef6', '#d7b5d8', '#df65b0', '#dd1c77', '#980043'],
+ 6: ['#f1eef6', '#d4b9da', '#c994c7', '#df65b0', '#dd1c77', '#980043'],
+ 7: ['#f1eef6', '#d4b9da', '#c994c7', '#df65b0', '#e7298a', '#ce1256', '#91003f'],
+ 8: ['#f7f4f9', '#e7e1ef', '#d4b9da', '#c994c7', '#df65b0', '#e7298a', '#ce1256', '#91003f'],
+ 9: ['#f7f4f9', '#e7e1ef', '#d4b9da', '#c994c7', '#df65b0', '#e7298a', '#ce1256', '#980043', '#67001f'],
+ },
+ },
+ OrRd: {
+ title: 'Orange-Red',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#fee8c8', '#fdbb84', '#e34a33'],
+ 4: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f'],
+ 5: ['#fef0d9', '#fdcc8a', '#fc8d59', '#e34a33', '#b30000'],
+ 6: ['#fef0d9', '#fdd49e', '#fdbb84', '#fc8d59', '#e34a33', '#b30000'],
+ 7: ['#fef0d9', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#990000'],
+ 8: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#990000'],
+ 9: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
+ },
+ },
+ YlOrRd: {
+ title: 'Yellow-Orange-Red',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#ffeda0', '#feb24c', '#f03b20'],
+ 4: ['#ffffb2', '#fecc5c', '#fd8d3c', '#e31a1c'],
+ 5: ['#ffffb2', '#fecc5c', '#fd8d3c', '#f03b20', '#bd0026'],
+ 6: ['#ffffb2', '#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'],
+ 7: ['#ffffb2', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#b10026'],
+ 8: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#b10026'],
+ 9: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
+ },
+ },
+ YlOrBr: {
+ title: 'Yellow-Orange-Brown',
+ type: ['sequential', 'multi-hue'],
+ colors: {
+ 3: ['#fff7bc', '#fec44f', '#d95f0e'],
+ 4: ['#ffffd4', '#fed98e', '#fe9929', '#cc4c02'],
+ 5: ['#ffffd4', '#fed98e', '#fe9929', '#d95f0e', '#993404'],
+ 6: ['#ffffd4', '#fee391', '#fec44f', '#fe9929', '#d95f0e', '#993404'],
+ 7: ['#ffffd4', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#8c2d04'],
+ 8: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#8c2d04'],
+ 9: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
+ },
+ },
+ Purples: {
+ title: 'Purple',
+ type: ['sequential', 'single-hue'],
+ colors: {
+ 3: ['#efedf5', '#bcbddc', '#756bb1'],
+ 4: ['#f2f0f7', '#cbc9e2', '#9e9ac8', '#6a51a3'],
+ 5: ['#f2f0f7', '#cbc9e2', '#9e9ac8', '#756bb1', '#54278f'],
+ 6: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
+ 7: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#4a1486'],
+ 8: ['#fcfbfd', '#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#4a1486'],
+ 9: ['#fcfbfd', '#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#54278f', '#3f007d'],
+ },
+ },
+ Blues: {
+ title: 'Blue',
+ type: ['sequential', 'single-hue'],
+ colors: {
+ 3: ['#deebf7', '#9ecae1', '#3182bd'],
+ 4: ['#eff3ff', '#bdd7e7', '#6baed6', '#2171b5'],
+ 5: ['#eff3ff', '#bdd7e7', '#6baed6', '#3182bd', '#08519c'],
+ 6: ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd', '#08519c'],
+ 7: ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'],
+ 8: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'],
+ 9: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'],
+ },
+ },
+ Greens: {
+ title: 'Green',
+ type: ['sequential', 'single-hue'],
+ colors: {
+ 3: ['#e5f5e0', '#a1d99b', '#31a354'],
+ 4: ['#edf8e9', '#bae4b3', '#74c476', '#238b45'],
+ 5: ['#edf8e9', '#bae4b3', '#74c476', '#31a354', '#006d2c'],
+ 6: ['#edf8e9', '#c7e9c0', '#a1d99b', '#74c476', '#31a354', '#006d2c'],
+ 7: ['#edf8e9', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#005a32'],
+ 8: ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#005a32'],
+ 9: ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'],
+ },
+ },
+ Oranges: {
+ title: 'Orange',
+ type: ['sequential', 'single-hue'],
+ colors: {
+ 3: ['#fee6ce', '#fdae6b', '#e6550d'],
+ 4: ['#feedde', '#fdbe85', '#fd8d3c', '#d94701'],
+ 5: ['#feedde', '#fdbe85', '#fd8d3c', '#e6550d', '#a63603'],
+ 6: ['#feedde', '#fdd0a2', '#fdae6b', '#fd8d3c', '#e6550d', '#a63603'],
+ 7: ['#feedde', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#8c2d04'],
+ 8: ['#fff5eb', '#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#8c2d04'],
+ 9: ['#fff5eb', '#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#a63603', '#7f2704'],
+ },
+ },
+ Reds: {
+ title: 'Red',
+ type: ['sequential', 'single-hue'],
+ colors: {
+ 3: ['#fee0d2', '#fc9272', '#de2d26'],
+ 4: ['#fee5d9', '#fcae91', '#fb6a4a', '#cb181d'],
+ 5: ['#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15'],
+ 6: ['#fee5d9', '#fcbba1', '#fc9272', '#fb6a4a', '#de2d26', '#a50f15'],
+ 7: ['#fee5d9', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#99000d'],
+ 8: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#99000d'],
+ 9: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
+ },
+ },
+ Greys: {
+ title: 'Grey',
+ type: ['sequential', 'single-hue'],
+ colors: {
+ 3: ['#f0f0f0', '#bdbdbd', '#636363'],
+ 4: ['#f7f7f7', '#cccccc', '#969696', '#525252'],
+ 5: ['#f7f7f7', '#cccccc', '#969696', '#636363', '#252525'],
+ 6: ['#f7f7f7', '#d9d9d9', '#bdbdbd', '#969696', '#636363', '#252525'],
+ 7: ['#f7f7f7', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'],
+ 8: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'],
+ 9: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
+ },
+ },
+ PuOr: {
+ title: 'Purple-Orange',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#f1a340', '#f7f7f7', '#998ec3'],
+ 4: ['#e66101', '#fdb863', '#b2abd2', '#5e3c99'],
+ 5: ['#e66101', '#fdb863', '#f7f7f7', '#b2abd2', '#5e3c99'],
+ 6: ['#b35806', '#f1a340', '#fee0b6', '#d8daeb', '#998ec3', '#542788'],
+ 7: ['#b35806', '#f1a340', '#fee0b6', '#f7f7f7', '#d8daeb', '#998ec3', '#542788'],
+ 8: ['#b35806', '#e08214', '#fdb863', '#fee0b6', '#d8daeb', '#b2abd2', '#8073ac', '#542788'],
+ 9: ['#b35806', '#e08214', '#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2', '#8073ac', '#542788'],
+ 10: ['#7f3b08', '#b35806', '#e08214', '#fdb863', '#fee0b6', '#d8daeb', '#b2abd2', '#8073ac', '#542788', '#2d004b'],
+ 11: ['#7f3b08', '#b35806', '#e08214', '#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2', '#8073ac', '#542788', '#2d004b'],
+ },
+ },
+ BrBG: {
+ title: 'Brown-Blue-Green',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#d8b365', '#f5f5f5', '#5ab4ac'],
+ 4: ['#a6611a', '#dfc27d', '#80cdc1', '#018571'],
+ 5: ['#a6611a', '#dfc27d', '#f5f5f5', '#80cdc1', '#018571'],
+ 6: ['#8c510a', '#d8b365', '#f6e8c3', '#c7eae5', '#5ab4ac', '#01665e'],
+ 7: ['#8c510a', '#d8b365', '#f6e8c3', '#f5f5f5', '#c7eae5', '#5ab4ac', '#01665e'],
+ 8: ['#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#c7eae5', '#80cdc1', '#35978f', '#01665e'],
+ 9: ['#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1', '#35978f', '#01665e'],
+ 10: ['#543005', '#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#c7eae5', '#80cdc1', '#35978f', '#01665e', '#003c30'],
+ 11: ['#543005', '#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1', '#35978f', '#01665e', '#003c30'],
+ },
+ },
+ PRGn: {
+ title: 'Purple-Green',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#af8dc3', '#f7f7f7', '#7fbf7b'],
+ 4: ['#7b3294', '#c2a5cf', '#a6dba0', '#008837'],
+ 5: ['#7b3294', '#c2a5cf', '#f7f7f7', '#a6dba0', '#008837'],
+ 6: ['#762a83', '#af8dc3', '#e7d4e8', '#d9f0d3', '#7fbf7b', '#1b7837'],
+ 7: ['#762a83', '#af8dc3', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#7fbf7b', '#1b7837'],
+ 8: ['#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837'],
+ 9: ['#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837'],
+ 10: ['#40004b', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#00441b'],
+ 11: ['#40004b', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#00441b'],
+ },
+ },
+ PiYG: {
+ title: 'Pink-Yellow-Green',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#e9a3c9', '#f7f7f7', '#a1d76a'],
+ 4: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
+ 5: ['#d01c8b', '#f1b6da', '#f7f7f7', '#b8e186', '#4dac26'],
+ 6: ['#c51b7d', '#e9a3c9', '#fde0ef', '#e6f5d0', '#a1d76a', '#4d9221'],
+ 7: ['#c51b7d', '#e9a3c9', '#fde0ef', '#f7f7f7', '#e6f5d0', '#a1d76a', '#4d9221'],
+ 8: ['#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221'],
+ 9: ['#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#f7f7f7', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221'],
+ 10: ['#8e0152', '#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221', '#276419'],
+ 11: ['#8e0152', '#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#f7f7f7', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221', '#276419'],
+ },
+ },
+ RdBu: {
+ title: 'Red-Blue',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#ef8a62', '#f7f7f7', '#67a9cf'],
+ 4: ['#ca0020', '#f4a582', '#92c5de', '#0571b0'],
+ 5: ['#ca0020', '#f4a582', '#f7f7f7', '#92c5de', '#0571b0'],
+ 6: ['#b2182b', '#ef8a62', '#fddbc7', '#d1e5f0', '#67a9cf', '#2166ac'],
+ 7: ['#b2182b', '#ef8a62', '#fddbc7', '#f7f7f7', '#d1e5f0', '#67a9cf', '#2166ac'],
+ 8: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac'],
+ 9: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac'],
+ 10: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
+ 11: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
+ },
+ },
+ RdGy: {
+ title: 'Red-Grey',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#ef8a62', '#ffffff', '#999999'],
+ 4: ['#ca0020', '#f4a582', '#bababa', '#404040'],
+ 5: ['#ca0020', '#f4a582', '#ffffff', '#bababa', '#404040'],
+ 6: ['#b2182b', '#ef8a62', '#fddbc7', '#e0e0e0', '#999999', '#4d4d4d'],
+ 7: ['#b2182b', '#ef8a62', '#fddbc7', '#ffffff', '#e0e0e0', '#999999', '#4d4d4d'],
+ 8: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d'],
+ 9: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d'],
+ 10: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
+ 11: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
+ },
+ },
+ RdYlBu: {
+ title: 'Red-Yellow-Blue',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#fc8d59', '#ffffbf', '#91bfdb'],
+ 4: ['#d7191c', '#fdae61', '#abd9e9', '#2c7bb6'],
+ 5: ['#d7191c', '#fdae61', '#ffffbf', '#abd9e9', '#2c7bb6'],
+ 6: ['#d73027', '#fc8d59', '#fee090', '#e0f3f8', '#91bfdb', '#4575b4'],
+ 7: ['#d73027', '#fc8d59', '#fee090', '#ffffbf', '#e0f3f8', '#91bfdb', '#4575b4'],
+ 8: ['#d73027', '#f46d43', '#fdae61', '#fee090', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4'],
+ 9: ['#d73027', '#f46d43', '#fdae61', '#fee090', '#ffffbf', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4'],
+ 10: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee090', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'],
+ 11: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee090', '#ffffbf', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'],
+ },
+ },
+ Spectral: {
+ title: 'Spectral',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#fc8d59', '#ffffbf', '#99d594'],
+ 4: ['#d7191c', '#fdae61', '#abdda4', '#2b83ba'],
+ 5: ['#d7191c', '#fdae61', '#ffffbf', '#abdda4', '#2b83ba'],
+ 6: ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd'],
+ 7: ['#d53e4f', '#fc8d59', '#fee08b', '#ffffbf', '#e6f598', '#99d594', '#3288bd'],
+ 8: ['#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#66c2a5', '#3288bd'],
+ 9: ['#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#e6f598', '#abdda4', '#66c2a5', '#3288bd'],
+ 10: ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'],
+ 11: ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'],
+ },
+ },
+ RdYlGn: {
+ title: 'Red-Yellow-Green',
+ type: ['diverging', 'multi-hue'],
+ colors: {
+ 3: ['#fc8d59', '#ffffbf', '#91cf60'],
+ 4: ['#d7191c', '#fdae61', '#a6d96a', '#1a9641'],
+ 5: ['#d7191c', '#fdae61', '#ffffbf', '#a6d96a', '#1a9641'],
+ 6: ['#d73027', '#fc8d59', '#fee08b', '#d9ef8b', '#91cf60', '#1a9850'],
+ 7: ['#d73027', '#fc8d59', '#fee08b', '#ffffbf', '#d9ef8b', '#91cf60', '#1a9850'],
+ 8: ['#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850'],
+ 9: ['#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850'],
+ 10: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'],
+ 11: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'],
+ },
+ },
+ Accent: {
+ title: 'Accent',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#7fc97f', '#beaed4', '#fdc086'],
+ 4: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99'],
+ 5: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0'],
+ 6: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f'],
+ 7: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17'],
+ 8: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17', '#666666'],
+ },
+ },
+ Dark2: {
+ title: 'Dark 2',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#1b9e77', '#d95f02', '#7570b3'],
+ 4: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a'],
+ 5: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e'],
+ 6: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02'],
+ 7: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d'],
+ 8: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
+ },
+ },
+ Paired: {
+ title: 'Paired',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#a6cee3', '#1f78b4', '#b2df8a'],
+ 4: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c'],
+ 5: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99'],
+ 6: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c'],
+ 7: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f'],
+ 8: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00'],
+ 9: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6'],
+ 10: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a'],
+ 11: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99'],
+ 12: [
+ '#a6cee3',
+ '#1f78b4',
+ '#b2df8a',
+ '#33a02c',
+ '#fb9a99',
+ '#e31a1c',
+ '#fdbf6f',
+ '#ff7f00',
+ '#cab2d6',
+ '#6a3d9a',
+ '#ffff99',
+ '#b15928',
+ ],
+ },
+ },
+ Pastel1: {
+ title: 'Pastel 1',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#fbb4ae', '#b3cde3', '#ccebc5'],
+ 4: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4'],
+ 5: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'],
+ 6: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc'],
+ 7: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd'],
+ 8: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec'],
+ 9: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2'],
+ },
+ },
+ Pastel2: {
+ title: 'Pastel 2',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#b3e2cd', '#fdcdac', '#cbd5e8'],
+ 4: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4'],
+ 5: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9'],
+ 6: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9', '#fff2ae'],
+ 7: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9', '#fff2ae', '#f1e2cc'],
+ 8: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9', '#fff2ae', '#f1e2cc', '#cccccc'],
+ },
+ },
+ Set1: {
+ title: 'Set 1',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#e41a1c', '#377eb8', '#4daf4a'],
+ 4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3'],
+ 5: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00'],
+ 6: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33'],
+ 7: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628'],
+ 8: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf'],
+ 9: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'],
+ },
+ },
+ Set2: {
+ title: 'Set 2',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#66c2a5', '#fc8d62', '#8da0cb'],
+ 4: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3'],
+ 5: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854'],
+ 6: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f'],
+ 7: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', '#e5c494'],
+ 8: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', '#e5c494', '#b3b3b3'],
+ },
+ },
+ Set3: {
+ title: 'Set 3',
+ type: ['categorical', 'multi-hue'],
+ colors: {
+ 3: ['#8dd3c7', '#ffffb3', '#bebada'],
+ 4: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072'],
+ 5: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3'],
+ 6: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462'],
+ 7: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69'],
+ 8: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5'],
+ 9: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9'],
+ 10: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'],
+ 11: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5'],
+ 12: [
+ '#8dd3c7',
+ '#ffffb3',
+ '#bebada',
+ '#fb8072',
+ '#80b1d3',
+ '#fdb462',
+ '#b3de69',
+ '#fccde5',
+ '#d9d9d9',
+ '#bc80bd',
+ '#ccebc5',
+ '#ffed6f',
+ ],
+ },
},
};
-
export const dataColors = {
black: 'hsl(0, 0, 0%)',
white: 'hsl(0, 0, 100%)',
@@ -186,7 +744,7 @@ export const dataColors = {
95: 'hsl(204 89% 14%)',
100: 'hsl(204 80% 10%)',
},
- gray: {
+ neutral: {
5: 'hsl(210 23% 98%)',
10: 'hsl(220 20% 96%)',
15: 'hsl(222 19% 93%)',
@@ -230,7 +788,7 @@ export const dataColors = {
95: 'hsl(334 74% 15%)',
100: 'hsl(334 62% 10%)',
},
- neutral: {
+ gray: {
5: 'hsl(0 0% 98%)',
10: 'hsl(0 0% 95%)',
20: 'hsl(0 0% 89%)',
@@ -315,219 +873,3 @@ export const dataColors = {
100: 'hsl(44 83% 7%)',
},
};
-export const divergenceColors = {
- blueRed: [
- dataColors.blue[90],
- dataColors.blue[80],
- dataColors.blue[70],
- dataColors.blue[60],
- dataColors.blue[50],
- dataColors.blue[40],
- dataColors.blue[30],
- dataColors.blue[20],
- dataColors.blue[10],
- dataColors.blue[5],
- dataColors.red[5],
- dataColors.red[10],
- dataColors.red[20],
- dataColors.red[30],
- dataColors.red[40],
- dataColors.red[50],
- dataColors.red[60],
- dataColors.red[70],
- dataColors.red[80],
- dataColors.red[90],
- ],
- blueRedMiddle: [
- dataColors.blue[90],
- dataColors.blue[80],
- dataColors.blue[70],
- dataColors.blue[60],
- dataColors.blue[50],
- dataColors.blue[40],
- dataColors.blue[30],
- dataColors.blue[20],
- dataColors.blue[10],
- dataColors.blue[5],
- dataColors.neutral[5],
- dataColors.red[5],
- dataColors.red[10],
- dataColors.red[20],
- dataColors.red[30],
- dataColors.red[40],
- dataColors.red[50],
- dataColors.red[60],
- dataColors.red[70],
- dataColors.red[80],
- dataColors.red[90],
- ],
- magentaGreen: [
- dataColors.magenta[90],
- dataColors.magenta[80],
- dataColors.magenta[70],
- dataColors.magenta[60],
- dataColors.magenta[50],
- dataColors.magenta[40],
- dataColors.magenta[30],
- dataColors.magenta[20],
- dataColors.magenta[10],
- dataColors.magenta[5],
- dataColors.green[5],
- dataColors.green[10],
- dataColors.green[20],
- dataColors.green[30],
- dataColors.green[40],
- dataColors.green[50],
- dataColors.green[60],
- dataColors.green[70],
- dataColors.green[80],
- dataColors.green[90],
- ],
- magentaGreenMiddle: [
- dataColors.magenta[90],
- dataColors.magenta[80],
- dataColors.magenta[70],
- dataColors.magenta[60],
- dataColors.magenta[50],
- dataColors.magenta[40],
- dataColors.magenta[30],
- dataColors.magenta[20],
- dataColors.magenta[10],
- dataColors.magenta[5],
- dataColors.neutral[5],
- dataColors.green[5],
- dataColors.green[10],
- dataColors.green[20],
- dataColors.green[30],
- dataColors.green[40],
- dataColors.green[50],
- dataColors.green[60],
- dataColors.green[70],
- dataColors.green[80],
- dataColors.green[90],
- ],
- orangePurple: [
- dataColors.orange[90],
- dataColors.orange[80],
- dataColors.orange[70],
- dataColors.orange[60],
- dataColors.orange[50],
- dataColors.orange[40],
- dataColors.orange[30],
- dataColors.orange[20],
- dataColors.orange[10],
- dataColors.orange[5],
- dataColors.purple[5],
- dataColors.purple[10],
- dataColors.purple[20],
- dataColors.purple[30],
- dataColors.purple[40],
- dataColors.purple[50],
- dataColors.purple[60],
- dataColors.purple[70],
- dataColors.purple[80],
- dataColors.purple[90],
- ],
- orangePurpleMiddle: [
- dataColors.orange[90],
- dataColors.orange[80],
- dataColors.orange[70],
- dataColors.orange[60],
- dataColors.orange[50],
- dataColors.orange[40],
- dataColors.orange[30],
- dataColors.orange[20],
- dataColors.orange[10],
- dataColors.orange[5],
- dataColors.neutral[5],
- dataColors.purple[5],
- dataColors.purple[10],
- dataColors.purple[20],
- dataColors.purple[30],
- dataColors.purple[40],
- dataColors.purple[50],
- dataColors.purple[60],
- dataColors.purple[70],
- dataColors.purple[80],
- dataColors.purple[90],
- ],
- yellowTeal: [
- dataColors.yellow[90],
- dataColors.yellow[80],
- dataColors.yellow[70],
- dataColors.yellow[60],
- dataColors.yellow[50],
- dataColors.yellow[40],
- dataColors.yellow[30],
- dataColors.yellow[20],
- dataColors.yellow[10],
- dataColors.yellow[5],
- dataColors.teal[5],
- dataColors.teal[10],
- dataColors.teal[20],
- dataColors.teal[30],
- dataColors.teal[40],
- dataColors.teal[50],
- dataColors.teal[60],
- dataColors.teal[70],
- dataColors.teal[80],
- dataColors.teal[90],
- ],
- yellowTealMiddle: [
- dataColors.yellow[90],
- dataColors.yellow[80],
- dataColors.yellow[70],
- dataColors.yellow[60],
- dataColors.yellow[50],
- dataColors.yellow[40],
- dataColors.yellow[30],
- dataColors.yellow[20],
- dataColors.yellow[10],
- dataColors.yellow[5],
- dataColors.neutral[5],
- dataColors.teal[5],
- dataColors.teal[10],
- dataColors.teal[20],
- dataColors.teal[30],
- dataColors.teal[40],
- dataColors.teal[50],
- dataColors.teal[60],
- dataColors.teal[70],
- dataColors.teal[80],
- dataColors.teal[90],
- ],
-};
-export const categoricalColors = {
- lightMode: {
- 1: dataColors.orange[40],
- 2: dataColors.red[80],
- 3: dataColors.blue[40],
- 4: dataColors.cyan[70],
- 5: dataColors.green[40],
- 6: dataColors.green[70],
- 7: dataColors.purple[40],
- 8: dataColors.purple[70],
- 9: dataColors.yellow[30],
- 10: dataColors.yellow[50],
- 11: dataColors.red[40],
- 12: dataColors.magenta[70],
- 13: dataColors.teal[40],
- 14: dataColors.teal[60],
- },
- darkMode: {
- 1: dataColors.orange[30],
- 2: dataColors.red[50],
- 3: dataColors.blue[30],
- 4: dataColors.cyan[60],
- 5: dataColors.green[30],
- 6: dataColors.green[50],
- 7: dataColors.purple[30],
- 8: dataColors.purple[50],
- 9: dataColors.yellow[20],
- 10: dataColors.yellow[40],
- 11: dataColors.red[30],
- 12: dataColors.magenta[50],
- 13: dataColors.teal[30],
- 14: dataColors.teal[50],
- },
-};
diff --git a/libs/config/styling/primitives.css b/libs/config/styling/primitives.css
index 009f10f5a..5c51120ec 100644
--- a/libs/config/styling/primitives.css
+++ b/libs/config/styling/primitives.css
@@ -35,20 +35,20 @@
--clr-cyan-95: 204deg 89% 14%;
--clr-cyan-100: 204deg 80% 10%;
- --clr-gray-5: 210deg 23% 98%;
- --clr-gray-10: 220deg 20% 96%;
- --clr-gray-15: 222deg 19% 93%;
- --clr-gray-20: 223deg 17% 90%;
- --clr-gray-30: 214deg 16% 80%;
- --clr-gray-40: 219deg 14% 68%;
- --clr-gray-50: 219deg 13% 57%;
- --clr-gray-60: 217deg 12% 46%;
- --clr-gray-70: 218deg 15% 36%;
- --clr-gray-80: 216deg 22% 28%;
- --clr-gray-85: 215deg 25% 22%;
- --clr-gray-90: 215deg 30% 18%;
- --clr-gray-95: 221deg 33% 15%;
- --clr-gray-100: 223deg 30% 10%;
+ --clr-neutral-5: 210deg 23% 98%;
+ --clr-neutral-10: 220deg 20% 96%;
+ --clr-neutral-15: 222deg 19% 93%;
+ --clr-neutral-20: 223deg 17% 90%;
+ --clr-neutral-30: 214deg 16% 80%;
+ --clr-neutral-40: 219deg 14% 68%;
+ --clr-neutral-50: 219deg 13% 57%;
+ --clr-neutral-60: 217deg 12% 46%;
+ --clr-neutral-70: 218deg 15% 36%;
+ --clr-neutral-80: 216deg 22% 28%;
+ --clr-neutral-85: 215deg 25% 22%;
+ --clr-neutral-90: 215deg 30% 18%;
+ --clr-neutral-95: 221deg 33% 15%;
+ --clr-neutral-100: 223deg 30% 10%;
--clr-green-5: 122deg 80% 98%;
--clr-green-10: 122deg 78% 94%;
@@ -76,18 +76,18 @@
--clr-magenta-95: 334deg 84% 18%;
--clr-magenta-100: 334deg 76% 10%;
- --clr-neutral-5: 0deg 0% 98%;
- --clr-neutral-10: 0deg 0% 95%;
- --clr-neutral-20: 0deg 0% 89%;
- --clr-neutral-30: 0deg 0% 79%;
- --clr-neutral-40: 0deg 0% 66%;
- --clr-neutral-50: 0deg 0% 56%;
- --clr-neutral-60: 0deg 0% 45%;
- --clr-neutral-70: 0deg 0% 34%;
- --clr-neutral-80: 0deg 0% 26%;
- --clr-neutral-90: 0deg 0% 16%;
- --clr-neutral-95: 0deg 0% 13%;
- --clr-neutral-100: 0deg 0% 10%;
+ --clr-gray-5: 0deg 0% 98%;
+ --clr-gray-10: 0deg 0% 95%;
+ --clr-gray-20: 0deg 0% 89%;
+ --clr-gray-30: 0deg 0% 79%;
+ --clr-gray-40: 0deg 0% 66%;
+ --clr-gray-50: 0deg 0% 56%;
+ --clr-gray-60: 0deg 0% 45%;
+ --clr-gray-70: 0deg 0% 34%;
+ --clr-gray-80: 0deg 0% 26%;
+ --clr-gray-90: 0deg 0% 16%;
+ --clr-gray-95: 0deg 0% 13%;
+ --clr-gray-100: 0deg 0% 10%;
--clr-orange-5: 29deg 100% 98%;
--clr-orange-10: 29deg 100% 95%;
@@ -103,7 +103,7 @@
--clr-orange-100: 25deg 100% 8%;
--clr-purple-5: 260deg 96% 99%;
- --clr-purple-10: 260deg 84% 93%;
+ --clr-purple-10: 260deg 96% 97%;
--clr-purple-20: 260deg 84% 93%;
--clr-purple-30: 260deg 83% 86%;
--clr-purple-40: 260deg 72% 77%;
diff --git a/libs/config/styling/variables.css b/libs/config/styling/variables.css
index e5fd3c965..8d8c90487 100644
--- a/libs/config/styling/variables.css
+++ b/libs/config/styling/variables.css
@@ -1,7 +1,7 @@
@layer base {
:root {
--clr-light: var(--clr-white);
- --clr-dark: var(--clr-gray-100);
+ --clr-dark: var(--clr-neutral-100);
--clr-pri--50: var(--clr-cyan-10);
--clr-pri--100: var(--clr-cyan-20);
@@ -16,18 +16,18 @@
--clr-pri: var(--clr-pri--600);
--clr-sec--0: var(--clr-white);
- --clr-sec--50: var(--clr-gray-5);
- --clr-sec--100: var(--clr-gray-10);
- --clr-sec--200: var(--clr-gray-20);
- --clr-sec--300: var(--clr-gray-30);
- --clr-sec--400: var(--clr-gray-40);
- --clr-sec--500: var(--clr-gray-50);
- --clr-sec--600: var(--clr-gray-60);
- --clr-sec--700: var(--clr-gray-70);
- --clr-sec--800: var(--clr-gray-80);
- --clr-sec--900: var(--clr-gray-90);
- --clr-sec--950: var(--clr-gray-95);
- --clr-sec--1000: var(--clr-gray-100);
+ --clr-sec--50: var(--clr-neutral-5);
+ --clr-sec--100: var(--clr-neutral-10);
+ --clr-sec--200: var(--clr-neutral-20);
+ --clr-sec--300: var(--clr-neutral-30);
+ --clr-sec--400: var(--clr-neutral-40);
+ --clr-sec--500: var(--clr-neutral-50);
+ --clr-sec--600: var(--clr-neutral-60);
+ --clr-sec--700: var(--clr-neutral-70);
+ --clr-sec--800: var(--clr-neutral-80);
+ --clr-sec--900: var(--clr-neutral-90);
+ --clr-sec--950: var(--clr-neutral-95);
+ --clr-sec--1000: var(--clr-neutral-100);
--clr-sec: var(--clr-sec--700);
--clr-acc--100: var(--clr-orange-10);
@@ -80,7 +80,7 @@
--clr-dang--800: var(--clr-red-90);
--clr-dang: var(--clr-dang--600);
- --focus-shadow-clr: var(--clr-gray-95);
+ --focus-shadow-clr: var(--clr-neutral-95);
/* Graph data colors */
--clr-cat-01: var(--clr-cyan-70);
@@ -93,15 +93,15 @@
--clr-cat-08: var(--clr-acc);
--clr-cat-09: var(--clr-succ);
--clr-cat-10: var(--clr-dang);
- --clr-cat-11: var(--clr-gray-50);
- --clr-cat-12: var(--clr-gray-50);
- --clr-cat-13: var(--clr-gray-50);
- --clr-cat-14: var(--clr-gray-50);
+ --clr-cat-11: var(--clr-neutral-50);
+ --clr-cat-12: var(--clr-neutral-50);
+ --clr-cat-13: var(--clr-neutral-50);
+ --clr-cat-14: var(--clr-neutral-50);
}
body.light-mode {
--clr-light: var(--clr-white);
- --clr-dark: var(--clr-gray-100);
+ --clr-dark: var(--clr-neutral-100);
--clr-pri--50: var(--clr-cyan-10);
--clr-pri--100: var(--clr-cyan-20);
@@ -116,18 +116,18 @@
--clr-pri: var(--clr-pri--600);
--clr-sec--0: var(--clr-white);
- --clr-sec--50: var(--clr-gray-5);
- --clr-sec--100: var(--clr-gray-10);
- --clr-sec--200: var(--clr-gray-20);
- --clr-sec--300: var(--clr-gray-30);
- --clr-sec--400: var(--clr-gray-40);
- --clr-sec--500: var(--clr-gray-50);
- --clr-sec--600: var(--clr-gray-60);
- --clr-sec--700: var(--clr-gray-70);
- --clr-sec--800: var(--clr-gray-80);
- --clr-sec--900: var(--clr-gray-90);
- --clr-sec--950: var(--clr-gray-95);
- --clr-sec--1000: var(--clr-gray-100);
+ --clr-sec--50: var(--clr-neutral-5);
+ --clr-sec--100: var(--clr-neutral-10);
+ --clr-sec--200: var(--clr-neutral-20);
+ --clr-sec--300: var(--clr-neutral-30);
+ --clr-sec--400: var(--clr-neutral-40);
+ --clr-sec--500: var(--clr-neutral-50);
+ --clr-sec--600: var(--clr-neutral-60);
+ --clr-sec--700: var(--clr-neutral-70);
+ --clr-sec--800: var(--clr-neutral-80);
+ --clr-sec--900: var(--clr-neutral-90);
+ --clr-sec--950: var(--clr-neutral-95);
+ --clr-sec--1000: var(--clr-neutral-100);
--clr-sec: var(--clr-sec--700);
--clr-acc--100: var(--clr-orange-10);
@@ -182,7 +182,7 @@
}
body.dark-mode {
- --clr-light: var(--clr-gray-100);
+ --clr-light: var(--clr-neutral-100);
--clr-dark: var(--clr-white);
--clr-pri--50: var(--clr-cyan-95);
@@ -197,18 +197,18 @@
--clr-pri--900: var(--clr-cyan-10);
--clr-pri: var(--clr-pri--600);
- --clr-sec--0: var(--clr-gray-100);
- --clr-sec--50: var(--clr-gray-95);
- --clr-sec--100: var(--clr-gray-90);
- --clr-sec--200: var(--clr-gray-80);
- --clr-sec--300: var(--clr-gray-70);
- --clr-sec--400: var(--clr-gray-60);
- --clr-sec--500: var(--clr-gray-50);
- --clr-sec--600: var(--clr-gray-40);
- --clr-sec--700: var(--clr-gray-30);
- --clr-sec--800: var(--clr-gray-20);
- --clr-sec--900: var(--clr-gray-10);
- --clr-sec--950: var(--clr-gray-5);
+ --clr-sec--0: var(--clr-neutral-100);
+ --clr-sec--50: var(--clr-neutral-95);
+ --clr-sec--100: var(--clr-neutral-90);
+ --clr-sec--200: var(--clr-neutral-80);
+ --clr-sec--300: var(--clr-neutral-70);
+ --clr-sec--400: var(--clr-neutral-60);
+ --clr-sec--500: var(--clr-neutral-50);
+ --clr-sec--600: var(--clr-neutral-40);
+ --clr-sec--700: var(--clr-neutral-30);
+ --clr-sec--800: var(--clr-neutral-20);
+ --clr-sec--900: var(--clr-neutral-10);
+ --clr-sec--950: var(--clr-neutral-5);
--clr-sec--1000: var(--clr-white);
--clr-sec: var(--clr-sec--700);
@@ -265,7 +265,7 @@
@media (prefers-color-scheme: dark) {
:root {
- --clr-light: var(--clr-gray-100);
+ --clr-light: var(--clr-neutral-100);
--clr-dark: var(--clr-white);
--clr-pri--50: var(--clr-cyan-95);
@@ -280,18 +280,18 @@
--clr-pri--900: var(--clr-cyan-10);
--clr-pri: var(--clr-pri--600);
- --clr-sec--0: var(--clr-gray-100);
- --clr-sec--50: var(--clr-gray-95);
- --clr-sec--100: var(--clr-gray-90);
- --clr-sec--200: var(--clr-gray-80);
- --clr-sec--300: var(--clr-gray-70);
- --clr-sec--400: var(--clr-gray-60);
- --clr-sec--500: var(--clr-gray-50);
- --clr-sec--600: var(--clr-gray-40);
- --clr-sec--700: var(--clr-gray-30);
- --clr-sec--800: var(--clr-gray-20);
- --clr-sec--900: var(--clr-gray-10);
- --clr-sec--950: var(--clr-gray-5);
+ --clr-sec--0: var(--clr-neutral-100);
+ --clr-sec--50: var(--clr-neutral-95);
+ --clr-sec--100: var(--clr-neutral-90);
+ --clr-sec--200: var(--clr-neutral-80);
+ --clr-sec--300: var(--clr-neutral-70);
+ --clr-sec--400: var(--clr-neutral-60);
+ --clr-sec--500: var(--clr-neutral-50);
+ --clr-sec--600: var(--clr-neutral-40);
+ --clr-sec--700: var(--clr-neutral-30);
+ --clr-sec--800: var(--clr-neutral-20);
+ --clr-sec--900: var(--clr-neutral-10);
+ --clr-sec--950: var(--clr-neutral-5);
--clr-sec--1000: var(--clr-white);
--clr-sec: var(--clr-sec--700);
diff --git a/libs/shared/lib/components/DesignGuides/styleGuide.mdx b/libs/shared/lib/components/DesignGuides/styleGuide.mdx
index 970663320..f840a99e7 100644
--- a/libs/shared/lib/components/DesignGuides/styleGuide.mdx
+++ b/libs/shared/lib/components/DesignGuides/styleGuide.mdx
@@ -4,6 +4,7 @@ import { Button } from '../buttons/.';
import { TextInput } from '@graphpolaris/shared/lib/components/inputs';
import { Icon } from '../icon/.';
+import { visualizationColors } from 'config';
import {
Delete as DeleteIcon,
@@ -59,13 +60,13 @@ Style files can be found in:
- tailwind.config.js: For styling elements. E.g.:
```jsx
-<div className="btn-primary btn-lg"></div>
+<div className="btn-primary btn-lg text-primary-500 border-secondary-200 hover:bg-accent-100"></div>
```
-- colors.js: For getting colors palettes as dictionaries. E.g.:
+- colors.ts: For getting colors palettes as dictionaries. E.g.:
```jsx
-import { tailwindColors, dataColors } from '../../../../config/src/colors.js';
+import { visualizationColors } from '../../../../config/src/colors.ts';
```
## Colors
@@ -85,9 +86,7 @@ import { tailwindColors, dataColors } from '../../../../config/src/colors.js';
danger: 'hsl(var(--clr-dang))',
}}
/>
-</ColorPalette>
-<ColorPalette>
<ColorItem
title="Extra"
colors={{
@@ -97,57 +96,63 @@ import { tailwindColors, dataColors } from '../../../../config/src/colors.js';
/>
</ColorPalette>
+#### Usage of colors
+
And if you need variations of them:
You can use the Tailwind classes in the following way:
bg-primary-100, text-warning-500, border-danger-500, etc.
+a classname will make use of a css variable, e.g.:
+text-primary-500 will use the css variable --clr-pri--500,
+this is a hsl color, if you want to use this color in a css file you can use the css variable directly.
+
<ColorPalette>
-<ColorItem
- title="Primary"
- colors={{
- 50: 'hsl(var(--clr-pri--50))',
- 100: 'hsl(var(--clr-pri--100))',
- 200: 'hsl(var(--clr-pri--200))',
- 300: 'hsl(var(--clr-pri--300))',
- 400: 'hsl(var(--clr-pri--400))',
- 500: 'hsl(var(--clr-pri--500))',
- 600: 'hsl(var(--clr-pri--600))',
- 700: 'hsl(var(--clr-pri--700))',
- 800: 'hsl(var(--clr-pri--800))',
- 900: 'hsl(var(--clr-pri--900))',
- }}
-/>
-<ColorItem
- title="Secondary"
- colors={{
- 0: 'hsl(var(--clr-sec--0))',
- 50: 'hsl(var(--clr-sec--50))',
- 100: 'hsl(var(--clr-sec--100))',
- 200: 'hsl(var(--clr-sec--200))',
- 300: 'hsl(var(--clr-sec--300))',
- 400: 'hsl(var(--clr-sec--400))',
- 500: 'hsl(var(--clr-sec--500))',
- 600: 'hsl(var(--clr-sec--600))',
- 700: 'hsl(var(--clr-sec--700))',
- 800: 'hsl(var(--clr-sec--800))',
- 900: 'hsl(var(--clr-sec--900))',
- 950: 'hsl(var(--clr-sec--950))',
- 1000: 'hsl(var(--clr-sec--1000))',
- }}
-/>
-<ColorItem
- title="Accent"
- colors={{
- 100: 'hsl(var(--clr-acc--100))',
- 200: 'hsl(var(--clr-acc--200))',
- 300: 'hsl(var(--clr-acc--300))',
- 400: 'hsl(var(--clr-acc--400))',
- 500: 'hsl(var(--clr-acc--500))',
- 600: 'hsl(var(--clr-acc--600))',
- 700: 'hsl(var(--clr-acc--700))',
- 800: 'hsl(var(--clr-acc--800))',
- }}
-/>
+ <ColorItem
+ title="Primary"
+ colors={{
+ 50: 'hsl(var(--clr-pri--50))',
+ 100: 'hsl(var(--clr-pri--100))',
+ 200: 'hsl(var(--clr-pri--200))',
+ 300: 'hsl(var(--clr-pri--300))',
+ 400: 'hsl(var(--clr-pri--400))',
+ 500: 'hsl(var(--clr-pri--500))',
+ 600: 'hsl(var(--clr-pri--600))',
+ 700: 'hsl(var(--clr-pri--700))',
+ 800: 'hsl(var(--clr-pri--800))',
+ 900: 'hsl(var(--clr-pri--900))',
+ }}
+ />
+ <ColorItem
+ title="Secondary"
+ colors={{
+ 0: 'hsl(var(--clr-sec--0))',
+ 50: 'hsl(var(--clr-sec--50))',
+ 100: 'hsl(var(--clr-sec--100))',
+ 200: 'hsl(var(--clr-sec--200))',
+ 300: 'hsl(var(--clr-sec--300))',
+ 400: 'hsl(var(--clr-sec--400))',
+ 500: 'hsl(var(--clr-sec--500))',
+ 600: 'hsl(var(--clr-sec--600))',
+ 700: 'hsl(var(--clr-sec--700))',
+ 800: 'hsl(var(--clr-sec--800))',
+ 900: 'hsl(var(--clr-sec--900))',
+ 950: 'hsl(var(--clr-sec--950))',
+ 1000: 'hsl(var(--clr-sec--1000))',
+ }}
+ />
+ <ColorItem
+ title="Accent"
+ colors={{
+ 100: 'hsl(var(--clr-acc--100))',
+ 200: 'hsl(var(--clr-acc--200))',
+ 300: 'hsl(var(--clr-acc--300))',
+ 400: 'hsl(var(--clr-acc--400))',
+ 500: 'hsl(var(--clr-acc--500))',
+ 600: 'hsl(var(--clr-acc--600))',
+ 700: 'hsl(var(--clr-acc--700))',
+ 800: 'hsl(var(--clr-acc--800))',
+ }}
+ />
<ColorItem
title="info"
colors={{
@@ -185,479 +190,378 @@ bg-primary-100, text-warning-500, border-danger-500, etc.
600: 'hsl(var(--clr-warn--600))',
700: 'hsl(var(--clr-warn--700))',
800: 'hsl(var(--clr-warn--800))',
- }} />
-<ColorItem
- title="Danger"
- colors={{
- 100: 'hsl(var(--clr-dang--100))',
- 200: 'hsl(var(--clr-dang--200))',
- 300: 'hsl(var(--clr-dang--300))',
- 400: 'hsl(var(--clr-dang--400))',
- 500: 'hsl(var(--clr-dang--500))',
- 600: 'hsl(var(--clr-dang--600))',
- 700: 'hsl(var(--clr-dang--700))',
- 800: 'hsl(var(--clr-dang--800))',
- }}
-/>
+ }}/>
+ <ColorItem
+ title="Danger"
+ colors={{
+ 100: 'hsl(var(--clr-dang--100))',
+ 200: 'hsl(var(--clr-dang--200))',
+ 300: 'hsl(var(--clr-dang--300))',
+ 400: 'hsl(var(--clr-dang--400))',
+ 500: 'hsl(var(--clr-dang--500))',
+ 600: 'hsl(var(--clr-dang--600))',
+ 700: 'hsl(var(--clr-dang--700))',
+ 800: 'hsl(var(--clr-dang--800))',
+ }}
+ />
</ColorPalette>
-### DataVis
+### Visualisation Colors
-## Categorical
+## Basic
<ColorPalette>
<ColorItem
- title="categoricalColors.lightMode"
- colors={{
- cat01: 'hsl(var(--clr-orange-40))',
- cat02: 'hsl(var(--clr-red-80))',
- cat03: 'hsl(var(--clr-blue-40))',
- cat04: 'hsl(var(--clr-cyan-70))',
- cat05: 'hsl(var(--clr-green-40))',
- cat06: 'hsl(var(--clr-green-70))',
- cat07: 'hsl(var(--clr-purple-40))',
- cat08: 'hsl(var(--clr-purple-70))',
- cat09: 'hsl(var(--clr-yellow-30))',
- cat10: 'hsl(var(--clr-yellow-50))',
- cat11: 'hsl(var(--clr-red-40))',
- cat12: 'hsl(var(--clr-magenta-70))',
- cat13: 'hsl(var(--clr-teal-40))',
- cat14: 'hsl(var(--clr-teal-60))',
- }}
+ title="Neutral"
+ subtitle="visualizationColors.GPNeutral"
+ colors={visualizationColors.GPNeutral.colors[1].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.GPSelected.title}
+ subtitle="visualizationColors.GPSelected"
+ colors={visualizationColors.GPSelected.colors[1].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
/>
</ColorPalette>
+
+## Categorical
+
<ColorPalette>
<ColorItem
- title="categoricalColors.darkMode"
- colors={{
- cat01: 'hsl(var(--clr-orange-30))',
- cat02: 'hsl(var(--clr-red-50))',
- cat03: 'hsl(var(--clr-blue-30))',
- cat04: 'hsl(var(--clr-cyan-60))',
- cat05: 'hsl(var(--clr-green-30))',
- cat06: 'hsl(var(--clr-green-50))',
- cat07: 'hsl(var(--clr-purple-30))',
- cat08: 'hsl(var(--clr-purple-50))',
- cat09: 'hsl(var(--clr-yellow-20))',
- cat10: 'hsl(var(--clr-yellow-40))',
- cat11: 'hsl(var(--clr-red-30))',
- cat12: 'hsl(var(--clr-magenta-50))',
- cat13: 'hsl(var(--clr-teal-30))',
- cat14: 'hsl(var(--clr-teal-50))',
- }}
+ title={visualizationColors.GPCat.title}
+ subtitle="visualizationColors.GPCat1 (Default)"
+ colors={visualizationColors.GPCat.colors[14].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.GPCat2.title}
+ subtitle="visualizationColors.GPCat2"
+ colors={visualizationColors.GPCat2.colors[14].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
/>
</ColorPalette>
## Sequential
<ColorPalette>
-<ColorItem
- title="Orange"
- subtitle="dataColors.sequential.orange"
- colors={{
- 5: 'hsl(var(--clr-orange-5))',
- 10: 'hsl(var(--clr-orange-10))',
- 20: 'hsl(var(--clr-orange-20))',
- 30: 'hsl(var(--clr-orange-30))',
- 40: 'hsl(var(--clr-orange-40))',
- 50: 'hsl(var(--clr-orange-50))',
- 60: 'hsl(var(--clr-orange-60))',
- 70: 'hsl(var(--clr-orange-70))',
- 80: 'hsl(var(--clr-orange-80))',
- 90: 'hsl(var(--clr-orange-90))',
- 95: 'hsl(var(--clr-orange-95))',
- 100: 'hsl(var(--clr-orange-100))',
- }}
-/>
-<ColorItem
- title="Blue"
- subtitle="dataColors.sequential.blue"
- colors={{
- 5: 'hsl(var(--clr-blue-5))',
- 10: 'hsl(var(--clr-blue-10))',
- 20: 'hsl(var(--clr-blue-20))',
- 30: 'hsl(var(--clr-blue-30))',
- 40: 'hsl(var(--clr-blue-40))',
- 50: 'hsl(var(--clr-blue-50))',
- 60: 'hsl(var(--clr-blue-60))',
- 70: 'hsl(var(--clr-blue-70))',
- 80: 'hsl(var(--clr-blue-80))',
- 90: 'hsl(var(--clr-blue-90))',
- 95: 'hsl(var(--clr-blue-95))',
- 100: 'hsl(var(--clr-blue-100))',
- }}
-/>
-<ColorItem
- title="Red"
- subtitle="dataColors.sequential.red"
- colors={{
- 5: 'hsl(var(--clr-red-5))',
- 10: 'hsl(var(--clr-red-10))',
- 20: 'hsl(var(--clr-red-20))',
- 30: 'hsl(var(--clr-red-30))',
- 40: 'hsl(var(--clr-red-40))',
- 50: 'hsl(var(--clr-red-50))',
- 60: 'hsl(var(--clr-red-60))',
- 70: 'hsl(var(--clr-red-70))',
- 80: 'hsl(var(--clr-red-80))',
- 90: 'hsl(var(--clr-red-90))',
- 95: 'hsl(var(--clr-red-95))',
- 100: 'hsl(var(--clr-red-100))',
- }}
-/>
-<ColorItem
- title="Gray"
- subtitle="dataColors.sequential.gray"
- colors={{
- 5: 'hsl(var(--clr-gray-5))',
- 10: 'hsl(var(--clr-gray-10))',
- 20: 'hsl(var(--clr-gray-20))',
- 30: 'hsl(var(--clr-gray-30))',
- 40: 'hsl(var(--clr-gray-40))',
- 50: 'hsl(var(--clr-gray-50))',
- 60: 'hsl(var(--clr-gray-60))',
- 70: 'hsl(var(--clr-gray-70))',
- 80: 'hsl(var(--clr-gray-80))',
- 90: 'hsl(var(--clr-gray-90))',
- 95: 'hsl(var(--clr-gray-95))',
- 100: 'hsl(var(--clr-gray-100))',
-}}
-/>
-
-<ColorItem
- title="Magenta"
- subtitle="dataColors.sequential.magenta"
- colors={{
- 5: 'hsl(var(--clr-magenta-5))',
- 10: 'hsl(var(--clr-magenta-10))',
- 20: 'hsl(var(--clr-magenta-20))',
- 30: 'hsl(var(--clr-magenta-30))',
- 40: 'hsl(var(--clr-magenta-40))',
- 50: 'hsl(var(--clr-magenta-50))',
- 60: 'hsl(var(--clr-magenta-60))',
- 70: 'hsl(var(--clr-magenta-70))',
- 80: 'hsl(var(--clr-magenta-80))',
- 90: 'hsl(var(--clr-magenta-90))',
- 95: 'hsl(var(--clr-magenta-95))',
- 100: 'hsl(var(--clr-magenta-100))',
- }}
-/>
-<ColorItem
- title="Teal"
- subtitle="dataColors.sequential.teal"
- colors={{
- 5: 'hsl(var(--clr-teal-5))',
- 10: 'hsl(var(--clr-teal-10))',
- 20: 'hsl(var(--clr-teal-20))',
- 30: 'hsl(var(--clr-teal-30))',
- 40: 'hsl(var(--clr-teal-40))',
- 50: 'hsl(var(--clr-teal-50))',
- 60: 'hsl(var(--clr-teal-60))',
- 70: 'hsl(var(--clr-teal-70))',
- 80: 'hsl(var(--clr-teal-80))',
- 90: 'hsl(var(--clr-teal-90))',
- 95: 'hsl(var(--clr-teal-95))',
- 100: 'hsl(var(--clr-teal-100))',
- }}
-/>
-<ColorItem
- title="Cyan"
- subtitle="dataColors.sequential.cyan"
- colors={{
- 5: 'hsl(var(--clr-cyan-5))',
- 10: 'hsl(var(--clr-cyan-10))',
- 20: 'hsl(var(--clr-cyan-20))',
- 30: 'hsl(var(--clr-cyan-30))',
- 40: 'hsl(var(--clr-cyan-40))',
- 50: 'hsl(var(--clr-cyan-50))',
- 60: 'hsl(var(--clr-cyan-60))',
- 70: 'hsl(var(--clr-cyan-70))',
- 80: 'hsl(var(--clr-cyan-80))',
- 90: 'hsl(var(--clr-cyan-90))',
- 95: 'hsl(var(--clr-cyan-95))',
- 100: 'hsl(var(--clr-cyan-100))',
- }}
-/>
-<ColorItem
- title="Neutral"
- subtitle="dataColors.sequential.neutral"
- colors={{
- 5: 'hsl(var(--clr-neutral-5))',
- 10: 'hsl(var(--clr-neutral-10))',
- 20: 'hsl(var(--clr-neutral-20))',
- 30: 'hsl(var(--clr-neutral-30))',
- 40: 'hsl(var(--clr-neutral-40))',
- 50: 'hsl(var(--clr-neutral-50))',
- 60: 'hsl(var(--clr-neutral-60))',
- 70: 'hsl(var(--clr-neutral-70))',
- 80: 'hsl(var(--clr-neutral-80))',
- 90: 'hsl(var(--clr-neutral-90))',
- 95: 'hsl(var(--clr-neutral-95))',
- 100: 'hsl(var(--clr-neutral-100))',
- }}
-/>
-<ColorItem
- title="Purple"
- subtitle="dataColors.sequential.purple"
- colors={{
- 5: 'hsl(var(--clr-purple-5))',
- 10: 'hsl(var(--clr-purple-10))',
- 20: 'hsl(var(--clr-purple-20))',
- 30: 'hsl(var(--clr-purple-30))',
- 40: 'hsl(var(--clr-purple-40))',
- 50: 'hsl(var(--clr-purple-50))',
- 60: 'hsl(var(--clr-purple-60))',
- 70: 'hsl(var(--clr-purple-70))',
- 80: 'hsl(var(--clr-purple-80))',
- 90: 'hsl(var(--clr-purple-90))',
- 95: 'hsl(var(--clr-purple-95))',
- 100: 'hsl(var(--clr-purple-100))',
- }}
-/>
-<ColorItem
- title="Yellow"
- subtitle="dataColors.sequential.yellow"
- colors={{
- 5: 'hsl(var(--clr-yellow-5))',
- 10: 'hsl(var(--clr-yellow-10))',
- 20: 'hsl(var(--clr-yellow-20))',
- 30: 'hsl(var(--clr-yellow-30))',
- 40: 'hsl(var(--clr-yellow-40))',
- 50: 'hsl(var(--clr-yellow-50))',
- 60: 'hsl(var(--clr-yellow-60))',
- 70: 'hsl(var(--clr-yellow-70))',
- 80: 'hsl(var(--clr-yellow-80))',
- 90: 'hsl(var(--clr-yellow-90))',
- 95: 'hsl(var(--clr-yellow-95))',
- 100: 'hsl(var(--clr-yellow-100))',
- }}
-/>
+ <ColorItem
+ title={visualizationColors.GPSeq.title + ' (Default, multi-color)'}
+ subtitle="visualizationColors.GPSeq"
+ colors={visualizationColors.GPSeq.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
</ColorPalette>
-## Divergence
+## Diverging
<ColorPalette>
<ColorItem
- title="blueRed"
- subtitle="dataColors.divergence.blueRed"
- colors={{
- 1: 'hsl(220 80% 23%)',
- 2: 'hsl(220 86% 36%)',
- 3: 'hsl(220 79% 49%)',
- 4: 'hsl(220 84% 58%)',
- 5: 'hsl(220 92% 67%)',
- 6: 'hsl(220 94% 75%)',
- 7: 'hsl(220 92% 85%)',
- 8: 'hsl(220 95% 92%)',
- 9: 'hsl(220 71% 96%)',
- 10: 'hsl(220 80% 98%)',
- 11: 'hsl(0 100% 99%)',
- 12: 'hsl(0 100% 97%)',
- 13: 'hsl(0 100% 92%)',
- 14: 'hsl(0 100% 85%)',
- 15: 'hsl(0 98% 76%)',
- 16: 'hsl(0 95% 68%)',
- 17: 'hsl(0 89% 58%)',
- 18: 'hsl(0 76% 48%)',
- 19: 'hsl(0 82% 35%)',
- 20: 'hsl(0 85% 24%)',
- }}
+ title={visualizationColors.GPDiv.title + ' (Default)'}
+ subtitle="visualizationColors.GPSDiv"
+ colors={visualizationColors.GPDiv.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
/>
-<ColorItem
- title="blueRedMiddle"
- subtitle="dataColors.divergence.blueRedMiddle"
- colors={{
- 1: 'hsl(220 80% 23%)',
- 2: 'hsl(220 86% 36%)',
- 3: 'hsl(220 79% 49%)',
- 4: 'hsl(220 84% 58%)',
- 5: 'hsl(220 92% 67%)',
- 6: 'hsl(220 94% 75%)',
- 7: 'hsl(220 92% 85%)',
- 8: 'hsl(220 95% 92%)',
- 9: 'hsl(220 71% 96%)',
- 10: 'hsl(220 80% 98%)',
- 11: 'hsl(0 0% 98%)',
- 12: 'hsl(0 100% 99%)',
- 13: 'hsl(0 100% 97%)',
- 14: 'hsl(0 100% 92%)',
- 15: 'hsl(0 100% 85%)',
- 16: 'hsl(0 98% 76%)',
- 17: 'hsl(0 95% 68%)',
- 18: 'hsl(0 89% 58%)',
- 19: 'hsl(0 76% 48%)',
- 20: 'hsl(0 82% 35%)',
- 21: 'hsl(0 85% 24%)',
- }}
-/>
-
-<ColorItem
- title="magentaGreen"
- subtitle="dataColors.divergence.magentaGreen"
- colors={{
- 1: 'hsl(334 91% 21%)',
- 2: 'hsl(334 75% 32%)',
- 3: 'hsl(334 73% 44%)',
- 4: 'hsl(334 75% 54%)',
- 5: 'hsl(334 84% 64%)',
- 6: 'hsl(334 98% 74%)',
- 7: 'hsl(334 100% 84%)',
- 8: 'hsl(334 100% 92%)',
- 9: 'hsl(334 100% 97%)',
- 10: 'hsl(334 100% 99%)',
- 11: 'hsl(122 80% 98%)',
- 12: 'hsl(122 80% 94%)',
- 13: 'hsl(122 73% 87%)',
- 14: 'hsl(122 59% 76%)',
- 15: 'hsl(122 54% 63%)',
- 16: 'hsl(122 50% 51%)',
- 17: 'hsl(122 57% 40%)',
- 18: 'hsl(122 58% 31%)',
- 19: 'hsl(122 66% 22%)',
- 20: 'hsl(122 82% 15%)',
- }}
-/>
-
-<ColorItem
- title="magentaGreenMiddle"
- subtitle="dataColors.divergence.magentaGreenMiddle"
- colors={{
- 1: 'hsl(334 91% 21%)',
- 2: 'hsl(334 75% 32%)',
- 3: 'hsl(334 73% 44%)',
- 4: 'hsl(334 75% 54%)',
- 5: 'hsl(334 84% 64%)',
- 6: 'hsl(334 98% 74%)',
- 7: 'hsl(334 100% 84%)',
- 8: 'hsl(334 100% 92%)',
- 9: 'hsl(334 100% 97%)',
- 10: 'hsl(334 100% 99%)',
- 11: 'hsl(0 0% 98%)',
- 12: 'hsl(122 80% 98%)',
- 13: 'hsl(122 80% 94%)',
- 14: 'hsl(122 73% 87%)',
- 15: 'hsl(122 59% 76%)',
- 16: 'hsl(122 54% 63%)',
- 17: 'hsl(122 50% 51%)',
- 18: 'hsl(122 57% 40%)',
- 19: 'hsl(122 58% 31%)',
- 20: 'hsl(122 66% 22%)',
- 21: 'hsl(122 82% 15%)',
- }}
-/>
-
-<ColorItem
- title="orangePurple"
- subtitle="dataColors.divergence.orangePurple"
- colors={{
- 1: 'hsl(25 100% 17%)',
- 2: 'hsl(26 96% 27%)',
- 3: 'hsl(25 100% 35%)',
- 4: 'hsl(28 100% 43%)',
- 5: 'hsl(29 100% 50%)',
- 6: 'hsl(29 96% 60%)',
- 7: 'hsl(29 100% 76%)',
- 8: 'hsl(29 100% 87%)',
- 9: 'hsl(29 100% 95%)',
- 10: 'hsl(29 100% 98%)',
- 11: 'hsl(263 100% 99%)',
- 12: 'hsl(263 100% 97%)',
- 13: 'hsl(263 100% 93%)',
- 14: 'hsl(263 97% 87%)',
- 15: 'hsl(263 96% 78%)',
- 16: 'hsl(263 96% 71%)',
- 17: 'hsl(263 80% 61%)',
- 18: 'hsl(263 65% 52%)',
- 19: 'hsl(263 64% 38%)',
- 20: 'hsl(263 67% 25%)',
- }}
-/>
-
-<ColorItem
- title="orangePurpleMiddle"
- subtitle="dataColors.divergence.orangePurpleMiddle"
- colors={{
- 1: 'hsl(25 100% 17%)',
- 2: 'hsl(26 96% 27%)',
- 3: 'hsl(25 100% 35%)',
- 4: 'hsl(28 100% 43%)',
- 5: 'hsl(29 100% 50%)',
- 6: 'hsl(29 96% 60%)',
- 7: 'hsl(29 100% 76%)',
- 8: 'hsl(29 100% 87%)',
- 9: 'hsl(29 100% 95%)',
- 10: 'hsl(29 100% 98%)',
- 11: 'hsl(0 0% 98%)',
- 12: 'hsl(263 100% 99%)',
- 13: 'hsl(263 100% 97%)',
- 14: 'hsl(263 100% 93%)',
- 15: 'hsl(263 97% 87%)',
- 16: 'hsl(263 96% 78%)',
- 17: 'hsl(263 96% 71%)',
- 18: 'hsl(263 80% 61%)',
- 19: 'hsl(263 65% 52%)',
- 20: 'hsl(263 64% 38%)',
- 21: 'hsl(263 67% 25%)',
- }}
-/>
-
-<ColorItem
- title="yellowTeal"
- subtitle="dataColors.divergence.yellowTeal"
- colors={{
- 1: 'hsl(49 91% 13%)',
- 2: 'hsl(49 86% 19%)',
- 3: 'hsl(49 89% 26%)',
- 4: 'hsl(49 100% 31%)',
- 5: 'hsl(49 100% 38%)',
- 6: 'hsl(49 100% 44%)',
- 7: 'hsl(49 95% 56%)',
- 8: 'hsl(49 97% 76%)',
- 9: 'hsl(49 86% 91%)',
- 10: 'hsl(49 82% 98%)',
- 11: 'hsl(180 80% 98%)',
- 12: 'hsl(180 83% 93%)',
- 13: 'hsl(180 79% 85%)',
- 14: 'hsl(180 72% 71%)',
- 15: 'hsl(180 62% 57%)',
- 16: 'hsl(180 93% 40%)',
- 17: 'hsl(180 93% 33%)',
- 18: 'hsl(180 89% 26%)',
- 19: 'hsl(180 71% 20%)',
- 20: 'hsl(180 79% 13%)',
- }}
-/>
-
-<ColorItem
- title="yellowTealMiddle"
- subtitle="dataColors.divergence.yellowTealMiddle"
- colors={{
- 1: 'hsl(49 91% 13%)',
- 2: 'hsl(49 86% 19%)',
- 3: 'hsl(49 89% 26%)',
- 4: 'hsl(49 100% 31%)',
- 5: 'hsl(49 100% 38%)',
- 6: 'hsl(49 100% 44%)',
- 7: 'hsl(49 95% 56%)',
- 8: 'hsl(49 97% 76%)',
- 9: 'hsl(49 86% 91%)',
- 10: 'hsl(49 82% 98%)',
- 11: 'hsl(0 0% 98%)',
- 12: 'hsl(180 80% 98%)',
- 13: 'hsl(180 83% 93%)',
- 14: 'hsl(180 79% 85%)',
- 15: 'hsl(180 72% 71%)',
- 16: 'hsl(180 62% 57%)',
- 17: 'hsl(180 93% 40%)',
- 18: 'hsl(180 93% 33%)',
- 19: 'hsl(180 89% 26%)',
- 20: 'hsl(180 71% 20%)',
- 21: 'hsl(180 79% 13%)',
- }}
-/>
+</ColorPalette>
+
+## Other (ColorBrewer Palettes)
+
+<ColorPalette>
+ <ColorItem
+ title={visualizationColors.YlGn.title}
+ subtitle="visualizationColors.YlGn"
+ colors={visualizationColors.YlGn.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.YlGnBu.title}
+ subtitle="visualizationColors.YlGnBu"
+ colors={visualizationColors.YlGnBu.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.GnBu.title}
+ subtitle="visualizationColors.GnBu"
+ colors={visualizationColors.GnBu.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.BuGn.title}
+ subtitle="visualizationColors.BuGn"
+ colors={visualizationColors.BuGn.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.PuBuGn.title}
+ subtitle="visualizationColors.PuBuGn"
+ colors={visualizationColors.PuBuGn.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.PuBu.title}
+ subtitle="visualizationColors.PuBu"
+ colors={visualizationColors.PuBu.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.BuPu.title}
+ subtitle="visualizationColors.BuPu"
+ colors={visualizationColors.BuPu.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.RdPu.title}
+ subtitle="visualizationColors.RdPu"
+ colors={visualizationColors.RdPu.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.PuRd.title}
+ subtitle="visualizationColors.PuRd"
+ colors={visualizationColors.PuRd.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.OrRd.title}
+ subtitle="visualizationColors.OrRd"
+ colors={visualizationColors.OrRd.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.YlOrRd.title}
+ subtitle="visualizationColors.YlOrRd"
+ colors={visualizationColors.YlOrRd.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.YlOrBr.title}
+ subtitle="visualizationColors.YlOrBr"
+ colors={visualizationColors.YlOrBr.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Purples.title}
+ subtitle="visualizationColors.Purples"
+ colors={visualizationColors.Purples.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Blues.title}
+ subtitle="visualizationColors.Blues"
+ colors={visualizationColors.Blues.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Greens.title}
+ subtitle="visualizationColors.Greens"
+ colors={visualizationColors.Greens.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Oranges.title}
+ subtitle="visualizationColors.Oranges"
+ colors={visualizationColors.Oranges.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Reds.title}
+ subtitle="visualizationColors.Reds"
+ colors={visualizationColors.Reds.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Greys.title}
+ subtitle="visualizationColors.Greys"
+ colors={visualizationColors.Greys.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.PuOr.title}
+ subtitle="visualizationColors.PuOr"
+ colors={visualizationColors.PuOr.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.BrBG.title}
+ subtitle="visualizationColors.BrBG"
+ colors={visualizationColors.BrBG.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.PiYG.title}
+ subtitle="visualizationColors.PiYG"
+ colors={visualizationColors.PiYG.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.PRGn.title}
+ subtitle="visualizationColors.PRGn"
+ colors={visualizationColors.PRGn.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.RdBu.title}
+ subtitle="visualizationColors.RdBu"
+ colors={visualizationColors.RdBu.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.RdGy.title}
+ subtitle="visualizationColors.RdGy"
+ colors={visualizationColors.RdGy.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.RdYlBu.title}
+ subtitle="visualizationColors.RdYlBu"
+ colors={visualizationColors.RdYlBu.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Spectral.title}
+ subtitle="visualizationColors.Spectral"
+ colors={visualizationColors.Spectral.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.RdYlGn.title}
+ subtitle="visualizationColors.RdYlGn"
+ colors={visualizationColors.RdYlGn.colors[11].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Accent.title}
+ subtitle="visualizationColors.Accent"
+ colors={visualizationColors.Accent.colors[8].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Dark2.title}
+ subtitle="visualizationColors.Dark2"
+ colors={visualizationColors.Dark2.colors[8].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Paired.title}
+ subtitle="visualizationColors.Paired"
+ colors={visualizationColors.Paired.colors[12].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Pastel1.title}
+ subtitle="visualizationColors.Pastel1"
+ colors={visualizationColors.Pastel1.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Pastel2.title}
+ subtitle="visualizationColors.Pastel2"
+ colors={visualizationColors.Pastel2.colors[8].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Set1.title}
+ subtitle="visualizationColors.Set1"
+ colors={visualizationColors.Set1.colors[9].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Set2.title}
+ subtitle="visualizationColors.Set2"
+ colors={visualizationColors.Set2.colors[8].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
+ <ColorItem
+ title={visualizationColors.Set3.title}
+ subtitle="visualizationColors.Set3"
+ colors={visualizationColors.Set3.colors[12].reduce((acc, color, index) => {
+ acc[index + 1] = color;
+ return acc;
+ }, {})}
+ />
</ColorPalette>
@@ -667,44 +571,45 @@ bg-primary-100, text-warning-500, border-danger-500, etc.
<Unstyled>
-<div style={{ display: 'flex', flexDirection:"column" , justifyContent: 'center'}}>
+ <div style={{display: 'flex', flexDirection: "column", justifyContent: 'center'}}>
- <div style={{ marginRight: '10px' }}>
- <table border="1">
- <tbody className="align-top">
- <tr>
- <th className="min-w-[8rem]">font-family</th>
- <td>
- <div className="font-sans">
- font-sans(default)
- [Inter font](https://fonts.google.com/specimen/Inter)
- Alternatives: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
- Roboto, "Helvetica Neue", Arial, "NotoSans", sans-serif, "Apple Color Emoji",
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
- </div>
- <div className="font-mono">
- font-mono
- [Robot mono](https://fonts.google.com/specimen/Roboto+Mono) Alternatives: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
- "Liberation Mono", "Courier New", monospace;
- </div>
- <div className="font-mono bg-secondary-100 p-3">
- font-mono: Useful to display and compare numbers:
- <span className="font-mono">11230</span>
- <span className="font-mono">1230</span>
- </div>
- </td>
- </tr>
- <tr>
- <th>Font Weight</th>
+ <div style={{marginRight: '10px'}}>
+ <table border="1">
+ <tbody className="align-top">
+ <tr>
+ <th className="min-w-[8rem]">font-family</th>
+ <td>
+ <div className="font-sans">
+ font-sans(default)
+ [Inter font](https://fonts.google.com/specimen/Inter)
+ Alternatives: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, "Helvetica Neue", Arial, "NotoSans", sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+ </div>
+ <div className="font-mono">
+ font-mono
+ [Robot mono](https://fonts.google.com/specimen/Roboto+Mono) Alternatives: ui-monospace, SFMono-Regular, Menlo, Monaco,
+ Consolas,
+ "Liberation Mono", "Courier New", monospace;
+ </div>
+ <div className="font-mono bg-secondary-100 p-3">
+ font-mono: Useful to display and compare numbers:
+ <span className="font-mono">11230</span>
+ <span className="font-mono">1230</span>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <th>Font Weight</th>
<td>
<div className="flex flex-col">
- <span className="font-normal">font-normal</span>
- <span className="font-semibold">font-semibold</span>
- <span className="font-bold">font-bold</span>
+ <span className="font-normal">font-normal</span>
+ <span className="font-semibold">font-semibold</span>
+ <span className="font-bold">font-bold</span>
</div>
</td>
</tr>
- <tr>
+ <tr>
<th>Font Size</th>
<td>
<div className="flex flex-col">
@@ -721,13 +626,13 @@ bg-primary-100, text-warning-500, border-danger-500, etc.
<span className="text-5xl">text-5xl</span>
</div>
</td>
- </tr>
- </tbody>
- </table>
+ </tr>
+ </tbody>
+ </table>
- </div>
+ </div>
-</div>
+ </div>
</Unstyled>
@@ -764,80 +669,80 @@ There are 5 types of Icons in Material UI:
</IconItem>
</IconGallery>
-GP, mainly, use <b>Filled</b> and <b>Outlined</b>.
+GP, mainly, use < b > Filled < /b> and <b>Outlined</b >.
We ditinguish two usage scenarios:
-- General app view. Elements already in use:
+-General app view.Elements already in use:
<IconGallery>
<IconItem name="Settings">
- <SettingsIcon />
+ <SettingsIcon/>
</IconItem>
<IconItem name="PhotoCamera">
- <PhotoCameraIcon />
+ <PhotoCameraIcon/>
</IconItem>
<IconItem name="Add">
- <AddIcon />
+ <AddIcon/>
</IconItem>
<IconItem name="Fullscreen">
- <FullscreenIcon />
+ <FullscreenIcon/>
</IconItem>
<IconItem name="FullscreenExit">
- <FullscreenExitIcon />
+ <FullscreenExitIcon/>
</IconItem>
<IconItem name="Content Copy">
- <ContentCopyIcon />
+ <ContentCopyIcon/>
</IconItem>
<IconItem name="Cached">
- <CachedIcon />
+ <CachedIcon/>
</IconItem>
<IconItem name="Info">
- <InfoIcon />
+ <InfoIcon/>
</IconItem>
<IconItem name="Error Outline">
- <ErrorOutlineIcon />
+ <ErrorOutlineIcon/>
</IconItem>
<IconItem name="CheckCircleOutline">
- <CheckCircleOutlineIcon />
+ <CheckCircleOutlineIcon/>
</IconItem>
<IconItem name="Search">
- <SearchIcon />
+ <SearchIcon/>
+ </IconItem>
+ <IconItem name="ArrowDropDown">
+ <ArrowDropDownIcon/>
+ </IconItem>
+ <IconItem name="ArrowDropUp">
+ <ArrowDropUpIcon/>
+ </IconItem>
+ <IconItem name="ArrowBack">
+ <ArrowBackIcon/>
+ </IconItem>
+ <IconItem name="ArrowForward">
+ <ArrowForwardIcon/>
+ </IconItem>
+ <IconItem name="Close">
+ <CloseIcon/>
+ </IconItem>
+ <IconItem name="Cancel">
+ <CancelIcon/>
+ </IconItem>
+ <IconItem name="KeyboardArrowDown">
+ <KeyboardArrowDownIcon/>
+ </IconItem>
+ <IconItem name="KeyboardArrowLeft">
+ <KeyboardArrowLeftIcon/>
+ </IconItem>
+ <IconItem name="KeyboardArrowRight">
+ <KeyboardArrowRightIcon/>
+ </IconItem>
+ <IconItem name="KeyboardArrowUp">
+ <KeyboardArrowUpIcon/>
</IconItem>
-<IconItem name="ArrowDropDown">
- <ArrowDropDownIcon />
-</IconItem>
-<IconItem name="ArrowDropUp">
- <ArrowDropUpIcon />
-</IconItem>
-<IconItem name="ArrowBack">
- <ArrowBackIcon />
-</IconItem>
-<IconItem name="ArrowForward">
- <ArrowForwardIcon />
-</IconItem>
-<IconItem name="Close">
- <CloseIcon />
-</IconItem>
-<IconItem name="Cancel">
- <CancelIcon />
-</IconItem>
-<IconItem name="KeyboardArrowDown">
- <KeyboardArrowDownIcon />
-</IconItem>
-<IconItem name="KeyboardArrowLeft">
- <KeyboardArrowLeftIcon />
-</IconItem>
-<IconItem name="KeyboardArrowRight">
- <KeyboardArrowRightIcon />
-</IconItem>
-<IconItem name="KeyboardArrowUp">
- <KeyboardArrowUpIcon />
-</IconItem>
</IconGallery>
-- Per component, Button component can have an icon (for more information go to Button's document):
+-Per component, Button component can have an icon(for more information go to Button's document):
<div className="w-32 m-5 mx-auto">
<Button
@@ -982,21 +887,22 @@ GP uses default Tailwind spacing.
## Shadows
-The general guide is to not use shadows in the components. However in inputs and dropdowns are helpful e.g.:
+The general guide is to not use shadows in the components.However in inputs and dropdowns are helpful e.g.:
-<div style={{ display: 'flex', justifyContent: 'center' }}>
+<div style={{display: 'flex', justifyContent: 'center'}}>
-<div className="w-52 m-5">
- <TextInput type="text" label="Text Label" value="" onChange={(value) => console.log(value)} />
-</div>
+ <div className="w-52 m-5">
+ <TextInput type="text" label="Text Label" value="" onChange={(value) => console.log(value)}/>
+ </div>
</div>
## Develop components
To add a new component, include the following files:
-- "index.tsx": component's code.
-- "componentName.stories.tsx": Story's definition. On tag Meta defines the location of the component in the Storybook dashboard e.g.: title: 'Components/Button'
+-"index.tsx": component's code.
+
+- "componentName.stories.tsx": Story's definition. On tag Meta defines the location of the component in the Storybook dashboard e.g.: title: 'Components / Button'
- "overview.mdx": Component's documentation.
```
diff --git a/libs/shared/lib/components/charts/Axis/axis.stories.tsx b/libs/shared/lib/components/charts/Axis/axis.stories.tsx
index 40857f3d6..200d974df 100644
--- a/libs/shared/lib/components/charts/Axis/axis.stories.tsx
+++ b/libs/shared/lib/components/charts/Axis/axis.stories.tsx
@@ -10,7 +10,7 @@ const Component: Meta<AxisComponentProps> = {
decorators: [
(Story) => (
<div className="w-full h-full flex flex-row justify-center">
- <svg className="border border-gray-300" width="300" height="200">
+ <svg className="border border-secondary-300" width="300" height="200">
<Story />
</svg>
</div>
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderRelatedNodesPanel.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderRelatedNodesPanel.tsx
index 70150333f..3b57002c3 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderRelatedNodesPanel.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderRelatedNodesPanel.tsx
@@ -1,4 +1,3 @@
-
import { useMemo, useState } from 'react';
import { Handles, QueryElementTypes, toHandleData } from '../../model';
import { ConnectingNodeDataI } from '../utils/connectorDrop';
@@ -169,7 +168,7 @@ export const QueryBuilderRelatedNodesPanel = (props: {
<ul className="menu p-0 [&_li>*]:rounded-none w-full pb-10">
{relatedEntities.map((entity) => {
return (
- <button className="btn btn-sm border-entity-400 normal-case" key={entity.name} onClick={() => newEntity(entity)}>
+ <button className="btn btn-sm border-accent-400 normal-case" key={entity.name} onClick={() => newEntity(entity)}>
{entity.name}
</button>
);
@@ -180,7 +179,7 @@ export const QueryBuilderRelatedNodesPanel = (props: {
<ul className="menu p-0 [&_li>*]:rounded-none w-full pb-10">
{relatedRelations.map((relation) => {
return (
- <button className="btn btn-sm border-relation-400 normal-case" key={relation.name} onClick={() => newRelation(relation)}>
+ <button className="btn btn-sm border-primary-400 normal-case" key={relation.name} onClick={() => newRelation(relation)}>
{relation.name}
</button>
);
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relation-handles.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relation-handles.tsx
index b8e3049fb..d1942fbad 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relation-handles.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relation-handles.tsx
@@ -33,7 +33,7 @@ export const LeftHandle = (props: Props) => {
}}
>
<svg className="pointer-events-none" height={10} style={{ transform: `translate(3px, 4px)` }}>
- <polygon points={getArrow[props.point]} fill={tailwindColors.relation[200]} />
+ <polygon points={getArrow[props.point]} className="fill-primary-600" />
</svg>
</FilterHandle>
);
@@ -52,7 +52,7 @@ export const RightHandle = (props: Props) => {
}}
>
<svg height={10} className="pointer-events-none" style={{ transform: `translate(6px, 4px)` }}>
- <polygon points={getArrow[props.point]} fill={tailwindColors.relation[200]} />
+ <polygon points={getArrow[props.point]} className="fill-primary-600" />
</svg>
</FilterHandle>
);
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
index bd38e97d0..2c087a1ef 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
@@ -9,8 +9,8 @@ $width: 325;
text-align: center;
font-weight: bold;
border-left: 3px solid;
- @apply bg-relation-50;
- @apply border-l-relation-600;
+ @apply bg-primary-50;
+ @apply border-l-primary-600;
font-size: 13px;
}
@@ -29,7 +29,7 @@ $width: 325;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
border-bottom: 8px solid !important;
- @apply border-b-relation-200 #{!important};
+ @apply border-b-primary-200 #{!important};
}
.relationHandleLeft {
@@ -73,7 +73,7 @@ $width: 325;
.relationSpan {
float: left;
- margin-left: 5;
+ margin-left: 5px;
}
.relationInputHolder {
@@ -90,17 +90,19 @@ $width: 325;
.relationInput {
z-index: 1;
cursor: text;
- min-width: 0px;
+ min-width: 0;
max-width: 1.5ch;
border: none;
background: transparent;
text-align: center;
font-size: 0.8rem;
user-select: none;
+
&:focus {
outline: none;
user-select: none;
}
+
&::placeholder {
outline: none;
user-select: none;
diff --git a/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss b/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss
index c15fbed8f..d33f2bd0f 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss
+++ b/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss
@@ -31,5 +31,5 @@
.handleTriangleRight {
@extend .handleTriangle;
transform: rotate(90deg) translate(-50%, -45%) scale(0.65) !important;
- @apply border-b-entity-300;
+ @apply border-b-accent-300;
}
diff --git a/libs/shared/lib/schema/pills/nodes/relation/relation.module.scss b/libs/shared/lib/schema/pills/nodes/relation/relation.module.scss
index cc085e426..3ec5fdd99 100644
--- a/libs/shared/lib/schema/pills/nodes/relation/relation.module.scss
+++ b/libs/shared/lib/schema/pills/nodes/relation/relation.module.scss
@@ -22,7 +22,7 @@ $width: 145;
.handleTriangleBottom {
@extend .handleTriangle;
transform: rotate(-180deg) translate(0, -40%) !important;
- @apply border-b-relation-700;
+ @apply border-b-primary-700;
}
.controls {
@@ -38,6 +38,7 @@ $width: 145;
bottom: auto !important;
top: 10px;
right: 20px;
+
& svg {
transform: scale(1.4);
}
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
index 1eddd255b..04f26df0c 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
@@ -1,5 +1,5 @@
import { Edge, GraphQueryResult, Node, useML, useSearchResultData } from '@graphpolaris/shared/lib/data-access';
-import { dataColors, tailwindColors } from 'config';
+import { dataColors, visualizationColors } from 'config';
import * as d3 from 'd3';
import { Viewport } from 'pixi-viewport';
import {
@@ -25,6 +25,7 @@ import Color from 'color';
import { createColumn } from './ColumnGraphicsComponent';
import { ReorderingManager } from './ReorderingManager';
import { VisualizationConfiguration } from '../../../common';
+import { vi } from 'vitest';
type Props = {
// onClick: (node: NodeType, pos: IPointData) => void;
@@ -372,7 +373,7 @@ export const MatrixPixi = (props: Props) => {
// make adjacency
// const adjacenyScale = d3.scaleLinear([dataColors.neutral['5'], tailwindColors.entity.DEFAULT]);
- const adjacenyScale = d3.scaleLinear([colorNeutral, tailwindColors.entity.DEFAULT]);
+ const adjacenyScale = d3.scaleLinear([colorNeutral, visualizationColors.GPSelected.colors[1][0]]);
visMapping.push({
attribute: 'adjacency',
encoding: configuration.marks,
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 983a2713d..05d7993c8 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -1,5 +1,5 @@
import { GraphType, LinkType, NodeType } from '../types';
-import { dataColors, tailwindColors } from 'config';
+import { dataColors, visualizationColors } from 'config';
import { ReactEventHandler, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { Application, Circle, Color, Container, FederatedPointerEvent, Graphics, IPointData, Point } from 'pixi.js';
import * as force from './NLForce';
@@ -10,6 +10,7 @@ import { hslStringToHex, nodeColor } from './utils';
import { CytoscapeLayout, GraphologyLayout, LayoutFactory, Layouts } from '../../../../graph-layout';
import { MultiGraph } from 'graphology';
import { VisualizationConfiguration } from '../../../common';
+import { data } from 'happy-dom/lib/PropertySymbol';
type Props = {
onClick: (node: NodeType, pos: IPointData) => void;
@@ -70,12 +71,12 @@ export const NLPixi = (props: Props) => {
NODE_RADIUS: 5,
NODE_BORDER_LINE_WIDTH: 1.0,
- NODE_BORDER_LINE_WIDTH_SELECTED: 1.0, // if selected and normal width are different the thicker line will be still in the gfx
- NODE_BORDER_COLOR_DEFAULT: dataColors.black,
+ NODE_BORDER_LINE_WIDTH_SELECTED: 5.0, // if selected and normal width are different the thicker line will be still in the gfx
+ NODE_BORDER_COLOR_DEFAULT: dataColors.neutral[70],
NODE_BORDER_COLOR_SELECTED: dataColors.orange[60],
- LINE_COLOR_DEFAULT: dataColors.neutral[20],
- LINE_COLOR_SELECTED: tailwindColors.entity[400],
+ LINE_COLOR_DEFAULT: dataColors.neutral[40],
+ LINE_COLOR_SELECTED: visualizationColors.GPSelected.colors[1],
LINE_COLOR_ML: dataColors.blue[60],
LINE_WIDTH_DEFAULT: 0.8,
});
@@ -227,9 +228,9 @@ export const NLPixi = (props: Props) => {
if (!gfx) return;
const lineColor = node.isShortestPathSource
- ? tailwindColors.entity[950]
+ ? dataColors.orange['95']
: node.isShortestPathTarget
- ? tailwindColors.relation[950]
+ ? dataColors.blue['95']
: node.selected
? config.NODE_BORDER_COLOR_SELECTED
: config.NODE_BORDER_COLOR_DEFAULT;
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/utils.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/utils.tsx
index c4ac42c84..6fa1fb119 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/utils.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/utils.tsx
@@ -1,4 +1,4 @@
-import { tailwindColors } from 'config';
+import { visualizationColors } from 'config';
import { GraphType, LinkType, NodeType } from '../types';
/**
@@ -9,8 +9,8 @@ import { GraphType, LinkType, NodeType } from '../types';
export function nodeColor(num: number) {
// num = num % 4;
// const col = '#000000';
- let entityColors = Object.values(tailwindColors.entity);
- const col = tailwindColors.custom.nodes[num % (tailwindColors.custom.nodes.length - 1)];
+ let entityColors = Object.values(visualizationColors.GPSeq.colors[9]);
+ const col = visualizationColors.GPCat.colors[14][(num % (visualizationColors.GPCat.colors[14].length - 1)) - 1];
return binaryColor(col);
}
@@ -50,6 +50,7 @@ export function hslStringToHex(hsl: string) {
};
return `#${f(0)}${f(8)}${f(4)}`;
}
+
/**
* Used when you select nodes.
* The highlight is drawn in ticked.
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index f345bbe9e..0159bbe36 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -21,7 +21,7 @@ import { HyperEdgeRange } from './components/HyperEdgesRange';
import { ToPaohvisDataParserUseCase } from './utils/ToPaohvisDataParserUsecase';
import { MakePaohvisMenu } from './components/MakePaohvisMenu';
import { RowLabelColumn } from './components/RowLabelColumn';
-import { categoricalColors } from '../../../../../config/src/colors.js';
+import { visualizationColors } from '../../../../../config/src/colors.js';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import { Input } from '@graphpolaris/shared/lib/components/inputs';
@@ -123,8 +123,8 @@ export const PaohVis = ({ data, schema, configuration }: VisualizationPropTypes)
return processDataColumn(39, dataColumn, attributesArray[0], attributesArray);
});
- const numColorsAvailable = Object.keys(categoricalColors.lightMode).length;
- const colorsAvailable = Object.values(categoricalColors.lightMode);
+ const numColorsAvailable = visualizationColors.GPCat.colors[14].length;
+ const colorsAvailable = visualizationColors.GPCat.colors[14];
const filteredArray = data2Render.filter((obj) => obj.numUniqueElements < numColorsAvailable);
const colorMappings: { [name: string]: string[] } = {};
@@ -329,6 +329,7 @@ export const PaohVis = ({ data, schema, configuration }: VisualizationPropTypes)
return prevViewModel;
});
}
+
/**
* Handles the visual changes when you leave a certain hyperEdge on hovering.
* @param colIndex This is the index which states in which column you were hovering.
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
index 8b73e3768..28069edc4 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
@@ -3,7 +3,7 @@ import Scatterplot, { KeyedScatterplotProps } from './components/Scatterplot';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
-import { categoricalColors } from 'config/src/colors';
+import { visualizationColors } from 'config/src/colors';
import { VisualizationPropTypes, VISComponentType } from '../../common';
import { findConnectionsNodes, getRegionData, setExtension, filterArray, getUniqueValues } from './components/utils';
@@ -240,9 +240,9 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
colorEdges = config.edges.stroke;
if (appState.scatterplots.length < numColorsCategorical) {
- colorEdges = (categoricalColors.darkMode as Record<number, string>)[appState.scatterplots.length + 1];
+ colorEdges = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1];
} else {
- colorEdges = (categoricalColors.darkMode as Record<number, string>)[appState.scatterplots.length + 1 - numColorsCategorical];
+ colorEdges = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1 - numColorsCategorical];
}
}
@@ -277,9 +277,9 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
strokeCircle = config.circle.strokeClr;
} else {
if (appState.scatterplots.length < numColorsCategorical) {
- colorCircle = (categoricalColors.darkMode as Record<number, string>)[appState.scatterplots.length + 1];
+ colorCircle = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1];
} else {
- colorCircle = (categoricalColors.darkMode as Record<number, string>)[appState.scatterplots.length + 1 - numColorsCategorical];
+ colorCircle = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1 - numColorsCategorical];
}
strokeCircle = config.circle.strokeClr;
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/utils.ts b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/utils.ts
index 34c0ee148..173658013 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/utils.ts
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/utils.ts
@@ -1,4 +1,4 @@
-import { categoricalColors } from 'config';
+import { visualizationColors } from 'config';
import { MultiGraph } from 'graphology';
import { AugmentedEdgeAttributes, GraphData, VisualRegionConfig } from './components/types';
import { GraphQueryResult, Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
@@ -33,17 +33,17 @@ const buildGraphology = (data: GraphData): MultiGraph => {
return graph;
};
-const numColorsCategorical = Object.keys(categoricalColors.lightMode).length;
+const numColorsCategorical = visualizationColors.GPCat.colors[14].length;
export const isColorCircleFix = true;
let config: any = {};
if (isColorCircleFix) {
config = {
circle: {
fillClr: 'hsl(var(--clr-sec--500))',
- strokeClr: 'hsl(var(--clr-sec--500))',
+ strokeClr: 'hsl(var(--clr-sec--600))',
},
edges: {
- stroke: 'bg-secondary-600',
+ stroke: 'bg-primary-600',
strokeWidth: '2',
strokeOpacity: '0.7',
},
--
GitLab