@charcoal-ui/foundation 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2022 pixiv Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,17 @@
+# `@charcoal-ui/foundation`
+
+charcoal デザインシステムで利用されるプリミティブな型定義や値を提供します。
+
+## インストール
+
+npm
+
+```
+npm i @charcoal-ui/foundation
+```
+
+yarn
+
+```
+yarn add @charcoal-ui/foundation
+```

package/dist/border-radius.d.ts

@@ -0,0 +1,30 @@
+export declare type BorderRadius = {
+    /**
+     * 用途: 打ち消し用クラス（モバイルのときに角丸じゃなくなる、などを表現する）
+     */
+    none: number;
+    /**
+     * 用途: バッジ, 高さ40px以下の要素
+     */
+    [4]: number;
+    /**
+     * 用途: サムネイル
+     */
+    [8]: number;
+    /**
+     * 用途: チュートリアルツールチップ
+     */
+    [16]: number;
+    /**
+     * 用途: モーダル
+     */
+    [24]: number;
+    /**
+     * 真円 or 左右が丸まっている矩形 を作る時に用いる
+     *
+     * 用途: ボタン
+     */
+    oval: number;
+};
+export declare const borderRadius: BorderRadius;
+//# sourceMappingURL=border-radius.d.ts.map

package/dist/border-radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-radius.d.ts","sourceRoot":"","sources":["../src/border-radius.ts"],"names":[],"mappings":"AACA,oBAAY,YAAY,GAAG;IACzB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,YAO1B,CAAA"}

package/dist/breakpoint.d.ts

@@ -0,0 +1,27 @@
+export declare const HORIZONTAL_MIN_MARGIN = 72;
+export declare type Breakpoint = {
+    /**
+     * 6 columns (max 743px)
+     */
+    screen1: number;
+    /**
+     * 8 columns (max 953px)
+     */
+    screen2: number;
+    /**
+     * 10 columns (max 1159px)
+     */
+    screen3: number;
+    /**
+     * 12 columns (max 1367px)
+     */
+    screen4: number;
+};
+export declare const breakpoint: Breakpoint;
+/**
+ * @deprecated
+ *
+ * Construct media query from breakpoint
+ */
+export declare function maxWidth(breakpoint: number): string;
+//# sourceMappingURL=breakpoint.d.ts.map

package/dist/breakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../src/breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,KAAK,CAAA;AAGvC,oBAAY,UAAU,GAAG;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,UAKxB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,UAE1C"}

package/dist/grid.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Unit for grid column (px)
+ */
+export declare const COLUMN_UNIT = 80;
+/**
+ * Unit for grid gutter width (px)
+ */
+export declare const GUTTER_UNIT = 24;
+/**
+ * Calculate px occupied by the span of the columns
+ *
+ * @param span column span count
+ */
+export declare function columnPx(span: number): number;
+//# sourceMappingURL=grid.d.ts.map

