@kushagradhawan/kookie-ui 0.1.41 → 0.1.43

package/src/helpers/font-config.ts

@@ -0,0 +1,167 @@
+/**
+ * Font configuration utilities for Kookie UI
+ *
+ * These utilities help users configure custom fonts through CSS variables
+ * and provide type-safe font configuration options.
+ */
+
+/**
+ * Font family configuration interface
+ */
+export interface FontConfig {
+  /** Sans-serif font stack for fontFamily="sans" */
+  sans?: string;
+  /** Monospace font stack for fontFamily="mono" */
+  mono?: string;
+  /** Base Inter font replacement */
+  inter?: string;
+  /** Base JetBrains Mono font replacement */
+  jetbrainsMono?: string;
+}
+
+/**
+ * CSS variable names used by Kookie UI for fonts
+ */
+export const FONT_CSS_VARIABLES = {
+  sans: '--font-sans',
+  mono: '--font-mono',
+  inter: '--font-inter',
+  jetbrainsMono: '--font-jetbrains-mono',
+  defaultFamily: '--default-font-family',
+  headingFamily: '--heading-font-family',
+  strongFamily: '--strong-font-family',
+  codeFamily: '--code-font-family',
+} as const;
+
+/**
+ * Popular font stacks for common use cases
+ */
+export const FONT_STACKS = {
+  // Sans-serif options
+  inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  system:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  poppins: "'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  openSans: "'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+
+  // Monospace options
+  jetbrainsMono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace",
+  firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace",
+  sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace",
+  systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace",
+} as const;
+
+/**
+ * Apply font configuration to CSS variables
+ *
+ * @param config Font configuration object
+ * @param target Target element (defaults to document.documentElement)
+ *
+ * @example
+ * ```ts
+ * // Use Google Fonts
+ * applyFontConfig({
+ *   sans: FONT_STACKS.poppins,
+ *   mono: FONT_STACKS.firaCode
+ * });
+ *
+ * // Use system fonts only
+ * applyFontConfig({
+ *   sans: FONT_STACKS.system,
+ *   mono: FONT_STACKS.systemMono
+ * });
+ * ```
+ */
+export function applyFontConfig(
+  config: FontConfig,
+  target: HTMLElement = document.documentElement,
+): void {
+  const style = target.style;
+
+  if (config.sans) {
+    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);
+  }
+
+  if (config.mono) {
+    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);
+  }
+
+  if (config.inter) {
+    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);
+  }
+
+  if (config.jetbrainsMono) {
+    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);
+  }
+}
+
+/**
+ * Generate CSS string for font configuration
+ *
+ * @param config Font configuration object
+ * @returns CSS string that can be injected into a stylesheet
+ *
+ * @example
+ * ```ts
+ * const css = generateFontCSS({
+ *   sans: FONT_STACKS.poppins,
+ *   mono: FONT_STACKS.firaCode
+ * });
+ *
+ * // Inject into document
+ * const style = document.createElement('style');
+ * style.textContent = css;
+ * document.head.appendChild(style);
+ * ```
+ */
+export function generateFontCSS(config: FontConfig): string {
+  const rules: string[] = [':root {'];
+
+  if (config.sans) {
+    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);
+  }
+
+  if (config.mono) {
+    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);
+  }
+
+  if (config.inter) {
+    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);
+  }
+
+  if (config.jetbrainsMono) {
+    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);
+  }
+
+  rules.push('}');
+
+  return rules.join('\n');
+}
+
+/**
+ * Reset fonts to Kookie UI defaults
+ */
+export function resetFonts(target: HTMLElement = document.documentElement): void {
+  const style = target.style;
+
+  // Remove custom font variables to fall back to defaults
+  style.removeProperty(FONT_CSS_VARIABLES.sans);
+  style.removeProperty(FONT_CSS_VARIABLES.mono);
+  style.removeProperty(FONT_CSS_VARIABLES.inter);
+  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);
+}
+
+/**
+ * Get current font configuration from CSS variables
+ */
+export function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {
+  const computedStyle = getComputedStyle(target);
+
+  return {
+    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,
+    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,
+    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,
+    jetbrainsMono:
+      computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
+  };
+}

package/src/helpers/index.ts

@@ -1,6 +1,7 @@
 export * from './component-props.js';
 export * from './extract-margin-props.js';
 export * from './extract-props.js';
+export * from './font-config.js';
 export * from './get-margin-styles.js';
 export * from './get-matching-gray-color.js';
 export * from './get-responsive-styles.js';

package/src/styles/fonts.css

@@ -2,19 +2,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
-/* Font Variables */
+/* Font Variables - Customize these to change fonts throughout your app */
 :root {
-  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-  
-  /* Primary font variables */
-  --font-general-sans: var(--font-inter);
-  --font-inter-mono: var(--font-jetbrains-mono);
-  
-  /* Tailwind-compatible aliases */
-  --font-sans: var(--font-inter);
-  --font-mono: var(--font-jetbrains-mono);
-  
+  /* Base font definitions - override these in your CSS to customize fonts */
+  --font-inter:
+    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  --font-jetbrains-mono:
+    'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+
+  /* Primary font variables - these map to theme fontFamily values */
+  --font-general-sans: var(--font-inter); /* Used when fontFamily="sans" */
+  --font-inter-mono: var(--font-jetbrains-mono); /* Used for code elements */
+
+  /* Tailwind-compatible aliases - override these to change theme fonts */
+  --font-sans: var(--font-inter); /* Theme fontFamily="sans" uses this */
+  --font-mono: var(--font-jetbrains-mono); /* Theme fontFamily="mono" uses this */
+
   /* Force proper font weight rendering */
   font-synthesis: none; /* Prevent browser from synthesizing weights */
 }
@@ -33,4 +37,3 @@
   font-display: block;
   src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
 }
-

package/src/styles/tokens/typography.css

@@ -43,8 +43,17 @@
 
   /* default values */
 
-  --default-font-family: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)',
-    Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-family:
+    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto,
+    'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+
+  /* Font family overrides based on theme data attribute */
+  --default-font-family-sans:
+    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto,
+    'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+  --default-font-family-mono: var(--font-mono);
   --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -75,8 +84,9 @@
 
   /* Code */
 
-  --code-font-family: var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono',
-    monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --code-font-family:
+    var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)',
+    'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --code-font-size-adjust: 0.95;
   --code-font-style: normal;
   --code-font-weight: inherit;
@@ -304,3 +314,16 @@
   descent-override: 22%;
   src: local('Consolas Bold Italic');
 }
+
+/* Font family data attribute support */
+[data-font-family='sans'] {
+  --default-font-family: var(--default-font-family-sans);
+  --heading-font-family: var(--default-font-family-sans);
+  --strong-font-family: var(--default-font-family-sans);
+}
+
+[data-font-family='mono'] {
+  --default-font-family: var(--default-font-family-mono);
+  --heading-font-family: var(--default-font-family-mono);
+  --strong-font-family: var(--default-font-family-mono);
+}