@omnia/velcron 8.0.299-dev → 8.0.301-dev

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.
@@ -5,26 +5,42 @@ import { TypographyBlueprint } from "./Typography";
5
5
  import { ThemeBase } from "./ThemeBase";
6
6
  import { VelcronAppDefinition, VelcronRendererResolverReference } from "../velcron";
7
7
  import { guid } from "../Guid";
8
+ export interface BlueprintStrategy {
9
+ buttons: {
10
+ primary: ButtonBlueprint;
11
+ basic: ButtonBlueprint;
12
+ accent: ButtonBlueprint;
13
+ warn: ButtonBlueprint;
14
+ link: ButtonBlueprint;
15
+ close: ButtonBlueprint;
16
+ };
17
+ }
8
18
  export interface BoxDimensions extends Spacing {
9
19
  }
10
20
  export interface Blueprints {
11
21
  name?: string;
12
22
  }
13
- export type BlueprintVariant = "primary" | "secondary" | "variant1" | "variant2" | "variant3";
23
+ export type BlueprintVariant = "primary" | "secondary" | "variant1" | "variant2" | "variant3" | "variant4";
14
24
  export interface ChromeBlueprints extends Blueprints, BlueprintsReference {
15
25
  primary: ChromeBlueprint;
16
26
  variant1?: ChromeBlueprint;
17
27
  variant2?: ChromeBlueprint;
18
28
  variant3?: ChromeBlueprint;
19
29
  }
