naming correction

nielslyngsoe · nielslyngsoe · commit 41f72f059c60 · 2022-05-18T16:09:59.000+02:00
diff --git a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts
@@ -22,7 +22,7 @@ export class UUIBreadcrumbItemElement extends LitElement {
         color: currentColor;
       }
       a:hover {
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
       a:focus {
         color: var(--uui-color-focus);
diff --git a/packages/uui-button-group/lib/uui-button-group.story.ts b/packages/uui-button-group/lib/uui-button-group.story.ts
@@ -60,7 +60,7 @@ export const MixedLooksAndColors = () => html`
         <h4>${color}</h4>
         <uui-button-group>
           ${looks.map(
-            look => html`<uui-button color=${color} look=${look}>
+            look => html`<uui-button color=${color as any} look=${look as any}>
               ${look}
             </uui-button>`
           )}
@@ -94,25 +94,21 @@ export const LooksAndColors = () => html`
           look => html`
             <uui-button-group style="margin-bottom: 16px; display: block">
               <uui-button
-                look="outline"
                 label="Button 1"
-                color=${color}
-                look=${look}></uui-button>
+                color=${color as any}
+                look=${look as any}></uui-button>
               <uui-button
-                look="outline"
                 label="Button 2"
-                color=${color}
-                look=${look}></uui-button>
+                color=${color as any}
+                look=${look as any}></uui-button>
               <uui-button
-                look="outline"
                 label="Button 3"
-                color=${color}
-                look=${look}></uui-button>
+                color=${color as any}
+                look=${look as any}></uui-button>
               <uui-button
-                look="danger"
                 label="Button 4"
-                color=${color}
-                look=${look}></uui-button>
+                color=${color as any}
+                look=${look as any}></uui-button>
             </uui-button-group>
           `
         )}
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
@@ -209,7 +209,7 @@ export class UUIButtonElement extends FormControlMixin(
       :host([look='default']:not([disabled]):hover) button {
         background-color: var(
           --uui-button-background-color-hover,
-          var(--uui-color-hover)
+          var(--uui-color-surface-emphasis)
         );
         color: var(--uui-button-contrast-hover, var(--color-standalone));
         border-color: var(--uui-button-border-color-hover, transparent);
@@ -257,7 +257,7 @@ export class UUIButtonElement extends FormControlMixin(
       :host([look='secondary']:hover) button {
         background-color: var(
           --uui-button-background-color-hover,
-          var(--uui-color-hover)
+          var(--uui-color-surface-emphasis)
         );
         color: var(--uui-button-contrast-hover, var(--color-standalone));
         border-color: var(--uui-button-border-color-hover, transparent);
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
@@ -78,7 +78,7 @@ export class UUICardContentNodeElement extends UUICardElement {
 
       #open-part:hover {
         text-decoration: underline;
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
 
       #name {
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -60,7 +60,7 @@ export class UUICardMediaElement extends UUICardElement {
         bottom: 0;
         width: 100%;
         background-color: var(--uui-color-surface);
-        color: var(--uui-color-text);
+        color: var(--uui-color-interactive);
         border: none;
         cursor: pointer;
         border-top: 1px solid var(--uui-color-divider);
@@ -80,7 +80,7 @@ export class UUICardMediaElement extends UUICardElement {
 
       #open-part:hover {
         text-decoration: underline;
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
 
       :host([image]:not([image=''])) #open-part {
diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -85,7 +85,7 @@ export class UUICardUserElement extends UUICardElement {
 
       #open-part:hover {
         text-decoration: underline;
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
     `,
   ];
diff --git a/packages/uui-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
@@ -61,7 +61,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         );
         background-color: var(
           --uui-checkbox-background-color-hover,
-          var(--uui-color-hover)
+          var(--uui-color-surface-emphasis)
         );
       }
       label:focus #ticker {
@@ -71,7 +71,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         );
         background-color: var(
           --uui-checkbox-background-color-focus,
-          var(--uui-color-hover)
+          var(--uui-color-surface-emphasis)
         );
       }
       input:checked:not([disabled]) + #ticker {
diff --git a/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts
@@ -53,8 +53,8 @@ export class UUIComboboxListOptionElement extends SelectableMixin(
       } */
 
       :host(:hover) {
-        background-color: var(--uui-color-hover);
-        color: var(--uui-color-hover-standalone);
+        background-color: var(--uui-color-surface-emphasis);
+        color: var(--uui-color-interactive-emphasis);
       }
 
       :host([disabled]) {
diff --git a/packages/uui-css/lib/custom-properties/colors.css b/packages/uui-css/lib/custom-properties/colors.css
@@ -17,21 +17,24 @@
   --uui-color-disabled-contrast: #b3b3b3;
 
   /* ----- UNIVERSAL -----  */
-  --uui-color-header: #1b264f;
+  --uui-color-header-surface: #1b264f;
+  --uui-color-header-contrast: rgba(255, 255, 255, 0.8);
+  --uui-color-header-contrast-emphasis: white;
 
   --uui-color-focus: #2294ff;
 
-  --uui-color-hover: #f5f5f5;
-  --uui-color-hover-standalone: #2152a3;
-
   /* ----- SURFACE -----  */
   --uui-color-surface: #fff;
   --uui-color-surface-alt: #eeeeee;
+  --uui-color-surface-emphasis: #f5f5f5;
 
   --uui-color-background: #f5f5f5;
 
-  --uui-color-text: #1b264f;
-  --uui-color-text-alt: #1b264fb5;
+  --uui-color-text: var(--uui-palette-black);
+  --uui-color-text-alt: var(--uui-palette-dune-black);
+
+  --uui-color-interactive: #1b264f;
+  --uui-color-interactive-emphasis: #2152a3;
 
   --uui-color-border: #d8d7d9;
   --uui-color-border-standalone: #c2c2c2;
diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -52,13 +52,13 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #caret-button:hover {
-        background-color: var(--uui-color-hover);
+        background-color: var(--uui-color-surface-emphasis);
       }
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #label-button:hover,
       :host(:not([active], [selected])) #menu-item #caret-button:hover {
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
 
       :host([active]) {
@@ -142,7 +142,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         display: flex;
         align-items: center;
         justify-content: center;
-        color: var(--uui-color-text);
+        color: var(--uui-color-interactive);
       }
 
       #label-button-background {
