@charcoal-ui/foundation 5.0.0-beta.6 → 5.0.0-rc.0

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 (5) hide show
  1. package/dist/index.cjs +1 -94
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1 -84
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,95 +1,2 @@
1
-
2
- //#region src/typography.ts
3
- const TYPOGRAPHY_SIZE = {
4
- 12: {
5
- fontSize: 12,
6
- lineHeight: 20
7
- },
8
- 14: {
9
- fontSize: 14,
10
- lineHeight: 22
11
- },
12
- 16: {
13
- fontSize: 16,
14
- lineHeight: 24
15
- },
16
- 20: {
17
- fontSize: 20,
18
- lineHeight: 28
19
- },
20
- 32: {
21
- fontSize: 32,
22
- lineHeight: 40
23
- }
24
- };
25
- const TYPOGRAPHY_WEIGHT = ["regular", "bold"];
26
- const TYPOGRAPHY_VARIANT = ["proportional", "monospace"];
27
-
28
- //#endregion
29
- //#region src/spacing.ts
30
- const SPACING = {
31
- 0: 0,
32
- 4: 4,
33
- 8: 8,
34
- 16: 16,
35
- 24: 24,
36
- 40: 40,
37
- 64: 64,
38
- 104: 104,
39
- 168: 168,
40
- 272: 272,
41
- 440: 440
42
- };
43
-
44
- //#endregion
45
- //#region src/grid.ts
46
- /**
47
- * Unit for grid column (px)
48
- */
49
- const COLUMN_UNIT = 80;
50
- /**
51
- * Unit for grid gutter width (px)
52
- */
53
- const GUTTER_UNIT = 24;
54
- /**
55
- * Calculate px occupied by the span of the columns with gutter gap
56
- *
57
- * @param span column span count
58
- */
59
- function columnSystem(span, column, gutter) {
60
- return span * column + (span - 1) * gutter;
61
- }
62
-
63
- //#endregion
64
- //#region src/border-radius.ts
65
- const BORDER_RADIUS = {
66
- none: 0,
67
- 4: 4,
68
- 8: 8,
69
- 16: 16,
70
- 24: 24,
71
- oval: 999999
72
- };
73
-
74
- //#endregion
75
- //#region src/breakpoint.ts
76
- const HORIZONTAL_MIN_MARGIN = 72;
77
- const BREAKPOINT = {
78
- [6]: columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,
79
- [8]: columnSystem(8, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,
80
- [10]: columnSystem(10, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,
81
- [12]: columnSystem(12, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2
82
- };
83
-
84
- //#endregion
85
- exports.BORDER_RADIUS = BORDER_RADIUS;
86
- exports.BREAKPOINT = BREAKPOINT;
87
- exports.COLUMN_UNIT = COLUMN_UNIT;
88
- exports.GUTTER_UNIT = GUTTER_UNIT;
89
- exports.HORIZONTAL_MIN_MARGIN = HORIZONTAL_MIN_MARGIN;
90
- exports.SPACING = SPACING;
91
- exports.TYPOGRAPHY_SIZE = TYPOGRAPHY_SIZE;
92
- exports.TYPOGRAPHY_VARIANT = TYPOGRAPHY_VARIANT;
93
- exports.TYPOGRAPHY_WEIGHT = TYPOGRAPHY_WEIGHT;
94
- exports.columnSystem = columnSystem;
1
+ const e={12:{fontSize:12,lineHeight:20},14:{fontSize:14,lineHeight:22},16:{fontSize:16,lineHeight:24},20:{fontSize:20,lineHeight:28},32:{fontSize:32,lineHeight:40}},t=[`regular`,`bold`],n=[`proportional`,`monospace`],r={0:0,4:4,8:8,16:16,24:24,40:40,64:64,104:104,168:168,272:272,440:440},i=80,a=24;function o(e,t,n){return e*t+(e-1)*n}const s={none:0,4:4,8:8,16:16,24:24,oval:999999},c=72,l={6:o(6,80,24)+144,8:o(8,80,24)+144,10:o(10,80,24)+144,12:o(12,80,24)+144};exports.BORDER_RADIUS=s,exports.BREAKPOINT=l,exports.COLUMN_UNIT=80,exports.GUTTER_UNIT=24,exports.HORIZONTAL_MIN_MARGIN=72,exports.SPACING=r,exports.TYPOGRAPHY_SIZE=e,exports.TYPOGRAPHY_VARIANT=n,exports.TYPOGRAPHY_WEIGHT=t,exports.columnSystem=o;
95
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":[],"sources":["../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export interface TypographyDescriptor {\n readonly lineHeight: number\n readonly fontSize: number\n}\n\nexport const TYPOGRAPHY_SIZE = {\n 12: {\n fontSize: 12,\n lineHeight: 20,\n },\n 14: {\n fontSize: 14,\n lineHeight: 22,\n },\n 16: {\n fontSize: 16,\n lineHeight: 24,\n },\n 20: {\n fontSize: 20,\n lineHeight: 28,\n },\n 32: {\n fontSize: 32,\n lineHeight: 40,\n },\n} as const\n\nexport const TYPOGRAPHY_WEIGHT = [\n /**\n * Regular font weight\n *\n * <font-weight-absolute> ~ 400\n *\n * It should be the **DEFAULT** weight\n */\n 'regular',\n /**\n * Bolder than `regular` weight\n *\n * <font-weight-absolute> ~ 700\n */\n 'bold',\n] as const\n\nexport const TYPOGRAPHY_VARIANT = [\n /**\n * Proportional font (which has the variable amount of horizontal space)\n *\n * It should be the **DEFAULT** variant\n */\n 'proportional',\n /**\n * Monospaced font (which has the same amount of horizontal space)\n */\n 'monospace',\n] as const\n","export const SPACING = {\n 0: 0,\n 4: 4,\n 8: 8,\n 16: 16,\n 24: 24,\n 40: 40,\n 64: 64,\n 104: 104,\n 168: 168,\n 272: 272,\n 440: 440,\n} as const\n","/**\n * Unit for grid column (px)\n */\nexport const COLUMN_UNIT = 80\n\n/**\n * Unit for grid gutter width (px)\n */\nexport const GUTTER_UNIT = 24\n\n// TODO: Grid definition with breakpoint\n\n/**\n * Calculate px occupied by the span of the columns with gutter gap\n *\n * @param span column span count\n */\nexport function columnSystem(\n span: number,\n column: number,\n gutter: number,\n): number {\n return span * column + (span - 1) * gutter\n}\n","export const BORDER_RADIUS = {\n /**\n * 用途: 打ち消し用（モバイルのときに角丸じゃなくなる、などを表現する）\n */\n none: 0,\n /**\n * 用途: バッジ, 高さ40px以下の要素\n */\n 4: 4,\n /**\n * 用途: サムネイル\n */\n 8: 8,\n /**\n * 用途: チュートリアルツールチップ\n */\n 16: 16,\n /**\n * 用途: モーダル\n */\n 24: 24,\n /**\n * 真円 or 左右が丸まっている矩形 を作る時に用いる\n *\n * 用途: ボタン\n */\n oval: 999999,\n} as const\n","import { COLUMN_UNIT, GUTTER_UNIT, columnSystem } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\nexport const BREAKPOINT = {\n [6]: columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [8]: columnSystem(8, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [10]: columnSystem(10, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [12]: columnSystem(12, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n} as { 10: 1160; 12: 1368; 6: 744; 8: 952 }\n"],"mappings":";;AAKA,MAAa,kBAAkB;CAC7B,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACF;AAED,MAAa,oBAAoB,CAQ/B,WAMA,OACD;AAED,MAAa,qBAAqB,CAMhC,gBAIA,YACD;;;;ACxDD,MAAa,UAAU;CACrB,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;;;;;;;ACTD,MAAa,cAAc;;;;AAK3B,MAAa,cAAc;;;;;;AAS3B,SAAgB,aACd,MACA,QACA,QACQ;AACR,QAAO,OAAO,UAAU,OAAO,KAAK;;;;;ACtBtC,MAAa,gBAAgB;CAI3B,MAAM;CAIN,GAAG;CAIH,GAAG;CAIH,IAAI;CAIJ,IAAI;CAMJ,MAAM;CACP;;;;ACzBD,MAAa,wBAAwB;AAErC,MAAa,aAAa;EACvB,IAAI,aAAa,GAAG,aAAa,YAAY,GAAG,wBAAwB;EACxE,IAAI,aAAa,GAAG,aAAa,YAAY,GAAG,wBAAwB;EACxE,KAAK,aAAa,IAAI,aAAa,YAAY,GAAG,wBAAwB;EAC1E,KAAK,aAAa,IAAI,aAAa,YAAY,GAAG,wBAAwB;CAC5E"}
1
+ {"version":3,"file":"index.cjs","names":[],"sources":["../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export interface TypographyDescriptor {\n readonly lineHeight: number\n readonly fontSize: number\n}\n\nexport const TYPOGRAPHY_SIZE = {\n 12: {\n fontSize: 12,\n lineHeight: 20,\n },\n 14: {\n fontSize: 14,\n lineHeight: 22,\n },\n 16: {\n fontSize: 16,\n lineHeight: 24,\n },\n 20: {\n fontSize: 20,\n lineHeight: 28,\n },\n 32: {\n fontSize: 32,\n lineHeight: 40,\n },\n} as const\n\nexport const TYPOGRAPHY_WEIGHT = [\n /**\n * Regular font weight\n *\n * <font-weight-absolute> ~ 400\n *\n * It should be the **DEFAULT** weight\n */\n 'regular',\n /**\n * Bolder than `regular` weight\n *\n * <font-weight-absolute> ~ 700\n */\n 'bold',\n] as const\n\nexport const TYPOGRAPHY_VARIANT = [\n /**\n * Proportional font (which has the variable amount of horizontal space)\n *\n * It should be the **DEFAULT** variant\n */\n 'proportional',\n /**\n * Monospaced font (which has the same amount of horizontal space)\n */\n 'monospace',\n] as const\n","export const SPACING = {\n 0: 0,\n 4: 4,\n 8: 8,\n 16: 16,\n 24: 24,\n 40: 40,\n 64: 64,\n 104: 104,\n 168: 168,\n 272: 272,\n 440: 440,\n} as const\n","/**\n * Unit for grid column (px)\n */\nexport const COLUMN_UNIT = 80\n\n/**\n * Unit for grid gutter width (px)\n */\nexport const GUTTER_UNIT = 24\n\n// TODO: Grid definition with breakpoint\n\n/**\n * Calculate px occupied by the span of the columns with gutter gap\n *\n * @param span column span count\n */\nexport function columnSystem(\n span: number,\n column: number,\n gutter: number,\n): number {\n return span * column + (span - 1) * gutter\n}\n","export const BORDER_RADIUS = {\n /**\n * 用途: 打ち消し用（モバイルのときに角丸じゃなくなる、などを表現する）\n */\n none: 0,\n /**\n * 用途: バッジ, 高さ40px以下の要素\n */\n 4: 4,\n /**\n * 用途: サムネイル\n */\n 8: 8,\n /**\n * 用途: チュートリアルツールチップ\n */\n 16: 16,\n /**\n * 用途: モーダル\n */\n 24: 24,\n /**\n * 真円 or 左右が丸まっている矩形 を作る時に用いる\n *\n * 用途: ボタン\n */\n oval: 999999,\n} as const\n","import { COLUMN_UNIT, GUTTER_UNIT, columnSystem } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\nexport const BREAKPOINT = {\n [6]: columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [8]: columnSystem(8, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [10]: columnSystem(10, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [12]: columnSystem(12, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n} as { 10: 1160; 12: 1368; 6: 744; 8: 952 }\n"],"mappings":"AAKA,MAAa,EAAkB,CAC7B,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACF,CAEY,EAAoB,CAQ/B,UAMA,OACD,CAEY,EAAqB,CAMhC,eAIA,YACD,CCxDY,EAAU,CACrB,EAAG,EACH,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,IAAK,IACL,IAAK,IACL,IAAK,IACL,IAAK,IACN,CCTY,EAAc,GAKd,EAAc,GAS3B,SAAgB,EACd,EACA,EACA,EACQ,CACR,OAAO,EAAO,GAAU,EAAO,GAAK,ECtBtC,MAAa,EAAgB,CAI3B,KAAM,EAIN,EAAG,EAIH,EAAG,EAIH,GAAI,GAIJ,GAAI,GAMJ,KAAM,OACP,CCzBY,EAAwB,GAExB,EAAa,CACvB,EAAI,EAAa,EAAG,GAAa,GAAY,CAAG,IAChD,EAAI,EAAa,EAAG,GAAa,GAAY,CAAG,IAChD,GAAK,EAAa,GAAI,GAAa,GAAY,CAAG,IAClD,GAAK,EAAa,GAAI,GAAa,GAAY,CAAG,IACpD"}
package/dist/index.js CHANGED
@@ -1,85 +1,2 @@
1
- //#region src/typography.ts
2
- const TYPOGRAPHY_SIZE = {
3
- 12: {
4
- fontSize: 12,
5
- lineHeight: 20
6
- },
7
- 14: {
8
- fontSize: 14,
9
- lineHeight: 22
10
- },
11
- 16: {
12
- fontSize: 16,
13
- lineHeight: 24
14
- },
15
- 20: {
16
- fontSize: 20,
17
- lineHeight: 28
18
- },
19
- 32: {
20
- fontSize: 32,
21
- lineHeight: 40
22
- }
23
- };
24
- const TYPOGRAPHY_WEIGHT = ["regular", "bold"];
25
- const TYPOGRAPHY_VARIANT = ["proportional", "monospace"];
26
-
27
- //#endregion
28
- //#region src/spacing.ts
29
- const SPACING = {
30
- 0: 0,
31
- 4: 4,
32
- 8: 8,
33
- 16: 16,
34
- 24: 24,
35
- 40: 40,
36
- 64: 64,
37
- 104: 104,
38
- 168: 168,
39
- 272: 272,
40
- 440: 440
41
- };
42
-
43
- //#endregion
44
- //#region src/grid.ts
45
- /**
46
- * Unit for grid column (px)
47
- */
48
- const COLUMN_UNIT = 80;
49
- /**
50
- * Unit for grid gutter width (px)
51
- */
52
- const GUTTER_UNIT = 24;
53
- /**
54
- * Calculate px occupied by the span of the columns with gutter gap
55
- *
56
- * @param span column span count
57
- */
58
- function columnSystem(span, column, gutter) {
59
- return span * column + (span - 1) * gutter;
60
- }
61
-
62
- //#endregion
63
- //#region src/border-radius.ts
64
- const BORDER_RADIUS = {
65
- none: 0,
66
- 4: 4,
67
- 8: 8,
68
- 16: 16,
69
- 24: 24,
70
- oval: 999999
71
- };
72
-
73
- //#endregion
74
- //#region src/breakpoint.ts
75
- const HORIZONTAL_MIN_MARGIN = 72;
76
- const BREAKPOINT = {
77
- [6]: columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,
78
- [8]: columnSystem(8, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,
79
- [10]: columnSystem(10, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,
80
- [12]: columnSystem(12, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2
81
- };
82
-
83
- //#endregion
84
- export { BORDER_RADIUS, BREAKPOINT, COLUMN_UNIT, GUTTER_UNIT, HORIZONTAL_MIN_MARGIN, SPACING, TYPOGRAPHY_SIZE, TYPOGRAPHY_VARIANT, TYPOGRAPHY_WEIGHT, columnSystem };
1
+ const e={12:{fontSize:12,lineHeight:20},14:{fontSize:14,lineHeight:22},16:{fontSize:16,lineHeight:24},20:{fontSize:20,lineHeight:28},32:{fontSize:32,lineHeight:40}},t=[`regular`,`bold`],n=[`proportional`,`monospace`],r={0:0,4:4,8:8,16:16,24:24,40:40,64:64,104:104,168:168,272:272,440:440},i=80,a=24;function o(e,t,n){return e*t+(e-1)*n}const s={none:0,4:4,8:8,16:16,24:24,oval:999999},c=72,l={6:o(6,80,24)+144,8:o(8,80,24)+144,10:o(10,80,24)+144,12:o(12,80,24)+144};export{s as BORDER_RADIUS,l as BREAKPOINT,i as COLUMN_UNIT,a as GUTTER_UNIT,c as HORIZONTAL_MIN_MARGIN,r as SPACING,e as TYPOGRAPHY_SIZE,n as TYPOGRAPHY_VARIANT,t as TYPOGRAPHY_WEIGHT,o as columnSystem};
85
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export interface TypographyDescriptor {\n readonly lineHeight: number\n readonly fontSize: number\n}\n\nexport const TYPOGRAPHY_SIZE = {\n 12: {\n fontSize: 12,\n lineHeight: 20,\n },\n 14: {\n fontSize: 14,\n lineHeight: 22,\n },\n 16: {\n fontSize: 16,\n lineHeight: 24,\n },\n 20: {\n fontSize: 20,\n lineHeight: 28,\n },\n 32: {\n fontSize: 32,\n lineHeight: 40,\n },\n} as const\n\nexport const TYPOGRAPHY_WEIGHT = [\n /**\n * Regular font weight\n *\n * <font-weight-absolute> ~ 400\n *\n * It should be the **DEFAULT** weight\n */\n 'regular',\n /**\n * Bolder than `regular` weight\n *\n * <font-weight-absolute> ~ 700\n */\n 'bold',\n] as const\n\nexport const TYPOGRAPHY_VARIANT = [\n /**\n * Proportional font (which has the variable amount of horizontal space)\n *\n * It should be the **DEFAULT** variant\n */\n 'proportional',\n /**\n * Monospaced font (which has the same amount of horizontal space)\n */\n 'monospace',\n] as const\n","export const SPACING = {\n 0: 0,\n 4: 4,\n 8: 8,\n 16: 16,\n 24: 24,\n 40: 40,\n 64: 64,\n 104: 104,\n 168: 168,\n 272: 272,\n 440: 440,\n} as const\n","/**\n * Unit for grid column (px)\n */\nexport const COLUMN_UNIT = 80\n\n/**\n * Unit for grid gutter width (px)\n */\nexport const GUTTER_UNIT = 24\n\n// TODO: Grid definition with breakpoint\n\n/**\n * Calculate px occupied by the span of the columns with gutter gap\n *\n * @param span column span count\n */\nexport function columnSystem(\n span: number,\n column: number,\n gutter: number,\n): number {\n return span * column + (span - 1) * gutter\n}\n","export const BORDER_RADIUS = {\n /**\n * 用途: 打ち消し用（モバイルのときに角丸じゃなくなる、などを表現する）\n */\n none: 0,\n /**\n * 用途: バッジ, 高さ40px以下の要素\n */\n 4: 4,\n /**\n * 用途: サムネイル\n */\n 8: 8,\n /**\n * 用途: チュートリアルツールチップ\n */\n 16: 16,\n /**\n * 用途: モーダル\n */\n 24: 24,\n /**\n * 真円 or 左右が丸まっている矩形 を作る時に用いる\n *\n * 用途: ボタン\n */\n oval: 999999,\n} as const\n","import { COLUMN_UNIT, GUTTER_UNIT, columnSystem } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\nexport const BREAKPOINT = {\n [6]: columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [8]: columnSystem(8, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [10]: columnSystem(10, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [12]: columnSystem(12, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n} as { 10: 1160; 12: 1368; 6: 744; 8: 952 }\n"],"mappings":";AAKA,MAAa,kBAAkB;CAC7B,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACF;AAED,MAAa,oBAAoB,CAQ/B,WAMA,OACD;AAED,MAAa,qBAAqB,CAMhC,gBAIA,YACD;;;;ACxDD,MAAa,UAAU;CACrB,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;;;;;;;ACTD,MAAa,cAAc;;;;AAK3B,MAAa,cAAc;;;;;;AAS3B,SAAgB,aACd,MACA,QACA,QACQ;AACR,QAAO,OAAO,UAAU,OAAO,KAAK;;;;;ACtBtC,MAAa,gBAAgB;CAI3B,MAAM;CAIN,GAAG;CAIH,GAAG;CAIH,IAAI;CAIJ,IAAI;CAMJ,MAAM;CACP;;;;ACzBD,MAAa,wBAAwB;AAErC,MAAa,aAAa;EACvB,IAAI,aAAa,GAAG,aAAa,YAAY,GAAG,wBAAwB;EACxE,IAAI,aAAa,GAAG,aAAa,YAAY,GAAG,wBAAwB;EACxE,KAAK,aAAa,IAAI,aAAa,YAAY,GAAG,wBAAwB;EAC1E,KAAK,aAAa,IAAI,aAAa,YAAY,GAAG,wBAAwB;CAC5E"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export interface TypographyDescriptor {\n readonly lineHeight: number\n readonly fontSize: number\n}\n\nexport const TYPOGRAPHY_SIZE = {\n 12: {\n fontSize: 12,\n lineHeight: 20,\n },\n 14: {\n fontSize: 14,\n lineHeight: 22,\n },\n 16: {\n fontSize: 16,\n lineHeight: 24,\n },\n 20: {\n fontSize: 20,\n lineHeight: 28,\n },\n 32: {\n fontSize: 32,\n lineHeight: 40,\n },\n} as const\n\nexport const TYPOGRAPHY_WEIGHT = [\n /**\n * Regular font weight\n *\n * <font-weight-absolute> ~ 400\n *\n * It should be the **DEFAULT** weight\n */\n 'regular',\n /**\n * Bolder than `regular` weight\n *\n * <font-weight-absolute> ~ 700\n */\n 'bold',\n] as const\n\nexport const TYPOGRAPHY_VARIANT = [\n /**\n * Proportional font (which has the variable amount of horizontal space)\n *\n * It should be the **DEFAULT** variant\n */\n 'proportional',\n /**\n * Monospaced font (which has the same amount of horizontal space)\n */\n 'monospace',\n] as const\n","export const SPACING = {\n 0: 0,\n 4: 4,\n 8: 8,\n 16: 16,\n 24: 24,\n 40: 40,\n 64: 64,\n 104: 104,\n 168: 168,\n 272: 272,\n 440: 440,\n} as const\n","/**\n * Unit for grid column (px)\n */\nexport const COLUMN_UNIT = 80\n\n/**\n * Unit for grid gutter width (px)\n */\nexport const GUTTER_UNIT = 24\n\n// TODO: Grid definition with breakpoint\n\n/**\n * Calculate px occupied by the span of the columns with gutter gap\n *\n * @param span column span count\n */\nexport function columnSystem(\n span: number,\n column: number,\n gutter: number,\n): number {\n return span * column + (span - 1) * gutter\n}\n","export const BORDER_RADIUS = {\n /**\n * 用途: 打ち消し用（モバイルのときに角丸じゃなくなる、などを表現する）\n */\n none: 0,\n /**\n * 用途: バッジ, 高さ40px以下の要素\n */\n 4: 4,\n /**\n * 用途: サムネイル\n */\n 8: 8,\n /**\n * 用途: チュートリアルツールチップ\n */\n 16: 16,\n /**\n * 用途: モーダル\n */\n 24: 24,\n /**\n * 真円 or 左右が丸まっている矩形 を作る時に用いる\n *\n * 用途: ボタン\n */\n oval: 999999,\n} as const\n","import { COLUMN_UNIT, GUTTER_UNIT, columnSystem } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\nexport const BREAKPOINT = {\n [6]: columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [8]: columnSystem(8, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [10]: columnSystem(10, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n [12]: columnSystem(12, COLUMN_UNIT, GUTTER_UNIT) + HORIZONTAL_MIN_MARGIN * 2,\n} as { 10: 1160; 12: 1368; 6: 744; 8: 952 }\n"],"mappings":"AAKA,MAAa,EAAkB,CAC7B,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACD,GAAI,CACF,SAAU,GACV,WAAY,GACb,CACF,CAEY,EAAoB,CAQ/B,UAMA,OACD,CAEY,EAAqB,CAMhC,eAIA,YACD,CCxDY,EAAU,CACrB,EAAG,EACH,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,IAAK,IACL,IAAK,IACL,IAAK,IACL,IAAK,IACN,CCTY,EAAc,GAKd,EAAc,GAS3B,SAAgB,EACd,EACA,EACA,EACQ,CACR,OAAO,EAAO,GAAU,EAAO,GAAK,ECtBtC,MAAa,EAAgB,CAI3B,KAAM,EAIN,EAAG,EAIH,EAAG,EAIH,GAAI,GAIJ,GAAI,GAMJ,KAAM,OACP,CCzBY,EAAwB,GAExB,EAAa,CACvB,EAAI,EAAa,EAAG,GAAa,GAAY,CAAG,IAChD,EAAI,EAAa,EAAG,GAAa,GAAY,CAAG,IAChD,GAAK,EAAa,GAAI,GAAa,GAAY,CAAG,IAClD,GAAK,EAAa,GAAI,GAAa,GAAY,CAAG,IACpD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/foundation",
3
- "version": "5.0.0-beta.6",
3
+ "version": "5.0.0-rc.0",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",