@dexma/ui-components 8.0.41 → 8.0.43

package/README.md

@@ -49,7 +49,42 @@ import { Theme, Button } from '@dexma/ui-components';
 </Theme>;
 ```
 
-You can find all the configuration in the theme file [theme.js](https://github.com/dexma/ui-components/blob/master/src/styles/theme.js)
+You can find all the configuration in the theme file [theme.ts](https://github.com/dexma/ui-components/blob/master/src/lib/utils/theme.ts)
+
+## Typography
+
+The platform font is **Montserrat**, self-hosted by this package — there is no Google Fonts (or any
+other CDN) request at runtime.
+
+Every app **must register the font faces once, at its entry point** (one line per webpack/Vite entry):
+
+```typescript
+import '@dexma/ui-components/fonts.css';
+```
+
+Without this import the UI silently renders the fallback system stack — everything works, but nothing
+is Montserrat. `GlobalStyle` applies the font; `fonts.css` provides it. You need both.
+
+The shipped subsets are `latin`, `latin-ext` (pl_PL) and `cyrillic` (bg_BG), each behind a
+`unicode-range` so browsers only download what the locale needs. `zh_CN` is not covered by Montserrat
+and intentionally falls through to the system CJK faces in the stack.
+
+Never write the font stack as a literal in an app. Where a style genuinely cannot inherit the page
+font (shadow-DOM `::part()` rules, canvas/SVG text, server-rendered images), use the exported token:
+
+```typescript
+import { typography } from '@dexma/ui-components';
+
+const Styled = styled.div`
+    font-family: ${typography.fontFamily};
+`;
+```
+
+The binaries come from `@fontsource-variable/montserrat` (SIL OFL 1.1) at build time via
+`scripts/buildFontConfig.mjs` — that script's header documents the full checklist for changing the
+platform font. Repositories that cannot consume this npm package (dexcell, grader-demo, is3frontend,
+anomaly-detection-dash-ui, detect-reports-generator) must self-host the **same version** of the font
+as this package's `@fontsource-variable/montserrat` devDependency, so rendering stays consistent.
 
 ## Installation
 

package/dist/lib/components/Typography/Typography.d.ts

@@ -0,0 +1,17 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { TypographyVariant, TypographyWeight } from '../../styles/Typography/StyledTypography';
+export type TypographyProps = {
+    /** `h1`–`h6` use the heading scale; `small`–`xlarge` use the paragraph scale. */
+    variant?: TypographyVariant;
+    weight?: TypographyWeight;
+    color?: string;
+    /** Rendered element. Set this for semantics — `variant` only controls type styles. */
+    as?: ElementType;
+    children?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * The text primitive for new screens: sizes and weights always come from the theme tokens.
+ * Use this instead of an ad-hoc `styled.span` with font-size/font-weight literals.
+ */
+export declare const Typography: ({ variant, weight, color, as, children, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/dist/lib/components/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Typography';

package/dist/lib/components/index.d.ts

@@ -36,6 +36,7 @@ export * from './Table';
 export * from './Theme';
 export * from './Toaster';
 export * from './Tooltip';
+export * from './Typography';
 export * from './Switch';
 export * from './SwitchPeriodComparative';
 export * from './Select';

package/dist/lib/index.d.ts

@@ -1,4 +1,22 @@
 import { GlobalStyle, IsolatedGlobalStyle, UIComponentsStyle } from './utils/global';
 import { color as colors } from './utils/theme';
 export * from './components';
+/**
+ * Typography tokens, exposed the same way `colors` is.
+ *
+ * Most UI inherits the family from `GlobalStyle` — reach for this only where inheritance cannot
+ * apply (shadow-DOM `::part()` styles, canvas/SVG text, server-rendered images). Never redeclare
+ * the stack as a literal in an app; this export is its single source of truth.
+ */
+export declare const typography: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: {
+        light: number;
+        normal: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+};
 export { GlobalStyle, IsolatedGlobalStyle, UIComponentsStyle, colors };

package/dist/lib/styles/Typography/StyledTypography.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '../../utils/theme';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'medium' | 'large' | 'xlarge';
+export type TypographyWeight = 'light' | 'normal' | 'medium' | 'semiBold' | 'bold';
+declare const StyledTypography: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $variant: TypographyVariant;
+    $weight: TypographyWeight;
+    $color: string;
+    theme: Theme;
+}>> & string;
+export { StyledTypography };

package/dist/lib/utils/theme.d.ts

@@ -90,6 +90,7 @@ export declare const fontColor: string;
 export declare const fontColorActive: string;
 export declare const fontWeightLight = 300;
 export declare const fontWeightNormal = 400;
+export declare const fontWeightMedium = 500;
 export declare const fontWeightSemiBold = 600;
 export declare const fontWeightBold = 700;
 /**