braid-design-system 32.6.0 → 32.7.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.
@@ -6,6 +6,7 @@ const styles_lib_components_private_Modal_ModalExternalGutter_cjs = require("./M
6
6
  const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
7
7
  const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
8
8
  const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
9
+ const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
9
10
  fileScope.setFileScope("src/lib/components/private/Modal/Modal.css.ts?used", "braid-design-system");
10
11
  const fixedStackingContext = styles_lib_css_atoms_atoms_cjs.atoms({
11
12
  position: "fixed",
@@ -15,9 +16,16 @@ const resetStackingContext = styles_lib_css_atoms_atoms_cjs.atoms({
15
16
  position: "relative",
16
17
  zIndex: 0
17
18
  });
18
- const backdrop = css.style({
19
- background: "rgba(0, 0, 0, .4)"
20
- }, "backdrop");
19
+ const backdrop = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
20
+ lightMode: {
21
+ background: "#000",
22
+ opacity: 0.4
23
+ },
24
+ darkMode: {
25
+ background: "#000",
26
+ opacity: 0.6
27
+ }
28
+ }), "backdrop");
21
29
  const reducedMotion = css.style({
22
30
  "@media": {
23
31
  "screen and (prefers-reduced-motion)": {
@@ -32,7 +40,7 @@ const entrance = {
32
40
  right: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
33
41
  mobile: {
34
42
  opacity: 1,
35
- transform: "translateX(140%)"
43
+ transform: "translateX(110%)"
36
44
  },
37
45
  tablet: {
38
46
  opacity: 0,
@@ -42,7 +50,7 @@ const entrance = {
42
50
  left: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
43
51
  mobile: {
44
52
  opacity: 1,
45
- transform: "translateX(-140%)"
53
+ transform: "translateX(-110%)"
46
54
  },
47
55
  tablet: {
48
56
  opacity: 0,
@@ -54,7 +62,7 @@ const exit = {
54
62
  right: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
55
63
  mobile: {
56
64
  opacity: 1,
57
- transform: "translateX(140%)"
65
+ transform: "translateX(110%)"
58
66
  },
59
67
  tablet: {
60
68
  opacity: 0,
@@ -64,7 +72,7 @@ const exit = {
64
72
  left: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
65
73
  mobile: {
66
74
  opacity: 1,
67
- transform: "translateX(-140%)"
75
+ transform: "translateX(-110%)"
68
76
  },
69
77
  tablet: {
70
78
  opacity: 0,
@@ -5,6 +5,7 @@ import { externalGutter } from "./ModalExternalGutter.mjs";
5
5
  import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
6
6
  import { vars } from "../../../themes/vars.css.mjs";
7
7
  import { atoms } from "../../../css/atoms/atoms.mjs";
8
+ import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
8
9
  setFileScope("src/lib/components/private/Modal/Modal.css.ts?used", "braid-design-system");
9
10
  const fixedStackingContext = atoms({
10
11
  position: "fixed",
@@ -14,9 +15,16 @@ const resetStackingContext = atoms({
14
15
  position: "relative",
15
16
  zIndex: 0
16
17
  });
17
- const backdrop = style({
18
- background: "rgba(0, 0, 0, .4)"
19
- }, "backdrop");
18
+ const backdrop = style(colorModeStyle({
19
+ lightMode: {
20
+ background: "#000",
21
+ opacity: 0.4
22
+ },
23
+ darkMode: {
24
+ background: "#000",
25
+ opacity: 0.6
26
+ }
27
+ }), "backdrop");
20
28
  const reducedMotion = style({
21
29
  "@media": {
22
30
  "screen and (prefers-reduced-motion)": {
@@ -31,7 +39,7 @@ const entrance = {
31
39
  right: [reducedMotion, style(responsiveStyle({
32
40
  mobile: {
33
41
  opacity: 1,
34
- transform: "translateX(140%)"
42
+ transform: "translateX(110%)"
35
43
  },
36
44
  tablet: {
37
45
  opacity: 0,
@@ -41,7 +49,7 @@ const entrance = {
41
49
  left: [reducedMotion, style(responsiveStyle({
42
50
  mobile: {
43
51
  opacity: 1,
44
- transform: "translateX(-140%)"
52
+ transform: "translateX(-110%)"
45
53
  },
46
54
  tablet: {
47
55
  opacity: 0,
@@ -53,7 +61,7 @@ const exit = {
53
61
  right: [reducedMotion, style(responsiveStyle({
54
62
  mobile: {
55
63
  opacity: 1,
56
- transform: "translateX(140%)"
64
+ transform: "translateX(110%)"
57
65
  },
58
66
  tablet: {
59
67
  opacity: 0,
@@ -63,7 +71,7 @@ const exit = {
63
71
  left: [reducedMotion, style(responsiveStyle({
64
72
  mobile: {
65
73
  opacity: 1,
66
- transform: "translateX(-140%)"
74
+ transform: "translateX(-110%)"
67
75
  },
68
76
  tablet: {
69
77
  opacity: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-design-system",
3
- "version": "32.6.0",
3
+ "version": "32.7.0",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "homepage": "https://seek-oss.github.io/braid-design-system/",
6
6
  "bugs": {
@@ -189,7 +189,7 @@
189
189
  "react-dom": "^18.2.0",
190
190
  "react-router-dom": "^6.3.0",
191
191
  "sanitize-html": "^2.7.0",
192
- "sku": "11.11.0",
192
+ "sku": "12.1.0",
193
193
  "svgo": "^2.8.0",
194
194
  "title-case": "^3.0.3"
195
195
  },