20
- export type ContainerVariant = "variant1" | "variant2" | "variant3" | "variant4";
21
- export interface ContainerBlueprints extends Blueprints, BlueprintsReference {
22
- variant1?: ContainerBlueprint;
23
- variant2?: ContainerBlueprint;
24
- variant3?: ContainerBlueprint;
25
- variant4?: ContainerBlueprint;
30
+ export interface VariantBlueprints<T> extends Blueprints, BlueprintsReference {
31
+ variant1?: T;
32
+ variant2?: T;
33
+ variant3?: T;
34
+ variant4?: T;
35
+ }
36
+ export interface HeaderBlueprint extends Blueprint {
37
+ viewTemplate?: VelcronRendererResolverReference;
38
+ }
39
+ export interface HeaderBlueprints extends VariantBlueprints<HeaderBlueprint>, Blueprints, BlueprintsReference {
40
+ }
41
+ export interface ContainerFillBlueprints extends VariantBlueprints<ContainerFillBlueprint>, Blueprints, BlueprintsReference {
26
42
  }
27
- export interface ContainerBlueprint extends Blueprints, BlueprintsReference {
43
+ export interface ContainerFillBlueprint extends Blueprints, BlueprintsReference {
28
44
  name?: string;
29
45
  background?: BackgroundDefinition;
30
46
  }
@@ -50,12 +66,14 @@ export interface ChromeBlueprint {
50
66
  };
51
67
  }
52
68
  export interface ComponentBlueprints extends ThemeBase {
69
+ strategy?: "MD2" | "MD3";
53
70
  buttons?: ButtonBlueprints;
54
71
  tabs?: TabsBlueprints;
55
72
  blocks?: ChromeBlueprints;
56
73
  icons?: IconBlueprints;
57
74
  chips?: ChipBlueprint;
58
- containers?: ContainerBlueprints;
75
+ fills?: ContainerFillBlueprints;
76
+ headers?: HeaderBlueprints;
59
77
  }
60
78
  export interface SpacingBlueprint {
61
79
  l: SpacingDefinition;
@@ -83,7 +101,7 @@ export interface IconBlueprints extends Blueprints {
83
101
  l?: IconBlueprint;
84
102
  xl?: IconBlueprint;
85
103
  }
86
- export type ButtonTypes = "primary" | "basic" | "accent1" | "warn" | "link" | "close" | "variant1" | "variant2" | "variant3" | "variant4";
104
+ export type ButtonTypes = "primary" | "basic" | "accent1" | "warn" | "link" | "close" | "variant1" | "variant2" | "variant3" | "variant4" | "variant5" | "variant6" | "variant7" | "variant8";
87
105
  export type ButtonBlueprintType = "text" | "icon";
88
106
  export interface ButtonBlueprintVariant {
89
107
  type: ButtonTypes;
@@ -98,7 +116,7 @@ export interface ButtonBlueprint extends Blueprint {
98
116
  viewTemplate?: VelcronRendererResolverReference;
99
117
  }
100
118
  export interface ButtonBlueprints extends Blueprints {
101
- text: {
119
+ text?: {
102
120
  primary?: ButtonBlueprint;
103
121
  basic?: ButtonBlueprint;
104
122
  accent1?: ButtonBlueprint;
@@ -109,8 +127,12 @@ export interface ButtonBlueprints extends Blueprints {
109
127
  variant2?: ButtonBlueprint;
110
128
  variant3?: ButtonBlueprint;
111
129
  variant4?: ButtonBlueprint;
130
+ variant5?: ButtonBlueprint;
131
+ variant6?: ButtonBlueprint;
132
+ variant7?: ButtonBlueprint;
133
+ variant8?: ButtonBlueprint;
112
134
  };
113
- icon: {
135
+ icon?: {
114
136
  primary?: ButtonBlueprint;
115
137
  basic?: ButtonBlueprint;
116
138
  accent1?: ButtonBlueprint;
@@ -121,6 +143,10 @@ export interface ButtonBlueprints extends Blueprints {
121
143
  variant2?: ButtonBlueprint;
122
144
  variant3?: ButtonBlueprint;
123
145
  variant4?: ButtonBlueprint;
146
+ variant5?: ButtonBlueprint;
147
+ variant6?: ButtonBlueprint;
148
+ variant7?: ButtonBlueprint;
149
+ variant8?: ButtonBlueprint;
124
150
  };
125
151
  }
126
152
  export interface TabsBlueprints extends Blueprints {
@@ -10,10 +10,6 @@ export interface ColorTypeResult<resultType> {
10
10
  baseTone: resultType;
11
11
  onBase: resultType;
12
12
  onBaseTone: resultType;
13
- container: resultType;
14
- containerTone: resultType;
15
- onContainer: resultType;
16
- onContainerTone: resultType;
17
13
  colorType: (colorType: string) => resultType;
18
14
  }
19
15
  export interface ColorDefinition {
@@ -113,9 +109,7 @@ export declare enum ColorSchemaTypes {
113
109
  export type ColorType = keyof typeof ColorTypes;
114
110
  export declare enum ColorTypes {
115
111
  base = "base",
116
- onBase = "onBase",
117
- container = "container",
118
- onContainer = "onContainer"
112
+ onBase = "onBase"
119
113
  }
120
114
  export interface ThemedColorValue {
121
115
  colorType: ColorType;
@@ -149,7 +143,7 @@ export interface FillDefinition {
149
143
  colors: Array<ColorValue | ColorGradientValue>;
150
144
  acrylic?: boolean;
151
145
  }
152
- export type FillVariant = "variant1" | "variant2" | "variant3";
146
+ export type FillVariant = "variant1" | "variant2" | "variant3" | "variant4";
153
147
  export type FillDefinitionValue = FillVariant | FillDefinition | ColorValue;
154
148
  export interface LinearGradientFillDefinition extends FillDefinition {
155
149
  degrees: number;
@@ -268,6 +262,4 @@ export interface ThemeDefinition extends ThemeBase {
268
262
  export interface ColorSchema extends ThemeBase {
269
263
  base: ColorDefinition;
270
264
  onBase: ColorDefinition;
271
- container: ColorDefinition;
272
- onContainer: ColorDefinition;
273
265
  }
@@ -25,8 +25,6 @@ var ColorTypes;
25
25
  (function (ColorTypes) {
26
26
  ColorTypes["base"] = "base";
27
27
  ColorTypes["onBase"] = "onBase";
28
- ColorTypes["container"] = "container";
29
- ColorTypes["onContainer"] = "onContainer";
30
28
  })(ColorTypes || (exports.ColorTypes = ColorTypes = {}));
31
29
  var RadialGradientShapes;
32
30
  (function (RadialGradientShapes) {
@@ -1,11 +1,8 @@
1
- import { ContainerBlueprint, ContainerVariant } from "./Blueprints";
1
+ import { ContainerFillBlueprint, BlueprintVariant } from "./Blueprints";
2
2
  import { ColorDefinition, ColorSchema, ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes } from "./ThemeDefinition";
3
3
  export declare function useThemeMethods(getThemeDefinition: () => any): {
4
- containerBlueprint: (type: ContainerVariant | ContainerBlueprint | string) => any;
4
+ containerBlueprint: (type: BlueprintVariant | ContainerFillBlueprint | string) => any;
5
5
  colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => ColorSchema;
6
6
  color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
7
7
  colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => ColorDefinition;
8
- complementaryColorType: (colorType: ColorTypes | ColorType) => ColorTypes;
9
- complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
10
- complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => ColorDefinition;
11
8
  };
@@ -4,21 +4,21 @@ exports.useThemeMethods = useThemeMethods;
4
4
  const ThemeDefinition_1 = require("./ThemeDefinition");
5
5
  // temp change ThemeDefinitionInstance to any because fx/shared can't reference higher level fx/ux
6
6
  function useThemeMethods(getThemeDefinition) {
7
- function containerBlueprint(type) {
7
+ function containerFillBlueprint(type) {
8
8
  if (typeof type !== "string") {
9
9
  return type;
10
10
  }
11
11
  if (type === "variant1") {
12
- return getThemeDefinition()?.components?.containers?.variant1;
12
+ return getThemeDefinition()?.components?.fills?.variant1;
13
13
  }
14
14
  if (type === "variant2") {
15
- return getThemeDefinition()?.components?.containers?.variant2;
15
+ return getThemeDefinition()?.components?.fills?.variant2;
16
16
  }
17
17
  if (type === "variant3") {
18
- return getThemeDefinition()?.components?.containers?.variant3;
18
+ return getThemeDefinition()?.components?.fills?.variant3;
19
19
  }
20
20
  if (type === "variant4") {
21
- return getThemeDefinition()?.components?.containers?.variant4;
21
+ return getThemeDefinition()?.components?.fills?.variant4;
22
22
  }
23
23
  return null;
24
24
  }
@@ -50,9 +50,18 @@ function useThemeMethods(getThemeDefinition) {
50
50
  else if (colorSchemaType === ThemeDefinition_1.ColorSchemaTypes.neutral) {
51
51
  return getThemeDefinition().colors.neutral;
52
52
  }
53
+ else if (colorSchemaType === ThemeDefinition_1.ColorSchemaTypes.notification) {
54
+ return getThemeDefinition().colors.notification;
55
+ }
53
56
  else if (colorSchemaType === ThemeDefinition_1.ColorSchemaTypes.error) {
54
57
  return getThemeDefinition().colors.error;
55
58
  }
59
+ else if (colorSchemaType === ThemeDefinition_1.ColorSchemaTypes.info) {
60
+ return getThemeDefinition().colors.info;
61
+ }
62
+ else if (colorSchemaType === ThemeDefinition_1.ColorSchemaTypes.warning) {
63
+ return getThemeDefinition().colors.warning;
64
+ }
56
65
  else if (colorSchemaType === ThemeDefinition_1.ColorSchemaTypes.success) {
57
66
  return getThemeDefinition().colors.success;
58
67
  }
@@ -66,12 +75,6 @@ function useThemeMethods(getThemeDefinition) {
66
75
  else if (colorType === ThemeDefinition_1.ColorTypes.onBase) {
67
76
  return mappedColorSchema.onBase.color;
68
77
  }
69
- else if (colorType === ThemeDefinition_1.ColorTypes.container) {
70
- return mappedColorSchema.container.color;
71
- }
72
- else if (colorType === ThemeDefinition_1.ColorTypes.onContainer) {
73
- return mappedColorSchema.onContainer.color;
74
- }
75
78
  return colorType;
76
79
  }
77
80
  function colorDefinition(colorSchemaType, colorType) {
@@ -82,44 +85,12 @@ function useThemeMethods(getThemeDefinition) {
82
85
  else if (colorType === ThemeDefinition_1.ColorTypes.onBase) {
83
86
  return mappedColorSchema.onBase;
84
87
  }
85
- else if (colorType === ThemeDefinition_1.ColorTypes.container) {
86
- return mappedColorSchema.container;
87
- }
88
- else if (colorType === ThemeDefinition_1.ColorTypes.onContainer) {
89
- return mappedColorSchema.onContainer;
90
- }
91
88
  return mappedColorSchema.base;
92
89
  }
93
- function complementaryColorType(colorType) {
94
- if (colorType === ThemeDefinition_1.ColorTypes.base) {
95
- return ThemeDefinition_1.ColorTypes.onBase;
96
- }
97
- else if (colorType === ThemeDefinition_1.ColorTypes.onBase) {
98
- return ThemeDefinition_1.ColorTypes.base;
99
- }
100
- else if (colorType === ThemeDefinition_1.ColorTypes.container) {
101
- return ThemeDefinition_1.ColorTypes.onContainer;
102
- }
103
- else if (colorType === ThemeDefinition_1.ColorTypes.onContainer) {
104
- return ThemeDefinition_1.ColorTypes.container;
105
- }
106
- return colorType;
107
- }
108
- function complementaryColor(colorSchemaType, colorType) {
109
- const matchingColorType = complementaryColorType(colorType);
110
- return color(colorSchemaType, matchingColorType);
111
- }
112
- function complementaryColorDefinition(colorSchemaType, colorType) {
113
- const matchingColorType = complementaryColorType(colorType);
114
- return colorDefinition(colorSchemaType, matchingColorType);
115
- }
116
90
  return {
117
- containerBlueprint,
91
+ containerBlueprint: containerFillBlueprint,
118
92
  colorSchema,
119
93
  color,
120
94
  colorDefinition,
121
- complementaryColorType,
122
- complementaryColor,
123
- complementaryColorDefinition,
124
95
  };
125
96
  }
@@ -1,4 +1,4 @@
1
- import { ContainerBlueprint, ContainerVariant, IFontAwesomeIcon, VelcronColorStyling, VelcronOverflowValues } from "@omnia/fx-models";
1
+ import { ContainerFillBlueprint, BlueprintVariant, IFontAwesomeIcon, VelcronColorStyling, VelcronOverflowValues } from "@omnia/fx-models";
2
2
  import { DynamicState } from "../DynamicState";
3
3
  import { VelcronEvent, VelcronOnActiveEvent, VelcronOnEditModeEvent, VelcronOnLoadEvent, VelcronOnPersistingStateEvent, VelcronOnSavingEvent } from "./VelcronEvents";
4
4
  import { AnimationOptionsWithOverrides, VariantDefinition, Variants } from "motion";
@@ -88,7 +88,7 @@ export interface VelcronAppDefinition<TState extends DynamicState = DynamicState
88
88
  version?: string;
89
89
  name?: string;
90
90
  lazy?: VelcronLazyApp;
91
- blueprint?: ContainerBlueprint | ContainerVariant;
91
+ blueprint?: ContainerFillBlueprint | BlueprintVariant;
92
92
  body?: Array<VelcronDefinition>;
93
93
  events?: VelcronOnLoadEvent & VelcronOnEditModeEvent & VelcronOnSavingEvent & VelcronOnPersistingStateEvent & VelcronOnActiveEvent;
94
94
  actions?: {
@@ -1,4 +1,4 @@
1
- import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, VelcronEditor, ContainerBlueprint, BackgroundDefinition, ContainerVariant, IconBlueprint, ButtonBlueprint } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
1
+ import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, VelcronEditor, ContainerFillBlueprint, BackgroundDefinition, BlueprintVariant, IconBlueprint, ButtonBlueprint } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
2
2
  import { VelcronComponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
3
3
  import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
4
4
  import { DynamicState, VelcronDefinition, VelcronEffects, useVelcronThemingStore } from "..";
@@ -217,7 +217,7 @@ export interface VelcronFlexRowDefinition extends VelcronDefinition, VelcronColo
217
217
  direction?: VelcronBindableProp<"row" | "row-reverse">;
218
218
  position?: VelcronBindableProp<VelcronPosition>;
219
219
  zIndex?: VelcronBindableProp<number>;
220
- blueprint?: ContainerBlueprint | ContainerVariant;
220
+ blueprint?: ContainerFillBlueprint | BlueprintVariant;
221
221
  background?: BackgroundDefinition;
222
222
  wrap?: boolean;
223
223
  gapX?: number | string;
@@ -238,7 +238,7 @@ export interface VelcronFlexColumnDefinition extends VelcronDefinition, VelcronC
238
238
  type: "column";
239
239
  events?: VelcronOnPressEvent;
240
240
  grow?: number;
241
- blueprint?: ContainerBlueprint | ContainerVariant;
241
+ blueprint?: ContainerFillBlueprint | BlueprintVariant;
242
242
  alignY?: VelcronVerticalAlignments;
243
243
  position?: VelcronPosition;
244
244
  absolute?: VelcronSpacing;
@@ -1,4 +1,4 @@
1
- import { BackgroundDefinition, ContainerBlueprint, ContainerVariant, TextBlueprint, TypographySize, TypographyType, VelcronSpacing } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
1
+ import { BackgroundDefinition, ContainerFillBlueprint, BlueprintVariant, TextBlueprint, TypographySize, TypographyType, VelcronSpacing } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
2
2
  import { VelcronImageRatios } from "./VelcronDefinitions";
3
3
  export interface VelcronState {
4
4
  states?: {
@@ -16,7 +16,7 @@ export interface VelcronState {
16
16
  alignY?: string;
17
17
  colorSchemaType?: string;
18
18
  spacing?: VelcronSpacing;
19
- blueprint?: ContainerBlueprint | ContainerVariant;
19
+ blueprint?: ContainerFillBlueprint | BlueprintVariant;
20
20
  background?: BackgroundDefinition;
21
21
  };
22
22
  grid?: VelcronGridState;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@omnia/velcron",
3
3
  "license": "MIT",
4
- "version": "8.0.299-dev",
4
+ "version": "8.0.301-dev",
5
5
  "description": "Provide Omnia Velcron Stuffs.",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -27,8 +27,6 @@ exports.useVelcronColorSchemaStore = (0, _1.defineVelcronStore)("ColorSchemaStor
27
27
  return {
28
28
  base: state.base,
29
29
  onBase: state.onBase,
30
- container: state.container,
31
- onContainer: state.onContainer,
32
30
  name: state.name,
33
31
  };
34
32
  }
@@ -1,19 +1,16 @@
1
- import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant, ResolvedThemeDefinition, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
1
+ import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerFillBlueprint, BlueprintVariant, ResolvedThemeDefinition, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
2
2
  export declare const useVelcronThemingStore: (newStateWithName?: string) => {
3
3
  state: {
4
4
  currentTheme: ResolvedThemeDefinition;
5
5
  };
6
6
  get: {
7
7
  componentBlueprints: () => void;
8
- containerBlueprint: (type: ContainerVariant | ContainerBlueprint | string) => any;
8
+ containerBlueprint: (type: BlueprintVariant | ContainerFillBlueprint | string) => any;
9
9
  colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => import("..").ColorSchema;
10
10
  spacing: () => import("..").SpacingBlueprint;
11
11
  typography: (typographyType: TypographyTypes | TypographyType, size: TypographySizes | TypographySize) => any;
12
12
  color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
13
13
  colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => import("..").ColorDefinition;
14
- complementaryColorType: (colorType: ColorTypes | ColorType) => ColorTypes;
15
- complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
16
- complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => import("..").ColorDefinition;
17
14
  currentTheme: () => ResolvedThemeDefinition;
18
15
  };
19
16
  actions: {
@@ -43,15 +43,6 @@ exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("Velcron
43
43
  colorDefinition: (colorSchemaType, colorType) => {
44
44
  return (0, __1.useThemeMethods)(() => state.currentTheme).colorDefinition(colorSchemaType, colorType);
45
45
  },
46
- complementaryColorType: (colorType) => {
47
- return (0, __1.useThemeMethods)(() => state.currentTheme).complementaryColorType(colorType);
48
- },
49
- complementaryColor: (colorSchemaType, colorType) => {
50
- return (0, __1.useThemeMethods)(() => state.currentTheme).complementaryColor(colorSchemaType, colorType);
51
- },
52
- complementaryColorDefinition: (colorSchemaType, colorType) => {
53
- return (0, __1.useThemeMethods)(() => state.currentTheme).complementaryColorDefinition(colorSchemaType, colorType);
54
- },
55
46
  currentTheme: () => {
56
47
  return this.currentTheme.state;
57
48
  }