Enable darkmode support

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     'import/external-module-folders': ['node_modules'],
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['prettier', '@typescript-eslint'],
+  plugins: ['prettier', '@typescript-eslint', '@atlaskit/design-system'],
   rules: {
     'max-len': [
       'warn',
@@ -48,5 +48,10 @@ module.exports = {
     ],
     'arrow-body-style': 'off',
     'prefer-arrow-callback': 'off',
+    '@atlaskit/design-system/ensure-design-token-usage': [
+      'error',
+      { domains: ['color'], shouldEnforceFallbacks: true },
+    ],
+    '@atlaskit/design-system/no-deprecated-imports': 'off',
   },
 };

package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
+    "@atlaskit/eslint-plugin-design-system": "^8.7.0",
     "@forge/cli": "^6.21.0",
     "@types/jest": "^27.4.1",
     "@types/js-yaml": "^4.0.5",
@@ -29,13 +30,15 @@
     "jest-mock": "^28.1.0",
     "lint-staged": "^12.3.5",
     "prettier": "^2.6.2",
+    "react": "^17.0.2",
     "ts-jest": "^27.1.3",
     "typescript": "~4.5.5"
   },
   "dependencies": {
+    "@atlaskit/tokens": "^1.29.1",
     "@atlassian/forge-graphql": "13.3.10",
     "@forge/api": "^2.8.1",
-    "@forge/bridge": "^2.3.0",
+    "@forge/bridge": "^2.6.0",
     "@forge/events": "^0.5.3",
     "@forge/metrics": "^0.1.1",
     "@forge/resolver": "^1.4.6",

ui/package.json

@@ -18,10 +18,11 @@
     "@atlaskit/spinner": "^15.1.9",
     "@atlaskit/textfield": "^5.1.10",
     "@atlaskit/theme": "^12.1.6",
+    "@atlaskit/tokens": "^1.29.1",
     "@atlaskit/tooltip": "^17.5.9",
     "@atlassian/forge-graphql": "13.3.10",
     "@forge/api": "^2.8.1",
-    "@forge/bridge": "^2.3.0",
+    "@forge/bridge": "^2.6.0",
     "escape-string-regexp": "^5.0.0",
     "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",

ui/src/App.tsx

@@ -1,8 +1,11 @@
+import { view } from '@forge/bridge';
 import { AppRouter } from './AppRouter';
 import { AppContextProvider } from './context/AppContext';
 import { ImportContextProvider } from './context/ImportContext';
 
 export const App = () => {
+  view.theme.enable();
+
   return (
     <AppContextProvider>
       <ImportContextProvider>

ui/src/components/ConnectedPage/ConnectInfoPanel.tsx

@@ -5,13 +5,14 @@ import { LoadingButton } from '@atlaskit/button';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme';
 
+import { token } from '@atlaskit/tokens';
 import { GitlabAPIGroup } from '../../resolverTypes';
 
 const ConnectedGroupWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid ${N30};
+  border: 1px solid ${token('color.border', N30)};
   border-radius: ${gridSize() / 2}px;
   padding: ${gridSize() * 2}px;
 `;
@@ -36,7 +37,7 @@ export const ConnectInfoPanel = ({ connectedGroup, handleDisconnectGroup, isDisc
   return (
     <ConnectedGroupWrapper>
       <IconTitleGroupWrapper>
-        <CheckCircleIcon label='check' primaryColor='green' />
+        <CheckCircleIcon label='check' primaryColor={token('color.icon.success', 'green')} />
         <ConnectedText>
           Your GitLab group <strong>{connectedGroup.name}</strong> is successfully connected to Compass
         </ConnectedText>

ui/src/components/ImportResult/index.tsx

@@ -6,6 +6,7 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import CheckIcon from '@atlaskit/icon/glyph/check';
 
 import SectionMessage from '@atlaskit/section-message';
+import { token } from '@atlaskit/tokens';
 import { buildHead } from './buildHead';
 import { buildRows } from './buildRows';
 import { ErrorInfo, ImportResultCounterWrapper, SuccessInfo } from './styles';
@@ -72,14 +73,14 @@ export const ImportResult: FunctionComponent = () => {
       {failedProjects.length === 0 ? (
         <>
           <ImportResultCounterWrapper>
-            <CheckIcon primaryColor={G500} label='Check icon' />
+            <CheckIcon primaryColor={token('color.icon.success', G500)} label='Check icon' />
             <SuccessInfo>{successInfoText}</SuccessInfo>
           </ImportResultCounterWrapper>
         </>
       ) : (
         <>
           <ImportResultCounterWrapper>
-            <ErrorIcon primaryColor={R400} label='Error icon' />
+            <ErrorIcon primaryColor={token('color.icon.danger', R400)} label='Error icon' />
             <ErrorInfo>{failedProjects.length} components failed to import</ErrorInfo>
           </ImportResultCounterWrapper>
           <TableWrapper>

ui/src/components/ImportResult/styles.ts

@@ -1,5 +1,6 @@
 import { gridSize } from '@atlaskit/theme';
 import { R400, G500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import styled from 'styled-components';
 
 export const NameWrapper = styled.div`
@@ -12,14 +13,14 @@ export const ImportResultCounterWrapper = styled.div`
 `;
 
 export const ErrorInfo = styled.span`
-  color: ${R400};
+  color: ${token('color.text.danger', R400)};
   font-size: 14px;
   line-height: 20px;
   margin: ${gridSize() * 0.25}px 0 0 ${gridSize() - 3}px;
 `;
 
 export const SuccessInfo = styled.span`
-  color: ${G500};
+  color: ${token('color.text.success', G500)};
   font-size: 14px;
   line-height: 20px;
   margin: ${gridSize() * 0.25}px 0 0 ${gridSize() - 3}px;

ui/src/components/SelectImportPage/styles.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme';
 import { h700 } from '@atlaskit/theme/typography';
 import { N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { Description } from '../styles';
 
 export const ButtonWrapper = styled.div`
@@ -21,8 +22,8 @@ export const Wrapper = styled.div`
 `;
 
 export const Header = styled.span`
-  ${h700}
-  color: ${N800};
+  ${h700};
+  color: ${token('color.text', N800)};
   margin: 0;
 `;
 

ui/src/components/TooltipGenerator/styles.ts

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 import { N30A, N0 } from '@atlaskit/theme/colors';
 import { gridSize, elevation, borderRadius } from '@atlaskit/theme';
 import { TooltipPrimitive } from '@atlaskit/tooltip';
+import { token } from '@atlaskit/tokens';
 
 export const Separator = styled.div`
-  background-color: ${N30A};
+  background-color: ${token('color.border', N30A)};
   height: 2px;
   margin: ${gridSize()}px 0px;
 `;

ui/src/components/assets/component-glyphs.tsx

@@ -1,22 +1,25 @@
 /* eslint-disable max-len */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import React from 'react';
 
 import { CustomGlyphProps } from '@atlaskit/icon/types';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { ComponentTypeData } from './types';
 
 export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'SERVICE',
     label: 'Service',
-    color: colors.P300,
+    color: token('color.icon.accent.purple', colors.P300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
           fillRule='evenodd'
           clipRule='evenodd'
           d='M17.714 5a1.286 1.286 0 1 0 0 2.571 1.286 1.286 0 0 0 0-2.571Zm-3.143.327A3.287 3.287 0 0 1 21 6.286a3.286 3.286 0 0 1-6.43.958 1 1 0 0 1-.284.042h-1.72L9.738 12l2.828 4.714h1.72a1 1 0 0 1 .285.041 3.287 3.287 0 0 1 6.429.96 3.286 3.286 0 0 1-6.43.958 1 1 0 0 1-.284.041H12a1 1 0 0 1-.857-.485L8.005 13H4a1 1 0 0 1 0-2h4.005l3.137-5.229A1 1 0 0 1 12 5.286h2.286a1 1 0 0 1 .285.04Zm3.143 11.101a1.286 1.286 0 1 0 0 2.572 1.286 1.286 0 0 0 0-2.572Z'
-          fill='currentColor'
+          fill='#fff'
         />
       </svg>
     ),
@@ -25,7 +28,7 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'LIBRARY',
     label: 'Library',
-    color: colors.Y500,
+    color: token('color.icon.accent.yellow', colors.Y500),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
@@ -41,14 +44,14 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'APPLICATION',
     label: 'Application',
-    color: colors.G300,
+    color: token('color.icon.accent.green', colors.G300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
           fillRule='evenodd'
           clipRule='evenodd'
           d='M11.57 3.105a1 1 0 0 1 .894.001l3.985 2A1 1 0 0 1 17 6v4.375l3.449 1.731A1 1 0 0 1 21 13v5a1 1 0 0 1-.553.895l-4.004 2a1 1 0 0 1-.894 0l-3.55-1.777-3.556 1.777a1 1 0 0 1-.894 0l-3.997-2A1 1 0 0 1 3 18v-5a1 1 0 0 1 .554-.895L7 10.389V6a1 1 0 0 1 .554-.895l4.016-2Zm-3.563 9.017L5 13.619v3.763l2.997 1.5 3.003-1.5V13.62l-2.993-1.498ZM13 13.619v3.763l2.996 1.5 3.004-1.5v-3.765l-2.986-1.499L13 13.619Zm2-3.237V6.617l-2.986-1.499L9 6.619v3.756l3 1.506 3-1.5Z'
-          fill='currentColor'
+          fill='#fff'
         />
       </svg>
     ),
@@ -57,13 +60,14 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'CAPABILITY',
     label: 'Capability',
-    color: colors.N600,
+    color: token('color.icon.accent.gray', colors.N600),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
           fillRule='evenodd'
           clipRule='evenodd'
           d='M10.5145 6.15717C10.5145 6.97758 11.1796 7.64266 12 7.64266C12.8204 7.64266 13.4855 6.97758 13.4855 6.15717C13.4855 5.33676 12.8204 4.67168 12 4.67168C11.1796 4.67168 10.5145 5.33676 10.5145 6.15717ZM11.15 9.22799C10.8953 9.15765 10.6534 9.05647 10.4286 8.92873L8.93348 10.426C9.19656 10.8894 9.34679 11.4253 9.34679 11.9963C9.34679 13.7556 7.9206 15.1818 6.1613 15.1818C4.40201 15.1818 2.97581 13.7556 2.97581 11.9963C2.97581 10.237 4.40201 8.81083 6.1613 8.81083C6.73217 8.81083 7.26796 8.96099 7.73134 9.22398L9.22707 7.72612C8.96447 7.263 8.81454 6.72759 8.81454 6.15717C8.81454 4.39787 10.2407 2.97168 12 2.97168C13.7593 2.97168 15.1855 4.39787 15.1855 6.15717C15.1855 6.72831 15.0352 7.26434 14.772 7.72787L16.2683 9.22419C16.7318 8.96107 17.2677 8.81083 17.8387 8.81083C19.598 8.81083 21.0242 10.237 21.0242 11.9963C21.0242 13.7556 19.598 15.1818 17.8387 15.1818C16.0794 15.1818 14.6532 13.7556 14.6532 11.9963C14.6532 11.4255 14.8034 10.8897 15.0663 10.4264L13.5697 8.92972C13.3453 9.057 13.104 9.15784 12.85 9.228V14.7646C14.1966 15.1366 15.1855 16.3705 15.1855 17.8355C15.1855 19.5948 13.7593 21.021 12 21.021C10.2407 21.021 8.81454 19.5948 8.81454 17.8355C8.81454 16.3705 9.80338 15.1366 11.15 14.7646V9.22799ZM4.67581 11.9963C4.67581 12.8167 5.34089 13.4818 6.1613 13.4818C6.98172 13.4818 7.64679 12.8167 7.64679 11.9963C7.64679 11.1759 6.98172 10.5108 6.1613 10.5108C5.34089 10.5108 4.67581 11.1759 4.67581 11.9963ZM12 19.321C11.1796 19.321 10.5145 18.6559 10.5145 17.8355C10.5145 17.0151 11.1796 16.35 12 16.35C12.8204 16.35 13.4855 17.0151 13.4855 17.8355C13.4855 18.6559 12.8204 19.321 12 19.321ZM16.3532 11.9963C16.3532 12.8167 17.0183 13.4818 17.8387 13.4818C18.6591 13.4818 19.3242 12.8167 19.3242 11.9963C19.3242 11.1759 18.6591 10.5108 17.8387 10.5108C17.0183 10.5108 16.3532 11.1759 16.3532 11.9963Z'
+          fill='#fff'
         />
       </svg>
     ),
@@ -72,7 +76,7 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'CLOUD_RESOURCE',
     label: 'Cloud Resource',
-    color: colors.P300,
+    color: token('color.icon.accent.purple', colors.P300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
@@ -98,7 +102,7 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'DATA_PIPELINE',
     label: 'Data Pipeline',
-    color: colors.R300,
+    color: token('color.icon.accent.red', colors.R300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
@@ -132,7 +136,7 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'MACHINE_LEARNING_MODEL',
     label: 'Machine Learning Model',
-    color: colors.R300,
+    color: token('color.icon.accent.red', colors.R300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
@@ -160,7 +164,7 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'UI_ELEMENT',
     label: 'UI Element',
-    color: colors.Y500,
+    color: token('color.icon.accent.yellow', colors.Y500),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <mask id='path-1-inside-1_1403_23012' fill='white'>
@@ -212,11 +216,11 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'WEBSITE',
     label: 'Website',
-    color: colors.G300,
+    color: token('color.icon.accent.green', colors.G300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
-          fill='fff'
+          fill='#fff'
           fillRule='evenodd'
           clipRule='evenodd'
           d='M12.3319 20.9136C13.5069 20.9136 14.6704 20.6821 15.756 20.2325C16.8416 19.7828 17.828 19.1237 18.6589 18.2928C19.4898 17.462 20.1489 16.4756 20.5985 15.39C21.0482 14.3044 21.2796 13.1409 21.2796 11.9658C21.2796 10.7908 21.0482 9.62725 20.5985 8.54166C20.1489 7.45607 19.4898 6.46968 18.6589 5.6388C17.828 4.80793 16.8416 4.14884 15.756 3.69917C14.6704 3.24951 13.5069 3.01807 12.3319 3.01807C9.95879 3.01807 7.68289 3.96077 6.00486 5.6388C4.32683 7.31683 3.38412 9.59273 3.38412 11.9658C3.38412 14.3389 4.32683 16.6148 6.00486 18.2928C7.68289 19.9709 9.95879 20.9136 12.3319 20.9136V20.9136ZM11.4371 19.0614C9.70752 18.8456 8.11636 18.0054 6.96289 16.6987C5.80941 15.3919 5.17312 13.7088 5.17368 11.9658C5.17368 11.4111 5.24526 10.8831 5.36158 10.3642L9.64755 14.6501V15.5449C9.64755 16.5292 10.4529 17.3345 11.4371 17.3345V19.0614V19.0614ZM17.6111 16.7887C17.4975 16.427 17.2713 16.1113 16.9654 15.8875C16.6595 15.6637 16.29 15.5436 15.911 15.5449H15.0162V12.8606C15.0162 12.3685 14.6136 11.9658 14.1214 11.9658H8.75278V10.1763H10.5423C11.0345 10.1763 11.4371 9.77362 11.4371 9.28149V7.49194H13.2267C14.2109 7.49194 15.0162 6.68665 15.0162 5.70239V5.33553C17.6379 6.40032 19.4901 8.96832 19.4901 11.9658C19.4901 13.827 18.7743 15.5181 17.6111 16.7887V16.7887Z'
@@ -228,18 +232,18 @@ export const COMPONENT_TYPES: ComponentTypeData[] = [
   {
     id: 'OTHER',
     label: 'Other',
-    color: colors.B300,
+    color: token('color.icon.accent.blue', colors.B300),
     icon: (props: CustomGlyphProps) => (
       <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path
           fillRule='evenodd'
           clipRule='evenodd'
           d='M5 17.991c0 .007 14.005.009 14.005.009-.006 0-.005-7.991-.005-7.991C19 10.002 4.995 10 4.995 10 5.001 10 5 17.991 5 17.991ZM3 10.01C3 8.899 3.893 8 4.995 8h14.01C20.107 8 21 8.902 21 10.009v7.982c0 1.11-.893 2.009-1.995 2.009H4.995A2.004 2.004 0 0 1 3 17.991V10.01Z'
-          fill='currentColor'
+          fill='#fff'
         />
         <path
           d='M7 8.335c0-.002 2.002-.002 2.002-.002C9 8.333 9 6.665 9 6.665c0 .002-2.002.002-2.002.002C7 6.667 7 8.335 7 8.335Zm-2-1.67C5 5.745 5.898 5 6.998 5h2.004C10.106 5 11 5.749 11 6.665v1.67C11 9.255 10.102 10 9.002 10H6.998C5.894 10 5 9.251 5 8.335v-1.67Zm10 1.67c0-.002 2.002-.002 2.002-.002C17 8.333 17 6.665 17 6.665c0 .002-2.002.002-2.002.002.002 0 .002 1.668.002 1.668Zm-2-1.67C13 5.745 13.898 5 14.998 5h2.004C18.106 5 19 5.749 19 6.665v1.67c0 .92-.898 1.665-1.998 1.665h-2.004C13.894 10 13 9.251 13 8.335v-1.67Z'
-          fill='currentColor'
+          fill='#fff'
         />
       </svg>
     ),

ui/src/components/component-type-icon/main.tsx

@@ -1,4 +1,5 @@
 import { N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 
 import { ComponentIconBackground } from './component-icon-background';
 import { ComponentIconGlyph, ComponentIconGlyphProps } from './component-icon-glyph';
@@ -10,7 +11,12 @@ export const ComponentTypeIcon = (props: ComponentTypeIconProps): JSX.Element =>
 
   return (
     <ComponentIconBackground testId={testId} typeId={typeId} size={size}>
-      <ComponentIconGlyph typeId={typeId} size={size} primaryColor={N0} {...forwardProps} />
+      <ComponentIconGlyph
+        typeId={typeId}
+        size={size}
+        primaryColor={token('color.icon.inverse', N0)}
+        {...forwardProps}
+      />
     </ComponentIconBackground>
   );
 };

ui/src/components/styles.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { h400 } from '@atlaskit/theme/typography';
 import { N200, N90, N900 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme';
+import { token } from '@atlaskit/tokens';
 
 export const CenterWrapper = styled.div`
   display: flex;
@@ -20,7 +21,7 @@ export const ImportantText = styled.strong`
 `;
 
 export const StatusLabel = styled.span`
-  color: ${N200};
+  color: ${token('color.text.inverse', N200)};
   cursor: pointer;
   &:hover {
     text-decoration: underline;
@@ -37,7 +38,7 @@ export const TruncateDescription = styled.div<{ maxWidth: number | string }>`
 export const Description = styled.span`
   font-size: 14px;
   line-height: 20px;
-  color: ${N900};
+  color: ${token('color.text', N900)};
 `;
 
 export const ImportButtonWrapper = styled.div`
@@ -51,7 +52,7 @@ export const ImportButtonWrapper = styled.div`
   }
 
   time {
-    color: ${N90};
+    color: ${token('color.text.subtlest', N90)};
     font-size: 11px;
   }
 `;