@synergy-design-system/styles 1.0.0 → 1.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +13 -3
  3. package/dist/index.css +140 -1
  4. package/dist/tables/table-cell.css +137 -0
  5. package/dist/tables/table.css +16 -0
  6. package/dist/tables.css +143 -0
  7. package/dist/typography.css +1 -1
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@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
+
3
+
4
+ ### Features
5
+
6
+ * ✨ add table stylings ([#522](https://github.com/synergy-design-system/synergy-design-system/issues/522)) ([18a030b](https://github.com/synergy-design-system/synergy-design-system/commit/18a030be92344a9f0d038e5518c8347f0fbebb4e))
7
+
8
+ # [@synergy-design-system/styles-v1.0.1](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.0.0...styles/1.0.1) (2024-07-08)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * 🤔 Styles package uses fixed peerDependency for tokens ([#541](https://github.com/synergy-design-system/synergy-design-system/issues/541)) ([1877291](https://github.com/synergy-design-system/synergy-design-system/commit/1877291490806ff83fb1cca56d8b06a5a831f4e9))
14
+
1
15
  # @synergy-design-system/styles-v1.0.0 (2024-06-18)
2
16
 
3
17
 
package/README.md CHANGED
@@ -73,6 +73,9 @@ import "@synergy-design-system/styles/typography.css";
73
73
 
74
74
  <!-- BEGIN INLINE COMMENT -->
75
75
 
76
+ - tables.css
77
+ - table-cell.css
78
+ - table.css
76
79
  - typography.css
77
80
  - body.css
78
81
  - heading.css
@@ -107,12 +110,19 @@ When adding comments to your modules, please add a list of all variants of your
107
110
 
108
111
  ```css
109
112
  /**
110
- * The "variant" syn-fieldset takes care that two classes will exist in documentation:
113
+ * The "variant" syn-fieldset takes care that two classes will exist in documentation. The first variant value will be the selected one:
111
114
  * - syn-fieldset-small and
112
115
  * - syn-fieldset-large
113
116
  * @variant {small | large } syn-fieldset
114
117
  *
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
118
+ * The "variant" syn-shadow takes care that 4 classes will exist in documentation. There will be no default value selected via the NO_DEFAULT option:
119
+ * @variant { NO_DEFAULT | bottom | top | start | end } syn-shadow
120
+ *
121
+ * The "boolean" syn-boolean-false will display as a boolean value in storybook with 'false' as default value
122
+ * @variant syn-boolean-false This value will also be available as a class.
123
+ *
124
+ * The "boolean" syn-boolean-true will display as a boolean value in storybook with 'true' as default value
125
+ * @boolean { true } syn-boolean-true This value will also be available as a class.
126
+ *
117
127
  */
118
128
  ```
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 0.1.0
2
+ * @synergy-design-system/styles version 1.0.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
@@ -50,3 +50,142 @@
50
50
  .syn-weight--bold {
51
51
  font-weight: var(--syn-font-weight-bold);
52
52
  }
53
+ /**
54
+ * Table / table cell styles
55
+ */
56
+ /**
57
+ * Table classes
58
+ * @boolean { false } syn-table Applies the styling to a table element
59
+ * @boolean { true } syn-table--default Applies all default table stylings to a table and its children
60
+ * @boolean { false } syn-table--alternating Applies all alternate table stylings to a table and its children
61
+ * @boolean { false } syn-table--border Applies all border table stylings to a table and its children
62
+ */
63
+ .syn-table,
64
+ .syn-table--default,
65
+ .syn-table--alternating,
66
+ .syn-table--border {
67
+ all: unset;
68
+ border-collapse: collapse;
69
+ border-spacing: var(--syn-border-width-none);
70
+ display: table;
71
+ }
72
+ /**
73
+ * Table cell classes
74
+ *
75
+ * @boolean { true } syn-table-cell Applies the table cell styling
76
+ * @boolean syn-table-cell--alternating Applies an alternating style to help separate rows visually
77
+ * @boolean syn-table-cell--border-start Applies a border to the left of the table cell
78
+ * @boolean syn-table-cell--border-end Applies a border to the right of the table cell
79
+ * @boolean syn-table-cell--border-top Applies a border to the top of the table cell
80
+ * @boolean syn-table-cell--border-bottom Applies a border to the bottom of the table cell
81
+ * @boolean syn-table-cell--header Applies the table cell header styling
82
+ * @variant { NO_DEFAULT | bottom | top | start | end } syn-table-cell--shadow Applies the selected shadow to the table cell
83
+ * @boolean syn-table-cell--shadow-active Displays the table shadow
84
+ */
85
+ .syn-table-cell,
86
+ .syn-table--default td,
87
+ .syn-table--alternating td,
88
+ .syn-table--border td {
89
+ background-color: var(--syn-color-neutral-0);
90
+ color: var(--syn-typography-color-text);
91
+ font: var(--syn-body-small-regular);
92
+ height: var(--syn-spacing-large);
93
+ padding: var(--syn-spacing-small) var(--syn-spacing-medium);
94
+ text-align: start;
95
+ vertical-align: top;
96
+ }
97
+ .syn-table-cell--alternating,
98
+ .syn-table--alternating tr:nth-child(even) > td {
99
+ background-color: var(--syn-color-neutral-50);
100
+ }
101
+ /* Border */
102
+ .syn-table-cell--border-start {
103
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
104
+ }
105
+ .syn-table-cell--border-end,
106
+ .syn-table--border tr > td:not(:last-child) {
107
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
108
+ }
109
+ .syn-table-cell--border-top {
110
+ border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
111
+ }
112
+ .syn-table-cell--border-bottom,
113
+ .syn-table--border tr:not(:last-child) > td {
114
+ border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
115
+ }
116
+ /* Header */
117
+ .syn-table-cell--header,
118
+ .syn-table--default th,
119
+ .syn-table--alternating th,
120
+ .syn-table--border th {
121
+ background-color: var(--syn-color-neutral-200);
122
+ color: var(--syn-typography-color-text);
123
+ font: var(--syn-body-small-semibold);
124
+ height: var(--syn-spacing-large);
125
+ padding: var(--syn-spacing-small) var(--syn-spacing-medium);
126
+ text-align: start;
127
+ vertical-align: top;
128
+ }
129
+ /* Shadow */
130
+ .syn-table-cell--shadow-bottom::after,
131
+ .syn-table-cell--shadow-top::after,
132
+ .syn-table-cell--shadow-start::after,
133
+ .syn-table-cell--shadow-end::after {
134
+ /* Fallback for no color-mix support */
135
+ --shadow-start: rgb(49 55 58 / 0%) ;
136
+ --shadow-end: rgb(49 55 58 / 15%);
137
+
138
+ content: '';
139
+ opacity: 0;
140
+ pointer-events: none;
141
+ position: absolute;
142
+ transition-duration: 0.25s;
143
+ transition-property: opacity;
144
+ transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
145
+ }
146
+ /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
147
+ @supports (background: color-mix(in srgb, grey 0%, transparent)) {
148
+ .syn-table-cell--shadow-bottom::after,
149
+ .syn-table-cell--shadow-top::after,
150
+ .syn-table-cell--shadow-start::after,
151
+ .syn-table-cell--shadow-end::after {
152
+ --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
153
+ --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
154
+ }
155
+ }
156
+ .syn-table-cell--shadow-bottom::after,
157
+ .syn-table-cell--shadow-top::after {
158
+ height: var(--syn-spacing-x-small);
159
+ left: 0;
160
+ right: 0;
161
+ }
162
+ .syn-table-cell--shadow-start::after,
163
+ .syn-table-cell--shadow-end::after {
164
+ bottom: 0;
165
+ top: 0;
166
+ width: var(--syn-spacing-x-small);
167
+ }
168
+ .syn-table-cell--shadow-bottom::after {
169
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
170
+ bottom: calc(var(--syn-spacing-x-small) * -1);
171
+ }
172
+ .syn-table-cell--shadow-top::after {
173
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
174
+ top: calc(var(--syn-spacing-x-small) * -1);
175
+ }
176
+ .syn-table-cell--shadow-start::after,
177
+ :dir(rtl) .syn-table-cell--shadow-end::after {
178
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
179
+ left: calc(var(--syn-spacing-x-small) * -1);
180
+ right: unset;
181
+ }
182
+ /* stylelint-disable-next-line no-descending-specificity */
183
+ .syn-table-cell--shadow-end::after,
184
+ :dir(rtl) .syn-table-cell--shadow-start::after {
185
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
186
+ left: unset;
187
+ right: calc(var(--syn-spacing-x-small) * -1);
188
+ }
189
+ .syn-table-cell--shadow-active::after {
190
+ opacity: 1;
191
+ }
package/dist/tables/table-cell.css ADDED
@@ -0,0 +1,137 @@
1
+ /**
2
+ * Table cell classes
3
+ *
4
+ * @boolean { true } syn-table-cell Applies the table cell styling
5
+ * @boolean syn-table-cell--alternating Applies an alternating style to help separate rows visually
6
+ * @boolean syn-table-cell--border-start Applies a border to the left of the table cell
7
+ * @boolean syn-table-cell--border-end Applies a border to the right of the table cell
8
+ * @boolean syn-table-cell--border-top Applies a border to the top of the table cell
9
+ * @boolean syn-table-cell--border-bottom Applies a border to the bottom of the table cell
10
+ * @boolean syn-table-cell--header Applies the table cell header styling
11
+ * @variant { NO_DEFAULT | bottom | top | start | end } syn-table-cell--shadow Applies the selected shadow to the table cell
12
+ * @boolean syn-table-cell--shadow-active Displays the table shadow
13
+ */
14
+
15
+ .syn-table-cell,
16
+ .syn-table--default td,
17
+ .syn-table--alternating td,
18
+ .syn-table--border td {
19
+ background-color: var(--syn-color-neutral-0);
20
+ color: var(--syn-typography-color-text);
21
+ font: var(--syn-body-small-regular);
22
+ height: var(--syn-spacing-large);
23
+ padding: var(--syn-spacing-small) var(--syn-spacing-medium);
24
+ text-align: start;
25
+ vertical-align: top;
26
+ }
27
+
28
+ .syn-table-cell--alternating,
29
+ .syn-table--alternating tr:nth-child(even) > td {
30
+ background-color: var(--syn-color-neutral-50);
31
+ }
32
+
33
+ /* Border */
34
+ .syn-table-cell--border-start {
35
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
36
+ }
37
+
38
+ .syn-table-cell--border-end,
39
+ .syn-table--border tr > td:not(:last-child) {
40
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
41
+ }
42
+
43
+ .syn-table-cell--border-top {
44
+ border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
45
+ }
46
+
47
+ .syn-table-cell--border-bottom,
48
+ .syn-table--border tr:not(:last-child) > td {
49
+ border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
50
+ }
51
+
52
+
53
+ /* Header */
54
+ .syn-table-cell--header,
55
+ .syn-table--default th,
56
+ .syn-table--alternating th,
57
+ .syn-table--border th {
58
+ background-color: var(--syn-color-neutral-200);
59
+ color: var(--syn-typography-color-text);
60
+ font: var(--syn-body-small-semibold);
61
+ height: var(--syn-spacing-large);
62
+ padding: var(--syn-spacing-small) var(--syn-spacing-medium);
63
+ text-align: start;
64
+ vertical-align: top;
65
+ }
66
+
67
+ /* Shadow */
68
+ .syn-table-cell--shadow-bottom::after,
69
+ .syn-table-cell--shadow-top::after,
70
+ .syn-table-cell--shadow-start::after,
71
+ .syn-table-cell--shadow-end::after {
72
+ /* Fallback for no color-mix support */
73
+ --shadow-start: rgb(49 55 58 / 0%) ;
74
+ --shadow-end: rgb(49 55 58 / 15%);
75
+
76
+ content: '';
77
+ opacity: 0;
78
+ pointer-events: none;
79
+ position: absolute;
80
+ transition-duration: 0.25s;
81
+ transition-property: opacity;
82
+ transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
83
+ }
84
+
85
+ /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
86
+ @supports (background: color-mix(in srgb, grey 0%, transparent)) {
87
+ .syn-table-cell--shadow-bottom::after,
88
+ .syn-table-cell--shadow-top::after,
89
+ .syn-table-cell--shadow-start::after,
90
+ .syn-table-cell--shadow-end::after {
91
+ --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
92
+ --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
93
+ }
94
+ }
95
+
96
+ .syn-table-cell--shadow-bottom::after,
97
+ .syn-table-cell--shadow-top::after {
98
+ height: var(--syn-spacing-x-small);
99
+ left: 0;
100
+ right: 0;
101
+ }
102
+
103
+ .syn-table-cell--shadow-start::after,
104
+ .syn-table-cell--shadow-end::after {
105
+ bottom: 0;
106
+ top: 0;
107
+ width: var(--syn-spacing-x-small);
108
+ }
109
+
110
+ .syn-table-cell--shadow-bottom::after {
111
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
112
+ bottom: calc(var(--syn-spacing-x-small) * -1);
113
+ }
114
+
115
+ .syn-table-cell--shadow-top::after {
116
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
117
+ top: calc(var(--syn-spacing-x-small) * -1);
118
+ }
119
+
120
+ .syn-table-cell--shadow-start::after,
121
+ :dir(rtl) .syn-table-cell--shadow-end::after {
122
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
123
+ left: calc(var(--syn-spacing-x-small) * -1);
124
+ right: unset;
125
+ }
126
+
127
+ /* stylelint-disable-next-line no-descending-specificity */
128
+ .syn-table-cell--shadow-end::after,
129
+ :dir(rtl) .syn-table-cell--shadow-start::after {
130
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
131
+ left: unset;
132
+ right: calc(var(--syn-spacing-x-small) * -1);
133
+ }
134
+
135
+ .syn-table-cell--shadow-active::after {
136
+ opacity: 1;
137
+ }
package/dist/tables/table.css ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Table classes
3
+ * @boolean { false } syn-table Applies the styling to a table element
4
+ * @boolean { true } syn-table--default Applies all default table stylings to a table and its children
5
+ * @boolean { false } syn-table--alternating Applies all alternate table stylings to a table and its children
6
+ * @boolean { false } syn-table--border Applies all border table stylings to a table and its children
7
+ */
8
+ .syn-table,
9
+ .syn-table--default,
10
+ .syn-table--alternating,
11
+ .syn-table--border {
12
+ all: unset;
13
+ border-collapse: collapse;
14
+ border-spacing: var(--syn-border-width-none);
15
+ display: table;
16
+ }
package/dist/tables.css ADDED
@@ -0,0 +1,143 @@
1
+ /**
2
+ * @synergy-design-system/styles version 1.0.1
3
+ * SICK Global UX Foundation
4
+ */
5
+ /**
6
+ * Table / table cell styles
7
+ */
8
+ /**
9
+ * Table classes
10
+ * @boolean { false } syn-table Applies the styling to a table element
11
+ * @boolean { true } syn-table--default Applies all default table stylings to a table and its children
12
+ * @boolean { false } syn-table--alternating Applies all alternate table stylings to a table and its children
13
+ * @boolean { false } syn-table--border Applies all border table stylings to a table and its children
14
+ */
15
+ .syn-table,
16
+ .syn-table--default,
17
+ .syn-table--alternating,
18
+ .syn-table--border {
19
+ all: unset;
20
+ border-collapse: collapse;
21
+ border-spacing: var(--syn-border-width-none);
22
+ display: table;
23
+ }
24
+ /**
25
+ * Table cell classes
26
+ *
27
+ * @boolean { true } syn-table-cell Applies the table cell styling
28
+ * @boolean syn-table-cell--alternating Applies an alternating style to help separate rows visually
29
+ * @boolean syn-table-cell--border-start Applies a border to the left of the table cell
30
+ * @boolean syn-table-cell--border-end Applies a border to the right of the table cell
31
+ * @boolean syn-table-cell--border-top Applies a border to the top of the table cell
32
+ * @boolean syn-table-cell--border-bottom Applies a border to the bottom of the table cell
33
+ * @boolean syn-table-cell--header Applies the table cell header styling
34
+ * @variant { NO_DEFAULT | bottom | top | start | end } syn-table-cell--shadow Applies the selected shadow to the table cell
35
+ * @boolean syn-table-cell--shadow-active Displays the table shadow
36
+ */
37
+ .syn-table-cell,
38
+ .syn-table--default td,
39
+ .syn-table--alternating td,
40
+ .syn-table--border td {
41
+ background-color: var(--syn-color-neutral-0);
42
+ color: var(--syn-typography-color-text);
43
+ font: var(--syn-body-small-regular);
44
+ height: var(--syn-spacing-large);
45
+ padding: var(--syn-spacing-small) var(--syn-spacing-medium);
46
+ text-align: start;
47
+ vertical-align: top;
48
+ }
49
+ .syn-table-cell--alternating,
50
+ .syn-table--alternating tr:nth-child(even) > td {
51
+ background-color: var(--syn-color-neutral-50);
52
+ }
53
+ /* Border */
54
+ .syn-table-cell--border-start {
55
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
56
+ }
57
+ .syn-table-cell--border-end,
58
+ .syn-table--border tr > td:not(:last-child) {
59
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
60
+ }
61
+ .syn-table-cell--border-top {
62
+ border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
63
+ }
64
+ .syn-table-cell--border-bottom,
65
+ .syn-table--border tr:not(:last-child) > td {
66
+ border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
67
+ }
68
+ /* Header */
69
+ .syn-table-cell--header,
70
+ .syn-table--default th,
71
+ .syn-table--alternating th,
72
+ .syn-table--border th {
73
+ background-color: var(--syn-color-neutral-200);
74
+ color: var(--syn-typography-color-text);
75
+ font: var(--syn-body-small-semibold);
76
+ height: var(--syn-spacing-large);
77
+ padding: var(--syn-spacing-small) var(--syn-spacing-medium);
78
+ text-align: start;
79
+ vertical-align: top;
80
+ }
81
+ /* Shadow */
82
+ .syn-table-cell--shadow-bottom::after,
83
+ .syn-table-cell--shadow-top::after,
84
+ .syn-table-cell--shadow-start::after,
85
+ .syn-table-cell--shadow-end::after {
86
+ /* Fallback for no color-mix support */
87
+ --shadow-start: rgb(49 55 58 / 0%) ;
88
+ --shadow-end: rgb(49 55 58 / 15%);
89
+
90
+ content: '';
91
+ opacity: 0;
92
+ pointer-events: none;
93
+ position: absolute;
94
+ transition-duration: 0.25s;
95
+ transition-property: opacity;
96
+ transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
97
+ }
98
+ /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
99
+ @supports (background: color-mix(in srgb, grey 0%, transparent)) {
100
+ .syn-table-cell--shadow-bottom::after,
101
+ .syn-table-cell--shadow-top::after,
102
+ .syn-table-cell--shadow-start::after,
103
+ .syn-table-cell--shadow-end::after {
104
+ --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
105
+ --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
106
+ }
107
+ }
108
+ .syn-table-cell--shadow-bottom::after,
109
+ .syn-table-cell--shadow-top::after {
110
+ height: var(--syn-spacing-x-small);
111
+ left: 0;
112
+ right: 0;
113
+ }
114
+ .syn-table-cell--shadow-start::after,
115
+ .syn-table-cell--shadow-end::after {
116
+ bottom: 0;
117
+ top: 0;
118
+ width: var(--syn-spacing-x-small);
119
+ }
120
+ .syn-table-cell--shadow-bottom::after {
121
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
122
+ bottom: calc(var(--syn-spacing-x-small) * -1);
123
+ }
124
+ .syn-table-cell--shadow-top::after {
125
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
126
+ top: calc(var(--syn-spacing-x-small) * -1);
127
+ }
128
+ .syn-table-cell--shadow-start::after,
129
+ :dir(rtl) .syn-table-cell--shadow-end::after {
130
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
131
+ left: calc(var(--syn-spacing-x-small) * -1);
132
+ right: unset;
133
+ }
134
+ /* stylelint-disable-next-line no-descending-specificity */
135
+ .syn-table-cell--shadow-end::after,
136
+ :dir(rtl) .syn-table-cell--shadow-start::after {
137
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
138
+ left: unset;
139
+ right: calc(var(--syn-spacing-x-small) * -1);
140
+ }
141
+ .syn-table-cell--shadow-active::after {
142
+ opacity: 1;
143
+ }
package/dist/typography.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 0.1.0
2
+ * @synergy-design-system/styles version 1.0.1
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.0.0",
83
+ "version": "1.1.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.2.0"
104
+ "@synergy-design-system/tokens": "^2.5.0"
105
105
  },
106
106
  "scripts": {
107
107
  "start": "pnpm build",