From f975d87c5c2823e1f27161e6b6aa76a0d3fafad2 Mon Sep 17 00:00:00 2001 From: monospaced Date: Mon, 8 Jan 2024 14:30:26 +0000 Subject: [PATCH] feat: improve touch, contrast & keyboard a11y --- .../core/components/Button/Button.module.css | 73 ++++++++----- packages/core/components/Button/Button.tsx | 2 +- .../core/components/ComponentList/index.tsx | 4 +- .../ComponentList/styles.module.css | 27 ++++- .../components/DragIcon/styles.module.css | 9 +- .../DraggableComponent/styles.module.css | 29 ++++- .../core/components/Drawer/styles.module.css | 31 ++++-- .../ExternalInput/styles.module.css | 99 ++++++++++++----- .../IconButton/IconButton.module.css | 22 +++- .../fields/ArrayField/styles.module.css | 62 ++++++++--- .../fields/DefaultField/index.tsx | 1 + .../fields/TextareaField/index.tsx | 1 + .../components/InputOrGroup/styles.module.css | 103 +++++++++++++----- packages/core/components/LayerTree/index.tsx | 4 +- .../components/LayerTree/styles.module.css | 35 ++++-- .../components/OutlineList/styles.module.css | 21 +++- .../core/components/SidebarSection/index.tsx | 4 +- .../SidebarSection/styles.module.css | 26 ++++- packages/core/styles/color.css | 2 +- 19 files changed, 403 insertions(+), 152 deletions(-) diff --git a/packages/core/components/Button/Button.module.css b/packages/core/components/Button/Button.module.css index d775489b2..741c42e88 100644 --- a/packages/core/components/Button/Button.module.css +++ b/packages/core/components/Button/Button.module.css @@ -1,7 +1,7 @@ .Button { appearance: none; background: none; - border: none; + border: 1px solid transparent; border-radius: 4px; color: var(--puck-color-white); display: inline-flex; @@ -11,68 +11,83 @@ font-family: var(--puck-font-family); font-size: 14px; font-weight: 400; + box-sizing: border-box; line-height: 1; text-align: center; text-decoration: none; + transition: background-color 50ms ease-in; cursor: pointer; white-space: nowrap; margin: 0; } +.Button:hover, +.Button:active { + transition: none; +} + .Button--medium { - padding-bottom: 8px; - padding-left: 20px; - padding-right: 20px; - padding-top: 8px; + min-height: 34px; + padding-bottom: 7px; + padding-left: 19px; + padding-right: 19px; + padding-top: 7px; } .Button--large { - padding-bottom: 12px; - padding-left: 20px; - padding-right: 20px; - padding-top: 12px; + padding-bottom: 11px; + padding-left: 19px; + padding-right: 19px; + padding-top: 11px; } .Button-icon { margin-top: 2px; } -.Button:hover { - text-decoration: none; +.Button--primary { + background: var(--puck-color-azure-04); } -.Button--primary { - background: var(--puck-color-blue); +.Button:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; } -.Button--primary:hover { - opacity: 0.7; - transition: opacity 50ms ease-in; +@media (hover: hover) and (pointer: fine) { + .Button--primary:hover { + background-color: var(--puck-color-azure-03); + } } -.Button--secondary { - color: currentColor; - border: 1px solid currentColor; +.Button--primary:active { + background-color: var(--puck-color-azure-02); } -.Button--secondary:hover { - background-color: var(--puck-color-grey-11); +.Button--secondary { + border: 1px solid var(--puck-color-grey-01); color: var(--puck-color-black); - opacity: 0.7; } -.Button--flush { - border-radius: 0; +@media (hover: hover) and (pointer: fine) { + .Button--secondary:hover { + background-color: var(--puck-color-azure-12); + } } -.Button--disabled { - background: var(--puck-color-grey-11); - color: var(--puck-color-black); - cursor: not-allowed; +.Button--secondary:active { + background-color: var(--puck-color-azure-11); +} + +.Button--flush { + border-radius: 0; } +.Button--disabled, .Button--disabled:hover { - opacity: 1; + background-color: var(--puck-color-grey-07); + color: var(--puck-color-grey-03); + cursor: not-allowed; } .Button--fullWidth { diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx index 8ae9cb94f..3edc0ca7a 100644 --- a/packages/core/components/Button/Button.tsx +++ b/packages/core/components/Button/Button.tsx @@ -36,7 +36,7 @@ export const Button = ({ useEffect(() => setLoading(loadingProp), [loadingProp]); - const ElementType = href ? "a" : onClick ? "button" : "div"; + const ElementType = href ? "a" : type ? "button" : "span"; const el = ( {title && ( -
setUi({ @@ -62,7 +62,7 @@ const ComponentList = ({
{expanded ? : }
-
+ )}
diff --git a/packages/core/components/ComponentList/styles.module.css b/packages/core/components/ComponentList/styles.module.css index d680fb094..5cbfe7669 100644 --- a/packages/core/components/ComponentList/styles.module.css +++ b/packages/core/components/ComponentList/styles.module.css @@ -15,24 +15,39 @@ } .ComponentList-title { + background-color: transparent; + border: 0; color: var(--puck-color-grey-05); + cursor: pointer; display: flex; + font: inherit; font-size: var(--puck-font-size-xxxs); list-style: none; + margin-bottom: 6px; padding: 8px; text-transform: uppercase; + transition: background-color 50ms ease-in, color 50ms ease-in; gap: 4px; border-radius: 4px; + width: 100%; } -.ComponentList--isExpanded .ComponentList-title { - margin-bottom: 4px; +.ComponentList-title:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; } -.ComponentList-title:hover { - background-color: var(--puck-color-azure-11); - color: var(--puck-color-azure-05); - cursor: pointer; +@media (hover: hover) and (pointer: fine) { + .ComponentList-title:hover { + background-color: var(--puck-color-azure-11); + color: var(--puck-color-azure-04); + transition: none; + } +} + +.ComponentList-title:active { + background-color: var(--puck-color-azure-10); + transition: none; } .ComponentList-titleIcon { diff --git a/packages/core/components/DragIcon/styles.module.css b/packages/core/components/DragIcon/styles.module.css index 46485cf21..1c276239c 100644 --- a/packages/core/components/DragIcon/styles.module.css +++ b/packages/core/components/DragIcon/styles.module.css @@ -1,10 +1,13 @@ .DragIcon { color: var(--puck-color-grey-05); + cursor: grab; padding: 4px; border-radius: 4px; } -.DragIcon:hover { - cursor: grab; - background: var(--puck-color-grey-10); +@media (hover: hover) and (pointer: fine) { + .DragIcon:hover { + color: var(--puck-color-azure-05); + background-color: var(--puck-color-azure-12); + } } diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css index 2c384c902..f2003064d 100644 --- a/packages/core/components/DraggableComponent/styles.module.css +++ b/packages/core/components/DraggableComponent/styles.module.css @@ -3,6 +3,10 @@ pointer-events: auto; } +.DraggableComponent:focus-visible { + outline: 2px solid var(--puck-color-azure-05); +} + .DraggableComponent--isDragging { background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent); outline: 2px var(--puck-color-azure-09) solid !important; @@ -104,6 +108,7 @@ border-radius: 8px; background: var(--puck-color-grey-01); color: var(--puck-color-white); + cursor: grab; display: none; font-family: var(--puck-font-family); gap: 4px; @@ -136,13 +141,29 @@ background: transparent; border: none; color: var(--puck-color-grey-08); + cursor: pointer; padding: 6px 8px; border-radius: 4px; overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + transition: color 50ms ease-in; } -.DraggableComponent-action:hover { - background: var(--puck-color-grey-03); - color: var(--puck-color-azure-06); - cursor: pointer; +.DraggableComponent-action:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: -2px; +} + +@media (hover: hover) and (pointer: fine) { + .DraggableComponent-action:hover { + color: var(--puck-color-azure-06); + transition: none; + } +} + +.DraggableComponent-action:active { + color: var(--puck-color-azure-07); + transition: none; } diff --git a/packages/core/components/Drawer/styles.module.css b/packages/core/components/Drawer/styles.module.css index bf173f9a1..d01a82e4e 100644 --- a/packages/core/components/Drawer/styles.module.css +++ b/packages/core/components/Drawer/styles.module.css @@ -2,14 +2,15 @@ font-family: var(--puck-font-family); } -.DrawerItem:last-of-type .DrawerItem-default .DrawerItem-draggableWrapper { - padding-bottom: 0px; -} - .DrawerItem-default .DrawerItem-draggableWrapper { + /* padding required here to prevent bug when cancelling a drag) */ padding-bottom: 12px; } +.DrawerItem:last-of-type .DrawerItem-default .DrawerItem-draggableWrapper { + padding-bottom: 0; +} + .DrawerItem-draggable { background: var(--puck-color-white); padding: 12px; @@ -20,11 +21,27 @@ justify-content: space-between; align-items: center; cursor: grab; + transition: background-color 50ms ease-in, color 50ms ease-in; +} + +.DrawerItem:focus-visible { + outline: 0; +} + +.Drawer:not(.Drawer--isDraggingFrom) + .DrawerItem:focus-visible + .DrawerItem-draggable { + border-radius: 4px; + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; } -.Drawer:not(.Drawer--isDraggingFrom) .DrawerItem-draggable:hover { - background-color: var(--puck-color-azure-11); - color: var(--puck-color-azure-05); +@media (hover: hover) and (pointer: fine) { + .Drawer:not(.Drawer--isDraggingFrom) .DrawerItem-draggable:hover { + background-color: var(--puck-color-azure-12); + color: var(--puck-color-azure-04); + transition: none; + } } .DrawerItem-name { diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css index 3bf872642..9eaf283cc 100644 --- a/packages/core/components/ExternalInput/styles.module.css +++ b/packages/core/components/ExternalInput/styles.module.css @@ -10,24 +10,18 @@ background-color: var(--puck-color-white); border: 1px solid var(--puck-color-grey-09); border-radius: 4px; - color: var(--puck-color-azure-05); + color: var(--puck-color-azure-04); + cursor: pointer; padding: 12px 16px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; + transition: background-color 50ms ease-in; position: relative; overflow: hidden; flex-grow: 1; } -.ExternalInput-button:hover, -.ExternalInput-detachButton:hover { - cursor: pointer; - background: var(--puck-color-azure-11); - color: var(--puck-color-azure-05); - z-index: 1; -} - .ExternalInput--dataSelected .ExternalInput-button { color: var(--puck-color-grey-03); display: block; @@ -41,14 +35,42 @@ border-bottom-right-radius: 4px; background-color: var(--puck-color-grey-12); color: var(--puck-color-grey-05); + cursor: pointer; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 12px; + position: relative; + transition: background-color 50ms ease-in, color 50ms ease-in; margin-left: -1px; } +.ExternalInput-button:focus-visible, +.ExternalInput-detachButton:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; + z-index: 1; +} + +@media (hover: hover) and (pointer: fine) { + .ExternalInput-button:hover, + .ExternalInput-detachButton:hover { + background: var(--puck-color-azure-12); + transition: none; + } + + .ExternalInput-detachButton:hover { + color: var(--puck-color-azure-04); + } +} + +.ExternalInput-button:active, +.ExternalInput-detachButton:active { + background: var(--puck-color-azure-11); + transition: none; +} + .ExternalInputModal { color: var(--puck-color-black); display: flex; @@ -104,26 +126,28 @@ } .ExternalInputModal-tr:nth-of-type(2n) { - background-color: var(--puck-color-grey-11); + background-color: var(--puck-color-grey-12); } .ExternalInputModal-tr .ExternalInputModal-td:first-of-type { font-weight: 500; } -.ExternalInputModal-tbody .ExternalInputModal-tr:hover { - background: var(--puck-color-grey-12); - color: var(--puck-color-azure-05); - cursor: pointer; - position: relative; - margin-left: -5px; -} +@media (hover: hover) and (pointer: fine) { + .ExternalInputModal-tbody .ExternalInputModal-tr:hover { + background: var(--puck-color-grey-11); + color: var(--puck-color-azure-04); + cursor: pointer; + position: relative; + margin-left: -5px; + } -.ExternalInputModal-tbody - .ExternalInputModal-tr:hover - .ExternalInputModal-td:first-of-type { - border-left: 4px solid var(--puck-color-azure-05); - padding-left: 20px; + .ExternalInputModal-tbody + .ExternalInputModal-tr:hover + .ExternalInputModal-td:first-of-type { + border-left: 4px solid var(--puck-color-azure-04); + padding-left: 20px; + } } .ExternalInputModal-tableWrapper { @@ -177,13 +201,21 @@ border-style: solid; border-color: var(--puck-color-grey-09); border-radius: 4px; + transition: border-color 50ms ease-in; width: 100%; } .ExternalInputModal-search:focus-within { - border-color: var(--puck-color-azure-05); - outline: var(--puck-color-azure-09) 4px solid; - outline-offset: 0; + border-color: var(--puck-color-grey-05); + outline: 2px solid var(--puck-color-azure-05); + transition: none; +} + +@media (hover: hover) and (pointer: fine) { + .ExternalInputModal-search:hover { + border-color: var(--puck-color-grey-05); + transition: none; + } } .ExternalInputModal-searchIcon { @@ -196,6 +228,19 @@ display: flex; justify-content: center; padding: 12px 15px; + transition: color 50ms ease-in; +} + +.ExternalInputModal-search:focus-within .ExternalInputModal-searchIcon { + color: var(--puck-color-grey-04); + transition: none; +} + +@media (hover: hover) and (pointer: fine) { + .ExternalInputModal-search:hover .ExternalInputModal-searchIcon { + color: var(--puck-color-grey-04); + transition: none; + } } .ExternalInputModal-searchIconText { @@ -219,7 +264,5 @@ } .ExternalInputModal-searchInput:focus { - border: none; - outline: none; - box-shadow: none; + outline: 0; } diff --git a/packages/core/components/IconButton/IconButton.module.css b/packages/core/components/IconButton/IconButton.module.css index 0ccf10317..f254c0319 100644 --- a/packages/core/components/IconButton/IconButton.module.css +++ b/packages/core/components/IconButton/IconButton.module.css @@ -4,16 +4,30 @@ border: none; border-radius: 4px; color: currentColor; + cursor: pointer; display: flex; font-family: var(--puck-font-family); justify-content: center; padding: 4px; + transition: background-color 50ms ease-in, color 50ms ease-in; } -.IconButton:hover { - background: var(--puck-color-grey-10); - color: var(--puck-color-blue); - cursor: pointer; +.IconButton:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: -2px; +} + +@media (hover: hover) and (pointer: fine) { + .IconButton:hover { + background: var(--puck-color-azure-12); + color: var(--puck-color-azure-04); + transition: none; + } +} + +.IconButton:active { + background: var(--puck-color-azure-11); + transition: none; } .IconButton-title { diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css index 9b32da161..acab7ca3a 100644 --- a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css +++ b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css @@ -26,6 +26,7 @@ margin: 0; padding: 16px; text-align: left; + transition: background-color 50ms ease-in; } .ArrayField--hasItems > .ArrayField-addButton { @@ -33,9 +34,24 @@ border-top-right-radius: 0; } -.ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:hover { +.ArrayField-addButton:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; + position: relative; +} + +@media (hover: hover) and (pointer: fine) { + .ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:hover { + background: var(--puck-color-azure-12); + color: var(--puck-color-azure-04); + transition: none; + } +} + +.ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:active { background: var(--puck-color-azure-11); - color: var(--puck-color-azure-05); + color: var(--puck-color-azure-04); + transition: none; } /** @@ -62,7 +78,11 @@ } .ArrayFieldItem--isDragging { - box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0; + box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0; +} + +.ArrayFieldItem--isDragging .ArrayFieldItem-summary:active { + background-color: var(--puck-color-white); } .ArrayFieldItem + .ArrayFieldItem { @@ -72,6 +92,7 @@ .ArrayFieldItem-summary { color: var(--puck-color-grey-04); + cursor: pointer; display: flex; align-items: center; gap: 2px; @@ -81,6 +102,7 @@ padding: 12px 15px; position: relative; overflow: hidden; + transition: background-color 50ms ease-in; } .ArrayFieldItem--readOnly > .ArrayFieldItem-summary { @@ -88,20 +110,33 @@ color: var(--puck-color-grey-06); } -.ArrayFieldItem--isExpanded > .ArrayFieldItem-summary { - font-weight: 600; -} - .ArrayFieldItem:first-of-type > .ArrayFieldItem-summary { border-top-left-radius: 4px; border-top-right-radius: 4px; } -.ArrayFieldItem-summary:hover, +.ArrayFieldItem-summary:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; +} + +@media (hover: hover) and (pointer: fine) { + .ArrayFieldItem-summary:hover { + background-color: var(--puck-color-azure-12); + transition: none; + } +} + +.ArrayFieldItem-summary:active { + background-color: var(--puck-color-azure-11); + transition: none; +} + .ArrayFieldItem--isExpanded > .ArrayFieldItem-summary { background: var(--puck-color-azure-11); - cursor: pointer; - color: var(--puck-color-azure-05); + color: var(--puck-color-azure-04); + font-weight: 600; + transition: none; } .ArrayFieldItem-body { @@ -132,12 +167,7 @@ opacity: 0; } +.ArrayFieldItem-summary:focus-within > .ArrayFieldItem-rhs > .ArrayFieldItem-actions, .ArrayFieldItem-summary:hover > .ArrayFieldItem-rhs > .ArrayFieldItem-actions { opacity: 1; } - -.ArrayFieldItem-action:hover { - background: var(--puck-color-grey-10); - border-radius: 4px; - cursor: pointer; -} diff --git a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx index 5f2681d1b..fb90d3f91 100644 --- a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx +++ b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx @@ -39,6 +39,7 @@ export const DefaultField = ({ } }} readOnly={readOnly} + tabIndex={readOnly ? -1 : undefined} id={id} min={field.type === "number" ? field.min : undefined} max={field.type === "number" ? field.max : undefined} diff --git a/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx b/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx index 2cf687264..264b3f743 100644 --- a/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx +++ b/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx @@ -27,6 +27,7 @@ export const TextareaField = ({ value={typeof value === "undefined" ? "" : value} onChange={(e) => onChange(e.currentTarget.value)} readOnly={readOnly} + tabIndex={readOnly ? -1 : undefined} rows={5} /> diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css index 5189ad4de..87650b121 100644 --- a/packages/core/components/InputOrGroup/styles.module.css +++ b/packages/core/components/InputOrGroup/styles.module.css @@ -51,90 +51,133 @@ font-family: inherit; font-size: 14px; padding: 12px 15px; + transition: border-color 50ms ease-in; width: 100%; } select.Input-input { - /* Safari */ - appearance: none; + appearance: none; /* Safari */ background: url("data:image/svg+xml;utf8,") no-repeat; background-size: 12px; background-position: calc(100% - 12px) calc(50% + 3px); background-repeat: no-repeat; background-color: var(--puck-color-white); + cursor: pointer; } -.Input--readOnly > .Input-input, -.Input--readOnly > select.Input-input { - background-color: var(--puck-color-grey-12); - border-color: var(--puck-color-grey-09); - color: var(--puck-color-grey-06); - opacity: 1; +@media (hover: hover) and (pointer: fine) { + .Input:has( > input):hover .Input-input:not([readonly]), + .Input:has( > textarea):hover .Input-input:not([readonly]) { + border-color: var(--puck-color-grey-05); + transition: none; + } + .Input:has( > select):hover .Input-input:not([disabled]) { + background-color: var(--puck-color-azure-12); + background-image: url("data:image/svg+xml;utf8,"); + border-color: var(--puck-color-grey-05); + transition: none; + } } -.Input-input:hover { - border-color: var(--puck-color-neutral-3); +.Input-input:focus { + border-color: var(--puck-color-grey-05); + outline: 2px solid var(--puck-color-azure-05); + transition: none; } -.Input-input:focus { - border-color: var(--puck-color-azure-05); - outline: var(--puck-color-azure-09) 4px solid; - outline-offset: 0; +.Input--readOnly > .Input-input, +.Input--readOnly > select.Input-input { + background-color: var(--puck-color-grey-11); + border-color: var(--puck-color-grey-09); + color: var(--puck-color-grey-04); + cursor: default; + opacity: 1; + outline: 0; + transition: none; } .Input-radioGroupItems { display: flex; - border: 1px solid var(--puck-color-grey-08); + border: 1px solid var(--puck-color-grey-09); border-radius: 4px; flex-wrap: wrap; - overflow: hidden; } .Input-radio { - border-right: 1px solid var(--puck-color-grey-08); + border-right: 1px solid var(--puck-color-grey-09); flex-grow: 1; } +.Input-radio:first-of-type { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} + +.Input-radio:first-of-type .Input-radioInner { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} + .Input-radio:last-of-type { - border-right: none; + border-bottom-right-radius: 4px; + border-right: 0; + border-top-right-radius: 4px; +} + +.Input-radio:last-of-type .Input-radioInner { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; } .Input-radioInner { background-color: var(--puck-color-white); - color: var(--puck-color-grey-05); + color: var(--puck-color-grey-04); + cursor: pointer; font-size: var(--puck-font-size-xxxs); padding: 8px 12px; text-align: center; + transition: background-color 50ms ease-in; } -.Input-radioInner:hover { - background-color: var(--puck-color-azure-11); - cursor: pointer; +.Input-radio:has(:focus-visible) { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; + position: relative; } -.Input--readOnly .Input-radioGroupItems { - border-color: var(--puck-color-grey-09); +@media (hover: hover) and (pointer: fine) { + .Input-radioInner:hover { + background-color: var(--puck-color-azure-12); + transition: none; + } } .Input--readOnly .Input-radioInner { - background-color: var(--puck-color-grey-12); - color: var(--puck-color-grey-06); + background-color: var(--puck-color-white); + color: var(--puck-color-grey-04); + cursor: default; } .Input-radio .Input-radioInput:checked ~ .Input-radioInner { background-color: var(--puck-color-azure-11); - color: var(--puck-color-grey-02); + color: var(--puck-color-azure-04); font-weight: 500; } .Input--readOnly .Input-radioInput:checked ~ .Input-radioInner { - background-color: var(--puck-color-azure-11); - color: var(--puck-color-grey-05); + background-color: var(--puck-color-grey-11); + color: var(--puck-color-grey-04); } .Input-radio .Input-radioInput { - display: none; + clip: rect(0 0 0 0); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; } textarea.Input-input { diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx index 4a213c24e..774a413fd 100644 --- a/packages/core/components/LayerTree/index.tsx +++ b/packages/core/components/LayerTree/index.tsx @@ -80,7 +80,7 @@ export const LayerTree = ({ key={`${item.props.id}_${i}`} >
-
{ if (isSelected) { @@ -130,7 +130,7 @@ export const LayerTree = ({
{item.type}
-
+ {containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => ( diff --git a/packages/core/components/LayerTree/styles.module.css b/packages/core/components/LayerTree/styles.module.css index 98f9145c5..870cd9b4c 100644 --- a/packages/core/components/LayerTree/styles.module.css +++ b/packages/core/components/LayerTree/styles.module.css @@ -23,12 +23,13 @@ .Layer { position: relative; border: 1px solid transparent; + border-radius: 4px; } .Layer-inner { - padding-left: 12px; - padding-right: 4px; + border: 1px solid transparent; border-radius: 4px; + transition: color 50ms ease-in; } .Layer--containsZone > .Layer-inner { @@ -37,28 +38,40 @@ .Layer-clickable { align-items: center; + background: none; + border: 0; + border-radius: 4px; + color: inherit; + cursor: pointer; display: flex; + font: inherit; + padding-left: 12px; + padding-right: 4px; + width: 100%; } -.Layer-inner:hover { - cursor: pointer; +.Layer-clickable:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; + position: relative; + z-index: 1; } -.Layer:not(.Layer--isSelected) > .Layer-inner:hover, -.Layer--isHovering > .Layer-inner { - color: var(--puck-color-blue); - background: var(--puck-color-azure-10); +@media (hover: hover) and (pointer: fine) { + .Layer:not(.Layer--isSelected) > .Layer-inner:hover { + border-color: var(--puck-color-azure-10); + background: var(--puck-color-azure-11); + color: var(--puck-color-azure-04); + transition: none; + } } .Layer--isSelected { - background: var(--puck-color-azure-11); border-color: var(--puck-color-azure-08); - border-radius: 4px; } .Layer--isSelected > .Layer-inner { background: var(--puck-color-azure-10); - font-weight: 600; } .Layer--isSelected > .Layer-inner > .Layer-clickable > .Layer-chevron, diff --git a/packages/core/components/OutlineList/styles.module.css b/packages/core/components/OutlineList/styles.module.css index 441e9d984..0e2093350 100644 --- a/packages/core/components/OutlineList/styles.module.css +++ b/packages/core/components/OutlineList/styles.module.css @@ -32,9 +32,26 @@ content: ""; } -.OutlineListItem--clickable:hover { - color: var(--puck-color-blue); +.OutlineListItem--clickable { cursor: pointer; + transition: color 50ms ease-in; +} + +.OutlineListItem--clickable:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; +} + +@media (hover: hover) and (pointer: fine) { + .OutlineListItem--clickable:hover { + color: var(--puck-color-azure-04); + transition: none; + } +} + +.OutlineListItem--clickable:active { + color: var(--puck-color-azure-03); + transition: none; } .OutlineListItem > .OutlineList { diff --git a/packages/core/components/SidebarSection/index.tsx b/packages/core/components/SidebarSection/index.tsx index 18a59fe06..1ed18c617 100644 --- a/packages/core/components/SidebarSection/index.tsx +++ b/packages/core/components/SidebarSection/index.tsx @@ -39,12 +39,12 @@ export const SidebarSection = ({ {showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => (
-
setUi({ itemSelector: breadcrumb.selector })} > {breadcrumb.label} -
+
)) diff --git a/packages/core/components/SidebarSection/styles.module.css b/packages/core/components/SidebarSection/styles.module.css index 12f07d6c5..16decb5f3 100644 --- a/packages/core/components/SidebarSection/styles.module.css +++ b/packages/core/components/SidebarSection/styles.module.css @@ -39,14 +39,32 @@ } .SidebarSection-breadcrumbLabel { + background: none; + border: 0; + border-radius: 2px; color: var(--puck-color-azure-04); + cursor: pointer; + font: inherit; flex-shrink: 0; + padding: 0; + transition: color 50ms ease-in; } -.SidebarSection-breadcrumbLabel:hover { - color: var(--puck-color-azure-05); - cursor: pointer; - text-decoration: underline; +.SidebarSection-breadcrumbLabel:focus-visible { + outline: 2px solid var(--puck-color-azure-05); + outline-offset: 2px; +} + +@media (hover: hover) and (pointer: fine) { + .SidebarSection-breadcrumbLabel:hover { + color: var(--puck-color-azure-03); + transition: none; + } +} + +.SidebarSection-breadcrumbLabel:active { + color: var(--puck-color-azure-02); + transition: none; } .SidebarSection-breadcrumbs { diff --git a/packages/core/styles/color.css b/packages/core/styles/color.css index 6eb3266da..96cf30112 100644 --- a/packages/core/styles/color.css +++ b/packages/core/styles/color.css @@ -1,5 +1,5 @@ :root { - /* + /* * Color palette */