@grantbii/design-system 1.18.1 → 1.18.2
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/README.md +2 -2
- package/core/atoms/Typography.d.ts +2 -1
- package/core/atoms/Typography.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Grantbii's Design System
|
|
2
2
|
|
|
3
|
-
Storybook's viewport triggers media query for small
|
|
4
|
-
View in full screen to see components
|
|
3
|
+
Storybook's viewport triggers media query for small screens (e.g. mobile) by default.
|
|
4
|
+
View in full screen to see how components look on big screens (e.g. desktop).
|
|
5
5
|
|
|
6
6
|
Based on Grantbii's Global Design Library in Figma.
|
|
7
7
|
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { ScreenSize } from "../types";
|
|
2
|
+
type FontWeightLabel = "regular" | "medium" | "bold";
|
|
2
3
|
type FontWeight = 400 | 500 | 700;
|
|
3
4
|
type ResponsiveValue = Record<ScreenSize, string>;
|
|
4
5
|
export declare const family: {
|
|
5
6
|
satoshi: string;
|
|
6
7
|
};
|
|
7
8
|
export declare const weight: {
|
|
8
|
-
[label
|
|
9
|
+
[label in FontWeightLabel]: FontWeight;
|
|
9
10
|
};
|
|
10
11
|
export type TextStyle = {
|
|
11
12
|
fontFamily: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeightLabel = \"regular\" | \"medium\" | \"bold\";\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n ({\n small: `${mobilePx}px`,\n large: `${desktopPx}px`,\n }) as const;\n\nconst fixedPx = (px: number): ResponsiveValue =>\n ({\n small: `${px}px`,\n large: `${px}px`,\n }) as const;\n\nexport const family = {\n satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label in FontWeightLabel]: FontWeight } = {\n regular: 400,\n medium: 500,\n bold: 700,\n};\n\nexport type TextStyle = {\n fontFamily: string;\n fontWeight: FontWeight;\n fontSize: ResponsiveValue;\n lineHeight: ResponsiveValue;\n};\n\nconst textStyle = (\n fontWeight: FontWeight,\n desktopFontSize: number,\n lineHeight: number,\n mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n fontFamily: family.satoshi,\n fontWeight,\n fontSize: responsivePx(desktopFontSize, mobileFontSize),\n lineHeight: fixedPx(lineHeight),\n});\n\nexport const heading1 = textStyle(weight.bold, 32, 43);\nexport const heading2 = textStyle(weight.bold, 28, 38);\nexport const heading3 = textStyle(weight.bold, 24, 32);\n\nexport const subheading1Bold = textStyle(weight.bold, 20, 27);\nexport const subheading1Medium = textStyle(weight.medium, 20, 27);\nexport const subheading1Regular = textStyle(weight.regular, 20, 27);\n\nexport const subheading2Bold = textStyle(weight.bold, 18, 24);\nexport const subheading2Medium = textStyle(weight.medium, 18, 24);\nexport const subheading2Regular = textStyle(weight.regular, 18, 24);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16, 22);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16, 22);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16, 22);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14, 19);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14, 19);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14, 19);\n\nexport const captionBold = textStyle(weight.bold, 12, 16, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 16, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 16, 12);\n"]}
|
package/package.json
CHANGED