diff --git a/packages/design-system/generate/generate.ts b/packages/design-system/generate/generate.ts index 6434ae20e..947f1a46f 100644 --- a/packages/design-system/generate/generate.ts +++ b/packages/design-system/generate/generate.ts @@ -1,4 +1,4 @@ -import { colord, extend } from 'colord' +import { extend } from 'colord' import mixPlugin from 'colord/plugins/mix' import fs from 'node:fs' @@ -238,60 +238,6 @@ themes.forEach((themeTokenValues) => { }) }) -// Process hover alpha colors -// All */Hover* styles will blend with */Default -themes.forEach((themeTokenValue) => { - themeTokenValue.forEach((value, token) => { - if (token.toLowerCase().indexOf('hover') >= 0) { - const hoverValue = value.resolved - - if (typeof hoverValue === 'string') { - if (hoverValue.startsWith('#') && hoverValue.length === 9) { - // The color that the hover color with alpha mixes with. - const baseToken = token - .split('/') - .map((tokenPart) => { - if (tokenPart.toLowerCase().indexOf('hover') >= 0) { - return 'Default' - } - return tokenPart - }) - .join('/') - - const baseValue = - themeTokenValue.get(baseToken) ?? - themes.get(FALLBACK_THEME)?.get(baseToken) - if (baseValue) { - if (typeof baseValue.resolved === 'string' && baseValue.resolved) { - const baseColor = colord(baseValue.resolved) - const hoverColor = colord(hoverValue) - - if (baseColor.alpha() > 0 && hoverColor.alpha() > 0) { - const computedHoverValue = baseColor - .mix(hoverColor.alpha(1), hoverColor.alpha()) - .toHex() - - themeTokenValue.set(token, { - // no alias for the computed hover color - resolved: computedHoverValue, - }) - } - } else { - throw new Error( - `Base token ${baseToken} is unresolved: ${baseValue}` - ) - } - } else { - throw new Error( - `Unable to find base token (${baseToken}) for hover token ${token}` - ) - } - } - } - } - }) -}) - // Prepare for output const variablesJsOutput = [ '/* This file is generated, do not edit manually! */', diff --git a/packages/design-system/lib/components/DeprecatedSelect/index.tsx b/packages/design-system/lib/components/DeprecatedSelect/index.tsx index 391e244a1..441eaf612 100644 --- a/packages/design-system/lib/components/DeprecatedSelect/index.tsx +++ b/packages/design-system/lib/components/DeprecatedSelect/index.tsx @@ -16,10 +16,8 @@ import styles from './select.module.css' import Body from '../Body' import { Label } from '../Label' -interface SelectProps extends Omit< - React.SelectHTMLAttributes, - 'onSelect' -> { +interface SelectProps + extends Omit, 'onSelect'> { defaultSelectedKey?: Key items: { label: string; value: Key }[] label: string diff --git a/packages/design-system/lib/styles/downtown-camper.css b/packages/design-system/lib/styles/downtown-camper.css index 14b032ad2..2fa5ed256 100644 --- a/packages/design-system/lib/styles/downtown-camper.css +++ b/packages/design-system/lib/styles/downtown-camper.css @@ -13,17 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #614436; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #9b857b; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c2b4ae; - --Component-Button-Brand-Tertiary-Fill-Hover: #915836; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #4f3021; - --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Downtown-Camper-Body: 'Fira sans'; --Font-family-Downtown-Camper-Decorative: 'Gotham'; --Font-family-Downtown-Camper-Title: 'Gotham'; - --Icon-Interactive-Inverted-Hover: #b5b5b5; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -69,15 +61,9 @@ --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff; --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-1-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #e4e4e4; - --Surface-UI-Fill-Active-Hover: #ffffff; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.06px; --Tag-Text-Transform: none; - --Text-Brand-OnPrimary-1-Hover: #ffffff; - --Text-Interactive-Inverted-Hover: #b5b5b5; --Title-Decorative-lg-Font-fallback: sans-serif; --Title-Decorative-lg-Letter-spacing: 0.05px; --Title-Decorative-lg-Text-Transform: uppercase; @@ -161,6 +147,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-20); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -174,6 +161,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var( --Signature-Downtown-Camper-Russet-90 ); @@ -197,6 +187,9 @@ --Signature-Downtown-Camper-Russet-100 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var( --Signature-Downtown-Camper-Russet-90 ); @@ -218,6 +211,7 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -234,6 +228,7 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Downtown-Camper-Lunar-green-80 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var( --Signature-Downtown-Camper-Russet-100 ); @@ -241,8 +236,10 @@ --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); @@ -265,6 +262,7 @@ --Icon-Interactive-Accent: var(--Signature-Downtown-Camper-Russet-80); --Icon-Interactive-Default: var(--Neutral-90); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -321,9 +319,13 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Neutral-5); --Surface-Secondary-Default: var(--Neutral-10); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Neutral-20); + --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-15); @@ -339,6 +341,7 @@ --Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100); + --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70); --Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100); @@ -357,6 +360,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Neutral-70); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var( --Signature-Downtown-Camper-Russet-60 diff --git a/packages/design-system/lib/styles/downtown-camper.js b/packages/design-system/lib/styles/downtown-camper.js index 42d25083c..5b69d9155 100644 --- a/packages/design-system/lib/styles/downtown-camper.js +++ b/packages/design-system/lib/styles/downtown-camper.js @@ -148,7 +148,7 @@ export const theme = { 'Text/Interactive/Hover': '#454545', 'Text/Interactive/Secondary': '#834722', 'Text/Interactive/Secondary Hover': '#BB7524', - 'Text/Interactive/Inverted Hover': '#b5b5b5', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -164,7 +164,7 @@ export const theme = { 'Text/Brand/OnAccent/Accent Secondary': '#747474', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 1/Default': '#FFFFFF', - 'Text/Brand/OnPrimary 1/Hover': '#ffffff', + 'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3', 'Text/Brand/OnPrimary 1/Accent': '#FFFFFF', 'Text/Brand/OnPrimary 2/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 2/Default': '#FFFFFF', @@ -175,14 +175,14 @@ export const theme = { 'Background/Primary': '#FCFCFC', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#F5F5F5', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#F0F0F0', 'Surface/Secondary/Subtle': '#D9D9D9', - 'Surface/Secondary/Hover': '#e4e4e4', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#3C1D0C', 'Surface/Brand/Accent/OnAccent/Accent': '#FFFFFF', 'Surface/Brand/Accent/OnAccent/Accent Secondary': '#FFFFFF', @@ -196,7 +196,7 @@ export const theme = { 'Surface/UI Fill/Default': '#FFFFFF', 'Surface/UI Fill/Intense': '#262626', 'Surface/UI Fill/Active': '#262626', - 'Surface/UI Fill/Active Hover': '#ffffff', + 'Surface/UI Fill/Active Hover': '#FFFFFF1A', 'Surface/UI Fill/Disabled': '#E9E9E9', 'Surface/Accent/1': '#A96D59', 'Surface/Accent/2': '#3F6DBD', @@ -222,7 +222,7 @@ export const theme = { 'Icon/Interactive/Default': '#1F1F1F', 'Icon/Interactive/Secondary': '#834722', 'Icon/Interactive/Accent': '#834722', - 'Icon/Interactive/Inverted Hover': '#b5b5b5', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -239,7 +239,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#3C1D0C', - 'Component/Button/Brand/Primary/Fill/Hover': '#614436', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF33', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -255,15 +255,15 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#3C1D0C', 'Component/Button/Brand/Secondary/On fill/Hover': '#69391E', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c2b4ae', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#3C1D0C', 'Component/Button/Brand/Secondary/Border/Hover': '#69391E', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#9b857b', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#834722', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#915836', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', @@ -273,14 +273,14 @@ export const theme = { 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#3C4336', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#3C1D0C', - 'Component/Button/Inverted/On fill/Hover': '#4f3021', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -305,6 +305,6 @@ export const theme = { 'Component/Button/Muted/On fill/Hover Inverted': '#9B5622', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/styles/grand-hotel.css b/packages/design-system/lib/styles/grand-hotel.css index 0bafb69a5..41a451460 100644 --- a/packages/design-system/lib/styles/grand-hotel.css +++ b/packages/design-system/lib/styles/grand-hotel.css @@ -13,19 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #34373d; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #878a8d; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b6b7b9; - --Component-Button-Brand-Tertiary-Fill-Hover: #b8cad0; - --Component-Button-Brand-Tertiary-On-fill-Hover: #34373d; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #34373d; - --Component-Button-Muted-Border-Hover: #ffffff30; - --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2; --Font-family-Grand-Hotel-Body: 'Fira sans'; --Font-family-Grand-Hotel-Decorative: 'Canela Deck'; --Font-family-Grand-Hotel-Title: 'Canela Deck'; - --Icon-Interactive-Inverted-Hover: #b6b7b9; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -52,14 +42,9 @@ --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff; --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-1-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #ebeae9; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.24px; --Tag-Text-Transform: uppercase; - --Text-Brand-OnPrimary-1-Hover: #ffffff; - --Text-Interactive-Inverted-Hover: #b6b7b9; --Title-Decorative-lg-Font-fallback: Serif; --Title-Decorative-lg-Letter-spacing: 0.3px; --Title-Decorative-lg-Text-Transform: uppercase; @@ -145,6 +130,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -158,6 +144,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var( --Signature-Grand-Hotel-Blue-Bayoux-80 ); @@ -181,6 +170,9 @@ --Signature-Grand-Hotel-Blue-Bayoux-100 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var( --Signature-Grand-Hotel-Blue-Bayoux-80 ); @@ -202,10 +194,14 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Tertiary-On-fill-Hover: var( + --Neutral-Opacity-White-10 + ); --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10); @@ -215,6 +211,7 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Grand-Hotel-Submarine-30 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); @@ -222,11 +219,14 @@ --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); @@ -245,6 +245,7 @@ --Icon-Interactive-Accent: var(--Signature-Grand-Hotel-Careys-Pink-60); --Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -311,8 +312,11 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0); --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Signature-Grand-Hotel-Cloudy-10); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); @@ -330,6 +334,7 @@ --Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100); + --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70); --Text-Brand-OnPrimary-2-Accent: var(--Neutral-90); --Text-Brand-OnPrimary-2-Default: var(--Neutral-90); --Text-Brand-OnPrimary-2-Heading: var(--Neutral-90); @@ -348,6 +353,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Signature-Grand-Hotel-Blue-Bayoux-80); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var( --Signature-Grand-Hotel-Careys-Pink-50 diff --git a/packages/design-system/lib/styles/grand-hotel.js b/packages/design-system/lib/styles/grand-hotel.js index e79fbab4e..d34cf9a74 100644 --- a/packages/design-system/lib/styles/grand-hotel.js +++ b/packages/design-system/lib/styles/grand-hotel.js @@ -129,7 +129,7 @@ export const theme = { 'Text/Interactive/Hover': '#3D444D', 'Text/Interactive/Secondary': '#AA546B', 'Text/Interactive/Secondary Hover': '#C27183', - 'Text/Interactive/Inverted Hover': '#b6b7b9', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -145,7 +145,7 @@ export const theme = { 'Text/Brand/OnAccent/Accent Secondary': '#747474', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 1/Default': '#FFFFFF', - 'Text/Brand/OnPrimary 1/Hover': '#ffffff', + 'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3', 'Text/Brand/OnPrimary 1/Accent': '#FFFFFF', 'Text/Brand/OnPrimary 2/Heading': '#1F1F1F', 'Text/Brand/OnPrimary 2/Default': '#1F1F1F', @@ -156,14 +156,14 @@ export const theme = { 'Background/Primary': '#FFFFFF', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#F7F6F5', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#F7F6F5', 'Surface/Secondary/Subtle': '#EBEAE9', - 'Surface/Secondary/Hover': '#ebeae9', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#D7D5D1', 'Surface/Brand/Accent/OnAccent/Accent': '#21252B', 'Surface/Brand/Accent/OnAccent/Accent Secondary': '#21252B', @@ -203,7 +203,7 @@ export const theme = { 'Icon/Interactive/Default': '#21252B', 'Icon/Interactive/Secondary': '#AA546B', 'Icon/Interactive/Accent': '#AA546B', - 'Icon/Interactive/Inverted Hover': '#b6b7b9', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -220,7 +220,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#21252B', - 'Component/Button/Brand/Primary/Fill/Hover': '#34373d', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -236,32 +236,32 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#21252B', 'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b6b7b9', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#21252B', 'Component/Button/Brand/Secondary/Border/Hover': '#3D444D', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#878a8d', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#21252B', - 'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d', + 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#B0C4CB', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF1A', 'Component/Button/Inverted/Border/Disable': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Default': '#21252B', - 'Component/Button/Inverted/On fill/Hover': '#34373d', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -279,13 +279,13 @@ export const theme = { 'Component/Button/Muted/Fill/Default': '#FFFFFF', 'Component/Button/Muted/Fill/Hover': '#FFFFFF', 'Component/Button/Muted/Fill/Disabled': '#FFFFFF', - 'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#3D444D', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/styles/haymarket.css b/packages/design-system/lib/styles/haymarket.css index eb2d3cd7f..1bb45dc52 100644 --- a/packages/design-system/lib/styles/haymarket.css +++ b/packages/design-system/lib/styles/haymarket.css @@ -13,17 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #323232; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #868686; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b5b5b5; - --Component-Button-Brand-Tertiary-Fill-Hover: #87664e; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #323232; - --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Haymarket-Body: 'Fira sans'; --Font-family-Haymarket-Decorative: 'Prumo text'; --Font-family-Haymarket-Title: 'Prumo text'; - --Icon-Interactive-Inverted-Hover: #b5b5b5; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -69,14 +61,9 @@ --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff; --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-1-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #efebea; - --Surface-UI-Fill-Active-Hover: #ffffff; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.24px; --Tag-Text-Transform: uppercase; - --Text-Interactive-Inverted-Hover: #b5b5b5; --Title-Decorative-lg-Font-fallback: Serif; --Title-Decorative-lg-Letter-spacing: 0.6px; --Title-Decorative-lg-Text-Transform: uppercase; @@ -160,6 +147,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -171,6 +159,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var(--Neutral-70); --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 @@ -190,6 +181,9 @@ ); --Component-Button-Brand-Secondary-On-fill-Default: var(--Neutral-90); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var(--Neutral-70); --Component-Button-Brand-Secondary-On-fill-Inverted: var( --Neutral-Opacity-White-100 @@ -209,6 +203,7 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -225,13 +220,16 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Haymarket-Antique-Brass-50 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var(--Neutral-90); --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); @@ -252,6 +250,7 @@ --Icon-Interactive-Accent: var(--Signature-Haymarket-Antique-Brass-60); --Icon-Interactive-Default: var(--Neutral-90); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -314,9 +313,13 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0); --Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Signature-Haymarket-Vista-White-10); + --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-15); @@ -353,6 +356,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Neutral-70); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var( --Signature-Haymarket-Antique-Brass-40 diff --git a/packages/design-system/lib/styles/haymarket.js b/packages/design-system/lib/styles/haymarket.js index a050c2150..0b5908c93 100644 --- a/packages/design-system/lib/styles/haymarket.js +++ b/packages/design-system/lib/styles/haymarket.js @@ -148,7 +148,7 @@ export const theme = { 'Text/Interactive/Hover': '#454545', 'Text/Interactive/Secondary': '#805E45', 'Text/Interactive/Secondary Hover': '#BA8E6E', - 'Text/Interactive/Inverted Hover': '#b5b5b5', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -175,14 +175,14 @@ export const theme = { 'Background/Primary': '#FFFFFF', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#FBF7F6', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#FBF7F6', 'Surface/Secondary/Subtle': '#F6ECEA', - 'Surface/Secondary/Hover': '#efebea', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#946F54', 'Surface/Brand/Accent/OnAccent/Accent': '#EDE3D8', 'Surface/Brand/Accent/OnAccent/Accent Secondary': '#EDE3D8', @@ -196,7 +196,7 @@ export const theme = { 'Surface/UI Fill/Default': '#FFFFFF', 'Surface/UI Fill/Intense': '#262626', 'Surface/UI Fill/Active': '#262626', - 'Surface/UI Fill/Active Hover': '#ffffff', + 'Surface/UI Fill/Active Hover': '#FFFFFF1A', 'Surface/UI Fill/Disabled': '#E9E9E9', 'Surface/Accent/1': '#AA6858', 'Surface/Accent/2': '#6E98A2', @@ -222,7 +222,7 @@ export const theme = { 'Icon/Interactive/Default': '#1F1F1F', 'Icon/Interactive/Secondary': '#805E45', 'Icon/Interactive/Accent': '#805E45', - 'Icon/Interactive/Inverted Hover': '#b5b5b5', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -239,7 +239,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#1F1F1F', - 'Component/Button/Brand/Primary/Fill/Hover': '#323232', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -255,15 +255,15 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#1F1F1F', 'Component/Button/Brand/Secondary/On fill/Hover': '#454545', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b5b5b5', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#1F1F1F', 'Component/Button/Brand/Secondary/Border/Hover': '#454545', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#868686', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#946F54', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#87664e', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', @@ -273,14 +273,14 @@ export const theme = { 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#946F54', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#1F1F1F', - 'Component/Button/Inverted/On fill/Hover': '#323232', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -305,6 +305,6 @@ export const theme = { 'Component/Button/Muted/On fill/Hover Inverted': '#454545', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/styles/hotel-norge.css b/packages/design-system/lib/styles/hotel-norge.css index 91e2e976c..4e357b4fb 100644 --- a/packages/design-system/lib/styles/hotel-norge.css +++ b/packages/design-system/lib/styles/hotel-norge.css @@ -13,17 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #2c3146; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #838593; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b3b4bd; - --Component-Button-Brand-Tertiary-Fill-Hover: #215448; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #2c3146; - --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Hotel-Norge-Body: 'Fira sans'; --Font-family-Hotel-Norge-Decorative: 'Domaine Sans Text'; --Font-family-Hotel-Norge-Title: 'Domaine Sans Text'; - --Icon-Interactive-Inverted-Hover: #b3b4bd; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -59,14 +51,9 @@ --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff; --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-1-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #e3e4df; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.18px; --Tag-Text-Transform: uppercase; - --Text-Brand-OnPrimary-1-Hover: #ffffff; - --Text-Interactive-Inverted-Hover: #b3b4bd; --Title-Decorative-lg-Font-fallback: sans-serif; --Title-Decorative-lg-Letter-spacing: 0.24px; --Title-Decorative-lg-Text-Transform: uppercase; @@ -152,6 +139,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -165,6 +153,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var( --Signature-Hotel-Norge-Dark-blue-80 ); @@ -188,6 +179,9 @@ --Signature-Hotel-Norge-Dark-blue-100 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var( --Signature-Hotel-Norge-Dark-blue-80 ); @@ -209,6 +203,7 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -225,6 +220,7 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Hotel-Norge-Emerald-100 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var( --Signature-Hotel-Norge-Dark-blue-100 ); @@ -232,8 +228,10 @@ --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); @@ -256,6 +254,7 @@ --Icon-Interactive-Accent: var(--Signature-Hotel-Norge-Emerald-90); --Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-100); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -316,10 +315,13 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var( --Signature-Hotel-Norge-Off-White-30 ); --Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Signature-Hotel-Norge-Off-White-60); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); @@ -337,6 +339,7 @@ --Text-Brand-OnPrimary-1-Accent: var(--Signature-Hotel-Norge-Dark-blue-0); --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100); + --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70); --Text-Brand-OnPrimary-2-Accent: var(--Signature-Hotel-Norge-Emerald-0); --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100); @@ -355,6 +358,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Signature-Hotel-Norge-Dark-blue-80); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var(--Signature-Hotel-Norge-Emerald-80); --Text-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90); diff --git a/packages/design-system/lib/styles/hotel-norge.js b/packages/design-system/lib/styles/hotel-norge.js index 52bba275f..26ff3e6ed 100644 --- a/packages/design-system/lib/styles/hotel-norge.js +++ b/packages/design-system/lib/styles/hotel-norge.js @@ -135,7 +135,7 @@ export const theme = { 'Text/Interactive/Hover': '#404655', 'Text/Interactive/Secondary': '#26544A', 'Text/Interactive/Secondary Hover': '#3A655C', - 'Text/Interactive/Inverted Hover': '#b3b4bd', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -151,7 +151,7 @@ export const theme = { 'Text/Brand/OnAccent/Accent Secondary': '#747474', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 1/Default': '#FFFFFF', - 'Text/Brand/OnPrimary 1/Hover': '#ffffff', + 'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3', 'Text/Brand/OnPrimary 1/Accent': '#B7C5C8', 'Text/Brand/OnPrimary 2/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 2/Default': '#FFFFFF', @@ -162,14 +162,14 @@ export const theme = { 'Background/Primary': '#FFFFFF', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#F4F5F2', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#EFF0EB', 'Surface/Secondary/Subtle': '#D9DAD6', - 'Surface/Secondary/Hover': '#e3e4df', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#C7DDD5', 'Surface/Brand/Accent/OnAccent/Accent': '#2F3445', 'Surface/Brand/Accent/OnAccent/Accent Secondary': '#2F3445', @@ -209,7 +209,7 @@ export const theme = { 'Icon/Interactive/Default': '#181E34', 'Icon/Interactive/Secondary': '#26544A', 'Icon/Interactive/Accent': '#26544A', - 'Icon/Interactive/Inverted Hover': '#b3b4bd', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -226,7 +226,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#181E34', - 'Component/Button/Brand/Primary/Fill/Hover': '#2c3146', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -242,15 +242,15 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#181E34', 'Component/Button/Brand/Secondary/On fill/Hover': '#404655', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b3b4bd', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#181E34', 'Component/Button/Brand/Secondary/Border/Hover': '#404655', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#838593', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#004337', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#215448', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', @@ -260,14 +260,14 @@ export const theme = { 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#004337', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#181E34', - 'Component/Button/Inverted/On fill/Hover': '#2c3146', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -292,6 +292,6 @@ export const theme = { 'Component/Button/Muted/On fill/Hover Inverted': '#404655', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/styles/marski.css b/packages/design-system/lib/styles/marski.css index 1a365fe8a..6fe153d2d 100644 --- a/packages/design-system/lib/styles/marski.css +++ b/packages/design-system/lib/styles/marski.css @@ -13,17 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #51262b; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #9d8081; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c3b1b2; - --Component-Button-Brand-Tertiary-Fill-Hover: #1a54e7; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #51262b; - --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Marski-Body: 'Fira sans'; --Font-family-Marski-Decorative: 'Helvetica Neue'; --Font-family-Marski-Title: 'Helvetica Neue'; - --Icon-Interactive-Inverted-Hover: #b6bdc2; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -80,14 +72,9 @@ --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff; --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-1-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #e0e2e3; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.18px; --Tag-Text-Transform: none; - --Text-Brand-OnPrimary-1-Hover: #ffffff; - --Text-Interactive-Inverted-Hover: #b2b9be; --Title-Decorative-lg-Font-fallback: sans-serif; --Title-Decorative-lg-Letter-spacing: 0.1px; --Title-Decorative-lg-Text-Transform: uppercase; @@ -171,6 +158,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -184,6 +172,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var( --Signature-Marski-Aubergine-80 ); @@ -207,6 +198,9 @@ --Signature-Marski-Aubergine-100 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var( --Signature-Marski-Aubergine-80 ); @@ -228,6 +222,7 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-Black-5); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -244,6 +239,7 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Marski-Aubergine-100 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var( --Signature-Marski-Aubergine-100 ); @@ -251,8 +247,10 @@ --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); @@ -275,6 +273,7 @@ --Icon-Interactive-Accent: var(--Signature-Marski-Blue-ribbon-70); --Icon-Interactive-Default: var(--Signature-Marski-Elephant-90); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -329,8 +328,11 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0); --Surface-Secondary-Default: var(--Signature-Marski-Elephant-10); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Signature-Marski-Elephant-20); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); @@ -348,6 +350,7 @@ --Text-Brand-OnPrimary-1-Accent: var(--Signature-Marski-Blue-ribbon-50); --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100); + --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70); --Text-Brand-OnPrimary-2-Accent: var(--Signature-Marski-Torch-red-50); --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100); @@ -366,6 +369,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Signature-Marski-Elephant-80); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var(--Signature-Marski-Blue-ribbon-90); --Text-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70); diff --git a/packages/design-system/lib/styles/marski.js b/packages/design-system/lib/styles/marski.js index 34653684a..402017a7e 100644 --- a/packages/design-system/lib/styles/marski.js +++ b/packages/design-system/lib/styles/marski.js @@ -159,7 +159,7 @@ export const theme = { 'Text/Interactive/Hover': '#2C414D', 'Text/Interactive/Secondary': '#0D57F3', 'Text/Interactive/Secondary Hover': '#143D94', - 'Text/Interactive/Inverted Hover': '#b2b9be', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -175,7 +175,7 @@ export const theme = { 'Text/Brand/OnAccent/Accent Secondary': '#747474', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 1/Default': '#FFFFFF', - 'Text/Brand/OnPrimary 1/Hover': '#ffffff', + 'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3', 'Text/Brand/OnPrimary 1/Accent': '#458AFF', 'Text/Brand/OnPrimary 2/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 2/Default': '#FFFFFF', @@ -186,14 +186,14 @@ export const theme = { 'Background/Primary': '#FCFCFC', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#F6F6F7', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#ECEEEF', 'Surface/Secondary/Subtle': '#E0E3E5', - 'Surface/Secondary/Hover': '#e0e2e3', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#575757', 'Surface/Brand/Accent/OnAccent/Accent': '#E0E3E5', 'Surface/Brand/Accent/OnAccent/Accent Secondary': '#E0E3E5', @@ -233,7 +233,7 @@ export const theme = { 'Icon/Interactive/Default': '#1E3441', 'Icon/Interactive/Secondary': '#0D57F3', 'Icon/Interactive/Accent': '#0D57F3', - 'Icon/Interactive/Inverted Hover': '#b6bdc2', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -250,7 +250,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#3E1118', - 'Component/Button/Brand/Primary/Fill/Hover': '#51262b', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -266,15 +266,15 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#3E1118', 'Component/Button/Brand/Secondary/On fill/Hover': '#5B353B', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c3b1b2', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#3E1118', 'Component/Button/Brand/Secondary/Border/Hover': '#5B353B', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#9d8081', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#0D57F3', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#1a54e7', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#1F1C1B0D', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', @@ -284,14 +284,14 @@ export const theme = { 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#3E1118', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#3E1118', - 'Component/Button/Inverted/On fill/Hover': '#51262b', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -316,6 +316,6 @@ export const theme = { 'Component/Button/Muted/On fill/Hover Inverted': '#5B353B', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/styles/partner-sas.css b/packages/design-system/lib/styles/partner-sas.css index 8426f3290..ed5ca3402 100644 --- a/packages/design-system/lib/styles/partner-sas.css +++ b/packages/design-system/lib/styles/partner-sas.css @@ -1,16 +1,6 @@ /* This file is generated, do not edit manually! */ .partner-sas { /* Values */ - --Component-Button-Brand-Primary-Fill-Hover: #34373d; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #878a8d; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b6b7b9; - --Component-Button-Brand-Tertiary-Fill-Hover: #b8cad0; - --Component-Button-Brand-Tertiary-On-fill-Hover: #34373d; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #34373d; - --Component-Button-Muted-Border-Hover: #ffffff30; - --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2; - --Icon-Interactive-Inverted-Hover: #b6b7b9; --Surface-Brand-Accent-Default: #ffffff; --Surface-Brand-Accent-OnAccent-Accent-Secondary: #ffffff; --Surface-Brand-Accent-OnAccent-Accent: #ffffff; @@ -25,11 +15,7 @@ --Surface-Brand-Primary-3-Default: #ffffff; --Surface-Brand-Primary-3-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-3-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #ebeae9; --Text-Brand-OnPrimary-1-Hover: #ffffff; - --Text-Interactive-Inverted-Hover: #b6b7b9; --Utilities-Gradients-10: #5b6e7f1a; /* Aliases */ @@ -63,6 +49,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -76,6 +63,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var( --Signature-Grand-Hotel-Blue-Bayoux-80 ); @@ -99,6 +89,9 @@ --Signature-Grand-Hotel-Blue-Bayoux-100 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var( --Signature-Grand-Hotel-Blue-Bayoux-80 ); @@ -120,10 +113,14 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Tertiary-On-fill-Hover: var( + --Neutral-Opacity-White-10 + ); --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10); @@ -133,6 +130,7 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Grand-Hotel-Submarine-30 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); @@ -140,11 +138,14 @@ --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); @@ -163,6 +164,7 @@ --Icon-Interactive-Accent: var(--Signature-Grand-Hotel-Careys-Pink-60); --Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -191,8 +193,11 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0); --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Signature-Grand-Hotel-Cloudy-10); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); @@ -225,6 +230,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Signature-Grand-Hotel-Careys-Pink-60); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var( --Signature-Grand-Hotel-Careys-Pink-50 diff --git a/packages/design-system/lib/styles/partner-sas.js b/packages/design-system/lib/styles/partner-sas.js index 55cbadeaf..e5548206a 100644 --- a/packages/design-system/lib/styles/partner-sas.js +++ b/packages/design-system/lib/styles/partner-sas.js @@ -26,7 +26,7 @@ export const theme = { 'Text/Interactive/Hover': '#AA546B', 'Text/Interactive/Secondary': '#AA546B', 'Text/Interactive/Secondary Hover': '#C27183', - 'Text/Interactive/Inverted Hover': '#b6b7b9', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -52,14 +52,14 @@ export const theme = { 'Background/Primary': '#FFFFFF', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#F7F6F5', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#F7F6F5', 'Surface/Secondary/Subtle': '#EBEAE9', - 'Surface/Secondary/Hover': '#ebeae9', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/UI Fill/Default': '#FFFFFF', 'Surface/UI Fill/Intense': '#262626', 'Surface/UI Fill/Active': '#262626', @@ -89,7 +89,7 @@ export const theme = { 'Icon/Interactive/Default': '#21252B', 'Icon/Interactive/Secondary': '#AA546B', 'Icon/Interactive/Accent': '#AA546B', - 'Icon/Interactive/Inverted Hover': '#b6b7b9', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -106,7 +106,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#21252B', - 'Component/Button/Brand/Primary/Fill/Hover': '#34373d', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -122,32 +122,32 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#21252B', 'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b6b7b9', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#21252B', 'Component/Button/Brand/Secondary/Border/Hover': '#3D444D', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#878a8d', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#21252B', - 'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d', + 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#B0C4CB', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF1A', 'Component/Button/Inverted/Border/Disable': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Default': '#21252B', - 'Component/Button/Inverted/On fill/Hover': '#34373d', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -165,13 +165,13 @@ export const theme = { 'Component/Button/Muted/Fill/Default': '#FFFFFF', 'Component/Button/Muted/Fill/Hover': '#FFFFFF', 'Component/Button/Muted/Fill/Disabled': '#FFFFFF', - 'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#3D444D', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/styles/scandic-go.css b/packages/design-system/lib/styles/scandic-go.css index dfeb0a542..10c558576 100644 --- a/packages/design-system/lib/styles/scandic-go.css +++ b/packages/design-system/lib/styles/scandic-go.css @@ -13,18 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #c7c2e5; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #908197; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #bbb2bf; - --Component-Button-Brand-Tertiary-Fill-Hover: #402a4b; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #402a4b; - --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2; - --Component-Button-Muted-Fill-Hover: #ffffff; --Font-family-Scandic-Go-Body: 'Fira sans'; --Font-family-Scandic-Go-Decorative: 'ITC Garamond Std'; --Font-family-Scandic-Go-Title: 'Neue Haas Grotesk Display Pro'; - --Icon-Interactive-Inverted-Hover: #bbb2bf; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -83,15 +74,9 @@ --Scandic-Go-Yellow-70: #966400; --Scandic-Go-Yellow-80: #754403; --Scandic-Go-Yellow-90: #572701; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #e4e1d9; - --Surface-UI-Fill-Active-Hover: #e6e5e5; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.24px; --Tag-Text-Transform: none; - --Text-Brand-OnPrimary-1-Hover: #ffffff; - --Text-Interactive-Inverted-Hover: #bbb2bf; --Title-Decorative-lg-Font-fallback: Serif; --Title-Decorative-lg-Letter-spacing: 0.32px; --Title-Decorative-lg-Text-Transform: none; @@ -171,6 +156,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Scandic-Go-Purple-100 ); @@ -182,6 +168,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Go-Purple-80); --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 @@ -203,6 +192,9 @@ --Scandic-Go-Purple-100 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Go-Purple-80); --Component-Button-Brand-Secondary-On-fill-Inverted: var( --Neutral-Opacity-White-100 @@ -220,6 +212,7 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -234,17 +227,21 @@ --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); --Component-Button-Inverted-Fill-Hover-Inverted: var(--Scandic-Go-Purple-10); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var(--Scandic-Go-Purple-100); --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Go-Purple-80); @@ -260,6 +257,7 @@ --Icon-Interactive-Accent: var(--Scandic-Go-Purple-80); --Icon-Interactive-Default: var(--Scandic-Go-Purple-100); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Scandic-Go-Purple-80); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -314,9 +312,13 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0); --Surface-Secondary-Default: var(--Scandic-Go-Beige-10); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Scandic-Go-Beige-20); + --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-Black-10); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-15); @@ -332,6 +334,7 @@ --Text-Brand-OnPrimary-1-Accent: var(--Scandic-Go-Purple-10); --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100); + --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70); --Text-Brand-OnPrimary-2-Accent: var(--Scandic-Go-Purple-10); --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100); @@ -350,6 +353,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Scandic-Go-Purple-80); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var(--Scandic-Go-Purple-100); --Text-Interactive-Secondary: var(--Scandic-Go-Purple-80); diff --git a/packages/design-system/lib/styles/scandic-go.js b/packages/design-system/lib/styles/scandic-go.js index b4f406110..58fb021b5 100644 --- a/packages/design-system/lib/styles/scandic-go.js +++ b/packages/design-system/lib/styles/scandic-go.js @@ -161,7 +161,7 @@ export const theme = { 'Text/Interactive/Hover': '#5E2A8C', 'Text/Interactive/Secondary': '#5E2A8C', 'Text/Interactive/Secondary Hover': '#2D163A', - 'Text/Interactive/Inverted Hover': '#bbb2bf', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -177,7 +177,7 @@ export const theme = { 'Text/Brand/OnAccent/Accent Secondary': '#5E2A8C', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 1/Default': '#FFFFFF', - 'Text/Brand/OnPrimary 1/Hover': '#ffffff', + 'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3', 'Text/Brand/OnPrimary 1/Accent': '#DCD7FF', 'Text/Brand/OnPrimary 2/Heading': '#FFFFFF', 'Text/Brand/OnPrimary 2/Default': '#FFFFFF', @@ -188,14 +188,14 @@ export const theme = { 'Background/Primary': '#FFFEFA', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#DCD7FF', 'Surface/Primary/OnSurface/Default': '#FAF8F2', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#F0EDE4', 'Surface/Secondary/Subtle': '#E0DCCE', - 'Surface/Secondary/Hover': '#e4e1d9', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#F5FF73', 'Surface/Brand/Accent/OnAccent/Default': '#2D163A', 'Surface/Brand/Accent/OnAccent/Accent': '#451F61', @@ -213,7 +213,7 @@ export const theme = { 'Surface/UI Fill/Default': '#FFFFFF', 'Surface/UI Fill/Intense': '#262626', 'Surface/UI Fill/Active': '#262626', - 'Surface/UI Fill/Active Hover': '#e6e5e5', + 'Surface/UI Fill/Active Hover': '#1F1C1B1A', 'Surface/UI Fill/Disabled': '#E9E9E9', 'Surface/Accent/1': '#FA3737', 'Surface/Accent/2': '#087B86', @@ -239,7 +239,7 @@ export const theme = { 'Icon/Interactive/Default': '#2D163A', 'Icon/Interactive/Secondary': '#5E2A8C', 'Icon/Interactive/Accent': '#5E2A8C', - 'Icon/Interactive/Inverted Hover': '#bbb2bf', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -256,7 +256,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#DCD7FF', - 'Component/Button/Brand/Primary/Fill/Hover': '#c7c2e5', + 'Component/Button/Brand/Primary/Fill/Hover': '#1F1C1B1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#2D163A', 'Component/Button/Brand/Primary/On fill/Hover': '#2D163A', @@ -272,15 +272,15 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#2D163A', 'Component/Button/Brand/Secondary/On fill/Hover': '#5E2A8C', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#bbb2bf', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#2D163A', 'Component/Button/Brand/Secondary/Border/Hover': '#5E2A8C', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#908197', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#2D163A', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#402a4b', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', @@ -290,14 +290,14 @@ export const theme = { 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#DCD7FF', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#2D163A', - 'Component/Button/Inverted/On fill/Hover': '#402a4b', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -313,9 +313,9 @@ export const theme = { 'Border/Interactive/Disabled': '#8C8C8C', 'Border/Interactive/Error': '#AD0015', 'Component/Button/Muted/Fill/Default': '#FFFFFF', - 'Component/Button/Muted/Fill/Hover': '#ffffff', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF0D', 'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A', - 'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', diff --git a/packages/design-system/lib/styles/scandic.css b/packages/design-system/lib/styles/scandic.css index be84399f9..b6e9cb5a0 100644 --- a/packages/design-system/lib/styles/scandic.css +++ b/packages/design-system/lib/styles/scandic.css @@ -13,16 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #a81e20; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #a87e83; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #cbb0b3; - --Component-Button-Brand-Tertiary-Fill-Hover: #601e2d; - --Component-Button-Inverted-Fill-Hover: #f2f2f2; - --Component-Button-Inverted-On-fill-Hover: #601e2d; --Font-family-Scandic-Body: 'Fira sans'; --Font-family-Scandic-Decorative: 'Biro Script Plus'; --Font-family-Scandic-Title: 'Brandon Text'; - --Icon-Interactive-Inverted-Hover: #cbb0b3; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -108,14 +101,9 @@ --Scandic-Yellow-70: #a85211; --Scandic-Yellow-80: #7d370f; --Scandic-Yellow-90: #4f2313; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #dad4cf; - --Surface-UI-Fill-Active-Hover: #ffffff; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.2px; --Tag-Text-Transform: uppercase; - --Text-Interactive-Inverted-Hover: #cbb0b3; --Title-Decorative-lg-Font-fallback: sans-serif; --Title-Decorative-lg-Letter-spacing: 0.64px; --Title-Decorative-lg-Text-Transform: none; @@ -195,6 +183,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-Black-20); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -206,6 +195,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Peach-80); --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 @@ -225,6 +217,9 @@ ); --Component-Button-Brand-Secondary-On-fill-Default: var(--Scandic-Red-100); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Scandic-Grey-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80); --Component-Button-Brand-Secondary-On-fill-Inverted: var( --Neutral-Opacity-White-100 @@ -242,6 +237,7 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -256,11 +252,13 @@ --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); --Component-Button-Inverted-Fill-Hover-Inverted: var(--Scandic-Red-100); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-5); --Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100); --Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40); --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0); @@ -286,6 +284,7 @@ --Icon-Interactive-Accent: var(--Scandic-Red-Default); --Icon-Interactive-Default: var(--Scandic-Red-100); --Icon-Interactive-Disabled: var(--Scandic-Grey-40); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Scandic-Grey-60); --Icon-Interactive-Secondary: var(--Scandic-Peach-80); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -338,9 +337,13 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Scandic-Peach-10); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00); --Surface-Secondary-Default: var(--Scandic-Beige-10); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-10); --Surface-Secondary-Subtle: var(--Scandic-Beige-20); + --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10); --Surface-UI-Fill-Active: var(--Scandic-Peach-100); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-Opacity-Black-10); @@ -375,6 +378,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Scandic-Grey-80); --Text-Interactive-Hover: var(--Scandic-Peach-80); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Scandic-Grey-60); --Text-Interactive-Secondary-Hover: var(--Scandic-Red-100); --Text-Interactive-Secondary: var(--Scandic-Peach-80); diff --git a/packages/design-system/lib/styles/scandic.js b/packages/design-system/lib/styles/scandic.js index c6594e8cd..b681b383e 100644 --- a/packages/design-system/lib/styles/scandic.js +++ b/packages/design-system/lib/styles/scandic.js @@ -188,7 +188,7 @@ export const theme = { 'Text/Interactive/Hover': '#8F4350', 'Text/Interactive/Secondary': '#8F4350', 'Text/Interactive/Secondary Hover': '#4D001B', - 'Text/Interactive/Inverted Hover': '#cbb0b3', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#A8A4A2', 'Text/Interactive/Focus': '#57514E', 'Text/Interactive/Error': '#AD0015', @@ -215,14 +215,14 @@ export const theme = { 'Background/Primary': '#FAF6F2', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#F7E1D5', 'Surface/Primary/OnSurface/Default': '#F9F6F4', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#F2ECE6', 'Surface/Secondary/Subtle': '#E3D9D1', - 'Surface/Secondary/Hover': '#dad4cf', + 'Surface/Secondary/Hover': '#1F1C1B1A', 'Surface/Brand/Accent/Default': '#F0C1B6', 'Surface/Brand/Accent/OnAccent/Default': '#4D001B', 'Surface/Brand/Accent/OnAccent/Accent': '#CD0921', @@ -240,7 +240,7 @@ export const theme = { 'Surface/UI Fill/Default': '#FFFFFF', 'Surface/UI Fill/Intense': '#26201E', 'Surface/UI Fill/Active': '#4D0F25', - 'Surface/UI Fill/Active Hover': '#ffffff', + 'Surface/UI Fill/Active Hover': '#FFFFFF1A', 'Surface/UI Fill/Disabled': '#1F1C1B1A', 'Surface/Accent/1': '#8D0011', 'Surface/Accent/2': '#3F6DBD', @@ -266,7 +266,7 @@ export const theme = { 'Icon/Interactive/Default': '#4D001B', 'Icon/Interactive/Secondary': '#8F4350', 'Icon/Interactive/Accent': '#CD0921', - 'Icon/Interactive/Inverted Hover': '#cbb0b3', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#A8A4A2', 'Icon/Interactive/Placeholder': '#787472', 'Icon/Feedback/Information': '#284EA0', @@ -283,7 +283,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#CD0921', - 'Component/Button/Brand/Primary/Fill/Hover': '#a81e20', + 'Component/Button/Brand/Primary/Fill/Hover': '#1F1C1B33', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -299,15 +299,15 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#4D001B', 'Component/Button/Brand/Secondary/On fill/Hover': '#8F4350', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#cbb0b3', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#A8A4A2', 'Component/Button/Brand/Secondary/Border/Default': '#4D001B', 'Component/Button/Brand/Secondary/Border/Hover': '#8F4350', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#a87e83', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#4D001B', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#601e2d', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', @@ -317,14 +317,14 @@ export const theme = { 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#f2f2f2', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B0D', 'Component/Button/Inverted/Fill/Hover Inverted': '#4D001B', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#4D001B', - 'Component/Button/Inverted/On fill/Hover': '#601e2d', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#A8A4A2', 'Border/Interactive/Default': '#9C8A7E', diff --git a/packages/design-system/lib/styles/the-dock.css b/packages/design-system/lib/styles/the-dock.css index 82271dd23..9804598a9 100644 --- a/packages/design-system/lib/styles/the-dock.css +++ b/packages/design-system/lib/styles/the-dock.css @@ -13,19 +13,9 @@ --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; --Body-Underline-sm-Text-Decoration: underline; - --Component-Button-Brand-Primary-Fill-Hover: #512725; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #9d807e; - --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c4b1af; - --Component-Button-Brand-Tertiary-Fill-Hover: #f3e4c8; - --Component-Button-Brand-Tertiary-On-fill-Hover: #512725; - --Component-Button-Inverted-Fill-Hover: #e6e5e5; - --Component-Button-Inverted-On-fill-Hover: #512725; - --Component-Button-Muted-Border-Hover: #ffffff30; - --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2; --Font-family-The-Dock-Body: 'Fira sans'; --Font-family-The-Dock-Decorative: 'Beausite Classic'; --Font-family-The-Dock-Title: 'Reckless'; - --Icon-Interactive-Inverted-Hover: #b5b5b5; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; @@ -52,13 +42,9 @@ --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff; --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff; --Surface-Brand-Primary-1-OnSurface-Default: #ffffff; - --Surface-Primary-Hover-Light: #e6e5e5; - --Surface-Primary-Hover: #f2f2f2; - --Surface-Secondary-Hover: #ebe5dc; --Tag-Font-fallback: sans-serif; --Tag-Letter-spacing: 0.24px; --Tag-Text-Transform: uppercase; - --Text-Interactive-Inverted-Hover: #b5b5b5; --Title-Decorative-lg-Font-fallback: Serif; --Title-Decorative-lg-Letter-spacing: 0px; --Title-Decorative-lg-Text-Transform: uppercase; @@ -144,6 +130,7 @@ --Component-Button-Brand-Primary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -157,6 +144,9 @@ --Component-Button-Brand-Secondary-Border-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Secondary-Border-Hover-inverted: var( + --Neutral-Opacity-White-50 + ); --Component-Button-Brand-Secondary-Border-Hover: var( --Signature-The-Dock-Rose-Copper-80 ); @@ -180,6 +170,9 @@ --Signature-The-Dock-Rose-Copper-90 ); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var( + --Neutral-Opacity-White-70 + ); --Component-Button-Brand-Secondary-On-fill-Hover: var( --Signature-The-Dock-Rose-Copper-80 ); @@ -201,10 +194,14 @@ --Component-Button-Brand-Tertiary-Fill-Disabled: var( --Neutral-Opacity-Black-10 ); + --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Signature-The-Dock-Rose-Copper-90 ); --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40); + --Component-Button-Brand-Tertiary-On-fill-Hover: var( + --Neutral-Opacity-White-10 + ); --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10); @@ -214,6 +211,7 @@ --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-The-Dock-Sandbank-Beige-20 ); + --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10); --Component-Button-Inverted-On-fill-Default: var( --Signature-The-Dock-Rose-Copper-90 ); @@ -221,11 +219,14 @@ --Component-Button-Inverted-On-fill-Hover-inverted: var( --Neutral-Opacity-White-100 ); + --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100); --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); @@ -244,6 +245,7 @@ --Icon-Interactive-Accent: var(--Signature-The-Dock-Signal-Red-60); --Icon-Interactive-Default: var(--Neutral-90); --Icon-Interactive-Disabled: var(--Neutral-30); + --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Icon-Interactive-Placeholder: var(--Neutral-50); --Icon-Interactive-Secondary: var(--Signature-The-Dock-Signal-Red-60); --Icon-Inverted: var(--Neutral-Opacity-White-100); @@ -302,8 +304,11 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10); --Surface-Primary-Hover-Accent: var(--Neutral-15); + --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10); + --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Primary-OnSurface-Default: var(--Signature-The-Dock-Linen-White-00); --Surface-Secondary-Default: var(--Signature-The-Dock-Linen-White-20); + --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5); --Surface-Secondary-Subtle: var(--Signature-The-Dock-Sandbank-Beige-20); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); @@ -342,6 +347,7 @@ --Text-Interactive-Error: var(--Scandic-Red-70); --Text-Interactive-Focus: var(--Neutral-80); --Text-Interactive-Hover: var(--Neutral-70); + --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70); --Text-Interactive-Placeholder: var(--Neutral-50); --Text-Interactive-Secondary-Hover: var(--Signature-The-Dock-Signal-Red-50); --Text-Interactive-Secondary: var(--Signature-The-Dock-Signal-Red-60); diff --git a/packages/design-system/lib/styles/the-dock.js b/packages/design-system/lib/styles/the-dock.js index 91f72d121..57c5cce63 100644 --- a/packages/design-system/lib/styles/the-dock.js +++ b/packages/design-system/lib/styles/the-dock.js @@ -126,7 +126,7 @@ export const theme = { 'Text/Interactive/Hover': '#454545', 'Text/Interactive/Secondary': '#D62220', 'Text/Interactive/Secondary Hover': '#FC2826', - 'Text/Interactive/Inverted Hover': '#b5b5b5', + 'Text/Interactive/Inverted Hover': '#FFFFFFB3', 'Text/Interactive/Disabled': '#8C8C8C', 'Text/Interactive/Focus': '#262626', 'Text/Interactive/Error': '#AD0015', @@ -153,14 +153,14 @@ export const theme = { 'Background/Primary': '#FDFCF9', 'Background/Secondary': '#FFFFFF', 'Surface/Primary/Default': '#FFFFFF', - 'Surface/Primary/Hover': '#f2f2f2', - 'Surface/Primary/Hover Light': '#e6e5e5', + 'Surface/Primary/Hover': '#1F1C1B0D', + 'Surface/Primary/Hover Light': '#1F1C1B1A', 'Surface/Primary/Hover Accent': '#E9E9E9', 'Surface/Primary/OnSurface/Default': '#FDFCF9', 'Surface/Primary/Disabled': '#1F1C1B1A', 'Surface/Secondary/Default': '#F7F1E8', 'Surface/Secondary/Subtle': '#F2E1C2', - 'Surface/Secondary/Hover': '#ebe5dc', + 'Surface/Secondary/Hover': '#1F1C1B0D', 'Surface/Brand/Accent/Default': '#B5CC87', 'Surface/Brand/Accent/OnAccent/Accent': '#B31C1B', 'Surface/Brand/Accent/OnAccent/Accent Secondary': '#B31C1B', @@ -200,7 +200,7 @@ export const theme = { 'Icon/Interactive/Default': '#1F1F1F', 'Icon/Interactive/Secondary': '#D62220', 'Icon/Interactive/Accent': '#D62220', - 'Icon/Interactive/Inverted Hover': '#b5b5b5', + 'Icon/Interactive/Inverted Hover': '#FFFFFFB3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -217,7 +217,7 @@ export const theme = { 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', 'Component/Button/Brand/Primary/Fill/Default': '#3E1212', - 'Component/Button/Brand/Primary/Fill/Hover': '#512725', + 'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', @@ -233,32 +233,32 @@ export const theme = { 'Component/Button/Brand/Secondary/On fill/Default': '#3E1212', 'Component/Button/Brand/Secondary/On fill/Hover': '#654141', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c4b1af', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#3E1212', 'Component/Button/Brand/Secondary/Border/Hover': '#654141', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#9d807e', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/Fill/Default': '#F2E1C2', - 'Component/Button/Brand/Tertiary/Fill/Hover': '#f3e4c8', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#3E1212', - 'Component/Button/Brand/Tertiary/On fill/Hover': '#512725', + 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF1A', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', 'Component/Button/Inverted/Fill/Default': '#FFFFFF', 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A', 'Component/Button/Inverted/Fill/Hover Inverted': '#F2E1C2', 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Inverted/Border/Default': '#FFFFFF00', 'Component/Button/Inverted/Border/Hover': '#FFFFFF1A', 'Component/Button/Inverted/Border/Disable': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Default': '#3E1212', - 'Component/Button/Inverted/On fill/Hover': '#512725', + 'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', 'Border/Interactive/Default': '#BFBFBF', @@ -276,13 +276,13 @@ export const theme = { 'Component/Button/Muted/Fill/Default': '#FFFFFF', 'Component/Button/Muted/Fill/Hover': '#FFFFFF', 'Component/Button/Muted/Fill/Disabled': '#FFFFFF', - 'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#654141', 'Component/Button/Muted/On fill/Disabled': '#8C8C8C', 'Component/Button/Muted/Border/Default': '#FFFFFF1A', - 'Component/Button/Muted/Border/Hover': '#ffffff30', + 'Component/Button/Muted/Border/Hover': '#FFFFFF1A', 'Component/Button/Muted/Border/Disable': '#FFFFFF1A', } diff --git a/packages/design-system/lib/tokens/index.ts b/packages/design-system/lib/tokens/index.ts index fdede6c6a..386dec014 100644 --- a/packages/design-system/lib/tokens/index.ts +++ b/packages/design-system/lib/tokens/index.ts @@ -442,7 +442,10 @@ export const scandic = { resolved: '#4D001B', alias: 'Scandic/Red/100', }, - 'Text/Interactive/Inverted Hover': { resolved: '#cbb0b3' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#A8A4A2', alias: 'Scandic/Grey/40', @@ -526,8 +529,14 @@ export const scandic = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#F7E1D5', alias: 'Scandic/Peach/10', @@ -548,7 +557,10 @@ export const scandic = { resolved: '#E3D9D1', alias: 'Scandic/Beige/20', }, - 'Surface/Secondary/Hover': { resolved: '#dad4cf' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Brand/Accent/Default': { resolved: '#F0C1B6', alias: 'Scandic/Peach/30', @@ -611,7 +623,10 @@ export const scandic = { }, 'Surface/UI Fill/Intense': { resolved: '#26201E', alias: 'Scandic/Grey/100' }, 'Surface/UI Fill/Active': { resolved: '#4D0F25', alias: 'Scandic/Peach/100' }, - 'Surface/UI Fill/Active Hover': { resolved: '#ffffff' }, + 'Surface/UI Fill/Active Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Surface/UI Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -670,7 +685,10 @@ export const scandic = { resolved: '#CD0921', alias: 'Scandic/Red/Default', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#cbb0b3' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#A8A4A2', alias: 'Scandic/Grey/40', @@ -699,7 +717,10 @@ export const scandic = { resolved: '#CD0921', alias: 'Scandic/Red/Default', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#a81e20' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#1F1C1B33', + alias: 'Neutral/Opacity/Black/20', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -761,7 +782,8 @@ export const scandic = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#cbb0b3', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#A8A4A2', @@ -780,7 +802,8 @@ export const scandic = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#a87e83', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -790,7 +813,10 @@ export const scandic = { resolved: '#4D001B', alias: 'Scandic/Red/100', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#601e2d' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -827,7 +853,10 @@ export const scandic = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#f2f2f2' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#4D001B', alias: 'Scandic/Red/100', @@ -852,7 +881,10 @@ export const scandic = { resolved: '#4D001B', alias: 'Scandic/Red/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#601e2d' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -1239,7 +1271,10 @@ export const scandicGo = { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', }, - 'Text/Interactive/Inverted Hover': { resolved: '#bbb2bf' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -1276,7 +1311,10 @@ export const scandicGo = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Text/Brand/OnPrimary 1/Hover': { resolved: '#ffffff' }, + 'Text/Brand/OnPrimary 1/Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Brand/OnPrimary 1/Accent': { resolved: '#DCD7FF', alias: 'Scandic Go/Purple/10', @@ -1314,8 +1352,14 @@ export const scandicGo = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#DCD7FF', alias: 'Scandic Go/Purple/10', @@ -1336,7 +1380,10 @@ export const scandicGo = { resolved: '#E0DCCE', alias: 'Scandic Go/Beige/20', }, - 'Surface/Secondary/Hover': { resolved: '#e4e1d9' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#F5FF73', alias: 'Scandic Go/Yellow/30', @@ -1399,7 +1446,10 @@ export const scandicGo = { }, 'Surface/UI Fill/Intense': { resolved: '#262626', alias: 'Neutral/80' }, 'Surface/UI Fill/Active': { resolved: '#262626', alias: 'Neutral/80' }, - 'Surface/UI Fill/Active Hover': { resolved: '#e6e5e5' }, + 'Surface/UI Fill/Active Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/UI Fill/Disabled': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Accent/1': { resolved: '#FA3737', alias: 'Scandic Go/Coral/50' }, 'Surface/Accent/2': { resolved: '#087B86', alias: 'Scandic Go/Cyan/70' }, @@ -1461,7 +1511,10 @@ export const scandicGo = { resolved: '#5E2A8C', alias: 'Scandic Go/Purple/80', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#bbb2bf' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -1484,7 +1537,10 @@ export const scandicGo = { resolved: '#DCD7FF', alias: 'Scandic Go/Purple/10', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#c7c2e5' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -1546,7 +1602,8 @@ export const scandicGo = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#bbb2bf', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -1565,7 +1622,8 @@ export const scandicGo = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#908197', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -1575,7 +1633,10 @@ export const scandicGo = { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#402a4b' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -1612,7 +1673,10 @@ export const scandicGo = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#DCD7FF', alias: 'Scandic Go/Purple/10', @@ -1637,7 +1701,10 @@ export const scandicGo = { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#402a4b' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -1674,12 +1741,18 @@ export const scandicGo = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Fill/Hover': { resolved: '#ffffff' }, + 'Component/Button/Muted/Fill/Hover': { + resolved: '#FFFFFF0D', + alias: 'Neutral/Opacity/White/5', + }, 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#f2f2f2' }, + 'Component/Button/Muted/Fill/Hover inverted': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', @@ -1987,7 +2060,10 @@ export const downtownCamper = { resolved: '#BB7524', alias: 'Signature/Downtown Camper/Russet/60', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b5b5b5' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -2024,7 +2100,10 @@ export const downtownCamper = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Text/Brand/OnPrimary 1/Hover': { resolved: '#ffffff' }, + 'Text/Brand/OnPrimary 1/Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Brand/OnPrimary 1/Accent': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -2062,8 +2141,14 @@ export const downtownCamper = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#F5F5F5', @@ -2075,7 +2160,10 @@ export const downtownCamper = { }, 'Surface/Secondary/Default': { resolved: '#F0F0F0', alias: 'Neutral/10' }, 'Surface/Secondary/Subtle': { resolved: '#D9D9D9', alias: 'Neutral/20' }, - 'Surface/Secondary/Hover': { resolved: '#e4e4e4' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#3C1D0C', alias: 'Signature/Downtown Camper/Russet/100', @@ -2122,7 +2210,10 @@ export const downtownCamper = { }, 'Surface/UI Fill/Intense': { resolved: '#262626', alias: 'Neutral/80' }, 'Surface/UI Fill/Active': { resolved: '#262626', alias: 'Neutral/80' }, - 'Surface/UI Fill/Active Hover': { resolved: '#ffffff' }, + 'Surface/UI Fill/Active Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Surface/UI Fill/Disabled': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Accent/1': { resolved: '#A96D59', @@ -2190,7 +2281,10 @@ export const downtownCamper = { resolved: '#834722', alias: 'Signature/Downtown Camper/Russet/80', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b5b5b5' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -2213,7 +2307,10 @@ export const downtownCamper = { resolved: '#3C1D0C', alias: 'Signature/Downtown Camper/Russet/100', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#614436' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF33', + alias: 'Neutral/Opacity/White/20', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -2275,7 +2372,8 @@ export const downtownCamper = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#c2b4ae', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -2294,7 +2392,8 @@ export const downtownCamper = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#9b857b', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -2304,7 +2403,10 @@ export const downtownCamper = { resolved: '#834722', alias: 'Signature/Downtown Camper/Russet/80', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#915836' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -2341,7 +2443,10 @@ export const downtownCamper = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#3C4336', alias: 'Signature/Downtown Camper/Lunar green/80', @@ -2366,7 +2471,10 @@ export const downtownCamper = { resolved: '#3C1D0C', alias: 'Signature/Downtown Camper/Russet/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#4f3021' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -2439,7 +2547,10 @@ export const downtownCamper = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', @@ -2719,7 +2830,10 @@ export const haymarket = { resolved: '#BA8E6E', alias: 'Signature/Haymarket/Antique Brass/40', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b5b5b5' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -2794,8 +2908,14 @@ export const haymarket = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#FBF7F6', @@ -2813,7 +2933,10 @@ export const haymarket = { resolved: '#F6ECEA', alias: 'Signature/Haymarket/Vista White/10', }, - 'Surface/Secondary/Hover': { resolved: '#efebea' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#946F54', alias: 'Signature/Haymarket/Antique Brass/50', @@ -2860,7 +2983,10 @@ export const haymarket = { }, 'Surface/UI Fill/Intense': { resolved: '#262626', alias: 'Neutral/80' }, 'Surface/UI Fill/Active': { resolved: '#262626', alias: 'Neutral/80' }, - 'Surface/UI Fill/Active Hover': { resolved: '#ffffff' }, + 'Surface/UI Fill/Active Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Surface/UI Fill/Disabled': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Accent/1': { resolved: '#AA6858', @@ -2934,7 +3060,10 @@ export const haymarket = { resolved: '#805E45', alias: 'Signature/Haymarket/Antique Brass/60', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b5b5b5' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -2957,7 +3086,10 @@ export const haymarket = { resolved: '#1F1F1F', alias: 'Neutral/90', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#323232' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -3019,7 +3151,8 @@ export const haymarket = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#b5b5b5', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -3038,7 +3171,8 @@ export const haymarket = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#868686', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -3048,7 +3182,10 @@ export const haymarket = { resolved: '#946F54', alias: 'Signature/Haymarket/Antique Brass/50', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#87664e' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -3085,7 +3222,10 @@ export const haymarket = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#946F54', alias: 'Signature/Haymarket/Antique Brass/50', @@ -3110,7 +3250,10 @@ export const haymarket = { resolved: '#1F1F1F', alias: 'Neutral/90', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#323232' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -3183,7 +3326,10 @@ export const haymarket = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', @@ -3474,7 +3620,10 @@ export const marski = { resolved: '#143D94', alias: 'Signature/Marski/Blue ribbon/90', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b2b9be' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -3511,7 +3660,10 @@ export const marski = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Text/Brand/OnPrimary 1/Hover': { resolved: '#ffffff' }, + 'Text/Brand/OnPrimary 1/Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Brand/OnPrimary 1/Accent': { resolved: '#458AFF', alias: 'Signature/Marski/Blue ribbon/50', @@ -3549,8 +3701,14 @@ export const marski = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#F6F6F7', @@ -3568,7 +3726,10 @@ export const marski = { resolved: '#E0E3E5', alias: 'Signature/Marski/Elephant/20', }, - 'Surface/Secondary/Hover': { resolved: '#e0e2e3' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#575757', alias: 'Neutral/60' }, 'Surface/Brand/Accent/OnAccent/Accent': { resolved: '#E0E3E5', @@ -3689,7 +3850,10 @@ export const marski = { resolved: '#0D57F3', alias: 'Signature/Marski/Blue ribbon/70', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b6bdc2' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -3712,7 +3876,10 @@ export const marski = { resolved: '#3E1118', alias: 'Signature/Marski/Aubergine/100', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#51262b' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -3774,7 +3941,8 @@ export const marski = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#c3b1b2', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -3793,7 +3961,8 @@ export const marski = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#9d8081', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -3803,7 +3972,10 @@ export const marski = { resolved: '#0D57F3', alias: 'Signature/Marski/Blue ribbon/70', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#1a54e7' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -3840,7 +4012,10 @@ export const marski = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#3E1118', alias: 'Signature/Marski/Aubergine/100', @@ -3865,7 +4040,10 @@ export const marski = { resolved: '#3E1118', alias: 'Signature/Marski/Aubergine/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#51262b' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -3938,7 +4116,10 @@ export const marski = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', @@ -4211,7 +4392,10 @@ export const hotelNorge = { resolved: '#3A655C', alias: 'Signature/Hotel Norge/Emerald/80', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b3b4bd' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -4242,7 +4426,10 @@ export const hotelNorge = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Text/Brand/OnPrimary 1/Hover': { resolved: '#ffffff' }, + 'Text/Brand/OnPrimary 1/Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Brand/OnPrimary 1/Accent': { resolved: '#B7C5C8', alias: 'Signature/Hotel Norge/Dark blue/0', @@ -4283,8 +4470,14 @@ export const hotelNorge = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#F4F5F2', @@ -4302,7 +4495,10 @@ export const hotelNorge = { resolved: '#D9DAD6', alias: 'Signature/Hotel Norge/Off White/60', }, - 'Surface/Secondary/Hover': { resolved: '#e3e4df' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#C7DDD5', alias: 'Signature/Hotel Norge/Emerald/0', @@ -4426,7 +4622,10 @@ export const hotelNorge = { resolved: '#26544A', alias: 'Signature/Hotel Norge/Emerald/90', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b3b4bd' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -4449,7 +4648,10 @@ export const hotelNorge = { resolved: '#181E34', alias: 'Signature/Hotel Norge/Dark blue/100', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#2c3146' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -4511,7 +4713,8 @@ export const hotelNorge = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#b3b4bd', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -4530,7 +4733,8 @@ export const hotelNorge = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#838593', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -4540,7 +4744,10 @@ export const hotelNorge = { resolved: '#004337', alias: 'Signature/Hotel Norge/Emerald/100', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#215448' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -4577,7 +4784,10 @@ export const hotelNorge = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#004337', alias: 'Signature/Hotel Norge/Emerald/100', @@ -4602,7 +4812,10 @@ export const hotelNorge = { resolved: '#181E34', alias: 'Signature/Hotel Norge/Dark blue/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#2c3146' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -4675,7 +4888,10 @@ export const hotelNorge = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', @@ -4942,7 +5158,10 @@ export const grandHotel = { resolved: '#C27183', alias: 'Signature/Grand Hotel/Careys Pink/50', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b6b7b9' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -4970,7 +5189,10 @@ export const grandHotel = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Text/Brand/OnPrimary 1/Hover': { resolved: '#ffffff' }, + 'Text/Brand/OnPrimary 1/Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Brand/OnPrimary 1/Accent': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -5005,8 +5227,14 @@ export const grandHotel = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#F7F6F5', @@ -5024,7 +5252,10 @@ export const grandHotel = { resolved: '#EBEAE9', alias: 'Signature/Grand Hotel/Cloudy/10', }, - 'Surface/Secondary/Hover': { resolved: '#ebeae9' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#D7D5D1', alias: 'Signature/Grand Hotel/Cloudy/20', @@ -5148,7 +5379,10 @@ export const grandHotel = { resolved: '#AA546B', alias: 'Signature/Grand Hotel/Careys Pink/60', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b6b7b9' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -5171,7 +5405,10 @@ export const grandHotel = { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -5233,7 +5470,8 @@ export const grandHotel = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#b6b7b9', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -5252,7 +5490,8 @@ export const grandHotel = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#878a8d', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -5262,7 +5501,10 @@ export const grandHotel = { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#b8cad0' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -5271,7 +5513,10 @@ export const grandHotel = { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Brand/Tertiary/On fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Brand/Tertiary/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -5296,7 +5541,10 @@ export const grandHotel = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', @@ -5321,7 +5569,10 @@ export const grandHotel = { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -5366,7 +5617,10 @@ export const grandHotel = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#f2f2f2' }, + 'Component/Button/Muted/Fill/Hover inverted': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', @@ -5391,7 +5645,10 @@ export const grandHotel = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', @@ -5655,7 +5912,10 @@ export const theDock = { resolved: '#FC2826', alias: 'Signature/The Dock/Signal Red/50', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b5b5b5' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -5727,8 +5987,14 @@ export const theDock = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#FDFCF9', @@ -5746,7 +6012,10 @@ export const theDock = { resolved: '#F2E1C2', alias: 'Signature/The Dock/Sandbank Beige/20', }, - 'Surface/Secondary/Hover': { resolved: '#ebe5dc' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/Brand/Accent/Default': { resolved: '#B5CC87', alias: 'Signature/The Dock/Tundra Mint/30', @@ -5870,7 +6139,10 @@ export const theDock = { resolved: '#D62220', alias: 'Signature/The Dock/Signal Red/60', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b5b5b5' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -5893,7 +6165,10 @@ export const theDock = { resolved: '#3E1212', alias: 'Signature/The Dock/Rose Copper/90', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#512725' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -5955,7 +6230,8 @@ export const theDock = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#c4b1af', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -5974,7 +6250,8 @@ export const theDock = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#9d807e', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -5984,7 +6261,10 @@ export const theDock = { resolved: '#F2E1C2', alias: 'Signature/The Dock/Sandbank Beige/20', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#f3e4c8' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -5993,7 +6273,10 @@ export const theDock = { resolved: '#3E1212', alias: 'Signature/The Dock/Rose Copper/90', }, - 'Component/Button/Brand/Tertiary/On fill/Hover': { resolved: '#512725' }, + 'Component/Button/Brand/Tertiary/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -6018,7 +6301,10 @@ export const theDock = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#F2E1C2', alias: 'Signature/The Dock/Sandbank Beige/20', @@ -6043,7 +6329,10 @@ export const theDock = { resolved: '#3E1212', alias: 'Signature/The Dock/Rose Copper/90', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#512725' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -6088,7 +6377,10 @@ export const theDock = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#f2f2f2' }, + 'Component/Button/Muted/Fill/Hover inverted': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', @@ -6113,7 +6405,10 @@ export const theDock = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', @@ -6161,7 +6456,10 @@ export const partnerSAS = { resolved: '#C27183', alias: 'Signature/Grand Hotel/Careys Pink/50', }, - 'Text/Interactive/Inverted Hover': { resolved: '#b6b7b9' }, + 'Text/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Text/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' }, 'Text/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, @@ -6223,8 +6521,14 @@ export const partnerSAS = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Surface/Primary/Hover': { resolved: '#f2f2f2' }, - 'Surface/Primary/Hover Light': { resolved: '#e6e5e5' }, + 'Surface/Primary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, + 'Surface/Primary/Hover Light': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Surface/Primary/Hover Accent': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Primary/OnSurface/Default': { resolved: '#F7F6F5', @@ -6242,7 +6546,10 @@ export const partnerSAS = { resolved: '#EBEAE9', alias: 'Signature/Grand Hotel/Cloudy/10', }, - 'Surface/Secondary/Hover': { resolved: '#ebeae9' }, + 'Surface/Secondary/Hover': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Surface/UI Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -6326,7 +6633,10 @@ export const partnerSAS = { resolved: '#AA546B', alias: 'Signature/Grand Hotel/Careys Pink/60', }, - 'Icon/Interactive/Inverted Hover': { resolved: '#b6b7b9' }, + 'Icon/Interactive/Inverted Hover': { + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -6349,7 +6659,10 @@ export const partnerSAS = { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Brand/Primary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -6411,7 +6724,8 @@ export const partnerSAS = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/On fill/Hover inverted': { - resolved: '#b6b7b9', + resolved: '#FFFFFFB3', + alias: 'Neutral/Opacity/White/70', }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', @@ -6430,7 +6744,8 @@ export const partnerSAS = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#878a8d', + resolved: '#FFFFFF80', + alias: 'Neutral/Opacity/White/50', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', @@ -6440,7 +6755,10 @@ export const partnerSAS = { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', }, - 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#b8cad0' }, + 'Component/Button/Brand/Tertiary/Fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', @@ -6449,7 +6767,10 @@ export const partnerSAS = { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Brand/Tertiary/On fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Brand/Tertiary/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Brand/Tertiary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -6474,7 +6795,10 @@ export const partnerSAS = { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover': { + resolved: '#1F1C1B1A', + alias: 'Neutral/Opacity/Black/10', + }, 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', @@ -6499,7 +6823,10 @@ export const partnerSAS = { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Inverted/On fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Inverted/On fill/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Hover inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -6544,7 +6871,10 @@ export const partnerSAS = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#f2f2f2' }, + 'Component/Button/Muted/Fill/Hover inverted': { + resolved: '#1F1C1B0D', + alias: 'Neutral/Opacity/Black/5', + }, 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', @@ -6569,7 +6899,10 @@ export const partnerSAS = { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Border/Hover': { resolved: '#ffffff30' }, + 'Component/Button/Muted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Muted/Border/Disable': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10',