fix(launchpad): prevent code colors from leaking out of reporter (#18382)

* fix code colors leaking out of reporter

* remove imports

* change colors to match designs

* use tailwind syntax

packages/frontend-shared/src/styles/prism.scss

@@ -0,0 +1,76 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  @apply text-gray-500;
+	text-shadow: $white 0px 1px;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  @apply text-red-500;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  @apply text-jade-500;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.regex,
+.token.important,
+.token.variable {
+  @apply text-orange-500;
+  @apply bg-gray-50;
+}
+
+.token.operator,
+.token.punctuation {
+  @apply text-gray-500;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.class-name {
+  @apply text-indigo-500;
+}
+
+.token.keyword,
+.token.function {
+  @apply text-purple-500;
+}
+
+.token.comment {
+  @apply text-gray-500;
+}
+
+.line-numbers .line-numbers-rows {
+  @apply border-r-0;
+}
+
+.line-numbers-rows > span:before {
+  @apply text-gray-200;
+}
+
+.line-highlight {
+  @apply bg-gray-100;
+
+	&:before {
+    @apply hidden;
+	}
+}
+
+.test-error-code-frame pre[data-line] {
+  @apply pl-2;
+  @apply relative;
+}

packages/launchpad/src/components/code/InlineCodeEditor.vue

@@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import _ from 'lodash'
 import 'prismjs'
-import '@packages/reporter/src/errors/prism.scss'
+import '@packages/frontend-shared/src/styles/prism.scss'
 import CodeEditor from './CodeEditor.vue'
 import Icon from '@cy/components/Icon.vue'
 import type { FunctionalComponent, SVGAttributes } from 'vue'

packages/launchpad/src/settings/project/ProjectId.vue

@@ -39,7 +39,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { gql } from '@urql/core'
 import 'prismjs'
-import '@packages/reporter/src/errors/prism.scss'
+import '@packages/frontend-shared/src/styles/prism.scss'
 import Icon from '@cy/components/Icon.vue'
 import IconCodeBraces from '~icons/mdi/code-braces'
 import IconDashedSquare from '~icons/si-glyph/square-dashed-2'

packages/launchpad/src/setup/ConfigFile.vue

@@ -48,7 +48,7 @@
     </nav>
     <div
       v-if="tsInstalled"
-      class="relative"
+      class="relative p-4"
     >
       <PrismJs
         :key="language"
@@ -67,7 +67,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import 'prismjs'
-import '@packages/reporter/src/errors/prism.scss'
+import '@packages/frontend-shared/src/styles/prism.scss'
 import { gql } from '@urql/core'
 import PrismJs from 'vue-prism-component'
 import WizardLayout from './WizardLayout.vue'