@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartSegment/components/ScaledSegment.tsx

@@ -0,0 +1,218 @@
+import type { IFunnelChartColors } from '../../../../GFunnelChart/types';
+import type { ReactNode } from 'react';
+
+import { getRoundedRectPath, useChartContext } from '@shopify/polaris-viz-core';
+import { animated, useSpring } from '@react-spring/web';
+import { Fragment, useState } from 'react';
+
+import {
+  FUNNEL_CHART_SEGMENT_FILL,
+  FUNNEL_CHART_SEGMENT_SCALE_LIGHT,
+  FUNNEL_CHART_SEGMENT_SCALE_SHADOW,
+} from '../constants';
+import { InteractiveOverlay } from './InteractiveOverlay';
+
+interface InteractionHandlers {
+  onMouseEnter?: (index: number) => void;
+  onMouseLeave?: () => void;
+}
+
+interface Props extends InteractionHandlers {
+  barHeight: number;
+  barWidth: number;
+  index: number;
+  isLast: boolean;
+  x: number;
+  children: ReactNode;
+  funnelColors?: IFunnelChartColors;
+}
+
+export function ScaledSegment({
+  barHeight,
+  barWidth,
+  index,
+  isLast,
+  x,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+  funnelColors,
+}: Props) {
+  const { containerBounds } = useChartContext();
+  const { width: drawableWidth, height: drawableHeight } = containerBounds ?? {
+    height: 0,
+    width: 0,
+  };
+  const [hasAnimated, setHasAnimated] = useState(false);
+
+  const FUNNEL_SEGMENT = {
+    minBorderRadius: 3,
+    maxBorderRadius: 6,
+    borderRadiusRatio: 0.03,
+    scaleGap: 4,
+    scaleStartRatio: 0.2,
+    heightScaleFactor: 0.015,
+    widthScaleFactor: 0.005,
+    borderRadiusHeightThreshold: 200,
+    colors: {
+      primary: funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL,
+      scaleLight: funnelColors?.segment.scaleLight ?? FUNNEL_CHART_SEGMENT_SCALE_LIGHT,
+      scaleShadow: funnelColors?.segment.scaleShadow ?? FUNNEL_CHART_SEGMENT_SCALE_SHADOW,
+      ripple: 'white',
+    },
+  };
+
+  const scaleStripeHeight = calculateResponsiveScale({
+    drawableHeight,
+    drawableWidth,
+    heightScaleFactor: FUNNEL_SEGMENT.heightScaleFactor,
+    widthScaleFactor: FUNNEL_SEGMENT.widthScaleFactor,
+  });
+  const totalScaleHeight = scaleStripeHeight * 4;
+
+  const springs = useSpring({
+    from: { height: 0 },
+    to: { height: barHeight },
+    delay: index * 100,
+  });
+
+  const scaleSpring = useSpring({
+    from: {
+      opacity: 0,
+      scaleStripeHeight: 0,
+    },
+    to: {
+      opacity: 1,
+      scaleStripeHeight: totalScaleHeight,
+    },
+    config: {
+      mass: 1,
+      tension: 400,
+      friction: 15,
+    },
+    delay: index * 100 + 700,
+    onRest: () => setHasAnimated(true),
+  });
+
+  const isFirst = index === 0;
+
+  const scaleStartHeight = calculateScaleStartHeight(barHeight, FUNNEL_SEGMENT.scaleStartRatio);
+
+  const dynamicBorderRadius = Math.min(
+    Math.max(Math.round(drawableHeight * FUNNEL_SEGMENT.borderRadiusRatio), FUNNEL_SEGMENT.minBorderRadius),
+    FUNNEL_SEGMENT.maxBorderRadius,
+  );
+
+  const fullSegmentMarkup = (
+    <animated.path
+      d={springs.height.to((height) =>
+        getRoundedRectPath({
+          width: barWidth,
+          height,
+          borderRadius: `${isFirst ? dynamicBorderRadius : 0} ${isLast ? dynamicBorderRadius : 0} 0 0`,
+        }),
+      )}
+      fill={FUNNEL_SEGMENT.colors.primary}
+    />
+  );
+
+  const scalePattern = [
+    FUNNEL_SEGMENT.colors.scaleLight,
+    FUNNEL_SEGMENT.colors.scaleShadow,
+    FUNNEL_SEGMENT.colors.scaleLight,
+    FUNNEL_SEGMENT.colors.scaleShadow,
+  ];
+
+  const scaleEffectMarkup = (
+    <animated.g style={{ opacity: scaleSpring.opacity }} transform={`translate(0, ${scaleStartHeight})`}>
+      {scalePattern.map((fill, scaleIndex) =>
+        hasAnimated ? (
+          <rect
+            key={`scale-effect-${scaleIndex}`}
+            x={0}
+            y={scaleStripeHeight * scaleIndex}
+            width={barWidth}
+            height={scaleStripeHeight}
+            fill={fill}
+          />
+        ) : (
+          <animated.rect
+            key={`scale-effect-${scaleIndex}`}
+            x={0}
+            y={scaleSpring.scaleStripeHeight.to((height) => (height / 4) * scaleIndex)}
+            width={barWidth}
+            height={scaleSpring.scaleStripeHeight.to((height) => height / 4)}
+            fill={fill}
+          />
+        ),
+      )}
+    </animated.g>
+  );
+
+  const getRipplePath = (scaleStripeHeight: number, verticalOffset: number, height: number = scaleStripeHeight * 2) => {
+    return `M ${scaleStripeHeight * 1.5},${scaleStripeHeight + verticalOffset}
+            L 0,${verticalOffset}
+            L 0,${verticalOffset + height} Z`;
+  };
+
+  const scaleRippleMarkup = (
+    <animated.g style={{ opacity: scaleSpring.opacity }} transform={`translate(0, ${scaleStartHeight})`}>
+      {hasAnimated ? (
+        <Fragment>
+          <path d={getRipplePath(scaleStripeHeight, 0)} fill={FUNNEL_SEGMENT.colors.ripple} />
+          <path d={getRipplePath(scaleStripeHeight, scaleStripeHeight * 2)} fill={FUNNEL_SEGMENT.colors.ripple} />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <animated.path
+            d={scaleSpring.scaleStripeHeight.to((height) => getRipplePath(scaleStripeHeight, 0, height / 2))}
+            fill={FUNNEL_SEGMENT.colors.ripple}
+          />
+          <animated.path
+            d={scaleSpring.scaleStripeHeight.to((height) =>
+              getRipplePath(scaleStripeHeight, scaleStripeHeight * 2, height / 2),
+            )}
+            fill={FUNNEL_SEGMENT.colors.ripple}
+          />
+        </Fragment>
+      )}
+    </animated.g>
+  );
+
+  return (
+    <Fragment>
+      <animated.g
+        style={{
+          transform: springs.height.to((height) => `translate(${x}px, ${drawableHeight - height}px)`),
+        }}
+      >
+        {fullSegmentMarkup}
+        {scaleEffectMarkup}
+        {scaleRippleMarkup}
+        <InteractiveOverlay
+          width={barWidth}
+          height={barHeight}
+          index={index}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        />
+      </animated.g>
+      {children}
+    </Fragment>
+  );
+}
+
+const calculateScaleStartHeight = (height: number, scaleStartRatio: number) => Math.floor(height * scaleStartRatio);
+
+const calculateResponsiveScale = (data: {
+  drawableHeight: number;
+  drawableWidth: number;
+  heightScaleFactor: number;
+  widthScaleFactor: number;
+}) => {
+  const { drawableHeight, drawableWidth, heightScaleFactor, widthScaleFactor } = data;
+  const heightScale = drawableHeight * heightScaleFactor;
+  const widthScale = drawableWidth * widthScaleFactor;
+  const scale = Math.max((heightScale + widthScale) / 2, 1);
+  return scale;
+};

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartSegment/constants.ts