package/dist/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B;;GAEG;AACH,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,UAEpC"}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+function e(e){return 80*e+24*(e-1)}var t={screen1:e(6)+144,screen2:e(8)+144,screen3:e(10)+144,screen4:e(12)+144};exports.COLUMN_UNIT=80,exports.GUTTER_UNIT=24,exports.HORIZONTAL_MIN_MARGIN=72,exports.TYPOGRAPHY_VARIANT=["proportional","monospace"],exports.TYPOGRAPHY_WEIGHT=["regular","bold"],exports.borderRadius={none:0,4:4,8:8,16:16,24:24,oval:999999},exports.breakpoint=t,exports.columnPx=e,exports.halfLeading=function(e){return(e.lineHeight-e.fontSize)/2},exports.maxWidth=function(e){return"(max-width: "+(e-1)+"px)"},exports.spacing={0:0,4:4,8:8,16:16,24:24,40:40,64:64,104:104,168:168,272:272,440:440},exports.typography={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}};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts","../src/typography.ts","../src/spacing.ts"],"sourcesContent":["/**\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/**\n * Calculate px occupied by the span of the columns\n *\n * @param span column span count\n */\nexport function columnPx(span: number) {\n  return span * COLUMN_UNIT + (span - 1) * GUTTER_UNIT\n}\n\n// TODO: Grid definition with breakpoint\n","// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type BorderRadius = {\n  /**\n   * 用途: 打ち消し用クラス（モバイルのときに角丸じゃなくなる、などを表現する）\n   */\n  none: number\n\n  /**\n   * 用途: バッジ, 高さ40px以下の要素\n   */\n  [4]: number\n  /**\n   * 用途: サムネイル\n   */\n  [8]: number\n  /**\n   * 用途: チュートリアルツールチップ\n   */\n  [16]: number\n  /**\n   * 用途: モーダル\n   */\n  [24]: number\n  /**\n   * 真円 or 左右が丸まっている矩形 を作る時に用いる\n   *\n   * 用途: ボタン\n   */\n  oval: number\n}\n\nexport const borderRadius: BorderRadius = {\n  none: 0,\n  4: 4,\n  8: 8,\n  16: 16,\n  24: 24,\n  oval: 999999,\n}\n","import { columnPx } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Breakpoint = {\n  /**\n   * 6 columns (max 743px)\n   */\n  screen1: number\n  /**\n   * 8 columns (max 953px)\n   */\n  screen2: number\n  /**\n   * 10 columns (max 1159px)\n   */\n  screen3: number\n  /**\n   * 12 columns (max 1367px)\n   */\n  screen4: number\n}\n\nexport const breakpoint: Breakpoint = {\n  screen1: columnPx(6) + HORIZONTAL_MIN_MARGIN * 2,\n  screen2: columnPx(8) + HORIZONTAL_MIN_MARGIN * 2,\n  screen3: columnPx(10) + HORIZONTAL_MIN_MARGIN * 2,\n  screen4: columnPx(12) + HORIZONTAL_MIN_MARGIN * 2,\n}\n\n/**\n * @deprecated\n *\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n  return `(max-width: ${breakpoint - 1}px)`\n}\n","export interface TypographyDescriptor {\n  lineHeight: number\n  fontSize: number\n}\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Typography = {\n  [12]: TypographyDescriptor\n  [14]: TypographyDescriptor\n  [16]: TypographyDescriptor\n  [20]: TypographyDescriptor\n  [32]: TypographyDescriptor\n}\n\nexport const typography: Typography = {\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}\n\nexport const halfLeading = ({ fontSize, lineHeight }: TypographyDescriptor) =>\n  (lineHeight - fontSize) / 2\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 type TypographyWeight = typeof TYPOGRAPHY_WEIGHT[number]\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\nexport type TypographyVariant = typeof TYPOGRAPHY_VARIANT[number]\n","// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Spacing = {\n  [0]: number\n  [4]: number\n  [8]: number\n  [16]: number\n  [24]: number\n  [40]: number\n  [64]: number\n  [104]: number\n  [168]: number\n  [272]: number\n  [440]: number\n}\n\nexport const spacing: 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}\n"],"names":["columnPx","span","borderRadius","breakpoint","screen1","HORIZONTAL_MIN_MARGIN","screen2","screen3","screen4","none","oval","lineHeight","fontSize"],"mappings":"SAegBA,EAASC,GACvB,OAbyB,GAalBA,EARkB,IAQIA,EAAO,GCezBC,ICPAC,EAAyB,CACpCC,QAASJ,EAAS,GAAKK,IACvBC,QAASN,EAAS,GAAKK,IACvBE,QAASP,EAAS,IAAMK,IACxBG,QAASR,EAAS,IAAMK,yBFzBC,uBAKA,iCENU,8BCyDH,CAMhC,eAIA,uCA7B+B,CAQ/B,UAMA,6BFvBwC,CACxCI,KAAM,EACN,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJC,KAAM,oEEAmB,qBAAaC,aAAVC,UACF,6BDFHT,GACvB,sBAAsBA,EAAa,0BEtBL,CAC9B,EAAG,EACH,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,IAAK,IACL,IAAK,IACL,IAAK,IACL,IAAK,wBDZ+B,CACpC,GAAI,CACFS,SAAU,GACVD,WAAY,IAEd,GAAI,CACFC,SAAU,GACVD,WAAY,IAEd,GAAI,CACFC,SAAU,GACVD,WAAY,IAEd,GAAI,CACFC,SAAU,GACVD,WAAY,IAEd,GAAI,CACFC,SAAU,GACVD,WAAY"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { type Typography, typography, type TypographyDescriptor, TYPOGRAPHY_VARIANT, TYPOGRAPHY_WEIGHT, type TypographyVariant, type TypographyWeight, halfLeading, } from './typography';
+export { type Spacing, spacing } from './spacing';
+export { COLUMN_UNIT, GUTTER_UNIT, columnPx } from './grid';
+export { type BorderRadius, borderRadius } from './border-radius';
+export { type Breakpoint, HORIZONTAL_MIN_MARGIN, breakpoint, maxWidth, } from './breakpoint';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EACf,UAAU,EACV,KAAK,oBAAoB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,WAAW,GACZ,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,KAAK,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC3D,OAAO,EAAE,KAAK,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EACL,KAAK,UAAU,EACf,qBAAqB,EACrB,UAAU,EACV,QAAQ,GACT,MAAM,cAAc,CAAA"}

