From b5d250abceb56558ae249d5e6bea173fe8466836 Mon Sep 17 00:00:00 2001 From: amish1188 Date: Fri, 30 Jan 2026 13:38:55 +0100 Subject: [PATCH] fix(fonts): oppdaterer fonter i forskjellige komponenter -nve-alert -nve-badge -nve-checkbox -nve-message-card -nve-step -nve-tag --- .vscode/extensions.json | 6 +- src/components/nve-alert/nve-alert.styles.ts | 62 ++++++++++++------- src/components/nve-badge/nve-badge.styles.ts | 52 ++++++++-------- .../nve-checkbox/nve-checkbox.styles.ts | 4 +- .../nve-message-card.styles.ts | 41 ++++++------ .../nve-stepper/nve-step/nve-step.styles.ts | 8 +-- src/components/nve-tag/nve-tag.styles.ts | 33 +++++----- 7 files changed, 111 insertions(+), 95 deletions(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index da704e97..a9af27df 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,3 @@ { - "recommendations": [ - "vivaxy.vscode-conventional-commits" - ] -} \ No newline at end of file + "recommendations": ["vivaxy.vscode-conventional-commits", "runem.lit-plugin"] +} diff --git a/src/components/nve-alert/nve-alert.styles.ts b/src/components/nve-alert/nve-alert.styles.ts index 39ed6e60..41dde6cb 100644 --- a/src/components/nve-alert/nve-alert.styles.ts +++ b/src/components/nve-alert/nve-alert.styles.ts @@ -11,7 +11,6 @@ export default css` padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) - var(--left-stroke-width)); border-radius: var(--border-radius-small); - color: var(--color-feedback-foreground-default-info); font: var(--typography-body-medium); border-left: var(--left-stroke-width) solid transparent; } @@ -28,7 +27,9 @@ export default css` border: none; cursor: pointer; margin-left: var(--spacing-x-small); - transition: background 0.3s ease; + transition: + background-color 0.3s ease, + color 0.3s ease; nve-icon { --icon-size: var(--font-size-large); } @@ -57,18 +58,23 @@ export default css` /*variants */ .alert--primary { background-color: var(--color-feedback-background-default-info); + color: var(--color-feedback-foreground-on-bg-subtle-info, #142843); .alert__button:hover { background: var(--color-feedback-background-subtle-info); } } .alert--danger { background-color: var(--color-feedback-background-default-error); + color: var(--color-feedback-foreground-on-bg-subtle-error, #581d1d); + .alert__button:hover { background: var(--color-feedback-background-subtle-error); } } .alert--success { background-color: var(--color-feedback-background-default-success); + color: var(--color-feedback-foreground-on-bg-subtle-success, #122b21); + .alert__button:hover { background: var(--color-feedback-background-subtle-success); } @@ -76,12 +82,15 @@ export default css` .alert--neutral { background-color: var(--color-feedback-background-default-neutral); + color: var(--color-feedback-foreground-on-bg-subtle-neutral, #0d0d0e); .alert__button:hover { background: var(--color-feedback-background-subtle-neutral); } } .alert--warning { background-color: var(--color-feedback-background-default-warning); + color: var(--color-feedback-foreground-on-bg-subtle-warning, #54301c); + .alert__button:hover { background: var(--color-feedback-background-subtle-warning); } @@ -89,40 +98,45 @@ export default css` /* Styling for høyere metningsgrad */ - .alert--emphasized { - color: var(--color-feedback-foreground-emphasized-neutral); - } - .alert--emphasized.alert--primary { background-color: var(--color-feedback-background-emphasized-info); + color: var(--color-feedback-foreground-on-bg-emphasized-info, #fff); + .alert__button:hover { background: var(--color-feedback-background-subtle-info); - color: var(--color-feedback-background-emphasized-info); + color: var(--color-feedback-foreground-on-bg-subtle-info); } } .alert--emphasized.alert--danger { background-color: var(--color-feedback-background-emphasized-error); + color: var(--color-feedback-foreground-on-bg-emphasized-error, #fff); + .alert__button:hover { background: var(--color-feedback-background-subtle-error); - color: var(--color-feedback-background-emphasized-error); + color: var(--color-feedback-foreground-on-bg-subtle-error); } } .alert--emphasized.alert--success { background-color: var(--color-feedback-background-emphasized-success); + color: var(--color-feedback-foreground-on-bg-emphasized-success, #fff); + .alert__button:hover { - background: var(--color-feedback-background-subtle-success); - color: var(--color-feedback-background-emphasized-success); + background: var(--color-feedback-background-default-success); + color: var(--color-feedback-foreground-on-bg-subtle-success,); } } .alert--emphasized.alert--neutral { background-color: var(--color-feedback-background-emphasized-neutral); + color: var(--color-feedback-foreground-on-bg-emphasized-neutral, #fff); + .alert__button:hover { background: var(--color-feedback-background-subtle-neutral); - color: var(--color-feedback-background-emphasized-neutral); + color: var(--color-feedback-foreground-on-bg-subtle-neutral); } } .alert--emphasized.alert--warning { - color: var(--color-feedback-foreground-emphasized-warning); + color: var(--color-feedback-foreground-on-bg-emphasized-warning, #0d0d0e); + background-color: var(--color-feedback-background-emphasized-warning); .alert__icon { color: var(--color-feedback-foreground-emphasized-warning) !important; @@ -130,6 +144,10 @@ export default css` .alert__button { stroke: var(--color-feedback-foreground-emphasized-warning) !important; } + .alert__button:hover { + background: var(--color-feedback-background-subtle-warning); + color: var(--color-feedback-foreground-on-bg-subtle-warning); + } } /* leftStroke */ @@ -137,35 +155,35 @@ export default css` border-left: 6px solid; } .alert--left-stroke.alert--primary { - border-color: var(--color-feedback-background-emphasized-info); + border-color: var(--color-feedback-border-emphasized-info); } .alert--left-stroke.alert--danger { - border-color: var(--color-feedback-background-emphasized-error); + border-color: var(--color-feedback-border-emphasized-error); } .alert--left-stroke.alert--success { - border-color: var(--color-feedback-background-emphasized-success); + border-color: var(--color-feedback-border-emphasized-succ); } .alert--left-stroke.alert--neutral { - border-color: var(--color-feedback-foreground-default-neutral); + border-color: var(--color-feedback-border-emphasized-neutral); } .alert--left-stroke.alert--warning { - border-color: var(--color-feedback-background-emphasized-warning); + border-color: var(--color-feedback-border-emphasized-warning); } /* leftStroke and emphasized */ .alert--left-stroke.alert--emphasized.alert--primary { - border-color: var(--color-feedback-background-default-info); + border-color: var(--color-feedback-border-subtle-info); } .alert--left-stroke.alert--emphasized.alert--danger { - border-color: var(--color-feedback-background-default-error); + border-color: var(--color-feedback-border-subtle-error); } .alert--left-stroke.alert--emphasized.alert--success { - border-color: var(--color-feedback-background-subtle-success); + border-color: var(--color-feedback-border-subtle-success); } .alert--left-stroke.alert--emphasized.alert--neutral { - border-color: var(--color-feedback-background-default-neutral); + border-color: var(--color-feedback-border-subtle-neutral); } .alert--left-stroke.alert--emphasized.alert--warning { - border-color: var(--color-feedback-background-default-warning); + border-color: var(--color-feedback-border-subtle-warning); } `; diff --git a/src/components/nve-badge/nve-badge.styles.ts b/src/components/nve-badge/nve-badge.styles.ts index 784eac55..70d8c789 100644 --- a/src/components/nve-badge/nve-badge.styles.ts +++ b/src/components/nve-badge/nve-badge.styles.ts @@ -16,59 +16,61 @@ export default css` /* Variant modifiers */ .badge--brand { - background-color: var(--color-brand-background-primary); - color: var(--color-interactive-primary-foreground-default); + background-color: var(--color-brand-background-secondary); + color: var(--color-brand-foreground-primary-on-bg); } .badge--neutral { - background-color: var(--color-feedback-background-default-neutral, #e4e5e7); - color: var(--color-feedback-foreground-default-neutral, #00131c); + background-color: var(--color-feedback-background-emphasized-neutral); + color: var(--color-feedback-foreground-on-bg-emphasized-neutral); } .badge--primary { - background-color: var(--color-feedback-background-emphasized-info, #1e6fdc); - color: var(--color-feedback-foreground-emphasized-info, #fff); + background-color: var(--color-feedback-background-emphasized-info); + color: var(--color-feedback-foreground-on-bg-emphasized-info); } .badge--success { - background-color: var(--color-feedback-background-emphasized-success, #00814b); - color: var(--color-feedback-foreground-emphasized-success, #fff); - } - .badge--warning { - background-color: var(--color-feedback-background-emphasized-warning, #ffd046); - color: var(--color-feedback-foreground-emphasized-warning, #0d0d0e); + background-color: var(--color-feedback-background-emphasized-success); + color: var(--color-feedback-foreground-on-bg-emphasized-success); } .badge--danger { - background-color: var(--color-feedback-background-emphasized-error, #c00); - color: var(--color-feedback-foreground-emphasized-error, #fff); + background-color: var(--color-feedback-background-emphasized-error); + color: var(--color-feedback-foreground-on-bg-emphasized-error); } - - /* Lav metningsgrad */ - .saturation--subtle { - color: var(--color-neutrals-foreground-primary, #00131c); + .badge--warning { + background-color: var(--color-feedback-background-emphasized-warning); + color: var(--color-feedback-foreground-on-bg-emphasized-warning); } + /* Lav metningsgrad */ .badge--brand.saturation--subtle { background-color: var(--color-brand-background-tertiary); + color: var(--color-brand-foreground-secondary-on-bg); } .badge--neutral.saturation--subtle { - background-color: var(--color-feedback-background-subtle-neutral, #f7f7f8); + background-color: var(--color-feedback-background-default-neutral); + color: var(--color-feedback-foreground-on-bg-subtle-neutral); } .badge--primary.saturation--subtle { - background-color: var(--color-feedback-background-default-info, #ceeaff); + background-color: var(--color-feedback-background-default-info); + color: var(--color-feedback-foreground-on-bg-subtle-info); } .badge--success.saturation--subtle { - background-color: var(--color-feedback-background-default-success, #cbf9cb); - } - .badge--warning.saturation--subtle { - background-color: var(--color-feedback-background-default-warning, #ffe8a5); + background-color: var(--color-feedback-background-default-success); + color: var(--color-feedback-foreground-on-bg-subtle-success); } .badge--danger.saturation--subtle { - background-color: var(--color-feedback-background-default-error, #ffd8de); + background-color: var(--color-feedback-background-default-error); + color: var(--color-feedback-foreground-on-bg-subtle-error); + } + .badge--warning.saturation--subtle { + background-color: var(--color-feedback-background-default-warning); + color: var(--color-feedback-foreground-on-bg-subtle-warning); } /* Sizing modifiers */ diff --git a/src/components/nve-checkbox/nve-checkbox.styles.ts b/src/components/nve-checkbox/nve-checkbox.styles.ts index d217f2ea..07107ffb 100644 --- a/src/components/nve-checkbox/nve-checkbox.styles.ts +++ b/src/components/nve-checkbox/nve-checkbox.styles.ts @@ -24,7 +24,7 @@ export default css` } :host([data-invalid])::part(control) { - border-color: var(--color-feedback-background-emphasized-error); + border-color: var(--color-feedback-border-emphasized-error); } :host([data-invalid])::part(control control--checked), :host([data-user-invalid])::part(control control--indeterminate) { @@ -32,7 +32,7 @@ export default css` } :host(:not([disabled]):hover)::part(control) { - border-color: var(--color-neutrals-foreground-subtle, #006b99) !important; + border-color: var(--color-neutrals-foreground-subtle) !important; } sl-icon { diff --git a/src/components/nve-message-card/nve-message-card.styles.ts b/src/components/nve-message-card/nve-message-card.styles.ts index 798e8dd5..e207a73c 100644 --- a/src/components/nve-message-card/nve-message-card.styles.ts +++ b/src/components/nve-message-card/nve-message-card.styles.ts @@ -13,7 +13,6 @@ export default css` padding: var(--spacing-large); gap: var(--spacing-small); align-self: stretch; - color: var(--color-neutrals-foreground-primary, #0d0d0e); opacity: 1; transition: opacity 0.3s 0s; } @@ -55,7 +54,7 @@ export default css` justify-content: center; align-items: center; border: none; - background: none; + background-color: none; width: 28px; height: 28px; font-size: unset; @@ -70,44 +69,42 @@ export default css` opacity: 0; } - nve-icon::part(icon) { - display: unset; - font-size: var(--font-size-medium); - line-height: 1; - } - /** Varianter */ .message-card--neutral { - background: var(--color-neutrals-background-primary, #fff); + background-color: var(--color-neutrals-background-primary); + color: var(--color-neutrals-foreground-primary); .message-card__close-btn:hover { background-color: var(--button-hover); } } .message-card--danger { - background: var(--color-feedback-background-default-error); + background-color: var(--color-feedback-background-default-error); + color: var(--color-feedback-foreground-on-bg-subtle-error); .message-card__close-btn:hover { background-color: var(--button-hover); } } .message-card--warning { - background: var(--color-feedback-background-default-warning); + background-color: var(--color-feedback-background-default-warning); + color: var(--color-feedback-foreground-on-bg-subtle-warning); .message-card__close-btn:hover { background-color: var(--button-hover); } } .message-card--success { - background: var(--color-feedback-background-default-success); + background-color: var(--color-feedback-background-default-success); + color: var(--color-feedback-foreground-on-bg-subtle-success); .message-card__close-btn:hover { background-color: var(--button-hover); } } .message-card--primary { - background: var(--color-feedback-background-subtle-info); + background-color: var(--color-feedback-background-subtle-info); .message-card__close-btn:hover { background-color: var(--button-hover); } @@ -116,15 +113,15 @@ export default css` /** Sterkere farger */ :host([saturation='emphasized']) .message-card--neutral { - background: var(--color-neutrals-background-secondary); + background-color: var(--color-neutrals-background-secondary); .message-card__close-btn:hover { background-color: var(--button-hover); } } :host([saturation='emphasized']) .message-card--danger { - color: var(--color-feedback-foreground-emphasized-error); - background: var(--color-feedback-background-emphasized-error); + color: var(--color-feedback-foreground-on-bg-emphasized-error); + background-color: var(--color-feedback-background-emphasized-error); .message-card__close-btn:hover { background-color: var(--color-feedback-background-default-error); color: var(--color-neutrals-foreground-primary); @@ -132,16 +129,16 @@ export default css` } :host([saturation='emphasized']) .message-card--warning { - color: var(--color-feedback-foreground-emphasized-warning); - background: var(--color-feedback-background-emphasized-warning); + color: var(--color-feedback-foreground-on-bg-emphasized-warning); + background-color: var(--color-feedback-background-emphasized-warning); .message-card__close-btn:hover { background-color: var(--color-feedback-background-default-warning); } } :host([saturation='emphasized']) .message-card--success { - color: var(--color-feedback-foreground-emphasized-success); - background: var(--color-feedback-background-emphasized-success); + color: var(--color-feedback-foreground-on-bg-emphasized-success); + background-color: var(--color-feedback-background-emphasized-success); .message-card__close-btn:hover { background-color: var(--color-feedback-background-default-success); color: var(--color-neutrals-foreground-primary); @@ -149,8 +146,8 @@ export default css` } :host([saturation='emphasized']) .message-card--primary { - color: var(--color-feedback-foreground-emphasized-info); - background: var(--color-feedback-background-emphasized-info); + color: var(--color-feedback-foreground-on-bg-emphasized-info); + background-color: var(--color-feedback-background-emphasized-info); .message-card__close-btn:hover { background-color: var(--button-hover); } diff --git a/src/components/nve-stepper/nve-step/nve-step.styles.ts b/src/components/nve-stepper/nve-step/nve-step.styles.ts index 6c471b76..cfe161c1 100644 --- a/src/components/nve-stepper/nve-step/nve-step.styles.ts +++ b/src/components/nve-stepper/nve-step/nve-step.styles.ts @@ -105,19 +105,19 @@ export default css` } .state-not-started-color { - color: var(--color-neutrals-foreground-subtle, #60656c); + color: var(--color-neutrals-foreground-subtle); } .state-started-color { - color: var(--color-feedback-background-emphasized-info, #1e6fdc); + color: var(--color-feedback-foreground-info); } .state-done-color { - color: var(--color-feeedback-foreground-emphasized-success, #00814b); + color: var(--color-feedback-foreground-success); } .state-error-color { - color: var(--color-feedback-background-emphasized-error, #cc0000); + color: var(--color-feedback-foreground-error); } .vertical-container { diff --git a/src/components/nve-tag/nve-tag.styles.ts b/src/components/nve-tag/nve-tag.styles.ts index 6196b0cc..9c1a3565 100644 --- a/src/components/nve-tag/nve-tag.styles.ts +++ b/src/components/nve-tag/nve-tag.styles.ts @@ -16,104 +16,105 @@ export default css` :host([variant='neutral'][saturation='emphasized']) { --_bg-color: var(--color-feedback-background-emphasized-neutral); - --_text-color: var(--color-feedback-foreground-emphasized-neutral); + --_text-color: var(--color-feedback-foreground-on-bg-emphasized-neutral,); --_hover-bg-color: var(--color-feedback-background-default-neutral); --_hover-text-color: var(--color-feedback-foreground-default-neutral); } :host([variant='neutral'][saturation='default']) { --_bg-color: var(--color-feedback-background-default-neutral); - --_text-color: var(--color-feedback-foreground-default-neutral); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-neutral); --_hover-bg-color: var(--color-feedback-background-subtle-neutral); --_hover-text-color: var(--color-feedback-foreground-subtle-neutral); } - color- :host([variant='neutral'][saturation='subtle']) { + + :host([variant='neutral'][saturation='subtle']) { --_bg-color: var(--color-feedback-background-subtle-neutral); - --_text-color: var(--color-feedback-foreground-subtle-neutral); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-neutral); --_hover-bg-color: var(--color-feedback-background-default-neutral); --_hover-text-color: var(--color-feedback-foreground-default-neutral); } :host([variant='success'][saturation='emphasized']) { --_bg-color: var(--color-feedback-background-emphasized-success); - --_text-color: var(--color-feedback-foreground-emphasized-success); + --_text-color: var(--color-feedback-foreground-on-bg-emphasized-success); --_hover-bg-color: var(--color-feedback-background-default-success); --_hover-text-color: var(--color-feedback-foreground-default-success); } :host([variant='success'][saturation='default']) { --_bg-color: var(--color-feedback-background-default-success); - --_text-color: var(--color-feedback-foreground-default-success); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-success); --_hover-bg-color: var(--color-feedback-background-subtle-success); --_hover-text-color: var(--color-feedback-foreground-subtle-success); } :host([variant='success'][saturation='subtle']) { --_bg-color: var(--color-feedback-background-subtle-success); - --_text-color: var(--color-feedback-foreground-subtle-success); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-success); --_hover-bg-color: var(--color-feedback-background-default-success); --_hover-text-color: var(--color-feedback-foreground-default-success); } :host([variant='info'][saturation='emphasized']) { --_bg-color: var(--color-feedback-background-emphasized-info); - --_text-color: var(--color-feedback-foreground-emphasized-info); + --_text-color: var(--color-feedback-foreground-on-bg-emphasized-info); --_hover-bg-color: var(--color-feedback-background-default-info); --_hover-text-color: var(--color-feedback-foreground-default-info); } :host([variant='info'][saturation='default']) { --_bg-color: var(--color-feedback-background-default-info); - --_text-color: var(--color-feedback-foreground-default-info); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-info); --_hover-bg-color: var(--color-feedback-background-subtle-info); --_hover-text-color: var(--color-feedback-foreground-subtle-info); } :host([variant='info'][saturation='subtle']) { --_bg-color: var(--color-feedback-background-subtle-info); - --_text-color: var(--color-feedback-foreground-subtle-info); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-info); --_hover-bg-color: var(--color-feedback-background-default-info); --_hover-text-color: var(--color-feedback-foreground-default-info); } :host([variant='warning'][saturation='emphasized']) { --_bg-color: var(--color-feedback-background-emphasized-warning); - --_text-color: var(--color-feedback-foreground-emphasized-warning); + --_text-color: var(--color-feedback-foreground-on-bg-emphasized-warning); --_hover-bg-color: var(--color-feedback-background-default-warning); --_hover-text-color: var(--color-feedback-foreground-default-warning); } :host([variant='warning'][saturation='default']) { --_bg-color: var(--color-feedback-background-default-warning); - --_text-color: var(--color-feedback-foreground-default-warning); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-warning); --_hover-bg-color: var(--color-feedback-background-subtle-warning); --_hover-text-color: var(--color-feedback-foreground-subtle-warning); } :host([variant='warning'][saturation='subtle']) { --_bg-color: var(--color-feedback-background-subtle-warning); - --_text-color: var(--color-feedback-foreground-subtle-warning); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-warning); --_hover-bg-color: var(--color-feedback-background-default-warning); --_hover-text-color: var(--color-feedback-foreground-default-warning); } :host([variant='error'][saturation='emphasized']) { --_bg-color: var(--color-feedback-background-emphasized-error); - --_text-color: var(--color-feedback-foreground-emphasized-error); + --_text-color: var(--color-feedback-foreground-on-bg-emphasized-error); --_hover-bg-color: var(--color-feedback-background-default-error); --_hover-text-color: var(--color-feedback-foreground-default-error); } :host([variant='error'][saturation='default']) { --_bg-color: var(--color-feedback-background-default-error); - --_text-color: var(--color-feedback-foreground-default-error); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-error); --_hover-bg-color: var(--color-feedback-background-subtle-error); --_hover-text-color: var(--color-feedback-foreground-subtle-error); } :host([variant='error'][saturation='subtle']) { --_bg-color: var(--color-feedback-background-subtle-error); - --_text-color: var(--color-feedback-foreground-subtle-error); + --_text-color: var(--color-feedback-foreground-on-bg-subtle-error); --_hover-bg-color: var(--color-feedback-background-default-error); --_hover-text-color: var(--color-feedback-foreground-default-error); }