@gitlab/ui 64.16.0 → 64.18.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [64.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.17.0...v64.18.0) (2023-07-04)
+
+
+### Features
+
+* Add border-gray-10 to mixins ([a02780c](https://gitlab.com/gitlab-org/gitlab-ui/commit/a02780c969c40aa82c8a29517a2df776c40e6e17))
+
+# [64.17.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.16.0...v64.17.0) (2023-06-30)
+
+
+### Features
+
+* **Tokens:** add initial color design tokens ([c4f43f5](https://gitlab.com/gitlab-org/gitlab-ui/commit/c4f43f55e7c548233a9d6622115f525187b98601))
+
 # [64.16.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.15.0...v64.16.0) (2023-06-29)
 
 

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -8,8 +9,6 @@ import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const gray200 = '#bfbfc3';
-
 var script = {
   name: 'GlDiscreteScatterChart',
   components: {
@@ -97,7 +96,7 @@ var script = {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: gray200
+              color: GRAY_200
             }
           },
           axisLabel: {

package/dist/components/charts/heatmap/heatmap.js

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import { GRAY_100, WHITE } from '../../../../dist/tokens/js/tokens';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -10,9 +11,6 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const white = '#fff';
-const gray100 = '#dcdcde';
-
 //
 const defaultOptions = {
   visualMap: {
@@ -139,7 +137,7 @@ var script = {
           right: '32px',
           show: true,
           borderWidth: 0,
-          backgroundColor: gray100
+          backgroundColor: GRAY_100
         },
         visualMap: {
           min,
@@ -163,7 +161,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: white,
+              color: WHITE,
               width: 2
             }
           },
@@ -190,7 +188,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: white,
+              color: WHITE,
               width: 2
             }
           }

package/dist/components/charts/legend/legend.js

@@ -1,4 +1,5 @@
 import * as echarts from 'echarts';
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { engineeringNotation, average } from '../../../utils/number_utils';
@@ -6,8 +7,6 @@ import GlTruncate from '../../utilities/truncate/truncate';
 import GlChartSeriesLabel from '../series_label/series_label';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const gray200 = '#bfbfc3';
-
 //
 var script = {
   name: 'GlChartLegend',
@@ -148,7 +147,7 @@ var script = {
       });
     },
     getColor(color, key) {
-      return this.disabledSeries[key] ? gray200 : color;
+      return this.disabledSeries[key] ? GRAY_200 : color;
     },
     suppressLastActiveSeriesLabelToggle(_ref2) {
       let {

package/dist/components/charts/line/line.js

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
@@ -10,8 +11,6 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const gray200 = '#bfbfc3';
-
 //
 var script = {
   name: 'GlLineChart',
@@ -160,7 +159,7 @@ var script = {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: gray200
+              color: GRAY_200
             }
           }
         },

package/dist/tokens/css/tokens.css

@@ -0,0 +1,142 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ */
+
+:root {
+  --brand-gray-05: #2b2838;
+  --brand-gray-04: #45424d;
+  --brand-gray-03: #74717a;
+  --brand-gray-02: #a2a1a6;
+  --brand-gray-01: #d1d0d3;
+  --brand-purple-02: #7759c2;
+  --brand-purple-01: #a989f5;
+  --brand-orange-03: #e24329;
+  --brand-orange-02: #fc6d26;
+  --brand-orange-01: #fca326;
+  --brand-charcoal: #171321;
+  --data-viz-orange-950: #4b2707;
+  --data-viz-orange-900: #5e2f05;
+  --data-viz-orange-800: #6f3500;
+  --data-viz-orange-700: #92430a;
+  --data-viz-orange-600: #b14f18;
+  --data-viz-orange-500: #c95d2e;
+  --data-viz-orange-400: #e07e41;
+  --data-viz-orange-300: #e99b60;
+  --data-viz-orange-200: #eebd8c;
+  --data-viz-orange-100: #f5d6b3;
+  --data-viz-orange-50: #fae8d1;
+  --data-viz-magenta-950: #541d31;
+  --data-viz-magenta-900: #661e3a;
+  --data-viz-magenta-800: #7c214f;
+  --data-viz-magenta-700: #9a2e5d;
+  --data-viz-magenta-600: #b93d71;
+  --data-viz-magenta-500: #cf4d81;
+  --data-viz-magenta-400: #e86e9a;
+  --data-viz-magenta-300: #f88aaf;
+  --data-viz-magenta-200: #fcacc5;
+  --data-viz-magenta-100: #ffccdb;
+  --data-viz-magenta-50: #ffe3eb;
+  --data-viz-blue-950: #2a2b59;
+  --data-viz-blue-900: #303470;
+  --data-viz-blue-800: #374291;
+  --data-viz-blue-700: #3f51ae;
+  --data-viz-blue-600: #4e65cd;
+  --data-viz-blue-500: #617ae2;
+  --data-viz-blue-400: #7992f5;
+  --data-viz-blue-300: #97acff;
+  --data-viz-blue-200: #b7c6ff;
+  --data-viz-blue-100: #d2dcff;
+  --data-viz-blue-50: #e9ebff;
+  --data-viz-aqua-950: #00344b;
+  --data-viz-aqua-900: #004059;
+  --data-viz-aqua-800: #00516c;
+  --data-viz-aqua-700: #006381;
+  --data-viz-aqua-600: #007b9b;
+  --data-viz-aqua-500: #0090b1;
+  --data-viz-aqua-400: #00acc4;
+  --data-viz-aqua-300: #32c5d2;
+  --data-viz-aqua-200: #5edee3;
+  --data-viz-aqua-100: #93f2ef;
+  --data-viz-aqua-50: #b5fefd;
+  --data-viz-green-950: #133a03;
+  --data-viz-green-900: #1a4500;
+  --data-viz-green-800: #275600;
+  --data-viz-green-700: #366800;
+  --data-viz-green-600: #4e7f0e;
+  --data-viz-green-500: #619025;
+  --data-viz-green-400: #81ac41;
+  --data-viz-green-300: #94c25e;
+  --data-viz-green-200: #b0d97b;
+  --data-viz-green-100: #c6ed94;
+  --data-viz-green-50: #ddfab7;
+  --red-950: #4d0a00;
+  --red-900: #660e00;
+  --red-800: #8d1300;
+  --red-700: #ae1800;
+  --red-600: #c91c00;
+  --red-500: #dd2b0e;
+  --red-400: #ec5941;
+  --red-300: #f57f6c;
+  --red-200: #fcb5aa;
+  --red-100: #fdd4cd;
+  --red-50: #fcf1ef;
+  --purple-950: #232150;
+  --purple-900: #2f2a6b;
+  --purple-800: #453894;
+  --purple-700: #5943b6;
+  --purple-600: #694cc0;
+  --purple-500: #7b58cf;
+  --purple-400: #9475db;
+  --purple-300: #ac93e6;
+  --purple-200: #cbbbf2;
+  --purple-100: #e1d8f9;
+  --purple-50: #f4f0ff;
+  --orange-950: #421f00;
+  --orange-900: #5c2900;
+  --orange-800: #703800;
+  --orange-700: #8f4700;
+  --orange-600: #9e5400;
+  --orange-500: #ab6100;
+  --orange-400: #c17d10;
+  --orange-300: #d99530;
+  --orange-200: #e9be74;
+  --orange-100: #f5d9a8;
+  --orange-50: #fdf1dd;
+  --green-950: #072b15;
+  --green-900: #0a4020;
+  --green-800: #0d532a;
+  --green-700: #24663b;
+  --green-600: #217645;
+  --green-500: #108548;
+  --green-400: #2da160;
+  --green-300: #52b87a;
+  --green-200: #91d4a8;
+  --green-100: #c3e6cd;
+  --green-50: #ecf4ee;
+  --gray-950: #1f1e24;
+  --gray-900: #333238;
+  --gray-800: #434248;
+  --gray-700: #535158;
+  --gray-600: #626168;
+  --gray-500: #737278;
+  --gray-400: #89888d;
+  --gray-300: #a4a3a8;
+  --gray-200: #bfbfc3;
+  --gray-100: #dcdcde;
+  --gray-50: #ececef;
+  --gray-10: #fbfafd;
+  --blue-950: #002850;
+  --blue-900: #033464;
+  --blue-800: #064787;
+  --blue-700: #0b5cad;
+  --blue-600: #1068bf;
+  --blue-500: #1f75cb;
+  --blue-400: #428fdc;
+  --blue-300: #63a6e9;
+  --blue-200: #9dc7f1;
+  --blue-100: #cbe2f9;
+  --blue-50: #e9f3fc;
+  --white: #fff;
+  --black: #000;
+}

package/dist/tokens/css/tokens.dark.css

@@ -0,0 +1,76 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ */
+
+:root {
+  --red-950: #fff4f3;
+  --red-900: #fcf1ef;
+  --red-800: #fdd4cd;
+  --red-700: #fcb5aa;
+  --red-600: #f57f6c;
+  --red-500: #ec5941;
+  --red-400: #dd2b0e;
+  --red-300: #c91c00;
+  --red-200: #ae1800;
+  --red-100: #8d1300;
+  --red-50: #660e00;
+  --purple-950: #f4f0ff;
+  --purple-900: #e1d8f9;
+  --purple-800: #cbbbf2;
+  --purple-700: #ac93e6;
+  --purple-600: #9475db;
+  --purple-500: #7b58cf;
+  --purple-400: #694cc0;
+  --purple-300: #5943b6;
+  --purple-200: #453894;
+  --purple-100: #2f2a6b;
+  --purple-50: #232150;
+  --orange-950: #fff4e1;
+  --orange-900: #fdf1dd;
+  --orange-800: #f5d9a8;
+  --orange-700: #e9be74;
+  --orange-600: #d99530;
+  --orange-500: #c17d10;
+  --orange-400: #ab6100;
+  --orange-300: #9e5400;
+  --orange-200: #8f4700;
+  --orange-100: #703800;
+  --orange-50: #5c2900;
+  --green-950: #f1fdf6;
+  --green-900: #ecf4ee;
+  --green-800: #c3e6cd;
+  --green-700: #91d4a8;
+  --green-600: #52b87a;
+  --green-500: #2da160;
+  --green-400: #108548;
+  --green-300: #217645;
+  --green-200: #24663b;
+  --green-100: #0d532a;
+  --green-50: #0a4020;
+  --gray-950: #fbfafd;
+  --gray-900: #ececef;
+  --gray-800: #dcdcde;
+  --gray-700: #bfbfc3;
+  --gray-600: #a4a3a8;
+  --gray-500: #89888d;
+  --gray-400: #737278;
+  --gray-300: #626168;
+  --gray-200: #535158;
+  --gray-100: #434248;
+  --gray-50: #333238;
+  --gray-10: #1f1e24;
+  --blue-950: #f2f9ff;
+  --blue-900: #e9f3fc;
+  --blue-800: #cbe2f9;
+  --blue-700: #9dc7f1;
+  --blue-600: #63a6e9;
+  --blue-500: #428fdc;
+  --blue-400: #1f75cb;
+  --blue-300: #1068bf;
+  --blue-200: #0b5cad;
+  --blue-100: #064787;
+  --blue-50: #033464;
+  --black: #fff;
+  --white: var(--gray-50);
+}

package/dist/tokens/js/tokens.dark.js

@@ -0,0 +1,74 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ */
+
+export const BLACK = "#fff";
+export const WHITE = "#333238";
+export const BLUE_50 = "#033464";
+export const BLUE_100 = "#064787";
+export const BLUE_200 = "#0b5cad";
+export const BLUE_300 = "#1068bf";
+export const BLUE_400 = "#1f75cb";
+export const BLUE_500 = "#428fdc";
+export const BLUE_600 = "#63a6e9";
+export const BLUE_700 = "#9dc7f1";
+export const BLUE_800 = "#cbe2f9";
+export const BLUE_900 = "#e9f3fc";
+export const BLUE_950 = "#f2f9ff";
+export const GRAY_10 = "#1f1e24";
+export const GRAY_50 = "#333238";
+export const GRAY_100 = "#434248";
+export const GRAY_200 = "#535158";
+export const GRAY_300 = "#626168";
+export const GRAY_400 = "#737278";
+export const GRAY_500 = "#89888d";
+export const GRAY_600 = "#a4a3a8";
+export const GRAY_700 = "#bfbfc3";
+export const GRAY_800 = "#dcdcde";
+export const GRAY_900 = "#ececef";
+export const GRAY_950 = "#fbfafd";
+export const GREEN_50 = "#0a4020";
+export const GREEN_100 = "#0d532a";
+export const GREEN_200 = "#24663b";
+export const GREEN_300 = "#217645";
+export const GREEN_400 = "#108548";
+export const GREEN_500 = "#2da160";
+export const GREEN_600 = "#52b87a";
+export const GREEN_700 = "#91d4a8";
+export const GREEN_800 = "#c3e6cd";
+export const GREEN_900 = "#ecf4ee";
+export const GREEN_950 = "#f1fdf6";
+export const ORANGE_50 = "#5c2900";
+export const ORANGE_100 = "#703800";
+export const ORANGE_200 = "#8f4700";
+export const ORANGE_300 = "#9e5400";
+export const ORANGE_400 = "#ab6100";
+export const ORANGE_500 = "#c17d10";
+export const ORANGE_600 = "#d99530";
+export const ORANGE_700 = "#e9be74";
+export const ORANGE_800 = "#f5d9a8";
+export const ORANGE_900 = "#fdf1dd";
+export const ORANGE_950 = "#fff4e1";
+export const PURPLE_50 = "#232150";
+export const PURPLE_100 = "#2f2a6b";
+export const PURPLE_200 = "#453894";
+export const PURPLE_300 = "#5943b6";
+export const PURPLE_400 = "#694cc0";
+export const PURPLE_500 = "#7b58cf";
+export const PURPLE_600 = "#9475db";
+export const PURPLE_700 = "#ac93e6";
+export const PURPLE_800 = "#cbbbf2";
+export const PURPLE_900 = "#e1d8f9";
+export const PURPLE_950 = "#f4f0ff";
+export const RED_50 = "#660e00";
+export const RED_100 = "#8d1300";
+export const RED_200 = "#ae1800";
+export const RED_300 = "#c91c00";
+export const RED_400 = "#dd2b0e";
+export const RED_500 = "#ec5941";
+export const RED_600 = "#f57f6c";
+export const RED_700 = "#fcb5aa";
+export const RED_800 = "#fdd4cd";
+export const RED_900 = "#fcf1ef";
+export const RED_950 = "#fff4f3";

package/dist/tokens/js/tokens.js

@@ -0,0 +1,140 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ */
+
+export const BLACK = "#000";
+export const WHITE = "#fff";
+export const BLUE_50 = "#e9f3fc";
+export const BLUE_100 = "#cbe2f9";
+export const BLUE_200 = "#9dc7f1";
+export const BLUE_300 = "#63a6e9";
+export const BLUE_400 = "#428fdc";
+export const BLUE_500 = "#1f75cb";
+export const BLUE_600 = "#1068bf";
+export const BLUE_700 = "#0b5cad";
+export const BLUE_800 = "#064787";
+export const BLUE_900 = "#033464";
+export const BLUE_950 = "#002850";
+export const GRAY_10 = "#fbfafd";
+export const GRAY_50 = "#ececef";
+export const GRAY_100 = "#dcdcde";
+export const GRAY_200 = "#bfbfc3";
+export const GRAY_300 = "#a4a3a8";
+export const GRAY_400 = "#89888d";
+export const GRAY_500 = "#737278";
+export const GRAY_600 = "#626168";
+export const GRAY_700 = "#535158";
+export const GRAY_800 = "#434248";
+export const GRAY_900 = "#333238";
+export const GRAY_950 = "#1f1e24";
+export const GREEN_50 = "#ecf4ee";
+export const GREEN_100 = "#c3e6cd";
+export const GREEN_200 = "#91d4a8";
+export const GREEN_300 = "#52b87a";
+export const GREEN_400 = "#2da160";
+export const GREEN_500 = "#108548";
+export const GREEN_600 = "#217645";
+export const GREEN_700 = "#24663b";
+export const GREEN_800 = "#0d532a";
+export const GREEN_900 = "#0a4020";
+export const GREEN_950 = "#072b15";
+export const ORANGE_50 = "#fdf1dd";
+export const ORANGE_100 = "#f5d9a8";
+export const ORANGE_200 = "#e9be74";
+export const ORANGE_300 = "#d99530";
+export const ORANGE_400 = "#c17d10";
+export const ORANGE_500 = "#ab6100";
+export const ORANGE_600 = "#9e5400";
+export const ORANGE_700 = "#8f4700";
+export const ORANGE_800 = "#703800";
+export const ORANGE_900 = "#5c2900";
+export const ORANGE_950 = "#421f00";
+export const PURPLE_50 = "#f4f0ff";
+export const PURPLE_100 = "#e1d8f9";
+export const PURPLE_200 = "#cbbbf2";
+export const PURPLE_300 = "#ac93e6";
+export const PURPLE_400 = "#9475db";
+export const PURPLE_500 = "#7b58cf";
+export const PURPLE_600 = "#694cc0";
+export const PURPLE_700 = "#5943b6";
+export const PURPLE_800 = "#453894";
+export const PURPLE_900 = "#2f2a6b";
+export const PURPLE_950 = "#232150";
+export const RED_50 = "#fcf1ef";
+export const RED_100 = "#fdd4cd";
+export const RED_200 = "#fcb5aa";
+export const RED_300 = "#f57f6c";
+export const RED_400 = "#ec5941";
+export const RED_500 = "#dd2b0e";
+export const RED_600 = "#c91c00";
+export const RED_700 = "#ae1800";
+export const RED_800 = "#8d1300";
+export const RED_900 = "#660e00";
+export const RED_950 = "#4d0a00";
+export const DATA_VIZ_GREEN_50 = "#ddfab7";
+export const DATA_VIZ_GREEN_100 = "#c6ed94";
+export const DATA_VIZ_GREEN_200 = "#b0d97b";
+export const DATA_VIZ_GREEN_300 = "#94c25e";
+export const DATA_VIZ_GREEN_400 = "#81ac41";
+export const DATA_VIZ_GREEN_500 = "#619025";
+export const DATA_VIZ_GREEN_600 = "#4e7f0e";
+export const DATA_VIZ_GREEN_700 = "#366800";
+export const DATA_VIZ_GREEN_800 = "#275600";
+export const DATA_VIZ_GREEN_900 = "#1a4500";
+export const DATA_VIZ_GREEN_950 = "#133a03";
+export const DATA_VIZ_AQUA_50 = "#b5fefd";
+export const DATA_VIZ_AQUA_100 = "#93f2ef";
+export const DATA_VIZ_AQUA_200 = "#5edee3";
+export const DATA_VIZ_AQUA_300 = "#32c5d2";
+export const DATA_VIZ_AQUA_400 = "#00acc4";
+export const DATA_VIZ_AQUA_500 = "#0090b1";
+export const DATA_VIZ_AQUA_600 = "#007b9b";
+export const DATA_VIZ_AQUA_700 = "#006381";
+export const DATA_VIZ_AQUA_800 = "#00516c";
+export const DATA_VIZ_AQUA_900 = "#004059";
+export const DATA_VIZ_AQUA_950 = "#00344b";
+export const DATA_VIZ_BLUE_50 = "#e9ebff";
+export const DATA_VIZ_BLUE_100 = "#d2dcff";
+export const DATA_VIZ_BLUE_200 = "#b7c6ff";
+export const DATA_VIZ_BLUE_300 = "#97acff";
+export const DATA_VIZ_BLUE_400 = "#7992f5";
+export const DATA_VIZ_BLUE_500 = "#617ae2";
+export const DATA_VIZ_BLUE_600 = "#4e65cd";
+export const DATA_VIZ_BLUE_700 = "#3f51ae";
+export const DATA_VIZ_BLUE_800 = "#374291";
+export const DATA_VIZ_BLUE_900 = "#303470";
+export const DATA_VIZ_BLUE_950 = "#2a2b59";
+export const DATA_VIZ_MAGENTA_50 = "#ffe3eb";
+export const DATA_VIZ_MAGENTA_100 = "#ffccdb";
+export const DATA_VIZ_MAGENTA_200 = "#fcacc5";
+export const DATA_VIZ_MAGENTA_300 = "#f88aaf";
+export const DATA_VIZ_MAGENTA_400 = "#e86e9a";
+export const DATA_VIZ_MAGENTA_500 = "#cf4d81";
+export const DATA_VIZ_MAGENTA_600 = "#b93d71";
+export const DATA_VIZ_MAGENTA_700 = "#9a2e5d";
+export const DATA_VIZ_MAGENTA_800 = "#7c214f";
+export const DATA_VIZ_MAGENTA_900 = "#661e3a";
+export const DATA_VIZ_MAGENTA_950 = "#541d31";
+export const DATA_VIZ_ORANGE_50 = "#fae8d1";
+export const DATA_VIZ_ORANGE_100 = "#f5d6b3";
+export const DATA_VIZ_ORANGE_200 = "#eebd8c";
+export const DATA_VIZ_ORANGE_300 = "#e99b60";
+export const DATA_VIZ_ORANGE_400 = "#e07e41";
+export const DATA_VIZ_ORANGE_500 = "#c95d2e";
+export const DATA_VIZ_ORANGE_600 = "#b14f18";
+export const DATA_VIZ_ORANGE_700 = "#92430a";
+export const DATA_VIZ_ORANGE_800 = "#6f3500";
+export const DATA_VIZ_ORANGE_900 = "#5e2f05";
+export const DATA_VIZ_ORANGE_950 = "#4b2707";
+export const BRAND_CHARCOAL = "#171321";
+export const BRAND_ORANGE_01 = "#fca326";
+export const BRAND_ORANGE_02 = "#fc6d26";
+export const BRAND_ORANGE_03 = "#e24329";
+export const BRAND_PURPLE_01 = "#a989f5";
+export const BRAND_PURPLE_02 = "#7759c2";
+export const BRAND_GRAY_01 = "#d1d0d3";
+export const BRAND_GRAY_02 = "#a2a1a6";
+export const BRAND_GRAY_03 = "#74717a";
+export const BRAND_GRAY_04 = "#45424d";
+export const BRAND_GRAY_05 = "#2b2838";