ps-helix 6.2.3 → 7.0.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 (31) hide show
  1. package/CONFIGURATION.md +492 -0
  2. package/README.md +131 -125
  3. package/THEME.md +37 -27
  4. package/TOKENS.md +662 -0
  5. package/fesm2022/ps-helix.mjs +7777 -5714
  6. package/fesm2022/ps-helix.mjs.map +1 -1
  7. package/package.json +18 -8
  8. package/src/lib/styles/base/a11y.css +36 -0
  9. package/src/lib/styles/base/behavior.css +15 -0
  10. package/src/lib/styles/base/global.css +9 -26
  11. package/src/lib/styles/compat.css +580 -0
  12. package/src/lib/styles/themes/dark-auto.css +315 -0
  13. package/src/lib/styles/themes/dark.css +259 -157
  14. package/src/lib/styles/themes/light.css +236 -221
  15. package/src/lib/styles/tokens/animations.tokens.css +30 -21
  16. package/src/lib/styles/tokens/breakpoints.tokens.css +22 -6
  17. package/src/lib/styles/tokens/effects.tokens.css +25 -25
  18. package/src/lib/styles/tokens/layout.tokens.css +32 -32
  19. package/src/lib/styles/tokens/sizing.tokens.css +87 -75
  20. package/src/lib/styles/tokens/spacing.tokens.css +18 -18
  21. package/src/lib/styles/tokens/typography.tokens.css +34 -34
  22. package/src/lib/styles/utilities/animations.utils.css +18 -18
  23. package/src/lib/styles/utilities/colors.utils.css +196 -196
  24. package/src/lib/styles/utilities/focus.utils.css +13 -13
  25. package/src/lib/styles/utilities/layout.utils.css +9 -9
  26. package/src/lib/styles/utilities/responsive.utils.css +49 -49
  27. package/src/lib/styles/utilities/spacing.utils.css +96 -96
  28. package/src/lib/styles/utilities/typography.utils.css +25 -25
  29. package/styles-full.css +25 -0
  30. package/styles.css +17 -8
  31. package/types/ps-helix.d.ts +3251 -1724
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ps-helix",
3
- "version": "6.2.3",
3
+ "version": "7.0.0",
4
4
  "description": "Helix Design System - A comprehensive Angular component library",
5
5
  "author": "Fabrice PEREZ - Design Engineer at PACK Solutions",
6
6
  "license": "MIT",
@@ -23,20 +23,25 @@
23
23
  "@angular/common": "^22.0.0",
24
24
  "@angular/core": "^22.0.0",
25
25
  "@angular/forms": "^22.0.0",
26
- "@ngx-translate/core": "^15.0.0",
27
26
  "rxjs": "^7.8.0"
28
27
  },
29
28
  "dependencies": {
30
29
  "tslib": "^2.6.0",
31
- "date-fns": "^3.3.1",
32
30
  "@phosphor-icons/web": "2.0.3"
33
31
  },
34
- "sideEffects": [
35
- "*.css"
36
- ],
37
- "module": "fesm2022/ps-helix.mjs",
38
- "typings": "types/ps-helix.d.ts",
39
32
  "exports": {
33
+ "./styles.css": {
34
+ "style": "./styles.css",
35
+ "default": "./styles.css"
36
+ },
37
+ "./styles-full.css": {
38
+ "style": "./styles-full.css",
39
+ "default": "./styles-full.css"
40
+ },
41
+ "./src/lib/styles/*": {
42
+ "style": "./src/lib/styles/*",
43
+ "default": "./src/lib/styles/*"
44
+ },
40
45
  "./package.json": {
41
46
  "default": "./package.json"
42
47
  },
@@ -45,5 +50,10 @@
45
50
  "default": "./fesm2022/ps-helix.mjs"
46
51
  }
47
52
  },
53
+ "sideEffects": [
54
+ "*.css"
55
+ ],
56
+ "module": "fesm2022/ps-helix.mjs",
57
+ "typings": "types/ps-helix.d.ts",
48
58
  "type": "module"
49
59
  }
