@myst-theme/styles 1.0.0 → 1.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @myst-theme/styles@1.0.0 build
+> @myst-theme/styles@1.1.0 build
 > tailwindcss -m -i ./app.css -o ../docs/public/tailwind.css
 
 Browserslist: caniuse-lite is outdated. Please run:
@@ -8,4 +8,4 @@ Browserslist: caniuse-lite is outdated. Please run:
 
 Rebuilding...
 
-Done in 3895ms.
+Done in 3031ms.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @myst-theme/styles
 
+## 1.1.0
+
+### Patch Changes
+
+- 9d1a6d3: Fix inline image styling that was incorrectly applied to images in figures and tables
+- cbe05f1: Make table cells match table headers
+- c519f9b: Standardize link styles
+
+## 1.0.1
+
 ## 1.0.0
 
 ### Patch Changes

package/button.css

@@ -1,8 +1,18 @@
-a.button,
-cite.button a {
-  @apply px-4 py-2 font-bold rounded no-underline;
-  @apply text-white bg-blue-500 whitespace-nowrap;
-  &:hover {
-    @apply bg-blue-700;
+/* TODO: Separate out theme styling from component styling more effectively https://github.com/jupyter-book/myst-theme/issues/763 */
+@layer components {
+  a.button,
+  button.button,
+  span.button,
+  cite.button a {
+    @apply px-4 py-2 font-bold rounded no-underline cursor-pointer;
+    @apply text-white dark:text-white hover:text-white dark:hover:text-white;
+    @apply bg-blue-500 whitespace-nowrap;
+    &:hover {
+      @apply bg-blue-700;
+    }
+    /* Hide external link icon on buttons */
+    .external-link-icon {
+      @apply hidden;
+    }
   }
 }

package/hover.css

@@ -1,41 +1,49 @@
-.hover-card-content {
-  animation-duration: 0.6s;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 10;
-}
-.hover-card-content[data-side='top'] {
-  animation-name: slideUp;
-}
-.hover-card-content[data-side='bottom'] {
-  animation-name: slideDown;
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+@layer components {
+  .hover-card-content {
+    animation-duration: 0.6s;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    z-index: 10;
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  .hover-card-content[data-side='top'] {
+    animation-name: slideUp;
+  }
+  .hover-card-content[data-side='bottom'] {
+    animation-name: slideDown;
   }
-}
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
 
-.hover-document {
-  @apply text-sm bg-white border rounded shadow-xl dark:bg-slate-800 border-gray-50;
-}
+  .hover-document {
+    @apply text-sm bg-white border rounded shadow-xl dark:bg-slate-800 border-gray-50;
+  }
 
-.hover-link {
-  @apply font-normal text-blue-700 underline-offset-2 decoration-slate-200 dark:decoration-slate-600 dark:text-blue-100 hover:text-blue-500;
+  /* Hoverable links: dotted underline */
+  .hover-link {
+    @apply decoration-dotted;
+  }
+
+  /* Non-link hover elements (e.g., abbreviations): gray dotted underline */
+  .hover-text {
+    @apply underline decoration-dotted decoration-[0.1em] underline-offset-[0.15em] decoration-gray-500 dark:decoration-gray-400 cursor-help;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/styles",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "index.js",
   "style": "app.css",
   "scripts": {
@@ -9,6 +9,10 @@
   },
   "author": "Rowan Cockett <rowan@curvenote.com>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jupyter-book/myst-theme.git"
+  },
   "bugs": {
     "url": "https://github.com/jupyter-book/myst-theme/issues"
   },

package/typography.css

@@ -8,8 +8,22 @@
   }
 }
 
+@layer components {
+  /* Links: blue with underline */
+  .link,
+  .hover-link {
+    @apply text-blue-700 dark:text-blue-400 underline decoration-[0.1em] underline-offset-[0.15em] decoration-blue-400 dark:decoration-blue-500 hover:text-blue-500 dark:hover:text-blue-300 hover:decoration-blue-500 dark:hover:decoration-blue-300;
+  }
+
+  /* External link icon (styles the ArrowTopRightOnSquareIcon component) */
+  .external-link-icon {
+    @apply inline-block w-[0.85em] h-[0.85em] ml-0.5 align-baseline opacity-80;
+  }
+}
+
 @layer base {
-  .prose table td {
+  .prose table td,
+  .prose table th {
     @apply p-1 align-top sm:p-2;
   }
   .prose table p,
@@ -35,13 +49,15 @@
   .prose dd {
     @apply ml-8;
   }
-  /* Keep inline images inside text flow from forcing line breaks */
-  .article p img,
-  .article table img,
-  .article dd img,
-  .prose p img,
-  .prose table img,
-  .prose dd img {
+  /* Inline images (direct children of paragraphs, with or without links) */
+  .article p > img,
+  .article p > a > img,
+  .article dd > img,
+  .article dd > a > img,
+  .prose p > img,
+  .prose p > a > img,
+  .prose dd > img,
+  .prose dd > a > img {
     margin: 0;
     display: inline-block;
     max-height: 1.2em;