@box/blueprint-web 12.90.1 → 12.91.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 (4) hide show
  1. package/dist/lib-esm/ghost/ghost.js +19 -12
  2. package/dist/lib-esm/ghost/ghost.module.js +1 -1
  3. package/dist/lib-esm/index.css +35 -17
  4. package/package.json +1 -1
package/dist/lib-esm/ghost/ghost.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
3
4
  import styles from './ghost.module.js';
4
5
 
5
6
  /**
@@ -20,18 +21,24 @@ const Ghost = ({
20
21
  borderRadius,
21
22
  style = {},
22
23
  ...rest
23
- }) => jsx("span", {
24
- className: clsx(className, styles.ghost, {
25
- [styles[variant]]: !!variant
26
- }),
27
- style: {
28
- height,
29
- width,
30
- borderRadius,
31
- ...style
32
- },
33
- ...rest
34
- });
24
+ }) => {
25
+ const {
26
+ enableModernizedComponents
27
+ } = useBlueprintModernization();
28
+ return jsx("span", {
29
+ className: clsx(className, styles.ghost, {
30
+ [styles[variant]]: !!variant
31
+ }),
32
+ "data-modern": enableModernizedComponents,
33
+ style: {
34
+ height,
35
+ width,
36
+ borderRadius,
37
+ ...style
38
+ },
39
+ ...rest
40
+ });
41
+ };
35
42
  Ghost.displayName = 'Ghost';
36
43
 
37
44
  export { Ghost };
package/dist/lib-esm/ghost/ghost.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"ghost":"bp_ghost_module_ghost--a5a05","ghost-keyframes":"bp_ghost_module_ghost-keyframes--a5a05","circle":"bp_ghost_module_circle--a5a05","pill":"bp_ghost_module_pill--a5a05","rectangle":"bp_ghost_module_rectangle--a5a05"};
2
+ var styles = {"ghost":"bp_ghost_module_ghost--d6cc7","ghost-keyframes":"bp_ghost_module_ghost-keyframes--d6cc7","circle":"bp_ghost_module_circle--d6cc7","pill":"bp_ghost_module_pill--d6cc7","rectangle":"bp_ghost_module_rectangle--d6cc7"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -1,34 +1,52 @@
1
- .bp_ghost_module_ghost--a5a05{
2
- animation:bp_ghost_module_ghost-keyframes--a5a05 1.2s ease-in-out infinite;
3
- background-color:var(--surface-surface-hover);
4
- border-radius:var(--radius-1);
1
+ .bp_ghost_module_ghost--d6cc7[data-modern=false]{
2
+ --ghost-background-color:var(--surface-surface-hover);
3
+ --ghost-background-color-secondary:var(--surface-surface-secondary);
4
+ --ghost-border-radius:var(--radius-1);
5
+ --ghost-border-radius-half:var(--radius-half);
6
+ --ghost-space-5:var(--space-5);
7
+ --ghost-space-6:var(--space-6);
8
+ }
9
+
10
+ .bp_ghost_module_ghost--d6cc7[data-modern=true]{
11
+ --ghost-background-color:var(--bp-surface-ghost-surface);
12
+ --ghost-background-color-secondary:var(--bp-surface-ghost-surface-secondary);
13
+ --ghost-border-radius:var(--bp-radius-02);
14
+ --ghost-border-radius-half:var(--bp-radius-16);
15
+ --ghost-space-5:var(--bp-space-050);
16
+ --ghost-space-6:var(--bp-space-060);
17
+ }
18
+
19
+ .bp_ghost_module_ghost--d6cc7{
20
+ animation:bp_ghost_module_ghost-keyframes--d6cc7 1.2s ease-in-out infinite;
21
+ background-color:var(--ghost-background-color);
22
+ border-radius:var(--ghost-border-radius);
5
23
  display:inline-block;
6
24
  }
7
- .bp_ghost_module_ghost--a5a05.bp_ghost_module_circle--a5a05{
25
+ .bp_ghost_module_ghost--d6cc7.bp_ghost_module_circle--d6cc7{
8
26
  border-radius:50%;
9
- min-height:var(--space-6);
10
- min-width:var(--space-6);
27
+ min-height:var(--ghost-space-6);
28
+ min-width:var(--ghost-space-6);
11
29
  }
12
- .bp_ghost_module_ghost--a5a05.bp_ghost_module_pill--a5a05{
13
- border-radius:var(--radius-half);
14
- height:var(--space-5);
30
+ .bp_ghost_module_ghost--d6cc7.bp_ghost_module_pill--d6cc7{
31
+ border-radius:var(--ghost-border-radius-half);
32
+ height:var(--ghost-space-5);
15
33
  width:100%;
16
34
  }
17
- .bp_ghost_module_ghost--a5a05.bp_ghost_module_rectangle--a5a05{
18
- border-radius:var(--radius-1);
19
- height:var(--space-5);
35
+ .bp_ghost_module_ghost--d6cc7.bp_ghost_module_rectangle--d6cc7{
36
+ border-radius:var(--ghost-border-radius);
37
+ height:var(--ghost-space-5);
20
38
  width:100%;
21
39
  }
22
40
 
23
- @keyframes bp_ghost_module_ghost-keyframes--a5a05{
41
+ @keyframes bp_ghost_module_ghost-keyframes--d6cc7{
24
42
  0%{
25
- background-color:var(--surface-surface-hover);
43
+ background-color:var(--ghost-background-color);
26
44
  }
27
45
  50%{
28
- background-color:var(--surface-surface-secondary);
46
+ background-color:var(--ghost-background-color-secondary);
29
47
  }
30
48
  100%{
31
- background-color:var(--surface-surface-hover);
49
+ background-color:var(--ghost-background-color);
32
50
  }
33
51
  }
34
52
  .bp_base_inline_notice_module_noticeWrapper--1c117[data-modern=false]{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.90.1",
3
+ "version": "12.91.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {