@equinor/eds-core-react 0.18.0-envis.1 → 0.18.0-envis.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.
@@ -83,29 +83,23 @@ const {
83
83
  } = edsTokens.tokens;
84
84
  const button = {
85
85
  background: 'transparent',
86
- // height: buttonHeight,
86
+ height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
87
87
  typography: { ...buttonTypography,
88
88
  textAlign: 'center',
89
- fontSize: '0.875rem' // 14px - 14/16
90
-
89
+ fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
91
90
  },
92
91
  border: {
93
92
  type: 'border',
94
- width: '1px',
93
+ width: "var(--eds_button__border_width, 1px)",
95
94
  color: 'transparent',
96
- //radius: buttonBorderRadius,
97
- radius: '0.2857em',
98
- // 4px - 4/14
95
+ radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$2, ")"),
99
96
  style: 'solid'
100
97
  },
101
98
  spacings: {
102
- top: 'calc(0.7142em - 1px)',
103
- // calc(10px - 1px) - 10/14 (line-height er 1.143em = 16.002px)
104
- bottom: 'calc(0.7142em - 1px)',
105
- left: '1.1428em',
106
- right: '1.1428em' // left: medium,
107
- // right: medium,
108
-
99
+ top: 'var(--eds_button__padding_y, 0)',
100
+ bottom: 'var(--eds_button__padding_y, 0)',
101
+ left: "var(--eds_button__padding_x, ".concat(medium$6, ")"),
102
+ right: "var(--eds_button__padding_x, ".concat(medium$6, ")")
109
103
  },
110
104
  clickbound: {
111
105
  height: clicboundHeight$1,
@@ -117,8 +111,8 @@ const button = {
117
111
  },
118
112
  entities: {
119
113
  icon: {
120
- height: '24px',
121
- width: '24px'
114
+ height: 'var(--eds_button__icon__size, 24px)',
115
+ width: 'var(--eds_button__icon__size, 24px)'
122
116
  }
123
117
  },
124
118
  states: {
@@ -127,9 +121,7 @@ const button = {
127
121
  type: 'border',
128
122
  width: '1px',
129
123
  color: 'transparent',
130
- //radius: buttonBorderRadius,
131
- radius: '0.2857em',
132
- // 4px - 4/14
124
+ radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$2, ")"),
133
125
  style: 'solid'
134
126
  }
135
127
  },
@@ -158,12 +150,10 @@ const button = {
158
150
  },
