@synergy-design-system/styles 1.1.0 → 1.3.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 +14 -0
- package/README.md +3 -0
- package/dist/index.css +76 -1
- package/dist/link.css +79 -0
- package/dist/tables.css +1 -1
- package/dist/typography.css +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [@synergy-design-system/styles-v1.3.0](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.2.0...styles/1.3.0) (2024-08-26)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* ✨ link css ([#589](https://github.com/synergy-design-system/synergy-design-system/issues/589)) ([cdf54fc](https://github.com/synergy-design-system/synergy-design-system/commit/cdf54fcb348cc3b5a41993cff530424bdf6b6802))
|
|
7
|
+
|
|
8
|
+
# [@synergy-design-system/styles-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.1.0...styles/1.2.0) (2024-08-23)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* ✨ Upgrade packages to latest versions ([#592](https://github.com/synergy-design-system/synergy-design-system/issues/592)) ([e43c563](https://github.com/synergy-design-system/synergy-design-system/commit/e43c5630b6c43ef855af6815604c7649376104ee)), closes [#2078](https://github.com/synergy-design-system/synergy-design-system/issues/2078) [#2063](https://github.com/synergy-design-system/synergy-design-system/issues/2063) [#2041](https://github.com/synergy-design-system/synergy-design-system/issues/2041) [#2041](https://github.com/synergy-design-system/synergy-design-system/issues/2041) [#2116](https://github.com/synergy-design-system/synergy-design-system/issues/2116) [#2121](https://github.com/synergy-design-system/synergy-design-system/issues/2121) [#1992](https://github.com/synergy-design-system/synergy-design-system/issues/1992) [#2079](https://github.com/synergy-design-system/synergy-design-system/issues/2079) [#2009](https://github.com/synergy-design-system/synergy-design-system/issues/2009) [#1967](https://github.com/synergy-design-system/synergy-design-system/issues/1967) [#1947](https://github.com/synergy-design-system/synergy-design-system/issues/1947) [#1974](https://github.com/synergy-design-system/synergy-design-system/issues/1974) [#1985](https://github.com/synergy-design-system/synergy-design-system/issues/1985) [#2001](https://github.com/synergy-design-system/synergy-design-system/issues/2001)
|
|
14
|
+
|
|
1
15
|
# [@synergy-design-system/styles-v1.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.0.1...styles/1.1.0) (2024-07-11)
|
|
2
16
|
|
|
3
17
|
|
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
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
4
|
|
|
5
|
+
The included styles use CSS features supported by the latest two versions of all major browsers (as defined by browserslist) and is actively linted and tested against those targets.
|
|
6
|
+
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
## 1. Installation
|
|
@@ -73,6 +75,7 @@ import "@synergy-design-system/styles/typography.css";
|
|
|
73
75
|
|
|
74
76
|
<!-- BEGIN INLINE COMMENT -->
|
|
75
77
|
|
|
78
|
+
- link.css
|
|
76
79
|
- tables.css
|
|
77
80
|
- table-cell.css
|
|
78
81
|
- table.css
|
package/dist/index.css
CHANGED
|
@@ -1,7 +1,82 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/styles version 1.0
|
|
2
|
+
* @synergy-design-system/styles version 1.2.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
*/
|
|
5
|
+
/**
|
|
6
|
+
* Link styles
|
|
7
|
+
* @variant {small | medium | large} syn-link The size of the link
|
|
8
|
+
* @boolean { false } syn-link--quiet Applies the quiet link styling
|
|
9
|
+
* @boolean { false } syn-link--disabled Applies the disabled link styling
|
|
10
|
+
*/
|
|
11
|
+
.syn-link {
|
|
12
|
+
/* The size of the icon */
|
|
13
|
+
--syn-link-icon-size: 1em;
|
|
14
|
+
|
|
15
|
+
/* The gap that is used when there are pre or suffix icons */
|
|
16
|
+
--syn-link-icon-gap: 0.25em;
|
|
17
|
+
|
|
18
|
+
/* The font size used for the link */
|
|
19
|
+
--syn-link-font-size: 1em;
|
|
20
|
+
|
|
21
|
+
color: var(--syn-link-color);
|
|
22
|
+
display: inline;
|
|
23
|
+
font-family: var(--syn-font-sans);
|
|
24
|
+
font-size: var(--syn-link-font-size);
|
|
25
|
+
text-decoration: underline;
|
|
26
|
+
}
|
|
27
|
+
.syn-link:has(syn-icon) {
|
|
28
|
+
align-items: center;
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
gap: var(--syn-link-icon-gap);
|
|
31
|
+
}
|
|
32
|
+
.syn-link syn-icon {
|
|
33
|
+
font-size: var(--syn-link-icon-size);
|
|
34
|
+
}
|
|
35
|
+
.syn-link:not(.syn-link--disabled):hover {
|
|
36
|
+
color: var(--syn-link-color-hover);
|
|
37
|
+
}
|
|
38
|
+
.syn-link:not(.syn-link--disabled):active {
|
|
39
|
+
color: var(--syn-link-color-active);
|
|
40
|
+
}
|
|
41
|
+
.syn-link:not(.syn-link--disabled):focus-visible {
|
|
42
|
+
outline: var(--syn-focus-ring);
|
|
43
|
+
outline-offset: var(--syn-focus-ring-offset);
|
|
44
|
+
}
|
|
45
|
+
/* Overrides for smaller links */
|
|
46
|
+
.syn-link--small {
|
|
47
|
+
--syn-link-icon-size: var(--syn-spacing-medium);
|
|
48
|
+
--syn-link-icon-gap: var(--syn-spacing-2x-small);
|
|
49
|
+
--syn-link-font-size: var(--syn-font-size-small);
|
|
50
|
+
}
|
|
51
|
+
/*
|
|
52
|
+
* Overrides for medium links.
|
|
53
|
+
*/
|
|
54
|
+
.syn-link--medium {
|
|
55
|
+
--syn-link-icon-size: var(--syn-spacing-large);
|
|
56
|
+
--syn-link-icon-gap: var(--syn-spacing-x-small);
|
|
57
|
+
--syn-link-font-size: var(--syn-font-size-medium);
|
|
58
|
+
}
|
|
59
|
+
.syn-link--large {
|
|
60
|
+
--syn-link-icon-size: var(--syn-spacing-x-large);
|
|
61
|
+
--syn-link-icon-gap: var(--syn-spacing-small);
|
|
62
|
+
--syn-link-font-size: var(--syn-font-size-large);
|
|
63
|
+
}
|
|
64
|
+
/* Quite Variant of links use other colors */
|
|
65
|
+
.syn-link--quiet:not(.syn-link--disabled) {
|
|
66
|
+
color: var(--syn-link-quiet-color);
|
|
67
|
+
}
|
|
68
|
+
.syn-link--quiet:not(.syn-link--disabled):hover {
|
|
69
|
+
color: var(--syn-link-quiet-color-hover);
|
|
70
|
+
}
|
|
71
|
+
.syn-link--quiet:not(.syn-link--disabled):active {
|
|
72
|
+
color: var(--syn-link-quiet-color-active);
|
|
73
|
+
}
|
|
74
|
+
/* Styling for disabled links */
|
|
75
|
+
.syn-link--disabled:not([href]),
|
|
76
|
+
a.syn-link:not([href]) {
|
|
77
|
+
cursor: not-allowed;
|
|
78
|
+
opacity: var(--syn-input-disabled-opacity);
|
|
79
|
+
}
|
|
5
80
|
/**
|
|
6
81
|
* Core typographic styles
|
|
7
82
|
*/
|
package/dist/link.css
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @synergy-design-system/styles version 1.2.0
|
|
3
|
+
* SICK Global UX Foundation
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Link styles
|
|
7
|
+
* @variant {small | medium | large} syn-link The size of the link
|
|
8
|
+
* @boolean { false } syn-link--quiet Applies the quiet link styling
|
|
9
|
+
* @boolean { false } syn-link--disabled Applies the disabled link styling
|
|
10
|
+
*/
|
|
11
|
+
.syn-link {
|
|
12
|
+
/* The size of the icon */
|
|
13
|
+
--syn-link-icon-size: 1em;
|
|
14
|
+
|
|
15
|
+
/* The gap that is used when there are pre or suffix icons */
|
|
16
|
+
--syn-link-icon-gap: 0.25em;
|
|
17
|
+
|
|
18
|
+
/* The font size used for the link */
|
|
19
|
+
--syn-link-font-size: 1em;
|
|
20
|
+
|
|
21
|
+
color: var(--syn-link-color);
|
|
22
|
+
display: inline;
|
|
23
|
+
font-family: var(--syn-font-sans);
|
|
24
|
+
font-size: var(--syn-link-font-size);
|
|
25
|
+
text-decoration: underline;
|
|
26
|
+
}
|
|
27
|
+
.syn-link:has(syn-icon) {
|
|
28
|
+
align-items: center;
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
gap: var(--syn-link-icon-gap);
|
|
31
|
+
}
|
|
32
|
+
.syn-link syn-icon {
|
|
33
|
+
font-size: var(--syn-link-icon-size);
|
|
34
|
+
}
|
|
35
|
+
.syn-link:not(.syn-link--disabled):hover {
|
|
36
|
+
color: var(--syn-link-color-hover);
|
|
37
|
+
}
|
|
38
|
+
.syn-link:not(.syn-link--disabled):active {
|
|
39
|
+
color: var(--syn-link-color-active);
|
|
40
|
+
}
|
|
41
|
+
.syn-link:not(.syn-link--disabled):focus-visible {
|
|
42
|
+
outline: var(--syn-focus-ring);
|
|
43
|
+
outline-offset: var(--syn-focus-ring-offset);
|
|
44
|
+
}
|
|
45
|
+
/* Overrides for smaller links */
|
|
46
|
+
.syn-link--small {
|
|
47
|
+
--syn-link-icon-size: var(--syn-spacing-medium);
|
|
48
|
+
--syn-link-icon-gap: var(--syn-spacing-2x-small);
|
|
49
|
+
--syn-link-font-size: var(--syn-font-size-small);
|
|
50
|
+
}
|
|
51
|
+
/*
|
|
52
|
+
* Overrides for medium links.
|
|
53
|
+
*/
|
|
54
|
+
.syn-link--medium {
|
|
55
|
+
--syn-link-icon-size: var(--syn-spacing-large);
|
|
56
|
+
--syn-link-icon-gap: var(--syn-spacing-x-small);
|
|
57
|
+
--syn-link-font-size: var(--syn-font-size-medium);
|
|
58
|
+
}
|
|
59
|
+
.syn-link--large {
|
|
60
|
+
--syn-link-icon-size: var(--syn-spacing-x-large);
|
|
61
|
+
--syn-link-icon-gap: var(--syn-spacing-small);
|
|
62
|
+
--syn-link-font-size: var(--syn-font-size-large);
|
|
63
|
+
}
|
|
64
|
+
/* Quite Variant of links use other colors */
|
|
65
|
+
.syn-link--quiet:not(.syn-link--disabled) {
|
|
66
|
+
color: var(--syn-link-quiet-color);
|
|
67
|
+
}
|
|
68
|
+
.syn-link--quiet:not(.syn-link--disabled):hover {
|
|
69
|
+
color: var(--syn-link-quiet-color-hover);
|
|
70
|
+
}
|
|
71
|
+
.syn-link--quiet:not(.syn-link--disabled):active {
|
|
72
|
+
color: var(--syn-link-quiet-color-active);
|
|
73
|
+
}
|
|
74
|
+
/* Styling for disabled links */
|
|
75
|
+
.syn-link--disabled:not([href]),
|
|
76
|
+
a.syn-link:not([href]) {
|
|
77
|
+
cursor: not-allowed;
|
|
78
|
+
opacity: var(--syn-input-disabled-opacity);
|
|
79
|
+
}
|
package/dist/tables.css
CHANGED
package/dist/typography.css
CHANGED
package/package.json
CHANGED
|
@@ -80,28 +80,28 @@
|
|
|
80
80
|
"directory": "packages/styles"
|
|
81
81
|
},
|
|
82
82
|
"type": "module",
|
|
83
|
-
"version": "1.
|
|
83
|
+
"version": "1.3.0",
|
|
84
84
|
"devDependencies": {
|
|
85
85
|
"@semantic-release/changelog": "^6.0.3",
|
|
86
86
|
"@semantic-release/exec": "^6.0.3",
|
|
87
87
|
"@semantic-release/git": "^10.0.1",
|
|
88
88
|
"del": "^7.1.0",
|
|
89
89
|
"eslint": "^8.57.0",
|
|
90
|
-
"globby": "^14.0.
|
|
90
|
+
"globby": "^14.0.2",
|
|
91
91
|
"ora": "^8.0.1",
|
|
92
|
-
"postcss": "^8.4.
|
|
92
|
+
"postcss": "^8.4.41",
|
|
93
93
|
"postcss-cli": "^11.0.0",
|
|
94
94
|
"postcss-header": "^3.0.3",
|
|
95
95
|
"postcss-import": "^16.1.0",
|
|
96
|
-
"prettier": "^3.
|
|
96
|
+
"prettier": "^3.3.3",
|
|
97
97
|
"semantic-release": "^19.0.5",
|
|
98
|
-
"semantic-release-monorepo": "^7.0.
|
|
99
|
-
"stylelint": "^16.
|
|
98
|
+
"semantic-release-monorepo": "^7.0.8",
|
|
99
|
+
"stylelint": "^16.8.2",
|
|
100
100
|
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
101
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.9.0"
|
|
105
105
|
},
|
|
106
106
|
"scripts": {
|
|
107
107
|
"start": "pnpm build",
|