@zendeskgarden/react-pagination 8.74.2 → 8.75.0

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 (3) hide show
  1. package/dist/index.cjs.js +16 -16
  2. package/dist/index.esm.js +17 -17
  3. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -57,30 +57,30 @@ function _extends$4() {
57
57
  const COMPONENT_ID$6 = 'pagination.pagination_view';
58
58
  const StyledPagination = styled__default.default.ul.attrs({
59
59
  'data-garden-id': COMPONENT_ID$6,
60
- 'data-garden-version': '8.74.2'
60
+ 'data-garden-version': '8.75.0'
61
61
  }).withConfig({
62
62
  displayName: "StyledPagination",
63
63
  componentId: "sc-1b7nye9-0"
64
- })(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
64
+ })(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
65
65
  StyledPagination.defaultProps = {
66
66
  theme: reactTheming.DEFAULT_THEME
67
67
  };
68
68
 
69
69
  const COMPONENT_ID$5 = 'pagination.page';
70
70
  const colorStyles = props => {
71
- const defaultColor = reactTheming.getColor('neutralHue', 600, props.theme);
72
- const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
73
- const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
74
- const activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
75
- const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
71
+ const defaultColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
72
+ const hoverForegroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
73
+ const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
74
+ const activeForegroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
75
+ const activeBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
76
76
  const currentForegroundColor = activeForegroundColor;
77
77
  const currentBackgroundColor = hoverBackgroundColor;
78
- const currentHoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.16);
79
- const currentActiveBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
78
+ const currentHoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.16);
79
+ const currentActiveBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.28);
80
80
  return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
81
81
  theme: props.theme,
82
82
  inset: true
83
- }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColor('grey', 300, props.theme));
83
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColorV8('grey', 300, props.theme));
84
84
  };