@@ -0,0 +1,4 @@
+export const FUNNEL_CHART_SEGMENT_FILL = 'rgba(48, 94, 232, 1)';
+export const FUNNEL_CHART_SEGMENT_SCALE_LIGHT = '#597EED';
+export const FUNNEL_CHART_SEGMENT_SCALE_SHADOW = '#133AAF';
+export const BORDER_RADIUS = 6;

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartSegment/index.ts

@@ -0,0 +1,2 @@
+export { FunnelChartSegment } from './FunnelChartSegment';
+export { FUNNEL_CHART_SEGMENT_FILL } from './constants';

package/src/shared/charts/components/GPolarisViz/shared/SeriesIcon/SeriesIcon.tsx

@@ -0,0 +1,22 @@
+import type { Shape, Color, LineStyle } from '@shopify/polaris-viz-core';
+
+import { DefaultPreview } from '../../components/DefaultPreview';
+import { LinePreview } from '../../components/LinePreview';
+
+interface Props {
+  color: Color;
+  shape?: Shape;
+  lineStyle?: LineStyle;
+}
+
+export function SeriesIcon({ color, lineStyle, shape = 'Bar' }: Props) {
+  switch (shape) {
+    case 'Line': {
+      const style = lineStyle ?? 'solid';
+
+      return <LinePreview color={color} lineStyle={style} />;
+    }
+    default:
+      return <DefaultPreview color={color} />;
+  }
+}

