diff --git a/packages/graphql/src/constants/wizardConstants.ts b/packages/graphql/src/constants/wizardConstants.ts index 5bb8c2016353..a4061770872a 100644 --- 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 = { - welcome: 'Welcome to Cypress', + welcome: 'Welcome to Cypress!', selectFramework: 'Project Setup', initializePlugins: 'Initializing Config...', installDependencies: 'Install Dev Dependencies', diff --git a/packages/launchpad/README.md b/packages/launchpad/README.md index be0beda4deb8..1701758d181d 100644 --- 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 +``` \ No newline at end of file diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json index ff753c840b7c..184fdf5159ef 100644 --- 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": [ diff --git a/packages/launchpad/src/design/colors.ts b/packages/launchpad/src/design/colors.ts new file mode 100644 index 000000000000..a5d1353578ba --- /dev/null +++ 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], + }, +} diff --git a/packages/launchpad/src/global/GlobalEmpty.vue b/packages/launchpad/src/global/GlobalEmpty.vue index f09b5236a65e..fba7ee1ae6a2 100644 --- a/packages/launchpad/src/global/GlobalEmpty.vue +++ b/packages/launchpad/src/global/GlobalEmpty.vue @@ -1,30 +1,29 @@ @@ -39,7 +38,7 @@ const files = ref([]) const uploadName = ref('') const projectUpload = ref() -const selectProject = (file: File) => { uploadName.value = file.name} +const selectProject = (file: File) => { uploadName.value = file.name } watch(files, (newVal) => { const uploadLength = newVal.length; diff --git a/packages/launchpad/src/images/cypress-dark.png b/packages/launchpad/src/images/cypress-dark.png new file mode 100644 index 000000000000..e970ae611b3a Binary files /dev/null and b/packages/launchpad/src/images/cypress-dark.png differ diff --git a/packages/launchpad/src/layouts/HeaderBar.vue b/packages/launchpad/src/layouts/HeaderBar.vue index 1a0063f1fc1a..9f871e59ef67 100644 --- a/packages/launchpad/src/layouts/HeaderBar.vue +++ b/packages/launchpad/src/layouts/HeaderBar.vue @@ -1,8 +1,10 @@