@synergy-design-system/styles 0.1.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.
- package/CHANGELOG.md +0 -0
- package/LICENSE +9 -0
- package/README.md +130 -0
- package/dist/index.css +3 -0
- package/package.json +115 -0
package/CHANGELOG.md
ADDED
|
File without changes
|
package/LICENSE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
The MIT License
|
|
2
|
+
|
|
3
|
+
Copyright 2023 SICK AG
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# @synergy-design-system/styles
|
|
2
|
+
|
|
3
|
+
This package provides easy to use standalone helper classes based on the [Synergy Design Tokens](https://synergy-design-system.github.io/?path=/docs/packages-tokens--docs).
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1. Installation
|
|
8
|
+
|
|
9
|
+
Please make sure to install the package as a dependency:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install --save @synergy-design-system/styles
|
|
13
|
+
|
|
14
|
+
# Install the required design tokens
|
|
15
|
+
# (only needed if you do not install peerDeps automatically)
|
|
16
|
+
npm install --save @synergy-design-system/tokens
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 2. Loading the provided stylesheets
|
|
22
|
+
|
|
23
|
+
### 2.1 Loading all styles (Recommended)
|
|
24
|
+
|
|
25
|
+
To load all provided css classes at once, just include the default export into your application.
|
|
26
|
+
It contains all styles found in the `src` directory.
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<!DOCTYPE html>
|
|
30
|
+
<head>
|
|
31
|
+
<link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/index.css" />
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
We also provide a default export that points to the created `dist/index.css` file.
|
|
39
|
+
This will be picked up and served when using a bundler (e.g. webpack or vite).
|
|
40
|
+
For this to work, import the module directly in your project like this.
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
import "@synergy-design-system/styles";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
### 2.2 Loading single modules
|
|
49
|
+
|
|
50
|
+
It is also possible to load only parts of the provided functionality.
|
|
51
|
+
This can be archived in the following way:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<!-- Loading typography only -->
|
|
55
|
+
<!DOCTYPE html>
|
|
56
|
+
<head>
|
|
57
|
+
<link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/typography.css" />
|
|
58
|
+
</head>
|
|
59
|
+
<body>
|
|
60
|
+
</body>
|
|
61
|
+
</html>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
// Loading typography only
|
|
66
|
+
import "@synergy-design-system/styles/typography.css";
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## 3. Available modules
|
|
72
|
+
|
|
73
|
+
<!-- BEGIN INLINE COMMENT -->
|
|
74
|
+
|
|
75
|
+
### 3.1 - typography
|
|
76
|
+
|
|
77
|
+
#### Usage
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<link
|
|
81
|
+
rel="stylesheet"
|
|
82
|
+
href="/node_modules/@synergy-design-system/styles/dist/typography.css"
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
```javascript
|
|
87
|
+
import "@synergy-design-system/styles/typography.css";
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
#### Submodules
|
|
91
|
+
|
|
92
|
+
- body
|
|
93
|
+
- heading
|
|
94
|
+
- weight
|
|
95
|
+
|
|
96
|
+
<!-- END INLINE COMMENT -->
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Documentation
|
|
101
|
+
|
|
102
|
+
### Building the styles
|
|
103
|
+
|
|
104
|
+
This package makes use of `postcss` for creating a unified bundle for easier consumption in applications. Please run `pnpm build` in the root of this package to recreate the bundle file `dist/index.css`.
|
|
105
|
+
|
|
106
|
+
### How it works
|
|
107
|
+
|
|
108
|
+
1. The build will walk through the `src` directory and process all files named `index.css`. It automatically moves those files to the root `dist` directory, with the name of the folder it resides in. `src/typography/index.css` will automatically become `dist/typography.css`.
|
|
109
|
+
2. All css files **not** named `index.css` will get copied over to the `dist` directory to make them available in the bundle. `src/typography/body.css` will get copied to `dist/typography/body.css`, however `dist/typography/index.css` will get renamed to `dist/typography.css` for easier inclusion.
|
|
110
|
+
|
|
111
|
+
### Creating new modules
|
|
112
|
+
|
|
113
|
+
1. Create a new folder `src/[MODULE_NAME]`.
|
|
114
|
+
2. Create a new file `src/[MODULE_NAME]/index.css`.
|
|
115
|
+
3. Add CSS statements to your liking. **Hint**: You may also split your code into multiple css files residing in the `src/[MODULE_NAME]` folder. Make sure to **import them into your `src/[MODULE_NAME]/index.css` file** to make them part of the build.
|
|
116
|
+
4. Add js doc comments to your code to create controls for storybook automatically. This can be done by creating comments, as seen below.
|
|
117
|
+
5. Run `pnpm build`. You should now see the a new file `dist/[MODULE_NAME].css` that holds all your previous code, as well as your created submodules (if you have splitted your code into multiple files).
|
|
118
|
+
|
|
119
|
+
#### Bonus: Documenting your module with css comments
|
|
120
|
+
|
|
121
|
+
When adding comments to your modules, please add a list of all variants of your module to your css file. Comments like this will take care that storybooks documentation is automatically updated:
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
/**
|
|
125
|
+
* The "variant" syn-fieldset takes care that two classes will exist in documentation:
|
|
126
|
+
* - syn-fieldset-small and
|
|
127
|
+
* - syn-fieldset-large
|
|
128
|
+
* @variant {small | large } syn-fieldset
|
|
129
|
+
*/
|
|
130
|
+
```
|
package/dist/index.css
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
{
|
|
2
|
+
"author": {
|
|
3
|
+
"name": "SICK Global UX Foundation",
|
|
4
|
+
"url": "https://www.sick.com"
|
|
5
|
+
},
|
|
6
|
+
"description": "Utility classes and helpers for applications using the Synergy Design System",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./dist/index.css",
|
|
9
|
+
"./package.json": "./package.json",
|
|
10
|
+
"./*.css": "./dist/*.css"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"dist",
|
|
14
|
+
"CHANGELOG.md",
|
|
15
|
+
"README.md"
|
|
16
|
+
],
|
|
17
|
+
"homepage": "https://synergy-design-system.github.io",
|
|
18
|
+
"keywords": [
|
|
19
|
+
"SDS",
|
|
20
|
+
"SICK",
|
|
21
|
+
"Synergy Design System",
|
|
22
|
+
"CSS Utility Classes"
|
|
23
|
+
],
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"name": "@synergy-design-system/styles",
|
|
26
|
+
"release": {
|
|
27
|
+
"branches": [
|
|
28
|
+
"main",
|
|
29
|
+
{
|
|
30
|
+
"name": "beta",
|
|
31
|
+
"prerelease": true
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "alpha",
|
|
35
|
+
"prerelease": true
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"plugins": [
|
|
39
|
+
"@semantic-release/commit-analyzer",
|
|
40
|
+
"@semantic-release/release-notes-generator",
|
|
41
|
+
[
|
|
42
|
+
"@semantic-release/changelog",
|
|
43
|
+
{
|
|
44
|
+
"changelogFile": "CHANGELOG.md"
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
[
|
|
48
|
+
"@semantic-release/exec",
|
|
49
|
+
{
|
|
50
|
+
"prepareCmd": "pnpm build"
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
[
|
|
54
|
+
"@semantic-release/npm",
|
|
55
|
+
{
|
|
56
|
+
"npmPublish": false
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
[
|
|
60
|
+
"@semantic-release/git",
|
|
61
|
+
{
|
|
62
|
+
"message": "chore(release/styles): ${nextRelease.version} [skip actions]\n\n${nextRelease.notes}",
|
|
63
|
+
"assets": [
|
|
64
|
+
"CHANGELOG.md",
|
|
65
|
+
"package.json"
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
[
|
|
70
|
+
"@semantic-release/github",
|
|
71
|
+
{
|
|
72
|
+
"successComment": false
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
"repository": {
|
|
78
|
+
"type": "git",
|
|
79
|
+
"url": "https://github.com/synergy-design-system/synergy-design-system.git",
|
|
80
|
+
"directory": "packages/styles"
|
|
81
|
+
},
|
|
82
|
+
"type": "module",
|
|
83
|
+
"version": "0.1.0",
|
|
84
|
+
"devDependencies": {
|
|
85
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
86
|
+
"@semantic-release/exec": "^6.0.3",
|
|
87
|
+
"@semantic-release/git": "^10.0.1",
|
|
88
|
+
"del": "^7.1.0",
|
|
89
|
+
"eslint": "^8.57.0",
|
|
90
|
+
"globby": "^14.0.1",
|
|
91
|
+
"ora": "^8.0.1",
|
|
92
|
+
"postcss": "^8.4.38",
|
|
93
|
+
"postcss-cli": "^11.0.0",
|
|
94
|
+
"postcss-header": "^3.0.3",
|
|
95
|
+
"postcss-import": "^16.1.0",
|
|
96
|
+
"prettier": "^3.2.5",
|
|
97
|
+
"semantic-release": "^19.0.5",
|
|
98
|
+
"semantic-release-monorepo": "^7.0.5",
|
|
99
|
+
"stylelint": "^16.5.0",
|
|
100
|
+
"@synergy-design-system/stylelint-config-syn": "^0.1.0",
|
|
101
|
+
"@synergy-design-system/eslint-config-syn": "^0.1.0"
|
|
102
|
+
},
|
|
103
|
+
"peerDependencies": {
|
|
104
|
+
"@synergy-design-system/tokens": "2.0.0"
|
|
105
|
+
},
|
|
106
|
+
"scripts": {
|
|
107
|
+
"start": "pnpm build",
|
|
108
|
+
"build": "node build/index.js",
|
|
109
|
+
"lint:css": "stylelint \"src/**/*.css\"",
|
|
110
|
+
"lint:js": "eslint .",
|
|
111
|
+
"lint": "pnpm run /^lint:.*/",
|
|
112
|
+
"release": "semantic-release --tagFormat 'styles/${version}' -e semantic-release-monorepo",
|
|
113
|
+
"release.dry": "semantic-release --dry-run --tagFormat 'styles/${version}' -e semantic-release-monorepo"
|
|
114
|
+
}
|
|
115
|
+
}
|