Conv

web/apps/photos/src/components/Upload/UploadProgress.tsx

@@ -456,8 +456,8 @@ const SectionInfo: React.FC<React.PropsWithChildren> = ({ children }) => (
 const NotUploadSectionHeader = styled("div")(
     ({ theme }) => `
     text-align: center;
-    color: ${theme.colors.danger.A700};
-    border-bottom: 1px solid ${theme.colors.danger.A700};
+    color: ${theme.palette.critical.main};
+    border-bottom: 1px solid ${theme.palette.critical.main};
     margin:${theme.spacing(3, 2, 1)}
 `,
 );

web/packages/base/components/utils/theme.ts

@@ -160,19 +160,19 @@ const fixedColors = (
 const commonFixedColors: Partial<Pick<ThemeColorsOptions, keyof FixedColors>> =
     {
         accent: {
-            A700: "#00B33C",
+            A700: "#00B33C" /* prune */,
             A500: "#1DB954",
-            A400: "#26CB5F",
-            A300: "#01DE4D",
+            A400: "#26CB5F" /* prune */,
+            A300: "#01DE4D" /* prune */,
         },
         warning: {
-            A500: "#FFC247",
+            A500: "#FFC247" /* prune */,
         },
         danger: {
-            A800: "#F53434",
-            A700: "#EA3F3F",
+            A800: "#F53434" /* prune */,
+            A700: "#EA3F3F" /* prune */,
             A500: "#FF6565",
-            A400: "#FF6F6F",
+            A400: "#FF6F6F" /* prune */,
         },
     };
 
@@ -184,10 +184,10 @@ const authAccentColor = {
 };
 
 const photosAccentColor = {
-    A700: "#00B33C",
+    A700: "#00B33C" /* prune */,
     A500: "#1DB954",
-    A400: "#26CB5F",
-    A300: "#01DE4D",
+    A400: "#26CB5F" /* prune */,
+    A300: "#01DE4D" /* prune */,
 };
 
 const lightThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {

web/packages/new/photos/components/SearchBar.tsx

@@ -266,10 +266,10 @@ const createSelectStyles = ({
     control: (style, { isFocused }) => ({
         ...style,
         backgroundColor: palette.background.paper,
-        borderColor: isFocused ? colors.accent.A500 : "transparent",
+        borderColor: isFocused ? palette.accent.main : "transparent",
         boxShadow: "none",
         ":hover": {
-            borderColor: colors.accent.A300,
+            borderColor: palette.accent.light,
             cursor: "text",
         },
     }),

web/packages/shared/components/CodeBlock.tsx

@@ -30,7 +30,7 @@ export default function CodeBlock({ code, ...props }: BoxProps<"div", Iprops>) {
 
 const Wrapper = styled(CenteredFlex)`
     position: relative;
-    background: ${({ theme }) => theme.colors.accent.A700};
+    background-color: ${({ theme }) => theme.palette.accent.dark};
     border-radius: ${({ theme }) => theme.shape.borderRadius}px;
     min-height: 80px;
 `;