Skip to content

Commit

Permalink
refactor(tokens)!: update color primitives and aliases for product re…
Browse files Browse the repository at this point in the history
…fresh (#1029)

* feat(tokens)!: update color primitives

* feat(tokens): update color aliases

* chore: add changeset

* fix: add opacity to aliases

* feat: test wcag 2.2

* feat(tokens): add new aliases

* refactor: update button styles

* chore: update tokens story

* refactor: simplify contract
  • Loading branch information
Niznikr authored Oct 10, 2023
1 parent e48d0df commit 00bee44
Show file tree
Hide file tree
Showing 13 changed files with 352 additions and 308 deletions.
5 changes: 5 additions & 0 deletions .changeset/cyan-donkeys-change.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@launchpad-ui/tokens': minor
---

[Tokens] Update color primitives and aliases for product refresh
1 change: 1 addition & 0 deletions packages/button/src/styles/Button.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
background-color: var(--Button-color-background-primary-hover);
color: var(--Button-color-text-primary-hover);
box-shadow: var(--Button-box-shadow-hover);
border-color: var(--Button-color-border-primary-hover);
}

.Button--icon.Button--primary {
Expand Down
6 changes: 3 additions & 3 deletions packages/button/src/styles/ButtonVariables.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@
--Button-color-border-primary-hover: var(--lp-color-border-interactive-primary-hover);
--Button-color-border-primary-focus: var(--lp-color-border-interactive-primary-focus);
--Button-color-border-primary-active: var(--lp-color-border-interactive-primary-active);
--Button-color-text-primary: var(--lp-color-text-interactive-primary);
--Button-color-text-primary-hover: var(--lp-color-text-interactive-primary);
--Button-color-text-primary: var(--lp-color-text-interactive-primary-base);
--Button-color-text-primary-hover: var(--lp-color-text-interactive-primary-hover);

/* PRIMARY WITH ICON */
--Button-color-background-primary-withIcon: var(--lp-color-bg-interactive-primary-base);
--Button-color-border-primary-withIcon: var(--lp-color-border-interactive-primary-base);
--Button-color-text-primary-withIcon: var(--lp-color-text-interactive-primary);
--Button-color-text-primary-withIcon: var(--lp-color-text-interactive-primary-base);

/* ------- DESTRUCTIVE ------- */
--Button-color-background-destructive: transparent;
Expand Down
69 changes: 16 additions & 53 deletions packages/chip/src/styles/Chip.module.css
Original file line number Diff line number Diff line change
@@ -1,40 +1,3 @@
:root,
[data-theme='default'] {
--lp-component-chip-color-bg-info: var(--lp-color-blue-200);
--lp-component-chip-color-text-info: var(--lp-color-blue-600);
--lp-component-chip-color-bg-warning: var(--lp-color-system-yellow-200);
--lp-component-chip-color-text-warning: var(--lp-color-system-yellow-900);
--lp-component-chip-color-bg-error: var(--lp-color-system-red-200);
--lp-component-chip-color-text-error: var(--lp-color-system-red-700);
--lp-component-chip-color-bg-success: var(--lp-color-system-green-200);
--lp-component-chip-color-text-success: var(--lp-color-system-green-900);
--lp-component-chip-color-bg-beta: var(--lp-color-purple-200);
--lp-component-chip-color-text-beta: var(--lp-color-purple-600);
--lp-component-chip-color-bg-federal: var(--lp-color-yellow-500);
--lp-component-chip-color-text-federal: var(--lp-color-black-0);
--lp-component-chip-color-bg-default: var(--lp-color-gray-100);
--lp-component-chip-color-text-default: var(--lp-color-gray-800);
}

[data-theme='dark'] {
--lp-component-chip-color-bg-info: #212647;
--lp-component-chip-color-text-info: var(--lp-color-blue-300);
--lp-component-chip-color-bg-warning: #3c351f;
--lp-component-chip-color-text-warning: var(--lp-color-system-yellow-500);
--lp-component-chip-color-bg-error: hsl(0 59% 49% / 0.2);
--lp-component-chip-color-text-error: var(--lp-color-system-red-400);
--lp-component-chip-color-bg-success: #143929;
--lp-component-chip-color-text-success: var(--lp-color-system-green-500);
--lp-component-chip-color-bg-label: var(--lp-color-black-100);
--lp-component-chip-color-text-label: var(--lp-color-gray-100);
--lp-component-chip-color-bg-beta: #30213a;
--lp-component-chip-color-text-beta: var(--lp-color-purple-400);
--lp-component-chip-color-bg-federal: #43471e;
--lp-component-chip-color-text-federal: var(--lp-color-yellow-500);
--lp-component-chip-color-bg-default: var(--lp-color-gray-900);
--lp-component-chip-color-text-default: var(--lp-color-gray-100);
}

.chip {
display: inline-flex;
align-items: center;
Expand All @@ -44,8 +7,8 @@
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: var(--lp-component-chip-color-text-default);
background-color: var(--lp-component-chip-color-bg-default);
color: var(--lp-color-text-ui-secondary);
background-color: var(--lp-color-bg-ui-secondary);
transition: all 0.1s ease-in-out;
}

Expand All @@ -64,38 +27,38 @@
}

