Hackweek: Codecov Dark Mode (#3136)

Co-authored-by: Suejung Shin <suejung.shin@sentry.io> Co-authored-by: katia-sentry <katia.al-amir@sentry.com> Co-authored-by: Calvin Yau <calvin.yau@sentry.io>
codecov · Sep 4, 2024 · 337a9c2 · 337a9c2
1 parent 2a9f213
commit 337a9c2
Show file tree

Hide file tree

Showing 146 changed files with 1,673 additions and 421 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -8,7 +8,7 @@ const config: StorybookConfig = {
     },
   },
 
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     '@storybook/addon-a11y',

diff --git a/public/index.html b/public/index.html
@@ -60,7 +60,7 @@
     <% } %>
     </head>
   </head>
-  <body class="text-sm text-ds-gray-octonary">
+  <body class="text-sm text-ds-default-text bg-ds-background">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <% if(process.env.REACT_APP_ENV === "production") { %>

diff --git a/src/App.tsx b/src/App.tsx
@@ -14,9 +14,9 @@ import { useLocationParams } from 'services/navigation'
 import { ToastNotificationProvider } from 'services/toastNotification'
 import { useInternalUser, useUser } from 'services/user'
 import { isProvider } from 'shared/api/helpers'
-
 import 'ui/Table/Table.css'
 import 'ui/FileList/FileList.css'
+import { ThemeContextProvider } from 'shared/ThemeContext'
 
 import AccountSettings from './pages/AccountSettings'
 import AdminSettings from './pages/AdminSettings'
@@ -177,11 +177,13 @@ const MainAppRoutes = () => (
 function App() {
   return (
     <>
-      <ToastNotificationProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-        <MainAppRoutes />
-      </ToastNotificationProvider>
-      <Toaster />
+      <ThemeContextProvider>
+        <ToastNotificationProvider>
+          <ReactQueryDevtools initialIsOpen={false} />
+          <MainAppRoutes />
+        </ToastNotificationProvider>
+        <Toaster />
+      </ThemeContextProvider>
     </>
   )
 }

diff --git a/src/DarkModeColors.mdx b/src/DarkModeColors.mdx
@@ -0,0 +1,229 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
+
+<Meta title="Dark Mode Colors" />
+
+<ColorPalette>
+  <ColorItem
+    title="ds.pink"
+    subtitle="shades of pink"
+    colors={{
+      default: 'rgb(240, 31, 122)',
+      secondary: 'rgb(255, 74, 137)',
+      tertiary: 'rgb(209, 13, 98)',
+    }}
+  />
+  <ColorItem
+    title="ds.blue"
+    subtitle="shades of blue"
+    colors={{
+      default: 'rgb(59, 130, 246)',
+      light: 'rgb(82, 183, 255)',
+      medium: 'rgb(0, 149, 255)',
+      darker: 'rgb(59, 130, 246)',
+      quinary: 'rgb(1, 88, 150)',
+      senary: 'rgb(0, 45, 77)',
+      selected: 'rgb(230, 241, 255)',
+      septenary: 'rgb(34, 47, 61)',
+      nonary: 'rgb(0, 113, 194)',
+    }}
+  />
+  <ColorItem
+    title="ds.gray"
+    subtitle="shades of gray"
+    colors={{
+      default: 'rgb(234, 235, 239)',
+      primary: 'rgb(47, 51, 60)',
+      secondary: 'rgb(47, 51, 60)',
+      tertiary: 'rgb(47, 51, 60)',
+    }}
+  />
+  <ColorItem
+    title="ds.gray cont"
+    subtitle="gray variants cont"
+    colors={{
+      quaternary: 'rgb(153, 159, 167)',
+      quinary: 'rgb(104, 115, 126)',
+      senary: 'rgb(57, 71, 84)',
+      octonary: 'rgb(234, 235, 239)',
+      300: 'rgb(199, 203, 209)',
+    }}
+  />
+  <ColorItem
+    title="orange"
+    subtitle="orange variants"
+    colors={{
+      100: 'rgb(249, 115, 22)',
+      500: 'rgb(249, 115, 22)',
+    }}
+  />
+  <ColorItem
+    title="green"
+    subtitle="green variants"
+    colors={{
+      100: 'rgb(66, 159, 73)',
+      500: 'rgb(66, 159, 73)',
+    }}
+  />
+  <ColorItem
+    title="ds.primary"
+    subtitle="primary colors"
+    colors={{
+      green: 'rgb(33, 181, 119)',
+      red: 'rgb(245, 32, 32)',
+      purple: 'rgb(172, 57, 207)',
+      yellow: 'rgb(244, 176, 27)',
+      base: 'rgb(47, 51, 60)',
+    }}
+  />
+  <ColorItem
+    title="ds.coverage"
+    subtitle="coverage colors"
+    colors={{
+      uncovered: 'rgb(78, 9, 9)',
+      partial: 'rgb(128, 108, 4)',
+      covered: 'rgb(0, 64, 37)',
+    }}
+  />
+  <ColorItem
+    title="ds.error"
+    subtitle="error colors"
+    colors={{
+      quinary: 'rgb(255, 155, 155)',
+      nonary: 'rgb(89, 8, 8)',
+    }}
+  />
+  <ColorItem
+    title="codecov"
+    subtitle="Codecov colors"
+    colors={{
+      red: 'rgb(206, 32, 25)',
+      orange: 'rgb(255, 194, 115)',
+      footer: 'rgb(7, 17, 27)',
+      code: 'rgb(166, 127, 89)',
+    }}
+  />
+  <ColorItem
+    title="warning"
+    subtitle="warning colors"
+    colors={{
+      100: 'rgb(255, 235, 210)',
+      900: 'rgb(71, 54, 16)',
+    }}
+  />
+  <ColorItem
+    title="success"
+    subtitle="success colors"
+    colors={{
+      500: 'rgb(115, 255, 158)',
+      100: 'rgb(222, 255, 232)',
+    }}
+  />
+  <ColorItem
+    title="error"
+    subtitle="error colors"
+    colors={{
+      100: 'rgb(245, 32, 32)',
+    }}
+  />
+  <ColorItem
+    title="info"
+    subtitle="info colors"
+    colors={{
+      100: 'rgb(223, 242, 255)',
+      500: 'rgb(163, 217, 255)',
+      900: 'rgb(1, 59, 101)',
+    }}
+  />
+  <ColorItem
+    title="provider"
+    subtitle="provider colors"
+    colors={{
+      github: 'rgb(255, 255, 255)',
+      'github-text': 'rgb(14, 27, 41)',
+      gitlab: 'rgb(242, 98, 42)',
+      bitbucket: 'rgb(2, 75, 186)',
+      okta: 'rgb(255, 255, 255)',
+      'okta-text': 'rgb(14, 27, 41)',
+    }}
+  />
+  <ColorItem
+    title="modal"
+    subtitle="modal colors"
+    colors={{
+      header: 'rgb(47, 51, 62)',
+      footer: 'rgb(47, 51, 62)',
+    }}
+  />
+  <ColorItem
+    title="app"
+    subtitle="app colors"
+    colors={{
+      background: 'rgb(27, 30, 36)',
+      container: 'rgb(22, 24, 29)',
+      'text-primary': 'rgb(210, 212, 215)',
+      'text-secondary': 'rgb(173, 179, 194)',
+      'border-line': 'rgb(47, 51, 60)',
+      'sub-background': 'rgb(22, 24, 29)',
+      'sub-hover-background': 'rgb(153, 161, 179)',
+    }}
+  />
+  <ColorItem
+    title="toggle"
+    subtitle="toggle colors"
+    colors={{
+      active: 'rgb(var(--color-ds-blue-darker))',
+      inactive: 'rgb(var(--color-ds-gray-quinary))',
+      disabled: 'rgb(var(--color-ds-gray-quaternary))',
+    }}
+  />
+  <ColorItem
+    title="sentry-widget"
+    subtitle="Sentry User Feedback widget colors"
+    colors={{
+      'accent-background': 'rgb(var(--color-ds-blue-darker))',
+      'background-hover': 'rgb(var(--color-ds-blue-quinary))',
+    }}
+  />
+  <ColorItem
+    title="chart"
+    subtitle="chart colors"
+    colors={{
+      'area-coverage': 'rgb(var(--color-ds-gray-senary))',
+      'area-bundle-tab': 'hsl(205, 100%, 38%)',
+      chart1: 'hsl(205, 100%, 50%)',
+      chart2: 'hsl(205, 99%, 30%)',
+      chart3: 'hsl(41, 91%, 53%)',
+      chart4: 'hsl(286, 61%, 52%)',
+      chart5: 'hsl(0, 100%, 80%)',
+      'area-stroke': 'rgb(20, 157, 255)',
+    }}
+  />
+  <ColorItem
+    title="ds.summary-dropdown"
+    subtitle="summary dropdown color"
+    colors={{
+      default: 'rgb(22, 24, 29)',
+    }}
+  />
+  <ColorItem
+    title="code-viewer"
+    subtitle="code viewer colors"
+    colors={{
+      key: 'rgb(93, 230, 255)',
+      keyword: 'rgb(var(--color-code-keyword))',
+      'line-number': 'rgb(var(--color-ds-gray-quinary))',
+      default: 'rgb(var(--color-code-default))',
+      comment: 'rgb(225, 232, 248)',
+    }}
+  />
+  <ColorItem
+    title="code-viewer-cont"
+    subtitle="code viewer colors continued"
+    colors={{
+      punctuation: 'rgb(145, 113, 248)',
+      function: 'rgb(var(--color-ds-gray-default))',
+      property: 'rgb(218, 143, 255)',
+      operator: 'rgb(219, 178, 89)',
+    }}
+  />
+</ColorPalette>