@mirohq/design-system-base-text-field 1.3.13 → 1.3.15
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 +5 -5
- package/dist/main.js.map +1 -1
- package/dist/module.js +5 -5
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +3 -3
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -36,17 +36,17 @@ const textFieldStyles = {
|
|
|
36
36
|
borderRadius: "$50"
|
|
37
37
|
},
|
|
38
38
|
active: {
|
|
39
|
-
borderColor: "$input-border-
|
|
40
|
-
|
|
39
|
+
borderColor: "$input-border-focused",
|
|
40
|
+
background: "$input-background-focused"
|
|
41
41
|
},
|
|
42
42
|
focused: {
|
|
43
43
|
boxShadow: "$focus",
|
|
44
|
-
borderColor: "$input-border-
|
|
45
|
-
|
|
44
|
+
borderColor: "$input-border-focused",
|
|
45
|
+
background: "$input-background-focused"
|
|
46
46
|
},
|
|
47
47
|
hovered: {
|
|
48
48
|
borderColor: "$input-border-hover",
|
|
49
|
-
|
|
49
|
+
background: "$input-background-hover"
|
|
50
50
|
},
|
|
51
51
|
readOnly: {
|
|
52
52
|
background: "$input-background-disabled",
|
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 $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-
|
|
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-focused',\n background: '$input-background-focused',\n },\n focused: {\n boxShadow: '$focus',\n borderColor: '$input-border-focused',\n background: '$input-background-focused',\n },\n hovered: {\n borderColor: '$input-border-hover',\n background: '$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,uBAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACd;AAAA,IACA,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,uBAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACd;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAA,EAAa,qBAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACd;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
|
@@ -34,17 +34,17 @@ const textFieldStyles = {
|
|
|
34
34
|
borderRadius: "$50"
|
|
35
35
|
},
|
|
36
36
|
active: {
|
|
37
|
-
borderColor: "$input-border-
|
|
38
|
-
|
|
37
|
+
borderColor: "$input-border-focused",
|
|
38
|
+
background: "$input-background-focused"
|
|
39
39
|
},
|
|
40
40
|
focused: {
|
|
41
41
|
boxShadow: "$focus",
|
|
42
|
-
borderColor: "$input-border-
|
|
43
|
-
|
|
42
|
+
borderColor: "$input-border-focused",
|
|
43
|
+
background: "$input-background-focused"
|
|
44
44
|
},
|
|
45
45
|
hovered: {
|
|
46
46
|
borderColor: "$input-border-hover",
|
|
47
|
-
|
|
47
|
+
background: "$input-background-hover"
|
|
48
48
|
},
|
|
49
49
|
readOnly: {
|
|
50
50
|
background: "$input-background-disabled",
|
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 $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-
|
|
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-focused',\n background: '$input-background-focused',\n },\n focused: {\n boxShadow: '$focus',\n borderColor: '$input-border-focused',\n background: '$input-background-focused',\n },\n hovered: {\n borderColor: '$input-border-hover',\n background: '$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,uBAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACd;AAAA,IACA,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,uBAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACd;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAA,EAAa,qBAAA;AAAA,MACb,UAAA,EAAY;AAAA,KACd;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,16 +33,16 @@ declare const textFieldStyles: {
|
|
|
33
33
|
};
|
|
34
34
|
active: {
|
|
35
35
|
borderColor: string;
|
|
36
|
-
|
|
36
|
+
background: string;
|
|
37
37
|
};
|
|
38
38
|
focused: {
|
|
39
39
|
boxShadow: string;
|
|
40
40
|
borderColor: string;
|
|
41
|
-
|
|
41
|
+
background: string;
|
|
42
42
|
};
|
|
43
43
|
hovered: {
|
|
44
44
|
borderColor: string;
|
|
45
|
-
|
|
45
|
+
background: string;
|
|
46
46
|
};
|
|
47
47
|
readOnly: {
|
|
48
48
|
background: string;
|
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.15",
|
|
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.9"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|
|
32
32
|
"build": "rollup -c ../../../../rollup.config.js",
|