@bedrock-layout/spacing-constants - npm Package Compare versions

Comparing version 2.9.0 to 3.0.0

lib/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function i(n){return typeof n!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(e=>e.test(n))}const y="0px",v="0.0625rem",h="0.125rem",O="0.25rem",L="0.5rem",V="0.75rem",z="1rem",C="1.5rem",k="2rem",G="3rem",j="4rem",m={none:y,xxs:v,xs:h,sm:O,md:L,mdLg:V,lg:z,lgXl:C,xl:k,xlXXl:G,xxl:j},D=159,P=319,X=639,p=1023,x=1199,g=1439,u=1920,S={xxsmall:`${D}px`,xsmall:`${P}px`,small:`${X}px`,medium:`${p}px`,large:`${x}px`,xlarge:`${g}px`,xxlarge:`${u}px`};function f(n){return n.reduce((e,[t,r])=>({...e,[t]:r}),{})}const d=(n,e)=>{var s,l;const t=(l=(s=n.space)!=null?s:n.spacing)!=null?l:m,o=f(Object.entries(t).map(([$,c])=>[$,typeof c=="number"?`${c}px`:c]))[e];return i(o)?o:void 0};function B(n,e){return typeof e=="number"&&e>0?`${e}px`:i(e)?e:e!==void 0?d(n,e):void 0}function I({gutter:n},e){n===void 0||typeof n=="number"||typeof n=="string"||console.error(`${e} needs to be a number, CSSLength or SizesOptions`)}const M=I,_=(n,e)=>{var o;if(typeof e=="number"||e===void 0)return;const t=(o=n.sizes)!=null?o:S;return f(Object.entries(t).map(([a,s])=>[a,typeof s=="number"?`${s}px`:s]))[e]},w=639,E=[640,1023],T=[1024,1199],q=[1200,1439],b={smallOnly:w,mediumOnly:E,largeOnly:T,xlargeOnly:q,medium:p,large:x,xlarge:g,xxlarge:u},A=(n={})=>({...b,...n});exports.breakPoints=b;exports.checkIsCSSLength=i;exports.getSafeGutter=B;exports.getSizeValue=_;exports.getSpacingValue=d;exports.mergeBreakpoints=A;exports.sizes=S;exports.spacing=m;exports.validateGutter=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("open-props"),c=require("react"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},g=p(l),x=p(c);function u(e){return e!=null?e:void 0}const f=c.createContext({});function b(){var e;return(e=c.useContext(f))!=null?e:{}}function h({theme:e,children:t}){return x.default.createElement(f.Provider,{value:e},t)}function z(e){return e.reduce((t,[i,s])=>({...t,[i]:s}),{})}const{sizeXxs:v,sizeXs:C,sizeSm:T,sizeMd:O,sizeLg:_,sizeXl:y,sizeXxl:P,sizeContent1:$,sizeContent2:j,sizeContent3:D,sizeHeader1:L,sizeHeader2:M,sizeHeader3:V,size000:X,size00:H,size1:k,size2:q,size3:E,size4:G,size5:I,size6:R,size7:w,size8:A,size9:B,size10:F,size11:J,size12:N,size13:Q,size14:U,size15:W}=g.default,Y={size000:X,size00:H,size1:k,size2:q,size3:E,size4:G,size5:I,size6:R,size7:w,size8:A,size9:B,size10:F,size11:J,size12:N,size13:Q,size14:U,size15:W},Z={sizeXxs:v,sizeXs:C,sizeSm:T,sizeMd:O,sizeLg:_,sizeXl:y,sizeXxl:P,sizeContent1:$,sizeContent2:j,sizeContent3:D,sizeHeader1:L,sizeHeader2:M,sizeHeader3:V},m=Y,d=Z;function a(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}function S(e,t){var r;const i=(r=e.space)!=null?r:m,s=z(Object.entries(i).map(([o,n])=>[o,typeof n=="number"?`${n}px`:n]));return u(s[t])}function K(e,t){if(t!==void 0)return typeof t=="number"&&t>0?`${t}px`:typeof t=="string"&&a(t)?t:u(S(e,t))}function ee(e,t){var r;if(t===void 0)return;if(typeof t=="number"&&t>0)return`${t}px`;if(typeof t=="string"&&a(t))return t;const i=(r=e.sizes)!=null?r:d,s=z(Object.entries(i).map(([o,n])=>[o,typeof n=="number"?`${n}px`:n]));return u(s[t])}exports.ThemeContext=f;exports.ThemeProvider=h;exports.checkIsCSSLength=a;exports.getSafeGutter=K;exports.getSizeValue=ee;exports.getSpacingValue=S;exports.sizes=d;exports.spacing=m;exports.useTheme=b;