.info {
background-color: var(--lp-component-chip-color-bg-info);
color: var(--lp-component-chip-color-text-info);
background-color: var(--lp-color-bg-feedback-info);
color: var(--lp-color-text-feedback-info);
}

.new {
background-color: var(--lp-component-chip-color-bg-success);
color: var(--lp-component-chip-color-text-success);
background-color: var(--lp-color-bg-feedback-success);
color: var(--lp-color-text-feedback-success);
}

.beta {
background-color: var(--lp-component-chip-color-bg-beta);
color: var(--lp-component-chip-color-text-beta);
background-color: var(--lp-color-bg-product-beta);
color: var(--lp-color-text-product-beta);
}

.success {
background-color: var(--lp-component-chip-color-bg-success);
color: var(--lp-component-chip-color-text-success);
background-color: var(--lp-color-bg-feedback-success);
color: var(--lp-color-text-feedback-success);
}

.warning {
background-color: var(--lp-component-chip-color-bg-warning);
color: var(--lp-component-chip-color-text-warning);
background-color: var(--lp-color-bg-feedback-warning);
color: var(--lp-color-text-feedback-warning);
}

.error {
background-color: var(--lp-component-chip-color-bg-error);
color: var(--lp-component-chip-color-text-error);
background-color: var(--lp-color-bg-feedback-error);
color: var(--lp-color-text-feedback-error);
}

.federal {
background-color: var(--lp-component-chip-color-bg-federal);
color: var(--lp-component-chip-color-text-federal);
background-color: var(--lp-color-bg-product-federal);
color: var(--lp-color-text-product-federal);
}

.clickable:hover {
Expand Down
1 change: 1 addition & 0 deletions packages/drawer/stories/Drawer.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export const WithTooltip: Story = {
rules: {
// @fixme
'duplicate-id-aria': { enabled: false },
'target-size': { enabled: false },
},
},
},
Expand Down
5 changes: 4 additions & 1 deletion packages/modal/stories/Modal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export const KitchenSink: Story = {
<ModalHeader
title={
<>
Heading <Icon name="click-metric" size="small" />
Heading <Icon name="click" size="small" />
</>
}
description={
Expand Down Expand Up @@ -431,6 +431,7 @@ export const WithForm: Story = {
// @fixme
'duplicate-id-aria': { enabled: false },
'duplicate-id': { enabled: false },
'target-size': { enabled: false },
},
},
},
Expand Down Expand Up @@ -482,6 +483,7 @@ export const WithAbsolutelyPositionedFooter: Story = {
rules: {
// @fixme
'duplicate-id-aria': { enabled: false },
'target-size': { enabled: false },
},
},
},
Expand Down Expand Up @@ -525,6 +527,7 @@ export const WithTooltip: Story = {
rules: {
// @fixme
'duplicate-id-aria': { enabled: false },
'target-size': { enabled: false },
},
},
},
Expand Down
3 changes: 2 additions & 1 deletion packages/tag/src/Tag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ const Tag = <T extends object>(props: TagProps<T>) => {
isFocusVisible && styles.isFocusVisible,
isHovered && styles.isHovered,
!allowsRemoving && styles.isReadOnly,
onClick && styles.isInteractive
onClick && styles.isInteractive,
allowsRemoving && styles.removable
);

