feat(launchpad): add design tokens from Figma (#18223)

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
2026-03-13 21:00:48 -05:00 · 2021-09-24 12:06:07 -04:00
parent 9fde5db7a0
commit fdfc993bdb
12 changed files with 406 additions and 60 deletions
--- a/packages/graphql/src/constants/wizardConstants.ts
+++ b/packages/graphql/src/constants/wizardConstants.ts
@@ -124,7 +124,7 @@ export const WizardStepEnum = enumType({
 })

 export const WIZARD_TITLES: Record<WizardStep, string | null> = {
-  welcome: 'Welcome to Cypress',
+  welcome: 'Welcome to Cypress!',
  selectFramework: 'Project Setup',
  initializePlugins: 'Initializing Config...',
  installDependencies: 'Install Dev Dependencies',
--- a/packages/launchpad/README.md
+++ b/packages/launchpad/README.md
@@ -67,3 +67,12 @@ E2E tests:
 ## from repo root
 yarn workspace @packages/launchpad cypress:open
 ```
+
+## Utility class usage
+
+Windi CSS can create an awesome interactive summary showing our usage of utility classes and design tokens. Running this command will generate this report and serve it on localhost.
+
+```bash
+## from launchpad directory
+yarn windi
+```
--- a/packages/launchpad/package.json
+++ b/packages/launchpad/package.json
@@ -8,6 +8,7 @@
    "clean": "rimraf dist && rimraf ./node_modules/.vite && echo 'cleaned'",
    "clean-deps": "rimraf node_modules",
    "test": "yarn cypress:run && yarn types",
+    "windi": "yarn windicss-analysis",
    "cypress:launch": "cross-env TZ=America/New_York node ../../scripts/cypress open --project ${PWD}",
    "cypress:open": "cross-env TZ=America/New_York node ../../scripts/cypress open-ct --project ${PWD}",
    "cypress:run": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
@@ -57,6 +58,7 @@
    "vue-tsc": "^0.3.0",
    "vue3-file-selector": "^1.0.1",
    "windicss": "3.1.4",
+    "windicss-analysis": "^0.3.4",
    "wonka": "^4.0.15"
  },
  "files": [
--- a/packages/launchpad/src/design/colors.ts
+++ b/packages/launchpad/src/design/colors.ts
@@ -0,0 +1,189 @@
+const colors = {
+  jade: {
+    50: '#E0F6FA',
+    100: '#C2F1DE',
+    200: '#A3E7CB',
+    300: '#69D3A7',
+    400: '#1FA971',
+    500: '#00814D',
+    600: '#005F39',
+    700: '#00442A',
+    800: '#003220',
+    900: '#00291B',
+    1000: '#00261A',
+  },
+  red: {
+    50: '#FBEFF1',
+    100: '#FAD9DF',
+    200: '#F8C4CD',
+    300: '#F59AA9',
+    400: '#E45770',
+    500: '#C62B49',
+    600: '#9F1331',
+    700: '#7A0723',
+    800: '#5E021B',
+    900: '#4F0018',
+    1000: '#490018',
+  },
+  orange: {
+    50: '#F5F4D7',
+    100: '#F3ECB3',
+    200: '#F1E08F',
+    300: '#EDBB4A',
+    400: '#DB7903',
+    500: '#BD5800',
+    600: '#963F00',
+    700: '#702C00',
+    800: '#521F00',
+    900: '#411800',
+    1000: '#391500',
+  },
+  indigo: {
+    50: '#F0F1FF',
+    100: '#DADDFE',
+    200: '#C5C9FD',
+    300: '#9AA2FC',
+    400: '#6470F3',
+    500: '#4956E3',
+    600: '#3A46CC',
+    700: '#2F3AB0',
+    800: '#252E8F',
+    900: '#1C236D',
+    1000: '#151A50',
+  },
+  gray: {
+    50: '#F3F4FA',
+    100: '#E1E3ED',
+    200: '#D0D2E0',
+    300: '#BFC2D4',
+    400: '#AFB3C7',
+    500: '#9095AD',
+    600: '#747994',
+    700: '#5A5F7A',
+    800: '#434861',
+    900: '#2E3247',
+    1000: '#1B1E2E',
+  },
+  teal: {
+    50: '#E0F6FA',
+    100: '#B7E7F0',
+    200: '#90D9E6',
+    300: '#4BBFD2',
+    400: '#0097A8',
+    500: '#007780',
+    600: '#00595D',
+    700: '#004143',
+    800: '#003131',
+    900: '#002828',
+    1000: '#002525',
+  },
+  purple: {
+    50: '#2F0C52',
+    100: '#320E58',
+    200: '#3B1268',
+    300: '#4B1A83',
+    400: '#632AA6',
+    500: '#7F43C9',
+    600: '#A06CE4',
+    700: '#C8A7F5',
+    800: '#DECBF8',
+    900: '#E9DDFA',
+    1000: '#F5F0FB',
+  },
+  yellow: {
+    50: '#F7F4D2',
+    100: '#ECE6A9',
+    200: '#E1D984',
+    300: '#CBBE41',
+    400: '#A18E00',
+    500: '#7E6A00',
+    600: '#644D00',
+    700: '#523800',
+    800: '#452900',
+    900: '#3D1E00',
+    1000: '#391800',
+  },
+  green: {
+    50: '#F5F5D0',
+    100: '#E7E8AB',
+    200: '#DADC89',
+    300: '#BDC44D',
+    400: '#849706',
+    500: '#5B7100',
+    600: '#405500',
+    700: '#2E4000',
+    800: '#233200',
+    900: '#1C2A00',
+    1000: '#192500',
+  },
+  fuchsia: {
+    50: '#FAEFFB',
+    100: '#F7DAF9',
+    200: '#F3C6F8',
+    300: '#ED9FF4',
+    400: '#D65FE3',
+    500: '#B735C7',
+    600: '#901CA2',
+    700: '#6C0F7E',
+    800: '#510862',
+    900: '#400651',
+    1000: '#39054A',
+  },
+  magenta: {
+    50: '#FCEEF5',
+    100: '#FADAEA',
+    200: '#F9C5DF',
+    300: '#F69ECA',
+    400: '#E45DA3',
+    500: '#C53282',
+    600: '#9C1964',
+    700: '#750C4D',
+    800: '#59063D',
+    900: '#490435',
+    1000: '#420333',
+  },
+}
+
+export const customColors = {
+  ...colors,
+  primary: {
+    ...colors.indigo,
+    DEFAULT: colors.indigo[500],
+  },
+  secondary: {
+    ...colors.indigo,
+    DEFAULT: colors.indigo[50],
+  },
+  error: {
+    ...colors.red,
+    DEFAULT: colors.red[400],
+  },
+  caution: {
+    ...colors.red,
+    DEFAULT: colors.red[500],
+  },
+  warning: {
+    ...colors.orange,
+    DEFAULT: colors.orange[500],
+  },
+  'warning-light': {
+    ...colors.orange,
+    DEFAULT: colors.orange[400],
+  },
+  success: {
+    ...colors.jade,
+    DEFAULT: colors.jade[400],
+  },
+  'success-light': {
+    ...colors.jade,
+    DEFAULT: colors.jade[300],
+  },
+  confirm: {
+    ...colors.jade,
+    DEFAULT: colors.jade[500],
+  },
+  'body-gray': {
+    ...colors.gray,
+    DEFAULT: colors.gray[600],
+  },
+}
--- a/packages/launchpad/src/global/GlobalEmpty.vue
+++ b/packages/launchpad/src/global/GlobalEmpty.vue
@@ -1,30 +1,29 @@
 <template>
  <main class="text-center" ref="projectUpload">
-    <h1 class="text-2rem mb-2">{{ t('globalPage.empty.title') }}</h1>
-    <p class="text-lg font-light text-gray-600 mb-6">{{ t('globalPage.empty.helper') }}</p>
-    <FileSelector v-model="files" v-slot="{ openDialog }" allow-multiple >
+    <h1 class="mb-2 text-2rem">{{ t('globalPage.empty.title') }}</h1>
+    <p class="mb-6 text-lg font-light text-body-gray">{{ t('globalPage.empty.helper') }}</p>
+    <FileSelector v-model="files" v-slot="{ openDialog }" allow-multiple>
      <Dropzone v-slot="{ hovered }" @click="openDialog">
        <div
-          class="min-w-220px relative block w-full border-2 bg-gray-50 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 text-center"
+          class="relative block w-full p-12 text-center border-2 border-gray-300 border-dashed rounded-lg min-w-220px bg-gray-50 hover:border-gray-400"
          :class="{ 'border-blue-200': hovered }"
        >
          <IconPlaceholder
-            class="mx-auto max-w-65px h-full relative justify-center w-full text-indigo-600"
+            class="mx-auto max-w-65px h-full relative justify-center w-full text-primary"
          />
          <i18n-t keypath="globalPage.empty.dropText">
-            <button
-              class="text-indigo-600 hover:underline"
-            >
-            <!-- 
+            <button class="text-primary hover:underline">
+              <!-- 
              This button allows keyboard users to fire a click event with the Enter or Space keys, 
              which will be handled by the dropzone's existing click handler.
-             -->
-            {{ t('globalPage.empty.browseManually') }}</button>
+              -->
+              {{ t('globalPage.empty.browseManually') }}
+            </button>
          </i18n-t>
        </div>
      </Dropzone>
    </FileSelector>
-    <div data-testid="upload-name" class="hidden">{{uploadName}}</div>
+    <div data-testid="upload-name" class="hidden">{{ uploadName }}</div>
  </main>
 </template>

@@ -39,7 +38,7 @@ const files = ref<File[]>([])
 const uploadName = ref('')
 const projectUpload = ref<HTMLDivElement>()

-const selectProject = (file: File) => { uploadName.value = file.name}
+const selectProject = (file: File) => { uploadName.value = file.name }

 watch(files, (newVal) => {
  const uploadLength = newVal.length;
--- a/packages/launchpad/src/images/cypress-dark.png
+++ b/packages/launchpad/src/images/cypress-dark.png
--- a/packages/launchpad/src/layouts/HeaderBar.vue
+++ b/packages/launchpad/src/layouts/HeaderBar.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="bg-gray-100 flex items-center p-2 mb-8 justify-between">
-    <div class="flex items-center">
-      <img src="../images/cypress_s.png" class="p-2" />
-      Projects > {{ props.gql.app.activeProject?.title }}
+  <div class="flex items-center justify-between px-6 py-4 border-b">
+    <div class="flex items-center ">
+      <img class="mr-2 w-32px h-32px" src="../images/cypress-dark.png" />
+      <span class="text-primary">Projects</span> 
+      <i-oi-chevron-right class="text-gray-300 h-8px" />
+      <span class="text-body-gray-700">{{ props.gql.app.activeProject?.title }}</span>
    </div>
    <div>
      <Auth :gql="props.gql" />
--- a/packages/launchpad/src/setup/TestingTypeCard.vue
+++ b/packages/launchpad/src/setup/TestingTypeCard.vue
@@ -1,20 +1,23 @@
 <template>
-  <button
-    class="block h-45 border border-gray-200 m-5 p-2 rounded md:h-100 md:w-2/5 md:p-9 md:inline-block"
+  <div
+    class="flex flex-col w-full border border-gray-200 rounded p-30px text text-body-gray-500"
    :role="role"
  >
-    <component 
-      :is="icon" 
-      class="float-left m-5 md:mx-auto md:mb-10 md:float-none"
-    />
-    <p class="text-indigo-700 text-left mt-3 md:text-center">
-      {{ title }}
-    </p>
-    <p 
-      class="text-gray-400 text-sm text-left md:text-center" 
-      v-html="description" 
-    />
-  </button>
+    <div class="border h-152px">
+      <!-- temp wrapper for icon -->
+      <component :is="icon" class="mx-auto mt-4" />
+    </div>
+    <h2 class="mt-4 text-primary text-18px">{{ title }}</h2>
+    <p class="mt-3 text-sm" v-html="description + ' Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed.'" />
+    <div class="flex justify-between mt-4">
+      <span class="flex items-center px-3 py-1 border rounded-full">
+        <i-oi-clock class="mr-2 text-gray-300 w-14px h-14px" />8 min
+      </span>
+      <span class="border rounded-full pt-2px pl-4px text-body-gray-400 w-32px h-32px">
+        <i-akar-icons-triangle-right class="h-24px w-24px" />
+      </span>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/launchpad/src/setup/TestingTypeCards.vue
+++ b/packages/launchpad/src/setup/TestingTypeCards.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-4xl mx-5 mx-auto text-center">
+  <div class="flex justify-center mx-4 md:mx-auto mt-9 max-w-804px gap-24px">
    <TestingTypeCard
      :id="ct.id"
      :title="ct.title"
--- a/packages/launchpad/src/setup/WizardHeader.vue
+++ b/packages/launchpad/src/setup/WizardHeader.vue
@@ -1,7 +1,7 @@
 <template>
-  <h1 class="text-3xl pt-12 text-center">{{ props.gql.title }}</h1>
+  <h1 class="pt-12 font-medium text-center text-32px text-body-gray-900">{{ props.gql.title }}</h1>
  <p 
-    class="text-center text-gray-400 my-2 mx-10" 
+    class="mx-10 mt-3 mb-4 text-center text-body-gray-600 text-18px" 
    v-html="props.gql.description" 
  />
 </template>
--- a/packages/launchpad/windi.config.ts
+++ b/packages/launchpad/windi.config.ts
@@ -1,8 +1,11 @@
 import { defineConfig } from 'windicss/helpers'
 import Colors from 'windicss/colors'
+import { customColors } from './src/design/colors'
 import { map, reduce, kebabCase } from 'lodash'

-const safelist = reduce(Colors, (acc, variants, colorName) => {
+const colors = Object.assign(Colors, customColors)
+
+const safelist = reduce(colors, (acc, variants, colorName) => {
  const name = kebabCase(colorName)

  return `${acc}
@@ -20,6 +23,7 @@ export default defineConfig({
      gridTemplateRows: {
        launchpad: '64px 1fr',
      },
+      colors,
    },
  },
  safelist,
--- a/yarn.lock
+++ b/yarn.lock
@@ -6067,6 +6067,11 @@
    schema-utils "^2.6.5"
    source-map "^0.7.3"

+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.20"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.20.tgz#111b5db0f501aa89b05076fa31f0ea0e0c292cd3"
+  integrity sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==
+
 "@popperjs/core@2.9.2", "@popperjs/core@^2.0.0", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
  version "2.9.2"
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
@@ -10450,6 +10455,16 @@
    jiti "^1.10.1"
    windicss "^3.1.4"

+"@windicss/config@1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.4.4.tgz#addbb8b02188ef0de8d9db73f7bc33edf1446572"
+  integrity sha512-tKV1a/jg5rvRRCuigxgUG1E2xw4lVIlNs+It34YXN8/hvvEN7FQzksAs0aov4+nOvi8deNNP0dv/X3AVtKtrbQ==
+  dependencies:
+    debug "^4.3.2"
+    jiti "^1.12.3"
+    tsup "^5.1.0"
+    windicss "^3.1.7"
+
 "@windicss/plugin-interaction-variants@1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@windicss/plugin-interaction-variants/-/plugin-interaction-variants-1.0.0.tgz#11e412c6fd653899f6cced4e4f7b402eb5456981"
@@ -10468,6 +10483,19 @@
    micromatch "^4.0.4"
    windicss "^3.1.4"

+"@windicss/plugin-utils@^1.1.1":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.4.4.tgz#9989a486d16c587e2f945f145a062a399015210a"
+  integrity sha512-vNMk2IKsEuaTzfqAzUDl/DH9UF+loADAEvXGA2tIB8lKEr1cIJJPea2p6w8SzCCymfsehTs4n55V9F45HO52LQ==
+  dependencies:
+    "@antfu/utils" "^0.3.0"
+    "@windicss/config" "1.4.4"
+    debug "^4.3.2"
+    fast-glob "^3.2.7"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.1.7"
+
 "@xtuc/ieee754@^1.2.0":
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -13862,6 +13890,11 @@ bytes@3.1.0, bytes@^3.0.0:
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==

+cac@^6.7.2, cac@^6.7.3:
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.3.tgz#10410b8611677990cc2e3c8b576d471c1d71b768"
+  integrity sha512-ECVqVZh74qgSuZG9YOt2OJPI3wGcf+EwwuF/XIOYqZBD0KZYLtgPWqFPxmDPQ6joxI1nOlvVgRV6VT53Ooyocg==
+
 cacache@15.0.5:
  version "15.0.5"
  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.5.tgz#69162833da29170d6732334643c60e005f5f17d0"
@@ -15327,7 +15360,7 @@ commander@6.2.1, commander@^6.1.0, commander@^6.2.1:
  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==

-commander@^4.0.1, commander@^4.1.1:
+commander@^4.0.0, commander@^4.0.1, commander@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
@@ -15571,6 +15604,16 @@ connect-history-api-fallback@^1.3.0, connect-history-api-fallback@^1.6.0:
  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==

+connect@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
+  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.1.2"
+    parseurl "~1.3.3"
+    utils-merge "1.0.1"
+
 console-browserify@^1.1.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -17127,6 +17170,13 @@ decamelize@^4.0.0:
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
  integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==

+declass@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/declass/-/declass-0.0.1.tgz#2c3cbda5e4ac66bc445b8bd61aa5449bf6ed39d1"
+  integrity sha512-V1tO9kGH+GLfkeiYCF016HSBcTP5mI+eMusSFgxZv0BzKvUQgI/Xn6FdoFuMwQHEqxKXhaW02s8oZqXPclKPUg==
+  dependencies:
+    cheerio "^1.0.0-rc.3"
+
 decode-uri-component@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -18832,10 +18882,10 @@ es6-weak-map@^2.0.1:
    es6-iterator "^2.0.3"
    es6-symbol "^3.1.1"

-esbuild@^0.12.8:
-  version "0.12.13"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.13.tgz#666e1e6c50dbde40c02824cc60296574ebd588c5"
-  integrity sha512-fnKinmXcW1DMYnf1Ol3ZO0yU7dBDCuPcE4XDwceIy2zqTvB4G0NfonqgdvPMJi/IXRoVi/w9r9O5xxg/SqiAxA==
+esbuild@^0.12.28, esbuild@^0.12.8:
+  version "0.12.29"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.29.tgz#be602db7c4dc78944a9dbde0d1ea19d36c1f882d"
+  integrity sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==

 escalade@^3.0.2, escalade@^3.1.1:
  version "3.1.1"
@@ -20329,7 +20379,7 @@ filter-obj@^1.1.0:
  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=

-finalhandler@~1.1.2:
+finalhandler@1.1.2, finalhandler@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
@@ -20975,6 +21025,15 @@ fs-extra@^0.30.0:
    path-is-absolute "^1.0.0"
    rimraf "^2.2.8"

+fs-extra@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
+  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
@@ -25480,16 +25539,21 @@ jimp@^0.10.3:
    core-js "^3.4.1"
    regenerator-runtime "^0.13.3"

-jiti@^1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.10.1.tgz#bc2a175b9435274dc8659d3d9a121a91c6b3a1af"
-  integrity sha512-qux9juDtAC8HlZxAk/fku73ak4TWNLigRFTNzFShE/kw4bXVFsVu538vLXAxvNyPszXgpX4YxkXfwTYEi+zf5A==
+jiti@^1.10.1, jiti@^1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.3.tgz#fe6f9cb066aa2c37981231dffb1d3f04ab4ebdb2"
+  integrity sha512-p88jl9WzvZYekMS5ZOB61bJ1SPV69o7nEpAU+mFpGzXErqLEg3WvNz3jeXylAiSfLZzvqZssrAu08N3AuvaqwQ==

 jmespath@0.15.0:
  version "0.15.0"
  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=

+joycon@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.0.1.tgz#9074c9b08ccf37a6726ff74a18485f85efcaddaf"
+  integrity sha512-SJcJNBg32dGgxhPtM0wQqxqV0ax9k/9TaUskGDSJkSFSQOEWWvQ3zzWdGQRIUry2j1zA5+ReH13t0Mf3StuVZA==
+
 jpeg-js@^0.3.4:
  version "0.3.7"
  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d"
@@ -26766,6 +26830,11 @@ liftoff@^3.1.0:
    rechoir "^0.6.2"
    resolve "^1.1.7"

+lilconfig@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
+  integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==
+
 line-column@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
@@ -28181,7 +28250,7 @@ mime@2.4.4:
  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==

-mime@^2.4.3, mime@^2.4.4, mime@^2.4.6:
+mime@^2.3.1, mime@^2.4.3, mime@^2.4.4, mime@^2.4.6:
  version "2.5.2"
  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
@@ -29104,7 +29173,7 @@ mute-stream@0.0.8, mute-stream@~0.0.4:
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==

-mz@^2.4.0, mz@^2.5.0:
+mz@^2.4.0, mz@^2.5.0, mz@^2.7.0:
  version "2.7.0"
  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -32062,13 +32131,14 @@ postcss-load-config@^2.0.0:
    cosmiconfig "^5.0.0"
    import-cwd "^2.0.0"

-postcss-load-config@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.0.1.tgz#d214bf9cfec1608ffaf0f4161b3ba20664ab64b9"
-  integrity sha512-/pDHe30UYZUD11IeG8GWx9lNtu1ToyTsZHnyy45B4Mrwr/Kb6NgYl7k753+05CJNKnjbwh4975amoPJ+TEjHNQ==
+postcss-load-config@^3.0.0, postcss-load-config@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
+  integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
  dependencies:
-    cosmiconfig "^7.0.0"
    import-cwd "^3.0.0"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"

 postcss-loader@3.0.0, postcss-loader@^3.0.0:
  version "3.0.0"
@@ -35855,12 +35925,12 @@ rollup@2.38.4:
  optionalDependencies:
    fsevents "~2.3.1"

-rollup@^2.38.5:
-  version "2.39.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.39.1.tgz#7afd4cefd8a332c5102a8063d301fde1f31a9173"
-  integrity sha512-9rfr0Z6j+vE+eayfNVFr1KZ+k+jiUl2+0e4quZafy1x6SFCjzFspfRSO2ZZQeWeX9noeDTUDgg6eCENiEPFvQg==
+rollup@^2.38.5, rollup@^2.56.1:
+  version "2.57.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.57.0.tgz#c1694475eb22e1022477c0f4635fd0ac80713173"
+  integrity sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==
  optionalDependencies:
-    fsevents "~2.3.1"
+    fsevents "~2.3.2"

 rst-selector-parser@^2.2.3:
  version "2.2.3"
@@ -36960,6 +37030,15 @@ sinon@^10.0.0:
    nise "^4.1.0"
    supports-color "^7.1.0"

+sirv@^1.0.12:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.17.tgz#86e2c63c612da5a1dace1c16c46f524aaa26ac45"
+  integrity sha512-qx9go5yraB7ekT7bCMqUHJ5jEaOC/GXBxUWv+jeWnb7WzHUFdcQPGWk7YmAwFBaQBrogpuSqd/azbC2lZRqqmw==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
 sisteransi@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -38430,6 +38509,18 @@ success-symbol@^0.1.0:
  resolved "https://registry.yarnpkg.com/success-symbol/-/success-symbol-0.1.0.tgz#24022e486f3bf1cdca094283b769c472d3b72897"
  integrity sha1-JAIuSG878c3KCUKDt2nEctO3KJc=

+sucrase@^3.20.1:
+  version "3.20.1"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.20.1.tgz#1c055e97d0fab2f9857f02461364075b3a4ab226"
+  integrity sha512-BIG59HaJOxNct9Va6KvT5yzBA/rcMGetzvZyTx0ZdCcspIbpJTPS64zuAfYlJuOj+3WaI5JOdA+F0bJQQi8ZiQ==
+  dependencies:
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 sumchecker@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -39407,6 +39498,11 @@ toposort@^1.0.0:
  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=

+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tough-cookie@4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
@@ -39529,6 +39625,11 @@ ts-essentials@^2.0.3:
  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
  integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==

+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-loader@7.0.4:
  version "7.0.4"
  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.4.tgz#5d9b95227de5afb91fdd9668f8920eb193cfe0cc"
@@ -39750,6 +39851,25 @@ tsscmp@1.0.6:
  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
  integrity sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==

+tsup@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-5.1.0.tgz#d9e916648fe6344466057c45c49bf7e0628a2ac2"
+  integrity sha512-shox7rIKPneySkC6CI7py1N1Buqlp++sofTztZxGAESP4od2WrPD/y0FwNo6+XaoXfuzVV6bDAwvCtDpc0bq1A==
+  dependencies:
+    cac "^6.7.2"
+    chalk "^4.1.0"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.12.28"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^3.0.1"
+    resolve-from "^5.0.0"
+    rollup "^2.56.1"
+    sucrase "^3.20.1"
+    tree-kill "^1.2.2"
+
 tsutils@^2.29.0:
  version "2.29.0"
  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
@@ -42522,11 +42642,29 @@ wildcard@^2.0.0:
  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==

-windicss@3.1.4, windicss@^3.1.4:
+windicss-analysis@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/windicss-analysis/-/windicss-analysis-0.3.4.tgz#52d0d4d542f42b57d69ae0d38e3fefc1ecc0ea6a"
+  integrity sha512-3GbzXNQ53UuyMAnrdSw6qaB6+mR8sZziRqPo/ZUamD9L8aQu+paw2NFuJ4CF/FLfPZo+kjUZika7e/XGHCf9kQ==
+  dependencies:
+    "@windicss/plugin-utils" "^1.1.1"
+    cac "^6.7.3"
+    connect "^3.7.0"
+    declass "^0.0.1"
+    fast-glob "^3.2.6"
+    fs-extra "^10.0.0"
+    sirv "^1.0.12"
+
+windicss@3.1.4:
  version "3.1.4"
  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.1.4.tgz#557eaf8e3c08064a309ccb5d887c82c4bce25069"
  integrity sha512-3RBcANxdOy/n4dLVT8+0X409sGI+piO06ARbQ8RncxGuYgdw5Ip3hrhGIYajH67lV+tHc7xNVGxj73amOC9N0g==

+windicss@^3.1.4, windicss@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.1.7.tgz#8a3b8a07ed97c2c1354a6e31820d8059da35f724"
+  integrity sha512-Q/HQ9j+r2R0fdt85zAjccdo11kHWzQmpkuwIUQIO6PSypyDmBTfN14aAy4szLrpgo2woyuHM7Y+kir4IG4qnKQ==
+
 window-size@0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
@@ -43133,7 +43271,7 @@ yaml-unist-parser@^1.2.1:
    tslib "^1.10.0"
    yaml "^1.10.0"

-yaml@^1.10.0, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
  version "1.10.2"
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==