@fremtind/jokul 3.3.0 → 3.4.0

package/styles/components/summary-table/development/summary-table-example.css

@@ -1,28 +1,10 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --custom-row-text-color: #636060;
-  }
-}
-[data-theme=light] {
-  --custom-row-text-color: #636060;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --custom-row-text-color: #c8c5c3;
-  }
-}
-[data-theme=dark] {
-  --custom-row-text-color: #c8c5c3;
-}
-
 .summary-table-example {
   max-width: 500px;
   width: 100%;
 }
 .summary-table-example__custom-row {
-  color: var(--custom-row-text-color);
+  color: var(--jkl-color-text-subdued);
 }

package/styles/components/summary-table/development/summary-table-example.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--custom-row-text-color:#636060}}[data-theme=light]{--custom-row-text-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--custom-row-text-color:#c8c5c3}}[data-theme=dark]{--custom-row-text-color:#c8c5c3}.summary-table-example{max-width:500px;width:100%}.summary-table-example__custom-row{color:var(--custom-row-text-color)}
+.summary-table-example{max-width:500px;width:100%}.summary-table-example__custom-row{color:var(--jkl-color-text-subdued)}

package/styles/components/summary-table/development/summary-table-example.scss

@@ -1,18 +1,10 @@
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --custom-row-text-color: #{jkl.$color-stein};
-}
-
-@include jkl.dark-mode-variables {
-    --custom-row-text-color: #{jkl.$color-svaberg};
-}
-
 .summary-table-example {
     max-width: 500px;
     width: 100%;
 
     &__custom-row {
-        color: var(--custom-row-text-color);
+        color: var(--jkl-color-text-subdued);
     }
-}
+}

package/styles/components/summary-table/summary-table.css

@@ -2,22 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-summary-table-border-color: #1b1917;
-    }
-  }
-  [data-theme=light] {
-    --jkl-summary-table-border-color: #1b1917;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-summary-table-border-color: #c8c5c3;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-summary-table-border-color: #c8c5c3;
-  }
   .jkl-summary-table {
     display: flex;
     flex-direction: column;
@@ -47,10 +31,8 @@
     font-weight: 400;
   }
   .jkl-summary-table > tfoot {
-    border-top: 0.0625rem solid #1b1917;
-    border-top: 0.0625rem solid var(--jkl-summary-table-border-color);
-    border-bottom: 0.0625rem solid #1b1917;
-    border-bottom: 0.0625rem solid var(--jkl-summary-table-border-color);
+    border-top: 0.0625rem solid var(--jkl-color-border-separator-strong);
+    border-bottom: 0.0625rem solid var(--jkl-color-border-separator-strong);
     padding-top: 0.5rem;
   }
   .jkl-summary-table > tfoot th,

package/styles/components/summary-table/summary-table.min.css

@@ -1 +1 @@
-@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-summary-table-border-color:#1b1917}}[data-theme=light]{--jkl-summary-table-border-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-summary-table-border-color:#c8c5c3}}[data-theme=dark]{--jkl-summary-table-border-color:#c8c5c3}.jkl-summary-table{display:flex;flex-direction:column;overflow-wrap:anywhere;width:100%}.jkl-summary-table tr{display:flex;justify-content:space-between;padding-bottom:.5rem}.jkl-summary-table td,.jkl-summary-table th{flex-basis:50%;padding-right:1rem}.jkl-summary-table td:first-child,.jkl-summary-table th:first-child{text-align:left}.jkl-summary-table td:last-child,.jkl-summary-table th:last-child{padding-right:0;text-align:right}.jkl-summary-table>tbody th{font-weight:400}.jkl-summary-table>tfoot{border-bottom:.0625rem solid #1b1917;border-bottom:.0625rem solid var(--jkl-summary-table-border-color);border-top:.0625rem solid #1b1917;border-top:.0625rem solid var(--jkl-summary-table-border-color);padding-top:.5rem}.jkl-summary-table>tfoot td,.jkl-summary-table>tfoot th{font-weight:700}}
+@layer jokul.components{.jkl-summary-table{display:flex;flex-direction:column;overflow-wrap:anywhere;width:100%}.jkl-summary-table tr{display:flex;justify-content:space-between;padding-bottom:.5rem}.jkl-summary-table td,.jkl-summary-table th{flex-basis:50%;padding-right:1rem}.jkl-summary-table td:first-child,.jkl-summary-table th:first-child{text-align:left}.jkl-summary-table td:last-child,.jkl-summary-table th:last-child{padding-right:0;text-align:right}.jkl-summary-table>tbody th{font-weight:400}.jkl-summary-table>tfoot{border-bottom:.0625rem solid var(--jkl-color-border-separator-strong);border-top:.0625rem solid var(--jkl-color-border-separator-strong);padding-top:.5rem}.jkl-summary-table>tfoot td,.jkl-summary-table>tfoot th{font-weight:700}}

