@purpurds/theme 7.13.1 → 8.0.0

package/src/telia-light.ts

@@ -0,0 +1,278 @@
+import {
+  purpurColorBackgroundInteractiveAutoFill,
+  purpurColorBackgroundInteractiveDestructive,
+  purpurColorBackgroundInteractiveDestructiveActive,
+  purpurColorBackgroundInteractiveDestructiveHover,
+  purpurColorBackgroundInteractiveDisabled,
+  purpurColorBackgroundInteractiveDisabledNegative,
+  purpurColorBackgroundInteractiveExpressive,
+  purpurColorBackgroundInteractiveExpressiveActive,
+  purpurColorBackgroundInteractiveExpressiveActiveNegative,
+  purpurColorBackgroundInteractiveExpressiveHover,
+  purpurColorBackgroundInteractiveExpressiveHoverNegative,
+  purpurColorBackgroundInteractiveExpressiveNegative,
+  purpurColorBackgroundInteractiveInactive,
+  purpurColorBackgroundInteractiveInactiveNegative,
+  purpurColorBackgroundInteractivePrimary,
+  purpurColorBackgroundInteractivePrimaryActive,
+  purpurColorBackgroundInteractivePrimaryActiveNegative,
+  purpurColorBackgroundInteractivePrimaryHover,
+  purpurColorBackgroundInteractivePrimaryHoverNegative,
+  purpurColorBackgroundInteractivePrimaryNegative,
+  purpurColorBackgroundInteractiveReadOnly,
+  purpurColorBackgroundInteractiveReadOnlyNegative,
+  purpurColorBackgroundInteractiveTransparentActive,
+  purpurColorBackgroundInteractiveTransparentActiveNegative,
+  purpurColorBackgroundInteractiveTransparentHover,
+  purpurColorBackgroundInteractiveTransparentHoverNegative,
+  purpurColorBackgroundOnImage,
+  purpurColorBackgroundOnImageNegative,
+  purpurColorBackgroundPrimary,
+  purpurColorBackgroundPrimaryNegative,
+  purpurColorBackgroundSecondary,
+  purpurColorBackgroundSecondaryNegative,
+  purpurColorBackgroundStatusAttention,
+  purpurColorBackgroundStatusBlackFriday,
+  purpurColorBackgroundStatusErrorMedium,
+  purpurColorBackgroundStatusErrorStrong,
+  purpurColorBackgroundStatusErrorStrongNegative,
+  purpurColorBackgroundStatusInfoMedium,
+  purpurColorBackgroundStatusInfoStrong,
+  purpurColorBackgroundStatusNeutral,
+  purpurColorBackgroundStatusSpecial,
+  purpurColorBackgroundStatusSuccessMedium,
+  purpurColorBackgroundStatusSuccessStrong,
+  purpurColorBackgroundStatusSuccessStrongNegative,
+  purpurColorBackgroundStatusWarningMedium,
+  purpurColorBackgroundStatusWarningStrong,
+  purpurColorBackgroundStatusWarningStrongNegative,
+  purpurColorBackgroundToneOnTonePrimary,
+  purpurColorBackgroundToneOnToneQuaternary,
+  purpurColorBackgroundToneOnToneSecondary,
+  purpurColorBackgroundToneOnToneTertiary,
+  purpurColorBorderInteractiveExpressive,
+  purpurColorBorderInteractiveFocus,
+  purpurColorBorderInteractivePrimary,
+  purpurColorBorderInteractivePrimaryActive,
+  purpurColorBorderInteractivePrimaryActiveNegative,
+  purpurColorBorderInteractivePrimaryHover,
+  purpurColorBorderInteractivePrimaryHoverNegative,
+  purpurColorBorderInteractivePrimaryNegative,
+  purpurColorBorderInteractiveSelected,
+  purpurColorBorderInteractiveSubtle,
+  purpurColorBorderInteractiveSubtleHover,
+  purpurColorBorderInteractiveSubtleHoverNegative,
+  purpurColorBorderInteractiveSubtleNegative,
+  purpurColorBorderMedium,
+  purpurColorBorderMediumNegative,
+  purpurColorBorderStatusError,
+  purpurColorBorderStatusErrorNegative,
+  purpurColorBorderStatusInfo,
+  purpurColorBorderStatusSuccess,
+  purpurColorBorderStatusSuccessNegative,
+  purpurColorBorderStatusWarning,
+  purpurColorBorderStrong,
+  purpurColorBorderStrongNegative,
+  purpurColorBorderWeak,
+  purpurColorBorderWeakNegative,
+  purpurColorBrandBeige,
+  purpurColorBrandCorePurple,
+  purpurColorBrandDeepBeige,
+  purpurColorBrandDeepPurple,
+  purpurColorBrandLightBeige,
+  purpurColorBrandLightPurple,
+  purpurColorBrandOffBlack,
+  purpurColorBrandWhite,
+  purpurColorTextDefault,
+  purpurColorTextDefaultNegative,
+  purpurColorTextInteractiveOnDestructive,
+  purpurColorTextInteractiveOnExpressive,
+  purpurColorTextInteractiveOnExpressiveActive,
+  purpurColorTextInteractiveOnExpressiveActiveNegative,
+  purpurColorTextInteractiveOnExpressiveHover,
+  purpurColorTextInteractiveOnExpressiveHoverNegative,
+  purpurColorTextInteractiveOnExpressiveNegative,
+  purpurColorTextInteractiveOnPrimary,
+  purpurColorTextInteractiveOnPrimaryNegative,
+  purpurColorTextInteractivePrimary,
+  purpurColorTextInteractivePrimaryActive,
+  purpurColorTextInteractivePrimaryActiveNegative,
+  purpurColorTextInteractivePrimaryHover,
+  purpurColorTextInteractivePrimaryHoverNegative,
+  purpurColorTextInteractivePrimaryNegative,
+  purpurColorTextInteractiveSelected,
+  purpurColorTextMedium,
+  purpurColorTextMediumNegative,
+  purpurColorTextStatusAttention,
+  purpurColorTextStatusBlackFriday,
+  purpurColorTextStatusDiscount,
+  purpurColorTextStatusErrorMedium,
+  purpurColorTextStatusErrorMediumNegative,
+  purpurColorTextStatusErrorStrong,
+  purpurColorTextStatusErrorStrongNegative,
+  purpurColorTextStatusInfoMedium,
+  purpurColorTextStatusInfoStrong,
+  purpurColorTextStatusNeutral,
+  purpurColorTextStatusSpecial,
+  purpurColorTextStatusSuccessMedium,
+  purpurColorTextStatusSuccessStrong,
+  purpurColorTextStatusSuccessStrongNegative,
+  purpurColorTextStatusWarningMedium,
+  purpurColorTextStatusWarningMediumNegative,
+  purpurColorTextStatusWarningStrong,
+  purpurColorTextToneOnTonePrimary,
+  purpurColorTextToneOnToneSecondary,
+  purpurColorTextToneOnToneTertiary,
+  purpurColorTextWeak,
+  purpurColorTextWeakNegative,
+} from "@purpurds/tokens";
+
+import type { ThemeProps } from "./theme-props";
+
+export const light = {
+  colorBrandDeepPurple: purpurColorBrandDeepPurple,
+  colorBrandCorePurple: purpurColorBrandCorePurple,
+  colorBrandLightPurple: purpurColorBrandLightPurple,
+  colorBrandDeepBeige: purpurColorBrandDeepBeige,
+  colorBrandBeige: purpurColorBrandBeige,
+  colorBrandLightBeige: purpurColorBrandLightBeige,
+  colorBrandOffBlack: purpurColorBrandOffBlack,
+  colorBrandWhite: purpurColorBrandWhite,
+
+  colorTextDefault: purpurColorTextDefault,
+  colorTextMedium: purpurColorTextMedium,
+  colorTextWeak: purpurColorTextWeak,
+  colorTextDefaultNegative: purpurColorTextDefaultNegative,
+  colorTextMediumNegative: purpurColorTextMediumNegative,
+  colorTextWeakNegative: purpurColorTextWeakNegative,
+
+  colorTextInteractivePrimary: purpurColorTextInteractivePrimary,
+  colorTextInteractivePrimaryHover: purpurColorTextInteractivePrimaryHover,
+  colorTextInteractivePrimaryActive: purpurColorTextInteractivePrimaryActive,
+  colorTextInteractiveOnPrimary: purpurColorTextInteractiveOnPrimary,
+  colorTextInteractiveOnExpressive: purpurColorTextInteractiveOnExpressive,
+  colorTextInteractiveOnExpressiveHover: purpurColorTextInteractiveOnExpressiveHover,
+  colorTextInteractiveOnExpressiveActive: purpurColorTextInteractiveOnExpressiveActive,
+  colorTextInteractiveOnDestructive: purpurColorTextInteractiveOnDestructive,
+  colorTextInteractiveSelected: purpurColorTextInteractiveSelected,
+  colorTextInteractivePrimaryNegative: purpurColorTextInteractivePrimaryNegative,
+  colorTextInteractivePrimaryHoverNegative: purpurColorTextInteractivePrimaryHoverNegative,
+  colorTextInteractivePrimaryActiveNegative: purpurColorTextInteractivePrimaryActiveNegative,
+  colorTextInteractiveOnPrimaryNegative: purpurColorTextInteractiveOnPrimaryNegative,
+  colorTextInteractiveOnExpressiveNegative: purpurColorTextInteractiveOnExpressiveNegative,
+  colorTextInteractiveOnExpressiveHoverNegative:
+    purpurColorTextInteractiveOnExpressiveHoverNegative,
+  colorTextInteractiveOnExpressiveActiveNegative:
+    purpurColorTextInteractiveOnExpressiveActiveNegative,
+
+  colorTextStatusInfoMedium: purpurColorTextStatusInfoMedium,
+  colorTextStatusInfoStrong: purpurColorTextStatusInfoStrong,
+  colorTextStatusSuccessMedium: purpurColorTextStatusSuccessMedium,
+  colorTextStatusSuccessStrong: purpurColorTextStatusSuccessStrong,
+  colorTextStatusWarningMedium: purpurColorTextStatusWarningMedium,
+  colorTextStatusWarningStrong: purpurColorTextStatusWarningStrong,
+  colorTextStatusErrorMedium: purpurColorTextStatusErrorMedium,
+  colorTextStatusErrorStrong: purpurColorTextStatusErrorStrong,
+  colorTextStatusNeutral: purpurColorTextStatusNeutral,
+  colorTextStatusSpecial: purpurColorTextStatusSpecial,
+  colorTextStatusAttention: purpurColorTextStatusAttention,
+  colorTextStatusDiscount: purpurColorTextStatusDiscount,
+  colorTextStatusBlackFriday: purpurColorTextStatusBlackFriday,
+  colorTextStatusSuccessStrongNegative: purpurColorTextStatusSuccessStrongNegative,
+  colorTextStatusErrorMediumNegative: purpurColorTextStatusErrorMediumNegative,
+  colorTextStatusErrorStrongNegative: purpurColorTextStatusErrorStrongNegative,
+  colorTextStatusWarningMediumNegative: purpurColorTextStatusWarningMediumNegative,
+
+  colorTextToneOnTonePrimary: purpurColorTextToneOnTonePrimary,
+  colorTextToneOnToneSecondary: purpurColorTextToneOnToneSecondary,
+  colorTextToneOnToneTertiary: purpurColorTextToneOnToneTertiary,
+
+  colorBackgroundPrimary: purpurColorBackgroundPrimary,
+  colorBackgroundSecondary: purpurColorBackgroundSecondary,
+  colorBackgroundOnImage: purpurColorBackgroundOnImage,
+  colorBackgroundPrimaryNegative: purpurColorBackgroundPrimaryNegative,
+  colorBackgroundSecondaryNegative: purpurColorBackgroundSecondaryNegative,
+  colorBackgroundOnImageNegative: purpurColorBackgroundOnImageNegative,
+
+  colorBackgroundInteractivePrimary: purpurColorBackgroundInteractivePrimary,
+  colorBackgroundInteractivePrimaryHover: purpurColorBackgroundInteractivePrimaryHover,
+  colorBackgroundInteractivePrimaryActive: purpurColorBackgroundInteractivePrimaryActive,
+  colorBackgroundInteractiveExpressive: purpurColorBackgroundInteractiveExpressive,
+  colorBackgroundInteractiveExpressiveHover: purpurColorBackgroundInteractiveExpressiveHover,
+  colorBackgroundInteractiveExpressiveActive: purpurColorBackgroundInteractiveExpressiveActive,
+  colorBackgroundInteractiveTransparentHover: purpurColorBackgroundInteractiveTransparentHover,
+  colorBackgroundInteractiveTransparentActive: purpurColorBackgroundInteractiveTransparentActive,
+  colorBackgroundInteractiveDisabled: purpurColorBackgroundInteractiveDisabled,
+  colorBackgroundInteractiveReadOnly: purpurColorBackgroundInteractiveReadOnly,
+  colorBackgroundInteractiveInactive: purpurColorBackgroundInteractiveInactive,
+  colorBackgroundInteractiveDestructive: purpurColorBackgroundInteractiveDestructive,
+  colorBackgroundInteractiveDestructiveHover: purpurColorBackgroundInteractiveDestructiveHover,
+  colorBackgroundInteractiveDestructiveActive: purpurColorBackgroundInteractiveDestructiveActive,
+  colorBackgroundInteractiveAutoFill: purpurColorBackgroundInteractiveAutoFill,
+  colorBackgroundInteractivePrimaryNegative: purpurColorBackgroundInteractivePrimaryNegative,
+  colorBackgroundInteractivePrimaryHoverNegative:
+    purpurColorBackgroundInteractivePrimaryHoverNegative,
+  colorBackgroundInteractivePrimaryActiveNegative:
+    purpurColorBackgroundInteractivePrimaryActiveNegative,
+  colorBackgroundInteractiveExpressiveNegative: purpurColorBackgroundInteractiveExpressiveNegative,
+  colorBackgroundInteractiveExpressiveHoverNegative:
+    purpurColorBackgroundInteractiveExpressiveHoverNegative,
+  colorBackgroundInteractiveExpressiveActiveNegative:
+    purpurColorBackgroundInteractiveExpressiveActiveNegative,
+  colorBackgroundInteractiveTransparentHoverNegative:
+    purpurColorBackgroundInteractiveTransparentHoverNegative,
+  colorBackgroundInteractiveTransparentActiveNegative:
+    purpurColorBackgroundInteractiveTransparentActiveNegative,
+  colorBackgroundInteractiveDisabledNegative: purpurColorBackgroundInteractiveDisabledNegative,
+  colorBackgroundInteractiveInactiveNegative: purpurColorBackgroundInteractiveInactiveNegative,
+  colorBackgroundInteractiveReadOnlyNegative: purpurColorBackgroundInteractiveReadOnlyNegative,
+
+  colorBackgroundStatusInfoMedium: purpurColorBackgroundStatusInfoMedium,
+  colorBackgroundStatusInfoStrong: purpurColorBackgroundStatusInfoStrong,
+  colorBackgroundStatusSuccessMedium: purpurColorBackgroundStatusSuccessMedium,
+  colorBackgroundStatusSuccessStrong: purpurColorBackgroundStatusSuccessStrong,
+  colorBackgroundStatusWarningMedium: purpurColorBackgroundStatusWarningMedium,
+  colorBackgroundStatusWarningStrong: purpurColorBackgroundStatusWarningStrong,
+  colorBackgroundStatusErrorMedium: purpurColorBackgroundStatusErrorMedium,
+  colorBackgroundStatusErrorStrong: purpurColorBackgroundStatusErrorStrong,
+  colorBackgroundStatusNeutral: purpurColorBackgroundStatusNeutral,
+  colorBackgroundStatusSpecial: purpurColorBackgroundStatusSpecial,
+  colorBackgroundStatusAttention: purpurColorBackgroundStatusAttention,
+  colorBackgroundStatusBlackFriday: purpurColorBackgroundStatusBlackFriday,
+  colorBackgroundStatusSuccessStrongNegative: purpurColorBackgroundStatusSuccessStrongNegative,
+  colorBackgroundStatusWarningStrongNegative: purpurColorBackgroundStatusWarningStrongNegative,
+  colorBackgroundStatusErrorStrongNegative: purpurColorBackgroundStatusErrorStrongNegative,
+
+  colorBackgroundToneOnTonePrimary: purpurColorBackgroundToneOnTonePrimary,
+  colorBackgroundToneOnToneSecondary: purpurColorBackgroundToneOnToneSecondary,
+  colorBackgroundToneOnToneTertiary: purpurColorBackgroundToneOnToneTertiary,
+  colorBackgroundToneOnToneQuaternary: purpurColorBackgroundToneOnToneQuaternary,
+
+  colorBorderWeak: purpurColorBorderWeak,
+  colorBorderMedium: purpurColorBorderMedium,
+  colorBorderStrong: purpurColorBorderStrong,
+  colorBorderWeakNegative: purpurColorBorderWeakNegative,
+  colorBorderMediumNegative: purpurColorBorderMediumNegative,
+  colorBorderStrongNegative: purpurColorBorderStrongNegative,
+
+  colorBorderInteractivePrimary: purpurColorBorderInteractivePrimary,
+  colorBorderInteractivePrimaryHover: purpurColorBorderInteractivePrimaryHover,
+  colorBorderInteractivePrimaryActive: purpurColorBorderInteractivePrimaryActive,
+  colorBorderInteractiveFocus: purpurColorBorderInteractiveFocus,
+  colorBorderInteractiveExpressive: purpurColorBorderInteractiveExpressive,
+  colorBorderInteractiveSubtle: purpurColorBorderInteractiveSubtle,
+  colorBorderInteractiveSubtleHover: purpurColorBorderInteractiveSubtleHover,
+  colorBorderInteractiveSelected: purpurColorBorderInteractiveSelected,
+  colorBorderInteractivePrimaryNegative: purpurColorBorderInteractivePrimaryNegative,
+  colorBorderInteractivePrimaryHoverNegative: purpurColorBorderInteractivePrimaryHoverNegative,
+  colorBorderInteractivePrimaryActiveNegative: purpurColorBorderInteractivePrimaryActiveNegative,
+  colorBorderInteractiveSubtleNegative: purpurColorBorderInteractiveSubtleNegative,
+  colorBorderInteractiveSubtleHoverNegative: purpurColorBorderInteractiveSubtleHoverNegative,
+
+  colorBorderStatusError: purpurColorBorderStatusError,
+  colorBorderStatusWarning: purpurColorBorderStatusWarning,
+  colorBorderStatusInfo: purpurColorBorderStatusInfo,
+  colorBorderStatusSuccess: purpurColorBorderStatusSuccess,
+  colorBorderStatusErrorNegative: purpurColorBorderStatusErrorNegative,
+  colorBorderStatusSuccessNegative: purpurColorBorderStatusSuccessNegative,
+} satisfies ThemeProps;

