fix(packages): fix ejected skin slider setup (#1660)

packages/skins/src/default/css/components/button.css

@@ -78,6 +78,10 @@
     scale: 0.9;
   }
 
+  & .media-icon__container {
+    display: grid;
+  }
+
   & .media-icon {
     grid-area: 1 / 1;
     transition-behavior: allow-discrete;
@@ -95,8 +99,9 @@
     right: -1px;
     bottom: -3px;
     font-size: 10px;
-    font-weight: 480;
+    font-weight: 500;
     font-variant-numeric: tabular-nums;
+    letter-spacing: -0.05em;
   }
 
   &:has(.media-icon--flipped) .media-icon__label {

packages/skins/src/default/css/components/icons.css

@@ -5,6 +5,7 @@
 .media-default-skin .media-icon__container {
   position: relative;
 }
+
 .media-default-skin .media-icon {
   flex-shrink: 0;
   width: var(--media-icon-size);

packages/skins/src/default/tailwind/components/icon.ts

@@ -8,4 +8,4 @@ export const icon = cn(
 
 export const iconHidden = 'hidden opacity-0';
 export const iconFlipped = '[scale:-1_1]';
-export const iconContainer = 'relative';
+export const iconContainer = 'relative grid';

packages/skins/src/default/tailwind/components/seek.ts

@@ -1,5 +1,5 @@
 export const seek = {
-  label: 'text-[10px] font-[480] tabular-nums',
+  label: 'text-[10px] font-medium tracking-tighter tabular-nums',
   labelForward: 'absolute -right-px -bottom-0.75',
   labelBackward: 'absolute -left-px -bottom-0.75',
 };