update pagination with new color look system

Author: nielslyngsoe

packages/uui-pagination/lib/uui-pagination.element.ts

@@ -34,8 +34,6 @@ export class UUIPaginationElement extends LitElement {
         --uui-button-border-color: var(--uui-color-border-standalone);
         --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);
         --uui-button-border-color-disabled: var(--uui-color-border-standalone);
-        --uui-button-background-color-hover: transparent;
-        --uui-button-contrast-hover: var(--uui-color-default-emphasis);
       }
 
       .page {
@@ -238,6 +236,7 @@ export class UUIPaginationElement extends LitElement {
   protected renderFirst() {
     return html`<uui-button
       compact
+      look="outline"
       class="nav"
       role="listitem"
       label="Go to first page"
@@ -250,6 +249,7 @@ export class UUIPaginationElement extends LitElement {
   protected renderPrevious() {
     return html`<uui-button
       compact
+      look="outline"
       class="nav"
       role="listitem"
       label="Go to previous page"
@@ -262,6 +262,7 @@ export class UUIPaginationElement extends LitElement {
   protected renderNext() {
     return html`<uui-button
       compact
+      look="outline"
       role="listitem"
       class="nav"
       label="Go to next page"
@@ -275,6 +276,7 @@ export class UUIPaginationElement extends LitElement {
     return html`
       <uui-button
         compact
+        look="outline"
         role="listitem"
         class="nav"
         label="Go to last page"
@@ -288,6 +290,7 @@ export class UUIPaginationElement extends LitElement {
   protected renderDots() {
     return html`<uui-button
       compact
+      look="outline"
       tabindex="-1"
       class="dots"
       label="More pages"
@@ -298,6 +301,7 @@ export class UUIPaginationElement extends LitElement {
   protected renderPage(page: number) {
     return html`<uui-button
       compact
+      look="outline"
       role="listitem"
       label="Go to page ${page}"
       class=${'page' + (page === this._current ? ' active' : '')}

packages/uui-pagination/lib/uui-pagination.story.ts

@@ -25,11 +25,9 @@ export default {
 
 export const AAAOverview: Story = props => html`
   <h4>
-    Resize the orange container to see how the number of pagination buttons
-    changes.
+    Resize the container to see how the number of pagination buttons changes.
   </h4>
-  <div
-    style="resize: horizontal; overflow: hidden; padding: 2em; border: 1px solid orange">
+  <div style="resize: horizontal; overflow: hidden; padding: 6px;">
     <uui-pagination
       .total=${props.total}
       .current=${props.current}></uui-pagination>