@shopgate/engage 7.32.0-beta.6 → 7.32.0-beta.7

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 (83) hide show
  1. package/account/components/Profile/ProfileAddressCard.d.ts.map +1 -1
  2. package/account/components/Profile/ProfileAddressCard.js +1 -0
  3. package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts +2 -2
  4. package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts.map +1 -1
  5. package/cart/components/CartItems/CartItems.js +8 -10
  6. package/cart/components/CartItems/CartItemsSubstitution.js +3 -2
  7. package/components/Card/Card.d.ts +27 -0
  8. package/components/Card/Card.d.ts.map +1 -0
  9. package/components/Card/Card.js +57 -0
  10. package/components/Card/index.d.ts +4 -0
  11. package/components/Card/index.d.ts.map +1 -0
  12. package/components/Card/index.js +2 -0
  13. package/components/Card/spec.d.ts +2 -0
  14. package/components/Card/spec.d.ts.map +1 -0
  15. package/components/Card/spec.js +128 -0
  16. package/components/Card/useCardAppearance.d.ts +11 -0
  17. package/components/Card/useCardAppearance.d.ts.map +1 -0
  18. package/components/Card/useCardAppearance.js +22 -0
  19. package/components/Paper/Paper.d.ts +49 -0
  20. package/components/Paper/Paper.d.ts.map +1 -0
  21. package/components/Paper/Paper.js +64 -0
  22. package/components/Paper/index.d.ts +3 -0
  23. package/components/Paper/index.d.ts.map +1 -0
  24. package/components/Paper/index.js +1 -0
  25. package/components/Paper/spec.d.ts +2 -0
  26. package/components/Paper/spec.d.ts.map +1 -0
  27. package/components/Paper/spec.js +131 -0
  28. package/components/RadioCard/RadioCard.d.ts.map +1 -1
  29. package/components/RadioCard/RadioCard.js +2 -1
  30. package/components/index.d.ts +4 -1
  31. package/components/index.d.ts.map +1 -1
  32. package/components/index.js +3 -2
  33. package/favorites/components/Item/Item.d.ts +1 -1
  34. package/orders/components/OrderHistory/OrderHistoryList.d.ts.map +1 -1
  35. package/orders/components/OrderHistory/OrderHistoryList.js +8 -9
  36. package/orders/components/OrderHistory/OrderHistoryTable.d.ts.map +1 -1
  37. package/orders/components/OrderHistory/OrderHistoryTable.js +4 -0
  38. package/package.json +7 -7
  39. package/product/components/ProductCard/index.js +27 -14
  40. package/product/components/ProductGrid/components/Item/components/ItemDetails/index.js +6 -3
  41. package/product/components/ProductGrid/components/Item/components/ItemName/index.js +5 -1
  42. package/product/components/ProductGrid/components/Item/components/ItemName/spec.js +19 -1
  43. package/product/components/ProductGrid/components/Item/index.js +9 -1
  44. package/product/components/ProductSlider/index.js +4 -2
  45. package/product/components/RelationsSlider/RelationsSliderContent.js +3 -2
  46. package/product/components/RelationsSlider/constants.d.ts +3 -0
  47. package/product/components/RelationsSlider/constants.d.ts.map +1 -0
  48. package/product/components/RelationsSlider/constants.js +2 -1
  49. package/product/components/RelationsSlider/hooks.d.ts +6 -0
  50. package/product/components/RelationsSlider/hooks.d.ts.map +1 -0
  51. package/product/components/RelationsSlider/hooks.js +34 -0
  52. package/settings/action-creators/appSettings.d.ts +3 -3
  53. package/settings/action-creators/appSettings.d.ts.map +1 -1
  54. package/settings/reducers/appSettings.d.ts.map +1 -1
  55. package/settings/reducers/appSettings.js +31 -17
  56. package/settings/reducers/index.d.ts +1 -1
  57. package/settings/selectors/appSettings.d.ts +32 -0
  58. package/settings/selectors/appSettings.d.ts.map +1 -1
  59. package/settings/selectors/appSettings.js +21 -1
  60. package/settings/types/appSettings.d.ts +48 -0
  61. package/settings/types/appSettings.d.ts.map +1 -1
  62. package/styles/index.d.ts +1 -1
  63. package/styles/index.d.ts.map +1 -1
  64. package/styles/theme/createTheme/createComponents.types.d.ts +50 -0
  65. package/styles/theme/createTheme/createComponents.types.d.ts.map +1 -1
  66. package/styles/theme/createTheme/createComponents.types.js +50 -0
  67. package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.d.ts.map +1 -1
  68. package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.js +5 -1
  69. package/styles/theme/createTheme/createPalette.types.d.ts +4 -0
  70. package/styles/theme/createTheme/createPalette.types.d.ts.map +1 -1
  71. package/styles/theme/createTheme/createPalette.types.js +5 -1
  72. package/styles/theme/createTheme/createShape.d.ts +4 -0
  73. package/styles/theme/createTheme/createShape.d.ts.map +1 -1
  74. package/styles/theme/createTheme/createShape.js +2 -1
  75. package/styles/theme/createTheme/createThemeFromColorScheme.d.ts.map +1 -1
  76. package/styles/theme/createTheme/createThemeFromColorScheme.js +2 -1
  77. package/styles/theme/createTheme/shadows.d.ts +11 -1
  78. package/styles/theme/createTheme/shadows.d.ts.map +1 -1
  79. package/styles/theme/createTheme/shadows.js +41 -7
  80. package/styles/theme/createTheme/types.d.ts +5 -1
  81. package/styles/theme/createTheme/types.d.ts.map +1 -1
  82. package/styles/theme/index.d.ts +1 -0
  83. package/styles/theme/index.d.ts.map +1 -1
