@conduction/components 2.1.39 → 2.1.40

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 (6) hide show
  1. package/README.md +3 -0
  2. package/lib/components/Pagination/Pagination.module.css +12 -0
  3. package/lib/components/card/cardWrapper/CardWrapper.module.css +14 -2
  4. package/package.json +1 -1
  5. package/src/components/Pagination/Pagination.module.css +12 -0
  6. package/src/components/card/cardWrapper/CardWrapper.module.css +14 -2
package/README.md CHANGED
@@ -4,6 +4,9 @@
4
4
 
5
5
  - **Version 2.1 (breaking changes from 2.0.x)**
6
6
 
7
+ - 2.1.40:
8
+ - Added border tokens to Pagination.
9
+ - Added border-bottom tokens to CardWrapper.
7
10
  - 2.1.39: Added more tokens to Pagination.
8
11
  - 2.1.38: Added Pagination.
9
12
  - 2.1.37: Added more design-tokens to all select options.
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -16,6 +16,9 @@
16
16
  --conduction-pagination-item-font-size: var(--skeleton-font-size-md);
17
17
  --conduction-pagination-item-font-weight: var(--skeleton-font-weight-normal);
18
18
  --conduction-pagination-item-font-family: inherit;
19
+ --conduction-pagination-item-border-width: unset;
20
+ --conduction-pagination-item-border-style: unset;
21
+ --conduction-pagination-item-border-color: unset;
19
22
 
20
23
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
21
24
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -29,11 +32,17 @@
29
32
  --conduction-pagination-current-page-color: #ffffff;
30
33
  --conduction-pagination-current-page-font-weight: bold;
31
34
  --conduction-pagination-current-page-text-decoration: unset;
35
+ --conduction-pagination-current-page-border-width: unset;
36
+ --conduction-pagination-current-page-border-style: unset;
37
+ --conduction-pagination-current-page-border-color: unset;
32
38
 
33
39
  --conduction-pagination-page-hover-color: #4376fc;
34
40
  --conduction-pagination-page-hover-background-color: #ffffff;
35
41
  --conduction-pagination-page-hover-text-decoration: unset;
36
42
  --conduction-pagination-page-hover-text-decoration-thickness: 0px;
43
+ --conduction-pagination-page-hover-border-width: unset;
44
+ --conduction-pagination-page-hover-border-style: unset;
45
+ --conduction-pagination-page-hover-border-color: unset;
37
46
  }
38
47
 
39
48
  .container {
@@ -61,6 +70,7 @@
61
70
  font-size: var(--conduction-pagination-item-font-size);
62
71
  font-weight: var(--conduction-pagination-item-font-weight);
63
72
  font-family: var(--conduction-pagination-item-font-family);
73
+ border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
64
74
  }
65
75
 
66
76
  .button {
@@ -72,6 +82,7 @@
72
82
  background-color: var(--conduction-pagination-current-page-background-color);
73
83
  font-weight: var(--conduction-pagination-current-page-font-weight);
74
84
  text-decoration: var(--conduction-pagination-current-page-text-decoration);
85
+ border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
75
86
  }
76
87
 
77
88
  .disabled:hover,
@@ -93,6 +104,7 @@
93
104
  background-color: var(--conduction-pagination-page-hover-background-color);
94
105
  text-decoration: var(--conduction-pagination-page-hover-text-decoration);
95
106
  text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
107
+ border: var(--conduction-pagination-page-hover-border-width) var(--conduction-pagination-page-hover-border-style) var(--conduction-pagination-page-hover-border-color);
96
108
  }
97
109
 
98
110
  .button {
package/lib/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -1,11 +1,17 @@
1
1
  :root {
2
2
  --conduction-card-wrapper-background-color: #ffffff;
3
- /* --conduction-card-wrapper-border-color: unset; */
4
3
  /* --conduction-card-wrapper-border-width: unset; */
5
4
  /* --conduction-card-wrapper-border-style: unset; */
5
+ /* --conduction-card-wrapper-border-color: unset; */
6
+ /* --conduction-card-wrapper-border-bottom-width: unset; */
7
+ /* --conduction-card-wrapper-border-bottom-style: unset; */
8
+ /* --conduction-card-wrapper-border-bottom-color: unset; */
9
+ /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
10
+ /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
11
+ /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
6
12
  --conduction-card-wrapper-border-radius: 16px;
7
13
  --conduction-card-wrapper-color: #000000;
8
- /* --conduction-card-wrapper-background-color-hover: unset; */
14
+ /* --conduction-card-wrapper-hover-background-color: unset; */
9
15
  --conduction-card-wrapper-padding-inline-end: 18px;
10
16
  --conduction-card-wrapper-padding-inline-start: 18px;
11
17
  --conduction-card-wrapper-padding-block-end: 18px;
@@ -24,9 +30,15 @@
24
30
  border-radius: var(--conduction-card-wrapper-border-radius);
25
31
  border-width: var(--conduction-card-wrapper-border-width);
26
32
  border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
33
+ border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
34
+ var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
35
+ var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
27
36
  }
28
37
 
29
38
  .container:hover {
30
39
  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
40
+ border-bottom: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-border-width))
41
+ var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-border-style))
42
+ var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-border-color));
31
43
  cursor: pointer;
