@planningcenter/tapestry-react 4.11.6-rc.0 → 4.11.6-rc.1
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/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +1 -1
- package/dist/system/button-themes.d.ts +171 -0
- package/dist/system/button-themes.d.ts.map +1 -1
- package/dist/system/button-themes.js +1 -1
- package/dist/system/default-theme.d.ts +171 -0
- package/dist/system/default-theme.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,IAAI,MAAM,SAAS,CAAA;AAG1B,OAAO,EAAa,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAE9D,OAAO,OAAO,MAAM,YAAY,CAAA;AAChC,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1E,OAAO,KAAK,MAAM,SAAS,CAAA;AAE3B,UAAU,KAAK;IAIb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAKlB,YAAY,CAAC,EAAE,MAAM,CAAA;IAKrB,IAAI,CAAC,EAAE,MAAM,CAAA;IAMb,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;IAKjD,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;IAKrD,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;IAGtD,YAAY,CAAC,EAAE,MAAM,CAAA;IAKrB,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;IAKrB,OAAO,CAAC,EAAE,GAAG,CAAA;IAKb,MAAM,CAAC,EAAE,OAAO,CAAA;IAKhB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAKtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAKvB,EAAE,CAAC,EAAE,MAAM,CAAA;IAKX,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;IAKvD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IAKpC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;CACvC;AACD,KAAK,iBAAiB,GAAG,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,KAAK,CAAC,CAAA;AACxE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,EAAE,GAAG,QAAQ,GAAG,GAAG,IAAI,OAAO,CAC9D,CAAC,EACD,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAA;AAEtC,wBAAgB,MAAM,CAAC,CAAC,SAAS,EAAE,GAAG,QAAQ,GAAG,GAAG,EAAE,EACpD,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAiB,EACjB,KAAK,EACL,EAAE,EACF,OAAO,EAAE,kBAAkB,EAC3B,IAAe,EACf,OAAO,EACP,YAAY,EAAE,oBAAoB,EAClC,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,IAAI,MAAM,SAAS,CAAA;AAG1B,OAAO,EAAa,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAE9D,OAAO,OAAO,MAAM,YAAY,CAAA;AAChC,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1E,OAAO,KAAK,MAAM,SAAS,CAAA;AAE3B,UAAU,KAAK;IAIb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAKlB,YAAY,CAAC,EAAE,MAAM,CAAA;IAKrB,IAAI,CAAC,EAAE,MAAM,CAAA;IAMb,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;IAKjD,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;IAKrD,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;IAGtD,YAAY,CAAC,EAAE,MAAM,CAAA;IAKrB,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;IAKrB,OAAO,CAAC,EAAE,GAAG,CAAA;IAKb,MAAM,CAAC,EAAE,OAAO,CAAA;IAKhB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAKtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAKvB,EAAE,CAAC,EAAE,MAAM,CAAA;IAKX,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;IAKvD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IAKpC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;CACvC;AACD,KAAK,iBAAiB,GAAG,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,KAAK,CAAC,CAAA;AACxE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,EAAE,GAAG,QAAQ,GAAG,GAAG,IAAI,OAAO,CAC9D,CAAC,EACD,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAA;AAEtC,wBAAgB,MAAM,CAAC,CAAC,SAAS,EAAE,GAAG,QAAQ,GAAG,GAAG,EAAE,EACpD,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAiB,EACjB,KAAK,EACL,EAAE,EACF,OAAO,EAAE,kBAAkB,EAC3B,IAAe,EACf,OAAO,EACP,YAAY,EAAE,oBAAoB,EAClC,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,eAoThB;yBAxUe,MAAM;;;;;;;;;;;;;;;AA4UtB,MAAM,WAAW,MAAM,CAAC,CAAC,SAAS,EAAE,GAAG,QAAQ,GAAG,GAAG,CACnD,SAAQ,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,KAAK,EAAE,OAAO,KAAK,CAAA;CACpB"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e,__assign as t}from'./../ext/tslib/tslib.es6.js';import i from"react";import{designTokens as o}from"../designTokens/index.js";import{useAccessibilityViolation as n}from"../hooks/use-accessibility-violation.js";import r from"../Icon/Icon.js";import{Link as a}from"../Link/Link.js";import{Spinner as s}from"../Spinner/Spinner.js";import{StackView as l}from"../StackView/StackView.js";import{useThemeValue as c,useBoxSize as
|
|
1
|
+
import{__rest as e,__assign as t}from'./../ext/tslib/tslib.es6.js';import i from"react";import{designTokens as o}from"../designTokens/index.js";import{useAccessibilityViolation as n}from"../hooks/use-accessibility-violation.js";import r from"../Icon/Icon.js";import{Link as a}from"../Link/Link.js";import{Spinner as s}from"../Spinner/Spinner.js";import{StackView as l}from"../StackView/StackView.js";import{useThemeValue as c,useBoxSize as d}from"../system/utils.js";import p from"../Tooltip/Tooltip.js";import{mergeProps as u}from"../utils.js";import m from"./Input.js";function f(m){var f,h=m.children,b=m.disabled,g=m.external,y=m.icon,v=m.iconLeft,k=m.iconRight,z=m.onClick,j=m.onKeyDown,w=m.size,x=m.spinner,E=m.square,Q=m.theme,V=void 0===Q?"default":Q,D=m.title,C=m.to,I=m.tooltip,R=m.type,S=void 0===R?"button":R,T=m.variant,H=m.focusVisible,L=e(m,["children","disabled","external","icon","iconLeft","iconRight","onClick","onKeyDown","size","spinner","square","theme","title","to","tooltip","type","variant","focusVisible"]),P=c("button.themes"),K=T||"fill",W=d(w),A=W.boxSize,_=W.fontSize,q=W.lineHeight,B=W.paddingHorizontal,N=W.paddingHorizontalDense,O=W.paddingVertical,F={alignment:"center",as:L.href||C?"a":"button",axis:"horizontal",distribution:"center",focusVisible:H,fontSize:_,fontWeight:400,inline:!0,lineHeight:q,position:"relative",radius:o.button.borderRadius,strokeAlign:"inside",strokeWeight:1,type:S,userSelect:"none",zIndex:1};if(V&&"boolean"!=typeof V){var G=P[V];if(G){var J=G[K];if(J){J.disabled;var M=J.mediaQueries,U=e(J,["disabled","mediaQueries"]);F=t(t({},F),U),M&&L.mediaQueries?F.mediaQueries=t(t({},M),L.mediaQueries):M&&(F.mediaQueries=M)}else console.warn('Could not find "'.concat(K,'" in "').concat(V,'" theme. Check your ThemeProvider and make sure "').concat(K,'" variant exists in "').concat(V,'".'))}else"false"===V?console.warn('The string "false" is not a valid theme. Please pass a boolean %cfalse%c instead.',"color:red","color:inherit"):console.warn('Could not find "'.concat(V,'" in button.themes. Check your ThemeProvider and make sure "').concat(V,'" exists.'))}"string"==typeof y&&(y={name:y}),"string"==typeof v&&(v={name:v}),"string"==typeof k&&(k={name:k});var X="string"==typeof I?{title:I}:I;if(y&&(B=N,F["aria-label"]=X?X.title:D),E?(F.width=A,F.height=A):y&&(F.minWidth=A,F.minHeight=A),"pill"===L.radius?F.paddingHorizontal=1.25*B:"pill-left"===L.radius?(F.paddingLeft=1.25*B,F.paddingRight=B):"pill-right"===L.radius?(F.paddingLeft=B,F.paddingRight=1.25*B):(!y||v||k)&&(F.paddingHorizontal=B,F.paddingVertical=O),x&&(f=F.color,F.color="transparent",y&&(y.color="transparent"),v&&(v.color="transparent"),k&&(k.color="transparent")),b&&"boolean"!=typeof V){var Y=P[V];if(Y){var Z=Y[K];Z&&Z.disabled?F=t(t({},F),Z.disabled):F.opacity=.65,(null==Z?void 0:Z.mediaQueries)&&(F.mediaQueries=Object.entries(Z.mediaQueries).reduce((function(e,i){var o=i[0],n=i[1],r=n&&"object"==typeof n&&"disabled"in n&&n.disabled;return r&&"object"==typeof r&&(e[o]=t(t({},e[o]),r)),e}),t({},F.mediaQueries)))}F["aria-disabled"]=!0,F.cursor="not-allowed",F.onClick=function(e){return e.preventDefault()},F.onKeyDown=function(e){"Enter"!==e.key&&" "!==e.key||e.preventDefault()}}if(b||x?(F.hover=void 0,F.active=void 0):(F.focus=t({zIndex:5},F.focus),F.cursor="pointer",F.touchAction="manipulation",F.onClick=z,F.onKeyDown=function(e){!z||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),z(e)),j&&j(e)}),g&&(F.rel="noopener noreferrer",F.target="_blank"),C&&(L.href=C),(C||L.href)&&(F=t(t({},F),{type:null})),"outline"===K&&(F=t(t({},F),{hover:t({strokeAlign:"inside",strokeWeight:1,zIndex:2},F.hover)})),L.as&&(F.to=C,"button"!==L.as&&(F=t(t({},F),{type:null}))),"production"!==process.env.NODE_ENV){if(y&&!(D||X&&X.title)){var $=n(i.createElement(i.Fragment,null,"Icon only buttons must define either a"," ",i.createElement(a,{external:!0,to:"https://planningcenter.github.io/tapestry-react/button#tooltip",weight:700},"tooltip")," ","or"," ",i.createElement(a,{external:!0,to:"https://planningcenter.github.io/tapestry-react/button#title",weight:700},"title")," ","prop."),'Tapestry-React: <Button/> icon only buttons must define either a "tooltip" or "title" prop for proper accessibility.'),ee=$.tooltipProps,te=$.wrapperProps;X=ee,L=u(L,te)}F.type&&L.as&&"button"!==L.as&&console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <".concat(L.as,">."))}var ie=F.focusVisible,oe=e(F,["focusVisible"]);L.mediaQueries;var ne=e(L,["mediaQueries"]);return i.createElement(p,t({},X),i.createElement(l,t({},oe,ne,{css:t(t({},L.css),{"&:focus-visible":ie})}),v&&i.createElement(r,t({size:w,color:F.color,marginRight:N},v)),y?i.createElement(r,t({size:w,color:F.color},y)):D||h,k&&i.createElement(r,t({size:w,color:F.color,marginLeft:N},k)),x&&i.createElement(s,t({size:w,color:f},x,{center:!0}))))}f.Input=m;export{f as Button};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -9,6 +9,11 @@ export declare const buttonThemes: {
|
|
|
9
9
|
hover: {
|
|
10
10
|
backgroundColor: string;
|
|
11
11
|
};
|
|
12
|
+
disabled: {
|
|
13
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
14
|
+
color: "var(--t-text-color-default-disabled)";
|
|
15
|
+
opacity: number;
|
|
16
|
+
};
|
|
12
17
|
};
|
|
13
18
|
naked: {
|
|
14
19
|
active: {
|
|
@@ -18,6 +23,10 @@ export declare const buttonThemes: {
|
|
|
18
23
|
hover: {
|
|
19
24
|
backgroundColor: string;
|
|
20
25
|
};
|
|
26
|
+
disabled: {
|
|
27
|
+
color: "var(--t-text-color-default-disabled)";
|
|
28
|
+
opacity: number;
|
|
29
|
+
};
|
|
21
30
|
};
|
|
22
31
|
outline: {
|
|
23
32
|
active: {
|
|
@@ -28,6 +37,12 @@ export declare const buttonThemes: {
|
|
|
28
37
|
backgroundColor: string;
|
|
29
38
|
};
|
|
30
39
|
stroke: string;
|
|
40
|
+
disabled: {
|
|
41
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
42
|
+
color: "var(--t-text-color-default-disabled)";
|
|
43
|
+
opacity: number;
|
|
44
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
45
|
+
};
|
|
31
46
|
};
|
|
32
47
|
};
|
|
33
48
|
default: {
|
|
@@ -40,6 +55,11 @@ export declare const buttonThemes: {
|
|
|
40
55
|
active: {
|
|
41
56
|
backgroundColor: "var(--t-fill-color-button-neutral-solid-active)";
|
|
42
57
|
};
|
|
58
|
+
disabled: {
|
|
59
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
60
|
+
color: "var(--t-text-color-default-disabled)";
|
|
61
|
+
opacity: number;
|
|
62
|
+
};
|
|
43
63
|
};
|
|
44
64
|
naked: {
|
|
45
65
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -49,6 +69,10 @@ export declare const buttonThemes: {
|
|
|
49
69
|
active: {
|
|
50
70
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
51
71
|
};
|
|
72
|
+
disabled: {
|
|
73
|
+
color: "var(--t-text-color-default-disabled)";
|
|
74
|
+
opacity: number;
|
|
75
|
+
};
|
|
52
76
|
};
|
|
53
77
|
outline: {
|
|
54
78
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -59,6 +83,12 @@ export declare const buttonThemes: {
|
|
|
59
83
|
active: {
|
|
60
84
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
61
85
|
};
|
|
86
|
+
disabled: {
|
|
87
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
88
|
+
color: "var(--t-text-color-default-disabled)";
|
|
89
|
+
opacity: number;
|
|
90
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
91
|
+
};
|
|
62
92
|
};
|
|
63
93
|
};
|
|
64
94
|
secondaryPageHeader: {
|
|
@@ -72,6 +102,12 @@ export declare const buttonThemes: {
|
|
|
72
102
|
active: {
|
|
73
103
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
74
104
|
};
|
|
105
|
+
disabled: {
|
|
106
|
+
color: "var(--t-text-color-default-disabled)";
|
|
107
|
+
backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
108
|
+
borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
109
|
+
opacity: number;
|
|
110
|
+
};
|
|
75
111
|
mediaQueries: {
|
|
76
112
|
"@media (min-width: 600px)": {
|
|
77
113
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -83,6 +119,12 @@ export declare const buttonThemes: {
|
|
|
83
119
|
active: {
|
|
84
120
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
85
121
|
};
|
|
122
|
+
disabled: {
|
|
123
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
124
|
+
color: "var(--t-text-color-default-disabled)";
|
|
125
|
+
opacity: number;
|
|
126
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
127
|
+
};
|
|
86
128
|
};
|
|
87
129
|
};
|
|
88
130
|
};
|
|
@@ -96,6 +138,12 @@ export declare const buttonThemes: {
|
|
|
96
138
|
active: {
|
|
97
139
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
98
140
|
};
|
|
141
|
+
disabled: {
|
|
142
|
+
color: "var(--t-text-color-default-disabled)";
|
|
143
|
+
backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
144
|
+
borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
145
|
+
opacity: number;
|
|
146
|
+
};
|
|
99
147
|
mediaQueries: {
|
|
100
148
|
"@media (min-width: 600px)": {
|
|
101
149
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -107,6 +155,12 @@ export declare const buttonThemes: {
|
|
|
107
155
|
active: {
|
|
108
156
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
109
157
|
};
|
|
158
|
+
disabled: {
|
|
159
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
160
|
+
color: "var(--t-text-color-default-disabled)";
|
|
161
|
+
opacity: number;
|
|
162
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
163
|
+
};
|
|
110
164
|
};
|
|
111
165
|
};
|
|
112
166
|
};
|
|
@@ -120,6 +174,12 @@ export declare const buttonThemes: {
|
|
|
120
174
|
active: {
|
|
121
175
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
122
176
|
};
|
|
177
|
+
disabled: {
|
|
178
|
+
color: "var(--t-text-color-default-disabled)";
|
|
179
|
+
backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
180
|
+
borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
181
|
+
opacity: number;
|
|
182
|
+
};
|
|
123
183
|
mediaQueries: {
|
|
124
184
|
"@media (min-width: 600px)": {
|
|
125
185
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -131,6 +191,12 @@ export declare const buttonThemes: {
|
|
|
131
191
|
active: {
|
|
132
192
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
133
193
|
};
|
|
194
|
+
disabled: {
|
|
195
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
196
|
+
color: "var(--t-text-color-default-disabled)";
|
|
197
|
+
opacity: number;
|
|
198
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
199
|
+
};
|
|
134
200
|
};
|
|
135
201
|
};
|
|
136
202
|
};
|
|
@@ -145,6 +211,11 @@ export declare const buttonThemes: {
|
|
|
145
211
|
active: {
|
|
146
212
|
backgroundColor: "var(--t-fill-color-button-delete-solid-active)";
|
|
147
213
|
};
|
|
214
|
+
disabled: {
|
|
215
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
216
|
+
color: "var(--t-text-color-default-disabled)";
|
|
217
|
+
opacity: number;
|
|
218
|
+
};
|
|
148
219
|
};
|
|
149
220
|
naked: {
|
|
150
221
|
color: "var(--t-text-color-status-error)";
|
|
@@ -154,6 +225,10 @@ export declare const buttonThemes: {
|
|
|
154
225
|
active: {
|
|
155
226
|
backgroundColor: "var(--t-fill-color-button-delete-outline-dim-active)";
|
|
156
227
|
};
|
|
228
|
+
disabled: {
|
|
229
|
+
color: "var(--t-text-color-default-disabled)";
|
|
230
|
+
opacity: number;
|
|
231
|
+
};
|
|
157
232
|
};
|
|
158
233
|
outline: {
|
|
159
234
|
color: "var(--t-text-color-status-error)";
|
|
@@ -164,6 +239,12 @@ export declare const buttonThemes: {
|
|
|
164
239
|
active: {
|
|
165
240
|
backgroundColor: "var(--t-fill-color-button-delete-outline-dim-active)";
|
|
166
241
|
};
|
|
242
|
+
disabled: {
|
|
243
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
244
|
+
color: "var(--t-text-color-default-disabled)";
|
|
245
|
+
opacity: number;
|
|
246
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
247
|
+
};
|
|
167
248
|
};
|
|
168
249
|
};
|
|
169
250
|
info: {
|
|
@@ -176,6 +257,11 @@ export declare const buttonThemes: {
|
|
|
176
257
|
hover: {
|
|
177
258
|
backgroundColor: string;
|
|
178
259
|
};
|
|
260
|
+
disabled: {
|
|
261
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
262
|
+
color: "var(--t-text-color-default-disabled)";
|
|
263
|
+
opacity: number;
|
|
264
|
+
};
|
|
179
265
|
};
|
|
180
266
|
naked: {
|
|
181
267
|
active: {
|
|
@@ -185,6 +271,10 @@ export declare const buttonThemes: {
|
|
|
185
271
|
hover: {
|
|
186
272
|
backgroundColor: string;
|
|
187
273
|
};
|
|
274
|
+
disabled: {
|
|
275
|
+
color: "var(--t-text-color-default-disabled)";
|
|
276
|
+
opacity: number;
|
|
277
|
+
};
|
|
188
278
|
};
|
|
189
279
|
outline: {
|
|
190
280
|
active: {
|
|
@@ -195,6 +285,12 @@ export declare const buttonThemes: {
|
|
|
195
285
|
backgroundColor: string;
|
|
196
286
|
};
|
|
197
287
|
stroke: string;
|
|
288
|
+
disabled: {
|
|
289
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
290
|
+
color: "var(--t-text-color-default-disabled)";
|
|
291
|
+
opacity: number;
|
|
292
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
293
|
+
};
|
|
198
294
|
};
|
|
199
295
|
};
|
|
200
296
|
light: {
|
|
@@ -207,6 +303,11 @@ export declare const buttonThemes: {
|
|
|
207
303
|
hover: {
|
|
208
304
|
backgroundColor: string;
|
|
209
305
|
};
|
|
306
|
+
disabled: {
|
|
307
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
308
|
+
color: "var(--t-text-color-default-disabled)";
|
|
309
|
+
opacity: number;
|
|
310
|
+
};
|
|
210
311
|
};
|
|
211
312
|
naked: {
|
|
212
313
|
active: {
|
|
@@ -216,6 +317,10 @@ export declare const buttonThemes: {
|
|
|
216
317
|
hover: {
|
|
217
318
|
backgroundColor: string;
|
|
218
319
|
};
|
|
320
|
+
disabled: {
|
|
321
|
+
color: "var(--t-text-color-default-disabled)";
|
|
322
|
+
opacity: number;
|
|
323
|
+
};
|
|
219
324
|
};
|
|
220
325
|
outline: {
|
|
221
326
|
active: {
|
|
@@ -226,6 +331,12 @@ export declare const buttonThemes: {
|
|
|
226
331
|
backgroundColor: string;
|
|
227
332
|
};
|
|
228
333
|
stroke: string;
|
|
334
|
+
disabled: {
|
|
335
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
336
|
+
color: "var(--t-text-color-default-disabled)";
|
|
337
|
+
opacity: number;
|
|
338
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
339
|
+
};
|
|
229
340
|
};
|
|
230
341
|
};
|
|
231
342
|
primary: {
|
|
@@ -238,6 +349,11 @@ export declare const buttonThemes: {
|
|
|
238
349
|
active: {
|
|
239
350
|
backgroundColor: "var(--t-fill-color-button-interaction-solid-active)";
|
|
240
351
|
};
|
|
352
|
+
disabled: {
|
|
353
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
354
|
+
color: "var(--t-text-color-default-disabled)";
|
|
355
|
+
opacity: number;
|
|
356
|
+
};
|
|
241
357
|
};
|
|
242
358
|
naked: {
|
|
243
359
|
color: "var(--t-text-color-interaction-primary)";
|
|
@@ -247,6 +363,10 @@ export declare const buttonThemes: {
|
|
|
247
363
|
active: {
|
|
248
364
|
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-active)";
|
|
249
365
|
};
|
|
366
|
+
disabled: {
|
|
367
|
+
color: "var(--t-text-color-default-disabled)";
|
|
368
|
+
opacity: number;
|
|
369
|
+
};
|
|
250
370
|
};
|
|
251
371
|
outline: {
|
|
252
372
|
color: "var(--t-text-color-interaction-primary)";
|
|
@@ -257,6 +377,12 @@ export declare const buttonThemes: {
|
|
|
257
377
|
active: {
|
|
258
378
|
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-active)";
|
|
259
379
|
};
|
|
380
|
+
disabled: {
|
|
381
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
382
|
+
color: "var(--t-text-color-default-disabled)";
|
|
383
|
+
opacity: number;
|
|
384
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
385
|
+
};
|
|
260
386
|
};
|
|
261
387
|
};
|
|
262
388
|
success: {
|
|
@@ -269,6 +395,11 @@ export declare const buttonThemes: {
|
|
|
269
395
|
hover: {
|
|
270
396
|
backgroundColor: string;
|
|
271
397
|
};
|
|
398
|
+
disabled: {
|
|
399
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
400
|
+
color: "var(--t-text-color-default-disabled)";
|
|
401
|
+
opacity: number;
|
|
402
|
+
};
|
|
272
403
|
};
|
|
273
404
|
naked: {
|
|
274
405
|
active: {
|
|
@@ -278,6 +409,10 @@ export declare const buttonThemes: {
|
|
|
278
409
|
hover: {
|
|
279
410
|
backgroundColor: string;
|
|
280
411
|
};
|
|
412
|
+
disabled: {
|
|
413
|
+
color: "var(--t-text-color-default-disabled)";
|
|
414
|
+
opacity: number;
|
|
415
|
+
};
|
|
281
416
|
};
|
|
282
417
|
outline: {
|
|
283
418
|
active: {
|
|
@@ -288,6 +423,12 @@ export declare const buttonThemes: {
|
|
|
288
423
|
backgroundColor: string;
|
|
289
424
|
};
|
|
290
425
|
stroke: string;
|
|
426
|
+
disabled: {
|
|
427
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
428
|
+
color: "var(--t-text-color-default-disabled)";
|
|
429
|
+
opacity: number;
|
|
430
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
431
|
+
};
|
|
291
432
|
};
|
|
292
433
|
};
|
|
293
434
|
warning: {
|
|
@@ -300,6 +441,11 @@ export declare const buttonThemes: {
|
|
|
300
441
|
hover: {
|
|
301
442
|
backgroundColor: string;
|
|
302
443
|
};
|
|
444
|
+
disabled: {
|
|
445
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
446
|
+
color: "var(--t-text-color-default-disabled)";
|
|
447
|
+
opacity: number;
|
|
448
|
+
};
|
|
303
449
|
};
|
|
304
450
|
naked: {
|
|
305
451
|
active: {
|
|
@@ -309,6 +455,10 @@ export declare const buttonThemes: {
|
|
|
309
455
|
hover: {
|
|
310
456
|
backgroundColor: string;
|
|
311
457
|
};
|
|
458
|
+
disabled: {
|
|
459
|
+
color: "var(--t-text-color-default-disabled)";
|
|
460
|
+
opacity: number;
|
|
461
|
+
};
|
|
312
462
|
};
|
|
313
463
|
outline: {
|
|
314
464
|
active: {
|
|
@@ -319,6 +469,12 @@ export declare const buttonThemes: {
|
|
|
319
469
|
backgroundColor: string;
|
|
320
470
|
};
|
|
321
471
|
stroke: string;
|
|
472
|
+
disabled: {
|
|
473
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
474
|
+
color: "var(--t-text-color-default-disabled)";
|
|
475
|
+
opacity: number;
|
|
476
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
477
|
+
};
|
|
322
478
|
};
|
|
323
479
|
};
|
|
324
480
|
white: {
|
|
@@ -331,6 +487,11 @@ export declare const buttonThemes: {
|
|
|
331
487
|
hover: {
|
|
332
488
|
backgroundColor: string;
|
|
333
489
|
};
|
|
490
|
+
disabled: {
|
|
491
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
492
|
+
color: "var(--t-text-color-default-disabled)";
|
|
493
|
+
opacity: number;
|
|
494
|
+
};
|
|
334
495
|
};
|
|
335
496
|
naked: {
|
|
336
497
|
active: {
|
|
@@ -340,6 +501,10 @@ export declare const buttonThemes: {
|
|
|
340
501
|
hover: {
|
|
341
502
|
backgroundColor: string;
|
|
342
503
|
};
|
|
504
|
+
disabled: {
|
|
505
|
+
color: "var(--t-text-color-default-disabled)";
|
|
506
|
+
opacity: number;
|
|
507
|
+
};
|
|
343
508
|
};
|
|
344
509
|
outline: {
|
|
345
510
|
active: {
|
|
@@ -350,6 +515,12 @@ export declare const buttonThemes: {
|
|
|
350
515
|
backgroundColor: string;
|
|
351
516
|
};
|
|
352
517
|
stroke: string;
|
|
518
|
+
disabled: {
|
|
519
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
520
|
+
color: "var(--t-text-color-default-disabled)";
|
|
521
|
+
opacity: number;
|
|
522
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
523
|
+
};
|
|
353
524
|
};
|
|
354
525
|
};
|
|
355
526
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-themes.d.ts","sourceRoot":"","sources":["../../src/system/button-themes.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"button-themes.d.ts","sourceRoot":"","sources":["../../src/system/button-themes.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MxB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{token as o}from"@planningcenter/tapestry";var r={color:o("--t-text-color-status-neutral"),backgroundColor:o("--t-fill-color-button-neutral-responsive-header-default"),stroke:"transparent",hover:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-active")},mediaQueries:{"@media (min-width: 600px)":{color:o("--t-text-color-status-neutral"),backgroundColor:"var(--local-page-header-button-background-color, transparent)",boxShadow:"inset 0px 0px 0px 1px var(--t-border-color-button-neutral)",hover:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-active")}}}},
|
|
1
|
+
import{token as o}from"@planningcenter/tapestry";var l={fill:{backgroundColor:o("--t-fill-color-button-interaction-solid-disabled"),color:o("--t-text-color-default-disabled"),opacity:1},naked:{color:o("--t-text-color-default-disabled"),opacity:1},outline:{backgroundColor:o("--t-fill-color-button-interaction-outline-dim-disabled"),color:o("--t-text-color-default-disabled"),opacity:1,stroke:o("--t-border-color-button-neutral")}},r={color:o("--t-text-color-status-neutral"),backgroundColor:o("--t-fill-color-button-neutral-responsive-header-default"),stroke:"transparent",hover:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-active")},disabled:{color:o("--t-text-color-default-disabled"),backgroundColor:o("--t-fill-color-button-neutral-responsive-header-disabled"),borderColor:o("--t-fill-color-button-neutral-responsive-header-disabled"),opacity:1},mediaQueries:{"@media (min-width: 600px)":{color:o("--t-text-color-status-neutral"),backgroundColor:"var(--local-page-header-button-background-color, transparent)",boxShadow:"inset 0px 0px 0px 1px var(--t-border-color-button-neutral)",hover:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-active")},disabled:l.outline}}},t={dark:{fill:{active:{backgroundColor:"dark-2"},backgroundColor:"dark-0",color:"dark-9",hover:{backgroundColor:"dark-1"},disabled:l.fill},naked:{active:{backgroundColor:"dark-1"},color:"dark-9",hover:{backgroundColor:"dark-0"},disabled:l.naked},outline:{active:{backgroundColor:"dark-1"},color:"dark-9",hover:{backgroundColor:"dark-0"},stroke:"dark-3",disabled:l.outline}},default:{fill:{backgroundColor:o("--t-fill-color-button-neutral-solid-default"),color:o("--t-text-color-status-neutral"),hover:{backgroundColor:o("--t-fill-color-button-neutral-solid-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-solid-active")},disabled:l.fill},naked:{color:o("--t-text-color-status-neutral"),hover:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-active")},disabled:l.naked},outline:{color:o("--t-text-color-status-neutral"),stroke:o("--t-border-color-button-neutral"),hover:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-neutral-outline-dim-active")},disabled:l.outline}},secondaryPageHeader:{fill:r,naked:r,outline:r},error:{fill:{backgroundColor:o("--t-fill-color-button-delete-solid-default"),color:o("--t-text-color-default-inverted"),hover:{backgroundColor:o("--t-fill-color-button-delete-solid-hover")},active:{backgroundColor:o("--t-fill-color-button-delete-solid-active")},disabled:l.fill},naked:{color:o("--t-text-color-status-error"),hover:{backgroundColor:o("--t-fill-color-button-delete-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-delete-outline-dim-active")},disabled:l.naked},outline:{color:o("--t-text-color-status-error"),stroke:o("--t-border-color-button-delete"),hover:{backgroundColor:o("--t-fill-color-button-delete-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-delete-outline-dim-active")},disabled:l.outline}},info:{fill:{active:{backgroundColor:"blue-3"},backgroundColor:"blue-5",color:"light-9",hover:{backgroundColor:"blue-4"},disabled:l.fill},naked:{active:{backgroundColor:"blue-1"},color:"blue-5",hover:{backgroundColor:"blue-0"},disabled:l.naked},outline:{active:{backgroundColor:"blue-1"},color:"blue-5",hover:{backgroundColor:"blue-0"},stroke:"blue-5",disabled:l.outline}},light:{fill:{active:{backgroundColor:"light-3"},backgroundColor:"light-1",color:"white",hover:{backgroundColor:"light-2"},disabled:l.fill},naked:{active:{backgroundColor:"light-1"},color:"light-9",hover:{backgroundColor:"light-0"},disabled:l.naked},outline:{active:{backgroundColor:"light-1"},color:"white",hover:{backgroundColor:"light-0"},stroke:"light-3",disabled:l.outline}},primary:{fill:{backgroundColor:o("--t-fill-color-button-interaction-solid-default"),color:o("--t-text-color-default-inverted"),hover:{backgroundColor:o("--t-fill-color-button-interaction-solid-hover")},active:{backgroundColor:o("--t-fill-color-button-interaction-solid-active")},disabled:l.fill},naked:{color:o("--t-text-color-interaction-primary"),hover:{backgroundColor:o("--t-fill-color-button-interaction-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-interaction-outline-dim-active")},disabled:l.naked},outline:{color:o("--t-text-color-interaction-primary"),stroke:o("--t-border-color-button-info"),hover:{backgroundColor:o("--t-fill-color-button-interaction-outline-dim-hover")},active:{backgroundColor:o("--t-fill-color-button-interaction-outline-dim-active")},disabled:l.outline}},success:{fill:{active:{backgroundColor:"success-darker"},backgroundColor:"success",color:"white",hover:{backgroundColor:"success-dark"},disabled:l.fill},naked:{active:{backgroundColor:"success-lighter"},color:"success",hover:{backgroundColor:"success-lightest"},disabled:l.naked},outline:{active:{backgroundColor:"success-lighter"},color:"success",hover:{backgroundColor:"success-lightest"},stroke:"success",disabled:l.outline}},warning:{fill:{active:{backgroundColor:"yellow-3"},backgroundColor:"yellow-5",color:"dark-9",hover:{backgroundColor:"yellow-4"},disabled:l.fill},naked:{active:{backgroundColor:"yellow-1"},color:"yellow-9",hover:{backgroundColor:"yellow-0"},disabled:l.naked},outline:{active:{backgroundColor:"yellow-1"},color:"yellow-9",hover:{backgroundColor:"yellow-0"},stroke:"yellow-5",disabled:l.outline}},white:{fill:{active:{backgroundColor:"grey-1"},backgroundColor:"white",color:"primary",hover:{backgroundColor:"grey-0"},disabled:l.fill},naked:{active:{backgroundColor:"light-1"},color:"white",hover:{backgroundColor:"light-0"},disabled:l.naked},outline:{active:{backgroundColor:"light-1"},color:"white",hover:{backgroundColor:"light-0"},stroke:"white",disabled:l.outline}}};export{t as buttonThemes};
|
|
2
2
|
//# sourceMappingURL=button-themes.js.map
|
|
@@ -21,6 +21,11 @@ declare const defaultTheme: {
|
|
|
21
21
|
hover: {
|
|
22
22
|
backgroundColor: string;
|
|
23
23
|
};
|
|
24
|
+
disabled: {
|
|
25
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
26
|
+
color: "var(--t-text-color-default-disabled)";
|
|
27
|
+
opacity: number;
|
|
28
|
+
};
|
|
24
29
|
};
|
|
25
30
|
naked: {
|
|
26
31
|
active: {
|
|
@@ -30,6 +35,10 @@ declare const defaultTheme: {
|
|
|
30
35
|
hover: {
|
|
31
36
|
backgroundColor: string;
|
|
32
37
|
};
|
|
38
|
+
disabled: {
|
|
39
|
+
color: "var(--t-text-color-default-disabled)";
|
|
40
|
+
opacity: number;
|
|
41
|
+
};
|
|
33
42
|
};
|
|
34
43
|
outline: {
|
|
35
44
|
active: {
|
|
@@ -40,6 +49,12 @@ declare const defaultTheme: {
|
|
|
40
49
|
backgroundColor: string;
|
|
41
50
|
};
|
|
42
51
|
stroke: string;
|
|
52
|
+
disabled: {
|
|
53
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
54
|
+
color: "var(--t-text-color-default-disabled)";
|
|
55
|
+
opacity: number;
|
|
56
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
57
|
+
};
|
|
43
58
|
};
|
|
44
59
|
};
|
|
45
60
|
default: {
|
|
@@ -52,6 +67,11 @@ declare const defaultTheme: {
|
|
|
52
67
|
active: {
|
|
53
68
|
backgroundColor: "var(--t-fill-color-button-neutral-solid-active)";
|
|
54
69
|
};
|
|
70
|
+
disabled: {
|
|
71
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
72
|
+
color: "var(--t-text-color-default-disabled)";
|
|
73
|
+
opacity: number;
|
|
74
|
+
};
|
|
55
75
|
};
|
|
56
76
|
naked: {
|
|
57
77
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -61,6 +81,10 @@ declare const defaultTheme: {
|
|
|
61
81
|
active: {
|
|
62
82
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
63
83
|
};
|
|
84
|
+
disabled: {
|
|
85
|
+
color: "var(--t-text-color-default-disabled)";
|
|
86
|
+
opacity: number;
|
|
87
|
+
};
|
|
64
88
|
};
|
|
65
89
|
outline: {
|
|
66
90
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -71,6 +95,12 @@ declare const defaultTheme: {
|
|
|
71
95
|
active: {
|
|
72
96
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
73
97
|
};
|
|
98
|
+
disabled: {
|
|
99
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
100
|
+
color: "var(--t-text-color-default-disabled)";
|
|
101
|
+
opacity: number;
|
|
102
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
103
|
+
};
|
|
74
104
|
};
|
|
75
105
|
};
|
|
76
106
|
secondaryPageHeader: {
|
|
@@ -84,6 +114,12 @@ declare const defaultTheme: {
|
|
|
84
114
|
active: {
|
|
85
115
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
86
116
|
};
|
|
117
|
+
disabled: {
|
|
118
|
+
color: "var(--t-text-color-default-disabled)";
|
|
119
|
+
backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
120
|
+
borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
121
|
+
opacity: number;
|
|
122
|
+
};
|
|
87
123
|
mediaQueries: {
|
|
88
124
|
"@media (min-width: 600px)": {
|
|
89
125
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -95,6 +131,12 @@ declare const defaultTheme: {
|
|
|
95
131
|
active: {
|
|
96
132
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
97
133
|
};
|
|
134
|
+
disabled: {
|
|
135
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
136
|
+
color: "var(--t-text-color-default-disabled)";
|
|
137
|
+
opacity: number;
|
|
138
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
139
|
+
};
|
|
98
140
|
};
|
|
99
141
|
};
|
|
100
142
|
};
|
|
@@ -108,6 +150,12 @@ declare const defaultTheme: {
|
|
|
108
150
|
active: {
|
|
109
151
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
110
152
|
};
|
|
153
|
+
disabled: {
|
|
154
|
+
color: "var(--t-text-color-default-disabled)";
|
|
155
|
+
backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
156
|
+
borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
157
|
+
opacity: number;
|
|
158
|
+
};
|
|
111
159
|
mediaQueries: {
|
|
112
160
|
"@media (min-width: 600px)": {
|
|
113
161
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -119,6 +167,12 @@ declare const defaultTheme: {
|
|
|
119
167
|
active: {
|
|
120
168
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
121
169
|
};
|
|
170
|
+
disabled: {
|
|
171
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
172
|
+
color: "var(--t-text-color-default-disabled)";
|
|
173
|
+
opacity: number;
|
|
174
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
175
|
+
};
|
|
122
176
|
};
|
|
123
177
|
};
|
|
124
178
|
};
|
|
@@ -132,6 +186,12 @@ declare const defaultTheme: {
|
|
|
132
186
|
active: {
|
|
133
187
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
134
188
|
};
|
|
189
|
+
disabled: {
|
|
190
|
+
color: "var(--t-text-color-default-disabled)";
|
|
191
|
+
backgroundColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
192
|
+
borderColor: "var(--t-fill-color-button-neutral-responsive-header-disabled)";
|
|
193
|
+
opacity: number;
|
|
194
|
+
};
|
|
135
195
|
mediaQueries: {
|
|
136
196
|
"@media (min-width: 600px)": {
|
|
137
197
|
color: "var(--t-text-color-status-neutral)";
|
|
@@ -143,6 +203,12 @@ declare const defaultTheme: {
|
|
|
143
203
|
active: {
|
|
144
204
|
backgroundColor: "var(--t-fill-color-button-neutral-outline-dim-active)";
|
|
145
205
|
};
|
|
206
|
+
disabled: {
|
|
207
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
208
|
+
color: "var(--t-text-color-default-disabled)";
|
|
209
|
+
opacity: number;
|
|
210
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
211
|
+
};
|
|
146
212
|
};
|
|
147
213
|
};
|
|
148
214
|
};
|
|
@@ -157,6 +223,11 @@ declare const defaultTheme: {
|
|
|
157
223
|
active: {
|
|
158
224
|
backgroundColor: "var(--t-fill-color-button-delete-solid-active)";
|
|
159
225
|
};
|
|
226
|
+
disabled: {
|
|
227
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
228
|
+
color: "var(--t-text-color-default-disabled)";
|
|
229
|
+
opacity: number;
|
|
230
|
+
};
|
|
160
231
|
};
|
|
161
232
|
naked: {
|
|
162
233
|
color: "var(--t-text-color-status-error)";
|
|
@@ -166,6 +237,10 @@ declare const defaultTheme: {
|
|
|
166
237
|
active: {
|
|
167
238
|
backgroundColor: "var(--t-fill-color-button-delete-outline-dim-active)";
|
|
168
239
|
};
|
|
240
|
+
disabled: {
|
|
241
|
+
color: "var(--t-text-color-default-disabled)";
|
|
242
|
+
opacity: number;
|
|
243
|
+
};
|
|
169
244
|
};
|
|
170
245
|
outline: {
|
|
171
246
|
color: "var(--t-text-color-status-error)";
|
|
@@ -176,6 +251,12 @@ declare const defaultTheme: {
|
|
|
176
251
|
active: {
|
|
177
252
|
backgroundColor: "var(--t-fill-color-button-delete-outline-dim-active)";
|
|
178
253
|
};
|
|
254
|
+
disabled: {
|
|
255
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
256
|
+
color: "var(--t-text-color-default-disabled)";
|
|
257
|
+
opacity: number;
|
|
258
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
259
|
+
};
|
|
179
260
|
};
|
|
180
261
|
};
|
|
181
262
|
info: {
|
|
@@ -188,6 +269,11 @@ declare const defaultTheme: {
|
|
|
188
269
|
hover: {
|
|
189
270
|
backgroundColor: string;
|
|
190
271
|
};
|
|
272
|
+
disabled: {
|
|
273
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
274
|
+
color: "var(--t-text-color-default-disabled)";
|
|
275
|
+
opacity: number;
|
|
276
|
+
};
|
|
191
277
|
};
|
|
192
278
|
naked: {
|
|
193
279
|
active: {
|
|
@@ -197,6 +283,10 @@ declare const defaultTheme: {
|
|
|
197
283
|
hover: {
|
|
198
284
|
backgroundColor: string;
|
|
199
285
|
};
|
|
286
|
+
disabled: {
|
|
287
|
+
color: "var(--t-text-color-default-disabled)";
|
|
288
|
+
opacity: number;
|
|
289
|
+
};
|
|
200
290
|
};
|
|
201
291
|
outline: {
|
|
202
292
|
active: {
|
|
@@ -207,6 +297,12 @@ declare const defaultTheme: {
|
|
|
207
297
|
backgroundColor: string;
|
|
208
298
|
};
|
|
209
299
|
stroke: string;
|
|
300
|
+
disabled: {
|
|
301
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
302
|
+
color: "var(--t-text-color-default-disabled)";
|
|
303
|
+
opacity: number;
|
|
304
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
305
|
+
};
|
|
210
306
|
};
|
|
211
307
|
};
|
|
212
308
|
light: {
|
|
@@ -219,6 +315,11 @@ declare const defaultTheme: {
|
|
|
219
315
|
hover: {
|
|
220
316
|
backgroundColor: string;
|
|
221
317
|
};
|
|
318
|
+
disabled: {
|
|
319
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
320
|
+
color: "var(--t-text-color-default-disabled)";
|
|
321
|
+
opacity: number;
|
|
322
|
+
};
|
|
222
323
|
};
|
|
223
324
|
naked: {
|
|
224
325
|
active: {
|
|
@@ -228,6 +329,10 @@ declare const defaultTheme: {
|
|
|
228
329
|
hover: {
|
|
229
330
|
backgroundColor: string;
|
|
230
331
|
};
|
|
332
|
+
disabled: {
|
|
333
|
+
color: "var(--t-text-color-default-disabled)";
|
|
334
|
+
opacity: number;
|
|
335
|
+
};
|
|
231
336
|
};
|
|
232
337
|
outline: {
|
|
233
338
|
active: {
|
|
@@ -238,6 +343,12 @@ declare const defaultTheme: {
|
|
|
238
343
|
backgroundColor: string;
|
|
239
344
|
};
|
|
240
345
|
stroke: string;
|
|
346
|
+
disabled: {
|
|
347
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
348
|
+
color: "var(--t-text-color-default-disabled)";
|
|
349
|
+
opacity: number;
|
|
350
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
351
|
+
};
|
|
241
352
|
};
|
|
242
353
|
};
|
|
243
354
|
primary: {
|
|
@@ -250,6 +361,11 @@ declare const defaultTheme: {
|
|
|
250
361
|
active: {
|
|
251
362
|
backgroundColor: "var(--t-fill-color-button-interaction-solid-active)";
|
|
252
363
|
};
|
|
364
|
+
disabled: {
|
|
365
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
366
|
+
color: "var(--t-text-color-default-disabled)";
|
|
367
|
+
opacity: number;
|
|
368
|
+
};
|
|
253
369
|
};
|
|
254
370
|
naked: {
|
|
255
371
|
color: "var(--t-text-color-interaction-primary)";
|
|
@@ -259,6 +375,10 @@ declare const defaultTheme: {
|
|
|
259
375
|
active: {
|
|
260
376
|
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-active)";
|
|
261
377
|
};
|
|
378
|
+
disabled: {
|
|
379
|
+
color: "var(--t-text-color-default-disabled)";
|
|
380
|
+
opacity: number;
|
|
381
|
+
};
|
|
262
382
|
};
|
|
263
383
|
outline: {
|
|
264
384
|
color: "var(--t-text-color-interaction-primary)";
|
|
@@ -269,6 +389,12 @@ declare const defaultTheme: {
|
|
|
269
389
|
active: {
|
|
270
390
|
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-active)";
|
|
271
391
|
};
|
|
392
|
+
disabled: {
|
|
393
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
394
|
+
color: "var(--t-text-color-default-disabled)";
|
|
395
|
+
opacity: number;
|
|
396
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
397
|
+
};
|
|
272
398
|
};
|
|
273
399
|
};
|
|
274
400
|
success: {
|
|
@@ -281,6 +407,11 @@ declare const defaultTheme: {
|
|
|
281
407
|
hover: {
|
|
282
408
|
backgroundColor: string;
|
|
283
409
|
};
|
|
410
|
+
disabled: {
|
|
411
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
412
|
+
color: "var(--t-text-color-default-disabled)";
|
|
413
|
+
opacity: number;
|
|
414
|
+
};
|
|
284
415
|
};
|
|
285
416
|
naked: {
|
|
286
417
|
active: {
|
|
@@ -290,6 +421,10 @@ declare const defaultTheme: {
|
|
|
290
421
|
hover: {
|
|
291
422
|
backgroundColor: string;
|
|
292
423
|
};
|
|
424
|
+
disabled: {
|
|
425
|
+
color: "var(--t-text-color-default-disabled)";
|
|
426
|
+
opacity: number;
|
|
427
|
+
};
|
|
293
428
|
};
|
|
294
429
|
outline: {
|
|
295
430
|
active: {
|
|
@@ -300,6 +435,12 @@ declare const defaultTheme: {
|
|
|
300
435
|
backgroundColor: string;
|
|
301
436
|
};
|
|
302
437
|
stroke: string;
|
|
438
|
+
disabled: {
|
|
439
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
440
|
+
color: "var(--t-text-color-default-disabled)";
|
|
441
|
+
opacity: number;
|
|
442
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
443
|
+
};
|
|
303
444
|
};
|
|
304
445
|
};
|
|
305
446
|
warning: {
|
|
@@ -312,6 +453,11 @@ declare const defaultTheme: {
|
|
|
312
453
|
hover: {
|
|
313
454
|
backgroundColor: string;
|
|
314
455
|
};
|
|
456
|
+
disabled: {
|
|
457
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
458
|
+
color: "var(--t-text-color-default-disabled)";
|
|
459
|
+
opacity: number;
|
|
460
|
+
};
|
|
315
461
|
};
|
|
316
462
|
naked: {
|
|
317
463
|
active: {
|
|
@@ -321,6 +467,10 @@ declare const defaultTheme: {
|
|
|
321
467
|
hover: {
|
|
322
468
|
backgroundColor: string;
|
|
323
469
|
};
|
|
470
|
+
disabled: {
|
|
471
|
+
color: "var(--t-text-color-default-disabled)";
|
|
472
|
+
opacity: number;
|
|
473
|
+
};
|
|
324
474
|
};
|
|
325
475
|
outline: {
|
|
326
476
|
active: {
|
|
@@ -331,6 +481,12 @@ declare const defaultTheme: {
|
|
|
331
481
|
backgroundColor: string;
|
|
332
482
|
};
|
|
333
483
|
stroke: string;
|
|
484
|
+
disabled: {
|
|
485
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
486
|
+
color: "var(--t-text-color-default-disabled)";
|
|
487
|
+
opacity: number;
|
|
488
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
489
|
+
};
|
|
334
490
|
};
|
|
335
491
|
};
|
|
336
492
|
white: {
|
|
@@ -343,6 +499,11 @@ declare const defaultTheme: {
|
|
|
343
499
|
hover: {
|
|
344
500
|
backgroundColor: string;
|
|
345
501
|
};
|
|
502
|
+
disabled: {
|
|
503
|
+
backgroundColor: "var(--t-fill-color-button-interaction-solid-disabled)";
|
|
504
|
+
color: "var(--t-text-color-default-disabled)";
|
|
505
|
+
opacity: number;
|
|
506
|
+
};
|
|
346
507
|
};
|
|
347
508
|
naked: {
|
|
348
509
|
active: {
|
|
@@ -352,6 +513,10 @@ declare const defaultTheme: {
|
|
|
352
513
|
hover: {
|
|
353
514
|
backgroundColor: string;
|
|
354
515
|
};
|
|
516
|
+
disabled: {
|
|
517
|
+
color: "var(--t-text-color-default-disabled)";
|
|
518
|
+
opacity: number;
|
|
519
|
+
};
|
|
355
520
|
};
|
|
356
521
|
outline: {
|
|
357
522
|
active: {
|
|
@@ -362,6 +527,12 @@ declare const defaultTheme: {
|
|
|
362
527
|
backgroundColor: string;
|
|
363
528
|
};
|
|
364
529
|
stroke: string;
|
|
530
|
+
disabled: {
|
|
531
|
+
backgroundColor: "var(--t-fill-color-button-interaction-outline-dim-disabled)";
|
|
532
|
+
color: "var(--t-text-color-default-disabled)";
|
|
533
|
+
opacity: number;
|
|
534
|
+
stroke: "var(--t-border-color-button-neutral)";
|
|
535
|
+
};
|
|
365
536
|
};
|
|
366
537
|
};
|
|
367
538
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../src/system/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAqBhE,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../src/system/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAqBhE,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCjB,CAAA;AAED,eAAe,YAAY,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/tapestry-react",
|
|
3
|
-
"version": "4.11.6-rc.
|
|
3
|
+
"version": "4.11.6-rc.1",
|
|
4
4
|
"description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
|
|
5
5
|
"author": "Front End Systems Engineering <frontend@pco.bz>",
|
|
6
6
|
"main": "./dist/index.js",
|