@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.11

package/styles/components/tooltip/tooltip.scss

@@ -18,11 +18,11 @@ $_focus-ring-width: jkl.rem(2px);
 
     .jkl-tooltip-content {
         --content-padding: var(--jkl-unit-15);
-        --background-color: var(--jkl-color-background-container-inverted);
+        --background-color: var(--jkl-color-background-contrast);
 
         @include jkl.text-style("paragraph-small");
         background-color: var(--background-color);
-        color: var(--jkl-color-text-inverted);
+        color: var(--jkl-color-text-on-contrast);
         display: inline-block;
         min-width: min-content;
         max-width: min(jkl.rem(310px),
@@ -45,14 +45,14 @@ $_focus-ring-width: jkl.rem(2px);
         padding: 0;
         display: inline-flex;
         align-items: baseline;
-        color: var(--jkl-color-text-interactive);
+        color: var(--jkl-color-text-default);
         transform: translateY(min(0.25em, jkl.rem(6px)));
         border-radius: 9999px;
 
         @include jkl.reset-outline;
 
         &:hover {
-            --button-color: var(--jkl-color-text-interactive-hover);
+            color: var(--jkl-color-text-subdued);
         }
 
         &:focus-visible {
@@ -70,4 +70,4 @@ $_focus-ring-width: jkl.rem(2px);
             min-height: 44px;
         }
     }
-}
+}

package/styles/components/typography/_index.scss

@@ -0,0 +1,2 @@
+@forward "text";
+@forward "title";

package/styles/components/typography/text.css

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  :where(.jkl-text) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  .jkl-text[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-text[data-text-size=xs] {
+    font: var(--jkl-text-style-text-micro);
+  }
+  .jkl-text[data-text-size=s] {
+    font: var(--jkl-text-style-paragraph-small);
+  }
+  .jkl-text[data-text-size=m] {
+    font: var(--jkl-text-style-paragraph-medium);
+  }
+  .jkl-text[data-text-size=l] {
+    font: var(--jkl-text-style-paragraph-large);
+  }
+  .jkl-text[data-bold],
+  strong.jkl-text[data-text-size] {
+    font-weight: var(--jkl-typography-weight-bold);
+  }
+  .jkl-text[data-short] {
+    line-height: var(--jkl-line-height-tight);
+  }
+  :is(code, kbd, samp, var).jkl-text {
+    font-family: var(--jkl-font-family-mono);
+  }
+  label.jkl-text {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}

package/styles/components/typography/text.min.css

@@ -0,0 +1 @@
+@layer jokul.components{:where(.jkl-text){font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-relaxed)}.jkl-text[data-text-size]{margin-block:0}.jkl-text[data-text-size=xs]{font:var(--jkl-text-style-text-micro)}.jkl-text[data-text-size=s]{font:var(--jkl-text-style-paragraph-small)}.jkl-text[data-text-size=m]{font:var(--jkl-text-style-paragraph-medium)}.jkl-text[data-text-size=l]{font:var(--jkl-text-style-paragraph-large)}.jkl-text[data-bold],strong.jkl-text[data-text-size]{font-weight:var(--jkl-typography-weight-bold)}.jkl-text[data-short]{line-height:var(--jkl-line-height-tight)}:is(code,kbd,samp,var).jkl-text{font-family:var(--jkl-font-family-mono)}label.jkl-text{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}

package/styles/components/typography/text.scss

@@ -0,0 +1,54 @@
+@use "../../jkl";
+
+// Hver `size` mapper til en komplett tekst-stil fra `$text-styles` i
+// `styles/jkl/_typography.scss` — både font-size, line-height, font-weight
+// og ikon-variabler settes via `jkl.text-style`-mixinen.
+$_size-styles: (
+    "xs": "text-micro",
+    "s": "paragraph-small",
+    "m": "paragraph-medium",
+    "l": "paragraph-large",
+);
+
+@layer jokul.components {
+    :where(.jkl-text) {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-relaxed);
+    }
+
+    // Scope margin-resetten til komponenten via `data-text-size` så vi ikke
+    // overstyrer margin på elementer som bare bruker `.jkl-text` som
+    // hjelpeklasse.
+    .jkl-text[data-text-size] {
+        margin-block: 0;
+    }
+
+    @each $name, $style in $_size-styles {
+        .jkl-text[data-text-size="#{$name}"] {
+            @include jkl.text-style($style);
+        }
+    }
+
+    // `bold` og `<strong>` skal sette både font-weight og ikon-weight
+    // (samme mønster som `.jkl-bold` og `.jkl strong`). Spesifisiteten må
+    // være lik eller høyere enn `.jkl-text[data-text-size="…"]` som ellers
+    // tvinger normal weight via `jkl.text-style`-mixinen.
+    .jkl-text[data-bold],
+    strong.jkl-text[data-text-size] {
+        font-weight: var(--jkl-typography-weight-bold);
+    }
+
+    .jkl-text[data-short] {
+        line-height: var(--jkl-line-height-tight);
+    }
+
+    :is(code, kbd, samp, var).jkl-text {
+        @include jkl.use-font-family("Jokul Mono");
+    }
+
+    // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
+    label.jkl-text {
+        display: block;
+        margin-block-end: var(--jkl-spacing-8);
+    }
+}

