Skip to content

Commit

Permalink
Merge pull request #177 from Kajabi/style/pl-chip-semantic-tokens
Browse files Browse the repository at this point in the history 
style(chip): update token variables
  • Loading branch information
@pixelflips
pixelflips authored May 1, 2024
2 parents 078018a + 5e05dd6 commit 9554bef
Showing 1 changed file with 86 additions and 90 deletions.
176 changes: 86 additions & 90 deletions libs/core/src/components/pds-chip/pds-chip.scss
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,78 @@
:host {
--background-danger: var(--pine-color-red-100);
--background-danger-dot: var(--pine-color-red-300);
--background-danger-interactive: var(--pine-color-red-200);
--background-neutral: var(--pine-color-neutral-grey-300);
--background-neutral-dot: var(--pine-color-neutral-charcoal-100);
--background-neutral-interactive: var(--pine-color-neutral-grey-400);
--background-info: var(--pine-color-primary-100);
--background-info-dot: var(--pine-color-primary-300);
--background-info-interactive: var(--pine-color-primary-200);
--background-accent: var(--pine-color-purple-100);
--background-accent-dot: var(--pine-color-purple-300);
--background-accent-interactive: var(--pine-color-purple-200);
--background-success: var(--pine-color-green-100);
--background-success-dot: var(--pine-color-green-300);
--background-success-interactive: var(--pine-color-green-200);
--background-warning: var(--pine-color-yellow-100);
--background-warning-dot: var(--pine-color-yellow-300);
--background-warning-interactive: var(--pine-color-yellow-200);
--box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);

--border-radius: var(--pine-border-radius-lg);
--font-size: var(--pine-font-size-body-sm);
--font-size-lg: var(--pine-font-size-body);
--box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
--border-radius: var(--pine-border-radius-200);

--color-background-accent: var(--pine-color-purple-100);
--color-background-accent-dot: var(--pine-color-purple-300);
--color-background-accent-interactive: var(--pine-color-purple-200);
--color-background-danger: var(--pine-color-red-100);
--color-background-danger-dot: var(--pine-color-red-300);
--color-background-danger-interactive: var(--pine-color-red-200);
--color-background-info: var(--pine-color-blue-100);
--color-background-info-dot: var(--pine-color-blue-300);
--color-background-info-interactive: var(--pine-color-blue-200);
--color-background-neutral: var(--pine-color-grey-300);
--color-background-neutral-dot: var(--pine-color-charcoal-100);
--color-background-neutral-interactive: var(--pine-color-grey-400);
--color-background-success: var(--pine-color-green-100);
--color-background-success-dot: var(--pine-color-green-300);
--color-background-success-interactive: var(--pine-color-green-200);
--color-background-warning: var(--pine-color-yellow-100);
--color-background-warning-dot: var(--pine-color-yellow-300);
--color-background-warning-interactive: var(--pine-color-yellow-200);

--font-size-sm: var(--pine-font-size-087);
--font-size-body: var(--pine-font-size-100);
--font-weight: var(--pine-font-weight-medium);
--line-height: var(--pine-line-height-sm);
--padding-block-sm: calc(var(--pine-spacing-xxs) / 2);
--padding-block: var(--pine-spacing-xxs);
--padding-block-lg: 6px;
--padding-inline-sm: calc(var(--pine-spacing-xxs) / 2);
--padding-inline: 10px;
--padding-inline-lg: calc(var(--pine-spacing-md) / 2);
--padding-inline-xl: 14px;
--margin-block-xs: calc(var(--pine-spacing-xxs) / 2);
--margin-inline-sm: calc(var(--pine-spacing-xs) / 2);
--margin-inline-xs: calc(var(--pine-spacing-xxs) / 2);
--margin-inline: 4px;
--margin-inline-lg: var(--pine-spacing-xs);
--margin-inline-xl: calc(var(--pine-spacing-md) / 2);

--dot-size: 4px;
--close-size: 10px;
--close-size-lg: 24px;
--line-height: var(--pine-line-height-100);

--spacing-xxs: calc(var(--pine-spacing-050) / 2);
--spacing-xs: var(--pine-spacing-050);
--spacing-sm: calc(var(--pine-spacing-150) / 2);
--spacing-md: var(--pine-spacing-100);
--spacing-lg: calc(var(--pine-spacing-250) / 2);
--spacing-xl: var(--pine-spacing-150);
--spacing-xxl: calc(var(--pine-spacing-350) / 2);

--sizing-close: 10px;
--sizing-close-lg: 24px;
--sizing-dot: 4px;

align-items: center;
border-radius: var(--border-radius);
display: inline-flex;
font-size: var(--font-size);
font-size: var(--font-size-sm);
font-weight: var(--font-weight);
line-height: var(--line-height);
padding-block: var(--padding-block-sm);
padding-inline: var(--padding-inline);
padding-block: var(--spacing-xs);
padding-inline: var(--spacing-lg);
}

