@aleph-alpha/config-css 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.13.0 (2025-05-12)
+
+### 🚀 Features
+
+- type-safety for `Theme` tokens
+
+### ❤️ Thank You
+
+- Max Hammer
+
 ## 0.12.2 (2025-05-09)
 
 ### 🩹 Fixes

package/dist/index.d.ts

@@ -1,5 +1,10 @@
+import { default as default_2 } from '../sd-output/light-mode.json';
+import { default as default_3 } from '../sd-output/spacings.json';
+import { default as default_4 } from '../sd-output/box-shadows.json';
 import { Preset } from 'unocss';
 
+export declare const commonPresets: Preset<Theme>[];
+
 export declare const createPresets: () => Preset<Theme>[];
 
 export declare const getDesignSystemContentPathConfig: (framework: "vue" | "svelte") => {
@@ -11,20 +16,32 @@ export declare const getDesignSystemContentPathConfig: (framework: "vue" | "svel
     };
 };
 
+/**
+ * @deprecated Use `presetsAlephAlpha` instead.
+ * preset**S** is misleading since it's not a preset but a function that returns a list of presets.
+ */
+export declare const presetAlephAlpha: () => Preset<Theme>[];
+
 /**
  * The Aleph Alpha CSS preset for UnoCSS.
  * It uses the Windi CSS preset for UnoCSS.
  * and adds aleph alpha specific utilities for tokens from the design sysstem.
  */
-declare const presetAlephAlpha: () => Preset<Theme>[];
-export default presetAlephAlpha;
-export { presetAlephAlpha }
+declare const presetsAlephAlpha: () => Preset<Theme>[];
+export default presetsAlephAlpha;
+export { presetsAlephAlpha }
 
 export declare type Theme = {
-    colors?: Record<string, string>;
-    spacing?: Record<string, string>;
-    size?: Record<string, string>;
-    boxShadow?: Record<string, string>;
+    colors?: Record<keyof typeof default_2, string>;
+    spacing?: Record<keyof typeof default_3, string>;
+    size?: Record<keyof typeof default_3, string>;
+    boxShadow?: Record<keyof typeof default_4, string>;
 };
 
+/**
+ * This preset is used to add the aleph alpha specific utilities for tokens from the design system.
+ * Only the dark theme tokens are not included.
+ */
+export declare const tokenPreset: Preset<Theme>;
+
 export { }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { presetWind as w, presetTypography as Z, definePreset as O } from "unocss";
