@blockle/blocks-core 0.21.9 → 0.21.11

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 (10) hide show
  1. package/dist/atoms/defineProperties.cjs +18 -5
  2. package/dist/atoms/defineProperties.js +18 -5
  3. package/dist/css/layers.css.cjs +8 -1
  4. package/dist/css/layers.css.d.ts +2 -0
  5. package/dist/css/layers.css.js +9 -2
  6. package/dist/css/vars.css.d.ts +51 -51
  7. package/dist/index.cjs +2 -0
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +3 -1
  10. package/package.json +1 -1
package/dist/atoms/defineProperties.cjs CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const css = require("@vanilla-extract/css");
4
+ const layers_css = require("../css/layers.css.cjs");
4
5
  function defineProperties({
5
6
  properties,
6
7
  conditions
@@ -14,7 +15,11 @@ function defineProperties({
14
15
  if (Array.isArray(values)) {
15
16
  for (const value of values) {
16
17
  const defaultClass = css.style({
17
- [property]: value
18
+ "@layer": {
19
+ [layers_css.blocksLayerAtom]: {
20
+ [property]: value
21
+ }
22
+ }
18
23
  });
19
24
  const propResult = {
20
25
  defaultClass
@@ -26,9 +31,13 @@ function defineProperties({
26
31
  }
27
32
  if (typeof condition === "object" && condition["@media"]) {
28
33
  return css.style({
29
- "@media": {
30
- [condition["@media"]]: {
31
- [property]: value
34
+ "@layer": {
35
+ [layers_css.blocksLayerAtom]: {
36
+ "@media": {
37
+ [condition["@media"]]: {
38
+ [property]: value
39
+ }
40
+ }
32
41
  }
33
42
  }
34
43
  });
@@ -45,7 +54,11 @@ function defineProperties({
45
54
  }
46
55
  for (const value in values) {
47
56
  const defaultClass = css.style({
48
- [property]: values[value]
57
+ "@layer": {
58
+ [layers_css.blocksLayerAtom]: {
59
+ [property]: values[value]
60
+ }
61
+ }
49
62
  });
50
63
  const propResult = {
51
64
  defaultClass
package/dist/atoms/defineProperties.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { style } from "@vanilla-extract/css";
2
+ import { blocksLayerAtom } from "../css/layers.css.js";
2
3
  function defineProperties({
3
4
  properties,
4
5
  conditions
@@ -12,7 +13,11 @@ function defineProperties({
12
13
  if (Array.isArray(values)) {
13
14
  for (const value of values) {
14
15
  const defaultClass = style({
15
- [property]: value
16
+ "@layer": {
17
+ [blocksLayerAtom]: {
18
+ [property]: value
19
+ }
20
+ }
16
21
  });
17
22
  const propResult = {
18
23
  defaultClass
@@ -24,9 +29,13 @@ function defineProperties({
24
29
  }
25
30
  if (typeof condition === "object" && condition["@media"]) {
26
31
  return style({
27
- "@media": {
28
- [condition["@media"]]: {
29
- [property]: value
32
+ "@layer": {
33
+ [blocksLayerAtom]: {
34
+ "@media": {
35
+ [condition["@media"]]: {
36
+ [property]: value
37
+ }
38
+ }
30
39
  }
31
40
  }
32
41
  });
@@ -43,7 +52,11 @@ function defineProperties({
43
52
  }
44
53
  for (const value in values) {
45
54
  const defaultClass = style({
46
- [property]: values[value]
55
+ "@layer": {
56
+ [blocksLayerAtom]: {
57
+ [property]: values[value]
58
+ }
59
+ }
47
60
  });
48
61
  const propResult = {
49
62
  defaultClass
package/dist/css/layers.css.cjs CHANGED
@@ -3,6 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const fileScope = require("@vanilla-extract/css/fileScope");
4
4
  const css = require("@vanilla-extract/css");
5
5
  fileScope.setFileScope("src/css/layers.css.ts", "@blockle/blocks-core");
6
- const blocksLayer = css.layer("blockle-blocks");
6
+ const blocksLayerComponent = css.layer("blocks-component");
7
+ const blocksLayerAtom = css.layer(
8
+ { parent: blocksLayerComponent },
9
+ "blocks-atom"
10
+ );
11
+ const blocksLayer = css.layer({ parent: blocksLayerAtom }, "blockle-blocks");
7
12
  fileScope.endFileScope();
8
13
  exports.blocksLayer = blocksLayer;
14
+ exports.blocksLayerAtom = blocksLayerAtom;
15
+ exports.blocksLayerComponent = blocksLayerComponent;
package/dist/css/layers.css.d.ts CHANGED
@@ -1 +1,3 @@
1
+ export declare const blocksLayerComponent: string;
2
+ export declare const blocksLayerAtom: string;
1
3
  export declare const blocksLayer: string;
package/dist/css/layers.css.js CHANGED
@@ -1,8 +1,15 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
2
  import { layer } from "@vanilla-extract/css";
3
3
  setFileScope("src/css/layers.css.ts", "@blockle/blocks-core");
4
- const blocksLayer = layer("blockle-blocks");
4
+ const blocksLayerComponent = layer("blocks-component");
5
+ const blocksLayerAtom = layer(
6
+ { parent: blocksLayerComponent },
7
+ "blocks-atom"
8
+ );
9
+ const blocksLayer = layer({ parent: blocksLayerAtom }, "blockle-blocks");
5
10
  endFileScope();
6
11
  export {
7
- blocksLayer
12
+ blocksLayer,
13
+ blocksLayerAtom,
14
+ blocksLayerComponent
8
15
  };
package/dist/css/vars.css.d.ts CHANGED
@@ -1,75 +1,75 @@
1
1
  export declare const vars: {
2
2
  space: {
3
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4
- none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5
- gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3
+ medium: `var(--${string})`;
4
+ none: `var(--${string})`;
5
+ gutter: `var(--${string})`;
6
+ xsmall: `var(--${string})`;
7
+ small: `var(--${string})`;
8
+ large: `var(--${string})`;
9
+ xlarge: `var(--${string})`;
10
10
  };
11
11
  borderRadius: {
12
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
13
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
+ medium: `var(--${string})`;
13
+ small: `var(--${string})`;
14
+ large: `var(--${string})`;
15
+ xlarge: `var(--${string})`;
16
16
  };
17
17
  color: {
18
- white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
19
- black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
- body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
- primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
26
- secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
- text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
- textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
- textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
18
+ white: `var(--${string})`;
19
+ black: `var(--${string})`;
20
+ body: `var(--${string})`;
21
+ primaryLight: `var(--${string})`;
22
+ primary: `var(--${string})`;
23
+ primaryDark: `var(--${string})`;
24
+ secondaryLight: `var(--${string})`;
25
+ secondary: `var(--${string})`;
26
+ secondaryDark: `var(--${string})`;
27
+ text: `var(--${string})`;
28
+ textLight: `var(--${string})`;
29
+ textDark: `var(--${string})`;
30
+ danger: `var(--${string})`;
31
+ link: `var(--${string})`;
32
32
  };
33
33
  borderWidth: {
34
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ medium: `var(--${string})`;
35
+ small: `var(--${string})`;
36
+ large: `var(--${string})`;
37
37
  };
38
38
  fontFamily: {
39
- body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
41
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
+ body: `var(--${string})`;
40
+ primary: `var(--${string})`;
41
+ secondary: `var(--${string})`;
42
42
  };
43
43
  fontSize: {
44
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
45
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
47
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
48
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
44
+ medium: `var(--${string})`;
45
+ xsmall: `var(--${string})`;
46
+ small: `var(--${string})`;
47
+ large: `var(--${string})`;
48
+ xlarge: `var(--${string})`;
49
49
  };
50
50
  fontWeight: {
51
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
- strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
+ regular: `var(--${string})`;
52
+ medium: `var(--${string})`;
53
+ strong: `var(--${string})`;
54
54
  };
55
55
  lineHeight: {
56
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
+ medium: `var(--${string})`;
57
+ xsmall: `var(--${string})`;
58
+ small: `var(--${string})`;
59
+ large: `var(--${string})`;
60
+ xlarge: `var(--${string})`;
61
61
  };
62
62
  transition: {
63
- slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
- normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
- fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ slow: `var(--${string})`;
64
+ normal: `var(--${string})`;
65
+ fast: `var(--${string})`;
66
66
  };
67
67
  shadow: {
68
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
68
+ medium: `var(--${string})`;
69
+ small: `var(--${string})`;
70
+ large: `var(--${string})`;
71
71
  };
72
72
  focus: {
73
- boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
+ boxShadow: `var(--${string})`;
74
74
  };
75
75
  };
package/dist/index.cjs CHANGED
@@ -20,6 +20,8 @@ const cssMatrixUtils = require("./css/cssMatrixUtils.cjs");
20
20
  exports.breakpointNames = breakpoint.breakpointNames;
21
21
  exports.minMediaQuery = breakpoint.minMediaQuery;
22
22
  exports.blocksLayer = layers_css.blocksLayer;
23
+ exports.blocksLayerAtom = layers_css.blocksLayerAtom;
24
+ exports.blocksLayerComponent = layers_css.blocksLayerComponent;
23
25
  exports.rem = rem.rem;
24
26
  exports.vars = vars_css.vars;
25
27
  exports.makeComponentTheme = makeComponentTheme.makeComponentTheme;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes';
2
2
  export type { ThemeTokens } from './config/themeTokens';
3
3
  export { breakpointNames, minMediaQuery } from './css/breakpoint/breakpoint';
4
- export { blocksLayer } from './css/layers.css';
4
+ export { blocksLayer, blocksLayerAtom, blocksLayerComponent, } from './css/layers.css';
5
5
  export { rem } from './css/rem';
6
6
  export { vars } from './css/vars.css';
7
7
  export { makeComponentTheme } from './theme/makeComponentTheme';
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { breakpointNames, minMediaQuery } from "./css/breakpoint/breakpoint.js";
2
- import { blocksLayer } from "./css/layers.css.js";
2
+ import { blocksLayer, blocksLayerAtom, blocksLayerComponent } from "./css/layers.css.js";
3
3
  import { rem } from "./css/rem.js";
4
4
  import { vars } from "./css/vars.css.js";
5
5
  import { makeComponentTheme } from "./theme/makeComponentTheme.js";
@@ -20,6 +20,8 @@ export {
20
20
  atomicProperties,
21
21
  atoms,
22
22
  blocksLayer,
23
+ blocksLayerAtom,
24
+ blocksLayerComponent,
23
25
  breakpointNames,
24
26
  classnames,
25
27
  composeRefs,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-core",
3
- "version": "0.21.9",
3
+ "version": "0.21.11",
4
4
  "description": "Core for Blocks",
5
5
  "type": "module",
6
6
  "sideEffects": false,