@synergy-design-system/styles 0.1.0 → 1.0.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 +6 -0
- package/README.md +12 -24
- package/dist/index.css +50 -1
- package/dist/typography/body.css +19 -0
- package/dist/typography/heading.css +19 -0
- package/dist/typography/weight.css +16 -0
- package/dist/typography.css +52 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
# @synergy-design-system/styles-v1.0.0 (2024-06-18)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* ✨ Styles Package ([#495](https://github.com/synergy-design-system/synergy-design-system/issues/495)) ([5e7b3dc](https://github.com/synergy-design-system/synergy-design-system/commit/5e7b3dc54bc9d94060fafc8119648e9e01bd07b7))
|
package/README.md
CHANGED
|
@@ -47,13 +47,14 @@ import "@synergy-design-system/styles";
|
|
|
47
47
|
|
|
48
48
|
### 2.2 Loading single modules
|
|
49
49
|
|
|
50
|
-
It is also possible to load only parts of the provided
|
|
51
|
-
|
|
50
|
+
It is also possible to load only parts of the provided css files.
|
|
51
|
+
|
|
52
|
+
> For a list of available modules, please have a look at the available modules section below.
|
|
52
53
|
|
|
53
54
|
```html
|
|
54
|
-
<!-- Loading typography only -->
|
|
55
55
|
<!DOCTYPE html>
|
|
56
56
|
<head>
|
|
57
|
+
<!-- Loading typography only -->
|
|
57
58
|
<link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/typography.css" />
|
|
58
59
|
</head>
|
|
59
60
|
<body>
|
|
@@ -72,32 +73,16 @@ import "@synergy-design-system/styles/typography.css";
|
|
|
72
73
|
|
|
73
74
|
<!-- BEGIN INLINE COMMENT -->
|
|
74
75
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
|
76
|
+
- typography.css
|
|
77
|
+
- body.css
|
|
78
|
+
- heading.css
|
|
79
|
+
- weight.css
|
|
95
80
|
|
|
96
81
|
<!-- END INLINE COMMENT -->
|
|
97
82
|
|
|
98
83
|
---
|
|
99
84
|
|
|
100
|
-
##
|
|
85
|
+
## Development
|
|
101
86
|
|
|
102
87
|
### Building the styles
|
|
103
88
|
|
|
@@ -126,5 +111,8 @@ When adding comments to your modules, please add a list of all variants of your
|
|
|
126
111
|
* - syn-fieldset-small and
|
|
127
112
|
* - syn-fieldset-large
|
|
128
113
|
* @variant {small | large } syn-fieldset
|
|
114
|
+
*
|
|
115
|
+
* @variant syn-boolean-value This value will also be available as a class.
|
|
116
|
+
* However, it will display as a boolean value in storybook
|
|
129
117
|
*/
|
|
130
118
|
```
|
package/dist/index.css
CHANGED
|
@@ -1,3 +1,52 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* @synergy-design-system/styles version 0.1.0
|
|
3
|
+
* SICK Global UX Foundation
|
|
3
4
|
*/
|
|
5
|
+
/**
|
|
6
|
+
* Core typographic styles
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Typographic text classes
|
|
10
|
+
* @variant {x-small | small | medium | large} syn-body The font size of the body text
|
|
11
|
+
*/
|
|
12
|
+
.syn-body--x-small {
|
|
13
|
+
font: var(--syn-body-x-small-regular);
|
|
14
|
+
}
|
|
15
|
+
.syn-body--small {
|
|
16
|
+
font: var(--syn-body-small-regular);
|
|
17
|
+
}
|
|
18
|
+
.syn-body--medium {
|
|
19
|
+
font: var(--syn-body-medium-regular);
|
|
20
|
+
}
|
|
21
|
+
.syn-body--large {
|
|
22
|
+
font: var(--syn-body-large-regular);
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Typographic headline classes
|
|
26
|
+
* @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
|
|
27
|
+
*/
|
|
28
|
+
.syn-heading--large {
|
|
29
|
+
font: var(--syn-heading-large);
|
|
30
|
+
}
|
|
31
|
+
.syn-heading--x-large {
|
|
32
|
+
font: var(--syn-heading-x-large);
|
|
33
|
+
}
|
|
34
|
+
.syn-heading--2x-large {
|
|
35
|
+
font: var(--syn-heading-2x-large);
|
|
36
|
+
}
|
|
37
|
+
.syn-heading--3x-large {
|
|
38
|
+
font: var(--syn-heading-3x-large);
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Typographic weight classes
|
|
42
|
+
* @variant {normal | semibold | bold} syn-weight The font weight to apply
|
|
43
|
+
*/
|
|
44
|
+
.syn-weight--normal {
|
|
45
|
+
font-weight: var(--syn-font-weight-normal);
|
|
46
|
+
}
|
|
47
|
+
.syn-weight--semibold {
|
|
48
|
+
font-weight: var(--syn-font-weight-semibold);
|
|
49
|
+
}
|
|
50
|
+
.syn-weight--bold {
|
|
51
|
+
font-weight: var(--syn-font-weight-bold);
|
|
52
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typographic text classes
|
|
3
|
+
* @variant {x-small | small | medium | large} syn-body The font size of the body text
|
|
4
|
+
*/
|
|
5
|
+
.syn-body--x-small {
|
|
6
|
+
font: var(--syn-body-x-small-regular);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.syn-body--small {
|
|
10
|
+
font: var(--syn-body-small-regular);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.syn-body--medium {
|
|
14
|
+
font: var(--syn-body-medium-regular);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.syn-body--large {
|
|
18
|
+
font: var(--syn-body-large-regular);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typographic headline classes
|
|
3
|
+
* @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
|
|
4
|
+
*/
|
|
5
|
+
.syn-heading--large {
|
|
6
|
+
font: var(--syn-heading-large);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.syn-heading--x-large {
|
|
10
|
+
font: var(--syn-heading-x-large);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.syn-heading--2x-large {
|
|
14
|
+
font: var(--syn-heading-2x-large);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.syn-heading--3x-large {
|
|
18
|
+
font: var(--syn-heading-3x-large);
|
|
19
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typographic weight classes
|
|
3
|
+
* @variant {normal | semibold | bold} syn-weight The font weight to apply
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.syn-weight--normal {
|
|
7
|
+
font-weight: var(--syn-font-weight-normal);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.syn-weight--semibold {
|
|
11
|
+
font-weight: var(--syn-font-weight-semibold);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.syn-weight--bold {
|
|
15
|
+
font-weight: var(--syn-font-weight-bold);
|
|
16
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @synergy-design-system/styles version 0.1.0
|
|
3
|
+
* SICK Global UX Foundation
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Core typographic styles
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Typographic text classes
|
|
10
|
+
* @variant {x-small | small | medium | large} syn-body The font size of the body text
|
|
11
|
+
*/
|
|
12
|
+
.syn-body--x-small {
|
|
13
|
+
font: var(--syn-body-x-small-regular);
|
|
14
|
+
}
|
|
15
|
+
.syn-body--small {
|
|
16
|
+
font: var(--syn-body-small-regular);
|
|
17
|
+
}
|
|
18
|
+
.syn-body--medium {
|
|
19
|
+
font: var(--syn-body-medium-regular);
|
|
20
|
+
}
|
|
21
|
+
.syn-body--large {
|
|
22
|
+
font: var(--syn-body-large-regular);
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Typographic headline classes
|
|
26
|
+
* @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
|
|
27
|
+
*/
|
|
28
|
+
.syn-heading--large {
|
|
29
|
+
font: var(--syn-heading-large);
|
|
30
|
+
}
|
|
31
|
+
.syn-heading--x-large {
|
|
32
|
+
font: var(--syn-heading-x-large);
|
|
33
|
+
}
|
|
34
|
+
.syn-heading--2x-large {
|
|
35
|
+
font: var(--syn-heading-2x-large);
|
|
36
|
+
}
|
|
37
|
+
.syn-heading--3x-large {
|
|
38
|
+
font: var(--syn-heading-3x-large);
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Typographic weight classes
|
|
42
|
+
* @variant {normal | semibold | bold} syn-weight The font weight to apply
|
|
43
|
+
*/
|
|
44
|
+
.syn-weight--normal {
|
|
45
|
+
font-weight: var(--syn-font-weight-normal);
|
|
46
|
+
}
|
|
47
|
+
.syn-weight--semibold {
|
|
48
|
+
font-weight: var(--syn-font-weight-semibold);
|
|
49
|
+
}
|
|
50
|
+
.syn-weight--bold {
|
|
51
|
+
font-weight: var(--syn-font-weight-bold);
|
|
52
|
+
}
|
package/package.json
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"directory": "packages/styles"
|
|
81
81
|
},
|
|
82
82
|
"type": "module",
|
|
83
|
-
"version": "
|
|
83
|
+
"version": "1.0.0",
|
|
84
84
|
"devDependencies": {
|
|
85
85
|
"@semantic-release/changelog": "^6.0.3",
|
|
86
86
|
"@semantic-release/exec": "^6.0.3",
|
|
@@ -97,11 +97,11 @@
|
|
|
97
97
|
"semantic-release": "^19.0.5",
|
|
98
98
|
"semantic-release-monorepo": "^7.0.5",
|
|
99
99
|
"stylelint": "^16.5.0",
|
|
100
|
-
"@synergy-design-system/
|
|
101
|
-
"@synergy-design-system/
|
|
100
|
+
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
101
|
+
"@synergy-design-system/stylelint-config-syn": "^0.1.0"
|
|
102
102
|
},
|
|
103
103
|
"peerDependencies": {
|
|
104
|
-
"@synergy-design-system/tokens": "2.
|
|
104
|
+
"@synergy-design-system/tokens": "2.2.0"
|
|
105
105
|
},
|
|
106
106
|
"scripts": {
|
|
107
107
|
"start": "pnpm build",
|