@mirohq/design-system-base-input 0.0.3 → 0.0.4

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 CHANGED
@@ -13,7 +13,10 @@ const styles = {
13
13
  },
14
14
  focused: {
15
15
  boxShadow: "$focus-controls",
16
- borderColor: "$border-neutrals"
16
+ borderColor: "$border-neutrals",
17
+ "@media (forced-colors: active)": {
18
+ outline: "Highlight solid"
19
+ }
17
20
  },
18
21
  hovered: {
19
22
  borderColor: "$border-primary-hover"
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\n variants: {\n idle: {\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n fontSize: '$200',\n lineHeight: '1.5',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":[],"mappings":";;;;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,KACf;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\n variants: {\n idle: {\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n fontSize: '$200',\n lineHeight: '1.5',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":[],"mappings":";;;;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,MAEb,gCAAkC,EAAA;AAAA,QAChC,OAAS,EAAA,iBAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;;;"}
package/dist/module.js CHANGED
@@ -9,7 +9,10 @@ const styles = {
9
9
  },
10
10
  focused: {
11
11
  boxShadow: "$focus-controls",
12
- borderColor: "$border-neutrals"
12
+ borderColor: "$border-neutrals",
13
+ "@media (forced-colors: active)": {
14
+ outline: "Highlight solid"
15
+ }
13
16
  },
14
17
  hovered: {
15
18
  borderColor: "$border-primary-hover"
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\n variants: {\n idle: {\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n fontSize: '$200',\n lineHeight: '1.5',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":[],"mappings":"AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,KACf;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\n variants: {\n idle: {\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n fontSize: '$200',\n lineHeight: '1.5',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":[],"mappings":"AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,MAEb,gCAAkC,EAAA;AAAA,QAChC,OAAS,EAAA,iBAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;;;"}
package/dist/types.d.ts CHANGED
@@ -10,6 +10,9 @@ declare const styles: {
10
10
  focused: {
11
11
  boxShadow: string;
12
12
  borderColor: string;
13
+ '@media (forced-colors: active)': {
14
+ outline: string;
15
+ };
13
16
  };
14
17
  hovered: {
15
18
  borderColor: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-input",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",