@lmvz-ds/styles 0.14.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@lmvz-ds/styles",
+  "private": false,
+  "version": "0.14.0",
+  "description": "The styles of the design system",
+  "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "assets/"
+  ],
+  "exports": {
+    "./*": "./dist/*",
+    "./assets/*": "./assets/*"
+  },
+  "unpkg": "dist/themes/all.css",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.org/lmvz/lmvz-ds"
+  },
+  "scripts": {
+    "build": "vite build --config vite.config.ts && cp ./src/no-transform/*.css ./dist/",
+    "lint": "stylelint \"src/**/*.css\" --config ./stylelint.config.mjs"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "@lmvz-ds/design-tokens": "^0.14.0",
+    "@lmvz-ds/lib-styles": "^0.14.0",
+    "postcss-import": "^16.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "stylelint": "^17.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-value-no-unknown-custom-properties": "file:../../stylelint-value-no-unknown-custom-properties",
+    "vite": "^7.3.1"
+  },
+  "gitHead": "271fe2c4dd8e113b1fba7350eccfc2fa48062625"
+}

package/readme.md

@@ -0,0 +1,61 @@
+# LMVZ Styles
+
+This package contains all global design system styles for export (i.e. themes and style bundles).
+
+See Conventions at the bottom, before editing!
+
+## Usage in your project
+
+Always import one of the available themes as early in your application as possible, e.g. in your main CSS file
+
+```css
+@import '@lmvz-ds/styles/themes/light.css';
+```
+
+... or in your HTML
+
+```html
+<link rel="stylesheet" href=".../@lmvz-ds/styles/themes/light.css" />
+```
+
+Optionally, you can then import available `style/`-Packages:
+
+- @lmvz-ds/styles/bundles/typography.css
+- @lmvz-ds/styles/bundles/button.css
+
+These will provide styles in the global CSS scope and target native DOM elements.
+
+## Structure & Concepts
+
+### Trade-Offs and Constraints
+
+- The full set of (base) variables must only be bundled along with themes, as a singular import.
+- Themes must be provided in singular and plural forms: When a website includes only one, it must be "active" without further configuration; when a toggle is to be implemented, all themes can be imported at once and switched (using an html attribute "data-theme-lmvz-[theme]").
+
+### Internal Abstractions
+
+Internal abstractions are defined in `./internal`. Layering is allowed here, but be conscious about it.
+
+### Bundles
+
+These bundle abstractions and Fragments onto layers, for import into a consuming app. Bundles may provide global Component styles as [Constructable Style Sheets](https://stenciljs.com/docs/styling#constructable-stylesheets)
+
+### Themes
+
+The primary function of Themes is to provide a pre-built set of Design Tokens (from the `packages/design-tokens` package) to consuming apps. They are built and exposed just like any other style Bundle.
+
+## Tech Setup
+
+Styles are bundled using postcss (integrated via vite -> rollup -> postcss).
+
+## Conventions
+
+- Be careful not to bloat Themes too much (e.g. by importing other Bundles), to allow for selective imports.
+- Layers are not to be exposed separately, but only as part of Themes.
+- Always import the Layers definition before layering your own styles.
+- Only layer styles that are being exported as part of a Bundle or Theme, to otherwise allow generic re-use!
+- Prefer (Component-) local style definitions over global ones.
+
+## TODOs
+
+- [ ] Setup stylelint with the given Conventions