85
85
  const sizeStyles$2 = props => {
86
86
  const fontSize = props.theme.fontSizes.md;
@@ -91,7 +91,7 @@ const sizeStyles$2 = props => {
91
91
  };
92
92
  const StyledPageBase = styled__default.default.li.attrs({
93
93
  'data-garden-id': COMPONENT_ID$5,
94
- 'data-garden-version': '8.74.2'
94
+ 'data-garden-version': '8.75.0'
95
95
  }).withConfig({
96
96
  displayName: "StyledPageBase",
97
97
  componentId: "sc-lw1w9j-0"
@@ -107,7 +107,7 @@ const sizeStyles$1 = props => {
107
107
  };
108
108
  const StyledPage = styled__default.default(StyledPageBase).attrs({
109
109
  'data-garden-id': COMPONENT_ID$4,
110
- 'data-garden-version': '8.74.2'
110
+ 'data-garden-version': '8.75.0'
111
111
  }).withConfig({
112
112
  displayName: "StyledPage",
113
113
  componentId: "sc-1k0een3-0"
@@ -119,7 +119,7 @@ StyledPage.defaultProps = {
119
119
  const COMPONENT_ID$3 = 'cursor_pagination';
120
120
  const StyledCursorPagination = styled__default.default.nav.attrs({
121
121
  'data-garden-id': COMPONENT_ID$3,
122
- 'data-garden-version': '8.74.2'
122
+ 'data-garden-version': '8.75.0'
123
123
  }).withConfig({
124
124
  displayName: "StyledCursorPagination",
125
125
  componentId: "sc-qmfecg-0"
@@ -131,7 +131,7 @@ StyledCursorPagination.defaultProps = {
131
131
  const COMPONENT_ID$2 = 'cursor_pagination.cursor';
132
132
  const StyledCursor = styled__default.default(StyledPageBase).attrs({
133
133
  'data-garden-id': COMPONENT_ID$2,
134
- 'data-garden-version': '8.74.2',
134
+ 'data-garden-version': '8.75.0',
135
135
  as: 'button'
136
136
  }).withConfig({
137
137
  displayName: "StyledCursor",
@@ -175,7 +175,7 @@ const sizeStyles = props => {
175
175
  };
176
176
  const StyledGap = styled__default.default(StyledPage).attrs({
177
177
  'data-garden-id': COMPONENT_ID$1,
178
- 'data-garden-version': '8.74.2'
178
+ 'data-garden-version': '8.75.0'
179
179
  }).withConfig({
180
180
  displayName: "StyledGap",
181
181
  componentId: "sc-1hqjltf-0"
@@ -187,7 +187,7 @@ StyledGap.defaultProps = {
187
187
  const COMPONENT_ID = 'pagination.navigation';
188
188
  const StyledNavigation = styled__default.default(StyledPage).attrs({
189
189
  'data-garden-id': COMPONENT_ID,
190
- 'data-garden-version': '8.74.2'
190
+ 'data-garden-version': '8.75.0'
191
191
  }).withConfig({
192
192
  displayName: "StyledNavigation",
193
193
  componentId: "sc-184uuwe-0"
package/dist/index.esm.js CHANGED
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
11
11
  import styled, { css, ThemeContext } from 'styled-components';
12
12
  import { usePagination } from '@zendeskgarden/container-pagination';
13
13
  import { getControlledValue } from '@zendeskgarden/container-utilities';
14
- import { getColor, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
14
+ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
15
15
  import { math } from 'polished';
16
16
 
17
17
  function _extends$4() {
@@ -32,30 +32,30 @@ function _extends$4() {
32
32
  const COMPONENT_ID$6 = 'pagination.pagination_view';
33
33
  const StyledPagination = styled.ul.attrs({
34
34
  'data-garden-id': COMPONENT_ID$6,
35
- 'data-garden-version': '8.74.2'
35
+ 'data-garden-version': '8.75.0'
36
36
  }).withConfig({
37
37
  displayName: "StyledPagination",
38
38
  componentId: "sc-1b7nye9-0"
39
- })(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
39
+ })(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
40
40
  StyledPagination.defaultProps = {
41
41
  theme: DEFAULT_THEME
42
42
  };
43
43
 
44
44
  const COMPONENT_ID$5 = 'pagination.page';
45
45
  const colorStyles = props => {
46
- const defaultColor = getColor('neutralHue', 600, props.theme);
47
- const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
48
- const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
49
- const activeForegroundColor = getColor('neutralHue', 800, props.theme);
50
- const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
46
+ const defaultColor = getColorV8('neutralHue', 600, props.theme);
47
+ const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
48
+ const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
49
+ const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
50
+ const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
51
51
  const currentForegroundColor = activeForegroundColor;
52
52
  const currentBackgroundColor = hoverBackgroundColor;
53
- const currentHoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.16);
54
- const currentActiveBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
53
+ const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16);
54
+ const currentActiveBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
55
55
  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
56
56
  theme: props.theme,
57
57
  inset: true
58
- }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColor('grey', 300, props.theme));
58
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColorV8('grey', 300, props.theme));
59
59
  };
60
60
  const sizeStyles$2 = props => {
61
61
  const fontSize = props.theme.fontSizes.md;
@@ -66,7 +66,7 @@ const sizeStyles$2 = props => {
66
66
  };
67
67
  const StyledPageBase = styled.li.attrs({
68
68
  'data-garden-id': COMPONENT_ID$5,
69
- 'data-garden-version': '8.74.2'
69
+ 'data-garden-version': '8.75.0'
70
70
  }).withConfig({
71
71
  displayName: "StyledPageBase",
72
72
  componentId: "sc-lw1w9j-0"
@@ -82,7 +82,7 @@ const sizeStyles$1 = props => {
82
82
  };
83
83
  const StyledPage = styled(StyledPageBase).attrs({
84
84
  'data-garden-id': COMPONENT_ID$4,
85
- 'data-garden-version': '8.74.2'
85
+ 'data-garden-version': '8.75.0'
86
86
  }).withConfig({
87
87
  displayName: "StyledPage",
88
88
  componentId: "sc-1k0een3-0"
@@ -94,7 +94,7 @@ StyledPage.defaultProps = {
94
94
  const COMPONENT_ID$3 = 'cursor_pagination';
95
95
  const StyledCursorPagination = styled.nav.attrs({
96
96
  'data-garden-id': COMPONENT_ID$3,
97
- 'data-garden-version': '8.74.2'
97
+ 'data-garden-version': '8.75.0'
98
98
  }).withConfig({
99
99
  displayName: "StyledCursorPagination",
100
100
  componentId: "sc-qmfecg-0"
@@ -106,7 +106,7 @@ StyledCursorPagination.defaultProps = {
106
106
  const COMPONENT_ID$2 = 'cursor_pagination.cursor';
107
107
  const StyledCursor = styled(StyledPageBase).attrs({
108
108
  'data-garden-id': COMPONENT_ID$2,
109
- 'data-garden-version': '8.74.2',
109
+ 'data-garden-version': '8.75.0',
110
110
  as: 'button'
111
111
  }).withConfig({
112
112
  displayName: "StyledCursor",
@@ -150,7 +150,7 @@ const sizeStyles = props => {
150
150
  };
151
151
  const StyledGap = styled(StyledPage).attrs({
152
152
  'data-garden-id': COMPONENT_ID$1,
153
- 'data-garden-version': '8.74.2'
153
+ 'data-garden-version': '8.75.0'
154
154
  }).withConfig({
155
155
  displayName: "StyledGap",
156
156
  componentId: "sc-1hqjltf-0"
@@ -162,7 +162,7 @@ StyledGap.defaultProps = {
162
162
  const COMPONENT_ID = 'pagination.navigation';
163
163
  const StyledNavigation = styled(StyledPage).attrs({
164
164
  'data-garden-id': COMPONENT_ID,
165
- 'data-garden-version': '8.74.2'
165
+ 'data-garden-version': '8.75.0'
166
166
  }).withConfig({
167
167
  displayName: "StyledNavigation",
168
168
  componentId: "sc-184uuwe-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-pagination",
3
- "version": "8.74.2",
3
+ "version": "8.75.0",
4
4
  "description": "Components relating to pagination in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^4.2.0 || ^5.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^8.74.2",
36
+ "@zendeskgarden/react-theming": "^8.75.0",
37
37
  "@zendeskgarden/svg-icons": "7.0.0"
38
38
  },
39
39
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
49
+ "gitHead": "56a54793a611efc223b8e36262d428365613c853"
50
50
  }