@a-type/ui 6.0.2 → 6.0.3

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 +3 -3
  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 +42 -42
  11. package/package.json +1 -1
  12. package/src/arbor/arbor.ts +4 -2
  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],
@@ -277,8 +277,8 @@ export function presetAtype(config) {
277
277
  preset.bundleMode('hero', {
278
278
  global: {
279
279
  typography: {
280
- size: 3,
281
- fontSizeScaleBase: 1.5,
280
+ size: 2,
281
+ fontSizeScaleBase: 2,
282
282
  },
283
283
  spacing: {
284
284
  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":"AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAEN,kBAAkB,EAClB,WAAW,GACX,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEjE,MAAM,aAAa,GAAG;IACrB,MAAM,EAAE;QACP,KAAK,EAAE;YACN,GAAG,EAAE,EAAE;SACP;QACD,IAAI,EAAE;YACL,GAAG,EAAE,MAAM;SACX;QACD,MAAM,EAAE;YACP,GAAG,EAAE,KAAK;SACV;QACD,SAAS,EAAE;YACV,GAAG,EAAE,MAAM;SACX;QACD,QAAQ,EAAE;YACT,GAAG,EAAE,MAAM;SACX;QACD,SAAS,EAAE;YACV,GAAG,EAAE,EAAE;SACP;QACD,OAAO,EAAE;YACR,GAAG,EAAE,GAAG;SACR;QACD,IAAI,EAAE;YACL,GAAG,EAAE,CAAC;SACN;KACD;IACD,SAAS,EAAE,OAAO;CAClB,CAAC;AAYF,MAAM,UAAU,WAAW,CAEzB,MAA6B;;IAC9B,MAAM,IAAI,GAAG,WAAW,iCACpB,MAAM,KACT,KAAK,gCACJ,gBAAgB,EAAE,GAAG,IAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAChB,MAAM,kCACF,aAAa,CAAC,MAAM,GACpB,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,MAAM,GAEzB,SAAS,EACR,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS;iBACjB,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,CAAA;gBACxB,aAAa,CAAC,SAAS,KAEzB,UAAU,kBACT,eAAe,EAAE,MAAM,EACvB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,GAAG,EACd,UAAU,EAAE,GAAG,EACf,UAAU,EAAE,GAAG,EACf,cAAc,EAAE,KAAK,EACrB,aAAa,EAAE,CAAC,IACb,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,GAEtB,OAAO,kBACN,QAAQ,EAAE,KAAK,IACZ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,GAEnB,KAAK,kBACJ,SAAS,EAAE,CAAC,IACT,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,GAEjB,MAAM,kBACL,YAAY,EAAE,qBAAqB,IAChC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAEjB,CAAC;IAEH,MAAM,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACjB,KAAK,EAAE;gBACN,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;aACjC;YACD,MAAM,EAAE;gBACP,SAAS,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,MAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBAE1D,KAAK,EAAE;oBACN,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;oBAC3B,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc;oBAChC,MAAM,EAAE,GAAG,CAAA;QACR,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;yBACtD,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;MAChD;oBACD,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG;oBAC5B,WAAW,EAAE,OAAO;oBACpB,WAAW,EAAE,KAAK;iBAClB;gBACD,OAAO,EAAE;oBACR,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG;iBAC5B;gBACD,SAAS,EAAE;oBACV,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG;iBAC5B;aACD;YACD,OAAO,EAAE;gBACR,SAAS,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;gBAClD,OAAO,EAAE;oBACR,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;iBACxB;aACD;YACD,OAAO,EAAE;gBACR,SAAS,EAAE,CAAC;aACZ;YACD,IAAI,EAAE;gBACL,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,CAAC;aACb;YACD,SAAS,EAAE;gBACV,KAAK,EAAE;oBACN,IAAI,EAAE,kBAAkB,CACvB;wBACC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;wBACpB,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;qBAClC,EACD,CAAC,CAAC,IAAI,CAAC,MAAM,CACb;iBACD;aACD;SACD,CAAC;QACF,UAAU,EAAE;YACX,KAAK,EAAE;gBACN,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI;aAClC;YACD,IAAI,EAAE;gBACL,GAAG,EAAE;oBACJ,OAAO,EAAE,OAAO;oBAChB,WAAW,EAAE,wBAAwB;iBACrC;gBACD,UAAU,EAAE;oBACX,OAAO,EAAE,QAAQ;oBACjB,WAAW,EAAE,+CAA+C;iBAC5D;aACD;YACD,MAAM,EAAE;gBACP,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;aACrC;SACD;QACD,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrB,OAAO;gBACN,WAAW,EAAE,MAAM,CAAC,cAAc,EAAE;oBACnC,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QAC3D,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QAC3D,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC;wBAC/B,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;qBAC1C,CAAC;sBACc,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;sBAC/B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;uBAC9B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;iBAC1B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;MACtC;iBACD,CAAC;gBACF,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE;oBACtB,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAA;;SAEpB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;SAC5C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;wBACxB,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;4BACrC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG;4BAC1B,QAAQ,EAAE,KAAK;yBACf,CAAC;qBACF,CAAC;;;UAGC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;;;MAGhD;iBACD,CAAC;gBACF,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE;oBACtB,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;SAMpB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;SAC5C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;wBACxB,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;4BACrC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;4BAClC,QAAQ,EAAE,KAAK;yBACf,CAAC;qBACF,CAAC;;;UAGC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;;;MAGhD;iBACD,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE;oBACxB,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAA;;SAEpB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;;;UAG3C,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;;;MAGhD;iBACD,CAAC;gBACF,QAAQ,EAAE,MAAM,CAAC,UAAU,EAAE;oBAC5B,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;SAKpB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;SAChD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;wBAC3B,WAAW,EAAE,IAAI;wBACjB,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;qBACpC,CAAC;;MAEH;iBACD,CAAC;aACF,CAAC;QACH,CAAC;QACD,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE;gBAC/B,UAAU,EAAE;oBACX;wBACC,IAAI,EAAE,SAAS;wBACf,QAAQ,EAAE,KAAK;qBACf;iBACD;gBACD,UAAU,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAC1B,GAAG,CAAA,SAAS,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE;aAC/C,CAAC;SACF,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE;QAC3B,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;SAChC;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE;QAC5B,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;SACzC;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE;QAC9B,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;SAC3C;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE;QAC5B,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;SACjC;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE;QACzB,IAAI,EAAE;YACL,GAAG,EAAE,OAAO,aAAa,QAAQ;YACjC,UAAU,EAAE,OAAO,oBAAoB,MAAM;SAC7C;QACD,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;SACtC;KACD,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAI,GAAG,CAAwB;QACpD,GAAI,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAA6B;QACjE,GAAG,CAAC,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,MAAM;YACxB,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAA6B;YAC/D,CAAC,CAAC,EAAE,CAAC;KACN,CAAC,CAAC;IACH,KAAK,MAAM,SAAS,IAAI,aAAa,EAAE,CAAC;QACvC,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;gBAC5C,+CAA+C;gBAC/C,MAAM,EACL,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;aACrE;SACD,CAAC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE;QAC1B,MAAM,EAAE;YACP,OAAO,EAAE;gBACR,OAAO,EAAE,IAAI;aACb;YACD,UAAU,EAAE;gBACX,IAAI,EAAE,KAAK;aACX;SACD;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE;QAC3B,MAAM,EAAE;YACP,OAAO,EAAE;gBACR,OAAO,EAAE,GAAG;aACZ;YACD,UAAU,EAAE;gBACX,WAAW,EAAE,MAAM;gBACnB,IAAI,EAAE,IAAI;aACV;SACD;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE;QAClC,MAAM,EAAE;YACP,OAAO,EAAE;gBACR,OAAO,EAAE,CAAC;aACV;SACD;KACD,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE;QAC5B,MAAM,EAAE;YACP,UAAU,EAAE;gBACX,IAAI,EAAE,GAAG;aACT;SACD;KACD,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE;QACzB,MAAM,EAAE;YACP,UAAU,EAAE;gBACX,IAAI,EAAE,CAAC;gBACP,iBAAiB,EAAE,GAAG;aACtB;YACD,OAAO,EAAE;gBACR,OAAO,EAAE,GAAG;aACZ;SACD;KACD,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AACf,CAAC;AAED,eAAe,WAAW,CAAC"}
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)));
@@ -989,14 +989,14 @@
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,7 +1005,7 @@
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
1011
  }
@@ -1036,14 +1036,14 @@
1036
1036
  --m-action-padding-block: calc(var(--m-spacing-md) / var(--m-global-spacing-density));
1037
1037
  --m-control-padding-inline: calc((var(--m-spacing-md) + var(--m-global-shape-roundness) * var(--m-spacing-sm)) / var(--m-global-spacing-density));
1038
1038
  --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));
