@servicetitan/design-system 11.2.0 → 11.3.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 (16) hide show
  1. package/dist/global/index.css +1 -1
  2. package/dist/global/version.css +1 -1
  3. package/dist/system-light.css +1 -1
  4. package/dist/system-light.min.css +1 -1
  5. package/dist/system.css +1 -1
  6. package/dist/system.min.css +1 -1
  7. package/dist/utilities/ThemeProvider.d.ts +7 -2
  8. package/dist/utilities/ThemeProvider.js +10 -5
  9. package/dist/utilities/ThemeProvider.js.map +1 -1
  10. package/dist/utilities/index.d.ts +1 -0
  11. package/dist/utilities/index.js +1 -0
  12. package/dist/utilities/index.js.map +1 -1
  13. package/dist/utilities/usePrefersColorScheme.d.ts +5 -0
  14. package/dist/utilities/usePrefersColorScheme.js +22 -0
  15. package/dist/utilities/usePrefersColorScheme.js.map +1 -0
  16. package/package.json +9 -9
package/dist/utilities/ThemeProvider.d.ts CHANGED
@@ -1,3 +1,8 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
+ import { theme as iTheme } from '@servicetitan/anvil-themes';
2
3
  export declare const CSSVariables: FC<any>;
3
- export declare const ThemeProvider: FC<any>;
4
+ export interface themeProviderProps {
5
+ theme?: iTheme;
6
+ children?: React.ReactNode;
7
+ }
8
+ export declare const ThemeProvider: FC<themeProviderProps>;
package/dist/utilities/ThemeProvider.js CHANGED
@@ -9,8 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import React from 'react';
13
- import { light } from '@servicetitan/anvil-themes';
12
+ import React, { useEffect, useState } from 'react';
13
+ import { light, dark } from '@servicetitan/anvil-themes';
14
+ import { usePrefersColorScheme } from './usePrefersColorScheme';
14
15
  function flattenObj(obj, parent, res = {}) {
15
16
  function capitalizeFirstLetter(string) {
16
17
  return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
@@ -36,8 +37,12 @@ export const CSSVariables = (_a) => {
36
37
  }
37
38
  return React.createElement("div", Object.assign({ style: css }, props));
38
39
  };
39
- export const ThemeProvider = (_a) => {
40
- var { theme = light } = _a, props = __rest(_a, ["theme"]);
41
- return (React.createElement(CSSVariables, Object.assign({ theme: theme }, props)));
40
+ export const ThemeProvider = ({ theme, children }) => {
41
+ const { theme: systemPreferred } = usePrefersColorScheme(light, dark);
42
+ const [currentTheme, setCurrentTheme] = useState(light);
43
+ useEffect(() => {
44
+ theme ? setCurrentTheme(theme) : setCurrentTheme(systemPreferred);
45
+ }, [theme, systemPreferred]);
46
+ return React.createElement(CSSVariables, { theme: currentTheme }, children);
42
47
  };
43
48
  //# sourceMappingURL=ThemeProvider.js.map
package/dist/utilities/ThemeProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/utilities/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,SAAS,UAAU,CAAC,GAAQ,EAAE,MAAY,EAAE,MAAW,EAAE;IACxD,SAAS,qBAAqB,CAAC,MAAc;QAC5C,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,CAAC;IACD,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACtB,MAAM,QAAQ,GAAG,MAAM;YACtB,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,CAAC;YAC1C,CAAC,CAAC,GAAG,CAAC;QACP,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACjC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACN,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;SACzB;KACD;IACD,OAAO,GAAG,CAAC;AACZ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAY,CAAC,EAAmB,EAAE,EAAE;QAAvB,EAAE,KAAK,OAAY,EAAP,KAAK,cAAjB,SAAmB,CAAF;IACtD,MAAM,GAAG,GAAQ,EAAE,CAAC;IACpB,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;QAC9D,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;KACzB;IAED,OAAO,2CAAK,KAAK,EAAE,GAAG,IAAM,KAAK,EAAI,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAY,CAAC,EAA2B,EAAE,EAAE;QAA/B,EAAE,KAAK,GAAG,KAAK,OAAY,EAAP,KAAK,cAAzB,SAA2B,CAAF;IAAO,OAAA,CACtE,oBAAC,YAAY,kBAAC,KAAK,EAAE,KAAK,IAAM,KAAK,EAAI,CACzC,CAAA;CAAA,CAAC"}
1
+ {"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/utilities/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAmB,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,SAAS,UAAU,CAAC,GAAQ,EAAE,MAAY,EAAE,MAAW,EAAE;IACxD,SAAS,qBAAqB,CAAC,MAAc;QAC5C,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,CAAC;IACD,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACtB,MAAM,QAAQ,GAAG,MAAM;YACtB,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,CAAC;YAC1C,CAAC,CAAC,GAAG,CAAC;QACP,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACjC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACN,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;SACzB;KACD;IACD,OAAO,GAAG,CAAC;AACZ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAY,CAAC,EAAmB,EAAE,EAAE;QAAvB,EAAE,KAAK,OAAY,EAAP,KAAK,cAAjB,SAAmB,CAAF;IACtD,MAAM,GAAG,GAAQ,EAAE,CAAC;IACpB,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;QAC9D,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;KACzB;IAED,OAAO,2CAAK,KAAK,EAAE,GAAG,IAAM,KAAK,EAAI,CAAC;AACvC,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC;IAE7B,OAAO,oBAAC,YAAY,IAAC,KAAK,EAAE,YAAY,IAAG,QAAQ,CAAgB,CAAC;AACrE,CAAC,CAAC"}
package/dist/utilities/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export * from './keyCodes';
11
11
  export * from './OverlayContext';
12
12
  export * from './SemanticUtils';
13
13
  export * from './useStorybookFigmaAddon';
14
+ export * from './usePrefersColorScheme';
14
15
  export * from './wrapChildren';
15
16
  export * from './wrapWithComponent';
16
17
  export * from './ThemeProvider';
package/dist/utilities/index.js CHANGED
@@ -11,6 +11,7 @@ export * from './keyCodes';
11
11
  export * from './OverlayContext';
12
12
  export * from './SemanticUtils';
13
13
  export * from './useStorybookFigmaAddon';
14
+ export * from './usePrefersColorScheme';
14
15
  export * from './wrapChildren';
15
16
  export * from './wrapWithComponent';
16
17
  export * from './ThemeProvider';
package/dist/utilities/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}
package/dist/utilities/usePrefersColorScheme.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { theme } from '@servicetitan/anvil-themes';
2
+ export declare const usePrefersColorScheme: (light?: theme, dark?: theme) => {
3
+ theme: theme;
4
+ mode: string;
5
+ };
package/dist/utilities/usePrefersColorScheme.js ADDED
@@ -0,0 +1,22 @@
1
+ import { useEffect, useState } from 'react';
2
+ export const usePrefersColorScheme = (light, dark) => {
3
+ const [systemPrefersDark, setSystemPrefersDark] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
4
+ useEffect(() => {
5
+ function isSystemDark(event) {
6
+ setSystemPrefersDark(event.matches);
7
+ }
8
+ window
9
+ .matchMedia('(prefers-color-scheme: dark)')
10
+ .addEventListener('change', isSystemDark);
11
+ return () => {
12
+ window
13
+ .matchMedia('(prefers-color-scheme: dark)')
14
+ .removeEventListener('change', isSystemDark);
15
+ };
16
+ }, []);
17
+ return {
18
+ theme: systemPrefersDark ? dark : light,
19
+ mode: systemPrefersDark ? 'dark' : 'light',
20
+ };
21
+ };
22
+ //# sourceMappingURL=usePrefersColorScheme.js.map
package/dist/utilities/usePrefersColorScheme.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePrefersColorScheme.js","sourceRoot":"","sources":["../../src/utilities/usePrefersColorScheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;IACpE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACzD,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CACzD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,SAAS,YAAY,CAAC,KAAU;YAC/B,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;QAED,MAAM;aACJ,UAAU,CAAC,8BAA8B,CAAC;aAC1C,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE3C,OAAO,GAAG,EAAE;YACX,MAAM;iBACJ,UAAU,CAAC,8BAA8B,CAAC;iBAC1C,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC/C,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACN,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;QACvC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC1C,CAAC;AACH,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/design-system",
3
- "version": "11.2.0",
3
+ "version": "11.3.0",
4
4
  "description": "",
5
5
  "homepage": "https://anvil.servicetitan.com",
6
6
  "repository": {
@@ -73,15 +73,15 @@
73
73
  "@progress/kendo-react-treeview": "~4.10.0",
74
74
  "@react-aria/focus": "^3.2.3",
75
75
  "@react-hook/window-size": "^3.0.7",
76
- "@servicetitan/anvil-fonts": "^11.2.0",
77
- "@servicetitan/anvil-icons": "^11.2.0",
78
- "@servicetitan/anvil-themes": "^11.2.0",
79
- "@servicetitan/tokens": "^11.2.0",
76
+ "@servicetitan/anvil-fonts": "^11.3.0",
77
+ "@servicetitan/anvil-icons": "^11.3.0",
78
+ "@servicetitan/anvil-themes": "^11.3.0",
79
+ "@servicetitan/tokens": "^11.3.0",
80
80
  "classnames": "2.3.1",
81
81
  "framer-motion": "4.1.17",
82
82
  "memoize-one": "5.2.1",
83
83
  "moment": "2.29.1",
84
- "nanoid": "3.1.25",
84
+ "nanoid": "3.1.31",
85
85
  "react-animate-height": "^2.0.22",
86
86
  "react-focus-lock": "^2.5.2",
87
87
  "react-input-mask": "2.0.4",
@@ -97,9 +97,9 @@
97
97
  "react-dom": "^16 || ^17"
98
98
  },
99
99
  "devDependencies": {
100
- "@lib/semantic": "^11.2.0",
100
+ "@lib/semantic": "^11.3.0",
101
101
  "@progress/kendo-theme-default": "4.42.0",
102
- "@servicetitan/anvil-css-utilities": "^11.2.0",
102
+ "@servicetitan/anvil-css-utilities": "^11.3.0",
103
103
  "@testing-library/jest-dom": "5.14.1",
104
104
  "@testing-library/react": "12.1.0",
105
105
  "@testing-library/user-event": "13.2.1",
@@ -126,5 +126,5 @@
126
126
  "ts-jest": "27.0.5",
127
127
  "typescript": "4.4.3"
128
128
  },
129
- "gitHead": "4f1b2aae8a247b69896c39289a5da3f684272c38"
129
+ "gitHead": "c041f93c9c768462696fb1f0bd1250f89bfea156"
130
130
  }