diff --git a/backend/src/helpers/integration.ts b/backend/src/helpers/integration.ts index 803c92aca..9aaf52624 100644 --- a/backend/src/helpers/integration.ts +++ b/backend/src/helpers/integration.ts @@ -160,7 +160,7 @@ export const getIntegrationAuthAccessHelper = async ({ let accessId; let accessToken; const integrationAuth = await IntegrationAuth.findById(integrationAuthId).select( - "workspace integration +accessCiphertext +accessIV +accessTag +accessExpiresAt +refreshCiphertext +refreshIV +refreshTag +accessIdCiphertext +accessIdIV +accessIdTag metadata" + "workspace integration +accessCiphertext +accessIV +accessTag +accessExpiresAt +refreshCiphertext +refreshIV +refreshTag +accessIdCiphertext +accessIdIV +accessIdTag metadata teamId" ); if (!integrationAuth) diff --git a/backend/src/models/secretBlindIndexData.ts b/backend/src/models/secretBlindIndexData.ts index 5d0cd976a..da397d2c1 100644 --- a/backend/src/models/secretBlindIndexData.ts +++ b/backend/src/models/secretBlindIndexData.ts @@ -1,5 +1,5 @@ import { Document, Schema, Types, model } from "mongoose"; -import { +import { ALGORITHM_AES_256_GCM, ENCODING_SCHEME_BASE64, ENCODING_SCHEME_UTF8, @@ -53,4 +53,6 @@ const secretBlindIndexDataSchema = new Schema( } ); +secretBlindIndexDataSchema.index({ workspace: 1 }); + export const SecretBlindIndexData = model("SecretBlindIndexData", secretBlindIndexDataSchema); \ No newline at end of file diff --git a/docs/documentation/platform/secret-reference.mdx b/docs/documentation/platform/secret-reference.mdx index 380facd94..d0d750330 100644 --- a/docs/documentation/platform/secret-reference.mdx +++ b/docs/documentation/platform/secret-reference.mdx @@ -1,10 +1,9 @@ --- -title: "Reference/Import Secrets" +title: "Reference and Import Secrets" description: "How to use reference secrets in Infisical" --- -Secret referencing is a powerful feature that allows you to create a secret whose value is linked to one or more other secrets. -This is useful when you need to use a single secret's value across multiple other secrets. +Secret referencing is a powerful feature that allows you to values of other secrets. This way, you just need to update the secret value once for it to be propagated to all the references. Consider a scenario where you have a database password. In order to utilize this password, you may need to incorporate it into a database connection string. With secret referencing, you can easily construct these more intricate secrets by directly referencing the base secret. @@ -34,7 +33,7 @@ For instance, to access a secret 'A' composed of secrets 'B' and 'C' from differ When using [service tokens](./token) to fetch referenced secrets, ensure the service token has read access to all referenced environments and folders. Without proper permissions, the final secret value may be incomplete. -## Import entire folders +## Import entire folders/environments While secret referencing effectively minimizes duplication, there might be instances where you need to import or replicate an entire folder's secrets into another. This can be achieved using the 'Import' feature. @@ -50,3 +49,5 @@ Additionally, any secrets you define directly in your environment will override You can modify the order of folders to control overrides using the `Change Order` drag handle. ![secret import change order](../../images/secret-import-change-order.png) + + diff --git a/docs/documentation/platform/sso/azure.mdx b/docs/documentation/platform/sso/azure.mdx index 9169c9f6f..7012e9d48 100644 --- a/docs/documentation/platform/sso/azure.mdx +++ b/docs/documentation/platform/sso/azure.mdx @@ -3,6 +3,13 @@ title: "Azure SAML" description: "Configure Azure SAML for Infisical SSO" --- + + Azure SAML SSO feature is a paid feature. + + If you're using Infisical Cloud, then it is available under the **Pro Tier**. If you're self-hosting Infisical, + then you should contact team@infisical.com to purchase an enterprise license to use it. + + 1. In Infisical, head over to your organization Settings > Authentication > SAML SSO Configuration and select **Set up SAML SSO**. Next, copy the **Reply URL (Assertion Consumer Service URL)** and **Identifier (Entity ID)** to use when configuring the Azure SAML application. diff --git a/docs/documentation/platform/sso/github.mdx b/docs/documentation/platform/sso/github.mdx new file mode 100644 index 000000000..2b4dd8c85 --- /dev/null +++ b/docs/documentation/platform/sso/github.mdx @@ -0,0 +1,37 @@ +--- +title: "GitHub SSO" +description: "Configure GitHub SSO for Infisical" +--- + +Using GitHub SSO on a self-hosted instance of Infisical requires configuring an OAuth2 application in GitHub and registering your instance with it. + +## Create an OAuth application in GitHub + +Navigate to your user Settings > Developer settings > OAuth Apps to create a new GitHub OAuth application. + +![GitHub settings](../../../images/sso/github/settings.png) +![GitHub developer settings](../../../images/sso/github/dev-settings.png) +![GitHub create new OAuth application](../../../images/sso/github/new-app.png) + +Create the OAuth application. As part of the form, set the **Homepage URL** to your self-hosted domain `https://your-domain.com` +and the **Authorization callback URL** to `https://your-domain.com/api/v1/sso/github`. + +![GitHub create new OAuth application form](../../../images/sso/github/new-app-form.png) + + + If you have a GitHub organization, you can create an OAuth application under it + in your organization Settings > Developer settings > OAuth Apps > New Org OAuth App. + + +## Add your OAuth application credentials to Infisical + +Obtain the **Client ID** and generate a new **Client Secret** for your GitHub OAuth application. + +![GCP obtain OAuth2 credentials](../../../images/sso/github/credentials.png) + +Back in your Infisical instance, add two new environment variables for the credentials of your GitHub OAuth application: + +- `CLIENT_ID_GITHUB_LOGIN`: The **Client ID** of your GitHub OAuth application. +- `CLIENT_SECRET_GITHUB_LOGIN`: The **Client Secret** of your GitHub OAuth application. + +Once added, restart your Infisical instance and log in with GitHub. \ No newline at end of file diff --git a/docs/documentation/platform/sso/google.mdx b/docs/documentation/platform/sso/google.mdx new file mode 100644 index 000000000..61da9188c --- /dev/null +++ b/docs/documentation/platform/sso/google.mdx @@ -0,0 +1,30 @@ +--- +title: "Google SSO" +description: "Configure Google SSO for Infisical" +--- + +Using Google SSO on a self-hosted instance of Infisical requires configuring an OAuth2 application in GCP and registering your instance with it. + +## Create an OAuth2 application in GCP + +Navigate to your project API & Services > Credentials to create a new OAuth2 application. + +![GCP API services](../../../images/sso/google/api-services.png) +![GCP create new OAuth2 application](../../../images/sso/google/new-app.png) + +Create the application. As part of the form, add to **Authorized redirect URIs**: `https://your-domain.com/api/v1/sso/google`. + +![GCP create new OAuth2 application form](../../../images/sso/google/new-app-form.png) + +## Add your OAuth2 application credentials to Infisical + +Obtain the **Client ID** and **Client Secret** for your GCP OAuth2 application. + +![GCP obtain OAuth2 credentials](../../../images/sso/google/credentials.png) + +Back in your Infisical instance, add two new environment variables for the credentials of your GCP OAuth2 application: + +- `CLIENT_ID_GOOGLE_LOGIN`: The **Client ID** of your GCP OAuth2 application. +- `CLIENT_SECRET_GOOGLE_LOGIN`: The **Client Secret** of your GCP OAuth2 application. + + Once added, restart your Infisical instance and log in with Google \ No newline at end of file diff --git a/docs/documentation/platform/sso/jumpcloud.mdx b/docs/documentation/platform/sso/jumpcloud.mdx index f22d173d4..ef17156da 100644 --- a/docs/documentation/platform/sso/jumpcloud.mdx +++ b/docs/documentation/platform/sso/jumpcloud.mdx @@ -3,6 +3,13 @@ title: "JumpCloud SAML" description: "Configure JumpCloud SAML for Infisical SSO" --- + + JumpCloud SAML SSO feature is a paid feature. + + If you're using Infisical Cloud, then it is available under the **Pro Tier**. If you're self-hosting Infisical, + then you should contact team@infisical.com to purchase an enterprise license to use it. + + 1. In Infisical, head over to your organization Settings > Authentication > SAML SSO Configuration and select **Set up SAML SSO**. Next, copy the **ACS URL** and **SP Entity ID** to use when configuring the JumpCloud SAML application. diff --git a/docs/documentation/platform/sso/okta.mdx b/docs/documentation/platform/sso/okta.mdx index 36293be14..4595de019 100644 --- a/docs/documentation/platform/sso/okta.mdx +++ b/docs/documentation/platform/sso/okta.mdx @@ -3,6 +3,13 @@ title: "Okta SAML" description: "Configure Okta SAML 2.0 for Infisical SSO" --- + + Okta SAML SSO feature is a paid feature. + + If you're using Infisical Cloud, then it is available under the **Pro Tier**. If you're self-hosting Infisical, + then you should contact team@infisical.com to purchase an enterprise license to use it. + + 1. In Infisical, head over to your organization Settings > Authentication > SAML SSO Configuration and select **Set up SAML SSO**. Next, copy the **Single sign-on URL** and **Audience URI (SP Entity ID)** to use when configuring the Okta SAML 2.0 application. diff --git a/docs/documentation/platform/sso/overview.mdx b/docs/documentation/platform/sso/overview.mdx index 9a9afadef..359f09fb3 100644 --- a/docs/documentation/platform/sso/overview.mdx +++ b/docs/documentation/platform/sso/overview.mdx @@ -4,9 +4,11 @@ description: "Log in to Infisical via SSO protocols" --- - Infisical currently has confirmed support for SAML SSO authentication with - Okta, Azure AD, and JumpCloud. We're expanding support for other IdPs in the - coming months, so stay tuned and feel free to request a IdP at this + Infisical offers Google SSO and GitHub SSO for free across both Infisical Cloud and Infisical Self-hosted. + + Infisical also offers SAML SSO authentication but as paid features that can be unlocked on Infisical Cloud's **Pro** tier + or via enterprise license on self-hosted instances of Infisical. On this front, we currently support Okta, Azure AD, and JumpCloud and + are expanding support for other IdPs in the coming months; stay tuned and feel free to request a IdP at this [issue](https://github.com/Infisical/infisical/issues/442). @@ -15,6 +17,8 @@ You can configure your organization in Infisical to have members authenticate wi To note, configuring SSO retains the end-to-end encrypted architecture of Infisical because we decouple the **authentication** and **decryption** steps. In all login with SSO implementations, your IdP cannot and will not have access to the decryption key needed to decrypt your secrets. +- [Google SSO](/documentation/platform/sso/google) +- [GitHub SSO](/documentation/platform/sso/github) - [Okta SAML](/documentation/platform/sso/okta) - [Azure SAML](/documentation/platform/sso/azure) -- [JumpCloud SAML](/documentation/platform/sso/jumpcloud) +- [JumpCloud SAML](/documentation/platform/sso/jumpcloud) \ No newline at end of file diff --git a/docs/images/sso/github/credentials.png b/docs/images/sso/github/credentials.png new file mode 100644 index 000000000..82b44c03b Binary files /dev/null and b/docs/images/sso/github/credentials.png differ diff --git a/docs/images/sso/github/dev-settings.png b/docs/images/sso/github/dev-settings.png new file mode 100644 index 000000000..e95e94321 Binary files /dev/null and b/docs/images/sso/github/dev-settings.png differ diff --git a/docs/images/sso/github/new-app-form.png b/docs/images/sso/github/new-app-form.png new file mode 100644 index 000000000..c162fee55 Binary files /dev/null and b/docs/images/sso/github/new-app-form.png differ diff --git a/docs/images/sso/github/new-app.png b/docs/images/sso/github/new-app.png new file mode 100644 index 000000000..64f552564 Binary files /dev/null and b/docs/images/sso/github/new-app.png differ diff --git a/docs/images/sso/github/settings.png b/docs/images/sso/github/settings.png new file mode 100644 index 000000000..27547dbfe Binary files /dev/null and b/docs/images/sso/github/settings.png differ diff --git a/docs/images/sso/google/api-services.png b/docs/images/sso/google/api-services.png new file mode 100644 index 000000000..59bd43fcd Binary files /dev/null and b/docs/images/sso/google/api-services.png differ diff --git a/docs/images/sso/google/credentials.png b/docs/images/sso/google/credentials.png new file mode 100644 index 000000000..af32df88a Binary files /dev/null and b/docs/images/sso/google/credentials.png differ diff --git a/docs/images/sso/google/new-app-form.png b/docs/images/sso/google/new-app-form.png new file mode 100644 index 000000000..834ed181f Binary files /dev/null and b/docs/images/sso/google/new-app-form.png differ diff --git a/docs/images/sso/google/new-app.png b/docs/images/sso/google/new-app.png new file mode 100644 index 000000000..b950d8070 Binary files /dev/null and b/docs/images/sso/google/new-app.png differ diff --git a/docs/mint.json b/docs/mint.json index 9eaeddb1f..260b174b0 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -126,6 +126,8 @@ "group": "SSO", "pages": [ "documentation/platform/sso/overview", + "documentation/platform/sso/google", + "documentation/platform/sso/github", "documentation/platform/sso/okta", "documentation/platform/sso/azure", "documentation/platform/sso/jumpcloud" @@ -150,6 +152,7 @@ "self-hosting/configuration/envars", "self-hosting/configuration/email", "self-hosting/configuration/redis", + "self-hosting/configuration/sso", "self-hosting/faq" ] }, diff --git a/docs/self-hosting/configuration/sso.mdx b/docs/self-hosting/configuration/sso.mdx new file mode 100644 index 000000000..2497e368b --- /dev/null +++ b/docs/self-hosting/configuration/sso.mdx @@ -0,0 +1,20 @@ +--- +title: "Configure SSO" +description: "How to configure SSO when self-hosting Infisical." +--- + + + Infisical offers Google SSO and GitHub SSO for free. + + Infisical also offers SAML SSO authentication but as paid features that can be unlocked via enterprise license; if this is of interest, please contact team@infisical.com. + On this front, we currently support Okta, Azure AD, and JumpCloud and are expanding support for other IdPs in the coming months; stay tuned and feel free to request a IdP at this + [issue](https://github.com/Infisical/infisical/issues/442). + + +You can view specific documentation for how to set up each SSO authentication method below: + +- [Google SSO](/documentation/platform/sso/google) +- [GitHub SSO](/documentation/platform/sso/github) +- [Okta SAML](/documentation/platform/sso/okta) +- [Azure SAML](/documentation/platform/sso/azure) +- [JumpCloud SAML](/documentation/platform/sso/jumpcloud) \ No newline at end of file diff --git a/frontend/src/components/basic/popups/GlobPatternExamples.tsx b/frontend/src/components/basic/popups/GlobPatternExamples.tsx new file mode 100644 index 000000000..7939804f0 --- /dev/null +++ b/frontend/src/components/basic/popups/GlobPatternExamples.tsx @@ -0,0 +1,46 @@ +import { useState } from "react"; +import { faInfo } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import { Tooltip } from "@app/components/v2/Tooltip"; + +const GlobPatternExamples = () => { + const [showTip, setShowTip] = useState(false); + + return ( + +

Here are some examples of glob patterns:

+
+
  • + / - Matches all files and directories in the + current directory +
    • +
  • + **/* - Matches all files and directories in the + current directory and its subdirectories +
    • +
  • + {"/{dir1,dir2}"} - Matches all files and + directories in dir1 and dir2 +
    • +
    + + } + position="right" + className="text-xs" + > +
    setShowTip(true)} + > + +
    +     + ); +}; + +export default GlobPatternExamples; diff --git a/frontend/src/components/v2/Accordion/Accordion.stories.tsx b/frontend/src/components/v2/Accordion/Accordion.stories.tsx new file mode 100644 index 000000000..bd17c8743 --- /dev/null +++ b/frontend/src/components/v2/Accordion/Accordion.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion"; + +const meta: Meta = { + title: "Components/Accordion", + component: Accordion, + tags: ["v2"], + argTypes: {} +}; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = { + render: (args) => ( +
    + + + Section 1 + Description of Section 1 + + + Section 2 + Description of Section 2 + + +
    + ) +}; diff --git a/frontend/src/components/v2/Accordion/Accordion.tsx b/frontend/src/components/v2/Accordion/Accordion.tsx index 20ec5bacd..9188b873e 100644 --- a/frontend/src/components/v2/Accordion/Accordion.tsx +++ b/frontend/src/components/v2/Accordion/Accordion.tsx @@ -8,7 +8,7 @@ export const AccordionItem = forwardRef ( @@ -51,13 +51,13 @@ export const AccordionContent = forwardRef< >(({ children, className, ...props }, forwardedRef) => ( -
    {children}
    +
    {children}
     )); @@ -68,10 +68,7 @@ export const Accordion = ({ children, ...props }: AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) => ( - + {children} ); diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx index 82cfffd21..0880b3362 100644 --- a/frontend/src/components/v2/Table/Table.tsx +++ b/frontend/src/components/v2/Table/Table.tsx @@ -79,7 +79,7 @@ export const Tr = ({ }: TrProps): JSX.Element => ( (
    Access Restricted
    - Your role has limited permissions, please
    You do not have permission to this - page. + Your role has limited permissions, please
    contact your admin to gain access
    diff --git a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx index df022f4bb..4cf4a1f67 100644 --- a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx +++ b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx @@ -15,6 +15,7 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { twMerge } from "tailwind-merge"; import * as yup from "yup"; +import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { ProjectPermissionCan } from "@app/components/permissions"; // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality @@ -222,7 +223,7 @@ export const SecretDropzone = ({ onDragOver={handleDrag} onDrop={handleDrop} className={twMerge( - "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 py-4 text-sm px-2 text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100", + "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 py-4 px-2 text-sm text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100", isDragActive && "opacity-100", !isSmaller && "w-full max-w-3xl flex-col space-y-4 py-20", isLoading && "bg-bunker-800" @@ -234,7 +235,7 @@ export const SecretDropzone = ({ ) : (
    -
    +
    @@ -324,7 +325,12 @@ export const SecretDropzone = ({ )} /> - + } + >
    Secrets
    -
    +
    )} -
    +
    {isSecretsLoading && Array.apply(0, Array(2)).map((_x, i) => (
    -
    -
    {title}
    +
    +
    {title}
    {subtitle}
    @@ -130,12 +131,19 @@ export const MultiEnvProjectPermission = ({ animate={{ height: isCustom ? "auto" : 0 }} className="overflow-hidden" > - + + diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx index 7e39e3450..b85c1e9fb 100644 --- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx +++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx @@ -169,7 +169,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { return (
    -
    +

    {isNewRole ? "New" : "Edit"} Role

    @@ -211,7 +211,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { > -
    +

    Add Permission

    @@ -255,7 +255,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => { />
    -
    +
    - } - position="right" - className="text-xs" - > -
    setShowTip(true)} - > - -
    - - } + icon={} isRequired isError={Boolean(errors?.secretPath)} errorText={errors?.secretPath?.message} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 29811c15a..39098bf5c 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,1794 +1,576 @@ -const colors = require('tailwindcss/colors'); +const colors = require("tailwindcss/colors"); const round = (num) => num .toFixed(7) - .replace(/(\.[0-9]+?)0+$/, '$1') - .replace(/\.0$/, ''); -const rem = (px) => `${round(px / 16)}rem`; + .replace(/(\.[0-9]+?)0+$/, "$1") + .replace(/\.0$/, ""); const em = (px, base) => `${round(px / base)}em`; -// TODO(akhilmhdh): Clean up this later -let defaultModifiers = { - sm: { - css: [ - { - fontSize: rem(14), - lineHeight: round(24 / 14), - p: { - marginTop: em(16, 14), - marginBottom: em(16, 14) - }, - '[class~="lead"]': { - fontSize: em(18, 14), - lineHeight: round(28 / 18), - marginTop: em(16, 18), - marginBottom: em(16, 18) - }, - blockquote: { - marginTop: em(24, 18), - marginBottom: em(24, 18), - paddingLeft: em(20, 18) - }, - h1: { - fontSize: em(30, 14), - marginTop: '0', - marginBottom: em(24, 30), - lineHeight: round(36 / 30) - }, - h2: { - fontSize: em(20, 14), - marginTop: em(32, 20), - marginBottom: em(16, 20), - lineHeight: round(28 / 20) - }, - h3: { - fontSize: em(18, 14), - marginTop: em(28, 18), - marginBottom: em(8, 18), - lineHeight: round(28 / 18) - }, - h4: { - marginTop: em(20, 14), - marginBottom: em(8, 14), - lineHeight: round(20 / 14) - }, - img: { - marginTop: em(24, 14), - marginBottom: em(24, 14) - }, - video: { - marginTop: em(24, 14), - marginBottom: em(24, 14) - }, - figure: { - marginTop: em(24, 14), - marginBottom: em(24, 14) - }, - 'figure > *': { - marginTop: '0', - marginBottom: '0' - }, - figcaption: { - fontSize: em(12, 14), - lineHeight: round(16 / 12), - marginTop: em(8, 12) - }, - code: { - fontSize: em(12, 14) - }, - 'h2 code': { - fontSize: em(18, 20) - }, - 'h3 code': { - fontSize: em(16, 18) - }, - pre: { - fontSize: em(12, 14), - lineHeight: round(20 / 12), - marginTop: em(20, 12), - marginBottom: em(20, 12), - borderRadius: rem(4), - paddingTop: em(8, 12), - paddingRight: em(12, 12), - paddingBottom: em(8, 12), - paddingLeft: em(12, 12) - }, - ol: { - marginTop: em(16, 14), - marginBottom: em(16, 14), - paddingLeft: em(22, 14) - }, - ul: { - marginTop: em(16, 14), - marginBottom: em(16, 14), - paddingLeft: em(22, 14) - }, - li: { - marginTop: em(4, 14), - marginBottom: em(4, 14) - }, - 'ol > li': { - paddingLeft: em(6, 14) - }, - 'ul > li': { - paddingLeft: em(6, 14) - }, - '> ul > li p': { - marginTop: em(8, 14), - marginBottom: em(8, 14) - }, - '> ul > li > *:first-child': { - marginTop: em(16, 14) - }, - '> ul > li > *:last-child': { - marginBottom: em(16, 14) - }, - '> ol > li > *:first-child': { - marginTop: em(16, 14) - }, - '> ol > li > *:last-child': { - marginBottom: em(16, 14) - }, - 'ul ul, ul ol, ol ul, ol ol': { - marginTop: em(8, 14), - marginBottom: em(8, 14) - }, - hr: { - marginTop: em(40, 14), - marginBottom: em(40, 14) - }, - 'hr + *': { - marginTop: '0' - }, - 'h2 + *': { - marginTop: '0' - }, - 'h3 + *': { - marginTop: '0' - }, - 'h4 + *': { - marginTop: '0' - }, - table: { - fontSize: em(12, 14), - lineHeight: round(18 / 12) - }, - 'thead th': { - paddingRight: em(12, 12), - paddingBottom: em(8, 12), - paddingLeft: em(12, 12) - }, - 'thead th:first-child': { - paddingLeft: '0' - }, - 'thead th:last-child': { - paddingRight: '0' - }, - 'tbody td, tfoot td': { - paddingTop: em(8, 12), - paddingRight: em(12, 12), - paddingBottom: em(8, 12), - paddingLeft: em(12, 12) - }, - 'tbody td:first-child, tfoot td:first-child': { - paddingLeft: '0' - }, - 'tbody td:last-child, tfoot td:last-child': { - paddingRight: '0' - } - }, - { - '> :first-child': { - marginTop: '0' - }, - '> :last-child': { - marginBottom: '0' - } - } - ] - }, - base: { - css: [ - { - fontSize: rem(16), - lineHeight: round(28 / 16), - p: { - marginTop: em(20, 16), - marginBottom: em(20, 16) - }, - '[class~="lead"]': { - fontSize: em(20, 16), - lineHeight: round(32 / 20), - marginTop: em(24, 20), - marginBottom: em(24, 20) - }, - blockquote: { - marginTop: em(32, 20), - marginBottom: em(32, 20), - paddingLeft: em(20, 20) - }, - h1: { - fontSize: em(36, 16), - marginTop: '0', - marginBottom: em(32, 36), - lineHeight: round(40 / 36) - }, - h2: { - fontSize: em(24, 16), - marginTop: em(48, 24), - marginBottom: em(24, 24), - lineHeight: round(32 / 24) - }, - h3: { - fontSize: em(20, 16), - marginTop: em(32, 20), - marginBottom: em(12, 20), - lineHeight: round(32 / 20) - }, - h4: { - marginTop: em(24, 16), - marginBottom: em(8, 16), - lineHeight: round(24 / 16) - }, - img: { - marginTop: em(32, 16), - marginBottom: em(32, 16) - }, - video: { - marginTop: em(32, 16), - marginBottom: em(32, 16) - }, - figure: { - marginTop: em(32, 16), - marginBottom: em(32, 16) - }, - 'figure > *': { - marginTop: '0', - marginBottom: '0' - }, - figcaption: { - fontSize: em(14, 16), - lineHeight: round(20 / 14), - marginTop: em(12, 14) - }, - code: { - fontSize: em(14, 16) - }, - 'h2 code': { - fontSize: em(21, 24) - }, - 'h3 code': { - fontSize: em(18, 20) - }, - pre: { - fontSize: em(14, 16), - lineHeight: round(24 / 14), - marginTop: em(24, 14), - marginBottom: em(24, 14), - borderRadius: rem(6), - paddingTop: em(12, 14), - paddingRight: em(16, 14), - paddingBottom: em(12, 14), - paddingLeft: em(16, 14) - }, - ol: { - marginTop: em(20, 16), - marginBottom: em(20, 16), - paddingLeft: em(26, 16) - }, - ul: { - marginTop: em(20, 16), - marginBottom: em(20, 16), - paddingLeft: em(26, 16) - }, - li: { - marginTop: em(8, 16), - marginBottom: em(8, 16) - }, - 'ol > li': { - paddingLeft: em(6, 16) - }, - 'ul > li': { - paddingLeft: em(6, 16) - }, - '> ul > li p': { - marginTop: em(12, 16), - marginBottom: em(12, 16) - }, - '> ul > li > *:first-child': { - marginTop: em(20, 16) - }, - '> ul > li > *:last-child': { - marginBottom: em(20, 16) - }, - '> ol > li > *:first-child': { - marginTop: em(20, 16) - }, - '> ol > li > *:last-child': { - marginBottom: em(20, 16) - }, - 'ul ul, ul ol, ol ul, ol ol': { - marginTop: em(12, 16), - marginBottom: em(12, 16) - }, - hr: { - marginTop: em(48, 16), - marginBottom: em(48, 16) - }, - 'hr + *': { - marginTop: '0' - }, - 'h2 + *': { - marginTop: '0' - }, - 'h3 + *': { - marginTop: '0' - }, - 'h4 + *': { - marginTop: '0' - }, - table: { - fontSize: em(14, 16), - lineHeight: round(24 / 14) - }, - 'thead th': { - paddingRight: em(8, 14), - paddingBottom: em(8, 14), - paddingLeft: em(8, 14) - }, - 'thead th:first-child': { - paddingLeft: '0' - }, - 'thead th:last-child': { - paddingRight: '0' - }, - 'tbody td, tfoot td': { - paddingTop: em(8, 14), - paddingRight: em(8, 14), - paddingBottom: em(8, 14), - paddingLeft: em(8, 14) - }, - 'tbody td:first-child, tfoot td:first-child': { - paddingLeft: '0' - }, - 'tbody td:last-child, tfoot td:last-child': { - paddingRight: '0' - } - }, - { - '> :first-child': { - marginTop: '0' - }, - '> :last-child': { - marginBottom: '0' - } - } - ] - }, - lg: { - css: [ - { - fontSize: rem(18), - lineHeight: round(32 / 18), - p: { - marginTop: em(24, 18), - marginBottom: em(24, 18) - }, - '[class~="lead"]': { - fontSize: em(22, 18), - lineHeight: round(32 / 22), - marginTop: em(24, 22), - marginBottom: em(24, 22) - }, - blockquote: { - marginTop: em(40, 24), - marginBottom: em(40, 24), - paddingLeft: em(24, 24) - }, - h1: { - fontSize: em(48, 18), - marginTop: '0', - marginBottom: em(40, 48), - lineHeight: round(48 / 48) - }, - h2: { - fontSize: em(30, 18), - marginTop: em(56, 30), - marginBottom: em(32, 30), - lineHeight: round(40 / 30) - }, - h3: { - fontSize: em(24, 18), - marginTop: em(40, 24), - marginBottom: em(16, 24), - lineHeight: round(36 / 24) - }, - h4: { - marginTop: em(32, 18), - marginBottom: em(8, 18), - lineHeight: round(28 / 18) - }, - img: { - marginTop: em(32, 18), - marginBottom: em(32, 18) - }, - video: { - marginTop: em(32, 18), - marginBottom: em(32, 18) - }, - figure: { - marginTop: em(32, 18), - marginBottom: em(32, 18) - }, - 'figure > *': { - marginTop: '0', - marginBottom: '0' - }, - figcaption: { - fontSize: em(16, 18), - lineHeight: round(24 / 16), - marginTop: em(16, 16) - }, - code: { - fontSize: em(16, 18) - }, - 'h2 code': { - fontSize: em(26, 30) - }, - 'h3 code': { - fontSize: em(21, 24) - }, - pre: { - fontSize: em(16, 18), - lineHeight: round(28 / 16), - marginTop: em(32, 16), - marginBottom: em(32, 16), - borderRadius: rem(6), - paddingTop: em(16, 16), - paddingRight: em(24, 16), - paddingBottom: em(16, 16), - paddingLeft: em(24, 16) - }, - ol: { - marginTop: em(24, 18), - marginBottom: em(24, 18), - paddingLeft: em(28, 18) - }, - ul: { - marginTop: em(24, 18), - marginBottom: em(24, 18), - paddingLeft: em(28, 18) - }, - li: { - marginTop: em(12, 18), - marginBottom: em(12, 18) - }, - 'ol > li': { - paddingLeft: em(8, 18) - }, - 'ul > li': { - paddingLeft: em(8, 18) - }, - '> ul > li p': { - marginTop: em(16, 18), - marginBottom: em(16, 18) - }, - '> ul > li > *:first-child': { - marginTop: em(24, 18) - }, - '> ul > li > *:last-child': { - marginBottom: em(24, 18) - }, - '> ol > li > *:first-child': { - marginTop: em(24, 18) - }, - '> ol > li > *:last-child': { - marginBottom: em(24, 18) - }, - 'ul ul, ul ol, ol ul, ol ol': { - marginTop: em(16, 18), - marginBottom: em(16, 18) - }, - hr: { - marginTop: em(56, 18), - marginBottom: em(56, 18) - }, - 'hr + *': { - marginTop: '0' - }, - 'h2 + *': { - marginTop: '0' - }, - 'h3 + *': { - marginTop: '0' - }, - 'h4 + *': { - marginTop: '0' - }, - table: { - fontSize: em(16, 18), - lineHeight: round(24 / 16) - }, - 'thead th': { - paddingRight: em(12, 16), - paddingBottom: em(12, 16), - paddingLeft: em(12, 16) - }, - 'thead th:first-child': { - paddingLeft: '0' - }, - 'thead th:last-child': { - paddingRight: '0' - }, - 'tbody td, tfoot td': { - paddingTop: em(12, 16), - paddingRight: em(12, 16), - paddingBottom: em(12, 16), - paddingLeft: em(12, 16) - }, - 'tbody td:first-child, tfoot td:first-child': { - paddingLeft: '0' - }, - 'tbody td:last-child, tfoot td:last-child': { - paddingRight: '0' - } - }, - { - '> :first-child': { - marginTop: '0' - }, - '> :last-child': { - marginBottom: '0' - } - } - ] - }, - xl: { - css: [ - { - fontSize: rem(20), - lineHeight: round(36 / 20), - p: { - marginTop: em(24, 20), - marginBottom: em(24, 20) - }, - '[class~="lead"]': { - fontSize: em(24, 20), - lineHeight: round(36 / 24), - marginTop: em(24, 24), - marginBottom: em(24, 24) - }, - blockquote: { - marginTop: em(48, 30), - marginBottom: em(48, 30), - paddingLeft: em(32, 30) - }, - h1: { - fontSize: em(56, 20), - marginTop: '0', - marginBottom: em(48, 56), - lineHeight: round(56 / 56) - }, - h2: { - fontSize: em(36, 20), - marginTop: em(56, 36), - marginBottom: em(32, 36), - lineHeight: round(40 / 36) - }, - h3: { - fontSize: em(30, 20), - marginTop: em(48, 30), - marginBottom: em(20, 30), - lineHeight: round(40 / 30) - }, - h4: { - marginTop: em(36, 20), - marginBottom: em(12, 20), - lineHeight: round(32 / 20) - }, - img: { - marginTop: em(40, 20), - marginBottom: em(40, 20) - }, - video: { - marginTop: em(40, 20), - marginBottom: em(40, 20) - }, - figure: { - marginTop: em(40, 20), - marginBottom: em(40, 20) - }, - 'figure > *': { - marginTop: '0', - marginBottom: '0' - }, - figcaption: { - fontSize: em(18, 20), - lineHeight: round(28 / 18), - marginTop: em(18, 18) - }, - code: { - fontSize: em(18, 20) - }, - 'h2 code': { - fontSize: em(31, 36) - }, - 'h3 code': { - fontSize: em(27, 30) - }, - pre: { - fontSize: em(18, 20), - lineHeight: round(32 / 18), - marginTop: em(36, 18), - marginBottom: em(36, 18), - borderRadius: rem(8), - paddingTop: em(20, 18), - paddingRight: em(24, 18), - paddingBottom: em(20, 18), - paddingLeft: em(24, 18) - }, - ol: { - marginTop: em(24, 20), - marginBottom: em(24, 20), - paddingLeft: em(32, 20) - }, - ul: { - marginTop: em(24, 20), - marginBottom: em(24, 20), - paddingLeft: em(32, 20) - }, - li: { - marginTop: em(12, 20), - marginBottom: em(12, 20) - }, - 'ol > li': { - paddingLeft: em(8, 20) - }, - 'ul > li': { - paddingLeft: em(8, 20) - }, - '> ul > li p': { - marginTop: em(16, 20), - marginBottom: em(16, 20) - }, - '> ul > li > *:first-child': { - marginTop: em(24, 20) - }, - '> ul > li > *:last-child': { - marginBottom: em(24, 20) - }, - '> ol > li > *:first-child': { - marginTop: em(24, 20) - }, - '> ol > li > *:last-child': { - marginBottom: em(24, 20) - }, - 'ul ul, ul ol, ol ul, ol ol': { - marginTop: em(16, 20), - marginBottom: em(16, 20) - }, - hr: { - marginTop: em(56, 20), - marginBottom: em(56, 20) - }, - 'hr + *': { - marginTop: '0' - }, - 'h2 + *': { - marginTop: '0' - }, - 'h3 + *': { - marginTop: '0' - }, - 'h4 + *': { - marginTop: '0' - }, - table: { - fontSize: em(18, 20), - lineHeight: round(28 / 18) - }, - 'thead th': { - paddingRight: em(12, 18), - paddingBottom: em(16, 18), - paddingLeft: em(12, 18) - }, - 'thead th:first-child': { - paddingLeft: '0' - }, - 'thead th:last-child': { - paddingRight: '0' - }, - 'tbody td, tfoot td': { - paddingTop: em(16, 18), - paddingRight: em(12, 18), - paddingBottom: em(16, 18), - paddingLeft: em(12, 18) - }, - 'tbody td:first-child, tfoot td:first-child': { - paddingLeft: '0' - }, - 'tbody td:last-child, tfoot td:last-child': { - paddingRight: '0' - } - }, - { - '> :first-child': { - marginTop: '0' - }, - '> :last-child': { - marginBottom: '0' - } - } - ] - }, - '2xl': { - css: [ - { - fontSize: rem(24), - lineHeight: round(40 / 24), - p: { - marginTop: em(32, 24), - marginBottom: em(32, 24) - }, - '[class~="lead"]': { - fontSize: em(30, 24), - lineHeight: round(44 / 30), - marginTop: em(32, 30), - marginBottom: em(32, 30) - }, - blockquote: { - marginTop: em(64, 36), - marginBottom: em(64, 36), - paddingLeft: em(40, 36) - }, - h1: { - fontSize: em(64, 24), - marginTop: '0', - marginBottom: em(56, 64), - lineHeight: round(64 / 64) - }, - h2: { - fontSize: em(48, 24), - marginTop: em(72, 48), - marginBottom: em(40, 48), - lineHeight: round(52 / 48) - }, - h3: { - fontSize: em(36, 24), - marginTop: em(56, 36), - marginBottom: em(24, 36), - lineHeight: round(44 / 36) - }, - h4: { - marginTop: em(40, 24), - marginBottom: em(16, 24), - lineHeight: round(36 / 24) - }, - img: { - marginTop: em(48, 24), - marginBottom: em(48, 24) - }, - video: { - marginTop: em(48, 24), - marginBottom: em(48, 24) - }, - figure: { - marginTop: em(48, 24), - marginBottom: em(48, 24) - }, - 'figure > *': { - marginTop: '0', - marginBottom: '0' - }, - figcaption: { - fontSize: em(20, 24), - lineHeight: round(32 / 20), - marginTop: em(20, 20) - }, - code: { - fontSize: em(20, 24) - }, - 'h2 code': { - fontSize: em(42, 48) - }, - 'h3 code': { - fontSize: em(32, 36) - }, - pre: { - fontSize: em(20, 24), - lineHeight: round(36 / 20), - marginTop: em(40, 20), - marginBottom: em(40, 20), - borderRadius: rem(8), - paddingTop: em(24, 20), - paddingRight: em(32, 20), - paddingBottom: em(24, 20), - paddingLeft: em(32, 20) - }, - ol: { - marginTop: em(32, 24), - marginBottom: em(32, 24), - paddingLeft: em(38, 24) - }, - ul: { - marginTop: em(32, 24), - marginBottom: em(32, 24), - paddingLeft: em(38, 24) - }, - li: { - marginTop: em(12, 24), - marginBottom: em(12, 24) - }, - 'ol > li': { - paddingLeft: em(10, 24) - }, - 'ul > li': { - paddingLeft: em(10, 24) - }, - '> ul > li p': { - marginTop: em(20, 24), - marginBottom: em(20, 24) - }, - '> ul > li > *:first-child': { - marginTop: em(32, 24) - }, - '> ul > li > *:last-child': { - marginBottom: em(32, 24) - }, - '> ol > li > *:first-child': { - marginTop: em(32, 24) - }, - '> ol > li > *:last-child': { - marginBottom: em(32, 24) - }, - 'ul ul, ul ol, ol ul, ol ol': { - marginTop: em(16, 24), - marginBottom: em(16, 24) - }, - hr: { - marginTop: em(72, 24), - marginBottom: em(72, 24) - }, - 'hr + *': { - marginTop: '0' - }, - 'h2 + *': { - marginTop: '0' - }, - 'h3 + *': { - marginTop: '0' - }, - 'h4 + *': { - marginTop: '0' - }, - table: { - fontSize: em(20, 24), - lineHeight: round(28 / 20) - }, - 'thead th': { - paddingRight: em(12, 20), - paddingBottom: em(16, 20), - paddingLeft: em(12, 20) - }, - 'thead th:first-child': { - paddingLeft: '0' - }, - 'thead th:last-child': { - paddingRight: '0' - }, - 'tbody td, tfoot td': { - paddingTop: em(16, 20), - paddingRight: em(12, 20), - paddingBottom: em(16, 20), - paddingLeft: em(12, 20) - }, - 'tbody td:first-child, tfoot td:first-child': { - paddingLeft: '0' - }, - 'tbody td:last-child, tfoot td:last-child': { - paddingRight: '0' - } - }, - { - '> :first-child': { - marginTop: '0' - }, - '> :last-child': { - marginBottom: '0' - } - } - ] - }, - - // Invert (for dark mode) - invert: { - css: { - '--tw-prose-body': 'var(--tw-prose-invert-body)', - '--tw-prose-headings': 'var(--tw-prose-invert-headings)', - '--tw-prose-lead': 'var(--tw-prose-invert-lead)', - '--tw-prose-links': 'var(--tw-prose-invert-links)', - '--tw-prose-bold': 'var(--tw-prose-invert-bold)', - '--tw-prose-counters': 'var(--tw-prose-invert-counters)', - '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)', - '--tw-prose-hr': 'var(--tw-prose-invert-hr)', - '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)', - '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)', - '--tw-prose-captions': 'var(--tw-prose-invert-captions)', - '--tw-prose-code': 'var(--tw-prose-invert-code)', - '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)', - '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)', - '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)', - '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)' - } - }, - - // Gray color themes - - slate: { - css: { - '--tw-prose-body': colors.slate[700], - '--tw-prose-headings': colors.slate[900], - '--tw-prose-lead': colors.slate[600], - '--tw-prose-links': colors.slate[900], - '--tw-prose-bold': colors.slate[900], - '--tw-prose-counters': colors.slate[500], - '--tw-prose-bullets': colors.slate[300], - '--tw-prose-hr': colors.slate[200], - '--tw-prose-quotes': colors.slate[900], - '--tw-prose-quote-borders': colors.slate[200], - '--tw-prose-captions': colors.slate[500], - '--tw-prose-code': colors.slate[900], - '--tw-prose-pre-code': colors.slate[200], - '--tw-prose-pre-bg': colors.slate[800], - '--tw-prose-th-borders': colors.slate[300], - '--tw-prose-td-borders': colors.slate[200], - '--tw-prose-invert-body': colors.slate[300], - '--tw-prose-invert-headings': colors.white, - '--tw-prose-invert-lead': colors.slate[400], - '--tw-prose-invert-links': colors.white, - '--tw-prose-invert-bold': colors.white, - '--tw-prose-invert-counters': colors.slate[400], - '--tw-prose-invert-bullets': colors.slate[600], - '--tw-prose-invert-hr': colors.slate[700], - '--tw-prose-invert-quotes': colors.slate[100], - '--tw-prose-invert-quote-borders': colors.slate[700], - '--tw-prose-invert-captions': colors.slate[400], - '--tw-prose-invert-code': colors.white, - '--tw-prose-invert-pre-code': colors.slate[300], - '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': colors.slate[600], - '--tw-prose-invert-td-borders': colors.slate[700] - } - }, - - gray: { - css: { - '--tw-prose-body': colors.gray[700], - '--tw-prose-headings': colors.gray[900], - '--tw-prose-lead': colors.gray[600], - '--tw-prose-links': colors.gray[900], - '--tw-prose-bold': colors.gray[900], - '--tw-prose-counters': colors.gray[500], - '--tw-prose-bullets': colors.gray[300], - '--tw-prose-hr': colors.gray[200], - '--tw-prose-quotes': colors.gray[900], - '--tw-prose-quote-borders': colors.gray[200], - '--tw-prose-captions': colors.gray[500], - '--tw-prose-code': colors.gray[900], - '--tw-prose-pre-code': colors.gray[200], - '--tw-prose-pre-bg': colors.gray[800], - '--tw-prose-th-borders': colors.gray[300], - '--tw-prose-td-borders': colors.gray[200], - '--tw-prose-invert-body': colors.gray[300], - '--tw-prose-invert-headings': colors.white, - '--tw-prose-invert-lead': colors.gray[400], - '--tw-prose-invert-links': colors.white, - '--tw-prose-invert-bold': colors.white, - '--tw-prose-invert-counters': colors.gray[400], - '--tw-prose-invert-bullets': colors.gray[600], - '--tw-prose-invert-hr': colors.gray[700], - '--tw-prose-invert-quotes': colors.gray[100], - '--tw-prose-invert-quote-borders': colors.gray[700], - '--tw-prose-invert-captions': colors.gray[400], - '--tw-prose-invert-code': colors.white, - '--tw-prose-invert-pre-code': colors.gray[300], - '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': colors.gray[600], - '--tw-prose-invert-td-borders': colors.gray[700] - } - }, - - zinc: { - css: { - '--tw-prose-body': colors.zinc[700], - '--tw-prose-headings': colors.zinc[900], - '--tw-prose-lead': colors.zinc[600], - '--tw-prose-links': colors.zinc[900], - '--tw-prose-bold': colors.zinc[900], - '--tw-prose-counters': colors.zinc[500], - '--tw-prose-bullets': colors.zinc[300], - '--tw-prose-hr': colors.zinc[200], - '--tw-prose-quotes': colors.zinc[900], - '--tw-prose-quote-borders': colors.zinc[200], - '--tw-prose-captions': colors.zinc[500], - '--tw-prose-code': colors.zinc[900], - '--tw-prose-pre-code': colors.zinc[200], - '--tw-prose-pre-bg': colors.zinc[800], - '--tw-prose-th-borders': colors.zinc[300], - '--tw-prose-td-borders': colors.zinc[200], - '--tw-prose-invert-body': colors.zinc[300], - '--tw-prose-invert-headings': colors.white, - '--tw-prose-invert-lead': colors.zinc[400], - '--tw-prose-invert-links': colors.white, - '--tw-prose-invert-bold': colors.white, - '--tw-prose-invert-counters': colors.zinc[400], - '--tw-prose-invert-bullets': colors.zinc[600], - '--tw-prose-invert-hr': colors.zinc[700], - '--tw-prose-invert-quotes': colors.zinc[100], - '--tw-prose-invert-quote-borders': colors.zinc[700], - '--tw-prose-invert-captions': colors.zinc[400], - '--tw-prose-invert-code': colors.white, - '--tw-prose-invert-pre-code': colors.zinc[300], - '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': colors.zinc[600], - '--tw-prose-invert-td-borders': colors.zinc[700] - } - }, - - neutral: { - css: { - '--tw-prose-body': colors.neutral[700], - '--tw-prose-headings': colors.neutral[900], - '--tw-prose-lead': colors.neutral[600], - '--tw-prose-links': colors.neutral[900], - '--tw-prose-bold': colors.neutral[900], - '--tw-prose-counters': colors.neutral[500], - '--tw-prose-bullets': colors.neutral[300], - '--tw-prose-hr': colors.neutral[200], - '--tw-prose-quotes': colors.neutral[900], - '--tw-prose-quote-borders': colors.neutral[200], - '--tw-prose-captions': colors.neutral[500], - '--tw-prose-code': colors.neutral[900], - '--tw-prose-pre-code': colors.neutral[200], - '--tw-prose-pre-bg': colors.neutral[800], - '--tw-prose-th-borders': colors.neutral[300], - '--tw-prose-td-borders': colors.neutral[200], - '--tw-prose-invert-body': colors.neutral[300], - '--tw-prose-invert-headings': colors.white, - '--tw-prose-invert-lead': colors.neutral[400], - '--tw-prose-invert-links': colors.white, - '--tw-prose-invert-bold': colors.white, - '--tw-prose-invert-counters': colors.neutral[400], - '--tw-prose-invert-bullets': colors.neutral[600], - '--tw-prose-invert-hr': colors.neutral[700], - '--tw-prose-invert-quotes': colors.neutral[100], - '--tw-prose-invert-quote-borders': colors.neutral[700], - '--tw-prose-invert-captions': colors.neutral[400], - '--tw-prose-invert-code': colors.white, - '--tw-prose-invert-pre-code': colors.neutral[300], - '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': colors.neutral[600], - '--tw-prose-invert-td-borders': colors.neutral[700] - } - }, - - stone: { - css: { - '--tw-prose-body': colors.stone[700], - '--tw-prose-headings': colors.stone[900], - '--tw-prose-lead': colors.stone[600], - '--tw-prose-links': colors.stone[900], - '--tw-prose-bold': colors.stone[900], - '--tw-prose-counters': colors.stone[500], - '--tw-prose-bullets': colors.stone[300], - '--tw-prose-hr': colors.stone[200], - '--tw-prose-quotes': colors.stone[900], - '--tw-prose-quote-borders': colors.stone[200], - '--tw-prose-captions': colors.stone[500], - '--tw-prose-code': colors.stone[900], - '--tw-prose-pre-code': colors.stone[200], - '--tw-prose-pre-bg': colors.stone[800], - '--tw-prose-th-borders': colors.stone[300], - '--tw-prose-td-borders': colors.stone[200], - '--tw-prose-invert-body': colors.stone[300], - '--tw-prose-invert-headings': colors.white, - '--tw-prose-invert-lead': colors.stone[400], - '--tw-prose-invert-links': colors.white, - '--tw-prose-invert-bold': colors.white, - '--tw-prose-invert-counters': colors.stone[400], - '--tw-prose-invert-bullets': colors.stone[600], - '--tw-prose-invert-hr': colors.stone[700], - '--tw-prose-invert-quotes': colors.stone[100], - '--tw-prose-invert-quote-borders': colors.stone[700], - '--tw-prose-invert-captions': colors.stone[400], - '--tw-prose-invert-code': colors.white, - '--tw-prose-invert-pre-code': colors.stone[300], - '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': colors.stone[600], - '--tw-prose-invert-td-borders': colors.stone[700] - } - }, - - // Link-only themes (for backward compatibility) - - red: { - css: { - '--tw-prose-links': colors.red[600], - '--tw-prose-invert-links': colors.red[500] - } - }, - - orange: { - css: { - '--tw-prose-links': colors.orange[600], - '--tw-prose-invert-links': colors.orange[500] - } - }, - - amber: { - css: { - '--tw-prose-links': colors.amber[600], - '--tw-prose-invert-links': colors.amber[500] - } - }, - - yellow: { - css: { - '--tw-prose-links': colors.yellow[600], - '--tw-prose-invert-links': colors.yellow[500] - } - }, - - lime: { - css: { - '--tw-prose-links': colors.lime[600], - '--tw-prose-invert-links': colors.lime[500] - } - }, - - green: { - css: { - '--tw-prose-links': colors.green[600], - '--tw-prose-invert-links': colors.green[500] - } - }, - - emerald: { - css: { - '--tw-prose-links': colors.emerald[600], - '--tw-prose-invert-links': colors.emerald[500] - } - }, - - teal: { - css: { - '--tw-prose-links': colors.teal[600], - '--tw-prose-invert-links': colors.teal[500] - } - }, - - cyan: { - css: { - '--tw-prose-links': colors.cyan[600], - '--tw-prose-invert-links': colors.cyan[500] - } - }, - - sky: { - css: { - '--tw-prose-links': colors.sky[600], - '--tw-prose-invert-links': colors.sky[500] - } - }, - - blue: { - css: { - '--tw-prose-links': colors.blue[600], - '--tw-prose-invert-links': colors.blue[500] - } - }, - - indigo: { - css: { - '--tw-prose-links': colors.indigo[600], - '--tw-prose-invert-links': colors.indigo[500] - } - }, - - violet: { - css: { - '--tw-prose-links': colors.violet[600], - '--tw-prose-invert-links': colors.violet[500] - } - }, - - purple: { - css: { - '--tw-prose-links': colors.purple[600], - '--tw-prose-invert-links': colors.purple[500] - } - }, - - fuchsia: { - css: { - '--tw-prose-links': colors.fuchsia[600], - '--tw-prose-invert-links': colors.fuchsia[500] - } - }, - - pink: { - css: { - '--tw-prose-links': colors.pink[600], - '--tw-prose-invert-links': colors.pink[500] - } - }, - - rose: { - css: { - '--tw-prose-links': colors.rose[600], - '--tw-prose-invert-links': colors.rose[500] - } - } -}; - -const plugin = require('tailwindcss/plugin'); +const plugin = require("tailwindcss/plugin"); /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: 'class', - content: ['./src/**/*.{js,ts,jsx,tsx}'], + darkMode: "class", + content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { fontFamily: { - inter: ['Inter'] + inter: ["Inter"] }, colors: { // You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/ primary: { - 50: '#fffff5', - 100: '#fcfce8', - 200: '#f8faca', - 300: '#f4f7ab', - 400: '#ecf26d', - 500: '#e0ed34', - 600: '#c2d62b', - 700: '#97b31d', - 800: '#708f13', - 900: '#4d6b0b', - DEFAULT: '#e0ed34' + 50: "#fffff5", + 100: "#fcfce8", + 200: "#f8faca", + 300: "#f4f7ab", + 400: "#ecf26d", + 500: "#e0ed34", + 600: "#c2d62b", + 700: "#97b31d", + 800: "#708f13", + 900: "#4d6b0b", + DEFAULT: "#e0ed34" }, - grey: '#0d1117', + grey: "#0d1117", mineshaft: { - 50: '#f5f5f5', - 100: '#ebebeb', - 200: '#ccccce', - 300: '#adaeb0', - 400: '#707174', - 500: '#323439', - 600: '#2d2f33', - 700: '#26272b', - 800: '#1e1f22', - 900: '#19191c', - DEFAULT: '#323439' + 50: "#f5f5f5", + 100: "#ebebeb", + 200: "#ccccce", + 300: "#adaeb0", + 400: "#707174", + 500: "#323439", + 600: "#2d2f33", + 700: "#26272b", + 800: "#1e1f22", + 900: "#19191c", + DEFAULT: "#323439" }, chicago: { - 50: '#f7f7f7', - 100: '#efefef', - 200: '#d6d6d7', - 300: '#bdbebf', - 400: '#8c8d8e', - 500: '#5b5c5e', - 600: '#525355', - 700: '#444547', - 800: '#373738', - 900: '#2d2d2e', - DEFAULT: '#5b5c5e' + 50: "#f7f7f7", + 100: "#efefef", + 200: "#d6d6d7", + 300: "#bdbebf", + 400: "#8c8d8e", + 500: "#5b5c5e", + 600: "#525355", + 700: "#444547", + 800: "#373738", + 900: "#2d2d2e", + DEFAULT: "#5b5c5e" }, bunker: { - 50: '#f3f4f4', - 100: '#e8e8e9', - 200: '#c5c6c8', - 300: '#a2a4a6', - 400: '#5d5f64', - 500: '#171b21', - 600: '#15181e', - 700: '#111419', - 800: '#0e1014', - 900: '#0b0d10', - DEFAULT: '#171B21' + 50: "#f3f4f4", + 100: "#e8e8e9", + 200: "#c5c6c8", + 300: "#a2a4a6", + 400: "#5d5f64", + 500: "#171b21", + 600: "#15181e", + 700: "#111419", + 800: "#0e1014", + 900: "#0b0d10", + DEFAULT: "#171B21" }, - githubblack: '#020409', - blue2: '#130f40', - blue1: '#3498db', + githubblack: "#020409", + blue2: "#130f40", + blue1: "#3498db", yellow: { - 50: '#fefcf3', - 100: '#fef9e7', - 200: '#fcf0c3', - 300: '#f9e79f', - 400: '#f5d657', - 500: '#f1c40f', - 600: '#d9b00e', - 700: '#b5930b', - 800: '#917609', - 900: '#766007', - DEFAULT: '#f1c40f' + 50: "#fefcf3", + 100: "#fef9e7", + 200: "#fcf0c3", + 300: "#f9e79f", + 400: "#f5d657", + 500: "#f1c40f", + 600: "#d9b00e", + 700: "#b5930b", + 800: "#917609", + 900: "#766007", + DEFAULT: "#f1c40f" }, red: { - 50: '#fef6f5', - 100: '#fdedec', - 200: '#f9d2ce', - 300: '#f5b7b1', - 400: '#ee8277', - 500: '#e74c3c', - 600: '#d04436', - 700: '#ad392d', - 800: '#8b2e24', - 900: '#71251d', - DEFAULT: '#e74c3c' + 50: "#fef6f5", + 100: "#fdedec", + 200: "#f9d2ce", + 300: "#f5b7b1", + 400: "#ee8277", + 500: "#e74c3c", + 600: "#d04436", + 700: "#ad392d", + 800: "#8b2e24", + 900: "#71251d", + DEFAULT: "#e74c3c" }, - orange: '#f39c12', + orange: "#f39c12", green: { - 50: '#f5fcf8', - 100: '#eafaf1', - 200: '#cbf2dc', - 300: '#abebc6', - 400: '#6ddb9c', - 500: '#2ecc71', - 600: '#29b866', - 700: '#239955', - 800: '#1c7a44', - 900: '#176437', - DEFAULT: '#2ecc71' + 50: "#f5fcf8", + 100: "#eafaf1", + 200: "#cbf2dc", + 300: "#abebc6", + 400: "#6ddb9c", + 500: "#2ecc71", + 600: "#29b866", + 700: "#239955", + 800: "#1c7a44", + 900: "#176437", + DEFAULT: "#2ecc71" }, blue: { - 50: '#f2f8ff', - 100: '#e6f1ff', - 200: '#bfdbff', - 300: '#99c5ff', - 400: '#4d9aff', - 500: '#006eff', - 600: '#0063e6', - 700: '#0053bf', - 800: '#004299', - 900: '#00367d' + 50: "#f2f8ff", + 100: "#e6f1ff", + 200: "#bfdbff", + 300: "#99c5ff", + 400: "#4d9aff", + 500: "#006eff", + 600: "#0063e6", + 700: "#0053bf", + 800: "#004299", + 900: "#00367d" }, darkblue: { - 50: '#f2f4f7', - 100: '#e6e8f0', - 200: '#bfc6d9', - 300: '#99a3c3', - 400: '#4d5f95', - 500: '#001a68', - 600: '#00175e', - 700: '#00144e', - 800: '#00103e', - 900: '#000d33' - }, + 50: "#f2f4f7", + 100: "#e6e8f0", + 200: "#bfc6d9", + 300: "#99a3c3", + 400: "#4d5f95", + 500: "#001a68", + 600: "#00175e", + 700: "#00144e", + 800: "#00103e", + 900: "#000d33" + } }, keyframes: { type: { - '0%': { transform: 'translateX(0ch)' }, - '5%, 10%': { transform: 'translateX(1ch)' }, - '15%, 20%': { transform: 'translateX(2ch)' }, - '25%, 30%': { transform: 'translateX(3ch)' }, - '35%, 40%': { transform: 'translateX(4ch)' }, - '45%, 50%': { transform: 'translateX(5ch)' }, - '55%, 60%': { transform: 'translateX(6ch)' }, - '65%, 70%': { transform: 'translateX(7ch)' }, - '75%, 80%': { transform: 'translateX(8ch)' }, - '85%, 90%': { transform: 'translateX(9ch)' }, - '95%, 100%': { transform: 'translateX(11ch)' } + "0%": { transform: "translateX(0ch)" }, + "5%, 10%": { transform: "translateX(1ch)" }, + "15%, 20%": { transform: "translateX(2ch)" }, + "25%, 30%": { transform: "translateX(3ch)" }, + "35%, 40%": { transform: "translateX(4ch)" }, + "45%, 50%": { transform: "translateX(5ch)" }, + "55%, 60%": { transform: "translateX(6ch)" }, + "65%, 70%": { transform: "translateX(7ch)" }, + "75%, 80%": { transform: "translateX(8ch)" }, + "85%, 90%": { transform: "translateX(9ch)" }, + "95%, 100%": { transform: "translateX(11ch)" } }, // REQUIRED BY DESIGN COMPONENT // MODAL fadeIn: { - '0%': { opacity: 0 }, - '100%': { opacity: 1 } + "0%": { opacity: 0 }, + "100%": { opacity: 1 } }, popIn: { from: { opacity: 0, - transform: 'translate(-50%, -48%) scale(0.96)' + transform: "translate(-50%, -48%) scale(0.96)" }, to: { opacity: 1, - transform: 'translate(-50%, -50%) scale(1)' + transform: "translate(-50%, -50%) scale(1)" } }, // Dropdown slideUpAndFade: { from: { opacity: 0, - transform: ' translateY(2px)' + transform: " translateY(2px)" }, to: { opacity: 1, - transform: ' translateY(0)' + transform: " translateY(0)" } }, slideRightAndFade: { from: { opacity: 0, - transform: ' translateX(-2px)' + transform: " translateX(-2px)" }, to: { opacity: 1, - transform: ' translateX(0)' + transform: " translateX(0)" } }, slideDownAndFade: { from: { opacity: 0, - transform: ' translateY(-2px)' + transform: " translateY(-2px)" }, to: { opacity: 1, - transform: ' translateY(0)' + transform: " translateY(0)" } }, slideLeftAndFade: { from: { opacity: 0, - transform: ' translateX(2px)' + transform: " translateX(2px)" }, to: { opacity: 1, - transform: ' translateX(0)' + transform: " translateX(0)" } }, // END spin: { - '0%': { transform: 'rotate(0deg)' }, - '40%': { transform: 'rotate(360deg)' }, - '100%': { transform: 'rotate(360deg)' } + "0%": { transform: "rotate(0deg)" }, + "40%": { transform: "rotate(360deg)" }, + "100%": { transform: "rotate(360deg)" } }, bounce: { - '0%': { transform: 'translateY(-90%)' }, - '100%': { transform: 'translateY(-100%)' } + "0%": { transform: "translateY(-90%)" }, + "100%": { transform: "translateY(-100%)" } }, wiggle: { - '0%, 100%': { transform: 'rotate(-3deg)' }, - '50%': { transform: 'rotate(3deg)' } + "0%, 100%": { transform: "rotate(-3deg)" }, + "50%": { transform: "rotate(3deg)" } }, ping: { - '75%, 100%': { - transform: 'scale(2)', + "75%, 100%": { + transform: "scale(2)", opacity: 0 } }, popup: { - '0%': { - transform: 'scale(0.2)', + "0%": { + transform: "scale(0.2)", opacity: 0 // transform: "translateY(120%)", }, - '100%': { - transform: 'scale(1)', + "100%": { + transform: "scale(1)", opacity: 1 // transform: "translateY(100%)", } }, popright: { - '0%': { - transform: 'translateX(-100%)' + "0%": { + transform: "translateX(-100%)" }, - '100%': { - transform: 'translateX(0%)' + "100%": { + transform: "translateX(0%)" } }, popleft: { - '0%': { - transform: 'translateX(100%)' + "0%": { + transform: "translateX(100%)" }, - '100%': { - transform: 'translateX(0%)' + "100%": { + transform: "translateX(0%)" } }, popdown: { - '0%': { - transform: 'scale(0.2)', + "0%": { + transform: "scale(0.2)", opacity: 0 // transform: "translateY(80%)", }, - '100%': { - transform: 'scale(1)', + "100%": { + transform: "scale(1)", opacity: 1 // transform: "translateY(100%)", } }, drawerRightIn: { - '0%': { - transform: 'translateX(100%)' + "0%": { + transform: "translateX(100%)" }, - '100%': { - transform: 'translateX(0)' + "100%": { + transform: "translateX(0)" } }, drawerRightOut: { - '0%': { - transform: 'translateX(0)' + "0%": { + transform: "translateX(0)" }, - '100%': { - transform: 'translateX(100%)' + "100%": { + transform: "translateX(100%)" } + }, + slideDown: { + from: { height: 0 }, + to: { height: "var(--radix-accordion-content-height)" } + }, + slideUp: { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: 0 } } }, animation: { // Design Lib // MODAL - fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)', - popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);', + fadeIn: "fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)", + popIn: "popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);", // drawer - drawerRightIn: 'drawerRightIn 150ms ease-in-out', - drawerRightOut: 'drawerRightOut 150ms ease-in-out', + drawerRightIn: "drawerRightIn 150ms ease-in-out", + drawerRightOut: "drawerRightOut 150ms ease-in-out", // Dropdown - slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', - slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', - slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', - slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', + slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", + slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", + slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", + slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)", + slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)", + slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)", // END // TODO:(akhilmhdh) remove all these unused and keep the config file as small as possible // Make the whole color pallelte into simpler - bounce: 'bounce 1000ms ease-in-out infinite', - spin: 'spin 4000ms ease-in-out infinite', - cursor: 'cursor .6s linear infinite alternate', - type: 'type 2.7s ease-out .8s infinite alternate both', - 'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both', - wiggle: 'wiggle 200ms ease-in-out', - ping: 'ping 1000ms ease-in-out infinite', - popup: 'popup 300ms ease-in-out', - popdown: 'popdown 300ms ease-in-out', - popright: 'popright 100ms ease-in-out', - popleft: 'popleft 100ms ease-in-out' + bounce: "bounce 1000ms ease-in-out infinite", + spin: "spin 4000ms ease-in-out infinite", + cursor: "cursor .6s linear infinite alternate", + type: "type 2.7s ease-out .8s infinite alternate both", + "type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both", + wiggle: "wiggle 200ms ease-in-out", + ping: "ping 1000ms ease-in-out infinite", + popup: "popup 300ms ease-in-out", + popdown: "popdown 300ms ease-in-out", + popright: "popright 100ms ease-in-out", + popleft: "popleft 100ms ease-in-out" } }, fontSize: { - xxxs: '.23rem', - xxs: '.5rem', - xs: '.75rem', - sm: '.875rem', - base: '1rem', - lg: '1.125rem', - xl: '1.25rem', - '2xl': '1.5rem', - '3xl': '1.875rem', - '4xl': '2.25rem', - '5xl': '3rem', - '6xl': '4rem', - '7xl': '5rem', - '8xl': '6rem', - '9xl': '7rem' + xxxs: ".23rem", + xxs: ".5rem", + xs: ".75rem", + sm: ".875rem", + base: "1rem", + lg: "1.125rem", + xl: "1.25rem", + "2xl": "1.5rem", + "3xl": "1.875rem", + "4xl": "2.25rem", + "5xl": "3rem", + "6xl": "4rem", + "7xl": "5rem", + "8xl": "6rem", + "9xl": "7rem" }, typography: (theme) => ({ DEFAULT: { css: [ { - color: 'var(--tw-prose-body)', - maxWidth: '65ch', + color: "var(--tw-prose-body)", + maxWidth: "65ch", '[class~="lead"]': { - color: 'var(--tw-prose-lead)' + color: "var(--tw-prose-lead)" }, a: { color: colors.gray[200], - textDecoration: 'underline', - fontWeight: '500' + textDecoration: "underline", + fontWeight: "500" }, strong: { color: colors.gray[200], - fontWeight: '600' + fontWeight: "600" }, - 'a strong': { - color: 'inherit' + "a strong": { + color: "inherit" }, - 'blockquote strong': { - color: 'inherit' + "blockquote strong": { + color: "inherit" }, - 'thead th strong': { - color: 'inherit' + "thead th strong": { + color: "inherit" }, ol: { - listStyleType: 'decimal' + listStyleType: "decimal" }, 'ol[type="A"]': { - listStyleType: 'upper-alpha' + listStyleType: "upper-alpha" }, 'ol[type="a"]': { - listStyleType: 'lower-alpha' + listStyleType: "lower-alpha" }, 'ol[type="A" s]': { - listStyleType: 'upper-alpha' + listStyleType: "upper-alpha" }, 'ol[type="a" s]': { - listStyleType: 'lower-alpha' + listStyleType: "lower-alpha" }, 'ol[type="I"]': { - listStyleType: 'upper-roman' + listStyleType: "upper-roman" }, 'ol[type="i"]': { - listStyleType: 'lower-roman' + listStyleType: "lower-roman" }, 'ol[type="I" s]': { - listStyleType: 'upper-roman' + listStyleType: "upper-roman" }, 'ol[type="i" s]': { - listStyleType: 'lower-roman' + listStyleType: "lower-roman" }, 'ol[type="1"]': { - listStyleType: 'decimal' + listStyleType: "decimal" }, ul: { - listStyleType: 'disc' + listStyleType: "disc" }, - 'ol > li::marker': { - fontWeight: '400', - color: 'var(--tw-prose-counters)' + "ol > li::marker": { + fontWeight: "400", + color: "var(--tw-prose-counters)" }, - 'ul > li::marker': { - color: 'var(--tw-prose-bullets)' + "ul > li::marker": { + color: "var(--tw-prose-bullets)" }, hr: { - borderColor: 'var(--tw-prose-hr)', + borderColor: "var(--tw-prose-hr)", borderTopWidth: 1 }, blockquote: { - fontWeight: '500', - fontStyle: 'italic', - color: 'var(--tw-prose-quotes)', - borderLeftWidth: '0.25rem', - borderLeftColor: 'var(--tw-prose-quote-borders)', + fontWeight: "500", + fontStyle: "italic", + color: "var(--tw-prose-quotes)", + borderLeftWidth: "0.25rem", + borderLeftColor: "var(--tw-prose-quote-borders)", quotes: '"\\201C""\\201D""\\2018""\\2019"' }, - 'blockquote p:first-of-type::before': { - content: 'open-quote' + "blockquote p:first-of-type::before": { + content: "open-quote" }, - 'blockquote p:last-of-type::after': { - content: 'close-quote' + "blockquote p:last-of-type::after": { + content: "close-quote" }, h1: { color: colors.gray[200], - fontWeight: '800' + fontWeight: "800" }, - 'h1 strong': { - fontWeight: '900', - color: 'inherit' + "h1 strong": { + fontWeight: "900", + color: "inherit" }, h2: { color: colors.gray[200], - fontWeight: '700' + fontWeight: "700" }, - 'h2 strong': { - fontWeight: '800', - color: 'inherit' + "h2 strong": { + fontWeight: "800", + color: "inherit" }, h3: { color: colors.gray[300], - fontWeight: '600' + fontWeight: "600" }, - 'h3 strong': { - fontWeight: '700', - color: 'inherit' + "h3 strong": { + fontWeight: "700", + color: "inherit" }, h4: { color: colors.gray[400], - fontWeight: '600' + fontWeight: "600" }, - 'h4 strong': { - fontWeight: '700', - color: 'inherit' + "h4 strong": { + fontWeight: "700", + color: "inherit" }, // TODO: Figure out how to not need these, it's a merging issue img: {}, - 'figure > *': {}, + "figure > *": {}, figcaption: { - color: 'var(--tw-prose-captions)' + color: "var(--tw-prose-captions)" }, code: { - color: 'var(--tw-prose-code)', - fontWeight: '600' + color: "var(--tw-prose-code)", + fontWeight: "600" }, - 'code::before': { + "code::before": { content: '"`"' }, - 'code::after': { + "code::after": { content: '"`"' }, - 'a code': { - color: 'inherit' + "a code": { + color: "inherit" }, - 'h1 code': { - color: 'inherit' + "h1 code": { + color: "inherit" }, - 'h2 code': { - color: 'inherit' + "h2 code": { + color: "inherit" }, - 'h3 code': { - color: 'inherit' + "h3 code": { + color: "inherit" }, - 'h4 code': { - color: 'inherit' + "h4 code": { + color: "inherit" }, - 'blockquote code': { - color: 'inherit' + "blockquote code": { + color: "inherit" }, - 'thead th code': { - color: 'inherit' + "thead th code": { + color: "inherit" }, pre: { - color: 'var(--tw-prose-pre-code)', + color: "var(--tw-prose-pre-code)", backgroundColor: colors.gray[800], - overflowX: 'auto', - fontWeight: '400' + overflowX: "auto", + fontWeight: "400" }, - 'pre code': { - backgroundColor: 'transparent', - borderWidth: '0', - borderRadius: '0', - padding: '0', - fontWeight: 'inherit', - color: 'inherit', - fontSize: 'inherit', - fontFamily: 'inherit', - lineHeight: 'inherit' + "pre code": { + backgroundColor: "transparent", + borderWidth: "0", + borderRadius: "0", + padding: "0", + fontWeight: "inherit", + color: "inherit", + fontSize: "inherit", + fontFamily: "inherit", + lineHeight: "inherit" }, - 'pre code::before': { - content: 'none' + "pre code::before": { + content: "none" }, - 'pre code::after': { - content: 'none' + "pre code::after": { + content: "none" }, table: { - width: '100%', - tableLayout: 'auto', - textAlign: 'left', + width: "100%", + tableLayout: "auto", + textAlign: "left", marginTop: em(32, 16), marginBottom: em(32, 16) }, thead: { - borderBottomWidth: '1px', - borderBottomColor: 'var(--tw-prose-th-borders)' + borderBottomWidth: "1px", + borderBottomColor: "var(--tw-prose-th-borders)" }, - 'thead th': { - color: 'var(--tw-prose-headings)', - fontWeight: '600', - verticalAlign: 'bottom' + "thead th": { + color: "var(--tw-prose-headings)", + fontWeight: "600", + verticalAlign: "bottom" }, - 'tbody tr': { - borderBottomWidth: '1px', - borderBottomColor: 'var(--tw-prose-td-borders)' + "tbody tr": { + borderBottomWidth: "1px", + borderBottomColor: "var(--tw-prose-td-borders)" }, - 'tbody tr:last-child': { - borderBottomWidth: '0' + "tbody tr:last-child": { + borderBottomWidth: "0" }, - 'tbody td': { - verticalAlign: 'baseline' + "tbody td": { + verticalAlign: "baseline" }, tfoot: { - borderTopWidth: '1px', - borderTopColor: 'var(--tw-prose-th-borders)' + borderTopWidth: "1px", + borderTopColor: "var(--tw-prose-th-borders)" }, - 'tfoot td': { - verticalAlign: 'top' + "tfoot td": { + verticalAlign: "top" } - }, - defaultModifiers.gray.css, - ...defaultModifiers.base.css + } ] - }, - ...defaultModifiers + } }) }, plugins: [ plugin(function ({ addUtilities }) { addUtilities({ - '.no-scrollbar::-webkit-scrollbar': { - display: 'none' + ".no-scrollbar::-webkit-scrollbar": { + display: "none" }, - '.no-scrollbar': { - '-ms-overflow-style': 'none', - 'scrollbar-width': 'none' + ".no-scrollbar": { + "-ms-overflow-style": "none", + "scrollbar-width": "none" } }); }), - require('@tailwindcss/typography') + require("@tailwindcss/typography") ] }; diff --git a/helm-charts/infisical/Chart.yaml b/helm-charts/infisical/Chart.yaml index 5964553df..99e53b465 100644 --- a/helm-charts/infisical/Chart.yaml +++ b/helm-charts/infisical/Chart.yaml @@ -7,7 +7,7 @@ type: application # This is the chart version. This version number should be incremented each time you make changes # to the chart and its templates, including the app version. # Versions are expected to follow Semantic Versioning (https://semver.org/) -version: 0.3.3 +version: 0.3.4 # This is the version number of the application being deployed. This version number should be # incremented each time you make changes to the application. Versions are not expected to diff --git a/helm-charts/infisical/values.yaml b/helm-charts/infisical/values.yaml index 258eda0d0..0bda0d695 100644 --- a/helm-charts/infisical/values.yaml +++ b/helm-charts/infisical/values.yaml @@ -50,7 +50,7 @@ frontend: limits: memory: 100Mi requests: - cpu: 10m + cpu: 100m ## @param frontend.kubeSecretRef Backend secret resource reference name (containing required [frontend configuration variables](https://infisical.com/docs/self-hosting/configuration/envars)) ## kubeSecretRef: ""
    - Secret Path +
    + Secret Path + + + +
    +     		View Create Modify