@team-monolith/cds 1.61.1 → 1.61.3

package/@types/emotion.d.ts

@@ -106,6 +106,20 @@ interface CodleColors {
     ebookAlt: string;
     makecode: string;
     makecodeAlt: string;
+    decorativeRed: string;
+    decorativePink: string;
+    decorativeAmber: string;
+    decorativeGrass: string;
+    decorativeGreen: string;
+    decorativeBlue: string;
+    decorativeIndigo: string;
+    decorativePurple: string;
+    decorativeBrown: string;
+    decorativeCopper: string;
+    decorativeGold: string;
+    decorativeSilver: string;
+    decorativeGray: string;
+    decorativeBlack: string;
   };
   blanket: {
     neutral: string;

package/dist/CodleDesignSystemProvider.js

@@ -111,6 +111,20 @@ export const light = {
             ebookAlt: "#E0F2FF",
             makecode: "#AA278F",
             makecodeAlt: "#FFE0F9",
+            decorativeRed: "#D73152",
+            decorativePink: "#D13D78",
+            decorativeAmber: "#CC4827",
+            decorativeGrass: "#6E7B3F",
+            decorativeGreen: "#26864B",
+            decorativeBlue: "#0076D0",
+            decorativeIndigo: "#5863FF",
+            decorativePurple: "#9A3BBC",
+            decorativeBrown: "#996C49",
+            decorativeCopper: "#8A6470",
+            decorativeGold: "#876E3F",
+            decorativeSilver: "#6A7781",
+            decorativeGray: "#747474",
+            decorativeBlack: "#474658",
         },
         blanket: {
             neutral: COLOR.alpha030,
@@ -228,6 +242,20 @@ export const dark = {
             ebookAlt: "#475966",
             makecode: "#AA278F",
             makecodeAlt: "#664760",
+            decorativeRed: "#D73152",
+            decorativePink: "#D13D78",
+            decorativeAmber: "#CC4827",
+            decorativeGrass: "#6E7B3F",
+            decorativeGreen: "#26864B",
+            decorativeBlue: "#0076D0",
+            decorativeIndigo: "#5863FF",
+            decorativePurple: "#9A3BBC",
+            decorativeBrown: "#996C49",
+            decorativeCopper: "#8A6470",
+            decorativeGold: "#876E3F",
+            decorativeSilver: "#6A7781",
+            decorativeGray: "#747474",
+            decorativeBlack: "#474658",
         },
         blanket: {
             neutral: COLOR.alphaf20,

package/dist/components/Book/Book.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 export interface BookProps {
     className?: string;
     title?: string;
-    chapter?: string;
-    courseType?: string;
+    subtitle?: string;
+    subtitleBold?: string;
     isHidden?: boolean;
     buttons?: React.ReactNode;
     /** 전달하면 controlled component로 애니메이션을 제어할 수 있다 */

package/dist/components/Book/Book.js

@@ -73,7 +73,7 @@ const CARD_COLOR_PALETTE = (theme) => ({
  * @returns
  */
 function Book(props, ref) {
-    const { className, title, chapter, courseType, coverColor, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, } = props;
+    const { className, title, subtitle, subtitleBold, coverColor, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, } = props;
     const theme = useTheme();
     const [open, setOpen] = useState(false);
     return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== undefined ? controlledOpen : open)
@@ -97,7 +97,9 @@ function Book(props, ref) {
 
                 width: 24px;
                 height: 24px;
-              ` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Chapter, { children: chapter }), _jsx(CourseType, { children: courseType }), _jsx(CoverTitle, { children: title })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
+              ` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Subtitle, { children: subtitle }), _jsx(Subtitle, Object.assign({ css: css `
+              font-weight: 800;
+            ` }, { children: subtitleBold })), _jsx(CoverTitle, { children: title })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
                             // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
                             e.stopPropagation();
                         } }, { children: buttons }))] })), _jsx(Shelf, {})] })));
@@ -224,7 +226,7 @@ const Hide = styled.div(({ theme }) => css `
 
     z-index: ${ZINDEX_HIDE};
   `);
-const Chapter = styled.div(({ theme }) => css `
+const Subtitle = styled.div(({ theme }) => css `
     color: ${CARD_COLOR_PALETTE(theme).text};
 
     /* Default/Label/12px-Md */
@@ -233,20 +235,6 @@ const Chapter = styled.div(({ theme }) => css `
     font-style: normal;
     font-weight: 500;
     line-height: 16px; /* 133.333% */
-
-    opacity: 0.8;
-  `);
-const CourseType = styled.div(({ theme }) => css `
-    color: ${CARD_COLOR_PALETTE(theme).text};
-
-    /* Default/Label/12px-Eb */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 800;
-    line-height: 16px; /* 133.333% */
-
-    opacity: 0.8;
   `);
 const CoverIcon = styled.div(({ theme }) => css `
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.61.1",
+  "version": "1.61.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,