@reactberry/system 2.0.0-beta

package/src/themes/default/modes/light/theme.js

@@ -0,0 +1,74 @@
+import skinconfig from "./skins";
+import Logo from "../../assets/logo";
+import { getTransparent } from "../../utils";
+
+const theme = {
+  ...skinconfig,
+  main: {
+    width: "100vw",
+    minHeight: "100dvh",
+    bg: "palette.blues.0",
+  },
+  container: {
+    as: "main",
+    maxWidth: { _: "96vw", md: "88vw" },
+    mx: "auto",
+    p: { _: "m", md: "l" },
+  },
+  header: {
+    public: {
+      wrapper: {
+        height: "3.25rem",
+        borderBottom: "1px solid",
+        borderColor: "surface",
+        bg: getTransparent(skinconfig.colors.base, 0.9),
+        position: "fixed",
+        top: "0px",
+        zIndex: 9999,
+      },
+      container: {
+        width: "100%",
+        maxWidth: "17",
+        mx: "auto",
+        p: "small",
+      },
+      menu: {
+        item: {
+          highlight: {
+            bg: "brand",
+          },
+        },
+      },
+    },
+  },
+  heading: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      py: { _: "medium", md: "large" },
+    },
+    title: { fontWeight: 600, style: { textWrap: "balance" } },
+    subtitle: { color: "secondary" },
+    strap: { color: "tertiary" },
+  },
+  logo: {
+    asset: Logo,
+    color: "primary",
+    assetProps: {
+      width: "8rem",
+    },
+  },
+  footer: {
+    logo: {
+      asset: Logo,
+      color: "tertiary",
+      assetProps: {
+        mark: false,
+        width: "12rem",
+        height: "auto",
+      },
+    },
+    container: {},
+  },
+};
+export default theme;

package/src/themes/default/tokens/controls.js

@@ -0,0 +1,53 @@
+import { space } from "./space";
+
+export const controlSizes = {
+  xxxsmall: {
+    height: space[10],
+    paddingLeft: space.xs,
+    paddingRight: space.xs,
+    paddingTop: space.mini,
+    paddingBottom: space.mini,
+  },
+  xxsmall: {
+    height: space[11],
+    paddingLeft: space.xs,
+    paddingRight: space.xs,
+    paddingTop: space.mini,
+    paddingBottom: space.mini,
+  },
+  xsmall: {
+    height: space[12],
+    paddingLeft: space.s,
+    paddingRight: space.s,
+    paddingTop: space.xxxsmall,
+    paddingBottom: space.xxxsmall,
+  },
+  small: {
+    height: space[13],
+    paddingLeft: space.s,
+    paddingRight: space.s,
+    paddingTop: space.xxxsmall,
+    paddingBottom: space.xxxsmall,
+  },
+  medium: {
+    height: space[14],
+    paddingLeft: space.m,
+    paddingRight: space.m,
+    paddingTop: space.xsmall,
+    paddingBottom: space.xsmall,
+  },
+  large: {
+    height: space[15],
+    paddingLeft: space.xl,
+    paddingRight: space.xl,
+    paddingTop: space.xsmall,
+    paddingBottom: space.xsmall,
+  },
+  xlarge: {
+    height: space[16],
+    paddingLeft: space.xxl,
+    paddingRight: space.xxl,
+    paddingTop: space.xsmall,
+    paddingBottom: space.xsmall,
+  },
+};

package/src/themes/default/tokens/shadows.js

