@bcc-code/design-tokens 3.0.4 → 3.0.6

package/build/bcc/tailwind-dark.css

@@ -168,6 +168,7 @@
   --spacing-600: 3rem; /** 48px */
   --spacing-800: 4rem; /** 64px */
   --spacing-1000: 5rem; /** 80px */
+  --spacing: 0.5rem;
   --spacing-negative-25: -0.125rem; /** -2px */
   --spacing-negative-50: -0.25rem; /** -4px */
   --spacing-negative-75: -0.375rem; /** -6px */
@@ -451,3 +452,99 @@
 @utility icon-* {
   color: --value(--color-icon-*);
 }
+
+@utility p-* {
+  padding: --value(--spacing-*);
+}
+
+@utility px-* {
+  padding-inline: --value(--spacing-*);
+}
+
+@utility py-* {
+  padding-block: --value(--spacing-*);
+}
+
+@utility pt-* {
+  padding-top: --value(--spacing-*);
+}
+
+@utility pr-* {
+  padding-right: --value(--spacing-*);
+}
+
+@utility pb-* {
+  padding-bottom: --value(--spacing-*);
+}
+
+@utility pl-* {
+  padding-left: --value(--spacing-*);
+}
+
+@utility m-* {
+  margin: --value(--spacing-*);
+}
+
+@utility mx-* {
+  margin-inline: --value(--spacing-*);
+}
+
+@utility my-* {
+  margin-block: --value(--spacing-*);
+}
+
+@utility mt-* {
+  margin-top: --value(--spacing-*);
+}
+
+@utility mr-* {
+  margin-right: --value(--spacing-*);
+}
+
+@utility mb-* {
+  margin-bottom: --value(--spacing-*);
+}
+
+@utility ml-* {
+  margin-left: --value(--spacing-*);
+}
+
+@utility gap-* {
+  gap: --value(--spacing-*);
+}
+
+@utility gap-x-* {
+  column-gap: --value(--spacing-*);
+}
+
+@utility gap-y-* {
+  row-gap: --value(--spacing-*);
+}
+
+@utility -m-* {
+  margin: --value(--spacing-negative-*);
+}
+
+@utility -mx-* {
+  margin-inline: --value(--spacing-negative-*);
+}
+
+@utility -my-* {
+  margin-block: --value(--spacing-negative-*);
+}
+
+@utility -mt-* {
+  margin-top: --value(--spacing-negative-*);
+}
+
+@utility -mr-* {
+  margin-right: --value(--spacing-negative-*);
+}
+
+@utility -mb-* {
+  margin-bottom: --value(--spacing-negative-*);
+}
+
+@utility -ml-* {
+  margin-left: --value(--spacing-negative-*);
+}

package/build/bcc/tailwind-light.css

@@ -166,6 +166,7 @@
   --spacing-600: 3rem; /** 48px */
   --spacing-800: 4rem; /** 64px */
   --spacing-1000: 5rem; /** 80px */
+  --spacing: 0.5rem;
   --spacing-negative-25: -0.125rem; /** -2px */
   --spacing-negative-50: -0.25rem; /** -4px */
   --spacing-negative-75: -0.375rem; /** -6px */
@@ -535,3 +536,99 @@
 @utility icon-* {
   color: --value(--color-icon-*);
 }
+
+@utility p-* {
+  padding: --value(--spacing-*);
+}
+
+@utility px-* {
+  padding-inline: --value(--spacing-*);
+}
+
+@utility py-* {
+  padding-block: --value(--spacing-*);
+}
+
+@utility pt-* {
+  padding-top: --value(--spacing-*);
+}
+
+@utility pr-* {
+  padding-right: --value(--spacing-*);
+}
+
+@utility pb-* {
+  padding-bottom: --value(--spacing-*);
+}
+
+@utility pl-* {
+  padding-left: --value(--spacing-*);
+}
+
+@utility m-* {
+  margin: --value(--spacing-*);
+}
+
+@utility mx-* {
+  margin-inline: --value(--spacing-*);
+}
+
+@utility my-* {
+  margin-block: --value(--spacing-*);
+}
+
+@utility mt-* {
+  margin-top: --value(--spacing-*);
+}
+
+@utility mr-* {
+  margin-right: --value(--spacing-*);
+}
+
+@utility mb-* {
+  margin-bottom: --value(--spacing-*);
+}
+
+@utility ml-* {
+  margin-left: --value(--spacing-*);
+}
+
+@utility gap-* {
+  gap: --value(--spacing-*);
+}
+
+@utility gap-x-* {
+  column-gap: --value(--spacing-*);
+}
+
+@utility gap-y-* {
+  row-gap: --value(--spacing-*);
+}
+
+@utility -m-* {
+  margin: --value(--spacing-negative-*);
+}
+
+@utility -mx-* {
+  margin-inline: --value(--spacing-negative-*);
+}
+
+@utility -my-* {
+  margin-block: --value(--spacing-negative-*);
+}
+
+@utility -mt-* {
+  margin-top: --value(--spacing-negative-*);
+}
+
+@utility -mr-* {
+  margin-right: --value(--spacing-negative-*);
+}
+
+@utility -mb-* {
+  margin-bottom: --value(--spacing-negative-*);
+}
+
+@utility -ml-* {
+  margin-left: --value(--spacing-negative-*);
+}

