@mirohq/design-system-base-text-field 1.3.11 → 1.3.13
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/main.js +16 -12
- package/dist/main.js.map +1 -1
- package/dist/module.js +16 -12
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +4 -0
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -28,35 +28,39 @@ const textFieldStyles = {
|
|
|
28
28
|
idle: {
|
|
29
29
|
boxSizing: "border-box",
|
|
30
30
|
width: "100%",
|
|
31
|
-
border: "1.5px solid $border-
|
|
31
|
+
border: "1.5px solid $input-border-default",
|
|
32
32
|
fontSize: "$175",
|
|
33
33
|
lineHeight: "$400",
|
|
34
34
|
color: "$text-neutrals",
|
|
35
|
-
background: "$background-
|
|
35
|
+
background: "$input-background-default",
|
|
36
36
|
borderRadius: "$50"
|
|
37
37
|
},
|
|
38
38
|
active: {
|
|
39
|
-
borderColor: "$border-
|
|
39
|
+
borderColor: "$input-border-active",
|
|
40
|
+
backgroundColor: "$input-background-active"
|
|
40
41
|
},
|
|
41
42
|
focused: {
|
|
42
43
|
boxShadow: "$focus",
|
|
43
|
-
borderColor: "$border-
|
|
44
|
+
borderColor: "$input-border-active",
|
|
45
|
+
backgroundColor: "$input-background-active"
|
|
44
46
|
},
|
|
45
47
|
hovered: {
|
|
46
|
-
borderColor: "$border-
|
|
48
|
+
borderColor: "$input-border-hover",
|
|
49
|
+
backgroundColor: "$input-background-hover"
|
|
47
50
|
},
|
|
48
51
|
readOnly: {
|
|
49
|
-
background: "$background-
|
|
52
|
+
background: "$input-background-disabled",
|
|
50
53
|
borderColor: "transparent",
|
|
51
54
|
color: "$text-neutrals"
|
|
52
55
|
},
|
|
53
56
|
disabled: {
|
|
54
|
-
background: "$background-
|
|
55
|
-
borderColor: "transparent"
|
|
57
|
+
background: "$input-background-disabled",
|
|
58
|
+
borderColor: "transparent",
|
|
59
|
+
color: "$text-on-disabled"
|
|
56
60
|
},
|
|
57
61
|
invalid: {
|
|
58
62
|
idle: {
|
|
59
|
-
borderColor: "$border-
|
|
63
|
+
borderColor: "$input-border-error"
|
|
60
64
|
},
|
|
61
65
|
hovered: {
|
|
62
66
|
borderColor: "$border-danger-hover"
|
|
@@ -64,7 +68,7 @@ const textFieldStyles = {
|
|
|
64
68
|
},
|
|
65
69
|
valid: {
|
|
66
70
|
idle: {
|
|
67
|
-
borderColor: "$border-success"
|
|
71
|
+
borderColor: "$input-border-success"
|
|
68
72
|
},
|
|
69
73
|
hovered: {
|
|
70
74
|
borderColor: "$border-success-hover"
|
|
@@ -78,8 +82,8 @@ const textFieldStyles = {
|
|
|
78
82
|
disabled: {
|
|
79
83
|
caretColor: "transparent",
|
|
80
84
|
"&, &::placeholder": {
|
|
81
|
-
color: "$text-
|
|
82
|
-
"-webkit-text-fill-color": "$colors$text-
|
|
85
|
+
color: "$text-on-disabled",
|
|
86
|
+
"-webkit-text-fill-color": "$colors$text-on-disabled"
|
|
83
87
|
},
|
|
84
88
|
"&:selection": {
|
|
85
89
|
background: "transparent"
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n border: '1.5px solid $border-
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n border: '1.5px solid $input-border-default',\n fontSize: '$175',\n lineHeight: '$400',\n color: '$text-neutrals',\n background: '$input-background-default',\n borderRadius: '$50',\n },\n active: {\n borderColor: '$input-border-active',\n backgroundColor: '$input-background-active',\n },\n focused: {\n boxShadow: '$focus',\n borderColor: '$input-border-active',\n backgroundColor: '$input-background-active',\n },\n hovered: {\n borderColor: '$input-border-hover',\n backgroundColor: '$input-background-hover',\n },\n readOnly: {\n background: '$input-background-disabled',\n borderColor: 'transparent',\n color: '$text-neutrals',\n },\n disabled: {\n background: '$input-background-disabled',\n borderColor: 'transparent',\n color: '$text-on-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$input-border-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$input-border-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-placeholder',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-on-disabled',\n '-webkit-text-fill-color': '$colors$text-on-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":["focus"],"mappings":";;;;AAEO,MAAM,kBAAA,GAAqB;AAAA,EAChC,eAAA,EAAiB,aAAA;AAAA,EACjB,KAAA,EAAO,uBAAA;AAAA,EACP,OAAA,EAAS,MAAA;AAAA,EACT,cAAA,EAAgB,QAAA;AAAA,EAChB,OAAA,EAAS,KAAA;AAAA,EACT,MAAA,EAAQ,IAAA;AAAA,EAER,oEAAA,EAAsE;AAAA,IACpE,MAAA,EAAQ,WAAA;AAAA,IACR,oBAAA,EAAsB;AAAA,GACxB;AAAA,EAEA,GAAGA,yBAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EAED,SAAA,EAAW;AAAA,IACT,eAAA,EAAiB;AAAA,GACnB;AAAA,EAEA,2BAAA,EAA6B;AAAA,IAC3B,eAAA,EAAiB;AAAA;AAErB;AAEO,MAAM,eAAA,GAAkB;AAAA,EAC7B,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,SAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,mCAAA;AAAA,MACR,QAAA,EAAU,MAAA;AAAA,MACV,UAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,gBAAA;AAAA,MACP,UAAA,EAAY,2BAAA;AAAA,MACZ,YAAA,EAAc;AAAA,KAChB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa,sBAAA;AAAA,MACb,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,sBAAA;AAAA,MACb,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAA,EAAa,qBAAA;AAAA,MACb,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,4BAAA;AAAA,MACZ,WAAA,EAAa,aAAA;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,4BAAA;AAAA,MACZ,WAAA,EAAa,aAAA;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM;AAAA,QACJ,WAAA,EAAa;AAAA,OACf;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAA,EAAa;AAAA;AACf,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,WAAA,EAAa;AAAA,OACf;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAA,EAAa;AAAA;AACf;AACF,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,WAAA,EAAa;AAAA,MACX,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,aAAA;AAAA,MACZ,mBAAA,EAAqB;AAAA,QACnB,KAAA,EAAO,mBAAA;AAAA,QACP,yBAAA,EAA2B;AAAA,OAC7B;AAAA,MACA,aAAA,EAAe;AAAA,QACb,UAAA,EAAY;AAAA;AACd;AACF;AAEJ;;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -26,35 +26,39 @@ const textFieldStyles = {
|
|
|
26
26
|
idle: {
|
|
27
27
|
boxSizing: "border-box",
|
|
28
28
|
width: "100%",
|
|
29
|
-
border: "1.5px solid $border-
|
|
29
|
+
border: "1.5px solid $input-border-default",
|
|
30
30
|
fontSize: "$175",
|
|
31
31
|
lineHeight: "$400",
|
|
32
32
|
color: "$text-neutrals",
|
|
33
|
-
background: "$background-
|
|
33
|
+
background: "$input-background-default",
|
|
34
34
|
borderRadius: "$50"
|
|
35
35
|
},
|
|
36
36
|
active: {
|
|
37
|
-
borderColor: "$border-
|
|
37
|
+
borderColor: "$input-border-active",
|
|
38
|
+
backgroundColor: "$input-background-active"
|
|
38
39
|
},
|
|
39
40
|
focused: {
|
|
40
41
|
boxShadow: "$focus",
|
|
41
|
-
borderColor: "$border-
|
|
42
|
+
borderColor: "$input-border-active",
|
|
43
|
+
backgroundColor: "$input-background-active"
|
|
42
44
|
},
|
|
43
45
|
hovered: {
|
|
44
|
-
borderColor: "$border-
|
|
46
|
+
borderColor: "$input-border-hover",
|
|
47
|
+
backgroundColor: "$input-background-hover"
|
|
45
48
|
},
|
|
46
49
|
readOnly: {
|
|
47
|
-
background: "$background-
|
|
50
|
+
background: "$input-background-disabled",
|
|
48
51
|
borderColor: "transparent",
|
|
49
52
|
color: "$text-neutrals"
|
|
50
53
|
},
|
|
51
54
|
disabled: {
|
|
52
|
-
background: "$background-
|
|
53
|
-
borderColor: "transparent"
|
|
55
|
+
background: "$input-background-disabled",
|
|
56
|
+
borderColor: "transparent",
|
|
57
|
+
color: "$text-on-disabled"
|
|
54
58
|
},
|
|
55
59
|
invalid: {
|
|
56
60
|
idle: {
|
|
57
|
-
borderColor: "$border-
|
|
61
|
+
borderColor: "$input-border-error"
|
|
58
62
|
},
|
|
59
63
|
hovered: {
|
|
60
64
|
borderColor: "$border-danger-hover"
|
|
@@ -62,7 +66,7 @@ const textFieldStyles = {
|
|
|
62
66
|
},
|
|
63
67
|
valid: {
|
|
64
68
|
idle: {
|
|
65
|
-
borderColor: "$border-success"
|
|
69
|
+
borderColor: "$input-border-success"
|
|
66
70
|
},
|
|
67
71
|
hovered: {
|
|
68
72
|
borderColor: "$border-success-hover"
|
|
@@ -76,8 +80,8 @@ const textFieldStyles = {
|
|
|
76
80
|
disabled: {
|
|
77
81
|
caretColor: "transparent",
|
|
78
82
|
"&, &::placeholder": {
|
|
79
|
-
color: "$text-
|
|
80
|
-
"-webkit-text-fill-color": "$colors$text-
|
|
83
|
+
color: "$text-on-disabled",
|
|
84
|
+
"-webkit-text-fill-color": "$colors$text-on-disabled"
|
|
81
85
|
},
|
|
82
86
|
"&:selection": {
|
|
83
87
|
background: "transparent"
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n border: '1.5px solid $border-
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n border: '1.5px solid $input-border-default',\n fontSize: '$175',\n lineHeight: '$400',\n color: '$text-neutrals',\n background: '$input-background-default',\n borderRadius: '$50',\n },\n active: {\n borderColor: '$input-border-active',\n backgroundColor: '$input-background-active',\n },\n focused: {\n boxShadow: '$focus',\n borderColor: '$input-border-active',\n backgroundColor: '$input-background-active',\n },\n hovered: {\n borderColor: '$input-border-hover',\n backgroundColor: '$input-background-hover',\n },\n readOnly: {\n background: '$input-background-disabled',\n borderColor: 'transparent',\n color: '$text-neutrals',\n },\n disabled: {\n background: '$input-background-disabled',\n borderColor: 'transparent',\n color: '$text-on-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$input-border-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$input-border-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-placeholder',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-on-disabled',\n '-webkit-text-fill-color': '$colors$text-on-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":[],"mappings":";;AAEO,MAAM,kBAAA,GAAqB;AAAA,EAChC,eAAA,EAAiB,aAAA;AAAA,EACjB,KAAA,EAAO,uBAAA;AAAA,EACP,OAAA,EAAS,MAAA;AAAA,EACT,cAAA,EAAgB,QAAA;AAAA,EAChB,OAAA,EAAS,KAAA;AAAA,EACT,MAAA,EAAQ,IAAA;AAAA,EAER,oEAAA,EAAsE;AAAA,IACpE,MAAA,EAAQ,WAAA;AAAA,IACR,oBAAA,EAAsB;AAAA,GACxB;AAAA,EAEA,GAAG,MAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EAED,SAAA,EAAW;AAAA,IACT,eAAA,EAAiB;AAAA,GACnB;AAAA,EAEA,2BAAA,EAA6B;AAAA,IAC3B,eAAA,EAAiB;AAAA;AAErB;AAEO,MAAM,eAAA,GAAkB;AAAA,EAC7B,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,SAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,mCAAA;AAAA,MACR,QAAA,EAAU,MAAA;AAAA,MACV,UAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,gBAAA;AAAA,MACP,UAAA,EAAY,2BAAA;AAAA,MACZ,YAAA,EAAc;AAAA,KAChB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa,sBAAA;AAAA,MACb,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,sBAAA;AAAA,MACb,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAA,EAAa,qBAAA;AAAA,MACb,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,4BAAA;AAAA,MACZ,WAAA,EAAa,aAAA;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,4BAAA;AAAA,MACZ,WAAA,EAAa,aAAA;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM;AAAA,QACJ,WAAA,EAAa;AAAA,OACf;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAA,EAAa;AAAA;AACf,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,WAAA,EAAa;AAAA,OACf;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAA,EAAa;AAAA;AACf;AACF,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,WAAA,EAAa;AAAA,MACX,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,UAAA,EAAY,aAAA;AAAA,MACZ,mBAAA,EAAqB;AAAA,QACnB,KAAA,EAAO,mBAAA;AAAA,QACP,yBAAA,EAA2B;AAAA,OAC7B;AAAA,MACA,aAAA,EAAe;AAAA,QACb,UAAA,EAAY;AAAA;AACd;AACF;AAEJ;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -33,13 +33,16 @@ declare const textFieldStyles: {
|
|
|
33
33
|
};
|
|
34
34
|
active: {
|
|
35
35
|
borderColor: string;
|
|
36
|
+
backgroundColor: string;
|
|
36
37
|
};
|
|
37
38
|
focused: {
|
|
38
39
|
boxShadow: string;
|
|
39
40
|
borderColor: string;
|
|
41
|
+
backgroundColor: string;
|
|
40
42
|
};
|
|
41
43
|
hovered: {
|
|
42
44
|
borderColor: string;
|
|
45
|
+
backgroundColor: string;
|
|
43
46
|
};
|
|
44
47
|
readOnly: {
|
|
45
48
|
background: string;
|
|
@@ -49,6 +52,7 @@ declare const textFieldStyles: {
|
|
|
49
52
|
disabled: {
|
|
50
53
|
background: string;
|
|
51
54
|
borderColor: string;
|
|
55
|
+
color: string;
|
|
52
56
|
};
|
|
53
57
|
invalid: {
|
|
54
58
|
idle: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-text-field",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18 || ^19"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-styles": "^3.2.
|
|
29
|
+
"@mirohq/design-system-styles": "^3.2.8"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|
|
32
32
|
"build": "rollup -c ../../../../rollup.config.js",
|