package/styles/components/summary-table/summary-table.scss

@@ -2,14 +2,6 @@
 @use "../../core/jkl";
 
 @layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-summary-table-border-color: #{jkl.$color-granitt};
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-summary-table-border-color: #{jkl.$color-svaberg};
-    }
-
     .jkl-summary-table {
         display: flex;
         flex-direction: column;
@@ -44,10 +36,8 @@
         }
 
         & > tfoot {
-            border-top: jkl.rem(1px) solid jkl.$color-granitt;
-            border-top: jkl.rem(1px) solid var(--jkl-summary-table-border-color);
-            border-bottom: jkl.rem(1px) solid jkl.$color-granitt;
-            border-bottom: jkl.rem(1px) solid var(--jkl-summary-table-border-color);
+            border-top: jkl.rem(1px) solid var(--jkl-color-border-separator-strong);
+            border-bottom: jkl.rem(1px) solid var(--jkl-color-border-separator-strong);
             padding-top: jkl.$spacing-8;
 
             th,

package/styles/components/system-message/system-message.css

@@ -8,7 +8,8 @@
   --jkl-system-message-icon-padding: 0.1875rem 0 0 0;
   --jkl-system-message-content-padding: 1.5rem;
   --jkl-system-message-dismiss-button-size: 2.75rem;
-  --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem auto;
+  --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem
+  -0.40625rem auto;
   --jkl-system-message-message-margin: 0 1rem;
   --jkl-system-message-message-font-size: var(--jkl-body-font-size);
   --jkl-system-message-message-line-height: var(--jkl-body-line-height);
@@ -21,7 +22,8 @@
   --jkl-system-message-icon-padding: 0.0625rem 0 0 0;
   --jkl-system-message-content-padding: 0.5rem;
   --jkl-system-message-dismiss-button-size: 2rem;
-  --jkl-system-message-dismiss-button-margin: -0.1875rem -0.375rem -0.28125rem auto;
+  --jkl-system-message-dismiss-button-margin: -0.1875rem -0.375rem
+  -0.28125rem auto;
   --jkl-system-message-message-margin: 0 0.75rem;
   --jkl-system-message-message-font-size: var(--jkl-small-font-size);
   --jkl-system-message-message-line-height: var(--jkl-small-line-height);
@@ -120,7 +122,7 @@
   }
 }
 .jkl-system-message__dismiss-button:hover {
-  color: #636060;
+  color: var(--jkl-color-text-interactive-hover);
 }
 @media screen and (forced-colors: active) {
   .jkl-system-message__dismiss-button:hover {
@@ -144,7 +146,7 @@
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-u11zjnj 400ms forwards;
+  animation: jkl-dismiss-u23tixx 400ms forwards;
   transition: block 400ms 400ms;
 }
 .jkl-system-message--info {
@@ -175,7 +177,7 @@
   }
 }
 