+import { definePreset as w, presetWind as Z, presetTypography as O } from "unocss";
 import R from "unocss-preset-theme";
 function F(e) {
   return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -329,7 +329,7 @@ const re = {
   px: G,
   rem: B,
   time: J
-}, ie = M(re), m = ie, n = "--una", d = "una-in", b = "una-out";
+}, ie = M(re), l = ie, n = "--una", d = "una-in", b = "una-out";
 function ae(e) {
   return {
     t: "top",
@@ -339,49 +339,49 @@ function ae(e) {
   }[e ?? ""] ?? e;
 }
 function g(e, i) {
-  let r = m.cssvar.fraction.rem(e || ne);
+  let r = l.cssvar.fraction.rem(e || ne);
   return r ? (i = ae(i), !r.startsWith("var(--") && ["top", "left"].includes(i ?? "") && (r.startsWith("-") ? r = r.slice(1) : r !== "0" && (r = `-${r}`)), [r, i]) : [];
 }
-const y = "0", x = "0", h = "30deg", ne = "100%", l = "(t|b|l|r|top|bottom|left|right)", oe = [
+const y = "0", x = "0", h = "30deg", ne = "100%", m = "(t|b|l|r|top|bottom|left|right)", oe = [
   [
     /^fade-in(?:-(.+))?$/,
     ([, e]) => ({
-      [`${n}-enter-opacity`]: m.cssvar.percent(e || y)
+      [`${n}-enter-opacity`]: l.cssvar.percent(e || y)
     }),
     { autocomplete: "fade-(in|out)-<percent>" }
   ],
   [
     /^fade-out(?:-(.+))?$/,
     ([, e]) => ({
-      [`${n}-exit-opacity`]: m.cssvar.percent(e || y)
+      [`${n}-exit-opacity`]: l.cssvar.percent(e || y)
     })
   ]
 ], ce = [
   [
     /^zoom-in(?:-(.+))?$/,
     ([, e]) => ({
-      [`${n}-enter-scale`]: m.cssvar.fraction.percent(e || x)
+      [`${n}-enter-scale`]: l.cssvar.fraction.percent(e || x)
     }),
     { autocomplete: "zoom-(in|out)-<percent>" }
   ],
   [
     /^zoom-out(?:-(.+))?$/,
     ([, e]) => ({
-      [`${n}-exit-scale`]: m.cssvar.fraction.percent(e || x)
+      [`${n}-exit-scale`]: l.cssvar.fraction.percent(e || x)
     })
   ]
 ], fe = [
   [
     /^spin-in(?:-(.+))?$/,
     ([, e]) => ({
-      [`${n}-enter-rotate`]: m.cssvar.degree(e || h)
+      [`${n}-enter-rotate`]: l.cssvar.degree(e || h)
     }),
     { autocomplete: "spin-(in|out)-<percent>" }
   ],
   [
     /^spin-out(?:-(.+))?$/,
     ([, e]) => ({
-      [`${n}-exit-rotate`]: m.cssvar.degree(e || h)
+      [`${n}-exit-rotate`]: l.cssvar.degree(e || h)
     })
   ]
 ], se = [
@@ -403,10 +403,10 @@ const y = "0", x = "0", h = "30deg", ne = "100%", l = "(t|b|l|r|top|bottom|left|
     },
     {
       autocomplete: [
-        `slide-(in|out)-${l}-<percent>`,
-        `slide-(in|out)-${l}-full`,
-        `slide-in-from-${l}-<percent>`,
-        `slide-in-from-${l}-full`
+        `slide-(in|out)-${m}-<percent>`,
+        `slide-(in|out)-${m}-full`,
+        `slide-in-from-${m}-<percent>`,
+        `slide-in-from-${m}-full`
       ]
     }
   ],
@@ -428,18 +428,18 @@ const y = "0", x = "0", h = "30deg", ne = "100%", l = "(t|b|l|r|top|bottom|left|
     },
     {
       autocomplete: [
-        `slide-out-to-${l}-<percent>`,
-        `slide-out-to-${l}-full`
+        `slide-out-to-${m}-<percent>`,
+        `slide-out-to-${m}-full`
       ]
     }
   ]
-], me = [
+], le = [
   ...oe,
   ...ce,
   ...fe,
   ...se
 ];
