update token mapping

Author: noahwaldner

.changeset/shiny-pans-work.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": major
+---
+
+fix: update token usage

packages/components/src/components/Checkbox/styles/checkboxStyles.ts

@@ -5,7 +5,7 @@ import { sv } from '#/utilities/styleUtilities';
 
 export const checkboxStyles = sv({
     base:
-        'tw-peer tw-relative tw-inline-flex tw-bg-surface tw-text-white tw-shrink-0 tw-rounded-medium tw-border tw-border-line-strong group-hover:tw-border-line-strong hover:tw-border-line-strong tw-transition-colors ' +
+        'tw-peer tw-relative tw-inline-flex tw-bg-surface tw-text-white tw-shrink-0 tw-rounded-medium tw-border tw-border-line-mid group-hover:tw-border-line-strong hover:tw-border-line-strong tw-transition-colors ' +
         'data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent ' +
         'disabled:tw-border-line-strong disabled:tw-bg-surface disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-disabled ' +
         'data-[readonly="true"]:tw-pointer-events-none ' +

packages/components/src/components/RadioList/styles/radiolist.module.scss

@@ -29,7 +29,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: 100%;
-    border: 1px solid var(--color-line-strong);
+    border: 1px solid var(--color-line-mid);
     cursor: pointer;
 
     transition: border cubic-bezier(0.4, 0, 0.2, 1) 150ms;

packages/components/src/components/Slider/styles/slider.module.scss

@@ -52,7 +52,7 @@
     height: sizeToken.get(5);
 
     background-color: var(--color-surface-default);
-    border: 1px solid var(--color-line-strong);
+    border: 1px solid var(--color-line-mid);
     border-radius: 100%;
     outline: 0 solid var(--color-shadow-default);
 

packages/components/src/components/Textarea/styles/textarea.module.scss

@@ -22,7 +22,7 @@
     color: var(--color-primary-default);
     background-color: var(--color-surface-default);
     border-radius: var(--border-radius-medium);
-    border: var(--border-width-default) solid var(--color-line-strong);
+    border: var(--border-width-default) solid var(--color-line-mid);
 
     & {
         @include focusStyle.focus-outline;
@@ -219,7 +219,7 @@
     align-items: center;
     justify-content: center;
     background-color: var(--color-surface-default);
-    border: var(--border-width-default) solid var(--color-line-strong);
+    border: var(--border-width-default) solid var(--color-line-mid);
     border-radius: 9999px;
 
     &::before {