@openkfw/design-tokens 0.7.0 → 1.0.2
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.
- package/LICENSE +1 -1
- package/README.md +54 -30
- package/demo/dist/css/style.min.css +1 -1
- package/demo/src/App.ts +12 -0
- package/demo/src/ColorPalette.ts +84 -0
- package/demo/src/Navigation.ts +55 -0
- package/demo/src/StickyHeader.ts +40 -0
- package/demo/src/main.ts +1 -0
- package/output/css/kfw-design-tokens.light.css +1 -1
- package/output/js/kfw-design-tokens.d.ts +1 -1
- package/output/js/kfw-design-tokens.light.js +1 -1
- package/output/scss/kfw-design-tokens.light.scss +1 -1
- package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +1 -1
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +1 -1
- package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +1 -1
- package/package.json +5 -11
- package/demo/src/style.css +0 -2023
- package/demo/src/vendor/gen-icons.css +0 -115
- /package/demo/scripts/{build-icons.js → build-icons-css.js} +0 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
const STICKY_CLASS = "header--sticky"
|
|
2
|
+
const STICKY_THRESHOLD_APPLY = 128 // Scroll position to apply sticky header
|
|
3
|
+
const STICKY_THRESHOLD_REMOVE = 64 // Scroll position to remove sticky header (hysteresis)
|
|
4
|
+
|
|
5
|
+
export function initializeStickyHeader(): void {
|
|
6
|
+
const header = document.getElementById("sticky-header")
|
|
7
|
+
|
|
8
|
+
if (!header) return
|
|
9
|
+
|
|
10
|
+
let ticking = false
|
|
11
|
+
|
|
12
|
+
const updateSticky = (): void => {
|
|
13
|
+
const y = window.scrollY
|
|
14
|
+
const isSticky = header.classList.contains(STICKY_CLASS)
|
|
15
|
+
|
|
16
|
+
// Hysteresis to prevent flickering when scrolling near threshold
|
|
17
|
+
if (y >= STICKY_THRESHOLD_APPLY && !isSticky) {
|
|
18
|
+
header.classList.add(STICKY_CLASS)
|
|
19
|
+
} else if (y < STICKY_THRESHOLD_REMOVE && isSticky) {
|
|
20
|
+
header.classList.remove(STICKY_CLASS)
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
window.addEventListener(
|
|
25
|
+
"scroll",
|
|
26
|
+
() => {
|
|
27
|
+
if (!ticking) {
|
|
28
|
+
requestAnimationFrame(() => {
|
|
29
|
+
updateSticky()
|
|
30
|
+
ticking = false
|
|
31
|
+
})
|
|
32
|
+
ticking = true
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{ passive: true }
|
|
36
|
+
)
|
|
37
|
+
|
|
38
|
+
// Set initial state
|
|
39
|
+
updateSticky()
|
|
40
|
+
}
|
package/demo/src/main.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./App"
|
package/package.json
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openkfw/design-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "The source of truth for KfW-branded digital products.",
|
|
5
5
|
"files": [
|
|
6
6
|
"README.md",
|
|
7
7
|
"LICENSE",
|
|
8
8
|
"output",
|
|
9
9
|
"tokens/tokens.json",
|
|
10
|
-
"tokens/gen-tokens.dark.json5",
|
|
11
10
|
"demo/dist/css/style.min.css",
|
|
12
|
-
"demo/src/style.css",
|
|
13
|
-
"demo/src/vendor/**.css",
|
|
14
11
|
"demo/scripts/**.js",
|
|
15
|
-
"demo/
|
|
12
|
+
"demo/src/vendor/gen-custom-media.css",
|
|
13
|
+
"demo/src/**.ts"
|
|
16
14
|
],
|
|
17
15
|
"scripts": {
|
|
18
16
|
"start": "npm run watch",
|
|
@@ -40,18 +38,14 @@
|
|
|
40
38
|
"devDependencies": {
|
|
41
39
|
"@eslint/js": "^9",
|
|
42
40
|
"@tsconfig/node24": "^24",
|
|
43
|
-
"@types/lodash": "^4.17.23",
|
|
44
41
|
"@types/node": "^24",
|
|
45
42
|
"concurrently": "^9.2.1",
|
|
46
|
-
"deep-get-set-ts": "^1.1.2",
|
|
47
43
|
"eslint": "^9",
|
|
48
|
-
"json5": "^2.2.3",
|
|
49
|
-
"lodash": "4.17.23",
|
|
50
44
|
"prettier": "^3.8.1",
|
|
51
|
-
"style-dictionary": "^5.3.
|
|
45
|
+
"style-dictionary": "^5.3.1",
|
|
52
46
|
"style-dictionary-utils": "^6.0.1",
|
|
53
47
|
"tsx": "^4.21.0",
|
|
54
48
|
"typescript": "^5.9.3",
|
|
55
|
-
"typescript-eslint": "^8.
|
|
49
|
+
"typescript-eslint": "^8.56.0"
|
|
56
50
|
}
|
|
57
51
|
}
|