@myst-theme/styles 0.0.1

package/app.css

@@ -0,0 +1,10 @@
+@import './typography.css';
+@import './grid-system.css';
+@import './details.css';
+@import './citations.css';
+@import './figures.css';
+@import './text-spacers.css';
+@import './code-highlight.css';
+@import './math.css';
+@import './cross-references.css';
+@import './block-styles.css';

package/block-styles.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .shaded {
+    @apply p-2 bg-slate-100;
+  }
+  .shaded-children > * {
+    @apply p-2 bg-slate-100;
+  }
+  .rounded-children > * {
+    @apply rounded;
+  }
+}

package/citations.css

@@ -0,0 +1,18 @@
+cite {
+  font-style: normal;
+}
+.cite-group.parenthetical cite::after {
+  content: ';\00a0';
+}
+.cite-group.narrative cite::after {
+  content: ',\00a0';
+}
+.cite-group > span:last-of-type cite::after {
+  content: '';
+}
+.cite-group.parenthetical:before {
+  content: '(';
+}
+.cite-group.parenthetical:after {
+  content: ')';
+}

package/code-highlight.css

@@ -0,0 +1,22 @@
+pre > code > span[data-line-number] {
+  display: block;
+  position: relative;
+  line-height: 1.4rem;
+  padding-right: 1rem;
+}
+pre > code > span[data-highlight='true']::after {
+  content: ' ';
+  position: absolute;
+  right: -0.8rem;
+  top: 0;
+  width: calc(100% + 1.6rem);
+  opacity: 0.1;
+  pointer-events: none;
+  background: #5ca5ee;
+}
+pre > code > span > .linenumber {
+  color: rgb(128, 128, 128);
+}
+pre > code > span[data-highlight='true'] > .linenumber {
+  color: #5ca5ee;
+}

package/cross-references.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .popout > h1,
+  .popout > h2,
+  .popout > h3,
+  .popout > h4,
+  .popout > h5,
+  .popout > h6 {
+    margin-top: 0;
+  }
+}

package/details.css

@@ -0,0 +1,19 @@
+details > summary {
+  list-style: none;
+  transition: margin 150ms ease-out;
+}
+details > summary::marker, /* Latest Chrome, Edge, Firefox */
+details > summary::-webkit-details-marker /* Safari */ {
+  display: none;
+}
+details[open] > summary .details-toggle {
+  transform: rotate(90deg) translateX(-5px) translateY(-5px);
+}
+details[open] > summary {
+  /* Fake the animation */
+  margin-bottom: 10px;
+}
+details[open] .details-body {
+  /* But keep the placement */
+  margin-top: -10px;
+}

package/figures.css

@@ -0,0 +1,10 @@
+figure.quote figcaption {
+  text-align: right;
+}
+figure.quote figcaption > p:before {
+  content: '—';
+  padding-right: 0.5em;
+}
+figure.code > div {
+  margin: 0;
+}

package/grid-system.css

@@ -0,0 +1,45 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .article-grid {
+    @apply grid grid-cols-article-sm md:grid-cols-article-md lg:grid-cols-article-lg xl:grid-cols-article-xl 2xl:grid-cols-article-2xl;
+  }
+  .article-grid > * {
+    /* The default is spanning the body for any child component */
+    @apply col-body;
+  }
+  .article-grid-gap {
+    @apply gap-1 md:gap-2 xl:gap-3 2xl:gap-4;
+  }
+  .article-subgrid-gap {
+    @apply gap-x-1 md:gap-x-2 xl:gap-x-3 2xl:gap-x-4;
+  }
+  /* These columns need more responsive design */
+  .col-margin-left {
+    @apply col-margin-left-sm xl:col-margin-left-lg;
+  }
+  .col-margin-right,
+  .col-margin {
+    @apply col-margin-right-sm lg:col-margin-right-lg;
+  }
+  .col-gutter-page-right {
+    @apply col-gutter-page-right-sm md:col-gutter-page-right-md lg:col-gutter-page-right-lg;
+  }
+  .col-gutter-page-left {
+    @apply col-gutter-page-left-sm md:col-gutter-page-left-md lg:col-gutter-page-left-lg;
+  }
+  .col-body-inset-right {
+    @apply col-body-inset-right-sm lg:col-body-inset-right-lg;
+  }
+  .col-body-inset-left {
+    @apply col-body-inset-left-sm lg:col-body-inset-left-lg;
+  }
+  .col-page-middle {
+    @apply col-page-middle-sm lg:col-page-middle-lg;
+  }
+  .error-content {
+    @apply pt-[80px] prose prose-stone dark:prose-invert break-words mx-5 p-3 max-w-none sm:pl-10 md:max-w-2xl lg:mx-auto xl:max-w-4xl;
+  }
+}

package/index.js

