@gitlab/ui 80.10.0 → 80.12.0

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -100,36 +100,6 @@ describe('base dropdown', () => {
         autoUpdate.mockImplementation(jest.requireActual('@floating-ui/dom').autoUpdate);
       });
 
-      it('initializes Floating UI with a default boundary', async () => {
-        document.body.innerHTML = '<main><div></div></main>';
-
-        buildWrapper(undefined, {
-          attachTo: document.querySelector('main div'),
-        });
-        await findDefaultDropdownToggle().trigger('click');
-
-        expect(computePosition).toHaveBeenCalledWith(
-          findDefaultDropdownToggle().element,
-          findDropdownMenu().element,
-          {
-            placement: 'bottom-start',
-            strategy: 'absolute',
-            middleware: [
-              offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
-              shift(),
-            ],
-          }
-        );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'start',
-          boundary: { x: 0, y: 0, width: 0, height: 0 },
-          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-        });
-
-        document.body.innerHTML = '';
-      });
-
       it('initializes Floating UI with reference and floating elements and config for left-aligned menu', async () => {
         buildWrapper();
         await findDefaultDropdownToggle().trigger('click');
@@ -142,16 +112,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: 'start',
+                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'start',
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for center-aligned menu', async () => {
@@ -166,16 +134,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: undefined,
+                allowedPlacements: ['bottom', 'top'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: undefined,
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['bottom', 'top'],
-        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for right-aligned menu', async () => {
@@ -190,16 +156,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: 'end',
+                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'end',
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for `right-start` aligned menu', async () => {
@@ -214,16 +178,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: 'start',
+                allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'start',
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
-        });
       });
 
       it("passes custom offset to Floating UI's middleware", async () => {
@@ -240,7 +202,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset), autoPlacement(expect.any(Function)), shift()],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Object)), shift()],
           }
         );
       });

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -9,7 +9,6 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
-  GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
@@ -21,12 +20,7 @@ import {
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
-import {
-  logWarning,
-  isElementTabbable,
-  isElementFocusable,
-  getHorizontalBoundingClientRect,
-} from '../../../../utils/utils';
+import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
@@ -276,15 +270,9 @@ export default {
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
-          autoPlacement(() => {
-            const autoHorizontalBoundary = getHorizontalBoundingClientRect(
-              this.$el.closest(GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR)
-            );
-            return {
-              alignment,
-              boundary: autoHorizontalBoundary || 'clippingAncestors',
-              allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
-            };
+          autoPlacement({
+            alignment,
+            allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
           }),
           shift(),
           size({

package/src/components/base/new_dropdowns/constants.js

@@ -1,5 +1,4 @@
 // base dropdown events
-export const GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR = 'main';
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -343,31 +343,3 @@ export default {
     startOpened: true,
   },
 };
-
-export const InMainWrapper = (args, { argTypes }) => ({
-  toggleId: TOGGLE_ID,
-  props: Object.keys(argTypes),
-  components: {
-    GlDisclosureDropdown,
-    GlTooltip,
-  },
-  template: `
-    <div>
-      ${template()}
-      <gl-tooltip :target="$options.toggleId" placement="right">
-        Automatic placement to stay inside &lt;main&gt; boundary
-      </gl-tooltip>
-    </div>
-  `,
-});
-InMainWrapper.args = {
-  items: mockItems,
-  icon: 'ellipsis_v',
-  noCaret: true,
-  toggleText: 'Disclosure',
-  textSrOnly: true,
-  toggleId: TOGGLE_ID,
-};
-InMainWrapper.decorators = [
-  makeContainer({ backgroundColor: '#efefef', textAlign: 'right', height: '200px' }, 'main'),
-];

package/src/components/charts/area/area.stories.js

@@ -2,7 +2,7 @@ import times from 'lodash/times';
 import { GlAreaChart } from '../../../charts';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
-import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../../dist/tokens/js/tokens';
+import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../tokens/build/js/tokens';
 import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
 import { disableControls } from '../../../utils/stories_utils';

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -1,6 +1,6 @@
 <script>
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import {
   defaultChartOptions,
   dataZoomAdjustments,

package/src/components/charts/heatmap/heatmap.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
-import { WHITE, GRAY_100 } from '../../../../dist/tokens/js/tokens';
+import { WHITE, GRAY_100 } from '../../../tokens/build/js/tokens';
 import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';

package/src/components/charts/legend/legend.stories.js

@@ -6,7 +6,7 @@ import {
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_constants';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import readme from './legend.md';
 
 const generateOptions = (seriesLength, seriesNameType) => {

package/src/components/charts/legend/legend.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,

package/src/components/charts/line/line.vue

@@ -19,7 +19,7 @@
  */
 
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import {
   defaultChartOptions,
   grid,

package/src/components/charts/stacked_column/stacked_column.stories.js

@@ -11,7 +11,7 @@ import {
   DATA_VIZ_AQUA_500,
   DATA_VIZ_GREEN_600,
   DATA_VIZ_MAGENTA_500,
-} from '../../../../dist/tokens/js/tokens';
+} from '../../../tokens/build/js/tokens';
 import readme from './stacked_column.md';
 
 const template = `

package/src/scss/tokens.scss

@@ -1,2 +1,2 @@
-@import '../../dist/tokens/css/tokens';
-@import '../../dist/tokens/css/tokens.dark';
+@import '../tokens/build/css/tokens';
+@import '../tokens/build/css/tokens.dark';

package/src/scss/variables.scss

@@ -1,5 +1,5 @@
 @import 'functions';
-@import '../../dist/tokens/scss/tokens';
+@import '../tokens/build/scss/tokens';
 
 // Layout
 $grid-size: px-to-rem(8px);

package/src/tokens/build/css/tokens.css

@@ -4,14 +4,6 @@
  */
 
 :root {
-  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
-  --gl-text-color-success: #217645; /* Used for text indicating success or validity. */
-  --gl-text-color-danger: #c91c00; /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
-  --gl-text-color-link: #0b5cad; /* Used for default text links. */
-  --gl-text-color-heading: #1f1e24; /* Used for headings level 1-6. */
-  --gl-text-color-strong: #1f1e24; /* Used for text with the highest contrast. */
-  --gl-text-color-subtle: #626168; /* Used for supplemental text that doesn't need to be as prominent as other text. */
-  --gl-text-color-default: #434248; /* Used for the default text color. */
   --gl-text-tertiary: #89888d; /* Use text.color.disabled instead */
   --gl-text-secondary: #737278; /* Use text.color.subtle instead */
   --gl-text-primary: #333238; /* Use text.color.default instead */
@@ -245,4 +237,81 @@
   --data-viz-green-200: #b0d97b;
   --data-viz-green-100: #c6ed94;
   --data-viz-green-50: #ddfab7;
+  --gl-color-red-950: #4d0a00;
+  --gl-color-red-900: #660e00;
+  --gl-color-red-800: #8d1300;
+  --gl-color-red-700: #ae1800;
+  --gl-color-red-600: #c91c00;
+  --gl-color-red-500: #dd2b0e;
+  --gl-color-red-400: #ec5941;
+  --gl-color-red-300: #f57f6c;
+  --gl-color-red-200: #fcb5aa;
+  --gl-color-red-100: #fdd4cd;
+  --gl-color-red-50: #fcf1ef;
+  --gl-color-purple-950: #232150;
+  --gl-color-purple-900: #2f2a6b;
+  --gl-color-purple-800: #453894;
+  --gl-color-purple-700: #5943b6;
+  --gl-color-purple-600: #694cc0;
+  --gl-color-purple-500: #7b58cf;
+  --gl-color-purple-400: #9475db;
+  --gl-color-purple-300: #ac93e6;
+  --gl-color-purple-200: #cbbbf2;
+  --gl-color-purple-100: #e1d8f9;
+  --gl-color-purple-50: #f4f0ff;
+  --gl-color-orange-950: #421f00;
+  --gl-color-orange-900: #5c2900;
+  --gl-color-orange-800: #703800;
+  --gl-color-orange-700: #8f4700;
+  --gl-color-orange-600: #9e5400;
+  --gl-color-orange-500: #ab6100;
+  --gl-color-orange-400: #c17d10;
+  --gl-color-orange-300: #d99530;
+  --gl-color-orange-200: #e9be74;
+  --gl-color-orange-100: #f5d9a8;
+  --gl-color-orange-50: #fdf1dd;
+  --gl-color-green-950: #072b15;
+  --gl-color-green-900: #0a4020;
+  --gl-color-green-800: #0d532a;
+  --gl-color-green-700: #24663b;
+  --gl-color-green-600: #217645;
+  --gl-color-green-500: #108548;
+  --gl-color-green-400: #2da160;
+  --gl-color-green-300: #52b87a;
+  --gl-color-green-200: #91d4a8;
+  --gl-color-green-100: #c3e6cd;
+  --gl-color-green-50: #ecf4ee;
+  --gl-color-neutral-1000: #000;
+  --gl-color-neutral-950: #1f1e24;
+  --gl-color-neutral-900: #333238;
+  --gl-color-neutral-800: #434248;
+  --gl-color-neutral-700: #535158;
+  --gl-color-neutral-600: #626168;
+  --gl-color-neutral-500: #737278;
+  --gl-color-neutral-400: #89888d;
+  --gl-color-neutral-300: #a4a3a8;
+  --gl-color-neutral-200: #bfbfc3;
+  --gl-color-neutral-100: #dcdcde;
+  --gl-color-neutral-50: #ececef;
+  --gl-color-neutral-10: #fbfafd;
+  --gl-color-neutral-0: #fff;
+  --gl-color-blue-950: #002850;
+  --gl-color-blue-900: #033464;
+  --gl-color-blue-800: #064787;
+  --gl-color-blue-700: #0b5cad;
+  --gl-color-blue-600: #1068bf;
+  --gl-color-blue-500: #1f75cb;
+  --gl-color-blue-400: #428fdc;
+  --gl-color-blue-300: #63a6e9;
+  --gl-color-blue-200: #9dc7f1;
+  --gl-color-blue-100: #cbe2f9;
+  --gl-color-blue-50: #e9f3fc;
+  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
+  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
+  --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
+  --gl-text-color-link: var(--gl-color-blue-700); /* Used for default text links. */
+  --gl-text-color-heading: var(--gl-color-neutral-950); /* Used for headings level 1-6. */
+  --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: var(--gl-color-neutral-600); /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: var(--gl-color-neutral-800); /* Used for the default text color. */
 }

package/src/tokens/build/css/tokens.dark.css

@@ -4,15 +4,43 @@
  */
 
 :root.gl-dark {
-  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
-  --gl-text-color-link: #63a6e9; /* Used for default text links. */
-  --gl-text-color-heading: #fff; /* Used for headings level 1-6. */
-  --gl-text-color-strong: #fff; /* Used for text with the highest contrast. */
-  --gl-text-color-subtle: #bfbfc3; /* Used for supplemental text that doesn't need to be as prominent as other text. */
-  --gl-text-color-default: #ececef; /* Used for the default text color. */
   --gl-text-tertiary: #737278; /* Use text.color.disabled instead */
   --gl-text-secondary: #89888d; /* Use text.color.subtle instead */
   --gl-text-primary: #ececef; /* Use text.color.default instead */
+  --gl-line-height-52: 3.25rem;
+  --gl-line-height-44: 2.75rem;
+  --gl-line-height-42: 2.625rem;
+  --gl-line-height-36: 2.25rem;
+  --gl-line-height-32: 2rem;
+  --gl-line-height-28: 1.75rem;
+  --gl-line-height-24: 1.5rem;
+  --gl-line-height-20: 1.25rem;
+  --gl-line-height-16: 1rem;
+  --gl-line-height-12: 0.75rem;
+  --t-white-a-08: rgba(255, 255, 255, 0.08);
+  --t-white-a-06: rgba(255, 255, 255, 0.06);
+  --t-white-a-04: rgba(255, 255, 255, 0.04);
+  --t-white-a-02: rgba(255, 255, 255, 0.02);
+  --t-white-a-36: rgba(255, 255, 255, 0.36);
+  --t-white-a-24: rgba(255, 255, 255, 0.24);
+  --t-white-a-16: rgba(255, 255, 255, 0.16);
+  --t-gray-a-08: rgba(31, 30, 36, 0.08);
+  --t-gray-a-06: rgba(31, 30, 36, 0.06);
+  --t-gray-a-04: rgba(31, 30, 36, 0.04);
+  --t-gray-a-02: rgba(31, 30, 36, 0.02);
+  --t-gray-a-24: rgba(31, 30, 36, 0.24);
+  --t-gray-a-16: rgba(31, 30, 36, 0.16);
+  --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;
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;
@@ -209,4 +237,81 @@
   --data-viz-green-200: #275600;
   --data-viz-green-100: #1a4500;
   --data-viz-green-50: #133a03;
+  --gl-color-red-950: #4d0a00;
+  --gl-color-red-900: #660e00;
+  --gl-color-red-800: #8d1300;
+  --gl-color-red-700: #ae1800;
+  --gl-color-red-600: #c91c00;
+  --gl-color-red-500: #dd2b0e;
+  --gl-color-red-400: #ec5941;
+  --gl-color-red-300: #f57f6c;
+  --gl-color-red-200: #fcb5aa;
+  --gl-color-red-100: #fdd4cd;
+  --gl-color-red-50: #fcf1ef;
+  --gl-color-purple-950: #232150;
+  --gl-color-purple-900: #2f2a6b;
+  --gl-color-purple-800: #453894;
+  --gl-color-purple-700: #5943b6;
+  --gl-color-purple-600: #694cc0;
+  --gl-color-purple-500: #7b58cf;
+  --gl-color-purple-400: #9475db;
+  --gl-color-purple-300: #ac93e6;
+  --gl-color-purple-200: #cbbbf2;
+  --gl-color-purple-100: #e1d8f9;
+  --gl-color-purple-50: #f4f0ff;
+  --gl-color-orange-950: #421f00;
+  --gl-color-orange-900: #5c2900;
+  --gl-color-orange-800: #703800;
+  --gl-color-orange-700: #8f4700;
+  --gl-color-orange-600: #9e5400;
+  --gl-color-orange-500: #ab6100;
+  --gl-color-orange-400: #c17d10;
+  --gl-color-orange-300: #d99530;
+  --gl-color-orange-200: #e9be74;
+  --gl-color-orange-100: #f5d9a8;
+  --gl-color-orange-50: #fdf1dd;
+  --gl-color-green-950: #072b15;
+  --gl-color-green-900: #0a4020;
+  --gl-color-green-800: #0d532a;
+  --gl-color-green-700: #24663b;
+  --gl-color-green-600: #217645;
+  --gl-color-green-500: #108548;
+  --gl-color-green-400: #2da160;
+  --gl-color-green-300: #52b87a;
+  --gl-color-green-200: #91d4a8;
+  --gl-color-green-100: #c3e6cd;
+  --gl-color-green-50: #ecf4ee;
+  --gl-color-neutral-1000: #000;
+  --gl-color-neutral-950: #1f1e24;
+  --gl-color-neutral-900: #333238;
+  --gl-color-neutral-800: #434248;
+  --gl-color-neutral-700: #535158;
+  --gl-color-neutral-600: #626168;
+  --gl-color-neutral-500: #737278;
+  --gl-color-neutral-400: #89888d;
+  --gl-color-neutral-300: #a4a3a8;
+  --gl-color-neutral-200: #bfbfc3;
+  --gl-color-neutral-100: #dcdcde;
+  --gl-color-neutral-50: #ececef;
+  --gl-color-neutral-10: #fbfafd;
+  --gl-color-neutral-0: #fff;
+  --gl-color-blue-950: #002850;
+  --gl-color-blue-900: #033464;
+  --gl-color-blue-800: #064787;
+  --gl-color-blue-700: #0b5cad;
+  --gl-color-blue-600: #1068bf;
+  --gl-color-blue-500: #1f75cb;
+  --gl-color-blue-400: #428fdc;
+  --gl-color-blue-300: #63a6e9;
+  --gl-color-blue-200: #9dc7f1;
+  --gl-color-blue-100: #cbe2f9;
+  --gl-color-blue-50: #e9f3fc;
+  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
+  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
+  --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
+  --gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
+  --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */
+  --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */
 }

package/src/tokens/build/js/tokens.dark.js

@@ -3,6 +3,75 @@
  * Do not edit directly
  */
 
+export const GL_COLOR_BLUE_50 = '#e9f3fc';
+export const GL_COLOR_BLUE_100 = '#cbe2f9';
+export const GL_COLOR_BLUE_200 = '#9dc7f1';
+export const GL_COLOR_BLUE_300 = '#63a6e9';
+export const GL_COLOR_BLUE_400 = '#428fdc';
+export const GL_COLOR_BLUE_500 = '#1f75cb';
+export const GL_COLOR_BLUE_600 = '#1068bf';
+export const GL_COLOR_BLUE_700 = '#0b5cad';
+export const GL_COLOR_BLUE_800 = '#064787';
+export const GL_COLOR_BLUE_900 = '#033464';
+export const GL_COLOR_BLUE_950 = '#002850';
+export const GL_COLOR_NEUTRAL_0 = '#fff';
+export const GL_COLOR_NEUTRAL_10 = '#fbfafd';
+export const GL_COLOR_NEUTRAL_50 = '#ececef';
+export const GL_COLOR_NEUTRAL_100 = '#dcdcde';
+export const GL_COLOR_NEUTRAL_200 = '#bfbfc3';
+export const GL_COLOR_NEUTRAL_300 = '#a4a3a8';
+export const GL_COLOR_NEUTRAL_400 = '#89888d';
+export const GL_COLOR_NEUTRAL_500 = '#737278';
+export const GL_COLOR_NEUTRAL_600 = '#626168';
+export const GL_COLOR_NEUTRAL_700 = '#535158';
+export const GL_COLOR_NEUTRAL_800 = '#434248';
+export const GL_COLOR_NEUTRAL_900 = '#333238';
+export const GL_COLOR_NEUTRAL_950 = '#1f1e24';
+export const GL_COLOR_NEUTRAL_1000 = '#000';
+export const GL_COLOR_GREEN_50 = '#ecf4ee';
+export const GL_COLOR_GREEN_100 = '#c3e6cd';
+export const GL_COLOR_GREEN_200 = '#91d4a8';
+export const GL_COLOR_GREEN_300 = '#52b87a';
+export const GL_COLOR_GREEN_400 = '#2da160';
+export const GL_COLOR_GREEN_500 = '#108548';
+export const GL_COLOR_GREEN_600 = '#217645';
+export const GL_COLOR_GREEN_700 = '#24663b';
+export const GL_COLOR_GREEN_800 = '#0d532a';
+export const GL_COLOR_GREEN_900 = '#0a4020';
+export const GL_COLOR_GREEN_950 = '#072b15';
+export const GL_COLOR_ORANGE_50 = '#fdf1dd';
+export const GL_COLOR_ORANGE_100 = '#f5d9a8';
+export const GL_COLOR_ORANGE_200 = '#e9be74';
+export const GL_COLOR_ORANGE_300 = '#d99530';
+export const GL_COLOR_ORANGE_400 = '#c17d10';
+export const GL_COLOR_ORANGE_500 = '#ab6100';
+export const GL_COLOR_ORANGE_600 = '#9e5400';
+export const GL_COLOR_ORANGE_700 = '#8f4700';
+export const GL_COLOR_ORANGE_800 = '#703800';
+export const GL_COLOR_ORANGE_900 = '#5c2900';
+export const GL_COLOR_ORANGE_950 = '#421f00';
+export const GL_COLOR_PURPLE_50 = '#f4f0ff';
+export const GL_COLOR_PURPLE_100 = '#e1d8f9';
+export const GL_COLOR_PURPLE_200 = '#cbbbf2';
+export const GL_COLOR_PURPLE_300 = '#ac93e6';
+export const GL_COLOR_PURPLE_400 = '#9475db';
+export const GL_COLOR_PURPLE_500 = '#7b58cf';
+export const GL_COLOR_PURPLE_600 = '#694cc0';
+export const GL_COLOR_PURPLE_700 = '#5943b6';
+export const GL_COLOR_PURPLE_800 = '#453894';
+export const GL_COLOR_PURPLE_900 = '#2f2a6b';
+export const GL_COLOR_PURPLE_950 = '#232150';
+export const GL_COLOR_RED_50 = '#fcf1ef';
+export const GL_COLOR_RED_100 = '#fdd4cd';
+export const GL_COLOR_RED_200 = '#fcb5aa';
+export const GL_COLOR_RED_300 = '#f57f6c';
+export const GL_COLOR_RED_400 = '#ec5941';
+export const GL_COLOR_RED_500 = '#dd2b0e';
+export const GL_COLOR_RED_600 = '#c91c00';
+export const GL_COLOR_RED_700 = '#ae1800';
+export const GL_COLOR_RED_800 = '#8d1300';
+export const GL_COLOR_RED_900 = '#660e00';
+export const GL_COLOR_RED_950 = '#4d0a00';
 export const DATA_VIZ_GREEN_50 = '#133a03';
 export const DATA_VIZ_GREEN_100 = '#1a4500';
 export const DATA_VIZ_GREEN_200 = '#275600';
@@ -199,6 +268,40 @@ export const RED_700 = '#fcb5aa';
 export const RED_800 = '#fdd4cd';
 export const RED_900 = '#fcf1ef';
 export const RED_950 = '#fff4f3';
+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';
+export const T_GRAY_A_16 = 'rgba(31, 30, 36, 0.16)';
+export const T_GRAY_A_24 = 'rgba(31, 30, 36, 0.24)';
+export const T_GRAY_A_02 = 'rgba(31, 30, 36, 0.02)';
+export const T_GRAY_A_04 = 'rgba(31, 30, 36, 0.04)';
+export const T_GRAY_A_06 = 'rgba(31, 30, 36, 0.06)';
+export const T_GRAY_A_08 = 'rgba(31, 30, 36, 0.08)';
+export const T_WHITE_A_16 = 'rgba(255, 255, 255, 0.16)';
+export const T_WHITE_A_24 = 'rgba(255, 255, 255, 0.24)';
+export const T_WHITE_A_36 = 'rgba(255, 255, 255, 0.36)';
+export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
+export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
+export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
+export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_LINE_HEIGHT_12 = '0.75rem';
+export const GL_LINE_HEIGHT_16 = '1rem';
+export const GL_LINE_HEIGHT_20 = '1.25rem';
+export const GL_LINE_HEIGHT_24 = '1.5rem';
+export const GL_LINE_HEIGHT_28 = '1.75rem';
+export const GL_LINE_HEIGHT_32 = '2rem';
+export const GL_LINE_HEIGHT_36 = '2.25rem';
+export const GL_LINE_HEIGHT_42 = '2.625rem';
+export const GL_LINE_HEIGHT_44 = '2.75rem';
+export const GL_LINE_HEIGHT_52 = '3.25rem';
 export const GL_TEXT_PRIMARY = '#ececef'; // Use text.color.default instead
 export const GL_TEXT_SECONDARY = '#89888d'; // Use text.color.subtle instead
 export const GL_TEXT_TERTIARY = '#737278'; // Use text.color.disabled instead
@@ -207,4 +310,6 @@ export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3'; // Used for supplemental text tha
 export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest contrast.
 export const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
+export const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.