@narmi/design_system 6.22.6 → 6.23.0

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 (13) hide show
  1. package/dist/docs/classManifest.json +0 -75
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/style.css +1 -1
  5. package/dist/style.css.map +1 -1
  6. package/dist/tokens/css/rgbColors.css +13 -13
  7. package/dist/tokens/css/rgbColors.scss +13 -13
  8. package/dist/tokens/css/tokens.css +69 -69
  9. package/dist/tokens/css/tokens.scss +69 -69
  10. package/dist/tokens/js/colors.esm.js +69 -69
  11. package/dist/types/Button/index.d.ts +5 -2
  12. package/dist/types/Button/index.d.ts.map +1 -1
  13. package/package.json +1 -1
package/dist/tokens/js/colors.esm.js CHANGED
@@ -12,75 +12,75 @@ export const ColorGreyMediumGrey = "#6c6c6c";
12
12
  export const ColorGreyDarkGrey = "#4c4c4c";
13
13
  export const ColorGreyBlack = "#333333";
14
14
  export const ColorGreyWhite = "#ffffff";
15
- export const ColorNarmiMoss100 = "#002921";
16
- export const ColorNarmiMoss200 = "#0F3C32";
17
- export const ColorNarmiMoss300 = "#005242";
18
- export const ColorNarmiMoss400 = "#006553";
19
- export const ColorNarmiMoss500 = "#3E8373";
20
- export const ColorNarmiMoss600 = "#6EA193";
21
- export const ColorNarmiMoss700 = "#9DC0B6";
22
- export const ColorNarmiMoss800 = "#CDDED9";
23
- export const ColorNarmiMoss = "#006553";
24
- export const ColorNarmiPine100 = "#041A14";
25
- export const ColorNarmiPine200 = "#062821";
26
- export const ColorNarmiPine300 = "#16362C";
27
- export const ColorNarmiPine400 = "#1A4338";
28
- export const ColorNarmiPine500 = "#44655B";
29
- export const ColorNarmiPine600 = "#708981";
30
- export const ColorNarmiPine700 = "#708981";
31
- export const ColorNarmiPine800 = "#CDD6D3";
32
- export const ColorNarmiPine = "#1A4338";
33
- export const ColorNarmiCove100 = "#002547";
34
- export const ColorNarmiCove200 = "#00376A";
35
- export const ColorNarmiCove300 = "#094895";
36
- export const ColorNarmiCove400 = "#005CB2";
37
- export const ColorNarmiCove500 = "#237CC3";
38
- export const ColorNarmiCove600 = "#66A2D6";
39
- export const ColorNarmiCove700 = "#A6CFF0";
40
- export const ColorNarmiCove800 = "#D4EDFF";
41
- export const ColorNarmiCove = "#005CB2";
42
- export const ColorNarmiAzul100 = "#001340";
43
- export const ColorNarmiAzul200 = "#00205E";
44
- export const ColorNarmiAzul300 = "#002C82";
45
- export const ColorNarmiAzul400 = "#003EA0";
46
- export const ColorNarmiAzul500 = "#3664B5";
47
- export const ColorNarmiAzul600 = "#6B89C7";
48
- export const ColorNarmiAzul700 = "#9CB1DE";
49
- export const ColorNarmiAzul800 = "#C9D8F2";
50
- export const ColorNarmiAzul = "#003EA0";
51
- export const ColorNarmiPistachio100 = "#485E3D";
52
- export const ColorNarmiPistachio200 = "#6B8C5A";
53
- export const ColorNarmiPistachio300 = "#90BB78";
54
- export const ColorNarmiPistachio400 = "#B5E995";
55
- export const ColorNarmiPistachio500 = "#CCF0B4";
56
- export const ColorNarmiPistachio600 = "#DAF4C8";
57
- export const ColorNarmiPistachio700 = "#E9F8DE";
58
- export const ColorNarmiPistachio800 = "#F7FCF3";
59
- export const ColorNarmiPistachio = "#B5E995";
60
- export const ColorNarmiCactus100 = "#324C23";
61
- export const ColorNarmiCactus200 = "#4B7137";
62
- export const ColorNarmiCactus300 = "#63964B";
63
- export const ColorNarmiCactus400 = "#7FBC5B";
64
- export const ColorNarmiCactus500 = "#99CA7A";
65
- export const ColorNarmiCactus600 = "#B3D79A";
66
- export const ColorNarmiCactus700 = "#CCE4BA";
67
- export const ColorNarmiCactus800 = "#E5F1DC";
68
- export const ColorNarmiCactus = "#7FBC5B";
69
- export const ColorNarmiSand100 = "#423329";
70
- export const ColorNarmiSand200 = "#684D41";
71
- export const ColorNarmiSand300 = "#947564";
72
- export const ColorNarmiSand400 = "#C4A08A";
73
- export const ColorNarmiSand500 = "#DCC1A3";
74
- export const ColorNarmiSand600 = "#EED6C3";
75
- export const ColorNarmiSand700 = "#F4E3D6";
76
- export const ColorNarmiSand800 = "#FCF0E9";
77
- export const ColorNarmiSand = "#DCC1A3";
78
- export const ColorNarmiAmethyst = "#5514B8";
79
- export const ColorNarmiBlack = "#333333";
80
- export const ColorNarmiGrey = "#6c6c6c";
81
- export const ColorNarmiMediumGrey = "#6c6c6c";
82
- export const ColorNarmiLightGrey = "#d9d9d9";
83
- export const ColorNarmiWhite = "#ffffff";
15
+ export const ColorNarmiMoss100 = "#002921"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
16
+ export const ColorNarmiMoss200 = "#0F3C32"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
17
+ export const ColorNarmiMoss300 = "#005242"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
18
+ export const ColorNarmiMoss400 = "#006553"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
19
+ export const ColorNarmiMoss500 = "#3E8373"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
20
+ export const ColorNarmiMoss600 = "#6EA193"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
21
+ export const ColorNarmiMoss700 = "#9DC0B6"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
22
+ export const ColorNarmiMoss800 = "#CDDED9"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
23
+ export const ColorNarmiMoss = "#006553"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
24
+ export const ColorNarmiPine100 = "#041A14"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
25
+ export const ColorNarmiPine200 = "#062821"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
26
+ export const ColorNarmiPine300 = "#16362C"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
27
+ export const ColorNarmiPine400 = "#1A4338"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
28
+ export const ColorNarmiPine500 = "#44655B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
29
+ export const ColorNarmiPine600 = "#708981"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
30
+ export const ColorNarmiPine700 = "#708981"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
31
+ export const ColorNarmiPine800 = "#CDD6D3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
32
+ export const ColorNarmiPine = "#1A4338"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
33
+ export const ColorNarmiCove100 = "#002547"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
34
+ export const ColorNarmiCove200 = "#00376A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
35
+ export const ColorNarmiCove300 = "#094895"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
36
+ export const ColorNarmiCove400 = "#005CB2"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
37
+ export const ColorNarmiCove500 = "#237CC3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
38
+ export const ColorNarmiCove600 = "#66A2D6"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
39
+ export const ColorNarmiCove700 = "#A6CFF0"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
40
+ export const ColorNarmiCove800 = "#D4EDFF"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
41
+ export const ColorNarmiCove = "#005CB2"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
42
+ export const ColorNarmiAzul100 = "#001340"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
43
+ export const ColorNarmiAzul200 = "#00205E"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
44
+ export const ColorNarmiAzul300 = "#002C82"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
45
+ export const ColorNarmiAzul400 = "#003EA0"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
46
+ export const ColorNarmiAzul500 = "#3664B5"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
47
+ export const ColorNarmiAzul600 = "#6B89C7"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
48
+ export const ColorNarmiAzul700 = "#9CB1DE"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
49
+ export const ColorNarmiAzul800 = "#C9D8F2"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
50
+ export const ColorNarmiAzul = "#003EA0"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
51
+ export const ColorNarmiPistachio100 = "#485E3D"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
52
+ export const ColorNarmiPistachio200 = "#6B8C5A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
53
+ export const ColorNarmiPistachio300 = "#90BB78"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
54
+ export const ColorNarmiPistachio400 = "#B5E995"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
55
+ export const ColorNarmiPistachio500 = "#CCF0B4"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
56
+ export const ColorNarmiPistachio600 = "#DAF4C8"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
57
+ export const ColorNarmiPistachio700 = "#E9F8DE"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
58
+ export const ColorNarmiPistachio800 = "#F7FCF3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
59
+ export const ColorNarmiPistachio = "#B5E995"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
60
+ export const ColorNarmiCactus100 = "#324C23"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
61
+ export const ColorNarmiCactus200 = "#4B7137"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
62
+ export const ColorNarmiCactus300 = "#63964B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
63
+ export const ColorNarmiCactus400 = "#7FBC5B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
64
+ export const ColorNarmiCactus500 = "#99CA7A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
65
+ export const ColorNarmiCactus600 = "#B3D79A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
66
+ export const ColorNarmiCactus700 = "#CCE4BA"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
67
+ export const ColorNarmiCactus800 = "#E5F1DC"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
68
+ export const ColorNarmiCactus = "#7FBC5B"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
69
+ export const ColorNarmiSand100 = "#423329"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
70
+ export const ColorNarmiSand200 = "#684D41"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
71
+ export const ColorNarmiSand300 = "#947564"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
72
+ export const ColorNarmiSand400 = "#C4A08A"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
73
+ export const ColorNarmiSand500 = "#DCC1A3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
74
+ export const ColorNarmiSand600 = "#EED6C3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
75
+ export const ColorNarmiSand700 = "#F4E3D6"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
76
+ export const ColorNarmiSand800 = "#FCF0E9"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
77
+ export const ColorNarmiSand = "#DCC1A3"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
78
+ export const ColorNarmiAmethyst = "#5514B8"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
79
+ export const ColorNarmiBlack = "#333333"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
80
+ export const ColorNarmiGrey = "#6c6c6c"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
81
+ export const ColorNarmiMediumGrey = "#6c6c6c"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
82
+ export const ColorNarmiLightGrey = "#d9d9d9"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
83
+ export const ColorNarmiWhite = "#ffffff"; // @deprecated brand color — not part of the public token API; prefer semantic theme tokens (--theme-*).
84
84
  export const ColorSystemSuccessDark = "#027A48";