-@keyframes jkl-dismiss-u11zjnj {
+@keyframes jkl-dismiss-u23tixx {
   from {
     opacity: 1;
     transform: translateY(0);

package/styles/components/system-message/system-message.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u11zjnj .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u11zjnj{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u23tixx .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u23tixx{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}

package/styles/components/system-message/system-message.scss

@@ -5,7 +5,6 @@
 
 $_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
 $_dismiss-animation-duration: jkl.timing("lazy");
-$_dismiss-hover-color: jkl.$color-stein;
 
 @include jkl.comfortable-density-variables {
     --jkl-system-message-icon-height: #{jkl.rem(24px)};
@@ -13,11 +12,13 @@ $_dismiss-hover-color: jkl.$color-stein;
     --jkl-system-message-content-padding: #{jkl.$spacing-24};
     --jkl-system-message-dismiss-button-size: #{jkl.rem(44px)};
     --jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(
-        18px
-    )} -#{jkl.rem(6.5px)} auto;
-    --jkl-system-message-message-margin: 0 #{jkl.$spacing-16};
+ 18px)
+}
+
+-#{jkl.rem(6.5px)} auto;
+--jkl-system-message-message-margin: 0 #{jkl.$spacing-16};
 
-    @include jkl.declare-font-variables("jkl-system-message-message", "body");
+@include jkl.declare-font-variables("jkl-system-message-message", "body");
 }
 
 @include jkl.compact-density-variables {
@@ -26,11 +27,13 @@ $_dismiss-hover-color: jkl.$color-stein;
     --jkl-system-message-content-padding: #{jkl.$spacing-8};
     --jkl-system-message-dismiss-button-size: #{jkl.rem(32px)};
     --jkl-system-message-dismiss-button-margin: -#{jkl.rem(3px)} -#{jkl.rem(
-        6px
-    )} -#{jkl.rem(4.5px)} auto;
-    --jkl-system-message-message-margin: 0 #{jkl.$spacing-12};
+ 6px)
+}
 
-    @include jkl.declare-font-variables("jkl-system-message-message", "small");
+-#{jkl.rem(4.5px)} auto;
+--jkl-system-message-message-margin: 0 #{jkl.$spacing-12};
+
+@include jkl.declare-font-variables("jkl-system-message-message", "small");
 }
 
 .jkl-system-message {
@@ -98,7 +101,7 @@ $_dismiss-hover-color: jkl.$color-stein;
         @include jkl.reset-outline;
 
         &:hover {
-            color: $_dismiss-hover-color;
+            color: var(--jkl-color-text-interactive-hover);
 
             @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
         }
@@ -171,4 +174,4 @@ $_dismiss-hover-color: jkl.$color-stein;
         filter: saturate(0.7);
         display: none;
     }
-}
+}

package/styles/components/table/_table-cell.scss

@@ -3,13 +3,13 @@
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-table-cell", "body");
 
