@levi-gemcommerce/analytics 3.0.1-dev.3 → 3.0.1-dev.4

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

@@ -1,218 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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

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

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

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

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

@@ -1,15 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-@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

@@ -1,322 +0,0 @@
-$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;
-}