package/src/lib/styles/base/a11y.css ADDED
@@ -0,0 +1,36 @@
1
+ /* ============================================================================
2
+ Accessibility guarantees — always shipped
3
+
4
+ These two rules must reach every consumer, which is why they live here and not in
5
+ global.css: that file carries opinionated page styling (body background, list resets)
6
+ that an application may legitimately not want, whereas losing a focus indicator or
7
+ ignoring a motion preference is never a legitimate trade.
8
+ ========================================================================== */
9
+
10
+ /* A box-shadow is not painted in forced-colors mode, so every component in the library
11
+ that draws its focus ring with one — the majority — would have no visible focus
12
+ indicator at all under Windows High Contrast. `outline` is honoured there, and
13
+ CanvasText follows whatever palette the user picked.
14
+
15
+ Components that already use outline are unaffected: this only restores what
16
+ forced-colors removes. */
17
+ @media (forced-colors: active) {
18
+ :focus-visible {
19
+ outline: 2px solid CanvasText;
20
+ outline-offset: 2px;
21
+ }
22
+ }
23
+
24
+ /* Respect the user's "reduce motion" OS setting across the whole library. Moved here
25
+ from global.css so it survives that file becoming opt-in. Individual components do not
26
+ need their own copy — this covers every element, including projected content. */
27
+ @media (prefers-reduced-motion: reduce) {
28
+ *,
29
+ *::before,
30
+ *::after {
31
+ animation-duration: 0.01ms !important;
32
+ animation-iteration-count: 1 !important;
33
+ transition-duration: 0.01ms !important;
34
+ scroll-behavior: auto !important;
35
+ }
36
+ }
package/src/lib/styles/base/behavior.css ADDED
@@ -0,0 +1,15 @@
1
+ /* ============================================================================
2
+ Component machinery — always shipped
3
+
4
+ Rules the components need in order to work, which they cannot express themselves
5
+ because they target <body>. Not opinions about how a page should look: that lives in
6
+ global.css, which is opt-in.
7
+ ========================================================================== */
8
+
9
+ /* Applied by PshModalComponent while a modal is open. The padding compensates for the
10
+ scrollbar the lock removes, so the page does not shift sideways underneath the
11
+ overlay; --psh-scrollbar-width is measured and set by the component. */
12
+ body.psh-modal-open {
13
+ overflow: hidden;
14
+ padding-right: var(--psh-scrollbar-width);
15
+ }
package/src/lib/styles/base/global.css CHANGED
@@ -9,40 +9,23 @@ body {
9
9
  min-height: 100vh;
10
10
  scroll-behavior: smooth;
11
11
  text-rendering: optimizeSpeed;
12
- line-height: var(--line-height-normal);
13
- font-family: var(--font-family);
14
- color: var(--text-color);
15
- background: var(--body-gradient);
12
+ line-height: var(--psh-line-height-normal);
13
+ font-family: var(--psh-font-family);
14
+ color: var(--psh-text-color);
15
+ background: var(--psh-body-gradient);
16
16
  overflow-y: auto;
17
17
  }
18
18
 
19
19
  /* Mobile specific body styles */
20
- @media (max-width: 768px) {
20
+ @media (max-width: 47.9375em) {
21
21
  body {
22
22
  overflow-x: hidden;
23
23
  overflow-y: auto;
24
24
  }
25
25
  }
26
26
 
27
- /* Modal open state */
28
- body.psh-modal-open {
29
- overflow: hidden;
30
- padding-right: var(--scrollbar-width);
31
- }
32
-
33
- /*
34
- * Respect the user's "reduce motion" OS setting across the whole library.
35
- * A single global guard neutralises animations, transitions and smooth
36
- * scrolling for every component and utility (WCAG 2.3.3 / 2.2.2).
37
- */
38
- @media (prefers-reduced-motion: reduce) {
39
- *,
40
- *::before,
41
- *::after {
42
- animation-duration: 0.01ms !important;
43
- animation-iteration-count: 1 !important;
44
- transition-duration: 0.01ms !important;
45
- scroll-behavior: auto !important;
46
- }
47
- }
27
+ /* Two rules that used to live here now ship unconditionally, because they are not
28
+ opinions an application can decline:
29
+ - the prefers-reduced-motion guard -> base/a11y.css
30
+ - body.psh-modal-open (scroll lock) -> base/behavior.css */
48
31