updated alert

NVE · Dec 14, 2023 · 1c6f36f · 1c6f36f
1 parent 0da4538
commit 1c6f36f
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 106 deletions.
diff --git a/src/components/nve-alert/nve-alert.styles.ts b/src/components/nve-alert/nve-alert.styles.ts
@@ -1,127 +1,135 @@
 import { css } from 'lit';
 
 export default css`
-.alert {
-  display: flex;
-  padding: var(--spacing-medium, 1rem) var(--spacing-large, 1.5rem);
-  align-items: center;
-  gap: var(--spacing-medium, 1rem);
-  border: none;
-  border-radius: var(--border-radius-small, 0.25rem);
-  color: var(--neutrals-foreground-primary);
-
-  .alert__message {
-    flex-grow:1;
+  /* have to use class cause icon button also has base part that got impacted */
+  .alert {
+    display: flex;
+    padding: var(--spacing-medium, 1rem) var(--spacing-large, 1.5rem);
+    align-items: center;
+    border: none;
+    border-radius: var(--border-radius-small, 0.25rem);
+    color: var(--neutrals-foreground-primary);
+  }
+  :host::part(message) {
+    flex-grow: 1;
     display: flex;
     padding: 0;
     align-items: center;
-    gap: var(--spacing-x-small, 0.5rem);
+    margin-left: var(--spacing-x-small, 0.5rem);
+    gap: var(--spacing-medium, 1rem);
   }
-  .alert__icon {
+  :host::part(--sl-input-icon-color-hover) {
     font-size: 24px;
     font-weight: 300;
     padding-inline-start: unset;
     display: flex;
-    align-items:center;
+    align-items: center;
     gap: var(--spacing-medium, 1rem);
     color: var(--neutrals-foreground-primary);
   }
-  .alert__close-button {
-      padding-inline-end: unset;
+
+  :host::part(icon) {
+    font: var(--header-small);
+    color: var(--neutrals-foreground-primary) !important;
+    padding-inline-start: unset;
+  }
+
+  :host::part(close-button) {
+    padding-inline-end: unset;
+    margin-left: var(--spacing-medium, 1rem);
+    height: 24px;
+    stroke: var(--neutrals-foreground-primary);
   }
-}
-.alert__message::after {
-  content: var(--nve-alert-text);
-  font: var(--body-medium-default);
-}
 
-.alert__message::before{
-  content: var(--nve-alert-title);
-  font: var(--header-small);
-  font-weight: 600;
-  white-space: nowrap;
-}
-.alert::part(message) {
-  margin:0;
-}
-.alert--primary {
-  background-color: var(--feedback-background-default-info);
-}
-.alert--danger {
-  background-color: var(--feedback-background-default-error);
-}
-.alert--success {
-  background-color: var(--feedback-background-subtle-success);
-}
-.alert--neutral {
-  background-color: var(--neutrals-foreground-subtle);
-  color: var(--interactive-primary-foreground-default);
-} 
-.alert--warning {
-  background-color: var(--feedback-background-default-warning);
-}
+  :host::part(message)::after {
+    content: var(--nve-alert-text);
+    font: var(--body-medium-default);
+  }
 
-/* emphasized */
-:host([variant="neutral"]) .alert,
-:host([emphasized]) .alert {
-  color: var(--interactive-primary-foreground-default);
-  .alert__icon,
-  .alert__close-button {
+  :host::part(message)::before {
+    content: var(--nve-alert-title);
+    font: var(--header-small);
+    white-space: nowrap;
+  }
+  .alert--primary {
+    background-color: var(--feedback-background-default-info);
+  }
+  .alert--danger {
+    background-color: var(--feedback-background-default-error);
+  }
+  .alert--success {
+    background-color: var(--feedback-background-subtle-success);
+  }
+  .alert--neutral {
+    background-color: var(--neutrals-foreground-subtle);
     color: var(--interactive-primary-foreground-default);
   }
-}
-:host([emphasized]) .alert--primary {
-  background-color: var(--feedback-background-emphasized-info);
-}
-:host([emphasized]) .alert--danger {
-  background-color: var(--feedback-background-emphasized-error);
-}
-:host([emphasized]) .alert--success {
-  background-color: var(--feedback-background-emphasized-success);
-}
-:host([emphasized]) .alert--neutral {
-  background-color: var(--neutrals-foreground-primary);
-}
-:host([emphasized]) .alert--warning {
-  background-color: var(--feedback-background-emphasized-warning);
-}
+  .alert--warning {
+    background-color: var(--feedback-background-default-warning);
+  }
 
-/* leftStroke */
-:host([leftStroke][emphasized]) .alert,
-:host([leftStroke]) .alert {
-  border-left: 6px solid;
-}
-:host([leftStroke]) .alert--primary {
-  border-color: var(--feedback-background-emphasized-info);
-}
-:host([leftStroke]) .alert--danger {
-  border-color: var(--feedback-background-emphasized-error);
-}
-:host([leftStroke]) .alert--success {
-  border-color: var(--feedback-background-emphasized-success);
-}
-:host([leftStroke]) .alert--neutral {
-  border-color: var(--neutrals-foreground-primary);
-}
-:host([leftStroke]) .alert--warning {
-  border-color: var(--feedback-background-emphasized-warning);
-}
+  /* emphasized */
+  :host([variant='neutral']) .alert,
+  :host([emphasized]) .alert {
+    color: var(--interactive-primary-foreground-default);
+    .alert__icon {
+      color: var(--interactive-primary-foreground-default) !important;
+    }
+    .alert__close-button {
+      stroke: var(--interactive-primary-foreground-default) !important;
+    }
+  }
+  :host([emphasized]) .alert--primary {
+    background-color: var(--feedback-background-emphasized-info);
+  }
+  :host([emphasized]) .alert--danger {
+    background-color: var(--feedback-background-emphasized-error);
+  }
+  :host([emphasized]) .alert--success {
+    background-color: var(--feedback-background-emphasized-success);
+  }
+  :host([emphasized]) .alert--neutral {
+    background-color: var(--neutrals-foreground-primary);
+  }
+  :host([emphasized]) .alert--warning {
+    background-color: var(--feedback-background-emphasized-warning);
+  }
 
-/* leftStroke and emphasized */
-:host([leftStroke][emphasized]) .alert--primary {
-  border-color: var(--feedback-background-default-info);
-}
-:host([leftStroke][emphasized]) .alert--danger {
-  border-color: var(--feedback-background-default-error);
-}
-:host([leftStroke][emphasized]) .alert--success {
-  border-color: var(--feedback-background-subtle-success);
-}
-:host([leftStroke][emphasized]) .alert--neutral {
-  border-color: var(--neutrals-foreground-subtle);
-}
-:host([leftStroke][emphasized]) .alert--warning {
-  border-color: var(--feedback-background-default-warning);
-}
+  /* leftStroke */
+  :host([leftStroke][emphasized]) .alert,
+  :host([leftStroke]) .alert {
+    border-left: 6px solid;
+  }
+  :host([leftStroke]) .alert--primary {
+    border-color: var(--feedback-background-emphasized-info);
+  }
+  :host([leftStroke]) .alert--danger {
+    border-color: var(--feedback-background-emphasized-error);
+  }
+  :host([leftStroke]) .alert--success {
+    border-color: var(--feedback-background-emphasized-success);
+  }
+  :host([leftStroke]) .alert--neutral {
+    border-color: var(--neutrals-foreground-primary);
+  }
+  :host([leftStroke]) .alert--warning {
+    border-color: var(--feedback-background-emphasized-warning);
+  }
 
-`;
+  /* leftStroke and emphasized */
+  :host([leftStroke][emphasized]) .alert--primary {
+    border-color: var(--feedback-background-default-info);
+  }
+  :host([leftStroke][emphasized]) .alert--danger {
+    border-color: var(--feedback-background-default-error);
+  }
+  :host([leftStroke][emphasized]) .alert--success {
+    border-color: var(--feedback-background-subtle-success);
+  }
+  :host([leftStroke][emphasized]) .alert--neutral {
+    border-color: var(--neutrals-foreground-subtle);
+  }
+  :host([leftStroke][emphasized]) .alert--warning {
+    border-color: var(--feedback-background-default-warning);
+  }
+`;
diff --git a/src/components/nve-icon/nve-icon.ts b/src/components/nve-icon/nve-icon.ts
@@ -22,6 +22,8 @@ export class NveIcon extends LitElement {
     /* we need it to center the icon */
     :is(span) {
       display: flex;
+      line-height: 24px;
+      font-weight: var(--font-weight-regular);
     }
   `;
   render() {

diff --git a/src/main.ts b/src/main.ts
@@ -3,6 +3,7 @@ import { render } from 'lit';
 import '../build/css/varsom.css';
 import './styles/testsite.css';
 import './styles/global.css';
+import './styles/imports.css';
 
 /* Importer demo-side for hver komponent du vil vise her og sett det i render-funksjonen */
 import nveAlertDemo from './components/nve-alert/nve-alert-demo';

diff --git a/src/styles/imports.css b/src/styles/imports.css
@@ -1,2 +1,2 @@
 @import '@shoelace-style/shoelace/dist/themes/light.css';
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
+@import url('https://fonts.cdnfonts.com/css/source-sans-pro');