@md-plugins/quasar-app-extension-q-press 0.1.0-beta.18 → 0.1.0-beta.19

package/README.md

@@ -4,9 +4,9 @@ The Ultimate Markdown Solution for the Quasar Framework.
 
 See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpress/overview) for more information.
 
-> Current beta release: `0.1.0-beta.14`.
+> Current beta release: `0.1.0-beta.19`.
 >
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.31`. TypeScript processing is required.
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.33`. TypeScript processing is required.
 
 ## Features
 

package/dist/index.js

@@ -42,7 +42,7 @@ function extendTypeScriptConfig(typescriptConfig) {
 }
 export default defineIndexScript((api) => {
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.32');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33');
     // here we extend /quasar.config, so we can add some Vite/Vue stuff
     api.extendQuasarConf(async (config) => {
         config.build ??= {};

package/dist/install.js

@@ -7,7 +7,7 @@ import { defineInstallScript } from '@quasar/app-vite';
 import { existsSync } from 'node:fs';
 export default defineInstallScript(async (api) => {
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.32');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33');
     // project must have pinia installed
     if ((await api.getStorePackageName()) !== 'pinia') {
         console.error('-----------------------------');

package/dist/templates/init/src/_q-press/css/app.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:color';
 @use './fonts.scss';
 
 // Keep this import so Shiki code blocks share the selected qPress theme variables.
@@ -124,16 +125,16 @@ ul {
   }
 
   &--tip {
-    color: scale-color($positive, $lightness: -40%) !important;
-    background-color: scale-color($positive, $lightness: 85%);
+    color: color.scale($positive, $lightness: -40%) !important;
+    background-color: color.scale($positive, $lightness: 85%);
     border-color: $positive;
     .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($positive, $lightness: -40%);
+      color: color.scale($positive, $lightness: -40%);
     }
     .markdown-token {
-      border-color: scale-color($positive, $lightness: -40%);
+      border-color: color.scale($positive, $lightness: -40%);
     }
     & strong {
       font-weight: 700;
@@ -142,16 +143,16 @@ ul {
   }
 
   &--warning {
-    color: scale-color($warning, $lightness: -40%);
-    background-color: scale-color($warning, $lightness: 85%);
-    border-color: scale-color($warning, $lightness: -30%);
+    color: color.scale($warning, $lightness: -40%);
+    background-color: color.scale($warning, $lightness: 85%);
+    border-color: color.scale($warning, $lightness: -30%);
     .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($warning, $lightness: -40%);
+      color: color.scale($warning, $lightness: -40%);
     }
     .markdown-token {
-      border-color: scale-color($warning, $lightness: -40%);
+      border-color: color.scale($warning, $lightness: -40%);
     }
     & strong {
       font-weight: 700;
@@ -160,8 +161,8 @@ ul {
   }
 
   &--danger {
-    color: scale-color($negative, $lightness: -40%);
-    background-color: scale-color($negative, $lightness: 90%);
+    color: color.scale($negative, $lightness: -40%);
+    background-color: color.scale($negative, $lightness: 90%);
     border-color: $negative;
     .markdown-note__title,
     .markdown-link,
@@ -516,7 +517,7 @@ body.q-scroll--lock .q-page > .q-scroll--anchor {
 .markdown-heading .q-badge,
 .header-badge {
   color: $brand-primary;
-  background: scale-color($light-bg, $lightness: 15%);
+  background: color.scale($light-bg, $lightness: 15%);
   vertical-align: super;
   letter-spacing: $letter-spacing-brand;
   padding: 4px 8px;
@@ -602,9 +603,9 @@ body.body--dark {
 
   .markdown-note {
     &:not(.markdown-note--tip, .markdown-note--warning, .markdown-note--danger) {
-      color: scale-color($dark-pill, $lightness: 80%);
+      color: color.scale($dark-pill, $lightness: 80%);
       background-color: $dark-pill;
-      border-color: scale-color($dark-pill, $lightness: 50%);
+      border-color: color.scale($dark-pill, $lightness: 50%);
       .markdown-token {
         border-color: #ddd;
         color: #ddd;
@@ -616,7 +617,7 @@ body.body--dark {
 
     &--tip {
       border-color: $positive;
-      background-color: scale-color($positive, $lightness: -85%);
+      background-color: color.scale($positive, $lightness: -85%);
       .markdown-note__title,
       .markdown-link,
       .markdown-token {
@@ -629,7 +630,7 @@ body.body--dark {
 
     &--warning {
       border-color: $warning;
-      background-color: scale-color($warning, $lightness: -85%);
+      background-color: color.scale($warning, $lightness: -85%);
       .markdown-note__title,
       .markdown-link,
       .markdown-token {
@@ -642,7 +643,7 @@ body.body--dark {
 
     &--danger {
       border-color: $negative;
-      background-color: scale-color($negative, $lightness: -80%);
+      background-color: color.scale($negative, $lightness: -80%);
     }
   }
 
@@ -667,7 +668,7 @@ body.body--dark {
   padding: 4px 8px 4px 28px;
   position: relative;
   border-radius: 3px 5px 5px 0;
-  background: scale-color($brand-light, $lightness: -15%);
+  background: color.scale($brand-light, $lightness: -15%);
   color: $brand-secondary;
   font-size: ($font-size + 2px);
   letter-spacing: $letter-spacing-brand;
@@ -681,7 +682,7 @@ body.body--dark {
     height: 0;
     border: 0 solid transparent;
     border-width: 9px 0 0 11px;
-    border-top-color: scale-color($brand-light, $lightness: -25%);
+    border-top-color: color.scale($brand-light, $lightness: -25%);
   }
 }
 
@@ -689,6 +690,6 @@ body.body--dark .markdown-card-title {
   background: $brand-secondary;
   color: $dark-text;
   &:after {
-    border-top-color: scale-color($brand-secondary, $lightness: -30%);
+    border-top-color: color.scale($brand-secondary, $lightness: -30%);
   }
 }

package/dist/templates/init/src/_q-press/css/code-theme.scss

@@ -104,6 +104,288 @@
   margin-right: 8px;
 }
 
+.twoslash {
+  --twoslash-border-color: rgba(128, 128, 128, 0.5);
+  --twoslash-underline-color: currentColor;
+  --twoslash-highlighted-border: rgba(195, 125, 13, 0.35);
+  --twoslash-highlighted-bg: rgba(195, 125, 13, 0.14);
+  --twoslash-popup-bg: #f8f8f8;
+  --twoslash-popup-color: inherit;
+  --twoslash-popup-shadow: rgba(0, 0, 0, 0.16) 0 8px 24px;
+  --twoslash-docs-color: #69727d;
+  --twoslash-docs-font: $typography-font-family;
+  --twoslash-code-font: inherit;
+  --twoslash-code-font-size: 1em;
+  --twoslash-matched-color: inherit;
+  --twoslash-unmatched-color: #7d8b99;
+  --twoslash-cursor-color: rgba(128, 128, 128, 0.5);
+  --twoslash-error-color: #d45656;
+  --twoslash-error-bg: rgba(212, 86, 86, 0.16);
+  --twoslash-warn-color: #c37d0d;
+  --twoslash-warn-bg: rgba(195, 125, 13, 0.16);
+  --twoslash-tag-color: #3772cf;
+  --twoslash-tag-bg: rgba(55, 114, 207, 0.16);
+  --twoslash-tag-warn-color: var(--twoslash-warn-color);
+  --twoslash-tag-warn-bg: var(--twoslash-warn-bg);
+  --twoslash-tag-annotate-color: #1ba673;
+  --twoslash-tag-annotate-bg: rgba(27, 166, 115, 0.16);
+
+  .twoslash-hover {
+    border-bottom: 1px dotted transparent;
+    position: relative;
+    transition: border-color 0.3s ease;
+  }
+
+  &:hover .twoslash-hover {
+    border-color: var(--twoslash-underline-color);
+  }
+
+  .twoslash-popup-container {
+    position: absolute;
+    z-index: 10;
+    display: inline-flex;
+    flex-direction: column;
+    min-width: max-content;
+    max-width: min(80vw, 560px);
+    color: var(--twoslash-popup-color);
+    background: var(--twoslash-popup-bg);
+    border: 1px solid var(--twoslash-border-color);
+    border-radius: 6px;
+    box-shadow: var(--twoslash-popup-shadow);
+    opacity: 0;
+    pointer-events: none;
+    text-align: left;
+    transform: translateY(1.1em);
+    transition: opacity 0.3s ease;
+    user-select: none;
+  }
+
+  .twoslash-query-persisted .twoslash-popup-container {
+    z-index: 9;
+    transform: translateY(1.5em);
+  }
+
+  .twoslash-hover:hover .twoslash-popup-container,
+  .twoslash-error-hover:hover .twoslash-popup-container,
+  .twoslash-query-persisted .twoslash-popup-container,
+  .twoslash-query-line .twoslash-popup-container {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .twoslash-popup-container:hover {
+    user-select: auto;
+  }
+
+  .twoslash-popup-arrow {
+    position: absolute;
+    top: -4px;
+    left: 1em;
+    width: 6px;
+    height: 6px;
+    pointer-events: none;
+    background: var(--twoslash-popup-bg);
+    border-top: 1px solid var(--twoslash-border-color);
+    border-right: 1px solid var(--twoslash-border-color);
+    transform: rotate(-45deg);
+  }
+
+  .twoslash-popup-code,
+  .twoslash-popup-error,
+  .twoslash-popup-docs {
+    padding: 6px 8px !important;
+  }
+
+  .twoslash-popup-code {
+    font-family: var(--twoslash-code-font);
+    font-size: var(--twoslash-code-font-size);
+  }
+
+  .twoslash-popup-docs,
+  .twoslash-popup-error,
+  .twoslash-popup-docs-tags {
+    font-family: var(--twoslash-docs-font);
+    font-size: 0.8em;
+  }
+
+  .twoslash-popup-docs {
+    color: var(--twoslash-docs-color);
+    border-top: 1px solid var(--twoslash-border-color);
+  }
+
+  .twoslash-popup-error {
+    color: var(--twoslash-error-color);
+    background-color: var(--twoslash-error-bg);
+  }
+
+  .twoslash-popup-docs-tags {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .twoslash-popup-docs-tags,
+  .twoslash-popup-docs-tag-name {
+    margin-right: 0.5em;
+  }
+
+  .twoslash-popup-docs-tag-name {
+    font-family: var(--twoslash-code-font);
+  }
+
+  .twoslash-query-line .twoslash-popup-container {
+    position: relative;
+    margin-bottom: 1.4em;
+    transform: translateY(0.6em);
+  }
+
+  .twoslash-error-line,
+  .twoslash-tag-line {
+    position: relative;
+    min-width: 100%;
+    width: max-content;
+    margin: 0.2em 0;
+    border-left: 3px solid;
+  }
+
+  .twoslash-error-line {
+    color: var(--twoslash-error-color);
+    background-color: var(--twoslash-error-bg);
+    border-left-color: var(--twoslash-error-color);
+    padding: 6px 12px;
+  }
+
+  .twoslash-error-line.twoslash-error-level-warning {
+    color: var(--twoslash-warn-color);
+    background-color: var(--twoslash-warn-bg);
+    border-left-color: var(--twoslash-warn-color);
+  }
+
+  .twoslash-error {
+    padding-bottom: 2px;
+    text-decoration: underline wavy var(--twoslash-error-color);
+    text-underline-offset: 3px;
+  }
+
+  .twoslash-error.twoslash-error-level-warning {
+    text-decoration-color: var(--twoslash-warn-color);
+  }
+
+  .twoslash-completion-cursor {
+    position: relative;
+  }
+
+  .twoslash-completion-cursor .twoslash-completion-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 8;
+    display: inline-block;
+    margin: 3px 0 0 -1px;
+    background: var(--twoslash-popup-bg);
+    border: 1px solid var(--twoslash-border-color);
+    box-shadow: var(--twoslash-popup-shadow);
+    transform: translate(0, 1.2em);
+    user-select: none;
+  }
+
+  .twoslash-completion-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 240px;
+    padding: 4px;
+    font-size: 0.8rem;
+
+    &:hover {
+      user-select: auto;
+    }
+
+    &:before {
+      content: ' ';
+      position: absolute;
+      top: -1.6em;
+      left: -1px;
+      width: 2px;
+      height: 1.4em;
+      background-color: var(--twoslash-cursor-color);
+    }
+
+    li {
+      display: flex;
+      gap: 0.25em;
+      align-items: center;
+      overflow: hidden;
+      line-height: 1em;
+    }
+
+    .twoslash-completions-unmatched {
+      color: var(--twoslash-unmatched-color);
+    }
+
+    .twoslash-completions-matched {
+      color: var(--twoslash-matched-color);
+    }
+
+    .deprecated {
+      text-decoration: line-through;
+      opacity: 0.5;
+    }
+
+    .twoslash-completions-icon {
+      flex: none;
+      width: 1em;
+      color: var(--twoslash-unmatched-color);
+    }
+  }
+
+  .twoslash-highlighted {
+    padding: 1px 2px;
+    margin: -1px -3px;
+    background-color: var(--twoslash-highlighted-bg);
+    border: 1px solid var(--twoslash-highlighted-border);
+    border-radius: 4px;
+  }
+
+  .twoslash-tag-line {
+    display: flex;
+    gap: 0.3em;
+    align-items: center;
+    color: var(--twoslash-tag-color);
+    background-color: var(--twoslash-tag-bg);
+    border-left-color: var(--twoslash-tag-color);
+    padding: 6px 10px;
+
+    .twoslash-tag-icon {
+      width: 1.1em;
+      color: inherit;
+    }
+  }
+
+  .twoslash-tag-line.twoslash-tag-error-line {
+    color: var(--twoslash-error-color);
+    background-color: var(--twoslash-error-bg);
+    border-left-color: var(--twoslash-error-color);
+  }
+
+  .twoslash-tag-line.twoslash-tag-warn-line {
+    color: var(--twoslash-tag-warn-color);
+    background-color: var(--twoslash-tag-warn-bg);
+    border-left-color: var(--twoslash-tag-warn-color);
+  }
+
+  .twoslash-tag-line.twoslash-tag-annotate-line {
+    color: var(--twoslash-tag-annotate-color);
+    background-color: var(--twoslash-tag-annotate-bg);
+    border-left-color: var(--twoslash-tag-annotate-color);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .twoslash * {
+    transition: none !important;
+  }
+}
+
 body.body--light {
   .shiki,
   .shiki span {
@@ -115,6 +397,14 @@ body.body--light {
     background-color: $brand-light-codeblock-bg;
   }
 
+  .twoslash {
+    --twoslash-popup-bg: #ffffff;
+    --twoslash-popup-color: #24292e;
+    --twoslash-border-color: #d0d7de;
+    --twoslash-docs-color: #57606a;
+    --twoslash-unmatched-color: #6e7781;
+  }
+
   .line-highlight:before {
     background: rgba($grey, 0.2);
   }
@@ -225,6 +515,22 @@ body.body--dark {
     background-color: $brand-dark-codeblock-bg;
   }
 
+  .twoslash {
+    --twoslash-popup-bg: #1f2937;
+    --twoslash-popup-color: #e6edf3;
+    --twoslash-border-color: #4b5563;
+    --twoslash-docs-color: #9ca3af;
+    --twoslash-unmatched-color: #9ca3af;
+    --twoslash-error-bg: rgba(248, 113, 113, 0.18);
+    --twoslash-error-color: #f87171;
+    --twoslash-warn-bg: rgba(251, 191, 36, 0.16);
+    --twoslash-warn-color: #fbbf24;
+    --twoslash-tag-bg: rgba(96, 165, 250, 0.18);
+    --twoslash-tag-color: #93c5fd;
+    --twoslash-tag-annotate-bg: rgba(52, 211, 153, 0.16);
+    --twoslash-tag-annotate-color: #6ee7b7;
+  }
+
   .line-highlight:before {
     background: rgba($grey-3, 0.2);
   }

package/dist/templates/init/src/_q-press/css/themes/default.scss

@@ -33,7 +33,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/evergreen.scss

@@ -0,0 +1,69 @@
+@use 'sass:color';
+
+// Evergreen Theme Variables
+$primary: #0f766e;
+$secondary: #3f8f68;
+$accent: #f59e0b;
+
+$positive: #2ecc71;
+$negative: #ff1732;
+$info: #10a0ff;
+$warning: #ffd52d;
+
+$brand-primary: #14b8a6;
+$brand-secondary: #3f8f68;
+$brand-accent: #f59e0b;
+$brand-dark: #173b2f;
+$brand-light: #e6f6ee;
+$brand-medium: #6b8f7a;
+$brand-light-text: #173b2f;
+$brand-light-bg: #f3faf6;
+$brand-dark-bg: #071914;
+$brand-dark-text: #d7f3e6;
+$brand-light-codeblock-bg: #e6f6ee;
+$brand-light-codeblock-text: #0f5132;
+$brand-dark-codeblock-bg: #0e2a22;
+$brand-dark-codeblock-text: #b8f5d4;
+
+$header-btn-color--light: #0f766e;
+$header-btn-hover-color--light: #b45309;
+$header-btn-color--dark: #5eead4;
+$header-btn-hover-color--dark: #fbbf24;
+
+$light-pill: $brand-light;
+$light-text: $brand-light-text;
+$light-bg: $brand-light-bg;
+
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
+$dark-text: $brand-dark-text;
+$dark-bg: $brand-dark-bg;
+
+$separator-color: $brand-accent;
+$separator-color-dark: $brand-accent;
+
+$font-size: 16px;
+$font-size-brand: 16px;
+$font-weight-brand: 500;
+$font-weight-technical: 400;
+$letter-spacing-brand: 0.7px;
+
+$font-family-technical:
+  'Roboto',
+  -apple-system,
+  Avenir,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Helvetica,
+  Arial,
+  sans-serif;
+$font-family-examples: $font-family-technical;
+$font-family-brand: 'Montserrat', $font-family-technical;
+
+$shadow--large: 0 24px 24px 0 rgba($brand-primary, 0.24);
+$shadow--medium: 0 6px 6px 0 rgba($brand-primary, 0.38);
+$shadow--small: 0 6px 6px 0 rgba($brand-primary, 0.28);
+
+// also update QHeader :height-hint
+$header-height: 55px;
+$header-transition: 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
+$header-quick-transition: 0.28s ease-in-out;

package/dist/templates/init/src/_q-press/css/themes/mystic.scss

@@ -38,7 +38,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/newspaper.scss

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/sunrise.scss

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/tawny.scss

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;