@lmvz-ds/styles 0.18.2 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/README.md +85 -29
  3. package/dist/bundles/typography.css +1 -1
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # @lmvz-ds/styles
2
2
 
3
+ ## 0.19.0
4
+
3
5
  ## 0.18.2
4
6
 
5
7
  ## 0.18.1
package/README.md CHANGED
@@ -1,61 +1,117 @@
1
1
  # LMVZ Styles
2
2
 
3
- This package contains all global design system styles for export (i.e. themes and style bundles).
3
+ Global LMVZ Design System styles for consuming applications.
4
4
 
5
- See Conventions at the bottom, before editing!
5
+ This package provides theme files and optional global style bundles.
6
6
 
7
- ## Usage in your project
7
+ ## Install
8
8
 
9
- Always import one of the available themes as early in your application as possible, e.g. in your main CSS file
9
+ ```bash
10
+ npm i @lmvz-ds/styles
11
+ ```
12
+
13
+ ## Quick Start
14
+
15
+ Import one theme as early as possible in your app:
10
16
 
11
17
  ```css
12
18
  @import '@lmvz-ds/styles/themes/light.css';
13
19
  ```
14
20
 
15
- ... or in your HTML
21
+ Or include it directly in HTML:
16
22
 
17
23
  ```html
18
24
  <link rel="stylesheet" href=".../@lmvz-ds/styles/themes/light.css" />
19
25
  ```
20
26
 
21
- Optionally, you can then import available `style/`-Packages:
27
+ ## Extensibility and Customisation
22
28
 
23
- - @lmvz-ds/styles/bundles/typography.css
24
- - @lmvz-ds/styles/bundles/button.css
29
+ LMVZ styles use predefined CSS cascade layers so integrations get a stable and predictable cascade order.
30
+
31
+ Layer semantics:
32
+
33
+ - `lmvz-ds.reset`: browser reset and defensive base rules.
34
+ - `lmvz-ds.theme`: design tokens and theme-level styles (for example typography).
35
+ - `lmvz-ds.components`: global component fragments and component-level styling.
36
+ - `lmvz-ds.overrides`: utility or app/theme-specific overrides.
37
+
38
+ Customisation hook: import an LMVZ theme first, then place your app overrides in a later layer.
39
+
40
+ ```css
41
+ @import '@lmvz-ds/styles/themes/light.css';
42
+
43
+ @layer app.overrides {
44
+ :root {
45
+ --lmvz-ds-color-primary: #005a9c;
46
+ }
47
+
48
+ button {
49
+ border-radius: 0.375rem;
50
+ }
51
+ }
52
+ ```
25
53
 
26
- These will provide styles in the global CSS scope and target native DOM elements.
54
+ This keeps overrides explicit and robust across updates, because you control order with layers instead of selector specificity.
27
55
 
28
- ## Structure & Concepts
56
+ ## Theme Strategies
29
57
 
30
- ### Trade-Offs and Constraints
58
+ ### Single Theme
31
59
 
32
- - The full set of (base) variables must only be bundled along with themes, as a singular import.
33
- - 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]").
60
+ Use one of these entry points:
34
61
 
35
- ### Internal Abstractions
62
+ - @lmvz-ds/styles/themes/light.css
63
+ - @lmvz-ds/styles/themes/dark.css
36
64
 
37
- Internal abstractions are defined in `./internal`. Layering is allowed here, but be conscious about it.
65
+ No additional configuration is required.
38
66
 
39
- ### Bundles
67
+ ### Runtime Theme Toggle
40
68
 
41
- 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)
69
+ Import all themes:
42
70
 
43
- ### Themes
71
+ - @lmvz-ds/styles/themes/all.css
44
72
 
45
- 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.
73
+ Then switch with an HTML attribute on the root element:
46
74
 
47
- ## Tech Setup
75
+ - data-theme="lmvz-light"
76
+ - data-theme="lmvz-dark"
48
77
 
