@itcase/ui-web 1.9.108 → 1.9.110
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/cjs/components/Radio.js +1 -1
- package/dist/components/Radio.js +1 -1
- package/dist/css/styles/bundles.css +2 -1
- package/dist/types/components/Checkbox/stories/CheckboxDemo.stories.js +1 -1
- package/dist/types/components/Radio/Radio.appearance.d.ts +87 -21
- package/dist/types/components/Radio/appearance/radioDefault.d.ts +51 -1
- package/dist/types/components/Radio/appearance/radioDefault.js +51 -1
- package/dist/types/components/Radio/appearance/radioDisabled.d.ts +11 -7
- package/dist/types/components/Radio/appearance/radioDisabled.js +11 -7
- package/dist/types/components/Radio/appearance/radioError.d.ts +8 -4
- package/dist/types/components/Radio/appearance/radioError.js +8 -4
- package/dist/types/components/Radio/appearance/radioRequire.d.ts +8 -4
- package/dist/types/components/Radio/appearance/radioRequire.js +8 -4
- package/dist/types/components/Radio/appearance/radioSuccess.d.ts +9 -5
- package/dist/types/components/Radio/appearance/radioSuccess.js +9 -5
- package/dist/types/components/Radio/stories/RadioDemo.stories.js +1 -1
- package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts +3 -0
- package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts +3 -0
- package/dist/types/storybook/createComponentGallery/createComponentGallery.js +31 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var r=require("react/jsx-runtime"),e=require("clsx"),o=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const i={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioHover:"surfaceTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"
|
|
1
|
+
"use strict";var r=require("react/jsx-runtime"),e=require("clsx"),o=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const i={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceQuaternary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultSecondary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultTertiary:{fill:"surfaceTertiary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceTertiary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",fillRadio:"errorTertiary",fillRadioActive:"errorQuaternary",fillRadioActiveHover:"errorActiveHoverPrimary",fillRadioHover:"errorHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"errorBorderQuaternary",borderRadioColorActive:"errorBorderActiveQuaternary",borderRadioColorActiveHover:"errorBorderPrimary",borderRadioColorHover:"errorBorderHoverPrimary"},successPrimary:{fill:"successPrimary",fillCheckmark:"accentSecondary",fillRadio:"surfaceTertiary",fillRadioActive:"successPrimary",fillRadioActiveHover:"successQuaternary",fillRadioHover:"surfaceSecondary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"accentBorderSecondary",borderRadioColor:"successBorderSecondary",borderRadioColorActive:"successBorderSecondary",borderRadioColorActiveHover:"successBorderPrimary",borderRadioColorHover:"surfaceBorderQuaternary"},requirePrimary:{fill:"warningTertiary",fillCheckmark:"warningPrimary",fillRadio:"warningTertiary",fillRadioActive:"warningPrimary",fillRadioActiveHover:"warningActiveHoverPrimary",fillRadioHover:"warningHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"warningBorderSecondary",borderRadioColor:"warningBorderSecondary",borderRadioColorActive:"warningBorderSecondary",borderRadioColorActiveHover:"warningBorderPrimary",borderRadioColorHover:"warningBorderHoverPrimary"},disabledPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverTertiary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"disabledTextSecondary",descTextColor:"disabledTextSecondary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderPrimary",borderRadioColorHover:"surfaceBorderHoverPrimary"},sizeM:{size:"m",labelTextSize:"s",descTextSize:"xs"},sizeXS:{size:"xs",labelTextSize:"m",descTextSize:"xs"},sizeXXS:{size:"xxs",labelTextSize:"m",descTextSize:"xs"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none",borderRadioColor:"none",borderRadioColorActive:"none",borderRadioColorActiveHover:"none",borderRadioColorHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none"}},l={appearance:i,setAppearance:r=>{l.appearance=r}};exports.Radio=function(i){const{id:d,appearance:c,className:s,dataTestId:t,dataTour:u,label:n,desc:f,checked:v,tag:y="label",value:C,isActive:b,isDisabled:R,isSkeleton:x,onChange:T}=i,H=o.useAppearanceConfig(c,l,R),m=o.useDevicePropsGenerator(i,H),{fillCheckmarkClass:A,fillClass:Q,fillHoverClass:h,fillRadioActiveClass:_,fillRadioActiveHoverClass:B,fillRadioClass:p,fillRadioHoverClass:P,labelTextColor:S,labelTextSize:k,labelTextWeight:g,descTextColor:z,descTextSize:$,descTextWeight:w,borderRadioColorActiveClass:j,borderRadioColorActiveHoverClass:q,borderRadioColorClass:N,borderRadioColorHoverClass:X,shapeClass:L,sizeClass:W}=m;return r.jsxs(y,{className:e(s,"radio",Q&&`fill_${Q}`,h&&`fill_${h}`,x&&"skeleton",W&&`radio_size_${W}`,v&&b?_&&`radio_fill_active_${_}`:p&&`radio_fill_${p}`,v&&b?B&&`radio_fill_active_hover_${B}`:P&&`radio_fill_hover_${P}`,v&&b?j&&`radio_border-color_active_${j}`:N&&`radio_border-color_${N}`,v&&b?q&&`radio_border-color_active_hover_${q}`:X&&`radio_border-color_hover_${X}`),"data-testid":t,"data-tour":u,htmlFor:d,children:[r.jsxs("div",{className:e("radio__item"),children:[r.jsx("input",{id:String(d),className:"radio__input",type:"radio",checked:v,disabled:R,value:C,onChange:T}),r.jsx("div",{className:e("radio__state",L&&`shape_${L}`),children:" "}),r.jsx("div",{className:e("radio__state-checkmark",v&&A&&`fill_${A}`),children:" "})]}),n&&r.jsx(a.Text,{className:"radio__label",size:k,textColor:S,textWeight:g,children:n}),f&&r.jsx(a.Text,{className:"radio__desc",size:$,textColor:z,textWeight:w,children:f})]})},exports.radioAppearance=i,exports.radioConfig=l;
|
package/dist/components/Radio.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as a,useDevicePropsGenerator as i}from"@itcase/ui-core/hooks";import{T as l}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const d={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioHover:"surfaceTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"
|
|
1
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as a,useDevicePropsGenerator as i}from"@itcase/ui-core/hooks";import{T as l}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const d={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceQuaternary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultSecondary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultTertiary:{fill:"surfaceTertiary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceTertiary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",fillRadio:"errorTertiary",fillRadioActive:"errorQuaternary",fillRadioActiveHover:"errorActiveHoverPrimary",fillRadioHover:"errorHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"errorBorderQuaternary",borderRadioColorActive:"errorBorderActiveQuaternary",borderRadioColorActiveHover:"errorBorderPrimary",borderRadioColorHover:"errorBorderHoverPrimary"},successPrimary:{fill:"successPrimary",fillCheckmark:"accentSecondary",fillRadio:"surfaceTertiary",fillRadioActive:"successPrimary",fillRadioActiveHover:"successQuaternary",fillRadioHover:"surfaceSecondary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"accentBorderSecondary",borderRadioColor:"successBorderSecondary",borderRadioColorActive:"successBorderSecondary",borderRadioColorActiveHover:"successBorderPrimary",borderRadioColorHover:"surfaceBorderQuaternary"},requirePrimary:{fill:"warningTertiary",fillCheckmark:"warningPrimary",fillRadio:"warningTertiary",fillRadioActive:"warningPrimary",fillRadioActiveHover:"warningActiveHoverPrimary",fillRadioHover:"warningHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"warningBorderSecondary",borderRadioColor:"warningBorderSecondary",borderRadioColorActive:"warningBorderSecondary",borderRadioColorActiveHover:"warningBorderPrimary",borderRadioColorHover:"warningBorderHoverPrimary"},disabledPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverTertiary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"disabledTextSecondary",descTextColor:"disabledTextSecondary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderPrimary",borderRadioColorHover:"surfaceBorderHoverPrimary"},sizeM:{size:"m",labelTextSize:"s",descTextSize:"xs"},sizeXS:{size:"xs",labelTextSize:"m",descTextSize:"xs"},sizeXXS:{size:"xxs",labelTextSize:"m",descTextSize:"xs"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none",borderRadioColor:"none",borderRadioColorActive:"none",borderRadioColorActiveHover:"none",borderRadioColorHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none"}},c={appearance:d,setAppearance:r=>{c.appearance=r}};function t(d){const{id:t,appearance:s,className:u,dataTestId:n,dataTour:f,label:v,desc:y,checked:C,tag:b="label",value:R,isActive:m,isDisabled:T,isSkeleton:H,onChange:x}=d,A=a(s,c,T),Q=i(d,A),{fillCheckmarkClass:h,fillClass:_,fillHoverClass:B,fillRadioActiveClass:p,fillRadioActiveHoverClass:P,fillRadioClass:S,fillRadioHoverClass:k,labelTextColor:g,labelTextSize:z,labelTextWeight:$,descTextColor:w,descTextSize:N,descTextWeight:X,borderRadioColorActiveClass:L,borderRadioColorActiveHoverClass:W,borderRadioColorClass:M,borderRadioColorHoverClass:j,shapeClass:q,sizeClass:D}=Q;return r(b,{className:o(u,"radio",_&&`fill_${_}`,B&&`fill_${B}`,H&&"skeleton",D&&`radio_size_${D}`,C&&m?p&&`radio_fill_active_${p}`:S&&`radio_fill_${S}`,C&&m?P&&`radio_fill_active_hover_${P}`:k&&`radio_fill_hover_${k}`,C&&m?L&&`radio_border-color_active_${L}`:M&&`radio_border-color_${M}`,C&&m?W&&`radio_border-color_active_hover_${W}`:j&&`radio_border-color_hover_${j}`),"data-testid":n,"data-tour":f,htmlFor:t,children:[r("div",{className:o("radio__item"),children:[e("input",{id:String(t),className:"radio__input",type:"radio",checked:C,disabled:T,value:R,onChange:x}),e("div",{className:o("radio__state",q&&`shape_${q}`),children:" "}),e("div",{className:o("radio__state-checkmark",C&&h&&`fill_${h}`),children:" "})]}),v&&e(l,{className:"radio__label",size:z,textColor:g,textWeight:$,children:v}),y&&e(l,{className:"radio__desc",size:N,textColor:w,textWeight:X,children:y})]})}export{t as Radio,d as radioAppearance,c as radioConfig};
|
|
@@ -61185,6 +61185,7 @@ h2.react-datepicker__current-month {
|
|
|
61185
61185
|
&-button {
|
|
61186
61186
|
width: 100%;
|
|
61187
61187
|
height: 100%;
|
|
61188
|
+
background: transparent;
|
|
61188
61189
|
}
|
|
61189
61190
|
}
|
|
61190
61191
|
}
|
|
@@ -81203,7 +81204,7 @@ div.label {
|
|
|
81203
81204
|
position: absolute;
|
|
81204
81205
|
left: 0;
|
|
81205
81206
|
top: 0;
|
|
81206
|
-
z-index: 3
|
|
81207
|
+
z-index: 3;;
|
|
81207
81208
|
cursor: pointer;
|
|
81208
81209
|
appearance: none;
|
|
81209
81210
|
&:disabled + .radio__state {
|
|
@@ -54,54 +54,120 @@ declare const radioAppearance: {
|
|
|
54
54
|
descTextSize: "xs";
|
|
55
55
|
};
|
|
56
56
|
disabledPrimary: {
|
|
57
|
-
fill: "
|
|
57
|
+
fill: "surfaceSecondary";
|
|
58
58
|
fillCheckmark: "surfaceQuaternary";
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
fillRadio: "surfaceSecondary";
|
|
60
|
+
fillRadioActive: "surfaceQuaternary";
|
|
61
|
+
fillRadioActiveHover: "surfaceActiveHoverTertiary";
|
|
62
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
63
|
+
labelTextColor: "disabledTextSecondary";
|
|
64
|
+
descTextColor: "disabledTextSecondary";
|
|
65
|
+
borderColor: "surfaceBorderQuaternary";
|
|
62
66
|
borderRadioColor: "surfaceBorderQuaternary";
|
|
63
|
-
borderRadioColorActive: "
|
|
64
|
-
borderRadioColorActiveHover: "
|
|
65
|
-
borderRadioColorHover: "
|
|
67
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
68
|
+
borderRadioColorActiveHover: "surfaceBorderPrimary";
|
|
69
|
+
borderRadioColorHover: "surfaceBorderHoverPrimary";
|
|
66
70
|
};
|
|
67
71
|
requirePrimary: {
|
|
68
72
|
fill: "warningTertiary";
|
|
69
73
|
fillCheckmark: "warningPrimary";
|
|
74
|
+
fillRadio: "warningTertiary";
|
|
75
|
+
fillRadioActive: "warningPrimary";
|
|
76
|
+
fillRadioActiveHover: "warningActiveHoverPrimary";
|
|
77
|
+
fillRadioHover: "warningHoverTertiary";
|
|
70
78
|
labelTextColor: "surfaceTextPrimary";
|
|
71
79
|
descTextColor: "surfaceTextPrimary";
|
|
72
80
|
borderColor: "warningBorderSecondary";
|
|
73
|
-
borderRadioColor: "
|
|
74
|
-
borderRadioColorActive: "
|
|
75
|
-
borderRadioColorActiveHover: "
|
|
76
|
-
borderRadioColorHover: "
|
|
81
|
+
borderRadioColor: "warningBorderSecondary";
|
|
82
|
+
borderRadioColorActive: "warningBorderSecondary";
|
|
83
|
+
borderRadioColorActiveHover: "warningBorderPrimary";
|
|
84
|
+
borderRadioColorHover: "warningBorderHoverPrimary";
|
|
77
85
|
};
|
|
78
86
|
successPrimary: {
|
|
79
|
-
fill: "
|
|
87
|
+
fill: "successPrimary";
|
|
80
88
|
fillCheckmark: "accentSecondary";
|
|
89
|
+
fillRadio: "surfaceTertiary";
|
|
90
|
+
fillRadioActive: "successPrimary";
|
|
91
|
+
fillRadioActiveHover: "successQuaternary";
|
|
92
|
+
fillRadioHover: "surfaceSecondary";
|
|
81
93
|
labelTextColor: "surfaceTextPrimary";
|
|
82
94
|
descTextColor: "surfaceTextPrimary";
|
|
83
95
|
borderColor: "accentBorderSecondary";
|
|
84
|
-
borderRadioColor: "
|
|
85
|
-
borderRadioColorActive: "
|
|
86
|
-
borderRadioColorActiveHover: "
|
|
87
|
-
borderRadioColorHover: "
|
|
96
|
+
borderRadioColor: "successBorderSecondary";
|
|
97
|
+
borderRadioColorActive: "successBorderSecondary";
|
|
98
|
+
borderRadioColorActiveHover: "successBorderPrimary";
|
|
99
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
88
100
|
};
|
|
89
101
|
errorPrimary: {
|
|
90
102
|
fill: "errorTertiary";
|
|
91
103
|
fillCheckmark: "errorPrimary";
|
|
104
|
+
fillRadio: "errorTertiary";
|
|
105
|
+
fillRadioActive: "errorQuaternary";
|
|
106
|
+
fillRadioActiveHover: "errorActiveHoverPrimary";
|
|
107
|
+
fillRadioHover: "errorHoverTertiary";
|
|
92
108
|
labelTextColor: "surfaceTextPrimary";
|
|
93
109
|
descTextColor: "surfaceTextPrimary";
|
|
94
110
|
borderColor: "errorBorderQuaternary";
|
|
95
|
-
borderRadioColor: "
|
|
96
|
-
borderRadioColorActive: "
|
|
97
|
-
borderRadioColorActiveHover: "
|
|
98
|
-
borderRadioColorHover: "
|
|
111
|
+
borderRadioColor: "errorBorderQuaternary";
|
|
112
|
+
borderRadioColorActive: "errorBorderActiveQuaternary";
|
|
113
|
+
borderRadioColorActiveHover: "errorBorderPrimary";
|
|
114
|
+
borderRadioColorHover: "errorBorderHoverPrimary";
|
|
99
115
|
};
|
|
100
116
|
defaultPrimary: {
|
|
101
117
|
fill: "surfaceSecondary";
|
|
102
118
|
fillCheckmark: "surfaceQuaternary";
|
|
103
119
|
fillRadio: "surfaceSecondary";
|
|
104
|
-
|
|
120
|
+
fillRadioActive: "surfaceQuaternary";
|
|
121
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
122
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
123
|
+
labelTextColor: "surfaceTextPrimary";
|
|
124
|
+
descTextColor: "surfaceTextPrimary";
|
|
125
|
+
borderColor: "surfaceBorderQuaternary";
|
|
126
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
127
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
128
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
129
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
130
|
+
shape: "circular";
|
|
131
|
+
};
|
|
132
|
+
defaultQuaternary: {
|
|
133
|
+
fill: "surfaceQuaternary";
|
|
134
|
+
fillCheckmark: "surfaceQuaternary";
|
|
135
|
+
fillRadio: "surfaceQuaternary";
|
|
136
|
+
fillRadioActive: "surfaceQuaternary";
|
|
137
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
138
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
139
|
+
labelTextColor: "surfaceTextPrimary";
|
|
140
|
+
descTextColor: "surfaceTextPrimary";
|
|
141
|
+
borderColor: "surfaceBorderQuaternary";
|
|
142
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
143
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
144
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
145
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
146
|
+
shape: "circular";
|
|
147
|
+
};
|
|
148
|
+
defaultSecondary: {
|
|
149
|
+
fill: "surfaceSecondary";
|
|
150
|
+
fillCheckmark: "surfaceQuaternary";
|
|
151
|
+
fillRadio: "surfaceSecondary";
|
|
152
|
+
fillRadioActive: "surfaceQuaternary";
|
|
153
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
154
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
155
|
+
labelTextColor: "surfaceTextPrimary";
|
|
156
|
+
descTextColor: "surfaceTextPrimary";
|
|
157
|
+
borderColor: "surfaceBorderQuaternary";
|
|
158
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
159
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
160
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
161
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
162
|
+
shape: "circular";
|
|
163
|
+
};
|
|
164
|
+
defaultTertiary: {
|
|
165
|
+
fill: "surfaceTertiary";
|
|
166
|
+
fillCheckmark: "surfaceQuaternary";
|
|
167
|
+
fillRadio: "surfaceTertiary";
|
|
168
|
+
fillRadioActive: "surfaceQuaternary";
|
|
169
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
170
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
105
171
|
labelTextColor: "surfaceTextPrimary";
|
|
106
172
|
descTextColor: "surfaceTextPrimary";
|
|
107
173
|
borderColor: "surfaceBorderQuaternary";
|
|
@@ -3,7 +3,57 @@ declare const radioAppearanceDefault: {
|
|
|
3
3
|
fill: "surfaceSecondary";
|
|
4
4
|
fillCheckmark: "surfaceQuaternary";
|
|
5
5
|
fillRadio: "surfaceSecondary";
|
|
6
|
-
|
|
6
|
+
fillRadioActive: "surfaceQuaternary";
|
|
7
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
8
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
9
|
+
labelTextColor: "surfaceTextPrimary";
|
|
10
|
+
descTextColor: "surfaceTextPrimary";
|
|
11
|
+
borderColor: "surfaceBorderQuaternary";
|
|
12
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
13
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
14
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
15
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
16
|
+
shape: "circular";
|
|
17
|
+
};
|
|
18
|
+
defaultQuaternary: {
|
|
19
|
+
fill: "surfaceQuaternary";
|
|
20
|
+
fillCheckmark: "surfaceQuaternary";
|
|
21
|
+
fillRadio: "surfaceQuaternary";
|
|
22
|
+
fillRadioActive: "surfaceQuaternary";
|
|
23
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
24
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
25
|
+
labelTextColor: "surfaceTextPrimary";
|
|
26
|
+
descTextColor: "surfaceTextPrimary";
|
|
27
|
+
borderColor: "surfaceBorderQuaternary";
|
|
28
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
29
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
30
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
31
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
32
|
+
shape: "circular";
|
|
33
|
+
};
|
|
34
|
+
defaultSecondary: {
|
|
35
|
+
fill: "surfaceSecondary";
|
|
36
|
+
fillCheckmark: "surfaceQuaternary";
|
|
37
|
+
fillRadio: "surfaceSecondary";
|
|
38
|
+
fillRadioActive: "surfaceQuaternary";
|
|
39
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
40
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
41
|
+
labelTextColor: "surfaceTextPrimary";
|
|
42
|
+
descTextColor: "surfaceTextPrimary";
|
|
43
|
+
borderColor: "surfaceBorderQuaternary";
|
|
44
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
45
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
46
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
47
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
48
|
+
shape: "circular";
|
|
49
|
+
};
|
|
50
|
+
defaultTertiary: {
|
|
51
|
+
fill: "surfaceTertiary";
|
|
52
|
+
fillCheckmark: "surfaceQuaternary";
|
|
53
|
+
fillRadio: "surfaceTertiary";
|
|
54
|
+
fillRadioActive: "surfaceQuaternary";
|
|
55
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
56
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
7
57
|
labelTextColor: "surfaceTextPrimary";
|
|
8
58
|
descTextColor: "surfaceTextPrimary";
|
|
9
59
|
borderColor: "surfaceBorderQuaternary";
|
|
@@ -3,7 +3,57 @@ const radioAppearanceDefault = {
|
|
|
3
3
|
fill: 'surfaceSecondary',
|
|
4
4
|
fillCheckmark: 'surfaceQuaternary',
|
|
5
5
|
fillRadio: 'surfaceSecondary',
|
|
6
|
-
|
|
6
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
7
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
8
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
9
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
10
|
+
descTextColor: 'surfaceTextPrimary',
|
|
11
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
12
|
+
borderRadioColor: 'surfaceBorderQuaternary',
|
|
13
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
14
|
+
borderRadioColorActiveHover: 'surfaceBorderQuaternary',
|
|
15
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
16
|
+
shape: 'circular',
|
|
17
|
+
},
|
|
18
|
+
defaultQuaternary: {
|
|
19
|
+
fill: 'surfaceQuaternary',
|
|
20
|
+
fillCheckmark: 'surfaceQuaternary',
|
|
21
|
+
fillRadio: 'surfaceQuaternary',
|
|
22
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
23
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
24
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
25
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
26
|
+
descTextColor: 'surfaceTextPrimary',
|
|
27
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
28
|
+
borderRadioColor: 'surfaceBorderQuaternary',
|
|
29
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
30
|
+
borderRadioColorActiveHover: 'surfaceBorderQuaternary',
|
|
31
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
32
|
+
shape: 'circular',
|
|
33
|
+
},
|
|
34
|
+
defaultSecondary: {
|
|
35
|
+
fill: 'surfaceSecondary',
|
|
36
|
+
fillCheckmark: 'surfaceQuaternary',
|
|
37
|
+
fillRadio: 'surfaceSecondary',
|
|
38
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
39
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
40
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
41
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
42
|
+
descTextColor: 'surfaceTextPrimary',
|
|
43
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
44
|
+
borderRadioColor: 'surfaceBorderQuaternary',
|
|
45
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
46
|
+
borderRadioColorActiveHover: 'surfaceBorderQuaternary',
|
|
47
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
48
|
+
shape: 'circular',
|
|
49
|
+
},
|
|
50
|
+
defaultTertiary: {
|
|
51
|
+
fill: 'surfaceTertiary',
|
|
52
|
+
fillCheckmark: 'surfaceQuaternary',
|
|
53
|
+
fillRadio: 'surfaceTertiary',
|
|
54
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
55
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
56
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
7
57
|
labelTextColor: 'surfaceTextPrimary',
|
|
8
58
|
descTextColor: 'surfaceTextPrimary',
|
|
9
59
|
borderColor: 'surfaceBorderQuaternary',
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
declare const radioAppearanceDisabled: {
|
|
2
2
|
disabledPrimary: {
|
|
3
|
-
fill: "
|
|
3
|
+
fill: "surfaceSecondary";
|
|
4
4
|
fillCheckmark: "surfaceQuaternary";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
fillRadio: "surfaceSecondary";
|
|
6
|
+
fillRadioActive: "surfaceQuaternary";
|
|
7
|
+
fillRadioActiveHover: "surfaceActiveHoverTertiary";
|
|
8
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
9
|
+
labelTextColor: "disabledTextSecondary";
|
|
10
|
+
descTextColor: "disabledTextSecondary";
|
|
11
|
+
borderColor: "surfaceBorderQuaternary";
|
|
8
12
|
borderRadioColor: "surfaceBorderQuaternary";
|
|
9
|
-
borderRadioColorActive: "
|
|
10
|
-
borderRadioColorActiveHover: "
|
|
11
|
-
borderRadioColorHover: "
|
|
13
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
14
|
+
borderRadioColorActiveHover: "surfaceBorderPrimary";
|
|
15
|
+
borderRadioColorHover: "surfaceBorderHoverPrimary";
|
|
12
16
|
};
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceDisabled };
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
const radioAppearanceDisabled = {
|
|
2
2
|
disabledPrimary: {
|
|
3
|
-
fill: '
|
|
3
|
+
fill: 'surfaceSecondary',
|
|
4
4
|
fillCheckmark: 'surfaceQuaternary',
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
fillRadio: 'surfaceSecondary',
|
|
6
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
7
|
+
fillRadioActiveHover: 'surfaceActiveHoverTertiary',
|
|
8
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
9
|
+
labelTextColor: 'disabledTextSecondary',
|
|
10
|
+
descTextColor: 'disabledTextSecondary',
|
|
11
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
8
12
|
borderRadioColor: 'surfaceBorderQuaternary',
|
|
9
|
-
borderRadioColorActive: '
|
|
10
|
-
borderRadioColorActiveHover: '
|
|
11
|
-
borderRadioColorHover: '
|
|
13
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
14
|
+
borderRadioColorActiveHover: 'surfaceBorderPrimary',
|
|
15
|
+
borderRadioColorHover: 'surfaceBorderHoverPrimary',
|
|
12
16
|
},
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceDisabled };
|
|
@@ -2,13 +2,17 @@ declare const radioAppearanceError: {
|
|
|
2
2
|
errorPrimary: {
|
|
3
3
|
fill: "errorTertiary";
|
|
4
4
|
fillCheckmark: "errorPrimary";
|
|
5
|
+
fillRadio: "errorTertiary";
|
|
6
|
+
fillRadioActive: "errorQuaternary";
|
|
7
|
+
fillRadioActiveHover: "errorActiveHoverPrimary";
|
|
8
|
+
fillRadioHover: "errorHoverTertiary";
|
|
5
9
|
labelTextColor: "surfaceTextPrimary";
|
|
6
10
|
descTextColor: "surfaceTextPrimary";
|
|
7
11
|
borderColor: "errorBorderQuaternary";
|
|
8
|
-
borderRadioColor: "
|
|
9
|
-
borderRadioColorActive: "
|
|
10
|
-
borderRadioColorActiveHover: "
|
|
11
|
-
borderRadioColorHover: "
|
|
12
|
+
borderRadioColor: "errorBorderQuaternary";
|
|
13
|
+
borderRadioColorActive: "errorBorderActiveQuaternary";
|
|
14
|
+
borderRadioColorActiveHover: "errorBorderPrimary";
|
|
15
|
+
borderRadioColorHover: "errorBorderHoverPrimary";
|
|
12
16
|
};
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceError };
|
|
@@ -2,13 +2,17 @@ const radioAppearanceError = {
|
|
|
2
2
|
errorPrimary: {
|
|
3
3
|
fill: 'errorTertiary',
|
|
4
4
|
fillCheckmark: 'errorPrimary',
|
|
5
|
+
fillRadio: 'errorTertiary',
|
|
6
|
+
fillRadioActive: 'errorQuaternary',
|
|
7
|
+
fillRadioActiveHover: 'errorActiveHoverPrimary',
|
|
8
|
+
fillRadioHover: 'errorHoverTertiary',
|
|
5
9
|
labelTextColor: 'surfaceTextPrimary',
|
|
6
10
|
descTextColor: 'surfaceTextPrimary',
|
|
7
11
|
borderColor: 'errorBorderQuaternary',
|
|
8
|
-
borderRadioColor: '
|
|
9
|
-
borderRadioColorActive: '
|
|
10
|
-
borderRadioColorActiveHover: '
|
|
11
|
-
borderRadioColorHover: '
|
|
12
|
+
borderRadioColor: 'errorBorderQuaternary',
|
|
13
|
+
borderRadioColorActive: 'errorBorderActiveQuaternary',
|
|
14
|
+
borderRadioColorActiveHover: 'errorBorderPrimary',
|
|
15
|
+
borderRadioColorHover: 'errorBorderHoverPrimary',
|
|
12
16
|
},
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceError };
|
|
@@ -2,13 +2,17 @@ declare const radioAppearanceRequire: {
|
|
|
2
2
|
requirePrimary: {
|
|
3
3
|
fill: "warningTertiary";
|
|
4
4
|
fillCheckmark: "warningPrimary";
|
|
5
|
+
fillRadio: "warningTertiary";
|
|
6
|
+
fillRadioActive: "warningPrimary";
|
|
7
|
+
fillRadioActiveHover: "warningActiveHoverPrimary";
|
|
8
|
+
fillRadioHover: "warningHoverTertiary";
|
|
5
9
|
labelTextColor: "surfaceTextPrimary";
|
|
6
10
|
descTextColor: "surfaceTextPrimary";
|
|
7
11
|
borderColor: "warningBorderSecondary";
|
|
8
|
-
borderRadioColor: "
|
|
9
|
-
borderRadioColorActive: "
|
|
10
|
-
borderRadioColorActiveHover: "
|
|
11
|
-
borderRadioColorHover: "
|
|
12
|
+
borderRadioColor: "warningBorderSecondary";
|
|
13
|
+
borderRadioColorActive: "warningBorderSecondary";
|
|
14
|
+
borderRadioColorActiveHover: "warningBorderPrimary";
|
|
15
|
+
borderRadioColorHover: "warningBorderHoverPrimary";
|
|
12
16
|
};
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceRequire };
|
|
@@ -2,13 +2,17 @@ const radioAppearanceRequire = {
|
|
|
2
2
|
requirePrimary: {
|
|
3
3
|
fill: 'warningTertiary',
|
|
4
4
|
fillCheckmark: 'warningPrimary',
|
|
5
|
+
fillRadio: 'warningTertiary',
|
|
6
|
+
fillRadioActive: 'warningPrimary',
|
|
7
|
+
fillRadioActiveHover: 'warningActiveHoverPrimary',
|
|
8
|
+
fillRadioHover: 'warningHoverTertiary',
|
|
5
9
|
labelTextColor: 'surfaceTextPrimary',
|
|
6
10
|
descTextColor: 'surfaceTextPrimary',
|
|
7
11
|
borderColor: 'warningBorderSecondary',
|
|
8
|
-
borderRadioColor: '
|
|
9
|
-
borderRadioColorActive: '
|
|
10
|
-
borderRadioColorActiveHover: '
|
|
11
|
-
borderRadioColorHover: '
|
|
12
|
+
borderRadioColor: 'warningBorderSecondary',
|
|
13
|
+
borderRadioColorActive: 'warningBorderSecondary',
|
|
14
|
+
borderRadioColorActiveHover: 'warningBorderPrimary',
|
|
15
|
+
borderRadioColorHover: 'warningBorderHoverPrimary',
|
|
12
16
|
},
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceRequire };
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
declare const radioAppearanceSuccess: {
|
|
2
2
|
successPrimary: {
|
|
3
|
-
fill: "
|
|
3
|
+
fill: "successPrimary";
|
|
4
4
|
fillCheckmark: "accentSecondary";
|
|
5
|
+
fillRadio: "surfaceTertiary";
|
|
6
|
+
fillRadioActive: "successPrimary";
|
|
7
|
+
fillRadioActiveHover: "successQuaternary";
|
|
8
|
+
fillRadioHover: "surfaceSecondary";
|
|
5
9
|
labelTextColor: "surfaceTextPrimary";
|
|
6
10
|
descTextColor: "surfaceTextPrimary";
|
|
7
11
|
borderColor: "accentBorderSecondary";
|
|
8
|
-
borderRadioColor: "
|
|
9
|
-
borderRadioColorActive: "
|
|
10
|
-
borderRadioColorActiveHover: "
|
|
11
|
-
borderRadioColorHover: "
|
|
12
|
+
borderRadioColor: "successBorderSecondary";
|
|
13
|
+
borderRadioColorActive: "successBorderSecondary";
|
|
14
|
+
borderRadioColorActiveHover: "successBorderPrimary";
|
|
15
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
12
16
|
};
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceSuccess };
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
const radioAppearanceSuccess = {
|
|
2
2
|
successPrimary: {
|
|
3
|
-
fill: '
|
|
3
|
+
fill: 'successPrimary',
|
|
4
4
|
fillCheckmark: 'accentSecondary',
|
|
5
|
+
fillRadio: 'surfaceTertiary',
|
|
6
|
+
fillRadioActive: 'successPrimary',
|
|
7
|
+
fillRadioActiveHover: 'successQuaternary',
|
|
8
|
+
fillRadioHover: 'surfaceSecondary',
|
|
5
9
|
labelTextColor: 'surfaceTextPrimary',
|
|
6
10
|
descTextColor: 'surfaceTextPrimary',
|
|
7
11
|
borderColor: 'accentBorderSecondary',
|
|
8
|
-
borderRadioColor: '
|
|
9
|
-
borderRadioColorActive: '
|
|
10
|
-
borderRadioColorActiveHover: '
|
|
11
|
-
borderRadioColorHover: '
|
|
12
|
+
borderRadioColor: 'successBorderSecondary',
|
|
13
|
+
borderRadioColorActive: 'successBorderSecondary',
|
|
14
|
+
borderRadioColorActiveHover: 'successBorderPrimary',
|
|
15
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
12
16
|
},
|
|
13
17
|
};
|
|
14
18
|
export { radioAppearanceSuccess };
|
|
@@ -6,8 +6,11 @@ type ComponentGalleryArgs = {
|
|
|
6
6
|
tier: string;
|
|
7
7
|
};
|
|
8
8
|
type ComponentGalleryResolved = {
|
|
9
|
+
normalizeAppearanceGroup: (appearance: string) => string;
|
|
9
10
|
resolveAppearanceKey: (appearance: string, tier: string) => string;
|
|
11
|
+
resolveTier: (appearance: string, tier: string) => string;
|
|
10
12
|
sizeKeys: string[];
|
|
13
|
+
tiersByAppearance: Record<string, string[]>;
|
|
11
14
|
};
|
|
12
15
|
type ComponentGallerySizeGridProps = {
|
|
13
16
|
children: (sizeKey: string) => ReactNode;
|
|
@@ -15,6 +15,23 @@ const DEFAULT_TIER_ORDER = [
|
|
|
15
15
|
'MutedTertiary',
|
|
16
16
|
'MutedQuaternary',
|
|
17
17
|
];
|
|
18
|
+
const matchAppearanceGroup = (appearance, appearanceList) => {
|
|
19
|
+
if (appearanceList.includes(appearance)) {
|
|
20
|
+
return appearance;
|
|
21
|
+
}
|
|
22
|
+
const matchedGroup = [...appearanceList]
|
|
23
|
+
.sort((left, right) => right.length - left.length)
|
|
24
|
+
.find((group) => appearance === group ||
|
|
25
|
+
appearance.startsWith(`${group} `) ||
|
|
26
|
+
appearance.startsWith(group));
|
|
27
|
+
return matchedGroup ?? appearance.split(' ')[0] ?? appearance;
|
|
28
|
+
};
|
|
29
|
+
const resolveTierForAppearance = (tier, tiersForAppearance) => {
|
|
30
|
+
if (tiersForAppearance.includes(tier)) {
|
|
31
|
+
return tier;
|
|
32
|
+
}
|
|
33
|
+
return tiersForAppearance[0] ?? tier;
|
|
34
|
+
};
|
|
18
35
|
const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
|
|
19
36
|
const appearanceList = Object.keys(appearanceGroups).sort();
|
|
20
37
|
const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
|
|
@@ -26,7 +43,13 @@ const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tie
|
|
|
26
43
|
const appearanceTierOptions = [
|
|
27
44
|
...new Set(Object.values(tiersByAppearance).flat()),
|
|
28
45
|
].sort((left, right) => tierOrder.indexOf(left) - tierOrder.indexOf(right));
|
|
29
|
-
const resolveAppearanceKey = (
|
|
46
|
+
const resolveAppearanceKey = (appearanceGroup, tier) => `${appearanceGroup}${tier}`;
|
|
47
|
+
const normalizeAppearanceGroup = (appearance) => matchAppearanceGroup(appearance, appearanceList);
|
|
48
|
+
const resolveTier = (appearance, tier) => {
|
|
49
|
+
const appearanceGroup = normalizeAppearanceGroup(appearance);
|
|
50
|
+
const tiersForAppearance = tiersByAppearance[appearanceGroup] ?? [];
|
|
51
|
+
return resolveTierForAppearance(tier, tiersForAppearance);
|
|
52
|
+
};
|
|
30
53
|
const sizeKeys = Object.keys(size);
|
|
31
54
|
const styleOptions = Object.keys(style);
|
|
32
55
|
const shapeOptions = Object.keys(shape);
|
|
@@ -59,12 +82,17 @@ const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tie
|
|
|
59
82
|
}),
|
|
60
83
|
};
|
|
61
84
|
const resolved = {
|
|
85
|
+
normalizeAppearanceGroup,
|
|
62
86
|
resolveAppearanceKey,
|
|
87
|
+
resolveTier,
|
|
63
88
|
sizeKeys,
|
|
89
|
+
tiersByAppearance,
|
|
64
90
|
};
|
|
65
91
|
const render = (args, renderComponent) => {
|
|
66
92
|
const { appearance, shape, style, tier } = args;
|
|
67
|
-
const
|
|
93
|
+
const appearanceGroup = resolved.normalizeAppearanceGroup(appearance);
|
|
94
|
+
const resolvedTier = resolved.resolveTier(appearance, tier);
|
|
95
|
+
const appearanceKey = resolved.resolveAppearanceKey(appearanceGroup, resolvedTier);
|
|
68
96
|
return (_jsx(ComponentGallerySizeGrid, { sizeKeys: resolved.sizeKeys, children: (sizeKey) => renderComponent({
|
|
69
97
|
appearance: mergeAppearanceKeys(appearanceKey, style, shape, sizeKey),
|
|
70
98
|
args: args,
|
|
@@ -80,6 +108,7 @@ const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tie
|
|
|
80
108
|
shapeOptions,
|
|
81
109
|
sizeKeys,
|
|
82
110
|
styleOptions,
|
|
111
|
+
tiersByAppearance,
|
|
83
112
|
};
|
|
84
113
|
};
|
|
85
114
|
export { createComponentGallery };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.110",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"storybook": "^10.4.0",
|
|
115
115
|
"typescript": "^6.0.3"
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "a2332abbbcce2d42aa3f41f52f56032006c5247f"
|
|
118
118
|
}
|