package/src/telia-theme.ts

@@ -1,90 +1,8 @@
-import {
-  purpurColorBackgroundInteractiveDisabled,
-  purpurColorBackgroundInteractivePrimary,
-  purpurColorBackgroundInteractivePrimaryActive,
-  purpurColorBackgroundInteractivePrimaryHover,
-  purpurColorBackgroundInteractiveTransparentActive,
-  purpurColorBackgroundInteractiveTransparentHover,
-  purpurColorBackgroundPrimary,
-  purpurColorBackgroundSecondary,
-  purpurColorBorderInteractiveFocus,
-  purpurColorBorderInteractivePrimary,
-  purpurColorBorderInteractivePrimaryHover,
-  purpurColorBorderInteractiveSubtle,
-  purpurColorBorderMedium,
-  purpurColorBorderWeak,
-  purpurColorBrandCorePurple,
-  purpurColorBrandDeepPurple,
-  purpurColorBrandOffBlack,
-  purpurColorTextDefault,
-  purpurColorTextInteractiveOnPrimary,
-  purpurColorTextInteractivePrimary,
-  purpurColorTextInteractivePrimaryActive,
-  purpurColorTextInteractivePrimaryHover,
-  purpurColorTextMedium,
-  purpurColorTextWeak,
-} from "@purpurds/tokens";
-
-import type { Theme } from "./types";
+import { dark } from "./telia-dark";
+import { light } from "./telia-light";
+import type { ThemeProps } from "./theme-props";
 
 export const teliaTheme = {
-  light: {
-    colorBackgroundPrimary: purpurColorBackgroundPrimary,
-    colorBackgroundSecondary: purpurColorBackgroundSecondary,
-    colorBackgroundInteractivePrimary: purpurColorBackgroundInteractivePrimary,
-    colorBackgroundInteractivePrimaryHover: purpurColorBackgroundInteractivePrimaryHover,
-    colorBackgroundInteractivePrimaryActive: purpurColorBackgroundInteractivePrimaryActive,
-    colorBackgroundInteractiveTransparentHover: purpurColorBackgroundInteractiveTransparentHover,
-    colorBackgroundInteractiveTransparentActive: purpurColorBackgroundInteractiveTransparentActive,
-    colorBackgroundInteractiveDisabled: purpurColorBackgroundInteractiveDisabled,
-
-    colorTextDefault: purpurColorTextDefault,
-    colorTextMedium: purpurColorTextMedium,
-    colorTextWeak: purpurColorTextWeak,
-    colorTextInteractivePrimary: purpurColorTextInteractivePrimary,
-    colorTextInteractivePrimaryActive: purpurColorTextInteractivePrimaryActive,
-    colorTextInteractivePrimaryHover: purpurColorTextInteractivePrimaryHover,
-    colorTextInteractiveOnPrimary: purpurColorTextInteractiveOnPrimary,
-
-    colorBrandDeepPurple: purpurColorBrandDeepPurple,
-    colorBrandCorePurple: purpurColorBrandCorePurple,
-    colorBrandOffBlack: purpurColorBrandOffBlack,
-
-    colorBorderWeak: purpurColorBorderWeak,
-    colorBorderMedium: purpurColorBorderMedium,
-    colorBorderInteractivePrimary: purpurColorBorderInteractivePrimary,
-    colorBorderInteractivePrimaryHover: purpurColorBorderInteractivePrimaryHover,
-    colorBorderInteractiveFocus: purpurColorBorderInteractiveFocus,
-    colorBorderInteractiveSubtle: purpurColorBorderInteractiveSubtle,
-  },
-  dark: {
-    colorBackgroundPrimary: "var(--purpur-color-gray-900)",
-    colorBackgroundSecondary: "var(--purpur-color-gray-850)",
-    colorBackgroundInteractivePrimary: "var(--purpur-color-purple-100)",
-    colorBackgroundInteractivePrimaryHover: "var(--purpur-color-purple-200)",
-    colorBackgroundInteractivePrimaryActive: "var(--purpur-color-purple-300)",
-    colorBackgroundInteractiveTransparentHover: "var(color-purple-800)",
-    colorBackgroundInteractiveTransparentActive: "var(--purpur-color-purple-700)",
-    colorBackgroundInteractiveDisabled: "var(--purpur-color-gray-700)",
-
-    colorTextDefault: "var(--purpur-color-transparent-white-950)",
-    colorTextMedium: "var(--purpur-color-transparent-white-850)",
-    colorTextWeak: "var(--purpur-color-transparent-white-700)",
-    colorTextInteractivePrimary: "var(--purpur-color-purple-100)",
-    colorTextInteractivePrimaryActive: "var(--purpur-color-purple-200)",
-    colorTextInteractivePrimaryHover: "var(--purpur-color-purple-200)",
-    colorTextInteractiveOnPrimary: "var(--purpur-color-purple-800)",
-
-    colorBrandDeepPurple: "var(--purpur-color-purple-200)",
-    colorBrandCorePurple: "var(--purpur-color-purple-400)",
-    colorBrandOffBlack: "var(--purpur-color-transparent-white-950)",
-
-    colorBorderWeak: "var(--purpur-color-transparent-white-150)",
-    colorBorderMedium: "var(--purpur-color-transparent-white-300)",
-    colorBorderStrong: "var(--purpur-color-transparent-white-500)",
-    colorBorderInteractivePrimary: "var(--purpur-color-purple-100)",
-    colorBorderInteractivePrimaryHover: "var(--purpur-color-purple-200)",
-    colorBorderInteractiveFocus: "var(--purpur-color-purple-300)",
-    colorBorderInteractiveSubtle: "var(--purpur-color-transparent-white-800)",
-  },
-} satisfies Theme;
+  light,
+  dark,
+} satisfies { light: ThemeProps; dark: ThemeProps };

