chore: update Tailwind configuration

Refs: #441

docker-compose.yaml

@@ -56,6 +56,7 @@ services:
       - ./web/themes/custom/opdavies/package-lock.json:/node/package-lock.json
       - ./web/themes/custom/opdavies/package.json:/node/package.json
       - ./web/themes/custom/opdavies/postcss.config.js:/node/postcss.config.js
+      - ./web/themes/custom/opdavies/tailwindcss:/node/tailwindcss
       - ./web/themes/custom/opdavies/tailwind-colours.js:/node/tailwind-colours.js
       - ./web/themes/custom/opdavies/tailwind-plugin-focus-visible.js:/node/tailwind-plugin-focus-visible.js
       - ./web/themes/custom/opdavies/tailwind-safelist-classes.txt:/node/tailwind-safelist-classes.txt

web/themes/custom/opdavies/assets/css/base.pcss

@@ -0,0 +1,26 @@
+@layer base {
+  h2 {
+    @apply font-bold
+  }
+
+  blockquote {
+    @apply pl-4 border-l-3 border-blue-primary dark:border-blue-400;
+  }
+
+  code {
+    @apply px-2 py-1 text-sm rounded-md text-gray-700 bg-gray-200 dark:bg-gray-800 dark:text-gray-100;
+  }
+
+  pre {
+    @apply p-4 my-8 overflow-auto rounded-md text-gray-700 bg-gray-200 dark:bg-gray-800 dark:text-gray-100;
+  }
+
+  iframe {
+    @apply w-full;
+  }
+
+  a:focus {
+    @apply outline-black dark:outline-white;
+    outline-offset: 2px !important;
+  }
+}

web/themes/custom/opdavies/assets/css/components.pcss

@@ -0,0 +1,66 @@
+@layer components {
+  .link {
+    @apply underline text-blue-primary hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.1em;
+  }
+
+  .markdown {
+    > * + * {
+      @apply mt-4;
+    }
+
+    > *:first-child {
+      @apply mt-0;
+    }
+
+    h2 + * {
+      @apply mt-2;
+    }
+
+    h2 {
+      @apply mt-6;
+    }
+
+    h3 {
+      @apply mt-8;
+    }
+
+    h2 + h3 {
+      @apply mt-2
+    }
+
+    blockquote {
+      @apply my-8;
+    }
+
+    ul {
+      @apply pl-6 list-disc;
+    }
+
+    li {
+      @apply mt-1 first:mt-0;
+    }
+
+    a {
+      @apply link;
+    }
+
+    pre {
+      @apply my-8;
+    }
+
+    .media--type-image {
+      @apply my-8;
+    }
+
+    .speakerdeck-embed-wrapper,
+    .video-full {
+      @apply my-8 aspect-w-4 aspect-h-3;
+    }
+  }
+
+  .visually-hidden {
+    @apply sr-only;
+  }
+}

web/themes/custom/opdavies/assets/css/tailwind.pcss

@@ -5,4 +5,3 @@
 @import './base.pcss';
 @import './components.pcss';
 @import './utilities.pcss';
-

web/themes/custom/opdavies/assets/css/utilities.pcss

@@ -0,0 +1,15 @@
+@layer utilities {
+  @variants dark {
+    .text-decoration-blue-400 {
+      text-decoration-color: theme('colors.blue.400');
+    }
+
+    .text-decoration-blue-primary {
+      text-decoration-color: theme('colors.blue.800');
+    }
+
+    .text-decoration-white {
+      text-decoration-color: theme('colors.white');
+    }
+  }
+}

web/themes/custom/opdavies/block--footer.html.twig