package/dist/index.modern.js

@@ -0,0 +1,2 @@
+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}},n=({fontSize:e,lineHeight:n})=>(n-e)/2,i=["regular","bold"],t=["proportional","monospace"],o={0:0,4:4,8:8,16:16,24:24,40:40,64:64,104:104,168:168,272:272,440:440},r=80,l=24;function c(e){return 80*e+24*(e-1)}const f={none:0,4:4,8:8,16:16,24:24,oval:999999},g=72,h={screen1:c(6)+144,screen2:c(8)+144,screen3:c(10)+144,screen4:c(12)+144};function s(e){return`(max-width: ${e-1}px)`}export{r as COLUMN_UNIT,l as GUTTER_UNIT,g as HORIZONTAL_MIN_MARGIN,t as TYPOGRAPHY_VARIANT,i as TYPOGRAPHY_WEIGHT,f as borderRadius,h as breakpoint,c as columnPx,n as halfLeading,s as maxWidth,o as spacing,e as typography};
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export interface TypographyDescriptor {\n  lineHeight: number\n  fontSize: number\n}\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Typography = {\n  [12]: TypographyDescriptor\n  [14]: TypographyDescriptor\n  [16]: TypographyDescriptor\n  [20]: TypographyDescriptor\n  [32]: TypographyDescriptor\n}\n\nexport const typography: Typography = {\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}\n\nexport const halfLeading = ({ fontSize, lineHeight }: TypographyDescriptor) =>\n  (lineHeight - fontSize) / 2\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 type TypographyWeight = typeof TYPOGRAPHY_WEIGHT[number]\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\nexport type TypographyVariant = typeof TYPOGRAPHY_VARIANT[number]\n","// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Spacing = {\n  [0]: number\n  [4]: number\n  [8]: number\n  [16]: number\n  [24]: number\n  [40]: number\n  [64]: number\n  [104]: number\n  [168]: number\n  [272]: number\n  [440]: number\n}\n\nexport const spacing: 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}\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/**\n * Calculate px occupied by the span of the columns\n *\n * @param span column span count\n */\nexport function columnPx(span: number) {\n  return span * COLUMN_UNIT + (span - 1) * GUTTER_UNIT\n}\n\n// TODO: Grid definition with breakpoint\n","// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type BorderRadius = {\n  /**\n   * 用途: 打ち消し用クラス（モバイルのときに角丸じゃなくなる、などを表現する）\n   */\n  none: number\n\n  /**\n   * 用途: バッジ, 高さ40px以下の要素\n   */\n  [4]: number\n  /**\n   * 用途: サムネイル\n   */\n  [8]: number\n  /**\n   * 用途: チュートリアルツールチップ\n   */\n  [16]: number\n  /**\n   * 用途: モーダル\n   */\n  [24]: number\n  /**\n   * 真円 or 左右が丸まっている矩形 を作る時に用いる\n   *\n   * 用途: ボタン\n   */\n  oval: number\n}\n\nexport const borderRadius: BorderRadius = {\n  none: 0,\n  4: 4,\n  8: 8,\n  16: 16,\n  24: 24,\n  oval: 999999,\n}\n","import { columnPx } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Breakpoint = {\n  /**\n   * 6 columns (max 743px)\n   */\n  screen1: number\n  /**\n   * 8 columns (max 953px)\n   */\n  screen2: number\n  /**\n   * 10 columns (max 1159px)\n   */\n  screen3: number\n  /**\n   * 12 columns (max 1367px)\n   */\n  screen4: number\n}\n\nexport const breakpoint: Breakpoint = {\n  screen1: columnPx(6) + HORIZONTAL_MIN_MARGIN * 2,\n  screen2: columnPx(8) + HORIZONTAL_MIN_MARGIN * 2,\n  screen3: columnPx(10) + HORIZONTAL_MIN_MARGIN * 2,\n  screen4: columnPx(12) + HORIZONTAL_MIN_MARGIN * 2,\n}\n\n/**\n * @deprecated\n *\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n  return `(max-width: ${breakpoint - 1}px)`\n}\n"],"names":["typography","fontSize","lineHeight","halfLeading","TYPOGRAPHY_WEIGHT","TYPOGRAPHY_VARIANT","spacing","COLUMN_UNIT","GUTTER_UNIT","columnPx","span","borderRadius","none","oval","HORIZONTAL_MIN_MARGIN","breakpoint","screen1","screen2","screen3","screen4","maxWidth"],"mappings":"AAcaA,MAAAA,EAAyB,CACpC,GAAI,CACFC,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,KAIHC,EAAc,EAAGF,SAAAA,EAAUC,WAAAA,MACrCA,EAAaD,GAAY,EAEfG,EAAoB,CAQ/B,UAMA,QAKWC,EAAqB,CAMhC,eAIA,aCtDWC,EAAmB,CAC9B,EAAG,EACH,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,IAAK,IACL,IAAK,IACL,IAAK,IACL,IAAK,KCvBMC,EAAc,GAKdC,EAAc,YAOXC,EAASC,GACvB,OAbyB,GAalBA,EARkB,IAQIA,EAAO,GCezBC,MAAAA,EAA6B,CACxCC,KAAM,EACN,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJC,KAAM,QCnCKC,EAAwB,GAsBxBC,EAAyB,CACpCC,QAASP,EAAS,GAAKK,IACvBG,QAASR,EAAS,GAAKK,IACvBI,QAAST,EAAS,IAAMK,IACxBK,QAASV,EAAS,IAAMK,cAQVM,EAASL,GACvB,qBAAsBA,EAAa"}