1039
+ --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));
1040
+ --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
1041
  --m-control-padding-block: var(--m-spacing-sm);
1042
1042
  --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));
1043
+ --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
1044
  --m-spacing: var(--m-spacing-md);
1045
1045
  --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));
1046
+ --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
1047
  --m-surface-padding-inline: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
1048
1048
  --m-surface-padding: var(--m-surface-padding-block) var(--m-surface-padding-inline);
1049
1049
  --m-surface-padding-block: calc(var(--m-spacing-lg) * max(1, var(--m-surface-roundness) * var(--m-global-shape-roundness)));
@@ -1052,7 +1052,7 @@
1052
1052
  --m-control-radius: calc(var(--m-radius-md) * var(--m-control-roundness) * var(--m-global-shape-roundness));
1053
1053
  --m-surface-radius: calc(var(--m-radius-md) * var(--m-surface-roundness) * var(--m-global-shape-roundness));
1054
1054
  --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));
1055
+ --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
1056
  --m-radius-lg: calc(var(--m-global-shape-roundness) * var(--m-spacing-xl) / var(--m-global-spacing-density));
1057
1057
  --m-global-spacing-density: 0.5;
1058
1058
  --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 +1069,8 @@
1069
1069
  --m-typography-lineHeight: var(--m-typography-lineHeight-normal);
1070
1070
  --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
1071
  --m-text-ambient-lineHeight: var(--m-typography-lineHeight-loose);
1072
- --m-global-typography-size: 3;
1073
- --m-global-typography-fontSizeScaleBase: 1.5;
1072
+ --m-global-typography-size: 2;
1073
+ --m-global-typography-fontSizeScaleBase: 2;
1074
1074
  }
1075
1075
  }
1076
1076
  /* 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.3",
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: {
@@ -340,8 +342,8 @@ export function presetAtype<
340
342
  preset.bundleMode('hero', {
341
343
  global: {
342
344
  typography: {
343
- size: 3,
344
- fontSizeScaleBase: 1.5,
345
+ size: 2,
346
+ fontSizeScaleBase: 2,
345
347
  },
346
348
  spacing: {
347
349
  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
  }