refactor: fjerner deprecated stilsetting og bedre håntering av font-s…

…ize og font-weight
fremtind · Sep 23, 2024 · 3ce021a · 3ce021a
1 parent ba949c7
commit 3ce021a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/packages/file-input-react/src/File.tsx b/packages/file-input-react/src/File.tsx
@@ -67,8 +67,8 @@ export const File: FC<FileProps> = (props) => {
                     {children}
                 </Thumbnail>
                 <div>
-                    <p className="jkl-file__name jkl-bold">{fileName}</p>
-                    <p className="jkl-file__description jkl-body">
+                    <p className="jkl-file__name">{fileName}</p>
+                    <p className="jkl-file__description">
                         <span>{formatBytes(fileSize)}</span>
                         {renderFeedbackElement()}
                     </p>

diff --git a/packages/file-input/_file.scss b/packages/file-input/_file.scss
@@ -15,20 +15,25 @@
     --jkl-file-border-color-active: #{jkl.$color-snohvit};
 }
 
-@include jkl.comfortable-density-variables {
-    --jkl-file-padding: #{jkl.$spacing-16} #{jkl.$spacing-12};
-    --jkl-file-thumbnail-size: #{jkl.rem(64px)};
-    --jkl-file-gap: #{jkl.$spacing-16};
-}
-
-@include jkl.compact-density-variables {
-    --jkl-file-padding: #{jkl.$spacing-12} #{jkl.$spacing-8};
-    --jkl-file-thumbnail-size: #{jkl.rem(44px)};
-    --jkl-file-gap: #{jkl.$spacing-8};
-}
-
 .jkl-file {
     @include jkl.motion("standard", "snappy");
+
+    @include jkl.comfortable-density {
+        --jkl-file-padding: #{jkl.$spacing-24} #{jkl.$spacing-24};
+        --jkl-file-thumbnail-size: #{jkl.rem(64px)};
+        --jkl-file-gap: #{jkl.$spacing-16};
+        --jkl-file-font-size: #{jkl.rem(20px)};
+        --jkl-file-line-height: #{jkl.rem(32px)};
+    }
+
+    @include jkl.compact-density {
+        --jkl-file-padding: #{jkl.$spacing-12} #{jkl.$spacing-12};
+        --jkl-file-thumbnail-size: #{jkl.rem(44px)};
+        --jkl-file-gap: #{jkl.$spacing-8};
+        --jkl-file-font-size: #{jkl.rem(16px)};
+        --jkl-file-line-height: #{jkl.rem(24px)};
+    }
+
     transition-property: background-color, border-color, color;
 
     color: var(--jkl-file-color);
@@ -52,11 +57,11 @@
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
 
         &--error {
-            background-color: colors.varslingsfarge("feil");
+            background-color: var(--jkl-error);
         }
 
         &--warning {
-            background-color: colors.varslingsfarge("advarsel");
+            background-color: var(--jkl-warning);
         }
 
         &--error,
@@ -149,6 +154,16 @@
         overflow-wrap: anywhere;
     }
 
+    &__name,
+    &__description {
+        font-size: var(--jkl-file-font-size);
+        line-height: var(--jkl-file-line-height);
+    }
+
+    &__name {
+        font-weight: #{jkl.$typography-weight-bold};
+    }
+
     &__description {
         display: flex;
         flex-wrap: nowrap;