@remember-web/mixin 0.1.15 → 0.2.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/dist/src/colors/utils.cjs.js +1 -1
- package/dist/src/colors/utils.cjs.js.map +1 -1
- package/dist/src/colors/utils.d.ts.map +1 -1
- package/dist/src/colors/utils.esm.js +1 -1
- package/dist/src/colors/utils.esm.js.map +1 -1
- package/dist/src/provider/styles.cjs.js +1 -1
- package/dist/src/provider/styles.cjs.js.map +1 -1
- package/dist/src/provider/styles.d.ts.map +1 -1
- package/dist/src/provider/styles.esm.js +1 -1
- package/dist/src/provider/styles.esm.js.map +1 -1
- package/dist/src/typography/const.cjs.js +71 -34
- package/dist/src/typography/const.cjs.js.map +1 -1
- package/dist/src/typography/const.d.ts +69 -34
- package/dist/src/typography/const.d.ts.map +1 -1
- package/dist/src/typography/const.esm.js +71 -34
- package/dist/src/typography/const.esm.js.map +1 -1
- package/dist/src/typography/utils.cjs.js +1 -1
- package/dist/src/typography/utils.cjs.js.map +1 -1
- package/dist/src/typography/utils.esm.js +1 -1
- package/dist/src/typography/utils.esm.js.map +1 -1
- package/package.json +2 -5
- package/src/colors/color.stories.tsx +2 -3
- package/src/colors/utils.ts +2 -2
- package/src/provider/styles.ts +1 -1
- package/src/typography/const.ts +71 -34
- package/src/typography/utils.ts +1 -1
|
@@ -42,7 +42,7 @@ function hexToRgb(colorHex) {
|
|
|
42
42
|
}).join();
|
|
43
43
|
}
|
|
44
44
|
var _hexWithoutHash$split = hexWithoutHash.split(/(..)(..)(..)/).map(function (hex) {
|
|
45
|
-
return parseInt(hex, 16);
|
|
45
|
+
return Number.parseInt(hex, 16);
|
|
46
46
|
}),
|
|
47
47
|
_hexWithoutHash$split2 = _slicedToArray__default.default(_hexWithoutHash$split, 4),
|
|
48
48
|
r = _hexWithoutHash$split2[1],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs.js","sources":["../../../src/colors/utils.ts"],"sourcesContent":["import { isSSR } from '@remember-web/shared';\n\nimport type {\n ColorVariable,\n ColorVariableName,\n RUIColorVariable,\n ThemeType,\n} from './types';\
|
|
1
|
+
{"version":3,"file":"utils.cjs.js","sources":["../../../src/colors/utils.ts"],"sourcesContent":["import { isSSR } from '@remember-web/shared';\n\nimport { RUI_COLOR_THEME } from './theme';\nimport type {\n ColorVariable,\n ColorVariableName,\n RUIColorVariable,\n ThemeType,\n} from './types';\n\n/** var(color)로 된 string을 color로 변경해줄 때 사용 */\nexport function getColorVariableName<V extends string = string>(\n color: ColorVariable<V>\n) {\n return color.slice(4, -1) as ColorVariableName<V>;\n}\n\n/** RDS컬러의 rgb값이 필요할 때 사용ValidityState\n * @example css`color: rgba(${getRgb(contents000)},0.5)`\n */\nexport function getRgb(color: ColorVariable) {\n return `var(${getColorVariableName(color)}__rgb)`;\n}\n\n/** RDS컬러를 통해서 css의 rgba함수를 사용\n * @example css`color: ${getRgb(contents000, 0.5)}`\n * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`\n */\nexport function getRgba(color: ColorVariable, opacity: number | `${number}%`) {\n return `rgba(${getRgb(color)},${opacity})`;\n}\n\n/** hex로 된 컬러값을 rgb값으로 변경해줌 */\nexport function hexToRgb(colorHex: string) {\n let hexWithoutHash = colorHex.replace('#', '');\n\n if (hexWithoutHash.length !== 3 && hexWithoutHash.length !== 6) {\n throw new Error('Invalid hex color');\n }\n\n if (hexWithoutHash.length === 3) {\n hexWithoutHash = [...hexWithoutHash].map((hex) => hex.repeat(2)).join();\n }\n\n const [, r, g, b] = hexWithoutHash\n .split(/(..)(..)(..)/)\n .map((hex) => Number.parseInt(hex, 16));\n\n return `${r},${g},${b}`;\n}\n\nexport function getBrowserTheme(): ThemeType {\n if (!isSSR() && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n return 'light';\n}\n\n/** css variable을 hex로 반환 */\nexport function getHexFromRuiCssVariable({\n colorVariable,\n theme,\n}: {\n theme: ThemeType;\n colorVariable: RUIColorVariable;\n}) {\n return RUI_COLOR_THEME[theme][getColorVariableName(colorVariable)];\n}\n"],"names":["getColorVariableName","color","slice","getRgb","concat","getRgba","opacity","hexToRgb","colorHex","hexWithoutHash","replace","length","Error","_toConsumableArray","map","hex","repeat","join","_hexWithoutHash$split","split","Number","parseInt","_hexWithoutHash$split2","_slicedToArray","r","g","b","getBrowserTheme","isSSR","window","matchMedia","matches","getHexFromRuiCssVariable","_ref","colorVariable","theme","RUI_COLOR_THEME"],"mappings":";;;;;;;;;;;;AAUA;AACO,SAASA,oBAAoBA,CAClCC,KAAuB,EACvB;EACA,OAAOA,KAAK,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC3B,CAAA;;AAEA;AACA;AACA;AACO,SAASC,MAAMA,CAACF,KAAoB,EAAE;AAC3C,EAAA,OAAA,MAAA,CAAAG,MAAA,CAAcJ,oBAAoB,CAACC,KAAK,CAAC,EAAA,QAAA,CAAA,CAAA;AAC3C,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASI,OAAOA,CAACJ,KAAoB,EAAEK,OAA8B,EAAE;EAC5E,OAAAF,OAAAA,CAAAA,MAAA,CAAeD,MAAM,CAACF,KAAK,CAAC,EAAA,GAAA,CAAA,CAAAG,MAAA,CAAIE,OAAO,EAAA,GAAA,CAAA,CAAA;AACzC,CAAA;;AAEA;AACO,SAASC,QAAQA,CAACC,QAAgB,EAAE;EACzC,IAAIC,cAAc,GAAGD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;EAE9C,IAAID,cAAc,CAACE,MAAM,KAAK,CAAC,IAAIF,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;AAC9D,IAAA,MAAM,IAAIC,KAAK,CAAC,mBAAmB,CAAC,CAAA;AACtC,GAAA;AAEA,EAAA,IAAIH,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;IAC/BF,cAAc,GAAGI,mCAAA,CAAIJ,cAAc,EAAEK,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKA,GAAG,CAACC,MAAM,CAAC,CAAC,CAAC,CAAA;KAAC,CAAA,CAACC,IAAI,EAAE,CAAA;AACzE,GAAA;AAEA,EAAA,IAAAC,qBAAA,GAAoBT,cAAc,CAC/BU,KAAK,CAAC,cAAc,CAAC,CACrBL,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKK,MAAM,CAACC,QAAQ,CAACN,GAAG,EAAE,EAAE,CAAC,CAAA;KAAC,CAAA;IAAAO,sBAAA,GAAAC,+BAAA,CAAAL,qBAAA,EAAA,CAAA,CAAA;AAFhCM,IAAAA,CAAC,GAAAF,sBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,CAAC,GAAAH,sBAAA,CAAA,CAAA,CAAA;AAAEI,IAAAA,CAAC,GAAAJ,sBAAA,CAAA,CAAA,CAAA,CAAA;EAIhB,OAAAlB,EAAAA,CAAAA,MAAA,CAAUoB,CAAC,EAAApB,GAAAA,CAAAA,CAAAA,MAAA,CAAIqB,CAAC,EAAA,GAAA,CAAA,CAAArB,MAAA,CAAIsB,CAAC,CAAA,CAAA;AACvB,CAAA;AAEO,SAASC,eAAeA,GAAc;AAC3C,EAAA,IAAI,CAACC,YAAK,EAAE,IAAIC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC,CAACC,OAAO,EAAE;AACzE,IAAA,OAAO,MAAM,CAAA;AACf,GAAA;AACA,EAAA,OAAO,OAAO,CAAA;AAChB,CAAA;;AAEA;AACO,SAASC,wBAAwBA,CAAAC,IAAA,EAMrC;AAAA,EAAA,IALDC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,OAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;EAKL,OAAOC,qBAAe,CAACD,OAAK,CAAC,CAACnC,oBAAoB,CAACkC,aAAa,CAAC,CAAC,CAAA;AACpE;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/colors/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/colors/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACV,MAAM,SAAS,CAAC;AAEjB,6CAA6C;AAC7C,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,wBAGxB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,aAAa,UAE1C;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,UAE3E;AAED,8BAA8B;AAC9B,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,UAgBxC;AAED,wBAAgB,eAAe,IAAI,SAAS,CAK3C;AAED,4BAA4B;AAC5B,wBAAgB,wBAAwB,CAAC,EACvC,aAAa,EACb,KAAK,GACN,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,gBAAgB,CAAC;CACjC,UAEA"}
|
|
@@ -35,7 +35,7 @@ function hexToRgb(colorHex) {
|
|
|
35
35
|
}).join();
|
|
36
36
|
}
|
|
37
37
|
var _hexWithoutHash$split = hexWithoutHash.split(/(..)(..)(..)/).map(function (hex) {
|
|
38
|
-
return parseInt(hex, 16);
|
|
38
|
+
return Number.parseInt(hex, 16);
|
|
39
39
|
}),
|
|
40
40
|
_hexWithoutHash$split2 = _slicedToArray(_hexWithoutHash$split, 4),
|
|
41
41
|
r = _hexWithoutHash$split2[1],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["../../../src/colors/utils.ts"],"sourcesContent":["import { isSSR } from '@remember-web/shared';\n\nimport type {\n ColorVariable,\n ColorVariableName,\n RUIColorVariable,\n ThemeType,\n} from './types';\
|
|
1
|
+
{"version":3,"file":"utils.esm.js","sources":["../../../src/colors/utils.ts"],"sourcesContent":["import { isSSR } from '@remember-web/shared';\n\nimport { RUI_COLOR_THEME } from './theme';\nimport type {\n ColorVariable,\n ColorVariableName,\n RUIColorVariable,\n ThemeType,\n} from './types';\n\n/** var(color)로 된 string을 color로 변경해줄 때 사용 */\nexport function getColorVariableName<V extends string = string>(\n color: ColorVariable<V>\n) {\n return color.slice(4, -1) as ColorVariableName<V>;\n}\n\n/** RDS컬러의 rgb값이 필요할 때 사용ValidityState\n * @example css`color: rgba(${getRgb(contents000)},0.5)`\n */\nexport function getRgb(color: ColorVariable) {\n return `var(${getColorVariableName(color)}__rgb)`;\n}\n\n/** RDS컬러를 통해서 css의 rgba함수를 사용\n * @example css`color: ${getRgb(contents000, 0.5)}`\n * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`\n */\nexport function getRgba(color: ColorVariable, opacity: number | `${number}%`) {\n return `rgba(${getRgb(color)},${opacity})`;\n}\n\n/** hex로 된 컬러값을 rgb값으로 변경해줌 */\nexport function hexToRgb(colorHex: string) {\n let hexWithoutHash = colorHex.replace('#', '');\n\n if (hexWithoutHash.length !== 3 && hexWithoutHash.length !== 6) {\n throw new Error('Invalid hex color');\n }\n\n if (hexWithoutHash.length === 3) {\n hexWithoutHash = [...hexWithoutHash].map((hex) => hex.repeat(2)).join();\n }\n\n const [, r, g, b] = hexWithoutHash\n .split(/(..)(..)(..)/)\n .map((hex) => Number.parseInt(hex, 16));\n\n return `${r},${g},${b}`;\n}\n\nexport function getBrowserTheme(): ThemeType {\n if (!isSSR() && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n return 'light';\n}\n\n/** css variable을 hex로 반환 */\nexport function getHexFromRuiCssVariable({\n colorVariable,\n theme,\n}: {\n theme: ThemeType;\n colorVariable: RUIColorVariable;\n}) {\n return RUI_COLOR_THEME[theme][getColorVariableName(colorVariable)];\n}\n"],"names":["getColorVariableName","color","slice","getRgb","concat","getRgba","opacity","hexToRgb","colorHex","hexWithoutHash","replace","length","Error","_toConsumableArray","map","hex","repeat","join","_hexWithoutHash$split","split","Number","parseInt","_hexWithoutHash$split2","_slicedToArray","r","g","b","getBrowserTheme","isSSR","window","matchMedia","matches","getHexFromRuiCssVariable","_ref","colorVariable","theme","RUI_COLOR_THEME"],"mappings":";;;;;AAUA;AACO,SAASA,oBAAoBA,CAClCC,KAAuB,EACvB;EACA,OAAOA,KAAK,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC3B,CAAA;;AAEA;AACA;AACA;AACO,SAASC,MAAMA,CAACF,KAAoB,EAAE;AAC3C,EAAA,OAAA,MAAA,CAAAG,MAAA,CAAcJ,oBAAoB,CAACC,KAAK,CAAC,EAAA,QAAA,CAAA,CAAA;AAC3C,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASI,OAAOA,CAACJ,KAAoB,EAAEK,OAA8B,EAAE;EAC5E,OAAAF,OAAAA,CAAAA,MAAA,CAAeD,MAAM,CAACF,KAAK,CAAC,EAAA,GAAA,CAAA,CAAAG,MAAA,CAAIE,OAAO,EAAA,GAAA,CAAA,CAAA;AACzC,CAAA;;AAEA;AACO,SAASC,QAAQA,CAACC,QAAgB,EAAE;EACzC,IAAIC,cAAc,GAAGD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;EAE9C,IAAID,cAAc,CAACE,MAAM,KAAK,CAAC,IAAIF,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;AAC9D,IAAA,MAAM,IAAIC,KAAK,CAAC,mBAAmB,CAAC,CAAA;AACtC,GAAA;AAEA,EAAA,IAAIH,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;IAC/BF,cAAc,GAAGI,kBAAA,CAAIJ,cAAc,EAAEK,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKA,GAAG,CAACC,MAAM,CAAC,CAAC,CAAC,CAAA;KAAC,CAAA,CAACC,IAAI,EAAE,CAAA;AACzE,GAAA;AAEA,EAAA,IAAAC,qBAAA,GAAoBT,cAAc,CAC/BU,KAAK,CAAC,cAAc,CAAC,CACrBL,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKK,MAAM,CAACC,QAAQ,CAACN,GAAG,EAAE,EAAE,CAAC,CAAA;KAAC,CAAA;IAAAO,sBAAA,GAAAC,cAAA,CAAAL,qBAAA,EAAA,CAAA,CAAA;AAFhCM,IAAAA,CAAC,GAAAF,sBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,CAAC,GAAAH,sBAAA,CAAA,CAAA,CAAA;AAAEI,IAAAA,CAAC,GAAAJ,sBAAA,CAAA,CAAA,CAAA,CAAA;EAIhB,OAAAlB,EAAAA,CAAAA,MAAA,CAAUoB,CAAC,EAAApB,GAAAA,CAAAA,CAAAA,MAAA,CAAIqB,CAAC,EAAA,GAAA,CAAA,CAAArB,MAAA,CAAIsB,CAAC,CAAA,CAAA;AACvB,CAAA;AAEO,SAASC,eAAeA,GAAc;AAC3C,EAAA,IAAI,CAACC,KAAK,EAAE,IAAIC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC,CAACC,OAAO,EAAE;AACzE,IAAA,OAAO,MAAM,CAAA;AACf,GAAA;AACA,EAAA,OAAO,OAAO,CAAA;AAChB,CAAA;;AAEA;AACO,SAASC,wBAAwBA,CAAAC,IAAA,EAMrC;AAAA,EAAA,IALDC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;EAKL,OAAOC,eAAe,CAACD,KAAK,CAAC,CAACnC,oBAAoB,CAACkC,aAAa,CAAC,CAAC,CAAA;AACpE;;;;"}
|
|
@@ -5,8 +5,8 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
7
7
|
var styledComponents = require('styled-components');
|
|
8
|
-
var theme = require('../colors/theme.cjs.js');
|
|
9
8
|
var utils = require('../colors/utils.cjs.js');
|
|
9
|
+
var theme = require('../colors/theme.cjs.js');
|
|
10
10
|
|
|
11
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../src/provider/styles.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'styled-components';\n\nimport {
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../src/provider/styles.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'styled-components';\n\nimport { type ColorThemeType, type ThemeType, hexToRgb } from '@/colors';\nimport { RUI_COLOR_THEME } from '@/colors/theme';\n\nexport const RUIGlobalStyle = createGlobalStyle<{\n customMixins?: ColorThemeType;\n forceTheme?: ThemeType;\n}>(\n ({ customMixins, forceTheme }) => css`\n :root {\n ${getThemeCssFragment({ theme: forceTheme || 'light', customMixins })};\n\n @media (prefers-color-scheme: dark) {\n ${getThemeCssFragment({ theme: forceTheme || 'dark', customMixins })}\n }\n }\n `\n);\n\nfunction getThemeCssFragment({\n theme,\n customMixins,\n}: {\n theme: ThemeType;\n customMixins?: ColorThemeType;\n}) {\n return Object.entries({\n ...RUI_COLOR_THEME[theme],\n ...customMixins?.[theme],\n }).map(\n ([key, value]) => `${key}: ${value}; ${key}__rgb: ${hexToRgb(value)};`\n );\n}\n"],"names":["customMixins","key","value"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;;AAWX;;;;AAE0DA;;;AAGCA;AAAa;AAAE;AAM5E;AAMG;;;AAKC;AAAEC;AAAKC;AAAK;AAAuD;AAEvE;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/provider/styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/provider/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,UAAU,CAAC;AAGzE,eAAO,MAAM,cAAc;;;EAa1B,CAAC"}
|
|
@@ -3,8 +3,8 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
3
3
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
4
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
5
5
|
import { createGlobalStyle, css } from 'styled-components';
|
|
6
|
-
import { RUI_COLOR_THEME } from '../colors/theme.esm.js';
|
|
7
6
|
import { hexToRgb } from '../colors/utils.esm.js';
|
|
7
|
+
import { RUI_COLOR_THEME } from '../colors/theme.esm.js';
|
|
8
8
|
|
|
9
9
|
var _templateObject;
|
|
10
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../src/provider/styles.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'styled-components';\n\nimport {
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../src/provider/styles.ts"],"sourcesContent":["'use client';\n\nimport { createGlobalStyle, css } from 'styled-components';\n\nimport { type ColorThemeType, type ThemeType, hexToRgb } from '@/colors';\nimport { RUI_COLOR_THEME } from '@/colors/theme';\n\nexport const RUIGlobalStyle = createGlobalStyle<{\n customMixins?: ColorThemeType;\n forceTheme?: ThemeType;\n}>(\n ({ customMixins, forceTheme }) => css`\n :root {\n ${getThemeCssFragment({ theme: forceTheme || 'light', customMixins })};\n\n @media (prefers-color-scheme: dark) {\n ${getThemeCssFragment({ theme: forceTheme || 'dark', customMixins })}\n }\n }\n `\n);\n\nfunction getThemeCssFragment({\n theme,\n customMixins,\n}: {\n theme: ThemeType;\n customMixins?: ColorThemeType;\n}) {\n return Object.entries({\n ...RUI_COLOR_THEME[theme],\n ...customMixins?.[theme],\n }).map(\n ([key, value]) => `${key}: ${value}; ${key}__rgb: ${hexToRgb(value)};`\n );\n}\n"],"names":["customMixins","key","value"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;;AAWX;;;;AAE0DA;;;AAGCA;AAAa;AAAE;AAM5E;AAMG;;;AAKC;AAAEC;AAAKC;AAAK;AAAuD;AAEvE;;"}
|
|
@@ -13,100 +13,137 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
13
13
|
var LEGACY_TYPOGRAPHY_STYLES = {
|
|
14
14
|
Headline2_B: {
|
|
15
15
|
fontSize: 24,
|
|
16
|
-
lineHeight:
|
|
16
|
+
lineHeight: '34px',
|
|
17
17
|
fontWeight: 600
|
|
18
18
|
},
|
|
19
19
|
Headline3_B: {
|
|
20
20
|
fontSize: 20,
|
|
21
|
-
lineHeight:
|
|
21
|
+
lineHeight: '26px',
|
|
22
22
|
fontWeight: 600
|
|
23
23
|
},
|
|
24
24
|
Headline4_B: {
|
|
25
25
|
fontSize: 16,
|
|
26
|
-
lineHeight:
|
|
26
|
+
lineHeight: '26px',
|
|
27
27
|
fontWeight: 600
|
|
28
28
|
},
|
|
29
29
|
Headline4_M: {
|
|
30
30
|
fontSize: 16,
|
|
31
|
-
lineHeight:
|
|
31
|
+
lineHeight: '26px',
|
|
32
32
|
fontWeight: 400
|
|
33
33
|
},
|
|
34
34
|
Body1_B: {
|
|
35
35
|
fontSize: 14,
|
|
36
|
-
lineHeight:
|
|
36
|
+
lineHeight: '24px',
|
|
37
37
|
fontWeight: 600
|
|
38
38
|
},
|
|
39
39
|
Body1_M: {
|
|
40
40
|
fontSize: 14,
|
|
41
|
-
lineHeight:
|
|
41
|
+
lineHeight: '24px',
|
|
42
42
|
fontWeight: 400
|
|
43
43
|
},
|
|
44
44
|
Body2_B: {
|
|
45
45
|
fontSize: 12,
|
|
46
|
-
lineHeight:
|
|
46
|
+
lineHeight: '19px',
|
|
47
47
|
fontWeight: 600
|
|
48
48
|
},
|
|
49
49
|
Body2_M: {
|
|
50
50
|
fontSize: 12,
|
|
51
|
-
lineHeight:
|
|
51
|
+
lineHeight: '19px',
|
|
52
52
|
fontWeight: 400
|
|
53
53
|
},
|
|
54
54
|
Caption_B: {
|
|
55
55
|
fontSize: 10,
|
|
56
|
-
lineHeight:
|
|
56
|
+
lineHeight: '14px',
|
|
57
57
|
fontWeight: 600
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
|
|
61
|
+
// Title Style
|
|
62
|
+
Display1: {
|
|
63
|
+
fontSize: 48,
|
|
64
|
+
lineHeight: 1.3,
|
|
65
|
+
fontWeight: 700
|
|
66
|
+
},
|
|
67
|
+
Display2: {
|
|
68
|
+
fontSize: 40,
|
|
69
|
+
lineHeight: 1.3,
|
|
70
|
+
fontWeight: 700
|
|
71
|
+
},
|
|
72
|
+
Display3: {
|
|
73
|
+
fontSize: 32,
|
|
74
|
+
lineHeight: 1.3,
|
|
75
|
+
fontWeight: 700
|
|
76
|
+
},
|
|
61
77
|
Headline: {
|
|
62
78
|
fontSize: 24,
|
|
63
|
-
lineHeight:
|
|
79
|
+
lineHeight: 1.3,
|
|
64
80
|
fontWeight: 600
|
|
65
81
|
},
|
|
66
82
|
Title1: {
|
|
67
83
|
fontSize: 20,
|
|
68
|
-
lineHeight:
|
|
84
|
+
lineHeight: 1.3,
|
|
85
|
+
fontWeight: 600
|
|
86
|
+
},
|
|
87
|
+
Title2: {
|
|
88
|
+
fontSize: 18,
|
|
89
|
+
lineHeight: 1.3,
|
|
69
90
|
fontWeight: 600
|
|
70
91
|
},
|
|
71
|
-
|
|
92
|
+
SubTitle1: {
|
|
93
|
+
fontSize: 16,
|
|
94
|
+
lineHeight: 1.3,
|
|
95
|
+
fontWeight: 500
|
|
96
|
+
},
|
|
97
|
+
SubTitle2: {
|
|
98
|
+
fontSize: 14,
|
|
99
|
+
lineHeight: 1.3,
|
|
100
|
+
fontWeight: 500
|
|
101
|
+
},
|
|
102
|
+
// Body Style
|
|
103
|
+
DisplayBody: {
|
|
72
104
|
fontSize: 20,
|
|
73
|
-
lineHeight:
|
|
105
|
+
lineHeight: 1.45,
|
|
74
106
|
fontWeight: 400
|
|
75
107
|
},
|
|
76
|
-
|
|
108
|
+
ArticleBody: {
|
|
109
|
+
fontSize: 18,
|
|
110
|
+
lineHeight: 1.45,
|
|
111
|
+
fontWeight: 400
|
|
112
|
+
},
|
|
113
|
+
ArticleBodyReading: {
|
|
114
|
+
fontSize: 18,
|
|
115
|
+
lineHeight: 1.55,
|
|
116
|
+
fontWeight: 400
|
|
117
|
+
},
|
|
118
|
+
Body1: {
|
|
77
119
|
fontSize: 16,
|
|
78
|
-
lineHeight:
|
|
79
|
-
fontWeight:
|
|
120
|
+
lineHeight: 1.45,
|
|
121
|
+
fontWeight: 400
|
|
80
122
|
},
|
|
81
|
-
|
|
123
|
+
Body1Reading: {
|
|
82
124
|
fontSize: 16,
|
|
83
|
-
lineHeight:
|
|
125
|
+
lineHeight: 1.6,
|
|
84
126
|
fontWeight: 400
|
|
85
127
|
},
|
|
86
|
-
|
|
128
|
+
Body2: {
|
|
87
129
|
fontSize: 14,
|
|
88
|
-
lineHeight:
|
|
89
|
-
fontWeight:
|
|
130
|
+
lineHeight: 1.45,
|
|
131
|
+
fontWeight: 400
|
|
90
132
|
},
|
|
91
|
-
|
|
133
|
+
Body2Reading: {
|
|
92
134
|
fontSize: 14,
|
|
93
|
-
lineHeight:
|
|
135
|
+
lineHeight: 1.6,
|
|
94
136
|
fontWeight: 400
|
|
95
137
|
},
|
|
96
|
-
|
|
138
|
+
Caption1: {
|
|
97
139
|
fontSize: 12,
|
|
98
|
-
lineHeight:
|
|
99
|
-
fontWeight:
|
|
140
|
+
lineHeight: 1.35,
|
|
141
|
+
fontWeight: 500
|
|
100
142
|
},
|
|
101
|
-
|
|
102
|
-
fontSize: 12,
|
|
103
|
-
lineHeight: 19,
|
|
104
|
-
fontWeight: 400
|
|
105
|
-
},
|
|
106
|
-
Caption: {
|
|
143
|
+
Caption2: {
|
|
107
144
|
fontSize: 10,
|
|
108
|
-
lineHeight:
|
|
109
|
-
fontWeight:
|
|
145
|
+
lineHeight: 1.35,
|
|
146
|
+
fontWeight: 500
|
|
110
147
|
}
|
|
111
148
|
});
|
|
112
149
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\nconst LEGACY_TYPOGRAPHY_STYLES = {\n Headline2_B: {\n fontSize: 24,\n lineHeight:
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\nconst LEGACY_TYPOGRAPHY_STYLES = {\n Headline2_B: {\n fontSize: 24,\n lineHeight: '34px',\n fontWeight: 600,\n },\n Headline3_B: {\n fontSize: 20,\n lineHeight: '26px',\n fontWeight: 600,\n },\n Headline4_B: {\n fontSize: 16,\n lineHeight: '26px',\n fontWeight: 600,\n },\n Headline4_M: {\n fontSize: 16,\n lineHeight: '26px',\n fontWeight: 400,\n },\n Body1_B: {\n fontSize: 14,\n lineHeight: '24px',\n fontWeight: 600,\n },\n Body1_M: {\n fontSize: 14,\n lineHeight: '24px',\n fontWeight: 400,\n },\n Body2_B: {\n fontSize: 12,\n lineHeight: '19px',\n fontWeight: 600,\n },\n Body2_M: {\n fontSize: 12,\n lineHeight: '19px',\n fontWeight: 400,\n },\n Caption_B: {\n fontSize: 10,\n lineHeight: '14px',\n fontWeight: 600,\n },\n} as const;\n\nexport const TYPOGRAPHY_STYLES = {\n ...LEGACY_TYPOGRAPHY_STYLES,\n // Title Style\n Display1: {\n fontSize: 48,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Display2: {\n fontSize: 40,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Display3: {\n fontSize: 32,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Headline: {\n fontSize: 24,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title1: {\n fontSize: 20,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title2: {\n fontSize: 18,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n SubTitle1: {\n fontSize: 16,\n lineHeight: 1.3,\n fontWeight: 500,\n },\n SubTitle2: {\n fontSize: 14,\n lineHeight: 1.3,\n fontWeight: 500,\n },\n // Body Style\n DisplayBody: {\n fontSize: 20,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n ArticleBody: {\n fontSize: 18,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n ArticleBodyReading: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 400,\n },\n Body1: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n Body1Reading: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n Body2: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n Body2Reading: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n Caption1: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption2: {\n fontSize: 10,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n} as const;\n\n/**\n * {@link https://github.com/orioncactus/pretendard#html-1}\n */\nexport const PRETENDARD_FONT_FAMILY =\n \"Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif\";\n"],"names":["LEGACY_TYPOGRAPHY_STYLES","Headline2_B","fontSize","lineHeight","fontWeight","Headline3_B","Headline4_B","Headline4_M","Body1_B","Body1_M","Body2_B","Body2_M","Caption_B","TYPOGRAPHY_STYLES","_objectSpread","Display1","Display2","Display3","Headline","Title1","Title2","SubTitle1","SubTitle2","DisplayBody","ArticleBody","ArticleBodyReading","Body1","Body1Reading","Body2","Body2Reading","Caption1","Caption2","PRETENDARD_FONT_FAMILY"],"mappings":"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"}
|
|
@@ -1,97 +1,132 @@
|
|
|
1
1
|
export declare const TYPOGRAPHY_STYLES: {
|
|
2
|
+
readonly Display1: {
|
|
3
|
+
readonly fontSize: 48;
|
|
4
|
+
readonly lineHeight: 1.3;
|
|
5
|
+
readonly fontWeight: 700;
|
|
6
|
+
};
|
|
7
|
+
readonly Display2: {
|
|
8
|
+
readonly fontSize: 40;
|
|
9
|
+
readonly lineHeight: 1.3;
|
|
10
|
+
readonly fontWeight: 700;
|
|
11
|
+
};
|
|
12
|
+
readonly Display3: {
|
|
13
|
+
readonly fontSize: 32;
|
|
14
|
+
readonly lineHeight: 1.3;
|
|
15
|
+
readonly fontWeight: 700;
|
|
16
|
+
};
|
|
2
17
|
readonly Headline: {
|
|
3
18
|
readonly fontSize: 24;
|
|
4
|
-
readonly lineHeight:
|
|
19
|
+
readonly lineHeight: 1.3;
|
|
5
20
|
readonly fontWeight: 600;
|
|
6
21
|
};
|
|
7
22
|
readonly Title1: {
|
|
8
23
|
readonly fontSize: 20;
|
|
9
|
-
readonly lineHeight:
|
|
24
|
+
readonly lineHeight: 1.3;
|
|
25
|
+
readonly fontWeight: 600;
|
|
26
|
+
};
|
|
27
|
+
readonly Title2: {
|
|
28
|
+
readonly fontSize: 18;
|
|
29
|
+
readonly lineHeight: 1.3;
|
|
10
30
|
readonly fontWeight: 600;
|
|
11
31
|
};
|
|
12
|
-
readonly
|
|
32
|
+
readonly SubTitle1: {
|
|
33
|
+
readonly fontSize: 16;
|
|
34
|
+
readonly lineHeight: 1.3;
|
|
35
|
+
readonly fontWeight: 500;
|
|
36
|
+
};
|
|
37
|
+
readonly SubTitle2: {
|
|
38
|
+
readonly fontSize: 14;
|
|
39
|
+
readonly lineHeight: 1.3;
|
|
40
|
+
readonly fontWeight: 500;
|
|
41
|
+
};
|
|
42
|
+
readonly DisplayBody: {
|
|
13
43
|
readonly fontSize: 20;
|
|
14
|
-
readonly lineHeight:
|
|
44
|
+
readonly lineHeight: 1.45;
|
|
15
45
|
readonly fontWeight: 400;
|
|
16
46
|
};
|
|
17
|
-
readonly
|
|
47
|
+
readonly ArticleBody: {
|
|
48
|
+
readonly fontSize: 18;
|
|
49
|
+
readonly lineHeight: 1.45;
|
|
50
|
+
readonly fontWeight: 400;
|
|
51
|
+
};
|
|
52
|
+
readonly ArticleBodyReading: {
|
|
53
|
+
readonly fontSize: 18;
|
|
54
|
+
readonly lineHeight: 1.55;
|
|
55
|
+
readonly fontWeight: 400;
|
|
56
|
+
};
|
|
57
|
+
readonly Body1: {
|
|
18
58
|
readonly fontSize: 16;
|
|
19
|
-
readonly lineHeight:
|
|
20
|
-
readonly fontWeight:
|
|
59
|
+
readonly lineHeight: 1.45;
|
|
60
|
+
readonly fontWeight: 400;
|
|
21
61
|
};
|
|
22
|
-
readonly
|
|
62
|
+
readonly Body1Reading: {
|
|
23
63
|
readonly fontSize: 16;
|
|
24
|
-
readonly lineHeight:
|
|
64
|
+
readonly lineHeight: 1.6;
|
|
25
65
|
readonly fontWeight: 400;
|
|
26
66
|
};
|
|
27
|
-
readonly
|
|
67
|
+
readonly Body2: {
|
|
28
68
|
readonly fontSize: 14;
|
|
29
|
-
readonly lineHeight:
|
|
30
|
-
readonly fontWeight:
|
|
69
|
+
readonly lineHeight: 1.45;
|
|
70
|
+
readonly fontWeight: 400;
|
|
31
71
|
};
|
|
32
|
-
readonly
|
|
72
|
+
readonly Body2Reading: {
|
|
33
73
|
readonly fontSize: 14;
|
|
34
|
-
readonly lineHeight:
|
|
74
|
+
readonly lineHeight: 1.6;
|
|
35
75
|
readonly fontWeight: 400;
|
|
36
76
|
};
|
|
37
|
-
readonly
|
|
77
|
+
readonly Caption1: {
|
|
38
78
|
readonly fontSize: 12;
|
|
39
|
-
readonly lineHeight:
|
|
40
|
-
readonly fontWeight:
|
|
79
|
+
readonly lineHeight: 1.35;
|
|
80
|
+
readonly fontWeight: 500;
|
|
41
81
|
};
|
|
42
|
-
readonly
|
|
43
|
-
readonly fontSize: 12;
|
|
44
|
-
readonly lineHeight: 19;
|
|
45
|
-
readonly fontWeight: 400;
|
|
46
|
-
};
|
|
47
|
-
readonly Caption: {
|
|
82
|
+
readonly Caption2: {
|
|
48
83
|
readonly fontSize: 10;
|
|
49
|
-
readonly lineHeight:
|
|
50
|
-
readonly fontWeight:
|
|
84
|
+
readonly lineHeight: 1.35;
|
|
85
|
+
readonly fontWeight: 500;
|
|
51
86
|
};
|
|
52
87
|
readonly Headline2_B: {
|
|
53
88
|
readonly fontSize: 24;
|
|
54
|
-
readonly lineHeight:
|
|
89
|
+
readonly lineHeight: "34px";
|
|
55
90
|
readonly fontWeight: 600;
|
|
56
91
|
};
|
|
57
92
|
readonly Headline3_B: {
|
|
58
93
|
readonly fontSize: 20;
|
|
59
|
-
readonly lineHeight:
|
|
94
|
+
readonly lineHeight: "26px";
|
|
60
95
|
readonly fontWeight: 600;
|
|
61
96
|
};
|
|
62
97
|
readonly Headline4_B: {
|
|
63
98
|
readonly fontSize: 16;
|
|
64
|
-
readonly lineHeight:
|
|
99
|
+
readonly lineHeight: "26px";
|
|
65
100
|
readonly fontWeight: 600;
|
|
66
101
|
};
|
|
67
102
|
readonly Headline4_M: {
|
|
68
103
|
readonly fontSize: 16;
|
|
69
|
-
readonly lineHeight:
|
|
104
|
+
readonly lineHeight: "26px";
|
|
70
105
|
readonly fontWeight: 400;
|
|
71
106
|
};
|
|
72
107
|
readonly Body1_B: {
|
|
73
108
|
readonly fontSize: 14;
|
|
74
|
-
readonly lineHeight:
|
|
109
|
+
readonly lineHeight: "24px";
|
|
75
110
|
readonly fontWeight: 600;
|
|
76
111
|
};
|
|
77
112
|
readonly Body1_M: {
|
|
78
113
|
readonly fontSize: 14;
|
|
79
|
-
readonly lineHeight:
|
|
114
|
+
readonly lineHeight: "24px";
|
|
80
115
|
readonly fontWeight: 400;
|
|
81
116
|
};
|
|
82
117
|
readonly Body2_B: {
|
|
83
118
|
readonly fontSize: 12;
|
|
84
|
-
readonly lineHeight:
|
|
119
|
+
readonly lineHeight: "19px";
|
|
85
120
|
readonly fontWeight: 600;
|
|
86
121
|
};
|
|
87
122
|
readonly Body2_M: {
|
|
88
123
|
readonly fontSize: 12;
|
|
89
|
-
readonly lineHeight:
|
|
124
|
+
readonly lineHeight: "19px";
|
|
90
125
|
readonly fontWeight: 400;
|
|
91
126
|
};
|
|
92
127
|
readonly Caption_B: {
|
|
93
128
|
readonly fontSize: 10;
|
|
94
|
-
readonly lineHeight:
|
|
129
|
+
readonly lineHeight: "14px";
|
|
95
130
|
readonly fontWeight: 600;
|
|
96
131
|
};
|
|
97
132
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../src/typography/const.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,iBAAiB
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../src/typography/const.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB,iOAC6L,CAAC"}
|
|
@@ -7,100 +7,137 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
var LEGACY_TYPOGRAPHY_STYLES = {
|
|
8
8
|
Headline2_B: {
|
|
9
9
|
fontSize: 24,
|
|
10
|
-
lineHeight:
|
|
10
|
+
lineHeight: '34px',
|
|
11
11
|
fontWeight: 600
|
|
12
12
|
},
|
|
13
13
|
Headline3_B: {
|
|
14
14
|
fontSize: 20,
|
|
15
|
-
lineHeight:
|
|
15
|
+
lineHeight: '26px',
|
|
16
16
|
fontWeight: 600
|
|
17
17
|
},
|
|
18
18
|
Headline4_B: {
|
|
19
19
|
fontSize: 16,
|
|
20
|
-
lineHeight:
|
|
20
|
+
lineHeight: '26px',
|
|
21
21
|
fontWeight: 600
|
|
22
22
|
},
|
|
23
23
|
Headline4_M: {
|
|
24
24
|
fontSize: 16,
|
|
25
|
-
lineHeight:
|
|
25
|
+
lineHeight: '26px',
|
|
26
26
|
fontWeight: 400
|
|
27
27
|
},
|
|
28
28
|
Body1_B: {
|
|
29
29
|
fontSize: 14,
|
|
30
|
-
lineHeight:
|
|
30
|
+
lineHeight: '24px',
|
|
31
31
|
fontWeight: 600
|
|
32
32
|
},
|
|
33
33
|
Body1_M: {
|
|
34
34
|
fontSize: 14,
|
|
35
|
-
lineHeight:
|
|
35
|
+
lineHeight: '24px',
|
|
36
36
|
fontWeight: 400
|
|
37
37
|
},
|
|
38
38
|
Body2_B: {
|
|
39
39
|
fontSize: 12,
|
|
40
|
-
lineHeight:
|
|
40
|
+
lineHeight: '19px',
|
|
41
41
|
fontWeight: 600
|
|
42
42
|
},
|
|
43
43
|
Body2_M: {
|
|
44
44
|
fontSize: 12,
|
|
45
|
-
lineHeight:
|
|
45
|
+
lineHeight: '19px',
|
|
46
46
|
fontWeight: 400
|
|
47
47
|
},
|
|
48
48
|
Caption_B: {
|
|
49
49
|
fontSize: 10,
|
|
50
|
-
lineHeight:
|
|
50
|
+
lineHeight: '14px',
|
|
51
51
|
fontWeight: 600
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
|
|
55
|
+
// Title Style
|
|
56
|
+
Display1: {
|
|
57
|
+
fontSize: 48,
|
|
58
|
+
lineHeight: 1.3,
|
|
59
|
+
fontWeight: 700
|
|
60
|
+
},
|
|
61
|
+
Display2: {
|
|
62
|
+
fontSize: 40,
|
|
63
|
+
lineHeight: 1.3,
|
|
64
|
+
fontWeight: 700
|
|
65
|
+
},
|
|
66
|
+
Display3: {
|
|
67
|
+
fontSize: 32,
|
|
68
|
+
lineHeight: 1.3,
|
|
69
|
+
fontWeight: 700
|
|
70
|
+
},
|
|
55
71
|
Headline: {
|
|
56
72
|
fontSize: 24,
|
|
57
|
-
lineHeight:
|
|
73
|
+
lineHeight: 1.3,
|
|
58
74
|
fontWeight: 600
|
|
59
75
|
},
|
|
60
76
|
Title1: {
|
|
61
77
|
fontSize: 20,
|
|
62
|
-
lineHeight:
|
|
78
|
+
lineHeight: 1.3,
|
|
79
|
+
fontWeight: 600
|
|
80
|
+
},
|
|
81
|
+
Title2: {
|
|
82
|
+
fontSize: 18,
|
|
83
|
+
lineHeight: 1.3,
|
|
63
84
|
fontWeight: 600
|
|
64
85
|
},
|
|
65
|
-
|
|
86
|
+
SubTitle1: {
|
|
87
|
+
fontSize: 16,
|
|
88
|
+
lineHeight: 1.3,
|
|
89
|
+
fontWeight: 500
|
|
90
|
+
},
|
|
91
|
+
SubTitle2: {
|
|
92
|
+
fontSize: 14,
|
|
93
|
+
lineHeight: 1.3,
|
|
94
|
+
fontWeight: 500
|
|
95
|
+
},
|
|
96
|
+
// Body Style
|
|
97
|
+
DisplayBody: {
|
|
66
98
|
fontSize: 20,
|
|
67
|
-
lineHeight:
|
|
99
|
+
lineHeight: 1.45,
|
|
68
100
|
fontWeight: 400
|
|
69
101
|
},
|
|
70
|
-
|
|
102
|
+
ArticleBody: {
|
|
103
|
+
fontSize: 18,
|
|
104
|
+
lineHeight: 1.45,
|
|
105
|
+
fontWeight: 400
|
|
106
|
+
},
|
|
107
|
+
ArticleBodyReading: {
|
|
108
|
+
fontSize: 18,
|
|
109
|
+
lineHeight: 1.55,
|
|
110
|
+
fontWeight: 400
|
|
111
|
+
},
|
|
112
|
+
Body1: {
|
|
71
113
|
fontSize: 16,
|
|
72
|
-
lineHeight:
|
|
73
|
-
fontWeight:
|
|
114
|
+
lineHeight: 1.45,
|
|
115
|
+
fontWeight: 400
|
|
74
116
|
},
|
|
75
|
-
|
|
117
|
+
Body1Reading: {
|
|
76
118
|
fontSize: 16,
|
|
77
|
-
lineHeight:
|
|
119
|
+
lineHeight: 1.6,
|
|
78
120
|
fontWeight: 400
|
|
79
121
|
},
|
|
80
|
-
|
|
122
|
+
Body2: {
|
|
81
123
|
fontSize: 14,
|
|
82
|
-
lineHeight:
|
|
83
|
-
fontWeight:
|
|
124
|
+
lineHeight: 1.45,
|
|
125
|
+
fontWeight: 400
|
|
84
126
|
},
|
|
85
|
-
|
|
127
|
+
Body2Reading: {
|
|
86
128
|
fontSize: 14,
|
|
87
|
-
lineHeight:
|
|
129
|
+
lineHeight: 1.6,
|
|
88
130
|
fontWeight: 400
|
|
89
131
|
},
|
|
90
|
-
|
|
132
|
+
Caption1: {
|
|
91
133
|
fontSize: 12,
|
|
92
|
-
lineHeight:
|
|
93
|
-
fontWeight:
|
|
134
|
+
lineHeight: 1.35,
|
|
135
|
+
fontWeight: 500
|
|
94
136
|
},
|
|
95
|
-
|
|
96
|
-
fontSize: 12,
|
|
97
|
-
lineHeight: 19,
|
|
98
|
-
fontWeight: 400
|
|
99
|
-
},
|
|
100
|
-
Caption: {
|
|
137
|
+
Caption2: {
|
|
101
138
|
fontSize: 10,
|
|
102
|
-
lineHeight:
|
|
103
|
-
fontWeight:
|
|
139
|
+
lineHeight: 1.35,
|
|
140
|
+
fontWeight: 500
|
|
104
141
|
}
|
|
105
142
|
});
|
|
106
143
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\nconst LEGACY_TYPOGRAPHY_STYLES = {\n Headline2_B: {\n fontSize: 24,\n lineHeight:
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\nconst LEGACY_TYPOGRAPHY_STYLES = {\n Headline2_B: {\n fontSize: 24,\n lineHeight: '34px',\n fontWeight: 600,\n },\n Headline3_B: {\n fontSize: 20,\n lineHeight: '26px',\n fontWeight: 600,\n },\n Headline4_B: {\n fontSize: 16,\n lineHeight: '26px',\n fontWeight: 600,\n },\n Headline4_M: {\n fontSize: 16,\n lineHeight: '26px',\n fontWeight: 400,\n },\n Body1_B: {\n fontSize: 14,\n lineHeight: '24px',\n fontWeight: 600,\n },\n Body1_M: {\n fontSize: 14,\n lineHeight: '24px',\n fontWeight: 400,\n },\n Body2_B: {\n fontSize: 12,\n lineHeight: '19px',\n fontWeight: 600,\n },\n Body2_M: {\n fontSize: 12,\n lineHeight: '19px',\n fontWeight: 400,\n },\n Caption_B: {\n fontSize: 10,\n lineHeight: '14px',\n fontWeight: 600,\n },\n} as const;\n\nexport const TYPOGRAPHY_STYLES = {\n ...LEGACY_TYPOGRAPHY_STYLES,\n // Title Style\n Display1: {\n fontSize: 48,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Display2: {\n fontSize: 40,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Display3: {\n fontSize: 32,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Headline: {\n fontSize: 24,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title1: {\n fontSize: 20,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title2: {\n fontSize: 18,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n SubTitle1: {\n fontSize: 16,\n lineHeight: 1.3,\n fontWeight: 500,\n },\n SubTitle2: {\n fontSize: 14,\n lineHeight: 1.3,\n fontWeight: 500,\n },\n // Body Style\n DisplayBody: {\n fontSize: 20,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n ArticleBody: {\n fontSize: 18,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n ArticleBodyReading: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 400,\n },\n Body1: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n Body1Reading: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n Body2: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n Body2Reading: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n Caption1: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption2: {\n fontSize: 10,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n} as const;\n\n/**\n * {@link https://github.com/orioncactus/pretendard#html-1}\n */\nexport const PRETENDARD_FONT_FAMILY =\n \"Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif\";\n"],"names":["LEGACY_TYPOGRAPHY_STYLES","Headline2_B","fontSize","lineHeight","fontWeight","Headline3_B","Headline4_B","Headline4_M","Body1_B","Body1_M","Body2_B","Body2_M","Caption_B","TYPOGRAPHY_STYLES","_objectSpread","Display1","Display2","Display3","Headline","Title1","Title2","SubTitle1","SubTitle2","DisplayBody","ArticleBody","ArticleBodyReading","Body1","Body1Reading","Body2","Body2Reading","Caption1","Caption2","PRETENDARD_FONT_FAMILY"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ var getTypographyStyles = function getTypographyStyles(typographyStyle) {
|
|
|
19
19
|
fontSize = _TYPOGRAPHY_STYLES$ty.fontSize,
|
|
20
20
|
lineHeight = _TYPOGRAPHY_STYLES$ty.lineHeight,
|
|
21
21
|
fontWeight = _TYPOGRAPHY_STYLES$ty.fontWeight;
|
|
22
|
-
return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", "
|
|
22
|
+
return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n font-weight: ", ";\n "])), _const.PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}
|
|
1
|
+
{"version":3,"file":"utils.cjs.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight};\n font-weight: ${fontWeight};\n `;\n};\n\n/**\n * 말줄임표 표시 (1줄)\n *\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n */\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/**\n * 말줄임표 표시\n *\n * line = 1 인 경우, \\\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n *\n * line > 1 인 경우, \\\n * overflow: hidden; \\\n * text-overflow: ellipsis; \\\n * display: -webkit-box; \\\n * -webkit-box-orient: vertical; \\\n * -webkit-line-clamp: ${line};\n */\nexport const ellipsis = (line = 1) => {\n if (line === 1) {\n return textEllipsis;\n }\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${line};\n `;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAOb;AACA;AACA;AACA;;AAEE;;;;AAEA;AAMF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACsC;;AAElC;AACF;;AASF;;;;"}
|
|
@@ -13,7 +13,7 @@ var getTypographyStyles = function getTypographyStyles(typographyStyle) {
|
|
|
13
13
|
fontSize = _TYPOGRAPHY_STYLES$ty.fontSize,
|
|
14
14
|
lineHeight = _TYPOGRAPHY_STYLES$ty.lineHeight,
|
|
15
15
|
fontWeight = _TYPOGRAPHY_STYLES$ty.fontWeight;
|
|
16
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", "
|
|
16
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n font-weight: ", ";\n "])), PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}
|
|
1
|
+
{"version":3,"file":"utils.esm.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight};\n font-weight: ${fontWeight};\n `;\n};\n\n/**\n * 말줄임표 표시 (1줄)\n *\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n */\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/**\n * 말줄임표 표시\n *\n * line = 1 인 경우, \\\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n *\n * line > 1 인 경우, \\\n * overflow: hidden; \\\n * text-overflow: ellipsis; \\\n * display: -webkit-box; \\\n * -webkit-box-orient: vertical; \\\n * -webkit-line-clamp: ${line};\n */\nexport const ellipsis = (line = 1) => {\n if (line === 1) {\n return textEllipsis;\n }\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${line};\n `;\n};\n"],"names":[],"mappings":";;;;;AAAa;AAOb;AACA;AACA;AACA;;AAEE;;;;AAEA;AAMF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACsC;;AAElC;AACF;;AASF;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remember-web/mixin",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Remember Web Mixins",
|
|
5
5
|
"homepage": "https://dramancompany.github.io/remember-web-packages/",
|
|
6
6
|
"author": "Remember",
|
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "rollup -c && yarn fix:dts-alias",
|
|
18
18
|
"fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
|
|
19
|
-
"type-check": "tsc -p ./tsconfig.cli.json"
|
|
20
|
-
"lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache"
|
|
19
|
+
"type-check": "tsc -p ./tsconfig.cli.json"
|
|
21
20
|
},
|
|
22
21
|
"files": [
|
|
23
22
|
"dist",
|
|
@@ -47,8 +46,6 @@
|
|
|
47
46
|
"@rollup/plugin-babel": "^6.0.4",
|
|
48
47
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
49
48
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
50
|
-
"eslint": "^8.57.0",
|
|
51
|
-
"eslint-config-rui": "workspace:*",
|
|
52
49
|
"react": "^18.2.0",
|
|
53
50
|
"rollup": "^4.14.1",
|
|
54
51
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type { Meta } from '@storybook/react';
|
|
2
1
|
import { useRUI } from '@remember-web/mixin';
|
|
3
2
|
import { Grid, Typography } from '@remember-web/primitive';
|
|
3
|
+
import type { Meta } from '@storybook/react';
|
|
4
4
|
|
|
5
5
|
import type { RUIColorVariable, ThemeType } from './types';
|
|
6
|
-
import * as colors from './variables';
|
|
7
6
|
import { getHexFromRuiCssVariable, getRgba } from './utils';
|
|
7
|
+
import * as colors from './variables';
|
|
8
8
|
|
|
9
9
|
const meta = {
|
|
10
10
|
title: 'Mixins/Colors',
|
|
@@ -43,7 +43,6 @@ const ColorChip = ({
|
|
|
43
43
|
|
|
44
44
|
export const Overview = {
|
|
45
45
|
render: () => {
|
|
46
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
47
46
|
const { currentTheme } = useRUI();
|
|
48
47
|
|
|
49
48
|
return (
|
package/src/colors/utils.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { isSSR } from '@remember-web/shared';
|
|
2
2
|
|
|
3
|
+
import { RUI_COLOR_THEME } from './theme';
|
|
3
4
|
import type {
|
|
4
5
|
ColorVariable,
|
|
5
6
|
ColorVariableName,
|
|
6
7
|
RUIColorVariable,
|
|
7
8
|
ThemeType,
|
|
8
9
|
} from './types';
|
|
9
|
-
import { RUI_COLOR_THEME } from './theme';
|
|
10
10
|
|
|
11
11
|
/** var(color)로 된 string을 color로 변경해줄 때 사용 */
|
|
12
12
|
export function getColorVariableName<V extends string = string>(
|
|
@@ -44,7 +44,7 @@ export function hexToRgb(colorHex: string) {
|
|
|
44
44
|
|
|
45
45
|
const [, r, g, b] = hexWithoutHash
|
|
46
46
|
.split(/(..)(..)(..)/)
|
|
47
|
-
.map((hex) => parseInt(hex, 16));
|
|
47
|
+
.map((hex) => Number.parseInt(hex, 16));
|
|
48
48
|
|
|
49
49
|
return `${r},${g},${b}`;
|
|
50
50
|
}
|
package/src/provider/styles.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import { createGlobalStyle, css } from 'styled-components';
|
|
4
4
|
|
|
5
|
+
import { type ColorThemeType, type ThemeType, hexToRgb } from '@/colors';
|
|
5
6
|
import { RUI_COLOR_THEME } from '@/colors/theme';
|
|
6
|
-
import { hexToRgb, type ColorThemeType, type ThemeType } from '@/colors';
|
|
7
7
|
|
|
8
8
|
export const RUIGlobalStyle = createGlobalStyle<{
|
|
9
9
|
customMixins?: ColorThemeType;
|
package/src/typography/const.ts
CHANGED
|
@@ -3,102 +3,139 @@
|
|
|
3
3
|
const LEGACY_TYPOGRAPHY_STYLES = {
|
|
4
4
|
Headline2_B: {
|
|
5
5
|
fontSize: 24,
|
|
6
|
-
lineHeight:
|
|
6
|
+
lineHeight: '34px',
|
|
7
7
|
fontWeight: 600,
|
|
8
8
|
},
|
|
9
9
|
Headline3_B: {
|
|
10
10
|
fontSize: 20,
|
|
11
|
-
lineHeight:
|
|
11
|
+
lineHeight: '26px',
|
|
12
12
|
fontWeight: 600,
|
|
13
13
|
},
|
|
14
14
|
Headline4_B: {
|
|
15
15
|
fontSize: 16,
|
|
16
|
-
lineHeight:
|
|
16
|
+
lineHeight: '26px',
|
|
17
17
|
fontWeight: 600,
|
|
18
18
|
},
|
|
19
19
|
Headline4_M: {
|
|
20
20
|
fontSize: 16,
|
|
21
|
-
lineHeight:
|
|
21
|
+
lineHeight: '26px',
|
|
22
22
|
fontWeight: 400,
|
|
23
23
|
},
|
|
24
24
|
Body1_B: {
|
|
25
25
|
fontSize: 14,
|
|
26
|
-
lineHeight:
|
|
26
|
+
lineHeight: '24px',
|
|
27
27
|
fontWeight: 600,
|
|
28
28
|
},
|
|
29
29
|
Body1_M: {
|
|
30
30
|
fontSize: 14,
|
|
31
|
-
lineHeight:
|
|
31
|
+
lineHeight: '24px',
|
|
32
32
|
fontWeight: 400,
|
|
33
33
|
},
|
|
34
34
|
Body2_B: {
|
|
35
35
|
fontSize: 12,
|
|
36
|
-
lineHeight:
|
|
36
|
+
lineHeight: '19px',
|
|
37
37
|
fontWeight: 600,
|
|
38
38
|
},
|
|
39
39
|
Body2_M: {
|
|
40
40
|
fontSize: 12,
|
|
41
|
-
lineHeight:
|
|
41
|
+
lineHeight: '19px',
|
|
42
42
|
fontWeight: 400,
|
|
43
43
|
},
|
|
44
44
|
Caption_B: {
|
|
45
45
|
fontSize: 10,
|
|
46
|
-
lineHeight:
|
|
46
|
+
lineHeight: '14px',
|
|
47
47
|
fontWeight: 600,
|
|
48
48
|
},
|
|
49
49
|
} as const;
|
|
50
50
|
|
|
51
51
|
export const TYPOGRAPHY_STYLES = {
|
|
52
52
|
...LEGACY_TYPOGRAPHY_STYLES,
|
|
53
|
+
// Title Style
|
|
54
|
+
Display1: {
|
|
55
|
+
fontSize: 48,
|
|
56
|
+
lineHeight: 1.3,
|
|
57
|
+
fontWeight: 700,
|
|
58
|
+
},
|
|
59
|
+
Display2: {
|
|
60
|
+
fontSize: 40,
|
|
61
|
+
lineHeight: 1.3,
|
|
62
|
+
fontWeight: 700,
|
|
63
|
+
},
|
|
64
|
+
Display3: {
|
|
65
|
+
fontSize: 32,
|
|
66
|
+
lineHeight: 1.3,
|
|
67
|
+
fontWeight: 700,
|
|
68
|
+
},
|
|
53
69
|
Headline: {
|
|
54
70
|
fontSize: 24,
|
|
55
|
-
lineHeight:
|
|
71
|
+
lineHeight: 1.3,
|
|
56
72
|
fontWeight: 600,
|
|
57
73
|
},
|
|
58
74
|
Title1: {
|
|
59
75
|
fontSize: 20,
|
|
60
|
-
lineHeight:
|
|
76
|
+
lineHeight: 1.3,
|
|
77
|
+
fontWeight: 600,
|
|
78
|
+
},
|
|
79
|
+
Title2: {
|
|
80
|
+
fontSize: 18,
|
|
81
|
+
lineHeight: 1.3,
|
|
61
82
|
fontWeight: 600,
|
|
62
83
|
},
|
|
63
|
-
|
|
84
|
+
SubTitle1: {
|
|
85
|
+
fontSize: 16,
|
|
86
|
+
lineHeight: 1.3,
|
|
87
|
+
fontWeight: 500,
|
|
88
|
+
},
|
|
89
|
+
SubTitle2: {
|
|
90
|
+
fontSize: 14,
|
|
91
|
+
lineHeight: 1.3,
|
|
92
|
+
fontWeight: 500,
|
|
93
|
+
},
|
|
94
|
+
// Body Style
|
|
95
|
+
DisplayBody: {
|
|
64
96
|
fontSize: 20,
|
|
65
|
-
lineHeight:
|
|
97
|
+
lineHeight: 1.45,
|
|
66
98
|
fontWeight: 400,
|
|
67
99
|
},
|
|
68
|
-
|
|
100
|
+
ArticleBody: {
|
|
101
|
+
fontSize: 18,
|
|
102
|
+
lineHeight: 1.45,
|
|
103
|
+
fontWeight: 400,
|
|
104
|
+
},
|
|
105
|
+
ArticleBodyReading: {
|
|
106
|
+
fontSize: 18,
|
|
107
|
+
lineHeight: 1.55,
|
|
108
|
+
fontWeight: 400,
|
|
109
|
+
},
|
|
110
|
+
Body1: {
|
|
69
111
|
fontSize: 16,
|
|
70
|
-
lineHeight:
|
|
71
|
-
fontWeight:
|
|
112
|
+
lineHeight: 1.45,
|
|
113
|
+
fontWeight: 400,
|
|
72
114
|
},
|
|
73
|
-
|
|
115
|
+
Body1Reading: {
|
|
74
116
|
fontSize: 16,
|
|
75
|
-
lineHeight:
|
|
117
|
+
lineHeight: 1.6,
|
|
76
118
|
fontWeight: 400,
|
|
77
119
|
},
|
|
78
|
-
|
|
120
|
+
Body2: {
|
|
79
121
|
fontSize: 14,
|
|
80
|
-
lineHeight:
|
|
81
|
-
fontWeight:
|
|
122
|
+
lineHeight: 1.45,
|
|
123
|
+
fontWeight: 400,
|
|
82
124
|
},
|
|
83
|
-
|
|
125
|
+
Body2Reading: {
|
|
84
126
|
fontSize: 14,
|
|
85
|
-
lineHeight:
|
|
127
|
+
lineHeight: 1.6,
|
|
86
128
|
fontWeight: 400,
|
|
87
129
|
},
|
|
88
|
-
|
|
130
|
+
Caption1: {
|
|
89
131
|
fontSize: 12,
|
|
90
|
-
lineHeight:
|
|
91
|
-
fontWeight:
|
|
132
|
+
lineHeight: 1.35,
|
|
133
|
+
fontWeight: 500,
|
|
92
134
|
},
|
|
93
|
-
|
|
94
|
-
fontSize: 12,
|
|
95
|
-
lineHeight: 19,
|
|
96
|
-
fontWeight: 400,
|
|
97
|
-
},
|
|
98
|
-
Caption: {
|
|
135
|
+
Caption2: {
|
|
99
136
|
fontSize: 10,
|
|
100
|
-
lineHeight:
|
|
101
|
-
fontWeight:
|
|
137
|
+
lineHeight: 1.35,
|
|
138
|
+
fontWeight: 500,
|
|
102
139
|
},
|
|
103
140
|
} as const;
|
|
104
141
|
|
package/src/typography/utils.ts
CHANGED
|
@@ -15,7 +15,7 @@ export const getTypographyStyles = (typographyStyle: TypographyStyle) => {
|
|
|
15
15
|
return css`
|
|
16
16
|
font-family: ${PRETENDARD_FONT_FAMILY};
|
|
17
17
|
font-size: ${fontSize}px;
|
|
18
|
-
line-height: ${lineHeight}
|
|
18
|
+
line-height: ${lineHeight};
|
|
19
19
|
font-weight: ${fontWeight};
|
|
20
20
|
`;
|
|
21
21
|
};
|