@charcoal-ui/foundation 4.2.1 → 4.3.0-beta.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.
- package/dist/index.cjs.js +40 -0
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +40 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -57,11 +57,31 @@ var TYPOGRAPHY_SIZE = {
|
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
var TYPOGRAPHY_WEIGHT = [
|
|
60
|
+
/**
|
|
61
|
+
* Regular font weight
|
|
62
|
+
*
|
|
63
|
+
* <font-weight-absolute> ~ 400
|
|
64
|
+
*
|
|
65
|
+
* It should be the **DEFAULT** weight
|
|
66
|
+
*/
|
|
60
67
|
"regular",
|
|
68
|
+
/**
|
|
69
|
+
* Bolder than `regular` weight
|
|
70
|
+
*
|
|
71
|
+
* <font-weight-absolute> ~ 700
|
|
72
|
+
*/
|
|
61
73
|
"bold"
|
|
62
74
|
];
|
|
63
75
|
var TYPOGRAPHY_VARIANT = [
|
|
76
|
+
/**
|
|
77
|
+
* Proportional font (which has the variable amount of horizontal space)
|
|
78
|
+
*
|
|
79
|
+
* It should be the **DEFAULT** variant
|
|
80
|
+
*/
|
|
64
81
|
"proportional",
|
|
82
|
+
/**
|
|
83
|
+
* Monospaced font (which has the same amount of horizontal space)
|
|
84
|
+
*/
|
|
65
85
|
"monospace"
|
|
66
86
|
];
|
|
67
87
|
|
|
@@ -89,11 +109,31 @@ function columnSystem(span, column, gutter) {
|
|
|
89
109
|
|
|
90
110
|
// src/border-radius.ts
|
|
91
111
|
var BORDER_RADIUS = {
|
|
112
|
+
/**
|
|
113
|
+
* 用途: 打ち消し用（モバイルのときに角丸じゃなくなる、などを表現する）
|
|
114
|
+
*/
|
|
92
115
|
none: 0,
|
|
116
|
+
/**
|
|
117
|
+
* 用途: バッジ, 高さ40px以下の要素
|
|
118
|
+
*/
|
|
93
119
|
4: 4,
|
|
120
|
+
/**
|
|
121
|
+
* 用途: サムネイル
|
|
122
|
+
*/
|
|
94
123
|
8: 8,
|
|
124
|
+
/**
|
|
125
|
+
* 用途: チュートリアルツールチップ
|
|
126
|
+
*/
|
|
95
127
|
16: 16,
|
|
128
|
+
/**
|
|
129
|
+
* 用途: モーダル
|
|
130
|
+
*/
|
|
96
131
|
24: 24,
|
|
132
|
+
/**
|
|
133
|
+
* 真円 or 左右が丸まっている矩形 を作る時に用いる
|
|
134
|
+
*
|
|
135
|
+
* 用途: ボタン
|
|
136
|
+
*/
|
|
97
137
|
oval: 999999
|
|
98
138
|
};
|
|
99
139
|
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export * from './typography'\nexport * from './spacing'\nexport * from './grid'\nexport * from './border-radius'\nexport * from './breakpoint'\nexport * from './color'\nexport * from './effect'\n","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(span: number, column: number, gutter: 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 const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,IAAM,kBAAkB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEO,IAAM,oBAAoB;AAAA,EAQ/B;AAAA,EAMA;AACF;AAEO,IAAM,qBAAqB;AAAA,EAMhC;AAAA,EAIA;AACF;;;ACxDO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;;;ACTO,IAAM,cAAc;AAKpB,IAAM,cAAc;AASpB,SAAS,aAAa,MAAc,QAAgB,QAAgB;AACzE,SAAO,OAAO,UAAU,OAAO,KAAK;AACtC;;;ACnBO,IAAM,gBAAgB;AAAA,EAI3B,MAAM;AAAA,EAIN,GAAG;AAAA,EAIH,GAAG;AAAA,EAIH,IAAI;AAAA,EAIJ,IAAI;AAAA,EAMJ,MAAM;AACR;;;ACzBO,IAAM,wBAAwB;AAE9B,IAAM,aAAa;AAAA,EACxB,CAAC,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export * from './typography'\nexport * from './spacing'\nexport * from './grid'\nexport * from './border-radius'\nexport * from './breakpoint'\nexport * from './color'\nexport * from './effect'\n","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(span: number, column: number, gutter: 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 const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,IAAM,kBAAkB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEO,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA;AACF;AAEO,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhC;AAAA;AAAA;AAAA;AAAA,EAIA;AACF;;;ACxDO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;;;ACTO,IAAM,cAAc;AAKpB,IAAM,cAAc;AASpB,SAAS,aAAa,MAAc,QAAgB,QAAgB;AACzE,SAAO,OAAO,UAAU,OAAO,KAAK;AACtC;;;ACnBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI3B,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,IAAI;AAAA;AAAA;AAAA;AAAA,EAIJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMJ,MAAM;AACR;;;ACzBO,IAAM,wBAAwB;AAE9B,IAAM,aAAa;AAAA,EACxB,CAAC,CAAC,GAAG,aAAa,GAAG,aAAa,WAAW,IAAI,wBAAwB;AAAA,EACzE,CAAC,CAAC,GAAG,aAAa,GAAG,aAAa,WAAW,IAAI,wBAAwB;AAAA,EACzE,CAAC,EAAE,GAAG,aAAa,IAAI,aAAa,WAAW,IAAI,wBAAwB;AAAA,EAC3E,CAAC,EAAE,GAAG,aAAa,IAAI,aAAa,WAAW,IAAI,wBAAwB;AAC7E;","names":[]}
|
package/dist/index.esm.js
CHANGED
|
@@ -22,11 +22,31 @@ var TYPOGRAPHY_SIZE = {
|
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
var TYPOGRAPHY_WEIGHT = [
|
|
25
|
+
/**
|
|
26
|
+
* Regular font weight
|
|
27
|
+
*
|
|
28
|
+
* <font-weight-absolute> ~ 400
|
|
29
|
+
*
|
|
30
|
+
* It should be the **DEFAULT** weight
|
|
31
|
+
*/
|
|
25
32
|
"regular",
|
|
33
|
+
/**
|
|
34
|
+
* Bolder than `regular` weight
|
|
35
|
+
*
|
|
36
|
+
* <font-weight-absolute> ~ 700
|
|
37
|
+
*/
|
|
26
38
|
"bold"
|
|
27
39
|
];
|
|
28
40
|
var TYPOGRAPHY_VARIANT = [
|
|
41
|
+
/**
|
|
42
|
+
* Proportional font (which has the variable amount of horizontal space)
|
|
43
|
+
*
|
|
44
|
+
* It should be the **DEFAULT** variant
|
|
45
|
+
*/
|
|
29
46
|
"proportional",
|
|
47
|
+
/**
|
|
48
|
+
* Monospaced font (which has the same amount of horizontal space)
|
|
49
|
+
*/
|
|
30
50
|
"monospace"
|
|
31
51
|
];
|
|
32
52
|
|
|
@@ -54,11 +74,31 @@ function columnSystem(span, column, gutter) {
|
|
|
54
74
|
|
|
55
75
|
// src/border-radius.ts
|
|
56
76
|
var BORDER_RADIUS = {
|
|
77
|
+
/**
|
|
78
|
+
* 用途: 打ち消し用（モバイルのときに角丸じゃなくなる、などを表現する）
|
|
79
|
+
*/
|
|
57
80
|
none: 0,
|
|
81
|
+
/**
|
|
82
|
+
* 用途: バッジ, 高さ40px以下の要素
|
|
83
|
+
*/
|
|
58
84
|
4: 4,
|
|
85
|
+
/**
|
|
86
|
+
* 用途: サムネイル
|
|
87
|
+
*/
|
|
59
88
|
8: 8,
|
|
89
|
+
/**
|
|
90
|
+
* 用途: チュートリアルツールチップ
|
|
91
|
+
*/
|
|
60
92
|
16: 16,
|
|
93
|
+
/**
|
|
94
|
+
* 用途: モーダル
|
|
95
|
+
*/
|
|
61
96
|
24: 24,
|
|
97
|
+
/**
|
|
98
|
+
* 真円 or 左右が丸まっている矩形 を作る時に用いる
|
|
99
|
+
*
|
|
100
|
+
* 用途: ボタン
|
|
101
|
+
*/
|
|
62
102
|
oval: 999999
|
|
63
103
|
};
|
|
64
104
|
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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(span: number, column: number, gutter: 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 const\n"],"mappings":";AAKO,IAAM,kBAAkB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEO,IAAM,oBAAoB;AAAA,EAQ/B;AAAA,EAMA;AACF;AAEO,IAAM,qBAAqB;AAAA,EAMhC;AAAA,EAIA;AACF;;;ACxDO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;;;ACTO,IAAM,cAAc;AAKpB,IAAM,cAAc;AASpB,SAAS,aAAa,MAAc,QAAgB,QAAgB;AACzE,SAAO,OAAO,UAAU,OAAO,KAAK;AACtC;;;ACnBO,IAAM,gBAAgB;AAAA,EAI3B,MAAM;AAAA,EAIN,GAAG;AAAA,EAIH,GAAG;AAAA,EAIH,IAAI;AAAA,EAIJ,IAAI;AAAA,EAMJ,MAAM;AACR;;;ACzBO,IAAM,wBAAwB;AAE9B,IAAM,aAAa;AAAA,EACxB,CAAC,
|
|
1
|
+
{"version":3,"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(span: number, column: number, gutter: 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 const\n"],"mappings":";AAKO,IAAM,kBAAkB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEO,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA;AACF;AAEO,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhC;AAAA;AAAA;AAAA;AAAA,EAIA;AACF;;;ACxDO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;;;ACTO,IAAM,cAAc;AAKpB,IAAM,cAAc;AASpB,SAAS,aAAa,MAAc,QAAgB,QAAgB;AACzE,SAAO,OAAO,UAAU,OAAO,KAAK;AACtC;;;ACnBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI3B,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,IAAI;AAAA;AAAA;AAAA;AAAA,EAIJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMJ,MAAM;AACR;;;ACzBO,IAAM,wBAAwB;AAE9B,IAAM,aAAa;AAAA,EACxB,CAAC,CAAC,GAAG,aAAa,GAAG,aAAa,WAAW,IAAI,wBAAwB;AAAA,EACzE,CAAC,CAAC,GAAG,aAAa,GAAG,aAAa,WAAW,IAAI,wBAAwB;AAAA,EACzE,CAAC,EAAE,GAAG,aAAa,IAAI,aAAa,WAAW,IAAI,wBAAwB;AAAA,EAC3E,CAAC,EAAE,GAAG,aAAa,IAAI,aAAa,WAAW,IAAI,wBAAwB;AAC7E;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/foundation",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0-beta.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
40
40
|
"directory": "packages/foundation"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "864fc9a6c8ad391df01c7765ab0dff66842c612d"
|
|
43
43
|
}
|