@synergy-design-system/styles 1.2.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +1 -0
  3. package/dist/index.css +76 -1
  4. package/dist/link.css +79 -0
  5. package/dist/tables.css +1 -1
  6. package/dist/typography.css +1 -1
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
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
+
1
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)
2
9
 
3
10
 
package/README.md CHANGED
@@ -75,6 +75,7 @@ import "@synergy-design-system/styles/typography.css";
75
75
 
76
76
  <!-- BEGIN INLINE COMMENT -->
77
77
 
78
+ - link.css
78
79
  - tables.css
79
80
  - table-cell.css
80
81
  - table.css
package/dist/index.css CHANGED
@@ -1,7 +1,82 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.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
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.1.0
2
+ * @synergy-design-system/styles version 1.2.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/dist/typography.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.1.0
2
+ * @synergy-design-system/styles version 1.2.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/package.json CHANGED
@@ -80,7 +80,7 @@
80
80
  "directory": "packages/styles"
81
81
  },
82
82
  "type": "module",
83
- "version": "1.2.0",
83
+ "version": "1.3.0",
84
84
  "devDependencies": {
85
85
  "@semantic-release/changelog": "^6.0.3",
86
86
  "@semantic-release/exec": "^6.0.3",
@@ -101,7 +101,7 @@
101
101
  "@synergy-design-system/stylelint-config-syn": "^0.1.0"
102
102
  },
103
103
  "peerDependencies": {
104
- "@synergy-design-system/tokens": "^2.8.0"
104
+ "@synergy-design-system/tokens": "^2.9.0"
105
105
  },
106
106
  "scripts": {
107
107
  "start": "pnpm build",