@mirohq/design-system-typography 0.2.8 → 0.2.10

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.
package/dist/main.js CHANGED
@@ -65,7 +65,6 @@ const Heading = React__default["default"].forwardRef(
65
65
 
66
66
  const StyledText = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
67
67
  lineHeight: 1.5,
68
- color: "$text-neutrals",
69
68
  variants: {
70
69
  size: {
71
70
  normal: {
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n color: '$text-neutrals',\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":["styled","Primitive","React"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":["styled","Primitive","React"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -57,7 +57,6 @@ const Heading = React.forwardRef(
57
57
 
58
58
  const StyledText = styled(Primitive.span, {
59
59
  lineHeight: 1.5,
60
- color: "$text-neutrals",
61
60
  variants: {
62
61
  size: {
63
62
  normal: {
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n color: '$text-neutrals',\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$text-neutrals',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the text font-size.\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight.\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { TextProps } from './text'\n\nexport interface ParagraphProps extends TextProps {\n /**\n * The content.\n */\n children: React.ReactNode\n\n /**\n * Change the paragraph font-size.\n */\n size?: TextProps['size']\n\n /**\n * Change the paragraph font-weight.\n */\n weight?: TextProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -260,6 +260,11 @@ declare const H1: react.ForwardRefExoticComponent<Pick<Omit<{
260
260
  readonly 'stacking-500': any;
261
261
  readonly 'stacking-800': any;
262
262
  };
263
+ 'stroke-width': {
264
+ readonly thin: "1.5px";
265
+ readonly normal: "2px";
266
+ readonly bold: "4px";
267
+ };
263
268
  'z-indices': {
264
269
  readonly dropdownMenu: 100;
265
270
  readonly popover: 200;
@@ -388,6 +393,7 @@ declare const H1: react.ForwardRefExoticComponent<Pick<Omit<{
388
393
  readonly scrollPaddingRight: "space-inset";
389
394
  readonly scrollPaddingTop: "space-inset";
390
395
  readonly stroke: "colors";
396
+ readonly strokeWidth: "stroke-width";
391
397
  readonly textDecorationColor: "colors";
392
398
  readonly textShadow: "shadows";
393
399
  readonly top: "space";
@@ -724,6 +730,11 @@ declare const StyledText: react.ForwardRefExoticComponent<Pick<Omit<{
724
730
  readonly 'stacking-500': any;
725
731
  readonly 'stacking-800': any;
726
732
  };
733
+ 'stroke-width': {
734
+ readonly thin: "1.5px";
735
+ readonly normal: "2px";
736
+ readonly bold: "4px";
737
+ };
727
738
  'z-indices': {
728
739
  readonly dropdownMenu: 100;
729
740
  readonly popover: 200;
@@ -852,6 +863,7 @@ declare const StyledText: react.ForwardRefExoticComponent<Pick<Omit<{
852
863
  readonly scrollPaddingRight: "space-inset";
853
864
  readonly scrollPaddingTop: "space-inset";
854
865
  readonly stroke: "colors";
866
+ readonly strokeWidth: "stroke-width";
855
867
  readonly textDecorationColor: "colors";
856
868
  readonly textShadow: "shadows";
857
869
  readonly top: "space";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-typography",
3
- "version": "0.2.8",
3
+ "version": "0.2.10",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-primitive": "^1.1.0",
30
- "@mirohq/design-system-stitches": "^2.2.5"
30
+ "@mirohq/design-system-stitches": "^2.3.0"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "rollup -c ../../../rollup.config.js",