-    --jkl-table-cell-padding: #{jkl.rem(11px)} #{jkl.$spacing-8};
+    --jkl-table-cell-padding: var(--jkl-spacing-12);
 }
 
 @include jkl.compact-density-variables {
     @include jkl.declare-font-variables("jkl-table-cell", "small");
 
-    --jkl-table-cell-padding: #{jkl.rem(5px)} #{jkl.$spacing-8};
+    --jkl-table-cell-padding: var(--jkl-spacing-8);
 }
 
 .jkl-table-cell {
@@ -50,8 +50,7 @@
 
     // only show inline text if it's not an ExpandController with text inside. if it doesn't
     // have text inside. the text is moved inside the ExpandButton
-    .jkl-table--collapse-to-list
-        &[data-th]:not(.jkl-table-cell--expand-without-text)::before {
+    .jkl-table--collapse-to-list &[data-th]:not(.jkl-table-cell--expand-without-text)::before {
         display: none;
 
         @include jkl.small-device {
@@ -59,14 +58,11 @@
         }
     }
 
-    .jkl-table--collapse-to-list[data-collapse]
-        &:not(.jkl-table-cell--expand-without-text)::before {
+    .jkl-table--collapse-to-list[data-collapse] &:not(.jkl-table-cell--expand-without-text)::before {
         @include _responsive-table-header;
     }
 
-    .jkl-table--collapse-to-list:not([data-collapse])
-        &--expand-without-text
-        .jkl-expand-button__text {
+    .jkl-table--collapse-to-list:not([data-collapse]) &--expand-without-text .jkl-expand-button__text {
         @include jkl.from-medium-device {
             display: none;
         }
@@ -80,9 +76,7 @@
     }
 }
 
-.jkl-table-row--expandable.jkl-table-row--clickable:not(
-    .jkl-expandable-table-row--clickable-external
-) {
+.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external) {
     &:hover,
     html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus {
         .jkl-table-row-expand-button {

package/styles/components/table/_table-head.scss

@@ -25,7 +25,7 @@ $_border-size: jkl.rem(-1px);
             border-bottom: none;
 
             box-shadow: inset 0 0 0 #000,
-                inset 0 $_border-size 0 var(--jkl-table-row-hover-border-color);
+                inset 0 $_border-size 0 var(--jkl-color-border-separator-strong);
             background-clip: padding-box;
 
             // legg til litt (nesten-cirka 16px) over headingen
@@ -33,4 +33,4 @@ $_border-size: jkl.rem(-1px);
             height: 2.3em;
         }
     }
-}
+}

package/styles/components/table/_table-header.scss

@@ -3,21 +3,22 @@
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-table-header", "body");
 
-    --jkl-table-header-padding: 0 #{jkl.$spacing-8} #{jkl.rem(7px)}
-        #{jkl.$spacing-8};
+    --jkl-table-header-padding-inline: var(--jkl-spacing-12);
+    --jkl-table-header-padding-block: var(--jkl-spacing-8);
 }
 
 @include jkl.compact-density-variables {
     @include jkl.declare-font-variables("jkl-table-header", "small");
 
-    --jkl-table-header-padding: 0 #{jkl.$spacing-8} #{jkl.rem(3px)}
-        #{jkl.$spacing-8};
+    --jkl-table-header-padding-inline: var(--jkl-spacing-8);
+    --jkl-table-header-padding-block: var(--jkl-spacing-4);
 }
 
 .jkl-table-header {
     @include jkl.use-font-variables("jkl-table-header");
 
-    padding: var(--jkl-table-header-padding);
+    padding-block: var(--jkl-table-header-padding-block);
+    padding-inline: var(--jkl-table-header-padding-inline);
     text-align: left;
     white-space: nowrap;
 
@@ -30,7 +31,7 @@
     }
 
     &--bold {
-        font-weight: jkl.$typography-weight-bold;
+        font-weight: var(--jkl-typography-weight-bold);
     }
 
     &--sortable {
@@ -43,23 +44,9 @@
     }
 
     &__arrows {
-        @include jkl.motion("entrance", "energetic");
-        transition-property: opacity;
-        display: inline-block;
-        margin-bottom: jkl.$unit-02;
-        margin-left: jkl.$unit-05;
-        vertical-align: middle;
-        opacity: 0;
-
-        // Via jkl-icon--inherit. Duplisert her for å få en konstant bredde på
-        // kolonnen så vi unngår layout shifts når man bytter kolonnen det sorteres
-        // på. Wrapperen er nødvendig for at vi skal unngå at pila animeres i det
-        // man skifter kolonne (den må være u-rendret fram til kolonnen blir sortert).
-        width: calc(1em / 20 * 24);
-
-        &--active {
-            opacity: 1;
-        }
+        display: flex;
+        gap: var(--jkl-spacing-4);
+        align-items: center;
     }
 
     @mixin _responsive-table-header {

package/styles/components/table/_table-row.scss

@@ -3,32 +3,21 @@
 $_border-size: jkl.rem(1px);
 $_focus-ring-width: jkl.rem(2px);
 
-@include jkl.light-mode-variables {
-    --jkl-table-row-border-color: #{jkl.$color-svaberg};
-    --jkl-table-row-border-none-color: #{rgba(jkl.$color-svaberg, 0)};
-    --jkl-table-row-hover-border-color: #{jkl.$color-granitt};
-    --jkl-table-row-highlight-color: #{jkl.$color-dis};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-table-row-border-color: #{jkl.$color-stein};
-    --jkl-table-row-border-none-color: #{rgba(jkl.$color-stein, 0)};
-    --jkl-table-row-hover-border-color: #{jkl.$color-snohvit};
-    --jkl-table-row-highlight-color: #{jkl.$color-fjellgra};
-}
-
 .jkl-table-row {
+    --jkl-table-row-border-color: var(--jkl-color-border-separator);
+    --jkl-table-row-border-none-color: transparent;
+    --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
+    --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
+
     border-bottom: solid $_border-size var(--jkl-table-row-border-color);
 
     .jkl-table-head > & {
-        border-bottom: solid $_border-size
-            var(--jkl-table-row-hover-border-color);
+        border-bottom: solid $_border-size var(--jkl-table-row-hover-border-color);
     }
 
     /* stylelint-disable-next-line selector-not-notation */
     :not(.jkl-table-head, .jkl-table-foot) > & {
-        border-top: solid $_border-size
-            transparent; // Unngår vertikal shift ved hover i collapsed mobilvisning
+        border-top: solid $_border-size transparent; // Unngår vertikal shift ved hover i collapsed mobilvisning
 
         &:hover {
             /*
@@ -41,10 +30,8 @@ $_focus-ring-width: jkl.rem(2px);
              * https://stackoverflow.com/a/4096554
              * https://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
              */
-            border-top: double $_border-size
-                var(--jkl-table-row-hover-border-color);
-            border-bottom: double $_border-size
-                var(--jkl-table-row-hover-border-color);
+            border-top: double $_border-size var(--jkl-table-row-hover-border-color);
+            border-bottom: double $_border-size var(--jkl-table-row-hover-border-color);
         }
     }
 
@@ -81,9 +68,7 @@ $_focus-ring-width: jkl.rem(2px);
         @include _responsive-table-row;
     }
 
-    .jkl-table--collapse-to-list[data-collapse]
-        :not(.jkl-table-head)
-        > &.jkl-table-row--expandable {
+    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &.jkl-table-row--expandable {
         transition-property: border, padding;
 
         @include jkl.motion;
@@ -121,8 +106,7 @@ $_focus-ring-width: jkl.rem(2px);
     @mixin _responsive-table-row--hover {
         /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
         border-top: solid $_border-size var(--jkl-table-row-hover-border-color);
-        border-bottom: solid $_border-size
-            var(--jkl-table-row-hover-border-color);
+        border-bottom: solid $_border-size var(--jkl-table-row-hover-border-color);
     }
 
     .jkl-table--collapse-to-list :not(.jkl-table-head) > &:hover {
@@ -131,9 +115,7 @@ $_focus-ring-width: jkl.rem(2px);
         }
     }
 
-    .jkl-table--collapse-to-list[data-collapse]
-        :not(.jkl-table-head)
-        > &:hover {
+    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &:hover {
         @include _responsive-table-row--hover;
     }
 
@@ -145,10 +127,8 @@ $_focus-ring-width: jkl.rem(2px);
             cursor: pointer;
             background-color: var(--jkl-table-row-highlight-color);
 
-            border-top: double $_border-size
-                var(--jkl-table-row-hover-border-color);
-            border-bottom: double $_border-size
-                var(--jkl-table-row-hover-border-color);
+            border-top: double $_border-size var(--jkl-table-row-hover-border-color);
+            border-bottom: double $_border-size var(--jkl-table-row-hover-border-color);
         }
 
         .jkl-table--collapse-to-list :not(.jkl-table-head) > &:hover {
@@ -157,9 +137,7 @@ $_focus-ring-width: jkl.rem(2px);
             }
         }
 
-        .jkl-table--collapse-to-list[data-collapse]
-            :not(.jkl-table-head)
-            > &:hover {
+        .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &:hover {
             @include _responsive-table-row--hover;
         }
 
@@ -196,4 +174,4 @@ $_focus-ring-width: jkl.rem(2px);
         @include jkl.motion("entrance", "lazy");
         display: block;
     }
-}
+}

