@grantbii/design-system 1.28.0 → 1.28.1
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/core/archive/RadioButtons.js +1 -1
- package/core/archive/RadioButtons.js.map +1 -1
- package/core/atoms/Color.d.ts +7 -41
- package/core/atoms/Color.js +0 -6
- package/core/atoms/Color.js.map +1 -1
- package/core/atoms/Typography.js +0 -4
- package/core/atoms/Typography.js.map +1 -1
- package/package.json +3 -3
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { RadioButton } from "../molecules";
|
|
5
|
-
const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({
|
|
5
|
+
const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({ value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
|
|
6
6
|
export default RadioButtons;
|
|
7
7
|
const RadioGroup = styled.div `
|
|
8
8
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../types\";\n\nexport type RadioOption = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n name?: string;\n options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n <RadioGroup>\n {options.map(({ value, ...props }) => (\n <RadioButton\n {...props}\n key={`${name}-${value}`}\n value={value}\n name={name}\n />\n ))}\n </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n\n white-space: nowrap;\n flex-wrap: wrap;\n`;\n"]}
|
package/core/atoms/Color.d.ts
CHANGED
|
@@ -36,49 +36,15 @@ export declare const accent: {
|
|
|
36
36
|
readonly blue3: "#ECF5FF";
|
|
37
37
|
readonly blue4: "#F5F9FF";
|
|
38
38
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
readonly black: "#232022";
|
|
46
|
-
readonly grey1: "#999999";
|
|
47
|
-
readonly grey2: "#CCCCCC";
|
|
48
|
-
readonly grey3: "#EEEEEE";
|
|
49
|
-
readonly grey4: "#FAFAFA";
|
|
50
|
-
readonly white: "#FFFFFF";
|
|
51
|
-
};
|
|
52
|
-
readonly typography: {
|
|
53
|
-
readonly blackHigh: "#1A1A1A";
|
|
54
|
-
readonly blackMedium: "#666666";
|
|
55
|
-
readonly blackLow: "#B2B2B2";
|
|
56
|
-
readonly whiteHigh: "#FFFFFF";
|
|
57
|
-
readonly whiteMedium: "#F5F5F5";
|
|
58
|
-
readonly whiteLow: "#E5E5E5";
|
|
59
|
-
};
|
|
60
|
-
readonly accent: {
|
|
61
|
-
readonly red1: "#C02318";
|
|
62
|
-
readonly red2: "#F88E86";
|
|
63
|
-
readonly red3: "#FFE9E7";
|
|
64
|
-
readonly red4: "#FFF1F0";
|
|
65
|
-
readonly yellow1: "#EDAB03";
|
|
66
|
-
readonly yellow2: "#F4CC68";
|
|
67
|
-
readonly yellow3: "#FFF9E8";
|
|
68
|
-
readonly yellow4: "#FFFCF5";
|
|
69
|
-
readonly green1: "#08A45E";
|
|
70
|
-
readonly green2: "#6BC89E";
|
|
71
|
-
readonly green3: "#EBFFF6";
|
|
72
|
-
readonly green4: "#F5FFFA";
|
|
73
|
-
readonly blue1: "#1878E4";
|
|
74
|
-
readonly blue2: "#74AEEF";
|
|
75
|
-
readonly blue3: "#ECF5FF";
|
|
76
|
-
readonly blue4: "#F5F9FF";
|
|
77
|
-
};
|
|
39
|
+
type ValueOf<ObjectType> = ObjectType[keyof ObjectType];
|
|
40
|
+
type ColorGroups = {
|
|
41
|
+
brand: typeof brand;
|
|
42
|
+
neutral: typeof neutral;
|
|
43
|
+
typography: typeof typography;
|
|
44
|
+
accent: typeof accent;
|
|
78
45
|
};
|
|
79
|
-
type ValueOf<T> = T[keyof T];
|
|
80
46
|
type TokenColor = ValueOf<{
|
|
81
|
-
[
|
|
47
|
+
[GroupName in keyof ColorGroups]: ValueOf<ColorGroups[GroupName]>;
|
|
82
48
|
}>;
|
|
83
49
|
export type DesignColor = TokenColor | "transparent";
|
|
84
50
|
export {};
|
package/core/atoms/Color.js
CHANGED
package/core/atoms/Color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC","sourcesContent":["export const brand = {\n grantbiiYellow: \"#EBA338\",\n grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n black: \"#232022\",\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n red4: \"#FFF1F0\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n yellow4: \"#FFFCF5\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n blue4: \"#F5F9FF\",\n} as const;\n\ntype ValueOf<ObjectType> = ObjectType[keyof ObjectType];\n\ntype ColorGroups = {\n brand: typeof brand;\n neutral: typeof neutral;\n typography: typeof typography;\n accent: typeof accent;\n};\n\ntype TokenColor = ValueOf<{\n [GroupName in keyof ColorGroups]: ValueOf<ColorGroups[GroupName]>;\n}>;\n\nexport type DesignColor = TokenColor | \"transparent\";\n"]}
|
package/core/atoms/Typography.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA+C;IAChE,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;AAQF,MAAM,SAAS,GAAG,CAChB,UAAsB,EACtB,eAAuB,EACvB,iBAAyB,eAAe,GAAG,CAAC,EACjC,EAAE,CAAC,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,OAAO;IAC1B,UAAU;IACV,QAAQ,EAAE,YAAY,CAAC,eAAe,EAAE,cAAc,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAChE,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC","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\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};\n\nconst textStyle = (\n fontWeight: FontWeight,\n desktopFontSize: number,\n mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n fontFamily: family.satoshi,\n fontWeight,\n fontSize: responsivePx(desktopFontSize, mobileFontSize),\n});\n\nexport const heading1 = textStyle(weight.bold, 32);\nexport const heading2 = textStyle(weight.bold, 28);\nexport const heading3 = textStyle(weight.bold, 24);\n\nexport const subheading1Bold = textStyle(weight.bold, 20);\nexport const subheading1Medium = textStyle(weight.medium, 20);\nexport const subheading1Regular = textStyle(weight.regular, 20);\n\nexport const subheading2Bold = textStyle(weight.bold, 18);\nexport const subheading2Medium = textStyle(weight.medium, 18);\nexport const subheading2Regular = textStyle(weight.regular, 18);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14);\n\nexport const captionBold = textStyle(weight.bold, 12, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 12);\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.28.
|
|
5
|
+
"version": "1.28.1",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"main": "./index.js",
|
|
13
13
|
"types": "./index.d.ts",
|
|
14
14
|
"scripts": {
|
|
15
|
-
"lint": "
|
|
15
|
+
"lint": "eslint . --max-warnings=0",
|
|
16
16
|
"prepare": "husky",
|
|
17
17
|
"build": "npx tsc && cp -r ./core/assets ./dist/core && cp ./package.json ./dist && cp README.md ./dist",
|
|
18
18
|
"postpublish": "rm -rf dist/",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"prettier --write"
|
|
68
68
|
],
|
|
69
69
|
"**/*.{mjs,ts,tsx}": [
|
|
70
|
-
"eslint --fix",
|
|
70
|
+
"eslint --fix --max-warnings=0",
|
|
71
71
|
"prettier --write"
|
|
72
72
|
]
|
|
73
73
|
}
|