Update some alert colors to match design system (#5990)

* Update some colors to match design system * remove extraneous warnings
cypress-io · Nov 8, 2024 · c292968 · c292968
1 parent d82b073
commit c292968
Show file tree

Hide file tree

Showing 86 changed files with 197 additions and 95 deletions.
diff --git a/docs/app/component-testing/angular/examples.mdx b/docs/app/component-testing/angular/examples.mdx
@@ -6,7 +6,7 @@ sidebar_label: Examples
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to mount an Angular component
 - How to pass data to an Angular component

diff --git a/docs/app/component-testing/angular/overview.mdx b/docs/app/component-testing/angular/overview.mdx
@@ -6,7 +6,7 @@ sidebar_label: Overview
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up component tests in Angular
 - How to configure Cypress for Angular projects

diff --git a/docs/app/component-testing/component-framework-configuration.mdx b/docs/app/component-testing/component-framework-configuration.mdx
@@ -9,7 +9,7 @@ sidebar_label: Configuration
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to configure Cypress for component testing
 - How to use a custom index file

diff --git a/docs/app/component-testing/custom-frameworks.mdx b/docs/app/component-testing/custom-frameworks.mdx
@@ -5,7 +5,7 @@ sidebar_position: 100
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to customize Cypress to support your favorite framework
 - How to create a custom Framwork Definition and Mount Adapter for your framework

diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx
@@ -9,7 +9,7 @@ sidebar_label: Get Started
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Component Testing for React, Angular, Vue, or Svelte
 - How to write your first component test

diff --git a/docs/app/component-testing/react/examples.mdx b/docs/app/component-testing/react/examples.mdx
@@ -6,7 +6,7 @@ sidebar_label: Examples
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to mount a React component
 - How to pass data to a React component

diff --git a/docs/app/component-testing/react/overview.mdx b/docs/app/component-testing/react/overview.mdx
@@ -6,7 +6,7 @@ sidebar_label: Overview
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up component tests in React
 - How to use Cypress with different React frameworks and bundlers

diff --git a/docs/app/component-testing/styling-components.mdx b/docs/app/component-testing/styling-components.mdx
@@ -9,7 +9,7 @@ sidebar_position: 20
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - Why you should test your component's styles
 - How to render components correctly with their CSS styles

diff --git a/docs/app/component-testing/svelte/examples.mdx b/docs/app/component-testing/svelte/examples.mdx
@@ -6,7 +6,7 @@ sidebar_label: Examples
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to mount a Svelte component
 - How to pass props to a Svelte component

diff --git a/docs/app/component-testing/svelte/overview.mdx b/docs/app/component-testing/svelte/overview.mdx
@@ -6,7 +6,7 @@ sidebar_label: Overview
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up component tests in Svelte
 - How to configure Cypress for Svelte projects

diff --git a/docs/app/component-testing/vue/examples.mdx b/docs/app/component-testing/vue/examples.mdx
@@ -6,7 +6,7 @@ sidebar_label: Examples
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to mount Vue components in Cypress
 - How to pass props and events to components

diff --git a/docs/app/component-testing/vue/overview.mdx b/docs/app/component-testing/vue/overview.mdx
@@ -6,7 +6,7 @@ sidebar_label: Overview
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up component tests in Vue
 - How to configure Cypress for Vue projects

diff --git a/docs/app/continuous-integration/aws-codebuild.mdx b/docs/app/continuous-integration/aws-codebuild.mdx
@@ -4,7 +4,7 @@ title: AWS CodeBuild
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Cypress tests in AWS CodeBuild
 - How to cache dependencies and build artifacts

diff --git a/docs/app/continuous-integration/bitbucket-pipelines.mdx b/docs/app/continuous-integration/bitbucket-pipelines.mdx
@@ -4,7 +4,7 @@ title: Bitbucket Pipelines
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Bitbucket Pipelines to run Cypress tests
 - How to cache dependencies and build artifacts

diff --git a/docs/app/continuous-integration/circleci.mdx b/docs/app/continuous-integration/circleci.mdx
@@ -4,7 +4,7 @@ title: CircleCI
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up CircleCI to run Cypress tests with the Cypress Orb
 - How to cache dependencies and build artifacts

diff --git a/docs/app/continuous-integration/github-actions.mdx b/docs/app/continuous-integration/github-actions.mdx
@@ -4,7 +4,7 @@ title: GitHub Actions
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Cypress tests in GitHub Actions
 - How to cache dependencies and build artifacts

diff --git a/docs/app/continuous-integration/gitlab-ci.mdx b/docs/app/continuous-integration/gitlab-ci.mdx
@@ -4,7 +4,7 @@ title: GitLab CI
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up GitLab CI/CD to run Cypress tests
 - How to cache dependencies and build artifacts

diff --git a/docs/app/continuous-integration/overview.mdx b/docs/app/continuous-integration/overview.mdx
@@ -5,7 +5,7 @@ sidebar_position: 10
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Cypress in Continuous Integration (CI)
 - How to run Cypress in CI, record tests, and run tests in parallel

diff --git a/docs/app/core-concepts/best-practices.mdx b/docs/app/core-concepts/best-practices.mdx
@@ -5,7 +5,7 @@ sidebar_position: 80
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - Best practices on how to organize tests, log in, and control state
 - Strategies for selecting elements and assigning return values

diff --git a/docs/app/core-concepts/interacting-with-elements.mdx b/docs/app/core-concepts/interacting-with-elements.mdx
@@ -5,7 +5,7 @@ sidebar_position: 35
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How Cypress determines if an element is actionable
 - How to debug when elements are not actionable

diff --git a/docs/app/core-concepts/introduction-to-cypress.mdx b/docs/app/core-concepts/introduction-to-cypress.mdx
@@ -14,7 +14,7 @@ it.
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - The rules Cypress follows so you can productively test your application
 - How to query elements in Cypress

diff --git a/docs/app/core-concepts/open-mode.mdx b/docs/app/core-concepts/open-mode.mdx
@@ -5,7 +5,7 @@ sidebar_position: 60
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - The different sections of the Cypress app in open mode
 - The information surfaced in the app's Command Log

diff --git a/docs/app/core-concepts/retry-ability.mdx b/docs/app/core-concepts/retry-ability.mdx
@@ -5,7 +5,7 @@ sidebar_position: 50
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - The difference between commands, queries, and assertions in Cypress
 - How Cypress retries multiple assertions

diff --git a/docs/app/core-concepts/test-isolation.mdx b/docs/app/core-concepts/test-isolation.mdx
@@ -5,7 +5,7 @@ sidebar_position: 45
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How Cypress ensures test isolation
 - How to configure test isolation in end-to-end and component testing

diff --git a/docs/app/core-concepts/testing-types.mdx b/docs/app/core-concepts/testing-types.mdx
@@ -5,7 +5,7 @@ sidebar_position: 20
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - The differences between end-to-end and component tests
 - The benefits and considerations for each type of test

diff --git a/docs/app/core-concepts/variables-and-aliases.mdx b/docs/app/core-concepts/variables-and-aliases.mdx
@@ -5,7 +5,7 @@ sidebar_position: 40
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - Common patterns for handling asynchronous code in Cypress
 - When to assign variables and when not to

diff --git a/docs/app/core-concepts/writing-and-organizing-tests.mdx b/docs/app/core-concepts/writing-and-organizing-tests.mdx
@@ -5,7 +5,7 @@ sidebar_position: 30
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to organize your tests in Cypress and the types of supported files
 - How to write tests in Cypress including hooks, exclusions, and configurations

diff --git a/docs/app/end-to-end-testing/testing-your-app.mdx b/docs/app/end-to-end-testing/testing-your-app.mdx
@@ -10,7 +10,7 @@ slug: /app/end-to-end-testing/testing-your-app
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to start your server and test your application with Cypress
 - How to configure Cypress

diff --git a/docs/app/end-to-end-testing/writing-your-first-end-to-end-test.mdx b/docs/app/end-to-end-testing/writing-your-first-end-to-end-test.mdx
@@ -10,7 +10,7 @@ slug: /app/end-to-end-testing/writing-your-first-end-to-end-test
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to write your first end-to-end test in Cypress using an example app
 - How to use Cypress commands to interact with elements on a page

diff --git a/docs/app/get-started/install-cypress.mdx b/docs/app/get-started/install-cypress.mdx
@@ -9,7 +9,7 @@ sidebar_position: 30
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to install Cypress using npm, yarn, or pnpm
 - System requirements for Cypress

diff --git a/docs/app/get-started/open-the-app.mdx b/docs/app/get-started/open-the-app.mdx
@@ -9,7 +9,7 @@ sidebar_position: 40
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to open the Cypress app
 - How to add npm scripts for opening Cypress

diff --git a/docs/app/get-started/why-cypress.mdx b/docs/app/get-started/why-cypress.mdx
@@ -9,13 +9,14 @@ sidebar_position: 10
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#0097A8" /> What you'll learn
 
 - The solutions Cypress provides for testing
 - The features of Cypress App, Cypress Cloud, UI Coverage, and Cypress Accessibility
 - Our mission and what we believe in
 - Key differences between Cypress and other testing tools
-  :::
+
+:::
 
 ## In a nutshell
 

diff --git a/docs/app/guides/accessibility-testing.mdx b/docs/app/guides/accessibility-testing.mdx
@@ -4,7 +4,7 @@ title: Accessibility Testing
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - Strategies for ensuring your application works for users with disabilities
 - What accessibility scans are available via plugins vs [Cypress Accessibility](/accessibility/get-started/introduction)

diff --git a/docs/app/guides/authentication-testing/amazon-cognito-authentication.mdx b/docs/app/guides/authentication-testing/amazon-cognito-authentication.mdx
@@ -8,7 +8,7 @@ description: 'Implement Amazon Cognito authentication in Cypress. Securely manag
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to implement Amazon Cognito authentication in Cypress
 - How to securely manage authentication processes for Cypress end-to-end testing scenarios

diff --git a/docs/app/guides/authentication-testing/auth0-authentication.mdx b/docs/app/guides/authentication-testing/auth0-authentication.mdx
@@ -8,7 +8,7 @@ description: 'Seamlessly implement Auth0 authentication with Cypress. Integrate
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to authenticate with Auth0 in Cypress tests
 - How to adapt an Auth0 app for testing

diff --git a/docs/app/guides/authentication-testing/azure-active-directory-authentication.mdx b/docs/app/guides/authentication-testing/azure-active-directory-authentication.mdx
@@ -4,7 +4,7 @@ title: Azure Active Directory Authentication
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Cypress to test against an Azure Active Directory web app
 - How to authenticate with Azure Active Directory using `cy.origin()`

diff --git a/docs/app/guides/authentication-testing/google-authentication.mdx b/docs/app/guides/authentication-testing/google-authentication.mdx
@@ -8,7 +8,7 @@ description: 'Google Authentication: Cypress Guide. Secure testing with seamless
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to set up Cypress to test authentication with Google
 - How to set Google app credentials in Cypress

diff --git a/docs/app/guides/authentication-testing/okta-authentication.mdx b/docs/app/guides/authentication-testing/okta-authentication.mdx
@@ -8,7 +8,7 @@ description: 'Implement Okta authentication in Cypress end-to-end testing. Ensur
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to test Okta authentication in Cypress
 - How to set Okta redentials in Cypress

diff --git a/docs/app/guides/authentication-testing/social-authentication.mdx b/docs/app/guides/authentication-testing/social-authentication.mdx
@@ -4,7 +4,7 @@ title: Social Authentication
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to authenticate with Auth0 for Tenant with `cy.origin()`
 - How to use `cy.session()` to cache authenticated users

diff --git a/docs/app/guides/conditional-testing.mdx b/docs/app/guides/conditional-testing.mdx
@@ -4,7 +4,7 @@ title: Conditional Testing
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - Why conditional testing is difficult
 - How to overcome the problems with conditional testing

diff --git a/docs/app/guides/cross-browser-testing.mdx b/docs/app/guides/cross-browser-testing.mdx
@@ -4,7 +4,7 @@ title: Cross Browser Testing
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to run tests across multiple browsers
 - Strategies for incorporating cross-browser testing into your CI process

diff --git a/docs/app/guides/cross-origin-testing.mdx b/docs/app/guides/cross-origin-testing.mdx
@@ -5,7 +5,7 @@ e2eSpecific: true
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - What strategies Cypress uses to work around same-origin policy
 - Limitations and workarounds with cross-origin content

diff --git a/docs/app/guides/cypress-studio.mdx b/docs/app/guides/cypress-studio.mdx
@@ -5,7 +5,7 @@ e2eSpecific: true
 
 :::info
 
-##### <Icon name="question-circle" color="#42a1c0" /> What you'll learn
+##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
 
 - How to use Cypress Studio by recording interactions and generate tests
 - How to add new tests and extend existing tests with Cypress Studio