@@ -0,0 +1,63 @@
+export const shadows = {
+  xxsmall: {
+    "--shadow-color": "0deg 0% 50%",
+    boxShadow: `
+        0 1px 1px hsl(var(--shadow-color) / 0.0875),
+        0 2px 2px hsl(var(--shadow-color) / 0.05)
+      `,
+  },
+  xsmall: {
+    "--shadow-color": "0deg 0% 50%",
+    boxShadow: `
+      0 1px 1px hsl(var(--shadow-color) / 0.125),
+      0 2px 2px hsl(var(--shadow-color) / 0.125)
+    `,
+  },
+  small: {
+    "--shadow-color": "0deg 0% 50%",
+    boxShadow: `
+      0 2px 2px hsl(var(--shadow-color) / 0.125),
+      0 0 4px hsl(var(--shadow-color) / 0.125)
+    `,
+  },
+  medium: {
+    "--shadow-color": "0deg 0% 50%",
+    boxShadow: `
+      0 2px 2px hsl(var(--shadow-color) / 0.25),
+      0 4px 4px hsl(var(--shadow-color) / 0.125),
+      0 6px 6px hsl(var(--shadow-color) / 0.125)
+    `,
+  },
+  large: {
+    "--shadow-color": "0deg 0% 50%",
+    boxShadow: `
+      0 2px 2px hsl(var(--shadow-color) / 0.125),
+      0 4px 4px hsl(var(--shadow-color) / 0.125),
+      0 8px 8px hsl(var(--shadow-color) / 0.125),
+      0 16px 16px hsl(var(--shadow-color) / 0.125),
+      0 24px 24px hsl(var(--shadow-color) / 0.125)
+    `,
+  },
+};
+
+// export const shadows = {
+//   xsmall: {
+//     "--shadow-color": "rgb(0 0 0 / 0.05);",
+//     boxShadow: " 0px 2px 4px var(--shadow-color)",
+//   },
+//   small: {
+//     "--shadow-color": "rgb(0 0 0 / 0.1);",
+//     boxShadow:
+//       " 0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color),0px 3px 3px -1.5px var(--shadow-color),0px 6px 6px -3px var(--shadow-color)",
+//   },
+//   medium: {
+//     "--shadow-color": "rgb(0 0 0 / 0.075);",
+//     boxShadow:
+//       "0px 6px 6px -3px var(--shadow-color), 0px 12px 12px -6px var(--shadow-color), 0px 24px 24px -12px var(--shadow-color);",
+//   },
+//   large: {
+//     "--shadow-color": "rgb(0 0 0 / 0.12);",
+//     boxShadow:
+//       " 0px 0px 0px 0.5px var(--shadow-color), var(--shadow-color) 0px 50px 100px -20px, var(--shadow-color) 0px 30px 60px -30px;",
+//   },
+// };

package/src/themes/default/tokens/shapes.js

@@ -0,0 +1,37 @@
+export const radii = [
+  "0px",
+  "2px",
+  "3px",
+  "4px",
+  "6px",
+  "8px",
+  "12px",
+  "16px",
+  "32px",
+  "50%",
+];
+
+export const shapes = {
+  square: { "border-radius": radii[0] },
+  roundedSmall: { "border-radius": radii[3] },
+  rounded: { "border-radius": radii[5] },
+  roundedLarge: { "border-radius": radii[7] },
+  pill: { "border-radius": radii[8] },
+  circle: { "border-radius": radii[9] },
+  roundedTop: {
+    "border-top-left-radius": radii[4],
+    "border-top-right-radius": radii[4],
+  },
+  roundedBottom: {
+    "border-bottom-left-radius": radii[4],
+    "border-bottom-right-radius": radii[4],
+  },
+  roundedLeft: {
+    "border-top-left-radius": radii[4],
+    "border-bottom-left-radius": radii[4],
+  },
+  roundedRight: {
+    "border-top-right-radius": radii[4],
+    "border-bottom-right-radius": radii[4],
+  },
+};

package/src/themes/default/tokens/space.js