package/config/primevue.config.d.ts

@@ -1,7 +1,7 @@
-declare module "*primevue.config.js" {
-  export const BCCPreset: any;
-}
-
-declare module "@bcc-code/design-tokens/primevue" {
-  export const BCCPreset: any;
-}
+declare module "*primevue.config.js" {
+  export const BCCPreset: any;
+}
+
+declare module "@bcc-code/design-tokens/primevue" {
+  export const BCCPreset: any;
+}

package/config/primevue.config.js

@@ -1,121 +1,23 @@
-import { definePreset } from "@primeuix/themes";
-import Aura from "@primeuix/themes/aura";
-
-import primitives from "../build/bcc/primitives.js";
-import darkTokens from "../build/bcc/dark.js";
-import lightTokens from "../build/bcc/light.js";
-
-const BCCPreset = definePreset(Aura, {
-  primitive: {
-    ...primitives.color,
-    borderRadius: {
-      xs: primitives["border-radius"].xs,
-      xl: primitives["border-radius"].xl,
-      sm: primitives["border-radius"].sm,
-      md: primitives["border-radius"].md,
-      lg: primitives["border-radius"].lg,
-      full: primitives["border-radius"].full,
-      "2xl": primitives["border-radius"]["2xl"],
-      "3xl": primitives["border-radius"]["3xl"],
-    },
-    borderWidth: {
-      0: primitives["border-width"][0],
-      1: primitives["border-width"][1],
-      2: primitives["border-width"][2],
-    },
-    fontFamily: {
-      archivo: primitives["font-family"].archivo,
-    },
-    fontSize: {
-      xs: primitives["font-size"].xs,
-      xl: primitives["font-size"].xl,
-      sm: primitives["font-size"].sm,
-      md: primitives["font-size"].md,
-      lg: primitives["font-size"].lg,
-      "2xl": primitives["font-size"]["2xl"],
-      "3xl": primitives["font-size"]["3xl"],
-      "4xl": primitives["font-size"]["4xl"],
-    },
-    fontWeight: {
-      regular: primitives["font-weight"].regular,
-      medium: primitives["font-weight"].medium,
-      bold: primitives["font-weight"].bold,
-    },
-    lineHeight: {
-      1: primitives["line-height"][1],
-      2: primitives["line-height"][2],
-      3: primitives["line-height"][3],
-      4: primitives["line-height"][4],
-      5: primitives["line-height"][5],
-      6: primitives["line-height"][6],
-      7: primitives["line-height"][7],
-      8: primitives["line-height"][8],
-      9: primitives["line-height"][9],
-      10: primitives["line-height"][10],
-    },
-    space: {
-      0: primitives.space[0],
-      25: primitives.space[25],
-      50: primitives.space[50],
-      75: primitives.space[75],
-      100: primitives.space[100],
-      150: primitives.space[150],
-      200: primitives.space[200],
-      250: primitives.space[250],
-      300: primitives.space[300],
-      400: primitives.space[400],
-      500: primitives.space[500],
-      600: primitives.space[600],
-      800: primitives.space[800],
-      1000: primitives.space[1000],
-      negative: {
-        25: primitives.space.negative[25],
-        50: primitives.space.negative[50],
-        75: primitives.space.negative[75],
-        100: primitives.space.negative[100],
-        150: primitives.space.negative[150],
-        200: primitives.space.negative[200],
-        250: primitives.space.negative[250],
-        300: primitives.space.negative[300],
-        400: primitives.space.negative[400],
-      },
-    },
-  },
-  semantic: {
-    primary: {
-      50: "{dark-green.100}",
-      100: "{dark-green.200}",
-      200: "{dark-green.300}",
-      300: "{dark-green.400}",
-      400: "{dark-green.500}",
-      500: "{dark-green.600}",
-      600: "{dark-green.700}",
-      700: "{dark-green.800}",
-      800: "{dark-green.900}",
-      900: "{dark-green.1000}",
-      950: "{dark-green.1000}",
-    },
-    colorScheme: {
-      dark: {
-        shadow: {
-          overflow: {
-            default: darkTokens.elevation.shadow.overflow.default,
-            perimeter: darkTokens.elevation.shadow.overflow.perimeter,
-            spread: darkTokens.elevation.shadow.overflow.spread,
-          },
-          overlay: darkTokens.elevation.shadow.overlay,
-          raised: darkTokens.elevation.shadow.raised,
-        },
-      },
-      light: {
-        shadow: {
-          overflow: lightTokens.elevation.shadow.overlay,
-          overlay: lightTokens.elevation.shadow.overlay,
-          raised: lightTokens.elevation.shadow.raised,
-        },
-      },
-    },
-  },
-});
-
-export default BCCPreset;
+import { definePreset } from "@primeuix/themes";
+import Aura from "@primeuix/themes/aura";
+
+import tokens from "../build/bcc/aura-bcc-config.js";
+
+const BCCPreset = definePreset(Aura, {
+  primitive: {
+    ...tokens["aura/primitive"],
+  },
+  semantic: {
+    ...tokens["aura/semantic"],
+    colorScheme: {
+      dark: {
+        ...tokens["aura/semantic/dark"],
+      },
+      light: {
+        ...tokens["aura/semantic/light"],
+      },
+    },
+  }
+});
+
+export default BCCPreset;