package/styles/components/table/table.css

@@ -21,7 +21,7 @@
   --jkl-table-cell-font-size: var(--jkl-body-font-size);
   --jkl-table-cell-line-height: var(--jkl-body-line-height);
   --jkl-table-cell-font-weight: var(--jkl-body-font-weight);
-  --jkl-table-cell-padding: 0.6875rem 0.5rem;
+  --jkl-table-cell-padding: var(--jkl-spacing-12);
 }
 
 [data-layout-density=compact],
@@ -29,7 +29,7 @@
   --jkl-table-cell-font-size: var(--jkl-small-font-size);
   --jkl-table-cell-line-height: var(--jkl-small-line-height);
   --jkl-table-cell-font-weight: var(--jkl-small-font-weight);
-  --jkl-table-cell-padding: 0.3125rem 0.5rem;
+  --jkl-table-cell-padding: var(--jkl-spacing-8);
 }
 
 .jkl-table-cell {
@@ -135,7 +135,7 @@
   z-index: 1;
   background-color: var(--jkl-table-head-sticky-color);
   border-bottom: none;
-  box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-table-row-hover-border-color);
+  box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-color-border-separator-strong);
   background-clip: padding-box;
   vertical-align: bottom;
   height: 2.3em;
@@ -147,8 +147,8 @@
   --jkl-table-header-font-size: var(--jkl-body-font-size);
   --jkl-table-header-line-height: var(--jkl-body-line-height);
   --jkl-table-header-font-weight: var(--jkl-body-font-weight);
