@sprucelabs/spruce-heartwood-utils 16.3.2 → 16.3.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.
Files changed (5) hide show
  1. package/build/esm/theming/ThemeManager.d.ts +9 -6
  2. package/build/esm/theming/ThemeManager.js +69 -51
  3. package/build/theming/ThemeManager.d.ts +9 -6
  4. package/build/theming/ThemeManager.js +70 -52
  5. package/package.json +1 -1
package/build/esm/theming/ThemeManager.d.ts CHANGED
@@ -1,11 +1,5 @@
1
1
  import { ThemeManager } from '@sprucelabs/heartwood-view-controllers';
2
2
  import { SpruceSchemas } from '@sprucelabs/spruce-core-schemas';
3
- declare type Theme = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Theme;
4
- export declare type SkillTheme = Theme & {
5
- name: string;
6
- slug: string;
7
- };
8
- export declare const heartwoodTheme: SkillTheme;
9
3
  export declare class ThemeManagerImpl implements ThemeManager {
10
4
  private static instance?;
11
5
  private currentTheme;
@@ -18,7 +12,16 @@ export declare class ThemeManagerImpl implements ThemeManager {
18
12
  getThemeSetCount(): number;
19
13
  resetThemeCount(): void;
20
14
  setTheme(theme: SkillTheme, shouldAnimate?: boolean): Promise<void>;
15
+ private applyBorderRadius;
16
+ private deleteProp;
21
17
  private setProps;
18
+ private setProp;
22
19
  reset(): Promise<void>;
23
20
  }
21
+ declare type Theme = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Theme;
22
+ export declare type SkillTheme = Theme & {
23
+ name: string;
24
+ slug: string;
25
+ };
26
+ export declare const heartwoodTheme: SkillTheme;
24
27
  export {};
package/build/esm/theming/ThemeManager.js CHANGED
@@ -18,55 +18,6 @@ var __rest = (this && this.__rest) || function (s, e) {
18
18
  }
19
19
  return t;
20
20
  };