package/package.json

@@ -1,41 +1,42 @@
-{
-  "name": "@bcc-code/design-tokens",
-  "version": "3.0.4",
-  "description": "Design tokens build system",
-  "type": "module",
-  "exports": {
-    "./css/light": "./build/bcc/light.css",
-    "./css/dark": "./build/bcc/dark.css",
-    "./tailwind/light": "./build/bcc/tailwind-light.css",
-    "./tailwind/dark": "./build/bcc/tailwind-dark.css",
-    "./primevue": {
-      "import": "./config/primevue.config.js",
-      "types": "./config/primevue.config.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "build/**/*",
-    "config/primevue.config.js",
-    "config/primevue.config.d.ts",
-    "README.md",
-    "package.json"
-  ],
-  "scripts": {
-    "build": "node export-tokens/build.js"
-  },
-  "author": "BCC Code",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/bcc-code/bcc-tokens.git"
-  },
-  "homepage": "https://github.com/bcc-code/bcc-tokens#readme",
-  "dependencies": {
-    "@tokens-studio/sd-transforms": "^1.3.0",
-    "style-dictionary": "^5.0.0"
-  },
-  "peerDependencies": {
-    "@primeuix/themes": "^1.1.1"
-  }
-}
+{
+  "name": "@bcc-code/design-tokens",
+  "version": "3.0.6",
+  "description": "Design tokens build system",
+  "type": "module",
+  "exports": {
+    "./css/light": "./build/bcc/light.css",
+    "./css/dark": "./build/bcc/dark.css",
+    "./tailwind/light": "./build/bcc/tailwind-light.css",
+    "./tailwind/dark": "./build/bcc/tailwind-dark.css",
+    "./primevue": {
+      "import": "./config/primevue.config.js",
+      "types": "./config/primevue.config.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "build/**/*",
+    "config/primevue.config.js",
+    "config/primevue.config.d.ts",
+    "README.md",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "node export-tokens/build.js",
+    "prepublishOnly": "npm run build"
+  },
+  "author": "BCC Code",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bcc-code/bcc-tokens.git"
+  },
+  "homepage": "https://github.com/bcc-code/bcc-tokens#readme",
+  "dependencies": {
+    "@tokens-studio/sd-transforms": "^1.3.0",
+    "style-dictionary": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@primeuix/themes": "^1.1.1"
+  }
+}