32
44
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.1.39",
3
+ "version": "2.1.40",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/Pagination/Pagination.module.css CHANGED
@@ -16,6 +16,9 @@
16
16
  --conduction-pagination-item-font-size: var(--skeleton-font-size-md);
17
17
  --conduction-pagination-item-font-weight: var(--skeleton-font-weight-normal);
18
18
  --conduction-pagination-item-font-family: inherit;
19
+ --conduction-pagination-item-border-width: unset;
20
+ --conduction-pagination-item-border-style: unset;
21
+ --conduction-pagination-item-border-color: unset;
19
22
 
20
23
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
21
24
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -29,11 +32,17 @@
29
32
  --conduction-pagination-current-page-color: #ffffff;
30
33
  --conduction-pagination-current-page-font-weight: bold;
31
34
  --conduction-pagination-current-page-text-decoration: unset;
35
+ --conduction-pagination-current-page-border-width: unset;
36
+ --conduction-pagination-current-page-border-style: unset;
37
+ --conduction-pagination-current-page-border-color: unset;
32
38
 
33
39
  --conduction-pagination-page-hover-color: #4376fc;
34
40
  --conduction-pagination-page-hover-background-color: #ffffff;
35
41
  --conduction-pagination-page-hover-text-decoration: unset;
36
42
  --conduction-pagination-page-hover-text-decoration-thickness: 0px;
43
+ --conduction-pagination-page-hover-border-width: unset;
44
+ --conduction-pagination-page-hover-border-style: unset;
45
+ --conduction-pagination-page-hover-border-color: unset;
37
46
  }
38
47
 
39
48
  .container {
@@ -61,6 +70,7 @@
61
70
  font-size: var(--conduction-pagination-item-font-size);
62
71
  font-weight: var(--conduction-pagination-item-font-weight);
63
72
  font-family: var(--conduction-pagination-item-font-family);
73
+ border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
64
74
  }
65
75
 
66
76
  .button {
@@ -72,6 +82,7 @@
72
82
  background-color: var(--conduction-pagination-current-page-background-color);
73
83
  font-weight: var(--conduction-pagination-current-page-font-weight);
74
84
  text-decoration: var(--conduction-pagination-current-page-text-decoration);
85
+ border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
75
86
  }
76
87
 
77
88
  .disabled:hover,
@@ -93,6 +104,7 @@
93
104
  background-color: var(--conduction-pagination-page-hover-background-color);
94
105
  text-decoration: var(--conduction-pagination-page-hover-text-decoration);
95
106
  text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
107
+ border: var(--conduction-pagination-page-hover-border-width) var(--conduction-pagination-page-hover-border-style) var(--conduction-pagination-page-hover-border-color);
96
108
  }
97
109
 
98
110
  .button {
package/src/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -1,11 +1,17 @@
1
1
  :root {
2
2
  --conduction-card-wrapper-background-color: #ffffff;
3
- /* --conduction-card-wrapper-border-color: unset; */
4
3
  /* --conduction-card-wrapper-border-width: unset; */
5
4
  /* --conduction-card-wrapper-border-style: unset; */
5
+ /* --conduction-card-wrapper-border-color: unset; */
6
+ /* --conduction-card-wrapper-border-bottom-width: unset; */
7
+ /* --conduction-card-wrapper-border-bottom-style: unset; */
8
+ /* --conduction-card-wrapper-border-bottom-color: unset; */
9
+ /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
10
+ /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
11
+ /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
6
12
  --conduction-card-wrapper-border-radius: 16px;
7
13
  --conduction-card-wrapper-color: #000000;
8
- /* --conduction-card-wrapper-background-color-hover: unset; */
14
+ /* --conduction-card-wrapper-hover-background-color: unset; */
9
15
  --conduction-card-wrapper-padding-inline-end: 18px;
10
16
  --conduction-card-wrapper-padding-inline-start: 18px;
11
17
  --conduction-card-wrapper-padding-block-end: 18px;
@@ -24,9 +30,15 @@
24
30
  border-radius: var(--conduction-card-wrapper-border-radius);
25
31
  border-width: var(--conduction-card-wrapper-border-width);
26
32
  border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
33
+ border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
34
+ var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
35
+ var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
27
36
  }
28
37
 
29
38
  .container:hover {
30
39
  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
40
+ border-bottom: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-border-width))
41
+ var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-border-style))
42
+ var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-border-color));
31
43
  cursor: pointer;
32
44
  }