@workday/canvas-kit-react 11.0.10 → 11.0.12
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/DeleteButton.tsx +7 -7
- package/button/lib/PrimaryButton.tsx +30 -12
- package/button/lib/SecondaryButton.tsx +36 -12
- package/button/lib/TertiaryButton.tsx +71 -22
- package/dist/commonjs/button/lib/DeleteButton.js +2 -2
- package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +3 -3
- package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/SecondaryButton.js +3 -3
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +19 -19
- package/dist/es6/button/lib/DeleteButton.js +4 -4
- package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +5 -5
- package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/SecondaryButton.js +5 -5
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +21 -21
- package/package.json +4 -4
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
import {buttonStencil} from './BaseButton';
|
|
3
|
+
import {buttonColorPropVars, buttonStencil} from './BaseButton';
|
|
4
4
|
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
5
|
-
import {createStencil} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
6
6
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
8
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
@@ -22,12 +22,12 @@ const deleteButtonStencil = createStencil({
|
|
|
22
22
|
[buttonStencil.vars.background]: brand.error.base,
|
|
23
23
|
[buttonStencil.vars.borderRadius]: system.shape.round,
|
|
24
24
|
[buttonStencil.vars.label]: brand.error.accent,
|
|
25
|
-
[systemIconStencil.vars.color]: brand.error.accent,
|
|
25
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.error.accent),
|
|
26
26
|
// Focus Styles
|
|
27
27
|
'&:focus-visible, &.focus': {
|
|
28
28
|
[buttonStencil.vars.background]: brand.error.base,
|
|
29
29
|
[buttonStencil.vars.label]: brand.error.accent,
|
|
30
|
-
[systemIconStencil.vars.color]: brand.error.accent,
|
|
30
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.error.accent),
|
|
31
31
|
[buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
|
|
32
32
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
33
33
|
},
|
|
@@ -35,19 +35,19 @@ const deleteButtonStencil = createStencil({
|
|
|
35
35
|
'&:hover, &.hover': {
|
|
36
36
|
[buttonStencil.vars.background]: brand.error.dark,
|
|
37
37
|
[buttonStencil.vars.label]: brand.error.accent,
|
|
38
|
-
[systemIconStencil.vars.color]: brand.error.accent,
|
|
38
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.error.accent),
|
|
39
39
|
},
|
|
40
40
|
// Active Styles
|
|
41
41
|
'&:active, &.active': {
|
|
42
42
|
[buttonStencil.vars.background]: brand.error.darkest,
|
|
43
43
|
[buttonStencil.vars.label]: brand.error.accent,
|
|
44
|
-
[systemIconStencil.vars.color]: brand.error.accent,
|
|
44
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.error.accent),
|
|
45
45
|
},
|
|
46
46
|
// Disabled Styles
|
|
47
47
|
'&:disabled, &.disabled': {
|
|
48
48
|
[buttonStencil.vars.background]: brand.error.base,
|
|
49
49
|
[buttonStencil.vars.label]: brand.error.accent,
|
|
50
|
-
[systemIconStencil.vars.color]: brand.error.accent,
|
|
50
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, brand.error.accent),
|
|
51
51
|
[buttonStencil.vars.opacity]: system.opacity.disabled,
|
|
52
52
|
},
|
|
53
53
|
},
|
|
@@ -2,9 +2,9 @@ import * as React from 'react';
|
|
|
2
2
|
|
|
3
3
|
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
4
4
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
5
|
-
import {createStencil} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
6
6
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
7
|
-
import {buttonStencil} from './BaseButton';
|
|
7
|
+
import {buttonColorPropVars, buttonStencil} from './BaseButton';
|
|
8
8
|
import {Button, ButtonProps} from './Button';
|
|
9
9
|
import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
10
10
|
|
|
@@ -27,33 +27,36 @@ const primaryButtonStencil = createStencil({
|
|
|
27
27
|
[buttonStencil.vars.background]: brand.primary.base,
|
|
28
28
|
[buttonStencil.vars.borderRadius]: system.shape.round,
|
|
29
29
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
30
|
-
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
30
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.accent),
|
|
31
31
|
// Focus Styles
|
|
32
32
|
'&:focus-visible, &.focus': {
|
|
33
33
|
[buttonStencil.vars.background]: brand.primary.base,
|
|
34
34
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
35
35
|
[buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
|
|
36
36
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
37
|
-
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
37
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.accent),
|
|
38
38
|
},
|
|
39
39
|
// Hover Styles
|
|
40
40
|
'&:hover, &.hover': {
|
|
41
41
|
[buttonStencil.vars.background]: brand.primary.dark,
|
|
42
42
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
43
|
-
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
43
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
|
|
44
44
|
},
|
|
45
45
|
// Active Styles
|
|
46
46
|
'&:active, &.active': {
|
|
47
47
|
[buttonStencil.vars.background]: brand.primary.darkest,
|
|
48
48
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
49
|
-
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
49
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
|
|
50
50
|
},
|
|
51
51
|
// Disabled Styles
|
|
52
52
|
'&:disabled, &.disabled': {
|
|
53
53
|
[buttonStencil.vars.background]: brand.primary.base,
|
|
54
54
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
55
55
|
[buttonStencil.vars.opacity]: system.opacity.disabled,
|
|
56
|
-
[systemIconStencil.vars.color]:
|
|
56
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
57
|
+
buttonColorPropVars.disabled.icon,
|
|
58
|
+
brand.primary.accent
|
|
59
|
+
),
|
|
57
60
|
},
|
|
58
61
|
},
|
|
59
62
|
modifiers: {
|
|
@@ -63,32 +66,47 @@ const primaryButtonStencil = createStencil({
|
|
|
63
66
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
64
67
|
[buttonStencil.vars.borderRadius]: system.shape.round,
|
|
65
68
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
66
|
-
[systemIconStencil.vars.color]:
|
|
69
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
70
|
+
buttonColorPropVars.default.icon,
|
|
71
|
+
system.color.fg.strong
|
|
72
|
+
),
|
|
67
73
|
// Focus Styles
|
|
68
74
|
'&:focus-visible, &.focus': {
|
|
69
75
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
70
76
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
71
77
|
[buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
|
|
72
78
|
[buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
|
|
73
|
-
[systemIconStencil.vars.color]:
|
|
79
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
80
|
+
buttonColorPropVars.focus.icon,
|
|
81
|
+
system.color.fg.strong
|
|
82
|
+
),
|
|
74
83
|
},
|
|
75
84
|
// Hover Styles
|
|
76
85
|
'&:hover, &.hover': {
|
|
77
86
|
[buttonStencil.vars.background]: system.color.bg.alt.default,
|
|
78
87
|
[buttonStencil.vars.label]: system.color.fg.stronger,
|
|
79
|
-
[systemIconStencil.vars.color]:
|
|
88
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
89
|
+
buttonColorPropVars.hover.icon,
|
|
90
|
+
system.color.fg.stronger
|
|
91
|
+
),
|
|
80
92
|
},
|
|
81
93
|
// Active Styles
|
|
82
94
|
'&:active, &.active': {
|
|
83
95
|
[buttonStencil.vars.background]: system.color.bg.alt.strong,
|
|
84
96
|
[buttonStencil.vars.label]: system.color.fg.stronger,
|
|
85
|
-
[systemIconStencil.vars.color]:
|
|
97
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
98
|
+
buttonColorPropVars.active.icon,
|
|
99
|
+
system.color.fg.stronger
|
|
100
|
+
),
|
|
86
101
|
},
|
|
87
102
|
// Disabled Styles
|
|
88
103
|
'&:disabled, &.disabled': {
|
|
89
104
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
90
105
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
91
|
-
[systemIconStencil.vars.color]:
|
|
106
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
107
|
+
buttonColorPropVars.disabled.icon,
|
|
108
|
+
system.color.fg.strong
|
|
109
|
+
),
|
|
92
110
|
},
|
|
93
111
|
},
|
|
94
112
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
import {buttonStencil} from './BaseButton';
|
|
3
|
+
import {buttonColorPropVars, buttonStencil} from './BaseButton';
|
|
4
4
|
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
5
|
-
import {createStencil} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
6
6
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
8
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
@@ -28,7 +28,10 @@ const secondaryButtonStencil = createStencil({
|
|
|
28
28
|
[buttonStencil.vars.border]: system.color.border.contrast.default,
|
|
29
29
|
[buttonStencil.vars.borderRadius]: system.shape.round,
|
|
30
30
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
31
|
-
[systemIconStencil.vars.color]:
|
|
31
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
32
|
+
buttonColorPropVars.default.icon,
|
|
33
|
+
system.color.fg.strong
|
|
34
|
+
),
|
|
32
35
|
// Focus Styles
|
|
33
36
|
'&:focus-visible, &.focus': {
|
|
34
37
|
[buttonStencil.vars.background]: 'transparent',
|
|
@@ -36,21 +39,24 @@ const secondaryButtonStencil = createStencil({
|
|
|
36
39
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
37
40
|
[buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
|
|
38
41
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
39
|
-
[systemIconStencil.vars.color]:
|
|
42
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
43
|
+
buttonColorPropVars.focus.icon,
|
|
44
|
+
system.color.fg.strong
|
|
45
|
+
),
|
|
40
46
|
},
|
|
41
47
|
// Hover Styles
|
|
42
48
|
'&:hover, &.hover': {
|
|
43
49
|
[buttonStencil.vars.background]: system.color.bg.contrast.default,
|
|
44
50
|
[buttonStencil.vars.border]: system.color.border.contrast.default,
|
|
45
51
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
46
|
-
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
52
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
|
|
47
53
|
},
|
|
48
54
|
// Active Styles
|
|
49
55
|
'&:active, &.active': {
|
|
50
56
|
[buttonStencil.vars.background]: system.color.bg.contrast.strong,
|
|
51
57
|
[buttonStencil.vars.border]: system.color.border.contrast.strong,
|
|
52
58
|
[buttonStencil.vars.label]: brand.primary.accent,
|
|
53
|
-
[systemIconStencil.vars.color]: brand.primary.accent,
|
|
59
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
|
|
54
60
|
},
|
|
55
61
|
// Disabled Styles
|
|
56
62
|
'&:disabled, &.disabled': {
|
|
@@ -58,7 +64,10 @@ const secondaryButtonStencil = createStencil({
|
|
|
58
64
|
[buttonStencil.vars.border]: system.color.border.contrast.default,
|
|
59
65
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
60
66
|
[buttonStencil.vars.opacity]: system.opacity.disabled,
|
|
61
|
-
[systemIconStencil.vars.color]:
|
|
67
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
68
|
+
buttonColorPropVars.disabled.icon,
|
|
69
|
+
system.color.fg.strong
|
|
70
|
+
),
|
|
62
71
|
},
|
|
63
72
|
},
|
|
64
73
|
modifiers: {
|
|
@@ -68,7 +77,10 @@ const secondaryButtonStencil = createStencil({
|
|
|
68
77
|
[buttonStencil.vars.background]: 'transparent',
|
|
69
78
|
[buttonStencil.vars.border]: system.color.border.inverse,
|
|
70
79
|
[buttonStencil.vars.label]: system.color.fg.inverse,
|
|
71
|
-
[systemIconStencil.vars.color]:
|
|
80
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
81
|
+
buttonColorPropVars.default.icon,
|
|
82
|
+
system.color.fg.inverse
|
|
83
|
+
),
|
|
72
84
|
// Focus Styles
|
|
73
85
|
'&:focus-visible, &.focus': {
|
|
74
86
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
@@ -76,28 +88,40 @@ const secondaryButtonStencil = createStencil({
|
|
|
76
88
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
77
89
|
[buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
|
|
78
90
|
[buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
|
|
79
|
-
[systemIconStencil.vars.color]:
|
|
91
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
92
|
+
buttonColorPropVars.focus.icon,
|
|
93
|
+
system.color.fg.strong
|
|
94
|
+
),
|
|
80
95
|
},
|
|
81
96
|
// Hover Styles
|
|
82
97
|
'&:hover, &.hover': {
|
|
83
98
|
[buttonStencil.vars.background]: system.color.bg.alt.default,
|
|
84
99
|
[buttonStencil.vars.border]: 'transparent',
|
|
85
100
|
[buttonStencil.vars.label]: system.color.fg.stronger,
|
|
86
|
-
[systemIconStencil.vars.color]:
|
|
101
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
102
|
+
buttonColorPropVars.hover.icon,
|
|
103
|
+
system.color.fg.stronger
|
|
104
|
+
),
|
|
87
105
|
},
|
|
88
106
|
// Active Styles
|
|
89
107
|
'&:active, &.active': {
|
|
90
108
|
[buttonStencil.vars.background]: system.color.bg.alt.strong,
|
|
91
109
|
[buttonStencil.vars.border]: 'transparent',
|
|
92
110
|
[buttonStencil.vars.label]: system.color.fg.stronger,
|
|
93
|
-
[systemIconStencil.vars.color]:
|
|
111
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
112
|
+
buttonColorPropVars.active.icon,
|
|
113
|
+
system.color.fg.stronger
|
|
114
|
+
),
|
|
94
115
|
},
|
|
95
116
|
// Disabled Styles
|
|
96
117
|
'&:disabled, &.disabled': {
|
|
97
118
|
[buttonStencil.vars.background]: 'transparent',
|
|
98
119
|
[buttonStencil.vars.border]: system.color.border.inverse,
|
|
99
120
|
[buttonStencil.vars.label]: system.color.fg.inverse,
|
|
100
|
-
[systemIconStencil.vars.color]:
|
|
121
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
122
|
+
buttonColorPropVars.disabled.icon,
|
|
123
|
+
system.color.fg.inverse
|
|
124
|
+
),
|
|
101
125
|
},
|
|
102
126
|
},
|
|
103
127
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
import {buttonStencil} from './BaseButton';
|
|
3
|
+
import {buttonColorPropVars, buttonStencil} from './BaseButton';
|
|
4
4
|
import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
|
|
5
|
-
import {calc, createStencil} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
6
6
|
import {system, brand} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
8
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
@@ -32,14 +32,14 @@ const tertiaryButtonStencil = createStencil({
|
|
|
32
32
|
[buttonStencil.vars.background]: 'transparent',
|
|
33
33
|
[buttonStencil.vars.borderRadius]: system.shape.x1,
|
|
34
34
|
[buttonStencil.vars.label]: brand.primary.base,
|
|
35
|
-
[systemIconStencil.vars.color]: brand.primary.base,
|
|
35
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.base),
|
|
36
36
|
// Focus Styles
|
|
37
37
|
'&:focus-visible, &.focus': {
|
|
38
38
|
[buttonStencil.vars.background]: 'transparent',
|
|
39
39
|
[buttonStencil.vars.label]: brand.primary.base,
|
|
40
40
|
[buttonStencil.vars.boxShadowInner]: brand.common.focusOutline,
|
|
41
41
|
[buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
|
|
42
|
-
[systemIconStencil.vars.color]: brand.primary.base,
|
|
42
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.base),
|
|
43
43
|
...focusRing({
|
|
44
44
|
width: 2,
|
|
45
45
|
separation: 0,
|
|
@@ -51,20 +51,23 @@ const tertiaryButtonStencil = createStencil({
|
|
|
51
51
|
'&:hover, &.hover': {
|
|
52
52
|
[buttonStencil.vars.background]: system.color.bg.alt.default,
|
|
53
53
|
[buttonStencil.vars.label]: brand.primary.dark,
|
|
54
|
-
[systemIconStencil.vars.color]: brand.primary.dark,
|
|
54
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.dark),
|
|
55
55
|
},
|
|
56
56
|
// Active Styles
|
|
57
57
|
'&:active, &.active': {
|
|
58
58
|
[buttonStencil.vars.background]: system.color.bg.alt.strong,
|
|
59
59
|
[buttonStencil.vars.label]: brand.primary.darkest,
|
|
60
|
-
[systemIconStencil.vars.color]:
|
|
60
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
61
|
+
buttonColorPropVars.active.icon,
|
|
62
|
+
brand.primary.darkest
|
|
63
|
+
),
|
|
61
64
|
},
|
|
62
65
|
// Disabled Styles
|
|
63
66
|
'&:disabled, &.disabled': {
|
|
64
67
|
[buttonStencil.vars.background]: 'transparent',
|
|
65
68
|
[buttonStencil.vars.label]: brand.primary.base,
|
|
66
69
|
[buttonStencil.vars.opacity]: system.opacity.disabled,
|
|
67
|
-
[systemIconStencil.vars.color]: brand.primary.base,
|
|
70
|
+
[systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.base),
|
|
68
71
|
},
|
|
69
72
|
},
|
|
70
73
|
modifiers: {
|
|
@@ -73,18 +76,33 @@ const tertiaryButtonStencil = createStencil({
|
|
|
73
76
|
only: {
|
|
74
77
|
padding: 0,
|
|
75
78
|
borderRadius: system.shape.round,
|
|
76
|
-
[systemIconStencil.vars.color]:
|
|
79
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
80
|
+
buttonColorPropVars.default.icon,
|
|
81
|
+
system.color.fg.strong
|
|
82
|
+
),
|
|
77
83
|
'&:focus-visible, &.focus': {
|
|
78
|
-
[systemIconStencil.vars.color]:
|
|
84
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
85
|
+
buttonColorPropVars.focus.icon,
|
|
86
|
+
system.color.fg.strong
|
|
87
|
+
),
|
|
79
88
|
},
|
|
80
89
|
'&:hover, &.hover': {
|
|
81
|
-
[systemIconStencil.vars.color]:
|
|
90
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
91
|
+
buttonColorPropVars.hover.icon,
|
|
92
|
+
system.color.fg.strong
|
|
93
|
+
),
|
|
82
94
|
},
|
|
83
95
|
'&:active, &.active': {
|
|
84
|
-
[systemIconStencil.vars.color]:
|
|
96
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
97
|
+
buttonColorPropVars.active.icon,
|
|
98
|
+
system.color.fg.strong
|
|
99
|
+
),
|
|
85
100
|
},
|
|
86
101
|
'&:disabled, &.disabled': {
|
|
87
|
-
[systemIconStencil.vars.color]:
|
|
102
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
103
|
+
buttonColorPropVars.disabled.icon,
|
|
104
|
+
system.color.fg.strong
|
|
105
|
+
),
|
|
88
106
|
},
|
|
89
107
|
},
|
|
90
108
|
start: {},
|
|
@@ -92,18 +110,34 @@ const tertiaryButtonStencil = createStencil({
|
|
|
92
110
|
},
|
|
93
111
|
isThemeable: {
|
|
94
112
|
true: {
|
|
95
|
-
[systemIconStencil.vars.color]:
|
|
113
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
114
|
+
buttonColorPropVars.default.icon,
|
|
115
|
+
brand.primary.base
|
|
116
|
+
),
|
|
117
|
+
|
|
96
118
|
'&:focus-visible, &.focus': {
|
|
97
|
-
[systemIconStencil.vars.color]:
|
|
119
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
120
|
+
buttonColorPropVars.focus.icon,
|
|
121
|
+
brand.primary.base
|
|
122
|
+
),
|
|
98
123
|
},
|
|
99
124
|
'&:hover, &.hover': {
|
|
100
|
-
[systemIconStencil.vars.color]:
|
|
125
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
126
|
+
buttonColorPropVars.hover.icon,
|
|
127
|
+
brand.primary.dark
|
|
128
|
+
),
|
|
101
129
|
},
|
|
102
130
|
'&:active, &.active': {
|
|
103
|
-
[systemIconStencil.vars.color]:
|
|
131
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
132
|
+
buttonColorPropVars.active.icon,
|
|
133
|
+
brand.primary.darkest
|
|
134
|
+
),
|
|
104
135
|
},
|
|
105
136
|
'&:disabled, &.disabled': {
|
|
106
|
-
[systemIconStencil.vars.color]:
|
|
137
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
138
|
+
buttonColorPropVars.disabled.icon,
|
|
139
|
+
brand.primary.base
|
|
140
|
+
),
|
|
107
141
|
},
|
|
108
142
|
},
|
|
109
143
|
},
|
|
@@ -112,12 +146,18 @@ const tertiaryButtonStencil = createStencil({
|
|
|
112
146
|
inverse: {
|
|
113
147
|
[buttonStencil.vars.background]: 'transparent',
|
|
114
148
|
[buttonStencil.vars.label]: system.color.fg.inverse,
|
|
115
|
-
[systemIconStencil.vars.color]:
|
|
149
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
150
|
+
buttonColorPropVars.default.icon,
|
|
151
|
+
system.color.fg.inverse
|
|
152
|
+
),
|
|
116
153
|
// Focus Styles
|
|
117
154
|
'&:focus-visible, &.focus': {
|
|
118
155
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
119
156
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
120
|
-
[systemIconStencil.vars.color]:
|
|
157
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
158
|
+
buttonColorPropVars.focus.icon,
|
|
159
|
+
system.color.fg.strong
|
|
160
|
+
),
|
|
121
161
|
...focusRing({
|
|
122
162
|
inset: 'inner',
|
|
123
163
|
width: 2,
|
|
@@ -130,19 +170,28 @@ const tertiaryButtonStencil = createStencil({
|
|
|
130
170
|
'&:hover, &.hover': {
|
|
131
171
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
132
172
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
133
|
-
[systemIconStencil.vars.color]:
|
|
173
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
174
|
+
buttonColorPropVars.hover.icon,
|
|
175
|
+
system.color.fg.strong
|
|
176
|
+
),
|
|
134
177
|
},
|
|
135
178
|
// Active Styles
|
|
136
179
|
'&:active, &.active': {
|
|
137
180
|
[buttonStencil.vars.background]: system.color.bg.alt.soft,
|
|
138
181
|
[buttonStencil.vars.label]: system.color.fg.strong,
|
|
139
|
-
[systemIconStencil.vars.color]:
|
|
182
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
183
|
+
buttonColorPropVars.active.icon,
|
|
184
|
+
system.color.fg.strong
|
|
185
|
+
),
|
|
140
186
|
},
|
|
141
187
|
// Disabled Styles
|
|
142
188
|
'&:disabled, &.disabled': {
|
|
143
189
|
[buttonStencil.vars.background]: 'transparent',
|
|
144
190
|
[buttonStencil.vars.label]: system.color.fg.inverse,
|
|
145
|
-
[systemIconStencil.vars.color]:
|
|
191
|
+
[systemIconStencil.vars.color]: cssVar(
|
|
192
|
+
buttonColorPropVars.disabled.icon,
|
|
193
|
+
system.color.fg.inverse
|
|
194
|
+
),
|
|
146
195
|
},
|
|
147
196
|
},
|
|
148
197
|
},
|
|
@@ -30,8 +30,8 @@ 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: "
|
|
34
|
-
}, "delete-button-
|
|
33
|
+
base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
|
|
34
|
+
}, "delete-button-d069ff");
|
|
35
35
|
/**
|
|
36
36
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
37
37
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FASxB,CAAC"}
|
|
@@ -30,14 +30,14 @@ 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: "
|
|
33
|
+
base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
|
|
34
34
|
modifiers: {
|
|
35
35
|
variant: {
|
|
36
36
|
// Inverse Styles
|
|
37
|
-
inverse: { name: "
|
|
37
|
+
inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
}, "primary-button-
|
|
40
|
+
}, "primary-button-a56ed8");
|
|
41
41
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
42
42
|
displayName: 'PrimaryButton',
|
|
43
43
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
|
|
@@ -30,13 +30,13 @@ 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: "
|
|
33
|
+
base: { name: "67b9b8", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
34
34
|
modifiers: {
|
|
35
35
|
variant: {
|
|
36
|
-
inverse: { name: "
|
|
36
|
+
inverse: { name: "3e1152", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
}, "secondary-button-
|
|
39
|
+
}, "secondary-button-c33259");
|
|
40
40
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
41
41
|
displayName: 'SecondaryButton',
|
|
42
42
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsQD,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}
|
|
@@ -31,74 +31,74 @@ 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: "
|
|
34
|
+
base: { name: "ffe654", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, 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{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
|
|
35
35
|
modifiers: {
|
|
36
36
|
// IconPosition Styles
|
|
37
37
|
iconPosition: {
|
|
38
|
-
only: { name: "
|
|
39
|
-
start: { name: "
|
|
40
|
-
end: { name: "
|
|
38
|
+
only: { name: "83cdfe", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
39
|
+
start: { name: "74ae7d", styles: "" },
|
|
40
|
+
end: { name: "526d6e", styles: "" }
|
|
41
41
|
},
|
|
42
42
|
isThemeable: {
|
|
43
|
-
true: { name: "
|
|
43
|
+
true: { name: "a82202", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
|
|
44
44
|
},
|
|
45
45
|
variant: {
|
|
46
46
|
// Inverse Styles
|
|
47
|
-
inverse: { name: "
|
|
47
|
+
inverse: { name: "1f333b", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, 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{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, 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: "267da1", 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: "bfdcdf", 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: "489483", 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: "98e2d0", 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: "c9fa78", 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: "69061d", 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: "5d8afb", 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: "a26836", 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: "0f9b2c", 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: "484a1c", 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: "b8b1ae", 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: "4071aa", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
99
99
|
}
|
|
100
100
|
]
|
|
101
|
-
}, "tertiary-button-
|
|
101
|
+
}, "tertiary-button-dc2ab2");
|
|
102
102
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
103
103
|
displayName: 'TertiaryButton',
|
|
104
104
|
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { buttonStencil } from './BaseButton';
|
|
2
|
+
import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
3
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import { createStencil } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
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: "
|
|
12
|
-
}, "delete-button-
|
|
11
|
+
base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
|
|
12
|
+
}, "delete-button-d069ff");
|
|
13
13
|
/**
|
|
14
14
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
15
15
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FASxB,CAAC"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
4
|
-
import { createStencil } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
|
-
import { buttonStencil } from './BaseButton';
|
|
6
|
+
import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
7
7
|
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: "
|
|
11
|
+
base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
variant: {
|
|
14
14
|
// Inverse Styles
|
|
15
|
-
inverse: { name: "
|
|
15
|
+
inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
}, "primary-button-
|
|
18
|
+
}, "primary-button-a56ed8");
|
|
19
19
|
export const PrimaryButton = createComponent('button')({
|
|
20
20
|
displayName: 'PrimaryButton',
|
|
21
21
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { buttonStencil } from './BaseButton';
|
|
2
|
+
import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
3
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import { createStencil } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
7
|
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: "
|
|
11
|
+
base: { name: "67b9b8", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
variant: {
|
|
14
|
-
inverse: { name: "
|
|
14
|
+
inverse: { name: "3e1152", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
}, "secondary-button-
|
|
17
|
+
}, "secondary-button-c33259");
|
|
18
18
|
export const SecondaryButton = createComponent('button')({
|
|
19
19
|
displayName: 'SecondaryButton',
|
|
20
20
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsQD,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { buttonStencil } from './BaseButton';
|
|
2
|
+
import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
3
3
|
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import { calc, createStencil } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { calc, createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { system, brand } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
7
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
@@ -9,74 +9,74 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
9
9
|
const tertiaryButtonStencil = createStencil({
|
|
10
10
|
extends: buttonStencil,
|
|
11
11
|
// Base Styles
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "ffe654", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, 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{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
// IconPosition Styles
|
|
15
15
|
iconPosition: {
|
|
16
|
-
only: { name: "
|
|
17
|
-
start: { name: "
|
|
18
|
-
end: { name: "
|
|
16
|
+
only: { name: "83cdfe", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
17
|
+
start: { name: "74ae7d", styles: "" },
|
|
18
|
+
end: { name: "526d6e", styles: "" }
|
|
19
19
|
},
|
|
20
20
|
isThemeable: {
|
|
21
|
-
true: { name: "
|
|
21
|
+
true: { name: "a82202", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
|
|
22
22
|
},
|
|
23
23
|
variant: {
|
|
24
24
|
// Inverse Styles
|
|
25
|
-
inverse: { name: "
|
|
25
|
+
inverse: { name: "1f333b", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, 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{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, 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: "267da1", 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: "bfdcdf", 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: "489483", 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: "98e2d0", 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: "c9fa78", 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: "69061d", 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: "5d8afb", 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: "a26836", 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: "0f9b2c", 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: "484a1c", 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: "b8b1ae", 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: "4071aa", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
77
77
|
}
|
|
78
78
|
]
|
|
79
|
-
}, "tertiary-button-
|
|
79
|
+
}, "tertiary-button-dc2ab2");
|
|
80
80
|
export const TertiaryButton = createComponent('button')({
|
|
81
81
|
displayName: 'TertiaryButton',
|
|
82
82
|
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.12",
|
|
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.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.0.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.0.12",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.0.12",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^2.0.0",
|
|
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": "442dc6bb54412fe61deba996cb6e686cc4090777"
|
|
71
71
|
}
|