@a-type/ui 6.0.2 → 6.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/arbor/arbor.js +18 -4
  2. package/dist/arbor/arbor.js.map +1 -1
  3. package/dist/components/typography/typography.d.ts +4 -1
  4. package/dist/components/typography/typography.js +4 -1
  5. package/dist/components/typography/typography.js.map +1 -1
  6. package/dist/components/typography/typography.module.css +10 -0
  7. package/dist/components/typography/typography.stories.d.ts +1 -0
  8. package/dist/components/typography/typography.stories.js +15 -1
  9. package/dist/components/typography/typography.stories.js.map +1 -1
  10. package/dist/css/arbor.css +103 -44
  11. package/package.json +1 -1
  12. package/src/arbor/arbor.ts +19 -3
  13. package/src/components/typography/typography.module.css +10 -0
  14. package/src/components/typography/typography.stories.tsx +45 -0
  15. package/src/components/typography/typography.tsx +9 -0
package/dist/arbor/arbor.js CHANGED
@@ -34,7 +34,7 @@ export function presetAtype(config) {
34
34
  var _a, _b, _c;
35
35
  const base = presetArbor(Object.assign(Object.assign({}, config), { color: Object.assign(Object.assign({ globalSaturation: 0.5 }, config === null || config === void 0 ? void 0 : config.color), { ranges: Object.assign(Object.assign({}, defaultColors.ranges), (_a = config === null || config === void 0 ? void 0 : config.color) === null || _a === void 0 ? void 0 : _a.ranges), mainColor: (config === null || config === void 0 ? void 0 : config.mainColor) ||
36
36
  ((_b = config === null || config === void 0 ? void 0 : config.color) === null || _b === void 0 ? void 0 : _b.mainColor) ||
37
- defaultColors.mainColor }), typography: Object.assign({ defaultFontSize: '16px', minFontSize: '12px', minWeight: 200, maxWeight: 600, weightStep: 100, baseWeight: 400, lineHeightStep: 0.125, minLineHeight: 1 }, config === null || config === void 0 ? void 0 : config.typography), spacing: Object.assign({ baseSize: '8px' }, config === null || config === void 0 ? void 0 : config.spacing), shape: Object.assign({ roundness: 1 }, config === null || config === void 0 ? void 0 : config.shape), shadow: Object.assign({ defaultColor: 'rgba(0, 0, 0, 0.05)' }, config === null || config === void 0 ? void 0 : config.shadow) }));
37
+ defaultColors.mainColor }), typography: Object.assign({ defaultFontSize: '16px', minFontSize: '12px', minWeight: 200, maxWeight: 600, weightStep: 100, baseWeight: 400, lineHeightStep: 0.125, minLineHeight: 1, roundToPixel: true }, config === null || config === void 0 ? void 0 : config.typography), spacing: Object.assign({ baseSize: '8px', roundToPixel: true }, config === null || config === void 0 ? void 0 : config.spacing), shape: Object.assign({ roundness: 1 }, config === null || config === void 0 ? void 0 : config.shape), shadow: Object.assign({ defaultColor: 'rgba(0, 0, 0, 0.05)' }, config === null || config === void 0 ? void 0 : config.shadow) }));
38
38
  const preset = definePreset({
39
39
  name: 'a-type',
40
40
  extends: [base],
@@ -260,11 +260,25 @@ export function presetAtype(config) {
260
260
  },
261
261
  },
262
262
  });
