diff --git a/.changeset/mighty-years-smile.md b/.changeset/mighty-years-smile.md
new file mode 100644
index 000000000..4cd9fbe00
--- /dev/null
+++ b/.changeset/mighty-years-smile.md
@@ -0,0 +1,23 @@
+---
+"@igloo-ui/action-menu": major
+"@igloo-ui/area-chart": major
+"@igloo-ui/color-picker": major
+"@igloo-ui/combobox": major
+"@igloo-ui/disclosure": major
+"@igloo-ui/dropdown": major
+"@igloo-ui/alert": minor
+"@igloo-ui/avatar": minor
+"@igloo-ui/bar-chart": minor
+"@igloo-ui/breadcrumb": minor
+"@igloo-ui/button": minor
+"@igloo-ui/button-group": minor
+"@igloo-ui/card": minor
+"@igloo-ui/carousel": minor
+"@igloo-ui/checkbox": minor
+"@igloo-ui/color": minor
+"@igloo-ui/datepicker": minor
+"@igloo-ui/dialog": minor
+---
+
+Clean up non-Workleap rebranded styles for components A-D.
+All consumers should now be using the Workleap branded versions of the components. This will happen automatically, and consumers can stop setting `data-brand="workleap"` for these components.
diff --git a/packages/ActionMenu/src/ActionMenu.stories.tsx b/packages/ActionMenu/src/ActionMenu.stories.tsx
index 05d5ba047..49702cd06 100644
--- a/packages/ActionMenu/src/ActionMenu.stories.tsx
+++ b/packages/ActionMenu/src/ActionMenu.stories.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
+import React from 'react';
 
-import IconButton from '@igloo-ui/icon-button';
 import Button from '@igloo-ui/button';
 import HelperText from '@igloo-ui/helper-text';
-import Kebab from '@igloo-ui/icons/dist/Kebab';
+import IconButton from '@igloo-ui/icon-button';
 import AddSolid from '@igloo-ui/icons/dist/AddSolid';
-import Delete from '@igloo-ui/icons/dist/Delete';
 import Copy from '@igloo-ui/icons/dist/Copy';
+import Delete from '@igloo-ui/icons/dist/Delete';
+import Kebab from '@igloo-ui/icons/dist/Kebab';
 
 import { Meta, StoryFn } from '@storybook/react';
 
@@ -87,7 +87,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, '').replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     closeOnSelect: {
@@ -145,7 +146,7 @@ export const WithinContainer = {
             }}
           />
         </div>
-        <div className="isb-action-menu__card" 
+        <div className="isb-action-menu__card"
             style={{zIndex: openedIndex === 1 ? 5 : 0}}>
           <ActionMenu
             {...args}