package/src/theme-props.ts

@@ -23,21 +23,27 @@ export type ThemeProps = {
   colorTextInteractiveOnPrimary?: string;
   colorTextInteractiveOnPrimaryNegative?: string;
   colorTextInteractivePrimaryNegative?: string;
-  colorTextInteractivePrimaryNegativeHover?: string;
-  colorTextInteractivePrimaryNegativeActive?: string;
+  colorTextInteractivePrimaryHoverNegative?: string;
+  colorTextInteractivePrimaryActiveNegative?: string;
   colorTextInteractiveOnExpressive?: string;
   colorTextInteractiveOnExpressiveNegative?: string;
-  colorTextInteractiveOnExpressiveNegativeHover?: string;
-  colorTextInteractiveOnExpressiveNegativeActive?: string;
+  colorTextInteractiveOnExpressiveHover?: string;
+  colorTextInteractiveOnExpressiveHoverNegative?: string;
+  colorTextInteractiveOnExpressiveActive?: string;
+  colorTextInteractiveOnExpressiveActiveNegative?: string;
   colorTextInteractiveOnDestructive?: string;
   colorTextInteractiveSelected?: string;
   colorTextStatusDiscount?: string;
   colorTextStatusErrorStrong?: string;
+  colorTextStatusErrorStrongNegative?: string;
   colorTextStatusErrorMedium?: string;
+  colorTextStatusErrorMediumNegative?: string;
   colorTextStatusSuccessStrong?: string;
+  colorTextStatusSuccessStrongNegative?: string;
   colorTextStatusSuccessMedium?: string;
   colorTextStatusWarningStrong?: string;
   colorTextStatusWarningMedium?: string;
+  colorTextStatusWarningMediumNegative?: string;
   colorTextStatusInfoStrong?: string;
   colorTextStatusInfoMedium?: string;
   colorTextStatusNeutral?: string;
@@ -58,35 +64,38 @@ export type ThemeProps = {
   colorBackgroundInteractivePrimaryHover?: string;
   colorBackgroundInteractivePrimaryActive?: string;
   colorBackgroundInteractivePrimaryNegative?: string;
-  colorBackgroundInteractivePrimaryNegativeHover?: string;
-  colorBackgroundInteractivePrimaryNegativeActive?: string;
+  colorBackgroundInteractivePrimaryHoverNegative?: string;
+  colorBackgroundInteractivePrimaryActiveNegative?: string;
   colorBackgroundInteractiveExpressive?: string;
   colorBackgroundInteractiveExpressiveHover?: string;
   colorBackgroundInteractiveExpressiveActive?: string;
   colorBackgroundInteractiveExpressiveNegative?: string;
-  colorBackgroundInteractiveExpressiveNegativeHover?: string;
-  colorBackgroundInteractiveExpressiveNegativeActive?: string;
+  colorBackgroundInteractiveExpressiveHoverNegative?: string;
+  colorBackgroundInteractiveExpressiveActiveNegative?: string;
   colorBackgroundInteractiveDisabled?: string;
   colorBackgroundInteractiveDisabledNegative?: string;
-  colorBackgroundInteractiveTransparent?: string;
   colorBackgroundInteractiveTransparentHover?: string;
-  colorBackgroundInteractiveTransparentNegativeHover?: string;
+  colorBackgroundInteractiveTransparentHoverNegative?: string;
   colorBackgroundInteractiveTransparentActive?: string;
-  colorBackgroundInteractiveTransparentNegativeActive?: string;
+  colorBackgroundInteractiveTransparentActiveNegative?: string;
   colorBackgroundInteractiveInactive?: string;
   colorBackgroundInteractiveInactiveNegative?: string;
   colorBackgroundInteractiveReadOnly?: string;
+  colorBackgroundInteractiveReadOnlyNegative?: string;
   colorBackgroundInteractiveDestructive?: string;
   colorBackgroundInteractiveDestructiveHover?: string;
   colorBackgroundInteractiveDestructiveActive?: string;
-  colorBackgroundStatusInfo?: string;
+  colorBackgroundStatusInfoMedium?: string;
   colorBackgroundStatusInfoStrong?: string;
-  colorBackgroundStatusSuccess?: string;
+  colorBackgroundStatusSuccessMedium?: string;
   colorBackgroundStatusSuccessStrong?: string;
-  colorBackgroundStatusError?: string;
+  colorBackgroundStatusSuccessStrongNegative?: string;
+  colorBackgroundStatusErrorMedium?: string;
   colorBackgroundStatusErrorStrong?: string;
-  colorBackgroundStatusWarning?: string;
+  colorBackgroundStatusErrorStrongNegative?: string;
+  colorBackgroundStatusWarningMedium?: string;
   colorBackgroundStatusWarningStrong?: string;
+  colorBackgroundStatusWarningStrongNegative?: string;
   colorBackgroundStatusNeutral?: string;
   colorBackgroundStatusSpecial?: string;
   colorBackgroundStatusAttention?: string;
@@ -106,15 +115,20 @@ export type ThemeProps = {
   colorBorderInteractivePrimaryNegative?: string;
   colorBorderInteractivePrimaryHover?: string;
   colorBorderInteractivePrimaryActive?: string;
-  colorBorderInteractivePrimaryNegativeHover?: string;
-  colorBorderInteractivePrimaryNegativeActive?: string;
+  colorBorderInteractivePrimaryHoverNegative?: string;
+  colorBorderInteractivePrimaryActiveNegative?: string;
+  colorBorderInteractiveExpressive?: string;
   colorBorderInteractiveSelected?: string;
   colorBorderInteractiveSubtle?: string;
+  colorBorderInteractiveSubtleNegative?: string;
   colorBorderInteractiveSubtleHover?: string;
+  colorBorderInteractiveSubtleHoverNegative?: string;
   colorBorderStatusError?: string;
+  colorBorderStatusErrorNegative?: string;
   colorBorderStatusWarning?: string;
   colorBorderStatusInfo?: string;
   colorBorderStatusSuccess?: string;
+  colorBorderStatusSuccessNegative?: string;
   colorOverlayDefault?: string;
   spacingGutterSm?: string;
   spacingGutterMd?: string;
@@ -130,6 +144,7 @@ export type ThemeProps = {
   typographyWeightMedium?: string;
   typographyWeightBold?: string;
   typographyLineHeightTight?: string;
+  typographyLineHeightSnug?: string;
   typographyLineHeightDefault?: string;
   typographyLineHeightLoose?: string;
   typographyLineHeightLooser?: string;

package/src/theme.ts

@@ -1,4 +1,6 @@
+export { teliaTheme } from "./telia-theme";
 export { type ThemeProps } from "./theme-props";
-export { ThemeProvider } from "./ThemeProvider";
-export { type ColorScheme, type Theme } from "./types";
+export { ThemeProvider, useTheme } from "./ThemeProvider";
+export { type ColorOptions, type ColorScheme, type Theme } from "./types";
+export { useApplyTheme } from "./useApplyTheme";
 export { useColorScheme } from "./useColorScheme";

package/src/types.ts

@@ -12,4 +12,5 @@ export type ColorOptions = ColorScheme | "auto";
 export type ThemeContextType = {
   colorScheme: ColorOptions;
   setColorScheme: (colorScheme: ColorOptions) => void;
+  options?: { heroBannerColorScheme?: ColorScheme; footerColorScheme?: ColorScheme };
 };

package/src/useApplyTheme.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { kebabCase } from "change-case";
+
+import { teliaTheme } from "./telia-theme";
+import type { ColorScheme, Theme } from "./types";
+
+type Props = {
+  theme?: Theme;
+  cssVariablesSelector?: string;
+  currentColorScheme?: ColorScheme;
+};
+
+export const useApplyTheme = ({
+  theme = teliaTheme,
+  cssVariablesSelector,
+  currentColorScheme,
+}: Props) => {
+  useEffect(() => {
+    if (currentColorScheme) {
+      Object.entries(theme?.[currentColorScheme] ?? teliaTheme[currentColorScheme]).forEach(
+        ([key, value]) => {
+          const element = cssVariablesSelector
+            ? (document.querySelector(cssVariablesSelector) as HTMLElement)
+            : null;
+
+          (element ?? document.documentElement).style.setProperty(
+            `--purpur-${kebabCase(key)}`,
+            value
+          );
+        }
+      );
+    }
+  }, [theme, cssVariablesSelector, currentColorScheme]);
+};