@fremtind/jokul 0.69.0 → 0.69.1

package/styles/vind/_flex.scss

@@ -0,0 +1,113 @@
+@use "../core/jkl/spacing";
+
+.jkl {
+    .flex {
+        display: flex;
+    }
+
+    .flex-wrap {
+        flex-wrap: wrap;
+    }
+
+    .flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .flex-row {
+        flex-direction: row;
+    }
+
+    .flex-row-reverse {
+        flex-direction: row-reverse;
+    }
+
+    .flex-column {
+        flex-direction: column;
+    }
+
+    .flex-column-reverse {
+        flex-direction: column-reverse;
+    }
+
+    .grow {
+        flex-grow: 1;
+    }
+
+    .grow-0 {
+        flex-grow: 0;
+    }
+
+    .shrink {
+        flex-shrink: 1;
+    }
+
+    .shrink-0 {
+        flex-shrink: 0;
+    }
+
+    @each $spacing, $value in spacing.$spacing {
+        .gap-#{$spacing} {
+            gap: $value;
+        }
+
+        .gap-x-#{$spacing} {
+            column-gap: $value;
+        }
+
+        .gap-y-#{$spacing} {
+            row-gap: $value;
+        }
+    }
+
+    .justify-normal {
+        justify-content: normal;
+    }
+
+    .justify-start {
+        justify-content: flex-start;
+    }
+
+    .justify-end {
+        justify-content: flex-end;
+    }
+
+    .justify-center {
+        justify-content: center;
+    }
+
+    .justify-between {
+        justify-content: space-between;
+    }
+
+    .justify-around {
+        justify-content: space-around;
+    }
+
+    .justify-evenly {
+        justify-content: space-evenly;
+    }
+
+    .justify-stretch {
+        justify-content: stretch;
+    }
+
+    .items-start {
+        align-items: flex-start;
+    }
+
+    .items-end {
+        align-items: flex-end;
+    }
+
+    .items-center {
+        align-items: center;
+    }
+
+    .items-baseline {
+        align-items: baseline;
+    }
+
+    .items-stretch {
+        align-items: stretch;
+    }
+}

package/styles/vind/_font.scss

@@ -0,0 +1,19 @@
+@use "../core/jkl";
+
+.jkl {
+    .font-sans {
+        @include jkl.use-font-family("Fremtind Grotesk");
+    }
+
+    .font-mono {
+        @include jkl.use-font-family("Fremtind Grotesk Mono");
+    }
+
+    .font-normal {
+        font-weight: jkl.$typography-weight-normal;
+    }
+
+    .font-bold {
+        font-weight: jkl.$typography-weight-bold;
+    }
+}

package/styles/vind/_index.scss

@@ -0,0 +1 @@
+@forward "vind";

package/styles/vind/_margin.scss

@@ -0,0 +1,43 @@
+@use "../core/jkl/spacing";
+
+.jkl {
+    @each $spacing, $value in spacing.$spacing {
+        .m-#{$spacing} {
+            margin: $value;
+        }
+
+        .mx-#{$spacing} {
+            margin-left: $value;
+            margin-right: $value;
+        }
+
+        .ms-#{$spacing} {
+            margin-inline-start: $value;
+        }
+
+        .me-#{$spacing} {
+            margin-inline-end: $value;
+        }
+
+        .my-#{$spacing} {
+            margin-top: $value;
+            margin-bottom: $value;
+        }
+
+        .mt-#{$spacing} {
+            margin-top: $value;
+        }
+
+        .mr-#{$spacing} {
+            margin-right: $value;
+        }
+
+        .mb-#{$spacing} {
+            margin-bottom: $value;
+        }
+
+        .ml-#{$spacing} {
+            margin-left: $value;
+        }
+    }
+}

package/styles/vind/_padding.scss

@@ -0,0 +1,43 @@
+@use "../core/jkl/spacing";
+
+.jkl {
+    @each $spacing, $value in spacing.$spacing {
+        .p-#{$spacing} {
+            padding: $value;
+        }
+
+        .px-#{$spacing} {
+            padding-left: $value;
+            padding-right: $value;
+        }
+
+        .ps-#{$spacing} {
+            padding-inline-start: $value;
+        }
+
+        .pe-#{$spacing} {
+            padding-inline-end: $value;
+        }
+
+        .py-#{$spacing} {
+            padding-top: $value;
+            padding-bottom: $value;
+        }
+
+        .pt-#{$spacing} {
+            padding-top: $value;
+        }
+
+        .pr-#{$spacing} {
+            padding-right: $value;
+        }
+
+        .pb-#{$spacing} {
+            padding-bottom: $value;
+        }
+
+        .pl-#{$spacing} {
+            padding-left: $value;
+        }
+    }
+}

package/styles/vind/_space-between.scss

@@ -0,0 +1,13 @@
+@use "../core/jkl/spacing";
+
+.jkl {
+    @each $spacing, $value in spacing.$spacing {
+        .space-x-#{$spacing} {
+            margin-left: $value;
+        }
+
+        .space-y-#{$spacing} {
+            margin-top: $value;
+        }
+    }
+}

package/styles/vind/_typography.scss

@@ -0,0 +1,47 @@
+@use "../core/jkl";
+
+.jkl {
+    .title {
+        @include jkl.text-style("title");
+    }
+
+    .title-small {
+        @include jkl.text-style("title-small");
+    }
+
+    .heading-1 {
+        @include jkl.text-style("heading-1");
+    }
+
+    .heading-2 {
+        @include jkl.text-style("heading-2");
+    }
+
+    .heading-3 {
+        @include jkl.text-style("heading-3");
+    }
+
+    .heading-4 {
+        @include jkl.text-style("heading-4");
+    }
+
+    .heading-5 {
+        @include jkl.text-style("heading-5");
+    }
+
+    .body {
+        @include jkl.text-style("body");
+
+        &.font-bold {
+            font-weight: jkl.$typography-weight-bold;
+        }
+    }
+
+    .small {
+        @include jkl.text-style("small");
+
+        &.font-bold {
+            font-weight: jkl.$typography-weight-bold;
+        }
+    }
+}