@@ -0,0 +1,182 @@
+const content = [
+  './app/**/*.{js,ts,jsx,tsx}',
+  // Look to the actual packages too (better than node_modules for pnpm)
+  'node_modules/myst-to-react/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  'node_modules/myst-demo/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  'node_modules/@myst-theme/site/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  'node_modules/@myst-theme/frontmatter/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  'node_modules/@myst-theme/jupyter/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  // Duplicate the above in case this is in a submodule
+  '../../packages/myst-to-react/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  '../../packages/myst-demo/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  '../../packages/site/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  '../../packages/frontmatter/{src,dist}/**/*.{js,ts,jsx,tsx}',
+  '../../packages/jupyter/{src,dist}/**/*.{js,ts,jsx,tsx}',
+];
+
+const themeExtensions = {
+  gridTemplateColumns: {
+    'article-sm':
+      '[screen-start screen-inset-start] 0.5rem [page-start page-inset-start body-outset-start body-start gutter-left-start body-inset-start middle-start] 1fr 1fr [gutter-left-end] 1fr 1fr [gutter-right-start] 1fr 1fr [middle-end body-inset-end body-end gutter-right-end body-outset-end page-inset-end page-end] 0.5rem [screen-inset-end screen-end]',
+    'article-md':
+      '[screen-start] 0.25rem [screen-inset-start page-start page-inset-start body-outset-start] 1fr [body-start gutter-left-start] 1rem [body-inset-start] minmax(2ch, 10ch) [middle-start] minmax(2ch, 10ch) [gutter-left-end] minmax(2ch, 10ch) minmax(2ch, 10ch) [gutter-right-start] minmax(2ch, 10ch) [middle-end] minmax(2ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 1fr [body-outset-end page-inset-end page-end screen-inset-end] 0.25rem [screen-end]',
+    'article-lg':
+      '[screen-start] 0.25rem [screen-inset-start page-start] 1rem [page-inset-start body-outset-start] 1fr [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.25rem [screen-end]',
+    'article-xl':
+      '[screen-start] 0.25rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.25rem [screen-end]',
+    'article-2xl':
+      '[screen-start] 0.5rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
+  },
+  gridColumn: {
+    screen: 'screen',
+    'screen-inset': 'screen-inset',
+    page: 'page',
+    'gutter-page-left-sm': 'body',
+    'gutter-page-left-md': 'body-outset / gutter-left',
+    'gutter-page-left-lg': 'page / middle-start',
+    'page-middle-sm': 'body',
+    'page-middle-lg': 'middle',
+    'gutter-page-right-sm': 'body',
+    'gutter-page-right-md': 'gutter-right / body-outset',
+    'gutter-page-right-lg': 'middle-end / page',
+    'page-inset': 'page-inset',
+    body: 'body',
+    'body-outset': 'body-outset',
+    'body-inset': 'body-inset',
+    'body-inset-right-sm': 'body / gutter-right-start',
+    'body-inset-right-lg': 'body / middle',
+    'body-inset-left-sm': 'gutter-left-end / body',
+    'body-inset-left-lg': 'middle / body',
+    'body-left': 'body / gutter-right-start',
+    'body-right': 'gutter-left-end / body',
+    'gutter-left': 'gutter-left',
+    'gutter-outset-left': 'body-outset / gutter-left',
+    'gutter-right': 'gutter-right',
+    'gutter-outset-right': 'gutter-right / body-outset',
+    'margin-left-sm': 'body',
+    'margin-left-lg': 'page / body-start',
+    'margin-right-sm': 'body',
+    'margin-right-lg': 'body-end / page-end',
+    'body-outset-right': 'body / body-outset',
+    'page-inset-right': 'body / page-inset',
+    'page-right': 'body / page',
+    'screen-inset-right': 'body / screen-inset',
+    'screen-right': 'body / screen',
+    'body-outset-left': 'body-outset / body',
+    'page-inset-left': 'page-inset / body',
+    'page-left': 'page / body',
+    'screen-inset-left': 'screen-inset / body',
+    'screen-left': 'screen / body',
+  },
+  // See https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
+  typography: (theme) => ({
+    DEFAULT: {
+      css: {
+        code: {
+          fontWeight: '400',
+        },
+        'code::before': {
+          content: '',
+        },
+        'code::after': {
+          content: '',
+        },
+        'blockquote p:first-of-type::before': { content: 'none' },
+        'blockquote p:first-of-type::after': { content: 'none' },
+        li: {
+          marginTop: '0.25rem',
+          marginBottom: '0.25rem',
+        },
+        'li > p, dd > p, header > p, footer > p': {
+          marginTop: '0.25rem',
+          marginBottom: '0.25rem',
+        },
+      },
+    },
+    invert: {
+      css: {
+        '--tw-prose-code': theme('colors.pink[500]'),
+      },
+    },
+    stone: {
+      css: {
+        '--tw-prose-code': theme('colors.pink[600]'),
+      },
+    },
+  }),
+  keyframes: {
+    load: {
+      '0%': { width: '0%' },
+      '100%': { width: '50%' },
+    },
+    fadeIn: {
+      '0%': { opacity: 0.0 },
+      '25%': { opacity: 0.25 },
+      '50%': { opacity: 0.5 },
+      '75%': { opacity: 0.75 },
+      '100%': { opacity: 1 },
+    },
+  },
+  animation: {
+    load: 'load 2.5s ease-out',
+    'fadein-fast': 'fadeIn 1s ease-out',
+  },
+};
+
+const safeList = [
+  'prose',
+  'col-screen',
+  'col-screen-inset',
+  'col-page',
+  'col-gutter-page-left',
+  'col-page-middle',
+  'col-gutter-page-right',
+  'col-page-inset',
+  'col-body',
+  'col-body-outset',
+  'col-body-inset',
+  'col-body-inset-right',
+  'col-body-inset-left',
+  'col-body-left',
+  'col-body-right',
+  'col-gutter-left',
+  'col-gutter-outset-left',
+  'col-gutter-right',
+  'col-gutter-outset-right',
+  'col-margin-left',
+  'col-margin-right',
+  'col-margin',
+  'col-body-outset-right',
+  'col-page-inset-right',
+  'col-page-right',
+  'col-screen-inset-right',
+  'col-screen-right',
+  'col-body-outset-left',
+  'col-page-inset-left',
+  'col-page-left',
+  'col-screen-inset-left',
+  'col-screen-left',
+  // Row and col span
+  'row-span-1',
+  'row-span-2',
+  'row-span-3',
+  'row-span-4',
+  'row-span-5',
+  'row-span-6',
+  'col-span-1',
+  'col-span-2',
+  'col-span-3',
+  'col-span-4',
+  'col-span-5',
+  'col-span-6',
+  // Utilities
+  'shaded',
+  'shaded-children',
+  'rounded-children',
+];
+
+module.exports = {
+  content,
+  themeExtensions,
+  safeList,
+};