package/src/shared/charts/components/GPolarisViz/shared/SeriesIcon/index.ts

@@ -0,0 +1 @@
+export { SeriesIcon } from './SeriesIcon';

package/src/shared/charts/components/GPolarisViz/shared/ZeroValueLine/ZeroValueLine.tsx

@@ -0,0 +1,45 @@
+import type { Direction } from '@shopify/polaris-viz-core';
+
+import { ZERO_VALUE_LINE_HEIGHT } from '../../constants';
+import { useTheme } from '@shopify/polaris-viz-core';
+import { Fragment } from 'react';
+
+export interface ZeroValueLineProps {
+  x: number;
+  y: number;
+  areAllNegative?: boolean;
+  theme?: string;
+  direction?: Direction;
+}
+
+function getZeroValueLineCoords({ x, y, direction, areAllNegative }: ZeroValueLineProps) {
+  if (direction === 'vertical') {
+    return {
+      x1: x,
+      x2: x,
+      y1: y,
+      y2: !areAllNegative ? y - ZERO_VALUE_LINE_HEIGHT : y + ZERO_VALUE_LINE_HEIGHT,
+    };
+  }
+
+  return {
+    x1: x,
+    x2: !areAllNegative ? x + ZERO_VALUE_LINE_HEIGHT : x - ZERO_VALUE_LINE_HEIGHT,
+    y1: y,
+    y2: y,
+  };
+}
+
+export function ZeroValueLine({ x, y, theme, direction = 'vertical', areAllNegative }: ZeroValueLineProps) {
+  const selectedTheme = useTheme(theme);
+
+  return (
+    <Fragment>
+      <line
+        stroke={selectedTheme.bar.zeroValueColor}
+        strokeWidth="1"
+        {...getZeroValueLineCoords({ x, y, direction, areAllNegative })}
+      />
+    </Fragment>
+  );
+}

package/src/shared/charts/components/GPolarisViz/shared/ZeroValueLine/index.ts

@@ -0,0 +1 @@
+export { ZeroValueLine } from './ZeroValueLine';

package/src/shared/charts/components/GPolarisViz/shared/index.ts

@@ -0,0 +1,3 @@
+export { Bar } from './Bar';
+export { FunnelChartConnector } from './FunnelChartConnector';
+export { FunnelChartSegment } from './FunnelChartSegment';

package/src/shared/charts/components/GPolarisViz/styles/_common.scss

@@ -0,0 +1,15 @@
+// stylelint-disable scss/partial-no-import
+@import './shared/variables';
+@import './shared/accessibility';
+@import './shared/chart-container';
+
+@mixin ellipsis-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin print-color {
+  -webkit-print-color-adjust: exact; /* stylelint-disable-line property-no-vendor-prefix */
+  print-color-adjust: exact; /* stylelint-disable-line property-no-unknown */
+}

package/src/shared/charts/components/GPolarisViz/styles/shared/_accessibility.scss

@@ -0,0 +1,41 @@
+@mixin visually-hidden {
+  // Importants are required to ensure component is available to screenreaders as expected
+  // stylelint-disable declaration-no-important
+  position: absolute !important;
+  top: 0;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  overflow: hidden !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  opacity: 0;
+  // stylelint-enable declaration-no-important
+}
+
+@mixin no-outline {
+  outline: none;
+
+  &:focus,
+  &:focus-visible {
+    // stylelint-disable-next-line declaration-no-important
+    outline: none !important;
+  }
+}
+
+@mixin focus-outline {
+  &:focus,
+  &:focus-visible {
+    outline: 2px solid $color-blue-70;
+    outline-offset: 2px;
+  }
+}
+
+@mixin hidden-button {
+  border: 0;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  font-size: 0;
+  display: block;
+}

package/src/shared/charts/components/GPolarisViz/styles/shared/_chart-container.scss

@@ -0,0 +1,8 @@
+@mixin chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  font-family: $font-stack-base;
+  font-size: 12px;
+}

