@fremtind/jokul 5.0.4 → 5.1.0

package/src/tokens/metadata/color.metadata.dark.json

@@ -0,0 +1,165 @@
+{
+    "$type": "number",
+    "color": {
+        "background": {
+            "page": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.page",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.page",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.page",
+                    "$value": 0.0027
+                }
+            },
+            "container": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container",
+                    "$value": 0.0167
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container",
+                    "$value": 25.6
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container",
+                    "$value": 0.0064
+                }
+            },
+            "container-accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container-accent",
+                    "$value": 0.0366
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container-accent",
+                    "$value": 33.4
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container-accent",
+                    "$value": 0.0114
+                }
+            },
+            "contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.contrast",
+                    "$value": 0.8749
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.contrast",
+                    "$value": 95.7
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.contrast",
+                    "$value": 0.0051
+                }
+            }
+        },
+        "text": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.default",
+                    "$value": 1.0
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.default",
+                    "$value": 100.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.default",
+                    "$value": 0.0001
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.subdued",
+                    "$value": 0.5615
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.subdued",
+                    "$value": 82.5
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.subdued",
+                    "$value": 0.0043
+                }
+            },
+            "accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.accent",
+                    "$value": 1.0
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.accent",
+                    "$value": 100.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.accent",
+                    "$value": 0.0001
+                }
+            },
+            "on-contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.on-contrast",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.on-contrast",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.on-contrast",
+                    "$value": 0.0027
+                }
+            }
+        },
+        "border": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.default",
+                    "$value": 0.5615
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.default",
+                    "$value": 82.5
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.default",
+                    "$value": 0.0043
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.subdued",
+                    "$value": 0.1186
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.subdued",
+                    "$value": 49.2
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.subdued",
+                    "$value": 0.0038
+                }
+            },
+            "strong": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.strong",
+                    "$value": 1.0
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.strong",
+                    "$value": 100.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.strong",
+                    "$value": 0.0001
+                }
+            }
+        }
+    }
+}

package/src/tokens/metadata/color.metadata.light.json

@@ -0,0 +1,165 @@
+{
+    "$type": "number",
+    "color": {
+        "background": {
+            "page": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.page",
+                    "$value": 0.8749
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.page",
+                    "$value": 95.7
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.page",
+                    "$value": 0.0051
+                }
+            },
+            "container": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container",
+                    "$value": 1.0
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container",
+                    "$value": 100.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container",
+                    "$value": 0.0001
+                }
+            },
+            "container-accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container-accent",
+                    "$value": 0.7423
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container-accent",
+                    "$value": 90.6
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container-accent",
+                    "$value": 0.0108
+                }
+            },
+            "contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.contrast",
+                    "$value": 0.0167
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.contrast",
+                    "$value": 25.6
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.contrast",
+                    "$value": 0.0064
+                }
+            }
+        },
+        "text": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.default",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.default",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.default",
+                    "$value": 0.0027
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.subdued",
+                    "$value": 0.1186
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.subdued",
+                    "$value": 49.2
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.subdued",
+                    "$value": 0.0038
+                }
+            },
+            "accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.accent",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.accent",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.accent",
+                    "$value": 0.0027
+                }
+            },
+            "on-contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.on-contrast",
+                    "$value": 1.0
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.on-contrast",
+                    "$value": 100.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.on-contrast",
+                    "$value": 0.0001
+                }
+            }
+        },
+        "border": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.default",
+                    "$value": 0.1186
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.default",
+                    "$value": 49.2
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.default",
+                    "$value": 0.0038
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.subdued",
+                    "$value": 0.5615
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.subdued",
+                    "$value": 82.5
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.subdued",
+                    "$value": 0.0043
+                }
+            },
+            "strong": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.strong",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.strong",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.strong",
+                    "$value": 0.0027
+                }
+            }
+        }
+    }
+}

package/src/tokens/metadata/color.metadata.saturated.dark.json

