[chore] add fsq color palettes (#2862)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Dec 26, 2024 · be2f04e · be2f04e
1 parent c7d3777
commit be2f04e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/constants/src/color-palettes.ts b/src/constants/src/color-palettes.ts
@@ -351,6 +351,22 @@ const OkabeIto = {
 };
 // Bad Data: #DDDDDD
 
+const FSQBrand = {
+  name: 'FSQ Brand',
+  type: PALETTE_TYPES.QUA,
+  category: CATEGORIES.COLORBLIND,
+  colors: ['#3333FF', '#6166EB', '#2ED9C3', '#82E8DB', '#FCCC0A', '#FFDAAF', '#30A5D9', '#97DAF8'],
+  colorBlindSafe: true
+};
+
+const FSQWarmTone = {
+  name: 'FSQ Warm Tone',
+  type: PALETTE_TYPES.QUA,
+  category: CATEGORIES.COLORBLIND,
+  colors: ['#C00B05', '#D150A5', '#E98ECA', '#FECE5A', '#FFDDBF', '#FFB4D3', '#EE5D86', '#D8D2D2'],
+  colorBlindSafe: true
+};
+
 /**
  * Build Categorical color palette
  */
@@ -536,7 +552,7 @@ function buildPaletteBySchemeGroups(
 
 const COLORBREWER_PALETTES = buildPaletteBySchemeGroups(COLORBREWER_SCHEME, CATEGORIES.COLORBREWER);
 const D3_COLOR_PALETTES = buildPaletteBySchemeGroups(D3_COLOR_CHROMATIC_SCHEME, CATEGORIES.D3);
-const UBER_PALETTES: ColorPalette[] = [
+const BRANDED_PALETTES: ColorPalette[] = [
   UberVizDiverging,
   UberVizSequential,
   UberPool,
@@ -554,15 +570,17 @@ const UBER_PALETTES: ColorPalette[] = [
   TolMuted,
   TolMediumContrast,
   TolLight,
-  OkabeIto
+  OkabeIto,
+  FSQBrand,
+  FSQWarmTone
 ]
   .map(recipe =>
     recipe.type === PALETTE_TYPES.QUA ? buildCategoricalPalette(recipe) : buildCustomPalette(recipe)
   )
   .filter(Boolean) as ColorPalette[];
 
 export const KEPLER_COLOR_PALETTES: ColorPalette[] = [
-  ...UBER_PALETTES,
+  ...BRANDED_PALETTES,
   ...COLORBREWER_PALETTES,
   ...D3_COLOR_PALETTES
 ];

diff --git a/test/browser/components/side-panel/color-selector-test.js b/test/browser/components/side-panel/color-selector-test.js
@@ -400,7 +400,7 @@ test('Components -> LayerColorRangeSelector.render -> ColorSelector -> ColorRang
   t.equal(crs.length, 1, 'should render 1 ColorRangeSelector');
 
   const item = crs.find('ColorPaletteItem');
-  t.equal(item.length, 62, `should render ${KEPLER_COLOR_PALETTES.length} Palettes`);
+  t.equal(item.length, 64, `should render ${KEPLER_COLOR_PALETTES.length} Palettes`);
 
   t.equal(
     item.at(0).find(ColorPalette).find('.color-range-palette__block').length,
@@ -500,7 +500,7 @@ test('Components -> LayerColorRangeSelector.render -> ColorSelector -> ColorRang
   t.equal(pc.length, 5, 'should render 5 PaletteConfig');
 
   const cpg = crs.find('ColorPaletteItem');
-  t.equal(cpg.length, 62, `should render ${KEPLER_COLOR_PALETTES.length} Palettes`);
+  t.equal(cpg.length, 64, `should render ${KEPLER_COLOR_PALETTES.length} Palettes`);
 
   const typeSelect = crs.find(PaletteConfig).at(0);
   t.equal(typeSelect.find('.side-panel-panel__label').text(), 'Type', 'should render type');