feat: support spectrum 2 colors

Author: marshallpete

packages/docs/docs/api/Chart.md

@@ -213,7 +213,10 @@ Available color schemes:
 - `categorical6`
 - `categorical12`
 - `categorical16`
-- `categorical24`
+- `s2Categorical6`
+- `s2Categorical12`
+- `s2Categorical16`
+- `s2Categorical20`
 - `divergentOrangeYellowSeafoam5`
 - `divergentOrangeYellowSeafoam9`
 - `divergentOrangeYellowSeafoam15`
@@ -226,7 +229,7 @@ Available color schemes:
 
 #### Spectrum color names
 
-A color scale can be defined as an array of spectrum color names. Spectrum color names are responsive (excluding `static*` variants). This is great for when light and dark mode support is needed. The colors adjust so that they look ideal in both light and dark mode.
+A color scale can be defined as an array of spectrum color names. Spectrum color names are responsive (excluding `static*` variants). This is great for when light and dark mode support is needed. The colors adjust so that they look ideal in both light and dark mode. Spectrum 2 colors are also supported with the `s2-` prefix (ex. `s2-cinnamon-400`, `s2-silver-1600`).
 
 Example: `['red-500', 'blue-600', 'celery-400']`
 

packages/react-spectrum-charts/src/stories/Chart.test.tsx

@@ -12,6 +12,7 @@
 import { createRef } from 'react';
 
 import { FADE_FACTOR } from '@spectrum-charts/constants';
+import { s2SpectrumColors } from '@spectrum-charts/themes';
 import { ChartHandle } from '@spectrum-charts/vega-spec-builder';
 
 import { Chart } from '../Chart';
