@ismail-elkorchi/ui-tokens 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export const THEME_ATTRIBUTE: 'data-uik-theme';
+export const DENSITY_ATTRIBUTE: 'data-uik-density';
+export type ThemeName = 'light' | 'dark' | (string & {});
+export type DensityName = 'comfortable' | 'compact' | (string & {});
+export function setTheme(element: Element | null | undefined, theme?: ThemeName | null): void;
+export function setDensity(element: Element | null | undefined, density?: DensityName | null): void;
+export function getCssVarName(token: string): string;

package/dist/index.js

@@ -0,0 +1,38 @@
+const THEME_ATTRIBUTE = 'data-uik-theme';
+const DENSITY_ATTRIBUTE = 'data-uik-density';
+
+function setTheme(element, theme) {
+  if (!element || typeof element.setAttribute !== 'function') return;
+  if (theme == null || theme === '') {
+    if (typeof element.removeAttribute === 'function') {
+      element.removeAttribute(THEME_ATTRIBUTE);
+    }
+    return;
+  }
+  element.setAttribute(THEME_ATTRIBUTE, String(theme));
+}
+
+function setDensity(element, density) {
+  if (!element || typeof element.setAttribute !== 'function') return;
+  if (density == null || density === '') {
+    if (typeof element.removeAttribute === 'function') {
+      element.removeAttribute(DENSITY_ATTRIBUTE);
+    }
+    return;
+  }
+  element.setAttribute(DENSITY_ATTRIBUTE, String(density));
+}
+
+function toKebab(segment) {
+  return segment
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/_/g, '-')
+    .toLowerCase();
+}
+
+function getCssVarName(token) {
+  const key = typeof token === 'string' ? token : String(token);
+  return `--uik-${key.split('.').map(toKebab).join('-')}`;
+}
+
+export { THEME_ATTRIBUTE, DENSITY_ATTRIBUTE, setTheme, setDensity, getCssVarName };