diff --git a/.claude/commands/figma-to-template-page.md b/.claude/commands/figma-to-template-page.md index b228444a9b3e..dfe3c7f111e3 100644 --- a/.claude/commands/figma-to-template-page.md +++ b/.claude/commands/figma-to-template-page.md @@ -213,7 +213,7 @@ Use neutral class names for inner elements shared across partials (e.g. `section For CTA link styling, the shared selector covers all template partials: ```scss [class*="template-"] { - .cta { @apply text-violet-800 font-semibold font-body no-underline; } + .cta { @apply text-violet-primary font-semibold font-body no-underline; } } ``` diff --git a/BUILD-AND-DEPLOY.md b/BUILD-AND-DEPLOY.md index 8b4277f94459..8365c4b90df0 100644 --- a/BUILD-AND-DEPLOY.md +++ b/BUILD-AND-DEPLOY.md @@ -3746,21 +3746,21 @@ ls -lh public/css/ - Remove unused components - Optimize Tailwind config -2. **Reduce Tailwind Variants** +2. **Scope Tailwind's content scan** - ```javascript - // theme/tailwind.config.js - module.exports = { - variants: { - extend: { - // Only enable variants you use - backgroundColor: ['hover'], - textColor: ['hover'], - } - } - } + Tailwind v4 tree-shakes by default — it only emits CSS for classes it detects + in scanned files. If the bundle is larger than expected, narrow the scan with + explicit `@source` directives in `theme/src/scss/main.scss`: + + ```scss + /* Restrict scanning to only the directories that use Tailwind classes */ + @source "../../layouts/**/*.html"; + @source "../../content/**/*.md"; ``` + Avoid broad globs like `../../**` that pull in `node_modules` or generated + files — these inflate the detected class list and slow builds. + 3. **Code Splitting** - Separate critical CSS - Load non-critical CSS async diff --git a/content/about/_index.md b/content/about/_index.md index a719bdf9fa83..f242a2ee6314 100644 --- a/content/about/_index.md +++ b/content/about/_index.md @@ -25,23 +25,23 @@ sections: - label: Join us anchor: join-us values: - - title: Customers First + - title: Customers first content: When the customer is successful, we are successful, and we always treat our customers’ success as our highest priority. We wear our customers’ shoes to understand the world from their perspective and build experiences to delight them. icon: user color: yellow - - title: Dream Big + - title: Dream big content: We can’t possibly succeed at our audacious mission by taking small, conservative steps. Instead, we are lifelong learners who are intellectually curious, creative, rebellious, and like to dream big. We hire the best and the brightest, imagine a better future together, and empower our employees to invent the future. icon: leaf color: blue - - title: Play to Win, as a Team + - title: Play to win, as a team content: Being a global and inclusive team enables us to build the best products for our customers, and everybody has a seat at the table no matter their background, experiences, or title. We are always raising the bar and maintaining a high level of team performance in our drive to win as a team. We celebrate those wins together, learn from our failures together, and are on this journey as a team together. icon: users - color: fuchsia - - title: Bias for Action + color: green + - title: Bias for action content: We make fast decisions, learn from them, and own the outcomes. Good today is better than perfect tomorrow. When in doubt, we empower action, experimentation, learning, and iteration. We strive to build internal consensus so that we are all bought in, but in cases where we disagree, we disagree, commit, and get going! icon: running color: orange - - title: Be an Owner + - title: Be an owner content: As early employees, we are owners and behave accordingly. We are frugal, spend Pulumi’s resources as if they’re our own, and accomplish more with less. icon: user-tie color: violet diff --git a/content/blog/aws-lambda-container-support/index.md b/content/blog/aws-lambda-container-support/index.md index 7795c9c7debc..c8b4000585f8 100644 --- a/content/blog/aws-lambda-container-support/index.md +++ b/content/blog/aws-lambda-container-support/index.md @@ -25,7 +25,7 @@ Today, AWS announced that AWS Lambda now supports packaging serverless functions -
+
#### AWS Lambda Containers QuickStart diff --git a/content/blog/azure-container-apps/index.md b/content/blog/azure-container-apps/index.md index e2a5c996e00c..16bbd89df148 100644 --- a/content/blog/azure-container-apps/index.md +++ b/content/blog/azure-container-apps/index.md @@ -18,7 +18,7 @@ We are happy to announce same-day support for Azure Container Apps in the Pulumi -
+
#### Azure Container Apps QuickStart diff --git a/content/blog/get-up-and-running-with-azure-synapse-and-pulumi/index.md b/content/blog/get-up-and-running-with-azure-synapse-and-pulumi/index.md index 550f6674b4ed..3152c6d9a1d9 100644 --- a/content/blog/get-up-and-running-with-azure-synapse-and-pulumi/index.md +++ b/content/blog/get-up-and-running-with-azure-synapse-and-pulumi/index.md @@ -19,7 +19,7 @@ The alternative is to use an [infrastructure as code](/what-is/what-is-infrastru -
+
##### Azure Synapse Quick Start diff --git a/content/brand/_index.md b/content/brand/_index.md index 81091edf1af1..6bd564325ff0 100644 --- a/content/brand/_index.md +++ b/content/brand/_index.md @@ -4,65 +4,6 @@ type: page layout: brand meta_desc: | - Official brand logos and colors for use with Pulumi. + Official Pulumi brand resources. Updated brand guidelines coming soon. -sections: - - label: Logos - anchor: logos - - label: Colors - anchor: colors - -logos: - - name: Pulumi wordmark on white - file: logo-on-white - size: 64 - bg: false - - name: Pulumi wordmark on black - file: logo-on-black - size: 64 - bg: true - - name: Pulumi avatar on black - file: avatar-on-black - size: 40 - bg: false - - name: Pulumi avatar on white - file: avatar-on-white - size: 40 - bg: true - - name: Pulumipus (8-bit) - file: pulumipus-8bit - size: 40 - bg: false - -colors: - - name: Yellow - hex: "#f7bf2a" - rgb: "247, 191, 42" - cmyk: "0, 22, 80, 3" - pms: "123 C" - - name: Salmon - hex: "#f26e7e" - rgb: "242, 110, 126" - cmyk: " 0, 52, 45, 5" - pms: "1777 C" - - name: Fuchsia - hex: "#bd4c85" - rgb: "189, 76, 133" - cmyk: "0, 44, 22, 26" - pms: "2062 C" - - name: Purple - hex: "#8a3391" - rgb: "138, 51, 145" - cmyk: "3, 37, 0, 43" - pms: "513 C" - - name: Violet - hex: "#805ac3" - rgb: "128, 90, 195" - cmyk: "26, 41, 0, 24" - pms: "2088 C" - - name: Blue - hex: "#4d5bd9" - rgb: "77, 91, 217" - cmyk: "55, 4, 0, 15" - pms: "2726 C" --- diff --git a/content/cloud-engineering/_index.md b/content/cloud-engineering/_index.md index ffe25bf4e2d9..a88d71f00649 100644 --- a/content/cloud-engineering/_index.md +++ b/content/cloud-engineering/_index.md @@ -94,7 +94,7 @@ benefits: items: - title: Unlock the potential of the modern cloud icon: lock - icon_color: purple + icon_color: violet description: | Modern cloud architectures, such as Kubernetes, have high innovation potential but are complicated to adopt. Cloud engineering empowers teams to tame this complexity with software engineering practices and tools. @@ -108,7 +108,7 @@ benefits: - title: Decrease infrastructure risks icon: alert - icon_color: salmon + icon_color: violet description: | Cloud engineering “shifts risk left” through frequent testing. Every change is reviewed and tested before deployment. Policy-as-Code enforces compliance across every deployment, and access controls prevent unauthorized changes. diff --git a/content/enterprise/_index.md b/content/enterprise/_index.md index 4d96ee1d82b8..985697b6517c 100644 --- a/content/enterprise/_index.md +++ b/content/enterprise/_index.md @@ -123,13 +123,13 @@ capabilities: - title: Federated Services icon: security - icon_color: salmon + icon_color: violet description: | Leverage existing SAML 2.0 and Single Sign-On (SSO) solutions and use the System for Cross-domain Identity Management (SCIM) protocol for automatic identity synchronization with systems like Microsoft Active Directory, Google Workspace, and Okta. - title: Role Based Access Control (RBAC) icon: lock - icon_color: purple + icon_color: violet description: | Control access to sensitive data and operations through fine-grained roles across the entire organization and for specific projects. @@ -147,7 +147,7 @@ capabilities: - title: Security icon: shield - icon_color: salmon + icon_color: violet description: | Pulumi runs in an AWS VPC and our architecture follows industry best practices. All network communication is encrypted using TLS and Pulumi’s endpoints are only accessible via HTTPS. Your data is also encrypted at-rest and Pulumi is compliant with SOC 2 Type II. To learn more about our architecture and security practices, [read our whitepaper](/security/pulumi-cloud-security-whitepaper). diff --git a/content/gads/neo/index.md b/content/gads/neo/index.md index cc1676b3a38f..d5df5f641d9f 100644 --- a/content/gads/neo/index.md +++ b/content/gads/neo/index.md @@ -39,7 +39,7 @@ why_neo: - title: Provision a Kubernetes Cluster description: "Go from prompt to a running EKS cluster with plan/preview and a full audit trail." icon: rocketship - color: salmon + color: violet button_text: Try This in Neo button_url: "https://app.pulumi.com/pulumi/neo?prompt=Provision%20an%20EKS%20cluster%20with%20preview%20and%20an%20audit%20trail&prefer_signup=true" - title: Enforce Guardrails by Default @@ -57,7 +57,7 @@ why_neo: - title: Cut Cloud Waste description: "Find idle or oversized resources across AWS, Azure, and Google Cloud, then right-size or remove safely." icon: cycle - color: fuchsia + color: violet button_text: Try This in Neo button_url: "https://app.pulumi.com/pulumi/neo?prompt=Find%20idle%20and%20oversized%20resources%20and%20propose%20rightsizing&prefer_signup=true" - title: Works Where You Work diff --git a/content/migrate/_index.md b/content/migrate/_index.md index 59470df3617e..8f4eb48a9b4f 100644 --- a/content/migrate/_index.md +++ b/content/migrate/_index.md @@ -78,7 +78,7 @@ offers: Early stage startups get $10K of Pulumi Enterprise for free. - title: Open Source Offer icon: puzzle - icon_color: salmon + icon_color: violet link: /pricing/open-source-free-tier description: | Open source projects and foundations get Pulumi for free. diff --git a/content/migrate/cloudformation.md b/content/migrate/cloudformation.md index 0a0cb1421fee..e974b286fa66 100644 --- a/content/migrate/cloudformation.md +++ b/content/migrate/cloudformation.md @@ -8,7 +8,7 @@ benefits: items: - title: Tame cloud complexity icon: code-window - icon_color: salmon + icon_color: violet description: | Deliver infrastructure from 50+ cloud and SaaS providers. Pulumi’s SDKs provide a complete and consistent interface that offers full access to clouds and abstracts complexity. diff --git a/content/migrate/terraform.md b/content/migrate/terraform.md index 615e4750561c..6724ca3f047d 100644 --- a/content/migrate/terraform.md +++ b/content/migrate/terraform.md @@ -16,7 +16,7 @@ benefits: - title: Tame cloud complexity icon: code-window - icon_color: salmon + icon_color: violet description: | Deliver infrastructure from 100+ cloud and SaaS providers. Pulumi’s SDKs provide a complete and consistent interface that offers full access to clouds and abstracts complexity. diff --git a/content/partner/aws.md b/content/partner/aws.md index 69ab9390d9b1..6f215ee3ffd1 100644 --- a/content/partner/aws.md +++ b/content/partner/aws.md @@ -40,7 +40,7 @@ sections: body: You can deploy the entire breadth of AWS services with Pulumi’s AWS Provider and AWS Cloud Control Provider SDKs. - title: Secure icon: rocketship - color: salmon + color: violet subtitle: Tame secrets sprawl and configuration complexity description: | [Secrets](/docs/iac/concepts/secrets/) sprawl can lead to security breaches. Pulumi ESC provides centralized environments, secrets, and configuration management and orchestration that helps streamline operations, improve traceability, and ensure consistent security practices. diff --git a/content/partner/azure.md b/content/partner/azure.md index cefb2169f05c..2e025c3812c9 100644 --- a/content/partner/azure.md +++ b/content/partner/azure.md @@ -188,7 +188,7 @@ detail_sections: - title: Secrets Management icon: security - icon_color: salmon + icon_color: violet description: Use Pulumi to ensure secret data is encrypted in transit, at rest, and physically anywhere it gets stored. Bring your own preferred cloud encryption provider or use Pulumi's native secrets provider. - title: Multi Cloud @@ -198,7 +198,7 @@ detail_sections: - title: Convenience Functions icon: pen - icon_color: fuchsia + icon_color: violet description: The provider also contains functions to retrieve keys, secrets, and connection strings from all resources that expose them. - title: Automate Delivery @@ -222,12 +222,12 @@ detail_sections: - title: Familiar Concepts icon: collab - icon_color: purple + icon_color: violet description: Azure Resource Manager API is structured around Resource Providers — high-level groups like `storage`, `compute`, or `web`. We map Resource Providers to top-level modules or namespaces in Pulumi SDKs. - title: API Versions icon: nodes - icon_color: salmon + icon_color: violet description: Each resource provider defines one or more API versions, for example, `2015-05-01`, `2020-09-01`, or `2020-08-01-preview`. Every version of every ARM API is available in Pulumi SDKs, and each version has its own module or namespace. - title: All Languages diff --git a/content/partner/gcp.md b/content/partner/gcp.md index 9abe7a5206dc..8206a7f287b8 100644 --- a/content/partner/gcp.md +++ b/content/partner/gcp.md @@ -948,7 +948,7 @@ benefits: items: - title: Tame cloud complexity icon: code-window - icon_color: salmon + icon_color: violet description: | Deliver infrastructure from 50+ cloud and SaaS providers. Pulumi’s SDKs provide a complete and consistent interface that offers full access to clouds and abstracts complexity. diff --git a/content/partners/_index.md b/content/partners/_index.md index 2d3f9474f135..dc5faf4e4e71 100644 --- a/content/partners/_index.md +++ b/content/partners/_index.md @@ -26,12 +26,12 @@ types: - title: Technology Partners icon: name: nodes - color: salmon + color: violet description: Independent vendors integrate their products with Pulumi, enabling comprehensive, end-to-end cloud infrastructure solutions - title: System Integrators icon: name: shield - color: purple + color: violet description: Trusted and experienced advisors that provide customized solutions to clients implementing modern Infrastructure as Code case_studies: diff --git a/content/pricing/open-source-free-tier.md b/content/pricing/open-source-free-tier.md index b6a6588710ad..c42c132e2d9e 100644 --- a/content/pricing/open-source-free-tier.md +++ b/content/pricing/open-source-free-tier.md @@ -8,7 +8,7 @@ hero: title: Pulumi Cloud for Open Source description: | Open-source maintainers who use Pulumi can get free access to - Pulumi Cloud Team Edition, giving your project + Pulumi Cloud Team Edition, giving your project collaboration features, visibility into deployments, and the tools you need to manage infrastructure across contributors. diff --git a/content/product/packages.md b/content/product/packages.md index 0f6d01f09e4b..3a77e70cd18a 100644 --- a/content/product/packages.md +++ b/content/product/packages.md @@ -455,7 +455,7 @@ benefits: items: - title: Use your favorite languages icon: code - icon_color: salmon + icon_color: violet description: | Start building infrastructure just by installing a Go module or a NuGet, npm, or Python package. Create your own packages in every language by authoring in just one language. @@ -467,7 +467,7 @@ benefits: - title: Build faster and smarter icon: guage - icon_color: purple + icon_color: violet description: | Don’t reinvent the wheel. Use or create infrastructure abstractions that encapsulate cloud architectures and best practices with Pulumi components in your favorite languages. diff --git a/content/product/pulumi-cloud.md b/content/product/pulumi-cloud.md index 8f7b80ee77de..24168b580fe1 100644 --- a/content/product/pulumi-cloud.md +++ b/content/product/pulumi-cloud.md @@ -347,7 +347,7 @@ deployment: items: - title: SaaS icon: rocketship - icon_color: purple + icon_color: violet description: | Use Pulumi Cloud without worrying about scaling, availability, fault tolerance, and concurrency. diff --git a/content/product/pulumi-deployments.md b/content/product/pulumi-deployments.md index 73aa4090ac5f..8fa6d958044f 100644 --- a/content/product/pulumi-deployments.md +++ b/content/product/pulumi-deployments.md @@ -44,11 +44,11 @@ options: description: items: - icon: git-merged - icon_color: purple + icon_color: violet title: Git Push to Deploy description: Deploy infrastructure with each push to a branch using your [version control integration](/docs/integrations/version-control/), using pull requests to review changes in ephemeral [Review Stacks](/docs/deployments/deployments/review-stacks/) before deploying them. - icon: upload-to-cloud - icon_color: salmon + icon_color: violet title: Click to Deploy description: Deploy infrastructure with a click of a button from the Pulumi Cloud console. Run update, preview, refresh, and destroy commands. - icon: code-window @@ -56,7 +56,7 @@ options: title: REST API description: Deploy infrastructure by calling the Pulumi Service REST API. You can also use the API to run [Remote Automation API](/docs/platform/deployments/reference/#rest-api) code. - icon: eye - icon_color: fuchsia + icon_color: violet title: Review Stacks description: Automate the creation and deletion of dedicated cloud environments for every pull request, enabling cost-effective reviews. - icon: lightning diff --git a/content/product/self-hosted.md b/content/product/self-hosted.md index 5bbdeea6ab54..e51737873f1f 100644 --- a/content/product/self-hosted.md +++ b/content/product/self-hosted.md @@ -20,7 +20,7 @@ capabilities: items: - title: Cloud Engineering Platform icon: rocketship - icon_color: salmon + icon_color: violet description: | All the capabilities of Pulumi Cloud: state management, role-based access controls, policy and compliance guardrails. - title: Full Control of Data diff --git a/content/product/waitlist.md b/content/product/waitlist.md index fb9dcb965fe0..3646829976d9 100644 --- a/content/product/waitlist.md +++ b/content/product/waitlist.md @@ -23,7 +23,7 @@ benefits: title: Benefits of Insights 2.0 items: - icon: eye - icon_color: purple + icon_color: violet title: Understand Cloud Usage description: Pulumi Insights makes it easy to group, filter, and search for resources across your infrastructure, so you can find that needle (single resource) in the haystack (across many clouds and environments). - icon: guage @@ -31,7 +31,7 @@ benefits: title: Discover Cost Savings description: Pulumi Insights identifies anomalies and trends in resource usage in order to pinpoint potential cost savings. - icon: security - icon_color: salmon + icon_color: violet title: Enforce Compliance description: Pulumi Insights provides comprehensive visibility into security and compliance policy violations, along with the ability to remediate issues directly through code. diff --git a/content/solutions/_index.md b/content/solutions/_index.md index 7f2accbac226..ddbd1c375c5d 100644 --- a/content/solutions/_index.md +++ b/content/solutions/_index.md @@ -141,7 +141,7 @@ personas: items: - title: Write in your favorite language icon: code - icon_color: purple + icon_color: violet description: | Define [infrastructure as code](/what-is/what-is-infrastructure-as-code/) using familiar languages and IDEs: JavaScript, TypeScript, Python, Go, .NET, Java, and YAML. @@ -153,7 +153,7 @@ personas: AWS, Azure, Google Cloud, or Kubernetes. - title: Real abstractions for the cloud icon: abstract-shapes - icon_color: salmon + icon_color: violet description: | Build true cloud abstractions, reduce copy-and-paste, and share and reuse them in your favorite package manager. @@ -163,7 +163,7 @@ personas: items: - title: Universal Infrastructure as Code icon: code-window - icon_color: purple + icon_color: violet description: | Use cloud engineering best practices to plan and version deployments and perform them with perfect auditability. @@ -175,7 +175,7 @@ personas: YAML and DSL sprawl. - title: Deploy Continuously icon: cycle - icon_color: salmon + icon_color: violet description: | Integrate with existing SCM and ALM systems to continuously deliver to many clouds with a single consistent workflow. @@ -185,7 +185,7 @@ personas: items: - title: Policy as Code icon: shield - icon_color: purple + icon_color: violet description: | Pulumi Policies lets you author policies in programming languages to enforce best practices and correct configuration drift. - title: Built-in Secrets @@ -195,7 +195,7 @@ personas: Use Pulumi’s built-in secrets management to ensure that sensitive infrastructure as code configuration is always encrypted. - title: Enforce Standards icon: gavel - icon_color: salmon + icon_color: violet description: | Codify and reuse standard organizational patterns with standard packaging techniques, versioning, and easy patching. leader: @@ -203,7 +203,7 @@ personas: items: - title: Embrace modern architectures icon: nodes-and-rays - icon_color: purple + icon_color: violet description: | Easily adopt container and serverless architectures across applications and infrastructure, and Dev and DevOps. - title: Go Multi-Cloud @@ -213,7 +213,7 @@ personas: Build multi-cloud applications with a single workflow across all clouds — AWS, Azure, Google Cloud, Kubernetes, hybrid or on-premises. - title: Enterprise-Grade icon: buildings - icon_color: salmon + icon_color: violet description: | Use robust security, compliance, and auditing tools with an extensible policy engine for enforcing your organization’s practices. diff --git a/content/solutions/infrastructure-ci-cd.md b/content/solutions/infrastructure-ci-cd.md index 4cc8431f3088..2cf94de44288 100644 --- a/content/solutions/infrastructure-ci-cd.md +++ b/content/solutions/infrastructure-ci-cd.md @@ -39,19 +39,19 @@ benefits: items: - title: Unified delivery pipeline icon: rocketship - icon_color: salmon + icon_color: violet description: | Pulumi allows the same programming languages used for application code to be used for infrastructure. This allows teams to leverage the same testing frameworks and same delivery process for both. - title: Shareable infrastructure components icon: gear - icon_color: salmon + icon_color: violet description: | Pulumi provides a shared way for teams to collaborate with each other on infrastructure through modular and reusable components that can easily be built and shared across the entire organization. - title: Higher order automation icon: eye - icon_color: salmon + icon_color: violet description: | You can increase automation across the entire lifecycle of your cloud infrastructure. You can program logic that orchestrates complex workflows during infrastructure provisioning instead of needing to use Bash scripts or glue code. In addition to its CLI, Pulumi provides the Automation API, a programmatic interface for IaC, so you can build applications that dynamically manage infrastructure. diff --git a/content/solutions/shared-services-platforms.md b/content/solutions/shared-services-platforms.md index 057c3b9e26e2..3ab6db7ccb1d 100644 --- a/content/solutions/shared-services-platforms.md +++ b/content/solutions/shared-services-platforms.md @@ -39,25 +39,25 @@ benefits: items: - title: Languages you love icon: rocketship - icon_color: salmon + icon_color: violet description: | Pulumi allows infrastructure or platform engineering teams to use the programming languages they already use for modeling their infrastructure. They can take advantage of all the existing testing tools, IDE plugins that are standard to their programming languages. - title: Build on any cloud icon: gear - icon_color: salmon + icon_color: violet description: | Pulumi can provision any resource available in the K8s API. Pulumi supports all new resources and features in the K8s API on the same day as the release. Pulumi allows K8s users novel forms of cluster management and app workload deployments. - title: Programmable guardrails icon: eye - icon_color: salmon + icon_color: violet description: | Pulumi also enables “policy as code”, which allows the platform team to enforce cost, security, and best practices across all infrastructure. - title: Reusable components icon: team - icon_color: salmon + icon_color: violet description: | Pulumi makes creating reusable and modular components easy which allows repeatable infrastructure building blocks to be templatized and easily reused. diff --git a/content/topics/kubernetes.md b/content/topics/kubernetes.md index 5645d010761b..a737b30fafe8 100644 --- a/content/topics/kubernetes.md +++ b/content/topics/kubernetes.md @@ -219,7 +219,7 @@ superpowers: cta: Learn more cta_url: "/docs/iac/get-started/kubernetes/" icon_type: cloud - icon_color: salmon + icon_color: violet description: | Support for all clouds including Amazon Elastic Kubernetes Service (EKS), Azure Kubernetes Service (AKS), Google Kubernetes Engine (GKE), DigitalOcean Kubernetes @@ -230,7 +230,7 @@ superpowers: cta: Learn more cta_url: "/docs/insights/" icon_type: cloud-with-nodes - icon_color: purple + icon_color: violet description: | Gain security, compliance, and cost insights into the entirety of an organization’s Kubernetes applications and cloud assets and automatically remediate issues through AI-powered workflows. @@ -247,7 +247,7 @@ superpowers: cta: Learn more cta_url: "/docs/iac/concepts/" icon_type: architecture - icon_color: fuchsia + icon_color: violet description: | YAML and templated DSLs force you to write the same boilerplate code over and over. Pulumi’s Kubernetes library allows you to codify those patterns and best practices so @@ -291,12 +291,12 @@ detail_sections: - title: Secrets Management icon: security - icon_color: salmon + icon_color: violet description: Use Pulumi to ensure secret data is encrypted in transit, at rest, and physically anywhere it gets stored. Bring your own preferred cloud encryption provider or use Pulumi's native secrets provider. - title: Pulumi Kubernetes Operator icon: pen - icon_color: fuchsia + icon_color: violet description: Deploy both Kubernetes resources and cloud infrastructure from within the Kubernetes resource model using a GitOps workflow. Use Pulumi's Flux and ArgoCD integrations along with many other CI/CD integrations. - title: AI-powered Kubernetes Management @@ -312,12 +312,12 @@ detail_sections: - title: Run Compliance Checks icon: testing - icon_color: purple + icon_color: violet description: Pulumi Copilot leverages knowledge about compliance frameworks to analyze your infrastructure and check for policy compliance. - title: Debug Cloud Failures icon: cloud-with-nodes - icon_color: salmon + icon_color: violet description: Pulumi Copilot can access update and deployment logs of your stacks as well as access history, logs, and runtime metrics, so you can easily debug deployment and infrastructure failures. - title: Stay Secure diff --git a/layouts/case-studies/list.html b/layouts/case-studies/list.html index 72dd1c016963..3d9f3157c8a5 100644 --- a/layouts/case-studies/list.html +++ b/layouts/case-studies/list.html @@ -48,9 +48,9 @@

{{ .Description | markdownify }}

{{ if (isset .Params "redirect_to") }} - Read the story → + Read the story → {{ else }} - Read the story → + Read the story → {{ end }}
diff --git a/layouts/community/community-engineering/single.html b/layouts/community/community-engineering/single.html index d896d7409dc1..491a0e93adb5 100644 --- a/layouts/community/community-engineering/single.html +++ b/layouts/community/community-engineering/single.html @@ -35,7 +35,7 @@

Speaking

{{ range $talk := .Params.talks }}
  • - + {{ $talk.event }}
    @@ -48,7 +48,7 @@

    Speaking

    {{ time.Format "01/02/2006" $talk.date }} {{ if $talk.slides }} - • Slides + • Slides {{ end }}
    • diff --git a/layouts/docs/list.html b/layouts/docs/list.html index eb31093cff85..9aa726b87687 100644 --- a/layouts/docs/list.html +++ b/layouts/docs/list.html @@ -25,7 +25,6 @@

    {{ .Params.h1 }}

    {{ else if and (ne .Title "") (not .Params.notitle) }}

    {{ .Title }}

    {{ end }} -
    diff --git a/layouts/docs/main-home.html b/layouts/docs/main-home.html index 47bce6ea72ad..026bf0f7e416 100644 --- a/layouts/docs/main-home.html +++ b/layouts/docs/main-home.html @@ -20,7 +20,7 @@
    -
    +

    {{ .Params.h1 }}

    {{ .Params.description | safeHTML }}
    @@ -90,7 +90,7 @@

    {{ .heading }}

    {{ range .cards }}
    -
    +

    {{ if .emoji }}{{ .emoji }} {{ end }}{{ .heading }} diff --git a/layouts/docs/single.html b/layouts/docs/single.html index 87cd326486a0..c9fe61e960ed 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -22,7 +22,6 @@

    {{ .Params.h1 }}

    {{ else if and (ne .Title "") (not .Params.notitle) }}

    {{ .Title }}

    {{ end }} -
    diff --git a/layouts/gads/gads-template.html b/layouts/gads/gads-template.html index 5417ee7cbe1c..a53ff6f4e3b5 100644 --- a/layouts/gads/gads-template.html +++ b/layouts/gads/gads-template.html @@ -66,7 +66,7 @@

    {{ $feature.sub_title}}

    {{ $feature.description | markdownify }}

    -
    +
    {{ if $feature.ide }} {{ $langCount := len $feature.ide }} {{ if eq $langCount 1 }} @@ -204,7 +204,7 @@
    {{ .Params.stats.community.description }}
    -

    {{ .Params.stats.company.number }}

    +

    {{ .Params.stats.company.number }}

    {{ .Params.stats.company.description }}
    diff --git a/layouts/migrate/section.html b/layouts/migrate/section.html index 461d5debf0bb..e4bff92e5a90 100644 --- a/layouts/migrate/section.html +++ b/layouts/migrate/section.html @@ -10,14 +10,6 @@
    -
    -
    -
    -
    -
    -
    -
    -
    @@ -33,13 +25,6 @@
    {{ $feature.title }}
    -
    -
    -
    -
    -
    -
    -
    @@ -103,14 +88,6 @@
    {{ $feature.title }}
    -
    -
    -
    -
    -
    -
    -
    -
    @@ -131,11 +108,6 @@
    {{ $offer.title }}
    -
    -
    -
    -
    -

    {{ .Params.case_studies.title }}

    diff --git a/layouts/page/about.html b/layouts/page/about.html index 656c899fe817..edcc6d18dc8f 100644 --- a/layouts/page/about.html +++ b/layouts/page/about.html @@ -1,21 +1,16 @@ {{ define "hero" }} -
    -
    +
    +
    Pulumi team photo
    {{ end }} {{ define "main" }} -
    -
    -
    -
    -
    -
    -

    We are Pulumi

    -
    -
    +
    +
    +

    We are Pulumi

    +
      {{ range $item := .Params.sections }} @@ -32,32 +27,23 @@

      We are Pulumi

    -

    Our purpose

    -

    To democratize the cloud for every engineer.

    +

    Our purpose

    +

    To democratize the cloud for every engineer.

    We help engineers ship infrastructure faster with Infrastructure as Code in general-purpose languages.

    Meet our leaders
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    -

    Our Values

    +

    Our values

    -
    -

    Like what we stand for? Join us.

    +
    +
    +

    Like what we stand for? Join us.

    We are looking for new teammates who want to build the future of cloud infrastructure together.

    +
    -
    -
    -
    -
    -

    Pulumi is about community

    +

    Pulumi is about community

    Pulumi's Infrastructure as Code SDK is an open source project and our community inspires everything we do. We're constantly improving the developer experience of building on the cloud because of our community's feedback and contributions. Also, we're backed by venture capitalists who believe in our open source values and the business. Here are some ways that we recognize our community:

    -
    - Pulumipus wearing a medal with two hands raised -
    The Puluminaries
    -

    A group for stellar Pulumi community members who have made "above and beyond" contributions to the community.

    - Meet our Puluminaries +
    +
    The Puluminaries
    +

    A group for stellar Pulumi community members who have made "above and beyond" contributions to the community.

    + Meet our Puluminaries
    -
    - Pulumipus wearing a medal with two hands raised -
    The Pulumiverse
    -

    A place for the Pulumi community to interact and collaborate on Pulumi-based learning resources.

    - Explore Pulumiverse +
    +
    The Pulumiverse
    +

    A place for the Pulumi community to interact and collaborate on Pulumi-based learning resources.

    + Explore Pulumiverse
    -
    - Pulumipus wearing a Pulumi hoodie -
    Pulumi users
    -

    Engineers love Pulumi! Don’t believe us? Check out what our users have to say.

    - Read user quotes +
    +
    Pulumi users
    +

    Engineers love Pulumi! Don't believe us? Check out what our users have to say.

    + Read user quotes
    -
    -
    -
    -
    -

    Our journey

    +

    Our journey

    -

    Pulumi was created to make the cloud vastly simpler (and more fun) to use for developers and engineers.

    +

    Pulumi was created to make the cloud vastly simpler (and more fun) to use for developers and engineers.

    -
    +
    2018
    Jun
    Open source launch
    @@ -143,7 +120,7 @@

    Our journey

    Pulumi Service launch
    $15M Series A fundraise
    -
    +
    2019
    Sep
    Pulumi 1.0 launch
    @@ -155,12 +132,12 @@

    Our journey

    Oct
    $37.5M Series B fundraise
    -
    +
    2021
    Apr
    Pulumi 3.0 launch
    -
    +
    2022
    May
    Universal IaC Launch
    @@ -179,21 +156,9 @@

    Our journey

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Our awards & recognition

    +

    Our awards & recognition

      {{ range first 4 (where site.Data.awards.awards "featured" true) }}
    • @@ -204,19 +169,15 @@

      Our awards & recognition

      {{ end }}
    -
    -
    -
    -
    -

    Press Releases

    +

    Press releases

      {{ range first 2 site.Data.newsroom.releases }}
    • @@ -226,10 +187,10 @@
      {{ .title }}
      • {{ end }}
    - View all press releases + View all press releases
    -

    Recent News

    +

    Recent news

      {{ range first 2 site.Data.newsroom.coverage }}
    • @@ -240,17 +201,13 @@
      {{ .title }}
      • {{ end }}
    - View all recent news + View all recent news
    -
    -
    -
    -
    -

    Join our team

    +

    Join our team

    We are fully remote and hiring!

    Our team is a diverse and talented group of individuals from all walks of life.

    Browse open positions diff --git a/layouts/page/ai-arch.html b/layouts/page/ai-arch.html index fcbde8981160..f9cc0c6ccb62 100644 --- a/layouts/page/ai-arch.html +++ b/layouts/page/ai-arch.html @@ -54,21 +54,13 @@
    {{ $benefit.title }}
    - -
    -
    -
    -
    -
    -
    -
    -
    +

    {{ .Params.get_started.get_started.title }}

    {{ .Params.get_started.get_started.description }}

    {{ .Params.get_started.get_started.cta_text }} diff --git a/layouts/page/automation.html b/layouts/page/automation.html index 5c3d8a1d5faa..a88b27ed5779 100644 --- a/layouts/page/automation.html +++ b/layouts/page/automation.html @@ -6,12 +6,6 @@
    -
    -
    -
    -
    -
    -
    -

    - {{ .description }} -

    +
    + {{ with .Params.video }} +
    +

    {{ .title }}

    +
    +
    +
    -
    -
    - {{ partial "accordian-header" (dict "text" "Transcript" "large_header" false) }} +

    + {{ .description }} +

    +
    +
    +
    + {{ partial "accordian-header" (dict "text" "Transcript" "large_header" false) }} -
    -

    {{ .transcript | markdownify }}

    -
    +
    +

    {{ .transcript | markdownify }}

    - {{ end }} +
    + {{ end }} -
    - {{ .Content }} -
    +
    + {{ .Content }}
    -
    +

    Get started today

    Pulumi is open source and free to get started. Deploy your first stack today.

    - {{ site.Params.cta.primary.label }} + {{ site.Params.cta.primary.label }}
    diff --git a/layouts/whitepapers/list.html b/layouts/whitepapers/list.html index c9bb6440d771..024df015c4f9 100644 --- a/layouts/whitepapers/list.html +++ b/layouts/whitepapers/list.html @@ -30,7 +30,7 @@

    Read the whitepaper → + Read the whitepaper →

    {{ end }} diff --git a/static/fonts/gilroy-bold.woff b/static/fonts/gilroy-bold.woff deleted file mode 100644 index 35eebefc1aa3..000000000000 Binary files a/static/fonts/gilroy-bold.woff and /dev/null differ diff --git a/static/fonts/gilroy-bold.woff2 b/static/fonts/gilroy-bold.woff2 deleted file mode 100644 index 8b90e44ee64b..000000000000 Binary files a/static/fonts/gilroy-bold.woff2 and /dev/null differ diff --git a/static/fonts/gilroy-medium.woff b/static/fonts/gilroy-medium.woff deleted file mode 100644 index 7a5493cb3321..000000000000 Binary files a/static/fonts/gilroy-medium.woff and /dev/null differ diff --git a/static/fonts/gilroy-medium.woff2 b/static/fonts/gilroy-medium.woff2 deleted file mode 100644 index e80d41df56bd..000000000000 Binary files a/static/fonts/gilroy-medium.woff2 and /dev/null differ diff --git a/static/fonts/gilroy-semibold.woff b/static/fonts/gilroy-semibold.woff deleted file mode 100644 index 8d0e0edf286b..000000000000 Binary files a/static/fonts/gilroy-semibold.woff and /dev/null differ diff --git a/static/fonts/gilroy-semibold.woff2 b/static/fonts/gilroy-semibold.woff2 deleted file mode 100644 index d60a16fc0888..000000000000 Binary files a/static/fonts/gilroy-semibold.woff2 and /dev/null differ diff --git a/static/fonts/iosevka-fixed-extended.woff2 b/static/fonts/iosevka-fixed-extended.woff2 deleted file mode 100644 index 8731076eec3e..000000000000 Binary files a/static/fonts/iosevka-fixed-extended.woff2 and /dev/null differ diff --git a/static/fonts/iosevka-fixed-extendedbold.woff2 b/static/fonts/iosevka-fixed-extendedbold.woff2 deleted file mode 100644 index 7a8989c3f069..000000000000 Binary files a/static/fonts/iosevka-fixed-extendedbold.woff2 and /dev/null differ diff --git a/static/fonts/iosevka-fixed-extendedmedium.woff2 b/static/fonts/iosevka-fixed-extendedmedium.woff2 deleted file mode 100644 index d559374277a3..000000000000 Binary files a/static/fonts/iosevka-fixed-extendedmedium.woff2 and /dev/null differ diff --git a/static/fonts/roboto-mono-regular.woff2 b/static/fonts/roboto-mono-regular.woff2 deleted file mode 100644 index 78159c931e58..000000000000 Binary files a/static/fonts/roboto-mono-regular.woff2 and /dev/null differ diff --git a/static/images/about-us/journey.svg b/static/images/about-us/journey.svg index 95e1a5cb9bbd..7af0c79b3d1d 100644 --- a/static/images/about-us/journey.svg +++ b/static/images/about-us/journey.svg @@ -3,86 +3,86 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/static/images/deploy-with-pulumi/light.svg b/static/images/deploy-with-pulumi/light.svg index 0fb1e86fad53..0d03b0f46511 100644 --- a/static/images/deploy-with-pulumi/light.svg +++ b/static/images/deploy-with-pulumi/light.svg @@ -22,7 +22,7 @@ - + diff --git a/static/images/docs/404/beam4.svg b/static/images/docs/404/beam4.svg index 40020b060024..32f6a2e214e4 100644 --- a/static/images/docs/404/beam4.svg +++ b/static/images/docs/404/beam4.svg @@ -1,3 +1,3 @@ - + diff --git a/static/images/docs/ad/pulumi-up-ad.svg b/static/images/docs/ad/pulumi-up-ad.svg index 450e363d6bcc..1f0ef3450837 100644 --- a/static/images/docs/ad/pulumi-up-ad.svg +++ b/static/images/docs/ad/pulumi-up-ad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/images/docs/aws-h1-gradient.svg b/static/images/docs/aws-h1-gradient.svg index 7c89c5792df7..534ad4bb784a 100644 --- a/static/images/docs/aws-h1-gradient.svg +++ b/static/images/docs/aws-h1-gradient.svg @@ -6,7 +6,7 @@ - + diff --git a/static/images/docs/azure-h1-gradient.svg b/static/images/docs/azure-h1-gradient.svg index 7e2f7d8a4e30..359faf61c536 100644 --- a/static/images/docs/azure-h1-gradient.svg +++ b/static/images/docs/azure-h1-gradient.svg @@ -6,7 +6,7 @@ - + diff --git a/static/images/docs/docs-home-header-background-desktop-wide.svg b/static/images/docs/docs-home-header-background-desktop-wide.svg index b35da9244f25..537856c4ed29 100644 --- a/static/images/docs/docs-home-header-background-desktop-wide.svg +++ b/static/images/docs/docs-home-header-background-desktop-wide.svg @@ -97,7 +97,7 @@ - + diff --git a/static/images/docs/docs-home-header-background-desktop.svg b/static/images/docs/docs-home-header-background-desktop.svg index fc6febcaaaf5..9cb7c9aa57af 100644 --- a/static/images/docs/docs-home-header-background-desktop.svg +++ b/static/images/docs/docs-home-header-background-desktop.svg @@ -71,7 +71,7 @@ - + diff --git a/static/images/docs/docs-home-header-background-tablet.svg b/static/images/docs/docs-home-header-background-tablet.svg index a2eacb4e0885..b885cb12558a 100644 --- a/static/images/docs/docs-home-header-background-tablet.svg +++ b/static/images/docs/docs-home-header-background-tablet.svg @@ -76,7 +76,7 @@ - + diff --git a/static/images/docs/google-cloud-h1-gradient.svg b/static/images/docs/google-cloud-h1-gradient.svg index 3f569286aa60..36b00a9869e2 100644 --- a/static/images/docs/google-cloud-h1-gradient.svg +++ b/static/images/docs/google-cloud-h1-gradient.svg @@ -6,7 +6,7 @@ - + diff --git a/static/images/docs/kubernetes-h1-gradient.svg b/static/images/docs/kubernetes-h1-gradient.svg index b0a2f2f9aa2f..6421f4d6d8a7 100644 --- a/static/images/docs/kubernetes-h1-gradient.svg +++ b/static/images/docs/kubernetes-h1-gradient.svg @@ -6,7 +6,7 @@ - + diff --git a/static/images/get-started.svg b/static/images/get-started.svg index f7fad2df4deb..f6203c5ac1db 100644 --- a/static/images/get-started.svg +++ b/static/images/get-started.svg @@ -1,4 +1,4 @@ - + diff --git a/static/images/home/ai-card-image.svg b/static/images/home/ai-card-image.svg index 1f71d8c96a99..d9d3e116cc99 100644 --- a/static/images/home/ai-card-image.svg +++ b/static/images/home/ai-card-image.svg @@ -1,18 +1,18 @@ - - - - - + + + + + - - - - - - + + + + + + diff --git a/static/images/home/automation-api-diagram.svg b/static/images/home/automation-api-diagram.svg index d503ca2631ee..9ff4d398ce65 100644 --- a/static/images/home/automation-api-diagram.svg +++ b/static/images/home/automation-api-diagram.svg @@ -11,9 +11,9 @@ - - - + + + @@ -22,8 +22,8 @@ - - + + @@ -31,40 +31,40 @@ - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -72,8 +72,8 @@ - - + + diff --git a/static/images/home/esc-card-image.svg b/static/images/home/esc-card-image.svg index 83570415c361..176b18665c56 100644 --- a/static/images/home/esc-card-image.svg +++ b/static/images/home/esc-card-image.svg @@ -1,12 +1,12 @@ - - + + - - - - + + + + diff --git a/static/images/home/home-hero-code-overlay.svg b/static/images/home/home-hero-code-overlay.svg index cc6d82854d35..5e37d37d8711 100644 --- a/static/images/home/home-hero-code-overlay.svg +++ b/static/images/home/home-hero-code-overlay.svg @@ -2,70 +2,70 @@ - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - + + + + - + - - - - - + + + + + - - + + - - + + - + diff --git a/static/images/home/home-hero-image.svg b/static/images/home/home-hero-image.svg index 0426cb610e84..0edc98727256 100644 --- a/static/images/home/home-hero-image.svg +++ b/static/images/home/home-hero-image.svg @@ -1,83 +1,83 @@ - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - + + + + - + - - - - - + + + + + - - + + - - + + - + - - - + + + diff --git a/static/images/home/home-meta.png b/static/images/home/home-meta.png index 1458a7095707..3b16d0cbcf2f 100644 Binary files a/static/images/home/home-meta.png and b/static/images/home/home-meta.png differ diff --git a/static/images/home/iac-card-image.svg b/static/images/home/iac-card-image.svg index c0af09b9da63..604fb4c88ff6 100644 --- a/static/images/home/iac-card-image.svg +++ b/static/images/home/iac-card-image.svg @@ -1,34 +1,34 @@ - - - - + + + + - + - - - - + + + + - - + + - - + + - + - - - - + + + + diff --git a/static/images/home/idp-card-image.svg b/static/images/home/idp-card-image.svg index 722752a848b8..ef25cc397cd6 100644 --- a/static/images/home/idp-card-image.svg +++ b/static/images/home/idp-card-image.svg @@ -8,36 +8,36 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - + + + + diff --git a/static/images/home/ig-card-image.svg b/static/images/home/ig-card-image.svg index aa6b215c6b6e..aea0eedbbb6a 100644 --- a/static/images/home/ig-card-image.svg +++ b/static/images/home/ig-card-image.svg @@ -1,58 +1,58 @@ - - + + - + - + - + - + - + - + - + - + - + - + - - - - - - - - - - + + + + + + + + + + - + - - - + + + - + diff --git a/static/images/home/languages-card-image.svg b/static/images/home/languages-card-image.svg index 4aa6d4c060a7..6673bcc1ffab 100644 --- a/static/images/home/languages-card-image.svg +++ b/static/images/home/languages-card-image.svg @@ -1,17 +1,17 @@ - + - + - + @@ -22,18 +22,18 @@ - + - + - + @@ -41,7 +41,7 @@ - + diff --git a/static/images/home/neo-card-image.svg b/static/images/home/neo-card-image.svg index 0aab18368f2c..36a81e733131 100644 --- a/static/images/home/neo-card-image.svg +++ b/static/images/home/neo-card-image.svg @@ -16,9 +16,9 @@ - + - + @@ -35,7 +35,7 @@ - + @@ -43,16 +43,16 @@ - + - - - - - - - - + + + + + + + + diff --git a/static/images/home/secure-card-image.svg b/static/images/home/secure-card-image.svg index 1b44c852469e..aaa636c5e05d 100644 --- a/static/images/home/secure-card-image.svg +++ b/static/images/home/secure-card-image.svg @@ -1,8 +1,8 @@ - - - - + + + + diff --git a/static/images/home/short-console.svg b/static/images/home/short-console.svg index 8f23219ca8ae..6ad060fef9a3 100644 --- a/static/images/home/short-console.svg +++ b/static/images/home/short-console.svg @@ -15,7 +15,7 @@ - + @@ -151,7 +151,7 @@ - + diff --git a/static/images/learn/learn-progression.svg b/static/images/learn/learn-progression.svg index df0081cee54d..62e264d297b8 100644 --- a/static/images/learn/learn-progression.svg +++ b/static/images/learn/learn-progression.svg @@ -265,10 +265,10 @@ id="tspan9029" x="391.2384" y="333.18881" - style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:Gilroy;-inkscape-font-specification:Gilroy">Building with Pulumi + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:Inter;-inkscape-font-specification:Inter">Building with Pulumi - + diff --git a/static/images/product/console-stack-timeline.svg b/static/images/product/console-stack-timeline.svg index 6989297e79c6..0962a96a238e 100644 --- a/static/images/product/console-stack-timeline.svg +++ b/static/images/product/console-stack-timeline.svg @@ -150,7 +150,7 @@ - + diff --git a/static/images/product/esc-diagram-octopus.svg b/static/images/product/esc-diagram-octopus.svg index 410a24380828..0e57d48ddec4 100644 --- a/static/images/product/esc-diagram-octopus.svg +++ b/static/images/product/esc-diagram-octopus.svg @@ -2,12 +2,12 @@ - - + + - + @@ -18,17 +18,17 @@ - + - + - + - + - + @@ -39,7 +39,7 @@ - + @@ -63,7 +63,7 @@ - + @@ -76,7 +76,7 @@ - + @@ -92,7 +92,7 @@ - + @@ -100,12 +100,12 @@ - + - + @@ -117,12 +117,12 @@ - + - + @@ -132,7 +132,7 @@ - + @@ -157,9 +157,9 @@ - + - + @@ -173,43 +173,43 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/product/esc-legend-1.svg b/static/images/product/esc-legend-1.svg index f866c75ddce2..ed96a9d3a303 100644 --- a/static/images/product/esc-legend-1.svg +++ b/static/images/product/esc-legend-1.svg @@ -1,5 +1,5 @@ - + diff --git a/static/images/product/esc-legend-2.svg b/static/images/product/esc-legend-2.svg index cc9ca35e79d8..a84044f78c2b 100644 --- a/static/images/product/esc-legend-2.svg +++ b/static/images/product/esc-legend-2.svg @@ -1,5 +1,5 @@ - + diff --git a/static/images/product/esc-legend-3.svg b/static/images/product/esc-legend-3.svg index bf3d0548b4b8..eebb212b6ffa 100644 --- a/static/images/product/esc-legend-3.svg +++ b/static/images/product/esc-legend-3.svg @@ -1,5 +1,5 @@ - + diff --git a/static/images/product/esc-legend-4.svg b/static/images/product/esc-legend-4.svg index 4104e566aff1..23064fb9480b 100644 --- a/static/images/product/esc-legend-4.svg +++ b/static/images/product/esc-legend-4.svg @@ -1,5 +1,5 @@ - + diff --git a/static/images/product/infrastructure-as-code/iac-hero-code-overlay.svg b/static/images/product/infrastructure-as-code/iac-hero-code-overlay.svg index 673179349b2d..f2272fd2a813 100644 --- a/static/images/product/infrastructure-as-code/iac-hero-code-overlay.svg +++ b/static/images/product/infrastructure-as-code/iac-hero-code-overlay.svg @@ -6,9 +6,9 @@ - + - + diff --git a/static/images/product/infrastructure-as-code/iac-hero.svg b/static/images/product/infrastructure-as-code/iac-hero.svg index 1f0102c9ee50..2ee2b36e19f1 100644 --- a/static/images/product/infrastructure-as-code/iac-hero.svg +++ b/static/images/product/infrastructure-as-code/iac-hero.svg @@ -1,31 +1,31 @@ - - - - + + + + - + - - - - + + + + - - - + + + - - + + - + diff --git a/static/images/product/infrastructure-as-code/iac-meta.png b/static/images/product/infrastructure-as-code/iac-meta.png index cd855e37060d..82607dbfdac2 100644 Binary files a/static/images/product/infrastructure-as-code/iac-meta.png and b/static/images/product/infrastructure-as-code/iac-meta.png differ diff --git a/static/images/product/infrastructure-as-code/iac-stack-example.svg b/static/images/product/infrastructure-as-code/iac-stack-example.svg index f02a82b748f8..65306ff6a75c 100644 --- a/static/images/product/infrastructure-as-code/iac-stack-example.svg +++ b/static/images/product/infrastructure-as-code/iac-stack-example.svg @@ -17,30 +17,30 @@ - - - + + + - + - + - + - - + + - - + + - - + + @@ -150,7 +150,7 @@ - + diff --git a/static/images/product/infrastructure-as-code/pulumi-concentric-circles.svg b/static/images/product/infrastructure-as-code/pulumi-concentric-circles.svg index 69de961193dc..ad5a7db091cd 100644 --- a/static/images/product/infrastructure-as-code/pulumi-concentric-circles.svg +++ b/static/images/product/infrastructure-as-code/pulumi-concentric-circles.svg @@ -6,10 +6,10 @@ - - - - + + + + diff --git a/static/images/product/insights-governance/ig-hero.svg b/static/images/product/insights-governance/ig-hero.svg index 30e1fa2420e9..2bd934c82c6f 100644 --- a/static/images/product/insights-governance/ig-hero.svg +++ b/static/images/product/insights-governance/ig-hero.svg @@ -1,120 +1,120 @@ - - - - - + + + + + - - - - + + + + - - + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - + + + - - - + + + - + - + - + - + - + - + - + - + - + - + - - + + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - + + + + + + + + + - + - - - - - - - + + + + + + + - + diff --git a/static/images/product/insights-governance/ig-meta.png b/static/images/product/insights-governance/ig-meta.png index b7871e81be3d..4707f5db6fac 100644 Binary files a/static/images/product/insights-governance/ig-meta.png and b/static/images/product/insights-governance/ig-meta.png differ diff --git a/static/images/product/insights-governance/ig-poster.png b/static/images/product/insights-governance/ig-poster.png index ee7e3071f175..e366eac18eba 100644 Binary files a/static/images/product/insights-governance/ig-poster.png and b/static/images/product/insights-governance/ig-poster.png differ diff --git a/static/images/product/internal-developer-platforms/idp-day2.svg b/static/images/product/internal-developer-platforms/idp-day2.svg index 7c80bac2a268..293c76bc40b5 100644 --- a/static/images/product/internal-developer-platforms/idp-day2.svg +++ b/static/images/product/internal-developer-platforms/idp-day2.svg @@ -1,44 +1,44 @@ - - - - + + + + - - - + + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - - - - + + + + + diff --git a/static/images/product/internal-developer-platforms/idp-golden-paths.svg b/static/images/product/internal-developer-platforms/idp-golden-paths.svg index b0056163c746..6d3bc5144e4d 100644 --- a/static/images/product/internal-developer-platforms/idp-golden-paths.svg +++ b/static/images/product/internal-developer-platforms/idp-golden-paths.svg @@ -1,49 +1,49 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - + + + + diff --git a/static/images/product/internal-developer-platforms/idp-hero-image.svg b/static/images/product/internal-developer-platforms/idp-hero-image.svg index 9d6991a098ae..88aee44c0ddb 100644 --- a/static/images/product/internal-developer-platforms/idp-hero-image.svg +++ b/static/images/product/internal-developer-platforms/idp-hero-image.svg @@ -2,38 +2,38 @@ - + - - - + + + - + - + - + - + - - - - + + + + - - + + - + - + - + @@ -84,7 +84,7 @@ - + @@ -92,24 +92,24 @@ - - + + - - - - - - - + + + + + + + - + - + - + @@ -158,18 +158,18 @@ - - - - - - + + + + + + - + - + - + @@ -201,7 +201,7 @@ - + @@ -209,16 +209,16 @@ - - + + - - - - - + + + + + @@ -347,7 +347,7 @@ - + diff --git a/static/images/product/internal-developer-platforms/idp-meta.png b/static/images/product/internal-developer-platforms/idp-meta.png index 6d98a5151e5a..83429cf3dc4a 100644 Binary files a/static/images/product/internal-developer-platforms/idp-meta.png and b/static/images/product/internal-developer-platforms/idp-meta.png differ diff --git a/static/images/product/internal-developer-platforms/idp-poster.png b/static/images/product/internal-developer-platforms/idp-poster.png index 007fa1721bac..763a00a40281 100644 Binary files a/static/images/product/internal-developer-platforms/idp-poster.png and b/static/images/product/internal-developer-platforms/idp-poster.png differ diff --git a/static/images/product/internal-developer-platforms/idp-self-service.svg b/static/images/product/internal-developer-platforms/idp-self-service.svg index e13176522a76..fef244b76178 100644 --- a/static/images/product/internal-developer-platforms/idp-self-service.svg +++ b/static/images/product/internal-developer-platforms/idp-self-service.svg @@ -1,27 +1,27 @@ - - - - - - + + + + + + - + - + - + - + - - - - + + + + - + - + diff --git a/static/images/product/neo/neo-hero.svg b/static/images/product/neo/neo-hero.svg index cb77dc340687..455d8de2f0ac 100644 --- a/static/images/product/neo/neo-hero.svg +++ b/static/images/product/neo/neo-hero.svg @@ -1,34 +1,34 @@ - - + + - - + + - - + + - - - - + + + + - - - - - - - + + + + + + + @@ -60,20 +60,20 @@ - - + + - + - - + + - + - - + + - + diff --git a/static/images/product/neo/neo-meta.png b/static/images/product/neo/neo-meta.png index a095e9b89721..d1c32536dac5 100644 Binary files a/static/images/product/neo/neo-meta.png and b/static/images/product/neo/neo-meta.png differ diff --git a/static/images/product/neo/neo-video-poster.png b/static/images/product/neo/neo-video-poster.png index 8f51de5eeb7e..54ec3e4ef697 100644 Binary files a/static/images/product/neo/neo-video-poster.png and b/static/images/product/neo/neo-video-poster.png differ diff --git a/static/images/product/overview/overview-diagram.svg b/static/images/product/overview/overview-diagram.svg index c72c83533bf9..e8d2f7cf26c2 100644 --- a/static/images/product/overview/overview-diagram.svg +++ b/static/images/product/overview/overview-diagram.svg @@ -28,37 +28,37 @@ - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + @@ -108,18 +108,18 @@ - - - - - - - - - - - - + + + + + + + + + + + + @@ -129,11 +129,11 @@ - + - + diff --git a/static/images/product/overview/overview-esc.svg b/static/images/product/overview/overview-esc.svg index 7bf0c6604d39..93a4da671448 100644 --- a/static/images/product/overview/overview-esc.svg +++ b/static/images/product/overview/overview-esc.svg @@ -1,18 +1,18 @@ - - - - - - - - - + + + + + + + + + - + @@ -21,14 +21,14 @@ - + - + @@ -38,38 +38,38 @@ - + - + - + - + - + - + @@ -85,31 +85,31 @@ - - - - - - - - - - + + + + + + + + + + - + - + - - - - + + + + - - - - + + + + @@ -208,7 +208,7 @@ - + diff --git a/static/images/product/overview/overview-governance.svg b/static/images/product/overview/overview-governance.svg index 12aad72f873c..63b51a65243e 100644 --- a/static/images/product/overview/overview-governance.svg +++ b/static/images/product/overview/overview-governance.svg @@ -1,67 +1,67 @@ - - - - - + + + + + - - - - + + + + - - + + - + - - - - - - - - - - - - - + + + + + + + + + + + + + - - - + + + - - + + - + - - - - - - - - - + + + + + + + + + - - - - + + + + diff --git a/static/images/product/overview/overview-idp.svg b/static/images/product/overview/overview-idp.svg index 86acede80037..232c504145a2 100644 --- a/static/images/product/overview/overview-idp.svg +++ b/static/images/product/overview/overview-idp.svg @@ -1,38 +1,38 @@ - + - - - + + + - + - + - + - + - - - - + + + + - - + + - + - + - + @@ -83,7 +83,7 @@ - + @@ -91,24 +91,24 @@ - - + + - - - - - - - + + + + + + + - + - + - + @@ -157,18 +157,18 @@ - - - - - - + + + + + + - + - + - + @@ -200,7 +200,7 @@ - + @@ -208,19 +208,19 @@ - - + + - - - - - + + + + + - - + + @@ -347,7 +347,7 @@ - + diff --git a/static/images/product/overview/overview-meta.png b/static/images/product/overview/overview-meta.png index b81c836e165f..d71d4cc79aeb 100644 Binary files a/static/images/product/overview/overview-meta.png and b/static/images/product/overview/overview-meta.png differ diff --git a/static/images/product/overview/overview-neo.svg b/static/images/product/overview/overview-neo.svg index edf4ab6cdf73..1a3896666936 100644 --- a/static/images/product/overview/overview-neo.svg +++ b/static/images/product/overview/overview-neo.svg @@ -16,9 +16,9 @@ - + - + @@ -37,7 +37,7 @@ - + @@ -45,16 +45,16 @@ - + - - - - - - - - + + + + + + + + diff --git a/static/images/product/product-platform-desktop.svg b/static/images/product/product-platform-desktop.svg index a5db86b840e1..8179dd0c22f9 100644 --- a/static/images/product/product-platform-desktop.svg +++ b/static/images/product/product-platform-desktop.svg @@ -449,7 +449,7 @@ - + @@ -457,7 +457,7 @@ - + diff --git a/static/images/product/product-platform-mobile.svg b/static/images/product/product-platform-mobile.svg index a84da99c68e9..9a7666cebc95 100644 --- a/static/images/product/product-platform-mobile.svg +++ b/static/images/product/product-platform-mobile.svg @@ -457,7 +457,7 @@ - + @@ -465,7 +465,7 @@ - + diff --git a/static/images/product/resource-search-diagram.svg b/static/images/product/resource-search-diagram.svg index 26ccc02637b1..458215f75f36 100644 --- a/static/images/product/resource-search-diagram.svg +++ b/static/images/product/resource-search-diagram.svg @@ -1,11 +1,11 @@ - + - + diff --git a/static/images/product/secrets-management/esc-hero.svg b/static/images/product/secrets-management/esc-hero.svg index 2f5aab1698f7..c34c9c3ba7e5 100644 --- a/static/images/product/secrets-management/esc-hero.svg +++ b/static/images/product/secrets-management/esc-hero.svg @@ -1,18 +1,18 @@ - - - - - - - - - + + + + + + + + + - + @@ -21,14 +21,14 @@ - + - + @@ -38,38 +38,38 @@ - + - + - + - + - + - + @@ -85,31 +85,31 @@ - - - - - - - - - - + + + + + + + + + + - + - + - - - - + + + + - - - - + + + + @@ -208,7 +208,7 @@ - + diff --git a/static/images/product/secrets-management/esc-meta.png b/static/images/product/secrets-management/esc-meta.png index c4652fb2aa1f..fd99649ed0c1 100644 Binary files a/static/images/product/secrets-management/esc-meta.png and b/static/images/product/secrets-management/esc-meta.png differ diff --git a/static/images/product/secrets-management/esc-poster.png b/static/images/product/secrets-management/esc-poster.png index ed3574344255..319e3d9a822b 100644 Binary files a/static/images/product/secrets-management/esc-poster.png and b/static/images/product/secrets-management/esc-poster.png differ diff --git a/static/images/product/secrets-management/esc-screenshot-code.png b/static/images/product/secrets-management/esc-screenshot-code.png index daf8d1899ec3..6f6f24f886d0 100644 Binary files a/static/images/product/secrets-management/esc-screenshot-code.png and b/static/images/product/secrets-management/esc-screenshot-code.png differ diff --git a/static/images/solutions/ai/ai_provision_infra.svg b/static/images/solutions/ai/ai_provision_infra.svg index 338a9c8d7155..f72d2bb07ba5 100644 --- a/static/images/solutions/ai/ai_provision_infra.svg +++ b/static/images/solutions/ai/ai_provision_infra.svg @@ -1,7 +1,7 @@ - + @@ -9,9 +9,9 @@ - + - + diff --git a/static/images/solutions/terraform/terraform-diagram-four.svg b/static/images/solutions/terraform/terraform-diagram-four.svg index ed6f8be9eb8e..1192d0ff3690 100644 --- a/static/images/solutions/terraform/terraform-diagram-four.svg +++ b/static/images/solutions/terraform/terraform-diagram-four.svg @@ -2,7 +2,7 @@ - + @@ -14,15 +14,15 @@ - + - + - + diff --git a/static/logos/brand/pulumipus-8bit.svg b/static/logos/brand/pulumipus-8bit.svg index d72aa8c7a58b..a283ddc1ce71 100644 --- a/static/logos/brand/pulumipus-8bit.svg +++ b/static/logos/brand/pulumipus-8bit.svg @@ -4,7 +4,7 @@ - + diff --git a/static/logos/brand/pulumipus-with-cube-and-sparkles.svg b/static/logos/brand/pulumipus-with-cube-and-sparkles.svg index fffc9dafccfc..be8731d3e411 100644 --- a/static/logos/brand/pulumipus-with-cube-and-sparkles.svg +++ b/static/logos/brand/pulumipus-with-cube-and-sparkles.svg @@ -36,12 +36,12 @@ - - - - - - + + + + + + diff --git a/theme/src/scss/_about.scss b/theme/src/scss/_about.scss index 6c70283730c5..0781c8d38a5a 100644 --- a/theme/src/scss/_about.scss +++ b/theme/src/scss/_about.scss @@ -11,7 +11,7 @@ li { > a { - @apply inline-flex w-max text-base font-medium text-center text-gray-700 no-underline; + @apply inline-flex w-max text-base font-semibold text-center text-gray-700 no-underline; } &:hover { @@ -44,19 +44,12 @@ } } -.careers-cta { - border-bottom: 4px solid; - border-top: 4px solid; - border-image-slice: 1; - border-image-source: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); -} - #awards { .award { height: 230px; width: 230px; border-radius: 14px; - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); + background: var(--color-violet-primary); a { height: 226px; @@ -93,9 +86,7 @@ .about-card-photo { width: 150px; height: 150px; - border-right: 4px solid; - border-image-slice: 1; - border-image-source: linear-gradient(#F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%) + border-right: 4px solid var(--color-violet-primary); } .social-overlay { @@ -115,11 +106,8 @@ .photo-container { img { - border: double 6px transparent; + border: double 6px var(--color-violet-primary); border-radius: 6px; - background-image: linear-gradient(white, white), linear-gradient(#F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%); - background-origin: border-box; - background-clip: padding-box, border-box; } } @@ -130,19 +118,17 @@ .about-us-gradient-hero { - border-top: 6px solid; - border-bottom: 6px solid; - border-image-slice: 1; - border-image-source: linear-gradient(90deg, #F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%); + border-top: 6px solid var(--color-violet-primary); + border-bottom: 6px solid var(--color-violet-primary); height: 20rem; overflow: hidden; position: relative; - background: linear-gradient(180deg, #FCC247 0%, #F06DE9 100%); + background: var(--color-violet-primary); z-index: 10; &:before { - background: linear-gradient(180deg, #f1d1a0 0%, #AE6BFE 100%); - content: ''; + background: var(--color-violet-800); + content: ''; display: block; height: 100%; position: absolute; @@ -174,11 +160,8 @@ @include screen-xl { height: 465px; } - border: double 2px transparent; + border: double 2px var(--color-violet-primary); border-radius: 12px; - background-image: linear-gradient(white, white), linear-gradient(#F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%); - background-origin: border-box; - background-clip: padding-box, border-box; } diff --git a/theme/src/scss/_algolia.scss b/theme/src/scss/_algolia.scss index 0a73ae0e5bbe..b94269229c48 100644 --- a/theme/src/scss/_algolia.scss +++ b/theme/src/scss/_algolia.scss @@ -146,7 +146,7 @@ @apply absolute top-4 right-3 text-xs text-gray-700 ml-3 inline-flex items-center rounded px-1 py-0.5 font-normal border; &.docs { - @apply border-salmon-300; + @apply border-orange-300; } &.packages { @@ -163,7 +163,7 @@ // The highlight indicator (i.e., the portion of item, if any, that matches the search query). mark { - @apply bg-transparent border-b border-blue-600/50; + @apply bg-transparent border-b border-violet-primary/50; } } diff --git a/theme/src/scss/_api-nodejs.scss b/theme/src/scss/_api-nodejs.scss index 4e0fbf3a9f36..13c750d1fcef 100644 --- a/theme/src/scss/_api-nodejs.scss +++ b/theme/src/scss/_api-nodejs.scss @@ -16,10 +16,10 @@ h3.pdoc-module-header ~ h2 { // We want visually recognizable links here. .highlight { a { - @apply text-blue-600; + @apply text-violet-primary; &:hover { - @apply text-blue-700; + @apply text-violet-800; } } } @@ -68,14 +68,14 @@ ul.api { &.package { &:before { content: "P"; - @apply bg-purple-700; + @apply bg-violet-700; } } &.resource { &:before { content: "R"; - @apply bg-blue-700; + @apply border-violet-800; } } diff --git a/theme/src/scss/_api-symbol.scss b/theme/src/scss/_api-symbol.scss index d0b882e2a1ba..a3e1486f5f24 100644 --- a/theme/src/scss/_api-symbol.scss +++ b/theme/src/scss/_api-symbol.scss @@ -59,8 +59,8 @@ $size-large: 24px; } .api-symbol--resource { - @apply text-blue-700; - @apply border-blue-700; + @apply text-violet-800; + @apply border-violet-700; &:before { content: "R"; diff --git a/theme/src/scss/_buttons.scss b/theme/src/scss/_buttons.scss index 1919fe616d54..546a04ab0ceb 100644 --- a/theme/src/scss/_buttons.scss +++ b/theme/src/scss/_buttons.scss @@ -1,4 +1,3 @@ -@import "colors"; @import "mixins"; // NOTE: @utility declarations for btn/btn-lg/btn-orange are in main.scss (top-level) @@ -8,23 +7,20 @@ @include transition; @apply cursor-pointer text-sm whitespace-nowrap py-2 px-3 rounded inline-block; - @apply bg-blue-600 border border-blue-600 text-white text-center; + @apply bg-violet-primary border border-violet-primary text-white text-center; &:hover { - @apply bg-blue-500 border-blue-500 text-white; + @apply bg-violet-800 border-violet-800 text-white; } &:active { - @apply bg-blue-500; + @apply bg-violet-900 border-violet-900 text-white; } } .btn-secondary { - @apply bg-white border border-blue-500 text-blue-600; - - &:hover { - @apply bg-blue-500 text-white; - } + @apply bg-white relative text-black rounded-lg text-lg cursor-pointer z-auto border border-gray-300; + @apply hover:bg-white hover:text-black hover:border-gray-600; } .btn-sm { @@ -44,22 +40,22 @@ } .btn-translucent { - background-color: rgba($brand-blue, 0.3); - border-color: rgba($brand-blue, 0.5); + background-color: color-mix(in srgb, var(--color-violet-primary) 30%, transparent); + border-color: color-mix(in srgb, var(--color-violet-primary) 50%, transparent); &:hover { - background-color: rgba($brand-blue, 0.7); - border-color: $brand-blue; + background-color: color-mix(in srgb, var(--color-violet-primary) 70%, transparent); + border-color: var(--color-violet-primary); } } .btn-orange-translucent { - background-color: rgba(map-get($orange, 500), 0.3); - border-color: rgba(map-get($orange, 500), 0.5); + background-color: color-mix(in srgb, var(--color-orange-500) 30%, transparent); + border-color: color-mix(in srgb, var(--color-orange-500) 50%, transparent); &:hover { - background-color: rgba(map-get($orange, 500), 0.7); - border-color: map-get($orange, 500); + background-color: color-mix(in srgb, var(--color-orange-500) 70%, transparent); + border-color: var(--color-orange-500); } } @@ -83,7 +79,7 @@ display: flex; align-items: center; background-color: #fff; - color: rgba(77, 91, 217, 1); + color: var(--color-violet-primary); padding-left: 0 !important; } @@ -93,7 +89,7 @@ } .btn-download:hover { - color: #3e49ae; + color: var(--color-violet-800); } .card .card-cta-contained-btn { diff --git a/theme/src/scss/_card.scss b/theme/src/scss/_card.scss index 5afcc6265641..4342c2990769 100644 --- a/theme/src/scss/_card.scss +++ b/theme/src/scss/_card.scss @@ -1,12 +1,3 @@ .card { - @apply rounded-xl; - box-shadow: 0px 6px 36px rgba(0, 0, 0, 0.1); - - .card-cta-btn { - @apply w-full absolute left-0 z-0; - bottom: -0.75rem; - - .btn-primary { - } - } + @apply rounded-xl border border-gray-200 bg-white relative; } diff --git a/theme/src/scss/_chroma-min-dark.scss b/theme/src/scss/_chroma-min-dark.scss deleted file mode 100644 index c8d4e57acbb9..000000000000 --- a/theme/src/scss/_chroma-min-dark.scss +++ /dev/null @@ -1,105 +0,0 @@ -// Min Dark Chroma theme — scoped under .code-theme-min-dark so it doesn't -// affect the site-wide code block theme defined in _chroma.scss. -// Colors derived from https://github.com/miguelsolorio/min-theme (MIT) - -.code-theme-min-dark { - /* Background */ .bg { color: #b392f0; background-color: #20054e; } - /* PreWrapper */ .chroma { color: #b392f0; background-color: #20054e; } - - pre { - background: #20054e; - } - - /* Other */ .chroma .x { color: #b392f0; } - /* Error */ .chroma .err { color: #cd3131; } - /* CodeLine */ .chroma .cl { } - /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit; } - /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } - /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } - /* LineHighlight */ .chroma .hl { background-color: #303030; } - /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #727272; } - /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #727272; } - /* Line */ .chroma .line { display: flex; } - - /* Keyword */ .chroma .k { color: #f97583; } - /* KeywordConstant */ .chroma .kc { color: #79b8ff; } - /* KeywordDeclaration */ .chroma .kd { color: #f97583; } - /* KeywordNamespace */ .chroma .kn { color: #f97583; } - /* KeywordPseudo */ .chroma .kp { color: #79b8ff; } - /* KeywordReserved */ .chroma .kr { color: #f97583; } - /* KeywordType */ .chroma .kt { color: #f97583; } - - /* Name */ .chroma .n { color: #b392f0; } - /* NameAttribute */ .chroma .na { color: #f8f8f8; } - /* NameBuiltin */ .chroma .nb { color: #79b8ff; } - /* NameBuiltinPseudo */ .chroma .bp { color: #79b8ff; } - /* NameClass */ .chroma .nc { color: #b392f0; } - /* NameConstant */ .chroma .no { color: #79b8ff; } - /* NameDecorator */ .chroma .nd { color: #b392f0; } - /* NameEntity */ .chroma .ni { color: #ffab70; } - /* NameException */ .chroma .ne { color: #b392f0; } - /* NameFunction */ .chroma .nf { color: #b392f0; } - /* NameFunctionMagic */ .chroma .fm { color: #b392f0; } - /* NameLabel */ .chroma .nl { color: #79b8ff; } - /* NameNamespace */ .chroma .nn { color: #f97583; } - /* NameOther */ .chroma .nx { color: #b392f0; } - /* NameProperty */ .chroma .py { color: #f8f8f8; } - /* NameTag */ .chroma .nt { color: #ffab70; } - /* NameVariable */ .chroma .nv { color: #79b8ff; } - /* NameVariableClass */ .chroma .vc { color: #79b8ff; } - /* NameVariableGlobal */ .chroma .vg { color: #79b8ff; } - /* NameVariableInstance */ .chroma .vi { color: #79b8ff; } - /* NameVariableMagic */ .chroma .vm { color: #79b8ff; } - - /* Literal */ .chroma .l { color: #ffab70; } - /* LiteralDate */ .chroma .ld { color: #ffab70; } - /* LiteralString */ .chroma .s { color: #ffab70; } - /* LiteralStringAffix */ .chroma .sa { color: #ffab70; } - /* LiteralStringBacktick */ .chroma .sb { color: #ffab70; } - /* LiteralStringChar */ .chroma .sc { color: #ffab70; } - /* LiteralStringDelimiter */ .chroma .dl { color: #ffab70; } - /* LiteralStringDoc */ .chroma .sd { color: #6b737c; font-style: italic; } - /* LiteralStringDouble */ .chroma .s2 { color: #ffab70; } - /* LiteralStringEscape */ .chroma .se { color: #ffab70; } - /* LiteralStringHeredoc */ .chroma .sh { color: #ffab70; } - /* LiteralStringInterpol */ .chroma .si { color: #ffab70; } - /* LiteralStringOther */ .chroma .sx { color: #ffab70; } - /* LiteralStringRegex */ .chroma .sr { color: #ffab70; } - /* LiteralStringSingle */ .chroma .s1 { color: #ffab70; } - /* LiteralStringSymbol */ .chroma .ss { color: #ffab70; } - - /* LiteralNumber */ .chroma .m { color: #f8f8f8; } - /* LiteralNumberBin */ .chroma .mb { color: #f8f8f8; } - /* LiteralNumberFloat */ .chroma .mf { color: #f8f8f8; } - /* LiteralNumberHex */ .chroma .mh { color: #f8f8f8; } - /* LiteralNumberInteger */ .chroma .mi { color: #f8f8f8; } - /* LiteralNumberIntegerLong */ .chroma .il { color: #f8f8f8; } - /* LiteralNumberOct */ .chroma .mo { color: #f8f8f8; } - - /* Operator */ .chroma .o { color: #bbbbbb; } - /* OperatorWord */ .chroma .ow { color: #f97583; } - /* Punctuation */ .chroma .p { color: #bbbbbb; } - - /* Comment */ .chroma .c { color: #6b737c; font-style: italic; } - /* CommentHashbang */ .chroma .ch { color: #6b737c; font-style: italic; } - /* CommentMultiline */ .chroma .cm { color: #6b737c; font-style: italic; } - /* CommentSingle */ .chroma .c1 { color: #6b737c; font-style: italic; } - /* CommentSpecial */ .chroma .cs { color: #6b737c; font-style: italic; } - /* CommentPreproc */ .chroma .cp { color: #6b737c; font-style: italic; } - /* CommentPreprocFile */ .chroma .cpf { color: #6b737c; font-style: italic; } - - /* Generic */ .chroma .g { } - /* GenericDeleted */ .chroma .gd { color: #FF7A84; background-color: #3a0d0d; } - /* GenericEmph */ .chroma .ge { font-style: italic; } - /* GenericError */ .chroma .gr { color: #FF7A84; } - /* GenericHeading */ .chroma .gh { color: #79b8ff; font-weight: bold; } - /* GenericInserted */ .chroma .gi { color: #79b8ff; background-color: #0d2a1a; } - /* GenericOutput */ .chroma .go { color: #6b737c; } - /* GenericPrompt */ .chroma .gp { color: #6b737c; font-weight: bold; } - /* GenericStrong */ .chroma .gs { font-weight: bold; color: #FF7A84; } - /* GenericSubheading */ .chroma .gu { color: #79b8ff; } - /* GenericTraceback */ .chroma .gt { color: #FF7A84; } - /* GenericUnderline */ .chroma .gl { text-decoration: underline; } - - /* TextWhitespace */ .chroma .w { } -} diff --git a/theme/src/scss/_chroma.scss b/theme/src/scss/_chroma.scss index cc724e5c6cd7..6e41ef2baa1c 100644 --- a/theme/src/scss/_chroma.scss +++ b/theme/src/scss/_chroma.scss @@ -1,86 +1,95 @@ -/* Background */ .bg { color: #c9d1d9; background-color: #1f2557; } -/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #1f2557; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { color: #f85149 } -/* CodeLine */ .chroma .cl { } -/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* Background */ .bg { color: #b392f0; background-color: var(--color-violet-950) } +/* PreWrapper */ .chroma { color: #b392f0; background-color: var(--color-violet-950); } +/* Other */ .chroma .x { color: #b392f0; } +/* Error */ .chroma .err { color: #cd3131; } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { background-color: #4d3675 } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } -/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } +/* LineHighlight */ .chroma .hl { background-color: #303030; } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #727272; } +/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: #727272; } /* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: #ff7b72 } -/* KeywordConstant */ .chroma .kc { color: #79c0ff } -/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 } -/* KeywordNamespace */ .chroma .kn { color: #ff7b72 } -/* KeywordPseudo */ .chroma .kp { color: #79c0ff } -/* KeywordReserved */ .chroma .kr { color: #ff7b72 } -/* KeywordType */ .chroma .kt { color: #ff7b72 } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold } -/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold } -/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold } -/* NameEntity */ .chroma .ni { color: #ffa657 } -/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold } -/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold } -/* NameNamespace */ .chroma .nn { color: #ff7b72 } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { color: #79c0ff } -/* NameTag */ .chroma .nt { color: #7ee787 } -/* NameVariable */ .chroma .nv { color: #79c0ff } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { color: #a5d6ff } -/* LiteralDate */ .chroma .ld { color: #79c0ff } -/* LiteralString */ .chroma .s { color: #a5d6ff } -/* LiteralStringAffix */ .chroma .sa { color: #79c0ff } -/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff } -/* LiteralStringChar */ .chroma .sc { color: #a5d6ff } -/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff } -/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff } -/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff } -/* LiteralStringEscape */ .chroma .se { color: #79c0ff } -/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff } -/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff } -/* LiteralStringOther */ .chroma .sx { color: #a5d6ff } -/* LiteralStringRegex */ .chroma .sr { color: #79c0ff } -/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff } -/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff } -/* LiteralNumber */ .chroma .m { color: #a5d6ff } -/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff } -/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff } -/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff } -/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff } -/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff } -/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff } -/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold } -/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #8b949e; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } -/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } -/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { color: #ffa198 } -/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold } -/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 } -/* GenericOutput */ .chroma .go { color: #8b949e } -/* GenericPrompt */ .chroma .gp { color: #8b949e } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #79c0ff } -/* GenericTraceback */ .chroma .gt { color: #ff7b72 } -/* GenericUnderline */ .chroma .gl { text-decoration: underline } -/* TextWhitespace */ .chroma .w { color: #6e7681 } + +/* Keyword */ .chroma .k { color: #f97583; } +/* KeywordConstant */ .chroma .kc { color: #79b8ff; } +/* KeywordDeclaration */ .chroma .kd { color: #f97583; } +/* KeywordNamespace */ .chroma .kn { color: #f97583; } +/* KeywordPseudo */ .chroma .kp { color: #79b8ff; } +/* KeywordReserved */ .chroma .kr { color: #f97583; } +/* KeywordType */ .chroma .kt { color: #f97583; } + +/* Name */ .chroma .n { color: #b392f0; } +/* NameAttribute */ .chroma .na { color: #f8f8f8; } +/* NameBuiltin */ .chroma .nb { color: #79b8ff; } +/* NameBuiltinPseudo */ .chroma .bp { color: #79b8ff; } +/* NameClass */ .chroma .nc { color: #b392f0; } +/* NameConstant */ .chroma .no { color: #79b8ff; } +/* NameDecorator */ .chroma .nd { color: #b392f0; } +/* NameEntity */ .chroma .ni { color: #ffab70; } +/* NameException */ .chroma .ne { color: #b392f0; } +/* NameFunction */ .chroma .nf { color: #b392f0; } +/* NameFunctionMagic */ .chroma .fm { color: #b392f0; } +/* NameLabel */ .chroma .nl { color: #79b8ff; } +/* NameNamespace */ .chroma .nn { color: #f97583; } +/* NameOther */ .chroma .nx { color: #b392f0; } +/* NameProperty */ .chroma .py { color: #f8f8f8; } +/* NameTag */ .chroma .nt { color: #ffab70; } +/* NameVariable */ .chroma .nv { color: #79b8ff; } +/* NameVariableClass */ .chroma .vc { color: #79b8ff; } +/* NameVariableGlobal */ .chroma .vg { color: #79b8ff; } +/* NameVariableInstance */ .chroma .vi { color: #79b8ff; } +/* NameVariableMagic */ .chroma .vm { color: #79b8ff; } + +/* Literal */ .chroma .l { color: #ffab70; } +/* LiteralDate */ .chroma .ld { color: #ffab70; } +/* LiteralString */ .chroma .s { color: #ffab70; } +/* LiteralStringAffix */ .chroma .sa { color: #ffab70; } +/* LiteralStringBacktick */ .chroma .sb { color: #ffab70; } +/* LiteralStringChar */ .chroma .sc { color: #ffab70; } +/* LiteralStringDelimiter */ .chroma .dl { color: #ffab70; } +/* LiteralStringDoc */ .chroma .sd { color: #6b737c; font-style: italic; } +/* LiteralStringDouble */ .chroma .s2 { color: #ffab70; } +/* LiteralStringEscape */ .chroma .se { color: #ffab70; } +/* LiteralStringHeredoc */ .chroma .sh { color: #ffab70; } +/* LiteralStringInterpol */ .chroma .si { color: #ffab70; } +/* LiteralStringOther */ .chroma .sx { color: #ffab70; } +/* LiteralStringRegex */ .chroma .sr { color: #ffab70; } +/* LiteralStringSingle */ .chroma .s1 { color: #ffab70; } +/* LiteralStringSymbol */ .chroma .ss { color: #ffab70; } + +/* LiteralNumber */ .chroma .m { color: #f8f8f8; } +/* LiteralNumberBin */ .chroma .mb { color: #f8f8f8; } +/* LiteralNumberFloat */ .chroma .mf { color: #f8f8f8; } +/* LiteralNumberHex */ .chroma .mh { color: #f8f8f8; } +/* LiteralNumberInteger */ .chroma .mi { color: #f8f8f8; } +/* LiteralNumberIntegerLong */ .chroma .il { color: #f8f8f8; } +/* LiteralNumberOct */ .chroma .mo { color: #f8f8f8; } + +/* Operator */ .chroma .o { color: #bbbbbb; } +/* OperatorWord */ .chroma .ow { color: #f97583; } +/* Punctuation */ .chroma .p { color: #bbbbbb; } + +/* Comment */ .chroma .c { color: #6b737c; font-style: italic; } +/* CommentHashbang */ .chroma .ch { color: #6b737c; font-style: italic; } +/* CommentMultiline */ .chroma .cm { color: #6b737c; font-style: italic; } +/* CommentSingle */ .chroma .c1 { color: #6b737c; font-style: italic; } +/* CommentSpecial */ .chroma .cs { color: #6b737c; font-style: italic; } +/* CommentPreproc */ .chroma .cp { color: #6b737c; font-style: italic; } +/* CommentPreprocFile */ .chroma .cpf { color: #6b737c; font-style: italic; } + +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #FF7A84; background-color: #3a0d0d; } +/* GenericEmph */ .chroma .ge { font-style: italic; } +/* GenericError */ .chroma .gr { color: #FF7A84; } +/* GenericHeading */ .chroma .gh { color: #79b8ff; font-weight: bold; } +/* GenericInserted */ .chroma .gi { color: #79b8ff; background-color: #0d2a1a; } +/* GenericOutput */ .chroma .go { color: #6b737c; } +/* GenericPrompt */ .chroma .gp { color: #6b737c; font-weight: bold; } +/* GenericStrong */ .chroma .gs { font-weight: bold; color: #FF7A84; } +/* GenericSubheading */ .chroma .gu { color: #79b8ff; } +/* GenericTraceback */ .chroma .gt { color: #FF7A84; } +/* GenericUnderline */ .chroma .gl { text-decoration: underline; } + +/* TextWhitespace */ .chroma .w { } + diff --git a/theme/src/scss/_code.scss b/theme/src/scss/_code.scss index d0db8bebcd3d..f6aa6fff6420 100644 --- a/theme/src/scss/_code.scss +++ b/theme/src/scss/_code.scss @@ -1,13 +1,11 @@ @import "chroma"; -@import "chroma-min-dark"; -@import "colors"; table tr td:not(:first-child) code { word-break: break-word; } code { - background-color: map-get($gray, 125); + background-color: var(--color-gray-100); border-radius: 2px; font-size: 14px; padding: 3px 6px; @@ -31,11 +29,10 @@ pre, } pre { - background: #1F2557; + background: var(--color-violet-950); @apply text-gray-400 py-4 px-5 pr-8 overflow-x-auto leading-normal; .code-mode-dark & { - background: #1f2557; @apply border-none shadow-md; } @@ -122,22 +119,21 @@ div.highlight.line-numbers { } .code-tabbed { - @apply shadow-lg; .code-tabbed-tabs { - background: #1f2557; + background: var(--color-violet-950); @apply shadow-md p-0 flex items-center overflow-hidden; .code-tabbed-tab { @apply p-2 my-0 flex items-center text-sm cursor-pointer; .code-tabbed-tab-label { - font-size: 16px; - @apply mx-2 text-gray-500; + font-size: 14px; + @apply font-mono mx-2 font-normal text-gray-500; } .code-tabbed-tab-indicator { - @apply ml-1 mr-2 bg-orange-300 rounded-full h-2 w-2 invisible hidden; + @apply ml-1 mr-2 bg-violet-primary rounded-full h-2 w-2 invisible hidden; @include screen-md { @apply block; @@ -155,7 +151,7 @@ div.highlight.line-numbers { } &.active { - background: #1f2557; + background: var(--color-violet-950); .code-tabbed-tab-label { @apply text-white; @@ -174,7 +170,7 @@ div.highlight.line-numbers { .code-tabbed-content { height: 440px; - background: #1f2557; + background: var(--color-violet-950); @apply overflow-auto relative p-4 text-sm; .code-tabbed-content-item { @@ -208,8 +204,8 @@ div.highlight.line-numbers { } .code-tabbed-status { - background: #1f2557; - @apply h-3 rounded-b; + background: var(--color-violet-950); + @apply h-3 rounded-b-lg; } } diff --git a/theme/src/scss/_colors.scss b/theme/src/scss/_colors.scss deleted file mode 100644 index a756769ab598..000000000000 --- a/theme/src/scss/_colors.scss +++ /dev/null @@ -1,145 +0,0 @@ -@use "sass:map"; - -$black: #000; -$white: #fff; - -$brand: ( - "yellow": #f7bf2a, - "salmon": #f26e7e, - "fuchsia": #bd4c85, - "fuchsia-darker": #be5188, - "purple": #8a3391, - "violet": #805ac3, - "blue-lighter": #7682f4, - "blue": #4d5bd9, - "blue-darker": #4552c3, -); - -$brand-yellow: map.get($brand, "yellow"); -$brand-salmon: map.get($brand, "salmon"); -$brand-fuchsia: map.get($brand, "fuchsia"); -$brand-purple: map.get($brand, "purple"); -$brand-violet: map.get($brand, "violet"); -$brand-blue: map.get($brand, "blue"); - -$gray: ( - 100: #f9f9f9, - 112: #f9f9fa, - 125: #f2f2f4, - 150: #e5e5e9, - 200: #e0e0e0, - 300: #dcdcdc, - 350: #bebfc9, - 400: #b0b0b0, - 450: #8e8f97, - 500: #808080, - 600: #5a5a5a, - 650: #5f6065, - 675: #4a5568, - 700: #484848, - 800: #404041, - 900: #2b2b2c, - 925: #2f3032, - 950: #131314, -); - -$yellow: ( - 100: #fef9ea, - 200: #fdf2d4, - 300: #fce5aa, - 400: #fad97f, - 500: #f9cc55, - 600: $brand-yellow, - 700: #c69922, - 800: #947319, - 900: #634c11, -); - -$salmon: ( - 100: #fef1f2, - 200: #fce2e5, - 300: #fac5cb, - 400: #f7a8b2, - 500: #f58b98, - 600: $brand-salmon, - 700: #c25865, - 800: #91424c, - 900: #612c32, -); - -$fuchsia: ( - 100: #f8edf3, - 200: #f2dbe7, - 300: #e5b7ce, - 400: #d794b6, - 500: #ca709d, - 600: $brand-fuchsia, - 700: #973d6a, - 800: #712e50, - 900: #4c1e35, -); - -$purple: ( - 100: #f3ebf4, - 200: #e8d6e9, - 300: #d0add3, - 400: #b985bd, - 500: #a15ca7, - 600: $brand-purple, - 700: #6e2974, - 800: #531f57, - 900: #37143a, -); - -$violet: ( - 100: #f2eff9, - 200: #e6def3, - 300: #ccbde7, - 400: #b39cdb, - 500: #997bcf, - 600: $brand-violet, - 700: #66489c, - 800: #4d3675, - 900: #33244e, -); - -$blue: ( - 100: #edeffb, - 200: #dbdef7, - 250: #cacef4, - 300: #b8bdf0, - 350: #a6adec, - 400: #949de8, - 450: #828ce4, - 500: #717ce1, - 600: $brand-blue, - 700: #3e49ae, - 750: #364098, - 800: #2e3782, - 850: #272e6d, - 900: #1f2457, -); - -$orange: ( - 100: #fff7eb, - 200: #fde6c4, - 300: #fad49e, - 400: #f6ba7e, - 500: #ee975c, - 600: #e17d47, - 700: #d86131, - 800: #ba4a2c, - 900: #993d29, -); - -$green: ( - 100: #e0fff2, - 200: #b2fbe0, - 300: #81eeca, - 400: #4ce1b4, - 500: #2fc89f, - 600: #25a78b, - 700: #1d8673, - 800: #19675b, - 900: #155148, -); diff --git a/theme/src/scss/_consent-banner.scss b/theme/src/scss/_consent-banner.scss index 346bf7ad0957..dc3ab1fd386f 100644 --- a/theme/src/scss/_consent-banner.scss +++ b/theme/src/scss/_consent-banner.scss @@ -1,4 +1,3 @@ -@import "colors"; @import "mixins"; #segment-consent-manager:empty { @@ -22,7 +21,7 @@ a { text-decoration: none; - color: map-get($blue, 600); + color: var(--color-violet-primary); } } @@ -100,7 +99,7 @@ } input[type="radio"] { - accent-color: map-get($violet, 600); + accent-color: var(--color-violet-primary); } } @@ -138,7 +137,7 @@ } .consent-btn-accept { - @apply bg-violet-600 text-white border-2 border-violet-600; + @apply bg-violet-primary text-white border-2 border-violet-primary; &:hover, &:focus-visible { @apply bg-violet-700 border-violet-700; @@ -146,9 +145,9 @@ } .consent-btn-secondary { - @apply bg-white text-violet-600 border-2 border-violet-600; + @apply bg-white text-violet-primary border-2 border-violet-primary; &:hover, &:focus-visible { - @apply bg-violet-600 text-white; + @apply bg-violet-primary text-white; } } diff --git a/theme/src/scss/_copy-button.scss b/theme/src/scss/_copy-button.scss index 44f28f047bc3..41643b2bce06 100644 --- a/theme/src/scss/_copy-button.scss +++ b/theme/src/scss/_copy-button.scss @@ -14,27 +14,24 @@ div.highlight { flex-direction: row; width: fit-content; margin: 8px 7px 0 0; - background: #4d5bd9; + background: var(--color-violet-primary); - box-shadow: 0px 0px 12px #364098; border-radius: 4px; position: absolute; top: 0; right: 0; &:hover { - background: #4552c3; - box-shadow: 0px 0px 12px #364098; + background: var(--color-violet-800); } &:active { - background: #4d5bd9; - box-shadow: 0px 0px 12px #364098; + background: var(--color-violet-primary); } .code-mode-dark & { - background: #4d5bd9; + background: var(--color-violet-primary); } button.copy-button { diff --git a/theme/src/scss/_event-list.scss b/theme/src/scss/_event-list.scss index 55954c268e6b..d82dedd104e3 100644 --- a/theme/src/scss/_event-list.scss +++ b/theme/src/scss/_event-list.scss @@ -28,7 +28,7 @@ // On initial load without a hash, the "All" tab should be active. li[data-filter-name="all"] { - border-bottom: 2px solid #805ac3; + border-bottom: 2px solid var(--color-violet-primary); > a { @apply font-semibold text-black; @@ -115,7 +115,7 @@ // Highlight the active tab. ~ .event-list-filter li[data-filter-name="#{$filter-name}"] { - border-bottom: 2px solid #805ac3; + border-bottom: 2px solid var(--color-violet-primary); > a { @apply font-semibold text-black; diff --git a/theme/src/scss/_fonts.scss b/theme/src/scss/_fonts.scss index 9761bda544fd..0a848f1a8bba 100644 --- a/theme/src/scss/_fonts.scss +++ b/theme/src/scss/_fonts.scss @@ -1,11 +1,3 @@ -@font-face { - font-family: "Roboto Mono"; - font-weight: 400; - font-style: normal; - font-display: swap; - src: url("/fonts/roboto-mono-regular.woff2") format("woff2"); -} - @font-face { font-family: "Monaspace Neon Var"; font-weight: 100 900; @@ -14,54 +6,6 @@ src: url("/fonts/monaspace-neon-var.woff2") format("woff2"); } -@font-face { - font-family: "Iosevka"; - font-weight: 400; - font-style: normal; - font-display: swap; - src: url("/fonts/iosevka-fixed-extended.woff2") format("woff2"); -} - -@font-face { - font-family: "Iosevka"; - font-weight: 500; - font-style: normal; - font-display: swap; - src: url("/fonts/iosevka-fixed-extendedmedium.woff2") format("woff2"); -} - -@font-face { - font-family: "Iosevka"; - font-weight: 600; - font-style: normal; - font-display: swap; - src: url("/fonts/iosevka-fixed-extendedbold.woff2") format("woff2"); -} - - -@font-face { - font-family: "Gilroy"; - font-weight: 400; - font-style: normal; - font-display: swap; - src: url("/fonts/gilroy-medium.woff2") format("woff2"), url("/fonts/gilroy-medium.woff") format("woff"); -} - -@font-face { - font-family: "Gilroy"; - font-weight: 600; - font-style: normal; - font-display: swap; - src: url("/fonts/gilroy-semibold.woff2") format("woff2"), url("/fonts/gilroy-semibold.woff") format("woff"); -} - -@font-face { - font-family: "Gilroy"; - font-weight: 700; - font-style: normal; - font-display: swap; - src: url("/fonts/gilroy-bold.woff2") format("woff2"), url("/fonts/gilroy-bold.woff") format("woff"); -} @font-face { font-family: "Inter"; diff --git a/theme/src/scss/_header.scss b/theme/src/scss/_header.scss index d230769a785b..a048c21413eb 100644 --- a/theme/src/scss/_header.scss +++ b/theme/src/scss/_header.scss @@ -38,7 +38,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { @apply flex-grow justify-start mt-0 text-left mr-4; } - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%) !important; + background: var(--color-violet-primary) !important; .top-nav-banner { @apply px-3 py-2 text-left; @@ -80,7 +80,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { .logo-nav-menu { - @apply w-full bg-gray-850 pt-2 -ml-2 text-white font-display z-50; + @apply w-full bg-gray-900 pt-2 -ml-2 text-white font-display z-50; top: 44px; // Height of the nav bar at screens below large. @include screen-md { @@ -114,9 +114,9 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { height: 33px; padding: 8px 16px; - border: 1px solid #805ac3; + border: 1px solid var(--color-violet-primary); border-radius: 20px; - background: linear-gradient(90deg,#be5188,#805ac3) border-box; + background: var(--color-violet-primary); color: #fff; &:hover, @@ -207,7 +207,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { &:hover { a, .dropdown-title { - color: $brand-violet; + color: var(--color-violet-primary); } } @@ -223,12 +223,10 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { min-width: fit-content; div { .header-nav-drop-down-heading { - border-top: 2px solid; - border-image-slice: 1; - border-image-source: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); + border-top: 2px solid var(--color-violet-primary); } .header-nav-drop-down-heading-text { - @apply font-medium; + @apply font-semibold; @apply mx-auto; @apply w-min; @apply px-2; @@ -262,7 +260,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { flex: 50%; .list-title { - @apply px-0 text-base text-left w-full font-medium; + @apply px-0 text-base text-left w-full font-semibold; } .list-sub-title { @@ -274,7 +272,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { @apply font-semibold; a { @apply font-semibold; - color: $brand-violet; + color: var(--color-violet-primary); .list-sub-title { color: theme("colors.gray.800"); } @@ -416,7 +414,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { @apply mt-2 text-base hidden; flex-basis: 100%; a { - @apply text-xl font-medium text-gray-700 mt-4; + @apply text-xl font-semibold text-gray-700 mt-4; color: theme("colors.gray.800"); i { min-width: 2rem; @@ -442,7 +440,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { @apply block; } .mobile-menu-heading { - color: $brand-violet; + color: var(--color-violet-primary); } label > span.dropdown-menu-caret { @apply opacity-50; @@ -455,7 +453,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { @apply block; } .mobile-menu-heading { - color: $brand-violet; + color: var(--color-violet-primary); } label > span.dropdown-menu-caret { @apply opacity-50; @@ -469,7 +467,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { } .mobile-menu-heading { - color: $brand-violet; + color: var(--color-violet-primary); } label > span.dropdown-menu-caret { @@ -484,7 +482,7 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { } .mobile-menu-heading { - color: $brand-violet; + color: var(--color-violet-primary); } label > span.dropdown-menu-caret { @@ -576,8 +574,8 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] { &:hover, &:active { - background: linear-gradient(90deg, #be5188 0%, #805ac3 100%) border-box; - color: $white; + background: var(--color-violet-primary); + color: #fff; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12); border-color: transparent; border-radius: 20px; diff --git a/theme/src/scss/_hero.scss b/theme/src/scss/_hero.scss index 58c965d8a19d..2f117436662a 100644 --- a/theme/src/scss/_hero.scss +++ b/theme/src/scss/_hero.scss @@ -1,45 +1,5 @@ @import "mixins"; -.dot-background-container { - @apply absolute top-0 left-0 w-full h-full; - z-index: -1; -} - -.dot-background { - @apply w-full h-full pointer-events-none; - z-index: -1; - - $bc1: theme("colors.yellow.600"); - $bc2: theme("colors.salmon.600"); - $bc3: theme("colors.fuchsia.600"); - $bc4: theme("colors.purple.600"); - $bc5: theme("colors.violet.600"); - $bc6: theme("colors.blue.600"); - - background-image: linear-gradient(to right, $bc1 0%, $bc2 10%, $bc3 20%, $bc4 30%, $bc5 40%, $bc6 50%, $bc5 60%, $bc4 70%, $bc3 80%, $bc2 90%, $bc1 100%); - background-size: 200%; - background-position: left center; - background-repeat: no-repeat; - - mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAY/SURBVHgB7dpPS1tZGMfxJyZam0khDaktWFp3DVllKU5xNeJCETfuXXQ9fQt9Cb6FzrIrZbrR2VgRmqUbgzJQWlGomAFBySJp4vyeeE1tR/yTzbnM/X7g4VxPbjY/npt77zmaAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACA0FIWE+VyeUiyzWbz9dnZWUlTFVUp+nhPc5sa13Z2dt4a/sPzazQa3fz0Z0l5VVKpVC8/1ab+Xjs4OIhVfrFoQIWX63Q6EwMDAzMKblJTeYWV13E+OuVUVVfta67abrdXBwcHq7Va7dRgjx49ymUymQllNqM/Jz03z0/Hvfw0V9fcvo6rqtVWq1U9OjoKnl/GYkBhjCvABTXhvEIq+pwCu3xKLqoxVUnnenP6xfNB1bSE08U4rmFBNa8qKsOfT8lprpefKq/vxCK/AYuBdDo9rYbqNd91onP83NlKpZI1uGmLmu8W5xajc2fHxsaC55e2wEql0qKaae7S88pteHD39Iv5ULeRdUuw0dHRRQ1z9v15+Ta6+elR5uHJycm6BRT8F1DPfVMantrd+W34hSWcMug7P1Xw/II/AyrAlxoKdnceYMUS7iK/K577buIXcPD84vAS8sz6c/ktL7HUeH3nF70pBxWLlxAkVxwacEd1bHfna1h7lnC6jfadn74bPL84NOCW9RegL6xuWsIpg77yixamg+cXvAEVxK7114D7vrVk6Cs/3xWJQ37BG3B4eHhJTbjhV+Qdvlb3Lbnt7e3E7wtr/3xJw4adb1Xelp9bjcO+cPCF6EKh0FEztXQ1ZjQ+03jt6nx061jxqtfrnyzhjo+PO7lcrpufna8o3LS74c234qVF6OD5BW9A7WS0R0ZGDu38NnKqIDsavTzQoeg0/+yrmu+LxveqZS1gf9R3E78PLO379+8fajuzm5/KL+hufsryh/xU3fz0+fK3b98+NhqN4PnF5t+xLpTL5UUNU9EC68Ual7/pbSnQXb/lNJvNRq1Wo/mu4Ftz2qL03ZGXF2uE/qYcvax088tms+QHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD9KG/4Xzs7OLJVK2efPn61YLKay2WyqUCik8vl89/jx48epJ0+e2NHRkcVJymKiXC4PSbbZbL5WmCVNVVSl6OM9zW1qXNvZ2Xlr+MGbN2/s3bt3Q41G4xfl97umSsqroobs5afa1N9rqj90fPbq1avu90KLRQOq+XKdTmdiYGBgRsFNaiqvoPI6zkennKrqqn3NVdvt9urg4GC1VqudGmxkZCSXyWQmdDijmvTcPD8d9/LTXF1z+zquqlZbrVZVv4bB88tYDCiMcQW4oCacV0hFn/NbyiW5qMZUJZ3rzekXzwdV0xJOeYxrWFDNq4p+K/5JTnO9/FR5XcCaSn1QjkHzG7AYSKfT0wqi13zXic7xc2crlUrWEk53Dx+mLWq+W3ylGJ07+/z58+D5BX8JKZVKi2qmuUvPK7fhwd3TL+ZD3UbWLcH03LyoYc6+Py/fRjc/Pco8PDk5WbeAgv8C6rlvSsNTuzu/Db+whFMGfeenCp5f8GdABfhSQ8HuzgOsWMJd5HfFc99N/AIOnl8cXkKeWX8uv+Ullhqv7/yiN+WgYvESguSKQwPuqI7t7nwNa88STrfRfvM70Xe/WGBxaMAt6y9AX1jdtIRTBn3lp+b7Jw75BW9ABbFr/TXgvm8tGfrKz3dFVH9ZYMEbcHh4eElNuOFbRXf4Wt235La3txO/L6x1wCUNG3a+VXlb/h8J1YODg+D5BV+ILhQKHTVTS1djRuMzjdeuzkd7mite9Xr9kyXc8fFx58GDBy07X9HwN+Kbdje8+Va8tAgdPL/gDaidjLY20w/t/DZyqsbqaPTyQIei0/yzr9FD83vVshawP+q7id8HlrbuIofazvSMTqx7jZ55fmlleS86p5ufyvP7U7Xs/4zQaDSC5xebf8e6oL3NRQ1T0QLrxRqXv+ltKdBdv+U0m81GrVaj+a4wOjq6qC3K33T468Uaob8pRy8rf3t+2WyW/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQM+/fuFZyH8QEfgAAAAASUVORK5CYII="); - mask-size: 28px 35px; - mask-repeat: repeat; - mask-position: 10px 10px; - - -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAY/SURBVHgB7dpPS1tZGMfxJyZam0khDaktWFp3DVllKU5xNeJCETfuXXQ9fQt9Cb6FzrIrZbrR2VgRmqUbgzJQWlGomAFBySJp4vyeeE1tR/yTzbnM/X7g4VxPbjY/npt77zmaAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACA0FIWE+VyeUiyzWbz9dnZWUlTFVUp+nhPc5sa13Z2dt4a/sPzazQa3fz0Z0l5VVKpVC8/1ab+Xjs4OIhVfrFoQIWX63Q6EwMDAzMKblJTeYWV13E+OuVUVVfta67abrdXBwcHq7Va7dRgjx49ymUymQllNqM/Jz03z0/Hvfw0V9fcvo6rqtVWq1U9OjoKnl/GYkBhjCvABTXhvEIq+pwCu3xKLqoxVUnnenP6xfNB1bSE08U4rmFBNa8qKsOfT8lprpefKq/vxCK/AYuBdDo9rYbqNd91onP83NlKpZI1uGmLmu8W5xajc2fHxsaC55e2wEql0qKaae7S88pteHD39Iv5ULeRdUuw0dHRRQ1z9v15+Ta6+elR5uHJycm6BRT8F1DPfVMantrd+W34hSWcMug7P1Xw/II/AyrAlxoKdnceYMUS7iK/K577buIXcPD84vAS8sz6c/ktL7HUeH3nF70pBxWLlxAkVxwacEd1bHfna1h7lnC6jfadn74bPL84NOCW9RegL6xuWsIpg77yixamg+cXvAEVxK7114D7vrVk6Cs/3xWJQ37BG3B4eHhJTbjhV+Qdvlb3Lbnt7e3E7wtr/3xJw4adb1Xelp9bjcO+cPCF6EKh0FEztXQ1ZjQ+03jt6nx061jxqtfrnyzhjo+PO7lcrpufna8o3LS74c234qVF6OD5BW9A7WS0R0ZGDu38NnKqIDsavTzQoeg0/+yrmu+LxveqZS1gf9R3E78PLO379+8fajuzm5/KL+hufsryh/xU3fz0+fK3b98+NhqN4PnF5t+xLpTL5UUNU9EC68Ual7/pbSnQXb/lNJvNRq1Wo/mu4Ftz2qL03ZGXF2uE/qYcvax088tms+QHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD9KG/4Xzs7OLJVK2efPn61YLKay2WyqUCik8vl89/jx48epJ0+e2NHRkcVJymKiXC4PSbbZbL5WmCVNVVSl6OM9zW1qXNvZ2Xlr+MGbN2/s3bt3Q41G4xfl97umSsqroobs5afa1N9rqj90fPbq1avu90KLRQOq+XKdTmdiYGBgRsFNaiqvoPI6zkennKrqqn3NVdvt9urg4GC1VqudGmxkZCSXyWQmdDijmvTcPD8d9/LTXF1z+zquqlZbrVZVv4bB88tYDCiMcQW4oCacV0hFn/NbyiW5qMZUJZ3rzekXzwdV0xJOeYxrWFDNq4p+K/5JTnO9/FR5XcCaSn1QjkHzG7AYSKfT0wqi13zXic7xc2crlUrWEk53Dx+mLWq+W3ylGJ07+/z58+D5BX8JKZVKi2qmuUvPK7fhwd3TL+ZD3UbWLcH03LyoYc6+Py/fRjc/Pco8PDk5WbeAgv8C6rlvSsNTuzu/Db+whFMGfeenCp5f8GdABfhSQ8HuzgOsWMJd5HfFc99N/AIOnl8cXkKeWX8uv+Ullhqv7/yiN+WgYvESguSKQwPuqI7t7nwNa88STrfRfvM70Xe/WGBxaMAt6y9AX1jdtIRTBn3lp+b7Jw75BW9ABbFr/TXgvm8tGfrKz3dFVH9ZYMEbcHh4eElNuOFbRXf4Wt235La3txO/L6x1wCUNG3a+VXlb/h8J1YODg+D5BV+ILhQKHTVTS1djRuMzjdeuzkd7mite9Xr9kyXc8fFx58GDBy07X9HwN+Kbdje8+Va8tAgdPL/gDaidjLY20w/t/DZyqsbqaPTyQIei0/yzr9FD83vVshawP+q7id8HlrbuIofazvSMTqx7jZ55fmlleS86p5ufyvP7U7Xs/4zQaDSC5xebf8e6oL3NRQ1T0QLrxRqXv+ltKdBdv+U0m81GrVaj+a4wOjq6qC3K33T468Uaob8pRy8rf3t+2WyW/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQM+/fuFZyH8QEfgAAAAASUVORK5CYII="); - -webkit-mask-size: 28px 35px; - -webkit-mask-repeat: repeat; - -webkit-mask-position: 10px 10px; - - animation: wave 4s ease-in-out; - animation-fill-mode: both; - animation-iteration-count: infinite; - - &.no-animate { - animation: none; - } -} - @keyframes wave { 0%, 100% { @@ -71,9 +31,9 @@ .home-page-hero-text { h1 { @apply mx-0; - line-height: 3.5rem !important; + line-height: 1.1em !important; font-size: 3rem !important; - font-weight: 700 !important; + font-weight: 600 !important; } p { @@ -82,11 +42,7 @@ } } - .dot-overlay { - @apply w-full h-full absolute top-0 left-0 pointer-events-none; - background: linear-gradient(175deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.5004551991695115) 50%, rgba(255, 255, 255, 1) 95%); - z-index: -1; - } + // NOTE: .dot-overlay intentionally removed .home-hero-btn-primary { @include gradient-button; @@ -121,7 +77,7 @@ @include screen-lg { @apply text-left mx-0; - line-height: 5.5rem !important; + line-height: 1.1em !important; font-size: 5rem !important; } } @@ -129,22 +85,17 @@ } .page-hero { - @apply relative w-full py-10 mb-6; - - .dot-overlay { - @apply w-full h-full absolute top-0 left-0 pointer-events-none; - background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.5004551991695115) 100%); - } + @apply relative w-full py-10 mb-10 border-b border-gray-300; .page-hero-title { - @apply w-full flex flex-col items-center justify-center pointer-events-none; + @apply text-black w-full flex flex-col items-center justify-center pointer-events-none; h1 { @apply text-center max-w-4xl; - font-weight: 700; + font-weight: 600; @include screen-lg { font-size: 3.75rem; - line-height: 1.3; + line-height: 1.1em; } } @@ -152,7 +103,7 @@ @apply text-center max-w-4xl; @include screen-lg { font-size: 3rem; - line-height: 1.3; + line-height: 1.1em; } } @@ -160,7 +111,7 @@ @apply text-center max-w-4xl; @include screen-lg { font-size: 2.5rem; - line-height: 1.3; + line-height: 1.1em; } } } @@ -172,31 +123,7 @@ background-repeat: no-repeat; } -.rainbow-text { - @apply relative; - - &::after { - content: attr(data-text); - z-index: -1; - text-shadow: -1px -1px white, 1px -1px white, -1px 1px white, 1px 1px white; - @apply absolute left-0; - - @include screen-sm { - text-shadow: -3px -3px white, 3px -3px white, -3px 3px white, 3px 3px white; - } - } -} - .page-hero-subtitle { @apply relative; @apply text-gray-700 max-w-4xl text-center text-3xl mt-0; } - -.page-hero .rainbow-text { - @apply block; - padding-bottom: 0.5rem; - - &::after { - @apply top-0; - } -} diff --git a/theme/src/scss/_hubspot.scss b/theme/src/scss/_hubspot.scss index cca5acca10f2..88deb2b27ca2 100644 --- a/theme/src/scss/_hubspot.scss +++ b/theme/src/scss/_hubspot.scss @@ -11,15 +11,14 @@ } fieldset { - @apply block; + @apply block !max-w-none; &:not(.form-columns-1)>.field:first-child { @apply pr-2; } label { - @apply block mb-2 font-normal; - margin: 1rem 0 !important; + @apply block mt-3 mb-1 font-normal; } .hs-input { @@ -50,18 +49,14 @@ @apply border border-gray-300 rounded p-2 bg-white; &:focus { - @apply outline-none ring; + @apply outline-none ring ring-violet-primary; } } - select { - @apply py-1 px-3; - } } input[type="submit"] { - @include gradient-button; - @apply py-3 px-6; + @apply btn py-3 px-6; } .hs-error-msgs { @@ -111,7 +106,7 @@ } &.hs-button { - @apply block btn btn-lg btn border-none py-3 px-6 rounded-lg w-auto bg-violet-600 ml-2; + @apply block btn btn-lg border-none py-3 px-6 rounded-lg w-auto ml-2; } &:focus { @@ -140,8 +135,11 @@ @apply mb-5; } - .legal-consent-container ul { - @apply list-none pl-0; + .legal-consent-container { + @apply my-4; + ul { + @apply list-none pl-0; + } } .hs-fieldtype-booleancheckbox ul { @@ -204,14 +202,11 @@ input, textarea, select { - @apply border border-gray-300 rounded p-2 bg-white; + @apply border border-gray-300 rounded-lg p-2 bg-white; &:focus { - @apply outline-none ring; + @apply outline-none ring ring-violet-primary; } } - select { - @apply py-1 px-3; - } } \ No newline at end of file diff --git a/theme/src/scss/_icons.scss b/theme/src/scss/_icons.scss index ac18484f69e9..88c058876993 100644 --- a/theme/src/scss/_icons.scss +++ b/theme/src/scss/_icons.scss @@ -50,7 +50,14 @@ $fa-font-path: "/fonts/fontawesome"; "upload-to-cloud" { .icon-#{ $icon } { - @apply rounded-full inline-block p-4 w-20 h-20; + + // All icons are violet regardless of class + + @apply rounded-full inline-block p-4 w-20 h-20 bg-violet-50; + + svg * { + stroke: var(--color-violet-primary); + } &-small { @apply p-2 w-10 h-10; @@ -59,68 +66,21 @@ $fa-font-path: "/fonts/fontawesome"; max-height: 24px; } } - - &-black { - @apply bg-white; - - svg * { - stroke: black; - } - } - - &-yellow { - @apply bg-yellow-100; - - svg * { - stroke: theme("colors.yellow.600"); - } - } - - &-salmon { - @apply bg-salmon-100; - - svg * { - stroke: theme("colors.salmon.600"); - } - } - - &-fuchsia { - @apply bg-fuchsia-100; - - svg * { - stroke: theme("colors.fuchsia.600"); - } - } - - &-purple { - @apply bg-purple-100; - - svg * { - stroke: theme("colors.purple.600"); - } - } - - &-violet { - @apply bg-violet-100; - - svg * { - stroke: theme("colors.violet.600"); - } - } - - &-blue { - @apply bg-blue-100; - - svg * { - stroke: theme("colors.blue.600"); - } - } } } @each $icon in "clouds" "rocketship" { .icon-#{ $icon } { - @apply rounded-full inline-block p-4 w-20 h-20; + @apply rounded-full inline-block p-4 w-20 h-20 bg-violet-50; + + svg * { + stroke: var(--color-violet-primary); + fill: var(--color-violet-primary); + } + + svg rect { + fill: var(--color-violet-primary); + } &-small { @apply p-2 w-10 h-10; @@ -129,79 +89,20 @@ $fa-font-path: "/fonts/fontawesome"; max-height: 24px; } } - - &-black { - @apply bg-white; - - svg * { - stroke: black; - fill: black; - } - } - - &-yellow { - @apply bg-yellow-100; - - svg * { - stroke: theme("colors.yellow.600"); - fill: theme("colors.yellow.600") !important; - } - } - - &-salmon { - @apply bg-salmon-100; - - svg * { - stroke: theme("colors.salmon.600"); - fill: theme("colors.salmon.600") !important; - } - } - - &-fuchsia { - @apply bg-fuchsia-100; - - svg * { - stroke: theme("colors.fuchsia.600"); - fill: theme("colors.fuchsia.600") !important; - } - } - - &-purple { - @apply bg-purple-100; - - svg * { - stroke: theme("colors.purple.600"); - fill: theme("colors.purple.600"); - } - - svg rect { - fill: theme("colors.purple.600"); - } - } - - &-violet { - @apply bg-violet-100; - - svg * { - stroke: theme("colors.violet.600"); - fill: theme("colors.violet.600") !important; - } - } - - &-blue { - @apply bg-blue-100; - - svg * { - stroke: theme("colors.blue.600"); - fill: theme("colors.blue.600") !important; - } - } } } @each $icon in "code-window" { .icon-#{ $icon } { - @apply rounded-full inline-block p-4 w-20 h-20; + @apply rounded-full inline-block p-4 w-20 h-20 bg-violet-50; + + svg * { + stroke: var(--color-violet-primary); + } + + svg rect { + fill: var(--color-violet-primary); + } &-small { @apply p-2 w-10 h-10; @@ -210,89 +111,5 @@ $fa-font-path: "/fonts/fontawesome"; max-height: 24px; } } - - &-black { - @apply bg-white; - - svg * { - stroke: black; - } - - svg rect { - fill: black; - } - } - - &-yellow { - @apply bg-yellow-100; - - svg * { - stroke: theme("colors.yellow.600"); - } - - svg rect { - fill: theme("colors.yellow.600"); - } - } - - &-salmon { - @apply bg-salmon-100; - - svg * { - stroke: theme("colors.salmon.600"); - } - - svg rect { - fill: theme("colors.salmon.600"); - } - } - - &-fuchsia { - @apply bg-fuchsia-100; - - svg * { - stroke: theme("colors.fuchsia.600"); - } - - svg rect { - fill: theme("colors.fuchsia.600"); - } - } - - &-purple { - @apply bg-purple-100; - - svg * { - stroke: theme("colors.purple.600"); - } - - svg rect { - fill: theme("colors.purple.600"); - } - } - - &-violet { - @apply bg-violet-100; - - svg * { - stroke: theme("colors.violet.600"); - } - - svg rect { - fill: theme("colors.violet.600"); - } - } - - &-blue { - @apply bg-blue-100; - - svg * { - stroke: theme("colors.blue.600"); - } - - svg rect { - fill: theme("colors.blue.600"); - } - } } } diff --git a/theme/src/scss/_lists.scss b/theme/src/scss/_lists.scss index 7484e2a6d705..84ffdc96730d 100644 --- a/theme/src/scss/_lists.scss +++ b/theme/src/scss/_lists.scss @@ -65,7 +65,7 @@ dl { } a { - @apply text-blue-600; + @apply text-violet-primary; } } @@ -124,7 +124,7 @@ dl { .property-type { @apply block font-normal font-mono mt-2 text-xs; a { - @apply text-blue-600; + @apply text-violet-primary; } } diff --git a/theme/src/scss/_marketing.scss b/theme/src/scss/_marketing.scss index ae7751f88c89..2efc96ebab71 100644 --- a/theme/src/scss/_marketing.scss +++ b/theme/src/scss/_marketing.scss @@ -8,10 +8,16 @@ @import "theme"; -@import "colors"; @import "mixins"; @layer base { + // Restore global heading defaults after Tailwind preflight resets font-size/weight to inherit. + h1, h2, h3, h4, h5, h6 { + font-weight: 600; + letter-spacing: -0.05em; + line-height: 1.1em; + } + // Tailwind v2 preflight set default border-color to gray-200. v4 defaults to // currentColor, which makes `.border` dividers render too dark. Restore the old default. *, @@ -73,11 +79,7 @@ h4, h5, h6 { - // Tailwind v2 makes some changes to line-heights, one of which is that headings - // now get line-heights of 1. This is generally a good thing, but it makes the - // headings in our marketing pages lose some intentional vertical spacing. So we - // override it here to avoid having to sprinkle `leading-*` utilities everywhere. - line-height: 1.375 !important; /* leading-snug */ + line-height: 1.1em !important; } p { @@ -123,51 +125,28 @@ @apply whitespace-normal; } - .btn-primary { - @include gradient-button; - } - + .btn-primary, .btn-primary-template-variant { - @apply relative text-white text-lg bg-violet-800 border-violet-800 border-2 rounded-lg cursor-pointer z-auto; - @apply hover:bg-violet-600 hover:border-violet-600; + @apply relative text-white text-lg bg-violet-primary rounded-lg cursor-pointer z-auto; + @apply hover:bg-violet-800 } + .btn-secondary, .btn-secondary-template-variant { - @apply relative rounded-lg text-lg cursor-pointer z-auto; - background-color: white; - border: 0.5px solid #b4b4b4; - color: #2B2B2C; - padding: calc(0.75rem + 1.5px) calc(2rem + 1.5px) !important; - &:hover { - background-color: #faf9fd; - } + @apply bg-white relative text-black rounded-lg text-lg cursor-pointer z-auto border border-gray-300; + @apply hover:bg-white hover:text-black hover:border-gray-600; } - .btn-secondary { - @apply bg-white text-violet-600 border-2 border-violet-600; - @include transition; - - &.disabled { - opacity: 0.3; - } - - &:hover { - @apply bg-violet-600 text-white; - } - - &:focus { - @apply bg-violet-700 text-white; - } - } + // Make the borders transparent when the button is over a background of the same color. - .bg-violet-600 .btn-secondary { + .bg-violet-primary .btn-secondary { @apply border-transparent; } - // white secondary button for violet-600 background + // white secondary button for violet-primary background .btn-secondary-home-action { - @apply bg-violet-600 text-white border-2 border-white whitespace-normal; + @apply bg-violet-primary text-white border-2 border-white whitespace-normal; @include transition; &.disabled { @@ -246,7 +225,7 @@ .section-partner { .btn-primary:hover { - background:linear-gradient(90deg, #be5188 0%, #805ac3 100%) + background: var(--color-violet-primary); } } diff --git a/theme/src/scss/_mixins.scss b/theme/src/scss/_mixins.scss index 7c1bd5de7887..c09cbefa3f93 100644 --- a/theme/src/scss/_mixins.scss +++ b/theme/src/scss/_mixins.scss @@ -1,5 +1,5 @@ // Breakpoint mixins replacing Tailwind's removed @screen directive. -// Breakpoint values match theme/tailwind.config.js screens. +// Breakpoint values match _theme.scss screens. @mixin screen-sm { @media (min-width: 640px) { @content; } } @mixin screen-md { @media (min-width: 768px) { @content; } } @mixin screen-lg { @media (min-width: 1024px) { @content; } } @@ -24,48 +24,28 @@ } @mixin gradient-border() { - border-bottom: 2px solid; - border-image-slice: 1; - border-image-source: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); + border-bottom: 2px solid var(--color-violet-primary); } @mixin gradient-background() { - background: linear-gradient(90deg, #be5188 0%, theme("colors.violet.600") 100%); + background: var(--color-violet-primary); } @mixin gradient-button { - @apply relative text-white bg-violet-600 border-violet-600 border-2 rounded-lg cursor-pointer z-auto; + @apply relative text-white border-2 rounded-lg cursor-pointer z-auto; + background: var(--color-violet-primary); + border-color: var(--color-violet-primary); &:hover { @apply no-underline; + background: var(--color-violet-800); + border-color: var(--color-violet-800); } - // The default behavior of this mixin, as with all buttons, is to transition between background colors -- - // but since CSS doesn't support transitioning between solids and gradients, we need to resort to a little - // trickery. For elements that support it, we position a gradient-colored background behind the element's - // solid background, and then on hover, hide the solid to reveal the gradient. &:not(input) { @include transition; - - &::before { - @apply absolute rounded-lg; - @include gradient-background; - border-image-width: 2px; - content: ""; - top: -2px; - left: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - z-index: -1; - } - - &:hover { - @apply border-transparent; - @include gradient-background; - } } - // For elements that don't support pseudoelements, just fall back to transitionless hovers. &:is(input) { @apply border-gray-100; @@ -75,6 +55,6 @@ } &:focus { - @apply bg-blue-600 border-blue-600; + @apply bg-violet-primary border-violet-primary; } } diff --git a/theme/src/scss/_neo-card.scss b/theme/src/scss/_neo-card.scss index 520bdb9ff46e..67e921cee1f8 100644 --- a/theme/src/scss/_neo-card.scss +++ b/theme/src/scss/_neo-card.scss @@ -27,7 +27,7 @@ } .neo-card-title { - @apply text-sm font-medium text-gray-900; + @apply text-sm font-semibold text-gray-900; } .neo-card-arrow { diff --git a/theme/src/scss/_notes.scss b/theme/src/scss/_notes.scss index 308b112acd13..9a74c9d74db4 100644 --- a/theme/src/scss/_notes.scss +++ b/theme/src/scss/_notes.scss @@ -62,7 +62,7 @@ a, i { - color: #4d5bd9; + color: var(--color-violet-primary); } div.line { diff --git a/theme/src/scss/_search.scss b/theme/src/scss/_search.scss index 7bd86be47df8..07cfe63726f7 100644 --- a/theme/src/scss/_search.scss +++ b/theme/src/scss/_search.scss @@ -1,6 +1,6 @@ .docs-type-nav-search { @apply flex flex-col-reverse justify-between bg-white; - border-bottom: map-get($gray, 150) 1px solid; + border-bottom: var(--color-gray-200) 1px solid; border-top: none; border-width: 1px; @@ -30,8 +30,8 @@ @include screen-md { @apply flex-row items-center py-0 px-4; - border-top: 1px solid map-get($gray, 150); - background: map-get($gray, 112); + border-top: 1px solid var(--color-gray-200); + background: var(--color-gray-50); .docs-search { @apply m-0; diff --git a/theme/src/scss/_templates.scss b/theme/src/scss/_templates.scss index ebd592714327..07da57b25ae7 100644 --- a/theme/src/scss/_templates.scss +++ b/theme/src/scss/_templates.scss @@ -12,7 +12,7 @@ line-height: 55px; letter-spacing: -2px; strong { - @apply text-violet-800 font-semibold; + @apply text-violet-primary font-semibold; } } @@ -114,7 +114,7 @@ } .hero-booth-number { - @apply font-semibold text-violet-800; + @apply font-semibold text-violet-primary; } .hero-bullet { @@ -229,10 +229,10 @@ } .template-card { - @apply flex flex-1 items-start rounded-2xl p-8 border border-violet-300; + @apply flex flex-1 items-start rounded-2xl p-8 border border-gray-300; &.template-card--highlight { - @apply bg-violet-100; + @apply bg-violet-50; } .card-label { @@ -332,7 +332,7 @@ } .template-testimonial { - @apply font-body bg-violet-100; + @apply font-body bg-violet-50; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -404,7 +404,7 @@ font-feature-settings: 'salt' on; &:hover { - @apply text-violet-800; + @apply text-violet-primary; } } @@ -444,7 +444,7 @@ } p a, li a, .description a { - @apply text-violet-800; + @apply text-violet-primary; &:hover { @apply text-violet-600; @@ -468,7 +468,7 @@ .case-study-hero-headline { @include section-description(); - @apply text-gray-600; + @apply text-gray-800; } .case-study-hero-quote { @@ -482,7 +482,7 @@ } .case-study-hero-stat-panel { - @apply flex-1 bg-violet-100 border-t border-violet-200 flex flex-col justify-center; + @apply flex-1 bg-violet-50 border-t border-violet-200 flex flex-col justify-center; @include screen-md { @apply border-t-0 border-l; @@ -506,7 +506,7 @@ .product-hero-title-primary { @apply block; - color: var(--color-violet-800); + color: var(--color-violet-primary); } .product-hero-title-secondary { @@ -537,17 +537,17 @@ [class*="template-"] { .cta { - @apply text-violet-800 font-semibold font-body no-underline; + @apply text-violet-primary font-semibold font-body no-underline; &:hover { @apply underline; } &--button { - @apply font-normal inline-flex items-center gap-1 px-5 py-3 rounded-lg bg-violet-800 text-white no-underline; + @apply font-normal inline-flex items-center gap-1 px-5 py-3 rounded-lg bg-violet-primary text-white no-underline; &:hover { - @apply bg-violet-700 no-underline; + @apply bg-violet-800 no-underline; } } } @@ -639,7 +639,7 @@ pulumi-chooser > ul li.active { border-image-source: none; - border-color: var(--color-violet-800); + border-color: var(--color-violet-primary); } } @@ -713,7 +713,7 @@ .event-card-type { @apply font-semibold font-body text-body-s uppercase; font-feature-settings: 'salt' on; - color: var(--color-violet-800); + color: var(--color-violet-primary); letter-spacing: 0.5px; font-size: 0.7rem; } @@ -732,7 +732,7 @@ } &:hover .event-card-title { - color: var(--color-violet-800); + color: var(--color-violet-primary); } .event-card-date { @@ -749,7 +749,7 @@ } .event-card-date-month { - @apply text-center font-body font-medium; + @apply text-center font-body font-semibold; font-size: 0.65rem; letter-spacing: 0.5px; color: #757576; @@ -771,7 +771,7 @@ .event-card-cta { @apply font-semibold font-body whitespace-nowrap flex-shrink-0; font-feature-settings: 'salt' on; - color: var(--color-violet-800); + color: var(--color-violet-primary); font-size: 0.875rem; i { @@ -792,7 +792,7 @@ a { @apply font-semibold no-underline; - color: var(--color-violet-800); + color: var(--color-violet-primary); } .event-breadcrumb-separator { @@ -814,7 +814,7 @@ .event-single-type { @apply font-semibold font-body uppercase; font-feature-settings: 'salt' on; - color: var(--color-violet-800); + color: var(--color-violet-primary); font-size: 0.8rem; letter-spacing: 0.5px; } @@ -838,7 +838,7 @@ } .timing-info-label { - @apply font-body font-medium text-body-s pb-2 mb-2 border-b uppercase tracking-wide; + @apply font-body font-semibold text-body-s pb-2 mb-2 border-b uppercase tracking-wide; font-feature-settings: 'salt' on; color: #757576; border-color: #E8E8E8; @@ -853,11 +853,11 @@ .event-summary-cloud-notice { @apply font-body text-body-s rounded-xl p-4 mb-6 text-gray-700; - background-color: var(--color-violet-100); - border: 0.5px solid var(--color-violet-800); + background-color: var(--color-violet-50); + border: 0.5px solid var(--color-violet-primary); a { - color: var(--color-violet-800); + color: var(--color-violet-primary); @apply font-semibold; } } @@ -890,7 +890,7 @@ color: #5b5b5b; i { - color: var(--color-violet-800); + color: var(--color-violet-primary); @apply mt-0.5 flex-shrink-0; } } @@ -996,7 +996,7 @@ } .social-carousel-card { - @apply border border-violet-300 rounded-2xl p-4 md:p-8 flex flex-col gap-4; + @apply border border-gray-300 rounded-2xl p-4 md:p-8 flex flex-col gap-4; min-height: 320px; width: 100%; @@ -1062,7 +1062,7 @@ } .case-study-card { - @apply flex flex-col rounded-2xl border border-violet-300 no-underline text-black text-left; + @apply flex flex-col rounded-2xl border border-gray-300 no-underline text-black text-left; &:hover { @apply border-violet-400; @@ -1127,8 +1127,8 @@ .code-snippets-container { @apply rounded-lg overflow-scroll w-full; padding-bottom: 25%; - border: 1px solid #3d1a6e; - background-color: #20054e; + border: 1px solid var(--color-violet-900); + background-color: var(--color-violet-950); height: 350px; position: relative; @@ -1168,8 +1168,8 @@ display: flex; align-items: center; justify-content: space-between; - background-color: #20054e; - border-bottom: 1px solid #4c2e7e; + background-color: var(--color-violet-950); + border-bottom: 1px solid var(--color-violet-900); padding: 0.5rem 1rem; min-height: 2.5rem; position: sticky; @@ -1243,7 +1243,7 @@ top: calc(100% + 4px); right: 0; min-width: 9rem; - background-color: #20054e; + background-color: var(--color-violet-950); border: 1px solid var(--color-violet-900); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); diff --git a/theme/src/scss/_theme.scss b/theme/src/scss/_theme.scss index 96e107db196d..2cb9907b9bf1 100644 --- a/theme/src/scss/_theme.scss +++ b/theme/src/scss/_theme.scss @@ -1,103 +1,144 @@ // v4 CSS-first theme: defines custom properties for colors, fonts, screens, etc. -// Values are sourced from tokens.json (same source as the old tailwind.config.js). +// Values are sourced from the official Pulumi brand palette. +// +// NOTE: The legacy salmon, fuchsia, and purple color scales have been intentionally removed @theme { --color-white: #fff; --color-black: #000; --color-transparent: transparent; - --color-gray-100: #f9f9fa; - --color-gray-200: #f2f2f4; - --color-gray-300: #e5e5e9; - --color-gray-400: #d8d9df; - --color-gray-500: #bebfc9; - --color-gray-600: #8e8f97; - --color-gray-700: #5f6065; - --color-gray-800: #2f3032; - --color-gray-850: #2b2b2c; - --color-gray-900: #131314; - --color-yellow-100: #fef9ea; - --color-yellow-200: #fdf2d4; - --color-yellow-300: #fce5aa; - --color-yellow-400: #fad97f; - --color-yellow-500: #f9cc55; - --color-yellow-600: #f7bf2a; - --color-yellow-700: #c69922; - --color-yellow-800: #947319; - --color-yellow-900: #634c11; - --color-salmon-100: #fef1f2; - --color-salmon-200: #fce2e5; - --color-salmon-300: #fac5cb; - --color-salmon-400: #f7a8b2; - --color-salmon-500: #f58b98; - --color-salmon-600: #f26e7e; - --color-salmon-700: #c25865; - --color-salmon-800: #91424c; - --color-salmon-900: #612c32; - --color-fuchsia-100: #f8edf3; - --color-fuchsia-200: #f2dbe7; - --color-fuchsia-300: #e5b7ce; - --color-fuchsia-400: #d794b6; - --color-fuchsia-500: #ca709d; - --color-fuchsia-600: #bd4c85; - --color-fuchsia-700: #973d6a; - --color-fuchsia-800: #712e50; - --color-fuchsia-900: #4c1e35; - --color-purple-100: #f3ebf4; - --color-purple-200: #e8d6e9; - --color-purple-300: #d0add3; - --color-purple-400: #b985bd; - --color-purple-500: #a15ca7; - --color-purple-600: #8a3391; - --color-purple-700: #6e2974; - --color-purple-800: #531f57; - --color-purple-900: #37143a; - --color-violet-100: #FAF9FD; - --color-violet-200: #E5DFF1; - --color-violet-300: #D7CDEA; - --color-violet-400: #BBA9DA; - --color-violet-500: #A68ECF; - --color-violet-600: #9174C3; - --color-violet-700: #805AC3; - --color-violet-800: #673EAC; - --color-violet-900: #481A96; - --color-blue-100: #edeffb; - --color-blue-200: #dbdef7; - --color-blue-300: #b8bdf0; - --color-blue-400: #949de8; - --color-blue-500: #717ce1; - --color-blue-600: #4d5bd9; - --color-blue-700: #3e49ae; - --color-blue-800: #2e3782; - --color-blue-900: #1f2457; - --color-red-100: #fff5f5; - --color-red-200: #fed7d7; - --color-red-300: #feb2b2; - --color-red-400: #fc8181; - --color-red-500: #f56565; - --color-red-600: #e53e3e; - --color-red-700: #c53030; - --color-red-800: #9b2c2c; - --color-red-900: #742a2a; - --color-orange-100: #fff7eb; - --color-orange-200: #fde6c4; - --color-orange-300: #fad49e; - --color-orange-400: #f6ba7e; - --color-orange-500: #ee975c; - --color-orange-600: #e17d47; - --color-orange-700: #d86131; - --color-orange-800: #ba4a2c; - --color-orange-900: #993d29; - --color-green-100: #e0fff2; - --color-green-200: #b2fbe0; - --color-green-300: #81eeca; - --color-green-400: #4ce1b4; - --color-green-500: #2fc89f; - --color-green-600: #25a78b; - --color-green-700: #1d8673; - --color-green-800: #19675b; - --color-green-900: #155148; - --font-display: Gilroy, ui-sans-serif, system-ui, sans-serif; + + /* Gray */ + --color-gray-50: #fafafa; + --color-gray-100: #efeff0; + --color-gray-200: #e0dfe2; + --color-gray-300: #cbcace; + --color-gray-400: #b3b1b9; + --color-gray-500: #9997a0; + --color-gray-600: #817d8c; + --color-gray-700: #6a6675; + --color-gray-800: #56535a; + --color-gray-900: #46434c; + --color-gray-950: #2e2932; + + /* Yellow */ + --color-yellow-50: #fffbeb; + --color-yellow-100: #fef2c7; + --color-yellow-200: #fde38a; + --color-yellow-300: #fdcf4c; + --color-yellow-400: #fcba23; + --color-yellow-500: #f49709; + --color-yellow-600: #da7205; + --color-yellow-700: #b54f08; + --color-yellow-800: #933d0d; + --color-yellow-900: #723213; + --color-yellow-950: #371d11; + + /* Violet */ + --color-violet-50: #f6f5ff; + --color-violet-100: #edebff; + --color-violet-200: #e0dbff; + --color-violet-300: #d0c7ff; + --color-violet-400: #b7a3ff; + --color-violet-500: #a585ff; + --color-violet-600: #915df9; + --color-violet-700: #702eea; + --color-violet-800: #5423af; + --color-violet-900: #422579; + --color-violet-950: #2d2442; + + /* Blue */ + --color-blue-50: #f5faff; + --color-blue-100: #e5f1ff; + --color-blue-200: #cce4ff; + --color-blue-300: #a3d0ff; + --color-blue-400: #75b5ff; + --color-blue-500: #5296ff; + --color-blue-600: #3c79f6; + --color-blue-700: #1e57eb; + --color-blue-800: #1e47c2; + --color-blue-900: #28448a; + --color-blue-950: #283048; + + /* Red */ + --color-red-50: #fff5f6; + --color-red-100: #ffe0e1; + --color-red-200: #ffc7ca; + --color-red-300: #ff9fa4; + --color-red-400: #ff676e; + --color-red-500: #fb2c36; + --color-red-600: #ee1721; + --color-red-700: #bd141c; + --color-red-800: #96171e; + --color-red-900: #611f22; + --color-red-950: #331f20; + + /* Orange */ + --color-orange-50: #fffaf5; + --color-orange-100: #ffebd1; + --color-orange-200: #fedbb3; + --color-orange-300: #fdbe7c; + --color-orange-400: #fb9746; + --color-orange-500: #f96c0b; + --color-orange-600: #da510b; + --color-orange-700: #b23c0b; + --color-orange-800: #923111; + --color-orange-900: #693420; + --color-orange-950: #33231f; + + /* Green */ + --color-green-50: #f6fdf9; + --color-green-100: #dffce9; + --color-green-200: #b6fbce; + --color-green-300: #84f1ac; + --color-green-400: #4ade80; + --color-green-500: #21c45d; + --color-green-600: #16a249; + --color-green-700: #1c7d41; + --color-green-800: #165a31; + --color-green-900: #1c3f2b; + --color-green-950: #202723; + + /* Semantic: violet-primary (violet-700) */ + --color-violet-primary: #702eea; + + /* Semantic palette roles */ + --color-violet-background: #f6f5ff; + --color-violet-muted: #e0dbff; + --color-violet-accent: #a585ff; + + --color-gray-background: #fafafa; + --color-gray-muted: #e0dfe2; + --color-gray-accent: #9997a0; + --color-gray-primary: #6a6675; + + --color-yellow-background: #fffbeb; + --color-yellow-muted: #fde38a; + --color-yellow-accent: #f49709; + --color-yellow-primary: #b54f08; + + --color-blue-background: #f5faff; + --color-blue-muted: #cce4ff; + --color-blue-accent: #5296ff; + --color-blue-primary: #1e57eb; + + --color-red-background: #fff5f6; + --color-red-muted: #ffc7ca; + --color-red-accent: #fb2c36; + --color-red-primary: #bd141c; + + --color-orange-background: #fffaf5; + --color-orange-muted: #fedbb3; + --color-orange-accent: #f96c0b; + --color-orange-primary: #b23c0b; + + --color-green-background: #f6fdf9; + --color-green-muted: #b6fbce; + --color-green-accent: #21c45d; + --color-green-primary: #1c7d41; + + --font-display: Inter, ui-sans-serif, system-ui, sans-serif; --font-body: Inter, ui-sans-serif, system-ui, sans-serif; - --font-mono: Roboto Mono, ui-monospace, SFMono-Regular, monospace; + --font-mono: "Monaspace Neon Var", ui-monospace, SFMono-Regular, monospace; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; diff --git a/theme/src/scss/_tiles.scss b/theme/src/scss/_tiles.scss index d40d5a134c76..ae076aeed9d9 100644 --- a/theme/src/scss/_tiles.scss +++ b/theme/src/scss/_tiles.scss @@ -7,7 +7,7 @@ .tile { @include transition; - @apply block rounded shadow border border-gray-300 cursor-pointer; + @apply block rounded border border-gray-300 cursor-pointer; &:hover { @apply shadow-md; diff --git a/theme/src/scss/_tooltip.scss b/theme/src/scss/_tooltip.scss index db313e4c80ce..3932e06783cb 100644 --- a/theme/src/scss/_tooltip.scss +++ b/theme/src/scss/_tooltip.scss @@ -1,4 +1,3 @@ -@import "colors"; @import "mixins"; pulumi-tooltip { diff --git a/theme/src/scss/components/_banner.scss b/theme/src/scss/components/_banner.scss index 459a287f7717..d84333a16922 100644 --- a/theme/src/scss/components/_banner.scss +++ b/theme/src/scss/components/_banner.scss @@ -1,7 +1,7 @@ pulumi-banner { @apply hidden text-white font-body text-base text-center py-3 px-4 shadow; - background-image: linear-gradient(77.95deg, #f6bf28 0.06%, #f2707e 48.58%, #bf4e86 95.36%); + background: var(--color-violet-primary); &[visible] { @apply block; @@ -17,7 +17,7 @@ pulumi-banner { } span { - @apply text-2xl inline-block text-blue-100 mr-2; + @apply text-2xl inline-block text-violet-100 mr-2; &:hover { @apply text-white; @@ -44,7 +44,7 @@ pulumi-banner { } .cta { - @apply cursor-pointer mx-2 w-full rounded-full font-bold bg-blue-500 px-4 py-2 text-sm uppercase mt-4 mb-2 flex items-center justify-center; + @apply cursor-pointer mx-2 w-full rounded-full font-bold bg-violet-primary px-4 py-2 text-sm uppercase mt-4 mb-2 flex items-center justify-center; @include transition; @include fa-glyph("\f054"); @@ -61,7 +61,7 @@ pulumi-banner { } &:hover { - @apply bg-blue-400; + @apply bg-violet-800; } } } diff --git a/theme/src/scss/components/_convert.scss b/theme/src/scss/components/_convert.scss index e35660802de6..ba7a3e0ca9c8 100644 --- a/theme/src/scss/components/_convert.scss +++ b/theme/src/scss/components/_convert.scss @@ -66,7 +66,7 @@ pulumi-convert { p { a { - @apply text-blue-600; + @apply text-violet-primary; &:hover { @apply underline; diff --git a/theme/src/scss/components/_docs-nav.scss b/theme/src/scss/components/_docs-nav.scss index 1fd2cb03b6e7..7cd3390fbcc4 100644 --- a/theme/src/scss/components/_docs-nav.scss +++ b/theme/src/scss/components/_docs-nav.scss @@ -15,7 +15,7 @@ padding: 6px 12px; &.active { - @apply bg-blue-200 text-blue-900; + @apply bg-violet-200 text-violet-900; } button { @@ -30,10 +30,10 @@ // Only apply hover to non-expandable (document) links &:not(.expandable) a:hover { - @apply bg-blue-100 text-blue-800; + @apply bg-violet-100 text-violet-800; i { - @apply text-blue-900; + @apply text-violet-900; } } @@ -43,7 +43,7 @@ &.expanded { > a { - @apply text-blue-800; + @apply text-violet-800; > button { > i { diff --git a/theme/src/scss/components/_examples.scss b/theme/src/scss/components/_examples.scss index 114452cfa546..5587144c9214 100644 --- a/theme/src/scss/components/_examples.scss +++ b/theme/src/scss/components/_examples.scss @@ -5,7 +5,7 @@ pulumi-examples { @apply cursor-pointer text-xl text-gray-700; span { - @apply font-bold inline-flex w-6 h-6 mr-2 bg-gray-200 text-blue-700 items-center justify-center rounded-lg; + @apply font-bold inline-flex w-6 h-6 mr-2 bg-gray-200 text-violet-800 items-center justify-center rounded-lg; @include fa-glyph("\f105"); } diff --git a/theme/src/scss/components/_resource-links.scss b/theme/src/scss/components/_resource-links.scss index 7cff8da5c54a..c483c97ebecd 100644 --- a/theme/src/scss/components/_resource-links.scss +++ b/theme/src/scss/components/_resource-links.scss @@ -4,7 +4,7 @@ pulumi-resource-links{ } .heading { @apply text-sm font-semibold mt-6 pb-0.5; - color: map-get($gray, 700); + color: var(--color-gray-700); } .links { @apply text-sm pt-2 pl-4; diff --git a/theme/src/scss/docs/_docs-home.scss b/theme/src/scss/docs/_docs-home.scss index b30a87ec88f2..c8bff7e7158d 100644 --- a/theme/src/scss/docs/_docs-home.scss +++ b/theme/src/scss/docs/_docs-home.scss @@ -13,37 +13,21 @@ section.docs-home { } h3 { - font-family: 'Gilroy'; - font-weight: 500; + font-family: 'Inter'; + font-weight: 600; font-size: 21px; - color: map-get($gray, 950); + color: var(--color-gray-950); } div.header { @apply flex flex-col gap-4 p-6 rounded bg-no-repeat bg-right-bottom; min-height: 200px; - background-image: url("/images/docs/docs-home-header-background-mobile.svg"); p { @apply max-w-2xl; } - @include screen-md { - @apply bg-auto; - background-image: url("/images/docs/docs-home-header-background-tablet.svg"); - } - - @include screen-lg { - background-image: url("/images/docs/docs-home-header-background-desktop.svg"); - } - - @include screen-xl { - .docs-content-width-expanded & { - background-image: url("/images/docs/docs-home-header-background-desktop-wide.svg"); - } - } - @include screen-xxl { .docs-content-width-expanded & { p { @@ -59,27 +43,27 @@ section.docs-home { a { padding: 5px 16px; border-radius: 4px; - border: 1px map-get($brand, "blue") solid; - background: $white; + border: 1px var(--color-violet-primary) solid; + background: #fff; font-family: 'Inter'; font-weight: 400; font-size: 14px; - color: $white; + color: #fff; &.docs-primary-link-btn { - background: map-get($brand, "blue"); - color: $white; + background: var(--color-violet-primary); + color: #fff; &:hover { - background: map-get($brand, "blue-darker"); + background: var(--color-violet-800); } } &.docs-secondary-link-btn { - color: map-get($brand, "blue"); + color: var(--color-violet-primary); &:hover { - background: map-get($blue, 100); + background: var(--color-violet-100); } } } @@ -87,10 +71,10 @@ section.docs-home { } h2 { - font-family: 'Gilroy'; - font-weight: 500; + font-family: 'Inter'; + font-weight: 600; font-size: 24px; - color: map-get($gray, 950); + color: var(--color-gray-950); } div.docs-home-section { @@ -104,7 +88,7 @@ section.docs-home { display: flex; flex-direction: column; gap: 0; - background: map-get($blue, 100); + background: var(--color-blue-100); border-radius: 4px; .heading { @@ -125,8 +109,8 @@ section.docs-home { flex-direction: column; gap: 12px; padding: 24px; - background: $white; - border: 1px solid map-get($gray, 150); + background: #fff; + border: 1px solid var(--color-gray-200); box-shadow: 0px 2px 24px rgba(95, 96, 101, 0.14); border-radius: 4px; @@ -135,7 +119,7 @@ section.docs-home { align-items: center; gap: 12px; padding-bottom: 10px; - border-bottom: 1px solid map-get($gray, 150); + border-bottom: 1px solid var(--color-gray-200); div.icon { top: -1px; @@ -143,8 +127,8 @@ section.docs-home { } &:hover { - background: map-get($gray, 100); - border: 1px solid map-get($gray, 350); + background: var(--color-gray-50); + border: 1px solid var(--color-gray-400); } } @@ -196,12 +180,11 @@ section.docs-home { a { flex: 1; border: 1px solid #E5E5E9; - filter: drop-shadow(0px 2px 24px rgba(95, 96, 101, 0.14)); border-radius: 4px; div.card-icon { - background: map-get($gray, 100); - border-bottom: 1px solid map-get($gray, 150); + background: var(--color-gray-50); + border-bottom: 1px solid var(--color-gray-200); border-radius: 4px 4px 0px 0px; display: flex; justify-content: center; @@ -209,16 +192,16 @@ section.docs-home { } div.label { - background: $white; + background: #fff; border-radius: 0px 0px 4px 4px; font-family: 'Inter'; font-weight: 400; font-size: 18px; - color: map-get($gray, 950); + color: var(--color-gray-950); } &:hover { - border: 1px solid map-get($gray, 350); + border: 1px solid var(--color-gray-400); } } } diff --git a/theme/src/scss/docs/_docs-main.scss b/theme/src/scss/docs/_docs-main.scss index 754ecd7a19d7..db6298705e36 100644 --- a/theme/src/scss/docs/_docs-main.scss +++ b/theme/src/scss/docs/_docs-main.scss @@ -1,11 +1,11 @@ .docs-list-main .docs-main-content, body.section-registry { h1 { - font-family: Gilroy; - line-height: 1.5; - font-weight: 400; + font-family: Inter; + line-height: 1.1em; + font-weight: 600; font-size: 30px; - color: map-get($gray, 950); + color: var(--color-gray-950); margin: 16px 0; } @@ -13,19 +13,10 @@ body.section-registry { display: inline-block; } - div.h1-gradient { - width: calc(100% - 32px); - height: 12px; - background: linear-gradient(90deg, map-get($brand, "yellow") 0%, map-get($brand, "salmon") 18.23%, map-get($brand, "fuchsia-darker") 38.02%, map-get($brand, "purple") 53.65%, map-get($brand, "violet") 74.48%, map-get($brand, "blue-lighter") 100%); - opacity: 0.1; - position: relative; - top: -34px; - } - section.docs-content { h1, h2, h3, h4, h5, h6 { - font-family: Gilroy; - line-height: 1.5; + font-family: Inter; + line-height: 1.1em; scroll-margin-top: 60px; } @@ -46,40 +37,40 @@ body.section-registry { } h1 { - font-weight: 400; + font-weight: 600; font-size: 30px; - color: map-get($gray, 950); + color: var(--color-gray-950); margin: 16px 0; } h2 { - font-weight: 400; + font-weight: 600; font-size: 24px; - color: map-get($gray, 950); + color: var(--color-gray-950); } h3 { font-weight: 600; font-size: 21px; - color: map-get($gray, 950); + color: var(--color-gray-950); } h4 { font-weight: 600; font-size: 18px; - color: map-get($gray, 650); + color: var(--color-gray-700); } h5 { - font-weight: 400; + font-weight: 600; font-size: 18px; - color: map-get($gray, 950); + color: var(--color-gray-950); } h6 { font-weight: 600; font-size: 16px; - color: map-get($gray, 600); + color: var(--color-gray-700); } @@ -87,7 +78,7 @@ body.section-registry { font-family: 'Inter'; font-weight: 400; font-size: 16px; - color: map-get($gray, 950); + color: var(--color-gray-950); padding: 0 0 12px 0; margin: 0; line-height: 1.6; @@ -103,8 +94,8 @@ body.section-registry { p a:not(.btn-secondary), ul li a[href] { - color: map-get($brand, "blue"); - background: linear-gradient(90deg,rgba(142, 143, 151, 0),rgba(142, 143, 151, 0)),linear-gradient(90deg,map-get($gray, 450),map-get($gray, 450)); + color: var(--color-violet-primary); + background: linear-gradient(90deg,rgba(142, 143, 151, 0),rgba(142, 143, 151, 0)),linear-gradient(90deg,var(--color-gray-500),var(--color-gray-500)); background-position: 100% 100%,0 100%; background-repeat: no-repeat; background-size: 100% 0.1em,0 0.1em; @@ -113,7 +104,7 @@ body.section-registry { transition-timing-function: ease-in; &:hover { - color: map-get($brand, "blue-darker"); + color: var(--color-violet-800); text-decoration: none; background-size: 0 0.1em,100% 0.1em; } @@ -122,7 +113,7 @@ body.section-registry { div.highlight pre, code, .font-mono { - font-family: 'Iosevka'; + font-family: "Monaspace Neon Var"; font-weight: 400; } } @@ -236,7 +227,7 @@ body.section-registry { span.count-badge { font-size: 11px; padding: 0px 4px; - border: 1px solid #364098; + border: 1px solid var(--color-violet-primary); border-radius: 6px; } } @@ -246,7 +237,7 @@ body.section-registry { flex-basis: 240px; box-shadow: none; margin: 0 6px 0 16px; - border-right: 1px solid map-get($gray, 150); + border-right: 1px solid var(--color-gray-200); box-shadow: none; position: sticky; @@ -260,10 +251,10 @@ body.section-registry { z-index: 100; width: 32px; height: 40px; - background: $white; + background: #fff; border-width: 1px 1px 1px 0px; border-style: solid; - border-color: map-get($gray, 150); + border-color: var(--color-gray-200); box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.08); border-radius: 0px 4px 4px 0px; cursor: pointer; @@ -276,7 +267,7 @@ body.section-registry { &:hover { .docs-nav-toggle-icon { - background-color: map-get($gray, 900); + background-color: var(--color-gray-900); } } } @@ -290,7 +281,7 @@ body.section-registry { display: flex; .docs-main-nav-wrapper { - border-right: 1px solid map-get($gray, 150); + border-right: 1px solid var(--color-gray-200); } .docs-main-nav-wrapper .docs-main-nav { @@ -298,7 +289,7 @@ body.section-registry { flex-basis: 240px; height: calc(100vh); padding-left: 16px; - background-color: $white; + background-color: #fff; box-shadow: 6px 0px 36px rgba(0, 0, 0, 0.08); justify-content: space-between; @@ -437,8 +428,8 @@ body.section-registry { } .table-of-contents { - border-top: 1px solid map-get($gray, 150); - border-bottom: 1px solid map-get($gray, 150); + border-top: 1px solid var(--color-gray-200); + border-bottom: 1px solid var(--color-gray-200); padding: 8px 0; } @@ -513,7 +504,7 @@ body.section-registry { gap: 16px; padding-bottom: 24px; margin-bottom: 4px; - border-bottom: 1px solid map-get($gray, 300); + border-bottom: 1px solid var(--color-gray-200); } div.expand-more-18-18 { @@ -597,7 +588,7 @@ body.section-registry { font-family: 'Inter'; font-weight: 500; font-size: 12px; - color: #4D5BD9; + color: var(--color-violet-primary); align-items: center; span { @@ -711,7 +702,7 @@ body.section-registry { font-family: 'Inter'; font-weight: 400; font-size: 14px; - color: #364098; + color: var(--color-violet-primary); } li.h3 { @@ -727,7 +718,7 @@ body.section-registry { font-weight: 700; &::before { - background-color: #805ac3; + background-color: var(--color-violet-primary); border-radius: 50%; width: 10px; height: 10px; @@ -758,12 +749,12 @@ body.section-registry { .heading:hover { div.icon { - background-color: map-get($gray, 900); + background-color: var(--color-gray-900); } .icon-heading-wrapper { h2 { - color: map-get($gray, 900); + color: var(--color-gray-900); } } } diff --git a/theme/src/scss/docs/_docs-top-nav.scss b/theme/src/scss/docs/_docs-top-nav.scss index 6707a44e8152..974188d7c30d 100644 --- a/theme/src/scss/docs/_docs-top-nav.scss +++ b/theme/src/scss/docs/_docs-top-nav.scss @@ -57,9 +57,9 @@ nav.actually-docs { box-shadow: none; color: #fff; padding: 8px 16px; - border: 1px solid #805ac3; - border-radius: 20px; - background: linear-gradient(90deg,#be5188,#805ac3) border-box; + border: 1px solid var(--color-violet-primary); + border-radius: 4px; + background: var(--color-violet-primary); &:hover { color: #131314; diff --git a/theme/src/scss/docs/_footer.scss b/theme/src/scss/docs/_footer.scss index b3fb515fafe0..1f3f2092853d 100644 --- a/theme/src/scss/docs/_footer.scss +++ b/theme/src/scss/docs/_footer.scss @@ -1,7 +1,7 @@ footer.docs-footer { padding: 24px; border-top: 2px solid; - border-image: linear-gradient(90deg, rgba(247, 191, 42, 0.3) 0%, rgba(242, 110, 126, 0.3) 18.23%, rgba(190, 81, 136, 0.3) 38.02%, rgba(138, 51, 145, 0.3) 53.65%, rgba(128, 90, 195, 0.3) 74.48%, rgba(118, 130, 244, 0.3)) 1; + border-color: color-mix(in srgb, var(--color-violet-primary) 30%, transparent); justify-content: space-between; gap: 40px; diff --git a/theme/src/scss/docs/_main-nav.scss b/theme/src/scss/docs/_main-nav.scss index ab1441413e9f..bf01b79cfac5 100644 --- a/theme/src/scss/docs/_main-nav.scss +++ b/theme/src/scss/docs/_main-nav.scss @@ -14,26 +14,26 @@ nav.main-nav { border-left: transparent 3px solid; &.active { - background-color: map-get($blue, 100); + background-color: var(--color-violet-100); border-radius: 4px; width: fit-content; &:hover { text-decoration: none; - background-color: map-get($blue, 250); - color: map-get($blue, 850); + background-color: var(--color-violet-200); + color: var(--color-violet-900); } } } a { @apply py-0.5 px-1.5 rounded-sm; - color: map-get($blue, 750); + color: var(--color-violet-800); &:hover { - text-decoration: map-get($gray, 450) solid underline; + text-decoration: var(--color-gray-500) solid underline; text-underline-offset: 6px; - color: map-get($blue, 750); + color: var(--color-violet-800); } } @@ -53,14 +53,14 @@ nav.main-nav { border-radius: 0 2px 2px 0; &.active { - background-color: map-get($blue, 100); + background-color: var(--color-violet-100); border-radius: 4px; width: fit-content; text-decoration: none; &:hover { - background-color: map-get($blue, 250); - color: map-get($blue, 850); + background-color: var(--color-violet-200); + color: var(--color-violet-900); } } } @@ -82,13 +82,13 @@ nav.main-nav { .top-level-container, div.sidenav-subsection { - border-left: map-get($gray, 150) 1px solid; + border-left: var(--color-gray-200) 1px solid; margin-left: 1rem; } .toggleButton, .toggleButton-topLevel { @apply cursor-pointer; - color: map-get($gray, 950); + color: var(--color-gray-950); font-size: 11px; position: relative; top: -1px; diff --git a/theme/src/scss/docs/_packages.scss b/theme/src/scss/docs/_packages.scss index a42f9354ae17..fba624023a3f 100644 --- a/theme/src/scss/docs/_packages.scss +++ b/theme/src/scss/docs/_packages.scss @@ -63,10 +63,10 @@ } &[data-filter-value="component"] { - @apply border-purple-300; + @apply border-violet-300; [data-selected-types*="component"] & { - @apply bg-purple-300; + @apply bg-violet-300; } } } @@ -135,7 +135,7 @@ .all-packages .package { a:hover { .title { - @apply text-blue-600 underline; + @apply text-violet-primary underline; } } } @@ -149,7 +149,7 @@ div.packages { section.featured-packages, section.all-packages { h2 { - font-family: Gilroy; + font-family: Inter; font-weight: 400; font-size: 30px; color: #131314; @@ -199,7 +199,7 @@ div.packages section.featured-packages { .package-title { flex-grow: 1; - font-family: 'Gilroy'; + font-family: 'Inter'; font-weight: 500; font-size: 24px; color: #131314; @@ -209,7 +209,7 @@ div.packages section.featured-packages { } .package-version { - font-family: 'Gilroy'; + font-family: 'Inter'; font-weight: 500; font-size: 14px; text-align: center; diff --git a/theme/src/scss/docs/_tutorials.scss b/theme/src/scss/docs/_tutorials.scss index 10458a1e14a0..3dd3f5578092 100644 --- a/theme/src/scss/docs/_tutorials.scss +++ b/theme/src/scss/docs/_tutorials.scss @@ -1,15 +1,5 @@ .section-tutorials, .section-collections { - .gradient-card { - background: linear-gradient(121deg, #F6F7FD 0%, #F9F7FC 5.24%, #F9F5FA 9.77%, #FEF8F9 14.35%, #FFFDF7 17.83%, #FFF 22.11%, #FFF 79.52%, #FFFDF7 86.29%, #FEF8F9 89.41%, #F9F5FA 92.9%, #F9F7FC 96.56%, #F6F7FD 100%, #F6F7FD 100%), #FFF; - } - - .gradient-highlight { - @apply relative opacity-10 h-3 -top-4; - width: calc(100% - 2rem); - background: linear-gradient(90deg, map-get($brand, "yellow") 0%, map-get($brand, "salmon") 18.23%, map-get($brand, "fuchsia-darker") 38.02%, map-get($brand, "purple") 53.65%, map-get($brand, "violet") 74.48%, map-get($brand, "blue-lighter") 100%); - } - // Adjust search box spacing in tutorials .docs-search { @apply mr-4; @@ -38,7 +28,7 @@ @apply px-1 inline-block; &:hover { - @apply bg-blue-100 no-underline; + @apply bg-violet-50 no-underline; } } } @@ -67,7 +57,7 @@ // we target the directly just in case. (Otherwise they wouldn't appear as links.) main .summary { a { - @apply text-blue-500; + @apply text-violet-500; } } } diff --git a/theme/src/scss/main.scss b/theme/src/scss/main.scss index 659c204ac3ce..8463b0869ac2 100644 --- a/theme/src/scss/main.scss +++ b/theme/src/scss/main.scss @@ -10,7 +10,6 @@ @import "theme"; -@import "colors"; @import "mixins"; // Sass variables (no CSS output) @@ -22,7 +21,7 @@ $sitenav-offset: calc($sitenav-height + 16px); @utility btn { transition: all 120ms linear; @apply cursor-pointer text-sm whitespace-nowrap py-2 px-3 rounded inline-block; - @apply bg-blue-600 border border-blue-600 text-white text-center; + @apply bg-violet-primary border border-violet-primary text-white text-center; } @utility btn-lg { @@ -33,7 +32,7 @@ $sitenav-offset: calc($sitenav-height + 16px); @apply bg-orange-500 border-orange-600; } -// Typography token utilities (from tokens.json headings/body font sizes). +// Typography token utilities (font sizes from design system). @utility text-heading-2xl { font-size: 80px; } @utility text-heading-xl { font-size: 72px; } @utility text-heading-l { font-size: 64px; } @@ -90,7 +89,10 @@ $sitenav-offset: calc($sitenav-height + 16px); h4, h5, h6 { - @apply font-display text-gray-800 mb-2; + @apply font-display text-black mb-2; + font-weight: 600; + letter-spacing: -0.05em; + line-height: 1.1em; &:not(:first-child) { // Don't apply top margin when one's being specified. @@ -129,7 +131,7 @@ $sitenav-offset: calc($sitenav-height + 16px); } body { - @apply font-body text-gray-800; + @apply font-body text-black; figure { figcaption { @@ -143,17 +145,17 @@ $sitenav-offset: calc($sitenav-height + 16px); } main { - @apply text-gray-800; + @apply text-black; p, li, blockquote, table { a { - @apply text-blue-600 break-words; + @apply text-violet-primary break-words; &:hover { - @apply text-blue-700; + @apply text-violet-800; .section-docs &, .section-blog &, @@ -187,7 +189,7 @@ $sitenav-offset: calc($sitenav-height + 16px); } blockquote { - @apply border-l-4 rounded border-blue-100 px-4 py-1 text-sm my-4; + @apply border-l-4 rounded border-violet-100 px-4 py-1 text-sm my-4; p { @apply my-1 leading-relaxed; @@ -264,7 +266,7 @@ $sitenav-offset: calc($sitenav-height + 16px); @import "search"; @import "section-nav"; @import "marketing/self-hosted"; - @import "marketing/shape-backgrounds"; + // NOTE: marketing/shape-backgrounds intentionally removed @import "marketing/signup"; @import "marketing/workshop-signup"; @import "marketing/slot-machine"; @@ -310,23 +312,23 @@ $sitenav-offset: calc($sitenav-height + 16px); } .link { - @apply text-blue-700; + @apply text-violet-primary; } .section-blog, .section-tags, .section-authors { .tags { .tag { - @apply lowercase border border-blue-200 rounded py-1 px-2 mr-1; + @apply lowercase border border-violet-200 rounded py-1 px-2 mr-1; &.tag-blog { - @apply bg-gray-100 text-blue-600; + @apply bg-gray-100 text-violet-primary; &:hover { - @apply border-blue-300 text-blue-700 no-underline; + @apply border-violet-300 text-violet-800 no-underline; } &.active { - @apply border-blue-600 bg-blue-600 text-white; + @apply border-violet-primary bg-violet-primary text-white; &:hover { @apply text-white; @@ -410,16 +412,7 @@ $sitenav-offset: calc($sitenav-height + 16px); } } - // New Styles - .rainbow-text { - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-background-clip: text; - -moz-text-fill-color: transparent; - - text-shadow: none; - } + // NOTE: .rainbow-text intentionally removed .blue-star-background { @apply w-full h-full overflow-hidden absolute top-0 left-0 bg-blue-200 shadow-lg; diff --git a/theme/src/scss/marketing/_developer-advocates.scss b/theme/src/scss/marketing/_developer-advocates.scss index b4f29dafa199..b41a38a8891e 100644 --- a/theme/src/scss/marketing/_developer-advocates.scss +++ b/theme/src/scss/marketing/_developer-advocates.scss @@ -9,7 +9,7 @@ width: 100%; left: 0; height: 2px; - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); + background: var(--color-violet-primary); } } @@ -23,8 +23,8 @@ @apply border border-black border-solid rounded; &:hover { - background-color: $black; - color: $white; + background-color: #000; + color: #fff; } li { @apply my-0; @@ -33,7 +33,7 @@ &:hover { font-weight: bold; - color: $black; + color: #000; } } } @@ -47,8 +47,8 @@ &:hover { .dropdown-title { - background-color: $black; - color: $white; + background-color: #000; + color: #fff; } } @@ -59,7 +59,7 @@ @apply w-full absolute hidden min-w-max pt-6 top-2 z-50; ul { - @apply bg-white text-left rounded shadow-xl py-2 whitespace-nowrap border border-black; + @apply bg-white text-left rounded py-2 whitespace-nowrap border border-black; li { @apply my-1; diff --git a/theme/src/scss/marketing/_dismissable-banner.scss b/theme/src/scss/marketing/_dismissable-banner.scss index 1fdc91701977..48bdd1f555c9 100644 --- a/theme/src/scss/marketing/_dismissable-banner.scss +++ b/theme/src/scss/marketing/_dismissable-banner.scss @@ -33,7 +33,7 @@ a.dismissable-banner { } p { - font-family: Gilroy; + font-family: Inter; font-size: 20px; font-weight: 600; color: #131314; diff --git a/theme/src/scss/marketing/_pricing.scss b/theme/src/scss/marketing/_pricing.scss index 922476cb68d5..20e2f53a4b90 100644 --- a/theme/src/scss/marketing/_pricing.scss +++ b/theme/src/scss/marketing/_pricing.scss @@ -8,7 +8,7 @@ } &-item-header { - @apply text-purple-500 font-bold text-lg mb-5; + @apply text-violet-500 font-bold text-lg mb-5; } &-item-description { @@ -74,7 +74,7 @@ } .compare-table-link { - @apply underline text-blue-600; + @apply underline text-violet-primary; } } } @@ -106,7 +106,7 @@ } li[data-faq-label="pricing"] { - border-bottom-color: var(--color-blue-600); + border-bottom-color: var(--color-violet-primary); a { @apply text-black; @@ -126,7 +126,7 @@ } li[data-faq-label="#{$filter-type}"] { - border-bottom-color: var(--color-blue-600); + border-bottom-color: var(--color-violet-primary); a { @apply text-black; @@ -194,7 +194,7 @@ .gradient { border-radius: 12px 12px 0px 0px; height: 8px; - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); + background: var(--color-violet-primary); } @include screen-lg { @@ -213,7 +213,7 @@ .ready-cta { p, span { - color: map-get($gray, 800) !important; + color: var(--color-gray-800) !important; } span.tooltip-content span { color: white !important; @@ -222,6 +222,6 @@ .ready-cta { &.gradient { - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); + background: var(--color-violet-primary); } } diff --git a/theme/src/scss/marketing/_product.scss b/theme/src/scss/marketing/_product.scss index 4489dafb2fc2..cdc8dc6fadcd 100644 --- a/theme/src/scss/marketing/_product.scss +++ b/theme/src/scss/marketing/_product.scss @@ -3,7 +3,7 @@ @apply text-gray-700 underline; &:hover { - @apply text-blue-600; + @apply text-violet-primary; } } } diff --git a/theme/src/scss/marketing/_pulumi-up.scss b/theme/src/scss/marketing/_pulumi-up.scss index fba90e5beb42..f7856cd19e03 100644 --- a/theme/src/scss/marketing/_pulumi-up.scss +++ b/theme/src/scss/marketing/_pulumi-up.scss @@ -22,7 +22,7 @@ body.section-pulumi-up { } .yellow-header-text { - font-family: 'Gilroy'; + font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 48px; @@ -96,7 +96,7 @@ body.section-pulumi-up { } .btn-primary:hover { - background:linear-gradient(90deg, #be5188 0%, #805ac3 100%) + background: var(--color-violet-primary); } } @@ -194,7 +194,7 @@ body.section-pulumi-up { // } // } // .header-nav-drop-down-menu a:hover{ -// color: $brand-violet !important; +// color: var(--color-violet-primary) !important; // } // .list-sub-title { diff --git a/theme/src/scss/marketing/_self-hosted.scss b/theme/src/scss/marketing/_self-hosted.scss index cda81a892e90..aa192a715662 100644 --- a/theme/src/scss/marketing/_self-hosted.scss +++ b/theme/src/scss/marketing/_self-hosted.scss @@ -7,7 +7,7 @@ #self-hosted-questions { .btn-primary { - border-color: $white; + border-color: #fff; } } diff --git a/theme/src/scss/marketing/_shape-backgrounds.scss b/theme/src/scss/marketing/_shape-backgrounds.scss index 29a6c58ebfe0..92cc5c39d71c 100644 --- a/theme/src/scss/marketing/_shape-backgrounds.scss +++ b/theme/src/scss/marketing/_shape-backgrounds.scss @@ -33,7 +33,7 @@ } .circle-bottom-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12rem; height: 12rem; left: 0rem; @@ -41,7 +41,7 @@ } .circle-bottom-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 5.5rem; height: 5.5rem; right: -1.5rem; @@ -51,7 +51,7 @@ &.about-what-we-believe { .circle-top-left { - @apply rounded-full absolute bg-fuchsia-600; + @apply rounded-full absolute bg-violet-primary; width: 22rem; height: 22rem; left: .75rem; @@ -67,7 +67,7 @@ } .circle-middle-left { - @apply rounded-full absolute bg-salmon-500; + @apply rounded-full absolute bg-orange-400; width: 7.5rem; height: 7.5rem; left: 27rem; @@ -75,7 +75,7 @@ } .circle-bottom-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 5.5rem; height: 5.5rem; left: 0rem; @@ -83,7 +83,7 @@ } .circle-bottom-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 8.5rem; height: 8.5rem; right: -1.5rem; @@ -134,7 +134,7 @@ } .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.25rem; height: 20.25rem; left: -1.5rem; @@ -142,7 +142,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600 top-0; + @apply rounded-full absolute bg-orange-500 top-0; width: 10.5rem; height: 10.5rem; right: -5.25rem; @@ -165,7 +165,7 @@ } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 10.5rem; height: 10.5rem; left: -5.25rem; @@ -173,7 +173,7 @@ } .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 20.25rem; height: 20.25rem; right: -1.5rem; @@ -191,7 +191,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.625rem; height: 20.625rem; right: -2.5rem; @@ -201,7 +201,7 @@ &.home-video-section { .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 13.75rem; height: 13.75rem; left: 2rem; @@ -209,7 +209,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 16.125rem; height: 16.125rem; right: 1rem; @@ -300,7 +300,7 @@ .circle-left, .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; } .circle-left { @@ -333,7 +333,7 @@ } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 20.25rem; height: 20.25rem; left: -1.5rem; @@ -341,14 +341,14 @@ } .circle-right { - @apply rounded-full absolute bg-purple-600 top-0; + @apply rounded-full absolute bg-violet-primary top-0; width: 10.5rem; height: 10.5rem; right: -5.25rem; } } - &.home-background-salmon-left { + &.home-background-orange-left { .dot-background-container { @apply w-1/3 h-full relative float-right; @@ -365,7 +365,7 @@ .circle-left, .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; } .circle-left { @@ -381,7 +381,7 @@ } } - &.home-background-salmon-right { + &.home-background-orange-right { .dot-background-container { @apply w-1/3 relative; height: 60%; @@ -398,7 +398,7 @@ } .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.25rem; height: 20.25rem; left: -1.5rem; @@ -406,7 +406,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600 top-0; + @apply rounded-full absolute bg-orange-500 top-0; width: 10.5rem; height: 10.5rem; right: -5.25rem; @@ -468,7 +468,7 @@ &.cloud-engineering-deploy-section { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.25rem; height: 20.25rem; left: 5rem; @@ -476,7 +476,7 @@ } .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 8.313rem; height: 8.313rem; left: -4rem; @@ -486,7 +486,7 @@ &.cloud-engineering-manage-section { .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 20.25rem; height: 20.25rem; left: -10rem; @@ -494,7 +494,7 @@ } .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 8.313rem; height: 8.313rem; right: 6rem; @@ -512,7 +512,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.625rem; height: 20.625rem; right: 8rem; @@ -522,7 +522,7 @@ &.cloud-engineering-use-cases-section { .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 13.25rem; height: 13.25rem; right: -6.125rem; @@ -532,7 +532,7 @@ &.cloud-engineering-case-studies-section { .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.625rem; height: 20.625rem; top: 0; @@ -542,7 +542,7 @@ &.product-overview-section { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 27.75rem; height: 27.75rem; right: 0rem; @@ -562,7 +562,7 @@ &.product-features-section { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 19rem; height: 19rem; right: -8.5rem; @@ -570,7 +570,7 @@ } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12.75rem; height: 12.75rem; left: -6.375rem; @@ -598,7 +598,7 @@ &.product-get-started-section { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 19rem; height: 19rem; right: -2.313rem; @@ -641,7 +641,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.25rem; height: 20.25rem; right: 2rem; @@ -660,7 +660,7 @@ &.get-started-step-2-section { .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 25rem; height: 25rem; left: -12rem; @@ -693,7 +693,7 @@ &.pricing-compare { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 12.5rem; height: 12.5rem; right: -6.25rem; @@ -701,7 +701,7 @@ } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12.5rem; height: 12.5rem; left: -6.25rem; @@ -711,7 +711,7 @@ &.pricing-compare-updated { .circle-center { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 12.5rem; height: 12.5rem; right: -6.25rem; @@ -719,7 +719,7 @@ } .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12.5rem; height: 12.5rem; right: -6.25rem; @@ -737,14 +737,14 @@ &.cloud-engineering-summit-big-dots { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 12.5rem; height: 12.5rem; right: -6.25rem; } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12.5rem; height: 12.5rem; left: -6.25rem; @@ -798,7 +798,7 @@ } .circle-middle { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 8.313rem; height: 8.313rem; top: 50%; @@ -807,7 +807,7 @@ } .circle-bottom { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 20.25rem; height: 20.25rem; bottom: -2rem; @@ -819,7 +819,7 @@ height: 48rem; .circle-right { - @apply rounded-full absolute bg-blue-600; + @apply rounded-full absolute bg-violet-primary; width: 19rem; height: 19rem; right: -8.5rem; @@ -827,7 +827,7 @@ } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12.75rem; height: 12.75rem; left: -6.375rem; @@ -845,7 +845,7 @@ } .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20.625rem; height: 20.625rem; right: 2.5rem; @@ -855,7 +855,7 @@ &.automation-video { .circle-left { - @apply rounded-full absolute bg-violet-600; + @apply rounded-full absolute bg-violet-primary; width: 5rem; height: 5rem; left: -2.5rem; @@ -863,7 +863,7 @@ } .circle-right { - @apply rounded-full absolute bg-fuchsia-600; + @apply rounded-full absolute bg-violet-primary; width: 8rem; height: 8rem; right: -4rem; @@ -873,7 +873,7 @@ &.pulumi-service-screenshot { .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20rem; height: 20rem; left: -10rem; @@ -891,7 +891,7 @@ &.pulumi-service-case-studies { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 19rem; height: 19rem; right: -9.5rem; @@ -901,7 +901,7 @@ &.pulumi-service-capabilities { .circle-top { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 19rem; height: 19rem; right: -9.5rem; @@ -909,7 +909,7 @@ } .circle-middle { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 13rem; height: 13rem; left: -6.5rem; @@ -927,7 +927,7 @@ &.pulumi-service-security { .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 20rem; height: 20rem; left: -10rem; @@ -937,7 +937,7 @@ &.self-hosted-overview { .circle-right { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12rem; height: 12rem; right: -7rem; @@ -947,7 +947,7 @@ &.self-hosted-capabilities { .circle-right { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 20rem; height: 20rem; right: 2rem; @@ -973,7 +973,7 @@ } .circle-left { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 12.75rem; height: 12.75rem; left: -6rem; @@ -991,7 +991,7 @@ } .circle-left { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 14rem; height: 14rem; left: 10rem; @@ -1001,7 +1001,7 @@ &.developer-advocates-giveaway-section { .circle-top { - @apply rounded-full absolute bg-purple-600; + @apply rounded-full absolute bg-violet-primary; width: 10rem; height: 10rem; right: -4.5rem; @@ -1009,7 +1009,7 @@ } .circle-center { - @apply rounded-full absolute bg-salmon-600; + @apply rounded-full absolute bg-orange-500; width: 7rem; height: 7rem; right: 27rem; diff --git a/theme/src/scss/neo-mode.scss b/theme/src/scss/neo-mode.scss index 39daba5e0516..f12879b8eaee 100644 --- a/theme/src/scss/neo-mode.scss +++ b/theme/src/scss/neo-mode.scss @@ -21,7 +21,7 @@ body #neo-mode-toggle { background: white; border-width: 2px 0px 2px 2px; border-style: solid; - border-color: var(--violet-secondary, #805AC3); + border-color: var(--violet-secondary, var(--color-violet-primary)); border-radius: 8px 0px 0px 8px; cursor: pointer; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); @@ -271,7 +271,7 @@ body { overflow: hidden; // Prevent scrolling when Neo is active #neo-mode-toggle { - background: var(--violet-secondary, #805AC3); + background: var(--violet-secondary, var(--color-violet-primary)); .neo-hover-icon { opacity: 0; diff --git a/theme/src/ts/pulumi-cloud.ts b/theme/src/ts/pulumi-cloud.ts index 71b253cfa70f..1637b8e63a3c 100644 --- a/theme/src/ts/pulumi-cloud.ts +++ b/theme/src/ts/pulumi-cloud.ts @@ -7,11 +7,11 @@ document.addEventListener("DOMContentLoaded", function () { productTabs.forEach(id => { if (id !== tab) { document.getElementById(id + "-content")?.classList.add("hidden"); - document.getElementById(id)?.classList.remove("border-blue-600"); + document.getElementById(id)?.classList.remove("border-violet-primary"); document.getElementById(id + "-text")?.classList.remove("rainbow-text"); } }); - document.getElementById(tab)?.classList.add("border-blue-600"); + document.getElementById(tab)?.classList.add("border-violet-primary"); document.getElementById(tab + "-text")?.classList.add("rainbow-text"); document.getElementById(tab + "-content")?.classList.remove("hidden"); }); @@ -21,11 +21,11 @@ document.addEventListener("DOMContentLoaded", function () { capabilityTabs.forEach(id => { if (id !== tab) { document.getElementById(id + "-content")?.classList.add("hidden"); - document.getElementById(id)?.classList.remove("border-blue-600"); + document.getElementById(id)?.classList.remove("border-violet-primary"); document.getElementById(id + "-text")?.classList.remove("rainbow-text"); } }); - document.getElementById(tab)?.classList.add("border-blue-600"); + document.getElementById(tab)?.classList.add("border-violet-primary"); document.getElementById(tab + "-text")?.classList.add("rainbow-text"); document.getElementById(tab + "-content")?.classList.remove("hidden"); }); diff --git a/theme/stencil/src/components/developer-quotes/developer-quotes.scss b/theme/stencil/src/components/developer-quotes/developer-quotes.scss deleted file mode 100644 index 16c0f76bff83..000000000000 --- a/theme/stencil/src/components/developer-quotes/developer-quotes.scss +++ /dev/null @@ -1,8 +0,0 @@ -pulumi-developer-quotes { - .quote-card { - box-shadow: 0 6px 36px rgb(0, 0, 0, 0.1); - &:hover { - box-shadow: 10px 15px 60px rgb(0, 0, 0, 0.2); - } - } -} diff --git a/theme/stencil/src/components/developer-quotes/developer-quotes.tsx b/theme/stencil/src/components/developer-quotes/developer-quotes.tsx index 2b11581823bf..e2f8bfc56228 100644 --- a/theme/stencil/src/components/developer-quotes/developer-quotes.tsx +++ b/theme/stencil/src/components/developer-quotes/developer-quotes.tsx @@ -2,7 +2,6 @@ import { Component, Prop, h } from "@stencil/core"; @Component({ tag: "pulumi-developer-quotes", - styleUrl: "developer-quotes.scss", shadow: false, }) @@ -72,17 +71,17 @@ export class DeveloperQuotes { }, [[],[]]); return ( -
    +
    { quotes.map(col => { return ( -
    +
    { col.map(q => { return ( -
    +
    -
    "{ q.message }"
    +
    "{ q.message }"
    { q.author } diff --git a/theme/stencil/src/components/pulumi-api-doc-filterable-nav/pulumi-api-doc-filterable-nav.scss b/theme/stencil/src/components/pulumi-api-doc-filterable-nav/pulumi-api-doc-filterable-nav.scss index ea4e06b204ca..0bb0ae0bb55d 100644 --- a/theme/stencil/src/components/pulumi-api-doc-filterable-nav/pulumi-api-doc-filterable-nav.scss +++ b/theme/stencil/src/components/pulumi-api-doc-filterable-nav/pulumi-api-doc-filterable-nav.scss @@ -1,4 +1,3 @@ -@import "../../../../src/scss/colors"; .api-doc-nav { width: 100%; @@ -22,7 +21,7 @@ font-family: var(--heading-font); font-weight: 400; font-size: 18px; - color: $black; + color: #000; margin-top: 0; margin-bottom: 14px; } @@ -49,8 +48,8 @@ height: 18px; width: 18px; font-size: xx-small; - background: map-get($gray, 300); - color: map-get($gray, 500); + background: var(--color-gray-200); + color: var(--color-gray-500); border-radius: 50%; border: none; cursor: pointer; @@ -58,18 +57,18 @@ } .navigation-filter-input { - font-family: "Gilroy"; + font-family: "Inter"; font-size: 16px; height: 20px; width: 90%; border-radius: 4px; - border: 1px solid $black; + border: 1px solid #000; padding: 10px; margin-top: 0; box-sizing: content-box; &:focus { - outline-color: $brand-blue; + outline-color: var(--color-violet-primary); } } } diff --git a/theme/stencil/src/components/pulumi-api-doc-nav-tree/pulumi-api-doc-nav-tree.scss b/theme/stencil/src/components/pulumi-api-doc-nav-tree/pulumi-api-doc-nav-tree.scss index 491f31271cc2..1d297097c03f 100644 --- a/theme/stencil/src/components/pulumi-api-doc-nav-tree/pulumi-api-doc-nav-tree.scss +++ b/theme/stencil/src/components/pulumi-api-doc-nav-tree/pulumi-api-doc-nav-tree.scss @@ -1,4 +1,3 @@ -@import "../../../../src/scss/colors"; .symbol-container { height: 100%; @@ -25,11 +24,11 @@ } &.module { - border-color: map-get($green, 700); + border-color: var(--color-green-700); &:before { content: "M"; - color: map-get($green, 700); + color: var(--color-green-700); font-size: 9px; font-weight: 700; } @@ -47,11 +46,11 @@ } &.resource { - border-color: map-get($blue, 700); + border-color: var(--color-violet-800); &:before { content: "R"; - color: map-get($blue, 700); + color: var(--color-violet-800); font-size: 9px; font-weight: 700; } @@ -68,7 +67,7 @@ $base-ch-width-l: 12ch; display: flex; align-items: center; text-decoration: none; - color: map-get($gray, 900); + color: var(--color-gray-900); max-width: 24ch; &:hover { diff --git a/theme/stencil/src/components/pulumi-pricing-calculator/pulumi-pricing-calculator.scss b/theme/stencil/src/components/pulumi-pricing-calculator/pulumi-pricing-calculator.scss index a795d6405567..028b206c9119 100644 --- a/theme/stencil/src/components/pulumi-pricing-calculator/pulumi-pricing-calculator.scss +++ b/theme/stencil/src/components/pulumi-pricing-calculator/pulumi-pricing-calculator.scss @@ -1,4 +1,3 @@ -@import "../../../../src/scss/colors"; .calculator { margin-right: 36px; margin-left: 36px; @@ -6,14 +5,14 @@ h3 { text-align: center; color: #000; - font-family: "Gilroy"; + font-family: "Inter"; font-size: 48px; - font-weight: 500; + font-weight: 600; } .edition { text-align: center; - font-family: "Gilroy"; + font-family: "Inter"; font-size: 28px; margin-bottom: 36px; } @@ -35,7 +34,7 @@ .title { color: #131314; - font-family: "Gilroy"; + font-family: "Inter"; font-size: 24px; font-weight: 500; } @@ -94,15 +93,7 @@ .gradient { border-radius: 12px 12px 0px 0px; height: 8px; - background: linear-gradient( - 90deg, - #f7bf2a 0%, - #f26e7e 18.23%, - #be5188 38.02%, - #8a3391 53.65%, - #805ac3 74.48%, - #7682f4 100% - ); + background: var(--color-violet-primary); } .duration { @@ -130,7 +121,7 @@ &.active { color: #131314; background-color: #f2eff9; - border: 1px solid #805ac3; + border: 1px solid var(--color-violet-primary); } } } @@ -178,7 +169,7 @@ .total { display: flex; width: 100%; - color: #805ac3; + color: var(--color-violet-primary); font-family: "Inter"; font-size: 30px; font-style: normal; @@ -200,7 +191,7 @@ font-weight: 600; color: #131314; a { - color: $brand-blue; + color: var(--color-violet-primary); margin-right: 4px; } } @@ -225,14 +216,14 @@ .deployments { border-radius: 4px; - border: 1px solid #805ac3; + border: 1px solid var(--color-violet-primary); display: flex; flex-direction: column; width: 100%; padding: 24px; i { - color: #805ac3; + color: var(--color-violet-primary); height: 24px; width: 24px; font-size: 24px; @@ -296,16 +287,7 @@ input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; border-radius: 10px; - background: #4776e6; /* fallback for old browsers */ - background: linear-gradient( - 90deg, - #f7bf2a 0%, - #f26e7e 18.23%, - #be5188 38.02%, - #8a3391 53.65%, - #805ac3 74.48%, - #7682f4 100% - ); + background: var(--color-violet-primary); height: 7.5px; } @@ -328,7 +310,7 @@ input[type="range"]::-webkit-slider-thumb { } .range.purple::-webkit-slider-thumb { - border-color: #805ac3; + border-color: var(--color-violet-primary); } diff --git a/theme/stencil/src/components/pulumi-registry-list-search/pulumi-registry-list-search.scss b/theme/stencil/src/components/pulumi-registry-list-search/pulumi-registry-list-search.scss index 62acd98837b2..1a2c0db5d686 100644 --- a/theme/stencil/src/components/pulumi-registry-list-search/pulumi-registry-list-search.scss +++ b/theme/stencil/src/components/pulumi-registry-list-search/pulumi-registry-list-search.scss @@ -1,4 +1,3 @@ - @import "../../../../src/scss/colors"; .input-container { display: inline-block; @@ -22,7 +21,7 @@ align-items: center; height: 100%; padding-left: 12px; - color: map-get($gray, 400); + color: var(--color-gray-400); } .clear-filter-button { @@ -32,8 +31,8 @@ height: 18px; width: 18px; font-size: xx-small; - background: map-get($gray, 300); - color: map-get($gray, 500); + background: var(--color-gray-200); + color: var(--color-gray-500); border-radius: 50%; border: none; cursor: pointer; @@ -46,19 +45,19 @@ height: 36px; width: 100%; border-radius: 4px; - border: 2px solid $black; + border: 2px solid #000; padding: 6px; // Accomodate the absolutely positioned filter icon. padding-left: 40px; margin-top: 0; &:focus { - outline-color: $brand-blue; + outline-color: var(--color-violet-primary); } } .registry-filter-input::placeholder { font-style: italic; - color: map-get($gray, 500); + color: var(--color-gray-500); } } \ No newline at end of file diff --git a/theme/stencil/src/components/pulumi-value-calculator/pulumi-value-calculator.scss b/theme/stencil/src/components/pulumi-value-calculator/pulumi-value-calculator.scss index 78a5ea33fa30..4c260d18e91f 100644 --- a/theme/stencil/src/components/pulumi-value-calculator/pulumi-value-calculator.scss +++ b/theme/stencil/src/components/pulumi-value-calculator/pulumi-value-calculator.scss @@ -1,4 +1,3 @@ -@import "../../../../src/scss/colors"; .value-calculator { margin-right: 36px; margin-left: 36px; @@ -6,14 +5,14 @@ h3 { text-align: center; color: #000; - font-family: "Gilroy"; + font-family: "Inter"; font-size: 40px; - font-weight: 500; + font-weight: 600; } h5 { text-align: center; - font-family: "Gilroy"; + font-family: "Inter"; } .content { @@ -41,7 +40,7 @@ .title { color: #131314; - font-family: "Gilroy"; + font-family: "Inter"; font-size: 24px; font-weight: 500; } @@ -68,15 +67,12 @@ } .rainbow-text { - font-family: "Gilroy"; + font-family: "Inter"; font-size: 48px; font-weight: 500; - background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-background-clip: text; - -moz-text-fill-color: transparent; - + color: var(--color-violet-primary); + -webkit-text-fill-color: var(--color-violet-primary); + -moz-text-fill-color: var(--color-violet-primary); text-shadow: none; } } @@ -94,7 +90,7 @@ .assumptions { border-radius: 4px; - border: 1px solid #805ac3; + border: 1px solid var(--color-violet-primary); display: flex; flex-direction: column; width: 100%; @@ -107,7 +103,7 @@ } i { - color: #805ac3; + color: var(--color-violet-primary); height: 24px; width: 24px; font-size: 24px; @@ -143,7 +139,7 @@ color: #2f3032; .title { - font-family: "Gilroy"; + font-family: "Inter"; font-size: 24px; font-weight: 400; margin: 12px 0 12px 0; @@ -167,16 +163,7 @@ input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; border-radius: 10px; - background: #4776e6; /* fallback for old browsers */ - background: linear-gradient( - 90deg, - #f7bf2a 0%, - #f26e7e 18.23%, - #be5188 38.02%, - #8a3391 53.65%, - #805ac3 74.48%, - #7682f4 100% - ); + background: var(--color-violet-primary); height: 7.5px; } @@ -229,7 +216,7 @@ } .range.purple::-webkit-slider-thumb { - border-color: #805ac3; + border-color: var(--color-violet-primary); } } diff --git a/theme/tailwind.config.js b/theme/tailwind.config.js deleted file mode 100644 index 42d224639fea..000000000000 --- a/theme/tailwind.config.js +++ /dev/null @@ -1,195 +0,0 @@ -// Tailwind configuration. Changes to this file require a dev-server restart. -// -// Configuration docs: -// https://tailwindcss.com/docs/configuration -// -// Default configuration: -// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js - -const { global } = require("./tokens.json"); -const defaultTheme = require("tailwindcss/defaultTheme"); - -const brand = { - yellow: global.colors.brand.yellow.value, - salmon: global.colors.brand.salmon.value, - fuchsia: global.colors.brand.fuchsia.value, - purple: global.colors.brand.purple.value, - violet: global.colors.brand.violet.value, - blue: global.colors.brand.blue.value, -}; - -// defaultTheme.colors no longer exports these in v4; use explicit values. -const white = "#fff"; -const black = "#000"; -const transparent = "transparent"; - -const red = { - 100: global.colors.red["100"].value, - 200: global.colors.red["200"].value, - 300: global.colors.red["300"].value, - 400: global.colors.red["400"].value, - 500: global.colors.red["500"].value, - 600: global.colors.red["600"].value, - 700: global.colors.red["700"].value, - 800: global.colors.red["800"].value, - 900: global.colors.red["900"].value, -}; - -const gray = { - 100: global.colors.gray["100"].value, - 200: global.colors.gray["200"].value, - 300: global.colors.gray["300"].value, - 400: global.colors.gray["400"].value, - 500: global.colors.gray["500"].value, - 600: global.colors.gray["600"].value, - 700: global.colors.gray["700"].value, - 800: global.colors.gray["800"].value, - 850: global.colors.gray["850"].value, - 900: global.colors.gray["900"].value, -}; - -const yellow = { - 100: global.colors.yellow["100"].value, - 200: global.colors.yellow["200"].value, - 300: global.colors.yellow["300"].value, - 400: global.colors.yellow["400"].value, - 500: global.colors.yellow["500"].value, - 600: brand.yellow, - 700: global.colors.yellow["700"].value, - 800: global.colors.yellow["800"].value, - 900: global.colors.yellow["900"].value, -}; - -const salmon = { - 100: global.colors.salmon["100"].value, - 200: global.colors.salmon["200"].value, - 300: global.colors.salmon["300"].value, - 400: global.colors.salmon["400"].value, - 500: global.colors.salmon["500"].value, - 600: brand.salmon, - 700: global.colors.salmon["700"].value, - 800: global.colors.salmon["800"].value, - 900: global.colors.salmon["900"].value, -}; - -const fuchsia = { - 100: global.colors.fuchsia["100"].value, - 200: global.colors.fuchsia["200"].value, - 300: global.colors.fuchsia["300"].value, - 400: global.colors.fuchsia["400"].value, - 500: global.colors.fuchsia["500"].value, - 600: brand.fuchsia, - 700: global.colors.fuchsia["700"].value, - 800: global.colors.fuchsia["800"].value, - 900: global.colors.fuchsia["900"].value, -}; - -const purple = { - 100: global.colors.purple["100"].value, - 200: global.colors.purple["200"].value, - 300: global.colors.purple["300"].value, - 400: global.colors.purple["400"].value, - 500: global.colors.purple["500"].value, - 600: brand.purple, - 700: global.colors.purple["700"].value, - 800: global.colors.purple["800"].value, - 900: global.colors.purple["900"].value, -}; - -const violet = { - 100: global.colors.violet["100"].value, - 200: global.colors.violet["200"].value, - 300: global.colors.violet["300"].value, - 400: global.colors.violet["400"].value, - 500: global.colors.violet["500"].value, - 600: global.colors.violet["600"].value, - 700: global.colors.violet["700"].value, - 800: global.colors.violet["800"].value, - 900: global.colors.violet["900"].value, -}; - -const blue = { - 100: global.colors.blue["100"].value, - 200: global.colors.blue["200"].value, - 300: global.colors.blue["300"].value, - 400: global.colors.blue["400"].value, - 500: global.colors.blue["500"].value, - 600: brand.blue, - 700: global.colors.blue["700"].value, - 800: global.colors.blue["800"].value, - 900: global.colors.blue["900"].value, -}; - -const orange = { - 100: global.colors.orange["100"].value, - 200: global.colors.orange["200"].value, - 300: global.colors.orange["300"].value, - 400: global.colors.orange["400"].value, - 500: global.colors.orange["500"].value, - 600: global.colors.orange["600"].value, - 700: global.colors.orange["700"].value, - 800: global.colors.orange["800"].value, - 900: global.colors.orange["900"].value, -}; - -const green = { - 100: global.colors.green["100"].value, - 200: global.colors.green["200"].value, - 300: global.colors.green["300"].value, - 400: global.colors.green["400"].value, - 500: global.colors.green["500"].value, - 600: global.colors.green["600"].value, - 700: global.colors.green["700"].value, - 800: global.colors.green["800"].value, - 900: global.colors.green["900"].value, -}; - -module.exports = { - theme: { - extend: { - fontFamily: { - display: [global.typography.fontFamilies.display.value, ...defaultTheme.fontFamily.sans], - body: [global.typography.fontFamilies.body.value, ...defaultTheme.fontFamily.sans], - mono: [global.typography.fontFamilies.mono.value, ...defaultTheme.fontFamily.mono], - }, - boxShadow: { - "3xl": "0 35px 70px -20px rgba(0, 0, 0, 0.5)", - }, - // Unused color added solely to bust CloudFront CSS cache - See #16274 - colors: { - 'cache-bust-2025-12': '#000001', - }, - lineHeight: { - 'extra-tight': '1.1', - } - }, - colors: { - white, - black, - gray, - transparent, - yellow, - salmon, - fuchsia, - purple, - blue, - red, - orange, - green, - violet, - }, - maxHeight: { - 25: "25vh", - 50: "50vh", - 75: "75vh", - 100: "100vh", - }, - screens: { - sm: "640px", - md: "768px", - lg: "1024px", - xl: "1280px", - xxl: "1536px", - }, - }, -}; diff --git a/theme/tokens.json b/theme/tokens.json deleted file mode 100644 index 4d5ce59cb74f..000000000000 --- a/theme/tokens.json +++ /dev/null @@ -1,522 +0,0 @@ -{ - "global": { - "colors": { - "brand": { - "yellow": { - "value": "#f7bf2a", - "type": "color" - }, - "salmon": { - "value": "#f26e7e", - "type": "color" - }, - "fuchsia": { - "value": "#bd4c85", - "type": "color" - }, - "purple": { - "value": "#8a3391", - "type": "color" - }, - "violet": { - "value": "#805ac3", - "type": "color" - }, - "blue": { - "value": "#4d5bd9", - "type": "color" - } - }, - "gray": { - "100": { - "value": "#f9f9fa", - "type": "color" - }, - "200": { - "value": "#f2f2f4", - "type": "color" - }, - "300": { - "value": "#e5e5e9", - "type": "color" - }, - "400": { - "value": "#d8d9df", - "type": "color" - }, - "500": { - "value": "#bebfc9", - "type": "color" - }, - "600": { - "value": "#8e8f97", - "type": "color" - }, - "700": { - "value": "#5f6065", - "type": "color" - }, - "800": { - "value": "#2f3032", - "type": "color" - }, - "850": { - "value": "#2b2b2c", - "type": "color" - }, - "900": { - "value": "#131314", - "type": "color" - } - }, - "red": { - "100": { - "value": "#fff5f5", - "type": "color" - }, - "200": { - "value": "#fed7d7", - "type": "color" - }, - "300": { - "value": "#feb2b2", - "type": "color" - }, - "400": { - "value": "#fc8181", - "type": "color" - }, - "500": { - "value": "#f56565", - "type": "color" - }, - "600": { - "value": "#e53e3e", - "type": "color" - }, - "700": { - "value": "#c53030", - "type": "color" - }, - "800": { - "value": "#9b2c2c", - "type": "color" - }, - "900": { - "value": "#742a2a", - "type": "color" - } - }, - "orange": { - "100": { - "value": "#fff7eb", - "type": "color" - }, - "200": { - "value": "#fde6c4", - "type": "color" - }, - "300": { - "value": "#fad49e", - "type": "color" - }, - "400": { - "value": "#f6ba7e", - "type": "color" - }, - "500": { - "value": "#ee975c", - "type": "color" - }, - "600": { - "value": "#e17d47", - "type": "color" - }, - "700": { - "value": "#d86131", - "type": "color" - }, - "800": { - "value": "#ba4a2c", - "type": "color" - }, - "900": { - "value": "#993d29", - "type": "color" - } - }, - "yellow": { - "100": { - "value": "#fef9ea", - "type": "color" - }, - "200": { - "value": "#fdf2d4", - "type": "color" - }, - "300": { - "value": "#fce5aa", - "type": "color" - }, - "400": { - "value": "#fad97f", - "type": "color" - }, - "500": { - "value": "#f9cc55", - "type": "color" - }, - "600": { - "value": "{colors.brand.yellow}", - "type": "color" - }, - "700": { - "value": "#c69922", - "type": "color" - }, - "800": { - "value": "#947319", - "type": "color" - }, - "900": { - "value": "#634c11", - "type": "color" - } - }, - "salmon": { - "100": { - "value": "#fef1f2", - "type": "color" - }, - "200": { - "value": "#fce2e5", - "type": "color" - }, - "300": { - "value": "#fac5cb", - "type": "color" - }, - "400": { - "value": "#f7a8b2", - "type": "color" - }, - "500": { - "value": "#f58b98", - "type": "color" - }, - "600": { - "value": "{colors.brand.salmon}", - "type": "color" - }, - "700": { - "value": "#c25865", - "type": "color" - }, - "800": { - "value": "#91424c", - "type": "color" - }, - "900": { - "value": "#612c32", - "type": "color" - } - }, - "fuchsia": { - "100": { - "value": "#f8edf3", - "type": "color" - }, - "200": { - "value": "#f2dbe7", - "type": "color" - }, - "300": { - "value": "#e5b7ce", - "type": "color" - }, - "400": { - "value": "#d794b6", - "type": "color" - }, - "500": { - "value": "#ca709d", - "type": "color" - }, - "600": { - "value": "{colors.brand.fuchsia}", - "type": "color" - }, - "700": { - "value": "#973d6a", - "type": "color" - }, - "800": { - "value": "#712e50", - "type": "color" - }, - "900": { - "value": "#4c1e35", - "type": "color" - } - }, - "purple": { - "100": { - "value": "#f3ebf4", - "type": "color" - }, - "200": { - "value": "#e8d6e9", - "type": "color" - }, - "300": { - "value": "#d0add3", - "type": "color" - }, - "400": { - "value": "#b985bd", - "type": "color" - }, - "500": { - "value": "#a15ca7", - "type": "color" - }, - "600": { - "value": "{colors.brand.purple}", - "type": "color" - }, - "700": { - "value": "#6e2974", - "type": "color" - }, - "800": { - "value": "#531f57", - "type": "color" - }, - "900": { - "value": "#37143a", - "type": "color" - } - }, - "violet": { - "100": { - "value": "#f2eff9", - "type": "color" - }, - "200": { - "value": "#e6def3", - "type": "color" - }, - "300": { - "value": "#ccbde7", - "type": "color" - }, - "400": { - "value": "#b39cdb", - "type": "color" - }, - "500": { - "value": "#997bcf", - "type": "color" - }, - "600": { - "value": "{colors.brand.violet}", - "type": "color" - }, - "700": { - "value": "#66489c", - "type": "color" - }, - "800": { - "value": "#4d3675", - "type": "color" - }, - "900": { - "value": "#33244e", - "type": "color" - } - }, - "blue": { - "100": { - "value": "#edeffb", - "type": "color" - }, - "200": { - "value": "#dbdef7", - "type": "color" - }, - "300": { - "value": "#b8bdf0", - "type": "color" - }, - "400": { - "value": "#949de8", - "type": "color" - }, - "500": { - "value": "#717ce1", - "type": "color" - }, - "600": { - "value": "{colors.brand.blue}", - "type": "color" - }, - "700": { - "value": "#3e49ae", - "type": "color" - }, - "800": { - "value": "#2e3782", - "type": "color" - }, - "900": { - "value": "#1f2457", - "type": "color" - } - }, - "green": { - "100": { - "value": "#e0fff2", - "type": "color" - }, - "200": { - "value": "#b2fbe0", - "type": "color" - }, - "300": { - "value": "#81eeca", - "type": "color" - }, - "400": { - "value": "#4ce1b4", - "type": "color" - }, - "500": { - "value": "#2fc89f", - "type": "color" - }, - "600": { - "value": "#25a78b", - "type": "color" - }, - "700": { - "value": "#1d8673", - "type": "color" - }, - "800": { - "value": "#19675b", - "type": "color" - }, - "900": { - "value": "#155148", - "type": "color" - } - } - }, - "typography": { - "fontFamilies": { - "type": "fontFamilies", - - "body": { - "value": "Inter" - }, - "display": { - "value": "Gilroy" - }, - "mono": { - "value": "Roboto Mono" - } - }, - "headings": { - "type": "typeStyle", - "2xl": { - "value": "Bold", - "fontSize": "80px", - "fontWeight": "700" - }, - "xl": { - "value": "Bold", - "fontSize": "72px", - "fontWeight": "700" - }, - "l": { - "value": "Bold", - "fontSize": "64px", - "fontWeight": "700" - }, - "m": { - "value": "Bold", - "fontSize": "48px", - "fontWeight": "700" - }, - "s": { - "value": "Bold", - "fontSize": "40px", - "fontWeight": "700" - }, - "xs": { - "value": "Semibold", - "fontSize": "28px", - "fontWeight": "600" - }, - "2xs": { - "value": "Semibold", - "fontSize": "24px", - "fontWeight": "600" - }, - "2xsSmall": { - "value": "Semibold", - "fontSize": "20px", - "fontWeight": "600" - } - }, - "body": { - "type": "typeStyle", - "xl": { - "fontSize": "24px" - }, - "l": { - "fontSize": "20px" - }, - "m": { - "fontSize": "18px" - }, - "s": { - "fontSize": "16px" - } - } - }, - "shape": { - "borderWidth": { - "type": "borderWidth", - "sm": { - "value": "1px" - }, - "base": { - "value": "2px" - } - }, - "borderRadius": { - "type": "borderRadius", - - "sm": { - "value": "4px" - }, - "md": { - "value": "12px" - }, - "round": { - "value": "9999px" - } - }, - "boxShadows": { - "type": "boxShadow", - "light": { - "value": "0 6px 36px rgb(0 0 0 / 10%)" - }, - "medium": { - "value": "0 4px 4px rgb(0 0 0 / 25%)" - } - } - } - } -}