const tag = (
Expand Down
36 changes: 8 additions & 28 deletions packages/tag/src/styles/Tag.module.css
Original file line number Diff line number Diff line change
@@ -1,22 +1,6 @@
:root,
[data-theme='default'] {
--lp-component-tag-color-bg-readonly: var(--lp-color-gray-100);
--lp-component-tag-color-bg-readonly-link: var(--lp-color-blue-200);
--lp-component-tag-color-text-readonly-link: var(--lp-color-blue-600);
--lp-component-tag-color-border: var(--lp-color-gray-600);
}

[data-theme='dark'] {
--lp-component-tag-color-bg-readonly: var(--lp-color-gray-900);
--lp-component-tag-color-bg-readonly-link: var(--lp-color-blue-300);
--lp-component-tag-color-text-readonly-link: var(--lp-color-blue-600);
--lp-component-tag-color-border: var(--lp-color-gray-500);
}

.tag {
background-color: var(--lp-color-bg-ui-secondary);
color: var(--lp-color-text-ui-secondary);
border: 1px solid var(--lp-component-tag-color-border);
border-radius: var(--lp-border-radius-regular);
max-width: 100%;
font-weight: var(--lp-font-weight-medium);
Expand Down Expand Up @@ -44,8 +28,8 @@

a.tag,
.tag.isInteractive {
background-color: var(--lp-component-tag-color-bg-readonly-link);
color: var(--lp-component-tag-color-text-readonly-link);
background-color: var(--lp-color-bg-interactive-link);
color: var(--lp-color-text-interactive-base);
text-decoration: none;
cursor: pointer;

Expand All @@ -62,19 +46,11 @@ a.tag,

.isFocusVisible {
outline: none;
box-shadow: 0 0 0 2px var(--lp-color-bg-ui-primary),
box-shadow:
0 0 0 2px var(--lp-color-bg-ui-primary),
0 0 0 4px var(--lp-color-shadow-interactive-focus);
}

.isHovered {
/* background-color: var(--lp-color-bg-ui-tertiary); */
}

.isReadOnly {
background-color: var(--lp-component-tag-color-bg-readonly);
border-color: var(--lp-component-tag-color-bg-readonly);
}

.tagCell {
display: flex;
align-items: center;
Expand Down Expand Up @@ -138,3 +114,7 @@ a.tag,
margin-bottom: 0.2rem;
}
}

.removable {
border: 1px solid var(--lp-color-border-interactive-secondary-base);
}
71 changes: 15 additions & 56 deletions packages/tokens/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ import StyleDictionary from 'style-dictionary-utils';
import Color from 'tinycolor2';
import yaml from 'yaml';

type NullableTokens = {
[key: string]: string | NullableTokens | null;
};

StyleDictionary.registerFormat({
name: 'custom/format/custom-media',
formatter({ dictionary }) {
Expand Down Expand Up @@ -35,13 +31,6 @@ StyleDictionary.registerFormat({
},
});

StyleDictionary.registerFormat({
name: 'json/nested/contract',
formatter({ dictionary }) {
return JSON.stringify(minifyDictionary(dictionary.tokens), null, 2) + '\n';
},
});

StyleDictionary.registerFormat({
name: 'typescript/accurate-module-declarations',
formatter({ dictionary }) {
Expand All @@ -63,14 +52,23 @@ StyleDictionary.registerTransform({
},
});

StyleDictionary.registerTransform({
type: 'value',
transitive: true,
name: 'value/path',
transformer: (token) => {
return token.name;
},
});

const myStyleDictionary = StyleDictionary.extend({
parsers: [
{
pattern: /\.yaml$/,
parse: ({ contents }) => yaml.parse(contents),
},
],
source: [`src/**/*.yaml`],
source: ['src/**/*.yaml'],
platforms: {
css: {
prefix: 'lp',
Expand All @@ -91,15 +89,15 @@ const myStyleDictionary = StyleDictionary.extend({
options: {
outputReferences: true,
},
filter: (token) => token.attributes?.category !== `color`,
filter: (token) => token.attributes?.category !== 'color',
},
{
destination: 'themes.css',
format: 'css/theme-variables',
options: {
outputReferences: true,
},
filter: (token) => token.attributes?.category === `color`,
filter: (token) => token.attributes?.category === 'color',
},
],
},
Expand All @@ -126,64 +124,25 @@ const myStyleDictionary = StyleDictionary.extend({
buildPath: 'dist/',
files: [
{
destination: `media-queries.css`,
destination: 'media-queries.css',
format: 'custom/format/custom-media',
filter: { attributes: { category: 'viewport' } },
},
],
},
json: {
buildPath: 'dist/',
transforms: [
'attribute/cti',
'name/cti/kebab',
'time/seconds',
'content/icon',
'size/rem',
'color/rgb',
],
transforms: ['attribute/cti', 'name/cti/kebab', 'value/path'],
files: [
{
format: 'json/nested/contract',
destination: 'contract.json',
},
{
format: 'json/nested',
destination: 'default.json',
destination: 'contract.json',
},
],
},
},
});

const minifyDictionary = (tokens: StyleDictionary.TransformedTokens) => {
if (typeof tokens !== 'object' || Array.isArray(tokens)) {
return tokens;
}

const dict: NullableTokens = {};

if (Object.prototype.hasOwnProperty.call(tokens, 'value')) {
let variable = '';
const path: StyleDictionary.TransformedToken['path'] = tokens.path.filter(
(item: string) => item !== ' '
);
path.forEach((item, index) => {
variable += item;
variable += index !== path.length - 1 ? '-' : '';
});

return variable;
} else {
for (const name in tokens) {
if (Object.prototype.hasOwnProperty.call(tokens, name)) {
dict[name] = minifyDictionary(tokens[name]);
}
}
}
return dict;
};

const themeTokens = (dictionary: StyleDictionary.Dictionary, theme = '') =>
dictionary.allTokens
.map((token) => {
Expand Down
Loading

0 comments on commit 00bee44

Please sign in to comment.