@remember-web/mixin 0.1.14 → 0.2.0

package/dist/src/typography/const.d.ts

@@ -1,97 +1,132 @@
 export declare const TYPOGRAPHY_STYLES: {
+    readonly Display1: {
+        readonly fontSize: 48;
+        readonly lineHeight: 1.3;
+        readonly fontWeight: 700;
+    };
+    readonly Display2: {
+        readonly fontSize: 40;
+        readonly lineHeight: 1.3;
+        readonly fontWeight: 700;
+    };
+    readonly Display3: {
+        readonly fontSize: 32;
+        readonly lineHeight: 1.3;
+        readonly fontWeight: 700;
+    };
     readonly Headline: {
         readonly fontSize: 24;
-        readonly lineHeight: 34;
+        readonly lineHeight: 1.3;
         readonly fontWeight: 600;
     };
     readonly Title1: {
         readonly fontSize: 20;
-        readonly lineHeight: 26;
+        readonly lineHeight: 1.3;
         readonly fontWeight: 600;
     };
-    readonly Display: {
+    readonly Title2: {
+        readonly fontSize: 18;
+        readonly lineHeight: 1.3;
+        readonly fontWeight: 600;
+    };
+    readonly Subtitle1: {
+        readonly fontSize: 16;
+        readonly lineHeight: 1.3;
+        readonly fontWeight: 500;
+    };
+    readonly Subtitle2: {
+        readonly fontSize: 14;
+        readonly lineHeight: 1.3;
+        readonly fontWeight: 500;
+    };
+    readonly DisplayBody: {
         readonly fontSize: 20;
-        readonly lineHeight: 26;
+        readonly lineHeight: 1.45;
         readonly fontWeight: 400;
     };
-    readonly Title2: {
+    readonly ArticleBody: {
+        readonly fontSize: 18;
+        readonly lineHeight: 1.45;
+        readonly fontWeight: 400;
+    };
+    readonly ArticleBodyReading: {
+        readonly fontSize: 18;
+        readonly lineHeight: 1.55;
+        readonly fontWeight: 400;
+    };
+    readonly Body1: {
         readonly fontSize: 16;
-        readonly lineHeight: 26;
-        readonly fontWeight: 600;
+        readonly lineHeight: 1.45;
+        readonly fontWeight: 400;
     };
-    readonly ArticleBody: {
+    readonly Body1Reading: {
         readonly fontSize: 16;
-        readonly lineHeight: 26;
+        readonly lineHeight: 1.6;
         readonly fontWeight: 400;
     };
-    readonly Subtitle1: {
+    readonly Body2: {
         readonly fontSize: 14;
-        readonly lineHeight: 24;
-        readonly fontWeight: 600;
+        readonly lineHeight: 1.45;
+        readonly fontWeight: 400;
     };
-    readonly Body1: {
+    readonly Body2Reading: {
         readonly fontSize: 14;
-        readonly lineHeight: 24;
+        readonly lineHeight: 1.6;
         readonly fontWeight: 400;
     };
-    readonly Subtitle2: {
-        readonly fontSize: 12;
-        readonly lineHeight: 19;
-        readonly fontWeight: 600;
-    };
-    readonly Body2: {
+    readonly Caption1: {
         readonly fontSize: 12;
-        readonly lineHeight: 19;
-        readonly fontWeight: 400;
+        readonly lineHeight: 1.35;
+        readonly fontWeight: 500;
     };
-    readonly Caption: {
+    readonly Caption2: {
         readonly fontSize: 10;
-        readonly lineHeight: 14;
-        readonly fontWeight: 600;
+        readonly lineHeight: 1.35;
+        readonly fontWeight: 500;
     };
     readonly Headline2_B: {
         readonly fontSize: 24;
-        readonly lineHeight: 34;
+        readonly lineHeight: "34px";
         readonly fontWeight: 600;
     };
     readonly Headline3_B: {
         readonly fontSize: 20;
-        readonly lineHeight: 26;
+        readonly lineHeight: "26px";
         readonly fontWeight: 600;
     };
     readonly Headline4_B: {
         readonly fontSize: 16;
-        readonly lineHeight: 26;
+        readonly lineHeight: "26px";
         readonly fontWeight: 600;
     };
     readonly Headline4_M: {
         readonly fontSize: 16;
-        readonly lineHeight: 26;
+        readonly lineHeight: "26px";
         readonly fontWeight: 400;
     };
     readonly Body1_B: {
         readonly fontSize: 14;
-        readonly lineHeight: 24;
+        readonly lineHeight: "24px";
         readonly fontWeight: 600;
     };
     readonly Body1_M: {
         readonly fontSize: 14;
-        readonly lineHeight: 24;
+        readonly lineHeight: "24px";
         readonly fontWeight: 400;
     };
     readonly Body2_B: {
         readonly fontSize: 12;
-        readonly lineHeight: 19;
+        readonly lineHeight: "19px";
         readonly fontWeight: 600;
     };
     readonly Body2_M: {
         readonly fontSize: 12;
-        readonly lineHeight: 19;
+        readonly lineHeight: "19px";
         readonly fontWeight: 400;
     };
     readonly Caption_B: {
         readonly fontSize: 10;
-        readonly lineHeight: 14;
+        readonly lineHeight: "14px";
         readonly fontWeight: 600;
     };
 };

package/dist/src/typography/const.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../src/typography/const.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB,iOAC6L,CAAC"}
+{"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"}

package/dist/src/typography/const.esm.js

@@ -7,100 +7,137 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var LEGACY_TYPOGRAPHY_STYLES = {
   Headline2_B: {
     fontSize: 24,
-    lineHeight: 34,
+    lineHeight: '34px',
     fontWeight: 600
   },
   Headline3_B: {
     fontSize: 20,
-    lineHeight: 26,
+    lineHeight: '26px',
     fontWeight: 600
   },
   Headline4_B: {
     fontSize: 16,
-    lineHeight: 26,
+    lineHeight: '26px',
     fontWeight: 600
   },
   Headline4_M: {
     fontSize: 16,
-    lineHeight: 26,
+    lineHeight: '26px',
     fontWeight: 400
   },
   Body1_B: {
     fontSize: 14,
-    lineHeight: 24,
+    lineHeight: '24px',
     fontWeight: 600
   },
   Body1_M: {
     fontSize: 14,
-    lineHeight: 24,
+    lineHeight: '24px',
     fontWeight: 400
   },
   Body2_B: {
     fontSize: 12,
-    lineHeight: 19,
+    lineHeight: '19px',
     fontWeight: 600
   },
   Body2_M: {
     fontSize: 12,
-    lineHeight: 19,
+    lineHeight: '19px',
     fontWeight: 400
   },
   Caption_B: {
     fontSize: 10,
-    lineHeight: 14,
+    lineHeight: '14px',
     fontWeight: 600
   }
 };
 var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
+  // Title Style
+  Display1: {
+    fontSize: 48,
+    lineHeight: 1.3,
+    fontWeight: 700
+  },
+  Display2: {
+    fontSize: 40,
+    lineHeight: 1.3,
+    fontWeight: 700
+  },
+  Display3: {
+    fontSize: 32,
+    lineHeight: 1.3,
+    fontWeight: 700
+  },
   Headline: {
     fontSize: 24,
-    lineHeight: 34,
+    lineHeight: 1.3,
     fontWeight: 600
   },
   Title1: {
     fontSize: 20,
-    lineHeight: 26,
+    lineHeight: 1.3,
+    fontWeight: 600
+  },
+  Title2: {
+    fontSize: 18,
+    lineHeight: 1.3,
     fontWeight: 600
   },
-  Display: {
+  Subtitle1: {
+    fontSize: 16,
+    lineHeight: 1.3,
+    fontWeight: 500
+  },
+  Subtitle2: {
+    fontSize: 14,
+    lineHeight: 1.3,
+    fontWeight: 500
+  },
+  // Body Style
+  DisplayBody: {
     fontSize: 20,
-    lineHeight: 26,
+    lineHeight: 1.45,
     fontWeight: 400
   },
-  Title2: {
+  ArticleBody: {
+    fontSize: 18,
+    lineHeight: 1.45,
+    fontWeight: 400
+  },
+  ArticleBodyReading: {
+    fontSize: 18,
+    lineHeight: 1.55,
+    fontWeight: 400
+  },
+  Body1: {
     fontSize: 16,
-    lineHeight: 26,
-    fontWeight: 600
+    lineHeight: 1.45,
+    fontWeight: 400
   },
-  ArticleBody: {
+  Body1Reading: {
     fontSize: 16,
-    lineHeight: 26,
+    lineHeight: 1.6,
     fontWeight: 400
   },
-  Subtitle1: {
+  Body2: {
     fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 600
+    lineHeight: 1.45,
+    fontWeight: 400
   },
-  Body1: {
+  Body2Reading: {
     fontSize: 14,
-    lineHeight: 24,
+    lineHeight: 1.6,
     fontWeight: 400
   },
-  Subtitle2: {
-    fontSize: 12,
-    lineHeight: 19,
-    fontWeight: 600
-  },
-  Body2: {
+  Caption1: {
     fontSize: 12,
-    lineHeight: 19,
-    fontWeight: 400
+    lineHeight: 1.35,
+    fontWeight: 500
   },
-  Caption: {
+  Caption2: {
     fontSize: 10,
-    lineHeight: 14,
-    fontWeight: 600
+    lineHeight: 1.35,
+    fontWeight: 500
   }
 });
 

package/dist/src/typography/const.esm.js.map

@@ -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: 34,\n    fontWeight: 600,\n  },\n  Headline3_B: {\n    fontSize: 20,\n    lineHeight: 26,\n    fontWeight: 600,\n  },\n  Headline4_B: {\n    fontSize: 16,\n    lineHeight: 26,\n    fontWeight: 600,\n  },\n  Headline4_M: {\n    fontSize: 16,\n    lineHeight: 26,\n    fontWeight: 400,\n  },\n  Body1_B: {\n    fontSize: 14,\n    lineHeight: 24,\n    fontWeight: 600,\n  },\n  Body1_M: {\n    fontSize: 14,\n    lineHeight: 24,\n    fontWeight: 400,\n  },\n  Body2_B: {\n    fontSize: 12,\n    lineHeight: 19,\n    fontWeight: 600,\n  },\n  Body2_M: {\n    fontSize: 12,\n    lineHeight: 19,\n    fontWeight: 400,\n  },\n  Caption_B: {\n    fontSize: 10,\n    lineHeight: 14,\n    fontWeight: 600,\n  },\n} as const;\n\nexport const TYPOGRAPHY_STYLES = {\n  ...LEGACY_TYPOGRAPHY_STYLES,\n  Headline: {\n    fontSize: 24,\n    lineHeight: 34,\n    fontWeight: 600,\n  },\n  Title1: {\n    fontSize: 20,\n    lineHeight: 26,\n    fontWeight: 600,\n  },\n  Display: {\n    fontSize: 20,\n    lineHeight: 26,\n    fontWeight: 400,\n  },\n  Title2: {\n    fontSize: 16,\n    lineHeight: 26,\n    fontWeight: 600,\n  },\n  ArticleBody: {\n    fontSize: 16,\n    lineHeight: 26,\n    fontWeight: 400,\n  },\n  Subtitle1: {\n    fontSize: 14,\n    lineHeight: 24,\n    fontWeight: 600,\n  },\n  Body1: {\n    fontSize: 14,\n    lineHeight: 24,\n    fontWeight: 400,\n  },\n  Subtitle2: {\n    fontSize: 12,\n    lineHeight: 19,\n    fontWeight: 600,\n  },\n  Body2: {\n    fontSize: 12,\n    lineHeight: 19,\n    fontWeight: 400,\n  },\n  Caption: {\n    fontSize: 10,\n    lineHeight: 14,\n    fontWeight: 600,\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","Headline","Title1","Display","Title2","ArticleBody","Subtitle1","Body1","Subtitle2","Body2","Caption","PRETENDARD_FONT_FAMILY"],"mappings":"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"}
+{"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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"}

package/dist/src/typography/utils.cjs.js

@@ -19,7 +19,7 @@ var getTypographyStyles = function getTypographyStyles(typographyStyle) {
     fontSize = _TYPOGRAPHY_STYLES$ty.fontSize,
     lineHeight = _TYPOGRAPHY_STYLES$ty.lineHeight,
     fontWeight = _TYPOGRAPHY_STYLES$ty.fontWeight;
-  return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", "px;\n    font-weight: ", ";\n  "])), _const.PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
+  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);
 };
 
 /**

package/dist/src/typography/utils.cjs.js.map

@@ -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}px;\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;;;;"}
+{"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;;;;"}

package/dist/src/typography/utils.esm.js

@@ -13,7 +13,7 @@ var getTypographyStyles = function getTypographyStyles(typographyStyle) {
     fontSize = _TYPOGRAPHY_STYLES$ty.fontSize,
     lineHeight = _TYPOGRAPHY_STYLES$ty.lineHeight,
     fontWeight = _TYPOGRAPHY_STYLES$ty.fontWeight;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", "px;\n    font-weight: ", ";\n  "])), PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
+  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);
 };
 
 /**

package/dist/src/typography/utils.esm.js.map

@@ -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}px;\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;;"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/mixin",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "description": "Remember Web Mixins",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -16,8 +16,7 @@
   "scripts": {
     "build": "rollup -c && yarn fix:dts-alias",
     "fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
-    "type-check": "tsc -p ./tsconfig.cli.json",
-    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache"
+    "type-check": "tsc -p ./tsconfig.cli.json"
   },
   "files": [
     "dist",
@@ -47,8 +46,6 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "eslint": "^8.57.0",
-    "eslint-config-rui": "workspace:*",
     "react": "^18.2.0",
     "rollup": "^4.14.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/src/colors/color.stories.tsx

@@ -1,10 +1,10 @@
-import type { Meta } from '@storybook/react';
 import { useRUI } from '@remember-web/mixin';
 import { Grid, Typography } from '@remember-web/primitive';
+import type { Meta } from '@storybook/react';
 
 import type { RUIColorVariable, ThemeType } from './types';
-import * as colors from './variables';
 import { getHexFromRuiCssVariable, getRgba } from './utils';
+import * as colors from './variables';
 
 const meta = {
   title: 'Mixins/Colors',
@@ -43,7 +43,6 @@ const ColorChip = ({
 
 export const Overview = {
   render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { currentTheme } = useRUI();
 
     return (

package/src/colors/theme.ts

@@ -29,6 +29,7 @@ export const RUI_COLOR_THEME: RUIColorThemeType = {
     '--rui-bg-role-red': '#FFF5F5',
     '--rui-bg-secondary100': '#FFF4ED',
     '--rui-bg-highlight': '#FCF5DC',
+    '--rui-bg-tiny-highlight': '#FAEDC3',
     '--rui-bg-role-yellow': '#FFFDF5',
     '--rui-bg-role-blue': '#EDF4FF',
     '--rui-bg-role-green': '#D9FCF2',
@@ -62,6 +63,7 @@ export const RUI_COLOR_THEME: RUIColorThemeType = {
     '--rui-bg-role-red': '#381515',
     '--rui-bg-secondary100': '#331D0F',
     '--rui-bg-highlight': '#383015',
+    '--rui-bg-tiny-highlight': '#52451D',
     '--rui-bg-role-yellow': '#383015',
     '--rui-bg-role-blue': '#002861',
     '--rui-bg-role-green': '#15382E',

package/src/colors/utils.ts

@@ -1,12 +1,12 @@
 import { isSSR } from '@remember-web/shared';
 
+import { RUI_COLOR_THEME } from './theme';
 import type {
   ColorVariable,
   ColorVariableName,
   RUIColorVariable,
   ThemeType,
 } from './types';
-import { RUI_COLOR_THEME } from './theme';
 
 /** var(color)로 된 string을 color로 변경해줄 때 사용 */
 export function getColorVariableName<V extends string = string>(
@@ -44,7 +44,7 @@ export function hexToRgb(colorHex: string) {
 
   const [, r, g, b] = hexWithoutHash
     .split(/(..)(..)(..)/)
-    .map((hex) => parseInt(hex, 16));
+    .map((hex) => Number.parseInt(hex, 16));
 
   return `${r},${g},${b}`;
 }

package/src/colors/variables.ts

@@ -30,6 +30,7 @@ export const bgModal200 = 'var(--rui-bg-modal200)';
 export const bgRoleRed = 'var(--rui-bg-role-red)';
 export const bgSecondary100 = 'var(--rui-bg-secondary100)';
 export const bgHighlight = 'var(--rui-bg-highlight)';
+export const bgTinyHighlight = 'var(--rui-bg-tiny-highlight)';
 export const bgRoleYellow = 'var(--rui-bg-role-yellow)';
 export const bgRoleBlue = 'var(--rui-bg-role-blue)';
 export const bgRoleGreen = 'var(--rui-bg-role-green)';

package/src/provider/styles.ts

@@ -2,8 +2,8 @@
 
 import { createGlobalStyle, css } from 'styled-components';
 
+import { type ColorThemeType, type ThemeType, hexToRgb } from '@/colors';
 import { RUI_COLOR_THEME } from '@/colors/theme';
-import { hexToRgb, type ColorThemeType, type ThemeType } from '@/colors';
 
 export const RUIGlobalStyle = createGlobalStyle<{
   customMixins?: ColorThemeType;