@conduction/components 2.1.38 → 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 +4 -0
  2. package/lib/components/Pagination/Pagination.module.css +24 -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 +24 -0
  6. package/src/components/card/cardWrapper/CardWrapper.module.css +14 -2
package/README.md CHANGED
@@ -4,6 +4,10 @@
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.
10
+ - 2.1.39: Added more tokens to Pagination.
7
11
  - 2.1.38: Added Pagination.
8
12
  - 2.1.37: Added more design-tokens to all select options.
9
13
  - 2.1.36:
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -13,6 +13,12 @@
13
13
  --conduction-pagination-item-padding-inline-end: 8px;
14
14
  --conduction-pagination-item-padding-block-start: 8px;
15
15
  --conduction-pagination-item-padding-block-end: 8px;
16
+ --conduction-pagination-item-font-size: var(--skeleton-font-size-md);
17
+ --conduction-pagination-item-font-weight: var(--skeleton-font-weight-normal);
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;
16
22
 
17
23
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
18
24
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -26,8 +32,17 @@
26
32
  --conduction-pagination-current-page-color: #ffffff;
27
33
  --conduction-pagination-current-page-font-weight: bold;
28
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;
29
38
 
30
39
  --conduction-pagination-page-hover-color: #4376fc;
40
+ --conduction-pagination-page-hover-background-color: #ffffff;
41
+ --conduction-pagination-page-hover-text-decoration: unset;
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;
31
46
  }
32
47
 
33
48
  .container {
@@ -52,6 +67,10 @@
52
67
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
53
68
  padding-block-start: var(--conduction-pagination-item-padding-block-start);
54
69
  padding-block-end: var(--conduction-pagination-item-padding-block-end);
70
+ font-size: var(--conduction-pagination-item-font-size);
71
+ font-weight: var(--conduction-pagination-item-font-weight);
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);
55
74
  }
56
75
 
57
76
  .button {
@@ -63,6 +82,7 @@
63
82
  background-color: var(--conduction-pagination-current-page-background-color);
64
83
  font-weight: var(--conduction-pagination-current-page-font-weight);
65
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);
66
86
  }
67
87
 
68
88
  .disabled:hover,
@@ -81,6 +101,10 @@
81
101
 
82
102
  .container > li:hover:not(.disabled):not(.currentPage) > a {
83
103
  color: var(--conduction-pagination-page-hover-color);
104
+ background-color: var(--conduction-pagination-page-hover-background-color);
105
+ text-decoration: var(--conduction-pagination-page-hover-text-decoration);
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);
84
108
  }
85
109
 
86
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.38",
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
@@ -13,6 +13,12 @@
13
13
  --conduction-pagination-item-padding-inline-end: 8px;
14
14
  --conduction-pagination-item-padding-block-start: 8px;
15
15
  --conduction-pagination-item-padding-block-end: 8px;
16
+ --conduction-pagination-item-font-size: var(--skeleton-font-size-md);
17
+ --conduction-pagination-item-font-weight: var(--skeleton-font-weight-normal);
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;
16
22
 
17
23
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
18
24
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -26,8 +32,17 @@
26
32
  --conduction-pagination-current-page-color: #ffffff;
27
33
  --conduction-pagination-current-page-font-weight: bold;
28
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;
29
38
 
30
39
  --conduction-pagination-page-hover-color: #4376fc;
40
+ --conduction-pagination-page-hover-background-color: #ffffff;
41
+ --conduction-pagination-page-hover-text-decoration: unset;
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;
31
46
  }
32
47
 
33
48
  .container {
@@ -52,6 +67,10 @@
52
67
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
53
68
  padding-block-start: var(--conduction-pagination-item-padding-block-start);
54
69
  padding-block-end: var(--conduction-pagination-item-padding-block-end);
70
+ font-size: var(--conduction-pagination-item-font-size);
71
+ font-weight: var(--conduction-pagination-item-font-weight);
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);
55
74
  }
56
75
 
57
76
  .button {
@@ -63,6 +82,7 @@
63
82
  background-color: var(--conduction-pagination-current-page-background-color);
64
83
  font-weight: var(--conduction-pagination-current-page-font-weight);
65
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);
66
86
  }
67
87
 
68
88
  .disabled:hover,
@@ -81,6 +101,10 @@
81
101
 
82
102
  .container > li:hover:not(.disabled):not(.currentPage) > a {
83
103
  color: var(--conduction-pagination-page-hover-color);
104
+ background-color: var(--conduction-pagination-page-hover-background-color);
105
+ text-decoration: var(--conduction-pagination-page-hover-text-decoration);
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);
84
108
  }
85
109
 
86
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
  }