lib/index.d.ts

@@ -1,73 +0,36 @@
-import type React from "react";
-import { DefaultTheme } from "styled-components";
-declare type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
-declare type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
-declare type NonEmptyString = `${AllCharacter}${string}`;
-declare type CSSCustomProperties = `var(--${NonEmptyString})`;
-declare type LengthUnit = "vmin" | "vmax" | "vh" | "vw" | "%" | "ch" | "ex" | "em" | "rem" | "in" | "cm" | "mm" | "pt" | "pc" | "px";
-export declare type CSSLength = `${number}${LengthUnit}` | CSSCustomProperties;
+import React from "react";
+type Maybe<T> = NonNullable<T> | undefined;
+export type DefaultTheme = {};
+export declare const ThemeContext: React.Context<DefaultTheme>;
+export declare function useTheme(): DefaultTheme;
+export declare function ThemeProvider({ theme, children, }: {
+    theme: DefaultTheme;
+    children: React.ReactNode;
+}): JSX.Element;
+type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
+type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
+type NonEmptyString = `${AllCharacter}${string}`;
+type CSSCustomProperties = `var(--${NonEmptyString})`;
+type LengthUnit = "vmin" | "vmax" | "vh" | "vw" | "%" | "ch" | "ex" | "em" | "rem" | "in" | "cm" | "mm" | "pt" | "pc" | "px";
+export type CSSLength = `${number}${LengthUnit}` | CSSCustomProperties;
+export declare const spacing: Record<"size000" | "size00" | "size1" | "size2" | "size3" | "size4" | "size5" | "size6" | "size7" | "size8" | "size9" | "size10" | "size11" | "size12" | "size13" | "size14" | "size15", CSSLength>;
+export declare const sizes: Record<"sizeXxs" | "sizeXs" | "sizeSm" | "sizeMd" | "sizeLg" | "sizeXl" | "sizeXxl" | "sizeContent1" | "sizeContent2" | "sizeContent3" | "sizeHeader1" | "sizeHeader2" | "sizeHeader3", CSSLength>;
 export declare function checkIsCSSLength(str: string): str is CSSLength;