diff --git a/packages/uui-pagination/lib/uui-pagination.element.ts b/packages/uui-pagination/lib/uui-pagination.element.ts
@@ -32,7 +32,7 @@ export class UUIPaginationElement extends LitElement {
 
       uui-button {
         --uui-button-border-color: var(--uui-color-border-standalone);
-        --uui-button-border-color-hover: var(--uui-color-hover-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-primary-emphasis);
diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -59,15 +59,15 @@ export class UUIRefNodeElement extends UUIRefElement {
       }
 
       :host(:not([disabled])) #open-part:hover #icon {
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
       :host(:not([disabled])) #open-part:hover #name {
         font-weight: 700;
         text-decoration: underline;
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
       :host(:not([disabled])) #open-part:hover #detail {
-        color: var(--uui-color-hover-standalone);
+        color: var(--uui-color-interactive-emphasis);
       }
 
       :host([disabled]) #icon {
diff --git a/packages/uui-symbol-file/lib/uui-symbol-file.element.ts b/packages/uui-symbol-file/lib/uui-symbol-file.element.ts
@@ -22,9 +22,7 @@ export class UUISymbolFileElement extends LitElement {
         margin-left: calc(var(--uui-size-3) * -1);
         padding: 0px var(--uui-size-3);
         font-weight: 700;
-        color: var(--uui-color-text);
         background-color: var(--uui-color-surface-alt);
-        /* border: 1px solid var(--uui-color-text); */
         max-width: 100%;
         white-space: nowrap;
         overflow: hidden;
diff --git a/packages/uui-tabs/lib/uui-tab.element.ts b/packages/uui-tabs/lib/uui-tab.element.ts
@@ -17,7 +17,7 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
   static styles = [
     css`
       :host {
-        color: var(--uui-tab-text, var(--uui-color-text));
+        color: var(--uui-tab-text, var(--uui-color-interactive));
         font-family: inherit;
       }
 
diff --git a/packages/uui-tag/lib/uui-tag.element.ts b/packages/uui-tag/lib/uui-tag.element.ts
@@ -21,7 +21,7 @@ export class UUITagElement extends LitElement {
         padding: var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em);
         border-radius: 100px;
         background-color: var(--uui-color-surface-alt);
-        color: var(--uui-color-text);
+        color: var(--uui-color-interactive);
         user-select: none;
       }
 
diff --git a/packages/uui-toggle/lib/uui-toggle.element.ts b/packages/uui-toggle/lib/uui-toggle.element.ts
@@ -66,7 +66,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
         );
         background-color: var(
           --uui-toggle-background-color-hover,
-          var(--uui-color-hover)
+          var(--uui-color-surface-emphasis)
         );
       }
       label:focus #slider {
@@ -76,7 +76,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
         );
         background-color: var(
           --uui-toggle-background-color-focus,
-          var(--uui-color-hover)
+          var(--uui-color-surface-emphasis)
         );
       }
       input:checked ~ #slider {
@@ -102,13 +102,13 @@ export class UUIToggleElement extends UUIBooleanInputElement {
       #icon-check {
         margin-left: -0.5em;
         left: calc(var(--uui-toggle-size) * 0.5);
-        fill: var(--uui-color-text);
+        fill: var(--uui-color-interactive);
       }
 
       #icon-wrong {
         margin-right: -0.5em;
         right: calc(var(--uui-toggle-size) * 0.5);
-        fill: var(--uui-color-text);
+        fill: var(--uui-color-interactive);
       }
       input:checked ~ #slider #icon-check {
         fill: var(--uui-color-selected-contrast);
diff --git a/stories/home/home.story.element.ts b/stories/home/home.story.element.ts
@@ -1,6 +1,5 @@
 import { LitElement, html, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 
 @defineElement('story-home')
@@ -22,11 +21,11 @@ export class UUIBoxElement extends LitElement {
 
       #nav-top-bar {
         display: flex;
-        color: rgb(230, 230, 230);
+        color: var(--uui-color-header-contrast);
         gap: 24px;
         padding: 0 var(--uui-size-4);
         align-items: center;
-        background-color: var(--uui-color-header);
+        background-color: var(--uui-color-header-surface);
         height: 48px;
         width: 100%;
         font-size: 1rem;
@@ -90,6 +89,9 @@ export class UUIBoxElement extends LitElement {
         grid-template-columns: 200px 600px;
         gap: 32px;
       }
+      .editor-property > .label > p {
+        color: var(--uui-color-text-alt);
+      }
       .editor-property uui-input,
       .editor-property uui-textarea {
         width: 100%;
diff --git a/stories/home/home.story.ts b/stories/home/home.story.ts
@@ -8,4 +8,4 @@ export default {
   component: '',
 };
 
-export const Overview: Story = props => html`<story-home></story-home>`;
+export const Overview: Story = () => html`<story-home></story-home>`;
diff --git a/stories/scaffolding/app-header/app-header.example.ts b/stories/scaffolding/app-header/app-header.example.ts
@@ -8,11 +8,16 @@ export class UUIAppHeaderExample extends LitElement {
     UUITextStyles,
     css`
       #appHeader {
-        background-color: var(--uui-look-primary-surface);
+        background-color: var(--uui-color-header-surface);
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 var(--uui-size-space-5);
+
+        --uui-button-contrast: var(--uui-color-header-contrast);
+        --uui-button-contrast-hover: var(--uui-color-header-contrast-emphasis);
+        --uui-button-background-color: transparent;
+        --uui-button-background-color-hover: transparent;
       }
 
       #logo {
@@ -34,13 +39,11 @@ export class UUIAppHeaderExample extends LitElement {
       }
 
       #tabs {
-        color: var(--uui-look-primary-contrast);
         height: 60px;
         font-size: 16px;
-        --uui-tab-text: var(--uui-look-primary-contrast);
-        --uui-tab-text-hover: var(--uui-look-primary-contrast-hover);
-        --uui-tab-text-active: var(--uui-interface-active);
-        --uui-tab-background: var(--uui-look-primary-surface);
+        --uui-tab-text: rgba(255, 255, 255, 0.8);
+        --uui-tab-text-active: var(--uui-color-current);
+        --uui-tab-text-hover: var(--uui-color-current-emphasis);
       }
 
       #tools {
@@ -117,7 +120,7 @@ export class UUIAppHeaderExample extends LitElement {
     return html`
       <uui-icon-registry-essential>
         <div id="appHeader">
-          <uui-button id="logo" look="primary" label="Umbraco" compact>
+          <uui-button id="logo" color="primary" label="Umbraco" compact>
             <img src="/images/umbraco_logomark_white.svg" alt="Umbraco" />
           </uui-button>
 

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export class UUIBreadcrumbItemElement extends LitElement {`
`22`	`22`	`color: currentColor;`
`23`	`23`	`}`
`24`	`24`	`a:hover {`
`25`		`- color: var(--uui-color-hover-standalone);`
	`25`	`+ color: var(--uui-color-interactive-emphasis);`
`26`	`26`	`}`
`27`	`27`	`a:focus {`
`28`	`28`	`color: var(--uui-color-focus);`
Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ export class UUICardContentNodeElement extends UUICardElement {`
`78`	`78`
`79`	`79`	`#open-part:hover {`
`80`	`80`	`text-decoration: underline;`
`81`		`- color: var(--uui-color-hover-standalone);`
	`81`	`+ color: var(--uui-color-interactive-emphasis);`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`#name {`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ export class UUICardUserElement extends UUICardElement {`
`85`	`85`
`86`	`86`	`#open-part:hover {`
`87`	`87`	`text-decoration: underline;`
`88`		`- color: var(--uui-color-hover-standalone);`
	`88`	`+ color: var(--uui-color-interactive-emphasis);`
`89`	`89`	`}`
`90`	`90`	`,
`91`	`91`	`];`
Original file line number	Diff line number	Diff line change
`@@ -53,8 +53,8 @@ export class UUIComboboxListOptionElement extends SelectableMixin(`
`53`	`53`	`} */`
`54`	`54`
`55`	`55`	`:host(:hover) {`
`56`		`- background-color: var(--uui-color-hover);`
`57`		`- color: var(--uui-color-hover-standalone);`
	`56`	`+ background-color: var(--uui-color-surface-emphasis);`
	`57`	`+ color: var(--uui-color-interactive-emphasis);`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`:host([disabled]) {`