Skip to content

Rask.Ui no longer matches Flux UI #1260

Open
Open
Rask.Ui no longer matches Flux UI#1260

Description

@github-actions
github-actions
bot
opened on Oct 28, 2026

Rask.Ui and Flux UI's live docs, measured side by side on the runner, now differ (https://github.com/pal-tamas/rask/actions/runs/41299011980):

parity-all: 15 of 134 checks differ from Flux:

== chart
FAIL light sparkline#0 — 20 difference(s)
       table[0] > thead[0] > tr[0] > th[0]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[1]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[2]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[3]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[0]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[1]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[2]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[3]: position: static vs relative
       table[0] > tbody[1] > tr[1] > td[0]: position: static vs relative
       table[0] > tbody[1] > tr[1] > td[1]: position: static vs relative
       table[0] > tbody[1] > tr[1] > td[2]: position: static vs relative

== parity-date.mjs date-picker --refresh
FAIL dark #0 — 4 difference(s)
       control[0] > button[0] > svg[2]: color: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
       control[0] > button[0] > svg[2]: fill: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
       control[0] > button[0] > svg[2] > path[0]: color: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
       control[0] > button[0] > svg[2] > path[0]: fill: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)

== parity-date.mjs datetime-picker --refresh
FAIL light open-to#0 — 95 difference(s)
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > div[0] > div[0]: text "December 2026" vs "November 2026"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0]: opacity: 0.5 vs 1
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0]: size 17.45x20 vs 5.81x20
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0]: offset 20.3,144 vs 26.1,144
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "29" vs "1"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: size 17.45x20 vs 5.81x20
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: offset 20.3,144 vs 26.1,144
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1]: opacity: 0.5 vs 1
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1] > ui-tooltip[0] > button[0] > div[0]: size 17.83x20 vs 8.64x20
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1] > ui-tooltip[0] > button[0] > div[0]: offset 60.1,144 vs 64.7,144
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "30" vs "2"

== parity-phone.mjs --refresh --view 390x844
FAIL light country-order#0 (3) — 4 difference(s)
       phone > div[0] > ui-select[0] > button[0] > svg[2]: color: oklab(0.705 0.00415142 -0.0144141 / 0.75) vs oklch(0.274 0.006 286.033)
       phone > div[0] > ui-select[0] > button[0] > svg[2]: fill: oklab(0.705 0.00415142 -0.0144141 / 0.75) vs oklch(0.274 0.006 286.033)
       phone > div[0] > ui-select[0] > button[0] > svg[2] > path[0]: color: oklab(0.705 0.00415142 -0.0144141 / 0.75) vs oklch(0.274 0.006 286.033)
       phone > div[0] > ui-select[0] > button[0] > svg[2] > path[0]: fill: oklab(0.705 0.00415142 -0.0144141 / 0.75) vs oklch(0.274 0.006 286.033)
FAIL dark (intro)#0 (0) — 4 difference(s)
       phone > div[0] > ui-select[0] > button[0] > svg[2]: color: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
       phone > div[0] > ui-select[0] > button[0] > svg[2]: fill: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
       phone > div[0] > ui-select[0] > button[0] > svg[2] > path[0]: color: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
       phone > div[0] > ui-select[0] > button[0] > svg[2] > path[0]: fill: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)
FAIL dark sizes#0 (5) — 4 difference(s)
       phone > div[0] > ui-select[0] > button[0] > svg[2]: color: oklab(0.999994 0.0000455677 0.0000200868 / 0.6) vs rgb(255, 255, 255)

== parity-pillbox.mjs --refresh --view 390x844
FAIL light (intro)#0 (0) — 5 difference(s)
       pillbox > ui-pillbox-trigger[0] > svg[1]: color: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)
       pillbox > ui-pillbox-trigger[0] > svg[1]: fill: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)
       pillbox > ui-pillbox-trigger[0] > svg[1] > path[0]: color: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)
       pillbox > ui-pillbox-trigger[0] > svg[1] > path[0]: fill: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)
       pillbox > ui-options[1] > ui-option[2]: backgroundColor: rgba(0, 0, 0, 0) vs oklch(0.967 0.001 286.375)
FAIL light small#0 (1) — 1 difference(s)
       pillbox > ui-options[1] > ui-option[2]: backgroundColor: rgba(0, 0, 0, 0) vs oklch(0.967 0.001 286.375)
FAIL light searchable#0 (2) — 5 difference(s)
       pillbox > ui-pillbox-trigger[0] > svg[1]: color: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)
       pillbox > ui-pillbox-trigger[0] > svg[1]: fill: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)
       pillbox > ui-pillbox-trigger[0] > svg[1] > path[0]: color: oklch(0.871 0.006 286.286) vs oklch(0.274 0.006 286.033)

== parity-popover.mjs --refresh
FAIL popover lands as Flux's, 1920x1080 #8 — 19 places, 5 differ
       at the right edge: x=1723..1915 y=565..888 vs x=1627..1915 y=565..780
       in the bottom right corner: x=1723..1915 y=707..1030 vs x=1627..1915 y=815..1030
       in the top right corner: x=1723..1915 y=115..438 vs x=1627..1915 y=115..330
       its right edge 3 px inside the viewport's: x=1629..1905 y=565..780 vs x=1627..1915 y=565..780
       its right edge 6 px past the viewport's: x=1638..1905 y=565..780 vs x=1500.8..1788.8 y=565..780