-export interface Spacing {
-    none: CSSLength;
-    xxs: CSSLength;
-    xs: CSSLength;
-    sm: CSSLength;
-    md: CSSLength;
-    mdLg: CSSLength;
-    lg: CSSLength;
-    lgXl: CSSLength;
-    xl: CSSLength;
-    xlXXl: CSSLength;
-    xxl: CSSLength;
-}
-export interface Sizes {
-    xxsmall: CSSLength;
-    xsmall: CSSLength;
-    small: CSSLength;
-    medium: CSSLength;
-    large: CSSLength;
-    xlarge: CSSLength;
-    xxlarge: CSSLength;
-}
-export declare type BaseTheme = Record<string, CSSLength | string | number>;
-declare type ThemeOrDefaultSpace<T> = T extends {
+export type BaseTheme = Record<string, CSSLength | string | number>;
+type ThemeOrDefaultSpace<T> = T extends {
     space: BaseTheme;
-} ? T["space"] : T extends {
-    spacing: BaseTheme;
-} ? T["spacing"] : Spacing;
-declare type ThemeOrDefaultSizes<T> = T extends {
+} ? T["space"] : keyof typeof spacing;
+type ThemeOrDefaultSizes<T> = T extends {
     sizes: BaseTheme;
-} ? T["sizes"] : Sizes;
-export declare type SpacingOptions = ThemeOrDefaultSpace<DefaultTheme>;
-export declare type SizesOptions = ThemeOrDefaultSizes<DefaultTheme>;
-export declare const spacing: Record<string, CSSLength>;
-export declare const sizes: Sizes;
-declare type MaybeCSSLength = CSSLength | undefined;
-declare type GetSpacingValue = <T>(theme: T & {
-    spacing?: BaseTheme;
+} ? T["sizes"] : keyof typeof sizes;
+export type SpacingOptions = ThemeOrDefaultSpace<DefaultTheme>;
+export type SizesOptions = ThemeOrDefaultSizes<DefaultTheme>;
+export declare function getSpacingValue<T>(theme: T & {
     space?: BaseTheme;
-}, spacingKey: keyof Spacing | keyof SpacingOptions) => MaybeCSSLength;
-export declare const getSpacingValue: GetSpacingValue;
-export declare type Gutter = CSSLength | number | keyof SpacingOptions;
-export declare function getSafeGutter<T extends BaseTheme>(theme: T, gutter?: Gutter): MaybeCSSLength;
-export declare const validateGutter: React.Validator<Gutter>;
-declare type GetSizeValue = <T>(theme: T & {
+}, spacingKey: SpacingOptions): Maybe<CSSLength>;
+export type Gutter = CSSLength | number | SpacingOptions;
+export declare function getSafeGutter<T extends BaseTheme>(theme: T, gutter?: Gutter): Maybe<CSSLength>;
+export declare function getSizeValue<T>(theme: T & {
     sizes?: BaseTheme;
-}, sizingKey: unknown) => MaybeCSSLength;
-export declare const getSizeValue: GetSizeValue;
-declare type NumberTuple = [number, number];
-export interface BreakPoints {
-    smallOnly: number;
-    mediumOnly: NumberTuple;
-    largeOnly: NumberTuple;
-    xlargeOnly: NumberTuple;
-    medium: number;
-    large: number;
-    xlarge: number;
-    xxlarge: number;
-}
-export declare type BreakPointTypes = keyof BreakPoints;
-export declare const breakPoints: BreakPoints;
-declare type MergeBreakpoints = (breakPoints: Record<string, unknown>) => BreakPoints;
-export declare const mergeBreakpoints: MergeBreakpoints;
+}, sizeKey?: CSSLength | number | SizesOptions): Maybe<CSSLength>;
 export {};

lib/index.m.js