21
- export const heartwoodTheme = {
22
- name: 'Heartwood',
23
- slug: 'heartwood',
24
- props: {
25
- color1: '#ffffff',
26
- color1Inverse: '#0f4c8a',
27
- color1InverseGradient: 'linear-gradient(to left, #24c6dc, #514a9d)',
28
- color2: '#757575',
29
- color2Compliment: '#757575',
30
- color2Transparent: 'rgba(0,0,0,0.6)',
31
- color2Inverse: 'white',
32
- color2InverseTransparent: 'rgba(255,255,255,0.9)',
33
- color3: '#303030',
34
- color3Compliment: '#a7a7a7',
35
- color3Inverse: '#fafafa',
36
- color4: '#626262',
37
- color4Compliment: 'rgba(15,76,138,0.1)',
38
- color4ComplimentTransparent: 'rgba(0,0,0,0.1)',
39
- color4Inverse: 'white',
40
- color4InverseCompliment: '#f1eeee',
41
- controlBarColor1: 'black',
42
- controlBarColor2: 'white',
43
- toolBeltColor2: '#f1f1f1',
44
- errorColor1: '#fff',
45
- errorColor1Inverse: '#FF3326',
46
- warningColor1: '#A16B14',
47
- warningColor1Inverse: '#F7D352',
48
- calendarEvents: {
49
- draftForegroundColor: '#fafafa',
50
- draftBackgroundColor: '#798fb9',
51
- tentativeForegroundColor: '#757575',
52
- tentativeBackgroundColor: '#97a5d3',
53
- upcomingForegroundColor: '#fafafa',
54
- upcomingBackgroundColor: '#4296f5',
55
- unavailableForegroundColor: '#757575',
56
- unavailableBackgroundColor: '#a3a3a3',
57
- blockedForegroundColor: '#fafafa',
58
- blockedBackgroundColor: '#383f4d',
59
- activeForegroundColor: '#3c3b3b',
60
- activeBackgroundColor: '#20d994',
61
- pastForegroundColor: '#fafafa',
62
- pastBackgroundColor: '#525252',
63
- warnForegroundColor: '#757575',
64
- warnBackgroundColor: '#f5d142',
65
- criticalForegroundColor: '#fafafa',
66
- criticalBackgroundColor: '#f54242',
67
- },
68
- },
69
- };
70
21
  export class ThemeManagerImpl {
71
22
  constructor(theme) {
72
23
  this.themeCount = 0;
@@ -100,7 +51,8 @@ export class ThemeManagerImpl {
100
51
  return __awaiter(this, void 0, void 0, function* () {
101
52
  this.themeCount++;
102
53
  this.currentTheme = theme;
103
- const _c = theme.props, { calendarEvents } = _c, rest = __rest(_c, ["calendarEvents"]);
54
+ const _c = theme.props, { calendarEvents, borderRadius } = _c, rest = __rest(_c, ["calendarEvents", "borderRadius"]);
55
+ this.applyBorderRadius(borderRadius);
104
56
  //@ts-ignore
105
57
  yield this.setProps(Object.entries(rest), shouldAnimate);
106
58
  if (calendarEvents) {
@@ -110,6 +62,19 @@ export class ThemeManagerImpl {
110
62
  .querySelector('meta[name="theme-color"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('content', (_b = theme.props.color1Inverse) !== null && _b !== void 0 ? _b : 'white');
111
63
  });
112
64
  }
65
+ applyBorderRadius(borderRadius) {
66
+ if (!borderRadius || borderRadius === 'rounded') {
67
+ this.deleteProp('borderRadiusSmall');
68
+ this.deleteProp('borderRadiusLarge');
69
+ }
70
+ else {
71
+ this.setProp('borderRadiusSmall', '0');
72
+ this.setProp('borderRadiusLarge', '0');
73
+ }
74
+ }
75
+ deleteProp(name) {
76
+ document.documentElement.style.removeProperty(`--${name}`);
77
+ }
113
78
  setProps(props, shouldAnimate) {
114
79
  return __awaiter(this, void 0, void 0, function* () {
115
80
  for (const prop of props) {
@@ -117,11 +82,14 @@ export class ThemeManagerImpl {
117
82
  yield new Promise((resolve) => setTimeout(resolve, 50));
118
83
  }
119
84
  if (typeof prop[0] === 'string') {
120
- document.documentElement.style.setProperty(`--${prop[0]}`, prop[1]);
85
+ this.setProp(prop[0], prop[1]);
121
86
  }
122
87
  }
123
88
  });
124
89
  }
90
+ setProp(name, value) {
91
+ document.documentElement.style.setProperty(`--${name}`, value);
92
+ }
125
93
  reset() {
126
94
  return __awaiter(this, void 0, void 0, function* () {
127
95
  if (this.currentTheme.slug !== 'heartwood') {
@@ -130,3 +98,53 @@ export class ThemeManagerImpl {
130
98
  });
131
99
  }
132
100
  }
101
+ export const heartwoodTheme = {
102
+ name: 'Heartwood',
103
+ slug: 'heartwood',
104
+ props: {
105
+ borderRadius: 'rounded',
106
+ color1: '#ffffff',
107
+ color1Inverse: '#0f4c8a',
108
+ color1InverseGradient: 'linear-gradient(to left, #24c6dc, #514a9d)',
109
+ color2: '#757575',
110
+ color2Compliment: '#757575',
111
+ color2Transparent: 'rgba(0,0,0,0.6)',
112
+ color2Inverse: 'white',
113
+ color2InverseTransparent: 'rgba(255,255,255,0.9)',
114
+ color3: '#303030',
115
+ color3Compliment: '#a7a7a7',
116
+ color3Inverse: '#fafafa',
117
+ color4: '#626262',
118
+ color4Compliment: 'rgba(15,76,138,0.1)',
119
+ color4ComplimentTransparent: 'rgba(0,0,0,0.1)',
120
+ color4Inverse: 'white',
121
+ color4InverseCompliment: '#f1eeee',
122
+ controlBarColor1: 'black',
123
+ controlBarColor2: 'white',
124
+ toolBeltColor2: '#f1f1f1',
125
+ errorColor1: '#fff',
126
+ errorColor1Inverse: '#FF3326',
127
+ warningColor1: '#A16B14',
128
+ warningColor1Inverse: '#F7D352',
129
+ calendarEvents: {
130
+ draftForegroundColor: '#fafafa',
131
+ draftBackgroundColor: '#798fb9',
132
+ tentativeForegroundColor: '#757575',
133
+ tentativeBackgroundColor: '#97a5d3',
134
+ upcomingForegroundColor: '#fafafa',
135
+ upcomingBackgroundColor: '#4296f5',
136
+ unavailableForegroundColor: '#757575',
137
+ unavailableBackgroundColor: '#a3a3a3',
138
+ blockedForegroundColor: '#fafafa',
139
+ blockedBackgroundColor: '#383f4d',
140
+ activeForegroundColor: '#3c3b3b',
141
+ activeBackgroundColor: '#20d994',
142
+ pastForegroundColor: '#fafafa',
143
+ pastBackgroundColor: '#525252',
144
+ warnForegroundColor: '#757575',
145
+ warnBackgroundColor: '#f5d142',
146
+ criticalForegroundColor: '#fafafa',
147
+ criticalBackgroundColor: '#f54242',
148
+ },
149
+ },
150
+ };
package/build/theming/ThemeManager.d.ts CHANGED
@@ -1,11 +1,5 @@
1
1
  import { ThemeManager } from '@sprucelabs/heartwood-view-controllers';
2
2
  import { SpruceSchemas } from '@sprucelabs/spruce-core-schemas';
3
- declare type Theme = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Theme;
4
- export declare type SkillTheme = Theme & {
5
- name: string;
6
- slug: string;
7
- };
8
- export declare const heartwoodTheme: SkillTheme;
9
3
  export declare class ThemeManagerImpl implements ThemeManager {
10
4
  private static instance?;
11
5
  private currentTheme;
@@ -18,7 +12,16 @@ export declare class ThemeManagerImpl implements ThemeManager {
18
12
  getThemeSetCount(): number;
19
13
  resetThemeCount(): void;
20
14
  setTheme(theme: SkillTheme, shouldAnimate?: boolean): Promise<void>;
15
+ private applyBorderRadius;
16
+ private deleteProp;
21
17
  private setProps;
18
+ private setProp;
22
19
  reset(): Promise<void>;
23
20
  }
21
+ declare type Theme = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Theme;
22
+ export declare type SkillTheme = Theme & {
23
+ name: string;
24
+ slug: string;
25
+ };
26
+ export declare const heartwoodTheme: SkillTheme;
24
27
  export {};
package/build/theming/ThemeManager.js CHANGED
@@ -11,56 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  return t;
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.ThemeManagerImpl = exports.heartwoodTheme = void 0;
15
- exports.heartwoodTheme = {
16
- name: 'Heartwood',
17
- slug: 'heartwood',
18
- props: {
19
- color1: '#ffffff',
20
- color1Inverse: '#0f4c8a',
21
- color1InverseGradient: 'linear-gradient(to left, #24c6dc, #514a9d)',
22
- color2: '#757575',
23
- color2Compliment: '#757575',
24
- color2Transparent: 'rgba(0,0,0,0.6)',
25
- color2Inverse: 'white',
26
- color2InverseTransparent: 'rgba(255,255,255,0.9)',
27
- color3: '#303030',
28
- color3Compliment: '#a7a7a7',
29
- color3Inverse: '#fafafa',
30
- color4: '#626262',
31
- color4Compliment: 'rgba(15,76,138,0.1)',
32
- color4ComplimentTransparent: 'rgba(0,0,0,0.1)',
33
- color4Inverse: 'white',
34
- color4InverseCompliment: '#f1eeee',
35
- controlBarColor1: 'black',
36
- controlBarColor2: 'white',
37
- toolBeltColor2: '#f1f1f1',
38
- errorColor1: '#fff',
39
- errorColor1Inverse: '#FF3326',
40
- warningColor1: '#A16B14',
41
- warningColor1Inverse: '#F7D352',
42
- calendarEvents: {
43
- draftForegroundColor: '#fafafa',
44
- draftBackgroundColor: '#798fb9',
45
- tentativeForegroundColor: '#757575',
46
- tentativeBackgroundColor: '#97a5d3',
47
- upcomingForegroundColor: '#fafafa',
48
- upcomingBackgroundColor: '#4296f5',
49
- unavailableForegroundColor: '#757575',
50
- unavailableBackgroundColor: '#a3a3a3',
51
- blockedForegroundColor: '#fafafa',
52
- blockedBackgroundColor: '#383f4d',
53
- activeForegroundColor: '#3c3b3b',
54
- activeBackgroundColor: '#20d994',
55
- pastForegroundColor: '#fafafa',
56
- pastBackgroundColor: '#525252',
57
- warnForegroundColor: '#757575',
58
- warnBackgroundColor: '#f5d142',
59
- criticalForegroundColor: '#fafafa',
60
- criticalBackgroundColor: '#f54242',
61
- },
62
- },
63
- };
14
+ exports.heartwoodTheme = exports.ThemeManagerImpl = void 0;
64
15
  class ThemeManagerImpl {
65
16
  constructor(theme) {
66
17
  this.themeCount = 0;
@@ -93,7 +44,8 @@ class ThemeManagerImpl {
93
44
  var _a, _b;
94
45
  this.themeCount++;
95
46
  this.currentTheme = theme;
96
- const _c = theme.props, { calendarEvents } = _c, rest = __rest(_c, ["calendarEvents"]);
47
+ const _c = theme.props, { calendarEvents, borderRadius } = _c, rest = __rest(_c, ["calendarEvents", "borderRadius"]);
48
+ this.applyBorderRadius(borderRadius);
97
49
  //@ts-ignore
98
50
  await this.setProps(Object.entries(rest), shouldAnimate);
99
51
  if (calendarEvents) {
@@ -102,16 +54,32 @@ class ThemeManagerImpl {
102
54
  (_a = document
103
55
  .querySelector('meta[name="theme-color"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('content', (_b = theme.props.color1Inverse) !== null && _b !== void 0 ? _b : 'white');
104
56
  }
57
+ applyBorderRadius(borderRadius) {
58
+ if (!borderRadius || borderRadius === 'rounded') {
59
+ this.deleteProp('borderRadiusSmall');
60
+ this.deleteProp('borderRadiusLarge');
61
+ }
62
+ else {
63
+ this.setProp('borderRadiusSmall', '0');
64
+ this.setProp('borderRadiusLarge', '0');
65
+ }
66
+ }
67
+ deleteProp(name) {
68
+ document.documentElement.style.removeProperty(`--${name}`);
69
+ }
105
70
  async setProps(props, shouldAnimate) {
106
71
  for (const prop of props) {
107
72
  if (shouldAnimate) {
108
73
  await new Promise((resolve) => setTimeout(resolve, 50));
109
74
  }
110
75
  if (typeof prop[0] === 'string') {
111
- document.documentElement.style.setProperty(`--${prop[0]}`, prop[1]);
76
+ this.setProp(prop[0], prop[1]);
112
77
  }
113
78
  }
114
79
  }
80
+ setProp(name, value) {
81
+ document.documentElement.style.setProperty(`--${name}`, value);
82
+ }
115
83
  async reset() {
116
84
  if (this.currentTheme.slug !== 'heartwood') {
117
85
  await this.setTheme(exports.heartwoodTheme);
@@ -119,4 +87,54 @@ class ThemeManagerImpl {
119
87
  }
120
88
  }
121
89
  exports.ThemeManagerImpl = ThemeManagerImpl;
90
+ exports.heartwoodTheme = {
91
+ name: 'Heartwood',
92
+ slug: 'heartwood',
93
+ props: {
94
+ borderRadius: 'rounded',
95
+ color1: '#ffffff',
96
+ color1Inverse: '#0f4c8a',
97
+ color1InverseGradient: 'linear-gradient(to left, #24c6dc, #514a9d)',
98
+ color2: '#757575',
99
+ color2Compliment: '#757575',
100
+ color2Transparent: 'rgba(0,0,0,0.6)',
101
+ color2Inverse: 'white',
102
+ color2InverseTransparent: 'rgba(255,255,255,0.9)',
103
+ color3: '#303030',
104
+ color3Compliment: '#a7a7a7',
105
+ color3Inverse: '#fafafa',
106
+ color4: '#626262',
107
+ color4Compliment: 'rgba(15,76,138,0.1)',
108
+ color4ComplimentTransparent: 'rgba(0,0,0,0.1)',
109
+ color4Inverse: 'white',
110
+ color4InverseCompliment: '#f1eeee',
111
+ controlBarColor1: 'black',
112
+ controlBarColor2: 'white',
113
+ toolBeltColor2: '#f1f1f1',
114
+ errorColor1: '#fff',
115
+ errorColor1Inverse: '#FF3326',
116
+ warningColor1: '#A16B14',
117
+ warningColor1Inverse: '#F7D352',
118
+ calendarEvents: {
119
+ draftForegroundColor: '#fafafa',
120
+ draftBackgroundColor: '#798fb9',
121
+ tentativeForegroundColor: '#757575',
122
+ tentativeBackgroundColor: '#97a5d3',
123
+ upcomingForegroundColor: '#fafafa',
124
+ upcomingBackgroundColor: '#4296f5',
125
+ unavailableForegroundColor: '#757575',
126
+ unavailableBackgroundColor: '#a3a3a3',
127
+ blockedForegroundColor: '#fafafa',
128
+ blockedBackgroundColor: '#383f4d',
129
+ activeForegroundColor: '#3c3b3b',
130
+ activeBackgroundColor: '#20d994',
131
+ pastForegroundColor: '#fafafa',
132
+ pastBackgroundColor: '#525252',
133
+ warnForegroundColor: '#757575',
134
+ warnBackgroundColor: '#f5d142',
135
+ criticalForegroundColor: '#fafafa',
136
+ criticalBackgroundColor: '#f54242',
137
+ },
138
+ },
139
+ };
122
140
  //# sourceMappingURL=ThemeManager.js.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sprucelabs/spruce-heartwood-utils",
3
3
  "description": "Heartwood Utilities",
4
- "version": "16.3.2",
4
+ "version": "16.3.4",
5
5
  "skill": {
6
6
  "namespace": "heartwood"
7
7
  },