159
151
  modes: {
160
152
  compact: {
161
- minHeight: '1.7142em',
162
- // 24px
153
+ height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
163
154
  spacings: {
164
- top: 'calc(0.2857em - 1px)',
165
- // calc(4px - 1px) - 4/14
166
- bottom: 'calc(0.2857em - 1px)'
155
+ top: 'var(--eds_button__padding_y_compact, 0)',
156
+ bottom: 'var(--eds_button__padding_y_compact, 0)'
167
157
  },
168
158
  clickbound: {
169
159
  height: compactClickboundHeight$1,
@@ -1164,7 +1154,7 @@ const FullWidthCenterContent = styled__default['default'].span.withConfig({
1164
1154
  const FullWidthInner = styled__default['default'].span.withConfig({
1165
1155
  displayName: "InnerFullWidth__FullWidthInner",
1166
1156
  componentId: "sc-qeawkb-1"
1167
- })(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:-4px;margin-bottom:-4px;}>:is(svg,img):first-child{margin-right:0.5714em;}>:is(svg,img):last-child{margin-left:0.5714em;}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:2.2857em;}> span:last-child{margin-right:2.2857em;}> span:only-child{margin-right:0;margin-left:0;}"]);
1157
+ })(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}>:is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
1168
1158
  const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth({
1169
1159
  children
1170
1160
  }, ref) {
@@ -1243,7 +1233,7 @@ const getToken$1 = (variant, color) => {
1243
1233
  const Inner = styled__default['default'].span.withConfig({
1244
1234
  displayName: "Button__Inner",
1245
1235
  componentId: "sc-1hs0myn-0"
1246
- })(["display:grid;grid-gap:0.5714em;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:-4px;margin-bottom:-4px;}"]);
1236
+ })(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
1247
1237
  const ButtonBase = styled__default['default'].button.withConfig({
1248
1238
  displayName: "Button__ButtonBase",
1249
1239
  componentId: "sc-1hs0myn-1"
@@ -1501,8 +1491,11 @@ const {
1501
1491
  }
1502
1492
  } = edsTokens.tokens;
1503
1493
  const tableCell = {
1504
- height: '48px',
1494
+ height: 'var(--eds_table__cell__height, 48px)',
1505
1495
  background: backgroundColor$5,
1496
+ align: {
1497
+ vertical: 'var(--eds_table__cell__vertical_align, inherit)'
1498
+ },
1506
1499
  border: {
1507
1500
  type: 'bordergroup',
1508
1501
  bottom: {
@@ -1512,13 +1505,14 @@ const tableCell = {
1512
1505
  }
1513
1506
  },
1514
1507
  spacings: {
1515
- top: '0',
1516
- bottom: '0',
1517
- left: medium$5,
1518
- right: medium$5
1508
+ top: 'var(--eds_table__cell__padding_y, 0)',
1509
+ bottom: 'var(--eds_table__cell__padding_y, 0)',
1510
+ left: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")"),
1511
+ right: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")")
1519
1512
  },
1520
1513
  typography: { ...cellTypography$1,
1521
- color: typographyColor$1
1514
+ color: typographyColor$1,
1515
+ fontSize: "var(--eds_table__font_size, ".concat(cellTypography$1.fontSize, ")")
1522
1516
  },
1523
1517
  states: {
1524
1518
  active: {
@@ -1557,9 +1551,15 @@ const tableCell = {
1557
1551
  },
1558
1552
  modes: {
1559
1553
  compact: {
1560
- height: '32px',
1554
+ height: 'var(--eds_table__cell__height_compact, 32px)',
1561
1555
  typography: { ...compactTypography$1.table.cell_text,
1562
1556
  color: typographyColor$1
1557
+ },
1558
+ spacings: {
1559
+ top: 'var(--eds_table__cell__padding_y_compact, 0)',
1560
+ bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
1561
+ left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")"),
1562
+ right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")")
1563
1563
  }
1564
1564
  }
1565
1565
  },
@@ -1644,10 +1644,11 @@ const StyledTableCell$1 = styled__default['default'].td.withConfig({
1644
1644
  height,
1645
1645
  typography,
1646
1646
  spacings,
1647
- border
1647
+ border,
1648
+ align
1648
1649
  } = theme;
1649
1650
  const backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
1650
- const base = styled.css(["min-height:", ";height:", ";background:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
1651
+ const base = styled.css(["min-height:", ";height:", ";background:", ";vertical-align:", ";", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
1651
1652
  return base;
1652
1653
  });
1653
1654
  const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell({
@@ -1721,10 +1722,14 @@ const {
1721
1722
  }
1722
1723
  } = edsTokens.tokens;
1723
1724
  const token$4 = {
1724
- height: '48px',
1725
+ height: 'var(--eds_table__cell__height, 48px)',
1725
1726
  background: backgroundColor$4,
1727
+ align: {
1728
+ vertical: 'var(--eds_table__cell__vertical_align, inherit)'
1729
+ },
1726
1730
  typography: { ...cellTypography,
1727
- color: typographyColor
1731
+ color: typographyColor,
1732
+ fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
1728
1733
  },
1729
1734
  border: {
1730
1735
  type: 'bordergroup',
@@ -1736,10 +1741,10 @@ const token$4 = {
1736
1741
  }
1737
1742
  },
1738
1743
  spacings: {
1739
- top: '0',
1740
- bottom: '0',
1741
- left: medium$4,
1742
- right: medium$4
1744
+ top: 'var(--eds_table__cell__padding_y, 0)',
1745
+ bottom: 'var(--eds_table__cell__padding_y, 0)',
1746
+ left: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")"),
1747
+ right: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")")
1743
1748
  },
1744
1749
  states: {
1745
1750
  active: {
@@ -1779,8 +1784,14 @@ const token$4 = {
1779
1784
  },
1780
1785
  modes: {
1781
1786
  compact: {
1782
- height: '32px',
1783
- typography: compactTypography.table.cell_header
1787
+ height: 'var(--eds_table__cell__height_compact, 32px)',
1788
+ typography: compactTypography.table.cell_header,
1789
+ spacings: {
1790
+ top: 'var(--eds_table__cell__padding_y_compact, 0)',
1791
+ bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
1792
+ left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")"),
1793
+ right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")")
1794
+ }
1784
1795
  }
1785
1796
  }
1786
1797
  };
@@ -43,7 +43,7 @@ const getToken = (variant, color) => {
43
43
  const Inner = styled.span.withConfig({
44
44
  displayName: "Button__Inner",
45
45
  componentId: "sc-1hs0myn-0"
46
- })(["display:grid;grid-gap:0.5714em;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:-4px;margin-bottom:-4px;}"]);
46
+ })(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
47
47
  const ButtonBase = styled.button.withConfig({
48
48
  displayName: "Button__ButtonBase",
49
49
  componentId: "sc-1hs0myn-1"
@@ -9,7 +9,7 @@ const FullWidthCenterContent = styled.span.withConfig({
9
9
  const FullWidthInner = styled.span.withConfig({
10
10
  displayName: "InnerFullWidth__FullWidthInner",
11
11
  componentId: "sc-qeawkb-1"
12
- })(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:-4px;margin-bottom:-4px;}>:is(svg,img):first-child{margin-right:0.5714em;}>:is(svg,img):last-child{margin-left:0.5714em;}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:2.2857em;}> span:last-child{margin-right:2.2857em;}> span:only-child{margin-right:0;margin-left:0;}"]);
12
+ })(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}>:is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
13
13
  const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
14
14
  children
15
15
  }, ref) {
@@ -47,29 +47,23 @@ const {
47
47
  } = tokens;
48
48
  const button = {
49
49
  background: 'transparent',
50
- // height: buttonHeight,
50
+ height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
51
51
  typography: { ...buttonTypography,
52
52
  textAlign: 'center',
53
- fontSize: '0.875rem' // 14px - 14/16
54
-
53
+ fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
55
54
  },
56
55
  border: {
57
56
  type: 'border',
58
- width: '1px',
57
+ width: "var(--eds_button__border_width, 1px)",
59
58
  color: 'transparent',
60
- //radius: buttonBorderRadius,
61
- radius: '0.2857em',
62
- // 4px - 4/14
59
+ radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
63
60
  style: 'solid'
64
61
  },
65
62
  spacings: {
66
- top: 'calc(0.7142em - 1px)',
67
- // calc(10px - 1px) - 10/14 (line-height er 1.143em = 16.002px)
68
- bottom: 'calc(0.7142em - 1px)',
69
- left: '1.1428em',
70
- right: '1.1428em' // left: medium,
71
- // right: medium,
72
-
63
+ top: 'var(--eds_button__padding_y, 0)',
64
+ bottom: 'var(--eds_button__padding_y, 0)',
65
+ left: "var(--eds_button__padding_x, ".concat(medium, ")"),
66
+ right: "var(--eds_button__padding_x, ".concat(medium, ")")
73
67
  },
74
68
  clickbound: {
75
69
  height: clicboundHeight,
@@ -81,8 +75,8 @@ const button = {
81
75
  },
82
76
  entities: {
83
77
  icon: {
84
- height: '24px',
85
- width: '24px'
78
+ height: 'var(--eds_button__icon__size, 24px)',
79
+ width: 'var(--eds_button__icon__size, 24px)'
86
80
  }
87
81
  },
88
82
  states: {
@@ -91,9 +85,7 @@ const button = {
91
85
  type: 'border',
92
86
  width: '1px',
93
87
  color: 'transparent',
94
- //radius: buttonBorderRadius,
95
- radius: '0.2857em',
96
- // 4px - 4/14
88
+ radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
97
89
  style: 'solid'
98
90
  }
99
91
  },
@@ -122,12 +114,10 @@ const button = {
122
114
  },
123
115
  modes: {
124
116
  compact: {
125
- minHeight: '1.7142em',
126
- // 24px
117
+ height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
127
118
  spacings: {
128
- top: 'calc(0.2857em - 1px)',
129
- // calc(4px - 1px) - 4/14
130
- bottom: 'calc(0.2857em - 1px)'
119
+ top: 'var(--eds_button__padding_y_compact, 0)',
120
+ bottom: 'var(--eds_button__padding_y_compact, 0)'
131
121
  },
132
122
  clickbound: {
133
123
  height: compactClickboundHeight,
@@ -20,10 +20,11 @@ const StyledTableCell = styled.td.withConfig({
20
20
  height,
21
21
  typography,
22
22
  spacings,
23
- border
23
+ border,
24
+ align
24
25
  } = theme;
25
26
  const backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
26
- const base = css(["min-height:", ";height:", ";background:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
27
+ const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
27
28
  return base;
28
29
  });
29
30
  const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
@@ -56,8 +56,11 @@ const {
56
56
  }
57
57
  } = tokens;
58
58
  const tableCell = {
59
- height: '48px',
59
+ height: 'var(--eds_table__cell__height, 48px)',
60
60
  background: backgroundColor,
61
+ align: {
62
+ vertical: 'var(--eds_table__cell__vertical_align, inherit)'
63
+ },
61
64
  border: {
62
65
  type: 'bordergroup',
63
66
  bottom: {
@@ -67,13 +70,14 @@ const tableCell = {
67
70
  }
68
71
  },
69
72
  spacings: {
70
- top: '0',
71
- bottom: '0',
72
- left: medium,
73
- right: medium
73
+ top: 'var(--eds_table__cell__padding_y, 0)',
74
+ bottom: 'var(--eds_table__cell__padding_y, 0)',
75
+ left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
76
+ right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
74
77
  },
75
78
  typography: { ...cellTypography,
76
- color: typographyColor
79
+ color: typographyColor,
80
+ fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
77
81
  },
78
82
  states: {
79
83
  active: {
@@ -112,9 +116,15 @@ const tableCell = {
112
116
  },
113
117
  modes: {
114
118
  compact: {
115
- height: '32px',
119
+ height: 'var(--eds_table__cell__height_compact, 32px)',
116
120
  typography: { ...compactTypography.table.cell_text,
117
121
  color: typographyColor
122
+ },
123
+ spacings: {
124
+ top: 'var(--eds_table__cell__padding_y_compact, 0)',
125
+ bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
126
+ left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
127
+ right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
118
128
  }
119
129
  }
120
130
  },
@@ -51,10 +51,14 @@ const {
51
51
  }
52
52
  } = tokens;
53
53
  const token = {
54
- height: '48px',
54
+ height: 'var(--eds_table__cell__height, 48px)',
55
55
  background: backgroundColor,
56
+ align: {
57
+ vertical: 'var(--eds_table__cell__vertical_align, inherit)'
58
+ },
56
59
  typography: { ...cellTypography,
57
- color: typographyColor
60
+ color: typographyColor,
61
+ fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
58
62
  },
59
63
  border: {
60
64
  type: 'bordergroup',
@@ -66,10 +70,10 @@ const token = {
66
70
  }
67
71
  },
68
72
  spacings: {
69
- top: '0',
70
- bottom: '0',
71
- left: medium,
72
- right: medium
73
+ top: 'var(--eds_table__cell__padding_y, 0)',
74
+ bottom: 'var(--eds_table__cell__padding_y, 0)',
75
+ left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
76
+ right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
73
77
  },
74
78
  states: {
75
79
  active: {
@@ -109,8 +113,14 @@ const token = {
109
113
  },
110
114
  modes: {
111
115
  compact: {
112
- height: '32px',
113
- typography: compactTypography.table.cell_header
116
+ height: 'var(--eds_table__cell__height_compact, 32px)',
117
+ typography: compactTypography.table.cell_header,
118
+ spacings: {
119
+ top: 'var(--eds_table__cell__padding_y_compact, 0)',
120
+ bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
121
+ left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
122
+ right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
123
+ }
114
124
  }
115
125
  }
116
126
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/eds-core-react",
3
- "version": "0.18.0-envis.1",
3
+ "version": "0.18.0-envis.2",
4
4
  "description": "The React implementation of the Equinor Design System",
5
5
  "sideEffects": [
6
6
  "**/*.css"