@@ -1,37 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display a block.
- *
- * Available variables:
- * - plugin_id: The ID of the block implementation.
- * - label: The configured label of the block if visible.
- * - configuration: A list of the block's configuration values.
- *   - label: The configured label for the block.
- *   - label_display: The display settings for the label.
- *   - provider: The module or other provider that provided this block plugin.
- *   - Block plugin specific settings will also be stored here.
- * - content: The content of this block.
- * - attributes: array of HTML attributes populated by modules, intended to
- *   be added to the main container tag of this template.
- *   - id: A valid HTML ID and guaranteed unique.
- * - title_attributes: Same as attributes, except applied to the main title
- *   tag that appears in the template.
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the main title tag that appears in the template.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the main title tag that appears in the template.
- *
- * @see template_preprocess_block()
- */
-#}
-<div{{ attributes.addClass('mt-20') }}>
-  {{ title_prefix }}
-  {% if label %}
-    <h2{{ title_attributes }}>{{ label }}</h2>
-  {% endif %}
-  {{ title_suffix }}
-  {% block content %}
-    {{ content }}
-  {% endblock %}
-</div>

web/themes/custom/opdavies/postcss.config.js

@@ -3,7 +3,7 @@ module.exports = {
     'postcss-easy-import': {
       extensions: ['.css', '.pcss']
     },
-    '@tailwindcss/jit': {},
+    tailwindcss: {},
     'postcss-nested': {},
     autoprefixer: {}
   }

web/themes/custom/opdavies/tailwind-colours.js

@@ -1,122 +0,0 @@
-module.exports = {
-  current: 'currentColor',
-  inherit: 'inherit',
-  transparent: 'transparent',
-
-  black: '#000',
-  white: '#fff',
-
-  gray: {
-    50: '#f9f9f9',
-    100: '#f5f5f5',
-    150: '#eee',
-    200: '#aaa',
-    300: '#e2e8f0',
-    400: '#cbd5e0',
-    500: '#a0aec0',
-    600: '#718096',
-    700: '#36393e',
-    750: '#2e3136',
-    800: '#1e2125',
-    900: '#18171b',
-  },
-  red: {
-    100: '#fff5f5',
-    200: '#fed7d7',
-    300: '#feb2b2',
-    400: '#fc8181',
-    500: '#f56565',
-    600: '#e53e3e',
-    700: '#c53030',
-    800: '#9b2c2c',
-    900: '#742a2a',
-  },
-  orange: {
-    100: '#fffaf0',
-    200: '#feebc8',
-    300: '#fbd38d',
-    400: '#f6ad55',
-    500: '#ed8936',
-    600: '#dd6b20',
-    700: '#c05621',
-    800: '#9c4221',
-    900: '#7b341e',
-  },
-  yellow: {
-    100: '#fffff0',
-    200: '#fefcbf',
-    300: '#faf089',
-    400: '#f6e05e',
-    500: '#ecc94b',
-    600: '#d69e2e',
-    700: '#b7791f',
-    800: '#975a16',
-    900: '#744210',
-  },
-  green: {
-    100: '#f0fff4',
-    200: '#c6f6d5',
-    300: '#9ae6b4',
-    400: '#68d391',
-    500: '#48bb78',
-    600: '#38a169',
-    700: '#2f855a',
-    800: '#276749',
-    900: '#22543d',
-  },
-  teal: {
-    100: '#e6fffa',
-    200: '#b2f5ea',
-    300: '#81e6d9',
-    400: '#4fd1c5',
-    500: '#38b2ac',
-    600: '#319795',
-    700: '#2c7a7b',
-    800: '#285e61',
-    900: '#234e52',
-  },
-  blue: {
-    100: '#ebf8ff',
-    200: '#bee3f8',
-    300: '#90cdf4',
-    400: '#63b3ed',
-    500: '#4299e1',
-    600: '#3182ce',
-    700: '#2b6cb0',
-    800: '#2c5282',
-    900: '#2a4365',
-  },
-  indigo: {
-    100: '#ebf4ff',
-    200: '#c3dafe',
-    300: '#a3bffa',
-    400: '#7f9cf5',
-    500: '#667eea',
-    600: '#5a67d8',
-    700: '#4c51bf',
-    800: '#434190',
-    900: '#3c366b',
-  },
-  purple: {
-    100: '#faf5ff',
-    200: '#e9d8fd',
-    300: '#d6bcfa',
-    400: '#b794f4',
-    500: '#9f7aea',
-    600: '#805ad5',
-    700: '#6b46c1',
-    800: '#553c9a',
-    900: '#44337a',
-  },
-  pink: {
-    100: '#fff5f7',
-    200: '#fed7e2',
-    300: '#fbb6ce',
-    400: '#f687b3',
-    500: '#ed64a6',
-    600: '#d53f8c',
-    700: '#b83280',
-    800: '#97266d',
-    900: '#702459',
-  }
-}