package/styles/components/typography/title.css

@@ -0,0 +1,55 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  :where(.jkl-title) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-tight);
+  }
+  .jkl-title[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xs],
+  .jkl-heading-xs {
+    font: var(--jkl-text-style-heading-5);
+  }
+  :where(.jkl-heading-xs) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=s],
+  .jkl-heading-s {
+    font: var(--jkl-text-style-heading-4);
+  }
+  :where(.jkl-heading-s) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=m],
+  .jkl-heading-m {
+    font: var(--jkl-text-style-heading-3);
+  }
+  :where(.jkl-heading-m) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=l],
+  .jkl-heading-l {
+    font: var(--jkl-text-style-heading-2);
+  }
+  :where(.jkl-heading-l) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xl],
+  .jkl-heading-xl {
+    font: var(--jkl-text-style-heading-1);
+  }
+  :where(.jkl-heading-xl) {
+    margin-block: 0;
+  }
+  :is(label, legend).jkl-title[data-text-size] {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  label.jkl-title[data-text-size] {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}

package/styles/components/typography/title.min.css

@@ -0,0 +1 @@
+@layer jokul.components{:where(.jkl-title){font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-tight)}.jkl-title[data-text-size]{margin-block:0}.jkl-heading-xs,.jkl-title[data-text-size=xs]{font:var(--jkl-text-style-heading-5)}:where(.jkl-heading-xs){margin-block:0}.jkl-heading-s,.jkl-title[data-text-size=s]{font:var(--jkl-text-style-heading-4)}:where(.jkl-heading-s){margin-block:0}.jkl-heading-m,.jkl-title[data-text-size=m]{font:var(--jkl-text-style-heading-3)}:where(.jkl-heading-m){margin-block:0}.jkl-heading-l,.jkl-title[data-text-size=l]{font:var(--jkl-text-style-heading-2)}:where(.jkl-heading-l){margin-block:0}.jkl-heading-xl,.jkl-title[data-text-size=xl]{font:var(--jkl-text-style-heading-1)}:where(.jkl-heading-xl){margin-block:0}:is(label,legend).jkl-title[data-text-size]{font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-relaxed)}label.jkl-title[data-text-size]{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}

package/styles/components/typography/title.scss

@@ -0,0 +1,59 @@
+@use "../../jkl";
+
+// Hver `size` mapper til en komplett tekst-stil fra `$text-styles` i
+// `styles/jkl/_typography.scss` — både font-size, line-height, font-weight
+// og ikon-variabler settes via `jkl.text-style`-mixinen.
+$_size-styles: (
+    "xs": "heading-5",
+    "s": "heading-4",
+    "m": "heading-3",
+    "l": "heading-2",
+    "xl": "heading-1",
+);
+
+@layer jokul.components {
+    :where(.jkl-title) {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-tight);
+    }
+
+    // Scope margin-resetten til komponenten via `data-text-size` så vi ikke
+    // overstyrer margin på elementer som bare bruker `.jkl-title` som
+    // hjelpeklasse.
+    .jkl-title[data-text-size] {
+        margin-block: 0;
+    }
+
+    // Genererer både komponent-regler og ekvivalente hjelpeklasser fra
+    // samme kilde slik at de ikke drifter fra hverandre.
+    // `.jkl-heading-<size>` tilsvarer `<Title size="<size>">` brukt på et
+    // vilkårlig element.
+    @each $name, $style in $_size-styles {
+
+        .jkl-title[data-text-size="#{$name}"],
+        .jkl-heading-#{$name} {
+            @include jkl.text-style($style);
+        }
+
+        :where(.jkl-heading-#{$name}) {
+            margin-block: 0;
+        }
+    }
+
+    // Skjema-elementer skal ikke arve heading sine fete font-weight og
+    // tight line-height. De er tekst som beskriver et skjemafelt eller en
+    // gruppe, ikke strukturelle overskrifter. Spesifisiteten må matche
+    // `.jkl-title[data-text-size="…"]` (0,2,0) for å overstyre den.
+    :is(label, legend).jkl-title[data-text-size] {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-relaxed);
+    }
+
+    // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
+    // Spesifisiteten her (0,2,1) overstyrer `.jkl-title[data-text-size]`
+    // som ellers nullstiller margin via `margin-block: 0`.
+    label.jkl-title[data-text-size] {
+        display: block;
+        margin-block-end: var(--jkl-spacing-8);
+    }
+}