85
85
  export const ColorSystemSuccessLight = "#ECFDF3";
86
86
  export const ColorSystemWarnDark = "#B54708";
package/dist/types/Button/index.d.ts CHANGED
@@ -23,6 +23,8 @@ export interface ButtonProps {
23
23
  type?: "submit" | "button" | "reset";
24
24
  /** size variant of button */
25
25
  size?: "xs" | "s" | "m";
26
+ /** horizontal alignment of button label content */
27
+ labelAlign?: "start" | "center" | "end";
26
28
  /** Name of Narmi icon to place at the start of the label */
27
29
  startIcon?: IconName | null;
28
30
  /** Name of Narmi icon to place at the end of the label */
@@ -40,7 +42,8 @@ export interface ButtonProps {
40
42
  children?: React.ReactNode | string | undefined;
41
43
  /**
42
44
  * Will take up full width of its parent container when `true`.
43
- * The label will align start with flex grow.
45
+ * Full-width buttons align label content to `start` by default; use `labelAlign`
46
+ * to override that alignment.
44
47
  */
45
48
  isFullWidth?: boolean;
46
49
  [x: string]: unknown;
@@ -54,6 +57,6 @@ export interface ButtonProps {
54
57
  * This component supports rest props; any additional props on button will be
55
58
  * passed through to the root node of `Button`.
56
59
  */
57
- declare const Button: ({ isLoading, disabled, kind, type, size, startIcon, endIcon, testId, children, label, onClick, as, ariaLabel, isFullWidth, ...otherProps }: ButtonProps) => React.JSX.Element;
60
+ declare const Button: ({ isLoading, disabled, kind, type, size, labelAlign, startIcon, endIcon, testId, children, label, onClick, as, ariaLabel, isFullWidth, ...otherProps }: ButtonProps) => React.JSX.Element;
58
61
  export default Button;
59
62
  //# sourceMappingURL=index.d.ts.map
package/dist/types/Button/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,UAAU,GACV,OAAO,GACP,IAAI,CAAC;AAET,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,GAAI,4IAgBb,WAAW,sBAyEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,UAAU,GACV,OAAO,GACP,IAAI,CAAC;AAET,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,GAAI,wJAiBb,WAAW,sBAkFb,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@narmi/design_system",
3
- "version": "6.22.6",
3
+ "version": "6.23.0",
4
4
  "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
5
5
  "main": "dist/index.js",
6
6
  "style": "dist/style.css",