@dev-blinq/ui-systems 1.0.59 → 1.0.60

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 (2) hide show
  1. package/dist/style.css +734 -1
  2. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -1 +1,734 @@
1
- .button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;border:none;font-family:var(--font-family, "Plus Jakarta Sans", sans-serif)}.button[data-size=sm]{padding:8px 12px;gap:8px;border-radius:12px}.button[data-size=md]{padding:10px 14px;gap:8px;border-radius:12px}.button[data-size=lg]{padding:12px 16px;gap:10px;border-radius:12px}.button[data-size=xl]{padding:16px 24px;gap:12px;border-radius:16px}.buttonText[data-size=sm]{width:24px;height:24px;padding:16px;gap:10px;flex-shrink:0}.buttonText[data-size=md]{width:40px;height:40px;padding:16px;gap:10px;flex-shrink:0}.buttonText[data-size=lg]{width:48px;height:48px;padding:16px;gap:10px;flex-shrink:0}.buttonText[data-size=xl]{width:56px;height:56px;padding:16px;gap:10px;flex-shrink:0}.button[data-colorHierarchy="brand/primary"]{background-color:var(--primary-main)}.button .input-typography{font-weight:700}.button[data-colorHierarchy="brand/primary"] .input-typography,.button[data-colorHierarchy="brand/primary"] span svg path{color:#fff;stroke:#fff}.button[data-colorHierarchy="gray/secondary"]{background-color:#f1f1f1}.button[data-colorHierarchy="gray/secondary"] .input-typography,.button[data-colorHierarchy="gray/secondary"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="white/secondary"]{background-color:#fff;box-shadow:0 1px 2px #1717170d;border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6)}.button[data-colorHierarchy="white/secondary"] .input-typography,.button[data-colorHierarchy="white/secondary"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="gray/linkContainer"]{background-color:#fff}.button[data-colorHierarchy="gray/linkContainer"] .input-typography,.button[data-colorHierarchy="gray/linkContainer"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="gray/link"]{background-color:#fff;padding:0 8px}.button[data-colorHierarchy="gray/link"] .input-typography,.button[data-colorHierarchy="gray/link"] span svg path{color:#080808;stroke:#080808}.button[data-colorHierarchy="brand/link"]{background-color:#fff;padding:0 8px}.button[data-colorHierarchy="brand/link"] .input-typography,.button[data-colorHierarchy="brand/link"] span svg path{color:var(--primary-main);stroke:var(--primary-main)}.button[data-colorHierarchy="destructive/primary"]{background:var(--surface-error, #ea4621)}.button[data-colorHierarchy="destructive/primary"] .input-typography,.button[data-colorHierarchy="destructive/primary"] span svg path{color:#fff;stroke:#fff}.button[data-colorHierarchy="destructive/secondary"]{background:var(--surface-error-secondary, #fdece9)}.button[data-colorHierarchy="destructive/secondary"] .input-typography,.button[data-colorHierarchy="destructive/secondary"] span svg path{color:var(--text-error, #ea4621);stroke:var(--text-error, #ea4621)}.button[data-colorHierarchy="destructive/linkContainer"]{background-color:#fff}.button[data-colorHierarchy="destructive/linkContainer"] .input-typography,.button[data-colorHierarchy="destructive/linkContainer"] span svg path{color:var(--text-error, #ea4621);stroke:var(--text-error, #ea4621)}.button[data-colorHierarchy=""]{background-color:#fff;padding:0}.button[data-colorHierarchy=""] .input-typography,.button[data-colorHierarchy=""] span svg path{color:var(--text-error, #ea4621);stroke:var(--text-error, #ea4621)}.button[data-colorHierarchy="brand/primary"]:hover{background:var(--surface-primary-hover, #08379e)}.button[data-colorHierarchy="gray/secondary"]:hover{background:var(--surface-secondary-hover, #ececed)}.button[data-colorHierarchy="white/secondary"]:hover{background:var(--surface-white---hover, #f9f9f9)}.button[data-colorHierarchy="gray/linkContainer"]:hover{background:var(--surface-secondary, #f1f1f1)}.button[data-colorHierarchy="gray/link"]:hover,.button[data-colorHierarchy="brand/link"]:hover{background-color:#fff}.button[data-colorHierarchy="destructive/primary"]:hover{background:var(--surface-error-hover, #d33f1e)}.button[data-colorHierarchy="destructive/secondary"]:hover{background:var(--surface-error-secondary-hover, #fbdad3)}.button[data-colorHierarchy="destructive/linkContainer"]:hover{background:var(--colors-red-5, #fef6f4)}.button[data-colorHierarchy=""]:hover{background-color:#fff}.button[data-colorHierarchy="brand/primary"]:focus{box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.button[data-colorHierarchy="gray/secondary"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="white/secondary"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="gray/linkContainer"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="gray/link"]:focus{box-shadow:0 0 0 4px var(--neutural-50, #e6e6e6)}.button[data-colorHierarchy="brand/link"]:focus{box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.button[data-colorHierarchy="destructive/primary"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="destructive/secondary"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="destructive/linkContainer"]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy=""]:focus{box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.button[data-colorHierarchy="brand/primary"]:disabled{background:var(--surface-disabled, #f1f1f1)}.button:disabled .input-typography{color:var(--text-disabled, #939197)}.button:disabled span svg path{stroke:var(--text-disabled, #939197)}.button[data-colorHierarchy="gray/secondary"]:disabled{background:var(--surface-disabled, #f1f1f1)}.button[data-colorHierarchy="white/secondary"]:disabled{background:var(--surface-white---disabled, #fdfdfd)}.button[data-colorHierarchy="brand/link"]:disabled .input-typography,.button[data-colorHierarchy="brand/link"]:disabled span svg path{color:var(--text-action-disabled, #849ed7);stroke:var(--text-action-disabled, #849ed7)}.button[data-colorHierarchy="destructive/primary"]:disabled{background:var(--surface-error-disabled, #fdece9)}.button[data-colorHierarchy="destructive/primary"]:disabled .input-typography,.button[data-colorHierarchy="destructive/primary"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/secondary"]:disabled{background:var(--surface-error-disabled, #fdece9)}.button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography,.button[data-colorHierarchy="destructive/secondary"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/linkContainer"]:disabled .input-typography,.button[data-colorHierarchy="destructive/linkContainer"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.button[data-colorHierarchy="destructive/link"]:disabled .input-typography,.button[data-colorHierarchy="destructive/link"]:disabled span svg path{color:var(--text-error-disabled, #f5a290);stroke:var(--text-error-disabled, #f5a290)}.TypographyCustom{color:#000}.TypographyCustom[data-bold=extrabold]{font-weight:800}.TypographyCustom[data-bold=bold]{font-weight:700}.TypographyCustom[data-bold=semibold]{font-weight:600}.TypographyCustom[data-bold=medium]{font-weight:500}.TypographyCustom[data-category=display][data-size=lg]{font-size:180px;font-style:normal;line-height:188px;letter-spacing:-9px}.TypographyCustom[data-category=display][data-size=md]{font-size:128px;font-style:normal;line-height:136px;letter-spacing:-5.12px}.TypographyCustom[data-category=display][data-size=sm]{font-size:96px;font-style:normal;line-height:104px;letter-spacing:-2.88px}.TypographyCustom[data-category=heading][data-size=xxl]{font-size:72px;font-style:normal;line-height:80px;letter-spacing:-1.44px}.TypographyCustom[data-category=heading][data-size=xl]{font-size:60px;font-style:normal;line-height:68px;letter-spacing:-1.08px}.TypographyCustom[data-category=heading][data-size=lg]{font-size:48px;font-style:normal;line-height:56px;letter-spacing:-.768px}.TypographyCustom[data-category=heading][data-size=md]{font-size:36px;font-style:normal;line-height:44px;letter-spacing:-.504px}.TypographyCustom[data-category=heading][data-size=sm]{font-size:30px;font-style:normal;line-height:38px;letter-spacing:-.39px}.TypographyCustom[data-category=heading][data-size=xs],.TypographyCustom[data-category=text][data-size=xxl]{font-size:24px;font-style:normal;line-height:32px;letter-spacing:-.288px}.TypographyCustom[data-category=text][data-size=xl]{font-size:20px;font-style:normal;line-height:28px;letter-spacing:-.2px}.TypographyCustom[data-category=text][data-size=lg]{font-size:18px;font-style:normal;line-height:24px;letter-spacing:-.144px}.TypographyCustom[data-category=text][data-size=md]{font-size:16px;font-style:normal;line-height:22px;letter-spacing:-.112px}.TypographyCustom[data-category=text][data-size=sm]{font-size:14px;font-style:normal;line-height:20px;letter-spacing:-.084px}.TypographyCustom[data-category=text][data-size=xs]{font-size:12px;font-style:normal;line-height:16px;letter-spacing:-.06px}.TypographyCustom[data-category=text][data-size=xxs]{font-size:10px;font-style:normal;line-height:14px;letter-spacing:-.04px}.custom-input{display:flex;flex-direction:row;padding:12px;align-items:center;gap:12px;width:100%;align-self:stretch;border-radius:var(--border-radius-radius-pre-lg, 12px);margin-top:8px;border:1px solid var(--border-default, #e6e6e6);background:var(--surface-white, #fff);box-shadow:0 1px 2px #1717170d}.custom-input input{width:100%;border:none}.custom-input input::placeholder{color:var(--text-disabled, #939197);font-weight:500}.custom-input input:hover,.custom-input input:focus,.custom-input input:active{border:none;outline:none}.custom-input .left-icon,.custom-input .right-icon{display:flex;align-items:center;justify-content:center}.custom-input .left-icon svg path,.custom-input .right-icon svg path{stroke:#939197}.custom-input:focus-within .left-icon svg path,.custom-input:focus-within .right-icon svg path{stroke:#000}.custom-input input{font-family:var(--font-family);color:var(--text-primary, #080808);font-weight:600;font-size:14px;font-style:normal}.custom-input .grey-box{margin:-12px;padding:12px;gap:6px;display:flex;flex-direction:row;background:#f9f9f9}.custom-input .grey-right-box{padding:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-left:1px solid #e6e6e6}.custom-input .grey-left-box{padding:12px 14px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-right:1px solid #e6e6e6}.custom-input select:focus{border:none;outline:none}.text-area-container{margin-top:8px;display:flex;padding:12px;flex-direction:column;gap:10px;flex:1 0 0;align-self:stretch;border-radius:16px;border:var(--border-radius-radius-3xs, 1px) solid var(--border-default, #e6e6e6);box-shadow:0 1px 2px #1717170d}.text-area-container:focus-within{border:var(--border-radius-radius-3xs, 1px) solid var(--primary-main, #0070f3);box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.text-area-container:has(textarea:disabled){background:var(--surface-disabled, #f1f1f1)}.text-area-container:hover{border:var(--border-radius-radius-3xs, 1px) solid var(--border-hover, #c9c9cc)}.text-area-container[data-error=true]{border:var(--border-radius-radius-3xs, 1px) solid var(--border-error, #ea4621);box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.custom-input:hover{border:var(--border-radius-radius-none, 1px) solid var(--border-hover, #c9c9cc);box-shadow:0 1px 2px #1717170d}.custom-input:focus-within{border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);background:var(--surface-white, #fff);box-shadow:0 0 0 4px var(--primary-30, #b5c5e7)}.custom-input:has(input:disabled){border-radius:var(--border-radius-radius-pre-lg, 12px);border:var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);background:var(--surface-disabled, #f1f1f1)}.custom-input:has(input:disabled) input{color:var(--text-disabled, #939197)!important}.custom-input[data-error=true]{border:var(--border-radius-radius-none, 1px) solid var(--border-error, #ea4621);box-shadow:0 0 0 4px var(--destructive-30, #f9c7bc)}.blinq-checkbox input[data-size=sm]+.checkmark{width:16px;height:16px;border-radius:var(--border-radius-radius-sm, 6px);margin-bottom:6px}.blinq-checkbox input[data-size=md]+.checkmark{width:20px;height:20px;border-radius:var(--border-radius-radius-md, 8px);margin-bottom:6px}.blinq-checkbox input[data-size=lg]+.checkmark{width:24px;height:24px;border-radius:var(--border-radius-radius-md, 8px);margin-bottom:8px}.blinq-checkbox .checkmark{position:relative;top:4px;left:0;background-color:#fff;border-radius:8px}.blinq-checkbox input:checked~.checkmark{background:var(--surface-primary, #093DB0)}.blinq-checkbox .checkmark:after{border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-radius:1px}.blinq-checkbox input[data-size=lg]+.checkmark:after{left:8.5px;top:3.5px;width:6px;height:12px}.blinq-checkbox input[data-size=md]+.checkmark:after{left:6.5px;top:3.5px;width:5px;height:9px}.blinq-checkbox input[data-size=sm]+.checkmark:after{left:5px;top:3px;width:4px;height:7px}.blinq-checkbox:hover input:checked~.checkmark{background:var(--surface-primary-hover, #08379E)}.blinq-checkbox:hover input:not(:checked)~.checkmark{background-color:var(--surface-primary-lightest, #F3F5FB);border:1px solid var(--border-brand, #093DB0)}.blinq-checkbox input:focus~.checkmark{box-shadow:0 0 0 4px var(--primary-30, #B5C5E7)}.blinq-checkbox input:disabled~.checkmark{background:var(--surface-disabled, #F1F1F1);cursor:not-allowed;border:1px solid var(--border-default, #E6E6E6);box-shadow:none}.blinq-checkbox input~.checkmark{border:1px solid var(--border-default, #E6E6E6)}.blinq-checkbox input:disabled~.checkmark:after{border:solid #939197;border-width:0 2.7px 2.7px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-radius:1px}.blinq-checkbox{display:block;position:relative;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.blinq-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.blinq-checkbox .checkmark:after{content:"";position:absolute;display:none}.blinq-checkbox input:checked~.checkmark:after{display:block}.blinq-radio-button input[data-size=sm]+.checkmark{width:16px;height:16px;border-radius:50%}.blinq-radio-button input[data-size=md]+.checkmark{width:20px;height:20px;border-radius:50%}.blinq-radio-button input[data-size=lg]+.checkmark{width:24px;height:24px;border-radius:50%}.blinq-radio-button .checkmark{position:absolute;top:4px;left:0;background-color:var(--surface-primary-lightest, #F3F5FB);border-radius:8px}.blinq-radio-button .checkmark:after{display:inline-block;border-radius:50%;left:50%;top:50%;background:var(--surface-primary, #093DB0);transform:translate(-50%,-50%);position:absolute}.blinq-radio-button input[data-size=lg]+.checkmark:after{width:12px;height:12px}.blinq-radio-button input[data-size=md]+.checkmark:after{width:10px;height:10px}.blinq-radio-button input[data-size=sm]+.checkmark:after{width:8px;height:8px}.blinq-radio-button:hover .checkmark:after{background:var(--surface-primary-hover, #08379E)}.blinq-radio-button input:focus~.checkmark{box-shadow:0 0 0 4px var(--primary-30, #B5C5E7)}.blinq-radio-button input:disabled~.checkmark{background:var(--surface-disabled, #F1F1F1);cursor:not-allowed;border:1px solid var(--border-default, #E6E6E6);box-shadow:none}.blinq-radio-button input~.checkmark{border:1px solid var(--border-brand, #093DB0)}.blinq-radio-button input:disabled .checkmark:after{display:inline-block;border-radius:50%;left:50%;top:50%;background:#939197;transform:translate(-50%,-50%);position:absolute}.blinq-radio-button{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.blinq-radio-button input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.blinq-radio-button .checkmark:after{content:"";position:absolute;display:none}.blinq-radio-button input:checked~.checkmark:after{display:block}.toggle-switch{display:inline-flex;background-color:#f5f5f5;border-radius:20px;padding:5px;cursor:pointer;transition:background-color 1s ease}.toggle-option{padding:10px 20px;border-radius:15px;font-weight:500;font-size:14px;color:#b9b9b9;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}.toggle-option.active{background-color:#fff;color:#000;box-shadow:0 2px 8px #0000001a}
1
+ .button {
2
+ display: inline-flex;
3
+ justify-content: center;
4
+ align-items: center;
5
+ font-size: 14px;
6
+ font-weight: 700;
7
+ cursor: pointer;
8
+ transition: all 0.3s ease;
9
+ border: none;
10
+ font-family: var(--font-family, "Plus Jakarta Sans", sans-serif);
11
+ }
12
+ .button[data-size="sm"] {
13
+ padding: 8px 12px;
14
+ gap: 8px;
15
+ border-radius: 12px;
16
+ }
17
+ .button[data-size="md"] {
18
+ padding: 10px 14px;
19
+ gap: 8px;
20
+ border-radius: 12px;
21
+ }
22
+ .button[data-size="lg"] {
23
+ padding: 12px 16px;
24
+ gap: 10px;
25
+ border-radius: 12px;
26
+ }
27
+ .button[data-size="xl"] {
28
+ padding: 16px 24px;
29
+ gap: 12px;
30
+ border-radius: 16px;
31
+ }
32
+ .buttonText[data-size="sm"] {
33
+ width: 24px;
34
+ height: 24px;
35
+ padding: 16px;
36
+ gap: 10px;
37
+ flex-shrink: 0;
38
+ }
39
+ .buttonText[data-size="md"] {
40
+ width: 40px;
41
+ height: 40px;
42
+ padding: 16px;
43
+ gap: 10px;
44
+ flex-shrink: 0;
45
+ }
46
+ .buttonText[data-size="lg"] {
47
+ width: 48px;
48
+ height: 48px;
49
+ padding: 16px;
50
+ gap: 10px;
51
+ flex-shrink: 0;
52
+ }
53
+ .buttonText[data-size="xl"] {
54
+ width: 56px;
55
+ height: 56px;
56
+ padding: 16px;
57
+ gap: 10px;
58
+ flex-shrink: 0;
59
+ }
60
+ .button[data-colorHierarchy="brand/primary"] {
61
+ background-color: var(--primary-main);
62
+ }
63
+ .button .input-typography {
64
+ font-weight: 700;
65
+ }
66
+ .button[data-colorHierarchy="brand/primary"] .input-typography,
67
+ .button[data-colorHierarchy="brand/primary"] span svg path {
68
+ color: #fff;
69
+ stroke: #fff;
70
+ }
71
+ .button[data-colorHierarchy="brand/secondary"] {
72
+ background-color: var(--surface-brand-secondary-default, #ff974a);
73
+ }
74
+ .button[data-colorHierarchy="brand/secondary"] .input-typography,
75
+ .button[data-colorHierarchy="brand/secondary"] span svg path {
76
+ color: #fff;
77
+ stroke: #fff;
78
+ }
79
+ .button[data-colorHierarchy="gray/secondary"] {
80
+ background-color: #f1f1f1;
81
+ }
82
+ .button[data-colorHierarchy="gray/secondary"] .input-typography,
83
+ .button[data-colorHierarchy="gray/secondary"] span svg path {
84
+ color: #080808;
85
+ stroke: #080808;
86
+ }
87
+ .button[data-colorHierarchy="white/secondary"] {
88
+ background-color: #fff;
89
+ box-shadow: 0 1px 2px #1717170d;
90
+ border: var(--border-radius-radius-none, 1px) solid
91
+ var(--border-default, #e6e6e6);
92
+ }
93
+ .button[data-colorHierarchy="white/secondary"] .input-typography,
94
+ .button[data-colorHierarchy="white/secondary"] span svg path {
95
+ color: #080808;
96
+ stroke: #080808;
97
+ }
98
+ .button[data-colorHierarchy="gray/linkContainer"] {
99
+ background-color: #fff;
100
+ }
101
+ .button[data-colorHierarchy="gray/linkContainer"] .input-typography,
102
+ .button[data-colorHierarchy="gray/linkContainer"] span svg path {
103
+ color: #080808;
104
+ stroke: #080808;
105
+ }
106
+ .button[data-colorHierarchy="gray/link"] {
107
+ background-color: #fff;
108
+ padding: 0 8px;
109
+ }
110
+ .button[data-colorHierarchy="gray/link"] .input-typography,
111
+ .button[data-colorHierarchy="gray/link"] span svg path {
112
+ color: #080808;
113
+ stroke: #080808;
114
+ }
115
+ .button[data-colorHierarchy="brand/link"] {
116
+ background-color: #fff;
117
+ padding: 0 8px;
118
+ }
119
+ .button[data-colorHierarchy="brand/link"] .input-typography,
120
+ .button[data-colorHierarchy="brand/link"] span svg path {
121
+ color: var(--primary-main);
122
+ stroke: var(--primary-main);
123
+ }
124
+ .button[data-colorHierarchy="destructive/primary"] {
125
+ background: var(--surface-error, #ea4621);
126
+ }
127
+ .button[data-colorHierarchy="destructive/primary"] .input-typography,
128
+ .button[data-colorHierarchy="destructive/primary"] span svg path {
129
+ color: #fff;
130
+ stroke: #fff;
131
+ }
132
+ .button[data-colorHierarchy="destructive/secondary"] {
133
+ background: var(--surface-error-secondary, #fdece9);
134
+ }
135
+ .button[data-colorHierarchy="destructive/secondary"] .input-typography,
136
+ .button[data-colorHierarchy="destructive/secondary"] span svg path {
137
+ color: var(--text-error, #ea4621);
138
+ stroke: var(--text-error, #ea4621);
139
+ }
140
+ .button[data-colorHierarchy="destructive/linkContainer"] {
141
+ background-color: #fff;
142
+ }
143
+ .button[data-colorHierarchy="destructive/linkContainer"] .input-typography,
144
+ .button[data-colorHierarchy="destructive/linkContainer"] span svg path {
145
+ color: var(--text-error, #ea4621);
146
+ stroke: var(--text-error, #ea4621);
147
+ }
148
+ .button[data-colorHierarchy=""] {
149
+ background-color: #fff;
150
+ padding: 0;
151
+ }
152
+ .button[data-colorHierarchy=""] .input-typography,
153
+ .button[data-colorHierarchy=""] span svg path {
154
+ color: var(--text-error, #ea4621);
155
+ stroke: var(--text-error, #ea4621);
156
+ }
157
+ .button[data-colorHierarchy="brand/primary"]:hover {
158
+ background: var(--surface-primary-hover, #08379e);
159
+ }
160
+ .button[data-colorHierarchy="brand/secondary"]:hover {
161
+ background: var(--surface-brand-secondary-hover, #e58843);
162
+ }
163
+ .button[data-colorHierarchy="gray/secondary"]:hover {
164
+ background: var(--surface-secondary-hover, #ececed);
165
+ }
166
+ .button[data-colorHierarchy="white/secondary"]:hover {
167
+ background: var(--surface-white---hover, #f9f9f9);
168
+ }
169
+ .button[data-colorHierarchy="gray/linkContainer"]:hover {
170
+ background: var(--surface-secondary, #f1f1f1);
171
+ }
172
+ .button[data-colorHierarchy="gray/link"]:hover,
173
+ .button[data-colorHierarchy="brand/link"]:hover {
174
+ background-color: #fff;
175
+ }
176
+ .button[data-colorHierarchy="destructive/primary"]:hover {
177
+ background: var(--surface-error-hover, #d33f1e);
178
+ }
179
+ .button[data-colorHierarchy="destructive/secondary"]:hover {
180
+ background: var(--surface-error-secondary-hover, #fbdad3);
181
+ }
182
+ .button[data-colorHierarchy="destructive/linkContainer"]:hover {
183
+ background: var(--colors-red-5, #fef6f4);
184
+ }
185
+ .button[data-colorHierarchy=""]:hover {
186
+ background-color: #fff;
187
+ }
188
+ .button[data-colorHierarchy="brand/primary"]:focus {
189
+ box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
190
+ }
191
+ .button[data-colorHierarchy="brand/secondary"]:focus {
192
+ box-shadow: 0 0 0 4px #ffbd1a40;
193
+ }
194
+ .button[data-colorHierarchy="gray/secondary"]:focus {
195
+ box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
196
+ }
197
+ .button[data-colorHierarchy="white/secondary"]:focus {
198
+ box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
199
+ }
200
+ .button[data-colorHierarchy="gray/linkContainer"]:focus {
201
+ box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
202
+ }
203
+ .button[data-colorHierarchy="gray/link"]:focus {
204
+ box-shadow: 0 0 0 4px var(--neutural-50, #e6e6e6);
205
+ }
206
+ .button[data-colorHierarchy="brand/link"]:focus {
207
+ box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
208
+ }
209
+ .button[data-colorHierarchy="destructive/primary"]:focus {
210
+ box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
211
+ }
212
+ .button[data-colorHierarchy="destructive/secondary"]:focus {
213
+ box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
214
+ }
215
+ .button[data-colorHierarchy="destructive/linkContainer"]:focus {
216
+ box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
217
+ }
218
+ .button[data-colorHierarchy=""]:focus {
219
+ box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
220
+ }
221
+ .button[data-colorHierarchy="brand/primary"]:disabled {
222
+ background: var(--surface-disabled, #f1f1f1);
223
+ }
224
+ .button:disabled .input-typography {
225
+ color: var(--text-disabled, #939197);
226
+ }
227
+ .button:disabled span svg path {
228
+ stroke: var(--text-disabled, #939197);
229
+ }
230
+ .button[data-colorHierarchy="brand/secondary"]:disabled {
231
+ background: var(--surface-error-disabled, #fdece9);
232
+ }
233
+ .button[data-colorHierarchy="brand/secondary"]:disabled .input-typography,
234
+ .button[data-colorHierarchy="brand/secondary"]:disabled span svg path {
235
+ color: var(--text-brand-secondary-disabled, #ffc192);
236
+ stroke: var(--text-brand-secondary-disabled, #ffc192);
237
+ }
238
+ .button[data-colorHierarchy="gray/secondary"]:disabled {
239
+ background: var(--surface-disabled, #f1f1f1);
240
+ }
241
+ .button[data-colorHierarchy="white/secondary"]:disabled {
242
+ background: var(--surface-white---disabled, #fdfdfd);
243
+ }
244
+ .button[data-colorHierarchy="brand/link"]:disabled .input-typography,
245
+ .button[data-colorHierarchy="brand/link"]:disabled span svg path {
246
+ color: var(--text-action-disabled, #849ed7);
247
+ stroke: var(--text-action-disabled, #849ed7);
248
+ }
249
+ .button[data-colorHierarchy="destructive/primary"]:disabled {
250
+ background: var(--surface-error-disabled, #fdece9);
251
+ }
252
+ .button[data-colorHierarchy="destructive/primary"]:disabled .input-typography,
253
+ .button[data-colorHierarchy="destructive/primary"]:disabled span svg path {
254
+ color: var(--text-error-disabled, #f5a290);
255
+ stroke: var(--text-error-disabled, #f5a290);
256
+ }
257
+ .button[data-colorHierarchy="destructive/secondary"]:disabled {
258
+ background: var(--surface-error-disabled, #fdece9);
259
+ }
260
+ .button[data-colorHierarchy="destructive/secondary"]:disabled .input-typography,
261
+ .button[data-colorHierarchy="destructive/secondary"]:disabled span svg path {
262
+ color: var(--text-error-disabled, #f5a290);
263
+ stroke: var(--text-error-disabled, #f5a290);
264
+ }
265
+ .button[data-colorHierarchy="destructive/linkContainer"]:disabled
266
+ .input-typography,
267
+ .button[data-colorHierarchy="destructive/linkContainer"]:disabled
268
+ span
269
+ svg
270
+ path {
271
+ color: var(--text-error-disabled, #f5a290);
272
+ stroke: var(--text-error-disabled, #f5a290);
273
+ }
274
+ .button[data-colorHierarchy="destructive/link"]:disabled .input-typography,
275
+ .button[data-colorHierarchy="destructive/link"]:disabled span svg path {
276
+ color: var(--text-error-disabled, #f5a290);
277
+ stroke: var(--text-error-disabled, #f5a290);
278
+ }
279
+ .TypographyCustom {
280
+ color: #000;
281
+ }
282
+ .TypographyCustom[data-bold="extrabold"] {
283
+ font-weight: 800;
284
+ }
285
+ .TypographyCustom[data-bold="bold"] {
286
+ font-weight: 700;
287
+ }
288
+ .TypographyCustom[data-bold="semibold"] {
289
+ font-weight: 600;
290
+ }
291
+ .TypographyCustom[data-bold="medium"] {
292
+ font-weight: 500;
293
+ }
294
+ .TypographyCustom[data-category="display"][data-size="lg"] {
295
+ font-size: 180px;
296
+ font-style: normal;
297
+ line-height: 188px;
298
+ letter-spacing: -9px;
299
+ }
300
+ .TypographyCustom[data-category="display"][data-size="md"] {
301
+ font-size: 128px;
302
+ font-style: normal;
303
+ line-height: 136px;
304
+ letter-spacing: -5.12px;
305
+ }
306
+ .TypographyCustom[data-category="display"][data-size="sm"] {
307
+ font-size: 96px;
308
+ font-style: normal;
309
+ line-height: 104px;
310
+ letter-spacing: -2.88px;
311
+ }
312
+ .TypographyCustom[data-category="heading"][data-size="xxl"] {
313
+ font-size: 72px;
314
+ font-style: normal;
315
+ line-height: 80px;
316
+ letter-spacing: -1.44px;
317
+ }
318
+ .TypographyCustom[data-category="heading"][data-size="xl"] {
319
+ font-size: 60px;
320
+ font-style: normal;
321
+ line-height: 68px;
322
+ letter-spacing: -1.08px;
323
+ }
324
+ .TypographyCustom[data-category="heading"][data-size="lg"] {
325
+ font-size: 48px;
326
+ font-style: normal;
327
+ line-height: 56px;
328
+ letter-spacing: -0.768px;
329
+ }
330
+ .TypographyCustom[data-category="heading"][data-size="md"] {
331
+ font-size: 36px;
332
+ font-style: normal;
333
+ line-height: 44px;
334
+ letter-spacing: -0.504px;
335
+ }
336
+ .TypographyCustom[data-category="heading"][data-size="sm"] {
337
+ font-size: 30px;
338
+ font-style: normal;
339
+ line-height: 38px;
340
+ letter-spacing: -0.39px;
341
+ }
342
+ .TypographyCustom[data-category="heading"][data-size="xs"],
343
+ .TypographyCustom[data-category="text"][data-size="xxl"] {
344
+ font-size: 24px;
345
+ font-style: normal;
346
+ line-height: 32px;
347
+ letter-spacing: -0.288px;
348
+ }
349
+ .TypographyCustom[data-category="text"][data-size="xl"] {
350
+ font-size: 20px;
351
+ font-style: normal;
352
+ line-height: 28px;
353
+ letter-spacing: -0.2px;
354
+ }
355
+ .TypographyCustom[data-category="text"][data-size="lg"] {
356
+ font-size: 18px;
357
+ font-style: normal;
358
+ line-height: 24px;
359
+ letter-spacing: -0.144px;
360
+ }
361
+ .TypographyCustom[data-category="text"][data-size="md"] {
362
+ font-size: 16px;
363
+ font-style: normal;
364
+ line-height: 22px;
365
+ letter-spacing: -0.112px;
366
+ }
367
+ .TypographyCustom[data-category="text"][data-size="sm"] {
368
+ font-size: 14px;
369
+ font-style: normal;
370
+ line-height: 20px;
371
+ letter-spacing: -0.084px;
372
+ }
373
+ .TypographyCustom[data-category="text"][data-size="xs"] {
374
+ font-size: 12px;
375
+ font-style: normal;
376
+ line-height: 16px;
377
+ letter-spacing: -0.06px;
378
+ }
379
+ .TypographyCustom[data-category="text"][data-size="xxs"] {
380
+ font-size: 10px;
381
+ font-style: normal;
382
+ line-height: 14px;
383
+ letter-spacing: -0.04px;
384
+ }
385
+ .custom-input {
386
+ display: flex;
387
+ flex-direction: row;
388
+ padding: 12px;
389
+ align-items: center;
390
+ gap: 12px;
391
+ width: 100%;
392
+ align-self: stretch;
393
+ border-radius: var(--border-radius-radius-pre-lg, 12px);
394
+ margin-top: 8px;
395
+ border: 1px solid var(--border-default, #e6e6e6);
396
+ background: var(--surface-white, #fff);
397
+ box-shadow: 0 1px 2px #1717170d;
398
+ }
399
+ .custom-input input {
400
+ width: 100%;
401
+ border: none;
402
+ }
403
+ .custom-input input::placeholder {
404
+ color: var(--text-disabled, #939197);
405
+ font-weight: 500;
406
+ }
407
+ .custom-input input:hover,
408
+ .custom-input input:focus,
409
+ .custom-input input:active {
410
+ border: none;
411
+ outline: none;
412
+ }
413
+ .custom-input .left-icon,
414
+ .custom-input .right-icon {
415
+ display: flex;
416
+ align-items: center;
417
+ justify-content: center;
418
+ }
419
+ .custom-input .left-icon svg path,
420
+ .custom-input .right-icon svg path {
421
+ stroke: #939197;
422
+ }
423
+ .custom-input:focus-within .left-icon svg path,
424
+ .custom-input:focus-within .right-icon svg path {
425
+ stroke: #000;
426
+ }
427
+ .custom-input input {
428
+ font-family: var(--font-family);
429
+ color: var(--text-primary, #080808);
430
+ font-weight: 600;
431
+ font-size: 14px;
432
+ font-style: normal;
433
+ }
434
+ .custom-input .grey-box {
435
+ margin: -12px;
436
+ padding: 12px;
437
+ gap: 6px;
438
+ display: flex;
439
+ flex-direction: row;
440
+ background: #f9f9f9;
441
+ }
442
+ .custom-input .grey-right-box {
443
+ padding: 12px;
444
+ border-top-right-radius: 12px;
445
+ border-bottom-right-radius: 12px;
446
+ border-left: 1px solid #e6e6e6;
447
+ }
448
+ .custom-input .grey-left-box {
449
+ padding: 12px 14px;
450
+ border-top-left-radius: 12px;
451
+ border-bottom-left-radius: 12px;
452
+ border-right: 1px solid #e6e6e6;
453
+ }
454
+ .custom-input select:focus {
455
+ border: none;
456
+ outline: none;
457
+ }
458
+ .text-area-container {
459
+ margin-top: 8px;
460
+ display: flex;
461
+ padding: 12px;
462
+ flex-direction: column;
463
+ gap: 10px;
464
+ flex: 1 0 0;
465
+ align-self: stretch;
466
+ border-radius: 16px;
467
+ border: var(--border-radius-radius-3xs, 1px) solid
468
+ var(--border-default, #e6e6e6);
469
+ box-shadow: 0 1px 2px #1717170d;
470
+ }
471
+ .text-area-container:focus-within {
472
+ border: var(--border-radius-radius-3xs, 1px) solid
473
+ var(--primary-main, #0070f3);
474
+ box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
475
+ }
476
+ .text-area-container:has(textarea:disabled) {
477
+ background: var(--surface-disabled, #f1f1f1);
478
+ }
479
+ .text-area-container:hover {
480
+ border: var(--border-radius-radius-3xs, 1px) solid
481
+ var(--border-hover, #c9c9cc);
482
+ }
483
+ .text-area-container[data-error="true"] {
484
+ border: var(--border-radius-radius-3xs, 1px) solid
485
+ var(--border-error, #ea4621);
486
+ box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
487
+ }
488
+ .custom-input:hover {
489
+ border: var(--border-radius-radius-none, 1px) solid
490
+ var(--border-hover, #c9c9cc);
491
+ box-shadow: 0 1px 2px #1717170d;
492
+ }
493
+ .custom-input:focus-within {
494
+ border: var(--border-radius-radius-none, 1px) solid
495
+ var(--border-default, #e6e6e6);
496
+ background: var(--surface-white, #fff);
497
+ box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
498
+ }
499
+ .custom-input:has(input:disabled) {
500
+ border-radius: var(--border-radius-radius-pre-lg, 12px);
501
+ border: var(--border-radius-radius-none, 1px) solid
502
+ var(--border-default, #e6e6e6);
503
+ background: var(--surface-disabled, #f1f1f1);
504
+ }
505
+ .custom-input:has(input:disabled) input {
506
+ color: var(--text-disabled, #939197) !important;
507
+ }
508
+ .custom-input[data-error="true"] {
509
+ border: var(--border-radius-radius-none, 1px) solid
510
+ var(--border-error, #ea4621);
511
+ box-shadow: 0 0 0 4px var(--destructive-30, #f9c7bc);
512
+ }
513
+ .blinq-checkbox input[data-size="sm"] + .checkmark {
514
+ width: 16px;
515
+ height: 16px;
516
+ border-radius: var(--border-radius-radius-sm, 6px);
517
+ }
518
+ .blinq-checkbox input[data-size="md"] + .checkmark {
519
+ width: 20px;
520
+ height: 20px;
521
+ border-radius: var(--border-radius-radius-md, 8px);
522
+ }
523
+ .blinq-checkbox input[data-size="lg"] + .checkmark {
524
+ width: 24px;
525
+ height: 24px;
526
+ border-radius: var(--border-radius-radius-md, 8px);
527
+ }
528
+ .blinq-checkbox .checkmark {
529
+ position: absolute;
530
+ top: 4px;
531
+ left: 0;
532
+ background-color: var(--surface-primary-lightest, #f3f5fb);
533
+ border-radius: 8px;
534
+ }
535
+ .blinq-checkbox input:checked ~ .checkmark {
536
+ background: var(--surface-primary, #093db0);
537
+ }
538
+ .blinq-checkbox .checkmark:after {
539
+ border: solid white;
540
+ border-width: 0 2.7px 2.7px 0;
541
+ -webkit-transform: rotate(45deg);
542
+ -ms-transform: rotate(45deg);
543
+ transform: rotate(45deg);
544
+ border-radius: 1px;
545
+ }
546
+ .blinq-checkbox input[data-size="lg"] + .checkmark:after {
547
+ left: 8.5px;
548
+ top: 4px;
549
+ width: 5px;
550
+ height: 11px;
551
+ }
552
+ .blinq-checkbox input[data-size="md"] + .checkmark:after {
553
+ left: 7px;
554
+ top: 4px;
555
+ width: 4px;
556
+ height: 8px;
557
+ }
558
+ .blinq-checkbox input[data-size="sm"] + .checkmark:after {
559
+ left: 5px;
560
+ top: 3px;
561
+ width: 3px;
562
+ height: 6px;
563
+ }
564
+ .blinq-checkbox:hover input:checked ~ .checkmark {
565
+ background: var(--surface-primary-hover, #08379e);
566
+ }
567
+ .blinq-checkbox input:focus ~ .checkmark {
568
+ box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
569
+ }
570
+ .blinq-checkbox input:disabled ~ .checkmark {
571
+ background: var(--surface-disabled, #f1f1f1);
572
+ cursor: not-allowed;
573
+ border: 1px solid var(--border-default, #e6e6e6);
574
+ box-shadow: none;
575
+ }
576
+ .blinq-checkbox input ~ .checkmark {
577
+ border: 1px solid var(--border-brand, #093db0);
578
+ }
579
+ .blinq-checkbox input:disabled ~ .checkmark:after {
580
+ border: solid #939197;
581
+ border-width: 0 2.7px 2.7px 0;
582
+ -webkit-transform: rotate(45deg);
583
+ -ms-transform: rotate(45deg);
584
+ transform: rotate(45deg);
585
+ border-radius: 1px;
586
+ }
587
+ .blinq-checkbox {
588
+ display: block;
589
+ position: relative;
590
+ padding-left: 35px;
591
+ margin-bottom: 12px;
592
+ cursor: pointer;
593
+ font-size: 22px;
594
+ -webkit-user-select: none;
595
+ -moz-user-select: none;
596
+ -ms-user-select: none;
597
+ user-select: none;
598
+ }
599
+ .blinq-checkbox input {
600
+ position: absolute;
601
+ opacity: 0;
602
+ cursor: pointer;
603
+ height: 0;
604
+ width: 0;
605
+ }
606
+ .blinq-checkbox .checkmark:after {
607
+ content: "";
608
+ position: absolute;
609
+ display: none;
610
+ }
611
+ .blinq-checkbox input:checked ~ .checkmark:after {
612
+ display: block;
613
+ }
614
+ .blinq-radio-button input[data-size="sm"] + .checkmark {
615
+ width: 16px;
616
+ height: 16px;
617
+ border-radius: 50%;
618
+ }
619
+ .blinq-radio-button input[data-size="md"] + .checkmark {
620
+ width: 20px;
621
+ height: 20px;
622
+ border-radius: 50%;
623
+ }
624
+ .blinq-radio-button input[data-size="lg"] + .checkmark {
625
+ width: 24px;
626
+ height: 24px;
627
+ border-radius: 50%;
628
+ }
629
+ .blinq-radio-button .checkmark {
630
+ position: absolute;
631
+ top: 4px;
632
+ left: 0;
633
+ background-color: var(--surface-primary-lightest, #f3f5fb);
634
+ border-radius: 8px;
635
+ }
636
+ .blinq-radio-button .checkmark:after {
637
+ display: inline-block;
638
+ border-radius: 50%;
639
+ left: 50%;
640
+ top: 50%;
641
+ background: var(--surface-primary, #093db0);
642
+ transform: translate(-50%, -50%);
643
+ position: absolute;
644
+ }
645
+ .blinq-radio-button input[data-size="lg"] + .checkmark:after {
646
+ width: 12px;
647
+ height: 12px;
648
+ }
649
+ .blinq-radio-button input[data-size="md"] + .checkmark:after {
650
+ width: 10px;
651
+ height: 10px;
652
+ }
653
+ .blinq-radio-button input[data-size="sm"] + .checkmark:after {
654
+ width: 8px;
655
+ height: 8px;
656
+ }
657
+ .blinq-radio-button:hover .checkmark:after {
658
+ background: var(--surface-primary-hover, #08379e);
659
+ }
660
+ .blinq-radio-button input:focus ~ .checkmark {
661
+ box-shadow: 0 0 0 4px var(--primary-30, #b5c5e7);
662
+ }
663
+ .blinq-radio-button input:disabled ~ .checkmark {
664
+ background: var(--surface-disabled, #f1f1f1);
665
+ cursor: not-allowed;
666
+ border: 1px solid var(--border-default, #e6e6e6);
667
+ box-shadow: none;
668
+ }
669
+ .blinq-radio-button input ~ .checkmark {
670
+ border: 1px solid var(--border-brand, #093db0);
671
+ }
672
+ .blinq-radio-button input:disabled .checkmark:after {
673
+ display: inline-block;
674
+ border-radius: 50%;
675
+ left: 50%;
676
+ top: 50%;
677
+ background: #939197;
678
+ transform: translate(-50%, -50%);
679
+ position: absolute;
680
+ }
681
+ .blinq-radio-button {
682
+ display: block;
683
+ position: relative;
684
+ padding-left: 35px;
685
+ margin-bottom: 12px;
686
+ cursor: pointer;
687
+ font-size: 22px;
688
+ -webkit-user-select: none;
689
+ -moz-user-select: none;
690
+ -ms-user-select: none;
691
+ user-select: none;
692
+ }
693
+ .blinq-radio-button input {
694
+ position: absolute;
695
+ opacity: 0;
696
+ cursor: pointer;
697
+ height: 0;
698
+ width: 0;
699
+ }
700
+ .blinq-radio-button .checkmark:after {
701
+ content: "";
702
+ position: absolute;
703
+ display: none;
704
+ }
705
+ .blinq-radio-button input:checked ~ .checkmark:after {
706
+ display: block;
707
+ }
708
+ .toggle-switch {
709
+ display: inline-flex;
710
+ background-color: #f5f5f5;
711
+ border-radius: 20px;
712
+ padding: 5px;
713
+ cursor: pointer;
714
+ transition: background-color 1s ease;
715
+ }
716
+ .toggle-option {
717
+ padding: 10px 20px;
718
+ border-radius: 15px;
719
+ font-weight: 500;
720
+ font-size: 14px;
721
+ color: #b9b9b9;
722
+ transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
723
+ }
724
+ .toggle-option p {
725
+ color: var(--text-secondary, #717076);
726
+ }
727
+ .toggle-option.active {
728
+ background-color: #fff;
729
+ color: #000;
730
+ box-shadow: 0 2px 8px #0000001a;
731
+ }
732
+ .toggle-option.active p {
733
+ color: var(--text-primary, #080808);
734
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dev-blinq/ui-systems",
3
3
  "description": "this package contains all ui components like button, input, checkbox, colors that blinq.io needs",
4
- "version": "1.0.59",
4
+ "version": "1.0.60",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",