diff --git a/packages/ActionMenu/src/action-menu.scss b/packages/ActionMenu/src/action-menu.scss
index e73de3c6d..b010b12fa 100644
--- a/packages/ActionMenu/src/action-menu.scss
+++ b/packages/ActionMenu/src/action-menu.scss
@@ -7,11 +7,6 @@
 @layer igloo {
     :root {
         /* Default */
-        --ids-action-menu-font-family: #{tokens.$primary-font-family};
-        --ids-action-menu-font-size: #{tokens.$font-size-4};
-    }
-
-    [data-brand="workleap"] {
         --ids-action-menu-font-family: var(--hop-body-sm-font-family);
         --ids-action-menu-font-size: var(--hop-body-sm-font-size);
     }
diff --git a/packages/Alert/src/Alert.stories.tsx b/packages/Alert/src/Alert.stories.tsx
index b514d5cb5..72c56c051 100644
--- a/packages/Alert/src/Alert.stories.tsx
+++ b/packages/Alert/src/Alert.stories.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 
 import { Meta } from '@storybook/react';
 
-import Tooltip from '@igloo-ui/tooltip';
-import Hyperlink from '@igloo-ui/hyperlink';
 import Section from '@components/section';
+import Hyperlink from '@igloo-ui/hyperlink';
+import Tooltip from '@igloo-ui/tooltip';
 import readme from '../README.md';
 
+import Alert from './Alert';
 import {
-  InfoIcon,
+    InfoIcon,
 } from './svgs';
-import Alert from './Alert';
 
 export default {
   title: 'Components/Alert',
@@ -20,7 +20,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     message: {
@@ -114,7 +115,7 @@ export const WithButton = () => (
 export const WithLink = () => (
   <Section column>
     <Alert
-      link={{ 
+      link={{
         children: <a href="#">Tell me more</a>
        }}
       type="info"
@@ -123,7 +124,7 @@ export const WithLink = () => (
       message={mockContent.message}
     />
     <Alert
-      link={{ 
+      link={{
         children: <a href="#">Tell me more</a>
        }}
       type="info"
@@ -132,7 +133,7 @@ export const WithLink = () => (
       message={mockContent.message}
     />
     <Alert
-      link={{ 
+      link={{
         children: <a href="#">Tell me more</a>
        }}
       type="info"
diff --git a/packages/Alert/src/Alert.tsx b/packages/Alert/src/Alert.tsx
index e9193afad..93e3aeb93 100644
--- a/packages/Alert/src/Alert.tsx
+++ b/packages/Alert/src/Alert.tsx
@@ -1,28 +1,21 @@
-import * as React from "react";
 import classNames from "classnames";
+import * as React from "react";
 
-import Button, { type Appearance as ButtonAppearance } from "@igloo-ui/button";
+import { DismissIcon } from "@hopper-ui/icons-react16";
+import Button from "@igloo-ui/button";
 import type { HyperlinkProps } from "@igloo-ui/hyperlink";
 import IconButton, { type Size as IconButtonSize } from "@igloo-ui/icon-button";
-import { DismissIcon } from "@hopper-ui/icons-react16";
+import { useLocalizedStringFormatter } from "@igloo-ui/provider";
+import intlMessages from "./intl";
 import {
-    InfoIcon,
     CrownIcon,
+    InfoIcon,
     SuccessIcon,
     WarningIcon
 } from "./svgs";
-import {
-    TadaIcon as LegacyTadaIcon,
-    InfoIcon as LegacyInfoIcon,
-    CrownIcon as LegacyCrownIcon,
-    SuccessIcon as LegacySuccessIcon,
-    WarningIcon as LegacyWarningIcon
-} from "./legacy/svgs";
-import { useLocalizedStringFormatter } from "@igloo-ui/provider";
-import intlMessages from "./intl";
 
-import "./alert.scss";
 import Hyperlink from "@igloo-ui/hyperlink";
+import "./alert.scss";
 
 export type Type = "announcement" | "info" | "premium" | "success" | "warning";
 
@@ -61,16 +54,11 @@ export interface AlertProps extends Omit<React.ComponentProps<"div">, "title"> {
     link?: HyperlinkProps;
 }
 
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 const renderIcon = (
     style: Appearance,
     hasButton: boolean,
     type: Type,
     icon?: React.ReactElement,
-    isWorkleap?: boolean
 ): JSX.Element => {
     const classes = classNames("ids-alert__icon", `ids-alert__icon--${style}`, {
         "ids-alert__icon--small-top": hasButton,
@@ -81,11 +69,11 @@ const renderIcon = (
         <div className={classes}>
             {icon || (
                 <>
-                    {type === "announcement" && (isWorkleap ? <InfoIcon /> : <LegacyTadaIcon />)}
-                    {type === "info" && (isWorkleap ? <InfoIcon /> : <LegacyInfoIcon />)}
-                    {type === "premium" && (isWorkleap ? <CrownIcon /> : <LegacyCrownIcon />)}
-                    {type === "success" && (isWorkleap ? <SuccessIcon /> : <LegacySuccessIcon />)}
-                    {type === "warning" && (isWorkleap ? <WarningIcon /> : <LegacyWarningIcon />)}
+                    {type === "announcement" && <InfoIcon />}
+                    {type === "info" && <InfoIcon />}
+                    {type === "premium" && <CrownIcon />}
+                    {type === "success" && <SuccessIcon />}
+                    {type === "warning" && <WarningIcon />}
                 </>
             )}
         </div>
@@ -120,21 +108,15 @@ const renderDismissButton = (
 };
 
 const renderAlertActionButton = (
-    style: Appearance,
     button?: AlertButton,
-    isWorkleap?: boolean
 ): JSX.Element => {
     if (button == null || button.onClick == null || button.label == null) {
         return <></>;
     }
 
-    const ghostAppearance = isWorkleap ?
-        { type: "ghost", variant: "secondary" } as ButtonAppearance :
-        "ghost";
-
     return (
         <Button
-            appearance={style === "horizontal" && !isWorkleap ? ghostAppearance : "secondary"}
+            appearance="secondary"
             size="small"
             onClick={button.onClick}
             loading={button.loading}
@@ -192,7 +174,6 @@ const Alert: React.FunctionComponent<AlertProps> = ({
     const hasLink = link !== undefined;
     const isHorizontal = appearance === "horizontal";
     const canBeClosed = closable;
-    const isWorkleap = getBrand() === "workleap";
 
     if (show) {
         return (
@@ -202,10 +183,7 @@ const Alert: React.FunctionComponent<AlertProps> = ({
                 data-test={dataTest}
                 {...rest}
             >
-                {icon !== null &&
-          !isHorizontal &&
-          renderIcon(appearance, hasButton || hasLink, type, icon, isWorkleap)}
-
+                {icon !== null && !isHorizontal && renderIcon(appearance, hasButton || hasLink, type, icon)}
                 <div className="ids-alert__body">
                     <div className="ids-alert__header">
                         <p className="ids-alert__title">{title}</p>
@@ -213,7 +191,7 @@ const Alert: React.FunctionComponent<AlertProps> = ({
                     </div>
                     {!isHorizontal && <div className="ids-alert__content">{message}</div>}
                     {hasLink && renderAlertActionLink(link)}
-                    {hasButton && renderAlertActionButton(appearance, button, isWorkleap)}
+                    {hasButton && renderAlertActionButton(button)}
                 </div>
 
                 {canBeClosed && renderDismissButton(setShow,
diff --git a/packages/Alert/src/__snapshots__/Alert.test.tsx.snap b/packages/Alert/src/__snapshots__/Alert.test.tsx.snap
index 6483b28f6..73b743c26 100644
--- a/packages/Alert/src/__snapshots__/Alert.test.tsx.snap
+++ b/packages/Alert/src/__snapshots__/Alert.test.tsx.snap
@@ -9,37 +9,32 @@ exports[`Alert It should render a snapshot 1`] = `
       class="ids-alert__icon ids-alert__icon--card ids-alert__icon--medium-centered"
     >
       <svg
-        fill="none"
-        height="32"
-        viewBox="0 0 32 32"
-        width="32"
+        fill="#BAE6FF"
+        height="40"
+        viewBox="0 0 40 40"
+        width="40"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle
-          cx="16"
-          cy="16"
-          fill="#B2DDF2"
-          r="16"
+        <path
+          d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z"
         />
         <path
-          d="M16.6158 7.39951C17.34 8.52136 17.0484 9.99799 15.9645 10.6977C14.8807 11.3973 13.4149 11.0551 12.6908 9.93323C11.9666 8.81138 12.2582 7.33475 13.342 6.63509C14.4259 5.93542 15.8916 6.27767 16.6158 7.39951Z"
-          fill="white"
+          d="M29.138 29.138A12.976 12.976 0 0 0 34 19c0-7.18-5.82-13-13-13-4.1 0-7.755 1.897-10.138 4.862C8.5 13.5 6 16.9 6 21c0 7.18 5.82 13 13 13 4.1 0 7-2.5 10.138-4.862Z"
+          fill="#0A538B"
         />
         <path
-          d="M17.5039 13.6C16.8639 13.6 14.5706 15.2 13.5039 16C9.50391 19.2 14.7039 17.2 15.1039 18.4C15.4239 19.36 15.7706 24.1333 15.9039 26.4C15.9274 26.8 20.2449 26.517 20.8 26C22.1927 24.703 19.4993 24.2993 18.8 23.6C18.4 23.2 18.3039 13.6 17.5039 13.6Z"
-          fill="white"
+          d="M32.75 19c0 6.49-5.26 11.75-11.75 11.75S9.25 25.49 9.25 19 14.51 7.25 21 7.25 32.75 12.51 32.75 19Z"
+          fill="#fff"
         />
         <path
           clip-rule="evenodd"
-          d="M14.4 7.2C13.5163 7.2 12.8 7.91634 12.8 8.8C12.8 9.68365 13.5163 10.4 14.4 10.4C15.2837 10.4 16 9.68365 16 8.8C16 7.91634 15.2837 7.2 14.4 7.2ZM11.2 8.8C11.2 7.03269 12.6327 5.6 14.4 5.6C16.1673 5.6 17.6 7.03269 17.6 8.8C17.6 10.5673 16.1673 12 14.4 12C12.6327 12 11.2 10.5673 11.2 8.8Z"
-          fill="#233043"
+          d="M21.625 26.125v-8.25h-1.25v8.25h1.25Z"
+          fill="#0A538B"
           fill-rule="evenodd"
         />
         <path
-          clip-rule="evenodd"
-          d="M16.1657 13.8343C16.4781 14.1467 16.4781 14.6533 16.1657 14.9657C15.7262 15.4052 15.1488 16.0779 14.5585 16.7694C14.5313 16.8013 14.504 16.8333 14.4767 16.8653C14.3774 16.9816 14.2777 17.0984 14.1787 17.214C14.3856 17.2056 14.5962 17.2 14.8 17.2C15.1982 17.2 15.5357 17.4927 15.592 17.8869L16.6939 25.6H19.6687L18.2344 24.1657C18.1038 24.0351 18.0224 23.8634 18.004 23.6796L17.204 15.6796C17.16 15.24 17.4808 14.8479 17.9204 14.804C18.3601 14.76 18.7521 15.0808 18.7961 15.5204L19.5677 23.2362L22.1657 25.8343C22.3945 26.0631 22.463 26.4072 22.3391 26.7061C22.2153 27.0051 21.9236 27.2 21.6 27.2H16C15.6019 27.2 15.2644 26.9073 15.2081 26.5131L14.1088 18.8184C13.9024 18.8281 13.6984 18.8404 13.5033 18.8522C13.3696 18.8603 13.24 18.8681 13.1167 18.8747C12.889 18.8868 12.642 18.8971 12.459 18.8829C12.4091 18.879 12.3448 18.872 12.2763 18.8574C12.2223 18.8458 12.0937 18.8154 11.9611 18.7295C11.8112 18.6325 11.5593 18.3884 11.5818 17.9884C11.5993 17.6772 11.7818 17.4869 11.8344 17.4343C12.196 17.0727 12.7175 16.4617 13.2927 15.7878C13.309 15.7688 13.3253 15.7497 13.3416 15.7306C13.9179 15.0554 14.5405 14.3281 15.0344 13.8343C15.3468 13.5219 15.8533 13.5219 16.1657 13.8343Z"
-          fill="#233043"
-          fill-rule="evenodd"
+          d="M23 14a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+          fill="#0A538B"
         />
       </svg>
     </div>
diff --git a/packages/Alert/src/alert.scss b/packages/Alert/src/alert.scss
index d4af5918f..dd42cb7e7 100644
--- a/packages/Alert/src/alert.scss
+++ b/packages/Alert/src/alert.scss
@@ -8,47 +8,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-alert-font-family: #{tokens.$primary-font-family};
-        --ids-alert-font-size: #{tokens.$font-size-3};
-        --ids-alert-line-height: #{tokens.$line-height-xxl};
-        --ids-alert-title-font-weight: #{tokens.$font-weight-semi-bold};
-        --ids-alert-padding: #{tokens.$space-3};
-        --ids-alert-padding-compact: #{tokens.$space-3};
-        --ids-alert-gap: #{tokens.$space-3};
-        --ids-alert-border-radius: #{tokens.$border-radius-sm};
-        --ids-alert-box-shadow: #{tokens.$shadow-6};
-        --ids-alert-background-color-light: #{tokens.$samoyed};
-        --ids-alert-background-color-darker: #{tokens.$grey-100};
-        --ids-alert-border-default-width: 0 0 0 0.6rem;
-        --ids-alert-border-width: 0 0 0 0.6rem;
-        --ids-alert-content-margin-top: #{tokens.$space-1};
-        --ids-alert-text-color-title: #{tokens.$grey-800};
-        --ids-alert-text-color-body: #{tokens.$grey-600};
-        --ids-alert-icon-size-small: 2.6rem;
-        --ids-alert-icon-size-medium: 4rem;
-        --ids-alert-btn-margin-top: #{tokens.$space-3};
-        --ids-alert-metadata-color: #{tokens.$grey-600};
-        --ids-alert-body-gap-horizontal: #{tokens.$space-3};
-
-        /* Announcement */
-        --ids-alert-border-color-announcement: #{tokens.$seaweed-500};
-
-        /* Info */
-        --ids-alert-border-color-info: #{tokens.$sky-100};
-
-        /* Premium */
-        --ids-alert-border-color-premium: #{tokens.$dandelion-300};
-
-        /* Success */
-        --ids-alert-border-color-success: #{tokens.$seaweed-500};
-
-        /* Warning */
-        --ids-alert-border-color-warning: #{tokens.$creamsicle-200};
-    }
-
-    [data-brand="workleap"] {
-        /* Default */
         --ids-alert-font-family: var(--hop-body-sm-semibold-font-family);
         --ids-alert-font-size: var(--hop-body-sm-semibold-font-size);
         --ids-alert-line-height: var(--hop-body-sm-semibold-line-height);
@@ -135,84 +94,51 @@
             }
         }
 
-        /* Types */
-        &--announcement {
+       &--announcement {
             @include mixins.ids-alert-mixin-decoration(
-                var(--ids-alert-border-color-announcement)
+                var(--ids-alert-border-color-announcement),
+                var(--ids-alert-color-announcement),
+                var(--ids-alert-background-color-announcement),
+                var(--ids-alert-icon-color-announcement)
             );
         }
 
         &--info {
             @include mixins.ids-alert-mixin-decoration(
-                var(--ids-alert-border-color-info)
+                var(--ids-alert-border-color-info),
+                var(--ids-alert-color-info),
+                var(--ids-alert-background-color-info),
+                var(--ids-alert-icon-color-info)
             );
         }
 
         &--premium {
             @include mixins.ids-alert-mixin-decoration(
-                var(--ids-alert-border-color-premium)
+                var(--ids-alert-border-color-premium),
+                var(--ids-alert-color-premium),
+                var(--ids-alert-background-color-premium),
+                var(--ids-alert-icon-color-premium)
             );
         }
 
         &--success {
             @include mixins.ids-alert-mixin-decoration(
-                var(--ids-alert-border-color-success)
+                var(--ids-alert-border-color-success),
+                var(--ids-alert-color-success),
+                var(--ids-alert-background-color-success),
+                var(--ids-alert-icon-color-success)
             );
         }
 
         &--warning {
             @include mixins.ids-alert-mixin-decoration(
-                var(--ids-alert-border-color-warning)
+                var(--ids-alert-border-color-warning),
+                var(--ids-alert-color-warning),
+                var(--ids-alert-background-color-warning),
+                var(--ids-alert-icon-color-warning)
             );
         }
 
-        :where([data-brand="workleap"]) & {
-            &--announcement {
-                @include mixins.ids-alert-mixin-decoration(
-                    var(--ids-alert-border-color-announcement),
-                    var(--ids-alert-color-announcement),
-                    var(--ids-alert-background-color-announcement),
-                    var(--ids-alert-icon-color-announcement)
-                );
-            }
-
-            &--info {
-                @include mixins.ids-alert-mixin-decoration(
-                    var(--ids-alert-border-color-info),
-                    var(--ids-alert-color-info),
-                    var(--ids-alert-background-color-info),
-                    var(--ids-alert-icon-color-info)
-                );
-            }
-
-            &--premium {
-                @include mixins.ids-alert-mixin-decoration(
-                    var(--ids-alert-border-color-premium),
-                    var(--ids-alert-color-premium),
-                    var(--ids-alert-background-color-premium),
-                    var(--ids-alert-icon-color-premium)
-                );
-            }
-
-            &--success {
-                @include mixins.ids-alert-mixin-decoration(
-                    var(--ids-alert-border-color-success),
-                    var(--ids-alert-color-success),
-                    var(--ids-alert-background-color-success),
-                    var(--ids-alert-icon-color-success)
-                );
-            }
-
-            &--warning {
-                @include mixins.ids-alert-mixin-decoration(
-                    var(--ids-alert-border-color-warning),
-                    var(--ids-alert-color-warning),
-                    var(--ids-alert-background-color-warning),
-                    var(--ids-alert-icon-color-warning)
-                );
-            }
-        }
-
         /* Components */
         &__dismiss-btn {
             flex: 0 0 auto;
diff --git a/packages/AreaChart/src/AreaChart.stories.tsx b/packages/AreaChart/src/AreaChart.stories.tsx
index 772d214d0..536d6928e 100644
--- a/packages/AreaChart/src/AreaChart.stories.tsx
+++ b/packages/AreaChart/src/AreaChart.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Meta, StoryObj} from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -17,6 +17,7 @@ export default {
             },
         },
         chromatic: {delay: 1000},
+        brand: "workleap"
     },
     argTypes: {
         locale: {
diff --git a/packages/AreaChart/src/area-chart.scss b/packages/AreaChart/src/area-chart.scss
index 64191eaa5..b25e22981 100644
--- a/packages/AreaChart/src/area-chart.scss
+++ b/packages/AreaChart/src/area-chart.scss
@@ -7,30 +7,7 @@
 /* Note that some css variables are used in the code. */
 @layer igloo {
     :root {
-        /* Default */
-        --ids-area-chart-font-family: #{tokens.$primary-font-family};
-        --ids-area-chart-font-size: #{tokens.$font-size-2};
-        --ids-area-chart-font-weight: #{tokens.$font-weight-regular};
-        --ids-area-chart-color: #{tokens.$grey-600};
-        --ids-area-chart-grid-color: #{tokens.$grey-200};
-        --ids-area-chart-axis-color: #{tokens.$grey-400};
-        --ids-area-chart-dot-stroke-color: #{tokens.$samoyed};
-        --ids-area-chart-line-color: #{tokens.$electric-blue-500};
-        --ids-area-chart-null-line-color: #{tokens.$grey-400};
-
-        /* Empty Label */
-        --ids-area-chart-empty-label-border-radius: #{tokens.$border-radius-sm};
-        --ids-area-chart-empty-label-font-size: #{tokens.$font-size-3};
-        --ids-area-chart-empty-label-color: #{tokens.$grey-600};
-        --ids-area-chart-empty-label-background: #{tokens.$grey-100};
-        --ids-area-chart-empty-label-line-height: #{tokens.$line-height-xxl};
-        --ids-area-chart-empty-label-max-width: 44rem;
-        --ids-area-chart-empty-label-padding: #{tokens.$space-3};
-        --ids-area-chart-empty-label-text-padding: #{tokens.$space-3};
-    }
-
-    [data-brand="workleap"] {
-        /* Default */
+       /* Default */
         --ids-area-chart-font-family: var(--hop-body-xs-font-family);
         --ids-area-chart-font-size: var(--hop-body-xs-font-size);
         --ids-area-chart-font-weight: var(--hop-body-xs-font-weight);
diff --git a/packages/AreaChart/src/chart-tooltip.scss b/packages/AreaChart/src/chart-tooltip.scss
index 86ee505a2..a3d05f05f 100644
--- a/packages/AreaChart/src/chart-tooltip.scss
+++ b/packages/AreaChart/src/chart-tooltip.scss
@@ -3,38 +3,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-chart-tooltip-font-family: #{tokens.$primary-font-family};
-        --ids-chart-tooltip-font-size: #{tokens.$font-size-3};
-        --ids-chart-tooltip-font-weight: #{tokens.$font-weight-regular};
-        --ids-chart-tooltip-color: #{tokens.$grey-800};
-        --ids-chart-tooltip-background: #{tokens.$samoyed};
-        --ids-chart-tooltip-box-shadow: #{tokens.$shadow-12};
-        --ids-chart-tooltip-border-radius: #{tokens.$border-radius-sm};
-        --ids-chart-tooltip-padding: #{tokens.$space-3};
-
-        /* Date */
-        --ids-chart-tooltip-date-font-weight: #{tokens.$font-weight-semi-bold};
-
-        /* Score */
-        --ids-chart-tooltip-score-font-family: #{tokens.$secondary-font-family};
-        --ids-chart-tooltip-score-font-size: #{tokens.$font-size-6};
-        --ids-chart-tooltip-score-font-weight: #{tokens.$font-weight-medium};
-        --ids-chart-tooltip-score-line-height: #{tokens.$line-height-lg};
-        --ids-chart-tooltip-score-margin-top: #{tokens.$space-2};
-        --ids-chart-tooltip-score-value-margin-right: #{tokens.$space-2};
-        --ids-chart-tooltip-score-text-color: #{tokens.$grey-600};
-        --ids-chart-tooltip-score-text-font-size: #{tokens.$font-size-3};
-        --ids-chart-tooltip-score-text-font-weight: #{tokens.$font-weight-regular};
-
-        /* Circle */
-        --ids-chart-tooltip-circle-background: #{tokens.$electric-blue-500};
-        --ids-chart-tooltip-circle-secondary-background: #{tokens.$dandelion-500};
-        --ids-chart-tooltip-circle-margin-right: 1.2rem;
-        --ids-chart-tooltip-circle-size: 0.8rem;
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-chart-tooltip-font-family: var(--hop-body-sm-font-family);
         --ids-chart-tooltip-font-size: var(--hop-body-sm-font-size);
diff --git a/packages/Avatar/src/Avatar.stories.tsx b/packages/Avatar/src/Avatar.stories.tsx
index 9aaff37d1..2de2f0597 100644
--- a/packages/Avatar/src/Avatar.stories.tsx
+++ b/packages/Avatar/src/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -15,7 +15,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   args: {
     size: 'medium',
diff --git a/packages/Avatar/src/avatar.scss b/packages/Avatar/src/avatar.scss
index 0c0f314a8..97664fed8 100644
--- a/packages/Avatar/src/avatar.scss
+++ b/packages/Avatar/src/avatar.scss
@@ -6,46 +6,34 @@
 
 @layer igloo {
     :root {
-    --ids-avatar-border-radius: #{tokens.$border-radius-sm};
-    --ids-avatar-border-radius-xs: #{tokens.$border-radius-xs};
-
-    /* Sizes */
-    --ids-avatar-size-xs: #{tokens.$font-size-4};
-    --ids-avatar-size-s: #{tokens.$font-size-7};
-    --ids-avatar-size-m: #{tokens.$font-size-9};
-    --ids-avatar-size-l: #{tokens.$font-size-10};
-    --ids-avatar-size-xl: #{tokens.$space-8};
-    }
-
-    [data-brand="workleap"] {
-    --ids-avatar-border-radius: var(--hop-shape-circle);
-    --ids-avatar-border-radius-xs: var(--hop-shape-circle);
-
-    /* Sizes */
-    --ids-avatar-size-xs: 1rem;
-    --ids-avatar-size-s: 1.5rem;
-    --ids-avatar-size-m: 2rem;
-    --ids-avatar-size-l: 3rem;
-    --ids-avatar-size-xl: 4rem;
+        --ids-avatar-border-radius: var(--hop-shape-circle);
+        --ids-avatar-border-radius-xs: var(--hop-shape-circle);
+
+        /* Sizes */
+        --ids-avatar-size-xs: 1rem;
+        --ids-avatar-size-s: 1.5rem;
+        --ids-avatar-size-m: 2rem;
+        --ids-avatar-size-l: 3rem;
+        --ids-avatar-size-xl: 4rem;
     }
 
     .ids-avatar {
-    box-sizing: border-box;
-    display: inline-flex;
-    flex-shrink: 0;
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-shrink: 0;
 
-    // Remove spaces before and after
-    font-size: 0;
+        // Remove spaces before and after
+        font-size: 0;
 
-    &__image {
-        border-radius: var(--ids-avatar-border-radius);
-        max-height: 100%;
-        width: 100%;
+        &__image {
+            border-radius: var(--ids-avatar-border-radius);
+            max-height: 100%;
+            width: 100%;
 
-        &--xsmall {
-        border-radius: var(--ids-avatar-border-radius-xs);
+            &--xsmall {
+            border-radius: var(--ids-avatar-border-radius-xs);
+            }
         }
-    }
 
         &--xsmall {
             height: var(--ids-avatar-size-xs);
diff --git a/packages/BarChart/src/BarChart.stories.tsx b/packages/BarChart/src/BarChart.stories.tsx
index 5e7dad61c..19a0b6477 100644
--- a/packages/BarChart/src/BarChart.stories.tsx
+++ b/packages/BarChart/src/BarChart.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
-import tokens from '@igloo-ui/tokens/dist/base10/tokens.json';
 
 import readme from '../README.md';
 
@@ -17,39 +16,13 @@ export default {
       }
     },
     chromatic: { delay: 600 },
+    brand: "workleap"
   },
 } as Meta<typeof BarChart>;
 
 type Story = StoryObj<typeof BarChart>;
 
 const mockData = [
-  {
-    id: '1',
-    label: 'Good vibes',
-    value: 48,
-    color: tokens.dandelion400,
-  },
-  {
-    id: '2',
-    label: 'Excellence',
-    value: 46,
-    color: tokens.electricBlue500,
-  },
-  {
-    id: '3',
-    label: 'Radical candor',
-    value: 24,
-    color: tokens.strawberryFields200,
-  },
-  {
-    id: '4',
-    label: 'Custom cards by members',
-    value: 0,
-    color: tokens.sky100,
-  },
-];
-
-const mockDataWL = [
   {
     id: '1',
     label: 'Good vibes',
@@ -76,18 +49,11 @@ const mockDataWL = [
   },
 ];
 
-const getMockData = (brand: string) => {
-  const data = brand === 'workleap' ? mockDataWL : mockData;
-  return data;
-}
-
 export const Overview: Story = {
-  render: (args, { globals: { brand } }) => {
-    return (
+  render: (args) => (
       <BarChart
         {...args}
-        dataSet={getMockData(brand)}
+        dataSet={mockData}
       />
-    );
-  },
+    ),
 };
diff --git a/packages/BarChart/src/bar-chart.scss b/packages/BarChart/src/bar-chart.scss
index c739e0779..f955e8d83 100644
--- a/packages/BarChart/src/bar-chart.scss
+++ b/packages/BarChart/src/bar-chart.scss
@@ -6,26 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-bar-chart-font-family: #{tokens.$primary-font-family};
-        --ids-bar-chart-font-size: #{tokens.$font-size-3};
-        --ids-bar-chart-font-weight: #{tokens.$font-weight-regular};
-        --ids-bar-chart-gap: #{tokens.$space-3};
-        --ids-bar-chart-line-height: #{tokens.$line-height-xxl};
-        --ids-bar-chart-value-font-family: #{tokens.$secondary-font-family};
-        --ids-bar-chart-value-font-size: #{tokens.$font-size-5};
-        --ids-bar-chart-value-line-height: #{tokens.$line-height-xl};
-        --ids-bar-chart-value-color: #{tokens.$grey-800};
-        --ids-bar-chart-value-weight: #{tokens.$font-weight-medium};
-        --ids-bar-chart-content-gap: #{tokens.$space-2};
-        --ids-bar-chart-graph-height: calc(#{tokens.$space-4} / 2);
-        --ids-bar-chart-graph-background: #{tokens.$grey-300};
-        --ids-bar-chart-graph-radius: #{tokens.$border-radius-sm};
-        --ids-bar-chart-graph-width: #{tokens.$space-1};
-        --ids-bar-chart-label-color: #{tokens.$grey-800};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-bar-chart-font-family: var(--hop-body-sm-font-family);
         --ids-bar-chart-font-size: var(--hop-body-sm-font-size);
diff --git a/packages/Breadcrumb/src/Breadcrumb.stories.tsx b/packages/Breadcrumb/src/Breadcrumb.stories.tsx
index 15ce9721b..f8f556a4b 100644
--- a/packages/Breadcrumb/src/Breadcrumb.stories.tsx
+++ b/packages/Breadcrumb/src/Breadcrumb.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
-import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
+import { BrowserRouter, NavLink } from 'react-router-dom';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -17,7 +17,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof Breadcrumb>;
 
diff --git a/packages/Breadcrumb/src/breadcrumb.scss b/packages/Breadcrumb/src/breadcrumb.scss
index cecaf1f11..aee8b0d19 100644
--- a/packages/Breadcrumb/src/breadcrumb.scss
+++ b/packages/Breadcrumb/src/breadcrumb.scss
@@ -6,32 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-breadcrumb-font-family: #{tokens.$primary-font-family};
-        --ids-breadcrumb-font-size: #{tokens.$font-size-3};
-        --ids-breadcrumb-line-height: #{tokens.$line-height-xxl};
-        --ids-breadcrumb-text-transform: none;
-        --ids-breadcrumb-letter-spacing: normal;
-
-        /* Item */
-        --ids-breadcrumb-item-color: #{tokens.$grey-900};
-
-        /* Link */
-        --ids-breadcrumb-link-color: #{tokens.$grey-600};
-        --ids-breadcrumb-link-color-hover: #{tokens.$grey-600};
-        --ids-breadcrumb-link-border: .1rem solid transparent;
-        --ids-breadcrumb-link-border-color-hover: #{tokens.$grey-600};
-        --ids-breadcrumb-link-text-decoration-hover: none;
-        --ids-breadcrumb-link-focus: #{tokens.$focus};
-        --ids-breadcrumb-link-border-radius-focus: #{tokens.$border-radius-xs};
-
-        /* Chevron */
-        --ids-breadcrumb-chevron-color: #{tokens.$grey-800};
-        --ids-breadcrumb-chevron-spacing: 0 #{tokens.$space-2};
-        --ids-breadcrumb-chevron-dimension: auto;
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-breadcrumb-font-family: var(--hop-overline-font-family);
         --ids-breadcrumb-font-size: var(--hop-overline-font-size);
@@ -116,9 +90,7 @@
             margin-left: 0;
         }
     }
-}
 
-[data-brand="workleap"] {
     .ids-breadcrumb__item--current .ids-breadcrumb__text,
     .ids-breadcrumb__link {
         &::after,
@@ -140,3 +112,5 @@
         }
     }
 }
+
+
diff --git a/packages/Button/src/Button.stories.tsx b/packages/Button/src/Button.stories.tsx
index 82b286de2..10714571a 100644
--- a/packages/Button/src/Button.stories.tsx
+++ b/packages/Button/src/Button.stories.tsx
@@ -19,6 +19,7 @@ const meta: Meta<typeof Button> = {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       },
     },
+    brand: "workleap"
   },
   argTypes: {
     children: { description: 'The content to display inside the button' },
@@ -252,7 +253,7 @@ export const States = () => (
         Premium
       </Button>
     </Section>
-    
+
     <Section>
       <Button appearance="danger">Danger</Button>
       <Button disabled appearance="danger">
diff --git a/packages/Button/src/button.scss b/packages/Button/src/button.scss
index 361d35a05..153c63bc0 100644
--- a/packages/Button/src/button.scss
+++ b/packages/Button/src/button.scss
@@ -7,259 +7,130 @@
 @layer igloo {
     :root {
         /* Default */
-        --ids-btn-font-family: #{tokens.$primary-font-family};
-        --ids-btn-font-size: #{tokens.$font-size-4};
-        --ids-btn-font-size-small: #{tokens.$font-size-3};
-        --ids-btn-font-weight: #{tokens.$font-weight-medium};
-        --ids-btn-line-height: normal;
-        --ids-btn-line-height-small: normal;
-        --ids-btn-height: #{tokens.$space-6};
-        --ids-btn-height-small: #{tokens.$space-5};
-        --ids-btn-padding: 0 #{tokens.$space-3};
-        --ids-btn-border-width: 0.1rem;
-        --ids-btn-border-radius: #{tokens.$border-radius-sm};
+        --ids-btn-font-family: var(--hop-body-md-medium-font-family);
+        --ids-btn-font-size: var(--hop-body-md-medium-font-size);
+        --ids-btn-font-size-small: var(--hop-body-sm-medium-font-size);
+        --ids-btn-font-weight: var(--hop-body-md-medium-font-weight);
+        --ids-btn-line-height: var(--hop-body-md-medium-line-height);
+        --ids-btn-line-height-small: var(--hop-body-sm-medium-line-height);
+        --ids-btn-height: 2.5rem;
+        --ids-btn-height-small: 2rem;
+        --ids-btn-padding: 0 var(--hop-space-inset-md);
+        --ids-btn-border-width: 0.0625rem;
+        --ids-btn-border-radius: var(--hop-shape-rounded-md);
         --ids-btn-icon-color: currentcolor;
-        --ids-btn-icon-margin: #{tokens.$space-1};
-        --ids-focus-shadow: #{tokens.$focus};
+        --ids-btn-icon-margin: var(--hop-space-inline-xs);
+        --ids-focus-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
 
         /* Primary */
-        --ids-btn-text-primary: #{tokens.$samoyed};
-        --ids-btn-text-primary-disabled: #{tokens.$samoyed};
-        --ids-btn-text-primary-active: #{tokens.$electric-blue-500};
+        --ids-btn-text-primary: var(--hop-primary-text-strong);
+        --ids-btn-text-primary-disabled: var(--hop-neutral-text-disabled);
+        --ids-btn-text-primary-active: var(--hop-primary-text-selected);
         --ids-btn-border-primary: transparent;
-        --ids-btn-border-primary-active: #{tokens.$electric-blue-500};
-        --ids-btn-background-primary: #{tokens.$electric-blue-500};
-        --ids-btn-background-primary-hover: #{tokens.$electric-blue-600};
-        --ids-btn-background-primary-disabled: #{tokens.$electric-blue-300};
-        --ids-btn-background-primary-active: #{tokens.$electric-blue-50};
-        --ids-btn-background-primary-pressed: #{tokens.$electric-blue-600};
+        --ids-btn-border-primary-active: var(--hop-primary-border-selected);
+        --ids-btn-background-primary: var(--hop-primary-surface-strong);
+        --ids-btn-background-primary-hover: var(--hop-primary-surface-strong-hover);
+        --ids-btn-background-primary-disabled: var(--hop-neutral-surface-disabled);
+        --ids-btn-background-primary-active: var(--hop-primary-surface-selected);
+        --ids-btn-background-primary-pressed: var(--hop-primary-surface-strong-press);
 
         /* Secondary */
-        --ids-btn-text-secondary: #{tokens.$grey-800};
-        --ids-btn-text-secondary-hover: #{tokens.$grey-800};
-        --ids-btn-text-secondary-active: #{tokens.$electric-blue-500};
-        --ids-btn-text-secondary-pressed: #{tokens.$grey-800};
-        --ids-btn-text-secondary-disabled: #{tokens.$grey-600};
-        --ids-btn-border-secondary: #{tokens.$grey-300};
-        --ids-btn-border-secondary-hover: #{tokens.$grey-600};
-        --ids-btn-border-secondary-active: #{tokens.$electric-blue-500};
-        --ids-btn-background-secondary: #{tokens.$samoyed};
-        --ids-btn-background-secondary-hover: #{tokens.$samoyed};
-        --ids-btn-background-secondary-active: #{tokens.$electric-blue-50};
-        --ids-btn-background-secondary-disabled: #{tokens.$grey-300};
-        --ids-btn-background-secondary-pressed: #{tokens.$samoyed};
+        --ids-btn-text-secondary: var(--hop-neutral-text);
+        --ids-btn-text-secondary-hover: var(--hop-neutral-text);
+        --ids-btn-text-secondary-active: var(--hop-neutral-text-selected);
+        --ids-btn-text-secondary-pressed: var(--hop-neutral-text-press);
+        --ids-btn-text-secondary-disabled: var(--hop-neutral-text-disabled);
+        --ids-btn-border-secondary: var(--hop-neutral-border-strong);
+        --ids-btn-border-secondary-hover: var(--hop-neutral-border-strong);
+        --ids-btn-border-secondary-active: var(--hop-neutral-border-selected);
+        --ids-btn-background-secondary: var(--hop-neutral-surface);
+        --ids-btn-background-secondary-hover: var(--hop-neutral-surface-hover);
+        --ids-btn-background-secondary-active: var(--hop-neutral-surface-selected);
+        --ids-btn-background-secondary-disabled: var(--hop-neutral-surface-disabled);
+        --ids-btn-background-secondary-pressed: var(--hop-neutral-surface-press);
 
         /* Premium */
-        --ids-btn-text-premium: #{tokens.$grey-800};
-        --ids-btn-text-premium-disabled: #{tokens.$grey-500};
-        --ids-btn-text-premium-active: #{tokens.$grey-800};
-        --ids-btn-text-premium-hover: #{tokens.$grey-800};
-        --ids-btn-text-premium-pressed: #{tokens.$grey-800};
-        --ids-btn-border-premium: #{tokens.$dandelion-100};
-        --ids-btn-border-premium-active: #{tokens.$dandelion-100};
-        --ids-btn-background-premium: #{tokens.$dandelion-100};
-        --ids-btn-background-premium-hover: #{tokens.$dandelion-200};
-        --ids-btn-background-premium-disabled: #{tokens.$dandelion-50};
-        --ids-btn-background-premium-active: #{tokens.$dandelion-100};
-        --ids-btn-background-premium-pressed: #{tokens.$dandelion-200};
+        --ids-btn-text-premium: var(--hop-upsell-text);
+        --ids-btn-text-premium-disabled: var(--hop-neutral-text-disabled);
+        --ids-btn-text-premium-hover: var(--hop-upsell-text-hover);
+        --ids-btn-text-premium-pressed: var(--hop-upsell-text-press);
+        --ids-btn-text-premium-active: var(--hop-upsell-text-selected);
+        --ids-btn-border-premium-active: var(--hop-upsell-border-selected);
+        --ids-btn-background-premium: var(--hop-upsell-surface);
+        --ids-btn-background-premium-hover: var(--hop-upsell-surface-hover);
+        --ids-btn-background-premium-disabled: var(--hop-neutral-surface-disabled);
+        --ids-btn-background-premium-active: var(--hop-upsell-surface-selected);
+        --ids-btn-background-premium-pressed: var(--hop-upsell-surface-press);
 
         /* Danger */
-        --ids-btn-text-danger: #{tokens.$samoyed};
-        --ids-btn-text-danger-disabled: #{tokens.$samoyed};
-        --ids-btn-text-danger-active: #{tokens.$samoyed};
-        --ids-btn-border-danger: transparent;
-        --ids-btn-border-danger-active: transparent;
-        --ids-btn-background-danger: #{tokens.$coral-500};
-        --ids-btn-background-danger-hover: #{tokens.$coral-600};
-        --ids-btn-background-danger-disabled: #{tokens.$coral-200};
-        --ids-btn-background-danger-active: #{tokens.$coral-500};
-        --ids-btn-background-danger-pressed: #{tokens.$coral-600};
+        --ids-btn-text-danger: var(--hop-danger-text-strong);
+        --ids-btn-text-danger-active: var(--hop-danger-text-selected);
+        --ids-btn-border-danger-active: var(--hop-danger-border-selected);
+        --ids-btn-background-danger: var(--hop-danger-surface-strong);
+        --ids-btn-background-danger-hover: var(--hop-danger-surface-hover);
+        --ids-btn-background-danger-disabled: var(--hop-neutral-surface-disabled);
+        --ids-btn-background-danger-active: var(--hop-danger-surface-selected);
+        --ids-btn-background-danger-pressed: var(--hop-danger-surface-press);
 
         /* Ghost */
-        --ids-btn-padding-ghost: 0 #{tokens.$space-1};
-        --ids-btn-text-ghost: #{tokens.$electric-blue-500};
-        --ids-btn-text-ghost-hover: #{tokens.$electric-blue-600};
-        --ids-btn-text-ghost-pressed: #{tokens.$electric-blue-600};
-        --ids-btn-text-decoration-hover: none;
-        --ids-btn-text-decoration-pressed: none;
-        --ids-btn-text-ghost-disabled: #{tokens.$electric-blue-300};
-        --ids-btn-text-ghost-active: #{tokens.$electric-blue-500};
+        --ids-btn-padding-ghost: 0 var(--hop-space-inset-sm);
+        --ids-btn-text-ghost: var(--hop-primary-text);
+        --ids-btn-text-ghost-hover: var(--hop-primary-text-hover);
+        --ids-btn-text-ghost-disabled: var(--hop-primary-text-disabled);
+        --ids-btn-text-ghost-active: var(--hop-neutral-text);
+        --ids-btn-text-ghost-pressed: var(--hop-primary-text-press);
+        --ids-btn-text-ghost-decoration-hover: underline;
+        --ids-btn-text-ghost-decoration-pressed: underline;
         --ids-btn-border-ghost-active: transparent;
         --ids-btn-background-ghost: transparent;
-        --ids-btn-background-ghost-hover: transparent;
-        --ids-btn-background-ghost-pressed: transparent;
+        --ids-btn-background-ghost-hover: var(--hop-neutral-surface-hover);
+        --ids-btn-background-ghost-pressed: var(--hop-primary-surface-weak-press);
         --ids-btn-background-ghost-disabled: transparent;
-        --ids-btn-background-ghost-active: transparent;
-        --ids-loader-size: 1.2rem;
-        --ids-loader-border: 0.2rem solid rgb(255 255 255 / 30%);
-        --ids-loader-border-ghost: 0.2rem solid rgb(16 83 255 / 30%);
-        --ids-loader-primary: #{tokens.$samoyed};
-        --ids-loader-premium: #{tokens.$grey-800};
-        --ids-loader-premium-active: #{tokens.$grey-800};
-        --ids-loader-premium-disabled: #{tokens.$grey-600};
-        --ids-loader-secondary: #{tokens.$grey-800};
-        --ids-loader-secondary-disabled: #{tokens.$grey-600};
-        --ids-loader-secondary-active: #{tokens.$electric-blue-500};
-        --ids-loader-ghost: #{tokens.$electric-blue-500};
-        --ids-loader-ghost-disabled: #{tokens.$electric-blue-300};
+        --ids-btn-background-ghost-active: var(--hop-neutral-surface-weak-selected);
+        --ids-loader-size: 0.75rem;
+        --ids-loader-border: 0.125rem solid rgb(255 255 255 / 30%);
+        --ids-loader-border-ghost: 0.125rem solid rgb(59 87 255 / 30%);
+        --ids-loader-primary: var(--hop-primary-icon-strong);
+        --ids-loader-primary-active: var(--hop-primary-icon-selected);
+        --ids-loader-premium: var(--hop-upsell-icon);
+        --ids-loader-premium-disabled: var(--hop-neutral-icon);
+        --ids-loader-premium-active: var(--hop-upsell-icon-selected);
+        --ids-loader-secondary: var(--hop-neutral-icon);
+        --ids-loader-secondary-disabled: var(--hop-neutral-icon);
+        --ids-loader-secondary-active: var(--hop-neutral-icon-selected);
+        --ids-loader-ghost: var(--hop-primary-icon);
+        --ids-loader-ghost-active: var(--hop-primary-icon-selected);
+        --ids-loader-ghost-disabled: var(--hop-neutral-icon);
 
         /* Ghost, variant: Danger */
-        --ids-btn-text-ghost-danger: #{tokens.$coral-500};
-        --ids-btn-text-ghost-danger-hover: #{tokens.$coral-600};
-        --ids-btn-text-ghost-danger-disabled: #{tokens.$coral-300};
-        --ids-btn-text-ghost-danger-active: #{tokens.$coral-500};
-        --ids-btn-text-ghost-danger-pressed: #{tokens.$coral-600};
+        --ids-btn-text-ghost-danger: var(--hop-danger-text-weak);
+        --ids-btn-background-ghost-danger-hover: var(--hop-neutral-surface-hover);
+        --ids-btn-background-ghost-danger-active: var(--hop-neutral-surface-weak-selected);
+        --ids-btn-background-ghost-danger-pressed: var(--hop-danger-surface-weak-press);
         --ids-btn-border-ghost-danger-active: transparent;
-        --ids-btn-background-ghost-danger-hover: transparent;
+        --ids-btn-text-ghost-danger-hover: var(--hop-danger-text-hover);
+        --ids-btn-text-ghost-danger-active: var(--hop-danger-text-selected);
+        --ids-btn-text-ghost-danger-pressed: var(--hop-danger-text-press);
         --ids-btn-background-ghost-danger-disabled: transparent;
-        --ids-btn-background-ghost-danger-active: transparent;
-        --ids-btn-background-ghost-danger-pressed: transparent;
-        --ids-loader-border-ghost-danger: 0.2rem solid rgb(249 97 85 / 30%);
-        --ids-loader-ghost-danger: #{tokens.$coral-500};
-        --ids-loader-ghost-danger-active: #{tokens.$coral-500};
+        --ids-btn-text-ghost-danger-disabled: var(--hop-danger-text-disabled);
+        --ids-loader-border-ghost-danger: 0.125rem solid rgb(149 41 39 / 30%);
+        --ids-loader-ghost-danger: var(--hop-danger-icon);
+        --ids-loader-ghost-danger-active: var(--hop-danger-icon-selected);
 
         /* Ghost, variant: Secondary */
-        --ids-btn-text-ghost-secondary: #{tokens.$grey-600};
-        --ids-btn-text-ghost-secondary-hover: #{tokens.$grey-800};
-        --ids-btn-text-ghost-secondary-active: #{tokens.$electric-blue-500};
-        --ids-btn-text-ghost-secondary-pressed: #{tokens.$grey-800};
-        --ids-btn-text-ghost-secondary-disabled: #{tokens.$grey-400};
+        --ids-btn-text-ghost-secondary: var(--hop-neutral-text-weak);
+        --ids-btn-background-ghost-secondary-hover: var(--hop-neutral-surface-hover);
+        --ids-btn-background-ghost-secondary-pressed: var(--hop-neutral-surface-press);
+        --ids-btn-text-ghost-secondary-hover: var(--hop-neutral-text-weak-hover);
+        --ids-btn-text-ghost-secondary-pressed: var(--hop-neutral-text-weak-press);
+        --ids-btn-background-ghost-secondary-active: var(--hop-neutral-surface-weak-selected);
         --ids-btn-border-ghost-secondary-active: transparent;
-        --ids-btn-background-ghost-secondary-hover: transparent;
-        --ids-btn-background-ghost-secondary-active: transparent;
+        --ids-btn-text-ghost-secondary-active: var(--hop-neutral-text);
         --ids-btn-background-ghost-secondary-disabled: transparent;
-        --ids-btn-background-ghost-secondary-pressed: transparent;
-        --ids-loader-border-ghost-secondary: 0.2rem solid rgb(96 107 121 / 30%);
-        --ids-loader-ghost-secondary: #{tokens.$grey-600};
-        --ids-loader-position: calc(-0.6rem - 0.1rem);
-      }
-
-      [data-brand="workleap"] {
-          /* Default */
-          --ids-btn-font-family: var(--hop-body-md-medium-font-family);
-          --ids-btn-font-size: var(--hop-body-md-medium-font-size);
-          --ids-btn-font-size-small: var(--hop-body-sm-medium-font-size);
-          --ids-btn-font-weight: var(--hop-body-md-medium-font-weight);
-          --ids-btn-line-height: var(--hop-body-md-medium-line-height);
-          --ids-btn-line-height-small: var(--hop-body-sm-medium-line-height);
-          --ids-btn-height: 2.5rem;
-          --ids-btn-height-small: 2rem;
-          --ids-btn-padding: 0 var(--hop-space-inset-md);
-          --ids-btn-border-width: 0.0625rem;
-          --ids-btn-border-radius: var(--hop-shape-rounded-md);
-          --ids-btn-icon-color: currentcolor;
-          --ids-btn-icon-margin: var(--hop-space-inline-xs);
-          --ids-focus-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
-
-          /* Primary */
-          --ids-btn-text-primary: var(--hop-primary-text-strong);
-          --ids-btn-text-primary-disabled: var(--hop-neutral-text-disabled);
-          --ids-btn-text-primary-active: var(--hop-primary-text-selected);
-          --ids-btn-border-primary: transparent;
-          --ids-btn-border-primary-active: var(--hop-primary-border-selected);
-          --ids-btn-background-primary: var(--hop-primary-surface-strong);
-          --ids-btn-background-primary-hover: var(--hop-primary-surface-strong-hover);
-          --ids-btn-background-primary-disabled: var(--hop-neutral-surface-disabled);
-          --ids-btn-background-primary-active: var(--hop-primary-surface-selected);
-          --ids-btn-background-primary-pressed: var(--hop-primary-surface-strong-press);
-
-          /* Secondary */
-          --ids-btn-text-secondary: var(--hop-neutral-text);
-          --ids-btn-text-secondary-hover: var(--hop-neutral-text);
-          --ids-btn-text-secondary-active: var(--hop-neutral-text-selected);
-          --ids-btn-text-secondary-pressed: var(--hop-neutral-text-press);
-          --ids-btn-text-secondary-disabled: var(--hop-neutral-text-disabled);
-          --ids-btn-border-secondary: var(--hop-neutral-border-strong);
-          --ids-btn-border-secondary-hover: var(--hop-neutral-border-strong);
-          --ids-btn-border-secondary-active: var(--hop-neutral-border-selected);
-          --ids-btn-background-secondary: var(--hop-neutral-surface);
-          --ids-btn-background-secondary-hover: var(--hop-neutral-surface-hover);
-          --ids-btn-background-secondary-active: var(--hop-neutral-surface-selected);
-          --ids-btn-background-secondary-disabled: var(--hop-neutral-surface-disabled);
-          --ids-btn-background-secondary-pressed: var(--hop-neutral-surface-press);
-
-          /* Premium */
-          --ids-btn-text-premium: var(--hop-upsell-text);
-          --ids-btn-text-premium-disabled: var(--hop-neutral-text-disabled);
-          --ids-btn-text-premium-hover: var(--hop-upsell-text-hover);
-          --ids-btn-text-premium-pressed: var(--hop-upsell-text-press);
-          --ids-btn-text-premium-active: var(--hop-upsell-text-selected);
-          --ids-btn-border-premium-active: var(--hop-upsell-border-selected);
-          --ids-btn-background-premium: var(--hop-upsell-surface);
-          --ids-btn-background-premium-hover: var(--hop-upsell-surface-hover);
-          --ids-btn-background-premium-disabled: var(--hop-neutral-surface-disabled);
-          --ids-btn-background-premium-active: var(--hop-upsell-surface-selected);
-          --ids-btn-background-premium-pressed: var(--hop-upsell-surface-press);
-
-          /* Danger */
-          --ids-btn-text-danger: var(--hop-danger-text-strong);
-          --ids-btn-text-danger-active: var(--hop-danger-text-selected);
-          --ids-btn-border-danger-active: var(--hop-danger-border-selected);
-          --ids-btn-background-danger: var(--hop-danger-surface-strong);
-          --ids-btn-background-danger-hover: var(--hop-danger-surface-hover);
-          --ids-btn-background-danger-disabled: var(--hop-neutral-surface-disabled);
-          --ids-btn-background-danger-active: var(--hop-danger-surface-selected);
-          --ids-btn-background-danger-pressed: var(--hop-danger-surface-press);
-
-          /* Ghost */
-          --ids-btn-padding-ghost: 0 var(--hop-space-inset-sm);
-          --ids-btn-text-ghost: var(--hop-primary-text);
-          --ids-btn-text-ghost-hover: var(--hop-primary-text-hover);
-          --ids-btn-text-ghost-disabled: var(--hop-primary-text-disabled);
-          --ids-btn-text-ghost-active: var(--hop-neutral-text);
-          --ids-btn-text-ghost-pressed: var(--hop-primary-text-press);
-          --ids-btn-text-ghost-decoration-hover: underline;
-          --ids-btn-text-ghost-decoration-pressed: underline;
-          --ids-btn-border-ghost-active: transparent;
-          --ids-btn-background-ghost: transparent;
-          --ids-btn-background-ghost-hover: var(--hop-neutral-surface-hover);
-          --ids-btn-background-ghost-pressed: var(--hop-primary-surface-weak-press);
-          --ids-btn-background-ghost-disabled: transparent;
-          --ids-btn-background-ghost-active: var(--hop-neutral-surface-weak-selected);
-          --ids-loader-size: 0.75rem;
-          --ids-loader-border: 0.125rem solid rgb(255 255 255 / 30%);
-          --ids-loader-border-ghost: 0.125rem solid rgb(59 87 255 / 30%);
-          --ids-loader-primary: var(--hop-primary-icon-strong);
-          --ids-loader-primary-active: var(--hop-primary-icon-selected);
-          --ids-loader-premium: var(--hop-upsell-icon);
-          --ids-loader-premium-disabled: var(--hop-neutral-icon);
-          --ids-loader-premium-active: var(--hop-upsell-icon-selected);
-          --ids-loader-secondary: var(--hop-neutral-icon);
-          --ids-loader-secondary-disabled: var(--hop-neutral-icon);
-          --ids-loader-secondary-active: var(--hop-neutral-icon-selected);
-          --ids-loader-ghost: var(--hop-primary-icon);
-          --ids-loader-ghost-active: var(--hop-primary-icon-selected);
-          --ids-loader-ghost-disabled: var(--hop-neutral-icon);
-
-          /* Ghost, variant: Danger */
-          --ids-btn-text-ghost-danger: var(--hop-danger-text-weak);
-          --ids-btn-background-ghost-danger-hover: var(--hop-neutral-surface-hover);
-          --ids-btn-background-ghost-danger-active: var(--hop-neutral-surface-weak-selected);
-          --ids-btn-background-ghost-danger-pressed: var(--hop-danger-surface-weak-press);
-          --ids-btn-border-ghost-danger-active: transparent;
-          --ids-btn-text-ghost-danger-hover: var(--hop-danger-text-hover);
-          --ids-btn-text-ghost-danger-active: var(--hop-danger-text-selected);
-          --ids-btn-text-ghost-danger-pressed: var(--hop-danger-text-press);
-          --ids-btn-background-ghost-danger-disabled: transparent;
-          --ids-btn-text-ghost-danger-disabled: var(--hop-danger-text-disabled);
-          --ids-loader-border-ghost-danger: 0.125rem solid rgb(149 41 39 / 30%);
-          --ids-loader-ghost-danger: var(--hop-danger-icon);
-          --ids-loader-ghost-danger-active: var(--hop-danger-icon-selected);
-
-          /* Ghost, variant: Secondary */
-          --ids-btn-text-ghost-secondary: var(--hop-neutral-text-weak);
-          --ids-btn-background-ghost-secondary-hover: var(--hop-neutral-surface-hover);
-          --ids-btn-background-ghost-secondary-pressed: var(--hop-neutral-surface-press);
-          --ids-btn-text-ghost-secondary-hover: var(--hop-neutral-text-weak-hover);
-          --ids-btn-text-ghost-secondary-pressed: var(--hop-neutral-text-weak-press);
-          --ids-btn-background-ghost-secondary-active: var(--hop-neutral-surface-weak-selected);
-          --ids-btn-border-ghost-secondary-active: transparent;
-          --ids-btn-text-ghost-secondary-active: var(--hop-neutral-text);
-          --ids-btn-background-ghost-secondary-disabled: transparent;
-          --ids-btn-text-ghost-secondary-disabled: var(--hop-neutral-text-disabled);
-          --ids-loader-border-ghost-secondary: 0.125rem solid rgb(60 60 60 / 30%);
-          --ids-loader-ghost-secondary: var(--hop-neutral-icon);
-          --ids-loader-position: calc(-0.375rem - 0.063rem);
+        --ids-btn-text-ghost-secondary-disabled: var(--hop-neutral-text-disabled);
+        --ids-loader-border-ghost-secondary: 0.125rem solid rgb(60 60 60 / 30%);
+        --ids-loader-ghost-secondary: var(--hop-neutral-icon);
+        --ids-loader-position: calc(-0.375rem - 0.063rem);
       }
 
       /* Placeholder selector for IE11 compatibility */
diff --git a/packages/ButtonGroup/src/ButtonGroup.stories.tsx b/packages/ButtonGroup/src/ButtonGroup.stories.tsx
index c6eface3e..c8216e1a6 100644
--- a/packages/ButtonGroup/src/ButtonGroup.stories.tsx
+++ b/packages/ButtonGroup/src/ButtonGroup.stories.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 
 import { Meta, StoryFn } from '@storybook/react';
 
-import UnorderedList from '@igloo-ui/icons/dist/UnorderedList';
-import Tree from '@igloo-ui/icons/dist/Tree';
 import IconNumbers from '@igloo-ui/icons/dist/Numbers';
 import IconPercentage from '@igloo-ui/icons/dist/Percentage';
 import IconSuccess from '@igloo-ui/icons/dist/Success';
+import Tree from '@igloo-ui/icons/dist/Tree';
+import UnorderedList from '@igloo-ui/icons/dist/UnorderedList';
 
 import Section from '@components/section';
 import readme from '../README.md';
 
-import ButtonGroup, { ButtonItem } from './ButtonGroup';
 import Tooltip from "@igloo-ui/tooltip";
+import ButtonGroup, { ButtonItem } from './ButtonGroup';
 
 const meta: Meta<typeof ButtonGroup> = {
     title: 'Components/ButtonGroup',
@@ -22,7 +22,8 @@ const meta: Meta<typeof ButtonGroup> = {
             description: {
                 component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
             }
-        }
+        },
+        brand: "workleap"
     }
 };
 
diff --git a/packages/ButtonGroup/src/button-group.scss b/packages/ButtonGroup/src/button-group.scss
index 02e6e06a7..5d366e7d7 100644
--- a/packages/ButtonGroup/src/button-group.scss
+++ b/packages/ButtonGroup/src/button-group.scss
@@ -6,65 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-button-group-font-family: #{tokens.$primary-font-family};
-        --ids-button-group-font-size: #{tokens.$font-size-4};
-        --ids-button-group-font-weight: #{tokens.$font-weight-regular};
-        --ids-button-group-text: #{tokens.$grey-800};
-        --ids-button-group-box-sizing: content-box;
-        --ids-button-group-display: flex;
-        --ids-button-group-height: #{tokens.$space-6};
-        --ids-button-group-padding: 0;
-        --ids-button-group-gap: 0;
-        --ids-button-group-background: none;
-        --ids-button-group-border: none;
-        --ids-button-group-border-radius: 0;
-        --ids-button-group-item-border-color: #{tokens.$grey-300};
-        --ids-button-group-item-border-width: .1rem;
-        --ids-button-group-item-border-radius-left: #{tokens.$border-radius-sm} 0 0 #{tokens.$border-radius-sm};
-        --ids-button-group-item-border-radius-right: 0 #{tokens.$border-radius-sm} #{tokens.$border-radius-sm} 0;
-        --ids-button-group-item-border-radius-middle: 0;
-        --ids-button-group-item-background: #{tokens.$samoyed};
-        --ids-button-group-item-margin: -0.1rem;
-        --ids-button-group-item-padding: calc(#{tokens.$space-1} / 2) #{tokens.$space-3};
-        --ids-button-group-item-index: #{tokens.$z-index-0};
-        --ids-button-group-item-index-max: #{tokens.$z-index-max};
-        --ids-button-group-item-focus: 0 0 0 .2rem #{tokens.$electric-blue-600};
-
-        /* Hover */
-        --ids-button-group-item-text-hover: var(--ids-button-group-text);
-        --ids-button-group-item-background-hover: var(--ids-button-group-item-background);
-        --ids-button-group-item-border-color-hover: #{tokens.$grey-600};
-
-        /* Active */
-        --ids-button-group-item-text-pressed: var(--ids-button-group-text);
-        --ids-button-group-item-background-pressed: var(--ids-button-group-item-background);
-        --ids-button-group-item-border-color-pressed: #{tokens.$grey-600};
-
-        /* Selected */
-        --ids-button-group-item-border-selected: #{tokens.$electric-blue-500};
-        --ids-button-group-item-text-selected: #{tokens.$electric-blue-500};
-        --ids-button-group-item-background-selected: #{tokens.$electric-blue-50};
-        --ids-button-group-item-index-selected: #{tokens.$z-index-20};
-
-        /* Disabled */
-        --ids-button-group-item-border-disabled: #{tokens.$grey-300};
-        --ids-button-group-item-text-disabled: #{tokens.$grey-600};
-        --ids-button-group-item-background-disabled: #{tokens.$grey-300};
-
-        /* Variant */
-        --ids-button-group-font-size-small: #{tokens.$font-size-3};
-        --ids-button-group-item-horizontal-padding-small: #{tokens.$space-1};
-        --ids-button-group-item-horizontal-padding-compact: #{tokens.$space-2};
-        --ids-button-group-height-small: #{tokens.$space-5};
-
-        /* With icons */
-        --ids-button-group-icon-spacing: #{tokens.$space-1};
-        --ids-button-group-item-icon-only-width: auto;
-        --ids-button-group-item-icon-only-width-compact: auto;
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-button-group-font-family: var(--hop-body-sm-medium-font-family);
         --ids-button-group-font-size: var(--hop-body-sm-medium-font-size);
diff --git a/packages/Card/src/Card.stories.tsx b/packages/Card/src/Card.stories.tsx
index e49d62d78..b07f34773 100644
--- a/packages/Card/src/Card.stories.tsx
+++ b/packages/Card/src/Card.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -15,7 +15,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   args: {
     size: 'large',
diff --git a/packages/Card/src/card.scss b/packages/Card/src/card.scss
index 83576f598..87fb17698 100644
--- a/packages/Card/src/card.scss
+++ b/packages/Card/src/card.scss
@@ -6,28 +6,7 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-card-font-family: #{tokens.$primary-font-family};
-        --ids-card-font-size: #{tokens.$font-size-4};
-        --ids-card-background: #{tokens.$samoyed};
-        --ids-card-border: none;
-        --ids-card-padding-mobile: #{tokens.$space-3};
-        --ids-card-padding: #{tokens.$space-5};
-        --ids-card-shadow: 0 .1rem .6rem rgb(35 48 67 / 10%);
-        --ids-card-radius: #{tokens.$border-radius-sm};
-
-        /* Medium */
-        --ids-card-padding-medium: #{tokens.$space-4};
-
-        /* Small */
-        --ids-card-padding-small: #{tokens.$space-3};
-
-        /* xSmall */
-        --ids-card-padding-xsmall: 0;
-    }
-
-    [data-brand="workleap"] {
-        /* Default */
+  /* Default */
         --ids-card-font-family: var(--hop-body-md-font-family);
         --ids-card-font-size: var(--hop-body-md-font-size);
         --ids-card-background: var(--hop-neutral-surface);
diff --git a/packages/Carousel/src/Carousel.stories.tsx b/packages/Carousel/src/Carousel.stories.tsx
index cb0fbe17f..4fc1e0561 100644
--- a/packages/Carousel/src/Carousel.stories.tsx
+++ b/packages/Carousel/src/Carousel.stories.tsx
@@ -16,7 +16,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   args: {
     currentSlide: 0,
diff --git a/packages/Carousel/src/carousel.scss b/packages/Carousel/src/carousel.scss
index e9b1f21b3..88ea78036 100644
--- a/packages/Carousel/src/carousel.scss
+++ b/packages/Carousel/src/carousel.scss
@@ -6,35 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-carousel-font-family: #{tokens.$primary-font-family};
-        --ids-carousel-font-size: #{tokens.$font-size-4};
-        --ids-carousel-nav-margin: #{tokens.$space-2} -#{tokens.$space-2} -#{tokens.$space-2};
-
-        /* Bullets */
-        --ids-carousel-bullet-color: #{tokens.$grey-300};
-        --ids-carousel-bullet-focus: #{tokens.$focus};
-        --ids-carousel-bullet-size: #{tokens.$space-2};
-        --ids-carousel-bullet-margin: 0 #{tokens.$space-1};
-        --ids-carousel-bullet-list-margin: #{tokens.$space-2} #{tokens.$space-1};
-
-        /* Actions */
-        --ids-carousel-action-basis: #{tokens.$space-7};
-        --ids-carousel-action-margin: #{tokens.$space-2};
-
-        /* Hover */
-        --ids-carousel-bullet-color-hover: #{tokens.$grey-600};
-
-        /* Active */
-        --ids-carousel-bullet-color-active: #{tokens.$grey-600};
-        --ids-carousel-bullet-color-active-hover: #{tokens.$electric-blue-600};
-
-        /* Needed to add a 0.1px blur to fix a bug where
-        chrome would have a lingering blue line when focusing in and out */
-        --ids-carousel-action-focus: 0 0 0 .2rem #ffffff, 0 0 .01rem .35rem #0c46d0;
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-carousel-font-family: var(--hop-body-md-font-family);
         --ids-carousel-font-size: var(--hop-body-md-font-size);
diff --git a/packages/Checkbox/src/Checkbox.stories.tsx b/packages/Checkbox/src/Checkbox.stories.tsx
index 5f78e6694..c0d12700c 100644
--- a/packages/Checkbox/src/Checkbox.stories.tsx
+++ b/packages/Checkbox/src/Checkbox.stories.tsx
@@ -15,7 +15,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     children: { control: { type: 'text' } },
diff --git a/packages/Checkbox/src/checkbox.scss b/packages/Checkbox/src/checkbox.scss
index 49dd89c45..8554a2f4b 100644
--- a/packages/Checkbox/src/checkbox.scss
+++ b/packages/Checkbox/src/checkbox.scss
@@ -6,52 +6,7 @@
 
 @layer igloo {
     :root {
-        /* Default */
         --ids-checkbox-font-family: #{tokens.$primary-font-family};
-        --ids-checkbox-font-weight: #{tokens.$font-weight-regular};
-        --ids-checkbox-font-size: #{tokens.$font-size-4};
-        --ids-checkbox-focus: #{tokens.$focus};
-        --ids-checkbox-size: #{tokens.$font-size-3};
-        --ids-checkbox-line-height: 2rem;
-        --ids-checkbox-radius: #{tokens.$border-radius-sm};
-        --ids-checkbox-check: #{tokens.$samoyed};
-        --ids-checkbox-margin: #{tokens.$space-2};
-        --ids-checkbox-top-space: .2rem;
-        --ids-checkbox-box-sizing: content-box;
-        --ids-checkbox-text: #{tokens.$grey-800};
-        --ids-checkbox-text-disabled: #{tokens.$grey-600};
-        --ids-checkbox-text-hover: #{tokens.$grey-800};
-        --ids-checkbox-text-press: #{tokens.$grey-800};
-        --ids-checkbox-background: #{tokens.$samoyed};
-        --ids-checkbox-background-hover: #{tokens.$samoyed};
-        --ids-checkbox-background-disabled: #{tokens.$grey-200};
-        --ids-checkbox-background-checked: #{tokens.$electric-blue-500};
-        --ids-checkbox-border-checked-hover: #{tokens.$electric-blue-500};
-        --ids-checkbox-background-checked-disabled: #{tokens.$grey-400};
-        --ids-checkbox-background-pressed: #{tokens.$samoyed};
-        --ids-checkbox-border: #{tokens.$grey-400};
-        --ids-checkbox-border-hover: #{tokens.$grey-800};
-        --ids-checkbox-border-checked: #{tokens.$electric-blue-500};
-        --ids-checkbox-border-pressed: #{tokens.$grey-800};
-        --ids-checkbox-border-disabled: #{tokens.$grey-400};
-        --ids-checkbox-check-color-disabled: #{tokens.$grey-600};
-        --ids-checkbox-check-size: #{tokens.$font-size-3};
-        --ids-checkbox-check-color-hover: transparent;
-        --ids-checkbox-check-color-selected: #{tokens.$samoyed};
-        --ids-checkbox-check-color-default: transparent;
-
-        /* Completion */
-        --ids-checkbox-completion-size: #{tokens.$space-4};
-        --ids-checkbox-completion-radius: 50%;
-        --ids-checkbox-one-px: 0.1rem;
-        --ids-checkbox-completion-border-disabled: #{tokens.$grey-300};
-        --ids-checkbox-completion-check-color-disabled: #{tokens.$grey-400};
-        --ids-checkbox-completion-check-color-hover: #{tokens.$grey-800};
-        --ids-checkbox-completion-check-color-selected: #{tokens.$samoyed};
-        --ids-checkbox-completion-check-color-default: #{tokens.$grey-200};
-    }
-
-    [data-brand="workleap"] {
         --ids-checkbox-font-size: var(--hop-body-sm-font-size);
         --ids-checkbox-font-weight: var(--hop-body-sm-font-weight);
         --ids-checkbox-line-height: var(--hop-body-sm-line-height);
diff --git a/packages/Color/src/Color.stories.tsx b/packages/Color/src/Color.stories.tsx
index 35f5f1d75..d794525ed 100644
--- a/packages/Color/src/Color.stories.tsx
+++ b/packages/Color/src/Color.stories.tsx
@@ -2,21 +2,11 @@ import React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
-import variables from '@igloo-ui/tokens/dist/base10/tokens.json';
 import Section from '@components/section';
 import readme from '../README.md';
 
 import Color from './Color';
 
-const iglooColors = [
-  variables.coral800,
-  variables.electricBlue700,
-  variables.sky100,
-  variables.coral200,
-  variables.samoyed,
-  variables.coral900
-]
-
 const workleapColors = [
   "var(--hop-decorative-option2-surface)",
   "var(--hop-decorative-option4-surface)",
@@ -26,11 +16,6 @@ const workleapColors = [
   "var(--hop-decorative-option8-text)"
 ]
 
-const getColors = (brand: string) => {
-  const colors = brand === 'workleap' ? workleapColors : iglooColors;
-  return colors;
-}
-
 export default {
   title: 'Components/Color',
   component: Color,
@@ -39,7 +24,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     children: {
@@ -51,10 +37,10 @@ export default {
 type Story = StoryObj<typeof Color>;
 
 export const Overview: Story = {
-  render: (args, { globals: { brand } }) => {
+  render: (args) => {
     return (
       <Section>
-        <Color {...args} color={getColors(brand)[2]} />
+        <Color {...args} color={workleapColors[2]} />
       </Section>
     );
   },
@@ -64,25 +50,25 @@ export const Overview: Story = {
 };
 
 export const Sizes: Story = {
-  render: (_args, { globals: { brand } }) => {
+  render: () => {
     return (
       <Section>
-        <Color color={getColors(brand)[0]} size="small" />
-        <Color color={getColors(brand)[0]} size="medium" />
-        <Color color={getColors(brand)[0]} size="large" />
-        <Color color={getColors(brand)[0]} size="xlarge" />
+        <Color color={workleapColors[0]} size="small" />
+        <Color color={workleapColors[0]} size="medium" />
+        <Color color={workleapColors[0]} size="large" />
+        <Color color={workleapColors[0]} size="xlarge" />
       </Section>
     );
   }
 };
 
 export const Initials: Story = {
-  render: (_args, { globals: { brand } }) => {
+  render: () => {
     return (
       <Section>
         <Color
-          color={getColors(brand)[3]}
-          textColor={getColors(brand)[5]}
+          color={workleapColors[3]}
+          textColor={workleapColors[5]}
           size="xlarge"
           name="Awesome Possum Team"
         />
@@ -92,10 +78,10 @@ export const Initials: Story = {
 };
 
 export const CustomText: Story = {
-  render: (_args, { globals: { brand } }) => {
+  render: () => {
     return (
       <Section>
-        <Color color={getColors(brand)[1]} textColor={getColors(brand)[4]} size="xlarge" name="VC" />
+        <Color color={workleapColors[1]} textColor={workleapColors[4]} size="xlarge" name="VC" />
       </Section>
     );
   }
diff --git a/packages/Color/src/color.scss b/packages/Color/src/color.scss
index c520d718d..fb88abf09 100644
--- a/packages/Color/src/color.scss
+++ b/packages/Color/src/color.scss
@@ -6,33 +6,6 @@
 
 @layer igloo {
     :root {
-        --ids-color-background: var(--ids-color-background);
-        --ids-color-border-radius: #{tokens.$border-radius-sm};
-        --ids-color-border-radius-xs: #{tokens.$border-radius-xs};
-        --ids-color-border-radius-square: #{tokens.$border-radius-sm};
-        --ids-color-border-radius-square-xs: #{tokens.$border-radius-xs};
-        --ids-color-color: var(--ids-color-text, #{tokens.$samoyed});
-        --ids-color-font-family: #{tokens.$secondary-font-family};
-        --ids-color-font-size: #{tokens.$font-size-4};
-        --ids-color-font-size-large: #{tokens.$font-size-4};
-        --ids-color-font-size-medium: #{tokens.$font-size-3};
-        --ids-color-font-size-small: #{tokens.$font-size-3};
-        --ids-color-font-weight: #{tokens.$font-weight-medium};
-
-        /* Sizes */
-        --ids-color-size-s: #{tokens.$font-size-3};
-        --ids-color-size-m: #{tokens.$font-size-4};
-        --ids-color-size-l: #{tokens.$font-size-7};
-        --ids-color-size-xl: #{tokens.$font-size-9};
-
-        /* Square */
-        --ids-color-padding-square-s: calc(#{tokens.$space-1} / 4);
-        --ids-color-padding-square-m: calc(#{tokens.$space-1} / 4);
-        --ids-color-padding-square-l: #{tokens.$space-1};
-        --ids-color-padding-square-xl: 0.6rem;
-    }
-
-    [data-brand="workleap"] {
         --ids-color-border-radius: var(--hop-shape-circle);
         --ids-color-border-radius-xs: var(--hop-shape-circle);
         --ids-color-border-radius-square: var(--hop-shape-rounded-sm);
diff --git a/packages/ColorPicker/src/ColorPicker.stories.tsx b/packages/ColorPicker/src/ColorPicker.stories.tsx
index d87e4ad6b..1d308b519 100644
--- a/packages/ColorPicker/src/ColorPicker.stories.tsx
+++ b/packages/ColorPicker/src/ColorPicker.stories.tsx
@@ -15,21 +15,16 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   }
 } as Meta<typeof ColorPicker>;
 
 type Story = StoryObj<typeof ColorPicker>;
 
 export const Overview: Story = {
-  render: (args, {globals: {brand}}) => {
-    const defaultColor = brand === "workleap" ? "decorativeOption3" : "dandelion200";
-    const [selectedColor, setSelectedColor] = React.useState<ColorName>(defaultColor);
-
-    React.useEffect(() => {
-        // update the selected color if the theme changes
-        setSelectedColor(defaultColor);
-    }, [defaultColor])
+  render: (args) => {
+    const [selectedColor, setSelectedColor] = React.useState<ColorName>("decorativeOption3");
 
     return (
       <Section>
diff --git a/packages/ColorPicker/src/ColorPicker.test.tsx b/packages/ColorPicker/src/ColorPicker.test.tsx
index 04a681fb0..e56ec0615 100644
--- a/packages/ColorPicker/src/ColorPicker.test.tsx
+++ b/packages/ColorPicker/src/ColorPicker.test.tsx
@@ -1,12 +1,12 @@
 /**
   * @jest-environment jsdom
 */
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'
 import MockDropdown from '@igloo-ui/dropdown/src/__mocks__/Dropdown.mock';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 
-import ColorPicker, { ColorName, ColorPickerProps, colorNamesIgloo } from './ColorPicker';
+import ColorPicker, { ColorName, ColorPickerProps, colorNames } from './ColorPicker';
 
 jest.mock('@igloo-ui/dropdown', () => ({
   __esModule: true,
@@ -37,11 +37,11 @@ describe('ColorPicker', () => {
     const button = screen.getByRole('button');
     fireEvent.click(button);
     const options = screen.getAllByRole('option');
-    expect(options.length).toBe(colorNamesIgloo.length);
+    expect(options.length).toBe(colorNames.length);
   });
 
   test('It should call the onSelect callback and update the selected item when a color is selected', async () => {
-    let selectedColor = 'dandelion200' as ColorName;
+    let selectedColor = 'decorativeOption3' as ColorName;
     const onSelect = jest.fn((color: ColorName) => {
       selectedColor = color;
     });
@@ -51,9 +51,9 @@ describe('ColorPicker', () => {
     const option = screen.getAllByRole('option')[2];
 
     await userEvent.click(option);
-    expect(onSelect).toHaveBeenCalledWith("creamsicle150");
+    expect(onSelect).toHaveBeenCalledWith("decorativeOption1");
     rerender(<ColorPicker onSelect={onSelect} selectedColor={selectedColor} />);
-    expect(button).toHaveAttribute("data-color", "creamsicle150");
+    expect(button).toHaveAttribute("data-color", "decorativeOption1");
   });
 
   test('It should not show the color picker options when disabled', () => {
diff --git a/packages/ColorPicker/src/ColorPicker.tsx b/packages/ColorPicker/src/ColorPicker.tsx
index 64f68ad8e..9e0cb1cea 100644
--- a/packages/ColorPicker/src/ColorPicker.tsx
+++ b/packages/ColorPicker/src/ColorPicker.tsx
@@ -1,18 +1,17 @@
 import * as React from "react";
 
 import cx from "classnames";
+import { FocusScope, mergeProps } from "react-aria";
 import { Button, type ButtonProps, ListBox } from "react-aria-components";
-import { mergeProps, FocusScope } from "react-aria";
 import type { Selection } from "react-stately";
 
-import Dropdown from "@igloo-ui/dropdown";
 import Color from "@igloo-ui/color";
+import Dropdown from "@igloo-ui/dropdown";
 import Checkmark from "@igloo-ui/icons/dist/Checkmark";
-import variables from "@igloo-ui/tokens/dist/base10/tokens.json";
 import { useLocalizedStringFormatter } from "@igloo-ui/provider";
 
-import intlMessages from "./intl";
 import ColorPickerOption from "./ColorPickerOption";
+import intlMessages from "./intl";
 
 import "./color-picker.scss";
 
@@ -23,148 +22,58 @@ export interface ColorNameItem {
     iconColor: string;
 }
 
-export const colorNamesIgloo = [
-    { 
-        id: "dandelion200", 
-        value: variables.dandelion200, 
-        hoverColor: variables.dandelion200, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "dandelion400", 
-        value: variables.dandelion400, 
-        hoverColor: variables.dandelion400, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "creamsicle150", 
-        value: variables.creamsicle150, 
-        hoverColor: variables.creamsicle150, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "creamsicle200", 
-        value: variables.creamsicle200, 
-        hoverColor: variables.creamsicle200, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "coral200", 
-        value: variables.coral200, 
-        hoverColor: variables.coral200, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "coral300", 
-        value: variables.coral300, 
-        hoverColor: variables.coral300, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "strawberryFields200", 
-        value: variables.strawberryFields200, 
-        hoverColor: variables.strawberryFields200, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "coral800", 
-        value: variables.coral800, 
-        hoverColor: variables.coral800, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "seaweed300", 
-        value: variables.seaweed300, 
-        hoverColor: variables.seaweed300, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "sky100", 
-        value: variables.sky100, 
-        hoverColor: variables.sky100, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "sky200", 
-        value: variables.sky200, 
-        hoverColor: variables.sky200, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "electricBlue200", 
-        value: variables.electricBlue200, 
-        hoverColor: variables.electricBlue200, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "electricBlue400", 
-        value: variables.electricBlue400, 
-        hoverColor: variables.electricBlue400, 
-        iconColor: variables.samoyed 
-    },
-    { 
-        id: "electricBlue700", 
-        value: variables.electricBlue700, 
-        hoverColor: variables.electricBlue700, 
-        iconColor: variables.samoyed 
-    }
-] as const;
-
-export const colorNamesWorkleap = [
-    { 
-        id: "decorativeOption3", 
-        value: "var(--hop-decorative-option3-surface)", 
-        hoverColor: "var(--hop-decorative-option3-surface-hover)", 
-        iconColor: "var(--hop-decorative-option3-icon)" 
-    },
-    { 
-        id: "decorativeOption6", 
-        value: "var(--hop-decorative-option6-surface)", 
-        hoverColor: "var(--hop-decorative-option6-surface-hover)", 
-        iconColor: "var(--hop-decorative-option6-icon)" 
-    },
-    { 
-        id: "decorativeOption1", 
-        value: "var(--hop-decorative-option1-surface)", 
-        hoverColor: "var(--hop-decorative-option1-surface-hover)", 
-        iconColor: "var(--hop-decorative-option1-icon)" 
-    },
-    { 
-        id: "decorativeOption8", 
-        value: "var(--hop-decorative-option8-surface)", 
-        hoverColor: "var(--hop-decorative-option8-surface-hover)", 
-        iconColor: "var(--hop-decorative-option8-icon)" 
-    },
-    { 
-        id: "decorativeOption5", 
-        value: "var(--hop-decorative-option5-surface)", 
-        hoverColor: "var(--hop-decorative-option5-surface-hover)", 
-        iconColor: "var(--hop-decorative-option5-icon)" 
-    },
-    { 
-        id: "decorativeOption4", 
-        value: "var(--hop-decorative-option4-surface)", 
-        hoverColor: "var(--hop-decorative-option4-surface-hover)", 
-        iconColor: "var(--hop-decorative-option4-icon)" 
-    },
-    { 
-        id: "decorativeOption2", 
-        value: "var(--hop-decorative-option2-surface)", 
-        hoverColor: "var(--hop-decorative-option2-surface-hover)", 
-        iconColor: "var(--hop-decorative-option2-icon)" 
-    },
-    { 
-        id: "decorativeOption7", 
-        value: "var(--hop-decorative-option7-surface)", 
-        hoverColor: "var(--hop-decorative-option7-surface-hover)", 
-        iconColor: "var(--hop-decorative-option7-icon)" 
+export const colorNames = [
+    {
+        id: "decorativeOption3",
+        value: "var(--hop-decorative-option3-surface)",
+        hoverColor: "var(--hop-decorative-option3-surface-hover)",
+        iconColor: "var(--hop-decorative-option3-icon)"
+    },
+    {
+        id: "decorativeOption6",
+        value: "var(--hop-decorative-option6-surface)",
+        hoverColor: "var(--hop-decorative-option6-surface-hover)",
+        iconColor: "var(--hop-decorative-option6-icon)"
+    },
+    {
+        id: "decorativeOption1",
+        value: "var(--hop-decorative-option1-surface)",
+        hoverColor: "var(--hop-decorative-option1-surface-hover)",
+        iconColor: "var(--hop-decorative-option1-icon)"
+    },
+    {
+        id: "decorativeOption8",
+        value: "var(--hop-decorative-option8-surface)",
+        hoverColor: "var(--hop-decorative-option8-surface-hover)",
+        iconColor: "var(--hop-decorative-option8-icon)"
+    },
+    {
+        id: "decorativeOption5",
+        value: "var(--hop-decorative-option5-surface)",
+        hoverColor: "var(--hop-decorative-option5-surface-hover)",
+        iconColor: "var(--hop-decorative-option5-icon)"
+    },
+    {
+        id: "decorativeOption4",
+        value: "var(--hop-decorative-option4-surface)",
+        hoverColor: "var(--hop-decorative-option4-surface-hover)",
+        iconColor: "var(--hop-decorative-option4-icon)"
+    },
+    {
+        id: "decorativeOption2",
+        value: "var(--hop-decorative-option2-surface)",
+        hoverColor: "var(--hop-decorative-option2-surface-hover)",
+        iconColor: "var(--hop-decorative-option2-icon)"
+    },
+    {
+        id: "decorativeOption7",
+        value: "var(--hop-decorative-option7-surface)",
+        hoverColor: "var(--hop-decorative-option7-surface-hover)",
+        iconColor: "var(--hop-decorative-option7-icon)"
     }
 ] as const;
 
-export type ColorNameIgloo = typeof colorNamesIgloo[number]["id"];
-export type ColorNameWL = typeof colorNamesWorkleap[number]["id"];
-
-export type ColorName = ColorNameWL | ColorNameIgloo;
+export type ColorName = typeof colorNames[number]["id"];
 
 export interface ColorPickerProps {
     /** Add a specific class to the color picker */
@@ -184,32 +93,10 @@ const ColorPicker: React.FunctionComponent<ColorPickerProps> = ({
     dataTest,
     disabled = false,
     onSelect,
-    selectedColor: propSelectedColor
+    selectedColor = "decorativeOption3"
 }: ColorPickerProps) => {
-    const getBrand = (): string => {
-        return document.documentElement.getAttribute("data-brand") ?? "igloo";
-    };
-
-    const brand = getBrand();
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
-    const getDefaultColor = (): ColorName => {
-        return brand === "workleap" ? "decorativeOption3" : "dandelion200";
-    };
-
-    const selectedColor = propSelectedColor ?? getDefaultColor();
-
-    let colorNames: ReadonlyArray<Readonly<ColorNameItem>>;
-
-    if (brand === "workleap") {
-        colorNames = colorNamesWorkleap;
-    } else {
-        colorNames = colorNamesIgloo;
-    }
-
-    const buttonColorSize = brand === "workleap" ? "medium" : "large";
-    const listColorSize = brand === "workleap" ? "large" : "xlarge";
-    
     const classes = cx("ids-color-picker", className);
     const [showPicker, setShowPicker] = React.useState(false);
     const selectedColorObject = colorNames.find(color => color.id === selectedColor);
@@ -219,7 +106,7 @@ const ColorPicker: React.FunctionComponent<ColorPickerProps> = ({
     const handleSelectionChange = (keys: Selection): void => {
         const color = (keys as Set<ColorName>).keys().next().value;
 
-        if (onSelect) {
+        if (onSelect && color) {
             onSelect(color);
         }
         setShowPicker(false);
@@ -233,9 +120,9 @@ const ColorPicker: React.FunctionComponent<ColorPickerProps> = ({
                 <FocusScope restoreFocus autoFocus>
                     <div className="ids-color-picker__content">
 
-                        <ListBox 
+                        <ListBox
                             selectionMode="single"
-                            selectedKeys={[selectedColor]} 
+                            selectedKeys={[selectedColor]}
                             onSelectionChange={handleSelectionChange}
                             items={colorNames}
                             aria-label={stringFormatter.format("colorOptions")}
@@ -253,7 +140,7 @@ const ColorPicker: React.FunctionComponent<ColorPickerProps> = ({
                                         hoverColor={item.hoverColor}
                                         iconColor={item.iconColor}
                                         icon={<Checkmark size="small" />}
-                                        size={listColorSize}
+                                        size="large"
                                     />
                                 );
                             }}
@@ -280,7 +167,7 @@ const ColorPicker: React.FunctionComponent<ColorPickerProps> = ({
                 return <Button
                     {...mergedProps}
                 >
-                    <Color color={selectedColorValue} size={buttonColorSize} />
+                    <Color color={selectedColorValue} size="medium" />
                 </Button>;
             }
             }
diff --git a/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap b/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap
index 2dd6651be..3978f923d 100644
--- a/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap
+++ b/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap
@@ -8,17 +8,17 @@ exports[`ColorPicker It should render a snapshot 1`] = `
   >
     <button
       class="ids-color-picker__button"
-      data-color="dandelion200"
+      data-color="decorativeOption3"
       data-rac=""
-      style="--ids-picker-selected-color-hover: #FDDE88;"
+      style="--ids-picker-selected-color-hover: var(--hop-decorative-option3-surface-hover);"
       type="button"
     >
       <div
-        class="ids-color ids-color--large ids-color--circular"
+        class="ids-color ids-color--medium ids-color--circular"
       >
         <div
           class="ids-color__inner"
-          style="--ids-color-background: #FDDE88;"
+          style="--ids-color-background: var(--hop-decorative-option3-surface);"
         />
       </div>
     </button>
diff --git a/packages/ColorPicker/src/color-picker-option.scss b/packages/ColorPicker/src/color-picker-option.scss
index 0980b71a1..b7288dbe6 100644
--- a/packages/ColorPicker/src/color-picker-option.scss
+++ b/packages/ColorPicker/src/color-picker-option.scss
@@ -2,23 +2,6 @@
 @use '~@igloo-ui/tokens/dist/fonts';
 
 :root {
-  /* Default */
-  --ids-color-picker-option-border-radius: #{tokens.$border-radius-md};
-  --ids-color-picker-option-border-size: 0.15rem;
-  --ids-color-picker-option-padding: #{tokens.$space-1};
-
-  /* Focused */
-  --ids-color-picker-option-border-color-focus: #{tokens.$electric-blue-600};
-
-  /* Hovered */
-  --ids-color-picker-option-border-color-hover: #{tokens.$grey-600};
-
-  /* Selected */
-  --ids-color-picker-option-border-color-selected: #{tokens.$grey-400};
-
-}
-
-[data-brand="workleap"] {
   /* Default */
   --ids-color-picker-option-border-radius: var(--hop-shape-circle);
   --ids-color-picker-option-border-size: 0.09rem;
diff --git a/packages/ColorPicker/src/color-picker.scss b/packages/ColorPicker/src/color-picker.scss
index 2e31e78d8..f4c740eec 100644
--- a/packages/ColorPicker/src/color-picker.scss
+++ b/packages/ColorPicker/src/color-picker.scss
@@ -6,27 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-color-picker-font-family: #{tokens.$primary-font-family};
-        --ids-color-picker-font-size: #{tokens.$font-size-4};
-        --ids-color-picker-font-weight: #{tokens.$font-weight-regular};
-        --ids-color-picker-line-height: #{tokens.$line-height-sm};
-        --ids-color-picker-padding: #{tokens.$space-1};
-
-        /* Button */
-        --ids-color-picker-btn-background: #{tokens.$samoyed};
-        --ids-color-picker-btn-background-disabled: #{tokens.$grey-300};
-        --ids-color-picker-btn-border-color: #{tokens.$grey-300};
-        --ids-color-picker-btn-border-color-hover: #{tokens.$grey-600};
-        --ids-color-picker-btn-border-color-active: #{tokens.$grey-600};
-        --ids-color-picker-btn-border-color-disabled: #{tokens.$grey-300};
-        --ids-color-picker-btn-border-radius: #{tokens.$border-radius-sm};
-        --ids-color-picker-btn-border-size: 0.15rem;
-        --ids-color-picker-btn-focus: #{tokens.$electric-blue-600};
-        --ids-color-picker-btn-padding: #{tokens.$space-2};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-color-picker-font-family: var(--hop-body-sm-font-family);
         --ids-color-picker-font-size: var(--hop-body-sm-font-size);
diff --git a/packages/Combobox/src/Combobox.stories.tsx b/packages/Combobox/src/Combobox.stories.tsx
index fc1585a27..e3ef85f84 100644
--- a/packages/Combobox/src/Combobox.stories.tsx
+++ b/packages/Combobox/src/Combobox.stories.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 
-import Tag from '@igloo-ui/tag';
+import Button from '@igloo-ui/button';
 import Happiness from '@igloo-ui/icons/dist/Happiness';
 import { OptionType } from '@igloo-ui/list';
-import Button from '@igloo-ui/button';
+import Tag from '@igloo-ui/tag';
 
 import Section from '@components/section';
 import readme from '../../Combobox/README.md';
@@ -23,6 +23,7 @@ export default {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       },
     },
+    brand: "workleap"
   },
   decorators: [
     (Story) => (
diff --git a/packages/Combobox/src/ComboboxInput.tsx b/packages/Combobox/src/ComboboxInput.tsx
index 0d3fef6bc..5519f96ee 100644
--- a/packages/Combobox/src/ComboboxInput.tsx
+++ b/packages/Combobox/src/ComboboxInput.tsx
@@ -3,14 +3,12 @@ import * as React from "react";
 import cx from "classnames";
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { VisualIdentifier } from "@shared/components";
-import ChevronUp from "@igloo-ui/icons/dist/TableChevronSelectedUp";
-import ChevronDown from "@igloo-ui/icons/dist/TableChevronSelectedDown";
+import { AngleDownIcon, AngleUpIcon, DismissIcon } from "@hopper-ui/icons-react16";
 import IconButton from "@igloo-ui/icon-button";
 import Search from "@igloo-ui/icons/dist/Search";
-import Tooltip from "@igloo-ui/tooltip";
 import Input from "@igloo-ui/input";
-import { AngleDownIcon, AngleUpIcon, DismissIcon } from "@hopper-ui/icons-react16";
+import Tooltip from "@igloo-ui/tooltip";
+import { VisualIdentifier } from "@shared/components";
 
 import "./combobox-input.scss";
 
@@ -47,10 +45,6 @@ export interface ComboboxInputProps extends React.ComponentProps<"div"> {
     value?: string;
 }
 
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 const ComboboxInput: React.FunctionComponent<ComboboxInputProps> = ({
     clear = false,
     clearTooltipText,
@@ -69,14 +63,9 @@ const ComboboxInput: React.FunctionComponent<ComboboxInputProps> = ({
     value,
     ...rest
 }: ComboboxInputProps) => {
-    const isWorkleap = getBrand() === "workleap";
     const chevronClass = "ids-combobox-input__chevron";
-    const chevronUpIcon = isWorkleap ?
-        <AngleUpIcon className={chevronClass} size="sm" /> :
-        <ChevronUp className={chevronClass} size="small" />;
-    const chevronDownIcon = isWorkleap ?
-        <AngleDownIcon className={chevronClass} size="sm" /> :
-        <ChevronDown className={chevronClass} size="small" />;
+    const chevronUpIcon = <AngleUpIcon className={chevronClass} size="sm" />
+    const chevronDownIcon = <AngleDownIcon className={chevronClass} size="sm" />
 
     const handleChange = ({
         target
diff --git a/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap b/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap
index 1e0cd8732..6ad7d0a06 100644
--- a/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap
+++ b/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap
@@ -27,17 +27,16 @@ exports[`Combobox It should render a snapshot 1`] = `
           class="ids-combobox-input__actions"
         >
           <svg
-            class="ids-icon ids-combobox-input__chevron"
-            fill="none"
+            aria-hidden="true"
+            class="Icon-module__hop-Icon___QR-jY ids-combobox-input__chevron"
+            focusable="false"
             height="16"
+            role="img"
             viewBox="0 0 16 16"
             width="16"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              clip-rule="evenodd"
-              d="M4.604 10.75c-.891 0-1.337-1.077-.708-1.707l3.397-3.397a1 1 0 0 1 1.414 0l-.497.497.497-.497 3.397 3.397c.63.63.183 1.707-.707 1.707H4.603Z"
-              fill="currentColor"
+              d="M1.97 10.43a.75.75 0 0 0 1.06 0L8 5.46l4.97 4.97a.75.75 0 1 0 1.06-1.061L8.707 4.046a1 1 0 0 0-1.414 0L1.97 9.37a.75.75 0 0 0 0 1.06"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/Combobox/src/combobox-input.scss b/packages/Combobox/src/combobox-input.scss
index 638bf7707..e0975eb4c 100644
--- a/packages/Combobox/src/combobox-input.scss
+++ b/packages/Combobox/src/combobox-input.scss
@@ -1,35 +1,6 @@
 @use '~@igloo-ui/tokens/dist/base10/variables' as tokens;
 
 :root {
-    /* Default */
-    --ids-combobox-input-chevron-color: #{tokens.$grey-800};
-    --ids-combobox-input-search-height: 3.9rem;
-    --ids-combobox-input-actions-padding: 0 #{tokens.$space-2};
-    --ids-combobox-input-value-padding: #{tokens.$space-2} #{tokens.$space-3};
-    --ids-combobox-input-value-color: #{tokens.$grey-800};
-    --ids-combobox-input-clear-margin-right: #{tokens.$space-1};
-
-    /* Disabled */
-    --ids-combobox-input-chevron-color-disabled: #{tokens.$grey-600};
-    --ids-combobox-input-value-color-disabled: #{tokens.$grey-500};
-
-    /* Compact **/
-    --ids-combobox-input-value-padding-compact: #{tokens.$space-1} #{tokens.$space-3};
-    --ids-combobox-input-search-height-compact: 3rem;
-
-    /* Placeholder */
-    --ids-combobox-input-value-color-placeholder: #{tokens.$grey-400};
-
-    /* Visual Identifier */
-    --ids-combobox-input-icon-size: #{tokens.$space-3};
-    --ids-combobox-input-icon-margin-right: #{tokens.$space-2};
-
-    /* Search icon */
-    --ids-combobox-input-search-icon-color: #{tokens.$grey-400};
-    --ids-combobox-input-search-icon-margin: 0 #{tokens.$space-2} 0 #{tokens.$space-3};
-}
-
-[data-brand="workleap"] {
     /* Default */
     --ids-combobox-input-chevron-color: var(--hop-neutral-icon-weak);
     --ids-combobox-input-search-height: 2.4375rem;
@@ -58,7 +29,6 @@
     --ids-combobox-input-search-icon-margin: 0 var(--hop-space-inline-sm) 0 var(--hop-space-inline-md);
 }
 
-
 .ids-combobox-input {
     align-content: center;
     align-items: center;
diff --git a/packages/Combobox/src/combobox.scss b/packages/Combobox/src/combobox.scss
index 4dd82613b..acd611450 100644
--- a/packages/Combobox/src/combobox.scss
+++ b/packages/Combobox/src/combobox.scss
@@ -7,55 +7,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-combobox-font-family: #{tokens.$primary-font-family};
-        --ids-combobox-font-size: #{tokens.$font-size-4};
-        --ids-combobox-font-weight: #{tokens.$font-weight-regular};
-        --ids-combobox-line-height: #{tokens.$space-4};
-        --ids-combobox-background: #{tokens.$samoyed};
-        --ids-combobox-border-width: 0.1rem;
-        --ids-combobox-border-color: #{tokens.$grey-300};
-        --ids-combobox-border-radius: #{tokens.$border-radius-sm};
-        --ids-combobox-height: #{tokens.$space-6};
-
-        /* Compact */
-        --ids-combobox-font-size-compact: #{tokens.$font-size-3};
-        --ids-combobox-line-height-compact: #{tokens.$line-height-xxl};
-        --ids-combobox-height-compact: #{tokens.$space-5};
-
-        /* Hover */
-        --ids-combobox-border-color-hover: #{tokens.$grey-600};
-        --ids-combobox-background-hover: #{tokens.$samoyed};
-
-        /* Pressed */
-        --ids-combobox-border-color-pressed: #{tokens.$grey-600};
-        --ids-combobox-background-pressed: #{tokens.$samoyed};
-
-        /* Active */
-        --ids-combobox-border-color-active: #{tokens.$electric-blue-500};
-        --ids-combobox-background-active: #{tokens.$samoyed};
-
-        /* Focus */
-        --ids-combobox-border-color-focus: #{tokens.$electric-blue-500};
-        --ids-combobox-background-focus: #{tokens.$samoyed};
-        --ids-combobox-focus: none;
-
-        /* Disabled */
-        --ids-combobox-color-disabled: #{tokens.$grey-500};
-        --ids-combobox-background-disabled: #{tokens.$grey-200};
-        --ids-combobox-border-color-disabled: #{tokens.$grey-200};
-
-        /* Error */
-        --ids-combobox-border-color-error: #{tokens.$coral-500};
-
-        /* No Results */
-        --ids-combobox-no-results-color: #{tokens.$grey-600};
-        --ids-combobox-no-results-font-size: #{tokens.$font-size-3};
-        --ids-combobox-no-results-padding: #{tokens.$space-3};
-        --ids-combobox-no-results-line-height: #{tokens.$line-height-xxl};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-combobox-font-family: var(--hop-body-md-font-family);
         --ids-combobox-font-size: var(--hop-body-md-font-size);
@@ -103,7 +54,6 @@
         --ids-combobox-no-results-font-size: var(--hop-body-sm-font-size);
         --ids-combobox-no-results-padding: var(--hop-space-inset-md);
         --ids-combobox-no-results-line-height: var(--hop-body-sm-line-height);
-
     }
 
     .ids-combobox {
diff --git a/packages/Datepicker/src/Datepicker.stories.tsx b/packages/Datepicker/src/Datepicker.stories.tsx
index 8b20c9d73..2bca672f0 100644
--- a/packages/Datepicker/src/Datepicker.stories.tsx
+++ b/packages/Datepicker/src/Datepicker.stories.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
-import { DateTime } from 'luxon';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+import { DateTime } from 'luxon';
 
 import Datepicker from './Datepicker';
 
@@ -18,6 +18,7 @@ export default {
                 component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
             },
         },
+        brand: "workleap"
     },
     argTypes: {
         selectedDay: {
diff --git a/packages/Datepicker/src/datepicker.scss b/packages/Datepicker/src/datepicker.scss
index a5ec80b07..479bb947d 100644
--- a/packages/Datepicker/src/datepicker.scss
+++ b/packages/Datepicker/src/datepicker.scss
@@ -7,53 +7,6 @@
 @layer igloo {
     :root {
         // Calculation of the width of the datepicker to obtain a square cell
-      --ids-datepicker-cell-size: #{tokens.$space-6};
-      --ids-datepicker-cell-number: 7;
-      --ids-datepicker-cell-border: .2rem;
-      --ids-datepicker-cell-empty-border: calc(6 * .05rem);
-
-      /* Default */
-      --ids-datepicker-font-family: #{tokens.$primary-font-family};
-      --ids-datepicker-font-size: #{tokens.$font-size-4};
-      --ids-datepicker-width: calc(var(--ids-datepicker-cell-number) * var(--ids-datepicker-cell-size) - var(--ids-datepicker-cell-border) - var(--ids-datepicker-cell-empty-border));
-      --ids-datepicker-color-disabled: #{tokens.$grey-600};
-      --ids-datepicker-table-width: 100%;
-      --ids-datepicker-table-margin: #{tokens.$space-3};
-      --ids-datepicker-table-border: .1rem solid #{tokens.$grey-250};
-      --ids-datepicker-table-border-radius: 0;
-      --ids-datepicker-thead-font-size: #{tokens.$font-size-3};
-      --ids-datepicker-thead-font-weight: 400;
-      --ids-datepicker-thead-line-height: 1.25;
-      --ids-datepicker-thead-color: #{tokens.$electric-blue-500};
-      --ids-datepicker-tbody-outline: 0 solid transparent;
-      --ids-datepicker-tbody-outline-offset: 0;
-      --ids-datepicker-tbody-radius: 0;
-      --ids-datepicker-content-today-outline: none;
-      --ids-datepicker-content-today-outline-offset: 0;
-      --ids-datepicker-thead-space: #{tokens.$space-2};
-      --ids-datepicker-title-font-size: #{tokens.$font-size-5};
-      --ids-datepicker-title-line-height: 1.333;
-      --ids-datepicker-content-color-today: #{tokens.$electric-blue-500};
-      --ids-datepicker-content-background-hover: #{tokens.$electric-blue-600};
-      --ids-datepicker-content-background-pressed: #{tokens.$electric-blue-600};
-      --ids-datepicker-content-color: #{tokens.$black};
-      --ids-datepicker-content-color-hover: #{tokens.$samoyed};
-      --ids-datepicker-content-color-pressed: #{tokens.$samoyed};
-      --ids-datepicker-content-background-selected: #{tokens.$electric-blue-500};
-      --ids-datepicker-content-color-selected: #{tokens.$samoyed};
-      --ids-datepicker-content-line-height: 3.8rem;
-      --ids-datepicker-margin-offset: -0.1rem;
-      --ids-datepicker-content-focus: #{tokens.$electric-blue-600} solid .15rem;
-      --ids-datepicker-content-focus-offset: 0;
-
-      // Disabled state
-      --ids-datepicker-disabled-background-selected: #51a0fa;
-      --ids-datepicker-color-disabled-selected: #{tokens.$samoyed};
-      --ids-datepicker-disabled-table-border: .1rem solid #eff1f5;
-    }
-
-    [data-brand="workleap"] {
-        // Calculation of the width of the datepicker to obtain a square cell
       --ids-datepicker-cell-size: 2.5rem;
       --ids-datepicker-cell-number: 7;
 
diff --git a/packages/Dialog/src/Dialog.stories.tsx b/packages/Dialog/src/Dialog.stories.tsx
index 882e534bc..6015c2798 100644
--- a/packages/Dialog/src/Dialog.stories.tsx
+++ b/packages/Dialog/src/Dialog.stories.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
+import React from 'react';
 
 import { Meta, StoryFn } from '@storybook/react';
 
-import Button from '@igloo-ui/button';
 import ChromaticWrapper from '@components/chromaticWrapper';
+import Button from '@igloo-ui/button';
 
 import readme from '../README.md';
 
@@ -20,6 +20,7 @@ export default {
       }
     },
     chromatic: { pauseAnimationAtEnd: true },
+    brand: "workleap"
   },
 } as Meta<typeof Dialog>;
 
@@ -231,4 +232,4 @@ export const Loading = () => {
       />
     </ChromaticWrapper>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/Dialog/src/dialog.scss b/packages/Dialog/src/dialog.scss
index 5f2d6dd07..5ba63d715 100644
--- a/packages/Dialog/src/dialog.scss
+++ b/packages/Dialog/src/dialog.scss
@@ -6,32 +6,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-dialog-font-family: #{tokens.$primary-font-family};
-        --ids-dialog-font-size: #{tokens.$font-size-4};
-        --ids-dialog-max-width: calc(100% - #{tokens.$space-5});
-        --ids-dialog-radius: #{tokens.$border-radius-sm};
-        --ids-dialog-header-height: auto;
-        --ids-dialog-header-font-size: #{tokens.$font-size-6};
-        --ids-dialog-header-font-weight: #{tokens.$font-weight-medium};
-        --ids-dialog-header-padding: #{tokens.$space-6} #{tokens.$space-3} #{tokens.$space-2};
-        --ids-dialog-header-title-alignment: center;
-        --ids-dialog-content-padding: #{tokens.$space-2} #{tokens.$space-3} #{tokens.$space-3};
-        --ids-dialog-sub-title-line-height: #{tokens.$line-height-xxxl};
-        --ids-dialog-sub-title-color: #{tokens.$grey-600};
-        --ids-dialog-sub-title-padding-top: 0;
-        --ids-dialog-close-spacing-horizontal: #{tokens.$space-2};
-        --ids-dialog-close-spacing-vertical: #{tokens.$space-2};
-        --ids-dialog-close-position: absolute;
-        --ids-dialog-close-padding-x-left: 0;
-        --ids-dialog-close-padding-x-right: 0;
-        --ids-dialog-buttons-margin: #{tokens.$space-5} -#{tokens.$space-0} -#{tokens.$space-2};
-        --ids-dialog-button-margin: #{tokens.$space-2} #{tokens.$space-0};
-        --ids-dialog-button-width: fit-content;
-        --ids-dialog-button-min-width: #{tokens.$space-10};
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-dialog-font-family: var(--hop-body-md-font-family);
         --ids-dialog-font-size: var(--hop-body-md-font-size);
@@ -61,22 +35,6 @@
     /* stylelint-disable-next-line media-query-no-invalid */
     @media (width >= #{tokens.$breakpoints-sm}) {
         :root {
-            --ids-dialog-header-padding: #{tokens.$space-4} #{tokens.$space-4} #{tokens.$space-2};
-            --ids-dialog-header-title-alignment: center;
-            --ids-dialog-close-spacing-horizontal: #{tokens.$space-3};
-            --ids-dialog-close-spacing-vertical: #{tokens.$space-3};
-            --ids-dialog-close-position: absolute;
-            --ids-dialog-close-padding-x-left: #{tokens.$space-5};
-            --ids-dialog-close-padding-x-right: #{tokens.$space-5};
-            --ids-dialog-content-padding: #{tokens.$space-0} #{tokens.$space-4} #{tokens.$space-4};
-            --ids-dialog-buttons-margin: var(--hop-space-stack-lg) -#{tokens.$space-2} #{tokens.$space-0};
-            --ids-dialog-button-margin: 0 #{tokens.$space-2};
-            --ids-dialog-header-font-size: #{tokens.$font-size-6};
-            --ids-dialog-header-line-height: var(--hop-heading-lg-line-height);
-            --ids-dialog-header-font-weight: #{tokens.$font-weight-medium};
-        }
-
-        [data-brand="workleap"] {
             --ids-dialog-header-padding: var(--hop-space-inset-lg) var(--hop-space-inset-lg) 0;
             --ids-dialog-header-title-alignment: left;
             --ids-dialog-close-spacing-horizontal: calc(var(--hop-space-inline-xs) + var(--hop-space-inline-md));
diff --git a/packages/Disclosure/src/Disclosure.stories.tsx b/packages/Disclosure/src/Disclosure.stories.tsx
index 33402a0cd..9c81675ca 100644
--- a/packages/Disclosure/src/Disclosure.stories.tsx
+++ b/packages/Disclosure/src/Disclosure.stories.tsx
@@ -20,7 +20,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof Disclosure>;
 
@@ -46,9 +47,6 @@ export const Overview: StoryObj<typeof Disclosure> = {
         In the last 30 days
       </div>
     ),
-  },
-  parameters: {
-    brand: "workleap"
   }
 };
 
diff --git a/packages/Disclosure/src/disclosure.scss b/packages/Disclosure/src/disclosure.scss
index 40a3bde2f..62c4160e7 100644
--- a/packages/Disclosure/src/disclosure.scss
+++ b/packages/Disclosure/src/disclosure.scss
@@ -6,54 +6,6 @@
 
 @layer igloo {
     :root {
-        /* === Default === */
-        --ids-disclosure-border-radius: #{tokens.$border-radius-sm};
-        --ids-disclosure-border-width: 0;
-        --ids-disclosure-border-color: transparent;
-        --ids-disclosure-border-color-hover: transparent;
-        --ids-disclosure-border-color-pressed: transparent;
-        --ids-disclosure-border-width-focus: 0.1rem;
-        --ids-disclosure-border-color-focus: #{tokens.$electric-blue-600};
-        --ids-disclosure-color: #{tokens.$grey-800};
-        --ids-disclosure-font-family: #{tokens.$primary-font-family};
-        --ids-disclosure-font-size: #{tokens.$font-size-3};
-        --ids-disclosure-shadow: #{tokens.$shadow-6};
-
-        /* Header/Button */
-        --ids-disclosure-header-background: #{tokens.$samoyed};
-        --ids-disclosure-header-background-hover: #{tokens.$samoyed};
-        --ids-disclosure-header-background-pressed: #{tokens.$samoyed};
-        --ids-disclosure-header-line-height: #{tokens.$line-height-xxl};
-        --ids-disclosure-header-padding: #{tokens.$space-4};
-        --ids-disclosure-header-icon-margin: 0 #{tokens.$space-4} 0 0;
-        --ids-disclosure-header-title-font-family: #{tokens.$secondary-font-family};
-        --ids-disclosure-header-title-font-size: #{tokens.$font-size-6};
-        --ids-disclosure-header-title-font-weight: #{tokens.$font-weight-medium};
-        --ids-disclosure-header-title-line-height: #{tokens.$line-height-lg};
-        --ids-disclosure-header-desc-color: #{tokens.$grey-600};
-        --ids-disclosure-header-content-margin: calc(-#{tokens.$space-1} / 2) -#{tokens.$space-2};
-        --ids-disclosure-header-content-padding: calc(#{tokens.$space-1} / 2) #{tokens.$space-2};
-        --ids-disclosure-header-chevron-color: #{tokens.$grey-600};
-        --ids-disclosure-header-chevron-margin: 0 0 0 #{tokens.$space-2};
-
-        /* Content */
-        --ids-disclosure-content-border: .1rem solid #{tokens.$grey-200};
-
-        /* === Low Contrast === */
-
-        /* Header/Button */
-        --ids-disclosure-low-contrast-header-padding: -.6rem 0;
-        --ids-disclosure-low-contrast-header-icon-margin: 0 #{tokens.$space-1} 0 0;
-        --ids-disclosure-low-contrast-header-color: #{tokens.$grey-600};
-        --ids-disclosure-low-contrast-header-color-hover: #{tokens.$grey-600};
-        --ids-disclosure-low-contrast-header-color-pressed: #{tokens.$grey-600};
-        --ids-disclosure-low-contrast-header-title-font-family: #{tokens.$primary-font-family};
-        --ids-disclosure-low-contrast-header-title-font-size: #{tokens.$font-size-3};
-        --ids-disclosure-low-contrast-header-title-font-weight: #{tokens.$font-weight-medium};
-        --ids-disclosure-low-contrast-header-title-line-height: #{tokens.$line-height-xxl};
-    }
-
-    [data-brand="workleap"] {
         /* === Default === */
         --ids-disclosure-border-radius: var(--hop-shape-rounded-md);
         --ids-disclosure-border-width: 0.0625rem;
diff --git a/packages/Dropdown/src/Dropdown.stories.tsx b/packages/Dropdown/src/Dropdown.stories.tsx
index e58c886e8..43323a76f 100644
--- a/packages/Dropdown/src/Dropdown.stories.tsx
+++ b/packages/Dropdown/src/Dropdown.stories.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import Button from '@igloo-ui/button';
 import Modal from '@igloo-ui/modal';
 import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
 
 import readme from '../README.md';
 
@@ -15,7 +15,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     children: {
diff --git a/packages/Dropdown/src/dropdown.scss b/packages/Dropdown/src/dropdown.scss
index 4af35aa0b..44e01a998 100644
--- a/packages/Dropdown/src/dropdown.scss
+++ b/packages/Dropdown/src/dropdown.scss
@@ -7,32 +7,6 @@
 
 @layer igloo {
     :root {
-        /* Default */
-        --ids-dropdown-font-family: #{tokens.$primary-font-family};
-        --ids-dropdown-font-size: #{tokens.$font-size-4};
-        --ids-dropdown-color: #{tokens.$grey-800};
-        --ids-dropdown-background: #{tokens.$samoyed};
-        --ids-dropdown-border: none;
-        --ids-dropdown-border-radius: #{tokens.$border-radius-sm};
-        --ids-dropdown-zindex: #{tokens.$z-index-100};
-        --ids-dropdown-box-shadow: #{tokens.$shadow-12};
-        --ids-dropdown-padding: 0;
-        --ids-dropdown-padding-small: #{tokens.$space-3};
-        --ids-dropdown-padding-medium: #{tokens.$space-4};
-        --ids-dropdown-padding-large: #{tokens.$space-5};
-
-        /* Click Handler */
-        --ids-dropdown-zindex-click-handler: #{tokens.$z-index-90};
-
-        /* Footer */
-        --ids-dropdown-footer-background: #{tokens.$samoyed};
-        --ids-dropdown-footer-background-hover: #{tokens.$samoyed};
-        --ids-dropdown-footer-padding: #{tokens.$space-2} #{tokens.$space-3};
-        --hop-dropdown-footer-border-size: 0;
-        --hop-dropdown-footer-border-color: transparent;
-    }
-
-    [data-brand="workleap"] {
         /* Default */
         --ids-dropdown-font-family: var(--hop-body-sm-font-family);
         --ids-dropdown-font-size: var(--hop-body-sm-font-size);
diff --git a/packages/Dropdown/src/mixins.scss b/packages/Dropdown/src/mixins.scss
index cbd36e13e..3ffcd7706 100644
--- a/packages/Dropdown/src/mixins.scss
+++ b/packages/Dropdown/src/mixins.scss
@@ -1,14 +1,6 @@
 @use '~@igloo-ui/tokens/dist/base10/variables' as tokens;
 
 :root {
-    --ids-scrollbar-color: #{tokens.$grey-300};
-    --ids-scrollbar-border-color: #{tokens.$samoyed};
-    --ids-scrollbar-border-size: 1rem;
-    --ids-scrollbar-size: 0.2rem;
-    --ids-scrollbar-radii: #{tokens.$border-radius-md};
-}
-
-[data-brand="workleap"] {
     --ids-scrollbar-color: var(--hop-neutral-border-weak);
     --ids-scrollbar-border-color: var(--hop-neutral-surface);
     --ids-scrollbar-border-size: 0.625rem;
diff --git a/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx b/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx
index 54873b1aa..394dcb3de 100644
--- a/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx
+++ b/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx
@@ -13,6 +13,9 @@ export default {
       control: { type: null },
     },
   },
+  parameters: {
+    brand: "workleap",
+  }
 } as Meta<typeof VisualIdentifier>;
 
 export const Overview = {