@synergy-design-system/styles 1.0.1 → 1.2.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 +15 -3
- package/dist/index.css +140 -1
- package/dist/tables/table-cell.css +137 -0
- package/dist/tables/table.css +16 -0
- package/dist/tables.css +143 -0
- 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.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.1.0...styles/1.2.0) (2024-08-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* ✨ 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)
|
|
7
|
+
|
|
8
|
+
# [@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)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* ✨ 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))
|
|
14
|
+
|
|
1
15
|
# [@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)
|
|
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,9 @@ import "@synergy-design-system/styles/typography.css";
|
|
|
73
75
|
|
|
74
76
|
<!-- BEGIN INLINE COMMENT -->
|
|
75
77
|
|
|
78
|
+
- tables.css
|
|
79
|
+
- table-cell.css
|
|
80
|
+
- table.css
|
|
76
81
|
- typography.css
|
|
77
82
|
- body.css
|
|
78
83
|
- heading.css
|
|
@@ -107,12 +112,19 @@ When adding comments to your modules, please add a list of all variants of your
|
|
|
107
112
|
|
|
108
113
|
```css
|
|
109
114
|
/**
|
|
110
|
-
* The "variant" syn-fieldset takes care that two classes will exist in documentation:
|
|
115
|
+
* The "variant" syn-fieldset takes care that two classes will exist in documentation. The first variant value will be the selected one:
|
|
111
116
|
* - syn-fieldset-small and
|
|
112
117
|
* - syn-fieldset-large
|
|
113
118
|
* @variant {small | large } syn-fieldset
|
|
114
119
|
*
|
|
115
|
-
*
|
|
116
|
-
*
|
|
120
|
+
* 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:
|
|
121
|
+
* @variant { NO_DEFAULT | bottom | top | start | end } syn-shadow
|
|
122
|
+
*
|
|
123
|
+
* The "boolean" syn-boolean-false will display as a boolean value in storybook with 'false' as default value
|
|
124
|
+
* @variant syn-boolean-false This value will also be available as a class.
|
|
125
|
+
*
|
|
126
|
+
* The "boolean" syn-boolean-true will display as a boolean value in storybook with 'true' as default value
|
|
127
|
+
* @boolean { true } syn-boolean-true This value will also be available as a class.
|
|
128
|
+
*
|
|
117
129
|
*/
|
|
118
130
|
```
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/styles version 1.
|
|
2
|
+
* @synergy-design-system/styles version 1.1.0
|
|
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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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.1.0
|
|
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
package/package.json
CHANGED
|
@@ -80,28 +80,28 @@
|
|
|
80
80
|
"directory": "packages/styles"
|
|
81
81
|
},
|
|
82
82
|
"type": "module",
|
|
83
|
-
"version": "1.0
|
|
83
|
+
"version": "1.2.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.8.0"
|
|
105
105
|
},
|
|
106
106
|
"scripts": {
|
|
107
107
|
"start": "pnpm build",
|