@digdir/designsystemet-theme - npm Package Compare versions

Comparing version 0.15.3 to 0.100.51-next.51

package.json

 {
   "name": "@digdir/designsystemet-theme",
-  "version": "0.15.3",
-  "description": "Tokens for Designsystemet",
+  "version": "0.100.51-next.51",
+  "description": "Predefined themes for Designsystemet",
   "author": "Designsystemet team",
-  "repository": "https://github.com/digdir/designsystemet",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digdir/designsystemet.git"
+  },
   "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/theme",
   "license": "MIT",
-  "main": "brand/digdir/tokens.css",
+  "exports": {
+    ".": {
+      "types": "./brand/colors.d.ts",
+      "default": "./brand/digdir.css"
+    },
+    "./*": "./brand/*"
+  },
   "files": [
@@ -21,5 +30,4 @@ "brand/**",
   "devDependencies": {
-    "rimraf": "^5.0.5"
-  },
-  "gitHead": "aeed6074c31e5e21c7ca9e83a883fe87cd1111d5"
+    "rimraf": "^6.0.1"
+  }
 }

README.md

 # @digdir/designsystemet-theme
 
-Themes for Designsystemet
+This package contains the following predefined Designsystemet themes for use in Digdir.
 
-This package contains the following predefined brand themes
-
+- `digdir`
 - `altinn`
-- `digdir`
-- `tilsynet`
-- `brreg`
+- `uutilsynet`
+- `portal`
 
-## Installation
+Build your own theme on https://theme.designsystemet.no/
 
-```sh
-npm install @digdir/designsystemet-theme
-```
-
 ## Usage
 
-When importing the package make sure to specify which brand tokens you want to import. By default the `digdir` is imported if you don't specify a brand.
+Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.
 
+When importing the package make sure to specify which theme. 
+By default `digdir` is used.
+
 ```tsx
-import '@digdir/designsystemet-theme/brand/<brand>/tokens';
+import '@digdir/designsystemet-theme/<theme>.css';
 
-// This imports Digdir brand css tokens
+// Digdir theme
 import '@digdir/designsystemet-theme';
 
-//  This imports Altinn css tokens
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
+// Altinn theme
+import '@digdir/designsystemet-theme/altinn.css';
 ```
@@ -34,9 +31,9 @@
 
-When importing css tokens a set of [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are added to your `:root {}`.
+This package adds Designsystemet [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to your `:root {}`.
 You only need to import this once in your application, preferably somewhere in your "root" html.
 
-All variables are prefixed with `fds`.
+All variables are prefixed with `ds`.
 
 ```js
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
+import '@digdir/designsystemet-theme/altinn.css';
 ```
@@ -46,4 +43,5 @@
 div {
-  padding: var(--fds-spacing-1);
+  padding: var(--ds-size-1);
 }
 ```
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

491614

increased by593.71%

Number of package files

47

increased by571.43%

Lines of code

11353

increased by799.6%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

46

decreased by-4.17%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes