resolve conflict in primary color naming

uzh-bf · Aug 8, 2024 · b58a81a · b58a81a
1 parent aa7e8d3
commit b58a81a
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/packages/design-system/src/Button.tsx b/packages/design-system/src/Button.tsx
@@ -61,7 +61,7 @@ export function Button({
         ? 'bg-uzh-grey-20 text-uzh-grey-80 cursor-default fill-uzh-grey-80'
         : 'cursor-default'
       : !basic &&
-          `hover:bg-primary-20 hover:border-primary-40 hover:text-primary hover:fill-primary`,
+          `hover:bg-primary-20 hover:border-primary-40 hover:text-primary-100 hover:fill-primary-100`,
     !basic &&
       active &&
       twMerge('bg-primary-20 border-primary-40', className?.active),
@@ -159,7 +159,7 @@ Button.IconGroup = function ButtonIconGroup({
             key={index}
             className={{
               root: twMerge(
-                'p-1.5 first:rounded-l-sm last:rounded-r-sm hover:border-primary',
+                'hover:border-primary-100 p-1.5 first:rounded-l-sm last:rounded-r-sm',
                 state === index
                   ? `hover:bg-unset bg-primary-80 text-white`
                   : 'bg-white',

diff --git a/packages/design-system/src/Dropdown.tsx b/packages/design-system/src/Dropdown.tsx
@@ -81,7 +81,7 @@ export function Dropdown({
           data-test={data?.test}
           className={twMerge(
             'inline-flex h-7 items-center justify-between gap-3 rounded-md border',
-            'bg-white py-1.5 pl-2 pr-2 shadow-sm hover:bg-primary-20 hover:text-primary',
+            'hover:text-primary-100 bg-white py-1.5 pl-2 pr-2 shadow-sm hover:bg-primary-20',
             disabled &&
               'hover:bg-none, hover:text-none cursor-not-allowed bg-uzh-grey-20 opacity-70 shadow-sm',
             className?.trigger
@@ -201,7 +201,7 @@ const DropdownItem = ({
         data-cy={data?.cy}
         data-test={data?.test}
         className={twMerge(
-          `flex flex-row rounded px-2 py-0.5 hover:cursor-pointer hover:bg-primary-20 hover:text-primary`,
+          `hover:text-primary-100 flex flex-row rounded px-2 py-0.5 hover:cursor-pointer hover:bg-primary-20`,
           active && twMerge('font-bold', className?.active),
           className?.root
         )}

diff --git a/packages/design-system/src/Prose.tsx b/packages/design-system/src/Prose.tsx
@@ -29,7 +29,7 @@ export function Prose({ id, data, className, children }: ProseProps) {
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        'prose-h4:text-md prose prose-headings:font-sans prose-headings:font-bold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg hover:prose-a:text-primary',
+        'prose-h4:text-md prose prose-headings:font-sans prose-headings:font-bold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg hover:prose-a:text-primary-100',
         className?.root
       )}
     >

diff --git a/packages/design-system/src/Select.tsx b/packages/design-system/src/Select.tsx
@@ -185,7 +185,7 @@ export function Select({
           className={twMerge(
             'rounded-md px-2 py-1',
             !basic &&
-              'inline-flex h-7 items-center justify-between gap-2 border bg-white p-4 shadow-sm hover:bg-primary-20 hover:text-primary',
+              'hover:text-primary-100 inline-flex h-7 items-center justify-between gap-2 border bg-white p-4 shadow-sm hover:bg-primary-20',
             disabled &&
               'hover:bg-none, hover:text-none cursor-not-allowed bg-uzh-grey-20 opacity-70 shadow-sm',
             size === 'sm' && '!text-sm',
@@ -257,7 +257,7 @@ const SelectItemComponent = React.forwardRef(
         data-test={data?.test}
         className={twMerge(
           'relative flex select-none items-center rounded-md px-8 py-2 font-medium text-gray-700',
-          'hover:cursor-pointer hover:bg-primary-20 hover:text-primary hover:outline-none focus:border-primary-40',
+          'hover:text-primary-100 hover:cursor-pointer hover:bg-primary-20 hover:outline-none focus:border-primary-40',
           disabled &&
             'cursor-not-allowed opacity-50 hover:bg-white hover:text-gray-700',
           size === 'sm' && 'px-7 text-sm',

diff --git a/packages/design-system/src/StepProgress.tsx b/packages/design-system/src/StepProgress.tsx
@@ -125,7 +125,7 @@ export function StepProgress({
           <button
             data-cy={data?.cy ? `${data?.cy}-left` : undefined}
             className={twMerge(
-              'rounded-l px-3 py-1 hover:bg-primary-20 hover:text-primary',
+              'hover:text-primary-100 rounded-l px-3 py-1 hover:bg-primary-20',
               !items && 'bg-primary-60 text-white'
             )}
             onClick={() =>
@@ -145,7 +145,7 @@ export function StepProgress({
             key={ix}
             data-cy={data?.cy ? `${data?.cy}-${ix}` : undefined}
             className={twMerge(
-              'flex flex-1 items-center justify-center border-r border-white p-1 last:border-r-0 hover:bg-primary-20 hover:text-primary',
+              'hover:text-primary-100 flex flex-1 items-center justify-center border-r border-white p-1 last:border-r-0 hover:bg-primary-20',
               ix === 0 && 'rounded-l',
               ix === length - 1 && 'rounded-r',
               (value || 0) > ix && !items && 'bg-primary-60 text-white',
@@ -170,7 +170,7 @@ export function StepProgress({
           <button
             data-cy={data?.cy ? `${data?.cy}-right` : undefined}
             className={twMerge(
-              'rounded-r px-3 py-1 hover:bg-primary-20 hover:text-primary'
+              'hover:text-primary-100 rounded-r px-3 py-1 hover:bg-primary-20'
             )}
             onClick={() =>
               onItemClick(

diff --git a/packages/design-system/tailwind.config.js b/packages/design-system/tailwind.config.js
@@ -27,12 +27,12 @@ export default {
       },
       colors: {
         ...TailwindColorsUZH,
-        primary: 'var(--theme-color-primary)',
+        'primary-100': 'var(--theme-color-primary)',
         'primary-80': 'var(--theme-color-primary-80)',
         'primary-60': 'var(--theme-color-primary-60)',
         'primary-40': 'var(--theme-color-primary-40)',
         'primary-20': 'var(--theme-color-primary-20)',
-        secondary: 'var(--theme-color-secondary)',
+        'secondary-100': 'var(--theme-color-secondary)',
         'secondary-80': 'var(--theme-color-secondary-80)',
         'secondary-60': 'var(--theme-color-secondary-60)',
         'secondary-40': 'var(--theme-color-secondary-40)',