more converting to HSL

danilo-leal · Apr 2, 2024 · 8287dcb · 8287dcb
1 parent 4f2384f
commit 8287dcb
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 17 deletions.
diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
@@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({
   ...theme.typography.caption,
   color: (theme.vars || theme).palette.text.primary,
   '& pre': {
-    backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+    backgroundColor: 'hsl(210, 20%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
     color: '#f8f8f2', // fallback color until Prism's theme is loaded
     overflow: 'auto',
     margin: 0,

diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
@@ -16,7 +16,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'min(68vh, 1000px)',
       overflow: 'auto',
       marginTop: -1,
-      backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+      backgroundColor: 'hsl(210, 20%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -24,8 +24,8 @@ const Root = styled('div')(
       lineHeight: 1.5, // Developers like when the code is dense.
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
-      backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
-      color: '#f8f8f2',
+      backgroundColor: 'hsl(210, 20%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+      color: 'hsl(60, 30%, 96%)',
       colorScheme: 'dark',
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
@@ -344,7 +344,7 @@ const Root = styled('div')(
         },
       },
       '&.MuiCallout-info': {
-        color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`,
+        color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
         backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
         borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
         '& strong': {
@@ -375,7 +375,7 @@ const Root = styled('div')(
       '&.MuiCallout-warning': {
         color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
         backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
-        borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
+        borderColor: alpha(lightTheme.palette.warning[700], 0.15),
         '& strong': {
           color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
         },
@@ -540,7 +540,7 @@ const Root = styled('div')(
       fontWeight: 500,
       borderRadius: 6,
       border: 'none',
-      backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
+      backgroundColor: 'hsl(210, 20%, 9%)', // using the code block one-off background color (defined in line 23)
       color: '#FFF',
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
@@ -721,8 +721,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-error': {
           color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
-          backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
-          borderColor: alpha(darkTheme.palette.error[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
+          borderColor: alpha(darkTheme.palette.error[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
           },
@@ -734,9 +734,9 @@ const Root = styled('div')(
           },
         },
         '&.MuiCallout-info': {
-          color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`,
-          backgroundColor: alpha(darkTheme.palette.grey[700], 0.2),
-          borderColor: `var(--muidocs-palette-grey-800, ${darkTheme.palette.grey[800]})`,
+          color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+          backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
+          borderColor: alpha(darkTheme.palette.grey[800], 0.5),
           '& strong': {
             color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
           },
@@ -746,8 +746,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-success': {
           color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
-          backgroundColor: alpha(darkTheme.palette.success[700], 0.15),
-          borderColor: alpha(lightTheme.palette.success[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
+          borderColor: alpha(lightTheme.palette.success[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
           },
@@ -760,8 +760,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-warning': {
           color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
-          backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
-          borderColor: alpha(darkTheme.palette.warning[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
+          borderColor: alpha(darkTheme.palette.warning[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
           },

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
@@ -205,7 +205,7 @@ export default function ThemeViewer({
       sx={{
         color: '#FFF',
         p: 1.5,
-        bgcolor: '#0F1924', // one-off code container color
+        bgcolor: 'hsl(210, 20%, 9%)', // one-off code container color
         borderRadius: 3,
         border: `1px solid ${blueDark[700]}`,
       }}