Merge remote-tracking branch 'origin/SLB-350-Styling-Richtext' into dev

AmazeeLabs · May 3, 2024 · e32bf32 · e32bf32
2 parents 0c6697e + 505e80b
commit e32bf32
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 12 deletions.
diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile
@@ -28,8 +28,3 @@ RUN chmod a+x phpactor.phar
 RUN sudo mv phpactor.phar /usr/local/bin/phpactor
 # Install gh cli
 RUN sudo install-packages gh
-
-RUN curl -Lo lazygit.tar.gz "https://github.com/jesseduffield/lazygit/releases/latest/download/lazygit_0.40.2_Linux_x86_64.tar.gz" \
-  && tar xf lazygit.tar.gz lazygit \
-  && sudo install lazygit /usr/local/bin
-
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -1,6 +1,6 @@
 tasks:
   - name: Setup
-    init: pnpm install && pnpm turbo build --no-daemon --go-fallback && gp sync-done setup
+    init: pnpm install && pnpm turbo build gp sync-done setup
     env:
       NETLIFY_URL: http://localhost:8000
       DRUPAL_EXTERNAL_URL: http://localhost:8888

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -16,10 +16,7 @@ export function BlockMarkup(props: BlockMarkupFragment) {
     <div
       className={clsx([
         'mx-auto max-w-3xl prose lg:prose-xl mt-10',
-        'prose-a:text-indigo-600',
-        'prose-em:text-indigo-600',
-        'prose-strong:text-indigo-600',
-        'marker:text-indigo-600 marker:font-bold',
+        'marker:text-gray-900',
       ])}
     >
       <Html

diff --git a/packages/ui/src/tailwind.config.cjs b/packages/ui/src/tailwind.config.cjs
@@ -1,9 +1,61 @@
 /** @type {import('tailwindcss').Config} */
-const theme = require('./stylingAssets.json');
+const stylingAssets = require('./stylingAssets.json');
 
 module.exports = {
   content: ['./src/**/*.{tsx, mdx}'],
-  ...theme,
+  theme: {
+    extend: {
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: [
+            {
+              'a, p a': {},
+              'ul, ol': {
+                fontSize: '1.125rem',
+                lineHeight: '1.688rem',
+              },
+              ol: {},
+              'ul>li::marker, ol>li::marker': {},
+              strong: {
+                color: theme('colors.gray.900'),
+                fontWeight: '700',
+              },
+              '.prose p': {
+                color: theme('colors.gray.500'),
+                fontSize: '1.125rem',
+                lineHeight: '1.688rem',
+              },
+              '.prose a, .prose p a': {
+                color: theme('colors.blue.600'),
+                fontWeight: '400',
+              },
+              '.prose em': {
+                color: theme('colors.gray.900'),
+              },
+              'prose marker': {
+                fontWeight: '700',
+              },
+              blockquote: {},
+              '.prose blockquote p': {
+                fontWeight: '700',
+                color: '#111928',
+              },
+              cite: {},
+              'h1, h2, h3, h4, h5, h6': {},
+              '.prose h1': {},
+              '.prose h2': {
+                fontWeight: '700',
+                color: theme('colors.gray.900'),
+              },
+              '.prose h3': {},
+              '.prose h4': {},
+            },
+          ],
+        },
+      }),
+    },
+    ...stylingAssets.theme,
+  },
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),