package/dist/index.module.js

@@ -0,0 +1,2 @@
+var 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}},n=function(e){return(e.lineHeight-e.fontSize)/2},i=["regular","bold"],t=["proportional","monospace"],o={0:0,4:4,8:8,16:16,24:24,40:40,64:64,104:104,168:168,272:272,440:440},r=80,l=24;function f(e){return 80*e+24*(e-1)}var c={none:0,4:4,8:8,16:16,24:24,oval:999999},a=72,g={screen1:f(6)+144,screen2:f(8)+144,screen3:f(10)+144,screen4:f(12)+144};function h(e){return"(max-width: "+(e-1)+"px)"}export{r as COLUMN_UNIT,l as GUTTER_UNIT,a as HORIZONTAL_MIN_MARGIN,t as TYPOGRAPHY_VARIANT,i as TYPOGRAPHY_WEIGHT,c as borderRadius,g as breakpoint,f as columnPx,n as halfLeading,h as maxWidth,o as spacing,e as typography};
+//# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","sources":["../src/typography.ts","../src/spacing.ts","../src/grid.ts","../src/border-radius.ts","../src/breakpoint.ts"],"sourcesContent":["export interface TypographyDescriptor {\n  lineHeight: number\n  fontSize: number\n}\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Typography = {\n  [12]: TypographyDescriptor\n  [14]: TypographyDescriptor\n  [16]: TypographyDescriptor\n  [20]: TypographyDescriptor\n  [32]: TypographyDescriptor\n}\n\nexport const typography: Typography = {\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}\n\nexport const halfLeading = ({ fontSize, lineHeight }: TypographyDescriptor) =>\n  (lineHeight - fontSize) / 2\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 type TypographyWeight = typeof TYPOGRAPHY_WEIGHT[number]\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\nexport type TypographyVariant = typeof TYPOGRAPHY_VARIANT[number]\n","// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Spacing = {\n  [0]: number\n  [4]: number\n  [8]: number\n  [16]: number\n  [24]: number\n  [40]: number\n  [64]: number\n  [104]: number\n  [168]: number\n  [272]: number\n  [440]: number\n}\n\nexport const spacing: 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}\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/**\n * Calculate px occupied by the span of the columns\n *\n * @param span column span count\n */\nexport function columnPx(span: number) {\n  return span * COLUMN_UNIT + (span - 1) * GUTTER_UNIT\n}\n\n// TODO: Grid definition with breakpoint\n","// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type BorderRadius = {\n  /**\n   * 用途: 打ち消し用クラス（モバイルのときに角丸じゃなくなる、などを表現する）\n   */\n  none: number\n\n  /**\n   * 用途: バッジ, 高さ40px以下の要素\n   */\n  [4]: number\n  /**\n   * 用途: サムネイル\n   */\n  [8]: number\n  /**\n   * 用途: チュートリアルツールチップ\n   */\n  [16]: number\n  /**\n   * 用途: モーダル\n   */\n  [24]: number\n  /**\n   * 真円 or 左右が丸まっている矩形 を作る時に用いる\n   *\n   * 用途: ボタン\n   */\n  oval: number\n}\n\nexport const borderRadius: BorderRadius = {\n  none: 0,\n  4: 4,\n  8: 8,\n  16: 16,\n  24: 24,\n  oval: 999999,\n}\n","import { columnPx } from './grid'\n\nexport const HORIZONTAL_MIN_MARGIN = 72\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport type Breakpoint = {\n  /**\n   * 6 columns (max 743px)\n   */\n  screen1: number\n  /**\n   * 8 columns (max 953px)\n   */\n  screen2: number\n  /**\n   * 10 columns (max 1159px)\n   */\n  screen3: number\n  /**\n   * 12 columns (max 1367px)\n   */\n  screen4: number\n}\n\nexport const breakpoint: Breakpoint = {\n  screen1: columnPx(6) + HORIZONTAL_MIN_MARGIN * 2,\n  screen2: columnPx(8) + HORIZONTAL_MIN_MARGIN * 2,\n  screen3: columnPx(10) + HORIZONTAL_MIN_MARGIN * 2,\n  screen4: columnPx(12) + HORIZONTAL_MIN_MARGIN * 2,\n}\n\n/**\n * @deprecated\n *\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n  return `(max-width: ${breakpoint - 1}px)`\n}\n"],"names":["typography","fontSize","lineHeight","halfLeading","TYPOGRAPHY_WEIGHT","TYPOGRAPHY_VARIANT","spacing","COLUMN_UNIT","GUTTER_UNIT","columnPx","span","borderRadius","none","oval","HORIZONTAL_MIN_MARGIN","breakpoint","screen1","screen2","screen3","screen4","maxWidth"],"mappings":"AAcaA,IAAAA,EAAyB,CACpC,GAAI,CACFC,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,IAEd,GAAI,CACFD,SAAU,GACVC,WAAY,KAIHC,EAAc,qBAAaD,aAAVD,UACF,GAEfG,EAAoB,CAQ/B,UAMA,QAKWC,EAAqB,CAMhC,eAIA,aCtDWC,EAAmB,CAC9B,EAAG,EACH,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,IAAK,IACL,IAAK,IACL,IAAK,IACL,IAAK,KCvBMC,EAAc,GAKdC,EAAc,YAOXC,EAASC,GACvB,OAbyB,GAalBA,EARkB,IAQIA,EAAO,GCezBC,IAAAA,EAA6B,CACxCC,KAAM,EACN,EAAG,EACH,EAAG,EACH,GAAI,GACJ,GAAI,GACJC,KAAM,QCnCKC,EAAwB,GAsBxBC,EAAyB,CACpCC,QAASP,EAAS,GAAKK,IACvBG,QAASR,EAAS,GAAKK,IACvBI,QAAST,EAAS,IAAMK,IACxBK,QAASV,EAAS,IAAMK,cAQVM,EAASL,GACvB,sBAAsBA,EAAa"}

