Repository: AtB-AS/planner-web
Pull request #514: fix: Oms colors and theme fixes
Author: login: jorelosorio
Labels: name: C-bug
Created: 2025-04-03T07:29:52Z | Merged: 2025-04-28T13:01:05Z

Requires https://github.com/AtB-AS/planner-web/pull/507 to be merged first


Diff:
diff --git a/package.json b/package.json
index 819e78768..a746501c8 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@apollo/client": "^3.11.2",
     "@atb-as/config-specs": "^3.27.0",
-    "@atb-as/theme": "^13.1.4",
+    "@atb-as/theme": "^13.1.5",
     "@github/combobox-nav": "^3.0.1",
     "@internationalized/date": "^3.5.5",
     "@isaacs/ttlcache": "^1.4.1",
diff --git a/public/fb_dark.svg b/public/fb_dark.svg
new file mode 100644
index 000000000..d224ba623
--- /dev/null
+++ b/public/fb_dark.svg
@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1_2)">
+    <path d="M11.74 21.0003V11.8747H14.8L15.26 8.31918H11.74V6.05029C11.74 5.02029 12.0244 4.32029 13.5 4.32029H15.3889V1.14029C14.4748 1.04258 13.556 0.995845 12.6367 1.00029C9.92111 1.00029 8.06222 2.65473 8.06222 5.70029V8.32029H5V11.8758H8.07V21.0003H11.7367H11.74Z" fill="black"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1_2">
+      <rect width="21" height="21" fill="black"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/public/ig_dark.svg b/public/ig_dark.svg
new file mode 100644
index 000000000..d7f79ae14
--- /dev/null
+++ b/public/ig_dark.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.9399 5.87692C19.9232 5.04731 19.7661 4.22653 19.4751 3.44946C19.224 2.78217 18.8304 2.17769 18.3217 1.67816C17.8221 1.16952 17.2176 0.775959 16.5504 0.524933C15.7733 0.233955 14.9525 0.0768014 14.1229 0.0601485C13.0563 0.0111125 12.7159 0 10 0C7.28414 0 6.94371 0.0111125 5.87692 0.0601485C5.04737 0.0767601 4.22664 0.233916 3.44963 0.524933C2.78239 0.776085 2.17797 1.16976 1.67851 1.67851C1.16976 2.17797 0.776085 2.78239 0.524933 3.44963C0.233975 4.22666 0.0768213 5.04737 0.0601485 5.87692C0.0111125 6.94371 0 7.28485 0 10C0 12.7151 0.0111125 13.0563 0.0601485 14.1229C0.0767403 14.9525 0.233896 15.7733 0.524933 16.5504C0.776011 17.2177 1.16963 17.8221 1.67834 18.3217C2.17786 18.8304 2.78235 19.224 3.44963 19.4751C4.22669 19.7661 5.04748 19.9233 5.87709 19.9399C6.94371 19.9889 7.28414 20 10 20C12.7159 20 13.0563 19.9889 14.1229 19.9399C14.9525 19.9232 15.7733 19.7661 16.5504 19.4751C17.2147 19.2181 17.818 18.8253 18.3216 18.3216C18.8253 17.818 19.2181 17.2147 19.4751 16.5504C19.7661 15.7733 19.9233 14.9525 19.9399 14.1229C19.9889 13.0563 20 12.7159 20 10C20 7.28414 19.9889 6.94371 19.9399 5.87692ZM18.1398 14.0405C18.1323 14.6747 18.0158 15.3028 17.7953 15.8974C17.629 16.3287 17.3742 16.7204 17.0473 17.0473C16.7204 17.3742 16.3287 17.629 15.8974 17.7953C15.3028 18.0158 14.6747 18.1324 14.0405 18.14C12.9863 18.1881 12.67 18.1984 9.99965 18.1984C7.3293 18.1984 7.01304 18.1881 5.95876 18.14C5.32463 18.1325 4.69652 18.016 4.10192 17.7955C3.66761 17.6352 3.27475 17.3796 2.95222 17.0474C2.62035 16.7248 2.36498 16.332 2.20486 15.8977C1.98424 15.303 1.86753 14.6748 1.85984 14.0405C1.81169 12.9861 1.80146 12.6698 1.80146 9.99965C1.80146 7.32948 1.81169 7.01339 1.85984 5.95876C1.86751 5.32472 1.98422 4.69673 2.20486 4.10227C2.36518 3.66796 2.6208 3.2751 2.95292 2.95257C3.27555 2.62041 3.66854 2.36478 4.10298 2.2045C4.69761 1.98411 5.3257 1.86758 5.95982 1.86002C7.01427 1.81186 7.33053 1.80163 10.0007 1.80163C12.6709 1.80163 12.9871 1.81186 14.0416 1.86002C14.6756 1.86771 15.3035 1.98436 15.8979 2.20486C16.3322 2.36518 16.7251 2.6208 17.0476 2.95292C17.3797 3.27545 17.6353 3.66831 17.7957 4.10262C18.0161 4.69725 18.1326 5.32535 18.1402 5.95947C18.1883 7.01392 18.1985 7.33018 18.1985 10.0004C18.1985 12.6705 18.1881 12.9866 18.14 14.0412L18.1398 14.0405ZM10 4.8648C8.9844 4.8648 7.9916 5.16596 7.14715 5.73019C6.3027 6.29443 5.64454 7.0964 5.25587 8.03469C4.86721 8.97299 4.76551 10.0055 4.96363 11.0016C5.16175 11.9976 5.6508 12.9126 6.36893 13.6308C7.08705 14.3489 8.00201 14.838 8.9981 15.0362C9.99418 15.2343 11.0267 15.1326 11.965 14.744C12.9033 14.3554 13.7053 13.6972 14.2695 12.8528C14.8338 12.0084 15.135 11.0156 15.135 10C15.135 9.32564 15.0022 8.65789 14.7442 8.03486C14.4861 7.41183 14.1079 6.84572 13.6311 6.36887C13.1542 5.89202 12.5882 5.51377 11.9651 5.2557C11.3421 4.99763 10.6744 4.8648 10 4.8648ZM10 13.3332C9.34065 13.3332 8.6961 13.1377 8.14787 12.7714C7.59964 12.4051 7.17234 11.8844 6.92002 11.2752C6.6677 10.6661 6.60168 9.99577 6.73031 9.34909C6.85895 8.70241 7.17645 8.10839 7.64269 7.64216C8.10892 7.17592 8.70294 6.85842 9.34962 6.72978C9.9963 6.60115 10.6666 6.66717 11.2758 6.91949C11.8849 7.17182 12.4056 7.59911 12.7719 8.14734C13.1382 8.69557 13.3337 9.34012 13.3337 9.99947C13.3338 10.4373 13.2476 10.8708 13.08 11.2753C12.9125 11.6798 12.6669 12.0473 12.3574 12.3569C12.0478 12.6665 11.6803 12.9121 11.2758 13.0796C10.8713 13.2472 10.4378 13.3334 10 13.3334V13.3332ZM15.338 3.46198C15.1008 3.46198 14.8689 3.53233 14.6717 3.66412C14.4744 3.79592 14.3207 3.98325 14.2299 4.20242C14.1391 4.42158 14.1154 4.66275 14.1617 4.89542C14.2079 5.12809 14.3222 5.34181 14.4899 5.50956C14.6577 5.6773 14.8714 5.79154 15.104 5.83782C15.3367 5.8841 15.5779 5.86035 15.7971 5.76956C16.0162 5.67878 16.2036 5.52504 16.3353 5.3278C16.4671 5.13055 16.5375 4.89865 16.5375 4.66142C16.5375 4.34331 16.4111 4.03823 16.1862 3.81329C15.9612 3.58835 15.6562 3.46198 15.338 3.46198Z" fill="black"/>
+</svg>
\ No newline at end of file
diff --git a/public/twitter_dark.svg b/public/twitter_dark.svg
new file mode 100644
index 000000000..9d22e0aed
--- /dev/null
+++ b/public/twitter_dark.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.0006 3.92375C19.265 4.25 18.4737 4.47063 17.6437 4.57C18.4906 4.06188 19.1412 3.25813 19.4481 2.3C18.655 2.77 17.7769 3.11188 16.8425 3.29563C16.0938 2.49813 15.0275 2 13.8475 2C11.5813 2 9.74438 3.83687 9.74438 6.10312C9.74438 6.425 9.78063 6.73812 9.85063 7.03812C6.44063 6.86687 3.41687 5.23312 1.39312 2.75062C1.04 3.35688 0.8375 4.06125 0.8375 4.81375C0.8375 6.2375 1.56188 7.49313 2.66313 8.22938C1.99063 8.20813 1.35813 8.02375 0.804375 7.71625C0.80375 7.73312 0.80375 7.75063 0.80375 7.76813C0.80375 9.75625 2.21813 11.4144 4.095 11.7912C3.75063 11.885 3.38813 11.935 3.01375 11.935C2.74938 11.935 2.4925 11.9094 2.24187 11.8612C2.76375 13.4912 4.27938 14.6775 6.075 14.7106C4.67063 15.8112 2.90125 16.4669 0.97875 16.4669C0.6475 16.4669 0.32125 16.4475 0 16.4094C1.81562 17.5738 3.9725 18.2531 6.29 18.2531C13.8375 18.2531 17.9644 12.0006 17.9644 6.57812C17.9644 6.4 17.9606 6.22312 17.9525 6.0475C18.7544 5.46875 19.45 4.74625 20 3.92375H20.0006Z" fill="black"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index ba58d14f3..61b76fbc0 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,5 +1,10 @@
-import React, { MouseEventHandler } from 'react';
-import { ButtonBase, ButtonBaseProps, getBaseButtonClassName } from './utils';
+import React, { CSSProperties, MouseEventHandler } from 'react';
+import {
+  ButtonBase,
+  ButtonBaseProps,
+  getBaseButtonClassName,
+  getButtonStyle,
+} from './utils';
 
 export type ButtonProps = {
   /** Action when clicked */
@@ -17,6 +22,8 @@ export type ButtonProps = {
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button({ onClick, testID, buttonProps, ...props }, ref) {
     const className = getBaseButtonClassName(props);
+    const buttonStyle = getButtonStyle(props);
+
     return (
       <button
         ref={ref}
@@ -26,6 +33,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={props.disabled || props.state === 'loading'}
         aria-disabled={props.disabled || props.state === 'loading'}
         data-testid={testID}
+        style={buttonStyle}
         {...buttonProps}
       >
         <ButtonBase {...props} />
diff --git a/src/components/button/link.tsx b/src/components/button/link.tsx
index 98ddc3587..57271c06b 100644
--- a/src/components/button/link.tsx
+++ b/src/components/button/link.tsx
@@ -1,8 +1,13 @@
 import Link from 'next/link';
 import React from 'react';
-import {ButtonBase, ButtonBaseProps, getBaseButtonClassName} from './utils';
+import {
+  ButtonBase,
+  ButtonBaseProps,
+  getBaseButtonClassName,
+  getButtonStyle,
+} from './utils';
 
-import {UrlObject} from 'url';
+import { UrlObject } from 'url';
 
 export type ButtonLinkProps = {
   /**
@@ -41,6 +46,7 @@ export function ButtonLink({
           'aria-current': true,
         }
       : {};
+  const buttonStyle = getButtonStyle(props);
 
   if (props.disabled || props.state == 'loading') {
     return (
@@ -64,6 +70,7 @@ export function ButtonLink({
         onClick={onClick}
         {...extraProps}
         {...aProps}
+        style={buttonStyle}
         data-testid={testID}
       >
         <ButtonBase {...props} />
diff --git a/src/components/button/utils.tsx b/src/components/button/utils.tsx
index 5ba1c6251..ad22247a0 100644
--- a/src/components/button/utils.tsx
+++ b/src/components/button/utils.tsx
@@ -1,7 +1,8 @@
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { and } from '@atb/utils/css';
 import style from './button.module.css';
 import { LoadingIcon } from '../loading';
+import { ContrastColor } from '@atb-as/theme';
 
 export type ButtonModes =
   | 'interactive_0'
@@ -19,6 +20,16 @@ export type ButtonModes =
 
 export type RadiusMode = 'top' | 'bottom' | 'top-bottom' | 'none';
 
+type ButtonModeAwareProps =
+  | {
+      mode?: Exclude<ButtonModes, 'secondary'>;
+      backgroundColor?: never;
+    }
+  | {
+      mode: 'secondary';
+      backgroundColor: ContrastColor;
+    };
+
 export type ButtonBaseProps = {
   /**
    * Button text content
@@ -78,7 +89,19 @@ export type ButtonBaseProps = {
     left: ReactNode;
     right: ReactNode;
   }>;
-};
+} & ButtonModeAwareProps;
+
+export function getButtonStyle(props: ButtonBaseProps): CSSProperties {
+  const backgroundColor = props.mode === 'secondary' && props.backgroundColor;
+  return backgroundColor ? getButtonStyleForColor(backgroundColor) : {};
+}
+
+export function getButtonStyleForColor(color: ContrastColor): CSSProperties {
+  return {
+    borderColor: color.foreground.primary,
+    color: color.foreground.primary,
+  };
+}
 
 export function getBaseButtonClassName({
   mode = 'interactive_2',
@@ -90,7 +113,7 @@ export function getBaseButtonClassName({
   disabled = false,
   className = undefined,
 }: ButtonBaseProps) {
-  const innerClassName = and(
+  return and(
     style.button,
     style[`button--${mode}`],
     disabled && style[`button--disabled`],
@@ -102,7 +125,6 @@ export function getBaseButtonClassName({
     style[`button--radiusSize_${radiusSize}`],
     className,
   );
-  return innerClassName;
 }
 
 function ButtonBase({ title, icon, state }: ButtonBaseProps) {
diff --git a/src/components/icon/mono-icon.tsx b/src/components/icon/mono-icon.tsx
index a1eb0c157..810128b8d 100644
--- a/src/components/icon/mono-icon.tsx
+++ b/src/components/icon/mono-icon.tsx
@@ -1,8 +1,15 @@
 import { MonoIcons, icons } from './generated-icons';
 import { SizeProps, useSize } from './utils';
-import { InteractiveColor, InteractiveState, TextColorType, useDarkMode } from '@atb/modules/theme';
+import {
+  InteractiveColor,
+  InteractiveState,
+  TextColorType,
+  useDarkMode,
+} from '@atb/modules/theme';
 import { colorToOverrideMode } from '@atb/utils/color';
 
+export type MonoIconOverrideMode = 'none' | 'dark' | 'light';
+
 export type { SizeProps };
 export type MonoIconProps = Omit<JSX.IntrinsicElements['img'], 'src'> & {
   /**
@@ -18,7 +25,7 @@ export type MonoIconProps = Omit<JSX.IntrinsicElements['img'], 'src'> & {
    * Whether or not to override darkmode/light mode
    * @default none
    */
-  overrideMode?: 'none' | 'dark' | 'light';
+  overrideMode?: MonoIconOverrideMode;
   /**
    * Used to override light- or dark mode icon color when MonoIcon is used with an interactive component
    */
@@ -73,11 +80,12 @@ function useInteractiveThemeColor(
   interactiveColor?: InteractiveColor,
   interactiveState?: InteractiveState,
 ): MonoIconProps['overrideMode'] {
-
   if (!interactiveColor) return 'none';
 
   if (!interactiveState)
     return colorToOverrideMode(interactiveColor.default.foreground.primary);
 
-  return colorToOverrideMode(interactiveColor[interactiveState].foreground.primary);
+  return colorToOverrideMode(
+    interactiveColor[interactiveState].foreground.primary,
+  );
 }
diff --git a/src/layouts/shared/footer.module.css b/src/layouts/shared/footer.module.css
index 618e8e25d..2e7cfc16a 100644
--- a/src/layouts/shared/footer.module.css
+++ b/src/layouts/shared/footer.module.css
@@ -1,6 +1,6 @@
 .footer {
-  background-color: token('color.background.neutral.1.background');
-  color: token('color.foreground.dynamic.primary');
+  background-color: token('color.background.accent.4.background');
+  color: token('color.background.accent.4.foreground.primary');
 }
 .footer__content {
   margin: var(--contentPadding) auto;
@@ -15,7 +15,7 @@
 
 .footer__content hr {
   border: 0;
-  border-bottom: token('border.width.slim') solid token('color.background.neutral.3.background');
+  border-bottom: token('border.width.slim') solid token('color.background.accent.4.foreground.primary');
   margin: token('spacing.xLarge');
 }
 
@@ -39,7 +39,7 @@
 .footer a,
 .footer a:visited {
   transition: color 100ms ease-in;
-  color: token('color.foreground.dynamic.primary');
+  color: token('color.background.accent.4.foreground.primary');
 }
 .footer a:hover {
   opacity: 0.75;
@@ -74,7 +74,7 @@
 .footer__cookieWarning {
   margin-top: token('spacing.medium');
   composes: typo-body__tertiary from '@atb/theme/typography.module.css';
-  color: token("color.foreground.dynamic.secondary");
+  color: token('color.background.accent.4.foreground.primary');
 }
 
 @media (max-width: 650px) {
@@ -88,7 +88,7 @@
 }
 
 .buttonLink {
-  color: token('color.foreground.dynamic.primary');
+  color: token('color.background.accent.4.foreground.primary');
   font-size: 1rem;
   background-color: transparent;
   border: 0;
diff --git a/src/layouts/shared/footer.tsx b/src/layouts/shared/footer.tsx
index a778ea85f..df5ebc431 100644
--- a/src/layouts/shared/footer.tsx
+++ b/src/layouts/shared/footer.tsx
@@ -6,6 +6,8 @@ import { Language, ModuleText, useTranslation } from '@atb/translations';
 import { useLanguageSettings } from '@atb/translations/language-context';
 
 import style from './footer.module.css';
+import { getButtonStyleForColor } from '@atb/components/button/utils.tsx';
+import { useOrgThemeDefinitions } from '@atb/utils/org-theme-definitions.ts';
 
 export type FooterProps = {
   withoutSettings?: boolean;
@@ -17,31 +19,37 @@ type SomeLink = {
   title: string;
 };
 
-const { urls, fylkeskommune } = getOrgData();
+const { urls, fylkeskommune, orgId } = getOrgData();
 
 export default function Footer({ withoutSettings = false }: FooterProps) {
   const { isDarkMode, toggleDarkmode } = useTheme();
   const { t, language } = useTranslation();
+  const { color } = useTheme();
+  const buttonStyle = getButtonStyleForColor(color.background.accent['4']);
+
+  const iconSrc = (name: string) =>
+    orgId === 'atb' ? `/${name}_dark.svg` : `/${name}.svg`;
 
   const someLinks: SomeLink[] = [
     urls.facebookLink && {
       href: urls.facebookLink,
-      iconSrc: '/fb.svg',
+      iconSrc: iconSrc('fb'),
       title: 'Facebook',
     },
     urls.instagramLink && {
       href: urls.instagramLink,
-      iconSrc: '/ig.svg',
+      iconSrc: iconSrc('ig'),
       title: 'Instagram',
     },
     urls.twitterLink && {
       href: urls.twitterLink,
-      iconSrc: '/twitter.svg',
+      iconSrc: iconSrc('twitter'),
       title: 'Twitter',
     },
   ].filter(Boolean) as SomeLink[];
 
   const isForcingTheme = fylkeskommune?.forceTheme !== undefined;
+  const { fylkeskommuneLogo } = useOrgThemeDefinitions();
 
   return (
     <footer className={style.footer}>
@@ -128,6 +136,7 @@ export default function Footer({ withoutSettings = false }: FooterProps) {
                   <li>
                     <button
                       className={style.buttonLink}
+                      style={buttonStyle}
                       onClick={() => toggleDarkmode(!isDarkMode)}
                     >
                       {isDarkMode
@@ -165,7 +174,8 @@ export default function Footer({ withoutSettings = false }: FooterProps) {
               {someLinks.map((link) => (
                 <ButtonLink
                   key={link.href}
-                  mode={isDarkMode ? 'interactive_2' : 'secondary'}
+                  mode="secondary"
+                  backgroundColor={color.background.accent['4']}
                   radius="top-bottom"
                   display="inline"
                   radiusSize="circular"
@@ -203,12 +213,7 @@ export default function Footer({ withoutSettings = false }: FooterProps) {
           </div>
 
           {fylkeskommune && (
-            <img
-              src={
-                isDarkMode ? fylkeskommune.logoSrcDark : fylkeskommune.logoSrc
-              }
-              alt={fylkeskommune.name}
-            />
+            <img src={fylkeskommuneLogo} alt={fylkeskommune.name} />
           )}
         </section>
       </div>
@@ -219,6 +224,9 @@ export default function Footer({ withoutSettings = false }: FooterProps) {
 function LanguageSelections() {
   const { language, setLanguage } = useLanguageSettings();
   const { t } = useTranslation();
+  const { color } = useTheme();
+  const buttonStyle = getButtonStyleForColor(color.background.accent['4']);
+
   return (
     <>
       {language !== Language.Norwegian && (
@@ -226,6 +234,7 @@ function LanguageSelections() {
           <button
             className={style.buttonLink}
             onClick={() => setLanguage(Language.Norwegian)}
+            style={buttonStyle}
           >
             {t(
               ModuleText.Layout.base.footer.sections.settings.setLanguage.norsk,
@@ -238,6 +247,7 @@ function LanguageSelections() {
           <button
             className={style.buttonLink}
             onClick={() => setLanguage(Language.English)}
+            style={buttonStyle}
             data-testid="setLanguageToEnglish"
           >
             {t(
@@ -251,6 +261,7 @@ function LanguageSelections() {
         <li>
           <button
             className={style.buttonLink}
+            style={buttonStyle}
             onClick={() => setLanguage(Language.Nynorsk)}
           >
             {t(
diff --git a/src/layouts/shared/page-header.module.css b/src/layouts/shared/page-header.module.css
index 7f0be6ea2..8fb10eb93 100644
--- a/src/layouts/shared/page-header.module.css
+++ b/src/layouts/shared/page-header.module.css
@@ -1,5 +1,5 @@
 .pageHeader {
-  background-color: token('color.background.neutral.0.background');
+  background-color: token('color.background.accent.4.background');
 }
 
 .pageHeader__content {
@@ -14,7 +14,7 @@
 
 .pageHeader__inner {
   display: flex;
-  background-color: token('color.background.neutral.0.background');
+  background-color: token('color.background.accent.4.background');
   color: token('color.background.accent.0.foreground.primary');
   position: relative;
   z-index: 150;
@@ -44,7 +44,7 @@
 
 .pageHeader__logoLink,
 .pageHeader__logoLink:visited {
-  color: token('color.background.accent.0.foreground.primary');
+  color: token('color.background.accent.4.foreground.primary');
   text-decoration: none;
 
   display: flex;
diff --git a/src/layouts/shared/page-header.tsx b/src/layouts/shared/page-header.tsx
index c34bf07b4..1ad2c5b51 100644
--- a/src/layouts/shared/page-header.tsx
+++ b/src/layouts/shared/page-header.tsx
@@ -1,17 +1,20 @@
 import { CommonText, useTranslation } from '@atb/translations';
 import Link from 'next/link';
 import style from './page-header.module.css';
-import { useDarkMode } from '@atb/modules/theme';
+import { useTheme } from '@atb/modules/theme';
 import Image from 'next/image';
 import { getOrgData } from '@atb/modules/org-data';
 import { MonoIcon } from '@atb/components/icon';
 import { ButtonLink } from '@atb/components/button';
+import { useOrgThemeDefinitions } from '@atb/utils/org-theme-definitions.ts';
 
 export default function PageHeader() {
   const { t } = useTranslation();
-  const [isDarkMode] = useDarkMode();
+  const { color } = useTheme();
   const { fylkeskommune, urls } = getOrgData();
 
+  const { fylkeskommuneLogo, overrideMonoIconMode } = useOrgThemeDefinitions();
+
   return (
     <header className={style.pageHeader}>
       <div className={style.pageHeader__content}>
@@ -23,17 +26,14 @@ export default function PageHeader() {
               title={t(CommonText.Layout.homeLink(urls.homePageUrl.name))}
               data-testid="homeButton"
             >
-              {fylkeskommune?.replaceTitleWithLogoInHeader ? (
+              {fylkeskommune?.replaceTitleWithLogoInHeader &&
+              fylkeskommuneLogo ? (
                 <Image
                   width={0}
                   height={0}
                   sizes="100vw"
                   style={{ width: '100%', height: 'auto' }}
-                  src={
-                    isDarkMode
-                      ? fylkeskommune.logoSrcDark
-                      : fylkeskommune.logoSrc
-                  }
+                  src={fylkeskommuneLogo}
                   alt={fylkeskommune.name}
                 />
               ) : (
@@ -43,6 +43,7 @@ export default function PageHeader() {
                     alt=""
                     role="none"
                     size="normal"
+                    overrideMode={overrideMonoIconMode}
                   />
                   <span>{t(CommonText.Titles.siteTitle)}</span>
                 </>
@@ -53,8 +54,16 @@ export default function PageHeader() {
         <ButtonLink
           href={urls.homePageUrl.href}
           title={t(CommonText.Layout.homeLink(urls.homePageUrl.name))}
-          icon={{ right: <MonoIcon icon="navigation/ExternalLink" /> }}
+          icon={{
+            right: (
+              <MonoIcon
+                icon="navigation/ExternalLink"
+                overrideMode={overrideMonoIconMode}
+              />
+            ),
+          }}
           mode="secondary"
+          backgroundColor={color.background.accent['4']}
           radiusSize="circular"
           size="pill"
           aProps={{
diff --git a/src/page-modules/assistant/layout.tsx b/src/page-modules/assistant/layout.tsx
index 5bd076b0e..0aa585f7f 100644
--- a/src/page-modules/assistant/layout.tsx
+++ b/src/page-modules/assistant/layout.tsx
@@ -40,6 +40,7 @@ export type AssistantLayoutProps = PropsWithChildren<{
 
 function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
   const { t } = useTranslation();
+  const { color } = useTheme();
   const router = useRouter();
 
   const [showAlternatives, setShowAlternatives] = useState(false);
@@ -257,11 +258,8 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
                 : t(PageText.Assistant.search.buttons.alternatives.more)
             }
             className={style.button}
-            mode={
-              orgId === 'fram' && !isDarkMode
-                ? 'interactive_2--light-outline'
-                : 'secondary'
-            }
+            mode="secondary"
+            backgroundColor={color.background.accent['0']}
             state={showAlternatives ? 'active' : 'none'}
             radiusSize="circular"
             onClick={() => setShowAlternatives(!showAlternatives)}
@@ -270,11 +268,7 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
           <Button
             title={t(PageText.Assistant.search.buttons.find.title)}
             className={style.button}
-            mode={
-              orgId === 'fram'
-                ? 'interactive_0--bordered-light-outline'
-                : 'primary'
-            }
+            mode={'primary'}
             radiusSize="circular"
             disabled={
               !tripQuery.from || !tripQuery.to || isPerformingSearchNavigation
diff --git a/src/page-modules/assistant/trip/index.tsx b/src/page-modules/assistant/trip/index.tsx
index 0f8e430cb..e4d4fc6bb 100644
--- a/src/page-modules/assistant/trip/index.tsx
+++ b/src/page-modules/assistant/trip/index.tsx
@@ -26,6 +26,7 @@ import {
   GlobalMessages,
 } from '@atb/modules/global-messages';
 import dictionary from '@atb/translations/dictionary.ts';
+import { useTheme } from '@atb/modules/theme';
 
 export type TripProps = {
   tripQuery: FromToTripQuery;
@@ -34,6 +35,7 @@ export type TripProps = {
 
 export default function Trip({ tripQuery, fallback }: TripProps) {
   const { t } = useTranslation();
+  const { color } = useTheme();
   const { trips, isLoadingFirstTrip, loadMore, isLoadingMore } =
     useTripPatterns(tripQuery, fallback);
   const { nonTransitTrips } = useNonTransitTrip(tripQuery);
@@ -150,6 +152,7 @@ export default function Trip({ tripQuery, fallback }: TripProps) {
           className={style.fetchButton}
           onClick={() => loadMore()}
           mode="secondary"
+          backgroundColor={color.background.accent['0']}
           radiusSize="circular"
           title={t(PageText.Assistant.trip.fetchMore)}
           state={isLoadingMore ? 'loading' : undefined}
@@ -164,6 +167,7 @@ type DayLabelProps = {
   departureTime: string;
   previousDepartureTime?: string;
 };
+
 function DayLabel({ departureTime, previousDepartureTime }: DayLabelProps) {
   const { t, language } = useTranslation();
   const isFirst = !previousDepartureTime;
diff --git a/src/page-modules/departures/layout.tsx b/src/page-modules/departures/layout.tsx
index 5e7ab8bcc..0c7e27df1 100644
--- a/src/page-modules/departures/layout.tsx
+++ b/src/page-modules/departures/layout.tsx
@@ -91,11 +91,7 @@ function DeparturesLayout({ children, fromQuery }: DeparturesLayoutProps) {
           <Button
             title={t(PageText.Departures.search.buttons.find.title)}
             className={style.button}
-            mode={
-              orgId === 'fram'
-                ? 'interactive_0--bordered-light-outline'
-                : 'primary'
-            }
+            mode="primary"
             radiusSize="circular"
             disabled={!fromQuery.from}
             buttonProps={{ type: 'submit' }}
diff --git a/src/utils/org-theme-definitions.ts b/src/utils/org-theme-definitions.ts
new file mode 100644
index 000000000..caf8d1a80
--- /dev/null
+++ b/src/utils/org-theme-definitions.ts
@@ -0,0 +1,18 @@
+import { useDarkMode } from '@atb/modules/theme';
+import { getOrgData } from '@atb/modules/org-data';
+import { MonoIconOverrideMode } from '@atb/components/icon';
+
+export function useOrgThemeDefinitions() {
+  const [isDarkMode] = useDarkMode();
+  const { fylkeskommune, orgId } = getOrgData();
+
+  const fylkeskommuneLogo =
+    isDarkMode || orgId !== 'atb'
+      ? fylkeskommune?.logoSrcDark
+      : fylkeskommune?.logoSrc;
+
+  const overrideMonoIconMode: MonoIconOverrideMode =
+    orgId === 'atb' ? (isDarkMode ? 'dark' : 'light') : 'dark';
+
+  return { fylkeskommuneLogo, overrideMonoIconMode };
+}
diff --git a/yarn.lock b/yarn.lock
index b58ff0da4..08c1ceec3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -112,10 +112,10 @@
     hex-to-rgba "^2.0.1"
     ts-deepmerge "^4.0.0"
 
-"@atb-as/theme@^13.1.4":
-  version "13.1.4"
-  resolved "https://registry.yarnpkg.com/@atb-as/theme/-/theme-13.1.4.tgz#e8b2bb51809815ba6410b706c10014924fd56037"
-  integrity sha512-7/+nyYhxOtzzMkhaZ2oXbhvQw5WHO2SjsGQ3/Y0BG7vnZHZP0/Szub5nNCcei99HFi4giFOsdRe2TUBEWL4LqQ==
+"@atb-as/theme@^13.1.5":
+  version "13.1.5"
+  resolved "https://registry.yarnpkg.com/@atb-as/theme/-/theme-13.1.5.tgz#a83a6ebb7638612a23845d55f8a811e40d083deb"
+  integrity sha512-ERKz3J0SxaObJK8GlWIw0f1yLds0I1gtSGx/29M9N2xQTzVcz2scXrRMnL4h2ztXz/zAM4vFQtWrUgnVDxn0Lw==
   dependencies:
     "@tfk-samf/figma-to-dtcg" "0.4.0"
     hex-to-rgba "^2.0.1"


Reviews:
user: login: strandlie
body: Looks good! Only one question
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T07:21:10Z
user: login: jorelosorio
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-28T12:59:52Z

Review comments:
diff_hunk: @@ -54,7 +50,14 @@ export default function PageHeader() {
         <ButtonLink
           href={urls.homePageUrl.href}
           title={t(CommonText.Layout.homeLink(urls.homePageUrl.name))}
-          icon={{ right: <MonoIcon icon="navigation/ExternalLink" /> }}
+          icon={{
+            right: (
+              <MonoIcon icon="navigation/ExternalLink" overrideMode={'dark'} />
path: src/layouts/shared/page-header.tsx
user: login: strandlie
body: Should this always be dark mode? For all partners? 
created_at: 2025-04-09T07:20:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -54,7 +50,14 @@ export default function PageHeader() {
         <ButtonLink
           href={urls.homePageUrl.href}
           title={t(CommonText.Layout.homeLink(urls.homePageUrl.name))}
-          icon={{ right: <MonoIcon icon="navigation/ExternalLink" /> }}
+          icon={{
+            right: (
+              <MonoIcon icon="navigation/ExternalLink" overrideMode={'dark'} />
path: src/layouts/shared/page-header.tsx
user: login: jorelosorio
body: Yes for the new color configurations, now this is fixed with the merge of the previous PR.
created_at: 2025-04-28T12:59:52Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-03T07:30:06Z
body: [vc]: #fioFtSaR1b0dUnkAkcjZOKzHDKFPDB11cG8fqGNV96k=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJwbGFubmVyLXdlYiIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9hdGIvcGxhbm5lci13ZWIvVVNXREN1ZW9jU1k1UEhNckJRVjl4ZlRxTFRTQSIsInByZXZpZXdVcmwiOiJwbGFubmVyLXdlYi1naXQtam9yZWxvc29yaW8tZml4LW9tcy1jb2xvcnMtYXRiLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoicGxhbm5lci13ZWItZ2l0LWpvcmVsb3NvcmlvLWZpeC1vbXMtY29sb3JzLWF0Yi52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **planner-web** | ✅ Ready ([Inspect](https://vercel.com/atb/planner-web/USWDCueocSY5PHMrBQV9xfTqLTSA)) | [Visit Preview](https://planner-web-git-jorelosorio-fix-oms-colors-atb.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/planner-web-git-jorelosorio-fix-oms-colors-atb.vercel.app?via=pr-comment-feedback-link) | Apr 28, 2025 1:00pm |


author_association: NONE
user: login: reidzeibel
created_at: 2025-04-15T09:13:10Z
body: @jorelosorio seems like there's a conflict here
author_association: MEMBER