49
- Styles are bundled using postcss (integrated via vite -> rolldown -> postcss).
78
+ ## Optional Global Bundles
79
+
80
+ Import bundles only when you need global styling for native HTML elements:
81
+
82
+ - @lmvz-ds/styles/bundles/typography.css
83
+ - @lmvz-ds/styles/bundles/buttons.css
84
+ - @lmvz-ds/styles/bundles/layout.css
85
+ - @lmvz-ds/styles/bundles/tokens.css
86
+
87
+ These bundles are optional and additive on top of themes.
88
+
89
+ ## Integration Notes
90
+
91
+ - Import exactly one theme source at startup: either one specific theme file or themes/all.css.
92
+ - LMVZ web components keep their own internal styling; bundle imports are for global, native DOM styling.
93
+ - Keep imports explicit and minimal to avoid unnecessary global CSS.
94
+
95
+ ## Reference: Public Entry Points
96
+
97
+ Themes:
98
+
99
+ - @lmvz-ds/styles/themes/light.css
100
+ - @lmvz-ds/styles/themes/dark.css
101
+ - @lmvz-ds/styles/themes/all.css
102
+
103
+ Bundles:
104
+
105
+ - @lmvz-ds/styles/bundles/typography.css
106
+ - @lmvz-ds/styles/bundles/buttons.css
107
+ - @lmvz-ds/styles/bundles/layout.css
108
+ - @lmvz-ds/styles/bundles/tokens.css
109
+ - @lmvz-ds/styles/bundles/router-font-inline.css
50
110
 
51
- ## Conventions
111
+ Assets:
52
112
 
53
- - Be careful not to bloat Themes too much (e.g. by importing other Bundles), to allow for selective imports.
54
- - Layers are not to be exposed separately, but only as part of Themes.
55
- - Always import the Layers definition before layering your own styles.
56
- - Only layer styles that are being exported as part of a Bundle or Theme, to otherwise allow generic re-use!
57
- - Prefer (Component-) local style definitions over global ones.
113
+ - @lmvz-ds/styles/assets/\*
58
114
 
59
- ## TODOs
115
+ ## Maintainer Notes
60
116
 