package/dist/spacing.d.ts

@@ -0,0 +1,15 @@
+export declare type Spacing = {
+    [0]: number;
+    [4]: number;
+    [8]: number;
+    [16]: number;
+    [24]: number;
+    [40]: number;
+    [64]: number;
+    [104]: number;
+    [168]: number;
+    [272]: number;
+    [440]: number;
+};
+export declare const spacing: Spacing;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AACA,oBAAY,OAAO,GAAG;IACpB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACX,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACX,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACX,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACZ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACZ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACZ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACZ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACb,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACb,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACb,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,OAYrB,CAAA"}

package/dist/typography.d.ts

@@ -0,0 +1,18 @@
+export interface TypographyDescriptor {
+    lineHeight: number;
+    fontSize: number;
+}
+export declare type Typography = {
+    [12]: TypographyDescriptor;
+    [14]: TypographyDescriptor;
+    [16]: TypographyDescriptor;
+    [20]: TypographyDescriptor;
+    [32]: TypographyDescriptor;
+};
+export declare const typography: Typography;
+export declare const halfLeading: ({ fontSize, lineHeight }: TypographyDescriptor) => number;
+export declare const TYPOGRAPHY_WEIGHT: readonly ["regular", "bold"];
+export declare type TypographyWeight = typeof TYPOGRAPHY_WEIGHT[number];
+export declare const TYPOGRAPHY_VARIANT: readonly ["proportional", "monospace"];
+export declare type TypographyVariant = typeof TYPOGRAPHY_VARIANT[number];
+//# sourceMappingURL=typography.d.ts.map

