@workday/canvas-kit-react 11.0.0-alpha.775-next.0 → 11.0.0-alpha.778-next.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.
- package/button/lib/BaseButton.tsx +1 -1
- package/button/lib/DeleteButton.tsx +1 -1
- package/button/lib/PrimaryButton.tsx +3 -3
- package/button/lib/SecondaryButton.tsx +3 -3
- package/button/lib/TertiaryButton.tsx +3 -3
- package/checkbox/lib/CheckboxInput.tsx +7 -7
- package/collection/lib/useCursorListModel.tsx +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +18 -18
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +16 -16
- package/dist/commonjs/checkbox/lib/CheckboxInput.js +4 -4
- package/dist/commonjs/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useCursorListModel.js +1 -1
- package/dist/commonjs/switch/lib/Switch.js +7 -7
- package/dist/es6/button/lib/BaseButton.js +18 -18
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +16 -16
- package/dist/es6/checkbox/lib/CheckboxInput.js +4 -4
- package/dist/es6/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useCursorListModel.js +1 -1
- package/dist/es6/switch/lib/Switch.js +8 -8
- package/package.json +4 -4
- package/switch/lib/Switch.tsx +6 -6
|
@@ -185,7 +185,7 @@ export const buttonStencil = createStencil({
|
|
|
185
185
|
separation: 2,
|
|
186
186
|
innerColor: cssVar(
|
|
187
187
|
buttonColorPropVars.focus.boxShadowInner,
|
|
188
|
-
cssVar(boxShadowInner, system.color.
|
|
188
|
+
cssVar(boxShadowInner, system.color.border.inverse)
|
|
189
189
|
),
|
|
190
190
|
outerColor: cssVar(
|
|
191
191
|
buttonColorPropVars.focus.boxShadowOuter,
|
|
@@ -28,7 +28,7 @@ const deleteButtonStencil = createStencil({
|
|
|
28
28
|
[buttonStencil.vars.background]: brand.error.base,
|
|
29
29
|
[buttonStencil.vars.label]: brand.error.accent,
|
|
30
30
|
[systemIconStencil.vars.color]: brand.error.accent,
|
|
31
|
-
[buttonStencil.vars.boxShadowInner]: system.color.
|
|
31
|
+
[buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
|
|
32
32
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
33
33
|
},
|
|
34
34
|
// Hover Styles
|
|
@@ -32,7 +32,7 @@ const primaryButtonStencil = createStencil({
|
|
|
32
32
|
'&:focus-visible, &.focus': {
|
|
33
33
|
[buttonStencil.vars.background]: brand.primary.base,
|
|
34
34
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
35
|
-
[buttonStencil.vars.boxShadowInner]: system.color.
|
|
35
|
+
[buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
|
|
36
36
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
37
37
|
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
38
38
|
},
|
|
@@ -68,8 +68,8 @@ const primaryButtonStencil = createStencil({
|
|
|
68
68
|
'&:focus-visible, &.focus': {
|
|
69
69
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
70
70
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
71
|
-
[buttonStencil.vars.boxShadowInner]: system.color.
|
|
72
|
-
[buttonStencil.vars.boxShadowOuter]: system.color.
|
|
71
|
+
[buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
|
|
72
|
+
[buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
|
|
73
73
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
74
74
|
},
|
|
75
75
|
// Hover Styles
|
|
@@ -34,7 +34,7 @@ const secondaryButtonStencil = createStencil({
|
|
|
34
34
|
[buttonStencil.vars.background]: 'transparent',
|
|
35
35
|
[buttonStencil.vars.border]: system.color.border.contrast.default,
|
|
36
36
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
37
|
-
[buttonStencil.vars.boxShadowInner]: system.color.
|
|
37
|
+
[buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
|
|
38
38
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
39
39
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
40
40
|
},
|
|
@@ -74,8 +74,8 @@ const secondaryButtonStencil = createStencil({
|
|
|
74
74
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
75
75
|
[buttonStencil.vars.border]: 'transparent',
|
|
76
76
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
77
|
-
[buttonStencil.vars.boxShadowInner]: system.color.
|
|
78
|
-
[buttonStencil.vars.boxShadowOuter]: system.color.
|
|
77
|
+
[buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
|
|
78
|
+
[buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
|
|
79
79
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
80
80
|
},
|
|
81
81
|
// Hover Styles
|
|
@@ -43,7 +43,7 @@ const tertiaryButtonStencil = createStencil({
|
|
|
43
43
|
...focusRing({
|
|
44
44
|
width: 2,
|
|
45
45
|
separation: 0,
|
|
46
|
-
innerColor: system.color.
|
|
46
|
+
innerColor: system.color.border.inverse,
|
|
47
47
|
outerColor: brand.common.focusOutline,
|
|
48
48
|
}),
|
|
49
49
|
},
|
|
@@ -122,8 +122,8 @@ const tertiaryButtonStencil = createStencil({
|
|
|
122
122
|
inset: 'inner',
|
|
123
123
|
width: 2,
|
|
124
124
|
separation: 2,
|
|
125
|
-
innerColor: system.color.
|
|
126
|
-
outerColor: system.color.
|
|
125
|
+
innerColor: system.color.border.contrast.default,
|
|
126
|
+
outerColor: system.color.border.inverse,
|
|
127
127
|
}),
|
|
128
128
|
},
|
|
129
129
|
// Hover Styles
|
|
@@ -144,7 +144,7 @@ const checkboxInputStencil = createStencil({
|
|
|
144
144
|
},
|
|
145
145
|
'&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
|
|
146
146
|
borderColor: system.color.border.input.inverse,
|
|
147
|
-
backgroundColor: system.color.bg.
|
|
147
|
+
backgroundColor: system.color.bg.default,
|
|
148
148
|
},
|
|
149
149
|
|
|
150
150
|
// Focus state for inverse variant
|
|
@@ -154,8 +154,8 @@ const checkboxInputStencil = createStencil({
|
|
|
154
154
|
width: 2,
|
|
155
155
|
separation: 0,
|
|
156
156
|
animate: false,
|
|
157
|
-
innerColor: system.color.
|
|
158
|
-
outerColor: system.color.
|
|
157
|
+
innerColor: system.color.border.contrast.default,
|
|
158
|
+
outerColor: system.color.border.inverse,
|
|
159
159
|
}),
|
|
160
160
|
},
|
|
161
161
|
'&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
|
|
@@ -165,8 +165,8 @@ const checkboxInputStencil = createStencil({
|
|
|
165
165
|
width: 2,
|
|
166
166
|
separation: 2,
|
|
167
167
|
animate: false,
|
|
168
|
-
innerColor: system.color.
|
|
169
|
-
outerColor: system.color.
|
|
168
|
+
innerColor: system.color.border.contrast.default,
|
|
169
|
+
outerColor: system.color.border.inverse,
|
|
170
170
|
}),
|
|
171
171
|
borderColor: system.color.border.inverse,
|
|
172
172
|
},
|
|
@@ -185,13 +185,13 @@ const checkboxInputStencil = createStencil({
|
|
|
185
185
|
'&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
|
|
186
186
|
borderColor: checkboxBackgroundStencil.vars.errorRingColorInner,
|
|
187
187
|
boxShadow: `
|
|
188
|
-
0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
|
|
188
|
+
0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
|
|
189
189
|
0 0 0 ${px2rem(2)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
|
|
190
190
|
},
|
|
191
191
|
'&:where(:checked, :indeterminate) ~ div:first-of-type': {
|
|
192
192
|
borderColor: 'transparent',
|
|
193
193
|
boxShadow: `
|
|
194
|
-
0 0 0 ${px2rem(2)} ${system.color.
|
|
194
|
+
0 0 0 ${px2rem(2)} ${system.color.border.inverse},
|
|
195
195
|
0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
|
|
196
196
|
0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
|
|
197
197
|
},
|
|
@@ -74,7 +74,7 @@ export type NavigationRequestor = (index: number, model: NavigationInput) => num
|
|
|
74
74
|
/**
|
|
75
75
|
* Get the first item in a list regardless of column count
|
|
76
76
|
*/
|
|
77
|
-
export const getFirst: NavigationRequestor = (
|
|
77
|
+
export const getFirst: NavigationRequestor = () => 0;
|
|
78
78
|
/**
|
|
79
79
|
* Get the last item in a list regardless of column count
|
|
80
80
|
*/
|
|
@@ -51,7 +51,7 @@ exports.buttonStencil = canvas_kit_styling_1.createStencil({
|
|
|
51
51
|
opacity: '',
|
|
52
52
|
borderRadius: '',
|
|
53
53
|
},
|
|
54
|
-
base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));color:var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-
|
|
54
|
+
base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));color:var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-border-inverse))), 0 0 0 4px var(--cnvs-button-color-prop-focus-boxShadowOuter, var(--cnvs-button-boxShadowOuter, var(--cnvs-brand-primary-base)));}&:hover, &.hover{background-color:var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-hover-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-stronger)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-active-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-disabled-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));}" },
|
|
55
55
|
modifiers: {
|
|
56
56
|
/**
|
|
57
57
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
@@ -60,14 +60,14 @@ exports.buttonStencil = canvas_kit_styling_1.createStencil({
|
|
|
60
60
|
* within a button or if there is only an icon and no text.
|
|
61
61
|
*/
|
|
62
62
|
size: {
|
|
63
|
-
large: { name: "
|
|
64
|
-
medium: { name: "
|
|
65
|
-
small: { name: "
|
|
66
|
-
extraSmall: { name: "
|
|
63
|
+
large: { name: "604fe6", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-150);font-size:var(--cnvs-base-font-size-100);letter-spacing:var(--cnvs-base-letter-spacing-200);height:3rem;padding-inline:var(--cnvs-sys-space-x8);min-width:7rem;" },
|
|
64
|
+
medium: { name: "c9a02f", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);min-width:6rem;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" },
|
|
65
|
+
small: { name: "6dd9a6", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" },
|
|
66
|
+
extraSmall: { name: "8e0948", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-50);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }
|
|
67
67
|
},
|
|
68
68
|
// IconPosition Styles
|
|
69
69
|
iconPosition: {
|
|
70
|
-
only: { name: "
|
|
70
|
+
only: { name: "7d4959", styles: "padding:var(--cnvs-sys-space-zero);" },
|
|
71
71
|
start: {},
|
|
72
72
|
end: {}
|
|
73
73
|
}
|
|
@@ -76,51 +76,51 @@ exports.buttonStencil = canvas_kit_styling_1.createStencil({
|
|
|
76
76
|
compound: [
|
|
77
77
|
{
|
|
78
78
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
79
|
-
styles: { name: "
|
|
79
|
+
styles: { name: "b07985", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
82
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
83
|
-
styles: { name: "
|
|
83
|
+
styles: { name: "3e48da", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
87
|
-
styles: { name: "
|
|
87
|
+
styles: { name: "83dc3c", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
88
88
|
},
|
|
89
89
|
{
|
|
90
90
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
91
|
-
styles: { name: "
|
|
91
|
+
styles: { name: "8870fa", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
94
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
95
|
-
styles: { name: "
|
|
95
|
+
styles: { name: "64fb21", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
98
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
99
|
-
styles: { name: "
|
|
99
|
+
styles: { name: "d1ca18", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
103
|
-
styles: { name: "
|
|
103
|
+
styles: { name: "e95cc8", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
107
|
-
styles: { name: "
|
|
107
|
+
styles: { name: "280095", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
|
|
108
108
|
},
|
|
109
109
|
{
|
|
110
110
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
111
|
-
styles: { name: "
|
|
111
|
+
styles: { name: "cbf6b5", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
114
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
115
|
-
styles: { name: "
|
|
115
|
+
styles: { name: "932896", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
119
|
-
styles: { name: "
|
|
119
|
+
styles: { name: "40954e", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
120
120
|
},
|
|
121
121
|
{
|
|
122
122
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
123
|
-
styles: { name: "
|
|
123
|
+
styles: { name: "f32b2f", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
124
124
|
}
|
|
125
125
|
]
|
|
126
126
|
}, "cnvs-button");
|
|
@@ -30,7 +30,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
30
30
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
31
|
const deleteButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
32
|
extends: BaseButton_1.buttonStencil,
|
|
33
|
-
base: { name: "8e9d77", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-
|
|
33
|
+
base: { name: "8e9d77", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-error-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-error-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
34
34
|
}, "cnvs-delete-button");
|
|
35
35
|
/**
|
|
36
36
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
@@ -30,11 +30,11 @@ const Button_1 = require("./Button");
|
|
|
30
30
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
31
|
const primaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
32
|
extends: BaseButton_1.buttonStencil,
|
|
33
|
-
base: { name: "581e61", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-
|
|
33
|
+
base: { name: "581e61", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-primary-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-primary-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}" },
|
|
34
34
|
modifiers: {
|
|
35
35
|
variant: {
|
|
36
36
|
// Inverse Styles
|
|
37
|
-
inverse: { name: "
|
|
37
|
+
inverse: { name: "21544f", styles: "--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-border-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" }
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
}, "cnvs-primary-button");
|
|
@@ -30,10 +30,10 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
30
30
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
31
|
const secondaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
32
|
extends: BaseButton_1.buttonStencil,
|
|
33
|
-
base: { name: "fa2b2a", styles: "box-sizing:border-box;--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-
|
|
33
|
+
base: { name: "fa2b2a", styles: "box-sizing:border-box;--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-default);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-strong);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
34
34
|
modifiers: {
|
|
35
35
|
variant: {
|
|
36
|
-
inverse: { name: "
|
|
36
|
+
inverse: { name: "686fb3", styles: "--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-border-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}, "cnvs-secondary-button");
|
|
@@ -31,71 +31,71 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
31
31
|
const tertiaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
32
|
extends: BaseButton_1.buttonStencil,
|
|
33
33
|
// Base Styles
|
|
34
|
-
base: { name: "e61a81", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--cnvs-button-background:transparent;--cnvs-button-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);box-shadow:0 0 0 0px var(--cnvs-sys-color-
|
|
34
|
+
base: { name: "e61a81", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--cnvs-button-background:transparent;--cnvs-button-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-dark);--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-darkest);--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" },
|
|
35
35
|
modifiers: {
|
|
36
36
|
// IconPosition Styles
|
|
37
37
|
iconPosition: {
|
|
38
|
-
only: { name: "
|
|
38
|
+
only: { name: "0aa062", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
39
39
|
start: {},
|
|
40
40
|
end: {}
|
|
41
41
|
},
|
|
42
42
|
isThemeable: {
|
|
43
|
-
true: { name: "
|
|
43
|
+
true: { name: "1a73e1", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" }
|
|
44
44
|
},
|
|
45
45
|
variant: {
|
|
46
46
|
// Inverse Styles
|
|
47
|
-
inverse: { name: "
|
|
47
|
+
inverse: { name: "e1c564", styles: "--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-soft);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
// Compound Modifier Styles
|
|
51
51
|
compound: [
|
|
52
52
|
{
|
|
53
53
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
54
|
-
styles: { name: "
|
|
54
|
+
styles: { name: "0cc7a0", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
58
|
-
styles: { name: "
|
|
58
|
+
styles: { name: "bad7da", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
61
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
62
|
-
styles: { name: "
|
|
62
|
+
styles: { name: "c28406", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
66
|
-
styles: { name: "
|
|
66
|
+
styles: { name: "1fb946", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
70
|
-
styles: { name: "
|
|
70
|
+
styles: { name: "596acc", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
73
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
74
|
-
styles: { name: "
|
|
74
|
+
styles: { name: "4e1b09", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
78
|
-
styles: { name: "
|
|
78
|
+
styles: { name: "9c2cb4", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
82
|
-
styles: { name: "
|
|
82
|
+
styles: { name: "c9ea0f", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
86
|
-
styles: { name: "
|
|
86
|
+
styles: { name: "09ac12", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
87
87
|
},
|
|
88
88
|
{
|
|
89
89
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
90
|
-
styles: { name: "
|
|
90
|
+
styles: { name: "261906", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
93
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
94
|
-
styles: { name: "
|
|
94
|
+
styles: { name: "b4dfa4", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
95
95
|
},
|
|
96
96
|
{
|
|
97
97
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
98
|
-
styles: { name: "
|
|
98
|
+
styles: { name: "88b1ff", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
99
99
|
}
|
|
100
100
|
]
|
|
101
101
|
}, "cnvs-tertiary-button");
|
|
@@ -29,19 +29,19 @@ const checkboxInputStencil = canvas_kit_styling_1.createStencil({
|
|
|
29
29
|
base: { name: "b01bc2", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: { name: "edefb9", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-
|
|
32
|
+
inverse: { name: "edefb9", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
|
|
33
33
|
},
|
|
34
34
|
disabled: {
|
|
35
|
-
true: { name: "
|
|
35
|
+
true: { name: "0fcee6", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
|
|
36
36
|
},
|
|
37
37
|
error: {
|
|
38
|
-
true: { name: "
|
|
38
|
+
true: { name: "0a2191", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner),\n 0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),\n 0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);}" }
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
compound: [
|
|
42
42
|
{
|
|
43
43
|
modifiers: { variant: 'inverse', error: true },
|
|
44
|
-
styles: { name: "
|
|
44
|
+
styles: { name: "756c93", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}, "cnvs-checkbox-input");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -29,7 +29,7 @@ exports.createNavigationManager = createNavigationManager;
|
|
|
29
29
|
/**
|
|
30
30
|
* Get the first item in a list regardless of column count
|
|
31
31
|
*/
|
|
32
|
-
const getFirst = (
|
|
32
|
+
const getFirst = () => 0;
|
|
33
33
|
exports.getFirst = getFirst;
|
|
34
34
|
/**
|
|
35
35
|
* Get the last item in a list regardless of column count
|
|
@@ -26,7 +26,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
26
26
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
27
27
|
const layout_1 = require("../../layout");
|
|
28
28
|
const switchContainerStencil = canvas_kit_styling_1.createStencil({
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "aeab09", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
|
|
30
30
|
}, "cnvs-switch-container");
|
|
31
31
|
const SwitchContainer = common_1.createComponent('div')({
|
|
32
32
|
displayName: 'SwitchContainer',
|
|
@@ -35,11 +35,11 @@ const SwitchContainer = common_1.createComponent('div')({
|
|
|
35
35
|
},
|
|
36
36
|
});
|
|
37
37
|
const switchInputStencil = canvas_kit_styling_1.createStencil({
|
|
38
|
-
base: { name: "
|
|
38
|
+
base: { name: "1c1c2b", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
39
39
|
modifiers: {
|
|
40
40
|
error: {
|
|
41
|
-
error: { name: "
|
|
42
|
-
alert: { name: "
|
|
41
|
+
error: { name: "786eb0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
|
|
42
|
+
alert: { name: "a877d0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}, "cnvs-switch-input");
|
|
@@ -50,7 +50,7 @@ const SwitchInput = common_1.createComponent('input')({
|
|
|
50
50
|
},
|
|
51
51
|
});
|
|
52
52
|
const switchBackgroundStencil = canvas_kit_styling_1.createStencil({
|
|
53
|
-
base: { name: "
|
|
53
|
+
base: { name: "f185ac", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
|
|
54
54
|
}, "cnvs-switch-background");
|
|
55
55
|
const SwitchBackground = common_1.createComponent('div')({
|
|
56
56
|
displayName: 'SwitchBackground',
|
|
@@ -59,10 +59,10 @@ const SwitchBackground = common_1.createComponent('div')({
|
|
|
59
59
|
},
|
|
60
60
|
});
|
|
61
61
|
const switchCircleStencil = canvas_kit_styling_1.createStencil({
|
|
62
|
-
base: { name: "
|
|
62
|
+
base: { name: "7a2c97", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
|
|
63
63
|
modifiers: {
|
|
64
64
|
checked: {
|
|
65
|
-
true: { name: "
|
|
65
|
+
true: { name: "06e4c0", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}, "cnvs-switch-circle");
|
|
@@ -29,7 +29,7 @@ export const buttonStencil = createStencil({
|
|
|
29
29
|
opacity: '',
|
|
30
30
|
borderRadius: '',
|
|
31
31
|
},
|
|
32
|
-
base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));color:var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-
|
|
32
|
+
base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));color:var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-border-inverse))), 0 0 0 4px var(--cnvs-button-color-prop-focus-boxShadowOuter, var(--cnvs-button-boxShadowOuter, var(--cnvs-brand-primary-base)));}&:hover, &.hover{background-color:var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-hover-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-stronger)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-active-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-disabled-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));}" },
|
|
33
33
|
modifiers: {
|
|
34
34
|
/**
|
|
35
35
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
@@ -38,14 +38,14 @@ export const buttonStencil = createStencil({
|
|
|
38
38
|
* within a button or if there is only an icon and no text.
|
|
39
39
|
*/
|
|
40
40
|
size: {
|
|
41
|
-
large: { name: "
|
|
42
|
-
medium: { name: "
|
|
43
|
-
small: { name: "
|
|
44
|
-
extraSmall: { name: "
|
|
41
|
+
large: { name: "604fe6", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-150);font-size:var(--cnvs-base-font-size-100);letter-spacing:var(--cnvs-base-letter-spacing-200);height:3rem;padding-inline:var(--cnvs-sys-space-x8);min-width:7rem;" },
|
|
42
|
+
medium: { name: "c9a02f", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);min-width:6rem;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" },
|
|
43
|
+
small: { name: "6dd9a6", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" },
|
|
44
|
+
extraSmall: { name: "8e0948", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-50);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }
|
|
45
45
|
},
|
|
46
46
|
// IconPosition Styles
|
|
47
47
|
iconPosition: {
|
|
48
|
-
only: { name: "
|
|
48
|
+
only: { name: "7d4959", styles: "padding:var(--cnvs-sys-space-zero);" },
|
|
49
49
|
start: {},
|
|
50
50
|
end: {}
|
|
51
51
|
}
|
|
@@ -54,51 +54,51 @@ export const buttonStencil = createStencil({
|
|
|
54
54
|
compound: [
|
|
55
55
|
{
|
|
56
56
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
57
|
-
styles: { name: "
|
|
57
|
+
styles: { name: "b07985", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
61
|
-
styles: { name: "
|
|
61
|
+
styles: { name: "3e48da", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
65
|
-
styles: { name: "
|
|
65
|
+
styles: { name: "83dc3c", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
69
|
-
styles: { name: "
|
|
69
|
+
styles: { name: "8870fa", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
73
|
-
styles: { name: "
|
|
73
|
+
styles: { name: "64fb21", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
77
|
-
styles: { name: "
|
|
77
|
+
styles: { name: "d1ca18", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
81
|
-
styles: { name: "
|
|
81
|
+
styles: { name: "e95cc8", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
82
82
|
},
|
|
83
83
|
{
|
|
84
84
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
85
|
-
styles: { name: "
|
|
85
|
+
styles: { name: "280095", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
89
|
-
styles: { name: "
|
|
89
|
+
styles: { name: "cbf6b5", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
92
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
93
|
-
styles: { name: "
|
|
93
|
+
styles: { name: "932896", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
96
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
97
|
-
styles: { name: "
|
|
97
|
+
styles: { name: "40954e", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
101
|
-
styles: { name: "
|
|
101
|
+
styles: { name: "f32b2f", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
102
102
|
}
|
|
103
103
|
]
|
|
104
104
|
}, "cnvs-button");
|
|
@@ -8,7 +8,7 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
|
8
8
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
9
|
const deleteButtonStencil = createStencil({
|
|
10
10
|
extends: buttonStencil,
|
|
11
|
-
base: { name: "8e9d77", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-
|
|
11
|
+
base: { name: "8e9d77", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-error-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-error-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
12
12
|
}, "cnvs-delete-button");
|
|
13
13
|
/**
|
|
14
14
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
@@ -8,11 +8,11 @@ import { Button } from './Button';
|
|
|
8
8
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
9
|
const primaryButtonStencil = createStencil({
|
|
10
10
|
extends: buttonStencil,
|
|
11
|
-
base: { name: "581e61", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-
|
|
11
|
+
base: { name: "581e61", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-primary-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-primary-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
variant: {
|
|
14
14
|
// Inverse Styles
|
|
15
|
-
inverse: { name: "
|
|
15
|
+
inverse: { name: "21544f", styles: "--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-border-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" }
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
}, "cnvs-primary-button");
|
|
@@ -8,10 +8,10 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
|
8
8
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
9
|
const secondaryButtonStencil = createStencil({
|
|
10
10
|
extends: buttonStencil,
|
|
11
|
-
base: { name: "fa2b2a", styles: "box-sizing:border-box;--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-
|
|
11
|
+
base: { name: "fa2b2a", styles: "box-sizing:border-box;--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-default);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-strong);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
variant: {
|
|
14
|
-
inverse: { name: "
|
|
14
|
+
inverse: { name: "686fb3", styles: "--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-border-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
}, "cnvs-secondary-button");
|
|
@@ -9,71 +9,71 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
9
9
|
const tertiaryButtonStencil = createStencil({
|
|
10
10
|
extends: buttonStencil,
|
|
11
11
|
// Base Styles
|
|
12
|
-
base: { name: "e61a81", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--cnvs-button-background:transparent;--cnvs-button-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);box-shadow:0 0 0 0px var(--cnvs-sys-color-
|
|
12
|
+
base: { name: "e61a81", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--cnvs-button-background:transparent;--cnvs-button-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-dark);--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-darkest);--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
// IconPosition Styles
|
|
15
15
|
iconPosition: {
|
|
16
|
-
only: { name: "
|
|
16
|
+
only: { name: "0aa062", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
17
17
|
start: {},
|
|
18
18
|
end: {}
|
|
19
19
|
},
|
|
20
20
|
isThemeable: {
|
|
21
|
-
true: { name: "
|
|
21
|
+
true: { name: "1a73e1", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" }
|
|
22
22
|
},
|
|
23
23
|
variant: {
|
|
24
24
|
// Inverse Styles
|
|
25
|
-
inverse: { name: "
|
|
25
|
+
inverse: { name: "e1c564", styles: "--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-soft);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
// Compound Modifier Styles
|
|
29
29
|
compound: [
|
|
30
30
|
{
|
|
31
31
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
32
|
-
styles: { name: "
|
|
32
|
+
styles: { name: "0cc7a0", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
36
|
-
styles: { name: "
|
|
36
|
+
styles: { name: "bad7da", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
40
|
-
styles: { name: "
|
|
40
|
+
styles: { name: "c28406", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
44
|
-
styles: { name: "
|
|
44
|
+
styles: { name: "1fb946", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
48
|
-
styles: { name: "
|
|
48
|
+
styles: { name: "596acc", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
52
|
-
styles: { name: "
|
|
52
|
+
styles: { name: "4e1b09", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
56
|
-
styles: { name: "
|
|
56
|
+
styles: { name: "9c2cb4", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
60
|
-
styles: { name: "
|
|
60
|
+
styles: { name: "c9ea0f", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
64
|
-
styles: { name: "
|
|
64
|
+
styles: { name: "09ac12", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
68
|
-
styles: { name: "
|
|
68
|
+
styles: { name: "261906", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
72
|
-
styles: { name: "
|
|
72
|
+
styles: { name: "b4dfa4", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
73
73
|
},
|
|
74
74
|
{
|
|
75
75
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
76
|
-
styles: { name: "
|
|
76
|
+
styles: { name: "88b1ff", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
77
77
|
}
|
|
78
78
|
]
|
|
79
79
|
}, "cnvs-tertiary-button");
|
|
@@ -7,19 +7,19 @@ const checkboxInputStencil = createStencil({
|
|
|
7
7
|
base: { name: "b01bc2", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
|
|
8
8
|
modifiers: {
|
|
9
9
|
variant: {
|
|
10
|
-
inverse: { name: "edefb9", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-
|
|
10
|
+
inverse: { name: "edefb9", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
|
|
11
11
|
},
|
|
12
12
|
disabled: {
|
|
13
|
-
true: { name: "
|
|
13
|
+
true: { name: "0fcee6", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
|
|
14
14
|
},
|
|
15
15
|
error: {
|
|
16
|
-
true: { name: "
|
|
16
|
+
true: { name: "0a2191", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner),\n 0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),\n 0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);}" }
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
compound: [
|
|
20
20
|
{
|
|
21
21
|
modifiers: { variant: 'inverse', error: true },
|
|
22
|
-
styles: { name: "
|
|
22
|
+
styles: { name: "756c93", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
|
|
23
23
|
}
|
|
24
24
|
]
|
|
25
25
|
}, "cnvs-checkbox-input");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAA6B,CAAC;AACrD;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,mBAA4D,CAAC;AAEnF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,mBAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,mBAU1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,mBAMzB,CAAC;AAQF,eAAO,MAAM,qBAAqB,WACvB,MAAM,aACP,MAAM,aAAW,eAAe,qBAA+B,MAoDtE,CAAC;AAEJ,eAAO,MAAM,aAAa,WACf,MAAM,aACP,MAAM,aAAW,eAAe,qBAA+B,MA2CtE,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,mBAYpC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mBAY5B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;IAG3B;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG;;;;;;;;;;;;YAwDa,MAAM;;QA1BtB,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;YA4ClD,MAAM;;QA1BtB,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;;QAkBlE,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QA2ClE,mEAAmE;mBACxD;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAIvB;;;;;WAKG;;QAKH;;;WAGG;;QAKH;;;;;WAKG;;QAOH;;;;;WAKG;;QAKH,mDAAmD;;QAKnD,kDAAkD;;;;;;;;;;;;;;;;;;;;IAlIlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG;;;;;;;;;;;IA8BH,wDAAwD;;IAExD;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;OAMG;;0BArCyD,MAAM;;;;;;;;;;;;;;;;;;IA2ClE,mEAAmE;eACxD;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAIvB;;;;;OAKG;;IAKH;;;OAGG;;IAKH;;;;;OAKG;;IAOH;;;;;OAKG;;IAKH,mDAAmD;;IAKnD,kDAAkD;;;;;;;;;;;;;;;;;;QA3ElD,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;QAEH;;;;;;WAMG;;8BArCyD,MAAM;;;;;;;;;;;;;;;;;;;QA2ClE,mEAAmE;mBACxD;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAIvB;;;;;WAKG;;QAKH;;;WAGG;;QAKH;;;;;WAKG;;QAOH;;;;;WAKG;;QAKH,mDAAmD;;QAKnD,kDAAkD;;;;;;;;;;;;;;;;;;;EA0BpD,CAAC"}
|
|
@@ -22,7 +22,7 @@ export const createNavigationManager = (manager) => manager;
|
|
|
22
22
|
/**
|
|
23
23
|
* Get the first item in a list regardless of column count
|
|
24
24
|
*/
|
|
25
|
-
export const getFirst = (
|
|
25
|
+
export const getFirst = () => 0;
|
|
26
26
|
/**
|
|
27
27
|
* Get the last item in a list regardless of column count
|
|
28
28
|
*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createComponent, ErrorType, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
4
|
+
import { brand, system } from '@workday/canvas-tokens-web';
|
|
5
5
|
import { mergeStyles } from '../../layout';
|
|
6
6
|
const switchContainerStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "aeab09", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
|
|
8
8
|
}, "cnvs-switch-container");
|
|
9
9
|
const SwitchContainer = createComponent('div')({
|
|
10
10
|
displayName: 'SwitchContainer',
|
|
@@ -13,11 +13,11 @@ const SwitchContainer = createComponent('div')({
|
|
|
13
13
|
},
|
|
14
14
|
});
|
|
15
15
|
const switchInputStencil = createStencil({
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "1c1c2b", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
error: {
|
|
19
|
-
error: { name: "
|
|
20
|
-
alert: { name: "
|
|
19
|
+
error: { name: "786eb0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
|
|
20
|
+
alert: { name: "a877d0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}, "cnvs-switch-input");
|
|
@@ -28,7 +28,7 @@ const SwitchInput = createComponent('input')({
|
|
|
28
28
|
},
|
|
29
29
|
});
|
|
30
30
|
const switchBackgroundStencil = createStencil({
|
|
31
|
-
base: { name: "
|
|
31
|
+
base: { name: "f185ac", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
|
|
32
32
|
}, "cnvs-switch-background");
|
|
33
33
|
const SwitchBackground = createComponent('div')({
|
|
34
34
|
displayName: 'SwitchBackground',
|
|
@@ -37,10 +37,10 @@ const SwitchBackground = createComponent('div')({
|
|
|
37
37
|
},
|
|
38
38
|
});
|
|
39
39
|
const switchCircleStencil = createStencil({
|
|
40
|
-
base: { name: "
|
|
40
|
+
base: { name: "7a2c97", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
|
|
41
41
|
modifiers: {
|
|
42
42
|
checked: {
|
|
43
|
-
true: { name: "
|
|
43
|
+
true: { name: "06e4c0", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
}, "cnvs-switch-circle");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.778-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.778-next.0",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.778-next.0",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^1.3.1",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "46b95e41ca41eccf0a087ec904d12849ef83b729"
|
|
71
71
|
}
|
package/switch/lib/Switch.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
|
|
3
3
|
import {createStencil, px2rem} from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
4
|
+
import {brand, system} from '@workday/canvas-tokens-web';
|
|
5
5
|
import {mergeStyles} from '../../layout';
|
|
6
6
|
|
|
7
7
|
export interface SwitchProps {
|
|
@@ -70,14 +70,14 @@ const switchInputStencil = createStencil({
|
|
|
70
70
|
},
|
|
71
71
|
'&:disabled, &.disabled': {
|
|
72
72
|
'& ~ div:first-of-type': {
|
|
73
|
-
|
|
73
|
+
opacity: system.opacity.disabled,
|
|
74
74
|
},
|
|
75
75
|
},
|
|
76
76
|
},
|
|
77
77
|
'&:disabled, &.disabled': {
|
|
78
78
|
cursor: 'not-allowed',
|
|
79
79
|
'& ~ div:first-of-type': {
|
|
80
|
-
|
|
80
|
+
opacity: system.opacity.disabled,
|
|
81
81
|
},
|
|
82
82
|
},
|
|
83
83
|
'&:focus-visible, &:focus, &.focus': {
|
|
@@ -92,7 +92,7 @@ const switchInputStencil = createStencil({
|
|
|
92
92
|
error: {
|
|
93
93
|
'& ~ div:first-of-type': {
|
|
94
94
|
boxShadow: `
|
|
95
|
-
0 0 0 ${px2rem(2)} ${
|
|
95
|
+
0 0 0 ${px2rem(2)} ${system.color.border.inverse},
|
|
96
96
|
0 0 0 ${system.space.x1} ${brand.error.base},
|
|
97
97
|
0 0 0 ${px2rem(5)} transparent`,
|
|
98
98
|
},
|
|
@@ -100,7 +100,7 @@ const switchInputStencil = createStencil({
|
|
|
100
100
|
alert: {
|
|
101
101
|
'& ~ div:first-of-type': {
|
|
102
102
|
boxShadow: `
|
|
103
|
-
0 0 0 ${px2rem(2)} ${
|
|
103
|
+
0 0 0 ${px2rem(2)} ${system.color.border.inverse},
|
|
104
104
|
0 0 0 ${system.space.x1} ${brand.alert.base},
|
|
105
105
|
0 0 0 ${px2rem(5)} ${brand.alert.darkest}`,
|
|
106
106
|
},
|
|
@@ -128,7 +128,7 @@ const switchBackgroundStencil = createStencil({
|
|
|
128
128
|
borderRadius: system.shape.round,
|
|
129
129
|
padding: `${system.space.zero} ${px2rem(2)}`,
|
|
130
130
|
transition: 'background-color 200ms ease',
|
|
131
|
-
backgroundColor:
|
|
131
|
+
backgroundColor: system.color.bg.muted.soft,
|
|
132
132
|
},
|
|
133
133
|
});
|
|
134
134
|
|