@@ -0,0 +1,165 @@
+{
+    "$type": "number",
+    "color": {
+        "background": {
+            "page": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.page",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.page",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.page",
+                    "$value": 0.0027
+                }
+            },
+            "container": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container",
+                    "$value": 0.0626
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container",
+                    "$value": 39.1
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container",
+                    "$value": 0.0524
+                }
+            },
+            "container-accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container-accent",
+                    "$value": 0.0962
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container-accent",
+                    "$value": 45.2
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container-accent",
+                    "$value": 0.0612
+                }
+            },
+            "contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.contrast",
+                    "$value": 0.6255
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.contrast",
+                    "$value": 84.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.contrast",
+                    "$value": 0.138
+                }
+            }
+        },
+        "text": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.default",
+                    "$value": 0.8835
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.default",
+                    "$value": 95.4
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.default",
+                    "$value": 0.0449
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.subdued",
+                    "$value": 0.5615
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.subdued",
+                    "$value": 82.5
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.subdued",
+                    "$value": 0.018
+                }
+            },
+            "accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.accent",
+                    "$value": 0.6255
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.accent",
+                    "$value": 84.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.accent",
+                    "$value": 0.138
+                }
+            },
+            "on-contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.on-contrast",
+                    "$value": 0.0041
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.on-contrast",
+                    "$value": 16.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.on-contrast",
+                    "$value": 0.0027
+                }
+            }
+        },
+        "border": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.default",
+                    "$value": 0.6255
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.default",
+                    "$value": 84.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.default",
+                    "$value": 0.138
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.subdued",
+                    "$value": 0.0962
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.subdued",
+                    "$value": 45.2
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.subdued",
+                    "$value": 0.0612
+                }
+            },
+            "strong": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.strong",
+                    "$value": 0.8835
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.strong",
+                    "$value": 95.4
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.strong",
+                    "$value": 0.0449
+                }
+            }
+        }
+    }
+}

package/src/tokens/metadata/color.metadata.saturated.light.json

@@ -0,0 +1,165 @@
+{
+    "$type": "number",
+    "color": {
+        "background": {
+            "page": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.page",
+                    "$value": 0.8749
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.page",
+                    "$value": 95.7
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.page",
+                    "$value": 0.0051
+                }
+            },
+            "container": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container",
+                    "$value": 0.7629
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container",
+                    "$value": 90.9
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container",
+                    "$value": 0.047
+                }
+            },
+            "container-accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.container-accent",
+                    "$value": 0.5779
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.container-accent",
+                    "$value": 82.8
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.container-accent",
+                    "$value": 0.0509
+                }
+            },
+            "contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of background.contrast",
+                    "$value": 0.134
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of background.contrast",
+                    "$value": 49.9
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of background.contrast",
+                    "$value": 0.1201
+                }
+            }
+        },
+        "text": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.default",
+                    "$value": 0.0411
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.default",
+                    "$value": 33.5
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.default",
+                    "$value": 0.1008
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.subdued",
+                    "$value": 0.1186
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.subdued",
+                    "$value": 49.2
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.subdued",
+                    "$value": 0.025
+                }
+            },
+            "accent": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.accent",
+                    "$value": 0.134
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.accent",
+                    "$value": 49.9
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.accent",
+                    "$value": 0.1201
+                }
+            },
+            "on-contrast": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of text.on-contrast",
+                    "$value": 1.0
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of text.on-contrast",
+                    "$value": 100.0
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of text.on-contrast",
+                    "$value": 0.0001
+                }
+            }
+        },
+        "border": {
+            "default": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.default",
+                    "$value": 0.134
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.default",
+                    "$value": 49.9
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.default",
+                    "$value": 0.1201
+                }
+            },
+            "subdued": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.subdued",
+                    "$value": 0.5779
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.subdued",
+                    "$value": 82.8
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.subdued",
+                    "$value": 0.0509
+                }
+            },
+            "strong": {
+                "luminance": {
+                    "$description": "Relative luminance (WCAG) of border.strong",
+                    "$value": 0.0411
+                },
+                "lightness": {
+                    "$description": "OKLCh lightness (L, 0–100) of border.strong",
+                    "$value": 33.5
+                },
+                "chroma": {
+                    "$description": "OKLCh chroma (C) of border.strong",
+                    "$value": 0.1008
+                }
+            }
+        }
+    }
+}

package/styles/base.css

@@ -274,13 +274,6 @@
     font-style: normal;
     src: url("/fonts/InterVariable.woff2") format("woff2");
   }
-  @font-face {
-    font-family: "Jokul Mono";
-    font-display: fallback;
-    font-weight: 400;
-    font-style: normal;
-    src: url("/fonts/InterVariable.woff2") format("woff2");
-  }
   @font-face {
     font-family: "Jokul Icons";
     font-weight: 300 400;
@@ -627,7 +620,8 @@
     --jkl-font-weight-bold: 530;
     --jkl-font-family-regular: "Jokul", "Adjusted Arial Fallback", arial, sans-serif;
     --jkl-font-family-display: "Jokul Display", "Adjusted Arial Display Fallback", arial, sans-serif;
-    --jkl-font-family-mono: "Jokul Mono", "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+    --jkl-font-family-mono: monospace;
+    --jkl-font-family-icons: "Jokul Icons", "Jokul Icons Fallback", monospace;
     --jkl-line-height-flush: 1;
     --jkl-line-height-tight: 1.3;
     --jkl-line-height-relaxed: 1.6;