== parity-popover.mjs --refresh --view 390x844
FAIL a tap opens it — 19 steps, 4 differ
       click       Flux: open   · focus on the trigger · aria-expanded=true · page locked · scrolled 0
       wheel       Flux: open   · focus on the trigger · aria-expanded=true · page locked · scrolled 0
                   Rask: closed · focus on the trigger · aria-expanded=false · page free · scrolled 0
       clickpanel  Flux: open   · focus on the panel · aria-expanded=true · page locked · scrolled 0
                   Rask: closed · focus elsewhere · aria-expanded=false · page free · scrolled 0
       Tab         Flux: open   · focus inside the panel · aria-expanded=true · page locked · scrolled 0
                   Rask: closed · focus elsewhere · aria-expanded=false · page free · scrolled 0
       Escape      Flux: closed · focus on the trigger · aria-expanded=false · page free · scrolled 0
                   Rask: closed · focus elsewhere · aria-expanded=false · page free · scrolled 0
       click       Flux: open   · focus on the trigger · aria-expanded=true · page locked · scrolled 0
       click       Flux: closed · focus on the trigger · aria-expanded=false · page free · scrolled 0

== parity.mjs card --refresh
FAIL light bleed#1 — 8 difference(s)
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[1]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[1] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[1] > td[1]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[2] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[2] > td[1]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[3] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[3] > td[1]: position: static vs relative
FAIL dark bleed#1 — 8 difference(s)
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[1]: position: static vs relative

== parity.mjs card --refresh --view 390x844
FAIL light bleed#1 — 8 difference(s)
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[1]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[1] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[1] > td[1]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[2] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[2] > td[1]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[3] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[3] > td[1]: position: static vs relative
FAIL dark bleed#1 — 8 difference(s)
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[0]: position: static vs relative
       card[0] > div[1] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[0] > tr[0] > td[1]: position: static vs relative

== parity.mjs datetime-picker --refresh
FAIL light open-to#0 — 41 difference(s)
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > div[0] > div[0]: text "December 2026" vs "November 2026"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0]: opacity: 0.5 vs 1
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "29" vs "1"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1]: opacity: 0.5 vs 1
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "30" vs "2"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[2] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "1" vs "3"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[3] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "2" vs "4"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[4] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "3" vs "5"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[5] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "4" vs "6"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[6] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "5" vs "7"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[1] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "6" vs "8"

== parity.mjs datetime-picker --refresh --view 390x844
FAIL light open-to#0 — 41 difference(s)
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > div[0] > div[0]: text "December 2026" vs "November 2026"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0]: opacity: 0.5 vs 1
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "29" vs "1"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1]: opacity: 0.5 vs 1
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[1] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "30" vs "2"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[2] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "1" vs "3"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[3] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "2" vs "4"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[4] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "3" vs "5"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[5] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "4" vs "6"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[0] > td[6] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "5" vs "7"
       control[0] > dialog[1] > div[1] > ui-calendar[0] > ui-calendar-months[1] > div[0] > table[1] > tbody[1] > tr[1] > td[0] > ui-tooltip[0] > button[0] > div[0] > div[1]: text "6" vs "8"

== parity.mjs skeleton --refresh
FAIL light examples#0 — 24 difference(s)
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[0]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[1]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[2]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[3]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[0]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[1]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[2]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[3]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[1] > td[0]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[1] > td[1]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[1] > td[2]: position: static vs relative

== parity.mjs skeleton --refresh --view 390x844
FAIL light examples#0 — 24 difference(s)
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[0]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[1]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[2]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > thead[0] > tr[0] > th[3]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[0]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[1]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[2]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[0] > td[3]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[1] > td[0]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[1] > td[1]: position: static vs relative
       skeleton-group[0] > div[0] > ui-table-scroll-area[0] > table[0] > tbody[1] > tr[1] > td[2]: position: static vs relative

== parity.mjs table --refresh
FAIL light #0 — 30 difference(s)
       table[0] > thead[0] > tr[0] > th[0]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[1]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[2]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[3]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[4]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[0]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[1]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[2]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[3]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[4]: position: static vs relative
       table[0] > tbody[1] > tr[1] > td[0]: position: static vs relative

== parity.mjs table --refresh --view 390x844
FAIL light #0 — 30 difference(s)
       table[0] > thead[0] > tr[0] > th[0]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[1]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[2]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[3]: position: static vs relative
       table[0] > thead[0] > tr[0] > th[4]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[0]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[1]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[2]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[3]: position: static vs relative
       table[0] > tbody[1] > tr[0] > td[4]: position: static vs relative
       table[0] > tbody[1] > tr[1] > td[0]: position: static vs relative

Every check is one script of scripts/flux/ — run the one named above with --refresh --all to see
each difference, and match the component the Flux way (flux-component skill). The measurements of both
pages are in the run's flux-parity artifact.

Opened by .github/workflows/upstream.yml, which updates this issue rather than opening another, and closes it when Rask.Ui matches Flux UI again.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions