chore: update Tailwind to v4 (docker#22666)

- Extract classes to utilities and components.
- Reduce number of colors used.
- Harmonize button colors.
- Restyle admonitions.
- Move **Page options** button to main article.
- Various color tweaks.

Author: ArthurFlag

.github/labeler.yml

@@ -179,7 +179,6 @@ hugo:
           - hugo_stats.json
           - i18n/**
           - layouts/**
-          - postcss.config.js
           - static/**
           - tailwind.config.js
 

assets/css/code.css

@@ -0,0 +1,100 @@
+@layer components {
+  .card {
+    @apply mt-2 mb-2 flex flex-col gap-2 rounded-sm border border-gray-200 p-3;
+    @apply dark:border-gray-700 dark:bg-gray-900;
+    @apply transition-shadow duration-200;
+    &:hover,
+    &:focus {
+      @apply border-gray-300 dark:border-gray-600;
+    }
+  }
+  .card-link:hover {
+    @apply !no-underline;
+  }
+  .card-header {
+    @apply mb-2 flex items-center gap-2;
+    @apply text-gray-700 dark:text-gray-100;
+  }
+  .card-icon {
+    @apply text-gray-700 dark:text-gray-100;
+  }
+  .card-img,
+  .card-img svg {
+    @apply m-0 flex max-h-5 min-h-5 max-w-5 min-w-5 items-center justify-center fill-current;
+  }
+  .card-title {
+    @apply font-semibold;
+  }
+  .card-link {
+    @apply block text-inherit no-underline hover:underline;
+  }
+  .card-description {
+    @apply text-gray-600;
+    @apply dark:text-gray-300;
+  }
+
+  .admonition {
+    @apply relative mb-4 flex w-full flex-col items-start gap-3 rounded-sm px-6 py-4;
+    @apply bg-gray-50 dark:bg-gray-900;
+  }
+  .admonition-header {
+    @apply flex flex-wrap items-center gap-2;
+  }
+  .admonition-title {
+    @apply font-semibold;
+  }
+  .admonition-content {
+    @apply w-full min-w-0 flex-1 flex-wrap overflow-x-auto break-words;
+    color: var(--tw-prose-body);
+  }
+  .admonition-note {
+    @apply border-blue-400 bg-blue-50 text-blue-900;
+    @apply dark:border-blue-600 dark:bg-blue-950 dark:text-blue-100;
+  }
+  .admonition-tip {
+    @apply border-green-400 bg-green-100 text-green-900;
+    @apply dark:border-green-600 dark:bg-green-950 dark:text-green-100;
+  }
+  .admonition-warning {
+    @apply border-yellow-400 bg-yellow-50 text-yellow-900;
+    @apply dark:border-yellow-600 dark:bg-yellow-950 dark:text-yellow-100;
+  }
+  .admonition-danger {
+    @apply border-red-400 bg-red-50 text-red-900;
+    @apply dark:border-red-600 dark:bg-red-950 dark:text-red-100;
+  }
+  .admonition-important {
+    @apply border-purple-400 bg-purple-50 text-purple-900;
+    @apply dark:border-purple-600 dark:bg-purple-950 dark:text-purple-100;
+  }
+  .admonition-icon {
+    @apply flex-shrink-0;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .download-links {
+    @apply block;
+    @apply text-gray-800;
+    @apply dark:text-gray-200;
+  }
+  .download-links a {
+    @apply link;
+  }
+  .download-links-subcontainer {
+    @apply flex flex-wrap gap-2;
+  }
+
+  .card-image {
+    @apply h-12 w-12 overflow-hidden;
+  }
+}
+
+.summary-bar {
+  @apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;
+}

assets/css/components.css

@@ -1,89 +1,106 @@
 /* global styles */
 
-@layer base {
-  [x-cloak=""] {
+[x-cloak=""] {
+  display: none !important;
+}
+/* alpine cloak for small screens only */
+[x-cloak="sm"] {
+  @media (width <= 768px) {
     display: none !important;
   }
-  /* alpine cloak for small screens only */
-  [x-cloak="sm"] {
-    @media (width <= 768px) {
-      display: none !important;
-    }
+}
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  scrollbar-color: var(--color-gray-400) rgba(0, 0, 0, 0.05);
+  &.dark {
+    scrollbar-color: var(--color-gray-700) rgba(255, 255, 255, 0.1);
   }
+}
+
+mark {
+  @apply bg-transparent font-bold text-blue-500 dark:text-blue-800;
+}
 
-  :root {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+/* Hide the clear (X) button for search inputs */
+/* Chrome, Safari, Edge, and Opera */
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
 
-    scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
-    &.dark {
-      scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
+/* Firefox */
+input[type="search"]::-moz-search-cancel-button {
+  display: none;
+}
+
+/* Internet Explorer and Edge (legacy) */
+input[type="search"]::-ms-clear {
+  display: none;
+}
+.prose {
+  code {
+    @apply !bg-gray-100;
+  }
+  & .highlight,
+  & :not(pre) > code {
+    .dark & {
+      background: var(--color-gray-900) !important;
+      border-color: var(--color-gray-700) !important;
     }
   }
+}
 
-  mark {
-    @apply bg-transparent font-bold text-blue-light dark:text-blue-dark;
+.prose {
+  li {
+    @apply my-2;
+    > :last-child,
+    > :first-child {
+      margin: 0;
+    }
   }
-
-  /* Hide the clear (X) button for search inputs */
-  /* Chrome, Safari, Edge, and Opera */
-  input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
+  hr {
+    @apply mt-8 mb-4;
   }
-  
-  /* Firefox */
-  input[type="search"]::-moz-search-cancel-button {
-    display: none;
+  :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 500 !important;
+    margin-top: 0;
+    margin-bottom: 0.2em !important;
+    line-height: 1.1111111;
   }
-  
-  /* Internet Explorer and Edge (legacy) */
-  input[type="search"]::-ms-clear {
-    display: none;
+  > h2 {
+    @apply mt-5! mb-3! text-3xl!;
+    a {
+      @apply hover:no-underline!;
+    }
   }
-}
-
-/* utility classes */
-
-@layer utilities {
-  .link {
-    @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
+  > h3 {
+    @apply text-2xl!;
+    a {
+      @apply hover:no-underline!;
+    }
   }
-
-  .invertible {
-    @apply dark:hue-rotate-180 dark:invert dark:filter;
+  > h4 {
+    a {
+      @apply hover:no-underline!;
+    }
   }
-
-  .bg-pattern-blue {
-    background-color: theme(colors.white / 50%);
-    background-image: url('/assets/images/bg-pattern-blue.webp');
-    background-blend-mode: overlay;
-    background-size: cover;
-    background-repeat: none;
-    .dark & {
-      background-color: theme(colors.black / 70%);
+  > h5 {
+    a {
+      @apply hover:no-underline!;
     }
   }
+  ol {
+    list-style-type: decimal;
+  }
 
-  .bg-pattern-purple {
-    background-color: theme(colors.white / 50%);
-    background-image: url('/assets/images/bg-pattern-purple.webp');
-    background-blend-mode: overlay;
-    background-size: cover;
-    background-repeat: none;
-    .dark & {
-      background-color: theme(colors.black / 70%);
-    }
+  ol ol {
+    list-style-type: lower-alpha;
   }
 
-  .bg-pattern-verde {
-    background-color: theme(colors.white / 50%);
-    background-image: url('/assets/images/bg-pattern-verde.webp');
-    background-blend-mode: overlay;
-    background-size: cover;
-    background-repeat: none;
-    .dark & {
-      background-color: theme(colors.black / 70%);
-    }
+  ol ol ol {
+    list-style-type: lower-roman;
   }
 }