@@ -1,81 +0,132 @@
-function m(e) {
-  return typeof e != "string" ? !1 : [
+import m from "open-props";
+import u, { createContext as a, useContext as x } from "react";
+function c(n) {
+  return n != null ? n : void 0;
+}
+const f = a({});
+function _() {
+  var n;
+  return (n = x(f)) != null ? n : {};
+}
+function K({
+  theme: n,
+  children: e
+}) {
+  return /* @__PURE__ */ u.createElement(f.Provider, {
+    value: n
+  }, e);
+}
+function z(n) {
+  return n.reduce((e, [t, s]) => ({ ...e, [t]: s }), {});
+}
+const {
+  sizeXxs: d,
+  sizeXs: S,
+  sizeSm: b,
+  sizeMd: h,
+  sizeLg: C,
+  sizeXl: v,
+  sizeXxl: $,
+  sizeContent1: g,
+  sizeContent2: O,
+  sizeContent3: T,
+  sizeHeader1: X,
+  sizeHeader2: y,
+  sizeHeader3: D,
+  size000: H,
+  size00: P,
+  size1: j,
+  size2: E,
+  size3: L,
+  size4: M,
+  size5: V,
+  size6: k,
+  size7: l,
+  size8: w,
+  size9: G,
+  size10: I,
+  size11: R,
+  size12: q,
+  size13: A,
+  size14: B,
+  size15: F
+} = m, J = {
+  size000: H,
+  size00: P,
+  size1: j,
+  size2: E,
+  size3: L,
+  size4: M,
+  size5: V,
+  size6: k,
+  size7: l,
+  size8: w,
+  size9: G,
+  size10: I,
+  size11: R,
+  size12: q,
+  size13: A,
+  size14: B,
+  size15: F
+}, N = {
+  sizeXxs: d,
+  sizeXs: S,
+  sizeSm: b,
+  sizeMd: h,
+  sizeLg: C,
+  sizeXl: v,
+  sizeXxl: $,
+  sizeContent1: g,
+  sizeContent2: O,
+  sizeContent3: T,
+  sizeHeader1: X,
+  sizeHeader2: y,
+  sizeHeader3: D
+}, Q = J, U = N;
+function p(n) {
+  return typeof n != "string" ? !1 : [
     /^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,
     /^var\(--\D{1,100}\)$/
-  ].some((n) => n.test(e));
+  ].some((e) => e.test(n));
 }
-const u = "0px", d = "0.0625rem", $ = "0.125rem", b = "0.25rem", y = "0.5rem", O = "0.75rem", h = "1rem", v = "1.5rem", L = "2rem", C = "3rem", V = "4rem", z = {
-  none: u,
-  xxs: d,
-  xs: $,
-  sm: b,
-  md: y,
-  mdLg: O,
-  lg: h,
-  lgXl: v,
-  xl: L,
-  xlXXl: C,
-  xxl: V
-}, k = 159, D = 319, X = 639, l = 1023, x = 1199, p = 1439, f = 1920, j = {
-  xxsmall: `${k}px`,
-  xsmall: `${D}px`,
-  small: `${X}px`,
-  medium: `${l}px`,
-  large: `${x}px`,
-  xlarge: `${p}px`,
-  xxlarge: `${f}px`
-};
-function g(e) {
-  return e.reduce((n, [s, r]) => ({ ...n, [s]: r }), {});
-}
-const G = (e, n) => {
-  var t, a;
-  const s = (a = (t = e.space) != null ? t : e.spacing) != null ? a : z, o = g(
-    Object.entries(s).map(([S, c]) => [
-      S,
-      typeof c == "number" ? `${c}px` : c
+function W(n, e) {
+  var r;
+  const t = (r = n.space) != null ? r : Q, s = z(
+    Object.entries(t).map(([o, i]) => [
+      o,
+      typeof i == "number" ? `${i}px` : i
     ])
-  )[n];
-  return m(o) ? o : void 0;
-};
-function A(e, n) {
-  return typeof n == "number" && n > 0 ? `${n}px` : m(n) ? n : n !== void 0 ? G(e, n) : void 0;
+  );
+  return c(s[e]);
 }
-function w({ gutter: e }, n) {
-  e === void 0 || typeof e == "number" || typeof e == "string" || console.error(`${n} needs to be a number, CSSLength or SizesOptions`);
+function ee(n, e) {
+  if (e !== void 0)
+    return typeof e == "number" && e > 0 ? `${e}px` : typeof e == "string" && p(e) ? e : c(W(n, e));
 }
-const F = w, H = (e, n) => {
-  var o;
-  if (typeof n == "number" || n === void 0)
+function ne(n, e) {
+  var r;
+  if (e === void 0)
     return;
-  const s = (o = e.sizes) != null ? o : j;
-  return g(
-    Object.entries(s).map(([i, t]) => [
-      i,
-      typeof t == "number" ? `${t}px` : t
+  if (typeof e == "number" && e > 0)
+    return `${e}px`;
+  if (typeof e == "string" && p(e))
+    return e;
+  const t = (r = n.sizes) != null ? r : U, s = z(
+    Object.entries(t).map(([o, i]) => [
+      o,
+      typeof i == "number" ? `${i}px` : i
     ])
-  )[n];
-}, B = 639, E = [640, 1023], I = [1024, 1199], P = [1200, 1439], q = {
-  smallOnly: B,
-  mediumOnly: E,
-  largeOnly: I,
-  xlargeOnly: P,
-  medium: l,
-  large: x,
-  xlarge: p,
-  xxlarge: f
-}, J = (e = {}) => ({
-  ...q,
-  ...e
-});
+  );
+  return c(s[e]);
+}
 export {
-  q as breakPoints,
-  m as checkIsCSSLength,
-  A as getSafeGutter,
-  H as getSizeValue,
-  G as getSpacingValue,
-  J as mergeBreakpoints,
-  j as sizes,
-  z as spacing,
-  F as validateGutter
+  f as ThemeContext,
+  K as ThemeProvider,
+  p as checkIsCSSLength,
+  ee as getSafeGutter,
+  ne as getSizeValue,
+  W as getSpacingValue,
+  U as sizes,
+  Q as spacing,
+  _ as useTheme
 };

lib/index.umd.js

@@ -1,1 +0,1 @@
-(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s["spacing-constants"]={}))})(this,function(s){"use strict";function t(n){return typeof n!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(e=>e.test(n))}const a={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"},O=159,h=319,$=639,m=1023,f=1199,g=1439,u=1920,p={xxsmall:`${O}px`,xsmall:`${h}px`,small:`${$}px`,medium:`${m}px`,large:`${f}px`,xlarge:`${g}px`,xxlarge:`${u}px`};function x(n){return n.reduce((e,[o,l])=>({...e,[o]:l}),{})}const d=(n,e)=>{var i,b;const o=(b=(i=n.space)!=null?i:n.spacing)!=null?b:a,c=x(Object.entries(o).map(([k,r])=>[k,typeof r=="number"?`${r}px`:r]))[e];return t(c)?c:void 0};function v(n,e){return typeof e=="number"&&e>0?`${e}px`:t(e)?e:e!==void 0?d(n,e):void 0}function L({gutter:n},e){n===void 0||typeof n=="number"||typeof n=="string"||console.error(`${e} needs to be a number, CSSLength or SizesOptions`)}const V=L,z=(n,e)=>{var c;if(typeof e=="number"||e===void 0)return;const o=(c=n.sizes)!=null?c:p;return x(Object.entries(o).map(([y,i])=>[y,typeof i=="number"?`${i}px`:i]))[e]},S={smallOnly:639,mediumOnly:[640,1023],largeOnly:[1024,1199],xlargeOnly:[1200,1439],medium:m,large:f,xlarge:g,xxlarge:u},C=(n={})=>({...S,...n});s.breakPoints=S,s.checkIsCSSLength=t,s.getSafeGutter=v,s.getSizeValue=z,s.getSpacingValue=d,s.mergeBreakpoints=C,s.sizes=p,s.spacing=a,s.validateGutter=V,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(t,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("open-props"),require("react")):typeof define=="function"&&define.amd?define(["exports","open-props","react"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t["spacing-constants"]={},t.OpenProps,t.React))})(this,function(t,s,f){"use strict";const z=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=z(s),b=z(f);function u(e){return e!=null?e:void 0}const a=f.createContext({});function T(){var e;return(e=f.useContext(a))!=null?e:{}}function v({theme:e,children:n}){return b.default.createElement(a.Provider,{value:e},n)}function m(e){return e.reduce((n,[r,o])=>({...n,[r]:o}),{})}const{sizeXxs:C,sizeXs:y,sizeSm:x,sizeMd:O,sizeLg:_,sizeXl:P,sizeXxl:$,sizeContent1:j,sizeContent2:D,sizeContent3:L,sizeHeader1:M,sizeHeader2:V,sizeHeader3:X,size000:H,size00:k,size1:q,size2:E,size3:G,size4:I,size5:w,size6:A,size7:B,size8:F,size9:J,size10:N,size11:Q,size12:R,size13:U,size14:W,size15:Y}=l.default,Z={size000:H,size00:k,size1:q,size2:E,size3:G,size4:I,size5:w,size6:A,size7:B,size8:F,size9:J,size10:N,size11:Q,size12:R,size13:U,size14:W,size15:Y},K={sizeXxs:C,sizeXs:y,sizeSm:x,sizeMd:O,sizeLg:_,sizeXl:P,sizeXxl:$,sizeContent1:j,sizeContent2:D,sizeContent3:L,sizeHeader1:M,sizeHeader2:V,sizeHeader3:X},S=Z,h=K;function p(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(n=>n.test(e))}function g(e,n){var c;const r=(c=e.space)!=null?c:S,o=m(Object.entries(r).map(([d,i])=>[d,typeof i=="number"?`${i}px`:i]));return u(o[n])}function ee(e,n){if(n!==void 0)return typeof n=="number"&&n>0?`${n}px`:typeof n=="string"&&p(n)?n:u(g(e,n))}function ne(e,n){var c;if(n===void 0)return;if(typeof n=="number"&&n>0)return`${n}px`;if(typeof n=="string"&&p(n))return n;const r=(c=e.sizes)!=null?c:h,o=m(Object.entries(r).map(([d,i])=>[d,typeof i=="number"?`${i}px`:i]));return u(o[n])}t.ThemeContext=a,t.ThemeProvider=v,t.checkIsCSSLength=p,t.getSafeGutter=ee,t.getSizeValue=ne,t.getSpacingValue=g,t.sizes=h,t.spacing=S,t.useTheme=T,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "@bedrock-layout/spacing-constants",
-  "version": "2.9.0",
+  "version": "3.0.0",
   "description": "bedrock-layout spacing constants",
@@ -37,4 +37,4 @@ "sideEffects": false,
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "styled-components": ">=5"
+    "open-props": "^1.3.9",
+    "react": "^16.8 || ^17 || ^18"
   },
@@ -58,3 +58,3 @@ "repository": {
   },
-  "gitHead": "636641bffefe6a93b0db295904131687c2ef63d7"
+  "gitHead": "9ae10c12fea1c824280c460a6cbb06290a794b76"
 }

README.md

@@ -5,32 +5,64 @@ # `@bedrock-layout/spacing-constants`
 
-Spacing constants are the standard by which all spacing and layout decisions are made in the Bedrock Layout Primitives. Generally speaking, you won't typically need to pull these in to your App Directly since the Layout Primitives already implement them, but these do exist incase you ever need the raw values.
+Spacing constants are the standard by which all spacing and layout decisions are made in the Bedrock Layout Primitives. They are the building blocks of the system and are used to create all other spacing values.
 
-The spacing is built simply on `1rem` as the starting mid point and then doubling the value at each step above and halfing the value each step below. This comes down to the following spacings: `0`, `0.125rem`, `0.25rem`, `0.5rem`, `1rem`, `2rem`, `4rem`. Each one of these spacing points are then named based on t-shirt size or `none`, `xs`, `sm`, `md`, `lg`, `xl`, and `xxl` respectively.
+Bedrock Layout's spacing constants are based on the [Open-props size scale](https://open-props.style/#sizes).
 
-For the breakpoints, we are adopting the foundation breakpoint values. All values are given in `rems`. There are two types of constants, single value and range values. `medium`, `large`, `xlarge`, and `xxlarge` are intended communicate that size or smaller. The constants are `smallOnly`, `mediumOnly`, `largeOnly`, and `xlargeOnly` and will be an array with the first value being the lowerbound and the second value being the upperbound;.
+## Spacing constants
 
-## Usage
+```js
+{
+  space:{
+    size000: "-.5rem",
+    size00: "-.25rem",
+    size1: ".25rem",
+    size2: ".5rem",
+    size3: "1rem",
+    size4: "1.25rem",
+    size5: "1.5rem",
+    size6: "1.75rem",
+    size7: "2rem",
+    size8: "3rem",
+    size9: "4rem",
+    size10: "5rem",
+    size11: "7.5rem",
+    size12: "10rem",
+    size13: "15rem",
+    size14: "20rem",
+    size15: "30rem",
+  },
+  sizes: {
+    sizeContent1: "20ch",
+    sizeContent2: "45ch",
+    sizeContent3: "60ch",
+    sizeHeader1: "20ch",
+    sizeHeader2: "25ch",
+    sizeHeader3: "35ch",
+    sizeXxs: "240px",
+    sizeXs: "360px",
+    sizeSm: "480px",
+    sizeMd: "768px",
+    sizeLg: "1024px",
+    sizeXl: "1440px",
+    sizeXxl: "1920px",
+  }
+}
+```
 
-```javascript
-import { spacing, breakpoints } from '@bedrock-layout/spacing-constants';
+## Integrating With Your Design System
 
-spacing.sm; //0.25rem
+Bedrock Layout Primitives is designed to be able to be integrated easily into any design system or style guide. Bedrock's Spacing values can be overridden using the `ThemeProvider` provided by `@bedrock-layout/spacing-constants`.
 
-breakpoints.large; //64rem
-```
+Bedrock Layout Primitives follow the [System UI Theme Specification](https://system-ui.com/theme/#:~:text=This%20specification%20is%20a%20work%2Din%2Dprogress.&text=The%20theme%20object%20is%20intended,%2C%20and%2For%20design%20tokens) when overriding theme values. To override Bedrock Layout's default space values, you will need to pass in your new spacing values as an object of key/value pairs to the `space` key of the theme. For example, you can pass in the following object to override the default spacing values:
 
-## Overriding the values
+```jsx
+import { ThemeProvider } from '@bedrock-layout/spacing-constants';
 
-All of the Bedrock Layout Primitives are built using `styled-components`. In order to override the values of any or all of the constants, you can use the `ThemeProvider` to change the values. The `ThemeProvider` can be rendered at any level of the tree and will override the values at that point. [Check out the docs for `styled-components`](https://styled-components.com/docs/advanced#theming) for more details on how it works
-
-```javascript
-import { ThemeProvider } from 'styled-components';
-
 const newSpacings = {
-    sm:'45px',
-    xxlg:'100ch'
+    "0x": 0,
+    "1x":'45px',
+    "3x":'100ch'
 }
 
-<ThemeProvider theme={{spacing:newSpacings}}>
-    <Stack gutter="sm">
+<ThemeProvider theme={{ space: newSpacings }}>
+    <Stack gutter="1x">
      {...}
@@ -41,38 +73,36 @@ </Stack>
 
-### CSS Stylesheet
+The spacing values can either be any valid CSS size unit or percentage written as a string, or a positive number for the number of pixels
 
-You can also just bring in the CSS Stylesheet directly from the `lib` folder:
+## Overriding Spacing Types in TypeScript
 
-```javascript
-import "@bedrock-layout/css/lib/spacing-properties.css";
+If you are in a TypeScript project you will also need to override the default types. The spacing types are overridden by defining your theme types through [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html). For example, to define the types of you `newSpacings` from the example above, we need to create a type declaration file, for example `bedrock.d.ts`, in the same directory as your `index.tsx` file where we define our new spacing types. This file will look something like this:
 
-/* or import the minified version */
+```typescript
+import type { CSSLength } from "@bedrock-layout/spacing-constants";
 
-import "@bedrock-layout/css/lib/spacing-properties.min.css";
+declare module "@bedrock-layout/spacing-constants" {
+  export interface DefaultTheme {
+    space: {
+      "0x": number;
+      "1x": CSSLength;
+      "3x": CSSLength;
+    };
+  }
+}
 ```
 
-This will add the following custom properties to your stylesheets:
+It is important to note that space values can only be of type `string`, `CSSLength` or `number`. `CSSLength` is the prefered type over `string` since it will validate that your string is in the format of `${number}${length-unit}`. You can import the `CSSLength` type from the`@bedrock-layout/spacing-constants` package.
 
-```css
-:root {
-  --space-none: 0px;
-  --space-xxs: 0.0625rem;
-  --space-xs: 0.125rem;
-  --space-sm: 0.25rem;
-  --space-md: 0.5rem;
-  --space-mdLg: 0.75rem;
-  --space-lg: 1rem;
-  --space-lgXl: 1.5rem;
-  --space-xl: 2rem;
-  --space-xlXXl: 3rem;
-  --space-xxl: 4rem;
+**Note: If you use any other type for your space values, the types will revert back to Bedrock's default spacing types.**
 
-  --size-xxsmall: 159px;
-  --size-xsmall: 319px;
-  --size-small: 639px;
-  --size-medium: 1023px;
-  --size-large: 1199px;
-  --size-xlarge: 1439px;
-  --size-xxlarge: 1920px;
-}
+If you prefer to not to use the `ThemeProvider` and instead use CSS custom properties, you can simply pass in any custom property wrapped in `var()` to the `gutter` or `padding` prop, like this:
+
+```typescript
+  <Stack gutter="var(--size-3)">
+    {...}
+  </Stack>
 ```
+
+## No spacing in your design system
+
+In a perfect world we would only work on applications that have a well defined spacing system. However, there are many applications that do not have a well defined spacing system. For these applications, you can use any positive integer or valid `CSSLength` value for the spacing values.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15674

increased by13.16%

Lines of code

185

increased by10.12%

Number of lines in readme file

107

increased by38.96%

Worsened metrics

Number of low quality alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes