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

[CL-254] Rename 500 colors to 600 to prep for UI redesign (#8623)

Browse Source 
* [CL-254] Rename 500 colors to 600 to prep for UI redesign

---------

Co-authored-by: Will Martin <contact@willmartian.com>
This commit is contained in:
Victoria League
2024-04-05 10:58:32 -04:00
committed by GitHub
parent fb51aa570d
commit 09169cac71
56 changed files with 253 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/src/link/link.directive.ts
View File

@@ -4,10 +4,10 @@ export type LinkType = "primary" | "secondary" | "contrast" | "light";
const linkStyles: Record<LinkType, string[]> = {
primary: [
"!tw-text-primary-500",
"hover:!tw-text-primary-500",
"!tw-text-primary-600",
"hover:!tw-text-primary-600",
"focus-visible:before:tw-ring-primary-700",
"disabled:!tw-text-primary-500/60",
"disabled:!tw-text-primary-600/60",
],
secondary: [
"!tw-text-main",

2
libs/components/src/link/link.mdx
View File

@@ -6,7 +6,7 @@ import * as stories from "./link.stories";
# Link / Text button
Text Links and Buttons use the `primary-500` color and can use either the `<a>` or `<button>` tags.
Text Links and Buttons use the `primary-600` color and can use either the `<a>` or `<button>` tags.
Choose which based on the action the button takes:
- if navigating to a new page, use a `<a>`

6
libs/components/src/link/link.stories.ts
View File

@@ -30,7 +30,7 @@ export const Buttons: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">Button</button>
</div>
@@ -61,7 +61,7 @@ export const Anchors: StoryObj<AnchorLinkDirective> = {
render: (args) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">Anchor</a>
</div>
@@ -108,7 +108,7 @@ export const Disabled: Story = {
template: `
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
<div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
</div>
`,