$pds-chip-sentiment: (
accent: var(--background-accent),
danger: var(--background-danger),
info: var(--background-info),
neutral: var(--background-neutral),
success: var(--background-success),
warning: var(--background-warning),
accent: var(--color-background-accent),
danger: var(--color-background-danger),
info: var(--color-background-info),
neutral: var(--color-background-neutral),
success: var(--color-background-success),
warning: var(--color-background-warning),
);

$pds-chip-sentiment-dots: (
accent: var(--background-accent-dot),
danger: var(--background-danger-dot),
info: var(--background-info-dot),
neutral: var(--background-neutral-dot),
success: var(--background-success-dot),
warning: var(--background-warning-dot),
accent: var(--color-background-accent-dot),
danger: var(--color-background-danger-dot),
info: var(--color-background-info-dot),
neutral: var(--color-background-neutral-dot),
success: var(--color-background-success-dot),
warning: var(--color-background-warning-dot),
);

$pds-chip-sentiment-interactive: (
accent: var(--background-accent-interactive),
danger: var(--background-danger-interactive),
info: var(--background-info-interactive),
neutral: var(--background-neutral-interactive),
success: var(--background-success-interactive),
warning: var(--background-warning-interactive),
accent: var(--color-background-accent-interactive),
danger: var(--color-background-danger-interactive),
info: var(--color-background-info-interactive),
neutral: var(--color-background-neutral-interactive),
success: var(--color-background-success-interactive),
warning: var(--color-background-warning-interactive),
);

@each $sentiment, $value in $pds-chip-sentiment {
Expand Down Expand Up @@ -106,10 +102,10 @@ $pds-chip-sentiment-interactive: (
border: 1px solid transparent;
border-radius: 50%;
display: inline-block;
height: var(--dot-size);
margin-block-end: var(--margin-block-xs);
margin-inline-end: var(--margin-inline-sm);
width: var(--dot-size);
height: var(--sizing-dot);
margin-block-end: var(--spacing-xxs);
margin-inline-end: var(--spacing-xs);
width: var(--sizing-dot);
}

// dropdown
Expand All @@ -118,8 +114,8 @@ $pds-chip-sentiment-interactive: (
padding: 0;

.pds-chip__dot {
margin-block-end: 1px;
margin-block-start: var(--margin-block-xs);
margin-block-end: calc(var(--spacing-xxs) / 4);
margin-block-start: var(--spacing-xxs);
}
}

Expand All @@ -131,40 +127,40 @@ $pds-chip-sentiment-interactive: (
border-radius: var(--border-radius);
display: flex;
font-family: inherit;
font-size: var(--font-size);
font-size: var(--font-size-sm);
font-weight: var(--font-weight);
line-height: var(--line-height);
padding-block: var(--padding-block-sm);
padding-inline: var(--padding-inline);
padding-block: var(--spacing-xs);
padding-inline: var(--spacing-lg);

&:focus-visible {
box-shadow: var(--box-shadow-focus);
outline: none;
}

pds-icon {
margin-inline-end: calc(var(--margin-inline-xs) * -1);
margin-inline-start: var(--margin-inline);
margin-inline-end: calc(var(--spacing-xxs) * -1);
margin-inline-start: var(--spacing-xs);
}
}

// tag

:host(.pds-chip--tag) {
padding-block: var(--padding-block-sm);
padding-block: var(--spacing-xxs);
}

.pds-chip__close {
appearance: none;
background: transparent;
border: 0;
border-radius: 50%;
height: var(--close-size);
margin-inline-end: calc(var(--margin-inline-lg) * -1);
margin-inline-start: var(--margin-inline);
padding: var(--close-size);
height: var(--sizing-close);
margin-inline-end: calc(var(--spacing-md) * -1);
margin-inline-start: var(--spacing-xs);
padding: var(--sizing-close);
position: relative;
width: var(--close-size);
width: var(--sizing-close);

pds-icon {
left: 50%;
Expand All @@ -182,31 +178,31 @@ $pds-chip-sentiment-interactive: (
// large

:host(.pds-chip--large) {
font-size: var(--font-size-lg);
padding-block: var(--padding-block-lg);
padding-inline: var(--padding-inline-xl);
font-size: var(--font-size-body);
padding-block: var(--spacing-sm);
padding-inline: var(--spacing-xxl);

&:host(.pds-chip--dropdown) {
padding-block: var(--padding-block);
padding-inline: var(--padding-inline-sm);
padding-block: var(--spacing-xs);
padding-inline: var(--spacing-xxs);

.pds-chip__dot {
margin-block-end: 0;
}
}

.pds-chip__button {
font-size: var(--font-size-lg);
padding-inline: var(--padding-inline-lg)
font-size: var(--font-size-body);
padding-inline: var(--spacing-xl)
}

.pds-chip__close {
height: var(--close-size-lg);
margin-inline-end: calc(var(--margin-inline-xl) * -1);
width: var(--close-size-lg);
height: var(--sizing-close-lg);
margin-inline-end: calc(var(--spacing-xl) * -1);
width: var(--sizing-close-lg);
}

&:host(.pds-chip--tag) {
padding-block: var(--padding-block);
padding-block: var(--spacing-xs);
}
}

0 comments on commit 9554bef

Please sign in to comment.