@siemens/element-theme 49.13.0 → 51.0.0-rc.1
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/package.json +2 -5
- package/src/styles/_root-font-size.scss +29 -0
- package/src/styles/bootstrap/_badges.scss +2 -2
- package/src/styles/bootstrap/_buttons.scss +3 -9
- package/src/styles/bootstrap/_dropdowns.scss +10 -3
- package/src/styles/bootstrap/_reboot.scss +0 -4
- package/src/styles/bootstrap/_root.scss +0 -5
- package/src/styles/bootstrap/_variables.scss +14 -13
- package/src/styles/components/_list-item.scss +142 -0
- package/src/theme.scss +8 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@siemens/element-theme",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "51.0.0-rc.1",
|
|
4
4
|
"description": "Element CSS theme.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -16,9 +16,6 @@
|
|
|
16
16
|
"publishConfig": {
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
19
|
-
"scripts": {
|
|
20
|
-
"postversion": "node ../../postversion.js"
|
|
21
|
-
},
|
|
22
19
|
"keywords": [
|
|
23
20
|
"siemens",
|
|
24
21
|
"theme",
|
|
@@ -28,4 +25,4 @@
|
|
|
28
25
|
"front-end",
|
|
29
26
|
"framework"
|
|
30
27
|
]
|
|
31
|
-
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
$element-root-font-size: initial !default;
|
|
2
|
+
|
|
3
|
+
html {
|
|
4
|
+
// defines the default with low specificity, i.e. easy overridable with :root
|
|
5
|
+
--element-root-font-size: #{$element-root-font-size};
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
font-size: var(--element-root-font-size);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// pre-defined root font size helper classes that can be applied to <html> tag
|
|
13
|
+
|
|
14
|
+
// use browser-defined root font size
|
|
15
|
+
.rfs-none {
|
|
16
|
+
--element-root-font-size: initial;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.rfs-16 {
|
|
20
|
+
--element-root-font-size: 16px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.rfs-20 {
|
|
24
|
+
--element-root-font-size: 20px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.rfs-24 {
|
|
28
|
+
--element-root-font-size: 24px;
|
|
29
|
+
}
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
padding-inline: variables.$badge-padding-x;
|
|
21
21
|
margin-block: 0;
|
|
22
22
|
margin-inline: map.get(spacers.$spacers, 4);
|
|
23
|
-
line-height:
|
|
23
|
+
line-height: variables.$badge-line-height;
|
|
24
24
|
flex-shrink: 0;
|
|
25
25
|
font-size: typography.$si-font-size-body;
|
|
26
26
|
font-weight: typography.$si-font-weight-body;
|
|
27
27
|
max-inline-size: 24.5ch;
|
|
28
28
|
// Make min-inline-size equal the badge height to create a circular badge when there's only one character.
|
|
29
|
-
min-inline-size:
|
|
29
|
+
min-inline-size: variables.$badge-height;
|
|
30
30
|
text-overflow: ellipsis;
|
|
31
31
|
overflow: hidden;
|
|
32
32
|
text-align: center;
|
|
@@ -99,11 +99,7 @@ button {
|
|
|
99
99
|
--btn-color-active: #{semantic-tokens.$element-action-warning-text};
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
|
|
103
|
-
// To avoid a breaking change, the class .btn-primary-ghost has been added which deviates from the usual button naming convention.
|
|
104
|
-
// With the next major release, the .btn-primary-ghost class should be removed so that the ghost buttons match the button naming convention
|
|
105
|
-
// and schematics should update .btn-ghost to .btn-tertiary-ghost.
|
|
106
|
-
.btn-primary-ghost {
|
|
102
|
+
.btn-ghost {
|
|
107
103
|
--btn-bg: #{semantic-tokens.$element-base-1};
|
|
108
104
|
--btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
|
|
109
105
|
--btn-bg-active: #{semantic-tokens.$element-base-1-selected};
|
|
@@ -131,8 +127,7 @@ button {
|
|
|
131
127
|
.btn-tertiary,
|
|
132
128
|
.btn-tertiary-warning,
|
|
133
129
|
.btn-tertiary-danger,
|
|
134
|
-
.btn-tertiary-ghost
|
|
135
|
-
.btn-ghost {
|
|
130
|
+
.btn-tertiary-ghost {
|
|
136
131
|
--btn-bg: transparent;
|
|
137
132
|
--btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
|
|
138
133
|
--btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
|
|
@@ -166,8 +161,7 @@ button {
|
|
|
166
161
|
}
|
|
167
162
|
|
|
168
163
|
.btn-secondary-ghost,
|
|
169
|
-
.btn-tertiary-ghost
|
|
170
|
-
.btn-ghost {
|
|
164
|
+
.btn-tertiary-ghost {
|
|
171
165
|
--btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
|
|
172
166
|
--btn-bg-active: #{semantic-tokens.$element-base-1-selected};
|
|
173
167
|
--btn-color: #{semantic-tokens.$element-text-primary};
|
|
@@ -40,10 +40,16 @@
|
|
|
40
40
|
|
|
41
41
|
.dropdown-menu-scroller {
|
|
42
42
|
overflow: auto;
|
|
43
|
-
// 266px
|
|
43
|
+
// ~266px with rfs 16px, based on Figma and gives 6-8 items. Depending on the number of headings
|
|
44
44
|
max-block-size: min(
|
|
45
45
|
100vb,
|
|
46
|
-
calc(
|
|
46
|
+
calc(
|
|
47
|
+
(
|
|
48
|
+
bootstrap-variables.$dropdown-line-height + #{2 *
|
|
49
|
+
bootstrap-variables.$dropdown-item-padding-y}
|
|
50
|
+
) *
|
|
51
|
+
8.3125
|
|
52
|
+
)
|
|
47
53
|
);
|
|
48
54
|
}
|
|
49
55
|
|
|
@@ -90,7 +96,7 @@
|
|
|
90
96
|
display: flex;
|
|
91
97
|
flex-wrap: nowrap;
|
|
92
98
|
align-items: center;
|
|
93
|
-
block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
|
|
99
|
+
min-block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
|
|
94
100
|
inline-size: 100%;
|
|
95
101
|
padding-block: bootstrap-variables.$dropdown-item-padding-y;
|
|
96
102
|
padding-inline: bootstrap-variables.$dropdown-item-padding-x;
|
|
@@ -169,6 +175,7 @@
|
|
|
169
175
|
white-space: nowrap; // as with > li > a
|
|
170
176
|
font-size: typography.$si-font-size-h5;
|
|
171
177
|
font-weight: typography.$si-font-weight-h5;
|
|
178
|
+
line-height: bootstrap-variables.$dropdown-line-height;
|
|
172
179
|
}
|
|
173
180
|
|
|
174
181
|
.dropdown-divider {
|
|
@@ -26,10 +26,6 @@
|
|
|
26
26
|
// null by default, thus nothing is generated.
|
|
27
27
|
|
|
28
28
|
:root {
|
|
29
|
-
@if variables.$font-size-root != null {
|
|
30
|
-
font-size: var(--#{variables.$variable-prefix}root-font-size);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
29
|
@if variables.$enable-smooth-scroll {
|
|
34
30
|
@media (prefers-reduced-motion: no-preference) {
|
|
35
31
|
scroll-behavior: smooth;
|
|
@@ -8,11 +8,6 @@
|
|
|
8
8
|
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
|
9
9
|
--#{variables.$variable-prefix}font-sans-serif: #{meta.inspect(variables.$font-family-sans-serif)};
|
|
10
10
|
--#{variables.$variable-prefix}font-monospace: #{meta.inspect(variables.$font-family-monospace)};
|
|
11
|
-
|
|
12
|
-
// Root and body
|
|
13
|
-
@if variables.$font-size-root != null {
|
|
14
|
-
--#{variables.$variable-prefix}root-font-size: #{variables.$font-size-root};
|
|
15
|
-
}
|
|
16
11
|
--#{variables.$variable-prefix}body-font-family: #{meta.inspect(variables.$font-family-base)};
|
|
17
12
|
--#{variables.$variable-prefix}body-font-size: #{variables.$font-size-base};
|
|
18
13
|
--#{variables.$variable-prefix}body-font-weight: #{variables.$font-weight-base};
|
|
@@ -160,9 +160,7 @@ $font-family-monospace:
|
|
|
160
160
|
$font-family-base: $font-family-sans-serif !default;
|
|
161
161
|
$font-family-code: $font-family-monospace !default;
|
|
162
162
|
|
|
163
|
-
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
|
|
164
163
|
// $font-size-base effects the font size of the body text
|
|
165
|
-
$font-size-root: null !default;
|
|
166
164
|
$font-size-base: typography.$si-font-size-body !default;
|
|
167
165
|
$font-size-lg: typography.$si-font-size-body-lg !default;
|
|
168
166
|
$font-size-sm: typography.$si-font-size-caption !default;
|
|
@@ -434,6 +432,17 @@ $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-colo
|
|
|
434
432
|
$nav-tabs-link-active-color: semantic-tokens.$element-action-secondary-text-hover !default;
|
|
435
433
|
$nav-tabs-link-active-bg: transparent !default;
|
|
436
434
|
|
|
435
|
+
// Badges
|
|
436
|
+
$badge-font-size: typography.$si-font-size-body;
|
|
437
|
+
$badge-font-weight: typography.$si-font-weight-body;
|
|
438
|
+
$badge-color: semantic-tokens.$element-text-inverse !default;
|
|
439
|
+
$badge-padding-y: map.get(spacers.$spacers, 1);
|
|
440
|
+
$badge-padding-x: map.get(spacers.$spacers, 4);
|
|
441
|
+
$badge-border-radius: 0.75rem;
|
|
442
|
+
$badge-dot-size: 0.625rem;
|
|
443
|
+
$badge-line-height: 1.25rem;
|
|
444
|
+
$badge-height: calc($badge-line-height + 2 * $badge-padding-y);
|
|
445
|
+
|
|
437
446
|
// Dropdowns
|
|
438
447
|
//
|
|
439
448
|
// Dropdown menu container and contents.
|
|
@@ -442,7 +451,8 @@ $dropdown-padding-x: 0 !default;
|
|
|
442
451
|
$dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
|
|
443
452
|
$dropdown-spacer: 0.125rem !default;
|
|
444
453
|
$dropdown-font-size: $font-size-base !default;
|
|
445
|
-
|
|
454
|
+
// this is to have room for icon and badges
|
|
455
|
+
$dropdown-line-height: $badge-height;
|
|
446
456
|
$dropdown-color: $body-color !default;
|
|
447
457
|
$dropdown-bg: semantic-tokens.$element-base-1 !default;
|
|
448
458
|
$dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
|
|
@@ -451,7 +461,7 @@ $dropdown-divider-margin-y: 4px !default;
|
|
|
451
461
|
$dropdown-box-shadow: elevation.$element-elevation-2 !default;
|
|
452
462
|
$dropdown-link-color: semantic-tokens.$element-text-primary !default;
|
|
453
463
|
$dropdown-link-disabled-color: semantic-tokens.$element-text-disabled !default;
|
|
454
|
-
$dropdown-item-padding-y: map.get(spacers.$spacers,
|
|
464
|
+
$dropdown-item-padding-y: map.get(spacers.$spacers, 2);
|
|
455
465
|
$dropdown-item-padding-x: map.get(spacers.$spacers, 5);
|
|
456
466
|
$dropdown-header-color: semantic-tokens.$element-text-primary !default;
|
|
457
467
|
|
|
@@ -517,15 +527,6 @@ $popover-arrow-color: $popover-bg !default;
|
|
|
517
527
|
|
|
518
528
|
$popover-arrow-outer-color: $popover-border-color !default;
|
|
519
529
|
|
|
520
|
-
// Badges
|
|
521
|
-
$badge-font-size: typography.$si-font-size-body;
|
|
522
|
-
$badge-font-weight: typography.$si-font-weight-body;
|
|
523
|
-
$badge-color: semantic-tokens.$element-text-inverse !default;
|
|
524
|
-
$badge-padding-y: map.get(spacers.$spacers, 1);
|
|
525
|
-
$badge-padding-x: map.get(spacers.$spacers, 4);
|
|
526
|
-
$badge-border-radius: 0.75rem;
|
|
527
|
-
$badge-dot-size: 0.625rem;
|
|
528
|
-
|
|
529
530
|
// Modals
|
|
530
531
|
|
|
531
532
|
// Padding applied to the modal body
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
@use '../variables';
|
|
2
|
+
@use '../variables/focus';
|
|
3
|
+
@use '../variables/typography';
|
|
4
|
+
|
|
5
|
+
@use 'sass:map';
|
|
6
|
+
|
|
7
|
+
ul:has(.list-item),
|
|
8
|
+
ol:has(.list-item) {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
list-style: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.list-item {
|
|
15
|
+
display: grid;
|
|
16
|
+
grid-template-columns: 1fr auto;
|
|
17
|
+
grid-template-areas:
|
|
18
|
+
'timestamp timestamp'
|
|
19
|
+
'title action'
|
|
20
|
+
'description description'
|
|
21
|
+
'metadata metadata'
|
|
22
|
+
'quick-actions quick-actions';
|
|
23
|
+
padding-block: map.get(variables.$spacers, 4);
|
|
24
|
+
padding-inline: map.get(variables.$spacers, 6);
|
|
25
|
+
|
|
26
|
+
@include typography.si-font(
|
|
27
|
+
typography.$si-font-size-body,
|
|
28
|
+
typography.$si-line-height-body,
|
|
29
|
+
typography.$si-font-weight-body
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
> * {
|
|
33
|
+
grid-column: 1 / -1;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.list-item-timestamp {
|
|
37
|
+
grid-area: timestamp;
|
|
38
|
+
color: variables.$element-text-secondary;
|
|
39
|
+
margin-block-end: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.list-item-title {
|
|
43
|
+
grid-area: title;
|
|
44
|
+
padding-block: map.get(variables.$spacers, 4);
|
|
45
|
+
margin-block-end: 0;
|
|
46
|
+
|
|
47
|
+
@include typography.si-font(
|
|
48
|
+
typography.$si-font-size-h5,
|
|
49
|
+
typography.$si-line-height-h5,
|
|
50
|
+
typography.$si-font-weight-h5
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
&.unread {
|
|
54
|
+
position: relative;
|
|
55
|
+
|
|
56
|
+
@include typography.si-font(
|
|
57
|
+
typography.$si-font-size-h5-bold,
|
|
58
|
+
typography.$si-line-height-h5-bold,
|
|
59
|
+
typography.$si-font-weight-h5-bold
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
&::before {
|
|
63
|
+
content: '';
|
|
64
|
+
position: absolute;
|
|
65
|
+
block-size: 0.375rem;
|
|
66
|
+
inline-size: 0.375rem;
|
|
67
|
+
border-radius: 50%;
|
|
68
|
+
background-color: variables.$element-ui-1;
|
|
69
|
+
inset-inline-start: -0.625rem;
|
|
70
|
+
inset-block-start: 50%;
|
|
71
|
+
translate: 0 -50%;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.list-item-primary-action {
|
|
77
|
+
grid-area: action;
|
|
78
|
+
align-self: center;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.list-item-description {
|
|
82
|
+
grid-area: description;
|
|
83
|
+
margin-block-end: map.get(variables.$spacers, 4);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.list-item-metadata {
|
|
87
|
+
grid-area: metadata;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: row;
|
|
90
|
+
align-items: center;
|
|
91
|
+
color: variables.$element-text-secondary;
|
|
92
|
+
margin-block-end: map.get(variables.$spacers, 4);
|
|
93
|
+
|
|
94
|
+
a:not(:hover) {
|
|
95
|
+
color: variables.$element-text-secondary;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.badge {
|
|
99
|
+
margin-inline: 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.list-item-metadata-divider {
|
|
103
|
+
inline-size: 0.125rem;
|
|
104
|
+
block-size: 0.125rem;
|
|
105
|
+
border-radius: 50%;
|
|
106
|
+
background-color: variables.$element-text-secondary;
|
|
107
|
+
margin-inline: map.get(variables.$spacers, 2);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.list-item-quick-actions {
|
|
112
|
+
grid-area: quick-actions;
|
|
113
|
+
display: flex;
|
|
114
|
+
gap: map.get(variables.$spacers, 4);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&.list-item-action {
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
text-decoration: none;
|
|
120
|
+
color: inherit;
|
|
121
|
+
|
|
122
|
+
&:hover {
|
|
123
|
+
background-color: variables.$element-base-1-hover;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&:active {
|
|
127
|
+
background-color: variables.$element-base-1-selected;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&:focus-visible {
|
|
131
|
+
outline-offset: focus.$focus-style-outline-inside-offset;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&:is(button, a) {
|
|
136
|
+
border: 0;
|
|
137
|
+
background: none;
|
|
138
|
+
inline-size: 100%;
|
|
139
|
+
text-align: start;
|
|
140
|
+
font: inherit;
|
|
141
|
+
}
|
|
142
|
+
}
|
package/src/theme.scss
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
$element-theme-default: null !default;
|
|
2
2
|
$element-themes: null !default;
|
|
3
3
|
|
|
4
|
+
// Defines the default root font size. Change to 'none' at some point.
|
|
5
|
+
$element-root-font-size: 16px !default;
|
|
6
|
+
|
|
4
7
|
$_theme-default: 'element';
|
|
5
8
|
$_themes: () !default;
|
|
6
9
|
|
|
10
|
+
@use 'styles/root-font-size' with (
|
|
11
|
+
$element-root-font-size: $element-root-font-size
|
|
12
|
+
);
|
|
13
|
+
|
|
7
14
|
// Load Bootstrap
|
|
8
15
|
@use 'styles/bootstrap';
|
|
9
16
|
|
|
@@ -17,6 +24,7 @@ $_themes: () !default;
|
|
|
17
24
|
@use 'styles/components/icons';
|
|
18
25
|
@use 'styles/components/layout';
|
|
19
26
|
@use 'styles/components/links';
|
|
27
|
+
@use 'styles/components/list-item';
|
|
20
28
|
@use 'styles/components/pills';
|
|
21
29
|
@use 'styles/components/scrollbar';
|
|
22
30
|
@use 'styles/components/skeleton';
|
|
@@ -41,10 +49,3 @@ html,
|
|
|
41
49
|
body {
|
|
42
50
|
block-size: 100%;
|
|
43
51
|
}
|
|
44
|
-
|
|
45
|
-
// Define what 1rem actually means. Everything here assumes 16px.
|
|
46
|
-
// When the whole thing is properly done, carefully mixing (r)em and px values,
|
|
47
|
-
// this can be removed to allow the user's setting.
|
|
48
|
-
html {
|
|
49
|
-
font-size: 16px;
|
|
50
|
-
}
|