263
- preset.bundleMode('density-reset', {
263
+ preset.bundleMode('normal', {
264
264
  global: {
265
265
  spacing: {
266
266
  density: 1,
267
267
  },
268
+ typography: {
269
+ size: 1,
270
+ minFontSize: '12px',
271
+ },
272
+ },
273
+ });
274
+ preset.bundleMode('loose', {
275
+ global: {
276
+ spacing: {
277
+ density: 0.75,
278
+ },
279
+ typography: {
280
+ size: 1.125,
281
+ },
268
282
  },
269
283
  });
270
284
  preset.bundleMode('heading', {
@@ -277,8 +291,8 @@ export function presetAtype(config) {
277
291
  preset.bundleMode('hero', {
278
292
  global: {
279
293
  typography: {
280
- size: 3,
281
- fontSizeScaleBase: 1.5,
294
+ size: 2,
295
+ fontSizeScaleBase: 2,
282
296
  },
283
297
  spacing: {
284
298
  density: 0.5,
package/dist/arbor/arbor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"arbor.js","sourceRoot":"","sources":["../../src/arbor/arbor.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"arbor.js","sourceRoot":"","sources":["../../src/arbor/arbor.ts"],"names":[],"mappings":"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"}
package/dist/components/typography/typography.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import { useRender } from '@base-ui/react';
2
2
  export interface TypographyProps extends useRender.ComponentProps<'span'> {
3
3
  emphasis?: 'primary' | 'secondary' | 'ambient';
4
+ italic?: boolean;
5
+ underline?: boolean;
6
+ strikethrough?: boolean;
4
7
  }
5
- export declare function Text({ emphasis, render, className, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
8
+ export declare function Text({ emphasis, italic, underline, strikethrough, render, className, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
6
9
  export declare const Heading: import("react").FunctionComponent<TypographyProps>;
7
10
  export declare const HeroText: import("react").FunctionComponent<TypographyProps>;
8
11
  export declare const P: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/typography/typography.js CHANGED
@@ -16,13 +16,16 @@ import { withClassName } from '../../hooks/withClassName.js';
16
16
  import { withProps } from '../../hooks/withProps.js';
17
17
  import cls from './typography.module.css';
18
18
  export function Text(_a) {
19
- var { emphasis, render, className } = _a, rest = __rest(_a, ["emphasis", "render", "className"]);
19
+ var { emphasis, italic, underline, strikethrough, render, className } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className"]);
20
20
  return useRender({
21
21
  render,
22
22
  defaultTagName: 'span',
23
23
  props: Object.assign(Object.assign({}, rest), { className: clsx(cls.typography, cls.removeMargin, className) }),
24
24
  state: {
25
25
  emphasis,
26
+ italic: italic ? true : undefined,
27
+ underline: underline ? true : undefined,
28
+ strikethrough: strikethrough ? true : undefined,
26
29
  },
27
30
  });
28
31
  }
package/dist/components/typography/typography.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAM1C,MAAM,UAAU,IAAI,CAAC,EAKH;QALG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,OAEQ,EADd,IAAI,cAJa,mCAKpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;SACR;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC"}
1
+ {"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAS1C,MAAM,UAAU,IAAI,CAAC,EAQH;QARG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,OAEQ,EADd,IAAI,cAPa,2EAQpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;YACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACjC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACvC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC/C;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC"}
package/dist/components/typography/typography.module.css CHANGED
@@ -15,6 +15,16 @@
15
15
  line-height: var(--m-text-ambient-lineHeight);
16
16
  font-weight: var(--m-text-ambient-weight);
17
17
  }
18
+
19
+ &[data-italic] {
20
+ font-style: italic;
21
+ }
22
+ &[data-underline] {
23
+ text-decoration: underline;
24
+ }
25
+ &[data-strikethrough] {
26
+ text-decoration: line-through;
27
+ }
18
28
  }
19
29
 
20
30
  @layer components {
package/dist/components/typography/typography.stories.d.ts CHANGED
@@ -11,3 +11,4 @@ declare const meta: {
11
11
  export default meta;
12
12
  type Story = StoryObj;
13
13
  export declare const Default: Story;
14
+ export declare const Modes: Story;
package/dist/components/typography/typography.stories.js CHANGED
@@ -11,7 +11,21 @@ const meta = {
11
11
  export default meta;
12
12
  export const Default = {
13
13
  render() {
14
- return (_jsxs(Box, { col: true, gap: true, children: [_jsx(HeroText, { emphasis: "primary", children: "Hero Text: Lorem ipsum dolor sit amet etc etc" }), _jsx(Heading, { emphasis: "primary", children: "Heading Primary: Lorem ipsum dolor sit amet etc etc" }), _jsx(Heading, { emphasis: "secondary", children: "Heading Secondary: Lorem ipsum dolor sit amet etc etc" }), _jsx(Heading, { emphasis: "ambient", children: "Heading Ambient: Lorem ipsum dolor sit amet etc etc" }), _jsx(Text, { emphasis: "primary", children: "Text Primary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32." }), _jsx(Text, { emphasis: "secondary", children: "Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32." }), _jsx(Text, { emphasis: "ambient", children: "Text Ambient: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32." })] }));
14
+ return (_jsxs(Box, { col: true, gap: true, children: [_jsx(HeroText, { emphasis: "primary", children: "Hero Text: Lorem ipsum dolor sit amet etc etc" }), _jsx(Heading, { emphasis: "primary", children: "Heading Primary: Lorem ipsum dolor sit amet etc etc" }), _jsx(Heading, { emphasis: "secondary", children: "Heading Secondary: Lorem ipsum dolor sit amet etc etc" }), _jsx(Heading, { emphasis: "ambient", children: "Heading Ambient: Lorem ipsum dolor sit amet etc etc" }), _jsx(Text, { emphasis: "primary", children: "Text Primary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32." }), _jsx(Text, { emphasis: "secondary", children: "Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32." }), _jsx(Text, { emphasis: "ambient", children: "Text Ambient: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32." }), _jsx("hr", {}), _jsx(Text, { emphasis: "secondary", italic: true, underline: true, strikethrough: true, children: "Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source." })] }));
15
+ },
16
+ };
17
+ export const Modes = {
18
+ argTypes: {
19
+ mode: {
20
+ control: 'select',
21
+ options: ['hero', 'heading', 'normal'],
22
+ },
23
+ },
24
+ args: {
25
+ mode: 'normal',
26
+ },
27
+ render({ mode }) {
28
+ return (_jsxs(Box, { col: true, gap: true, className: `@mode-${mode}`, children: [_jsx(Text, { emphasis: "primary", children: "Text Primary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old." }), _jsx(Text, { emphasis: "secondary", children: "Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old." }), _jsx(Text, { emphasis: "ambient", children: "Text Ambient: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old." })] }));
15
29
  },
16
30
  };
17
31
  //# sourceMappingURL=typography.stories.js.map
package/dist/components/typography/typography.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"typography.stories.js","sourceRoot":"","sources":["../../../src/components/typography/typography.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,mBACX,KAAC,QAAQ,IAAC,QAAQ,EAAC,SAAS,8DAEjB,EACX,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,oEAEjB,EACV,KAAC,OAAO,IAAC,QAAQ,EAAC,WAAW,sEAEnB,EACV,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,oEAEjB,EACV,KAAC,IAAI,IAAC,QAAQ,EAAC,SAAS,8xBAajB,EACP,KAAC,IAAI,IAAC,QAAQ,EAAC,WAAW,gyBAanB,EACP,KAAC,IAAI,IAAC,QAAQ,EAAC,SAAS,8xBAajB,IACF,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
1
+ {"version":3,"file":"typography.stories.js","sourceRoot":"","sources":["../../../src/components/typography/typography.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,mBACX,KAAC,QAAQ,IAAC,QAAQ,EAAC,SAAS,8DAEjB,EACX,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,oEAEjB,EACV,KAAC,OAAO,IAAC,QAAQ,EAAC,WAAW,sEAEnB,EACV,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,oEAEjB,EACV,KAAC,IAAI,IAAC,QAAQ,EAAC,SAAS,8xBAajB,EACP,KAAC,IAAI,IAAC,QAAQ,EAAC,WAAW,gyBAanB,EACP,KAAC,IAAI,IAAC,QAAQ,EAAC,SAAS,8xBAajB,EAEP,cAAM,EAEN,KAAC,IAAI,IAAC,QAAQ,EAAC,WAAW,EAAC,MAAM,QAAC,SAAS,QAAC,aAAa,mdAQlD,IACF,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,CAAC;SACtC;KACD;IACD,IAAI,EAAE;QACL,IAAI,EAAE,QAAQ;KACd;IACD,MAAM,CAAC,EAAE,IAAI,EAAO;QACnB,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,QAAC,SAAS,EAAE,SAAS,IAAI,EAAE,aACtC,KAAC,IAAI,IAAC,QAAQ,EAAC,SAAS,kMAIjB,EACP,KAAC,IAAI,IAAC,QAAQ,EAAC,WAAW,oMAInB,EACP,KAAC,IAAI,IAAC,QAAQ,EAAC,SAAS,kMAIjB,IACF,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
package/dist/css/arbor.css CHANGED
@@ -196,29 +196,29 @@
196
196
  --m-color-palette-user-_neutral-heavy: light-dark(oklch(calc(clamp(0, calc(clamp(0, calc(calc(0.9 + (-1 * 0.43527528164806206 * 0.7))), 1) - pow(clamp(0, calc(1 * 0.4 * calc(0.75 + (-1 * 0.43527528164806206 * 0.2)) * 0.5), 0.4), 1.7)), 1)) calc(clamp(0, calc(clamp(0, calc(1 * 0.4 * calc(0.75 + (-1 * 0.43527528164806206 * 0.2)) * 0.5), 0.4) * 0.5 * 0.15), 0.4)) calc(calc(0 * 1))), oklch(calc(clamp(0, calc(clamp(0, calc(calc(0.55 + (-1 * 0.43527528164806206 * -0.85))), 1) - pow(clamp(0, calc(1 * 0.4 * calc(0.8 + (-1 * 0.43527528164806206 * 0.48)) * 0.5), 0.4), 1.7)), 1)) calc(clamp(0, calc(clamp(0, calc(1 * 0.4 * calc(0.8 + (-1 * 0.43527528164806206 * 0.48)) * 0.5), 0.4) * 0.5 * 0.15), 0.4)) calc(calc(0 * 1))));
197
197
  --m-color-palette-user-_neutral-ink: light-dark(oklch(calc(clamp(0, calc(clamp(0, calc(calc(0.9 + (-1 * 1 * 0.7))), 1) - pow(clamp(0, calc(1 * 0.4 * calc(0.75 + (-1 * 1 * 0.2)) * 0.5), 0.4), 1.7)), 1)) calc(clamp(0, calc(clamp(0, calc(1 * 0.4 * calc(0.75 + (-1 * 1 * 0.2)) * 0.5), 0.4) * 0.5 * 0.15), 0.4)) calc(calc(0 * 1))), oklch(calc(clamp(0, calc(clamp(0, calc(calc(0.55 + (-1 * 1 * -0.85))), 1) - pow(clamp(0, calc(1 * 0.4 * calc(0.8 + (-1 * 1 * 0.48)) * 0.5), 0.4), 1.7)), 1)) calc(clamp(0, calc(clamp(0, calc(1 * 0.4 * calc(0.8 + (-1 * 1 * 0.48)) * 0.5), 0.4) * 0.5 * 0.15), 0.4)) calc(calc(0 * 1))));
198
198
  --m-global-color-saturation: 0.5;
199
- --m-action-padding-inline: calc((calc(8px * pow(2, 1 * 1) / 1) + 1 * calc(8px * pow(2, -1 * 1) / 1)) / 1);
200
- --m-action-padding: calc(calc(8px * pow(2, 0 * 1) / 1) / 1) calc((calc(8px * pow(2, 1 * 1) / 1) + 1 * calc(8px * pow(2, -1 * 1) / 1)) / 1);
201
- --m-action-padding-block: calc(calc(8px * pow(2, 0 * 1) / 1) / 1);
202
- --m-control-padding-inline: calc((calc(8px * pow(2, 0 * 1) / 1) + 1 * calc(8px * pow(2, -1 * 1) / 1)) / 1);
203
- --m-control-padding: calc(8px * pow(2, -1 * 1) / 1) calc((calc(8px * pow(2, 0 * 1) / 1) + 1 * calc(8px * pow(2, -1 * 1) / 1)) / 1);
204
- --m-spacing-xs: calc(8px * pow(2, -2 * 1) / 1);
205
- --m-spacing-sm: calc(8px * pow(2, -1 * 1) / 1);
199
+ --m-action-padding-inline: calc((calc(round(8px * pow(2, 1 * 1) / 1, 1px)) + 1 * calc(round(8px * pow(2, -1 * 1) / 1, 1px))) / 1);
200
+ --m-action-padding: calc(calc(round(8px * pow(2, 0 * 1) / 1, 1px)) / 1) calc((calc(round(8px * pow(2, 1 * 1) / 1, 1px)) + 1 * calc(round(8px * pow(2, -1 * 1) / 1, 1px))) / 1);
201
+ --m-action-padding-block: calc(calc(round(8px * pow(2, 0 * 1) / 1, 1px)) / 1);
202
+ --m-control-padding-inline: calc((calc(round(8px * pow(2, 0 * 1) / 1, 1px)) + 1 * calc(round(8px * pow(2, -1 * 1) / 1, 1px))) / 1);
203
+ --m-control-padding: calc(round(8px * pow(2, -1 * 1) / 1, 1px)) calc((calc(round(8px * pow(2, 0 * 1) / 1, 1px)) + 1 * calc(round(8px * pow(2, -1 * 1) / 1, 1px))) / 1);
204
+ --m-spacing-xs: calc(round(8px * pow(2, -2 * 1) / 1, 1px));
205
+ --m-spacing-sm: calc(round(8px * pow(2, -1 * 1) / 1, 1px));
206
206
  --m-control-padding-block: var(--m-spacing-sm);
207
- --m-radius-xs: calc(1 * calc(8px * pow(2, -1 * 1) / 1) / 1);
208
- --m-spacing-md: calc(8px * pow(2, 0 * 1) / 1);
207
+ --m-radius-xs: calc(1 * calc(round(8px * pow(2, -1 * 1) / 1, 1px)) / 1);
208
+ --m-spacing-md: calc(round(8px * pow(2, 0 * 1) / 1, 1px));
209
209
  --m-spacing: var(--m-spacing-md);
210
- --m-radius-sm: calc(1 * calc(8px * pow(2, 0 * 1) / 1) / 1);
211
- --m-spacing-lg: calc(8px * pow(2, 1 * 1) / 1);
212
- --m-surface-padding-inline: calc(calc(8px * pow(2, 1 * 1) / 1) * max(1, 1 * 1));
213
- --m-surface-padding: calc(calc(8px * pow(2, 1 * 1) / 1) * max(1, 1 * 1)) calc(calc(8px * pow(2, 1 * 1) / 1) * max(1, 1 * 1));
214
- --m-surface-padding-block: calc(calc(8px * pow(2, 1 * 1) / 1) * max(1, 1 * 1));
215
- --m-radius-md: calc(1 * calc(8px * pow(2, 1 * 1) / 1) / 1);
216
- --m-action-radius: calc(calc(1 * calc(8px * pow(2, 1 * 1) / 1) / 1) * 99 * 1);
217
- --m-control-radius: calc(calc(1 * calc(8px * pow(2, 1 * 1) / 1) / 1) * 1 * 1);
218
- --m-surface-radius: calc(calc(1 * calc(8px * pow(2, 1 * 1) / 1) / 1) * 1 * 1);
210
+ --m-radius-sm: calc(1 * calc(round(8px * pow(2, 0 * 1) / 1, 1px)) / 1);
211
+ --m-spacing-lg: calc(round(8px * pow(2, 1 * 1) / 1, 1px));
212
+ --m-surface-padding-inline: calc(calc(round(8px * pow(2, 1 * 1) / 1, 1px)) * max(1, 1 * 1));
213
+ --m-surface-padding: calc(calc(round(8px * pow(2, 1 * 1) / 1, 1px)) * max(1, 1 * 1)) calc(calc(round(8px * pow(2, 1 * 1) / 1, 1px)) * max(1, 1 * 1));
214
+ --m-surface-padding-block: calc(calc(round(8px * pow(2, 1 * 1) / 1, 1px)) * max(1, 1 * 1));
215
+ --m-radius-md: calc(1 * calc(round(8px * pow(2, 1 * 1) / 1, 1px)) / 1);
216
+ --m-action-radius: calc(calc(1 * calc(round(8px * pow(2, 1 * 1) / 1, 1px)) / 1) * 99 * 1);
217
+ --m-control-radius: calc(calc(1 * calc(round(8px * pow(2, 1 * 1) / 1, 1px)) / 1) * 1 * 1);
218
+ --m-surface-radius: calc(calc(1 * calc(round(8px * pow(2, 1 * 1) / 1, 1px)) / 1) * 1 * 1);
219
219
  --m-radius: var(--m-radius-md);
220
- --m-spacing-xl: calc(8px * pow(2, 2 * 1) / 1);
221
- --m-radius-lg: calc(1 * calc(8px * pow(2, 2 * 1) / 1) / 1);
220
+ --m-spacing-xl: calc(round(8px * pow(2, 2 * 1) / 1, 1px));
221
+ --m-radius-lg: calc(1 * calc(round(8px * pow(2, 2 * 1) / 1, 1px)) / 1);
222
222
  --m-global-spacing-density: 1;
223
223
  --m-shadow-sm-blur: calc(0.5 * 8px * 0.25 * pow(2, 0 - 1));
224
224
  --m-shadow-md-blur: calc(0.5 * 8px * 0.25 * pow(2, 1 - 1));
@@ -902,14 +902,14 @@
902
902
  --m-action-padding-block: calc(var(--m-spacing-md) / var(--m-global-spacing-density));
903
903
  --m-control-padding-inline: calc((var(--m-spacing-md) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
904
904
  --m-control-padding: var(--m-control-padding-block) var(--m-control-padding-inline);
905
- --m-spacing-xs: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
906
- --m-spacing-sm: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
905
+ --m-spacing-xs: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
906
+ --m-spacing-sm: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
907
907
  --m-control-padding-block: var(--m-spacing-sm);
908
908
  --m-radius-xs: calc(var(--m-global-shape-roundness) * var(--m-spacing-sm) / var(--m-global-spacing-density));
909
- --m-spacing-md: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
909
+ --m-spacing-md: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
910
910
  --m-spacing: var(--m-spacing-md);
911
911
  --m-radius-sm: calc(var(--m-global-shape-roundness) * var(--m-spacing-md) / var(--m-global-spacing-density));
912
- --m-spacing-lg: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
912
+ --m-spacing-lg: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
913
913
  --m-surface-padding-inline: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
914
914
  --m-surface-padding: var(--m-surface-padding-block) var(--m-surface-padding-inline);
915
915
  --m-surface-padding-block: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
@@ -918,7 +918,7 @@
918
918
  --m-control-radius: calc(var(--m-radius-md) * var(--m-control-roundness) * var(--m-global-shape-roundness));
919
919
  --m-surface-radius: calc(var(--m-radius-md) * var(--m-surface-roundness) * var(--m-global-shape-roundness));
920
920
  --m-radius: var(--m-radius-md);
921
- --m-spacing-xl: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
921
+ --m-spacing-xl: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
922
922
  --m-radius-lg: calc(var(--m-global-shape-roundness) * var(--m-spacing-xl) / var(--m-global-spacing-density));
923
923
  --m-global-spacing-density: 1.25;
924
924
  --m-typography-size-sm: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), -1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
@@ -945,14 +945,14 @@
945
945
  --m-action-padding-block: calc(var(--m-spacing-md) / var(--m-global-spacing-density));
946
946
  --m-control-padding-inline: calc((var(--m-spacing-md) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
947
947
  --m-control-padding: var(--m-control-padding-block) var(--m-control-padding-inline);
948
- --m-spacing-xs: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
949
- --m-spacing-sm: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
948
+ --m-spacing-xs: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
949
+ --m-spacing-sm: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
950
950
  --m-control-padding-block: var(--m-spacing-sm);
951
951
  --m-radius-xs: calc(var(--m-global-shape-roundness) * var(--m-spacing-sm) / var(--m-global-spacing-density));
952
- --m-spacing-md: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
952
+ --m-spacing-md: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
953
953
  --m-spacing: var(--m-spacing-md);
954
954
  --m-radius-sm: calc(var(--m-global-shape-roundness) * var(--m-spacing-md) / var(--m-global-spacing-density));
955
- --m-spacing-lg: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
955
+ --m-spacing-lg: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
956
956
  --m-surface-padding-inline: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
957
957
  --m-surface-padding: var(--m-surface-padding-block) var(--m-surface-padding-inline);
958
958
  --m-surface-padding-block: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
@@ -961,7 +961,7 @@
961
961
  --m-control-radius: calc(var(--m-radius-md) * var(--m-control-roundness) * var(--m-global-shape-roundness));
962
962
  --m-surface-radius: calc(var(--m-radius-md) * var(--m-surface-roundness) * var(--m-global-shape-roundness));
963
963
  --m-radius: var(--m-radius-md);
964
- --m-spacing-xl: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
964
+ --m-spacing-xl: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
965
965
  --m-radius-lg: calc(var(--m-global-shape-roundness) * var(--m-spacing-xl) / var(--m-global-spacing-density));
966
966
  --m-global-spacing-density: 1.5;
967
967
  --m-typography-size-sm: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), -1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
@@ -982,21 +982,21 @@
982
982
  --m-global-typography-minFontSize: 10px;
983
983
  }
984
984
 
985
- .\@mode-density-reset {
986
- --_-meta-modeName: density-reset;
985
+ .\@mode-normal {
986
+ --_-meta-modeName: normal;
987
987
  --m-action-padding-inline: calc((var(--m-spacing-lg) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
988
988
  --m-action-padding: var(--m-action-padding-block) var(--m-action-padding-inline);
989
989
  --m-action-padding-block: calc(var(--m-spacing-md) / var(--m-global-spacing-density));
990
990
  --m-control-padding-inline: calc((var(--m-spacing-md) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
991
991
  --m-control-padding: var(--m-control-padding-block) var(--m-control-padding-inline);
992
- --m-spacing-xs: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
993
- --m-spacing-sm: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
992
+ --m-spacing-xs: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
993
+ --m-spacing-sm: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
994
994
  --m-control-padding-block: var(--m-spacing-sm);
995
995
  --m-radius-xs: calc(var(--m-global-shape-roundness) * var(--m-spacing-sm) / var(--m-global-spacing-density));
996
- --m-spacing-md: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
996
+ --m-spacing-md: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
997
997
  --m-spacing: var(--m-spacing-md);
998
998
  --m-radius-sm: calc(var(--m-global-shape-roundness) * var(--m-spacing-md) / var(--m-global-spacing-density));
999
- --m-spacing-lg: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
999
+ --m-spacing-lg: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1000
1000
  --m-surface-padding-inline: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
1001
1001
  --m-surface-padding: var(--m-surface-padding-block) var(--m-surface-padding-inline);
1002
1002
  --m-surface-padding-block: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
@@ -1005,9 +1005,68 @@
1005
1005
  --m-control-radius: calc(var(--m-radius-md) * var(--m-control-roundness) * var(--m-global-shape-roundness));
1006
1006
  --m-surface-radius: calc(var(--m-radius-md) * var(--m-surface-roundness) * var(--m-global-shape-roundness));
1007
1007
  --m-radius: var(--m-radius-md);
1008
- --m-spacing-xl: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
1008
+ --m-spacing-xl: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1009
1009
  --m-radius-lg: calc(var(--m-global-shape-roundness) * var(--m-spacing-xl) / var(--m-global-spacing-density));
1010
1010
  --m-global-spacing-density: 1;
1011
+ --m-typography-size-sm: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), -1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
1012
+ --m-text-ambient-size: var(--m-typography-size-sm);
1013
+ --m-typography-size-md: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), 0 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
1014
+ --m-text-secondary-size: var(--m-typography-size-md);
1015
+ --m-typography-size: var(--m-typography-size-md);
1016
+ --m-typography-size-lg: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), 1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
1017
+ --m-text-primary-size: var(--m-typography-size-lg);
1018
+ --m-typography-lineHeight-tight: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((-1 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1019
+ --m-text-primary-lineHeight: var(--m-typography-lineHeight-tight);
1020
+ --m-typography-lineHeight-normal: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((0 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1021
+ --m-text-secondary-lineHeight: var(--m-typography-lineHeight-normal);
1022
+ --m-typography-lineHeight: var(--m-typography-lineHeight-normal);
1023
+ --m-typography-lineHeight-loose: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((1 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1024
+ --m-text-ambient-lineHeight: var(--m-typography-lineHeight-loose);
1025
+ --m-global-typography-size: 1;
1026
+ --m-global-typography-minFontSize: 12px;
1027
+ }
1028
+
1029
+ .\@mode-loose {
1030
+ --_-meta-modeName: loose;
1031
+ --m-action-padding-inline: calc((var(--m-spacing-lg) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
1032
+ --m-action-padding: var(--m-action-padding-block) var(--m-action-padding-inline);
1033
+ --m-action-padding-block: calc(var(--m-spacing-md) / var(--m-global-spacing-density));
1034
+ --m-control-padding-inline: calc((var(--m-spacing-md) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
1035
+ --m-control-padding: var(--m-control-padding-block) var(--m-control-padding-inline);
1036
+ --m-spacing-xs: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1037
+ --m-spacing-sm: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1038
+ --m-control-padding-block: var(--m-spacing-sm);
1039
+ --m-radius-xs: calc(var(--m-global-shape-roundness) * var(--m-spacing-sm) / var(--m-global-spacing-density));
1040
+ --m-spacing-md: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1041
+ --m-spacing: var(--m-spacing-md);
1042
+ --m-radius-sm: calc(var(--m-global-shape-roundness) * var(--m-spacing-md) / var(--m-global-spacing-density));
1043
+ --m-spacing-lg: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1044
+ --m-surface-padding-inline: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
1045
+ --m-surface-padding: var(--m-surface-padding-block) var(--m-surface-padding-inline);
1046
+ --m-surface-padding-block: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
1047
+ --m-radius-md: calc(var(--m-global-shape-roundness) * var(--m-spacing-lg) / var(--m-global-spacing-density));
1048
+ --m-action-radius: calc(var(--m-radius-md) * var(--m-action-roundness) * var(--m-global-shape-roundness));
1049
+ --m-control-radius: calc(var(--m-radius-md) * var(--m-control-roundness) * var(--m-global-shape-roundness));
1050
+ --m-surface-radius: calc(var(--m-radius-md) * var(--m-surface-roundness) * var(--m-global-shape-roundness));
1051
+ --m-radius: var(--m-radius-md);
1052
+ --m-spacing-xl: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1053
+ --m-radius-lg: calc(var(--m-global-shape-roundness) * var(--m-spacing-xl) / var(--m-global-spacing-density));
1054
+ --m-global-spacing-density: 0.75;
1055
+ --m-typography-size-sm: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), -1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
1056
+ --m-text-ambient-size: var(--m-typography-size-sm);
1057
+ --m-typography-size-md: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), 0 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
1058
+ --m-text-secondary-size: var(--m-typography-size-md);
1059
+ --m-typography-size: var(--m-typography-size-md);
1060
+ --m-typography-size-lg: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), 1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
1061
+ --m-text-primary-size: var(--m-typography-size-lg);
1062
+ --m-typography-lineHeight-tight: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((-1 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1063
+ --m-text-primary-lineHeight: var(--m-typography-lineHeight-tight);
1064
+ --m-typography-lineHeight-normal: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((0 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1065
+ --m-text-secondary-lineHeight: var(--m-typography-lineHeight-normal);
1066
+ --m-typography-lineHeight: var(--m-typography-lineHeight-normal);
1067
+ --m-typography-lineHeight-loose: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((1 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1068
+ --m-text-ambient-lineHeight: var(--m-typography-lineHeight-loose);
1069
+ --m-global-typography-size: 1.125;
1011
1070
  }
1012
1071
 
1013
1072
  .\@mode-heading {
@@ -1036,14 +1095,14 @@
1036
1095
  --m-action-padding-block: calc(var(--m-spacing-md) / var(--m-global-spacing-density));
1037
1096
  --m-control-padding-inline: calc((var(--m-spacing-md) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
1038
1097
  --m-control-padding: var(--m-control-padding-block) var(--m-control-padding-inline);
1039
- --m-spacing-xs: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
1040
- --m-spacing-sm: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
1098
+ --m-spacing-xs: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1099
+ --m-spacing-sm: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), -1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1041
1100
  --m-control-padding-block: var(--m-spacing-sm);
1042
1101
  --m-radius-xs: calc(var(--m-global-shape-roundness) * var(--m-spacing-sm) / var(--m-global-spacing-density));
1043
- --m-spacing-md: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
1102
+ --m-spacing-md: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 0 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1044
1103
  --m-spacing: var(--m-spacing-md);
1045
1104
  --m-radius-sm: calc(var(--m-global-shape-roundness) * var(--m-spacing-md) / var(--m-global-spacing-density));
1046
- --m-spacing-lg: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
1105
+ --m-spacing-lg: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 1 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1047
1106
  --m-surface-padding-inline: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
1048
1107
  --m-surface-padding: var(--m-surface-padding-block) var(--m-surface-padding-inline);
1049
1108
  --m-surface-padding-block: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
@@ -1052,7 +1111,7 @@
1052
1111
  --m-control-radius: calc(var(--m-radius-md) * var(--m-control-roundness) * var(--m-global-shape-roundness));
1053
1112
  --m-surface-radius: calc(var(--m-radius-md) * var(--m-surface-roundness) * var(--m-global-shape-roundness));
1054
1113
  --m-radius: var(--m-radius-md);
1055
- --m-spacing-xl: calc(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density));
1114
+ --m-spacing-xl: calc(round(var(--m-global-spacing-baseSize) * pow(var(--m-global-spacing-scaleBase), 2 * var(--m-global-spacing-scaleExponentStep)) / var(--m-global-spacing-density), 1px));
1056
1115
  --m-radius-lg: calc(var(--m-global-shape-roundness) * var(--m-spacing-xl) / var(--m-global-spacing-density));
1057
1116
  --m-global-spacing-density: 0.5;
1058
1117
  --m-typography-size-sm: calc(clamp(var(--m-global-typography-minFontSize), 1rem * var(--m-global-typography-size) * pow(var(--m-global-typography-fontSizeScaleBase), -1 * var(--m-global-typography-fontSizeScaleExponentStep)), var(--m-global-typography-maxFontSize)));
@@ -1069,8 +1128,8 @@
1069
1128
  --m-typography-lineHeight: var(--m-typography-lineHeight-normal);
1070
1129
  --m-typography-lineHeight-loose: calc(clamp(var(--m-global-typography-minLineHeight), var(--m-global-typography-baseLineHeight) + ((1 + (1 - var(--m-global-typography-size)) / 2) * var(--m-global-typography-lineHeightStep)), var(--m-global-typography-maxLineHeight)));
1071
1130
  --m-text-ambient-lineHeight: var(--m-typography-lineHeight-loose);
1072
- --m-global-typography-size: 3;
1073
- --m-global-typography-fontSizeScaleBase: 1.5;
1131
+ --m-global-typography-size: 2;
1132
+ --m-global-typography-fontSizeScaleBase: 2;
1074
1133
  }
1075
1134
  }
1076
1135
  /* Mode property definitions, if relevant */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.2",
3
+ "version": "6.0.4",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/arbor/arbor.ts CHANGED
@@ -72,10 +72,12 @@ export function presetAtype<
72
72
  baseWeight: 400,
73
73
  lineHeightStep: 0.125,
74
74
  minLineHeight: 1,
75
+ roundToPixel: true,
75
76
  ...config?.typography,
76
77
  },
77
78
  spacing: {
78
79
  baseSize: '8px',
80
+ roundToPixel: true,
79
81
  ...config?.spacing,
80
82
  },
81
83
  shape: {
@@ -322,11 +324,25 @@ export function presetAtype<
322
324
  },
323
325
  },
324
326
  });
325
- preset.bundleMode('density-reset', {
327
+ preset.bundleMode('normal', {
326
328
  global: {
327
329
  spacing: {
328
330
  density: 1,
329
331
  },
332
+ typography: {
333
+ size: 1,
334
+ minFontSize: '12px',
335
+ },
336
+ },
337
+ });
338
+ preset.bundleMode('loose', {
339
+ global: {
340
+ spacing: {
341
+ density: 0.75,
342
+ },
343
+ typography: {
344
+ size: 1.125,
345
+ },
330
346
  },
331
347
  });
332
348
 
@@ -340,8 +356,8 @@ export function presetAtype<
340
356
  preset.bundleMode('hero', {
341
357
  global: {
342
358
  typography: {
343
- size: 3,
344
- fontSizeScaleBase: 1.5,
359
+ size: 2,
360
+ fontSizeScaleBase: 2,
345
361
  },
346
362
  spacing: {
347
363
  density: 0.5,
package/src/components/typography/typography.module.css CHANGED
@@ -15,6 +15,16 @@
15
15
  line-height: var(--m-text-ambient-lineHeight);
16
16
  font-weight: var(--m-text-ambient-weight);
17
17
  }
18
+
19
+ &[data-italic] {
20
+ font-style: italic;
21
+ }
22
+ &[data-underline] {
23
+ text-decoration: underline;
24
+ }
25
+ &[data-strikethrough] {
26
+ text-decoration: line-through;
27
+ }
18
28
  }
19
29
 
20
30
  @layer components {
package/src/components/typography/typography.stories.tsx CHANGED
@@ -72,6 +72,51 @@ export const Default: Story = {
72
72
  first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
73
73
  a line in section 1.10.32.
74
74
  </Text>
75
+
76
+ <hr />
77
+
78
+ <Text emphasis="secondary" italic underline strikethrough>
79
+ Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply
80
+ random text. It has roots in a piece of classical Latin literature
81
+ from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
82
+ professor at Hampden-Sydney College in Virginia, looked up one of the
83
+ more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
84
+ going through the cites of the word in classical literature,
85
+ discovered the undoubtable source.
86
+ </Text>
87
+ </Box>
88
+ );
89
+ },
90
+ };
91
+
92
+ export const Modes: Story = {
93
+ argTypes: {
94
+ mode: {
95
+ control: 'select',
96
+ options: ['hero', 'heading', 'normal'],
97
+ },
98
+ },
99
+ args: {
100
+ mode: 'normal',
101
+ },
102
+ render({ mode }: any) {
103
+ return (
104
+ <Box col gap className={`@mode-${mode}`}>
105
+ <Text emphasis="primary">
106
+ Text Primary: Contrary to popular belief, Lorem Ipsum is not simply
107
+ random text. It has roots in a piece of classical Latin literature
108
+ from 45 BC, making it over 2000 years old.
109
+ </Text>
110
+ <Text emphasis="secondary">
111
+ Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply
112
+ random text. It has roots in a piece of classical Latin literature
113
+ from 45 BC, making it over 2000 years old.
114
+ </Text>
115
+ <Text emphasis="ambient">
116
+ Text Ambient: Contrary to popular belief, Lorem Ipsum is not simply
117
+ random text. It has roots in a piece of classical Latin literature
118
+ from 45 BC, making it over 2000 years old.
119
+ </Text>
75
120
  </Box>
76
121
  );
77
122
  },
package/src/components/typography/typography.tsx CHANGED
@@ -6,10 +6,16 @@ import cls from './typography.module.css';
6
6
 
7
7
  export interface TypographyProps extends useRender.ComponentProps<'span'> {
8
8
  emphasis?: 'primary' | 'secondary' | 'ambient';
9
+ italic?: boolean;
10
+ underline?: boolean;
11
+ strikethrough?: boolean;
9
12
  }
10
13
 
11
14
  export function Text({
12
15
  emphasis,
16
+ italic,
17
+ underline,
18
+ strikethrough,
13
19
  render,
14
20
  className,
15
21
  ...rest
@@ -23,6 +29,9 @@ export function Text({
23
29
  },
24
30
  state: {
25
31
  emphasis,
32
+ italic: italic ? true : undefined,
33
+ underline: underline ? true : undefined,
34
+ strikethrough: strikethrough ? true : undefined,
26
35
  },
27
36
  });
28
37
  }