-function le(e) {
+function me(e) {
   const { unit: i = "ms" } = e, r = (t) => {
     var a;
     return {
@@ -498,8 +498,8 @@ const Ae = {
   name: "unocss-preset-animations",
   theme: Ae,
   layers: { "una-base": -999 },
-  shortcuts: le(e),
-  rules: me
+  shortcuts: me(e),
+  rules: le
 });
 function be(e) {
   return e.replace(/((?:rgb|hsl)a?)\(([^)]+)\)/g, (i, r, t) => {
@@ -919,20 +919,18 @@ const pe = (e = {}) => {
       }
     }
   ]
-}), Ke = () => {
+}), Ke = w(() => ({
+  name: "@aleph-alpha/uno-css-preset",
+  rules: [...Object.entries(Re), ["h-screen", { height: "100vh" }]],
+  theme: {
+    colors: ye,
+    spacing: q,
+    size: q,
+    boxShadow: ve
+  }
+}))(), je = () => {
   const e = [];
-  return e.push(
-    O(() => ({
-      name: "@aleph-alpha/uno-css-preset",
-      rules: [...Object.entries(Re), ["h-screen", { height: "100vh" }]],
-      theme: {
-        colors: ye,
-        spacing: q,
-        size: q,
-        boxShadow: ve
-      }
-    }))()
-  ), e.push(
+  return e.push(Ke), e.push(
     R({
       theme: {
         dark: { colors: ge }
@@ -943,12 +941,12 @@ const pe = (e = {}) => {
       legacyColorSpace: !0
     })
   ), e;
-}, je = [
-  w(),
+}, ke = [
   Z(),
+  O(),
   ze(),
   de()
-], ke = Ke(), Ge = () => [...je, ...ke], Ce = (e) => {
+], Ne = je(), Be = () => [...ke, ...Ne], Ie = Be, Pe = (e) => {
   const i = e === "vue" ? "node_modules/@aleph-alpha/ds-components-vue/**/*" : "node_modules/@aleph-alpha/ds-components-svelte/**/*";
   return {
     content: {
@@ -966,8 +964,11 @@ const pe = (e = {}) => {
   };
 };
 export {
-  Ke as createPresets,
-  Ge as default,
-  Ce as getDesignSystemContentPathConfig,
-  Ge as presetAlephAlpha
+  ke as commonPresets,
+  je as createPresets,
+  Be as default,
+  Pe as getDesignSystemContentPathConfig,
+  Ie as presetAlephAlpha,
+  Be as presetsAlephAlpha,
+  Ke as tokenPreset
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aleph-alpha/config-css",
   "license": "Apache-2.0",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "prettier": "@aleph-alpha/prettier-config-frontend",

package/src/index.ts

@@ -9,30 +9,34 @@ import spacingsSet from '../sd-output/spacings.json';
 import typographySet from '../sd-output/typography.json';
 import { presetWebFontsAlephAlpha } from './presetWebFontsAlephAlpha';
 
-export type Theme = {
-  colors?: Record<string, string>;
-  spacing?: Record<string, string>;
-  size?: Record<string, string>;
-  boxShadow?: Record<string, string>;
+type Theme = {
+  colors?: Record<keyof typeof lightModeSet, string>;
+  spacing?: Record<keyof typeof spacingsSet, string>;
+  size?: Record<keyof typeof spacingsSet, string>;
+  boxShadow?: Record<keyof typeof boxShadowsSet, string>;
 };
 
-export const createPresets = (): Preset<Theme>[] => {
+/**
+ * This preset is used to add the aleph alpha specific utilities for tokens from the design system.
+ * Only the dark theme tokens are not included.
+ */
+const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
+  return {
+    name: '@aleph-alpha/uno-css-preset',
+    rules: [...Object.entries(typographySet), ['h-screen', { height: '100vh' }]],
+    theme: {
+      colors: lightModeSet,
+      spacing: spacingsSet,
+      size: spacingsSet,
+      boxShadow: boxShadowsSet,
+    },
+  };
+})();
+
+const createPresets = (): Preset<Theme>[] => {
   const presets: Preset<Theme>[] = [];
 
-  presets.push(
-    definePreset<Theme>(() => {
-      return {
-        name: '@aleph-alpha/uno-css-preset',
-        rules: [...Object.entries(typographySet), ['h-screen', { height: '100vh' }]],
-        theme: {
-          colors: lightModeSet,
-          spacing: spacingsSet,
-          size: spacingsSet,
-          boxShadow: boxShadowsSet,
-        },
-      };
-    })()
-  );
+  presets.push(tokenPreset);
 
   presets.push(
     presetTheme({
@@ -57,7 +61,6 @@ const commonPresets: Preset<Theme>[] = [
   presetWebFontsAlephAlpha(),
   presetAnimations(),
 ];
-
 const presets = createPresets();
 
 /**
@@ -65,11 +68,17 @@ const presets = createPresets();
  * It uses the Windi CSS preset for UnoCSS.
  * and adds aleph alpha specific utilities for tokens from the design sysstem.
  */
-export const presetAlephAlpha = (): Preset<Theme>[] => {
+const presetsAlephAlpha = (): Preset<Theme>[] => {
   return [...commonPresets, ...presets];
 };
 
-export const getDesignSystemContentPathConfig = (framework: 'vue' | 'svelte') => {
+/**
+ * @deprecated Use `presetsAlephAlpha` instead.
+ * preset**S** is misleading since it's not a preset but a function that returns a list of presets.
+ */
+const presetAlephAlpha = presetsAlephAlpha;
+
+const getDesignSystemContentPathConfig = (framework: 'vue' | 'svelte') => {
   const moduleLocation =
     framework === 'vue'
       ? 'node_modules/@aleph-alpha/ds-components-vue/**/*'
@@ -90,4 +99,13 @@ export const getDesignSystemContentPathConfig = (framework: 'vue' | 'svelte') =>
   };
 };
 
-export default presetAlephAlpha;
+export {
+  type Theme,
+  tokenPreset,
+  commonPresets,
+  presetAlephAlpha,
+  presetsAlephAlpha,
+  getDesignSystemContentPathConfig,
+  createPresets,
+};
+export default presetsAlephAlpha;