@db-ui/foundations - npm Package Compare versions

Comparing version 0.6.3-5-dfdc409 to 0.6.3-vue-3477988

package.json

 {
   "name": "@db-ui/foundations",
-  "version": "0.6.3-5-dfdc409",
+  "version": "0.6.3-vue-3477988",
   "type": "module",
@@ -23,5 +23,5 @@ "description": "Provides basic tokens and assets based on DB UX Design System Core.",
     "build:02_copy": "npm run copy:scss",
-    "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/scss/:build/css/ --future-deprecation=import",
+    "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles",
     "build:04_tailwind": "cpr tailwind build/tailwind -o",
-    "build:05_postcss": "postcss build/css/**/*.css --replace",
+    "build:05_postcss": "postcss build/styles/**/*.css --replace",
     "build:06_ide": "cpr ide build/ide -o",
@@ -37,3 +37,3 @@ "clean": "rm -rf build",
     "copy-prepare:woff2": "cpr ../../node_modules/@db-ux/core-icons/dist/fonts assets/icons/functional/fonts -o",
-    "copy:scss": "cpr scss build/scss -o",
+    "copy:scss": "cpr scss build/styles -o",
     "dev": "vite --open",
@@ -53,3 +53,5 @@ "prebuild": "npm-run-all copy-prepare:*",
     "dotenv": "^16.4.7",
+    "glob": "11.0.1",
     "nodemon": "3.1.9",
+    "prettier": "^3.4.2",
     "sass": "1.77.4",
@@ -56,0 +58,0 @@ "tsx": "^4.19.2",

README.md

@@ -26,3 +26,3 @@ # @db-ui/foundations
 
-> **tl;dr:** Use the default theme and the bundled styles by importing `default-theme.css` && `db-ui-foundations[-absolute|-rollup|-webpack].css`.
+> **tl;dr:** Use the default theme and the bundled styles by importing [relative|absolute|rollup|webpack].css`.
 
@@ -42,3 +42,3 @@ ---
 
-You can import the complete **init** styles with `db-ui-foundations[-absolute|-rollup|-webpack].css` which apply the default:
+You can import the complete **init** styles with `[relative|absolute|rollup|webpack].css` which apply the default:
 
@@ -50,3 +50,3 @@ - [Density](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=und%20Textfarben%20sicherstellt.-,Sizing,-Adaptive%20Sizing%20ist): `regular`
 
-Default assets path for `db-ui-foundations.css` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `db-ui-foundations[-rollup|-webpack].css`.
+Default assets path for `relative.css` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `[rollup|webpack].css`.
 
@@ -61,15 +61,12 @@ #### Import
 /* index.css */
-@import "@db-ui/foundations/build/css/default-theme.css";
-@import "@db-ui/foundations/build/css/db-ui-foundations.css";
+@import "@db-ui/foundations/build/styles/relative.css";
 
-/* Optional: Use [data-icon] everywhere */
-@import "@db-ui/foundations/build/css/icons/include.css";
 /* Optional: Use [data-divider] & [data-focus] everywhere */
-@import "@db-ui/foundations/build/css/helpers/classes/all.css";
+@import "@db-ui/foundations/build/styles/helpers/classes/all.css";
 /* Optional: Use [data-density] everywhere */
-@import "@db-ui/foundations/build/css/density/classes/all.css";
+@import "@db-ui/foundations/build/styles/density/classes/all.css";
 /* Optional: Use [data-font-size] everywhere */
-@import "@db-ui/foundations/build/css/fonts/classes/all.css";
+@import "@db-ui/foundations/build/styles/fonts/classes/all.css";
 /* Optional: Use [data-color] everywhere */
-@import "@db-ui/foundations/build/css/colors/classes/all.css";
+@import "@db-ui/foundations/build/styles/colors/classes/all.css";
 ```
@@ -81,15 +78,13 @@
 // main.[js|ts]
-import "@db-ui/foundations/build/css/default-theme.css";
-import "@db-ui/foundations/build/css/db-ui-foundations.css";
+/* index.css */
+import "@db-ui/foundations/build/styles/relative.css";
 
-/* Optional: Use [data-icon] everywhere */
-import "@db-ui/foundations/build/css/icons/include.css";
 /* Optional: Use [data-divider] & [data-focus] everywhere */
-import "@db-ui/foundations/build/css/helpers/classes/all.css";
+import "@db-ui/foundations/build/styles/helpers/classes/all.css";
 /* Optional: Use [data-density] everywhere */
-import "@db-ui/foundations/build/css/density/classes/all.css";
+import "@db-ui/foundations/build/styles/density/classes/all.css";
 /* Optional: Use [data-font-size] everywhere */
-import "@db-ui/foundations/build/css/fonts/classes/all.css";
+import "@db-ui/foundations/build/styles/fonts/classes/all.css";
 /* Optional: Use [data-color] everywhere */
-import "@db-ui/foundations/build/css/colors/classes/all.css";
+import "@db-ui/foundations/build/styles/colors/classes/all.css";
 ```
@@ -128,3 +123,3 @@
 
-Default assets path for `db-ui-foundations.scss` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `db-ui-foundations[-rollup|-webpack].scss`.
+Default assets path for `relative.scss` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `[rollup|webpack].scss`.
 
@@ -139,15 +134,12 @@ #### Import
 /* index.css */
-@forward "@db-ui/foundations/build/scss/default-theme";
-@forward "@db-ui/foundations/build/scss/db-ui-foundations";
+@forward "@db-ui/foundations/build/styles/relative";
 
-/* Optional: Use [data-icon] everywhere */
-@forward "@db-ui/foundations/build/scss/icons/include";
 /* Optional: Use [data-divider] & [data-focus] everywhere */
-@forward "@db-ui/foundations/build/scss/helpers/classes/all";
+@forward "@db-ui/foundations/build/styles/helpers/classes/all";
 /* Optional: Use [data-density] everywhere */
-@forward "@db-ui/foundations/build/scss/density/classes/all";
+@forward "@db-ui/foundations/build/styles/density/classes/all";
 /* Optional: Use [data-font-size] everywhere */
-@forward "@db-ui/foundations/build/scss/fonts/classes/all";
+@forward "@db-ui/foundations/build/styles/fonts/classes/all";
 /* Optional: Use [data-color] everywhere */
-@forward "@db-ui/foundations/build/scss/colors/classes/all";
+@forward "@db-ui/foundations/build/styles/colors/classes/all";
 ```
@@ -161,15 +153,12 @@
 // main.[js|ts]
-import "@db-ui/foundations/build/scss/default-theme.scss";
-import "@db-ui/foundations/build/scss/db-ui-foundations.scss";
+import "@db-ui/foundations/build/styles/relative.scss";
 
-/* Optional: Use [data-icon] everywhere */
-import "@db-ui/foundations/build/scss/icons/include.scss";
 /* Optional: Use [data-divider] & [data-focus] everywhere */
-import "@db-ui/foundations/build/scss/helpers/classes/all.scss";
+import "@db-ui/foundations/build/styles/helpers/classes/all.scss";
 /* Optional: Use [data-density] everywhere */
-import "@db-ui/foundations/build/scss/density/classes/all.scss";
+import "@db-ui/foundations/build/styles/density/classes/all.scss";
 /* Optional: Use [data-font-size] everywhere */
-import "@db-ui/foundations/build/scss/fonts/classes/all.scss";
+import "@db-ui/foundations/build/styles/fonts/classes/all.scss";
 /* Optional: Use [data-color] everywhere */
-import "@db-ui/foundations/build/scss/colors/classes/all.scss";
+import "@db-ui/foundations/build/styles/colors/classes/all.scss";
 ```
@@ -182,3 +171,3 @@
 ```scss
-@use "@db-ui/foundations/build/scss/variables";
+@use "@db-ui/foundations/build/styles/variables";
 
@@ -193,4 +182,4 @@ .my-container {
 ```scss
-@use "@db-ui/foundations/build/scss/fonts";
-@use "@db-ui/foundations/build/scss/colors";
+@use "@db-ui/foundations/build/styles/fonts";
+@use "@db-ui/foundations/build/styles/colors";
 
@@ -304,13 +293,34 @@ .placeholder-container {
 
-If you want to optimize the size of the loaded styles, you might skip loading `@db-ui/foundations/build/css/db-ui-foundations.css`.But there are some required styles for this Design-System to work properly.
+If you want to optimize the size of the loaded styles, you might want to skip loading `@db-ui/foundations/build/styles/[relative|absolute|rollup|webpack].css`. But there are some required styles for this Design System to work properly.
 
+### Theme, Assets & Init
+
 ```css
-/* The theme contains all prop required for components like spacings, colors, ... */
-@import "@db-ui/foundations/build/css/default-theme.css";
-/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
-@import "@db-ui/foundations/build/css/fonts/include.css";
+/* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */
+@import "@db-ui/foundations/build/styles/default-theme.css";
+/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */
+@import "@db-ui/foundations/build/styles/fonts/relative.css";
+/* The icon include uses default icons based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own icons. */
+@import "@db-ui/foundations/build/styles/icons/relative.css";
+/* The index file will add some additional styles to normalize html defaults and add some default settings like default density, etc. */
+@import "@db-ui/foundations/build/styles/index.css";
+```
+
+#### Optimize index
+
+You are able to optimize the initial settings as well:
+
+```css
 /* The required styles will normalize css and add focus and default font to body */
-@import "@db-ui/foundations/build/css/init/required.css";
-/* The default root adds a default color space (neutral) and a density (regular) */
-@import "@db-ui/foundations/build/css/init/default-root.css";
+@import "@db-ui/foundations/build/styles/defaults/default-required.css";
+/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
+@import "@db-ui/foundations/build/styles/defaults/default-root.css";
+/* Adds font-sizes & line-heights to headlines and paragraph tags. You probably need this, but you might strip some styles if you don't need the range of h1-h6. */
+@import "@db-ui/foundations/build/styles/defaults/default-fonts.css";
+/* Adds "[data-icon]" and other icon related styles. If you don't need icons in your application you could skip this. */
+@import "@db-ui/foundations/build/styles/defaults/default-icons.css";
+/* Adds "[data-elevation]" and other icon related styles. If you don't need elevation in your application you could skip this. */
+@import "@db-ui/foundations/build/styles/defaults/default-elevation.css";
+/* Adds defaults for `blockquote`, `code` and `pre`. If you don't need them in your application you could skip this. */
+@import "@db-ui/foundations/build/styles/defaults/default-code.css";
 ```
@@ -317,0 +327,0 @@

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8149201

increased by72.63%

Number of downloads

642

increased by224.24%

Number of package files

297

increased by4.21%

Number of low license alerts

1

decreased by-50%

Lines of code

21726

increased by7.62%

Number of lines in readme file

340

increased by3.03%

Worsened metrics

Dev dependency count

11

increased by22.22%

Number of medium supply chain risk alerts

47

increased by20.51%

Published versions last week

3

decreased by-25%

Published versions last year

98

decreased by-2.97%

No dependency changes