-  --jkl-table-header-padding: 0 0.5rem 0.4375rem
-      0.5rem;
+  --jkl-table-header-padding-inline: var(--jkl-spacing-12);
+  --jkl-table-header-padding-block: var(--jkl-spacing-8);
 }
 
 [data-layout-density=compact],
@@ -156,15 +156,16 @@
   --jkl-table-header-font-size: var(--jkl-small-font-size);
   --jkl-table-header-line-height: var(--jkl-small-line-height);
   --jkl-table-header-font-weight: var(--jkl-small-font-weight);
-  --jkl-table-header-padding: 0 0.5rem 0.1875rem
-      0.5rem;
+  --jkl-table-header-padding-inline: var(--jkl-spacing-8);
+  --jkl-table-header-padding-block: var(--jkl-spacing-4);
 }
 
 .jkl-table-header {
   font-size: var(--jkl-table-header-font-size);
   line-height: var(--jkl-table-header-line-height);
   font-weight: var(--jkl-table-header-font-weight);
-  padding: var(--jkl-table-header-padding);
+  padding-block: var(--jkl-table-header-padding-block);
+  padding-inline: var(--jkl-table-header-padding-inline);
   text-align: left;
   white-space: nowrap;
 }
@@ -175,7 +176,7 @@
   text-align: right;
 }
 .jkl-table-header--bold {
-  font-weight: 700;
+  font-weight: var(--jkl-typography-weight-bold);
 }
 .jkl-table-header--sortable {
   cursor: pointer;
@@ -194,18 +195,9 @@
   white-space: nowrap !important; /* 3 */
 }
 .jkl-table-header__arrows {
-  transition-timing-function: ease-out;
-  transition-duration: 75ms;
-  transition-property: opacity;
-  display: inline-block;
-  margin-bottom: calc(var(--jkl-unit-10) * 0.25);
-  margin-left: calc(var(--jkl-unit-10) * 0.5);
-  vertical-align: middle;
-  opacity: 0;
-  width: 1.2em;
-}
-.jkl-table-header__arrows--active {
-  opacity: 1;
+  display: flex;
+  gap: var(--jkl-spacing-4);
+  align-items: center;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-table--collapse-to-list .jkl-table-header {
@@ -340,37 +332,11 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   letter-spacing: -0.014em;
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-table-row-border-color: #c8c5c3;
-    --jkl-table-row-border-none-color: rgba(200, 197, 195, 0);
-    --jkl-table-row-hover-border-color: #1b1917;
-    --jkl-table-row-highlight-color: #ece9e5;
-  }
-}
-[data-theme=light] {
-  --jkl-table-row-border-color: #c8c5c3;
-  --jkl-table-row-border-none-color: rgba(200, 197, 195, 0);
-  --jkl-table-row-hover-border-color: #1b1917;
-  --jkl-table-row-highlight-color: #ece9e5;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-table-row-border-color: #636060;
-    --jkl-table-row-border-none-color: rgba(99, 96, 96, 0);
-    --jkl-table-row-hover-border-color: #f9f9f9;
-    --jkl-table-row-highlight-color: #444141;
-  }
-}
-[data-theme=dark] {
-  --jkl-table-row-border-color: #636060;
-  --jkl-table-row-border-none-color: rgba(99, 96, 96, 0);
-  --jkl-table-row-hover-border-color: #f9f9f9;
-  --jkl-table-row-highlight-color: #444141;
-}
-
 .jkl-table-row {
+  --jkl-table-row-border-color: var(--jkl-color-border-separator);
+  --jkl-table-row-border-none-color: transparent;
+  --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
+  --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
   border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
 }
 .jkl-table-head > .jkl-table-row {