bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

[CL-572] adding new colors for icons, update icon docs (#15367)

Browse Source 
* adding new colors for icons, update icon docs, remove art from colors mdx
This commit is contained in:
Jason Ng
2025-06-30 15:10:01 -04:00
committed by GitHub
parent 7eb7507229
commit f9d0e6fe4a
4 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
libs/components/src/icon/icon.mdx
View File

@@ -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` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#020F66"}}></span> | `tw-stroke-art-primary` | `tw-fill-art-primary` | `--color-art-primary` |
| `#10949D` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#10949D"}}></span> | `tw-stroke-art-accent` | `tw-fill-art-accent` | `--color-art-accent` |
| `#2CDDE9` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#2CDDE9"}}></span> | `tw-stroke-art-accent` | `tw-fill-art-accent` | `--color-art-accent` |
| `#89929F` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#89929F"}}></span> | `tw-stroke-secondary-600` | `tw-fill-secondary-600` | `--color-secondary-600` |
| Hardcoded Value | Tailwind Stroke Class | Tailwind Fill Class | Tailwind Variable |
| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------- | ----------------------------------- |
| `#020F66` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#020F66"}}></span> | `tw-stroke-illustration-outline` | `tw-fill-illustration-outline` | `--color-illustration-outline` |
| `#DBE5F6` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#DBE5F6"}}></span> | `tw-stroke-illustration-bg-primary` | `tw-fill-illustration-bg-primary` | `--color-illustration-bg-primary` |
| `#AAC3EF` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#AAC3EF"}}></span> | `tw-stroke-illustration-bg-secondary` | `tw-fill-illustration-bg-secondary` | `--color-illustration-bg-secondary` |
| `#FFFFFF` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#FFFFFF"}}></span> | `tw-stroke-illustration-bg-tertiary` | `tw-fill-illustration-bg-tertiary` | `--color-illustration-bg-tertiary` |
| `#FFBF00` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#FFBF00"}}></span> | `tw-stroke-illustration-tertiary` | `tw-fill-illustration-tertiary` | `--color-illustration-tertiary` |
| `#175DDC` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#175DDC"}}></span> | `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

10
libs/components/src/stories/colors.mdx
View File

@@ -62,9 +62,14 @@ export const Table = (args) => (
{Row("notification-600")}
</tbody>
<tbody>
{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")}
</tbody>
<thead>
<tr>
<th>Text</th>
@@ -78,6 +83,7 @@ export const Table = (args) => (
{Row("text-alt2")}
{Row("text-code")}
</tbody>
</table>
);

16
libs/components/src/tw-theme.css
View File

@@ -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;
}
/**

9
libs/components/tailwind.config.base.js
View File

@@ -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"),