@repobit/dex-system-design 0.19.0 → 0.19.2
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
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.19.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.1...@repobit/dex-system-design@0.19.2) (2025-10-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @repobit/dex-system-design
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.19.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.0...@repobit/dex-system-design@0.19.1) (2025-10-02)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @repobit/dex-system-design
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.19.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.18.1...@repobit/dex-system-design@0.19.0) (2025-10-01)
|
|
7
23
|
|
|
8
24
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@repobit/dex-system-design",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.2",
|
|
4
4
|
"description": "Design system based on Web Components.",
|
|
5
5
|
"author": "Iordache Matei Cezar <miordache@bitdefender.com>",
|
|
6
6
|
"homepage": "https://github.com/bitdefender/dex-core#readme",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"volta": {
|
|
80
80
|
"node": "22.14.0"
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "4719cfeb84a6e363a78a33460197661f23aac5a5"
|
|
83
83
|
}
|
|
@@ -1,117 +1,127 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
|
|
3
3
|
export default css`
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
@layer bd-components {
|
|
5
|
+
:host {
|
|
6
|
+
--background-card-grey: var(--color-neutral-25);
|
|
7
|
+
--border-card-grey: var(--color-neutral-50);
|
|
8
|
+
--border-card-green: var(--color-green-700);
|
|
9
|
+
--badge-background: var(--color-blue-500);
|
|
10
|
+
--text-color-white: var(--color-neutral-0);
|
|
11
|
+
--bd-accesibility-focus: var(--color-blue-500);
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
.bd-accordion-bg-item {
|
|
16
|
+
margin-bottom: var(--spacing-16);
|
|
17
|
+
border-radius: var(--spacing-8);
|
|
18
|
+
background-color: var(--color-blue-50);
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
transition: box-shadow 0.3s ease;
|
|
21
|
+
}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
.bd-accordion-bg-item:hover {
|
|
24
|
+
.bd-accordion-bg-question-text {
|
|
25
|
+
text-decoration-line: underline;
|
|
26
|
+
}
|
|
25
27
|
}
|
|
26
|
-
}
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
.bd-accordion-bg-question {
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: flex-start;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: var(--spacing-10);
|
|
35
|
+
padding: var(--spacing-16);
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
background-color: var(--color-blue-50);
|
|
38
|
+
color: #333;
|
|
39
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
40
|
+
}
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
.bd-accordion-bg-header {
|
|
43
|
+
margin-bottom: var(--spacing-32);
|
|
44
|
+
}
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
.bd-accordion-bg-question:hover {
|
|
47
|
+
color: #0073e6;
|
|
48
|
+
}
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
.bd-accordion-bg-item:focus-visible {
|
|
51
|
+
outline: var(--spacing-2) solid var(--bd-accesibility-focus);
|
|
52
|
+
outline-offset: var(--spacing-2);
|
|
53
|
+
border-radius: var(--space-2xs);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.bd-accordion-bg-item:focus {
|
|
57
|
+
.bd-accordion-bg-question-text {
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
text-decoration-line: underline;
|
|
60
|
+
color: var(--color-blue-600);
|
|
61
|
+
text-decoration-thickness: var(--spacing-2);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
54
64
|
|
|
55
|
-
.bd-accordion-bg-item:focus {
|
|
56
65
|
.bd-accordion-bg-question-text {
|
|
57
|
-
font-
|
|
58
|
-
|
|
59
|
-
color: var(--color-blue-600);
|
|
60
|
-
text-decoration-thickness: var(--spacing-2);
|
|
66
|
+
font-family: var(--typography-fontFamily-sans);
|
|
67
|
+
font-weight: var(--typography-fontWeight-semibold);
|
|
61
68
|
}
|
|
62
|
-
}
|
|
63
69
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
70
|
+
.bd-accordion-bg-title {
|
|
71
|
+
font-family: var(--typography-fontFamily-sans);
|
|
72
|
+
font-weight: var(--typography-fontWeight-semibold);
|
|
73
|
+
margin-left: auto;
|
|
74
|
+
margin-right: auto;
|
|
75
|
+
text-align: center;
|
|
76
|
+
}
|
|
68
77
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
78
|
+
.bd-accordion-bg-icon {
|
|
79
|
+
transition: transform 0.3s ease;
|
|
80
|
+
width: var(--spacing-14);
|
|
81
|
+
height: var(--spacing-14);
|
|
82
|
+
color: var(--color-blue-500);
|
|
83
|
+
text-align: center;
|
|
84
|
+
position: relative;
|
|
85
|
+
bottom: 1px;
|
|
86
|
+
}
|
|
76
87
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
88
|
+
.bd-accordion-bg-answer {
|
|
89
|
+
overflow: hidden;
|
|
90
|
+
max-height: 0;
|
|
91
|
+
opacity: 0;
|
|
92
|
+
padding: 0 15px;
|
|
93
|
+
background-color: var(--color-blue-50);
|
|
94
|
+
font-family: var(--typography-fontFamily-sans);
|
|
95
|
+
font-weight: var(--font-weight-sans-medium);
|
|
96
|
+
}
|
|
86
97
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
background-color: var(--color-blue-50);
|
|
93
|
-
font-family: var(--typography-fontFamily-sans);
|
|
94
|
-
font-weight: var(--font-weight-sans-medium);
|
|
95
|
-
}
|
|
98
|
+
.bd-accordion-bg-item.open .bd-accordion-bg-answer {
|
|
99
|
+
max-height: 1000px;
|
|
100
|
+
opacity: 1;
|
|
101
|
+
padding: var(--spacing-0) var(--spacing-40);
|
|
102
|
+
}
|
|
96
103
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
padding: var(--spacing-0) var(--spacing-40);
|
|
101
|
-
}
|
|
104
|
+
.bd-accordion-bg-answer > div {
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
}
|
|
102
107
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
108
|
+
.bd-accordion-bg-container {
|
|
109
|
+
width: 90%;
|
|
110
|
+
margin: auto;
|
|
111
|
+
padding-top: var(--spacing-64);
|
|
112
|
+
padding-bottom: var(--spacing-64);
|
|
113
|
+
}
|
|
106
114
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
115
|
+
.bd-accordion-bg-link-noline {
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.test-accordion {
|
|
120
|
+
background-color: blue;
|
|
121
|
+
}
|
|
113
122
|
|
|
114
|
-
|
|
115
|
-
|
|
123
|
+
.test-accordion p {
|
|
124
|
+
font-size: 20px;
|
|
125
|
+
}
|
|
116
126
|
}
|
|
117
127
|
`;
|
|
@@ -48,6 +48,14 @@ class BdAccordionBgItem extends LitElement {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
/**
|
|
52
|
+
* @param {Event} e
|
|
53
|
+
*/
|
|
54
|
+
#onSlot(e) {
|
|
55
|
+
const slot = e.currentTarget;
|
|
56
|
+
slot.classList.add('accordion-test');
|
|
57
|
+
}
|
|
58
|
+
|
|
51
59
|
render() {
|
|
52
60
|
return html`
|
|
53
61
|
<div
|
|
@@ -69,7 +77,7 @@ class BdAccordionBgItem extends LitElement {
|
|
|
69
77
|
role="region"
|
|
70
78
|
aria-labelledby="${this.id}"
|
|
71
79
|
>
|
|
72
|
-
<slot></slot>
|
|
80
|
+
<slot @slotchange=${this.#onSlot}></slot>
|
|
73
81
|
</div>
|
|
74
82
|
</div>
|
|
75
83
|
`;
|
package/src/tokens/tokens.js
CHANGED
|
@@ -887,63 +887,63 @@ export const tokens = css`
|
|
|
887
887
|
font-family: "IBM Plex Mono";
|
|
888
888
|
font-style: normal;
|
|
889
889
|
font-weight: 700;
|
|
890
|
-
src: url("
|
|
890
|
+
src: url("../assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
|
|
891
891
|
}
|
|
892
892
|
@font-face {
|
|
893
893
|
font-family: "IBM Plex Mono";
|
|
894
894
|
font-style: normal;
|
|
895
895
|
font-weight: 700;
|
|
896
|
-
src: url("
|
|
896
|
+
src: url("../assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
|
|
897
897
|
}
|
|
898
898
|
|
|
899
899
|
@font-face {
|
|
900
900
|
font-family: "IBM Plex Mono";
|
|
901
901
|
font-style: italic;
|
|
902
902
|
font-weight: 300;
|
|
903
|
-
src: url("
|
|
903
|
+
src: url("../assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
|
|
904
904
|
}
|
|
905
905
|
@font-face {
|
|
906
906
|
font-family: "IBM Plex Mono";
|
|
907
907
|
font-style: normal;
|
|
908
908
|
font-weight: 300;
|
|
909
|
-
src: url("
|
|
909
|
+
src: url("../assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
|
|
910
910
|
}
|
|
911
911
|
@font-face {
|
|
912
912
|
font-family: "IBM Plex Mono";
|
|
913
913
|
font-style: italic;
|
|
914
914
|
font-weight: 300;
|
|
915
|
-
src: url("
|
|
915
|
+
src: url("../assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
|
|
916
916
|
}
|
|
917
917
|
|
|
918
918
|
@font-face {
|
|
919
919
|
font-family: "IBM Plex Mono";
|
|
920
920
|
font-style: italic;
|
|
921
921
|
font-weight: 500;
|
|
922
|
-
src: url("
|
|
922
|
+
src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
|
|
923
923
|
}
|
|
924
924
|
@font-face {
|
|
925
925
|
font-family: "IBM Plex Mono";
|
|
926
926
|
font-style: italic;
|
|
927
927
|
font-weight: 500;
|
|
928
|
-
src: url("
|
|
928
|
+
src: url("../assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
|
|
929
929
|
}
|
|
930
930
|
@font-face {
|
|
931
931
|
font-family: "IBM Plex Mono";
|
|
932
932
|
font-style: italic;
|
|
933
933
|
font-weight: 400;
|
|
934
|
-
src: url("
|
|
934
|
+
src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
|
|
935
935
|
}
|
|
936
936
|
@font-face {
|
|
937
937
|
font-family: "IBM Plex Mono";
|
|
938
938
|
font-style: italic;
|
|
939
939
|
font-weight: 600;
|
|
940
|
-
src: url("
|
|
940
|
+
src: url("../assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
|
|
941
941
|
}
|
|
942
942
|
@font-face {
|
|
943
943
|
font-family: "IBM Plex Mono";
|
|
944
944
|
font-style: italic;
|
|
945
945
|
font-weight: 600;
|
|
946
|
-
src: url("
|
|
946
|
+
src: url("../assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
|
|
947
947
|
}
|
|
948
948
|
|
|
949
949
|
/*
|
|
@@ -954,63 +954,63 @@ export const tokens = css`
|
|
|
954
954
|
font-family: "IBMPlexSans";
|
|
955
955
|
font-style: normal;
|
|
956
956
|
font-weight: 700;
|
|
957
|
-
src: url("
|
|
957
|
+
src: url("../assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
|
|
958
958
|
}
|
|
959
959
|
@font-face {
|
|
960
960
|
font-family: "IBMPlexSans";
|
|
961
961
|
font-style: normal;
|
|
962
962
|
font-weight: 700;
|
|
963
|
-
src: url("
|
|
963
|
+
src: url("../assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
|
|
964
964
|
}
|
|
965
965
|
|
|
966
966
|
@font-face {
|
|
967
967
|
font-family: "IBMPlexSans";
|
|
968
968
|
font-style: italic;
|
|
969
969
|
font-weight: 300;
|
|
970
|
-
src: url("
|
|
970
|
+
src: url("../assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
|
|
971
971
|
}
|
|
972
972
|
@font-face {
|
|
973
973
|
font-family: "IBMPlexSans";
|
|
974
974
|
font-style: normal;
|
|
975
975
|
font-weight: 300;
|
|
976
|
-
src: url("
|
|
976
|
+
src: url("../assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
|
|
977
977
|
}
|
|
978
978
|
@font-face {
|
|
979
979
|
font-family: "IBMPlexSans";
|
|
980
980
|
font-style: italic;
|
|
981
981
|
font-weight: 300;
|
|
982
|
-
src: url("
|
|
982
|
+
src: url("../assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
|
|
983
983
|
}
|
|
984
984
|
|
|
985
985
|
@font-face {
|
|
986
986
|
font-family: "IBMPlexSans";
|
|
987
987
|
font-style: italic;
|
|
988
988
|
font-weight: 500;
|
|
989
|
-
src: url("
|
|
989
|
+
src: url("../assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
|
|
990
990
|
}
|
|
991
991
|
@font-face {
|
|
992
992
|
font-family: "IBMPlexSans";
|
|
993
993
|
font-style: italic;
|
|
994
994
|
font-weight: 500;
|
|
995
|
-
src: url("
|
|
995
|
+
src: url("../assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
|
|
996
996
|
}
|
|
997
997
|
@font-face {
|
|
998
998
|
font-family: "IBMPlexSans";
|
|
999
999
|
font-style: italic;
|
|
1000
1000
|
font-weight: 400;
|
|
1001
|
-
src: url("
|
|
1001
|
+
src: url("../assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
|
|
1002
1002
|
}
|
|
1003
1003
|
@font-face {
|
|
1004
1004
|
font-family: "IBMPlexSans";
|
|
1005
1005
|
font-style: italic;
|
|
1006
1006
|
font-weight: 600;
|
|
1007
|
-
src: url("
|
|
1007
|
+
src: url("../assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
|
|
1008
1008
|
}
|
|
1009
1009
|
@font-face {
|
|
1010
1010
|
font-family: "IBMPlexSans";
|
|
1011
1011
|
font-style: italic;
|
|
1012
1012
|
font-weight: 600;
|
|
1013
|
-
src: url("
|
|
1013
|
+
src: url("../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
|
|
1014
1014
|
}
|
|
1015
1015
|
|
|
1016
1016
|
/* =====================
|