61
- - [ ] Setup stylelint with the given Conventions
117
+ Contributor-facing build and conventions notes are in DEVELOPMENT.md.
package/dist/bundles/typography.css CHANGED
@@ -1 +1 @@
1
- @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}}@layer lmvz-ds.theme{:root,:host{--lmvz-typography-heading-4xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-4xl-font-size) / var(--lmvz-component-heading-4xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-2xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-2xl-font-size) / var(--lmvz-component-heading-2xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-heading-xl-font-size) / var(--lmvz-component-heading-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-lg:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-lg-font-size) / var(--lmvz-component-heading-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-md:var(--lmvz-global-font-weight-700) var(--lmvz-component-heading-md-font-size) / var(--lmvz-component-heading-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xl-font-size) / var(--lmvz-component-body-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-sm:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-sm-font-size) / var(--lmvz-component-body-sm-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-sm-font-size) / var(--lmvz-component-body-sm-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-default:var(--lmvz-typography-body-md)}*{color:var(--lmvz-semantic-color-on-surface-primary);font:var(--lmvz-typography-body-md)}.body-xl{font:var(--lmvz-typography-body-xl);padding-bottom:var(--lmvz-component-body-xl-padding-bottom)}.body-lg{font:var(--lmvz-typography-body-lg);padding-bottom:var(--lmvz-component-body-lg-padding-bottom)}.body-md-strong{font:var(--lmvz-typography-body-md-strong);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-md{font:var(--lmvz-typography-body-md);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-sm{font:var(--lmvz-typography-body-sm);padding-bottom:var(--lmvz-component-body-sm-padding-bottom)}.body-xs{font:var(--lmvz-typography-body-xs);padding-bottom:var(--lmvz-component-body-xs-padding-bottom)}h1,.heading-4xl{font:var(--lmvz-typography-heading-4xl)}h1{padding-bottom:var(--lmvz-component-heading-4xl-padding-bottom)}h2,.heading-2xl{font:var(--lmvz-typography-heading-2xl)}h2{padding-bottom:var(--lmvz-component-heading-2xl-padding-bottom)}h3,.heading-xl{font:var(--lmvz-typography-heading-xl)}h3{padding-bottom:var(--lmvz-component-heading-xl-padding-bottom)}h4,.heading-lg{font:var(--lmvz-typography-heading-lg)}h4{padding-top:var(--lmvz-component-heading-lg-padding-top);padding-bottom:var(--lmvz-component-heading-lg-padding-bottom)}h5,.heading-md{font:var(--lmvz-typography-heading-md)}h5{padding-top:var(--lmvz-component-heading-md-padding-top);padding-bottom:var(--lmvz-component-heading-md-padding-bottom)}}@layer lmvz-ds.components,lmvz-ds.overrides;
1
+ @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}}@layer lmvz-ds.theme{:root,:host{--lmvz-typography-heading-4xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-4xl-font-size) / var(--lmvz-component-heading-4xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-2xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-2xl-font-size) / var(--lmvz-component-heading-2xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-heading-xl-font-size) / var(--lmvz-component-heading-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-lg:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-lg-font-size) / var(--lmvz-component-heading-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-md:var(--lmvz-global-font-weight-700) var(--lmvz-component-heading-md-font-size) / var(--lmvz-component-heading-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xl-font-size) / var(--lmvz-component-body-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-sm:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-sm-font-size) / var(--lmvz-component-body-sm-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xs-font-size) / var(--lmvz-component-body-xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-xs-font-size) / var(--lmvz-component-body-xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-2xs-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-2xs-font-size) / var(--lmvz-component-body-2xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-default:var(--lmvz-typography-body-md)}*{color:var(--lmvz-semantic-color-on-surface-primary);font:var(--lmvz-typography-body-md)}.body-xl{font:var(--lmvz-typography-body-xl);padding-bottom:var(--lmvz-component-body-xl-padding-bottom)}.body-lg{font:var(--lmvz-typography-body-lg);padding-bottom:var(--lmvz-component-body-lg-padding-bottom)}.body-md-strong{font:var(--lmvz-typography-body-md-strong);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-md{font:var(--lmvz-typography-body-md);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-sm{font:var(--lmvz-typography-body-sm);padding-bottom:var(--lmvz-component-body-sm-padding-bottom)}.body-xs{font:var(--lmvz-typography-body-xs);padding-bottom:var(--lmvz-component-body-xs-padding-bottom)}h1,.heading-4xl{font:var(--lmvz-typography-heading-4xl)}h1{padding-bottom:var(--lmvz-component-heading-4xl-padding-bottom)}h2,.heading-2xl{font:var(--lmvz-typography-heading-2xl)}h2{padding-bottom:var(--lmvz-component-heading-2xl-padding-bottom)}h3,.heading-xl{font:var(--lmvz-typography-heading-xl)}h3{padding-bottom:var(--lmvz-component-heading-xl-padding-bottom)}h4,.heading-lg{font:var(--lmvz-typography-heading-lg)}h4{padding-top:var(--lmvz-component-heading-lg-padding-top);padding-bottom:var(--lmvz-component-heading-lg-padding-bottom)}h5,.heading-md{font:var(--lmvz-typography-heading-md)}h5{padding-top:var(--lmvz-component-heading-md-padding-top);padding-bottom:var(--lmvz-component-heading-md-padding-bottom)}}@layer lmvz-ds.components,lmvz-ds.overrides;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lmvz-ds/styles",
3
3
  "private": false,
4
- "version": "0.18.2",
4
+ "version": "0.19.0",
5
5
  "description": "The styles of the design system",
6
6
  "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
7
7
  "volta": {
@@ -34,7 +34,7 @@
34
34
  "stylelint-config-standard": "^38.0.0",
35
35
  "stylelint-value-no-unknown-custom-properties": "6.1.1",
36
36
  "vite": "^8.0.9",
37
- "@lmvz-ds/design-tokens": "~0.18.2",
37
+ "@lmvz-ds/design-tokens": "~0.19.0",
38
38
  "@lmvz-ds/lib-styles": "~0.16.0"
39
39
  },
40
40
  "gitHead": "aaec2215b0239d6fa4a5876af444e0b7abba2c7d",