@db-ux/core-foundations 3.1.17 → 3.1.18
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/agent/_instructions.md +15 -0
- package/agent/css/Variables.md +130 -0
- package/agent/scss/Variables.md +131 -0
- package/agent/tailwind/Variables.md +75 -0
- package/package.json +4 -2
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
## CSS
|
|
2
|
+
|
|
3
|
+
- If you use CSS, follow these rules:
|
|
4
|
+
- for `variables` like, sizing, spacing, elevation, border or container-size use the file **agent-path**/agent/css/Variables.md
|
|
5
|
+
|
|
6
|
+
## SCSS
|
|
7
|
+
|
|
8
|
+
- If you use SCSS, follow these rules:
|
|
9
|
+
- for `variables` like, sizing, spacing, elevation, border or container-size use the file **agent-path**/agent/scss/Variables.md
|
|
10
|
+
|
|
11
|
+
## Tailwind
|
|
12
|
+
|
|
13
|
+
- If you use Tailwind, follow these rules:
|
|
14
|
+
- for `variables` like, sizing, spacing, elevation, border or container-size use the file **agent-path**/agent/tailwind/Variables.md
|
|
15
|
+
- Always stick to the variables. Don't use values 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 always has 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 types of distances, such as margins and 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
|
+
Responsive spacings are primarily used for paddings and gaps in an application. For example, the <main> HTML element should have 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
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@db-ux/core-foundations",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.18",
|
|
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
|
"CHANGELOG.md",
|
|
16
17
|
"assets",
|
|
17
18
|
"build"
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
"build:06_ts": "tsc",
|
|
29
30
|
"clean": "rm --recursive --force build",
|
|
30
31
|
"copy-build": "npm-run-all copy-build:*",
|
|
32
|
+
"copy-build:agent": "cpr agent ../../build-outputs/foundations/agent --overwrite",
|
|
31
33
|
"copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
|
|
32
34
|
"copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
|
|
33
35
|
"copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",
|
|
@@ -59,7 +61,7 @@
|
|
|
59
61
|
"sass": "1.85.0",
|
|
60
62
|
"tsx": "4.20.6",
|
|
61
63
|
"typescript": "5.8.3",
|
|
62
|
-
"vite": "7.1.
|
|
64
|
+
"vite": "7.1.9"
|
|
63
65
|
},
|
|
64
66
|
"publishConfig": {
|
|
65
67
|
"registry": "https://registry.npmjs.org/",
|