Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: add bg color options #76

Merged
merged 2 commits into from Mar 27, 2023
Merged

fix: add bg color options #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db7f439
fix: add bg color options
AnnaRybkina Mar 27, 2023
5dd8808
fix: update tests
AnnaRybkina Mar 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/_rules/color.js
View file
Open in desktop
Expand Up @@ -12,4 +12,7 @@ export const textColors = [
export const bgColors = [
['bg', { 'background-color': 'var(--w-background-color)' }],
['bg-subtle', { 'background-color': 'var(--w-background-color-subtle)' }],
['bg-inherit', { 'background-color': 'inherit' }],
['bg-transparent', { 'background-color': 'transparent' }],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the tokens color palette there is a variable called transparent. I am all for removing that variable... but if we should keep it then we should use it here as well I guess? 😄
For ref: https://github.com/warp-ds/tokens/pull/18/files#r1149240542

['bg-current', { 'background-color': 'currentColor' }],
];
5 changes: 4 additions & 1 deletion test/__snapshots__/color.js.snap
View file
Open in desktop
Expand Up @@ -3,7 +3,10 @@
exports[`bg colors 1`] = `
"/* layer: default */
.bg{background-color:var(--w-background-color);}
.bg-subtle{background-color:var(--w-background-color-subtle);}"
.bg-subtle{background-color:var(--w-background-color-subtle);}
.bg-inherit{background-color:inherit;}
.bg-transparent{background-color:transparent;}
.bg-current{background-color:currentColor;}"
`;

exports[`opacity by theme 1`] = `
Expand Down
2 changes: 1 addition & 1 deletion test/background.js
View file
Open in desktop
Expand Up @@ -47,7 +47,7 @@ test('bg clip', async ({ uno }) => {
});

test('bg invalid', async ({ uno }) => {
const classes = ['bg-transparent', 'bg-white', 'bg-current', 'bg-none'];
const classes = ['bg-white', 'bg-none'];
const { css } = await uno.generate(classes);
expect(css).toMatchInlineSnapshot('""');
});
7 changes: 6 additions & 1 deletion test/color.js
View file
Open in desktop
Expand Up @@ -34,7 +34,12 @@ test('text color invalid class', async({ uno }) => {
});

test('bg colors', async({ uno }) => {
const classes = ['bg' , 'bg-subtle'];
const classes = [
'bg',
'bg-subtle',
'bg-inherit',
'bg-transparent',
'bg-current'];

const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
Expand Down