Skip to content

Commit

Permalink
chore: update legacy
Browse files Browse the repository at this point in the history
  • Loading branch information
@Niznikr
Niznikr committed Oct 9, 2024
1 parent 45507a6 commit dc4a3a1
Show file tree
Hide file tree
Showing 11 changed files with 93 additions and 31 deletions.
15 changes: 15 additions & 0 deletions .changeset/eighty-avocados-add.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"@launchpad-ui/progress-bubbles": patch
"@launchpad-ui/clipboard": patch
"@launchpad-ui/tooltip": patch
"@launchpad-ui/avatar": patch
"@launchpad-ui/banner": patch
"@launchpad-ui/button": patch
"@launchpad-ui/alert": patch
"@launchpad-ui/modal": patch
"@launchpad-ui/chip": patch
"@launchpad-ui/tag": patch
"@launchpad-ui/core": patch
---

Use updated tokens
15 changes: 12 additions & 3 deletions packages/alert/src/styles/Alert.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@
--lp-component-alert-notification-flair-strong-button-color-text-hover: var(--lp-color-black-300);
--lp-component-alert-notification-flair-strong-button-color-text-focus: var(--lp-color-black-300);
--lp-component-alert-notification-flair-strong-button-color-text-active: var(--lp-color-black-300);
--lp-component-alert-color-bg-warning: var(--lp-color-brand-yellow-light);
--lp-component-alert-fill-warning: var(--lp-color-brand-yellow-dark);
--lp-component-alert-border-warning: var(--lp-color-brand-yellow-dark);
}

[data-theme='dark'] {
--lp-component-alert-color-bg-warning: var(--lp-color-brand-orange-dark);
--lp-component-alert-fill-warning: var(--lp-color-brand-yellow-base);
--lp-component-alert-border-warning: var(--lp-color-brand-yellow-base);
}

.Alert {
Expand Down Expand Up @@ -90,7 +99,7 @@
}

.Alert.Alert--warning .Alert-icon {
fill: var(--lp-color-fill-feedback-warning);
fill: var(--lp-component-alert-fill-warning);
}

.Alert.Alert--error .Alert-icon {
Expand Down Expand Up @@ -170,8 +179,8 @@
}

.Alert.Alert--warning.Alert--bordered {
border: var(--lp-border-width-200) solid var(--lp-color-border-feedback-warning);
background-color: var(--lp-color-bg-feedback-warning);
border: var(--lp-border-width-200) solid var(--lp-component-alert-border-warning);
background-color: var(--lp-component-alert-color-bg-warning);
}

.Alert.Alert--error.Alert--bordered {
Expand Down
6 changes: 3 additions & 3 deletions packages/avatar/src/styles/Avatar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,19 @@
}

.Avatar--color0 {
background-color: var(--lp-color-yellow-900);
background-color: var(--lp-color-brand-yellow-base);
}

.Avatar--color1 {
background-color: var(--lp-color-blue-600);
}

.Avatar--color2 {
background-color: var(--lp-color-pink-500);
background-color: var(--lp-color-brand-pink-base);
}

.Avatar--color3 {
background-color: var(--lp-color-cyan-500);
background-color: var(--lp-color-brand-cyan-base);
}

.Avatar--color4 {
Expand Down
18 changes: 10 additions & 8 deletions packages/banner/src/styles/Banner.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@

:root,
[data-theme='default'] {
--lp-component-banner-color-bg-error: var(--lp-color-system-red-200);
--lp-component-banner-color-bg-warning: var(--lp-color-system-yellow-200);
--lp-component-banner-color-bg-info: var(--lp-color-blue-200);
--lp-component-banner-color-bg-error: var(--lp-color-bg-feedback-error);
--lp-component-banner-color-bg-warning: var(--lp-color-brand-yellow-light);
--lp-component-banner-color-bg-info: var(--lp-color-bg-feedback-info);
--lp-component-banner-fill-warning: var(--lp-color-brand-yellow-dark);
--lp-component-banner-border-warning: var(--lp-color-brand-yellow-dark);
}

[data-theme='dark'] {
--lp-component-banner-color-bg-error: hsl(0 30% 17%);
--lp-component-banner-color-bg-warning: hsl(46 29% 17%);
--lp-component-banner-color-bg-info: hsl(232 32% 18%);
--lp-component-banner-color-bg-warning: var(--lp-color-brand-orange-dark);
--lp-component-banner-fill-warning: var(--lp-color-brand-yellow-base);
--lp-component-banner-border-warning: var(--lp-color-brand-yellow-base);
}

.Banner {
Expand Down Expand Up @@ -46,7 +48,7 @@
}

.Banner.Banner--warning {
border-bottom-color: var(--lp-color-border-feedback-warning);
border-bottom-color: var(--lp-component-banner-border-warning);
background-color: var(--lp-component-banner-color-bg-warning);
}

Expand All @@ -68,5 +70,5 @@
}

