@gnist/design-system 3.0.3 → 3.1.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 (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/components/surfaces/modal/modal.css.cjs +18 -0
  3. package/dist/components/surfaces/modal/modal.css.d.ts +12 -1
  4. package/dist/components/surfaces/modal/modal.css.d.ts.map +1 -1
  5. package/dist/components/surfaces/modal/modal.css.js +18 -0
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.1.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.0.4...@gnist/design-system@3.1.0) (2025-05-13)
7
+
8
+ ### Features
9
+
10
+ * add x-large size option to Modal ([8229a4d](https://github.com/mollerdigital/design-system-design-system/commit/8229a4d84c06ca007555ddb9c009c24c844d64b0))
11
+
12
+ ## [3.0.4](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.0.3...@gnist/design-system@3.0.4) (2025-05-12)
13
+
14
+ **Note:** Version bump only for package @gnist/design-system
15
+
6
16
  ## [3.0.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.0.2...@gnist/design-system@3.0.3) (2025-05-09)
7
17
 
8
18
  **Note:** Version bump only for package @gnist/design-system
package/dist/components/surfaces/modal/modal.css.cjs CHANGED
@@ -39,6 +39,7 @@ const modalStyle = css.style({
39
39
  const dialogPadding = (size) => {
40
40
  switch (size) {
41
41
  case "fullscreen":
42
+ case "x-large":
42
43
  case "large":
43
44
  return tokens_css_js.tokens.spacing.xl;
44
45
  case "medium":
@@ -70,6 +71,12 @@ const dialogRecipe = recipes.recipe({
70
71
  width: "100dvw",
71
72
  paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("fullscreen")).toString()
72
73
  },
74
+ "x-large": {
75
+ maxHeight: cssUtils.calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("x-large")).toString(),
76
+ width: "1024px",
77
+ maxWidth: "95vw",
78
+ paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("x-large")).toString()
79
+ },
73
80
  large: {
74
81
  maxHeight: cssUtils.calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("large")).toString(),
75
82
  width: "800px",
@@ -113,6 +120,7 @@ const headerRowRecipe = recipes.recipe({
113
120
  variants: {
114
121
  size: {
115
122
  fullscreen: [headerRowPaddingBySize("fullscreen")],
123
+ "x-large": [headerRowPaddingBySize("x-large")],
116
124
  large: [headerRowPaddingBySize("large")],
117
125
  medium: [headerRowPaddingBySize("medium")],
118
126
  small: [headerRowPaddingBySize("small")]
@@ -148,6 +156,9 @@ const contentContainerRecipe = recipes.recipe({
148
156
  fullscreen: {
149
157
  padding: `0 ${dialogPadding("fullscreen")}`
150
158
  },
159
+ "x-large": {
160
+ padding: `0 ${dialogPadding("x-large")}`
161
+ },
151
162
  large: {
152
163
  padding: `0 ${dialogPadding("large")}`
153
164
  },
@@ -170,6 +181,12 @@ const contentContainerRecipe = recipes.recipe({
170
181
  paddingBottom: dialogPadding("fullscreen")
171
182
  }
172
183
  },
184
+ {
185
+ variants: { size: "x-large", hasScroll: true },
186
+ style: {
187
+ paddingBottom: dialogPadding("x-large")
188
+ }
189
+ },
173
190
  {
174
191
  variants: { size: "large", hasScroll: true },
175
192
  style: {
@@ -219,6 +236,7 @@ const actionRowRecipe = recipes.recipe({
219
236
  justifyContent: "center"
220
237
  })
221
238
  ],
239
+ "x-large": [actionRowPaddingBySize("x-large")],
222
240
  large: [actionRowPaddingBySize("large")],
223
241
  medium: [actionRowPaddingBySize("medium")],
224
242
  small: [
package/dist/components/surfaces/modal/modal.css.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type DialogSize = "small" | "medium" | "large" | "fullscreen";
1
+ export type DialogSize = "small" | "medium" | "large" | "x-large" | "fullscreen";
2
2
  export declare const backdropStyle: string;
3
3
  export declare const modalStyle: string;
4
4
  export declare const dialogRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8,6 +8,12 @@ export declare const dialogRecipe: import("@vanilla-extract/recipes").RuntimeFn<
8
8
  width: "100dvw";
9
9
  paddingBottom: string;
10
10
  };
11
+ "x-large": {
12
+ maxHeight: string;
13
+ width: "1024px";
14
+ maxWidth: "95vw";
15
+ paddingBottom: string;
16
+ };
11
17
  large: {
12
18
  maxHeight: string;
13
19
  width: "800px";
@@ -31,6 +37,7 @@ export declare const dialogRecipe: import("@vanilla-extract/recipes").RuntimeFn<
31
37
  export declare const headerRowRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
32
38
  size: {
33
39
  fullscreen: string[];
40
+ "x-large": string[];
34
41
  large: string[];
35
42
  medium: string[];
36
43
  small: string[];
@@ -47,6 +54,9 @@ export declare const contentContainerRecipe: import("@vanilla-extract/recipes").
47
54
  fullscreen: {
48
55
  padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
49
56
  };
57
+ "x-large": {
58
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
59
+ };
50
60
  large: {
51
61
  padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
52
62
  };
@@ -65,6 +75,7 @@ export declare const contentContainerRecipe: import("@vanilla-extract/recipes").
65
75
  export declare const actionRowRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
66
76
  size: {
67
77
  fullscreen: string[];
78
+ "x-large": string[];
68
79
  large: string[];
69
80
  medium: string[];
70
81
  small: string[];
package/dist/components/surfaces/modal/modal.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAErE,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAmBrB,CAAC;AAcH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAiC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;EAwDjC,CAAC;AAWH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAyC1B,CAAC"}
1
+ {"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,CAAC;AAEnB,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAmBrB,CAAC;AAeH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;EAkC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;EAiEjC,CAAC;AAWH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;EA0C1B,CAAC"}
package/dist/components/surfaces/modal/modal.css.js CHANGED
@@ -37,6 +37,7 @@ const modalStyle = style({
37
37
  const dialogPadding = (size) => {
38
38
  switch (size) {
39
39
  case "fullscreen":
40
+ case "x-large":
40
41
  case "large":
41
42
  return tokens.spacing.xl;
42
43
  case "medium":
@@ -68,6 +69,12 @@ const dialogRecipe = recipe({
68
69
  width: "100dvw",
69
70
  paddingBottom: calc("env(safe-area-inset-bottom)").add(dialogPadding("fullscreen")).toString()
70
71
  },
72
+ "x-large": {
73
+ maxHeight: calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("x-large")).toString(),
74
+ width: "1024px",
75
+ maxWidth: "95vw",
76
+ paddingBottom: calc("env(safe-area-inset-bottom)").add(dialogPadding("x-large")).toString()
77
+ },
71
78
  large: {
72
79
  maxHeight: calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("large")).toString(),
73
80
  width: "800px",
@@ -111,6 +118,7 @@ const headerRowRecipe = recipe({
111
118
  variants: {
112
119
  size: {
113
120
  fullscreen: [headerRowPaddingBySize("fullscreen")],
121
+ "x-large": [headerRowPaddingBySize("x-large")],
114
122
  large: [headerRowPaddingBySize("large")],
115
123
  medium: [headerRowPaddingBySize("medium")],
116
124
  small: [headerRowPaddingBySize("small")]
@@ -146,6 +154,9 @@ const contentContainerRecipe = recipe({
146
154
  fullscreen: {
147
155
  padding: `0 ${dialogPadding("fullscreen")}`
148
156
  },
157
+ "x-large": {
158
+ padding: `0 ${dialogPadding("x-large")}`
159
+ },
149
160
  large: {
150
161
  padding: `0 ${dialogPadding("large")}`
151
162
  },
@@ -168,6 +179,12 @@ const contentContainerRecipe = recipe({
168
179
  paddingBottom: dialogPadding("fullscreen")
169
180
  }
170
181
  },
182
+ {
183
+ variants: { size: "x-large", hasScroll: true },
184
+ style: {
185
+ paddingBottom: dialogPadding("x-large")
186
+ }
187
+ },
171
188
  {
172
189
  variants: { size: "large", hasScroll: true },
173
190
  style: {
@@ -217,6 +234,7 @@ const actionRowRecipe = recipe({
217
234
  justifyContent: "center"
218
235
  })
219
236
  ],
237
+ "x-large": [actionRowPaddingBySize("x-large")],
220
238
  large: [actionRowPaddingBySize("large")],
221
239
  medium: [actionRowPaddingBySize("medium")],
222
240
  small: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gnist/design-system",
3
- "version": "3.0.3",
3
+ "version": "3.1.0",
4
4
  "license": "UNLICENSED",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -49,7 +49,7 @@
49
49
  "dependencies": {
50
50
  "@formkit/auto-animate": "^0.8.2",
51
51
  "@gnist/component-utils": "3.0.7",
52
- "@gnist/themes": "^3.2.0",
52
+ "@gnist/themes": "^3.3.0",
53
53
  "@mui/base": "^5.0.0-beta.70",
54
54
  "@vanilla-extract/css": "^1.17.1",
55
55
  "@vanilla-extract/css-utils": "^0.1.4",
@@ -103,5 +103,5 @@
103
103
  "optional": true
104
104
  }
105
105
  },
106
- "gitHead": "0bcaeeb4512233aab301f6c47fba60c237ab5e79"
106
+ "gitHead": "49d3c79618a8efe15be0983a60f4343d78cfd317"
107
107
  }