@fremtind/jkl-core - npm Package Compare versions

Comparing version 12.2.0 to 13.0.0

build/cjs/index.js

 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -18,2 +20,10 @@ var __export = (target, all) => {
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -29,3 +39,4 @@ var src_exports = {};
   initTabListener: () => import_utils.initTabListener,
-  timings: () => import_utils.timings
+  timings: () => import_utils.timings,
+  tokens: () => import_tokens.default
 });
@@ -35,2 +46,3 @@ module.exports = __toCommonJS(src_exports);
 var import_components = require("./components");
+var import_tokens = __toESM(require("./tokens"));
 //# sourceMappingURL=index.js.map

build/esm/index.js

 import { initTabListener, getValuePair, breakpoints, timings, easings } from "./utils";
 import { Link, NavLink, ScreenReaderOnly } from "./components";
+import { default as default2 } from "./tokens";
 export {
@@ -11,4 +12,5 @@ Link,
   initTabListener,
-  timings
+  timings,
+  default2 as tokens
 };
 //# sourceMappingURL=index.js.map

build/index.d.ts

@@ -7,1 +7,2 @@ export type { Easing, Timing } from "./utils";
 export type { ColorScheme, DataTestAutoId, ValuePair, WithChildren, WithOptionalChildren } from "./types";
+export { default as tokens } from "./tokens";

package.json

 {
     "name": "@fremtind/jkl-core",
-    "version": "12.2.0",
+    "version": "13.0.0",
     "publishConfig": {
@@ -24,3 +24,4 @@ "access": "public"
         "*.css",
-        "*.scss"
+        "*.scss",
+        "*.less"
     ],
@@ -31,3 +32,4 @@ "directories": {
     "scripts": {
-        "clean": "rimraf node_modules/ build/ node_modules/ **/*.css",
+        "clean": "rimraf node_modules/ build/ **/*.css",
+        "generate:tokens": "node tokens.build.mjs",
         "build": "run-s build:*",
@@ -52,2 +54,6 @@ "build:style": "gulp build",
     },
+    "devDependencies": {
+        "change-case": "^4.1.2",
+        "style-dictionary": "^3.8.0"
+    },
     "peerDependencies": {
@@ -59,3 +65,3 @@ "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
     },
-    "gitHead": "7d4f05e07a54b37bb5c442ee50ead9c25f9cd25e"
+    "gitHead": "dc186201b35de12936fd8944b5ff713437312239"
 }

README.md

@@ -34,2 +34,7 @@ # [`@fremtind/jkl-core`](https://jokul.fremtind.no/komponenter/mixins)
 
+```less
+// Du finner også variablene fra Jøkul i Less-format her
+@import "@fremtind/jkl-core/tokens.less";
+```
+
 ## Bruk
@@ -99,1 +104,142 @@
 ```
+
+### Vind
+
+Vind er et subset av [Tailwind CSS](https://tailwindcss.com), med grunnlag i Jøkuls design tokens, som fokuserer på:
+
+-   Layout, som Flex, Padding, og Margin
+-   Typografi
+
+#### Bruk med Webpack, Vite og liknende
+
+```js
+import "@fremtind/jkl-core/core.min.css";
+// Vind trenger core og klassen jkl på rotnivå for å fungere
+import "@fremtind/jkl-core/vind.min.css";
+```
+
+#### Bruk med Sass
+
+```scss
+@use "@fremtind/jkl-core/core";
+// Vind trenger core og klassen jkl på rotnivå for å fungere
+@use "@fremtind/jkl-core/vind";
+```
+
+#### API
+
+Du finner igjen disse tingene du kanskje kjenner fra Tailwind:
+
+-   [Flex Direction](https://tailwindcss.com/docs/flex-direction)
+-   [Flex Grow](https://tailwindcss.com/docs/flex-grow)
+-   [Flex Shrink](https://tailwindcss.com/docs/flex-shrink)
+-   [Gap](https://tailwindcss.com/docs/gap)
+-   [Justify Content](https://tailwindcss.com/docs/justify-content)
+-   [Align Items](https://tailwindcss.com/docs/align-items)
+-   [Padding](https://tailwindcss.com/docs/padding)
+-   [Margin](https://tailwindcss.com/docs/margin)
+-   [Space Between](https://tailwindcss.com/docs/space)
+-   [Font Family](https://tailwindcss.com/docs/font-family) (`font-serif` finnes ikke)
+-   [Font Weight](https://tailwindcss.com/docs/font-weight) (kun `font-normal` og `font-bold`)
+
+##### Typografi
+
+Vi har egne utils for typografi som passer med vår egen typografiskala.
+
+```scss
+.title
+.title-small
+.heading-1
+.heading-2
+.heading-3
+.heading-4
+.heading-5
+.body
+.small
+```
+
+#### Savner du noe fra Tailwind?
+
+Åpne et issue med feature-ønsker, så kan vi finne ut av det sammen.
+
+#### Jeg vil bruke Tailwind for å bygge løsningene mine. Hvordan bruker jeg Jøkul-verdier?
+
+Per nå har vi ikke noen ferdig konfigurasjon som er klar for Tailwind eller andre utility-baserte verktøy, men vi eksporterer alle design tokens som JavaScript.
+
+Du kan importere tokensene i `tailwind.config.js` og bygge opp konfigurasjonen din på den måten:
+
+```js
+import { tokens, breakpoints } from "@fremtind/jkl-core";
+import plugin from "tailwindcss/plugin";
+
+export default {
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {},
+        colors: tokens.color,
+        spacing: tokens.spacing,
+        fontSize: null,
+        lineHeight: null,
+    },
+    plugins: [
+        plugin(function ({ addComponents }) {
+            addComponents({
+                ".title": {
+                    ...tokens.typography.title.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.title.base,
+                    },
+                },
+                ".title-small": {
+                    ...tokens.typography.titleSmall.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.titleSmall.base,
+                    },
+                },
+                ".heading-1": {
+                    ...tokens.typography.heading_1.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.heading_1.base,
+                    },
+                },
+                ".heading-2": {
+                    ...tokens.typography.heading_2.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.heading_2.base,
+                    },
+                },
+                ".heading-3": {
+                    ...tokens.typography.heading_3.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.heading_3.base,
+                    },
+                },
+                ".heading-4": {
+                    ...tokens.typography.heading_4.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.heading_4.base,
+                    },
+                },
+                ".heading-5": {
+                    ...tokens.typography.heading_5.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.heading_5.base,
+                    },
+                },
+                ".body": {
+                    ...tokens.typography.body.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.body.base,
+                    },
+                },
+                ".small": {
+                    ...tokens.typography.small.small,
+                    [`@media (min-width: ${breakpoints.medium}px)`]: {
+                        ...tokens.typography.small.base,
+                    },
+                },
+            });
+        }),
+    ],
+};
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

269689

increased by58.23%

Number of package files

110

increased by18.28%

Lines of code

4577

increased by100.48%

Number of lines in readme file

244

increased by148.98%

Worsened metrics

Dev dependency count

2

increased byInfinity%

No dependency changes