.Banner.Banner--warning .Banner-icon {
fill: var(--lp-color-fill-feedback-warning);
fill: var(--lp-component-banner-fill-warning);
}
44 changes: 40 additions & 4 deletions packages/button/src/styles/Button.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,50 @@
--lp-component-button-color-bg-destructive-active: var(
--lp-color-bg-interactive-destructive-active
);
--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-500);
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-600);
--lp-color-border-interactive-primary-flair-focus: var(--lp-color-purple-800);
--lp-color-border-interactive-primary-flair-active: var(--lp-color-purple-800);
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-100);
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-300);
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-400);
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-400);
--lp-color-border-interactive-secondary-flair-base: var(--lp-color-purple-600);
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-700);
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-800);
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-800);
--lp-color-text-interactive-flair-base: var(--lp-color-purple-700);
--lp-color-text-interactive-flair-hover: var(--lp-color-purple-800);
--lp-color-text-interactive-flair-focus: var(--lp-color-purple-900);
--lp-color-text-interactive-flair-active: var(--lp-color-purple-900);
--lp-color-bg-interactive-tertiary-flair-base: transparent;
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-100);
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-300);
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-300);
}

[data-theme='dark'] {
--lp-component-button-color-bg-default: transparent;
--lp-component-button-color-border-destructive: var(--lp-color-system-red-600);
--lp-component-button-color-bg-destructive-hover: var(--lp-color-system-red-900);
--lp-component-button-color-bg-destructive-focus: var(--lp-color-system-red-900);
--lp-component-button-color-bg-destructive-active: var(--lp-color-system-red-900);
--lp-component-button-color-border-destructive: var(--lp-color-red-600);
--lp-component-button-color-bg-destructive-hover: var(--lp-color-red-900);
--lp-component-button-color-bg-destructive-focus: var(--lp-color-red-900);
--lp-component-button-color-bg-destructive-active: var(--lp-color-red-900);
--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-600);
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-700);
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-950);
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-900);
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-950);
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-950);
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-500);
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-700);
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-700);
--lp-color-text-interactive-flair-base: var(--lp-color-purple-400);
--lp-color-text-interactive-flair-hover: var(--lp-color-purple-400);
--lp-color-text-interactive-flair-focus: var(--lp-color-purple-400);
--lp-color-text-interactive-flair-active: var(--lp-color-purple-400);
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-900);
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-950);
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-950);
}

.Button,
Expand Down
4 changes: 2 additions & 2 deletions packages/chip/src/styles/Chip.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
}

.warning {
background-color: var(--lp-color-bg-feedback-warning);
color: var(--lp-color-text-feedback-warning);
background-color: var(--lp-color-brand-yellow-light);
color: var(--lp-color-brand-orange-dark);
}

.error {
Expand Down
2 changes: 1 addition & 1 deletion packages/clipboard/src/styles/CopyToClipboard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.Clipboard-checkmark {
fill: var(--lp-color-system-green-500);
fill: var(--lp-color-green-500);
}

.Clipboard-confirmation {
Expand Down
2 changes: 1 addition & 1 deletion packages/modal/src/styles/Modal.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

.headerIcon {
transform: translateY(2px);
fill: var(--lp-color-fill-feedback-warning);
fill: var(--lp-color-brand-yellow-dark);
}

.headerMain {
Expand Down
10 changes: 5 additions & 5 deletions packages/progress-bubbles/src/styles/ProgressBubbles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
}

.ProgressBubbles--filled {
background-color: var(--lp-color-system-green-600);
background-color: var(--lp-color-green-600);
}

.ProgressBubbles--vertical {
Expand All @@ -73,7 +73,7 @@
}

.ProgressBubblesUsingItems-line--completed {
background-color: var(--lp-color-system-green-700);
background-color: var(--lp-color-green-700);
}

.ProgressBubblesIconContainer {
Expand All @@ -88,7 +88,7 @@

.ProgressBubbles-icon {
align-items: center;
background-color: var(--lp-color-system-green-700);
background-color: var(--lp-color-green-700);
border-radius: 50%;
border: var(--lp-border-width-300) solid transparent;
display: flex;
Expand All @@ -101,7 +101,7 @@
}

div.ProgressBubbles-icon--current {
border: var(--lp-border-width-300) solid var(--lp-color-system-green-700);
border: var(--lp-border-width-300) solid var(--lp-color-green-700);
background-color: var(--lp-color-bg-ui-primary);
}

Expand All @@ -116,7 +116,7 @@ div.ProgressBubbles-icon--current {
}

div.ProgressBubbles-icon--current svg {
fill: var(--lp-color-system-green-700);
fill: var(--lp-color-green-700);
}

div.ProgressBubbles-icon--pending {
Expand Down
2 changes: 1 addition & 1 deletion packages/tag/src/styles/Tag.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ a.tag,
}

[data-theme='dark'] & {
color: var(--lp-color-cyan-400);
color: var(--lp-color-brand-cyan-base);
background-color: hsla(190.1 90.2% 60% / 0.2);
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/tooltip/src/styles/Tooltip.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
:root,
[data-theme='default'] {
--lp-component-popover-color-bg: var(--lp-color-bg-overlay-secondary);
--lp-component-popover-color-bg: var(--lp-color-gray-950);
--lp-component-popover-color-text: var(--lp-color-text-overlay-secondary);
--lp-component-popover-color-border: inherit;
}

[data-theme='dark'] {
--lp-component-popover-color-bg: var(--lp-color-bg-overlay-primary);
--lp-component-popover-color-bg: var(--lp-color-gray-950);
--lp-component-popover-color-text: var(--lp-color-text-ui-primary-base);
--lp-component-popover-color-border: var(--lp-color-border-ui-secondary);
--lp-component-popover-color-border: var(--lp-color-border-ui-primary);
}

.Tooltip {
Expand Down

0 comments on commit dc4a3a1

Please sign in to comment.