@db-ux/core-foundations 3.0.2-copilot2-e7bf98b → 3.0.2-copilot4-0defc04

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 (6) hide show
  1. package/build/styles/defaults/README.md +3 -0
  2. package/package.json +3 -4
  3. package/agent/_instructions.md +0 -15
  4. package/agent/css/Variables.md +0 -130
  5. package/agent/scss/Variables.md +0 -131
  6. package/agent/tailwind/Variables.md +0 -75
package/build/styles/defaults/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # White label variables and properties
2
+
3
+ These variables and properties are being retrieved by the [Theme builder](https://design-system.deutschebahn.com/theme-builder/) white-label theme.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/core-foundations",
3
- "version": "3.0.2-copilot2-e7bf98b",
3
+ "version": "3.0.2-copilot4-0defc04",
4
4
  "type": "module",
5
5
  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
6
6
  "repository": {
@@ -12,7 +12,6 @@
12
12
  "types": "./build/index.d.ts",
13
13
  "module": "./build/index.js",
14
14
  "files": [
15
- "agent",
16
15
  "assets",
17
16
  "build"
18
17
  ],
@@ -28,7 +27,6 @@
28
27
  "build:06_ts": "tsc",
29
28
  "clean": "rm --recursive --force build",
30
29
  "copy-build": "npm-run-all copy-build:*",
31
- "copy-build:agent": "cpr agent ../../build-outputs/foundations/agent -o",
32
30
  "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
33
31
  "copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
34
32
  "copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",
@@ -39,6 +37,7 @@
39
37
  "dev": "vite --open",
40
38
  "generate:fonts": "tsx assets/fonts/generate-eu-fonts.ts",
41
39
  "generate:icons": "tsx scripts/local/generate-icon-font.ts",
40
+ "postcopy-prepare:icon-overview": "prettier dev/icons.html --write",
42
41
  "prebuild": "npm-run-all copy-prepare:*",
43
42
  "predev": "npm-run-all copy-prepare:*",
44
43
  "prestart": "npm-run-all copy-prepare:*",
@@ -52,7 +51,7 @@
52
51
  "@playwright/test": "1.54.1",
53
52
  "cpr": "3.0.1",
54
53
  "cssnano": "7.1.0",
55
- "dotenv": "17.2.0",
54
+ "dotenv": "17.2.1",
56
55
  "glob": "11.0.3",
57
56
  "nodemon": "3.1.10",
58
57
  "prettier": "3.6.2",
package/agent/_instructions.md DELETED
@@ -1,15 +0,0 @@
1
- ## CSS
2
-
3
- - If you use CSS follow these rules:
4
- - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/css/Variables.md
5
-
6
- ## SCSS
7
-
8
- - If you use SCSS follow these rules:
9
- - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/scss/Variables.md
10
-
11
- ## Tailwind
12
-
13
- - If you use Tailwind follow these rules:
14
- - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/tailwind/Variables.md
15
- - Always stick with the variables don't use something like `p-4` or `m-[16px]` use `p-fix-xs` or `m-fix-md` instead.
package/agent/css/Variables.md DELETED
@@ -1,130 +0,0 @@
1
- ```css
2
- .my-component {
3
- inline-size: var(--db-sizing-md); /* Use sizing for fixed widths */
4
- block-size: var(--db-sizing-lg); /* Use sizing for fixed heights */
5
- padding: var(--db-spacing-fixed-sm); /* Use fixed spacing for paddings */
6
- margin: var(
7
- --db-spacing-responsive-md
8
- ); /* Use responsive spacing for margins */
9
- border-radius: var(--db-border-radius-md); /* Use border radius */
10
- transition-duration: var(
11
- --db-transition-duration-medium
12
- ); /* Use transition duration */
13
- border-width: var(--db-border-width-md); /* Use border width */
14
- }
15
- ```
16
-
17
- ## CSS Variables List
18
-
19
- Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
20
-
21
- - `--db-sizing-3xs`
22
- - `--db-sizing-2xs`
23
- - `--db-sizing-xs`
24
- - `--db-sizing-sm`
25
- - `--db-sizing-md`
26
- - `--db-sizing-lg`
27
- - `--db-sizing-xl`
28
- - `--db-sizing-2xl`
29
- - `--db-sizing-3xl`
30
-
31
- Use fixed spacings for all kind of distances (margin, padding, ...)
32
-
33
- - `--db-spacing-fixed-3xs`
34
- - `--db-spacing-fixed-2xs`
35
- - `--db-spacing-fixed-xs`
36
- - `--db-spacing-fixed-sm`
37
- - `--db-spacing-fixed-md`
38
- - `--db-spacing-fixed-lg`
39
- - `--db-spacing-fixed-xl`
40
- - `--db-spacing-fixed-2xl`
41
- - `--db-spacing-fixed-3xl`
42
-
43
- The primary use-case for responsive spacings are paddings/gaps in an application e.g. the <main> should have a responsive padding.
44
-
45
- - `--db-spacing-responsive-3xs`
46
- - `--db-spacing-responsive-2xs`
47
- - `--db-spacing-responsive-xs`
48
- - `--db-spacing-responsive-sm`
49
- - `--db-spacing-responsive-md`
50
- - `--db-spacing-responsive-lg`
51
- - `--db-spacing-responsive-xl`
52
- - `--db-spacing-responsive-2xl`
53
- - `--db-spacing-responsive-3xl`
54
-
55
- Elevation
56
-
57
- - `--db-elevation-sm`
58
- - `--db-elevation-md`
59
- - `--db-elevation-lg`
60
-
61
- Border
62
-
63
- - `--db-border-width-3xs`
64
- - `--db-border-width-2xs`
65
- - `--db-border-width-xs`
66
- - `--db-border-width-sm`
67
- - `--db-border-width-md`
68
- - `--db-border-width-lg`
69
- - `--db-border-width-xl`
70
- - `--db-border-width-2xl`
71
- - `--db-border-width-3xl`
72
- - `--db-border-radius-3xs`
73
- - `--db-border-radius-2xs`
74
- - `--db-border-radius-xs`
75
- - `--db-border-radius-sm`
76
- - `--db-border-radius-md`
77
- - `--db-border-radius-lg`
78
- - `--db-border-radius-xl`
79
- - `--db-border-radius-2xl`
80
- - `--db-border-radius-3xl`
81
- - `--db-border-radius-full`
82
-
83
- Opacity
84
-
85
- - `--db-opacity-3xs`
86
- - `--db-opacity-2xs`
87
- - `--db-opacity-xs`
88
- - `--db-opacity-sm`
89
- - `--db-opacity-md`
90
- - `--db-opacity-lg`
91
- - `--db-opacity-xl`
92
- - `--db-opacity-2xl`
93
- - `--db-opacity-3xl`
94
- - `--db-opacity-full`
95
-
96
- Transitions
97
-
98
- - `--db-transition-duration-extra-slow`
99
- - `--db-transition-duration-slow`
100
- - `--db-transition-duration-medium`
101
- - `--db-transition-duration-fast`
102
- - `--db-transition-duration-extra-fast`
103
- - `--db-transition-timing-emotional`
104
- - `--db-transition-timing-functional`
105
- - `--db-transition-timing-show`
106
- - `--db-transition-timing-hide`
107
- - `--db-transition-straight-emotional`
108
- - `--db-transition-straight-functional`
109
- - `--db-transition-straight-show`
110
- - `--db-transition-straight-hide`
111
-
112
- Screen sizes
113
-
114
- - `--db-screen-xs`
115
- - `--db-screen-sm`
116
- - `--db-screen-md`
117
- - `--db-screen-lg`
118
- - `--db-screen-xl`
119
-
120
- Container sizes
121
-
122
- - `--db-container-3xs`
123
- - `--db-container-2xs`
124
- - `--db-container-xs`
125
- - `--db-container-sm`
126
- - `--db-container-md`
127
- - `--db-container-lg`
128
- - `--db-container-xl`
129
- - `--db-container-2xl`
130
- - `--db-container-3xl`
package/agent/scss/Variables.md DELETED
@@ -1,131 +0,0 @@
1
- ```scss
2
- @use "@db-ux/core-foundations/build/styles/variables";
3
-
4
- .my-component {
5
- inline-size: variables.$db-sizing-md; // Use sizing for fixed widths
6
- block-size: variables.$db-sizing-lg; // Use sizing for fixed heights
7
- padding: variables.$db-spacing-fixed-sm; // Use fixed spacing for paddings
8
- margin: variables.$db-spacing-responsive-md; // Use responsive spacing for margins
9
- border-radius: variables.$db-border-radius-md; // Use border radius
10
- transition-duration: variables.$db-transition-duration-medium; // Use transition duration
11
- border-width: variables.$db-border-width-md; // Use border width
12
- }
13
- ```
14
-
15
- ### SCSS Variables List
16
-
17
- Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
18
-
19
- - `$db-sizing-3xs`
20
- - `$db-sizing-2xs`
21
- - `$db-sizing-xs`
22
- - `$db-sizing-sm`
23
- - `$db-sizing-md`
24
- - `$db-sizing-lg`
25
- - `$db-sizing-xl`
26
- - `$db-sizing-2xl`
27
- - `$db-sizing-3xl`
28
-
29
- Use fixed spacings for all kind of distances (margin, padding, ...)
30
-
31
- - `$db-spacing-fixed-3xs`
32
- - `$db-spacing-fixed-2xs`
33
- - `$db-spacing-fixed-xs`
34
- - `$db-spacing-fixed-sm`
35
- - `$db-spacing-fixed-md`
36
- - `$db-spacing-fixed-lg`
37
- - `$db-spacing-fixed-xl`
38
- - `$db-spacing-fixed-2xl`
39
- - `$db-spacing-fixed-3xl`
40
-
41
- The primary use-case for responsive spacings are paddings/gaps in an application e.g. the <main> should have a responsive padding.
42
-
43
- - `$db-spacing-responsive-3xs`
44
- - `$db-spacing-responsive-2xs`
45
- - `$db-spacing-responsive-xs`
46
- - `$db-spacing-responsive-sm`
47
- - `$db-spacing-responsive-md`
48
- - `$db-spacing-responsive-lg`
49
- - `$db-spacing-responsive-xl`
50
- - `$db-spacing-responsive-2xl`
51
- - `$db-spacing-responsive-3xl`
52
-
53
- Use elevation for shadows
54
-
55
- - `$db-elevation-sm`
56
- - `$db-elevation-md`
57
- - `$db-elevation-lg`
58
-
59
- ### Use border widths for borders
60
-
61
- - `$db-border-width-3xs`
62
- - `$db-border-width-2xs`
63
- - `$db-border-width-xs`
64
- - `$db-border-width-sm`
65
- - `$db-border-width-md`
66
- - `$db-border-width-lg`
67
- - `$db-border-width-xl`
68
- - `$db-border-width-2xl`
69
- - `$db-border-width-3xl`
70
-
71
- Use border radius for rounded corners
72
-
73
- - `$db-border-radius-3xs`
74
- - `$db-border-radius-2xs`
75
- - `$db-border-radius-xs`
76
- - `$db-border-radius-sm`
77
- - `$db-border-radius-md`
78
- - `$db-border-radius-lg`
79
- - `$db-border-radius-xl`
80
- - `$db-border-radius-2xl`
81
- - `$db-border-radius-3xl`
82
- - `$db-border-radius-full`
83
-
84
- Use opacity for transparency effects
85
-
86
- - `$db-opacity-3xs`
87
- - `$db-opacity-2xs`
88
- - `$db-opacity-xs`
89
- - `$db-opacity-sm`
90
- - `$db-opacity-md`
91
- - `$db-opacity-lg`
92
- - `$db-opacity-xl`
93
- - `$db-opacity-2xl`
94
- - `$db-opacity-3xl`
95
- - `$db-opacity-full`
96
-
97
- Use transition durations for animations
98
-
99
- - `$db-transition-duration-extra-slow`
100
- - `$db-transition-duration-slow`
101
- - `$db-transition-duration-medium`
102
- - `$db-transition-duration-fast`
103
- - `$db-transition-duration-extra-fast`
104
- - `$db-transition-timing-emotional`
105
- - `$db-transition-timing-functional`
106
- - `$db-transition-timing-show`
107
- - `$db-transition-timing-hide`
108
- - `$db-transition-straight-emotional`
109
- - `$db-transition-straight-functional`
110
- - `$db-transition-straight-show`
111
- - `$db-transition-straight-hide`
112
-
113
- Use screen sizes for responsive design breakpoints
114
-
115
- - `$db-screen-xs`
116
- - `$db-screen-sm`
117
- - `$db-screen-md`
118
- - `$db-screen-lg`
119
- - `$db-screen-xl`
120
-
121
- Use container sizes for fixed containers
122
-
123
- - `$db-container-3xs`
124
- - `$db-container-2xs`
125
- - `$db-container-xs`
126
- - `$db-container-sm`
127
- - `$db-container-md`
128
- - `$db-container-lg`
129
- - `$db-container-xl`
130
- - `$db-container-2xl`
131
- - `$db-container-3xl`
package/agent/tailwind/Variables.md DELETED
@@ -1,75 +0,0 @@
1
- ```html
2
- <div class="flex flex-col gap-md">
3
- <div class="grid grid-cols-2 md:grid-cols-3 gap-xs">
4
- <div class="w-siz-md h-siz-lg p-fix-md m-res-sm border-sm radius-md">
5
- Example
6
- </div>
7
- </div>
8
- </div>
9
- ```
10
-
11
- ## Available Variables
12
-
13
- ```css
14
- --spacing-fix-3xs: var(--db-spacing-fixed-3xs);
15
- --spacing-fix-2xs: var(--db-spacing-fixed-2xs);
16
- --spacing-fix-xs: var(--db-spacing-fixed-xs);
17
- --spacing-fix-sm: var(--db-spacing-fixed-sm);
18
- --spacing-fix-md: var(--db-spacing-fixed-md);
19
- --spacing-fix-lg: var(--db-spacing-fixed-lg);
20
- --spacing-fix-xl: var(--db-spacing-fixed-xl);
21
- --spacing-fix-2xl: var(--db-spacing-fixed-2xl);
22
- --spacing-fix-3xl: var(--db-spacing-fixed-3xl);
23
- --spacing-res-3xs: var(--db-spacing-responsive-3xs);
24
- --spacing-res-2xs: var(--db-spacing-responsive-2xs);
25
- --spacing-res-xs: var(--db-spacing-responsive-xs);
26
- --spacing-res-sm: var(--db-spacing-responsive-sm);
27
- --spacing-res-md: var(--db-spacing-responsive-md);
28
- --spacing-res-lg: var(--db-spacing-responsive-lg);
29
- --spacing-res-xl: var(--db-spacing-responsive-xl);
30
- --spacing-res-2xl: var(--db-spacing-responsive-2xl);
31
- --spacing-res-3xl: var(--db-spacing-responsive-3xl);
32
- --spacing-siz-3xs: var(--db-sizing-3xs);
33
- --spacing-siz-2xs: var(--db-sizing-2xs);
34
- --spacing-siz-xs: var(--db-sizing-xs);
35
- --spacing-siz-sm: var(--db-sizing-sm);
36
- --spacing-siz-md: var(--db-sizing-md);
37
- --spacing-siz-lg: var(--db-sizing-lg);
38
- --spacing-siz-xl: var(--db-sizing-xl);
39
- --spacing-siz-2xl: var(--db-sizing-2xl);
40
- --spacing-siz-3xl: var(--db-sizing-3xl);
41
- --gap-3xs: var(--db-spacing-fixed-3xs);
42
- --gap-2xs: var(--db-spacing-fixed-2xs);
43
- --gap-xs: var(--db-spacing-fixed-xs);
44
- --gap-sm: var(--db-spacing-fixed-sm);
45
- --gap-md: var(--db-spacing-fixed-md);
46
- --gap-lg: var(--db-spacing-fixed-lg);
47
- --gap-xl: var(--db-spacing-fixed-xl);
48
- --gap-2xl: var(--db-spacing-fixed-2xl);
49
- --gap-3xl: var(--db-spacing-fixed-3xl);
50
- --border: var(--db-border-width-3xs);
51
- --border-3xs: var(--db-border-width-3xs);
52
- --border-2xs: var(--db-border-width-2xs);
53
- --border-xs: var(--db-border-width-xs);
54
- --border-sm: var(--db-border-width-sm);
55
- --border-md: var(--db-border-width-md);
56
- --border-lg: var(--db-border-width-lg);
57
- --border-xl: var(--db-border-width-xl);
58
- --border-2xl: var(--db-border-width-2xl);
59
- --border-3xl: var(--db-border-width-3xl);
60
- --radius: var(--db-border-radius-xs);
61
- --radius-3xs: var(--db-border-radius-3xs);
62
- --radius-2xs: var(--db-border-radius-2xs);
63
- --radius-xs: var(--db-border-radius-xs);
64
- --radius-sm: var(--db-border-radius-sm);
65
- --radius-md: var(--db-border-radius-md);
66
- --radius-lg: var(--db-border-radius-lg);
67
- --radius-xl: var(--db-border-radius-xl);
68
- --radius-2xl: var(--db-border-radius-2xl);
69
- --radius-3xl: var(--db-border-radius-3xl);
70
- --radius-full: var(--db-border-radius-full);
71
- --shadow: var(--db-elevation-md);
72
- --shadow-sm: var(--db-elevation-sm);
73
- --shadow-md: var(--db-elevation-md);
74
- --shadow-lg: var(--db-elevation-lg);
75
- ```