From f9d0e6fe4a89834c458d59cfcb1029fcf54462e5 Mon Sep 17 00:00:00 2001 From: Jason Ng Date: Mon, 30 Jun 2025 15:10:01 -0400 Subject: [PATCH] [CL-572] adding new colors for icons, update icon docs (#15367) * adding new colors for icons, update icon docs, remove art from colors mdx --- libs/components/src/icon/icon.mdx | 24 +++++++++++++----------- libs/components/src/stories/colors.mdx | 10 ++++++++-- libs/components/src/tw-theme.css | 16 ++++++++++++++++ libs/components/tailwind.config.base.js | 9 +++++++++ 4 files changed, 46 insertions(+), 13 deletions(-) diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx index d1809c81cd..01f03d1861 100644 --- a/libs/components/src/icon/icon.mdx +++ b/libs/components/src/icon/icon.mdx @@ -41,12 +41,14 @@ import { IconModule } from "@bitwarden/components"; - A non-comprehensive list of common colors and their associated classes is below: - | Hardcoded Value | Tailwind Stroke Class | Tailwind Fill Class | Tailwind Variable | - | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ----------------------- | ----------------------- | - | `#020F66` | `tw-stroke-art-primary` | `tw-fill-art-primary` | `--color-art-primary` | - | `#10949D` | `tw-stroke-art-accent` | `tw-fill-art-accent` | `--color-art-accent` | - | `#2CDDE9` | `tw-stroke-art-accent` | `tw-fill-art-accent` | `--color-art-accent` | - | `#89929F` | `tw-stroke-secondary-600` | `tw-fill-secondary-600` | `--color-secondary-600` | + | Hardcoded Value | Tailwind Stroke Class | Tailwind Fill Class | Tailwind Variable | + | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------- | ----------------------------------- | + | `#020F66` | `tw-stroke-illustration-outline` | `tw-fill-illustration-outline` | `--color-illustration-outline` | + | `#DBE5F6` | `tw-stroke-illustration-bg-primary` | `tw-fill-illustration-bg-primary` | `--color-illustration-bg-primary` | + | `#AAC3EF` | `tw-stroke-illustration-bg-secondary` | `tw-fill-illustration-bg-secondary` | `--color-illustration-bg-secondary` | + | `#FFFFFF` | `tw-stroke-illustration-bg-tertiary` | `tw-fill-illustration-bg-tertiary` | `--color-illustration-bg-tertiary` | + | `#FFBF00` | `tw-stroke-illustration-tertiary` | `tw-fill-illustration-tertiary` | `--color-illustration-tertiary` | + | `#175DDC` | `tw-stroke-illustration-logo` | `tw-fill-illustration-logo` | `--color-illustration-logo` | - If the hex that you have on an SVG path is not listed above, there are a few ways to figure out the appropriate Tailwind class: @@ -56,20 +58,20 @@ import { IconModule } from "@bitwarden/components"; - Click on an individual path on the SVG until you see the path's properties in the right-hand panel. - Scroll down to the Colors section. - - Example: `Color/Art/Primary` + - Example: `Color/Illustration/Outline` - This also includes Hex or RGB values that can be used to find the appropriate Tailwind variable as well if you follow the manual search option below. - Create the appropriate stroke or fill class from the color used. - - Example: `Color/Art/Primary` corresponds to `--color-art-primary` which corresponds to - `tw-stroke-art-primary` or `tw-fill-art-primary`. + - Example: `Color/Illustration/Outline` corresponds to `--color-illustration-outline` which + corresponds to `tw-stroke-illustration-outline` or `tw-fill-illustration-outline`. - **Option 2: Manual Search** - Take the path's stroke or fill hex value and convert it to RGB using a tool like [Hex to RGB](https://www.rgbtohex.net/hex-to-rgb/). - Search for the RGB value without commas in our `tw-theme.css` to find the Tailwind variable that corresponds to the color. - Create the appropriate stroke or fill class using the Tailwind variable. - - Example: `--color-art-primary` corresponds to `tw-stroke-art-primary` or - `tw-fill-art-primary`. + - Example: `--color-illustration-outline` corresponds to `tw-stroke-illustration-outline` + or `tw-fill-illustration-outline`. 6. **Remove any hardcoded width or height attributes** if your SVG has a configured [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute in order diff --git a/libs/components/src/stories/colors.mdx b/libs/components/src/stories/colors.mdx index 3a4a4f0fe3..87ca673797 100644 --- a/libs/components/src/stories/colors.mdx +++ b/libs/components/src/stories/colors.mdx @@ -62,9 +62,14 @@ export const Table = (args) => ( {Row("notification-600")} - {Row("art-primary")} - {Row("art-accent")} + {Row("illustration-outline")} + {Row("illustration-bg-primary")} + {Row("illustration-bg-secondary")} + {Row("illustration-bg-tertiary")} + {Row("illustration-tertiary")} + {Row("illustration-logo")} + Text @@ -78,6 +83,7 @@ export const Table = (args) => ( {Row("text-alt2")} {Row("text-code")} + ); diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css index c8de973c3d..078357491e 100644 --- a/libs/components/src/tw-theme.css +++ b/libs/components/src/tw-theme.css @@ -46,6 +46,7 @@ --color-notification-100: 255 225 247; --color-notification-600: 192 17 118; + /*art styles deprecated, use 'illustration' instead*/ --color-art-primary: 2 15 102; --color-art-accent: 44 221 223; @@ -60,6 +61,13 @@ --tw-ring-offset-color: #ffffff; --tw-sm-breakpoint: 640px; + + --color-illustration-outline: 2 15 102; + --color-illustration-bg-primary: 219 229 246; + --color-illustration-bg-secondary: 170 195 239; + --color-illustration-bg-tertiary: 255 255 255; + --color-illustration-tertiary: 255 191 0; + --color-illustration-logo: 23 93 220; } .theme_light { @@ -106,6 +114,7 @@ --color-notification-100: 117 37 83; --color-notification-600: 255 143 208; + /*art styles deprecated, use 'illustration' instead*/ --color-art-primary: 243 246 249; --color-art-accent: 44 221 233; @@ -118,6 +127,13 @@ --color-marketing-logo: 255 255 255; --tw-ring-offset-color: #1f242e; + + --color-illustration-outline: 23 93 220; + --color-illustration-bg-primary: 170 195 239; + --color-illustration-bg-secondary: 121 161 233; + --color-illustration-bg-tertiary: 243 246 249; + --color-illustration-tertiary: 255 191 0; + --color-illustration-logo: 255 255 255; } /** diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index fde59f4a08..c38515cf77 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -63,6 +63,7 @@ module.exports = { 100: rgba("--color-notification-100"), 600: rgba("--color-notification-600"), }, + // art styles deprecated, use 'illustration' instead art: { primary: rgba("--color-art-primary"), accent: rgba("--color-art-accent"), @@ -83,6 +84,14 @@ module.exports = { alt4: rgba("--color-background-alt4"), }, "marketing-logo": rgba("--color-marketing-logo"), + illustration: { + outline: rgba("--color-illustration-outline"), + "bg-primary": rgba("--color-illustration-bg-primary"), + "bg-secondary": rgba("--color-illustration-bg-secondary"), + "bg-tertiary": rgba("--color-illustration-bg-tertiary"), + tertiary: rgba("--color-illustration-tertiary"), + logo: rgba("--color-illustration-logo"), + }, }, textColor: { main: rgba("--color-text-main"),