zuii 1.5.3 → 1.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Form/react/index.js +75 -66
  2. package/dist/components/Placeholder/style/index.css +1 -1
  3. package/dist/core/styles/tokens.ts +109 -109
  4. package/dist/packages/core/src/styles/form/index.css +1 -1
  5. package/dist/packages/core/src/styles/tokens.js +12 -12
  6. package/dist/templates/Forms/Forms-elements.tsx +6 -0
  7. package/package.json +113 -111
package/dist/components/Form/react/index.js CHANGED
@@ -1,80 +1,89 @@
1
- import { jsxs as s, jsx as t } from "react/jsx-runtime";
2
- import { Form as r, InputGroup as C } from "react-bootstrap";
3
- import { Icon as c } from "../../Icon/react/index.js";
4
- import d from "../../../node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/FloatingLabel.js";
5
- import { NumberInput as F } from "./NumberInput.js";
6
- import { TelInput as h } from "./TelInput.js";
7
- import { PasswordInput as I } from "./PasswordInput.js";
8
- import { PasswordConfirm as b } from "./PasswordConfirm.js";
9
- import { RangeInput as w } from "./RangeInput.js";
10
- import { FileInput as N } from "./FileInput.js";
11
- import { Select as _ } from "./Select.js";
12
- import { handleNumericKeyDown as x } from "../js/number.js";
13
- import { FormColor as y } from "./FormColor.js";
14
- import { FormDate as D } from "./FormDate.js";
1
+ import { jsxs as u, jsx as o } from "react/jsx-runtime";
2
+ import { Form as n, InputGroup as F } from "react-bootstrap";
3
+ import { Icon as t } from "../../Icon/react/index.js";
4
+ import N from "../../../node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/FloatingLabel.js";
5
+ import { NumberInput as I } from "./NumberInput.js";
6
+ import { TelInput as b } from "./TelInput.js";
7
+ import { PasswordInput as h } from "./PasswordInput.js";
8
+ import { PasswordConfirm as w } from "./PasswordConfirm.js";
9
+ import { RangeInput as y } from "./RangeInput.js";
10
+ import { FileInput as D } from "./FileInput.js";
11
+ import { Select as z } from "./Select.js";
12
+ import { handleNumericKeyDown as G } from "../js/number.js";
13
+ import { FormColor as P } from "./FormColor.js";
14
+ import { FormDate as T } from "./FormDate.js";
15
15
  import '../../../packages/core/src/styles/form/index.css';/* empty css */
