@blockle/blocks-core 0.22.0 → 0.24.0

package/dist/atoms/atoms.css.js

@@ -3,7 +3,11 @@ import { minMediaQuery } from "../css/breakpoint/breakpoint.js";
 import { vars } from "../css/vars.css.js";
 import { defineProperties } from "./defineProperties.js";
 setFileScope("src/atoms/atoms.css.ts", "@blockle/blocks-core");
-const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const colorsWithCurrentColor = {
+  ...vars.color,
+  currentColor: "currentColor",
+  transparent: "transparent"
+};
 const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const marginSpace = { auto: "auto", ...vars.space };
 const unresponsiveAtomicProperties = defineProperties({

package/dist/config/themeTokens.d.ts

@@ -6,7 +6,19 @@ type BorderWidth = 'small' | 'medium' | 'large';
 type BoxShadow = 'small' | 'medium' | 'large';
 type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
+type ColorPalette = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+type Color = {
+    white: string;
+    black: string;
+    primary: Record<ColorPalette, string>;
+    secondary: Record<ColorPalette, string>;
+    success: Record<ColorPalette, string>;
+    warning: Record<ColorPalette, string>;
+    danger: Record<ColorPalette, string>;
+    info: Record<ColorPalette, string>;
+    text: Record<ColorPalette, string>;
+    background: Record<ColorPalette, string>;
+};
 export type ThemeTokens = {
     typography: {
         fontFamily: {
@@ -28,6 +40,6 @@ export type ThemeTokens = {
     focus: {
         boxShadow: string;
     };
-    color: Record<Color, string>;
+    color: Color;
 };
 export {};

package/dist/css/tokens.d.ts

@@ -1,2 +1,3 @@
 import { ThemeTokens } from '../config/themeTokens.js';
-export declare const tokens: ThemeTokens;
+import { DeepNullable } from '../utils/typing/helpers.js';
+export declare const tokens: DeepNullable<ThemeTokens>;

package/dist/css/tokens.js

@@ -1,80 +1,87 @@
+const colorPalette = {
+  100: null,
+  200: null,
+  300: null,
+  400: null,
+  500: null,
+  600: null,
+  700: null,
+  800: null,
+  900: null
+};
 const tokens = {
   typography: {
     fontFamily: {
-      body: "Roboto, sans-serif",
-      primary: "Roboto, sans-serif",
-      secondary: "Roboto, sans-serif"
+      body: null,
+      primary: null,
+      secondary: null
     },
     fontSize: {
-      xsmall: "0.75rem",
-      small: "0.875rem",
-      medium: "1rem",
-      large: "1.125rem",
-      xlarge: "1.25rem"
+      xsmall: null,
+      small: null,
+      medium: null,
+      large: null,
+      xlarge: null
     },
     fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
+      regular: null,
+      medium: null,
+      strong: null
     },
     lineHeight: {
-      xsmall: "1rem",
-      small: "1.25rem",
-      medium: "1.5rem",
-      large: "1.75rem",
-      xlarge: "2rem"
+      xsmall: null,
+      small: null,
+      medium: null,
+      large: null,
+      xlarge: null
     }
   },
   spacing: {
-    none: 0,
-    gutter: "1rem",
-    xsmall: "0.25rem",
-    small: "0.5rem",
-    medium: "1rem",
-    large: "1.5rem",
-    xlarge: "2rem"
+    none: null,
+    gutter: null,
+    xsmall: null,
+    small: null,
+    medium: null,
+    large: null,
+    xlarge: null
   },
   transition: {
-    slow: "500ms",
-    normal: "300ms",
-    fast: "100ms"
+    slow: null,
+    normal: null,
+    fast: null
   },
   border: {
     radius: {
-      small: "0.25rem",
-      medium: "0.5rem",
-      large: "1rem",
-      xlarge: "2rem"
+      small: null,
+      medium: null,
+      large: null,
+      xlarge: null
     },
     width: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
+      small: null,
+      medium: null,
+      large: null
     }
   },
   shadow: {
-    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
-    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
+    small: null,
+    medium: null,
+    large: null
   },
   focus: {
-    boxShadow: "0 0 0 2px #AF8EFF"
+    boxShadow: null
   },
   color: {
-    black: "#000000",
-    white: "#ffffff",
-    body: "#ffffff",
-    primaryLight: "#f5f5f5",
-    primary: "#e0e0e0",
-    primaryDark: "#aeaeae",
-    secondaryLight: "#f5f5f5",
-    secondary: "#e0e0e0",
-    secondaryDark: "#aeaeae",
-    text: "#000000",
-    textLight: "#ffffff",
-    textDark: "#aeaeae",
-    danger: "#ff0000",
-    link: "#0000ff"
+    black: null,
+    white: null,
+    primary: colorPalette,
+    secondary: colorPalette,
+    success: colorPalette,
+    warning: colorPalette,
+    danger: colorPalette,
+    info: colorPalette,
+    background: colorPalette,
+    text: colorPalette
   }
 };
 export {

package/dist/css/vars.css.d.ts

@@ -17,18 +17,78 @@ export declare const vars: {
     color: {
         white: `var(--${string})`;
         black: `var(--${string})`;
-        body: `var(--${string})`;
-        primaryLight: `var(--${string})`;
-        primary: `var(--${string})`;
-        primaryDark: `var(--${string})`;
-        secondaryLight: `var(--${string})`;
-        secondary: `var(--${string})`;
-        secondaryDark: `var(--${string})`;
-        text: `var(--${string})`;
-        textLight: `var(--${string})`;
-        textDark: `var(--${string})`;
-        danger: `var(--${string})`;
-        link: `var(--${string})`;
+        "background-100": `var(--${string})`;
+        "background-200": `var(--${string})`;
+        "background-300": `var(--${string})`;
+        "background-400": `var(--${string})`;
+        "background-500": `var(--${string})`;
+        "background-600": `var(--${string})`;
+        "background-700": `var(--${string})`;
+        "background-800": `var(--${string})`;
+        "background-900": `var(--${string})`;
+        "primary-100": `var(--${string})`;
+        "primary-200": `var(--${string})`;
+        "primary-300": `var(--${string})`;
+        "primary-400": `var(--${string})`;
+        "primary-500": `var(--${string})`;
+        "primary-600": `var(--${string})`;
+        "primary-700": `var(--${string})`;
+        "primary-800": `var(--${string})`;
+        "primary-900": `var(--${string})`;
+        "secondary-100": `var(--${string})`;
+        "secondary-200": `var(--${string})`;
+        "secondary-300": `var(--${string})`;
+        "secondary-400": `var(--${string})`;
+        "secondary-500": `var(--${string})`;
+        "secondary-600": `var(--${string})`;
+        "secondary-700": `var(--${string})`;
+        "secondary-800": `var(--${string})`;
+        "secondary-900": `var(--${string})`;
+        "success-100": `var(--${string})`;
+        "success-200": `var(--${string})`;
+        "success-300": `var(--${string})`;
+        "success-400": `var(--${string})`;
+        "success-500": `var(--${string})`;
+        "success-600": `var(--${string})`;
+        "success-700": `var(--${string})`;
+        "success-800": `var(--${string})`;
+        "success-900": `var(--${string})`;
+        "warning-100": `var(--${string})`;
+        "warning-200": `var(--${string})`;
+        "warning-300": `var(--${string})`;
+        "warning-400": `var(--${string})`;
+        "warning-500": `var(--${string})`;
+        "warning-600": `var(--${string})`;
+        "warning-700": `var(--${string})`;
+        "warning-800": `var(--${string})`;
+        "warning-900": `var(--${string})`;
+        "danger-100": `var(--${string})`;
+        "danger-200": `var(--${string})`;
+        "danger-300": `var(--${string})`;
+        "danger-400": `var(--${string})`;
+        "danger-500": `var(--${string})`;
+        "danger-600": `var(--${string})`;
+        "danger-700": `var(--${string})`;
+        "danger-800": `var(--${string})`;
+        "danger-900": `var(--${string})`;
+        "info-100": `var(--${string})`;
+        "info-200": `var(--${string})`;
+        "info-300": `var(--${string})`;
+        "info-400": `var(--${string})`;
+        "info-500": `var(--${string})`;
+        "info-600": `var(--${string})`;
+        "info-700": `var(--${string})`;
+        "info-800": `var(--${string})`;
+        "info-900": `var(--${string})`;
+        "text-100": `var(--${string})`;
+        "text-200": `var(--${string})`;
+        "text-300": `var(--${string})`;
+        "text-400": `var(--${string})`;
+        "text-500": `var(--${string})`;
+        "text-600": `var(--${string})`;
+        "text-700": `var(--${string})`;
+        "text-800": `var(--${string})`;
+        "text-900": `var(--${string})`;
     };
     borderWidth: {
         medium: `var(--${string})`;
@@ -36,9 +96,9 @@ export declare const vars: {
         large: `var(--${string})`;
     };
     fontFamily: {
-        body: `var(--${string})`;
         primary: `var(--${string})`;
         secondary: `var(--${string})`;
+        body: `var(--${string})`;
     };
     fontSize: {
         medium: `var(--${string})`;

package/dist/css/vars.css.js

@@ -3,7 +3,12 @@ import { createThemeContract } from "@vanilla-extract/css";
 import { makeVanillaTheme } from "../theme/makeVanillaTheme.js";
 import { tokens } from "./tokens.js";
 setFileScope("src/css/vars.css.ts", "@blockle/blocks-core");
-const vars = createThemeContract(makeVanillaTheme(tokens));
+const vars = createThemeContract(
+  makeVanillaTheme(
+    // Allow tokens with null values here to create the theme contract
+    tokens
+  )
+);
 endFileScope();
 export {
   vars

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export type { Theme } from './theme/makeTheme.js';
 export { classnames } from './utils/classnames/classnames.js';
 export { hasAnimationDuration } from './utils/dom/hasAnimationDuration.js';
 export { alignItemsMap, justifyContentMap, type AlignItemsMap, type JustifyContentMap, } from './utils/flexbox/flexbox.js';
-export { getBoundValue, roundToPrecision } from './utils/math/math.js';
+export { clampAndRoundValue } from './utils/math/math.js';
 export { mergeProps } from './utils/react/mergeProps.js';
 export { composeRefs } from './utils/react/refs.js';
 export { isObjectLike, type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers.js';

package/dist/index.js

@@ -7,7 +7,7 @@ import { makeTheme } from "./theme/makeTheme.js";
 import { classnames } from "./utils/classnames/classnames.js";
 import { hasAnimationDuration } from "./utils/dom/hasAnimationDuration.js";
 import { alignItemsMap, justifyContentMap } from "./utils/flexbox/flexbox.js";
-import { getBoundValue, roundToPrecision } from "./utils/math/math.js";
+import { clampAndRoundValue } from "./utils/math/math.js";
 import { mergeProps } from "./utils/react/mergeProps.js";
 import { composeRefs } from "./utils/react/refs.js";
 import { isObjectLike } from "./utils/typing/helpers.js";
@@ -23,11 +23,11 @@ export {
   blocksLayerAtom,
   blocksLayerComponent,
   breakpointNames,
+  clampAndRoundValue,
   classnames,
   composeRefs,
   cssValueToNumber,
   getAtomsAndProps,
-  getBoundValue,
   getCSSScale,
   getOriginalElementSize,
   hasAnimationDuration,
@@ -39,6 +39,5 @@ export {
   minMediaQuery,
   parseCSSTransform,
   rem,
-  roundToPrecision,
   vars
 };

package/dist/theme/makeVanillaTheme.d.ts

@@ -2,7 +2,7 @@ import { ThemeTokens } from '../config/themeTokens.js';
 export declare const makeVanillaTheme: (tokens: ThemeTokens) => {
     space: Record<keyof typeof tokens.spacing, string>;
     borderRadius: Record<keyof typeof tokens.border.radius, string>;
-    color: Record<keyof typeof tokens.color, string>;
+    color: Record<"white" | "black" | "background-100" | "background-200" | "background-300" | "background-400" | "background-500" | "background-600" | "background-700" | "background-800" | "background-900" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "text-100" | "text-200" | "text-300" | "text-400" | "text-500" | "text-600" | "text-700" | "text-800" | "text-900", string>;
     borderWidth: Record<keyof typeof tokens.border.width, string>;
     fontFamily: Record<keyof typeof tokens.typography.fontFamily, string>;
     fontSize: Record<keyof typeof tokens.typography.fontSize, string>;

package/dist/theme/makeVanillaTheme.js

@@ -1,8 +1,18 @@
 const makeVanillaTheme = (tokens) => {
+  const color = {};
+  for (const [colorName, colorValue] of Object.entries(tokens.color)) {
+    if (typeof colorValue === "string" || colorValue === null) {
+      color[colorName] = colorValue;
+      continue;
+    }
+    for (const [shade, shadeValue] of Object.entries(colorValue)) {
+      color[`${colorName}-${shade}`] = shadeValue;
+    }
+  }
   return {
     space: tokens.spacing,
     borderRadius: tokens.border.radius,
-    color: tokens.color,
+    color,
     borderWidth: tokens.border.width,
     fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.fontSize,

package/dist/utils/math/math.d.ts

@@ -1,2 +1 @@
-export declare function roundToPrecision(value: number, precision: number): number;
-export declare function getBoundValue(newValue: number, min: number, max: number, step: number): number;
+export declare function clampAndRoundValue(newValue: number, min: number, max: number, step: number): number;

package/dist/utils/math/math.js

@@ -1,13 +1,7 @@
-function roundToPrecision(value, precision) {
-  const factor = 10 ** precision;
-  return Math.round(value * factor) / factor;
-}
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
+function clampAndRoundValue(newValue, min, max, step) {
+  const value = Math.round(newValue / step) * step;
+  return Math.max(min, Math.min(max, value));
 }
 export {
-  getBoundValue,
-  roundToPrecision
+  clampAndRoundValue
 };

package/dist/utils/math/math.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/typing/helpers.d.ts

@@ -1,12 +1,34 @@
 import { Atoms } from '../../atoms/atoms.js';
 export type AnyString = string & {};
+export type RecordLike = Record<string | number, unknown>;
 /**
  * Suggest a type for a string literal but also allow any string.
  */
 export type OptionalLiteral<T extends string> = T | AnyString;
-export type RecordLike = Record<string | number, unknown>;
 export declare function isObjectLike<T extends RecordLike>(value: T): value is T;
 export type IsStringUnion<T> = T extends string ? string extends T ? false : true : false;
 export type IsNumberUnion<T> = T extends number ? number extends T ? false : true : false;
 export type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;
 export type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
+/**
+ * Convert a nested record type to a union of dot-separated paths.
+ *
+ * Example:
+ * ```ts
+ * type Foo = RecordToUnionPath<{
+ *   a: string;
+ *   b: { c: { d: string }; d: number };
+ *   55: {
+ *     100: string[];
+ *     200: [string];
+ *   };
+ * }>;
+ * // Result: "a" | "b.c.d" | "b.d" | "e.f" | "e.g" | "55.100" | "55.200"
+ * ```
+ */
+export type RecordToUnionPath<TObject, TDelimiter extends string = '.'> = TObject extends RecordLike ? {
+    [K in keyof TObject]: TObject[K] extends RecordLike ? K extends string | number ? `${K}${TDelimiter}${RecordToUnionPath<TObject[K], TDelimiter>}` : never : K;
+}[keyof TObject] : TObject;
+export type DeepNullable<T> = {
+    [P in keyof T]: T[P] extends RecordLike ? DeepNullable<T[P]> : T[P] | null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-core",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -34,6 +34,6 @@
     "@vanilla-extract/css": "^1.17.1"
   },
   "peerDependencies": {
-    "@vanilla-extract/css": ">= 1.17.1"
+    "@vanilla-extract/css": ">=1.17.1"
   }
 }