Skip to content

Commit

Permalink
feat(ld-select): use up-to-date css custom props
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Nov 3, 2021
1 parent 25b00f1 commit 151edcb
Show file tree
Hide file tree
Showing 10 changed files with 1,133 additions and 5,804 deletions.
6,508 changes: 914 additions & 5,594 deletions screenshot/builds/master.json
View file

Large diffs are not rendered by default.

115 changes: 61 additions & 54 deletions src/liquid/components/ld-checkbox/ld-checkbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,34 @@

/* colors */
--ld-checkbox-col-bg: var(--ld-col-wht);
--ld-checkbox-col-bg-active: var(--ld-col-bg-g);
--ld-checkbox-col-border: var(--ld-col-rblck4);
--ld-checkbox-col-disabled: var(--ld-col-rblck2);
--ld-checkbox-col-bg-disabled: var(--ld-col-rblck1);
--ld-checkbox-dark-col-bg: var(--ld-col-bg-g);
--ld-checkbox-dark-col-bg-hover: var(--ld-col-rblck1);
--ld-checkbox-dark-col-bg-active: var(--ld-col-rblck2);
--ld-checkbox-col-bg-hover: var(--ld-col-neutral-010);
--ld-checkbox-col-bg-active: var(--ld-col-neutral-050);
--ld-checkbox-col-border: var(--ld-col-neutral-400);
--ld-checkbox-col-disabled: var(--ld-col-neutral-200);
--ld-checkbox-col-bg-disabled: var(--ld-col-neutral-100);
--ld-checkbox-dark-col-bg: var(--ld-col-neutral-050);
--ld-checkbox-dark-col-bg-hover: var(--ld-col-neutral-100);
--ld-checkbox-dark-col-bg-active: var(--ld-col-neutral-200);
--ld-checkbox-checked-col: var(--ld-col-wht);
--ld-checkbox-col-invalid: var(--ld-col-rr-default);
--ld-checkbox-col-invalid-hover: var(--ld-col-rr-hover);
--ld-checkbox-col-invalid-focus: var(--ld-col-rr-focus);
--ld-checkbox-col-invalid-active: var(--ld-col-rr-active);
--ld-checkbox-col-warn: var(--ld-col-vy-default);
--ld-checkbox-col-warn-hover: var(--ld-col-vy-hover);
--ld-checkbox-col-warn-focus: var(--ld-col-vy-focus);
--ld-checkbox-col-warn-active: var(--ld-col-vy-active);
--ld-checkbox-checked-col-active: var(--ld-col-wht);

/* themable colors */
--ld-checkbox-thm-col: var(--ld-col-rb-default);
--ld-checkbox-thm-col-hover: var(--ld-col-rb-hover);
--ld-checkbox-thm-col-active: var(--ld-col-rb-active);
--ld-checkbox-thm-col-focus: var(--ld-col-rb-focus);
--ld-checkbox-col-invalid: var(--ld-thm-error);
--ld-checkbox-col-invalid-hover: var(--ld-thm-error-hover);
--ld-checkbox-col-invalid-focus: var(--ld-thm-error-focus);
--ld-checkbox-col-invalid-active: var(--ld-thm-error-active);
--ld-checkbox-col-warn: var(--ld-thm-warning);
--ld-checkbox-col-warn-hover: var(--ld-thm-warning-hover);
--ld-checkbox-col-warn-focus: var(--ld-thm-warning-focus);
--ld-checkbox-col-warn-active: var(--ld-thm-warning-active);
--ld-checkbox-col-warn-checked: var(--ld-thm-warning-active);
--ld-checkbox-col-warn-checked-focus: var(--ld-thm-warning-active);
--ld-checkbox-col-warn-checked-active: var(--ld-thm-warning-hover);
--ld-checkbox-col-bg-warn-checked-active: var(--ld-thm-warning-active);
--ld-checkbox-thm-col: var(--ld-thm-primary);
--ld-checkbox-thm-col-hover: var(--ld-thm-primary-hover);
--ld-checkbox-thm-col-active: var(--ld-thm-primary-active);
--ld-checkbox-thm-col-focus: var(--ld-thm-primary-focus);

position: relative;
display: inline-flex;
Expand Down Expand Up @@ -116,7 +122,7 @@
&:active,
&:active:focus-visible {
~ .ld-checkbox__check {
color: var(--ld-checkbox-col-bg-active);
color: var(--ld-checkbox-checked-col-active);
}
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-thm-col-active);
Expand All @@ -131,50 +137,49 @@
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-col-bg);
}
}

@media (hover: hover) {
&:hover {
:where(input:not(:disabled):not(input[aria-disabled='true']))
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-col-bg);
box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-thm-col-hover);
}

:where(input:not(:disabled):not(input[aria-disabled='true'])):checked {
~ .ld-checkbox__check {
color: var(--ld-checkbox-checked-col);
}
@media (hover: hover) {
&:hover {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-thm-col-hover);
background-color: var(--ld-checkbox-col-bg-hover);
box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-thm-col-hover);
}

&:checked {
~ .ld-checkbox__check {
color: var(--ld-checkbox-checked-col);
}
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-thm-col-hover);
box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-thm-col-hover);
}
}
}
}
}
}

.ld-checkbox.ld-checkbox--dark,
:host(.ld-checkbox.ld-checkbox--dark) {
@media (hover: hover) {
&:hover {
:where(input:not(:disabled):not(input[aria-disabled='true']):not(:checked)) {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-dark-col-bg-hover);
}
:where(input) {
&:not(:disabled):not(input[aria-disabled='true']):not(:checked) {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-dark-col-bg);
}
}
}

input:not(:disabled):not(input[aria-disabled='true']):not(:checked) {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-dark-col-bg);
}
@media (hover: hover) {
&:hover {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-dark-col-bg-hover);
}
}
}

&:active,
&:active:focus-visible {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-dark-col-bg-active);
&:active,
&:active:focus-visible {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-dark-col-bg-active);
}
}
}
}
Expand Down Expand Up @@ -208,8 +213,10 @@
.ld-checkbox--highlight {
--ld-checkbox-thm-col: var(--ld-checkbox-col-warn);
--ld-checkbox-thm-col-hover: var(--ld-checkbox-col-warn-hover);
--ld-checkbox-thm-col-active: var(--ld-checkbox-col-warn-focus);
--ld-checkbox-thm-col-focus: var(--ld-checkbox-col-warn-active);
--ld-checkbox-thm-col-focus: var(--ld-checkbox-col-warn-focus);
--ld-checkbox-thm-col-active: var(--ld-checkbox-col-warn-active);
--ld-checkbox-checked-col: var(--ld-checkbox-col-warn-checked);
--ld-checkbox-checked-col-active: var(--ld-checkbox-col-warn-checked-active);
}

:host(.ld-checkbox--invalid),
Expand All @@ -218,6 +225,6 @@
.ld-checkbox--danger {
--ld-checkbox-thm-col: var(--ld-checkbox-col-invalid);
--ld-checkbox-thm-col-hover: var(--ld-checkbox-col-invalid-hover);
--ld-checkbox-thm-col-active: var(--ld-checkbox-col-invalid-focus);
--ld-checkbox-thm-col-focus: var(--ld-checkbox-col-invalid-active);
--ld-checkbox-thm-col-active: var(--ld-checkbox-col-invalid-active);
--ld-checkbox-thm-col-focus: var(--ld-checkbox-col-invalid-focus);
}
38 changes: 18 additions & 20 deletions src/liquid/components/ld-checkbox/test/ld-checkbox.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ jest.useRealTimers()
const tones = [undefined, 'dark']
const checkedStates = [false, true]

const allowableMismatchedRatio = 0.02

const checkAndBox = `
<svg
class="ld-checkbox__check"
Expand Down Expand Up @@ -40,7 +38,7 @@ describe('ld-checkbox', () => {
`<ld-checkbox tone="${tone}"></ld-checkbox>`
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`hover ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -49,15 +47,15 @@ describe('ld-checkbox', () => {
const checkbox = await page.find('ld-checkbox')
await checkbox.hover()
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`focus ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
`<ld-checkbox tone="${tone}" ${checkedStateStr}></ld-checkbox>`
)
await page.keyboard.press('Tab')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})

// Disabled
Expand All @@ -66,7 +64,7 @@ describe('ld-checkbox', () => {
`<ld-checkbox tone="${tone}" ${checkedStateStr} disabled></ld-checkbox>`
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`disabled hover ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -75,15 +73,15 @@ describe('ld-checkbox', () => {
const checkbox = await page.find('ld-checkbox')
await checkbox.hover()
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`disabled focus ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
`<ld-checkbox tone="${tone}" ${checkedStateStr} disabled></ld-checkbox>`
)
await page.keyboard.press('Tab')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})

// Aria-disabled
Expand All @@ -92,7 +90,7 @@ describe('ld-checkbox', () => {
`<ld-checkbox tone="${tone}" ${checkedStateStr} aria-disabled="true"></ld-checkbox>`
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`aria-disabled hover ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -101,15 +99,15 @@ describe('ld-checkbox', () => {
const checkbox = await page.find('ld-checkbox')
await checkbox.hover()
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`aria-disabled focus ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
`<ld-checkbox tone="${tone}" ${checkedStateStr} aria-disabled="true"></ld-checkbox>`
)
await page.keyboard.press('Tab')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})

// Themed CSS component
Expand All @@ -123,7 +121,7 @@ describe('ld-checkbox', () => {
LdCheckbox
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`css component hover ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -135,7 +133,7 @@ describe('ld-checkbox', () => {
)
await page.hover('.ld-checkbox')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`css component focus ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -147,7 +145,7 @@ describe('ld-checkbox', () => {
)
await page.keyboard.press('Tab')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})

// Disabled CSS component
Expand All @@ -160,7 +158,7 @@ describe('ld-checkbox', () => {
LdCheckbox
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`css component disabled hover ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -172,7 +170,7 @@ describe('ld-checkbox', () => {
)
await page.hover('.ld-checkbox')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`css component disabled focus ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -184,7 +182,7 @@ describe('ld-checkbox', () => {
)
await page.keyboard.press('Tab')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})

// Aria-disabled CSS component
Expand All @@ -197,7 +195,7 @@ describe('ld-checkbox', () => {
LdCheckbox
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`css component aria-disabled hover ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -209,7 +207,7 @@ describe('ld-checkbox', () => {
)
await page.hover('.ld-checkbox')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
it(`css component aria-disabled focus ${checkedStateStr}`, async () => {
const page = await getPageWithContent(
Expand All @@ -221,7 +219,7 @@ describe('ld-checkbox', () => {
)
await page.keyboard.press('Tab')
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot({ allowableMismatchedRatio })
expect(results).toMatchScreenshot()
})
}
})
Expand Down
Loading

0 comments on commit 151edcb

Please sign in to comment.