From 32f7845c513f7bb0734f9e18ce3bb4a980b15b77 Mon Sep 17 00:00:00 2001 From: Kevin Ly <44701340+kevinly77@users.noreply.github.com> Date: Tue, 13 Aug 2024 06:01:08 -0400 Subject: [PATCH] Fix: alert text on light mode, and background --- packages/_site/src/index.css | 68 +++++---- packages/alert/lib/index.tsx | 286 +++++++++++++++++------------------ 2 files changed, 180 insertions(+), 174 deletions(-) diff --git a/packages/_site/src/index.css b/packages/_site/src/index.css index 858e3c0..f445238 100644 --- a/packages/_site/src/index.css +++ b/packages/_site/src/index.css @@ -15,19 +15,22 @@ body, font-family: "Noto Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-variation-settings: "wdth" 100; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + font-variation-settings: "wdth"100; } :root { --transition-speed: 0.2s; - --border-radius: 0.25rem; /* 4px */ + --border-radius: 0.25rem; + /* 4px */ - --navbar-size: 4rem; /* 64px */ + --navbar-size: 4rem; + /* 64px */ - --sidebar-size: 20rem; /* 320px */ + --sidebar-size: 20rem; + /* 320px */ --sidebar-margin-left: 0rem; /* NOTE: This is left at 0 on purpose the time, in order to prevent @@ -183,7 +186,7 @@ body, :root, [data-theme="Dark"] { --ds-surface: #181818; - --ds-surface-sunken: #232323; + --ds-surface-sunken: #232323; /* --ds-surface: #1D2125; --ds-surface-sunken: #161A1D; */ @@ -191,7 +194,8 @@ body, --svg-invert: 0.9; --svg-logo-brightness: 1.5; - --color-bg: #0E0E0E; /* #201f1e; */ + --color-bg: #0E0E0E; + /* #201f1e; */ --color-bg-compliment: #252525; --border-color: #333333; @@ -205,6 +209,10 @@ body, --sidebar-color-bg: #00060D; --sidebar-color-bg-hover: #535251; + + /* Alert */ + --alert-color-bg: var(--color-bg-compliment); + /* Button */ --btn-text: var(--cds-white); @@ -248,16 +256,16 @@ body, --code-block-background: #1A1A1A; --code-block-shiki-background: #1A1A1A; --code-block-shiki-color-text: #e1e4e8; - --code-block-shiki-color-background: #aa6e6e; - --code-block-shiki-token-constant: #79b8ff; - --code-block-shiki-token-string: #9ecbff; - --code-block-shiki-token-comment: #6a737d; - --code-block-shiki-token-keyword: #f97583; - --code-block-shiki-token-parameter: #FFAB70; - --code-block-shiki-token-function: #B392F0; - --code-block-shiki-token-string-expression: #dbedff; - --code-block-shiki-token-punctuation: #6a737d; - --code-block-shiki-token-link: #dbedff; + --code-block-shiki-color-background: #aa6e6e; + --code-block-shiki-token-constant: #79b8ff; + --code-block-shiki-token-string: #9ecbff; + --code-block-shiki-token-comment: #6a737d; + --code-block-shiki-token-keyword: #f97583; + --code-block-shiki-token-parameter: #FFAB70; + --code-block-shiki-token-function: #B392F0; + --code-block-shiki-token-string-expression: #dbedff; + --code-block-shiki-token-punctuation: #6a737d; + --code-block-shiki-token-link: #dbedff; } [data-theme="Light"] { @@ -286,6 +294,8 @@ body, --accordion-color: var(--text-color); --accordion-hover: var(--color-bg-compliment); + /* Alert */ + --alert-color-bg: var(--color-bg-compliment); /* Button */ --btn-text: var(--cds-white); @@ -350,17 +360,17 @@ body, --code-block-background: #f5f5f5; --code-block-shiki-background: #f5f5f5; --code-block-shiki-color-text: #24292E; - --code-block-shiki-color-background: #aa6e6e; - --code-block-shiki-token-constant: #005cc5; - --code-block-shiki-token-string: #770000; - --code-block-shiki-token-comment: #6a737d; - --code-block-shiki-token-keyword: #d73a49; - --code-block-shiki-token-parameter: #E36209; + --code-block-shiki-color-background: #aa6e6e; + --code-block-shiki-token-constant: #005cc5; + --code-block-shiki-token-string: #770000; + --code-block-shiki-token-comment: #6a737d; + --code-block-shiki-token-keyword: #d73a49; + --code-block-shiki-token-parameter: #E36209; /* --code-block-shiki-foreground: #E36209; */ - --code-block-shiki-token-function: #6F42C1; - --code-block-shiki-token-string-expression: #032f62; - --code-block-shiki-token-punctuation: #6a737d; - --code-block-shiki-token-link: #032f62; + --code-block-shiki-token-function: #6F42C1; + --code-block-shiki-token-string-expression: #032f62; + --code-block-shiki-token-punctuation: #6a737d; + --code-block-shiki-token-link: #032f62; /* Sheet */ --sheet-overlay: #00000088; diff --git a/packages/alert/lib/index.tsx b/packages/alert/lib/index.tsx index b696ec0..a5b34a8 100644 --- a/packages/alert/lib/index.tsx +++ b/packages/alert/lib/index.tsx @@ -6,190 +6,186 @@ import * as stylex from "@stylexjs/stylex"; // TODO(clearfeld): add close button trigger type ExtendProps = { - extend?: stylex.StyleXStyles; + extend?: stylex.StyleXStyles; }; type AlertVariantProps = { - variant?: AlertVariants; + variant?: AlertVariants; }; enum AlertVariants { - DEFAULT = "default", - WARNING = "warning", - DANGER = "danger", - SUCCESS = "success", + DEFAULT = "default", + WARNING = "warning", + DANGER = "danger", + SUCCESS = "success", } const styles = stylex.create({ - alert: { - position: "relative", - padding: "1rem", - borderRadius: "0.5rem", - borderWidth: "1px", - width: "100%", - fontSize: "0.875rem", - lineHeight: "1.25rem", - boxSizing: "border-box", - backgroundColor: "var(--alert-background, #212121)", - - display: "grid", - gridTemplateAreas: ` + alert: { + position: "relative", + padding: "1rem", + borderRadius: "0.5rem", + borderWidth: "1px", + width: "100%", + fontSize: "0.875rem", + lineHeight: "1.25rem", + boxSizing: "border-box", + backgroundColor: "var(--alert-color-bg)", + + display: "grid", + gridTemplateAreas: ` "icon title" "icon content"`, - gridTemplateColumns: "minmax(0, 1.25rem) 1fr", - columnGap: "1rem", - }, - - [AlertVariants.DEFAULT]: { - color: "var(--alert-default-color, #0088CC)", - }, - - [AlertVariants.WARNING]: { - color: "var(--alert-warning-color, #F1CB00)", - }, - - [AlertVariants.DANGER]: { - color: "var(--alert-danger-color, #FF2E00)", - }, - - [AlertVariants.SUCCESS]: { - color: "var(--alert-success-color, #30AB53)", - }, - - title: { - margin: 0, - padding: 0, - marginBottom: "0.5rem", - fontWeight: 500, - fontSize: "1.25rem", - letterSpacing: "-0.025em", - lineHeight: 1, - borderRadius: "0.25rem", - gridArea: "title", - // NOTE: uses alert variant color - }, - - description: { - fontSize: "0.875rem", - lineHeight: "1.25rem", - color: "var(--color-text, #FCFCFC)", - gridArea: "content", - }, + gridTemplateColumns: "minmax(0, 1.25rem) 1fr", + columnGap: "1rem", + }, + + [AlertVariants.DEFAULT]: { + color: "var(--alert-default-color, #0088CC)", + }, + + [AlertVariants.WARNING]: { + color: "var(--alert-warning-color, #F1CB00)", + }, + + [AlertVariants.DANGER]: { + color: "var(--alert-danger-color, #FF2E00)", + }, + + [AlertVariants.SUCCESS]: { + color: "var(--alert-success-color, #30AB53)", + }, + + title: { + margin: 0, + padding: 0, + marginBottom: "0.5rem", + fontWeight: 500, + fontSize: "1.25rem", + letterSpacing: "-0.025em", + lineHeight: 1, + borderRadius: "0.25rem", + gridArea: "title", + // NOTE: uses alert variant color + }, + + description: { + fontSize: "0.875rem", + lineHeight: "1.25rem", + color: "var(--text-color, #FCFCFC)", + gridArea: "content", + }, }); const Alert = forwardRef< - HTMLDivElement, - HTMLAttributes & ExtendProps & AlertVariantProps + HTMLDivElement, + HTMLAttributes & ExtendProps & AlertVariantProps >(({ className, extend, variant = AlertVariants.DEFAULT, ...props }, ref) => ( -
+
)); Alert.displayName = "Alert"; const AlertTitle = forwardRef< - HTMLParagraphElement, - HTMLAttributes & ExtendProps + HTMLParagraphElement, + HTMLAttributes & ExtendProps >(({ className, extend, ...props }, ref) => ( -
+
)); AlertTitle.displayName = "AlertTitle"; const AlertDescription = forwardRef< - HTMLParagraphElement, - HTMLAttributes & ExtendProps + HTMLParagraphElement, + HTMLAttributes & ExtendProps >(({ className, extend, ...props }, ref) => ( -
+
)); AlertDescription.displayName = "AlertDescription"; const AlertIconDefault = () => ( - - Information - - + + Information + + ); const AlertIconSuccess = () => ( - - Success - - + + Success + + ); const AlertIconWarning = () => ( - - Warning - - + + Warning + + ); const AlertIconDanger = () => ( - - Danger - - + + Danger + + ); export { - AlertVariants, - Alert, - AlertTitle, - AlertDescription, - AlertIconDefault, - AlertIconSuccess, - AlertIconWarning, - AlertIconDanger, + AlertVariants, + Alert, + AlertTitle, + AlertDescription, + AlertIconDefault, + AlertIconSuccess, + AlertIconWarning, + AlertIconDanger, };