diff --git a/packages/uui-css/lib/uui-text.css b/packages/uui-css/lib/uui-text.css index 5f567d47c..82e9e5b1f 100644 --- a/packages/uui-css/lib/uui-text.css +++ b/packages/uui-css/lib/uui-text.css @@ -104,10 +104,10 @@ .uui-text a:link, .uui-text a:active { - color: var(--uui-color-space-cadet); + color: var(--uui-color-interactive); } .uui-text a:hover { - color: var(--uui-color-violet-blue); + color: var(--uui-color-interactive-emphasis); } .uui-text small { diff --git a/packages/uui-table/lib/uui-table-cell.element.ts b/packages/uui-table/lib/uui-table-cell.element.ts index b52627054..16d34eeea 100644 --- a/packages/uui-table/lib/uui-table-cell.element.ts +++ b/packages/uui-table/lib/uui-table-cell.element.ts @@ -14,6 +14,7 @@ export class UUITableCellElement extends LitElement { static styles = [ css` :host { + position: relative; display: table-cell; height: var(--uui-table-cell-height, var(--uui-size-12)); padding: var( diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts index 70808247a..cd45faa05 100644 --- a/packages/uui-table/lib/uui-table-row.element.ts +++ b/packages/uui-table/lib/uui-table-row.element.ts @@ -23,24 +23,47 @@ export class UUITableRowElement extends SelectOnlyMixin( :host { display: table-row; position: relative; + outline-offset: -3px; } :host([selectable]) { cursor: pointer; } + :host(:focus) { + outline: calc(2px * var(--uui-show-focus-outline, 1)) solid + var(--uui-color-focus); + } :host([selected]) { outline: 2px solid var(--uui-table-row-color-selected, var(--uui-color-selected)); - outline-offset: -3px; } - - :host(:focus) { + :host([selected]:focus) { outline-color: var(--uui-color-focus); } `, ]; + constructor() { + super(); + + // hide outline if mouse-interaction: + let hadMouseDown = false; + this.addEventListener('blur', () => { + if (hadMouseDown === false) { + this.style.setProperty('--uui-show-focus-outline', '1'); + } + hadMouseDown = false; + }); + this.addEventListener('mousedown', () => { + this.style.setProperty('--uui-show-focus-outline', '0'); + hadMouseDown = true; + }); + this.addEventListener('mouseup', () => { + hadMouseDown = false; + }); + } + connectedCallback() { super.connectedCallback(); this.setAttribute('role', 'row');