package/dist/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAGD,oBAAY,UAAU,GAAG;IACvB,CAAC,EAAE,CAAC,EAAE,oBAAoB,CAAA;IAC1B,CAAC,EAAE,CAAC,EAAE,oBAAoB,CAAA;IAC1B,CAAC,EAAE,CAAC,EAAE,oBAAoB,CAAA;IAC1B,CAAC,EAAE,CAAC,EAAE,oBAAoB,CAAA;IAC1B,CAAC,EAAE,CAAC,EAAE,oBAAoB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,UAqBxB,CAAA;AAED,eAAO,MAAM,WAAW,6BAA8B,oBAAoB,WAC7C,CAAA;AAE7B,eAAO,MAAM,iBAAiB,8BAepB,CAAA;AAEV,oBAAY,gBAAgB,GAAG,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;AAE/D,eAAO,MAAM,kBAAkB,wCAWrB,CAAA;AAEV,oBAAY,iBAAiB,GAAG,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@charcoal-ui/foundation",
+  "version": "1.0.0-alpha.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "source": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.module.js",
+  "exports": {
+    "require": "./dist/index.cjs",
+    "default": "./dist/index.modern.js"
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "microbundle -f modern,esm,cjs --tsconfig tsconfig.build.json",
+    "typecheck": "tsc --noEmit --project tsconfig.build.json",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "microbundle": "^0.14.2",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.5.5"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1d09e09a796f92782be600672efb5c80a6a7b51b"
+}

package/src/border-radius.ts

@@ -0,0 +1,39 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type BorderRadius = {
+  /**
+   * 用途: 打ち消し用クラス（モバイルのときに角丸じゃなくなる、などを表現する）
+   */
+  none: number
+
+  /**
+   * 用途: バッジ, 高さ40px以下の要素
+   */
+  [4]: number
+  /**
+   * 用途: サムネイル
+   */
+  [8]: number
+  /**
+   * 用途: チュートリアルツールチップ
+   */
+  [16]: number
+  /**
+   * 用途: モーダル
+   */
+  [24]: number
+  /**
+   * 真円 or 左右が丸まっている矩形 を作る時に用いる
+   *
+   * 用途: ボタン
+   */
+  oval: number
+}
+
+export const borderRadius: BorderRadius = {
+  none: 0,
+  4: 4,
+  8: 8,
+  16: 16,
+  24: 24,
+  oval: 999999,
+}

package/src/breakpoint.ts