@@ -22,6 +23,8 @@ import { getElement } from '../utils';
 import { BackgroundColor, Basic, Config, Height, HighlightedItem, Locale, TooltipAnchor, Width } from './Chart.story';
 import {
   CssColors,
+  Spectrum2CategoricalColorScheme,
+  Spectrum2ColorNames,
   SpectrumColorNames,
   SpectrumDivergentColorScheme,
   SpectrumSequentialColorScheme,
@@ -194,6 +197,51 @@ describe('Chart', () => {
       const container = document.querySelector('.rsc-container > div');
       expect(container).toHaveStyle('background-color: rgb(248, 248, 248);');
     });
+
+    test('Spectrum diverging color scheme renders correctly', async () => {
+      render(<Spectrum2CategoricalColorScheme {...Spectrum2CategoricalColorScheme.args} />);
+
+      const chart = await findChart();
+      expect(chart).toBeInTheDocument();
+      const bars = getAllMarksByGroupName(chart, 'bar0');
+
+      const colors = s2SpectrumColors.light;
+
+      expect(bars[0].getAttribute('fill')).toEqual(colors['categorical-100']);
+      expect(bars[1].getAttribute('fill')).toEqual(colors['categorical-200']);
+      expect(bars[2].getAttribute('fill')).toEqual(colors['categorical-300']);
+      expect(bars[3].getAttribute('fill')).toEqual(colors['categorical-400']);
+    });
+
+    test('Spectrum colors render correctly (light)', async () => {
+      render(<Spectrum2ColorNames {...Spectrum2ColorNames.args} />);
+
+      const chart = await findChart();
+      expect(chart).toBeInTheDocument();
+      const bars = getAllMarksByGroupName(chart, 'bar0');
+      
+      const colors = s2SpectrumColors.light;
+
+      expect(bars[0].getAttribute('fill')).toEqual(colors['cinnamon-1200']);
+      expect(bars[1].getAttribute('fill')).toEqual(colors['cinnamon-1000']);
+      expect(bars[2].getAttribute('fill')).toEqual(colors['cinnamon-800']);
+      expect(bars[3].getAttribute('fill')).toEqual(colors['cinnamon-600']);
+    });
+
+    test('Spectrum colors render correctly (dark)', async () => {
+      render(<Spectrum2ColorNames {...Spectrum2ColorNames.args} colorScheme="dark" />);
+
+      const chart = await findChart();
+      expect(chart).toBeInTheDocument();
+      const bars = getAllMarksByGroupName(chart, 'bar0');
+
+      const colors = s2SpectrumColors.dark;
+
+      expect(bars[0].getAttribute('fill')).toEqual(colors['cinnamon-1200']);
+      expect(bars[1].getAttribute('fill')).toEqual(colors['cinnamon-1000']);
+      expect(bars[2].getAttribute('fill')).toEqual(colors['cinnamon-800']);
+      expect(bars[3].getAttribute('fill')).toEqual(colors['cinnamon-600']);
+    });
   });
 
   describe('State stories', () => {

packages/react-spectrum-charts/src/stories/ChartColors.story.tsx

@@ -43,4 +43,16 @@ CssColors.args = {
   data,
 };
 
-export { SpectrumColorNames, SpectrumDivergentColorScheme, SpectrumSequentialColorScheme, CssColors };
+const Spectrum2CategoricalColorScheme = bindWithProps(ChartBarStory);
+Spectrum2CategoricalColorScheme.args = {
+  colors: 's2Categorical12',
+  data,
+};
+
+const Spectrum2ColorNames = bindWithProps(ChartBarStory);
+Spectrum2ColorNames.args = {
+  colors: ['s2-cinnamon-1200', 's2-cinnamon-1000', 's2-cinnamon-800', 's2-cinnamon-600'],
+  data,
+};
+
+export { SpectrumColorNames, SpectrumDivergentColorScheme, SpectrumSequentialColorScheme, CssColors, Spectrum2CategoricalColorScheme, Spectrum2ColorNames };

packages/themes/src/categoricalColorPalette.ts

@@ -40,14 +40,38 @@ export const categorical16 = [
   colors['categorical-1600'],
 ];
 
-export const categorical24 = [
-  ...categorical16,
-  colors['categorical-1700'],
-  colors['categorical-1800'],
-  colors['categorical-1900'],
-  colors['categorical-2000'],
-  colors['categorical-2100'],
-  colors['categorical-2200'],
-  colors['categorical-2300'],
-  colors['categorical-2400'],
-];
+export const s2Categorical6 = [
+  colors['s2-categorical-100'],
+  colors['s2-categorical-200'],
+  colors['s2-categorical-300'],
+  colors['s2-categorical-400'],
+  colors['s2-categorical-500'],
+  colors['s2-categorical-600'],
+];
+
+export const s2Categorical12 = [
+  ...s2Categorical6,
+  colors['s2-categorical-700'],
+  colors['s2-categorical-800'],
+  colors['s2-categorical-900'],
+  colors['s2-categorical-1000'],
+  colors['s2-categorical-1100'],
+  colors['s2-categorical-1200'],
+];
+
+export const s2Categorical16 = [
+  ...s2Categorical12,
+  colors['s2-categorical-1300'],
+  colors['s2-categorical-1400'],
+  colors['s2-categorical-1500'],
+  colors['s2-categorical-1600'],
+];
+
+export const s2Categorical20 = [
+  ...s2Categorical16,
+  colors['s2-categorical-1700'],
+  colors['s2-categorical-1800'],
+  colors['s2-categorical-1900'],
+  colors['s2-categorical-2000'],
+];
+

packages/themes/src/colorSchemes.ts

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { categorical6, categorical12, categorical16 } from './categoricalColorPalette';
+import { categorical6, categorical12, categorical16, s2Categorical6, s2Categorical12, s2Categorical16, s2Categorical20 } from './categoricalColorPalette';
 import {
   divergentOrangeYellowSeafoam5,
   divergentOrangeYellowSeafoam9,
@@ -43,6 +43,10 @@ export const colorSchemes = {
   categorical6,
   categorical12,
   categorical16,
+  s2Categorical6,
+  s2Categorical12,
+  s2Categorical16,
+  s2Categorical20,
   divergentOrangeYellowSeafoam5,
   divergentOrangeYellowSeafoam9,
   divergentOrangeYellowSeafoam15,

packages/themes/src/index.ts

@@ -15,5 +15,6 @@ export * from './colorSchemes';
 export * from './divergingColorPalette';
 export * from './sequentialColorPalette';
 export * from './spectrumColors';
+export * from './s2SpectrumColors';
 export * from './spectrumTheme';
 export * from './utils';