@db-ux/core-foundations 3.0.1 → 3.0.2-copilot2-e7bf98b

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.
@@ -0,0 +1,15 @@
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.
@@ -0,0 +1,130 @@
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`
@@ -0,0 +1,131 @@
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`
@@ -0,0 +1,75 @@
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
+ ```
@@ -1,5 +1,5 @@
1
1
  import { glob } from 'glob';
2
- import { exec } from 'node:child_process';
2
+ import { execFile } from 'node:child_process';
3
3
  import { promisify } from 'node:util';
4
4
 
5
5
  import { dirname } from 'path';
@@ -8,12 +8,16 @@ import { fileURLToPath } from 'url';
8
8
  const __filename = fileURLToPath(import.meta.url);
9
9
  const __dirname = dirname(__filename).replaceAll('\\', '/');
10
10
 
11
- const execAsync = promisify(exec);
11
+ // Security: Using execFile instead of exec to eliminate shell injection risks
12
+ // execFile directly executes the binary without involving a shell
13
+ const execFileAsync = promisify(execFile);
12
14
 
13
15
  const generateFonts = async () => {
14
16
  console.log('Generating EU fonts...');
15
17
  try {
16
- await execAsync('pyftsubset --help');
18
+ // Security: Using array arguments instead of concatenated string
19
+ // This prevents shell interpretation of special characters
20
+ await execFileAsync('pyftsubset', ['--help']);
17
21
  } catch (e) {
18
22
  console.warn(
19
23
  'You need to install pyftsubset. Check packages/foundations/assets/fonts/README.md for more information.'
@@ -22,19 +26,28 @@ const generateFonts = async () => {
22
26
 
23
27
  try {
24
28
  const files = await glob(`${__dirname}/*.ttf`);
25
- const commands = files.map((file) =>
26
- [
27
- 'pyftsubset',
29
+
30
+ for (const file of files) {
31
+ // Security: Validate that the file is within the expected directory
32
+ // and has the expected extension to prevent path traversal attacks
33
+ if (!file.startsWith(__dirname) || !file.endsWith('.ttf')) {
34
+ console.warn(`Skipping potentially unsafe file path: ${file}`);
35
+ continue;
36
+ }
37
+
38
+ // Security: Arguments are passed as separate array elements
39
+ // No shell concatenation means no risk of command injection
40
+ const args = [
28
41
  file,
29
42
  '--layout-features=*',
30
43
  '--flavor=woff2',
31
44
  `--unicodes-file=${__dirname}/unicode-eu.txt`,
32
45
  `--output-file=${file.replace('.ttf', '-EU.woff2')}`
33
- ].join(' ')
34
- );
46
+ ];
35
47
 
36
- for (const command of commands) {
37
- const { stdout, stderr } = await execAsync(command);
48
+ // Security: execFile provides better performance and type safety
49
+ // as it doesn't spawn a shell process
50
+ const { stdout, stderr } = await execFileAsync('pyftsubset', args);
38
51
  if (stdout) console.log(`stdout: ${stdout}`);
39
52
  if (stderr) console.error(`stderr: ${stderr}`);
40
53
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/core-foundations",
3
- "version": "3.0.1",
3
+ "version": "3.0.2-copilot2-e7bf98b",
4
4
  "type": "module",
5
5
  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
6
6
  "repository": {
@@ -12,6 +12,7 @@
12
12
  "types": "./build/index.d.ts",
13
13
  "module": "./build/index.js",
14
14
  "files": [
15
+ "agent",
15
16
  "assets",
16
17
  "build"
17
18
  ],
@@ -27,6 +28,7 @@
27
28
  "build:06_ts": "tsc",
28
29
  "clean": "rm --recursive --force build",
29
30
  "copy-build": "npm-run-all copy-build:*",
31
+ "copy-build:agent": "cpr agent ../../build-outputs/foundations/agent -o",
30
32
  "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
31
33
  "copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
32
34
  "copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",