@@ -0,0 +1,39 @@
+import { columnPx } from './grid'
+
+export const HORIZONTAL_MIN_MARGIN = 72
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type Breakpoint = {
+  /**
+   * 6 columns (max 743px)
+   */
+  screen1: number
+  /**
+   * 8 columns (max 953px)
+   */
+  screen2: number
+  /**
+   * 10 columns (max 1159px)
+   */
+  screen3: number
+  /**
+   * 12 columns (max 1367px)
+   */
+  screen4: number
+}
+
+export const breakpoint: Breakpoint = {
+  screen1: columnPx(6) + HORIZONTAL_MIN_MARGIN * 2,
+  screen2: columnPx(8) + HORIZONTAL_MIN_MARGIN * 2,
+  screen3: columnPx(10) + HORIZONTAL_MIN_MARGIN * 2,
+  screen4: columnPx(12) + HORIZONTAL_MIN_MARGIN * 2,
+}
+
+/**
+ * @deprecated
+ *
+ * Construct media query from breakpoint
+ */
+export function maxWidth(breakpoint: number) {
+  return `(max-width: ${breakpoint - 1}px)`
+}

package/src/grid.ts

@@ -0,0 +1,20 @@
+/**
+ * Unit for grid column (px)
+ */
+export const COLUMN_UNIT = 80
+
+/**
+ * Unit for grid gutter width (px)
+ */
+export const GUTTER_UNIT = 24
+
+/**
+ * Calculate px occupied by the span of the columns
+ *
+ * @param span column span count
+ */
+export function columnPx(span: number) {
+  return span * COLUMN_UNIT + (span - 1) * GUTTER_UNIT
+}
+
+// TODO: Grid definition with breakpoint

package/src/index.ts

@@ -0,0 +1,19 @@
+export {
+  type Typography,
+  typography,
+  type TypographyDescriptor,
+  TYPOGRAPHY_VARIANT,
+  TYPOGRAPHY_WEIGHT,
+  type TypographyVariant,
+  type TypographyWeight,
+  halfLeading,
+} from './typography'
+export { type Spacing, spacing } from './spacing'
+export { COLUMN_UNIT, GUTTER_UNIT, columnPx } from './grid'
+export { type BorderRadius, borderRadius } from './border-radius'
+export {
+  type Breakpoint,
+  HORIZONTAL_MIN_MARGIN,
+  breakpoint,
+  maxWidth,
+} from './breakpoint'

package/src/spacing.ts

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type Spacing = {
+  [0]: number
+  [4]: number
+  [8]: number
+  [16]: number
+  [24]: number
+  [40]: number
+  [64]: number
+  [104]: number
+  [168]: number
+  [272]: number
+  [440]: number
+}
+
+export const spacing: Spacing = {
+  0: 0,
+  4: 4,
+  8: 8,
+  16: 16,
+  24: 24,
+  40: 40,
+  64: 64,
+  104: 104,
+  168: 168,
+  272: 272,
+  440: 440,
+}

package/src/typography.ts

@@ -0,0 +1,73 @@
+export interface TypographyDescriptor {
+  lineHeight: number
+  fontSize: number
+}
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type Typography = {
+  [12]: TypographyDescriptor
+  [14]: TypographyDescriptor
+  [16]: TypographyDescriptor
+  [20]: TypographyDescriptor
+  [32]: TypographyDescriptor
+}
+
+export const typography: Typography = {
+  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,
+  },
+}
+
+export const halfLeading = ({ fontSize, lineHeight }: TypographyDescriptor) =>
+  (lineHeight - fontSize) / 2
+
+export const TYPOGRAPHY_WEIGHT = [
+  /**
+   * Regular font weight
+   *
+   * <font-weight-absolute> ~ 400
+   *
+   * It should be the **DEFAULT** weight
+   */
+  'regular',
+  /**
+   * Bolder than `regular` weight
+   *
+   * <font-weight-absolute> ~ 700
+   */
+  'bold',
+] as const
+
+export type TypographyWeight = typeof TYPOGRAPHY_WEIGHT[number]
+
+export const TYPOGRAPHY_VARIANT = [
+  /**
+   * Proportional font (which has the variable amount of horizontal space)
+   *
+   * It should be the **DEFAULT** variant
+   */
+  'proportional',
+  /**
+   * Monospaced font (which has the same amount of horizontal space)
+   */
+  'monospace',
+] as const
+
+export type TypographyVariant = typeof TYPOGRAPHY_VARIANT[number]