web/themes/custom/opdavies/tailwind.config.js

@@ -1,85 +1,38 @@
-const aspectRatio = require('@tailwindcss/aspect-ratio')
+const colors = require('./tailwindcss/colours')
-const colors = require('./tailwind-colours')
 const defaultTheme = require('tailwindcss/defaultTheme')
-const focusVisible = require('./tailwind-plugin-focus-visible')
-const forms = require('@tailwindcss/forms')
-const typography = require('@tailwindcss/typography')
 const { fontFamily } = defaultTheme
 
 module.exports = {
-  darkMode: false,
+  mode: 'jit',
+  darkMode: 'media',
   important: true,
   purge: {
     content: [
-      '../../../../config/**/*.yml',
+      'templates/**/*.html.twig',
-      'opdavies.theme',
+      'tools/tailwindcss/safelist-classes.txt'
-      'tailwind-safelist-classes.txt',
-      'templates/**/*.twig',
     ],
   },
   theme: {
+    outline: {
+      black: '1px solid black',
+      white: '1px solid white'
+    },
     extend: {
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            a: {
-              color: theme('colors.blue.700')
-            },
-            code: {
-              backgroundColor: theme('colors.gray.150'),
-              fontWeight: theme('fontWeight.normal'),
-              paddingBottom: theme('spacing.px'),
-              paddingLeft: theme('spacing.1'),
-              paddingRight: theme('spacing.1'),
-              paddingTop: theme('spacing.px')
-            },
-            h2: {
-              marginBottom: theme('spacing.2'),
-              marginTop: theme('spacing.8')
-            },
-            pre: {
-              backgroundColor: theme('colors.gray.150'),
-              borderRadius: '0',
-              color: theme('colors.gray.800'),
-              padding: theme('spacing.6')
-            },
-            'code::before': false,
-            'code::after': false,
-            'pre code::before': false,
-            'pre code::after': false
-          }
-        },
-        dark: {
-          css: {
-            color: theme('colors.gray.200'),
-
-            code: {
-              backgroundColor: theme('colors.gray.750'),
-              color: theme('colors.gray.200')
-            },
-
-            'blockquote, h2, h3': {
-              color: theme('colors.white')
-            },
-
-            strong: {
-              color: theme('colors.gray.200')
-            }
-          }
-        }
-      }),
       colors,
       fontFamily: {
         sans: [
-          'Inter',
+          'Roboto Condensed',
           'Arial',
           'Helvetica Neue',
           'Helvetica',
           'sans-serif',
         ],
         mono: [
-          'Operator Mono',
+          'ui-monospace',
-          'Roboto Mono',
+          'SFMono-Regular',
+          'SF Mono',
+          'Consolas',
+          'Liberation Mono',
           ...fontFamily.mono
         ]
       },
@@ -98,9 +51,9 @@ module.exports = {
     container: false
   },
   plugins: [
-    aspectRatio,
+    require('./tailwindcss/plugins/focus-visible'),
-    focusVisible,
+    require('@tailwindcss/aspect-ratio'),
-    forms,
+    require('@tailwindcss/forms'),
-    typography
+    require('@tailwindcss/typography')
   ]
 }

web/themes/custom/opdavies/tailwindcss/colours.js

@@ -0,0 +1,13 @@
+let { gray } = require('tailwindcss/colors')
+
+module.exports = {
+  black: '#000',
+  blue: {
+    primary: '#24608A',
+  },
+  current: 'currentColor',
+  gray,
+  inherit: 'inherit',
+  transparent: 'transparent',
+  white: '#fff'
+}