@@ -1,6 +1,4 @@
1
1
  import _merge from "lodash/merge";
2
- import _cloneDeep from "lodash/cloneDeep";
3
- import { produce } from 'immer';
4
2
  import { RECEIVE_APP_SETTINGS } from "../constants/appSettings";
5
3
  import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY, DEFAULT_SHOW_INNER_SHADOW } from "../constants/imageSettings";
6
4
  // Deliberately not exported from the "helpers" barrel - they normalize values on their way into
@@ -45,6 +43,22 @@ export const DEFAULT_APP_SETTINGS = {
45
43
  },
46
44
  rating: {
47
45
  showEmptyStars: false
46
+ },
47
+ card: {
48
+ productName: {
49
+ maxLines: 3
50
+ }
51
+ },
52
+ tile: {
53
+ productName: {
54
+ maxLines: 3
55
+ }
56
+ }
57
+ },
58
+ cards: {
59
+ style: 'shadow',
60
+ shadow: {
61
+ size: 'medium'
48
62
  }
49
63
  },
50
64
  images: {
@@ -70,35 +84,35 @@ export const DEFAULT_APP_SETTINGS = {
70
84
  */
71
85
  const appSettings = (state, action = {
72
86
  type: ''
73
- }) => produce(state ?? DEFAULT_APP_SETTINGS, draft => {
87
+ }) => {
74
88
  if (isReceiveAppSettingsAction(action)) {
75
89
  const {
76
90
  images
77
91
  } = action.settings ?? {};
78
92
 
79
- // A cleared branch is replaced outright, then kept out of the merge below. Merging the defaults
80
- // in would only add to it, leaving whatever an earlier payload configured in place.
81
- if (images === null) {
82
- draft.images = _cloneDeep(DEFAULT_APP_SETTINGS.images);
83
- } else if (images?.product === null) {
84
- draft.images.product = _cloneDeep(DEFAULT_APP_SETTINGS.images.product);
85
- }
86
-
87
- // Deep merged so a partial payload keeps the defaults for whatever the source omits.
88
- _merge(draft, {
93
+ // Merged over the defaults rather than over the current state, so a field an incoming payload
94
+ // omits falls back to its default instead of keeping the value of an earlier one. The admin
95
+ // preview needs that: it stops sending a shadow size once the card style isn't `shadow`, and it
96
+ // clears a whole branch by sending a null.
97
+ const nextState = _merge({}, DEFAULT_APP_SETTINGS, {
89
98
  ...action.settings,
99
+ // A cleared branch is mapped to undefined, which merge skips, so the defaults it started from
100
+ // stay in place. A null would be written into the slice like any other value.
90
101
  images: images === null ? undefined : {
91
102
  ...images,
92
103
  product: images?.product ?? undefined
93
104
  }
105
+ }, {
106
+ isHydrated: true
94
107
  });
95
108
 
96
109
  // Converted on the way in, so the slice holds wire ready values and every image url does not
97
110
  // pay for it. Unconditional, because an empty string or a null reaches here like any other
98
111
  // value - both converters are idempotent.
99
- draft.images.fillColor = toThumborColor(draft.images.fillColor);
100
- draft.images.quality = toImageQuality(draft.images.quality);
101
- draft.isHydrated = true;
112
+ nextState.images.fillColor = toThumborColor(nextState.images.fillColor);
113
+ nextState.images.quality = toImageQuality(nextState.images.quality);
114
+ return nextState;
102
115
  }
103
- });
116
+ return state ?? DEFAULT_APP_SETTINGS;
117
+ };
104
118
  export default appSettings;
@@ -5,7 +5,7 @@ export declare const settings: import("redux").Reducer<{
5
5
  appSettings: import("../types/appSettings").AppSettingsSlice;
6
6
  }, ({
7
7
  type: string;
8
- settings: import("../types/appSettings").AppSettings;
8
+ settings: import("../types/appSettings").DeepPartial<import("../types/appSettings").AppSettings>;
9
9
  } | import("redux").UnknownAction) | import("redux").Action<string>, Partial<{
10
10
  config: Object | undefined;
11
11
  shopSettings: Object | undefined;
@@ -87,4 +87,36 @@ export declare const getImageSettings: ((state: AppSettingsState) => import("../
87
87
  }> & {
88
88
  clearCache: () => void;
89
89
  };
90
+ /**
91
+ * Selects the max number of lines a product card name is clamped to.
92
+ */
93
+ export declare const getProductCardNameMaxLines: ((state: AppSettingsState) => number) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => number, {
94
+ clearCache: () => void;
95
+ }> & {
96
+ clearCache: () => void;
97
+ };
98
+ /**
99
+ * Selects the max number of lines a product tile name is clamped to.
100
+ */
101
+ export declare const getProductTileNameMaxLines: ((state: AppSettingsState) => number) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => number, {
102
+ clearCache: () => void;
103
+ }> & {
104
+ clearCache: () => void;
105
+ };
106
+ /**
107
+ * Selects the themed card settings (style and shadow size).
108
+ */
109
+ export declare const getCardSettings: ((state: AppSettingsState) => import("../types/appSettings").CardSettings) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => import("../types/appSettings").CardSettings, {
110
+ clearCache: () => void;
111
+ }> & {
112
+ clearCache: () => void;
113
+ };
114
+ /**
115
+ * Selects the effective card shadow size. `none` unless the shadow style is selected.
116
+ */
117
+ export declare const getCardShadowSize: ((state: AppSettingsState) => import("../../styles").ShadowSize) & import("reselect").OutputSelectorFields<(args_0: import("../types/appSettings").CardSettings) => import("../../styles").ShadowSize, {
118
+ clearCache: () => void;
119
+ }> & {
120
+ clearCache: () => void;
121
+ };
90
122
  //# sourceMappingURL=appSettings.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC"}
1
+ {"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAG7B,CAAC"}
@@ -45,4 +45,24 @@ export const getShowEmptyRatingStars = createSelector(getAppSettingsState, appSe
45
45
  /**
46
46
  * Selects the image settings.
47
47
  */
48
- export const getImageSettings = createSelector(getAppSettingsState, appSettings => appSettings.images);
48
+ export const getImageSettings = createSelector(getAppSettingsState, appSettings => appSettings.images);
49
+
50
+ /**
51
+ * Selects the max number of lines a product card name is clamped to.
52
+ */
53
+ export const getProductCardNameMaxLines = createSelector(getAppSettingsState, appSettings => appSettings.product.card.productName.maxLines);
54
+
55
+ /**
56
+ * Selects the max number of lines a product tile name is clamped to.
57
+ */
58
+ export const getProductTileNameMaxLines = createSelector(getAppSettingsState, appSettings => appSettings.product.tile.productName.maxLines);
59
+
60
+ /**
61
+ * Selects the themed card settings (style and shadow size).
62
+ */
63
+ export const getCardSettings = createSelector(getAppSettingsState, appSettings => appSettings.cards);
64
+
65
+ /**
66
+ * Selects the effective card shadow size. `none` unless the shadow style is selected.
67
+ */
68
+ export const getCardShadowSize = createSelector(getCardSettings, cards => cards.style === 'shadow' ? cards.shadow.size : 'none');
@@ -1,3 +1,12 @@
1
+ import type { ShadowSize } from '@shopgate/engage/styles/theme';
2
+ export type { ShadowSize };
3
+ /**
4
+ * Recursively optional variant of `T`. The settings sources send only what a merchant configured,
5
+ * and the admin preview additionally prunes the fields its visibility conditions hide.
6
+ */
7
+ export type DeepPartial<T> = {
8
+ [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
9
+ };
1
10
  export interface AppSettingsState {
2
11
  settings: {
3
12
  appSettings: AppSettingsSlice;
@@ -23,6 +32,20 @@ export type ProductColumns = PerScreenSize;
23
32
  export interface ProductGridSettings {
24
33
  columns: ProductColumns;
25
34
  }
35
+ /**
36
+ * Name-clamping shared by the card and tile product surfaces.
37
+ */
38
+ export interface ProductNameSettings {
39
+ /** Max number of lines the product name is clamped to before an ellipsis. */
40
+ maxLines: number;
41
+ }
42
+ /**
43
+ * Drop shadow of the card surface.
44
+ */
45
+ export interface ShadowSettings {
46
+ /** Which preset elevation to draw. `none` renders no shadow at all. */
47
+ size: ShadowSize;
48
+ }
26
49
  /**
27
50
  * Number of slides to render side by side, keyed by screen size. Fractional values are allowed.
28
51
  */
@@ -49,6 +72,25 @@ export interface ProductSettings {
49
72
  grid: ProductGridSettings;
50
73
  slider: ProductSliderSettings;
51
74
  rating: ProductRatingSettings;
75
+ /** Product cards (sliders, relations, live shopping). */
76
+ card: {
77
+ productName: ProductNameSettings;
78
+ };
79
+ /** Product grid tiles. */
80
+ tile: {
81
+ productName: ProductNameSettings;
82
+ };
83
+ }
84
+ /**
85
+ * The visual style of the card surface.
86
+ */
87
+ export type CardStyle = 'shadow' | 'border' | 'flat';
88
+ /**
89
+ * Settings for the themed card surface (checkout sections, address cards, sliders).
90
+ */
91
+ export interface CardSettings {
92
+ style: CardStyle;
93
+ shadow: ShadowSettings;
52
94
  }
53
95
  /**
54
96
  * An aspect ratio expressed as width and height parts. Only the proportion matters -
@@ -171,7 +213,13 @@ export interface AppSettings {
171
213
  * Settings for images that are served through the image service.
172
214
  */
173
215
  images: ImageSettings;
216
+ cards: CardSettings;
174
217
  }
218
+ /**
219
+ * What a settings source actually sends. Every field is optional, so the reducer fills the gaps
220
+ * from its defaults instead of leaving consumers with undefined.
221
+ */
222
+ export type AppSettingsPayload = DeepPartial<AppSettings>;
175
223
  /**
176
224
  * The stored app settings slice. Extends the raw {@link AppSettings} values
177
225
  * with metadata that is derived by the reducer rather than supplied by a
@@ -1 +1 @@
1
- {"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE;QACR,WAAW,EAAE,gBAAgB,CAAC;KAC/B,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,MAAM,EAAE,qBAAqB,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7D;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,2BAA2B,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,2BAA2B,CAAC;CACpC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE;YACN,OAAO,EAAE,OAAO,GAAG,UAAU,CAAA;YAC7B,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;YAC7B,UAAU,EAAE,OAAO,CAAC;YACpB,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE;gBACL,aAAa,EAAE,OAAO,CAAC;aACxB,CAAA;YACD,SAAS,EAAE;gBACT;;mBAEG;gBACH,WAAW,EAAE,OAAO,CAAC;aACtB,CAAA;SACF,CAAA;KACF,CAAA;IACD,OAAO,EAAE,eAAe,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB"}
1
+ {"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"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"}
package/styles/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export * from './helpers';
2
- export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ColorSchemeName, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
2
+ export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ShadowSize, type ColorSchemeName, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
3
3
  export { makeStyles, withStyles, useStyles, css, cx, tss, GlobalStyles, injectGlobal, keyframes, } from './tss';
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}
@@ -203,6 +203,31 @@ export declare const componentsSchema: {
203
203
  readonly height: "";
204
204
  };
205
205
  };
206
+ readonly cards: {
207
+ readonly vars: {
208
+ readonly backgroundColor: "";
209
+ readonly borderWidth: "";
210
+ readonly borderColor: "";
211
+ readonly border: "";
212
+ readonly shadowColor: "";
213
+ };
214
+ };
215
+ readonly productCard: {
216
+ readonly vars: {
217
+ readonly padding: "";
218
+ readonly textPadding: "";
219
+ readonly imagePadding: "";
220
+ };
221
+ };
222
+ readonly tiles: {
223
+ readonly vars: {
224
+ readonly backgroundColor: "";
225
+ readonly padding: "";
226
+ readonly textPadding: "";
227
+ readonly textPaddingTop: "";
228
+ readonly imagePadding: "";
229
+ };
230
+ };
206
231
  };
207
232
  /**
208
233
  * Default component tokens.
@@ -313,6 +338,31 @@ export declare const componentsDefaults: {
313
338
  height: number;
314
339
  };
315
340
  };
341
+ cards: {
342
+ vars: {
343
+ backgroundColor: (t: Theme) => string;
344
+ borderWidth: number;
345
+ borderColor: string;
346
+ border: string;
347
+ shadowColor: (t: Theme) => string;
348
+ };
349
+ };
350
+ productCard: {
351
+ vars: {
352
+ padding: number;
353
+ textPadding: number;
354
+ imagePadding: number;
355
+ };
356
+ };
357
+ tiles: {
358
+ vars: {
359
+ backgroundColor: string;
360
+ padding: number;
361
+ textPadding: number;
362
+ textPaddingTop: string;
363
+ imagePadding: number;
364
+ };
365
+ };
316
366
  };
317
367
  /** Internal defaults type (must cover full schema). */
318
368
  export type ComponentsDefaults = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;
@@ -1 +1 @@
1
- {"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}
@@ -190,6 +190,31 @@ export const componentsSchema = {
190
190
  vars: {
191
191
  height: ''
192
192
  }
193
+ },
194
+ cards: {
195
+ vars: {
196
+ backgroundColor: '',
197
+ borderWidth: '',
198
+ borderColor: '',
199
+ border: '',
200
+ shadowColor: ''
201
+ }
202
+ },
203
+ productCard: {
204
+ vars: {
205
+ padding: '',
206
+ textPadding: '',
207
+ imagePadding: ''
208
+ }
209
+ },
210
+ tiles: {
211
+ vars: {
212
+ backgroundColor: '',
213
+ padding: '',
214
+ textPadding: '',
215
+ textPaddingTop: '',
216
+ imagePadding: ''
217
+ }
193
218
  }
194
219
  };
195
220
 
@@ -301,6 +326,31 @@ export const componentsDefaults = {
301
326
  vars: {
302
327
  height: 48
303
328
  }
329
+ },
330
+ cards: {
331
+ vars: {
332
+ backgroundColor: t => t.palette.background.surface,
333
+ borderWidth: 0,
334
+ borderColor: 'transparent',
335
+ border: 'var(--sg-components-cards-borderWidth) solid var(--sg-components-cards-borderColor)',
336
+ shadowColor: t => t.palette.shadow
337
+ }
338
+ },
339
+ productCard: {
340
+ vars: {
341
+ padding: 0,
342
+ textPadding: 16,
343
+ imagePadding: 0
344
+ }
345
+ },
346
+ tiles: {
347
+ vars: {
348
+ backgroundColor: 'transparent',
349
+ padding: 0,
350
+ textPadding: 8,
351
+ textPaddingTop: 'max(var(--sg-components-tiles-textPadding), 16px)',
352
+ imagePadding: 0
353
+ }
304
354
  }
305
355
  };
306
356
 
@@ -1 +1 @@
1
- {"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CA6G9C"}
1
+ {"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CAgH9C"}
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.array.includes.js";
1
2
  import "core-js/modules/es.array.reduce.js";
2
3
  import merge from 'lodash/merge';
3
4
  import omit from 'lodash/omit';
@@ -35,7 +36,10 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
35
36
  varsWithDefaults,
36
37
  varNames
37
38
  } = cssVarsColorAugmentation(cssVarsParser(rest, {
38
- prefix: cssVarPrefix
39
+ prefix: cssVarPrefix,
40
+ // Keep as literal strings, not `:root` vars, so their inline `var(--sg-palette-shadow)`
41
+ // resolves on the element using the shadow (recolorable) instead of freezing against `:root`.
42
+ shouldSkipGeneratingVar: keys => ['shadows', 'shadowSizes'].includes(keys[0])
39
43
  // @ts-expect-error - We are sure about the type here
40
44
  }), rest, cssVarPrefix);
41
45
 
@@ -151,6 +151,10 @@ export declare const paletteSchema: {
151
151
  readonly disabled: "#808080";
152
152
  readonly disabledBackground: "#CCCCCC";
153
153
  };
154
+ /**
155
+ * Color for the box-shadow.
156
+ */
157
+ readonly shadow: "#000000";
154
158
  };
155
159
  /**
156
160
  * Additional settings for the palette
@@ -1 +1 @@
1
- {"version":3,"file":"createPalette.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createPalette.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"createPalette.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createPalette.types.ts"],"names":[],"mappings":"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"}
@@ -119,7 +119,11 @@ export const paletteSchema = {
119
119
  action: {
120
120
  disabled: '#808080',
121
121
  disabledBackground: '#CCCCCC'
122
- }
122
+ },
123
+ /**
124
+ * Color for the box-shadow.
125
+ */
126
+ shadow: '#000000'
123
127
  };
124
128
 
125
129
  /**
@@ -1,5 +1,9 @@
1
1
  export interface Shape {
2
2
  borderRadius: number | string;
3
+ /**
4
+ * Corner radius of cards (product cards, content cards).
5
+ */
6
+ cardsBorderRadius: number | string;
3
7
  }
4
8
  export type ShapeOptions = Partial<Shape>;
5
9
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAM1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}
1
+ {"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAO1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}
@@ -1,5 +1,6 @@
1
1
  const shape = {
2
- borderRadius: 4
2
+ borderRadius: 4,
3
+ cardsBorderRadius: 10
3
4
  };
4
5
 
5
6
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAcpE;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,KACZ,MAA4D,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,gBA2BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
1
+ {"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAcpE;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,KACZ,MAA4D,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,gBA4BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
@@ -2,7 +2,7 @@ import createPalette from "./createPalette";
2
2
  import createTypography from "./createTypography";
3
3
  import createComponents from "./createComponents";
4
4
  import createShape from "./createShape";
5
- import shadows from "./shadows";
5
+ import shadows, { shadowSizes } from "./shadows";
6
6
  /**
7
7
  * Calculates the percentage value for a given coefficient, which can be a number or a string representing a CSS calculation.
8
8
  * @param coefficient The coefficient to convert, either a number or a string.
@@ -69,6 +69,7 @@ const createThemeFromColorScheme = colorScheme => {
69
69
  components,
70
70
  shape,
71
71
  shadows,
72
+ shadowSizes,
72
73
  alpha,
73
74
  lighten,
74
75
  darken,
@@ -1,4 +1,14 @@
1
- declare const shadows: readonly ["none", string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
1
+ /**
2
+ * The elevations the admin offers. Offset, blur and spread are not configurable — a shop picks
3
+ * one of these presets so the surfaces stay visually consistent, and only the color is free.
4
+ */
5
+ export type ShadowSize = 'none' | 'low' | 'medium' | 'strong';
6
+ export declare const SHADOW_COLOR_VAR = "--sg-palette-shadow";
7
+ declare const shadows: readonly ["none", ...string[]];
2
8
  export type Shadows = typeof shadows;
9
+ /**
10
+ * The finished shadow for each size the admin offers, for a single `theme.shadowSizes[size]` lookup.
11
+ */
12
+ export declare const shadowSizes: Record<ShadowSize, string>;
3
13
  export default shadows;
4
14
  //# sourceMappingURL=shadows.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAaA,QAAA,MAAM,OAAO,mNA0BH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AA+D9D,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,QAAA,MAAM,OAAO,gCAMH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC;;GAEG;AACH,eAAO,MAAM,WAAW,EAEnB,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAEhC,eAAe,OAAO,CAAC"}
@@ -1,10 +1,44 @@
1
- const shadowKeyUmbraOpacity = 0.2;
2
- const shadowKeyPenumbraOpacity = 0.14;
3
- const shadowAmbientShadowOpacity = 0.12;
4
- function createShadow(...px) {
5
- return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
6
- }
1
+ // Share of the shadow color each of the three layers is drawn with, in percent.
2
+ const shadowKeyUmbraPercent = 20;
3
+ const shadowKeyPenumbraPercent = 14;
4
+ const shadowAmbientShadowPercent = 12;
5
+
6
+ /**
7
+ * The elevations the admin offers. Offset, blur and spread are not configurable — a shop picks
8
+ * one of these presets so the surfaces stay visually consistent, and only the color is free.
9
+ */
10
+
11
+ /**
12
+ * Elevation from the scale below used for each shadow size the admin offers. Keeping the mapping
13
+ * next to the scale means a size never introduces geometry of its own.
14
+ */
15
+ const SHADOW_SIZE_ELEVATIONS = {
16
+ none: 0,
17
+ low: 2,
18
+ medium: 4,
19
+ strong: 8
20
+ };
7
21
 
22
+ // Offset-x, offset-y, blur and spread of the three layers that make up one elevation, starting at
23
+ // elevation 1 (elevation 0 draws no shadow at all).
8
24
  // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
9
- const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
25
+ const elevationGeometries = [[0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0], [0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0], [0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0], [0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0], [0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0], [0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0], [0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1], [0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2], [0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2], [0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3], [0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3], [0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4], [0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4], [0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4], [0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5], [0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5], [0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5], [0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6], [0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6], [0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7], [0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7], [0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7], [0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8], [0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8]];
26
+
27
+ /**
28
+ * Builds one elevation from its geometry.
29
+ * @param px The twelve lengths of the elevation's three layers.
30
+ * @param renderColor Renders the color of a layer from the share of the shadow color it is drawn
31
+ * with, in percent.
32
+ * @returns A box-shadow value.
33
+ */
34
+ function createShadow(px, renderColor) {
35
+ const layer = (offset, percent) => `${px[offset]}px ${px[offset + 1]}px ${px[offset + 2]}px ${px[offset + 3]}px ` + `${renderColor(percent)}`;
36
+ return [layer(0, shadowKeyUmbraPercent), layer(4, shadowKeyPenumbraPercent), layer(8, shadowAmbientShadowPercent)].join(',');
37
+ }
38
+ export const SHADOW_COLOR_VAR = '--sg-palette-shadow';
39
+ const shadows = ['none'].concat(elevationGeometries.map(geometry => createShadow(geometry, percent => `rgb(from var(${SHADOW_COLOR_VAR}) r g b / ${percent / 100})`)));
40
+ /**
41
+ * The finished shadow for each size the admin offers, for a single `theme.shadowSizes[size]` lookup.
42
+ */
43
+ export const shadowSizes = Object.fromEntries(Object.entries(SHADOW_SIZE_ELEVATIONS).map(([size, elevation]) => [size, shadows[elevation]]));
10
44
  export default shadows;
@@ -10,7 +10,7 @@ import type { ApplyStyles } from './applyStyles';
10
10
  import type { GetColorSchemeSelector, ActiveColorSchemeSwitcher } from './helpers';
11
11
  import type { CreateCssVarsForColorSchemeThemesReturnValue } from './createCssVarsForColorSchemeThemes';
12
12
  import type { Shape, ShapeOptions } from './createShape';
13
- import type { Shadows } from './shadows';
13
+ import type { Shadows, ShadowSize } from './shadows';
14
14
  export type { Breakpoint } from './createBreakpoints';
15
15
  export type { PaletteColorsWithMain } from './createPalette';
16
16
  export declare const COLOR_SCHEME_NAMES: readonly ["light", "dark"];
@@ -94,6 +94,10 @@ export interface BaseTheme {
94
94
  * Pre-defined shadow styles for different elevation levels, following Material Design guidelines.
95
95
  */
96
96
  shadows: Shadows;
97
+ /**
98
+ * The finished box-shadow size (`none` | `low` | `medium` | `strong`)
99
+ */
100
+ shadowSizes: Record<ShadowSize, string>;
97
101
  /**
98
102
  * Adds an alpha value to a color, returning a new color string with the applied alpha.
99
103
  * @param color The color to modify.
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}