16
- const g = ({
17
- label: n,
18
- floating: a,
19
- icon: m,
20
- children: l,
21
- onKeyDown: i,
22
- ...e
16
+ const $ = ({
17
+ label: i,
18
+ floating: p,
19
+ icon: e,
20
+ iconRight: a,
21
+ textLeft: m,
22
+ textRight: l,
23
+ children: d,
24
+ onKeyDown: c,
25
+ ...s
23
26
  }) => {
24
- const f = (u) => {
25
- e.type === "number" && x(u), i && i(u);
26
- }, p = e.type === "number" ? "decimal" : void 0;
27
- return a && n ? /* @__PURE__ */ t(d, { label: n, controlId: e.id || e.name, children: /* @__PURE__ */ s("div", { className: "form__input", children: [
28
- m && /* @__PURE__ */ t(c, { name: m, size: "sm" }),
29
- /* @__PURE__ */ t(
30
- r.Control,
27
+ const f = (C) => {
28
+ s.type === "number" && G(C), c && c(C);
29
+ }, _ = s.type === "number" ? "decimal" : void 0;
30
+ return p && i ? /* @__PURE__ */ o(N, { label: i, controlId: s.id || s.name, children: /* @__PURE__ */ u("div", { className: "form__input", children: [
31
+ m && /* @__PURE__ */ o("span", { className: "form__input-adornment", children: m }),
32
+ e && /* @__PURE__ */ o(t, { name: e, size: "sm" }),
33
+ /* @__PURE__ */ o(
34
+ n.Control,
31
35
  {
32
- ...e,
36
+ ...s,
33
37
  onKeyDown: f,
34
- inputMode: p,
35
- children: l
38
+ inputMode: _,
39
+ children: d
36
40
  }
37
- )
38
- ] }) }) : /* @__PURE__ */ s("div", { className: "form__input", children: [
39
- m && /* @__PURE__ */ t(c, { name: m, size: "sm" }),
40
- /* @__PURE__ */ t(
41
- r.Control,
41
+ ),
42
+ a && /* @__PURE__ */ o(t, { name: a, size: "sm" }),
43
+ l && /* @__PURE__ */ o("span", { className: "form__input-adornment", children: l })
44
+ ] }) }) : /* @__PURE__ */ u("div", { className: "form__input", children: [
45
+ m && /* @__PURE__ */ o("span", { className: "form__input-adornment", children: m }),
46
+ e && /* @__PURE__ */ o(t, { name: e, size: "sm" }),
47
+ /* @__PURE__ */ o(
48
+ n.Control,
42
49
  {
43
- ...e,
50
+ ...s,
44
51
  onKeyDown: f,
45
- inputMode: p,
46
- children: l
52
+ inputMode: _,
53
+ children: d
47
54
  }
48
- )
55
+ ),
56
+ a && /* @__PURE__ */ o(t, { name: a, size: "sm" }),
57
+ l && /* @__PURE__ */ o("span", { className: "form__input-adornment", children: l })
49
58
  ] });
50
- }, o = ({
51
- titre: n,
52
- className: a = "",
53
- children: m,
54
- ...l
59
+ }, r = ({
60
+ titre: i,
61
+ className: p = "",
62
+ children: e,
63
+ ...a
55
64
  }) => {
56
- const i = "form";
57
- return /* @__PURE__ */ s(r, { className: `${i} ${a}`.trim(), ...l, children: [
58
- n && /* @__PURE__ */ t("h1", { className: `${i}__title`, children: n }),
59
- m
65
+ const m = "form";
66
+ return /* @__PURE__ */ u(n, { className: `${m} ${p}`.trim(), ...a, children: [
67
+ i && /* @__PURE__ */ o("h1", { className: `${m}__title`, children: i }),
68
+ e
60
69
  ] });
61
70
  };
62
- o.Group = r.Group;
63
- o.Control = g;
64
- o.Label = r.Label;
65
- o.Text = r.Text;
66
- o.Check = r.Check;
67
- o.Select = _;
68
- o.InputGroup = C;
69
- o.Number = F;
70
- o.Tel = h;
71
- o.Password = I;
72
- o.PasswordConfirm = b;
73
- o.Range = w;
74
- o.File = N;
75
- o.FloatingLabel = d;
76
- o.Color = y;
77
- o.Date = D;
71
+ r.Group = n.Group;
72
+ r.Control = $;
73
+ r.Label = n.Label;
74
+ r.Text = n.Text;
75
+ r.Check = n.Check;
76
+ r.Select = z;
77
+ r.InputGroup = F;
78
+ r.Number = I;
79
+ r.Tel = b;
80
+ r.Password = h;
81
+ r.PasswordConfirm = w;
82
+ r.Range = y;
83
+ r.File = D;
84
+ r.FloatingLabel = N;
85
+ r.Color = P;
86
+ r.Date = T;
78
87
  export {
79
- o as Form
88
+ r as Form
80
89
  };
package/dist/components/Placeholder/style/index.css CHANGED
@@ -1 +1 @@
1
- @layer layout{.form__input,.placeholder--input{--form-placeholder-color: color-mix(in srgb, var(--body-color), transparent 70%);--form-border: var(--border-width) solid var(--border-color)}.form__input:not(:has(.choices)),.placeholder--input:not(:has(.choices)){padding:var(--spacing-xs) var(--spacing-sm)}.choices__inner{padding:0}.form__input,.placeholder--input{background-color:var(--white);border-radius:var(--radius-base);border:var(--form-border);margin:var(--spacing-sm) 0;display:flex;gap:var(--spacing-xs);transition:all .2s cubic-bezier(.455,.03,.515,.955);flex:1}.form__input[type=checkbox],[type=checkbox].placeholder--input,.form__input[type=radio],[type=radio].placeholder--input{appearance:none;width:1.25rem;height:1.25rem;background-color:var(--white);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);vertical-align:middle;margin-top:-2px}.form__input[type=checkbox]:after,[type=checkbox].placeholder--input:after,.form__input[type=radio]:after,[type=radio].placeholder--input:after{content:"";position:absolute;top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--white);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transform:translate(-50%,-50%) scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}.form__input[type=checkbox]:checked,[type=checkbox].placeholder--input:checked,.form__input[type=radio]:checked,[type=radio].placeholder--input:checked{background-color:var(--primary);border-color:var(--primary)}.form__input[type=checkbox]:checked:after,[type=checkbox].placeholder--input:checked:after,.form__input[type=radio]:checked:after,[type=radio].placeholder--input:checked:after{transform:translate(-50%,-50%) scale(1)}.form__input[type=checkbox]:focus,[type=checkbox].placeholder--input:focus,.form__input[type=radio]:focus,[type=radio].placeholder--input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 80%);border-color:var(--primary)}.form__input[type=checkbox]:hover:not(:checked):not(:disabled),[type=checkbox].placeholder--input:hover:not(:checked):not(:disabled),.form__input[type=radio]:hover:not(:checked):not(:disabled),[type=radio].placeholder--input:hover:not(:checked):not(:disabled){border-color:var(--primary);background-color:color-mix(in srgb,var(--primary),transparent 95%)}.form__input[type=checkbox]:disabled,[type=checkbox].placeholder--input:disabled,.form__input[type=radio]:disabled,[type=radio].placeholder--input:disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:not-allowed;opacity:.7}.form__input[type=radio],[type=radio].placeholder--input{border-radius:var(--radius-pill)}.form__input[type=radio]:after,[type=radio].placeholder--input:after{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-pill);width:.5rem;height:.5rem}.form__input .form-control:not([type=checkbox]):not([type=radio]),.placeholder--input .form-control:not([type=checkbox]):not([type=radio]),.form__input textarea,.placeholder--input textarea{padding:0;background-color:transparent;border-radius:var(--radius-none);border:none;line-height:1.3}.form__input .form-control:not([type=checkbox]):not([type=radio]):focus,.placeholder--input .form-control:not([type=checkbox]):not([type=radio]):focus,.form__input .form-control:not([type=checkbox]):not([type=radio]):focus-visible,.placeholder--input .form-control:not([type=checkbox]):not([type=radio]):focus-visible,.form__input textarea:focus,.placeholder--input textarea:focus,.form__input textarea:focus-visible,.placeholder--input textarea:focus-visible{border:none;box-shadow:none;outline:none}.form__input:has(.form-control:focus),.placeholder--input:has(.form-control:focus){border-color:var(--accent)}.group--vertical .form__input,.group--vertical .placeholder--input{width:100%}input[type=checkbox],input[type=radio]{--border-color: var(--primary)}.form__input:has(.form-control:disabled),.placeholder--input:has(.form-control:disabled){border-color:var(--gray-200);background-color:var(--gray-100)}.form__input:has(.form-control:disabled) .form-control,.placeholder--input:has(.form-control:disabled) .form-control,.form__input:has(.form-control:disabled) .form-control::placeholder,.placeholder--input:has(.form-control:disabled) .form-control::placeholder,.form__input:has(.form-control:disabled) .icon,.placeholder--input:has(.form-control:disabled) .icon{color:var(--form-placeholder-color)}input::placeholder,textarea::placeholder{color:var(--form-placeholder-color)}.placeholder,.placeholder__item{width:100%}.placeholder--filled{width:auto}.placeholder--image{width:100px;height:100px;display:flex;align-items:center;justify-content:center;background-color:var(--primary, #f1f5f9);border:var(--border-width, 1px) solid var(--border-color, #94a3b8);position:relative;overflow:hidden}.placeholder--image:after{content:"";width:40%;height:40%;background-color:var(--gray-200, #94a3b8);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.placeholder--input{height:1.93rem;background:color-mix(in srgb,currentcolor,transparent 70%)}.placeholder-glow.placeholder,.placeholder-glow.placeholder__item,.placeholder-glow .placeholder,.placeholder-glow .placeholder__item{animation:placeholder-glow 2s ease-in-out infinite}.placeholder-wave.placeholder,.placeholder-wave.placeholder__item,.placeholder-wave .placeholder,.placeholder-wave .placeholder__item{-webkit-mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-glow{0%,to{opacity:.6}50%{opacity:.3}}@keyframes placeholder-wave{to{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.25em}[variant=primary]{background-color:var(--primary, #296782)!important;opacity:.5}[variant=secondary]{background-color:var(--secondary, #49B4E8)!important;opacity:.5}[variant=accent]{background-color:var(--accent, #49B4E8)!important;opacity:.5}[variant=tertiary]{background-color:var(--tertiary, #f5524d)!important;opacity:.5}[variant=success]{background-color:var(--success, #73D3B6)!important;opacity:.5}[variant=danger]{background-color:var(--danger, #EA5F5F)!important;opacity:.5}[variant=warning]{background-color:var(--warning, #F5D762)!important;opacity:.5}[variant=info]{background-color:var(--info, #73B6D3)!important;opacity:.5}[variant=light]{background-color:var(--light, #FFFFFF)!important;opacity:.5}[variant=dark]{background-color:var(--dark, #000000)!important;opacity:.5}}
1
+ @layer layout{.form__input,.placeholder--input{--form-placeholder-color: color-mix(in srgb, var(--body-color), transparent 70%);--form-border: var(--border-width) solid var(--border-color)}.form__input:not(:has(.choices)),.placeholder--input:not(:has(.choices)){padding:var(--spacing-xs) var(--spacing-sm)}.choices__inner{padding:0}.form__input,.placeholder--input{background-color:var(--white);border-radius:var(--radius-base);border:var(--form-border);margin:var(--spacing-sm) 0;display:flex;gap:var(--spacing-xs);transition:all .2s cubic-bezier(.455,.03,.515,.955);flex:1}.form__input[type=checkbox],[type=checkbox].placeholder--input,.form__input[type=radio],[type=radio].placeholder--input{appearance:none;width:1.25rem;height:1.25rem;background-color:var(--white);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);vertical-align:middle;margin-top:-2px}.form__input[type=checkbox]:after,[type=checkbox].placeholder--input:after,.form__input[type=radio]:after,[type=radio].placeholder--input:after{content:"";position:absolute;top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--white);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transform:translate(-50%,-50%) scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}.form__input[type=checkbox]:checked,[type=checkbox].placeholder--input:checked,.form__input[type=radio]:checked,[type=radio].placeholder--input:checked{background-color:var(--primary);border-color:var(--primary)}.form__input[type=checkbox]:checked:after,[type=checkbox].placeholder--input:checked:after,.form__input[type=radio]:checked:after,[type=radio].placeholder--input:checked:after{transform:translate(-50%,-50%) scale(1)}.form__input[type=checkbox]:focus,[type=checkbox].placeholder--input:focus,.form__input[type=radio]:focus,[type=radio].placeholder--input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 80%);border-color:var(--primary)}.form__input[type=checkbox]:hover:not(:checked):not(:disabled),[type=checkbox].placeholder--input:hover:not(:checked):not(:disabled),.form__input[type=radio]:hover:not(:checked):not(:disabled),[type=radio].placeholder--input:hover:not(:checked):not(:disabled){border-color:var(--primary);background-color:color-mix(in srgb,var(--primary),transparent 95%)}.form__input[type=checkbox]:disabled,[type=checkbox].placeholder--input:disabled,.form__input[type=radio]:disabled,[type=radio].placeholder--input:disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:not-allowed;opacity:.7}.form__input[type=radio],[type=radio].placeholder--input{border-radius:var(--radius-pill)}.form__input[type=radio]:after,[type=radio].placeholder--input:after{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-pill);width:.5rem;height:.5rem}.form__input .form-control:not([type=checkbox]):not([type=radio]),.placeholder--input .form-control:not([type=checkbox]):not([type=radio]),.form__input textarea,.placeholder--input textarea{padding:0;background-color:transparent;border-radius:var(--radius-none);border:none;line-height:1.3}.form__input .form-control:not([type=checkbox]):not([type=radio]):focus,.placeholder--input .form-control:not([type=checkbox]):not([type=radio]):focus,.form__input .form-control:not([type=checkbox]):not([type=radio]):focus-visible,.placeholder--input .form-control:not([type=checkbox]):not([type=radio]):focus-visible,.form__input textarea:focus,.placeholder--input textarea:focus,.form__input textarea:focus-visible,.placeholder--input textarea:focus-visible{border:none;box-shadow:none;outline:none}.form__input:has(.form-control:focus),.placeholder--input:has(.form-control:focus){border-color:var(--accent)}.group--vertical .form__input,.group--vertical .placeholder--input{width:100%}input[type=checkbox],input[type=radio]{--border-color: var(--primary)}.form__input-adornment{color:var(--form-placeholder-color);font-size:var(--text-sm);white-space:nowrap;-webkit-user-select:none;user-select:none}.form__input:has(.form-control:disabled),.placeholder--input:has(.form-control:disabled){border-color:var(--gray-200);background-color:var(--gray-100)}.form__input:has(.form-control:disabled) .form-control,.placeholder--input:has(.form-control:disabled) .form-control,.form__input:has(.form-control:disabled) .form-control::placeholder,.placeholder--input:has(.form-control:disabled) .form-control::placeholder,.form__input:has(.form-control:disabled) .icon,.placeholder--input:has(.form-control:disabled) .icon,.form__input:has(.form-control:disabled) .form__input-adornment,.placeholder--input:has(.form-control:disabled) .form__input-adornment{color:var(--form-placeholder-color)}input::placeholder,textarea::placeholder{color:var(--form-placeholder-color)}.placeholder,.placeholder__item{width:100%}.placeholder--filled{width:auto}.placeholder--image{width:100px;height:100px;display:flex;align-items:center;justify-content:center;background-color:var(--primary, #f1f5f9);border:var(--border-width, 1px) solid var(--border-color, #94a3b8);position:relative;overflow:hidden}.placeholder--image:after{content:"";width:40%;height:40%;background-color:var(--gray-200, #94a3b8);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.placeholder--input{height:1.93rem;background:color-mix(in srgb,currentcolor,transparent 70%)}.placeholder-glow.placeholder,.placeholder-glow.placeholder__item,.placeholder-glow .placeholder,.placeholder-glow .placeholder__item{animation:placeholder-glow 2s ease-in-out infinite}.placeholder-wave.placeholder,.placeholder-wave.placeholder__item,.placeholder-wave .placeholder,.placeholder-wave .placeholder__item{-webkit-mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-glow{0%,to{opacity:.6}50%{opacity:.3}}@keyframes placeholder-wave{to{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.25em}[variant=primary]{background-color:var(--primary, #296782)!important;opacity:.5}[variant=secondary]{background-color:var(--secondary, #49B4E8)!important;opacity:.5}[variant=accent]{background-color:var(--accent, #49B4E8)!important;opacity:.5}[variant=tertiary]{background-color:var(--tertiary, #f5524d)!important;opacity:.5}[variant=success]{background-color:var(--success, #73D3B6)!important;opacity:.5}[variant=danger]{background-color:var(--danger, #EA5F5F)!important;opacity:.5}[variant=warning]{background-color:var(--warning, #F5D762)!important;opacity:.5}[variant=info]{background-color:var(--info, #73B6D3)!important;opacity:.5}[variant=light]{background-color:var(--light, #FFFFFF)!important;opacity:.5}[variant=dark]{background-color:var(--dark, #000000)!important;opacity:.5}}