@@ -0,0 +1,143 @@
+export const breakpoints = ["32rem", "48rem", "64rem", "80rem", "96rem"];
+// Breakpoints alias
+breakpoints.xs = breakpoints[0];
+breakpoints.sm = breakpoints[1];
+breakpoints.md = breakpoints[2];
+breakpoints.lg = breakpoints[3];
+breakpoints.xl = breakpoints[4];
+
+export const space = [
+  "0rem",
+  "0.125rem",
+  "0.25rem",
+  "0.375rem",
+  "0.5rem",
+  "0.625rem",
+  "0.75rem",
+  "0.875rem",
+  "1rem",
+  "1.25rem",
+  "1.5rem",
+  "1.75rem",
+  "2rem",
+  "2.25rem",
+  "2.5rem",
+  "3rem",
+  "4rem",
+  "8rem",
+  "16rem",
+  "32rem",
+  "48rem",
+  "64rem",
+  "80rem",
+  "96rem",
+];
+
+// Space alias
+space.mini = space[1]; // .125rem - 2px
+
+space.xxxsmall = space[2]; // .25rem - 4px
+space.xxxs = space[2]; // .25rem - 4px
+
+space.xxsmall = space[3]; // .375rem - 6px
+space.xxs = space[3]; // .375rem - 6px
+
+space.xsmall = space[4]; // .5rem - 8px
+space.xs = space[4]; // .5rem - 8px
+
+space.small = space[6]; // . 75rem - 12px
+space.s = space[6]; // . 75rem - 12px
+
+space.medium = space[8]; // 1rem - 16px
+space.m = space[8]; // 1rem - 16px
+
+space.large = space[10]; // 1.5rem - 24px
+space.l = space[10]; // 1.5rem - 24px
+
+space.xlarge = space[12]; // 2rem - 32px
+space.xl = space[12]; // 2rem - 32px
+
+space.xxlarge = space[15]; // 3rem - 48px
+space.xxl = space[14]; // 3rem - 48px
+
+space.xxxlarge = space[16]; // 4rem - 64px
+space.xxxl = space[15]; // 4rem - 64px
+
+export const sizes = [
+  "0rem",
+  "0.25rem",
+  "0.5rem",
+  "0.75rem",
+  "1rem",
+  "1.125rem",
+  "1.25rem",
+  "1.5rem",
+  "2rem",
+  "2.5rem",
+  "3rem",
+  "4rem",
+  "8rem",
+  "16rem",
+  "32rem",
+  "48rem",
+  "64rem",
+  "80rem",
+  "96rem",
+];
+
+sizes.xsmall = sizes[2];
+sizes.xs = sizes[2];
+
+sizes.small = sizes[3];
+sizes.s = sizes[3];
+
+sizes.medium = sizes[4];
+sizes.m = sizes[4];
+
+sizes.large = sizes[5];
+sizes.l = sizes[5];
+
+sizes.xlarge = sizes[6];
+sizes.xl = sizes[6];
+
+export const fontSizes = [
+  "0.5rem",
+  "0.625rem",
+  "0.75rem",
+  "0.875rem",
+  "1rem",
+  "1.125rem",
+  "1.25rem",
+  "1.5rem",
+  "1.75rem",
+  "2rem",
+  "3rem",
+  "4rem",
+  "5rem",
+  "6rem",
+];
+fontSizes.xxs = fontSizes[1];
+fontSizes.xxsmall = fontSizes[1];
+
+fontSizes.xs = fontSizes[2];
+fontSizes.xsmall = fontSizes[2];
+
+fontSizes.s = fontSizes[3];
+fontSizes.small = fontSizes[3];
+
+fontSizes.m = fontSizes[4];
+fontSizes.medium = fontSizes[4];
+
+fontSizes.l = fontSizes[6];
+fontSizes.large = fontSizes[6];
+
+fontSizes.xl = fontSizes[7];
+fontSizes.xlarge = fontSizes[7];
+
+fontSizes.xxl = fontSizes[9];
+fontSizes.xxlarge = fontSizes[9];
+
+fontSizes.xxxl = fontSizes[10];
+fontSizes.xxxlarge = fontSizes[10];
+
+fontSizes.huge = fontSizes[12];

package/src/themes/default/tokens/spectre.js

@@ -0,0 +1,16 @@
+import chroma from "chroma-js";
+
+// Definition of available pure colors from the spectre in hsl(0-360, 0-1, 0-1)
+export const spectre = {
+  white: chroma.hsl(0, 0, 1).hex(),
+  black: chroma.hsl(0, 0, 0).hex(),
+  gray: chroma.hsl(0, 0, 0.5).hex(),
+  red: chroma.hsl(0, 1, 0.6).hex(),
+  orange: chroma.hsl(32, 1, 0.6).hex(),
+  yellow: chroma.hsl(48, 0.8, 0.5).hex(),
+  green: chroma.hsl(129, 0.5, 0.6).hex(),
+  teal: chroma.hsl(178, 0.84, 0.64).hex(),
+  blue: chroma.hsl(230, 0.88, 0.67).hex(),
+  purple: chroma.hsl(256, 0.8, 0.6).hex(),
+  pink: chroma.hsl(310, 0.88, 0.64).hex(),
+};