@md-plugins/quasar-app-extension-q-press 0.1.0-beta.2 → 0.1.0-beta.21

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

@@ -0,0 +1,634 @@
+.markdown-code {
+  margin: 0;
+  position: relative;
+  overflow: auto;
+  border-radius: inherit;
+
+  &.twoslash {
+    overflow: visible;
+  }
+
+  code {
+    display: block;
+    padding: 16px;
+    width: fit-content;
+    min-width: 100%;
+
+    font-size: ($font-size - 2px);
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    line-height: 1.5em;
+    tab-size: 2;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    hyphens: none;
+
+    color: inherit;
+    background-color: inherit;
+    border-radius: inherit;
+  }
+
+  &--copying {
+    .c-lpref,
+    .c-line,
+    .line.diff.remove {
+      display: none;
+    }
+  }
+
+  .line {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    margin: 0;
+    line-height: inherit;
+    text-align: left;
+  }
+
+  &:has(.twoslash-query-persisted) > code {
+    padding-bottom: calc(16px + 2.2em);
+  }
+}
+
+.c-line {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  &:before {
+    content: ' ';
+    position: absolute;
+    pointer-events: none;
+    top: 1px;
+    left: -16px;
+    right: -16px;
+    height: 1.5em;
+  }
+}
+
+.c-lpref {
+  position: sticky;
+  pointer-events: none;
+  user-select: none;
+  left: 8px;
+  padding: 0 16px 0 8px;
+  margin: -16px 0 -16px -8px;
+  &:before {
+    border-right: 1px solid;
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: -1px;
+    left: -8px;
+    right: 8px;
+    bottom: -2px;
+    z-index: -1;
+    height: 1.5em;
+  }
+}
+
+.line-add:before,
+.token.inserted-sign:before {
+  background: rgba($positive, 0.4);
+}
+
+.token.deleted-sign,
+.token.inserted-sign {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: -16px;
+    right: -16px;
+    bottom: 0;
+  }
+}
+
+.token.prefix {
+  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-query-persisted {
+    display: inline-block;
+  }
+
+  .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 {
+    color: var(--shiki-light);
+  }
+
+  .markdown-code {
+    color: $brand-light-codeblock-text;
+    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);
+  }
+  .line-rem:before,
+  .token.deleted-sign:before {
+    background: rgba($negative, 0.2);
+  }
+
+  .c-lpref {
+    color: $brand-light-codeblock-text;
+    &:before {
+      border-right-color: $separator-color;
+      background: $brand-light-codeblock-bg;
+    }
+  }
+
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7d8b99;
+  }
+
+  .token {
+    &.punctuation {
+      color: #5f6364;
+    }
+    &.important {
+      font-weight: 400;
+    }
+    &.bold {
+      font-weight: 700;
+    }
+    &.italic {
+      font-style: italic;
+    }
+    &.entity {
+      cursor: help;
+    }
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.function-name,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #c92c2c;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.function,
+  .token.builtin,
+  .token.inserted {
+    color: #2f9c0a;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: #da5a20;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword,
+  .token.class-name {
+    color: #1990b8;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.tab:not(:empty):before,
+  .token.cr:before,
+  .token.lf:before {
+    color: #e0d7d1;
+  }
+}
+
+body.body--dark {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark);
+  }
+
+  .markdown-code {
+    color: $brand-dark-codeblock-text;
+    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);
+  }
+  .line-rem:before,
+  .token.deleted-sign:before {
+    background: rgba($red, 0.3);
+  }
+
+  .c-lpref {
+    color: $brand-light-codeblock-text;
+    &:before {
+      border-right-color: $separator-dark-color;
+      background: $brand-dark-codeblock-bg;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #d4d0ab;
+  }
+
+  .token.punctuation {
+    color: #fefefe;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #ffa07a;
+  }
+
+  .token.boolean,
+  .token.number {
+    color: #00e0e0;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #abe338;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #00e0e0;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function {
+    color: #ffd700;
+  }
+
+  .token.keyword {
+    color: #00e0e0;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #ffd700;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: 700;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}

package/src/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-primary, $lightness: -80%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/src/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/src/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-primary, $lightness: -80%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/src/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-primary, $lightness: -60%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;