package/jupyter.css

@@ -0,0 +1,10 @@
+.font-system {
+  font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+}
+.jupyter-error {
+  background-color: rgb(255, 221, 221);
+}
+/* Hide the output prompts from jupyter by default */
+.jp-OutputPrompt {
+  display: none;
+}

package/math.css

@@ -0,0 +1,6 @@
+/* Hide katex generated equation numbers */
+.katex .eqn-num {
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@myst-theme/styles",
+  "version": "0.0.1",
+  "main": "index.js",
+  "style": "app.css",
+  "scripts": {
+    "build": "tailwindcss -m -i ./app.css -o ../docs/public/tailwind.css",
+    "dev": "tailwindcss -w -i ./app.css -o ../docs/public/tailwind.css"
+  },
+  "author": "Rowan Cockett <rowan@curvenote.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/executablebooks/myst-theme/issues"
+  },
+  "homepage": "https://github.com/executablebooks/myst-theme",
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "tailwindcss": "^3.2.4"
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,15 @@
+const mystTheme = require('@myst-theme/styles');
+
+module.exports = {
+  darkMode: 'class',
+  content: [
+    // Look to the actual packages too works in development
+    '../packages/myst-to-react/src/**/*.{js,ts,jsx,tsx}',
+    '../packages/myst-demo/src/**/*.{js,ts,jsx,tsx}',
+    '../packages/site/src/**/*.{js,ts,jsx,tsx}',
+    '../packages/frontmatter/src/**/*.{js,ts,jsx,tsx}',
+    '../docs/stories/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: mystTheme.themeExtensions,
+  plugins: [require('@tailwindcss/typography')],
+};

package/text-spacers.css

@@ -0,0 +1,6 @@
+.text-spacer:after {
+  content: '\a0\2219\a0';
+}
+.text-comma:after {
+  content: ',\a0\a0';
+}

package/typography.css

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .smallcaps {
+    font-variant: small-caps;
+  }
+}
+
+@layer base {
+  .prose table td {
+    @apply p-1 sm:p-2 align-top;
+  }
+  .prose table p,
+  .prose table li,
+  .prose figure table {
+    @apply mt-0 mb-0;
+  }
+  .prose table ul > li,
+  .prose table ol > li {
+    @apply pl-0;
+  }
+  .prose table tr:hover td {
+    @apply bg-slate-50 dark:bg-stone-800;
+  }
+  .prose dt > strong {
+    @apply font-bold text-blue-900 dark:text-blue-100;
+  }
+  .prose dd {
+    @apply ml-8;
+  }
+  article.content {
+    min-height: calc(100vh);
+  }
+  .article {
+    @apply prose max-w-none prose-stone dark:prose-invert break-words;
+  }
+}