package/src/shared/charts/components/GPolarisViz/styles/shared/_variables.scss

@@ -0,0 +1,322 @@
+$duration-slow: 300;
+
+$color-white: rgb(255, 255, 255);
+$color-black: rgb(0, 0, 0);
+$color-purple-dark: rgb(80, 36, 143);
+
+// Colors are named non-sequencial numbers
+// so it matches the UX Color Matrix
+// stylelint-disable color-no-hex
+$color-dark-comparison: rgba(144, 176, 223, 0.8);
+$color-light-comparison: rgba(103, 147, 204, 1);
+
+$color-gray-00: #ffffff;
+$color-gray-10: #f6f6f7;
+$color-gray-20: #eeeeef;
+$color-gray-30: #dadadd;
+$color-gray-40: #cbcbcf;
+$color-gray-50: #bdbdc2;
+$color-gray-60: #b0b0b6;
+$color-gray-70: #9d9da5;
+$color-gray-80: #909099;
+$color-gray-90: #82828c;
+$color-gray-100: #70707b;
+$color-gray-110: #5e5e69;
+$color-gray-120: #545460;
+$color-gray-130: #4b4b57;
+$color-gray-140: #43434e;
+$color-gray-150: #2e2e36;
+$color-gray-160: #1f1f25;
+
+$color-indigo-00: #f7f5ff;
+$color-indigo-10: #efecff;
+$color-indigo-20: #e4deff;
+$color-indigo-30: #d4cbff;
+$color-indigo-40: #c5b7fe;
+$color-indigo-50: #b6a3fe;
+$color-indigo-60: #a78ffd;
+$color-indigo-70: #997afc;
+$color-indigo-80: #8c63fb;
+$color-indigo-90: #7f4afa;
+$color-indigo-100: #7329f9;
+$color-indigo-110: #6511e2;
+$color-indigo-120: #540dbf;
+$color-indigo-130: #44089e;
+$color-indigo-140: #34057d;
+$color-indigo-150: #25035e;
+$color-indigo-160: #16013e;
+
+$color-blue-00: #f3f7ff;
+$color-blue-10: #e6eefe;
+$color-blue-20: #d6e3fd;
+$color-blue-30: #bdd2fb;
+$color-blue-40: #a3c2f7;
+$color-blue-50: #88b1f2;
+$color-blue-60: #6ba2ec;
+$color-blue-70: #4b92e5;
+$color-blue-80: #4282cd;
+$color-blue-90: #3672bb;
+$color-blue-100: #2b62a9;
+$color-blue-110: #215297;
+$color-blue-120: #174385;
+$color-blue-130: #0e3572;
+$color-blue-140: #06275f;
+$color-blue-150: #021a4c;
+$color-blue-160: #000d36;
+
+$color-teal-00: #f0f8fb;
+$color-teal-10: #e0f1f8;
+$color-teal-20: #c8e7f4;
+$color-teal-30: #9edaef;
+$color-teal-40: #79cce5;
+$color-teal-50: #69bbd3;
+$color-teal-60: #5baac1;
+$color-teal-70: #4c9aaf;
+$color-teal-80: #3f899e;
+$color-teal-90: #33798c;
+$color-teal-100: #286a7b;
+$color-teal-110: #1d5a69;
+$color-teal-120: #144b59;
+$color-teal-130: #0b3d48;
+$color-teal-140: #042f38;
+$color-teal-150: #012129;
+$color-teal-160: #001419;
+
+$color-magenta-00: #fcf4fa;
+$color-magenta-10: #f9e9f5;
+$color-magenta-20: #f5dbef;
+$color-magenta-30: #f0c4e6;
+$color-magenta-40: #eaaedd;
+$color-magenta-50: #e596d4;
+$color-magenta-60: #e07dcc;
+$color-magenta-70: #da62c4;
+$color-magenta-80: #c654b1;
+$color-magenta-90: #b1489e;
+$color-magenta-100: #9c3c8b;
+$color-magenta-110: #873178;
+$color-magenta-120: #722665;
+$color-magenta-130: #5e1c53;
+$color-magenta-140: #4a1341;
+$color-magenta-150: #370b30;
+$color-magenta-160: #23041e;
+
+$color-purple-00: #f9f5ff;
+$color-purple-10: #f3eafe;
+$color-purple-20: #ebdcfd;
+$color-purple-30: #e0c8fa;
+$color-purple-40: #d4b3f6;
+$color-purple-50: #c89ef1;
+$color-purple-60: #bd8aea;
+$color-purple-70: #b176e2;
+$color-purple-80: #a85de0;
+$color-purple-90: #9f41dc;
+$color-purple-100: #8c35c4;
+$color-purple-110: #7a29ab;
+$color-purple-120: #671e93;
+$color-purple-130: #55147a;
+$color-purple-140: #430b62;
+$color-purple-150: #32054a;
+$color-purple-160: #200132;
+
+$color-orange-00: #fcf5f3;
+$color-orange-10: #f9ebe6;
+$color-orange-20: #f5ddd4;
+$color-orange-30: #f1c9b8;
+$color-orange-40: #eeb498;
+$color-orange-50: #ec9d71;
+$color-orange-60: #df8b55;
+$color-orange-70: #ca7d4a;
+$color-orange-80: #b66e3f;
+$color-orange-90: #a26134;
+$color-orange-100: #8e532a;
+$color-orange-110: #7a4621;
+$color-orange-120: #673a17;
+$color-orange-130: #552d0d;
+$color-orange-140: #432205;
+$color-orange-150: #311701;
+$color-orange-160: #1f0c00;
+
+$color-yellow-00: #fff6df;
+$color-yellow-10: #fcedc2;
+$color-yellow-20: #fae275;
+$color-yellow-30: #e6d25f;
+$color-yellow-40: #d1c256;
+$color-yellow-50: #bdb24e;
+$color-yellow-60: #aaa246;
+$color-yellow-70: #97933e;
+$color-yellow-80: #858337;
+$color-yellow-90: #74742c;
+$color-yellow-100: #636522;
+$color-yellow-110: #535718;
+$color-yellow-120: #444810;
+$color-yellow-130: #363a08;
+$color-yellow-140: #2a2d03;
+$color-yellow-150: #1d1f01;
+$color-yellow-160: #111200;
+
+// stylelint-disable value-keyword-case
+$font-stack-base:
+  Inter,
+  -apple-system,
+  'system-ui',
+  'San Francisco',
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  sans-serif;
+// stylelint-enable value-keyword-case
+
+// stylelint-disable selector-pseudo-class-no-unknown
+// stylelint-disable property-no-unknown
+
+:export {
+  colorWhite: $color-white;
+  colorBlack: $color-black;
+
+  colorDarkComparison: $color-dark-comparison;
+  colorLightComparison: $color-light-comparison;
+
+  colorGray00: $color-gray-00;
+  colorGray10: $color-gray-10;
+  colorGray20: $color-gray-20;
+  colorGray30: $color-gray-30;
+  colorGray40: $color-gray-40;
+  colorGray50: $color-gray-50;
+  colorGray60: $color-gray-60;
+  colorGray70: $color-gray-70;
+  colorGray80: $color-gray-80;
+  colorGray90: $color-gray-90;
+  colorGray100: $color-gray-100;
+  colorGray110: $color-gray-110;
+  colorGray120: $color-gray-120;
+  colorGray130: $color-gray-130;
+  colorGray140: $color-gray-140;
+  colorGray150: $color-gray-150;
+  colorGray160: $color-gray-160;
+
+  colorIndigo00: $color-indigo-00;
+  colorIndigo10: $color-indigo-10;
+  colorIndigo20: $color-indigo-20;
+  colorIndigo30: $color-indigo-30;
+  colorIndigo40: $color-indigo-40;
+  colorIndigo50: $color-indigo-50;
+  colorIndigo60: $color-indigo-60;
+  colorIndigo70: $color-indigo-70;
+  colorIndigo80: $color-indigo-80;
+  colorIndigo90: $color-indigo-90;
+  colorIndigo100: $color-indigo-100;
+  colorIndigo110: $color-indigo-110;
+  colorIndigo120: $color-indigo-120;
+  colorIndigo130: $color-indigo-130;
+  colorIndigo140: $color-indigo-140;
+  colorIndigo150: $color-indigo-150;
+  colorIndigo160: $color-indigo-160;
+
+  colorBlue00: $color-blue-00;
+  colorBlue10: $color-blue-10;
+  colorBlue20: $color-blue-20;
+  colorBlue30: $color-blue-30;
+  colorBlue40: $color-blue-40;
+  colorBlue50: $color-blue-50;
+  colorBlue60: $color-blue-60;
+  colorBlue70: $color-blue-70;
+  colorBlue80: $color-blue-80;
+  colorBlue90: $color-blue-90;
+  colorBlue100: $color-blue-100;
+  colorBlue110: $color-blue-110;
+  colorBlue120: $color-blue-120;
+  colorBlue130: $color-blue-130;
+  colorBlue140: $color-blue-140;
+  colorBlue150: $color-blue-150;
+  colorBlue160: $color-blue-160;
+
+  colorTeal00: $color-teal-00;
+  colorTeal10: $color-teal-10;
+  colorTeal20: $color-teal-20;
+  colorTeal30: $color-teal-30;
+  colorTeal40: $color-teal-40;
+  colorTeal50: $color-teal-50;
+  colorTeal60: $color-teal-60;
+  colorTeal70: $color-teal-70;
+  colorTeal80: $color-teal-80;
+  colorTeal90: $color-teal-90;
+  colorTeal100: $color-teal-100;
+  colorTeal110: $color-teal-110;
+  colorTeal120: $color-teal-120;
+  colorTeal130: $color-teal-130;
+  colorTeal140: $color-teal-140;
+  colorTeal150: $color-teal-150;
+  colorTeal160: $color-teal-160;
+
+  colorMagenta00: $color-magenta-00;
+  colorMagenta10: $color-magenta-10;
+  colorMagenta20: $color-magenta-20;
+  colorMagenta30: $color-magenta-30;
+  colorMagenta40: $color-magenta-40;
+  colorMagenta50: $color-magenta-50;
+  colorMagenta60: $color-magenta-60;
+  colorMagenta70: $color-magenta-70;
+  colorMagenta80: $color-magenta-80;
+  colorMagenta90: $color-magenta-90;
+  colorMagenta100: $color-magenta-100;
+  colorMagenta110: $color-magenta-110;
+  colorMagenta120: $color-magenta-120;
+  colorMagenta130: $color-magenta-130;
+  colorMagenta140: $color-magenta-140;
+  colorMagenta150: $color-magenta-150;
+  colorMagenta160: $color-magenta-160;
+
+  colorPurple00: $color-purple-00;
+  colorPurple10: $color-purple-10;
+  colorPurple20: $color-purple-20;
+  colorPurple30: $color-purple-30;
+  colorPurple40: $color-purple-40;
+  colorPurple50: $color-purple-50;
+  colorPurple60: $color-purple-60;
+  colorPurple70: $color-purple-70;
+  colorPurple80: $color-purple-80;
+  colorPurple90: $color-purple-90;
+  colorPurple100: $color-purple-100;
+  colorPurple110: $color-purple-110;
+  colorPurple120: $color-purple-120;
+  colorPurple130: $color-purple-130;
+  colorPurple140: $color-purple-140;
+  colorPurple150: $color-purple-150;
+  colorPurple160: $color-purple-160;
+
+  colorOrange00: $color-orange-00;
+  colorOrange10: $color-orange-10;
+  colorOrange20: $color-orange-20;
+  colorOrange30: $color-orange-30;
+  colorOrange40: $color-orange-40;
+  colorOrange50: $color-orange-50;
+  colorOrange60: $color-orange-60;
+  colorOrange70: $color-orange-70;
+  colorOrange80: $color-orange-80;
+  colorOrange90: $color-orange-90;
+  colorOrange100: $color-orange-100;
+  colorOrange110: $color-orange-110;
+  colorOrange120: $color-orange-120;
+  colorOrange130: $color-orange-130;
+  colorOrange140: $color-orange-140;
+  colorOrange150: $color-orange-150;
+  colorOrange160: $color-orange-160;
+
+  colorYellow00: $color-yellow-00;
+  colorYellow10: $color-yellow-10;
+  colorYellow20: $color-yellow-20;
+  colorYellow30: $color-yellow-30;
+  colorYellow40: $color-yellow-40;
+  colorYellow50: $color-yellow-50;
+  colorYellow60: $color-yellow-60;
+  colorYellow70: $color-yellow-70;
+  colorYellow80: $color-yellow-80;
+  colorYellow90: $color-yellow-90;
+  colorYellow100: $color-yellow-100;
+  colorYellow110: $color-yellow-110;
+  colorYellow120: $color-yellow-120;
+  colorYellow130: $color-yellow-130;
+  colorYellow140: $color-yellow-140;
+  colorYellow150: $color-yellow-150;
+  colorYellow160: $color-yellow-160;
+}